@oneclick.dev/cms-kit 0.0.1

package/components/ui/form-builder/components/elements/button/Button.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { inject, ref, computed } from 'vue'
+import { useRunProcess } from '@oneclick.dev/cms-kit/components/ui/flow-builder/composables/useRunProcess'
+import { useLayout } from '@oneclick.dev/cms-kit/components/ui/flow-builder/composables/useLayout'
+
+const props = defineProps({
+  variableName: {
+    type: String,
+    required: true
+  },
+  text: {
+    type: String,
+    default: ""
+  },
+  variant: {
+    type: String,
+    default: ""
+  },
+  onClickFlow: {
+    type: Object,
+    default: () => ({
+      nodes: [],
+      edges: [],
+      variables: [],
+      computedVariables: []
+    })
+  }
+})
+
+const isEditMode = inject('isEditMode', ref(false))
+const allAvailableVariables = inject('allAvailableVariables', ref([]))
+const onFinish = inject('onFinish', () => {})
+
+const handleClick = () => {
+  const { graph, layout } = useLayout()
+  const { run } = useRunProcess({
+    graph,
+    cancelOnError: true,
+    nodes: props.onClickFlow.nodes,
+    edges: props.onClickFlow.edges,
+    variables: [...allAvailableVariables.value, ...props.onClickFlow.variables],
+    computedVariables: props.onClickFlow.computedVariables,
+    onFinish
+  })
+  const laidOutNodes = layout(props.onClickFlow.nodes, props.onClickFlow.edges, 'LR')
+  run(laidOutNodes)
+}
+
+const isDisabled = computed(() => {
+  return false;
+})
+</script>
+
+<template>
+  <Button :variant="variant" @click="handleClick" :disabled="isDisabled" class="w-full" :class="{ 'pointer-events-none': isEditMode }" :tabindex="isEditMode ? -1 : 0">
+    <span class="truncate w-full">
+      {{ text }}
+    </span>
+  </Button>
+</template>

package/components/ui/form-builder/components/elements/button/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormButton } from './Button.vue'

package/components/ui/form-builder/components/elements/checkbox/Checkbox.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const randomId = crypto.randomUUID()
+
+const props = defineProps({
+  variableName: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  text: {
+    type: String,
+    required: true
+  }
+})
+
+const state = inject('state');
+
+</script>
+
+<template>
+  <div class="items-top flex gap-x-2">
+    <Checkbox :id="randomId" v-model="state.elementValues[variableName]" class="border-ring" />
+    <div class="grid gap-1.5 leading-none">
+      <label
+        :for="randomId"
+        class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        {{ label }}
+      </label>
+      <p class="text-sm text-muted-foreground">
+        {{ text }}
+      </p>
+    </div>
+  </div>
+</template>

package/components/ui/form-builder/components/elements/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormCheckbox } from './Checkbox.vue'

package/components/ui/form-builder/components/elements/file/File.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div></div>
+</template>

package/components/ui/form-builder/components/elements/file/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormFile } from './File.vue'

package/components/ui/form-builder/components/elements/images/Images.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const props = defineProps({
+  variableName: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  }
+})
+
+const state = inject('state');
+
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full items-start gap-1.5">
+    <Label v-if="label">{{ label }}</Label>
+    <MediaPicker v-model="state.elementValues[variableName]"></MediaPicker>
+  </div>
+</template>

package/components/ui/form-builder/components/elements/images/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormImages } from './Images.vue'

package/components/ui/form-builder/components/elements/index.ts

@@ -0,0 +1,31 @@
+import { CustomFormCheckbox } from './checkbox';
+import { CustomFormFile } from './file';
+import { CustomFormImages } from './images';
+import { CustomFormItems } from './items';
+import { CustomFormLabel } from './label';
+import { CustomFormLocation } from './location';
+import { CustomFormRadios } from './radios';
+import { CustomFormRichText } from './richtext';
+import { CustomFormSelect } from './select';
+import { CustomFormText } from './text';
+import { CustomFormTextarea } from './textarea';
+import { CustomFormTextfield } from './textfield';
+import { CustomFormButton } from './button';
+import { CustomFormScanner } from './scanner';
+
+export const elementComponents = {
+    CustomFormCheckbox,
+    CustomFormFile,
+    CustomFormImages,
+    CustomFormItems,
+    CustomFormLabel,
+    CustomFormLocation,
+    CustomFormRadios,
+    CustomFormRichText,
+    CustomFormSelect,
+    CustomFormText,
+    CustomFormTextarea,
+    CustomFormTextfield,
+    CustomFormButton,
+    CustomFormScanner
+}

package/components/ui/form-builder/components/elements/items/Items.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div></div>
+</template>

package/components/ui/form-builder/components/elements/items/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormItems } from './Items.vue'

package/components/ui/form-builder/components/elements/label/Label.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { interpolateTemplateFromVariableContext } from '@/lib/interpolation'
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: ''
+  }
+})
+
+const allAvailableVariables = inject('allAvailableVariables')
+
+const output = computed(() => {
+  return interpolateTemplateFromVariableContext(props.text, allAvailableVariables?.value)
+})
+</script>
+
+<template>
+  <p class="whitespace-pre-wrap">{{ output }}</p>
+</template>

package/components/ui/form-builder/components/elements/label/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormLabel } from './Label.vue'

package/components/ui/form-builder/components/elements/location/Location.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div></div>
+</template>

package/components/ui/form-builder/components/elements/location/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormLocation } from './Location.vue'

package/components/ui/form-builder/components/elements/radios/Radios.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const randomId = crypto.randomUUID()
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+const props = defineProps({
+  variableName: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: ""
+  },
+  orientation: {
+    type: String,
+    default: "vertical"
+  },
+  options: {
+    type: Array as PropType<Option[]>,
+    required: true
+  }
+})
+
+const state = inject('state');
+
+</script>
+
+<template>
+  <div class="grid w-full items-center gap-1.5">
+    <Label v-if="label">{{ label }}</Label>
+    <RadioGroup v-model="state.elementValues[variableName]" :orientation="orientation" class="flex-wrap">
+      <div class="flex items-center space-x-2" v-for="option in options" :key="option.value">
+        <RadioGroupItem :id="randomId + '_' + option.value" :value="option.value" class="border-ring" />
+        <Label :for="randomId + '_' + option.value">{{ option.label }}</Label>
+      </div>
+    </RadioGroup>
+  </div>
+</template>

package/components/ui/form-builder/components/elements/radios/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormRadios } from './Radios.vue'

package/components/ui/form-builder/components/elements/richtext/Richtext.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div></div>
+</template>

package/components/ui/form-builder/components/elements/richtext/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormRichText } from './RichText.vue'

package/components/ui/form-builder/components/elements/scanner/Scanner.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { inject, ref, onMounted, onUnmounted } from 'vue'
+import { BrowserMultiFormatReader } from '@zxing/browser'
+import { useRunProcess } from '@oneclick.dev/cms-kit/components/ui/flow-builder/composables/useRunProcess'
+import { useLayout } from '@oneclick.dev/cms-kit/components/ui/flow-builder/composables/useLayout'
+
+const props = defineProps({
+  variableName: {
+    type: String,
+    required: true
+  },
+  timeBetweenScans: {
+    type: Number,
+    default: 800
+  },
+  onScanFlow: {
+    type: Object,
+    default: () => ({
+      nodes: [],
+      edges: [],
+      variables: [],
+      computedVariables: []
+    })
+  }
+})
+
+const emit = defineEmits(['scanned'])
+const allAvailableVariables = inject('allAvailableVariables', ref([]))
+const state = inject('state');
+
+const scanning = ref(false)
+const error = ref<string | null>(null)
+const videoRef = ref<HTMLVideoElement | null>(null)
+let codeReader: BrowserMultiFormatReader | null = null
+let lastScanTime = 0
+
+const devices = ref<MediaDeviceInfo[]>([])
+const uniqueDevices = ref<{ deviceId: string, label: string }[]>([])
+const selectedDeviceId = ref<string | undefined>(undefined)
+
+const getCameras = async () => {
+  try {
+    const mediaDevices = await navigator.mediaDevices.enumerateDevices()
+    const videoInputs = mediaDevices.filter(device => device.kind === 'videoinput')
+    // Deduplicate by label or deviceId
+    const seen = new Set<string>()
+    let camCount = 1
+    uniqueDevices.value = videoInputs.reduce((arr, device) => {
+      const key = device.label || device.deviceId
+      if (!seen.has(key)) {
+        seen.add(key)
+        arr.push({
+          deviceId: device.deviceId,
+          label: device.label || `Camera ${camCount++}`
+        })
+      }
+      return arr
+    }, [] as { deviceId: string, label: string }[])
+    devices.value = videoInputs
+    if (!selectedDeviceId.value && uniqueDevices.value.length > 0) {
+      selectedDeviceId.value = uniqueDevices.value[0].deviceId
+    }
+  } catch (e) {
+    error.value = 'Could not list cameras'
+  }
+}
+
+import { nextTick } from 'vue';
+
+let lastScannedCode: string | null = null;
+let lastScannedTime: number = 0;
+
+const startScanner = async () => {
+  error.value = null;
+  console.log(state)
+  state.elementValues[props.variableName] = null;
+  scanning.value = true;
+  await nextTick(); // Ensure videoRef is set
+
+  if (!codeReader) {
+    codeReader = new BrowserMultiFormatReader();
+  }
+  try {
+    await codeReader.decodeFromVideoDevice(
+      selectedDeviceId.value,
+      videoRef.value!,
+      (result: any, err) => {
+        if (result) {
+          const code = result.getText();
+          const now = Date.now();
+          if (code === lastScannedCode) {
+            if (now - lastScannedTime >= 5000) {
+              lastScannedTime = now;
+              state.elementValues[props.variableName] = code;
+              emit('scanned', code);
+              handleScan();
+            }
+            // else: ignore scan, still in cooldown
+          } else {
+            lastScannedCode = code;
+            lastScannedTime = now;
+            state.elementValues[props.variableName] = code;
+            emit('scanned', code);
+            handleScan();
+          }
+        }
+        // Ignore 'No MultiFormat Readers...' error
+        if (err && err.message !== 'No MultiFormat Readers were able to detect the code.') {
+          error.value = err.message || 'Scan error';
+        } else {
+          error.value = null;
+        }
+      }
+    );
+  } catch (e: any) {
+    error.value = e.message || 'Could not access camera';
+    scanning.value = false;
+  }
+};
+
+const stopScanner = () => {
+  scanning.value = false;
+  if (codeReader) {
+    if (typeof codeReader.stopContinuousDecode === 'function') {
+      codeReader.stopContinuousDecode();
+    } else if (typeof codeReader.reset === 'function') {
+      codeReader.reset();
+    }
+    codeReader = null;
+  }
+};
+
+onUnmounted(() => {
+  stopScanner()
+})
+
+onMounted(() => {
+  getCameras()
+  startScanner()
+})
+
+const handleScan = () => {
+  const { graph, layout } = useLayout()
+  const { run } = useRunProcess({
+    graph,
+    cancelOnError: true,
+    nodes: props.onScanFlow.nodes,
+    edges: props.onScanFlow.edges,
+    variables: [...allAvailableVariables.value, ...props.onScanFlow.variables],
+    computedVariables: props.onScanFlow.computedVariables
+  })
+  const laidOutNodes = layout(props.onScanFlow.nodes, props.onScanFlow.edges, 'LR')
+  run(laidOutNodes)
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="w-full flex flex-col items-center">
+      <label v-if="uniqueDevices.length > 1" class="mb-2 text-sm">
+        Camera:
+        <select v-model="selectedDeviceId" class="border rounded px-2 py-1 ml-2">
+          <option v-for="(device, idx) in uniqueDevices" :key="device.deviceId" :value="device.deviceId">
+            {{ device.label }}
+          </option>
+        </select>
+      </label>
+    </div>
+    <div>
+      <video ref="videoRef" autoplay playsinline class="rounded border w-72 h-72 bg-black"></video>
+    </div>
+  </div>
+</template>

package/components/ui/form-builder/components/elements/scanner/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormScanner } from './Scanner.vue'

package/components/ui/form-builder/components/elements/select/Select.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const randomId = crypto.randomUUID()
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+const props = defineProps({
+  variableName: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  options: {
+    type: Array as PropType<Option[]>,
+    required: true
+  }
+})
+
+const state = inject('state');
+
+</script>
+
+<template>
+  <div class="grid w-full items-center gap-1.5">
+    <Label :for="randomId" v-if="label">{{ label }}</Label>
+
+    <Select v-model="state.elementValues[variableName]">
+      <SelectTrigger class="w-[180px] border-ring">
+        <SelectValue :placeholder="placeholder" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectItem v-for="option in options" :key="option.value" :value="option.value">
+            {{ option.label }}
+          </SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  </div>
+</template>

package/components/ui/form-builder/components/elements/select/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormSelect } from './Select.vue'

package/components/ui/form-builder/components/elements/text/Text.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { interpolateTemplateFromVariableContext } from '@/lib/interpolation'
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: ''
+  }
+})
+
+const allAvailableVariables = inject('allAvailableVariables')
+
+const output = computed(() => {
+  return interpolateTemplateFromVariableContext(props.text, allAvailableVariables?.value)
+})
+</script>
+
+<template>
+  <p class="whitespace-pre-wrap">{{ output }}</p>
+</template>

package/components/ui/form-builder/components/elements/text/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormText } from './Text.vue'

package/components/ui/form-builder/components/elements/textarea/Textarea.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const randomId = crypto.randomUUID()
+
+const props = defineProps({
+  variableName: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  }
+})
+
+const state = inject('state');
+
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full items-start gap-1.5">
+    <Label :for="randomId" v-if="label">{{ label }}</Label>
+    <Textarea :id="randomId" v-model="state.elementValues[variableName]" :placeholder="placeholder" class="border-ring h-full resize-none"></Textarea>
+  </div>
+</template>

package/components/ui/form-builder/components/elements/textarea/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormTextarea } from './Textarea.vue'

package/components/ui/form-builder/components/elements/textfield/Textfield.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const randomId = crypto.randomUUID()
+
+const props = defineProps({
+  variableName: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  }
+})
+
+const state = inject('state');
+
+</script>
+
+<template>
+  <div class="grid w-full items-center gap-1.5">
+    <Label :for="randomId" v-if="label">{{ label }}</Label>
+    <Input :id="randomId" v-model="state.elementValues[variableName]" type="text" :placeholder="placeholder" class="border-ring" />
+  </div>
+</template>

package/components/ui/form-builder/components/elements/textfield/index.ts

@@ -0,0 +1 @@
+export { default as CustomFormTextfield } from './Textfield.vue'

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

@@ -0,0 +1,3 @@
+export { default as FormBuilder } from './FormBuilder.vue'
+export { default as FormBuilderSelect } from './FormBuilderSelect.vue'
+export { default as FormDisplayer } from './FormDisplayer.vue'

package/components/ui/input/Input.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class,
+    )"
+  >
+</template>

package/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'