@oneclick.dev/cms-kit 0.0.1

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

@@ -0,0 +1,34 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import NodeToolbarWrapper from '../toolbars/DefaultToolbar.vue'
+import { Braces } 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-yellow-500 text-white rounded-xl flex items-center justify-center">
+        <Braces class="size-5" />
+      </div>
+      <div>Transform data</div>
+    </div>
+
+    <Handle type="source" id="success" :position="Position.Right" />
+  </NodeToolbarWrapper>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup>
+import { Position, Handle } from '@vue-flow/core'
+import NodeToolbarWrapper from '../toolbars/DefaultToolbar.vue'
+import { Globe } 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">
+        <Globe class="size-5" />
+      </div>
+      <div>Visit URL</div>
+    </div>
+
+    <Handle type="source" id="success" :position="Position.Right" />
+  </NodeToolbarWrapper>
+</template>

package/components/ui/flow-builder/components/toolbars/ApiRequestToolbar.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Position } from '@vue-flow/core'
+import { NodeToolbar } from '@vue-flow/node-toolbar'
+import { Plus } from 'lucide-vue-next'
+
+const props = defineProps({
+  nodeId: String,
+  toolbarVisible: Boolean,
+})
+
+const createNewNode = inject('createNewNode') as (args: any) => void
+
+const addSuccessNode = () => {
+  createNewNode({ type: 'empty', parentId: props.nodeId, sourceHandle: 'success' })
+}
+
+const addErrorNode = () => {
+  createNewNode({ type: 'empty', parentId: props.nodeId, sourceHandle: 'error' })
+}
+</script>
+
+<template>
+  <NodeToolbar :is-visible="toolbarVisible" :position="Position.Right">
+    <div class="flex flex-col gap-2">
+      <Button
+        size="icon"
+        class="rounded-full bg-green-500 hover:bg-green-600 size-7"
+        @click="addSuccessNode"
+        title="Add on success"
+      >
+        <Plus class="text-white size-4" />
+      </Button>
+      <Button
+        size="icon"
+        class="rounded-full bg-red-500 hover:bg-red-600 size-7"
+        @click="addErrorNode"
+        title="Add on error"
+      >
+        <Plus class="text-white size-4" />
+      </Button>
+    </div>
+  </NodeToolbar>
+
+  <slot></slot>
+</template>

package/components/ui/flow-builder/components/toolbars/ConfirmToolbar.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Position } from '@vue-flow/core'
+import { NodeToolbar } from '@vue-flow/node-toolbar'
+import { Plus } from 'lucide-vue-next'
+
+const props = defineProps({
+  nodeId: String,
+  toolbarVisible: Boolean,
+})
+
+const createNewNode = inject('createNewNode') as (args: any) => void
+
+const addSuccessNode = () => {
+  createNewNode({ type: 'empty', parentId: props.nodeId, sourceHandle: 'success' })
+}
+
+const addErrorNode = () => {
+  createNewNode({ type: 'empty', parentId: props.nodeId, sourceHandle: 'error' })
+}
+</script>
+
+<template>
+  <NodeToolbar :is-visible="toolbarVisible" :position="Position.Right">
+    <div class="flex flex-col gap-2">
+      <Button
+        size="icon"
+        class="rounded-full bg-green-500 hover:bg-green-600 size-7"
+        @click="addSuccessNode"
+        title="Add on success"
+      >
+        <Plus class="text-white size-4" />
+      </Button>
+      <Button
+        size="icon"
+        class="rounded-full bg-red-500 hover:bg-red-600 size-7"
+        @click="addErrorNode"
+        title="Add on error"
+      >
+        <Plus class="text-white size-4" />
+      </Button>
+    </div>
+  </NodeToolbar>
+
+  <slot></slot>
+</template>

package/components/ui/flow-builder/components/toolbars/DefaultToolbar.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { Plus } from 'lucide-vue-next'
+import { Position } from '@vue-flow/core'
+import { NodeToolbar } from '@vue-flow/node-toolbar'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  nodeId: {
+    type: String,
+    required: true,
+  },
+  toolbarVisible: {
+    type: Boolean,
+    default: false,
+  },
+  toolbarPosition: {
+    type: String as () => Position,
+    default: Position.Right,
+  },
+})
+
+const createNewNode = inject('createNewNode') as (node: any) => void
+
+const addNode = () => {
+  createNewNode({ type: 'empty', parentId: props.nodeId, sourceHandle: 'success' })
+}
+</script>
+
+<template>
+  <NodeToolbar :is-visible="toolbarVisible" :position="toolbarPosition">
+    <Button
+      size="icon"
+      class="rounded-full bg-purple-500 hover:bg-purple-600"
+      @click="addNode"
+    >
+      <Plus class="text-white size-5" />
+    </Button>
+  </NodeToolbar>
+
+  <slot></slot>
+</template>

package/components/ui/flow-builder/components/toolbars/IntegrationActionToolbar.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Position } from '@vue-flow/core'
+import { NodeToolbar } from '@vue-flow/node-toolbar'
+import { Plus } from 'lucide-vue-next'
+
+const props = defineProps({
+  nodeId: String,
+  toolbarVisible: Boolean,
+})
+
+const createNewNode = inject('createNewNode') as (args: any) => void
+
+const addSuccessNode = () => {
+  createNewNode({ type: 'empty', parentId: props.nodeId, sourceHandle: 'success' })
+}
+
+const addErrorNode = () => {
+  createNewNode({ type: 'empty', parentId: props.nodeId, sourceHandle: 'error' })
+}
+</script>
+
+<template>
+  <NodeToolbar :is-visible="toolbarVisible" :position="Position.Right">
+    <div class="flex flex-col gap-2">
+      <Button
+        size="icon"
+        class="rounded-full bg-green-500 hover:bg-green-600 size-7"
+        @click="addSuccessNode"
+        title="Add on success"
+      >
+        <Plus class="text-white size-4" />
+      </Button>
+      <Button
+        size="icon"
+        class="rounded-full bg-red-500 hover:bg-red-600 size-7"
+        @click="addErrorNode"
+        title="Add on error"
+      >
+        <Plus class="text-white size-4" />
+      </Button>
+    </div>
+  </NodeToolbar>
+
+  <slot></slot>
+</template>

package/components/ui/flow-builder/components/variables/Widget.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { ControlButton } from '@vue-flow/controls'
+import { Variable, CaseSensitive, Hash, ToggleLeft, Braces, Brackets, Calendar, ChevronDown, Plus } from 'lucide-vue-next'
+import { inject, ref } from 'vue';
+import { type FlowVariable } from '../../types'
+
+
+const openVariableId = ref<string | null>(null)
+
+const variables = inject('variables', ref([])) as { value: FlowVariable[] }
+
+async function addVariable(type: string) {
+  let id = crypto.randomUUID()
+  let name = "New variable"
+
+  let i = 2
+  while (variables.value.find(variable => variable.name === name)) {
+    name = "New variable " + i
+    i++
+  }
+
+  variables.value.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>
+  <Tooltip>
+    <Popover>
+      <PopoverTrigger as-child>
+        <TooltipTrigger as-child>
+          <ControlButton>
+            <Variable class="text-gray-500 size-5" />
+          </ControlButton>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Variables</p>
+        </TooltipContent>
+      </PopoverTrigger>
+      <PopoverContent class="w-64">
+        <div class="grid gap-4">
+          <div>
+            <div class="flex items-center justify-between mb-2">
+              <div class="flex flex-col gap-1">
+                <p class="text-sm font-semibold">
+                  Global variables
+                </p>
+                <p class="text-xs text-muted-foreground">Persist data between nodes</p>
+              </div>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                  <Button size="icon" variant="secondary" class="rounded-full -mr-0.5">
+                    <Plus class="size-4" />
+                  </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 variables" :key="variable.id">
+                <div 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" @click="openVariableId = openVariableId === variable.id ? null : variable.id">
+                      <ChevronDown class="size-4 transition-all duration-200" :class="{ 'rotate-180': openVariableId === variable.id }" />
+                    </Button>
+                  </div>
+                </div>
+  
+                <div class="grid transition-all duration-200" :class="`${openVariableId === variable.id ? 'opacity-100 grid-rows-[1fr]' : 'opacity-0 grid-rows-[0fr]'}`">
+                  <div class="grid gap-2 overflow-hidden">
+                    <div class="flex gap-2 items-center justify-between">
+                      <p class="text-sm font-semibold">
+                        Type
+                      </p>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger as-child>
+                          <Button variant="outline" size="sm">
+                            {{ variableOptions.find(option => option.value === variable.type)?.label }}
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                          <DropdownMenuItem v-for="option in variableOptions" :key="option.value" @click="variable.type = option.value">
+                            {{ option.label }}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+
+                    <div class="flex gap-2 items-center justify-between flex-wrap mb-2">
+                      <label :for="`variable_default_value_${variable.id}`" class="text-sm font-semibold select-none whitespace-nowrap">
+                        Default value
+                      </label>
+                      <div class="flex items-center gap-2" v-if="variable.type === 'boolean'">
+                        <Checkbox v-model="variable.defaultValue" class="border-ring" :id="`variable_default_value_${variable.id}`" />
+                        <Label :for="`variable_default_value_${variable.id}`" class="text-sm font-semibold select-none">
+                          {{ variable.defaultValue ? 'true' : 'false' }}
+                        </Label>
+                      </div>
+                      <Input placeholder="Default value" v-model="variable.defaultValue" v-else :id="`variable_default_value_${variable.id}`"/>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  </Tooltip>
+</template>

package/components/ui/flow-builder/composables/outputRegistry.ts

@@ -0,0 +1,33 @@
+export const outputRegistry = {
+  'integration-action': {
+    success: [
+      {
+        name: 'result',
+        type: '{ success: boolean; data?: any; message?: string }',
+        shortType: 'Object'
+      }
+    ],
+    error: [
+      {
+        name: 'result',
+        type: '{ success: false; error: string | { message: string; code?: string }; statusCode?: number }',
+        shortType: 'Object'
+      }
+    ]
+  },
+  'transform-data': {
+    success: [
+      {
+        name: 'value',
+        type: 'any',
+        shortType: 'any'
+      }
+    ]
+  },
+  default: {}
+}
+
+export function getOutputsForNode(node: any, handleId: string) {
+  const type = node.type || 'default'
+  return outputRegistry[type]?.[handleId] ?? []
+}

package/components/ui/flow-builder/composables/taskHandlers.js

@@ -0,0 +1,185 @@
+import { toast } from 'vue-sonner'
+import { useNuxtApp } from '#imports'
+import { interpolateTemplateFromVariableContext } from '../../../../lib/interpolation'
+
+export default {
+  'api-request': async (input, { node }) => {
+    try {
+      let variables = Object.keys(input).map(key => ({ name: key, value: input[key] }))
+  
+      let url = interpolateTemplateFromVariableContext(node.data.url, variables)
+      let method = interpolateTemplateFromVariableContext(node.data.method, variables).toUpperCase()
+  
+      let bodyPairs = node.data.body?.map(pair => ({
+        key: interpolateTemplateFromVariableContext(pair.key, variables),
+        value: interpolateTemplateFromVariableContext(pair.value, variables),
+      })) || []
+  
+      let headersPairs = node.data.headers?.map(pair => ({
+        key: interpolateTemplateFromVariableContext(pair.key, variables),
+        value: interpolateTemplateFromVariableContext(pair.value, variables),
+      })) || []
+  
+      let cookiesPairs = node.data.cookies?.map(pair => ({
+        key: interpolateTemplateFromVariableContext(pair.key, variables),
+        value: interpolateTemplateFromVariableContext(pair.value, variables),
+      })) || []
+  
+      let urlParamPairs = node.data.urlParameters?.map(pair => ({
+        key: interpolateTemplateFromVariableContext(pair.key, variables),
+        value: interpolateTemplateFromVariableContext(pair.value, variables),
+      })) || []
+  
+      // Build query string
+      const queryString = urlParamPairs
+        .filter(p => p.key)
+        .map(p => `${encodeURIComponent(p.key)}=${encodeURIComponent(p.value)}`)
+        .join('&')
+      const fullUrl = queryString ? `${url}?${queryString}` : url
+  
+      // Build headers
+      const headers = {}
+      headersPairs.forEach(({ key, value }) => {
+        if (key) headers[key] = value
+      })
+  
+      // Build cookies
+      if (cookiesPairs.length > 0) {
+        const cookieHeader = cookiesPairs
+          .map(({ key, value }) => `${key}=${value}`)
+          .join('; ')
+        headers['Cookie'] = cookieHeader
+      }
+  
+      // Build body
+      let body = null
+      if (['POST', 'PUT', 'PATCH'].includes(method)) {
+        const bodyObject = {}
+        bodyPairs.forEach(({ key, value }) => {
+          if (key) bodyObject[key] = value
+        })
+        body = JSON.stringify(bodyObject)
+        headers['Content-Type'] ||= 'application/json'
+      }
+  
+      // Make request
+      const res = await fetch(fullUrl, {
+        method,
+        headers,
+        body,
+        credentials: 'include', // includes cookies if any
+      })
+
+      if (res.status >= 400) {
+        return { result: { success: false, status: res.status } }
+      }
+  
+      // Try to parse response
+      let result
+      const contentType = res.headers.get('content-type')
+      if (contentType?.includes('application/json')) {
+        result = await res.json()
+      } else {
+        result = await res.text()
+      }
+
+      return { result: { success: true, data: result, status: res.status } }
+    } catch (error) {
+      return { result: { success: false, status: error.status || 500 } }
+    }
+  },
+  'integration-action': async (input, { node }) => {
+    const { fireAction } = useIntegrationActions(node.data.action.integration)
+    let res = await fireAction(node.data.action, input)
+    return { result: res }
+  },
+  'show-toast': async (input, { node }) => {
+    console.log('Show toast', input, node)
+    let variables = Object.keys(input).map(key => ({ name: key, value: input[key] }))
+    let title = interpolateTemplateFromVariableContext(node.data.title, variables)
+    let description = interpolateTemplateFromVariableContext(node.data.message, variables)
+    toast(title, { description })
+    return { shown: true }
+  },
+  'finish-flow': async (input, { node, onFinish }) => {
+    if (node.data.returnData) {
+      let returnValue = sandbox(node.data.transform, input)
+      onFinish(returnValue)
+    } else {
+      onFinish()
+    }
+    return { finished: true }
+  },
+  'confetti': async (input, { node }) => {
+    const { $confetti } = useNuxtApp()
+    $confetti()
+    return { confetti: true }
+  },
+  'confirm': async (input, { node }) => {
+    const { confirm } = useConfirmation()
+    if (confirm) {
+      let variables = Object.keys(input).map(key => ({ name: key, value: input[key] }))
+      let title = interpolateTemplateFromVariableContext(node.data.title, variables)
+      let message = interpolateTemplateFromVariableContext(node.data.message, variables)
+      let confirmText = interpolateTemplateFromVariableContext(node.data.confirmText, variables)
+      const confirmed = await confirm(message, title, confirmText)
+      return { confirmed }
+    }
+    return { confirmed: false }
+  },
+  'set-variable': async (input, { node, localVariables }) => {
+    console.log('Set variable', input, node, localVariables)
+    let variables = Object.keys(input).map(key => ({ name: key, value: input[key] }))
+
+    for (const action of node.data.updateActions ?? []) {
+      const variable = localVariables.value.find(v => v.id === action.variableId)
+      if (variable) {
+        variable.value = interpolateTemplateFromVariableContext(action.value, variables)
+      }
+    }
+
+    return { set: true }
+  },
+  'transform-data': async (input, { node }) => {
+    let transformedValue = sandbox(node.data.transform, input)
+    return { transformed: true, value: transformedValue }
+  },
+  'visit-url': async (input, { node }) => {
+    let variables = Object.keys(input).map(key => ({ name: key, value: input[key] }))
+    let url = interpolateTemplateFromVariableContext(node.data.url, variables)
+    
+    if (node.data.newTab) {
+      window.open(url, '_blank')
+    } else {
+      window.location.href = url
+    }
+    return { visited: true }
+  },
+  'show-dialog': async (input, { node }) => {
+    const { openCustomDialog } = useCustomDialog()
+    let variables = Object.keys(input).map(key => ({ name: key, value: input[key] }))
+    const result = await openCustomDialog(node.data.layout, variables)
+    console.log('Dialog result', result)
+    return result
+  },
+  'show-module': async (input, { node }) => {
+    console.log('Show module', input, node)
+    const { openInOverlay } = useModuleOverlay()
+    let variables = Object.keys(input).map(key => ({ name: key, value: input[key] }))
+    const params = {};
+    node.data.moduleData?.forEach((d) => {
+      params[interpolateTemplateFromVariableContext(d.key, variables)] = interpolateTemplateFromVariableContext(d.value, variables)
+    })
+    openInOverlay(node.data.moduleId, params)
+    return { shown: true }
+  }
+}
+
+
+const sandbox = (code, args = {}) => {
+  var frame = document.createElement('iframe');
+  document.body.appendChild(frame);
+  var F = frame.contentWindow.Function;
+  document.body.removeChild(frame);
+  return F(...Object.keys(args), "'use strict';" + code)(...Object.values(args));
+}

package/components/ui/flow-builder/composables/useLayout.js

@@ -0,0 +1,60 @@
+import dagre from '@dagrejs/dagre'
+import { Position, useVueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
+import { Graph as GraphlibGraph } from 'graphlib'
+
+export function useLayout() {
+  const { findNode } = useVueFlow()
+
+  // 🟦 This is the logical graph for process traversal
+  const graph = ref(new GraphlibGraph({ directed: true }))
+
+  /**
+   * Layout the nodes visually using Dagre, and update graph traversal DAG
+   */
+  function layout(nodes, edges, direction = 'TB') {
+    const dagreGraph = new dagre.graphlib.Graph()
+    dagreGraph.setDefaultEdgeLabel(() => ({}))
+    dagreGraph.setGraph({ rankdir: direction })
+
+    const isHorizontal = direction === 'LR'
+
+    // layout graph nodes
+    for (const node of nodes) {
+      const graphNode = findNode(node.id)
+      dagreGraph.setNode(node.id, {
+        width: graphNode?.dimensions.width || 150,
+        height: graphNode?.dimensions.height || 50,
+      })
+    }
+
+    for (const edge of edges) {
+      dagreGraph.setEdge(edge.source, edge.target)
+    }
+
+    // 💥 Update visual layout
+    dagre.layout(dagreGraph)
+
+    // ✅ Rebuild process traversal graph (separate)
+    const traversalGraph = new GraphlibGraph({ directed: true })
+    for (const node of nodes) {
+      traversalGraph.setNode(node.id)
+    }
+    for (const edge of edges) {
+      traversalGraph.setEdge(edge.source, edge.target)
+    }
+    graph.value = traversalGraph // ← used in useRunProcess()
+
+    return nodes.map((node) => {
+      const pos = dagreGraph.node(node.id)
+      return {
+        ...node,
+        targetPosition: isHorizontal ? Position.Left : Position.Top,
+        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+        position: { x: pos.x, y: pos.y },
+      }
+    })
+  }
+
+  return { graph, layout }
+}