@oneclick.dev/cms-kit 0.0.1

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { inject, watch } from 'vue';
+
+const state = inject('state') as { apiActions: any[] };
+const allAvailableVariables = inject('allAvailableVariables')
+
+const route = useRoute()
+const { getProjectIntegrations } = useIntegrations()
+
+const projectId = route.params.slug as string
+const integrations = await getProjectIntegrations(projectId)
+
+watch(state.apiActions, (val) => {
+    if (val) {
+        async function loadData(action: any) {
+            const { fireAction } = useIntegrationActions(action.integration)
+            let res = await fireAction(action, allAvailableVariables.value)
+            console.log("fireAction res", res); // TODO
+        }
+
+        val.forEach((action) => {
+            if (action.fireOnStart && action.hasFired) {
+                loadData(action);
+            }
+        })
+    }
+}, { deep: true })
+
+const { showBuilder } = useIntegrationActionBuilder()
+const showIntegrationActionBuilder = async () => {
+    let newAction = await showBuilder(allAvailableVariables.value);
+
+    let placeholderName = newAction.serviceType + " - " + newAction.actionType;
+    let i = 2;
+    while (state.apiActions.find(action => action.label === placeholderName)) {
+        placeholderName = newAction.serviceType + " - " + newAction.actionType + " " + i;
+        i++;
+    }
+    
+    state.apiActions.push({
+        id: crypto.randomUUID(),
+        label: placeholderName,
+        action: newAction,
+        hasFired: false,
+        fireOnStart: false,
+        firedAt: null
+    })
+}
+
+const editIntegrationAction = async (action: any) => {
+    let updatedAction = await showBuilder(allAvailableVariables.value, action.action)
+    state.apiActions.find(a => a.id === action.id).action = updatedAction
+}
+
+const editIntegrationActionName = (action: any) => {
+    let newName = prompt("Enter new action name", action.label)
+    if (newName) {
+        state.apiActions.find(a => a.id === action.id).label = newName
+    }
+}
+
+const removeAction = (action: any) => {
+    state.apiActions = state.apiActions.filter(a => a.id !== action.id)
+}
+
+const executeAction = async (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
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-2 p-2">
+        <p class="text-sm font-semibold mb-2">APIs & Actions</p>
+    </div>
+
+    <Button @click="showIntegrationActionBuilder">+ Integration action</Button>
+
+    <div>
+        <p>Actions</p>
+        <div class="flex flex-col gap-2">
+            <ContextMenu v-for="action in state.apiActions" :key="action.id">
+                <ContextMenuTrigger as-child>
+                    <Button variant="ghost" size="sm" class="flex gap-1 items-center justify-start w-full" @click="editIntegrationAction(action)">
+                        <IntegrationIcon :type="integrations.find((integration: any) => integration.id === action.action.integration)?.type" class="size-5" v-if="action.action?.integration" />
+                        <p class="text-sm">{{ action.label }}</p>
+                    </Button>
+                </ContextMenuTrigger>
+                <ContextMenuContent class="w-64">
+                    <ContextMenuItem inset @click="editIntegrationActionName(action)">
+                        Rename Action
+                    </ContextMenuItem>
+                    <ContextMenuItem inset>
+                        View Data
+                    </ContextMenuItem>
+                    <ContextMenuItem inset @click="executeAction(action)">
+                        Execute Action
+                    </ContextMenuItem>
+                    <ContextMenuItem inset variant="destructive" @click="removeAction(action)">
+                        Remove Action
+                    </ContextMenuItem>
+                    <ContextMenuSeparator />
+                    <ContextMenuCheckboxItem :model-value="action.fireOnStart" @update:model-value="action.fireOnStart = $event">
+                        Fire on start
+                    </ContextMenuCheckboxItem>
+                </ContextMenuContent>
+            </ContextMenu>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import DraggableElement from './new-element-view/DraggableElement.vue';
+import { Type, Text, SquareMousePointer, TextCursorInput, Bold, Check, ChevronDown, CircleDot, MapPinned, Grid2X2, File, Image, ScanBarcode } from 'lucide-vue-next';
+
+const elements = [
+    {
+        text: "Label",
+        icon: Type,
+        elementData: {
+            component: "Label",
+            w: 2,
+            h: 8,
+            minW: 2,
+            minH: 8,
+            variableBaseName: "Label"
+        }
+    },
+    {
+        text: "Text",
+        icon: Text,
+        elementData: {
+            component: "Text",
+            w: 2,
+            h: 8,
+            minW: 2,
+            minH: 8,
+            variableBaseName: "Text"
+        }
+    },
+    {
+        text: "Button",
+        icon: SquareMousePointer,
+        elementData: {
+            component: "Button",
+            w: 2,
+            h: 6,
+            minW: 1,
+            minH: 6,
+            variableBaseName: "Button",
+            defaultValue: ""
+        }
+    },
+    {
+        text: "Textfield",
+        icon: TextCursorInput,
+        elementData: {
+            component: "Textfield",
+            w: 2,
+            h: 8,
+            minW: 2,
+            minH: 8,
+            variableBaseName: "Textfield",
+            defaultValue: ""
+        }
+    },
+    {
+        text: "Textarea",
+        icon: TextCursorInput,
+        elementData: {
+            component: "Textarea",
+            w: 3,
+            h: 12,
+            minW: 3,
+            minH: 12,
+            variableBaseName: "Textarea",
+            defaultValue: ""
+        }
+    },
+    {
+        text: "Richtext",
+        icon: Bold,
+        elementData: {
+            component: "Richtext",
+            w: 3,
+            h: 16,
+            minW: 3,
+            minH: 16,
+            variableBaseName: "Richtext",
+            defaultValue: ""
+        }
+    },
+    {
+        text: "Checkbox",
+        icon: Check,
+        elementData: {
+            component: "Checkbox",
+            w: 2,
+            h: 8,
+            minW: 2,
+            minH: 8,
+            variableBaseName: "Checkbox",
+            defaultValue: false
+        }
+    },
+    {
+        text: "Select",
+        icon: ChevronDown,
+        elementData: {
+            component: "Select",
+            w: 2,
+            h: 8,
+            minW: 2,
+            minH: 8,
+            variableBaseName: "Select",
+            defaultValue: ""
+        }
+    },
+    {
+        text: "Radios",
+        icon: CircleDot,
+        elementData: {
+            component: "Radios",
+            w: 2,
+            h: 8,
+            minW: 2,
+            minH: 8,
+            variableBaseName: "Radios",
+            defaultValue: ""
+        }
+    },
+    {
+        text: "Images",
+        icon: Image,
+        elementData: {
+            component: "Images",
+            w: 4,
+            h: 16,
+            minW: 4,
+            minH: 16,
+            variableBaseName: "Images",
+            defaultValue: []
+        }
+    },
+    {
+        text: "Location",
+        icon: MapPinned,
+        elementData: {
+            component: "Location",
+            w: 4,
+            h: 16,
+            minW: 4,
+            minH: 16,
+            variableBaseName: "Location",
+            defaultValue: { lat: 0, lng: 0 }
+        }
+    },
+    {
+        text: "Items",
+        icon: Grid2X2,
+        elementData: {
+            component: "Items",
+            w: 4,
+            h: 16,
+            minW: 4,
+            minH: 16,
+            variableBaseName: "Items",
+            defaultValue: []
+        }
+    },
+    {
+        text: "File",
+        icon: File,
+        elementData: {
+            component: "File",
+            w: 2,
+            h: 8,
+            minW: 2,
+            minH: 8,
+            variableBaseName: "File",
+            defaultValue: null
+        }
+    },
+    {
+        text: "Scanner",
+        icon: ScanBarcode,
+        elementData: {
+            component: "Scanner",
+            w: 2,
+            h: 8,
+            minW: 2,
+            minH: 8,
+            variableBaseName: "Scanner",
+            defaultValue: null
+        }
+    },
+]
+</script>
+
+<template>
+    <div class="flex flex-col gap-2 p-2">
+        <p class="text-sm font-semibold mb-2">New Element</p>
+    </div>
+
+    <div class="grid grid-cols-3 gap-2">
+        <DraggableElement v-for="element in elements" :key="element.text" :elementData="element.elementData" class="group p-2 pt-4 border border-ring rounded-xl cursor-grab flex flex-col items-center gap-1">
+            <component :is="element.icon" class="size-6" />
+            <span class="text-xs text-muted-foreground group-hover:text-foreground">{{ element.text }}</span>
+        </DraggableElement>
+    </div>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import Variables from './variables-view/Variables.vue'
+import Transformers from './variables-view/Transformers.vue'
+import ApiActionVariables from './variables-view/ApiActionVariables.vue'
+import RouteQueryParams from './variables-view/RouteQueryParams.vue'
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 p-2">
+    <p class="text-sm font-semibold mb-2">Variables</p>
+  </div>
+
+  <div class="flex flex-col gap-2 p-2">
+    <Variables />
+    <Transformers />
+    <ApiActionVariables />
+    <RouteQueryParams />
+  </div>
+</template>

package/components/ui/form-builder/components/admin/setting-views/new-element-view/DraggableElement.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { inject, nextTick } from 'vue';
+
+const props = defineProps({
+    elementData: {
+        type: Object,
+        default: () => ({})
+    }
+})
+
+const mouseXY = inject('mouseXY') as { x: number, y: number };
+const DragPos = inject('DragPos') as { x: number, y: number, w: number, h: number, i: string };
+const state = inject('state') as { layout: any[], layoutRef: any, colNum: number, itemRefs: any };
+const isDragging = inject('isDragging');
+
+async function drag() {
+    isDragging.value = true;
+    const parentRect = document.querySelector('#custom-form-builder .vue-grid-layout')!.getBoundingClientRect();
+    let mouseInGrid = false;
+    if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true;
+    }
+    if (mouseInGrid === true && (state.layout.findIndex(item => item.i === 'drop')) === -1) {
+        await addElement((state.layout.length * 2) % (state.colNum || 12), state.layout.length + (state.colNum || 12), true)
+        await nextTick();
+    }
+    if (!state.itemRefs?.drop) {
+        return;
+    }
+    const index = state.layout.findIndex(item => item.i === 'drop');
+    if (index !== -1) {
+        if (state.itemRefs?.drop?.el?.style) {
+            state.itemRefs.drop.el.style.display = 'none';
+        }
+        const itemRef = state.itemRefs.drop;
+        const new_pos = itemRef.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);
+        if (mouseInGrid === true) {
+            state.layoutRef.emitter.emit('dragEvent', ['dragstart', 'drop', new_pos.x, new_pos.y, props.elementData?.h || 1, props.elementData?.w || 1]);
+            DragPos.i = String(index);
+            DragPos.x = state.layout[index].x;
+            DragPos.y = state.layout[index].y;
+        }
+        if (mouseInGrid === false) {
+            state.layoutRef.emitter.emit('dragEvent', ['dragend', 'drop', new_pos.x, new_pos.y, props.elementData?.h || 1, props.elementData?.w || 1]);
+            state.layout = state.layout.filter(obj => obj.i !== 'drop');
+            await nextTick();
+        }
+    }
+}
+
+async function dragend() {
+    isDragging.value = false;
+    const parentRect = document.querySelector('#custom-form-builder .vue-grid-layout')!.getBoundingClientRect();
+    let mouseInGrid = false;
+    if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true;
+    }
+    if (mouseInGrid === true) {
+        state.layoutRef.emitter.emit('dragEvent', ['dragend', 'drop', DragPos.x, DragPos.y, props.elementData?.h || 1, props.elementData?.w || 1]);
+        state.layout = state.layout.filter(obj => obj.i !== 'drop');
+
+        await addElement(DragPos.x, DragPos.y)
+        await nextTick();
+        state.layoutRef.emitter.emit('dragEvent', ['dragend', DragPos.i, DragPos.x, DragPos.y, props.elementData?.h || 1, props.elementData?.w || 1]);
+    }
+}
+
+async function addElement(x: number, y: number, ghost?: boolean) {
+    let newEl = {
+        x: x,
+        y: y,
+        w: props.elementData?.w || 1,
+        h: props.elementData?.h || 1,
+        minW: props.elementData?.minW || 1,
+        minH: props.elementData?.minH || 1,
+        i: ghost ? 'drop' : state.index,
+        component: props.elementData.component,
+        variableName: getNextVariableName(props.elementData.variableBaseName),
+        visibility: 'true'
+    }
+
+    if (Object.keys(props.elementData).includes('defaultValue')) {
+        newEl.defaultValue = props.elementData.defaultValue
+    }
+    
+    state.layout.push(newEl);
+    state.index++;
+}
+
+function getNextVariableName(baseName: string) {
+    const existingNames = state.layout.map((item: any) => item.variableName);
+    let index = 2;
+    let name = baseName;
+    while (existingNames.includes(name)) {
+        name = `${baseName}${index}`;
+        index++;
+    }
+    return name;
+}
+
+</script>
+
+<template>
+    <div @drag="drag" @dragend="dragend" class="droppable-element" draggable="true" unselectable="on">
+        <slot />
+    </div>
+</template>

package/components/ui/form-builder/components/admin/setting-views/variables-view/ApiActionVariables.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ChevronDown } from 'lucide-vue-next';
+import { inject } from 'vue';
+
+const state = inject('state') as { apiActions: any[] };
+
+const route = useRoute()
+const { getProjectIntegrations } = useIntegrations()
+
+const projectId = route.params.slug as string
+const integrations = await getProjectIntegrations(projectId)
+</script>
+
+<template>
+  <div>
+    <p class="text-sm font-semibold mb-2">Action variables</p>
+    <div class="flex flex-col gap-2">
+      <Button variant="ghost" size="sm" v-for="action in state.apiActions" :key="action.id" class="flex gap-2 items-center justify-between">
+        <div class="flex gap-2 items-center">
+          <IntegrationIcon :type="integrations.find((integration: any) => integration.id === action.action.integration)?.type" class="size-5" />
+          {{ action.label }}
+        </div>
+        <ChevronDown class="size-4" />
+      </Button>
+    </div>
+  </div>
+</template>

package/components/ui/form-builder/components/admin/setting-views/variables-view/RouteQueryParams.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { CaseSensitive, Hash, ToggleLeft, Braces, Brackets, Calendar, Settings2 } from 'lucide-vue-next';
+import { inject } from 'vue';
+
+const state = inject('state') as { variables: any[] };
+
+const route = useRoute()
+
+const variableOptions = [
+  { value: "string", label: "String", icon: CaseSensitive, tint: "#e83f3f", defaultValue: "" },
+  { value: "number", label: "Number", icon: Hash, tint: "#2d9225", defaultValue: 0 },
+  { value: "boolean", label: "Boolean", icon: ToggleLeft, tint: "#8e2592", defaultValue: false },
+  { value: "object", label: "Object", icon: Braces, tint: "#926025", defaultValue: {} },
+  { value: "array", label: "Array", icon: Brackets, tint: "#005799", defaultValue: [] },
+  { value: "date", label: "Date", icon: Calendar, tint: "#5b7f91", defaultValue: "" }
+]
+
+function toCamelCase(str) {
+  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 p-2">
+    <div>
+      <div class="mb-2">
+        <p class="text-sm font-semibold mb-2">
+          Route query params
+        </p>
+      </div>
+  
+      <div class="flex flex-col gap-2">
+        <div v-for="([param, value]) in Object.entries(route.query)" :key="toCamelCase(param)" class="flex gap-2 items-center">
+          <div class="size-6 p-1 rounded flex items-center justify-center" :style="{ backgroundColor: variableOptions.find(option => option.value === 'string')?.tint }">
+            <component :is="variableOptions.find(option => option.value === 'string')?.icon" class="text-white" />
+          </div>
+          <div class="relative w-full group">
+            {{ toCamelCase(param) + " = " + value }}
+            <Button variant="ghost" size="icon" class="absolute right-0 top-0 rounded-xl shadow-none hidden group-hover:flex">
+              <Settings2 />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/form-builder/components/admin/setting-views/variables-view/Transformers.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Calculator, Settings2 } from 'lucide-vue-next';
+import { inject } from 'vue';
+import Transformer from '../../Transformer.vue'
+
+const state = inject('state') as { transformers: any[] };
+
+async function addTransformer() {
+  let id = crypto.randomUUID()
+  let name = "New transformer"
+
+  let i = 2
+  while (state.transformers.find(variable => variable.name === name)) {
+    name = "New transformer " + i
+    i++
+  }
+
+  state.transformers.push({
+    id,
+    name,
+    expression: 'return ""'
+  })
+}
+
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 p-2">
+    <div>
+      <div class="mb-2">
+        <p class="text-sm font-semibold mb-2">
+          Transformers
+        </p>
+        <Button variant="outline" size="sm" @click="addTransformer">
+          Add new transformer
+        </Button>
+      </div>
+  
+      <div class="flex flex-col gap-2">
+        <div v-for="transformer in state.transformers" :key="transformer.id" class="flex gap-2 items-center">
+          <div class="size-6 p-1 rounded flex items-center justify-center bg-[#646464]">
+            <Calculator class="text-white" />
+          </div>
+          <div class="relative w-full group">
+            <Input placeholder="Name" v-model="transformer.name" :id="`transformer_name_${transformer.id}`" class="bg-transparent dark:bg-transparent border-transparent hover:border-ring focus:border-ring dark:focus:border-ring shadow-none focus:shadow-xs rounded-xl pr-10" />
+            <Popover>
+              <PopoverTrigger as-child>
+                <Button variant="ghost" size="icon" class="absolute right-0 top-0 rounded-xl shadow-none opacity-0 group-hover:opacity-100">
+                  <Settings2 />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <Transformer v-model="transformer.expression" />
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/ui/form-builder/components/admin/setting-views/variables-view/Variables.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { CaseSensitive, Hash, ToggleLeft, Braces, Brackets, Calendar, Settings2 } from 'lucide-vue-next';
+import { inject } from 'vue';
+
+const state = inject('state') as { variables: any[] };
+
+async function addVariable(type: string) {
+  let id = crypto.randomUUID()
+  let name = "New variable"
+
+  let i = 2
+  while (state.variables.find(variable => variable.name === name)) {
+    name = "New variable " + i
+    i++
+  }
+
+  state.variables.push({
+    id,
+    type,
+    name,
+    defaultValue: ''
+  })
+}
+
+const variableOptions = [
+  { value: "string", label: "String", icon: CaseSensitive, tint: "#e83f3f", defaultValue: "" },
+  { value: "number", label: "Number", icon: Hash, tint: "#2d9225", defaultValue: 0 },
+  { value: "boolean", label: "Boolean", icon: ToggleLeft, tint: "#8e2592", defaultValue: false },
+  { value: "object", label: "Object", icon: Braces, tint: "#926025", defaultValue: {} },
+  { value: "array", label: "Array", icon: Brackets, tint: "#005799", defaultValue: [] },
+  { value: "date", label: "Date", icon: Calendar, tint: "#5b7f91", defaultValue: "" }
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 p-2">
+    <div>
+      <div class="mb-2">
+        <p class="text-sm font-semibold mb-2">
+          Variables
+        </p>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="outline" size="sm">
+              Add new variable
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem v-for="option in variableOptions" :key="option.value" @click="addVariable(option.value)">
+              <div class="size-6 p-1 rounded flex items-center justify-center" :style="{ backgroundColor: option.tint }">
+                <component :is="option.icon" class="text-white" />
+              </div>
+              {{ option.label }}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+  
+      <div class="flex flex-col gap-2">
+        <div v-for="variable in state.variables" :key="variable.id" class="flex gap-2 items-center">
+          <div class="size-6 p-1 rounded flex items-center justify-center" :style="{ backgroundColor: variableOptions.find(option => option.value === variable.type)?.tint }">
+            <component :is="variableOptions.find(option => option.value === variable.type)?.icon" class="text-white" />
+          </div>
+          <div class="relative w-full group">
+            <Input placeholder="Name" v-model="variable.name" :id="`variable_name_${variable.id}`" class="bg-transparent dark:bg-transparent border-transparent hover:border-ring focus:border-ring dark:focus:border-ring shadow-none focus:shadow-xs rounded-xl pr-10" />
+            <Button variant="ghost" size="icon" class="absolute right-0 top-0 rounded-xl shadow-none hidden group-hover:flex">
+              <Settings2 />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>