@oneclick.dev/cms-kit 0.0.2 → 0.0.3

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

@@ -1,107 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-<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

@@ -1,61 +0,0 @@
-<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

@@ -1,74 +0,0 @@
-<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>

package/components/ui/form-builder/components/elements/button/Button.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import { inject, ref, computed } from 'vue'
-import { useRunProcess } from '../../../../flow-builder/composables/useRunProcess'
-import { useLayout } from '../../../../flow-builder/composables/useLayout'
-
-const props = defineProps({
-  variableName: {
-    type: String,
-    required: true
-  },
-  text: {
-    type: String,
-    default: ""
-  },
-  variant: {
-    type: String,
-    default: ""
-  },
-  onClickFlow: {
-    type: Object,
-    default: () => ({
-      nodes: [],
-      edges: [],
-      variables: [],
-      computedVariables: []
-    })
-  }
-})
-
-const isEditMode = inject('isEditMode', ref(false))
-const allAvailableVariables = inject('allAvailableVariables', ref([]))
-const onFinish = inject('onFinish', () => {})
-
-const handleClick = () => {
-  const { graph, layout } = useLayout()
-  const { run } = useRunProcess({
-    graph,
-    cancelOnError: true,
-    nodes: props.onClickFlow.nodes,
-    edges: props.onClickFlow.edges,
-    variables: [...allAvailableVariables.value, ...props.onClickFlow.variables],
-    computedVariables: props.onClickFlow.computedVariables,
-    onFinish
-  })
-  const laidOutNodes = layout(props.onClickFlow.nodes, props.onClickFlow.edges, 'LR')
-  run(laidOutNodes)
-}
-
-const isDisabled = computed(() => {
-  return false;
-})
-</script>
-
-<template>
-  <Button :variant="variant" @click="handleClick" :disabled="isDisabled" class="w-full" :class="{ 'pointer-events-none': isEditMode }" :tabindex="isEditMode ? -1 : 0">
-    <span class="truncate w-full">
-      {{ text }}
-    </span>
-  </Button>
-</template>

package/components/ui/form-builder/components/elements/button/index.ts

@@ -1 +0,0 @@
-export { default as CustomFormButton } from './Button.vue'

package/components/ui/form-builder/components/elements/checkbox/Checkbox.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-
-const randomId = crypto.randomUUID()
-
-const props = defineProps({
-  variableName: {
-    type: String,
-    required: true
-  },
-  label: {
-    type: String,
-    required: true
-  },
-  text: {
-    type: String,
-    required: true
-  }
-})
-
-const state = inject('state');
-
-</script>
-
-<template>
-  <div class="items-top flex gap-x-2">
-    <Checkbox :id="randomId" v-model="state.elementValues[variableName]" class="border-ring" />
-    <div class="grid gap-1.5 leading-none">
-      <label
-        :for="randomId"
-        class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        {{ label }}
-      </label>
-      <p class="text-sm text-muted-foreground">
-        {{ text }}
-      </p>
-    </div>
-  </div>
-</template>

package/components/ui/form-builder/components/elements/checkbox/index.ts

@@ -1 +0,0 @@
-export { default as CustomFormCheckbox } from './Checkbox.vue'

package/components/ui/form-builder/components/elements/file/File.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <div></div>
-</template>

package/components/ui/form-builder/components/elements/file/index.ts

@@ -1 +0,0 @@
-export { default as CustomFormFile } from './File.vue'

package/components/ui/form-builder/components/elements/images/Images.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-
-const props = defineProps({
-  variableName: {
-    type: String,
-    required: true
-  },
-  label: {
-    type: String,
-    default: ""
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  }
-})
-
-const state = inject('state');
-
-</script>
-
-<template>
-  <div class="flex flex-col w-full h-full items-start gap-1.5">
-    <Label v-if="label">{{ label }}</Label>
-    <MediaPicker v-model="state.elementValues[variableName]"></MediaPicker>
-  </div>
-</template>

package/components/ui/form-builder/components/elements/images/index.ts

@@ -1 +0,0 @@
-export { default as CustomFormImages } from './Images.vue'

package/components/ui/form-builder/components/elements/index.ts

@@ -1,31 +0,0 @@
-import { CustomFormCheckbox } from './checkbox';
-import { CustomFormFile } from './file';
-import { CustomFormImages } from './images';
-import { CustomFormItems } from './items';
-import { CustomFormLabel } from './label';
-import { CustomFormLocation } from './location';
-import { CustomFormRadios } from './radios';
-import { CustomFormRichText } from './richtext';
-import { CustomFormSelect } from './select';
-import { CustomFormText } from './text';
-import { CustomFormTextarea } from './textarea';
-import { CustomFormTextfield } from './textfield';
-import { CustomFormButton } from './button';
-import { CustomFormScanner } from './scanner';
-
-export const elementComponents = {
-    CustomFormCheckbox,
-    CustomFormFile,
-    CustomFormImages,
-    CustomFormItems,
-    CustomFormLabel,
-    CustomFormLocation,
-    CustomFormRadios,
-    CustomFormRichText,
-    CustomFormSelect,
-    CustomFormText,
-    CustomFormTextarea,
-    CustomFormTextfield,
-    CustomFormButton,
-    CustomFormScanner
-}

package/components/ui/form-builder/components/elements/items/Items.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <div></div>
-</template>

package/components/ui/form-builder/components/elements/items/index.ts

@@ -1 +0,0 @@
-export { default as CustomFormItems } from './Items.vue'

package/components/ui/form-builder/components/elements/label/Label.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { interpolateTemplateFromVariableContext } from '@/lib/interpolation'
-
-const props = defineProps({
-  text: {
-    type: String,
-    default: ''
-  }
-})
-
-const allAvailableVariables = inject('allAvailableVariables')
-
-const output = computed(() => {
-  return interpolateTemplateFromVariableContext(props.text, allAvailableVariables?.value)
-})
-</script>
-
-<template>
-  <p class="whitespace-pre-wrap">{{ output }}</p>
-</template>

package/components/ui/form-builder/components/elements/label/index.ts

@@ -1 +0,0 @@
-export { default as CustomFormLabel } from './Label.vue'

package/components/ui/form-builder/components/elements/location/Location.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <div></div>
-</template>

package/components/ui/form-builder/components/elements/location/index.ts

@@ -1 +0,0 @@
-export { default as CustomFormLocation } from './Location.vue'

package/components/ui/form-builder/components/elements/radios/Radios.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-const randomId = crypto.randomUUID()
-
-interface Option {
-  value: string;
-  label: string;
-}
-
-const props = defineProps({
-  variableName: {
-    type: String,
-    required: true
-  },
-  label: {
-    type: String,
-    default: ""
-  },
-  orientation: {
-    type: String,
-    default: "vertical"
-  },
-  options: {
-    type: Array as PropType<Option[]>,
-    required: true
-  }
-})
-
-const state = inject('state');
-
-</script>
-
-<template>
-  <div class="grid w-full items-center gap-1.5">
-    <Label v-if="label">{{ label }}</Label>
-    <RadioGroup v-model="state.elementValues[variableName]" :orientation="orientation" class="flex-wrap">
-      <div class="flex items-center space-x-2" v-for="option in options" :key="option.value">
-        <RadioGroupItem :id="randomId + '_' + option.value" :value="option.value" class="border-ring" />
-        <Label :for="randomId + '_' + option.value">{{ option.label }}</Label>
-      </div>
-    </RadioGroup>
-  </div>
-</template>

package/components/ui/form-builder/components/elements/radios/index.ts

@@ -1 +0,0 @@
-export { default as CustomFormRadios } from './Radios.vue'

package/components/ui/form-builder/components/elements/richtext/Richtext.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <div></div>
-</template>

package/components/ui/form-builder/components/elements/richtext/index.ts

@@ -1 +0,0 @@
-export { default as CustomFormRichText } from './RichText.vue'