@oneclick.dev/cms-kit 0.0.1

package/components/ui/form-builder/components/FormBuilderWrapper.vue

@@ -0,0 +1,333 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, computed, provide } from 'vue'
+import AdminToolbar from './AdminToolbar.vue'
+import AdminToolbarView from './AdminToolbarView.vue'
+import AdminElementEditor from './AdminElementEditor.vue'
+import CustomDashboard from './CustomDashboard.vue'
+import { Maximize2 } from 'lucide-vue-next'
+import { interpolateTemplateFromVariableContext } from '../../../../lib/interpolation'
+
+const route = useRoute()
+
+const props = defineProps({
+  isPresentationMode: {
+    type: Boolean,
+    default: false
+  },
+  onFinish: {
+    type: Function,
+    default: () => {}
+  },
+  providedVariables: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const { setModuleBreadcrumbs } = useBreadcrumbs()
+setModuleBreadcrumbs([])
+
+const adminPanel = ref('new-element')
+const activeElement = ref(null)
+const selectedItems = ref<string[]>([])
+const isDragging = ref(false)
+
+const isEditMode = computed(() => !props.isPresentationMode)
+
+const layout = [
+  { x: 0, y: 0, w: 2, h: 2, i: '0', resizable: true, draggable: true, static: false, minY: 0, maxY: 2 },
+];
+
+const previewSize = ref({ width: 400, height: 400 }) // Default size
+const builderContainer = ref<HTMLElement | null>(null)
+
+// --- Resizing logic ---
+const isResizing = ref(false)
+const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 })
+
+function startResizing(e: MouseEvent) {
+  isResizing.value = true;
+  resizeStart.value = {
+    x: e.clientX,
+    y: e.clientY,
+    width: previewSize.value.width,
+    height: previewSize.value.height
+  };
+  document.body.style.userSelect = 'none';
+}
+
+function handleMouseMove(e: MouseEvent) {
+  if (!isResizing.value) return;
+  const dx = e.clientX - resizeStart.value.x;
+  const dy = e.clientY - resizeStart.value.y;
+  const minWidth = 200, minHeight = 200;
+  const maxWidth = builderContainer.value?.offsetWidth || 800;
+  const maxHeight = builderContainer.value?.offsetHeight || 800;
+  previewSize.value.width = Math.max(minWidth, Math.min(resizeStart.value.width + dx, maxWidth));
+  previewSize.value.height = Math.max(minHeight, Math.min(resizeStart.value.height + dy, maxHeight));
+}
+
+function stopResizing() {
+  isResizing.value = false;
+  document.body.style.userSelect = '';
+}
+
+function clampPreviewToContainer() {
+  if (!builderContainer.value) return;
+  const maxWidth = builderContainer.value.offsetWidth;
+  const maxHeight = builderContainer.value.offsetHeight;
+  if (previewSize.value.width > maxWidth) previewSize.value.width = maxWidth;
+  if (previewSize.value.height > maxHeight) previewSize.value.height = maxHeight;
+}
+
+function handleWindowResize() {
+  clampPreviewToContainer();
+}
+
+onMounted(() => {
+  window.addEventListener('mousemove', handleMouseMove);
+  window.addEventListener('mouseup', stopResizing);
+  window.addEventListener('resize', handleWindowResize);
+  // Initial clamp after mount (nextTick to ensure DOM is ready)
+  setTimeout(clampPreviewToContainer, 0);
+});
+onUnmounted(() => {
+  window.removeEventListener('mousemove', handleMouseMove);
+  window.removeEventListener('mouseup', stopResizing);
+  window.removeEventListener('resize', handleWindowResize);
+});
+
+const state = reactive({
+  mirrored: false,
+  responsive: true,
+  bounded: false,
+  transformScale: 1,
+  preventCollision: true,
+  compact: false,
+  restoreOnDrag: false,
+  rowHeight: 8,
+  index: 0,
+  marginX: 0,
+  marginY: 0,
+  layoutRef: {},
+  itemRefs: {},
+
+  layout: JSON.parse(JSON.stringify(layout)),
+  variables: [],
+  transformers: [],
+  apiActions: [],
+  elementValues: {}
+});
+
+const getState = () => {
+  let { layout, variables, transformers, apiActions } = JSON.parse(JSON.stringify(state))
+  
+  apiActions?.forEach((action: any) => {
+    action.action.response = null;
+    action.firedAt = null;
+    action.hasFired = false;
+  })
+  
+  return { layout, variables, transformers, apiActions }
+}
+
+const setState = (newState: any) => {
+  Object.assign(state, newState)
+}
+
+const baseVariables = computed(() => {
+  const normalVars = state.variables?.map((v: any) => ({
+    name: v.name,
+    type: v.type,
+    value: v.value ?? null,
+  })) || []
+
+  const apiActionVars = state.apiActions?.map((a: any) => ({
+    name: a.label,
+    type: 'apiActionResponse',
+    value: a.action ?? null,
+  })) || []
+
+  const elementVars = Object.entries(state.elementValues ?? {}).map(([key, val]: [string, any]) => ({
+    name: key,
+    type: 'element',
+    value: {
+      value: val ?? null
+    }
+  })) || []
+
+  const routeQueryVars = Object.entries(route.query).map(([key, val]: [string, any]) => ({
+    name: toCamelCase(key),
+    type: 'routeQueryParam',
+    value: val ?? null,
+  })) || []
+
+  return [...normalVars, ...apiActionVars, ...elementVars, ...routeQueryVars]?.filter((v: any) => v.name)
+})
+
+function toCamelCase(str) {
+  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+const transformerVars = computed(() => {
+  const context = Object.fromEntries(
+    baseVariables.value.map(v => [
+      v.name,
+      v.value
+    ])
+  );
+
+  return (state.transformers ?? []).map((t: any) => ({
+    name: t.name,
+    type: 'transformer',
+    value: getTransformerValue(t.expression, context)
+  }));
+});
+
+const allAvailableVariables = computed(() => {
+  return [...props.providedVariables, ...baseVariables.value, ...transformerVars.value]
+})
+
+const getTransformerValue = (expression: string, context: Record<string, any>) => {
+  return sandbox(expression, context);
+  // return sandbox(`return ${expression}`, context); TODO use return if u support {{ }} in inputs later on
+}
+
+const sandbox = (code: string, args = {}) => {
+  try {
+    const frame = document.createElement('iframe');
+    frame.style.display = 'none';
+    document.body.appendChild(frame);
+    const F = frame.contentWindow?.Function
+    document.body.removeChild(frame);
+    return F?.(...Object.keys(args), "'use strict';" + code)(...Object.values(args));
+  } catch (error) {
+    console.error('Sandbox error:', error);
+    return ""
+  }
+}
+
+function removeItem(i: string) {
+  state.layout.splice(state.layout.findIndex(item => item.i === i), 1);
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onMouseDown, true);
+  document.addEventListener('mouseup', onMouseUp, true);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onMouseDown, true);
+  document.removeEventListener('mouseup', onMouseUp, true);
+});
+
+async function onMouseDown(e: MouseEvent) {
+  if ((e.target as HTMLElement)?.closest('.vue-grid-item')) {
+    isDragging.value = true;
+  }
+}
+
+function onMouseUp() {
+  isDragging.value = false;
+}
+
+const mouseXY = { x: null, y: null };
+const DragPos = { x: null, y: null, w: 1, h: 1, i: null };
+
+document.addEventListener('dragover', (e) => {
+  mouseXY.x = e.clientX;
+  mouseXY.y = e.clientY;
+}, false);
+
+provide('mouseXY', mouseXY);
+provide('DragPos', DragPos);
+provide('state', state);
+provide('isDragging', isDragging)
+provide('activeElement', activeElement)
+provide('selectedItems', selectedItems)
+provide('allAvailableVariables', allAvailableVariables)
+provide('isEditMode', isEditMode)
+provide('onFinish', props.onFinish)
+
+async function loadState() {
+  const fetchedState = {} // TODO load state
+  if (fetchedState) {
+    Object.keys(fetchedState)?.forEach((key: string) => {
+      state[key] = fetchedState[key]
+    })
+  }
+}
+
+function fillDefaultValues() {
+  state.layout?.forEach((item: any) => {
+    if (Object.keys(item).includes('defaultValue')) {
+      state.elementValues[item.variableName] = interpolateTemplateFromVariableContext(item.defaultValue, allAvailableVariables.value)
+    }
+  })
+}
+
+const setup = async () => {
+  await loadState()
+  fillDefaultValues()
+  loadStartupActions()
+
+  previewSize.value = {
+    width: Math.min(builderContainer.value?.offsetWidth - 40, 700),
+    height: Math.min(builderContainer.value?.offsetHeight - 40, 1000)
+  }
+}
+
+const loadStartupActions = () => {
+  async function loadAction(action: any) {
+    const { fireAction } = useIntegrationActions(action.action.integration)
+    let res = await fireAction(action.action, allAvailableVariables.value)
+    state.apiActions.find(a => a.id === action.id).action.response = res
+  }
+
+  state.apiActions.forEach((action: any) => {
+    if (action.fireOnStart) {
+      loadAction(action)
+    }
+  })
+}
+
+onMounted(() => {
+  setup()
+})
+
+defineExpose({
+  getState,
+  setState,
+  fillDefaultValues
+})
+</script>
+
+<template>
+  <CustomDashboard v-if="isPresentationMode" />
+  <div class="flex-1 flex flex-col overflow-hidden pt-12 px-4" v-else>
+    <div class="@container/custom-dashboard flex-1 flex gap-2 w-full max-h-full overflow-hidden">
+      <AdminToolbar v-model="adminPanel" />
+      <AdminToolbarView :view="adminPanel" />
+      <div class="flex-1 bg-dots flex items-center justify-center text-gray-200 dark:text-muted" ref="builderContainer">
+        <div class="relative text-foreground" :style="{ width: previewSize.width + 'px', height: previewSize.height + 'px' }">
+          <CustomDashboard />
+          <button
+            class="absolute -bottom-4 -right-4 border border-transparent hover:border-ring bg-ring/20 dark:bg-ring/50 backdrop-blur-sm hover:scale-110 transition-all rounded-full p-2 cursor-hidden z-10"
+            @mousedown.prevent="startResizing"
+          >
+            <Maximize2 class="size-6 -scale-x-100" />
+          </button>
+        </div>
+      </div>
+      <AdminElementEditor v-if="activeElement" @removeItem="removeItem" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bg-dots {
+  background-color: transparent;
+  background-image: radial-gradient(currentColor 1px, transparent 1px);
+  background-size: 10px 10px;
+}
+</style>

package/components/ui/form-builder/components/admin/Transformer.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const allAvailableVariables = inject('allAvailableVariables')
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        required: true
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const mutableValue = computed({
+    get() {
+        return props.modelValue
+    },
+    set(value) {
+        emit('update:modelValue', value)
+    }
+})
+</script>
+
+<template>
+    <Sandbox v-model="mutableValue" :variables="allAvailableVariables" style="max-height: 200px" />
+</template>

package/components/ui/form-builder/components/admin/element-setting-views/Button.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const activeElement = inject('activeElement');
+const allAvailableVariables = inject('allAvailableVariables')
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <Input type="text" placeholder="Text" v-model="activeElement.text" class="mb-4" />
+    
+    <p class="text-sm font-semibold mb-2">Variant</p>
+    <Select v-model="activeElement.variant">
+      <SelectTrigger class="mb-4">
+        <SelectValue placeholder="Select variant" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="default">Primary</SelectItem>
+        <SelectItem value="secondary">Secondary</SelectItem>
+        <SelectItem value="destructive">Destructive</SelectItem>
+        <SelectItem value="outline">Outline</SelectItem>
+        <SelectItem value="ghost">Ghost</SelectItem>
+        <SelectItem value="link">Link</SelectItem>
+      </SelectContent>
+    </Select>
+
+    <p class="text-sm font-semibold mb-2">On Click</p>
+    <FlowBuilderSelect v-model="activeElement.onClickFlow" :variables="allAvailableVariables" />
+  </div>
+</template>

package/components/ui/form-builder/components/admin/element-setting-views/Checkbox.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const activeElement = inject('activeElement');
+const state = inject('state');
+
+const defaultValue = computed(() => activeElement.value.defaultValue)
+watch(defaultValue, () => {
+    state.elementValues[activeElement.value.variableName] = defaultValue.value
+})
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Input type="text" placeholder="Label" v-model="activeElement.label" />
+        <Input type="text" placeholder="Text" v-model="activeElement.text" />
+        <div class="flex flex-col gap-1">
+            <p class="text-sm text-muted">Default value</p>
+            <div>
+                <Checkbox v-model="activeElement.defaultValue" />
+                {{ activeElement.defaultValue ? 'TRUE' : 'FALSE' }}
+            </div>
+        </div>
+    </div>
+</template>

package/components/ui/form-builder/components/admin/element-setting-views/Label.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import Transformer from '../Transformer.vue'
+
+const activeElement = inject('activeElement');
+</script>
+
+<template>
+  <div class="grid">
+    <p class="text-sm font-semibold mb-2">Text</p>
+    <Transformer v-model="activeElement.text" />
+  </div>
+</template>

package/components/ui/form-builder/components/admin/element-setting-views/Radios.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Plus, Ellipsis } from 'lucide-vue-next';
+import { inject, watch, computed } from 'vue';
+
+const activeElement = inject('activeElement');
+const state = inject('state');
+
+const defaultValue = computed(() => activeElement.value.defaultValue)
+watch(defaultValue, () => {
+    state.elementValues[activeElement.value.variableName] = defaultValue.value
+})
+
+function addOption() {
+    if (!activeElement.value) return;
+
+    if (!activeElement.value.options) {
+        activeElement.value.options = [];
+    }
+    
+    let nameBase = "Option", nameCounter = 1, name = nameBase;
+    let valueBase = "option", valueCounter = 1, value = valueBase;
+    
+    while (activeElement.value.options.find(option => option.value === value)) {
+        valueCounter++;
+        value = valueBase + valueCounter;
+    }
+
+    while (activeElement.value.options.find(option => option.label === name)) {
+        nameCounter++;
+        name = nameBase + nameCounter;
+    }
+    
+    let randomId = crypto.randomUUID()
+    activeElement.value.options.push({ value, label: name, id: randomId })
+}
+
+function removeOption(id: string) {
+    if (!activeElement.value) return;
+    
+    activeElement.value.options = activeElement.value.options.filter(option => option.id !== id)
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Input type="text" placeholder="Label" v-model="activeElement.label" />
+
+        <p>Orientation</p>
+        <Select v-model="activeElement.orientation">
+            <SelectTrigger>
+                <SelectValue placeholder="Select orientation" />
+            </SelectTrigger>
+            <SelectContent>
+                <SelectItem value="vertical">Vertical</SelectItem>
+                <SelectItem value="horizontal">Horizontal</SelectItem>
+            </SelectContent>
+        </Select>
+
+        <div class="flex items-center justify-between gap-2">
+            <p>Options</p>
+            <Button variant="ghost" class="rounded-xl" @click="addOption">
+                <Plus />
+            </Button>
+        </div>
+        <div>
+            <Popover v-for="option in activeElement.options" :key="option.id">
+                <PopoverTrigger class="flex justify-between items-center gap-2 w-full">
+                    {{ option.label }}
+                    <Ellipsis class="size-4" />
+                </PopoverTrigger>
+                <PopoverContent>
+                    <div class="flex flex-col gap-2">
+                        <Label for="option.id + '_label'">Label</Label>
+                        <Input type="text" placeholder="Label" :id="option.id + '_label'" v-model="option.label" />
+                        <Label for="option.id + '_value'">Value</Label>
+                        <Input type="text" placeholder="Value" :id="option.id + '_value'" v-model="option.value" />
+                    </div>
+                    <Button variant="destructive" @click="removeOption(option.id)">Remove</Button>
+                </PopoverContent>
+            </Popover>
+        </div>
+
+        <Input type="text" placeholder="Default value" v-model="activeElement.defaultValue" />
+    </div>
+</template>

package/components/ui/form-builder/components/admin/element-setting-views/Scanner.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const activeElement = inject('activeElement');
+const allAvailableVariables = inject('allAvailableVariables')
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <Input type="number" placeholder="Time between scans" v-model="activeElement.timeBetweenScans" class="mb-4" />
+
+    <p class="text-sm font-semibold mb-2">On Scan</p>
+    <FlowBuilderSelect v-model="activeElement.onScanFlow" :variables="allAvailableVariables" />
+  </div>
+</template>

package/components/ui/form-builder/components/admin/element-setting-views/Select.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { Plus, Ellipsis } from 'lucide-vue-next';
+import { inject, watch, computed } from 'vue';
+
+const activeElement = inject('activeElement');
+const state = inject('state');
+
+const defaultValue = computed(() => activeElement.value.defaultValue)
+watch(defaultValue, () => {
+    state.elementValues[activeElement.value.variableName] = defaultValue.value
+})
+
+function addOption() {
+    if (!activeElement.value) return;
+
+    if (!activeElement.value.options) {
+        activeElement.value.options = [];
+    }
+    
+    let nameBase = "Option", nameCounter = 1, name = nameBase;
+    let valueBase = "option", valueCounter = 1, value = valueBase;
+    
+    while (activeElement.value.options.find(option => option.value === value)) {
+        valueCounter++;
+        value = valueBase + valueCounter;
+    }
+
+    while (activeElement.value.options.find(option => option.label === name)) {
+        nameCounter++;
+        name = nameBase + nameCounter;
+    }
+    
+    let randomId = crypto.randomUUID()
+    activeElement.value.options.push({ value, label: name, id: randomId })
+}
+
+function removeOption(id: string) {
+    if (!activeElement.value) return;
+    
+    activeElement.value.options = activeElement.value.options.filter(option => option.id !== id)
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <Input type="text" placeholder="Label" v-model="activeElement.label" />
+        <Input type="text" placeholder="Placeholder" v-model="activeElement.placeholder" />
+
+        <div class="flex items-center justify-between gap-2">
+            <p>Options</p>
+            <Button variant="ghost" class="rounded-xl" @click="addOption">
+                <Plus />
+            </Button>
+        </div>
+        <div>
+            <Popover v-for="option in activeElement.options" :key="option.id">
+                <PopoverTrigger class="flex justify-between items-center gap-2 w-full">
+                    {{ option.label }}
+                    <Ellipsis class="size-4" />
+                </PopoverTrigger>
+                <PopoverContent>
+                    <div class="flex flex-col gap-2">
+                        <Label for="option.id + '_label'">Label</Label>
+                        <Input type="text" placeholder="Label" :id="option.id + '_label'" v-model="option.label" />
+                        <Label for="option.id + '_value'">Value</Label>
+                        <Input type="text" placeholder="Value" :id="option.id + '_value'" v-model="option.value" />
+                    </div>
+                    <Button variant="destructive" @click="removeOption(option.id)">Remove</Button>
+                </PopoverContent>
+            </Popover>
+        </div>
+
+        <Input type="text" placeholder="Default value" v-model="activeElement.defaultValue" />
+    </div>
+</template>

package/components/ui/form-builder/components/admin/element-setting-views/Text.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import Transformer from '../Transformer.vue'
+
+const activeElement = inject('activeElement');
+</script>
+
+<template>
+  <div class="grid">
+    <p class="text-sm font-semibold mb-2">Text</p>
+    <Transformer v-model="activeElement.text" />
+  </div>
+</template>

package/components/ui/form-builder/components/admin/element-setting-views/Textarea.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject, watch, computed } from 'vue';
+import Transformer from '../Transformer.vue'
+
+const activeElement = inject('activeElement');
+const state = inject('state');
+
+const defaultValue = computed(() => activeElement.value.defaultValue)
+watch(defaultValue, () => {
+  state.elementValues[activeElement.value.variableName] = defaultValue.value
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <Transformer v-model="activeElement.label" placeholder="Label" />
+    <Transformer v-model="activeElement.placeholder" placeholder="Placeholder" />
+    <Transformer v-model="activeElement.defaultValue" placeholder="Default value" />
+  </div>
+</template>

package/components/ui/form-builder/components/admin/element-setting-views/Textfield.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject, watch, computed } from 'vue';
+import Transformer from '../Transformer.vue'
+
+const activeElement = inject('activeElement');
+const state = inject('state');
+
+const defaultValue = computed(() => activeElement.value.defaultValue)
+watch(defaultValue, () => {
+  state.elementValues[activeElement.value.variableName] = defaultValue.value
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <Transformer v-model="activeElement.label" placeholder="Label" />
+    <Transformer v-model="activeElement.placeholder" placeholder="Placeholder" />
+    <Transformer v-model="activeElement.defaultValue" placeholder="Default value" />
+  </div>
+</template>

package/components/ui/form-builder/components/admin/element-setting-views/index.ts

@@ -0,0 +1,21 @@
+import CheckboxSettingsView from './Checkbox.vue'
+import LabelSettingsView from './Label.vue'
+import ButtonSettingsView from './Button.vue'
+import TextSettingsView from './Text.vue'
+import TextareaSettingsView from './Textarea.vue'
+import TextfieldSettingsView from './Textfield.vue'
+import SelectSettingsView from './Select.vue'
+import RadiosSettingsView from './Radios.vue'
+import ScannerSettingsView from './Scanner.vue'
+
+export default {
+  Checkbox: CheckboxSettingsView,
+  Label: LabelSettingsView,
+  Button: ButtonSettingsView,
+  Text: TextSettingsView,
+  Textfield: TextfieldSettingsView,
+  Textarea: TextareaSettingsView,
+  Select: SelectSettingsView,
+  Radios: RadiosSettingsView,
+  Scanner: ScannerSettingsView
+}