@oneclick.dev/cms-kit 0.0.1

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

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

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

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

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

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

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

package/components/ui/flow-builder/components/nodes/ApiRequestNode.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import ApiRequestToolbar from '../toolbars/ApiRequestToolbar.vue'
+import { ChevronsLeftRightEllipsis } from 'lucide-vue-next'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+  },
+  data: {
+    type: Object
+  }
+})
+</script>
+
+<template>
+  <ApiRequestToolbar :nodeId="id" :toolbarVisible="data.toolbarVisible" :toolbarPosition="data.toolbarPosition">
+    <Handle type="target" :position="Position.Left" />
+    
+    <div class="flex items-center gap-2">
+      <div class="size-8 bg-gray-100 dark:bg-gray-500/50 text-white rounded-xl flex items-center justify-center">
+        <ChevronsLeftRightEllipsis class="size-5" />
+      </div>
+      <div>API Request</div>
+    </div>
+
+    <Handle
+      id="success"
+      type="source"
+      :position="Position.Right"
+      :style="{ top: '30%', background: 'rgb(76 219 117)' }"
+    />
+    <Handle
+      id="error"
+      type="source"
+      :position="Position.Right"
+      :style="{ top: '70%', background: 'rgb(239 68 68)' }"
+    />
+  </ApiRequestToolbar>
+</template>

package/components/ui/flow-builder/components/nodes/ConfettiNode.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import NodeToolbarWrapper from '../toolbars/DefaultToolbar.vue'
+import { PartyPopper } from 'lucide-vue-next'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+  },
+  data: {
+    type: Object
+  }
+})
+</script>
+
+<template>
+  <NodeToolbarWrapper :nodeId="id" :toolbarVisible="data.toolbarVisible" :toolbarPosition="data.toolbarPosition">
+    <Handle type="target" :position="Position.Left" />
+    
+    <div class="flex flex-col items-center gap-1 text-red-100">
+      <PartyPopper class="size-8" />
+      <span class="text-[9px]">Confetti</span>
+    </div>
+
+    <Handle type="source" id="success" :position="Position.Right" />
+  </NodeToolbarWrapper>
+</template>

package/components/ui/flow-builder/components/nodes/ConfirmNode.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import ConfirmToolbar from '../toolbars/ConfirmToolbar.vue'
+import { MessageSquareWarning } from 'lucide-vue-next'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+  },
+  data: {
+    type: Object
+  }
+})
+</script>
+
+<template>
+  <ConfirmToolbar :nodeId="id" :toolbarVisible="data.toolbarVisible" :toolbarPosition="data.toolbarPosition">
+    <Handle type="target" :position="Position.Left" />
+    
+    <div class="flex items-center gap-2">
+      <div class="size-8 bg-red-500 text-white rounded-xl flex items-center justify-center">
+        <MessageSquareWarning class="size-5" />
+      </div>
+      <div>Ask confirmation</div>
+    </div>
+    
+    <Handle
+      id="success"
+      type="source"
+      :position="Position.Right"
+      :style="{ top: '30%', background: 'rgb(76 219 117)' }"
+    />
+    <Handle
+      id="error"
+      type="source"
+      :position="Position.Right"
+      :style="{ top: '70%', background: 'rgb(239 68 68)' }"
+    />
+  </ConfirmToolbar>
+</template>

package/components/ui/flow-builder/components/nodes/EmptyNode.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+  },
+  data: {
+    type: Object
+  }
+})
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <div class="size-8 bg-gray-300 text-gray-600 rounded-xl flex items-center justify-center">
+      <span>!</span>
+    </div>
+    <div class="text-red-400 font-medium">Select an action</div>
+  </div>
+</template>

package/components/ui/flow-builder/components/nodes/FinishFlowNode.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import NodeToolbarWrapper from '../toolbars/DefaultToolbar.vue'
+import { Goal, X } from 'lucide-vue-next'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+  },
+  data: {
+    type: Object
+  }
+})
+</script>
+
+<template>
+  <NodeToolbarWrapper :nodeId="id" :toolbarVisible="false">
+    <Handle type="target" :position="Position.Left" />
+    
+    <div class="flex flex-col items-center gap-1">
+      <Goal class="size-8" />
+      <span class="text-[9px] font-bold">FINISH FLOW</span>
+    </div>
+  </NodeToolbarWrapper>
+</template>

package/components/ui/flow-builder/components/nodes/IntegrationActionNode.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import IntegrationActionToolbar from '../toolbars/IntegrationActionToolbar.vue'
+import { ChevronsLeftRightEllipsis } from 'lucide-vue-next'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+  },
+  data: {
+    type: Object
+  }
+})
+</script>
+
+<template>
+  <IntegrationActionToolbar :nodeId="id" :toolbarVisible="data.toolbarVisible" :toolbarPosition="data.toolbarPosition">
+    <Handle type="target" :position="Position.Left" />
+    
+    <div v-if="!data.action || !data.action.integrationType" class="flex items-center gap-2">
+      <div class="size-8 bg-gray-100 dark:bg-gray-500/50 text-white rounded-xl flex items-center justify-center">
+        <ChevronsLeftRightEllipsis class="size-5" />
+      </div>
+      <div>Select action</div>
+    </div>
+
+    <div v-else class="flex items-center gap-2">
+      <div class="size-8 bg-muted/80 dark:bg-muted/40 text-white rounded-xl flex items-center justify-center">
+        <IntegrationIcon :type="data.action.integrationType" class="size-5" />
+      </div>
+      <div>{{ data.action.serviceType }} - {{ data.action.actionType }}</div>
+    </div>
+
+    <Handle
+      id="success"
+      type="source"
+      :position="Position.Right"
+      :style="{ top: '30%', background: 'rgb(76 219 117)' }"
+    />
+    <Handle
+      id="error"
+      type="source"
+      :position="Position.Right"
+      :style="{ top: '70%', background: 'rgb(239 68 68)' }"
+    />
+  </IntegrationActionToolbar>
+</template>

package/components/ui/flow-builder/components/nodes/SetVariableNode.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import NodeToolbarWrapper from '../toolbars/DefaultToolbar.vue'
+import { Variable } from 'lucide-vue-next'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+  },
+  data: {
+    type: Object
+  }
+})
+</script>
+
+<template>
+  <NodeToolbarWrapper :nodeId="id" :toolbarVisible="data.toolbarVisible" :toolbarPosition="data.toolbarPosition">
+    <Handle type="target" :position="Position.Left" />
+    
+    <div class="flex items-center gap-2">
+      <div class="size-8 bg-blue-500 text-white rounded-xl flex items-center justify-center">
+        <Variable class="size-5" />
+      </div>
+      <div>Set variable</div>
+    </div>
+
+    <Handle type="source" id="success" :position="Position.Right" />
+  </NodeToolbarWrapper>
+</template>

package/components/ui/flow-builder/components/nodes/ShowDialogNode.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import NodeToolbarWrapper from '../toolbars/DefaultToolbar.vue'
+import { MessageSquareCode } from 'lucide-vue-next'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+  },
+  data: {
+    type: Object
+  }
+})
+</script>
+
+<template>
+  <NodeToolbarWrapper :nodeId="id" :toolbarVisible="data.toolbarVisible" :toolbarPosition="data.toolbarPosition">
+    <Handle type="target" :position="Position.Left" />
+    
+    <div class="flex items-center gap-2">
+      <div class="size-8 bg-green-500 text-white rounded-xl flex items-center justify-center">
+        <MessageSquareCode class="size-5" />
+      </div>
+      <div>Show dialog</div>
+    </div>
+
+    <Handle type="source" id="success" :position="Position.Right" />
+  </NodeToolbarWrapper>
+</template>

package/components/ui/flow-builder/components/nodes/ShowModuleNode.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import NodeToolbarWrapper from '../toolbars/DefaultToolbar.vue'
+import { Package } from 'lucide-vue-next'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+  },
+  data: {
+    type: Object
+  }
+})
+</script>
+
+<template>
+  <NodeToolbarWrapper :nodeId="id" :toolbarVisible="data.toolbarVisible" :toolbarPosition="data.toolbarPosition">
+    <Handle type="target" :position="Position.Left" />
+    
+    <div class="flex items-center gap-2">
+      <div class="size-8 bg-purple-500 text-white rounded-xl flex items-center justify-center">
+        <Package class="size-5" />
+      </div>
+      <div>Show module</div>
+    </div>
+
+    <Handle type="source" id="success" :position="Position.Right" />
+  </NodeToolbarWrapper>
+</template>

package/components/ui/flow-builder/components/nodes/ShowToastNode.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import NodeToolbarWrapper from '../toolbars/DefaultToolbar.vue'
+import { MessageSquare } from 'lucide-vue-next'
+import { useProcessNodeLogic } from '../../composables/useProcessNodeLogic'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  position: {
+    type: Object,
+    required: true,
+  },
+  data: {
+    type: Object
+  }
+})
+</script>
+
+<template>
+  <NodeToolbarWrapper :nodeId="id" :toolbarVisible="data.toolbarVisible" :toolbarPosition="data.toolbarPosition">
+    <Handle type="target" :position="Position.Left" />
+    
+    <div class="flex items-center gap-2">
+      <div class="size-8 bg-orange-500 text-white rounded-xl flex items-center justify-center">
+        <MessageSquare class="size-5" />
+      </div>
+      <div>Show toast</div>
+    </div>
+
+    <Handle type="source" id="success" :position="Position.Right" />
+  </NodeToolbarWrapper>
+</template>

package/components/ui/flow-builder/components/nodes/StartNode.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import NodeToolbarWrapper from '../toolbars/DefaultToolbar.vue'
+import { useProcessNodeLogic } from  '../../composables/useProcessNodeLogic.js'
+
+const props = defineProps({
+  data: {
+    type: Object
+  },
+  sourcePosition: {
+    type: String,
+  },
+  targetPosition: {
+    type: String,
+  },
+})
+
+const { bgColor, processLabel, isStartNode, isEndNode } = useProcessNodeLogic(props)
+</script>
+
+<template>
+  <NodeToolbarWrapper nodeId="START" :toolbarVisible="data.toolbarVisible" :toolbarPosition="data.toolbarPosition">
+    START
+
+    <Handle type="source" id="success" :position="Position.Right" />
+  </NodeToolbarWrapper>
+</template>