@oneclick.dev/cms-kit 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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