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

wip fix

This commit is contained in:
Rizky 2024-03-05 12:29:18 +07:00
parent 0e7c9e5adc
commit cbf5d2d877
3 changed files with 115 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx
View File

@ -60,51 +60,100 @@ export const EdPropPopoverForm: FC<{
closing && "hidden" closing && "hidden"
)} )}
> >
<div className="px-2 py-1 flex space-x-1"> <div className="flex justify-between px-2 py-1">
{[ <div className="flex space-x-1">
{ label: "TXT", type: "text" }, {[
{ label: "OPT", type: "option" }, { label: "TXT", type: "text" },
{ label: "JSX", type: "content-element" }, { label: "OPT", type: "option" },
].map((e) => { { label: "JSX", type: "content-element" },
return ( ].map((e) => {
<div return (
key={e.type} <div
className={cx( key={e.type}
type === e.type className={cx(
? "bg-blue-500 text-white" type === e.type
: "hover:bg-blue-100", ? "bg-blue-500 text-white"
" px-2 cursor-pointer" : "hover:bg-blue-100",
)} " px-2 cursor-pointer"
onClick={() => { )}
if (e.type === "content-element") { onClick={() => {
mprop.doc?.transact(() => { if (e.type === "content-element") {
mprop.doc?.transact(() => {
mmeta.set("type", e.type as any);
if (!mprop.get("content")) {
const json = {
id: createId(),
name: name,
type: "item",
dim: { w: "full", h: "full" },
childs: [],
adv: {
css: "",
},
} as IItem;
const map = new Y.Map() as MItem;
syncronize(map as any, fillID(json));
mprop.set("content", map);
}
});
} else {
mmeta.set("type", e.type as any); mmeta.set("type", e.type as any);
if (!mprop.get("content")) { }
const json = { propPopover.render();
id: createId(), }}
name: name, >
type: "item", {e.label}
dim: { w: "full", h: "full" }, </div>
childs: [], );
adv: { })}
css: "", </div>
},
} as IItem; {type === "text" && (
const map = new Y.Map() as MItem; <div
syncronize(map as any, fillID(json)); className="flex cursor-pointer items-center space-x-1 select-none"
mprop.set("content", map); onClick={() => {
} mprop.doc?.transact(() => {
}); (mprop.parent as any)?.forEach((p: any, k: string) => {
} else { console.log(k, p);
mmeta.set("type", e.type as any);
} if (k === name) {
propPopover.render(); p.set("is_name", !p.get("is_name"));
}} } else {
p.set("is_name", false);
}
});
});
}}
>
<span
className={cx(
css`
width: 17px;
`,
mprop.get("is_name") && "text-green-500"
)}
> >
{e.label} {!mprop.get("is_name") ? (
</div> <svg
); xmlns="http://www.w3.org/2000/svg"
})} viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M8 7C5.23858 7 3 9.23858 3 12C3 14.7614 5.23858 17 8 17H16C18.7614 17 21 14.7614 21 12C21 9.23858 18.7614 7 16 7H8ZM8 5H16C19.866 5 23 8.13401 23 12C23 15.866 19.866 19 16 19H8C4.13401 19 1 15.866 1 12C1 8.13401 4.13401 5 8 5ZM8 15C6.34315 15 5 13.6569 5 12C5 10.3431 6.34315 9 8 9C9.65685 9 11 10.3431 11 12C11 13.6569 9.65685 15 8 15Z"></path>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M8 5H16C19.866 5 23 8.13401 23 12C23 15.866 19.866 19 16 19H8C4.13401 19 1 15.866 1 12C1 8.13401 4.13401 5 8 5ZM16 15C17.6569 15 19 13.6569 19 12C19 10.3431 17.6569 9 16 9C14.3431 9 13 10.3431 13 12C13 13.6569 14.3431 15 16 15Z"></path>
</svg>
)}
</span>
<span className="text-xs">Default Name</span>
</div>
)}
</div> </div>
<div className="border-t border-slate-300 px-2 pt-2 pb-1 flex flex-col items-stretch"> <div className="border-t border-slate-300 px-2 pt-2 pb-1 flex flex-col items-stretch">
<div className="uppercase text-xs text-slate-500">Name</div> <div className="uppercase text-xs text-slate-500">Name</div>

17
app/web/src/nova/ed/panel/tree/node/item/name.tsx
View File

@ -140,6 +140,18 @@ const Name: FC<{ name: string; is_jsx_prop: boolean; meta?: IMeta }> = ({
meta, meta,
}) => { }) => {
if (is_jsx_prop) { if (is_jsx_prop) {
let comp_label = "";
for (const prop of Object.values(meta?.item.component?.props || {})) {
if (prop.is_name) {
try {
eval(`comp_label = ${prop.valueBuilt}`);
} catch (e) {}
if (typeof comp_label !== "string" && typeof comp_label !== "number") {
comp_label = "asdas";
}
}
}
return ( return (
<div className={cx("flex items-center space-x-1 pr-1")}> <div className={cx("flex items-center space-x-1 pr-1")}>
<Tooltip <Tooltip
@ -148,7 +160,10 @@ const Name: FC<{ name: string; is_jsx_prop: boolean; meta?: IMeta }> = ({
> >
P P
</Tooltip> </Tooltip>
<div className="flex-1">{name}</div> <div className="flex-1">
{name}
{comp_label && `: ${comp_label}`}
</div>
{meta && meta.mitem && <GenerateJSX meta={meta} />} {meta && meta.mitem && <GenerateJSX meta={meta} />}
{meta && !meta.mitem && ( {meta && !meta.mitem && (
<Tooltip <Tooltip

13
app/web/src/utils/types/meta-fn.ts
View File

@ -34,6 +34,7 @@ export type FNCompDef = {
valueBuilt: any; valueBuilt: any;
gen?: string; gen?: string;
genBuilt?: string; genBuilt?: string;
is_name?: boolean;
jsxCalledBy?: string[]; jsxCalledBy?: string[];
content?: IItem; content?: IItem;
visible?: string; visible?: string;
@ -127,12 +128,12 @@ export type FNFont = {
height?: number | "auto"; height?: number | "auto";
align?: "center" | "left" | "right"; align?: "center" | "left" | "right";
whitespace?: whitespace?:
| "whitespace-normal" | "whitespace-normal"
| "whitespace-nowrap" | "whitespace-nowrap"
| "whitespace-pre" | "whitespace-pre"
| "whitespace-pre-line" | "whitespace-pre-line"
| "whitespace-pre-wrap" | "whitespace-pre-wrap"
| "whitespace-break-spaces"; | "whitespace-break-spaces";
wordBreak?: "break-normal" | "break-words" | "break-all" | "break-keep"; wordBreak?: "break-normal" | "break-words" | "break-all" | "break-keep";
}; };
export type FMFont = TypedMap<FNFont>; export type FMFont = TypedMap<FNFont>;