@oneclick.dev/cms-kit 0.0.2 → 0.0.4

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

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

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

@@ -1,185 +0,0 @@
-import { toast } from 'vue-sonner'
-import { useNuxtApp } from 'nuxt/app'
-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

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

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

@@ -1,55 +0,0 @@
-import { computed, toRef } from 'vue'
-import { useNodeConnections } from '@vue-flow/core'
-import { ProcessStatus } from './useRunProcess'
-
-export function useProcessNodeLogic(props) {
-  const sourceConnections = useNodeConnections({ handleType: 'target' })
-  const targetConnections = useNodeConnections({ handleType: 'source' })
-
-  const isStartNode = computed(() => sourceConnections.value.length === 0)
-  const isEndNode = computed(() => targetConnections.value.length === 0)
-
-  const status = toRef(() => props.data.status)
-
-  const bgColor = computed(() => {
-    if (isStartNode.value) return '#2563eb'
-
-    switch (status.value) {
-      case ProcessStatus.ERROR:
-        return '#f87171'
-      case ProcessStatus.FINISHED:
-        return '#42B983'
-      case ProcessStatus.CANCELLED:
-        return '#fbbf24'
-      default:
-        return '#4b5563'
-    }
-  })
-
-  const processLabel = computed(() => {
-    if (isStartNode.value) return '📦'
-
-    switch (status.value) {
-      case ProcessStatus.ERROR:
-        return '❌'
-      case ProcessStatus.SKIPPED:
-        return '🚧'
-      case ProcessStatus.CANCELLED:
-        return '🚫'
-      case ProcessStatus.FINISHED:
-        return '😎'
-      default:
-        return '🏠'
-    }
-  })
-
-  return {
-    sourceConnections,
-    targetConnections,
-    isStartNode,
-    isEndNode,
-    bgColor,
-    processLabel,
-    status
-  }
-}