midsuit
/
prasi-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip fix

This commit is contained in:
rizrmd 2024-02-07 09:17:38 -07:00
parent 1ac69b0409
commit 523c932541
13 changed files with 103 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.gitignore vendored Normal file → Executable file
View File

24
comps/custom/Card.tsx
View File

@ -71,7 +71,7 @@ export const Card: FC<{
} }
return ( return (
<card.Card className="c-flex c-flex-1"> <card.Card className="c-flex c-flex-1 c-items-center">
<div className={cn("c-p-3 c-text-[14px] c-flex-1")}> <div className={cn("c-p-3 c-text-[14px] c-flex-1")}>
{!!title && (title.left || title.right) && ( {!!title && (title.left || title.right) && (
<div className="c-tracking-tight c-text-sm c-font-medium c-flex c-justify-between c-space-x-1 mb-1 c-items-center"> <div className="c-tracking-tight c-text-sm c-font-medium c-flex c-justify-between c-space-x-1 mb-1 c-items-center">
@ -81,16 +81,18 @@ export const Card: FC<{
)} )}
</div> </div>
)} )}
<card.CardTitle className="c-whitespace-nowrap pb-1 h-[28px] c-overflow-hidden"> {!!value && (
{local.status_value === "ready" ? ( <card.CardTitle className="c-whitespace-nowrap pb-1 h-[28px] c-overflow-hidden">
formatObject(local.value) {local.status_value === "ready" ? (
) : ( formatObject(local.value)
<div className="flex flex-col space-y-1"> ) : (
<Skeleton className="h-[10px] c-w-[50px]" /> <div className="flex flex-col space-y-1">
<Skeleton className="h-[10px] c-w-[40px]" /> <Skeleton className="h-[10px] c-w-[50px]" />
</div> <Skeleton className="h-[10px] c-w-[40px]" />
)} </div>
</card.CardTitle> )}
</card.CardTitle>
)}
<card.CardDescription className="c-text-xs c-whitespace-pre-wrap"> <card.CardDescription className="c-text-xs c-whitespace-pre-wrap">
{local.status_desc === "ready" ? ( {local.status_desc === "ready" ? (
formatObject(local.desc) formatObject(local.desc)

85
comps/custom/Detail.tsx
View File

@ -2,6 +2,8 @@ import { useLocal } from "@/utils/use-local";
import { cx } from "class-variance-authority"; import { cx } from "class-variance-authority";
import { FC, useEffect } from "react"; import { FC, useEffect } from "react";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { ArrowRight, ArrowRightCircle, ChevronRight } from "lucide-react";
import { IconRight } from "react-day-picker";
export const Detail: FC<{ export const Detail: FC<{
detail: (item: any) => Record<string, [string, string, string]>; detail: (item: any) => Record<string, [string, string, string]>;
@ -70,10 +72,15 @@ export const Detail: FC<{
if (mode === "standard") { if (mode === "standard") {
return ( return (
<div key={idx} className="c-flex c-flex-col c-items-stretch mb-2"> <div key={idx} className="c-flex c-flex-col c-items-stretch">
<div className="c-flex c-font-bold">{label}</div> <div className="c-flex c-font-bold">{label}</div>
<div className="c-flex"> <div className="c-flex">
<Linkable sample={sample} link={link} status={local.status} /> <Linkable
sample={sample}
mode={mode}
link={link}
status={local.status}
/>
</div> </div>
</div> </div>
); );
@ -81,13 +88,29 @@ export const Detail: FC<{
return ( return (
<div <div
key={idx} key={idx}
className="c-flex c-flex-row c-items-center mb-1 border-b" className={cx(
"c-flex c-flex-row c-items-center",
!is_first && "border-t",
css`
min-height: 30px;
`,
isMobile && "c-justify-between"
)}
> >
<div className="c-flex c-font-bold c-min-w-[30%] c-overflow-hidden c-text-sm"> <div className="c-flex c-font-bold c-min-w-[30%] c-overflow-hidden c-text-sm">
{label} {label}
</div> </div>
<div className={cx("c-flex c-flex-1 c-ml-2 items-center")}> <div
<Linkable sample={sample} link={link} status={local.status} /> className={cx("c-flex c-flex-1 c-ml-2 c-flex-col c-items-end ")}
>
<div>
<Linkable
mode={mode}
sample={sample}
link={link}
status={local.status}
/>
</div>
</div> </div>
</div> </div>
); );
@ -103,7 +126,12 @@ export const Detail: FC<{
> >
<div className={"c-flex c-font-bold"}>{label}</div> <div className={"c-flex c-font-bold"}>{label}</div>
<div className="c-flex"> <div className="c-flex">
<Linkable sample={sample} link={link} status={local.status} /> <Linkable
mode={mode}
sample={sample}
link={link}
status={local.status}
/>
</div> </div>
</div> </div>
); );
@ -116,8 +144,9 @@ export const Detail: FC<{
const Linkable: FC<{ const Linkable: FC<{
sample?: string; sample?: string;
link?: string; link?: string;
mode: "standard" | "compact" | "inline";
status: "init" | "loading" | "ready"; status: "init" | "loading" | "ready";
}> = ({ sample, link, status }) => { }> = ({ sample, link, status, mode }) => {
const loading = ( const loading = (
<Skeleton <Skeleton
className={cx( className={cx(
@ -136,7 +165,13 @@ const Linkable: FC<{
return ( return (
<div <div
className="c-flex-1 c-px-2 c-my-1 c-rounded-md c-border c-flex c-items-center cursor-pointer" className={cx(
"c-flex-1 c-my-1 c-px-2 c-rounded-md c-border c-flex c-items-center cursor-pointer",
css`
margin-left: -4px;
`,
mode !== "standard" && "text-sm"
)}
onClick={() => { onClick={() => {
if (!isEditor) { if (!isEditor) {
navigate(link); navigate(link);
@ -150,11 +185,11 @@ const Linkable: FC<{
"c-flex-1", "c-flex-1",
css` css`
line-height: 1.1; line-height: 1.1;
padding: 5px 0px; padding: 3px 0px;
` `
)} )}
> >
{sample || '-'} {sample || "-"}
</div> </div>
</> </>
) : ( ) : (
@ -171,21 +206,23 @@ const Linkable: FC<{
{loading} {loading}
</div> </div>
)} )}
<svg <div
width="15" className={cx(
height="15" "c-flex c-items-center c-justify-center",
viewBox="0 0 15 15" css`
fill="none" width: 20px;
className="c-ml-2" height: 80%;
xmlns="http://www.w3.org/2000/svg" padding: 0px;
margin: 0px;
margin-left: 10px;
margin-right: -5px;
border-left: 1px solid #ececeb;
padding-left: 3px;
`
)}
> >
<path <ArrowRight width={12} height={12} />
d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" </div>
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</div> </div>
); );
}; };

32
comps/custom/Tab.tsx
View File

@ -18,11 +18,14 @@ export const Tab: FC<{
}> = ({ tabs, active, body, PassProp, on_load }) => { }> = ({ tabs, active, body, PassProp, on_load }) => {
const local = useLocal( const local = useLocal(
{ {
active, activeIndex: active,
count: [] as (number | string)[], count: [] as (number | string)[],
mode: "number" as "number" | "hash",
status: "init" as "init" | "load" | "ready", status: "init" as "init" | "load" | "ready",
}, },
() => { () => {
if (local.mode === "hash") {
}
if (local.status === "init") { if (local.status === "init") {
if (typeof on_load === "function" && !isEditor) { if (typeof on_load === "function" && !isEditor) {
local.status = "load"; local.status = "load";
@ -46,14 +49,25 @@ export const Tab: FC<{
const all_tabs = tabs({ count: local.count || [] }); const all_tabs = tabs({ count: local.count || [] });
if (!parseInt(local.active)) { if (local.activeIndex === "#") {
local.active = "0"; local.mode = "hash";
}
if (!parseInt(local.activeIndex)) {
if (local.mode === "hash") {
local.activeIndex = location.hash.substring(1);
if (!parseInt(local.activeIndex)) {
local.activeIndex = "0";
}
} else {
local.activeIndex = "0";
}
} }
return ( return (
<div className="c-flex c-flex-1 c-w-full c-flex-col c-items-stretch"> <div className="c-flex c-flex-1 c-w-full c-flex-col c-items-stretch">
<Tabs <Tabs
value={local.active} value={local.activeIndex}
className={cx( className={cx(
css` css`
padding: 0; padding: 0;
@ -84,7 +98,7 @@ export const Tab: FC<{
<TabsTrigger <TabsTrigger
value={idx + ""} value={idx + ""}
onClick={() => { onClick={() => {
local.active = idx.toString(); local.activeIndex = idx.toString();
local.render(); local.render();
if (e.navigate) { if (e.navigate) {
navigate(e.navigate); navigate(e.navigate);
@ -108,7 +122,7 @@ export const Tab: FC<{
"c-p-1 c-h-10 c-flex c-items-center", "c-p-1 c-h-10 c-flex c-items-center",
e.width ? "" : " c-flex-1 ", e.width ? "" : " c-flex-1 ",
e.count ? " c-justify-between" : "", e.count ? " c-justify-between" : "",
local.active === idx.toString() local.activeIndex === idx.toString()
? css` ? css`
border-bottom: 2px solid border-bottom: 2px solid
${e.color ? e.color : "#3c82f6"}; ${e.color ? e.color : "#3c82f6"};
@ -116,7 +130,9 @@ export const Tab: FC<{
: "border-b-transparent" : "border-b-transparent"
)} )}
> >
<div className={cx("c-mr-1 c-flex-1 c-px-1 c-flex")}>{e.label}</div> <div className={cx("c-mr-1 c-flex-1 c-px-1 c-flex")}>
{e.label}
</div>
{has_count && ( {has_count && (
<div <div
className={cx( className={cx(
@ -138,7 +154,7 @@ export const Tab: FC<{
</TabsList> </TabsList>
</Tabs> </Tabs>
<div className="c-flex-1 c-flex c-flex-col"> <div className="c-flex-1 c-flex c-flex-col">
<PassProp activeIndex={parseInt(local.active)}>{body}</PassProp> <PassProp activeIndex={parseInt(local.activeIndex)}>{body}</PassProp>
</div> </div>
</div> </div>
); );

3
comps/form/Field.tsx
View File

@ -83,6 +83,7 @@ export const Field: FC<{
local.render(); local.render();
(async () => { (async () => {
const res = await slider_options(); const res = await slider_options();
local.slider.opt = res; local.slider.opt = res;
local.render(); local.render();
})(); })();
@ -144,7 +145,7 @@ export const Field: FC<{
min={local.slider.opt.min.value} min={local.slider.opt.min.value}
max={local.slider.opt.max.value} max={local.slider.opt.max.value}
/> />
<div className="c-w-full c-bg-slate-200 c-mx-auto c-text-center"> <div className="c-w-full c-mx-auto c-text-center">
{local.slider.value} {local.slider.value}
</div> </div>
</div> </div>

4
comps/form/InputMoney/index.tsx
View File

@ -44,13 +44,11 @@ export const InputMoney: FC<{
}; };
export const formatMoney = (num: any) => { export const formatMoney = (num: any) => {
// add comma
if (!!num) { if (!!num) {
let str = num; let str = num;
if (typeof num === "number") str = num.toString(); if (typeof num === "number") str = num.toString();
if (typeof str === "string") if (typeof str === "string")
return str.replace(/\B(?=(\d{3})+(?!\d))/g, "."); return str.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
return "";
} }
return "-";
}; };

0
comps/form/Slider/types.ts Normal file → Executable file
View File

2
comps/ui/button.tsx
View File

@ -46,7 +46,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
<Comp <Comp
className={cn( className={cn(
buttonVariants({ variant, size, className }), buttonVariants({ variant, size, className }),
`btn-${variant || "default"} c-transition-all c-duration-300` `btn-${variant || "default"} btn c-transition-all c-duration-300`
)} )}
ref={ref} ref={ref}
{...props} {...props}

0
comps/ui/slider.tsx Normal file → Executable file
View File

0
exports.tsx Normal file → Executable file
View File

0
utils/date.ts Normal file → Executable file
View File

1
utils/globals.d.ts vendored
View File

@ -1,4 +1,3 @@
declare var db: any;
declare var isEditor: boolean; declare var isEditor: boolean;
declare var isMobile: boolean; declare var isMobile: boolean;
declare var isDesktop: boolean; declare var isDesktop: boolean;

2
utils/init.ts
View File

@ -5,7 +5,7 @@ if (typeof isEditor === "undefined") {
location.pathname.startsWith("/ed") location.pathname.startsWith("/ed")
) { ) {
w.isEditor = true; w.isEditor = true;
} else { } else {
w.isEditor = false; w.isEditor = false;
} }
} }