@oneclick.dev/cms-kit 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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