@oneclick.dev/cms-kit 0.0.2 → 0.0.4

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

@@ -1,267 +0,0 @@
-import { ref, toRef, toValue } from 'vue'
-import { useVueFlow } from '@vue-flow/core'
-import taskHandlers from './taskHandlers'
-
-export const ProcessStatus = {
-  ERROR: 'error',
-  SKIPPED: 'skipped',
-  CANCELLED: 'cancelled',
-  FINISHED: 'finished',
-  RUNNING: 'running',
-}
-
-/**
- * Composable to simulate running a process tree.
- *
- * It loops through each node, pretends to run an async process, and updates the node's data indicating whether the process has finished.
- * When one node finishes, the next one starts.
- *
- * When a node has multiple descendants, it will run them in parallel.
- *
- * @param options
- * @param options.graph The graph object containing the nodes and edges.
- * @param options.cancelOnError Whether to cancel the process if an error occurs.
- * @param options.nodes The nodes to run.
- * @param options.edges The edges to run.
- * @param options.variables The variables to run.
- * @param options.computedVariables The computed variables to run.
- * @param options.onFinish The function to call when the process finishes.
- */
-export function useRunProcess({
-  graph: dagreGraph,
-  cancelOnError = true,
-  nodes = [],
-  edges = [],
-  variables = [],
-  computedVariables = [],
-  onFinish
-}) {
-  const { updateNodeData, getConnectedEdges, findNode } = useVueFlow()
-  const nodeOutputs = new Map()
-  
-  const nodeMap = new Map(nodes.map((node) => [node.id, node]))
-
-  const graph = toRef(() => toValue(dagreGraph))
-
-  const isRunning = ref(false)
-
-  /** Map of running tasks with the node ID as the key and the timeout as the value. */
-  const runningTasks = new Map()
-
-  /** Set of node ids of nodes that have been executed  */
-  const executedNodes = new Set()
-
-  /** Set of node ids yet to be executed */
-  const upcomingTasks = new Set()
-
-  /** Local copy of the variables, so we can modify them without affecting the original variables */
-  const localVariables = ref(variables ? JSON.parse(JSON.stringify(variables.map(v => ({ ...v, value: Object.keys(v).includes('defaultValue') ? v.defaultValue : v.value ?? null })))) : [])
-
-  /**
-   * Run the process on a node.
-   * It will mark the node as running, simulate an async process, and then mark the node as finished or errored.
-   *
-   * @param nodeId The ID of the node to run.
-   * @param isStart Whether this is a starting node.
-   */
-  async function runNode(nodeId, isStart = false) {
-    if (executedNodes.has(nodeId)) {
-      return
-    }
-
-    // save the upcoming task in case it gets cancelled before we even start it
-    upcomingTasks.add(nodeId)
-
-    // get all incoming edges to this node
-    const incomers = getConnectedEdges(nodeId).filter((connection) => connection.target === nodeId)
-
-    // wait for edge animations to finish before starting the process
-    await Promise.all(incomers.map((incomer) => until(() => !incomer.data?.isAnimating)))
-
-    // remove the upcoming task since we are about to start it
-    upcomingTasks.clear()
-
-    if (!isRunning.value) {
-      // The process was stopped
-      return
-    }
-
-    // mark the node as executed, so it doesn't run again
-    executedNodes.add(nodeId)
-
-    updateNodeStatus(nodeId, ProcessStatus.RUNNING)
-
-    // RUN THE TASK
-    try {
-      // Step 1: Gather input from predecessors
-      const predecessors = graph.value.predecessors(nodeId) || []
-      const inputFromPredecessors = Object.assign({}, ...predecessors.map((id) => nodeOutputs.get(id) ?? {}))
-      const input = {
-        ...inputFromPredecessors,
-        ...Object.fromEntries(localVariables.value.map(v => [v.name, v.value]))
-      }
-      
-      // Step 2: Find the node and its task handler
-      const node = nodeMap?.size > 0 ? nodeMap.get(nodeId) : findNode(nodeId)
-
-      const taskFn = taskHandlers[node.data.taskType ?? node.type]
-
-      console.log('Running task:', node.data.taskType, taskFn)
-
-      // Step 3: Execute the task
-      const result = taskFn ? await taskFn(input, { node, graph: graph.value, onFinish, localVariables }) : {}
-    
-      // Step 4: Save output for child nodes
-      nodeOutputs.set(nodeId, result)
-      updateNodeStatus(nodeId, ProcessStatus.FINISHED)
-    
-      // Step 5: Run children
-      const outgoingEdges = edges.filter(edge => edge.source === nodeId)
-
-      const hasBranching = outgoingEdges.some(edge => edge.sourceHandle)
-
-      for (const edge of outgoingEdges) {
-        const { source, sourceHandle } = edge
-        const nodeType = nodeMap.get(source).type
-
-        const shouldRun =
-          (nodeType === 'start') ||
-          (nodeType === 'confirm' && sourceHandle === 'success' && result.confirmed === true) ||
-          (nodeType === 'confirm' && sourceHandle === 'error' && result.confirmed === false) ||
-          (nodeType === 'integration-action' && sourceHandle === 'success' && result.result?.success === true) ||
-          (nodeType === 'integration-action' && sourceHandle === 'error' && result.result?.success === false) ||
-          (nodeType === 'api-request' && sourceHandle === 'success' && result.result?.success === true) ||
-          (nodeType === 'api-request' && sourceHandle === 'error' && result.result?.success === false) ||
-          (!['confirm', 'integration-action', 'api-request'].includes(nodeType) && sourceHandle === 'success')
-
-        console.log('should run', shouldRun, nodeType, sourceHandle, result, hasBranching)
-
-        if (shouldRun) {
-          await runNode(edge.target)
-        }
-      }
-    } catch (err) {
-      console.error(`Error in node ${nodeId}:`, err)
-      updateNodeStatus(nodeId, ProcessStatus.ERROR)
-    
-      if (toValue(cancelOnError)) {
-        await skipDescendants(nodeId)
-      }
-    }
-  }
-
-  /**
-   * Run a sequence of nodes.
-   * It will start with the nodes that have no predecessors and then run the process on each node in sequence.
-   * If a node has multiple descendants, it will run them in parallel.
-   * If an error occurs, it will stop the process and mark all descendants as skipped.
-   * If cancelOnError is true, it will stop the process if an error occurs.
-   * If the process is stopped, it will mark all running nodes as cancelled.
-   *
-   * @param nodes The nodes to run.
-   */
-  async function run(nodes) {
-    // if the process is already running, we don't want to start it again
-    if (isRunning.value) {
-      return
-    }
-
-    // reset all nodes to their initial state
-    reset(nodes)
-
-    isRunning.value = true
-
-    // get all starting nodes (nodes with no predecessors)
-    const startingNodes = nodes.filter((node) => graph.value.predecessors(node.id)?.length === 0)
-
-    // run the process on all starting nodes in parallel
-    await Promise.all(startingNodes.map((node) => runNode(node.id, true)))
-
-    clear()
-  }
-
-  /**
-   * Reset all nodes to their initial state.
-   *
-   * @param nodes The nodes to reset.
-   */
-  function reset(nodes) {
-    clear()
-
-    for (const node of nodes) {
-      updateNodeStatus(node.id, null)
-    }
-  }
-
-  /**
-   * Skip all descendants of a node.
-   *
-   * @param nodeId The ID of the node to skip descendants for.
-   */
-  async function skipDescendants(nodeId) {
-    const children = graph.value.successors(nodeId) || []
-
-    for (const child of children) {
-      updateNodeStatus(child, ProcessStatus.SKIPPED)
-      await skipDescendants(child)
-    }
-  }
-
-  /**
-   * Stop the process.
-   *
-   * It will mark all running nodes as cancelled and skip all upcoming tasks.
-   */
-  async function stop() {
-    isRunning.value = false
-
-    for (const nodeId of upcomingTasks) {
-      clearTimeout(runningTasks.get(nodeId))
-      runningTasks.delete(nodeId)
-      updateNodeStatus(nodeId, ProcessStatus.CANCELLED)
-      await skipDescendants(nodeId)
-    }
-
-    for (const [nodeId, task] of runningTasks) {
-      clearTimeout(task)
-      runningTasks.delete(nodeId)
-      updateNodeStatus(nodeId, ProcessStatus.CANCELLED)
-      await skipDescendants(nodeId)
-    }
-
-    executedNodes.clear()
-    upcomingTasks.clear()
-  }
-
-  /**
-   * Clear all running tasks and executed nodes.
-   */
-  function clear() {
-    isRunning.value = false
-    executedNodes.clear()
-    runningTasks.clear()
-  }
-
-  /**
-   * Update the status of a node.
-   *
-   * @param nodeId The ID of the node to update.
-   * @param status The new status of the node.
-   */
-  function updateNodeStatus(nodeId, status) {
-    updateNodeData(nodeId, { status })
-  }
-
-  return { run, stop, reset, isRunning }
-}
-
-async function until(condition) {
-  return new Promise((resolve) => {
-    const interval = setInterval(() => {
-      if (condition()) {
-        clearInterval(interval)
-        resolve(true)
-      }
-    }, 100)
-  })
-}

package/components/ui/flow-builder/index.ts

@@ -1,5 +0,0 @@
-export { default as FlowBuilder } from './FlowBuilder.vue'
-export { default as FlowBuilderSelect } from './FlowBuilderSelect.vue'
-
-export { useRunProcess } from './composables/useRunProcess'
-export { useLayout } from './composables/useLayout'

package/components/ui/flow-builder/types.ts

@@ -1,7 +0,0 @@
-export interface FlowVariable {
-    id: string;
-    type: string;
-    name: string;
-    defaultValue: any;
-    value: any;
-}

package/components/ui/form/FormControl.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import { Slot } from 'reka-ui'
-import { useFormField } from './useFormField'
-
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-</script>
-
-<template>
-  <Slot
-    :id="formItemId"
-    data-slot="form-control"
-    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
-    :aria-invalid="!!error"
-  >
-    <slot />
-  </Slot>
-</template>

package/components/ui/form/FormDescription.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { useFormField } from './useFormField'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const { formDescriptionId } = useFormField()
-</script>
-
-<template>
-  <p
-    :id="formDescriptionId"
-    data-slot="form-description"
-    :class="cn('text-muted-foreground text-sm', props.class)"
-  >
-    <slot />
-  </p>
-</template>

package/components/ui/form/FormItem.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '../../../lib/utils'
-import { useId } from 'reka-ui'
-import { type HTMLAttributes, provide } from 'vue'
-import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const id = useId()
-provide(FORM_ITEM_INJECTION_KEY, id)
-</script>
-
-<template>
-  <div
-    data-slot="form-item"
-    :class="cn('grid gap-2', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/form/FormLabel.vue

@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import type { LabelProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Label } from '../label'
-import { useFormField } from './useFormField'
-
-const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
-
-const { error, formItemId } = useFormField()
-</script>
-
-<template>
-  <Label
-    data-slot="form-label"
-    :data-error="!!error"
-    :class="cn(
-      'data-[error=true]:text-destructive-foreground',
-      props.class,
-    )"
-    :for="formItemId"
-  >
-    <slot />
-  </Label>
-</template>

package/components/ui/form/FormMessage.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '../../../lib/utils'
-import { ErrorMessage } from 'vee-validate'
-import { type HTMLAttributes, toValue } from 'vue'
-import { useFormField } from './useFormField'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const { name, formMessageId } = useFormField()
-</script>
-
-<template>
-  <ErrorMessage
-    :id="formMessageId"
-    data-slot="form-message"
-    as="p"
-    :name="toValue(name)"
-    :class="cn('text-destructive-foreground text-sm', props.class)"
-  />
-</template>

package/components/ui/form/index.ts

@@ -1,7 +0,0 @@
-export { default as FormControl } from './FormControl.vue'
-export { default as FormDescription } from './FormDescription.vue'
-export { default as FormItem } from './FormItem.vue'
-export { default as FormLabel } from './FormLabel.vue'
-export { default as FormMessage } from './FormMessage.vue'
-export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
-export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'

package/components/ui/form/injectionKeys.ts

@@ -1,4 +0,0 @@
-import type { InjectionKey } from 'vue'
-
-export const FORM_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<string>

package/components/ui/form/useFormField.ts

@@ -1,30 +0,0 @@
-import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
-import { inject } from 'vue'
-import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
-
-export function useFormField() {
-  const fieldContext = inject(FieldContextKey)
-  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
-
-  if (!fieldContext)
-    throw new Error('useFormField should be used within <FormField>')
-
-  const { name } = fieldContext
-  const id = fieldItemContext
-
-  const fieldState = {
-    valid: useIsFieldValid(name),
-    isDirty: useIsFieldDirty(name),
-    isTouched: useIsFieldTouched(name),
-    error: useFieldError(name),
-  }
-
-  return {
-    id,
-    name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}

package/components/ui/form-builder/FormBuilder.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
-import FormBuilderWrapper from './components/FormBuilderWrapper.vue'
-
-const props = defineProps<{
-  id: number
-  config: any
-}>()
-
-const { closeFormBuilder } = useFormBuilder()
-const formBuilder = ref()
-
-watch(
-  () => props.config,
-  async () => {
-    await nextTick()
-    formBuilder.value?.setState(props.config)
-  },
-  { immediate: true }
-)
-
-const save = () => {
-  const data = formBuilder.value.getState()
-  console.log("Saving form builder", data)
-  closeFormBuilder(props.id, data)
-}
-
-const cancel = () => {
-  closeFormBuilder(props.id, false)
-}
-</script>
-
-<template>
-  <Teleport to="body">
-    <Sheet :open="true" @update:open="cancel">
-      <SheetContent side="bottom" class="w-full h-full sm:max-w-full">
-        <FormBuilderWrapper ref="formBuilder" />
-        <div class="flex justify-end gap-2 p-4">
-          <Button variant="outline" @click="cancel">Cancel</Button>
-          <Button @click="save">Save</Button>
-        </div>
-      </SheetContent>
-    </Sheet>
-  </Teleport>
-</template>

package/components/ui/form-builder/FormBuilderSelect.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-
-const { openFormBuilder } = useFormBuilder()
-
-const props = defineProps({
-  modelValue: {
-    type: Array,
-    required: true
-  },
-  buildText: {
-    type: String,
-    default: 'Build form'
-  },
-  editText: {
-    type: String,
-    default: 'Edit form'
-  }
-})
-
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: any[]): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true
-})
-
-const editForm = async () => {
-  let config = await openFormBuilder(modelValue.value)
-  if (config) {
-    emits('update:modelValue', config)
-  }
-}
-</script>
-
-<template>
-  <Button @click="editForm">
-    <span v-if="!modelValue || modelValue.length === 0">{{ buildText }}</span>
-    <span v-else>{{ editText }}</span>
-  </Button>
-</template>

package/components/ui/form-builder/FormDisplayer.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import FormBuilderWrapper from './components/FormBuilderWrapper.vue';
-import { ref, nextTick, onMounted } from 'vue'
-
-const props = defineProps({
-  settings: {
-    type: Object,
-    required: true
-  },
-  onFinish: {
-    type: Function,
-    default: () => {}
-  },
-  variables: {
-    type: Array,
-    default: () => []
-  }
-})
-
-const form = ref()
-
-const loadForm = async () => {
-  await nextTick()
-  form.value.setState({
-    ...props.settings,
-    layoutRef: {},
-    itemRefs: {},
-  })
-  form.value.fillDefaultValues()
-}
-
-onMounted(() => {
-  loadForm()
-})
-</script>
-
-<template>
-  <FormBuilderWrapper ref="form" :isPresentationMode="true" :onFinish="onFinish" :providedVariables="variables" />
-</template>

package/components/ui/form-builder/components/AdminElementEditor.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import settingViews from './admin/element-setting-views';
-import Transformer from '../components/admin/Transformer.vue'
-
-const activeElement = inject('activeElement');
-const state = inject('state');
-
-const emit = defineEmits(['removeItem']);
-
-function removeItem() {
-    emit('removeItem', activeElement.value.i);
-    activeElement.value = null;
-}
-
-const newName = ref("");
-
-watch(activeElement, () => {
-    newName.value = activeElement.value.variableName || "";
-})
-
-function updateVariableName() {
-    let oldName = activeElement.value.variableName;
-    activeElement.value.variableName = newName.value;
-
-    if (state.elementValues[oldName]) {
-        state.elementValues[newName.value] = state.elementValues[oldName];
-        delete state.elementValues[oldName];
-    }
-}
-
-onMounted(() => {
-    newName.value = activeElement.value?.variableName || "";
-})
-</script>
-
-<template>
-    <div class="shrink-0 p-2 rounded-xl border bg-card w-[275px] @7xl/custom-dashboard:w-[325px]">
-        <Input type="text" placeholder="Variable Name" v-model="newName" @blur="updateVariableName" class="bg-gray-200/25 hover:bg-gray-200/35 dark:bg-muted/25 dark:hover:bg-muted/30 border-transparent hover:border-ring focus:border-ring dark:focus:border-ring shadow-none focus:shadow-xs mb-4" />
-
-        <component :is="settingViews[activeElement.component]" />
-
-        <p class="text-sm font-semibold mt-4 mb-2">Visible</p>
-        <Transformer v-model="activeElement.visibility" placeholder="true" />
-
-        <Button variant="destructive" @click="removeItem" class="mt-4">Remove Element</Button>
-    </div>
-</template>

package/components/ui/form-builder/components/AdminToolbar.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import { ChevronsLeftRightEllipsis, Component, Variable } from 'lucide-vue-next';
-
-const props = defineProps({
-    modelValue: {
-        type: String,
-        required: true
-    }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const mutableValue = computed({
-    get() {
-        return props.modelValue
-    },
-    set(value) {
-        emit('update:modelValue', value)
-    }
-})
-</script>
-
-<template>
-    <div>
-        <SegmentedControl direction="vertical" class="w-12" v-model="mutableValue" allow-empty>
-            <TooltipProvider>
-                <Tooltip>
-                    <TooltipTrigger as-child>
-                        <SegmentedControlButton value="new-element">
-                            <Component class="size-4" />
-                        </SegmentedControlButton>
-                    </TooltipTrigger>
-                    <TooltipContent :side="'right'">
-                        <p>Add new element</p>
-                    </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                    <TooltipTrigger as-child>
-                        <SegmentedControlButton value="variables">
-                            <Variable class="size-4" />
-                        </SegmentedControlButton>
-                    </TooltipTrigger>
-                    <TooltipContent :side="'right'">
-                        <p>Variables</p>
-                    </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                    <TooltipTrigger as-child>
-                        <SegmentedControlButton value="api-actions">
-                            <ChevronsLeftRightEllipsis class="size-4" />
-                        </SegmentedControlButton>
-                    </TooltipTrigger>
-                    <TooltipContent :side="'right'">
-                        <p>APIs & Actions</p>
-                    </TooltipContent>
-                </Tooltip>
-            </TooltipProvider>
-        </SegmentedControl>
-    </div>
-</template>