wip

frappe · Feb 5, 2025 · 58c5d2c · 58c5d2c
1 parent a5c52cd
commit 58c5d2c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
@@ -1,3 +1,11 @@
+declare interface BlockDataKey {
+	key?: string;
+	type?: BlockDataKeyType;
+	property?: string;
+}
+
+declare type BlockDataKeyType = "key" | "attribute" | "style";
+
 declare type StyleValue = string | number | null | undefined;
 
 declare type styleProperty = keyof CSSProperties;
@@ -20,6 +28,7 @@ declare interface BlockOptions {
 	attributes?: BlockAttributeMap;
 	classes?: Array<string>;
 	children?: Array<Block | BlockOptions>;
+	dynamicValues?: Array<BlockDataKey>;
 	draggable?: boolean;
 	[key: string]: any;
 }

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
@@ -1,5 +1,39 @@
 <template>
 	<div class="relative w-full">
+		<div class="absolute left-[-18px] top-1 z-50">
+			<Dropdown
+				:options="[
+					{ label: 'Duplicate', onClick: () => store.duplicatePage(page), icon: 'copy' },
+					{ label: 'View in Desk', onClick: () => store.openInDesk(page), icon: 'arrow-up-right' },
+					{ label: 'Delete', onClick: () => store.deletePage(page), icon: 'trash' },
+				]"
+				size="sm"
+				placement="right">
+				<template v-slot="{ open }">
+					<div
+						class="group flex cursor-pointer items-center gap-1 rounded-lg bg-purple-500 transition-all hover:size-fit hover:p-1.5">
+						<span class="hidden text-xs text-ink-white group-hover:block">Set Dynamic Value</span>
+						<FeatherIcon name="plus" class="size-3 text-ink-white" @click="open"></FeatherIcon>
+					</div>
+				</template>
+			</Dropdown>
+		</div>
+		<!-- <Dropdown
+			:options="[
+				{ label: 'Duplicate', onClick: () => store.duplicatePage(page), icon: 'copy' },
+				{ label: 'View in Desk', onClick: () => store.openInDesk(page), icon: 'arrow-up-right' },
+				{ label: 'Delete', onClick: () => store.deletePage(page), icon: 'trash' },
+			]"
+			size="sm"
+			placement="right">
+			<template v-slot="{ open }">
+				<div
+					class="group flex cursor-pointer items-center gap-1 rounded-lg bg-yellow-500 transition-all hover:size-fit hover:p-1.5">
+					<FeatherIcon name="plus" class="size-3 text-ink-white" @click="open"></FeatherIcon>
+					<span class="hidden text-xs text-ink-white group-hover:block">Set Dynamic Value</span>
+				</div>
+			</template>
+		</Dropdown> -->
 		<FormControl
 			:class="classes"
 			:type="type"
@@ -25,6 +59,7 @@
 import CrossIcon from "@/components/Icons/Cross.vue";
 import { useDebounceFn, useVModel } from "@vueuse/core";
 import { computed, useAttrs } from "vue";
+import { Dropdown } from "frappe-ui";
 
 const props = defineProps(["modelValue", "type", "hideClearButton"]);
 const emit = defineEmits(["update:modelValue", "input"]);
@@ -103,4 +138,10 @@ const triggerUpdate = useDebounceFn(($event: Event) => {
 		emit("update:modelValue", ($event.target as HTMLInputElement).value);
 	}
 }, 100);
+
+const canHaveDynamicValue = () => true;
+
+const getDynamicValue = () => {
+	// get from page data
+};
 </script>
diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
@@ -16,14 +16,6 @@ import {
 
 export type styleProperty = keyof CSSProperties | `__${string}`;
 
-type BlockDataKeyType = "key" | "attribute" | "style";
-
-export interface BlockDataKey {
-	key?: string;
-	type?: BlockDataKeyType;
-	property?: string;
-}
-
 class Block implements BlockOptions {
 	blockId: string;
 	children: Array<Block>;
@@ -47,6 +39,7 @@ class Block implements BlockOptions {
 	visibilityCondition?: string;
 	elementBeforeConversion?: string;
 	parentBlock: Block | null;
+	dynamicValues: Array<BlockDataKey>;
 	// @ts-expect-error
 	referenceComponent: Block | null;
 	customAttributes: BlockAttributeMap;
@@ -60,6 +53,7 @@ class Block implements BlockOptions {
 		this.referenceBlockId = options.referenceBlockId;
 		this.visibilityCondition = options.visibilityCondition;
 		this.parentBlock = options.parentBlock || null;
+		this.dynamicValues = options.dynamicValues || [];
 		if (this.extendedFromComponent) {
 			componentStore.loadComponent(this.extendedFromComponent);
 		}