This commit is contained in:
Rizky 2024-07-24 13:16:32 +07:00
parent dab2ed498d
commit 07d0005958
6 changed files with 64 additions and 22 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,6 @@
import getTime from "date-fns/getTime";
import { PG } from "./ed-global"; import { PG } from "./ed-global";
import { format } from "date-fns";
export const loadFrontEnd = async (p: PG, ts?: number) => { export const loadFrontEnd = async (p: PG, ts?: number) => {
const id_site = p.site.id; const id_site = p.site.id;
@ -20,6 +22,7 @@ import("${url}")
p.site_exports[k] = v; p.site_exports[k] = v;
} }
resolve(exports); resolve(exports);
console.log(`🚧 Code updated from vscode - ${format(Date.now(), "HH:mm:ss")}`);
}); });
} catch (e) { } catch (e) {
console.log("Failed to load site code", e); console.log("Failed to load site code", e);

View File

@ -91,8 +91,7 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
try { try {
const evn = new Function("arg", `arg["${k}"] = ${v.value}`); const evn = new Function("arg", `arg["${k}"] = ${v.value}`);
evn(arg); evn(arg);
} catch (e) { } catch (e) {}
}
} }
} }
} else if (meta.item.component) { } else if (meta.item.component) {
@ -278,7 +277,7 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
{group !== "_" && ( {group !== "_" && (
<div <div
className={cx( className={cx(
"border-b px-1 cursor-pointer py-1 hover:bg-blue-100 select-none flex items-center", "border-b px-1 cursor-pointer py-1 hover:bg-blue-100 select-none flex items-center justify-between",
!hide.includes(group) && "bg-slate-50" !hide.includes(group) && "bg-slate-50"
)} )}
onClick={() => { onClick={() => {
@ -295,14 +294,40 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
local.render(); local.render();
}} }}
> >
<div className="">{header?.cprop?.label || group}</div> <div className="flex items-center">
<div className="flex-1 pl-1"> <div>{header?.cprop?.label || group}</div>
{!hide.includes(group) ? ( <div className="flex-1 pl-1">
<ChevronDown /> {!hide.includes(group) ? (
) : ( <ChevronDown />
<ChevronRight /> ) : (
)} <ChevronRight />
)}
</div>
</div> </div>
{group.startsWith("$") && (
<div
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
if (group) {
const props = mcprops?.toJSON() as Record<
string,
FNCompDef
>;
const array_prop = {} as any;
for (const [k, v] of Object.entries(props)) {
if (k.startsWith(group)) {
array_prop[k] = v;
}
}
}
}}
className="border rounded-md bg-white px-2 hover:bg-blue-500 hover:text-white"
>
+ Add
</div>
)}
</div> </div>
)} )}
<div className={cx(hide.includes(group) && "hidden")}> <div className={cx(hide.includes(group) && "hidden")}>

View File

@ -195,16 +195,26 @@ export const EdPropPopoverForm: FC<{
value={local.name} value={local.name}
autoFocus autoFocus
onChange={(e) => { onChange={(e) => {
local.name = e.currentTarget.value let is_$ = false;
.toLowerCase() local.name = e.currentTarget.value;
.replace(/\W/gi, "_"); if (local.name.startsWith("$")) {
is_$ = true;
local.name = local.name.substring(1);
}
if (local.name?.length > 0 && !local.name[0].match(/[a-zA-Z_]/i)) return; local.name = local.name.toLowerCase().replace(/\W/gi, "_");
if (local.name?.length > 0 && !local.name[0].match(/[a-zA-Z_]/i))
return;
if (!local.label) { if (!local.label) {
local.label = local.name.replace(/\_/gi, " "); local.label = local.name.replace(/\_/gi, " ");
} }
if (is_$) {
local.name = `\$${local.name}`;
}
local.render(); local.render();
}} }}
onBlur={() => { onBlur={() => {

View File

@ -43,7 +43,7 @@ export const EdTreeIndent = ({
<div <div
className={cx( className={cx(
"flex items-stretch ml-1", "flex items-stretch ml-1",
prm.depth > 0 ? "-mr-[7px]" : "-mr-[2px]" prm.depth > 0 ? "-mr-[7px]" : "-mr-[7px]"
)} )}
> >
{Array.from({ length: prm.depth }, (_, n) => n).map((n) => { {Array.from({ length: prm.depth }, (_, n) => n).map((n) => {
@ -52,7 +52,7 @@ export const EdTreeIndent = ({
key={n} key={n}
className={cx( className={cx(
"border-l mr-[4px] border-opacity-30", "border-l mr-[4px] border-opacity-30",
n === 0 && "border-l-slate-100", n === 0 && "border-l-blue-300",
n === 1 && "border-l-slate-200", n === 1 && "border-l-slate-200",
n === 2 && "border-l-slate-300", n === 2 && "border-l-slate-300",
n === 3 && "border-l-slate-300", n === 3 && "border-l-slate-300",

View File

@ -105,8 +105,12 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
} }
} }
`, `,
is_active ? ["bg-blue-100"] : [isComponent && `bg-purple-50`], is_active
is_hover && "bg-blue-50" ? [(item as any).type === "section" ? "bg-blue-200" : "bg-blue-100"]
: [isComponent && `bg-purple-50`],
is_hover && [
(item as any).type === "section" ? "bg-blue-100" : "bg-blue-50",
]
)} )}
onKeyDown={treeItemKeyMap(p, prm, item)} onKeyDown={treeItemKeyMap(p, prm, item)}
onContextMenu={(event) => { onContextMenu={(event) => {
@ -198,12 +202,12 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
p.render(); p.render();
}} }}
> >
{active.hover.id === item.id && ( {active.hover.id === item.id && (item as any).type !== "section" && (
<div <div
className={cx("absolute left-0 bottom-0 top-0 w-[4px] bg-blue-300")} className={cx("absolute left-0 bottom-0 top-0 w-[4px] bg-blue-300")}
></div> ></div>
)} )}
{active.item_id === item.id && ( {active.item_id === item.id && (item as any).type !== "section" && (
<div <div
className={cx("absolute left-0 bottom-0 top-0 w-[4px] bg-blue-500")} className={cx("absolute left-0 bottom-0 top-0 w-[4px] bg-blue-500")}
></div> ></div>