@edgedev/create-edge-app 1.1.25 → 1.1.26

package/edge/components/shad/switch.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  class: {
+    type: null,
+    required: false,
+  },
+  switchClass: {
+    type: null,
+    required: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+  },
+  label: {
+    type: String,
+    required: false,
+  },
+  description: {
+    type: String,
+    required: false,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const modelValue = useVModel(props, 'modelValue', emits)
+</script>
+
+<template>
+  <div>
+    <FormField :name="props.name">
+      <FormItem :class="cn('flex flex-row items-center justify-between', props.class)">
+        <div class="flex flex-row items-center w-full">
+          <div class="grow">
+            <FormLabel class="text-base">
+              {{ props.label }}
+            </FormLabel>
+            <FormDescription>
+              <slot />
+            </FormDescription>
+          </div>
+          <FormControl>
+            <Switch
+              v-model="modelValue"
+              :class="cn('', props.switchClass)"
+            />
+          </FormControl>
+        </div>
+      </FormItem>
+    </FormField>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/edge/components/shad/tags.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+import { useField } from 'vee-validate'
+
+const props = defineProps({
+  name: { type: String, required: true },
+  // Accept either String (CSV) or Array depending on valueAs
+  modelValue: { type: [String, Array], default: '' },
+  class: { type: null, default: '' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  description: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  // NEW: controls how the component reads/emits the value
+  valueAs: { type: String, required: false, validator: v => ['string', 'array'].includes(v) },
+})
+
+const emit = defineEmits(['update:modelValue', 'blur'])
+
+// Determine operational mode: explicit prop wins only when set; otherwise infer from initial modelValue
+const mode = computed(() =>
+  (props.valueAs ?? (Array.isArray(props.modelValue) ? 'array' : 'string')),
+)
+
+// raw v-model that mirrors props.modelValue directly
+const rawModel = useVModel(props, 'modelValue', emit, {
+  passive: false,
+  prop: 'modelValue',
+})
+
+const normalize = arr =>
+  Array.from(new Set((arr || []).map(s => String(s).trim()).filter(Boolean)))
+
+const parseCsv = str => normalize(String(str || '').split(','))
+
+const { setValue, setTouched } = useField(props.name)
+
+// Public array model used by the Tags UI regardless of underlying type
+const arrayModel = computed({
+  get: () => {
+    if (mode.value === 'array') {
+      return normalize(Array.isArray(rawModel.value) ? rawModel.value : [])
+    }
+    // 'string' mode -> parse CSV
+    return parseCsv(rawModel.value)
+  },
+  set: (arr) => {
+    const cleaned = normalize(arr)
+    if (mode.value === 'array') {
+      rawModel.value = cleaned
+      setValue(cleaned, false)
+      emit('update:modelValue', cleaned)
+    }
+    else {
+      const csv = cleaned.join(',')
+      rawModel.value = csv
+      setValue(csv, false)
+      emit('update:modelValue', csv)
+    }
+    setTouched(true)
+  },
+})
+
+// Keep vee-validate synced with external changes (resets, programmatic updates)
+watch(
+  () => rawModel.value,
+  (v) => {
+    if (mode.value === 'array') {
+      setValue(Array.isArray(v) ? v : [], false)
+    }
+    else {
+      setValue(String(v ?? ''), false)
+    }
+  },
+  { immediate: true },
+)
+
+function commitPendingFromInput(el) {
+  if (!el)
+    return
+  const raw = (el.value || '').trim()
+  if (!raw)
+    return
+  arrayModel.value = [...arrayModel.value, raw]
+  el.value = ''
+  el.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
+function onInputBlur(e) {
+  commitPendingFromInput(e?.target)
+  setTouched(true)
+  emit('blur', e)
+}
+</script>
+
+<template>
+  <FormField :name="props.name">
+    <FormItem class="flex flex-col gap-2 p-0 mt-0 space-y-0 [&>*]:!mt-0">
+      <div class="flex items-center justify-between">
+        <FormLabel v-if="props.label">
+          {{ props.label }}
+        </FormLabel>
+        <slot name="icon" />
+      </div>
+      <FormControl>
+        <TagsInput
+          :id="props.name"
+          v-model="arrayModel"
+          class="mt-0"
+          :class="props.class"
+          :disabled="props.disabled"
+        >
+          <TagsInputItem
+            v-for="item in arrayModel"
+            :key="item"
+            :value="item"
+            class="bg-secondary"
+          >
+            <TagsInputItemText />
+            <TagsInputItemDelete />
+          </TagsInputItem>
+
+          <!-- Let Enter be handled by the component; commit on blur -->
+          <TagsInputInput
+            :placeholder="props.placeholder || 'Add…'"
+            @blur="onInputBlur"
+          />
+        </TagsInput>
+      </FormControl>
+
+      <FormDescription v-if="props.description">
+        {{ props.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>

package/edge/components/shad/textarea.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  defaultValue: {
+    type: [String, Number],
+    required: false,
+  },
+  modelValue: {
+    type: [String, Number],
+    required: false,
+  },
+  class: {
+    type: null,
+    required: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+  },
+  label: {
+    type: String,
+    required: false,
+  },
+  description: {
+    type: String,
+    required: false,
+  },
+  maskOptions: {
+    type: [Object],
+    required: false,
+    default: null,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const state = reactive({
+  showPassword: false,
+  type: '',
+})
+
+onBeforeMount(() => {
+  state.type = props.type
+})
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+
+const classComputed = computed(() => {
+  return props.class
+})
+</script>
+
+<template>
+  <div>
+    <FormField v-slot="{ componentField }" :name="props.name">
+      <FormItem>
+        <FormLabel>
+          {{ props.label }}
+          <div class="ml-auto inline-block">
+            <slot />
+          </div>
+        </FormLabel>
+        <FormControl>
+          <div class="relative w-full  items-center">
+            <Textarea
+              v-model="modelValue"
+              :class="classComputed"
+              :placeholder="props.placeholder"
+              :disabled="props.disabled"
+              :default-value="modelValue"
+              v-bind="componentField"
+            />
+            <span class="absolute end-0 inset-y-0 flex items-center justify-center px-2">
+              <slot name="icon" />
+            </span>
+          </div>
+        </FormControl>
+        <FormDescription>
+          {{ props.description }}
+          <slot name="description" />
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/edge/components/shad/typeMoney.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+  name: { type: String, required: true },
+  type: { type: String, default: 'text' },
+  defaultValue: { type: [String, Number], required: false },
+  class: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  maskOptions: { type: [Object], default: null },
+  disabled: { type: Boolean, default: false },
+  modelValue: { type: [String, Number], default: '' },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const state = reactive({
+  showPassword: false,
+  type: '',
+  editMode: false,
+  isDebit: false, // false = credit, true = debit
+})
+
+onBeforeMount(() => {
+  state.type = props.type
+})
+
+// Initialize useVModel
+const modelValue = useVModel(props, 'modelValue', emits, {
+  prop: 'modelValue',
+})
+
+watch(modelValue, (val) => {
+  const stringValue = String(val || '')
+  const newVal = parseFloat(stringValue.replace(/[$,]/g, ''))
+  if (isNaN(newVal)) {
+    modelValue.value = 0
+    return
+  }
+  emits('update:modelValue', state.isDebit ? -Math.abs(newVal) : Math.abs(newVal))
+})
+
+const toggleDebit = () => {
+  state.isDebit = !state.isDebit
+  if (modelValue.value !== '') {
+    modelValue.value = state.isDebit
+      ? -Math.abs(modelValue.value)
+      : Math.abs(modelValue.value)
+  }
+}
+
+const classComputed = computed(() => {
+  return props.type === 'password' ? `${props.class} pr-10` : props.class
+})
+
+const handleKeydown = (event) => {
+  const allowedKeys = [
+    'Backspace',
+    'ArrowLeft',
+    'ArrowRight',
+    'Delete',
+    'Tab',
+  ]
+  const key = event.key
+  const value = event.target.value
+  const selectionStart = event.target.selectionStart
+
+  if (
+    allowedKeys.includes(key)
+    || (key >= '0' && key <= '9')
+    || (key === '.' && !value.includes('.'))
+  ) {
+    if (value.includes('.') && key >= '0' && key <= '9') {
+      const decimalPart = value.split('.')[1]
+      if (
+        decimalPart.length >= 2
+        && selectionStart > value.indexOf('.')
+      ) {
+        event.preventDefault()
+        return
+      }
+    }
+    return
+  }
+
+  // Disallow minus and any other invalid input
+  event.preventDefault()
+}
+
+const moneyMask = {
+  preProcess: val => val.replace(/[$,]/g, ''),
+  postProcess: (val) => {
+    if (!val)
+      return ''
+    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)
+    return Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(val).slice(0, sub ? -sub : undefined)
+  },
+}
+
+const formatDecimal = (event) => {
+  const el = event.target
+  const cleaned = el.value.replace(/[$,]/g, '')
+  const num = parseFloat(cleaned)
+
+  if (!isNaN(num)) {
+    const fixed = num.toFixed(2)
+    modelValue.value = state.isDebit
+      ? -Math.abs(parseFloat(fixed))
+      : Math.abs(parseFloat(fixed))
+
+    // Force input's displayed value to update
+    el.value = fixed
+    el.dispatchEvent(new Event('input'))
+  }
+}
+</script>
+
+<template>
+  <div>
+    <FormField v-slot="{ componentField }" :name="props.name">
+      <FormItem>
+        <FormLabel class="flex">
+          {{ props.label }}
+          <div class="ml-auto inline-block">
+            <slot />
+          </div>
+        </FormLabel>
+
+        <div class="flex items-center mb-2">
+          <button
+            type="button"
+            class="border px-2 py-2 rounded text-sm w-[100px] bg-primary text-primary-foreground"
+            @click="toggleDebit"
+          >
+            {{ state.isDebit ? 'Debit (−)' : 'Credit (+)' }}
+          </button>
+          <FormControl>
+            <Input
+              :id="props.name"
+              v-model="modelValue"
+              v-maska:[moneyMask]
+              :default-value="props.modelValue"
+              :class="classComputed"
+              :type="state.type"
+              v-bind="componentField"
+              :placeholder="props.placeholder"
+              :disabled="props.disabled"
+              @keydown="handleKeydown"
+              @blur="formatDecimal"
+            />
+          </FormControl>
+        </div>
+
+        <FormDescription>
+          {{ props.description }}
+          <slot name="description" />
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+  </div>
+</template>