@oneclick.dev/cms-kit 0.0.1 → 0.0.3

package/components/ui/flow-builder/components/edges/DataEdge.vue

@@ -1,87 +0,0 @@
-<script setup>
-import { useVueFlow, BaseEdge, EdgeLabelRenderer, getBezierPath } from '@vue-flow/core'
-import { computed } from 'vue'
-import { getOutputsForNode } from '../../composables/outputRegistry'
-
-defineOptions({ inheritAttrs: false })
-
-const props = defineProps({
-  source: {
-    type: String,
-    required: true,
-  },
-  sourceHandle: {
-    type: String,
-    required: true,
-  },
-  sourceX: {
-    type: Number,
-    required: true,
-  },
-  sourceY: {
-    type: Number,
-    required: true,
-  },
-  targetX: {
-    type: Number,
-    required: true,
-  },
-  targetY: {
-    type: Number,
-    required: true,
-  },
-  sourcePosition: {
-    type: String,
-    required: true,
-  },
-  targetPosition: {
-    type: String,
-    required: true,
-  },
-  data: {
-    type: Object,
-    required: true,
-  }
-})
-
-const emit = defineEmits(['select'])
-
-const { findNode } = useVueFlow()
-
-const path = computed(() => getBezierPath(props))
-
-const label = computed(() => {
-  let sourceNode = findNode(props.source)
-  let outputs = getOutputsForNode(sourceNode, props.data.sourceHandle) || []
-  return outputs.map(o => `${o.name}: ${o.shortType ?? o.type}`).join(', ')
-})
-</script>
-
-<template>
-  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
-  <BaseEdge :path="path[0]" />
-
-  <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
-  <EdgeLabelRenderer>
-    <div
-      :style="{
-        pointerEvents: 'all',
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
-        background: 'rgb(255 255 255 / 20%)',
-        border: '2px solid rgb(255 255 255 / 32%)',
-        padding: '0.5em 1em',
-        borderRadius: '0.5em',
-        maxWidth: '200px',
-        textShadow: '0 1px 5px black',
-        backdropFilter: 'blur(2px)',
-        fontSize: '10px',
-      }"
-      class="nodrag nopan truncate text-xs cursor-pointer"
-      @click="$emit('select')"
-      v-if="label"
-    >
-      {{ label }}
-    </div>
-  </EdgeLabelRenderer>
-</template>

package/components/ui/flow-builder/components/node-editor/ApiRequestEditor.vue

@@ -1,150 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { Plus } from 'lucide-vue-next'
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-
-const addKeyValuePair = (type: string) => {
-  if (!node.value.data[type]) {
-    node.value.data[type] = [];
-  }
-  node.value.data[type].push({ key: '', value: '' });
-}
-
-const removeKeyValuePair = (type: string, idx: number) => {
-  node.value.data[type].splice(idx, 1);
-}
-</script>
-
-<template>
-  <div class="w-full grid gap-2">
-    <div class="grid gap-2">
-      <p class="text-sm font-semibold">URL</p>
-      <Sandbox v-model="node.data.url" :variables="[]" placeholder="https://example.com" />
-    </div>
-
-    <div class="grid gap-2">
-      <p class="text-sm font-semibold">Method</p>
-      <Select v-model="node.data.method">
-        <SelectTrigger class="w-full">
-          <SelectValue placeholder="Select a method" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectItem value="GET">GET</SelectItem>
-            <SelectItem value="POST">POST</SelectItem>
-            <SelectItem value="PUT">PUT</SelectItem>
-            <SelectItem value="PATCH">PATCH</SelectItem>
-            <SelectItem value="DELETE">DELETE</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-
-    <div class="grid gap-2">
-      <Label class="text-sm font-semibold mb-2">URL parameters</Label>
-      <div class="col-span-2">
-        <div v-for="(pair, idx) in node.data.urlParameters" :key="idx" class="flex items-center gap-2 mb-2">
-          <Sandbox v-model="pair.key" :variables="[]" placeholder="Key" class="w-full max-h-[200px]" />
-          <Sandbox v-model="pair.value" :variables="[]" placeholder="Value" class="w-full max-h-[200px]" />
-  
-          <button
-            type="button"
-            class="text-red-500 hover:text-red-700 ml-2"
-            @click="removeKeyValuePair('urlParameters', idx)"
-            title="Delete"
-          >
-            &times;
-          </button>
-        </div>
-        <Button @click="addKeyValuePair('urlParameters')" variant="outline">
-          <Plus class="size-4" />
-          Add Key-Value Pair
-        </Button>
-      </div>
-    </div>
-
-    <div class="grid gap-2">
-      <Label class="text-sm font-semibold mb-2">Headers</Label>
-      <div class="col-span-2">
-        <div v-for="(pair, idx) in node.data.headers" :key="idx" class="flex items-center gap-2 mb-2">
-          <Sandbox v-model="pair.key" :variables="[]" placeholder="Key" class="w-full max-h-[200px]" />
-          <Sandbox v-model="pair.value" :variables="[]" placeholder="Value" class="w-full max-h-[200px]" />
-  
-          <button
-            type="button"
-            class="text-red-500 hover:text-red-700 ml-2"
-            @click="removeKeyValuePair('headers', idx)"
-            title="Delete"
-          >
-            &times;
-          </button>
-        </div>
-        <Button @click="addKeyValuePair('headers')" variant="outline">
-          <Plus class="size-4" />
-          Add Key-Value Pair
-        </Button>
-      </div>
-    </div>
-
-    <div class="grid gap-2" v-if="['POST', 'PUT', 'PATCH'].includes(node.data.method)">
-      <Label class="text-sm font-semibold mb-2">Body</Label>
-      <div class="col-span-2">
-        <div v-for="(pair, idx) in node.data.body" :key="idx" class="flex items-center gap-2 mb-2">
-          <Sandbox v-model="pair.key" :variables="[]" placeholder="Key" class="w-full max-h-[200px]" />
-          <Sandbox v-model="pair.value" :variables="[]" placeholder="Value" class="w-full max-h-[200px]" />
-  
-          <button
-            type="button"
-            class="text-red-500 hover:text-red-700 ml-2"
-            @click="removeKeyValuePair('body', idx)"
-            title="Delete"
-          >
-            &times;
-          </button>
-        </div>
-        <Button @click="addKeyValuePair('body')" variant="outline">
-          <Plus class="size-4" />
-          Add Key-Value Pair
-        </Button>
-      </div>
-    </div>
-
-    <div class="grid gap-2">
-      <Label class="text-sm font-semibold mb-2">Cookies</Label>
-      <div class="col-span-2">
-        <div v-for="(pair, idx) in node.data.cookies" :key="idx" class="flex items-center gap-2 mb-2">
-          <Sandbox v-model="pair.key" :variables="[]" placeholder="Key" class="w-full max-h-[200px]" />
-          <Sandbox v-model="pair.value" :variables="[]" placeholder="Value" class="w-full max-h-[200px]" />
-  
-          <button
-            type="button"
-            class="text-red-500 hover:text-red-700 ml-2"
-            @click="removeKeyValuePair('cookies', idx)"
-            title="Delete"
-          >
-            &times;
-          </button>
-        </div>
-        <Button @click="addKeyValuePair('cookies')" variant="outline">
-          <Plus class="size-4" />
-          Add Key-Value Pair
-        </Button>
-      </div>
-    </div>
-  </div>
-</template>

package/components/ui/flow-builder/components/node-editor/ConfettiEditor.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <p>Pops some confetti on the whole screen</p>
-  </div>
-</template>

package/components/ui/flow-builder/components/node-editor/ConfirmEditor.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <p class="text-sm font-semibold mb-2">Title</p>
-    <Sandbox v-model="node.data.title" :variables="[]" placeholder="Confirmation" class="mb-4" />
-    <p class="text-sm font-semibold mb-2">Message</p>
-    <Sandbox v-model="node.data.message" :variables="[]" placeholder="Are you sure you want to proceed?" class="mb-4" />
-    <p class="text-sm font-semibold mb-2">Confirm text</p>
-    <Sandbox v-model="node.data.confirmText" :variables="[]" placeholder="Confirm" />
-  </div>
-</template>

package/components/ui/flow-builder/components/node-editor/FinishFlowEditor.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <p class="text-sm text-muted-foreground mb-4">Finishes the flow, closing any open dialogs returning data if needed</p>
-
-    <div class="flex items-center justify-between gap-2">
-      <label class="text-sm font-semibold select-none" for="return-data">Return data</label>
-      <Switch v-model="node.data.returnData" id="return-data" />
-    </div>
-
-    <div v-if="node.data.returnData" class="mt-4">
-      <CodeEditor v-model="node.data.transform" :variables="[]" placeholder="return ..." class="mb-1" />
-      <p class="text-xs text-stone-500">Just make sure you <b>return</b> a value</p>
-    </div>
-  </div>
-</template>

package/components/ui/flow-builder/components/node-editor/IntegrationActionEditor.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { computed, toRaw } from 'vue';
-import integrationSettingViews from '../../../integration-action-builder/integrations'
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const { showBuilder } = useIntegrationActionBuilder()
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-
-const editBuilder = async () => {
-  let action = node.value.data.action ? structuredClone(toRaw(node.value.data.action)) : null
-  let newAction = await showBuilder([], action);
-  if (newAction) {
-    node.value.data.action = newAction
-    // node.value.data.action = JSON.parse(JSON.stringify(newAction))
-  }
-}
-
-const outputValues = computed(() => {
-  if (!node.value.data.action?.integrationType || !node.value.data.action?.serviceType || !node.value.data.action?.actionType) return {}
-  return integrationSettingViews?.[node.value.data.action?.integrationType]?.serviceTypes?.[node.value.data.action?.serviceType]?.actionTypes?.[node.value.data.action?.actionType]?.outputs
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <p class="text-sm font-semibold mb-2">Integration action</p>
-    <Button @click="editBuilder">
-      <span v-if="node.data.action">{{ node.data.action.serviceType }} - {{ node.data.action.actionType }}</span>
-      <span v-else>Add integration action</span>
-    </Button>
-
-    <div v-if="outputValues">
-      {{ outputValues }}
-    </div>
-  </div>
-</template>

package/components/ui/flow-builder/components/node-editor/SetVariableEditor.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { type FlowVariable } from '../../types'
-import { inject, ref } from 'vue';
-import { X } from 'lucide-vue-next';
-
-const variables = inject('variables', ref([])) as { value: FlowVariable[] }
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-
-function addNewUpdateAction() {
-  if (!node.value.data.updateActions) node.value.data.updateActions = []
-  node.value.data.updateActions.push({
-    id: crypto.randomUUID(),
-    variableId: '',
-    value: ''
-  })
-}
-
-function removeUpdateAction(id: string) {
-  node.value.data.updateActions = node.value.data.updateActions.filter(action => action.id !== id)
-}
-</script>
-
-<template>
-  <div class="w-full">
-    <p class="text-sm font-semibold mb-2">Set variables</p>
-    <div class="grid divide-y divide-border">
-      <div v-for="action in node.data.updateActions" :key="action.id" class="flex flex-col gap-2 pb-4 mb-2">
-        <div class="flex gap-2 items-center justify-between">
-          <p>Update variable</p>
-          
-          <Button variant="ghost" size="icon" @click="removeUpdateAction(action.id)">
-            <X class="size-4" />
-          </Button>
-        </div>
-
-        <Select v-model="action.variableId">
-            <SelectTrigger class="w-full">
-              <SelectValue placeholder="Variable" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectItem v-for="variable in variables" :key="variable.id" :value="variable.id">
-                  {{ variable.name }}
-                </SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-
-        <Sandbox v-model="action.value" :variables="[]" placeholder="Value" class="w-full" />
-      </div>
-    </div>
-
-    <Button @click="addNewUpdateAction">Update another variable</Button>
-  </div>
-</template>

package/components/ui/flow-builder/components/node-editor/ShowDialogEditor.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <p class="text-sm font-semibold mb-2">Dialog layout</p>
-    <FormBuilderSelect v-model="node.data.layout" buildText="Build dialog" editText="Edit dialog" />
-  </div>
-</template>

package/components/ui/flow-builder/components/node-editor/ShowModuleEditor.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import { Plus } from 'lucide-vue-next'
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const route = useRoute()
-const { getModules } = useProjectService()
-const modules = ref([])
-
-const emit = defineEmits(['update:modelValue']);
-
-const projectId = computed(() => route.params.slug)
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-
-const addKeyValuePair = () => {
-  if (!node.value.data.moduleData) {
-    node.value.data.moduleData = [];
-  }
-  node.value.data.moduleData.push({ key: '', value: '' });
-}
-
-const removeKeyValuePair = (idx: number) => {
-  node.value.data.moduleData.splice(idx, 1);
-}
-
-const loadModules = async () => {
-  modules.value = await getModules(projectId.value)
-}
-
-onMounted(async () => {
-  loadModules()
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <p class="text-sm text-muted-foreground mb-4">Shows the module in an overlay. You can pass data to the module using the data field.</p>
-
-    <div class="grid gap-2 mb-2 py-2">
-      <div class="flex flex-col items-start gap-1.5 mb-4">
-        <Label class="text-sm font-semibold mb-2">Module</Label>
-        <Select v-model="node.data.moduleId">
-          <SelectTrigger class="w-full">
-            <SelectValue placeholder="Select a module" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectItem v-for="module in modules" :key="module.id" :value="module.id">
-                {{ module.name }}
-              </SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div class="grid gap-2">
-        <Label class="text-sm font-semibold mb-2">Data</Label>
-        <div class="col-span-2">
-          <div v-for="(pair, idx) in node.data.moduleData" :key="idx" class="flex items-center gap-2 mb-2">
-            <Sandbox v-model="pair.key" :variables="[]" placeholder="Key" class="w-full max-h-[200px]" />
-            <Sandbox v-model="pair.value" :variables="[]" placeholder="Value" class="w-full max-h-[200px]" />
-    
-            <button
-              type="button"
-              class="text-red-500 hover:text-red-700 ml-2"
-              @click="removeKeyValuePair(idx)"
-              title="Delete"
-            >
-              &times;
-            </button>
-          </div>
-          <Button @click="addKeyValuePair" variant="outline">
-            <Plus class="size-4" />
-            Add Key-Value Pair
-          </Button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/components/ui/flow-builder/components/node-editor/ShowToastEditor.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <p class="text-sm font-semibold mb-2">Title</p>
-    <Sandbox v-model="node.data.title" :variables="[]" placeholder="Title" class="mb-4" />
-    <p class="text-sm font-semibold mb-2">Message</p>
-    <Sandbox v-model="node.data.message" :variables="[]" placeholder="Message" />
-  </div>
-</template>

package/components/ui/flow-builder/components/node-editor/TransformDataEditor.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <p class="text-sm font-semibold mb-2">Transform data</p>
-    <CodeEditor v-model="node.data.transform" :variables="[]" placeholder="return ..." class="mb-1" />
-    <p class="text-xs text-stone-500">Just make sure you <b>return</b> a value</p>
-  </div>
-</template>

package/components/ui/flow-builder/components/node-editor/VisitUrlEditor.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    required: true,
-  }
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const node = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <p class="text-sm font-semibold mb-2">URL</p>
-    <Sandbox v-model="node.data.url" :variables="[]" placeholder="https://example.com" class="mb-4" />
-    
-    <div class="flex items-center justify-between gap-2">
-      <label class="text-sm font-semibold select-none" for="open-in-new-tab">Open in new tab</label>
-      <Switch v-model="node.data.newTab" id="open-in-new-tab" />
-    </div>
-  </div>
-</template>