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

View File

@ -91,8 +91,7 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
try {
const evn = new Function("arg", `arg["${k}"] = ${v.value}`);
evn(arg);
} catch (e) {
}
} catch (e) {}
}
}
} else if (meta.item.component) {
@ -278,7 +277,7 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
{group !== "_" && (
<div
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"
)}
onClick={() => {
@ -295,14 +294,40 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
local.render();
}}
>
<div className="">{header?.cprop?.label || group}</div>
<div className="flex-1 pl-1">
{!hide.includes(group) ? (
<ChevronDown />
) : (
<ChevronRight />
)}
<div className="flex items-center">
<div>{header?.cprop?.label || group}</div>
<div className="flex-1 pl-1">
{!hide.includes(group) ? (
<ChevronDown />
) : (
<ChevronRight />
)}
</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 className={cx(hide.includes(group) && "hidden")}>

View File

@ -195,16 +195,26 @@ export const EdPropPopoverForm: FC<{
value={local.name}
autoFocus
onChange={(e) => {
local.name = e.currentTarget.value
.toLowerCase()
.replace(/\W/gi, "_");
let is_$ = false;
local.name = e.currentTarget.value;
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) {
local.label = local.name.replace(/\_/gi, " ");
}
if (is_$) {
local.name = `\$${local.name}`;
}
local.render();
}}
onBlur={() => {

View File

@ -43,7 +43,7 @@ export const EdTreeIndent = ({
<div
className={cx(
"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) => {
@ -52,7 +52,7 @@ export const EdTreeIndent = ({
key={n}
className={cx(
"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 === 2 && "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_hover && "bg-blue-50"
is_active
? [(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)}
onContextMenu={(event) => {
@ -198,12 +202,12 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
p.render();
}}
>
{active.hover.id === item.id && (
{active.hover.id === item.id && (item as any).type !== "section" && (
<div
className={cx("absolute left-0 bottom-0 top-0 w-[4px] bg-blue-300")}
></div>
)}
{active.item_id === item.id && (
{active.item_id === item.id && (item as any).type !== "section" && (
<div
className={cx("absolute left-0 bottom-0 top-0 w-[4px] bg-blue-500")}
></div>