@edgedev/create-edge-app 1.1.23 → 1.1.26

package/edge/components/shad/input.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: false,
+    default: 'text',
+  },
+  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', 'blur'])
+
+const state = reactive({
+  showPassword: false,
+  type: '',
+})
+
+onBeforeMount(() => {
+  state.type = props.type
+})
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: false,
+  emits,
+  prop: 'modelValue',
+})
+
+const classComputed = computed(() => {
+  if (props.type === 'password') {
+    return `${props.class} pr-10`
+  }
+  return props.class
+})
+
+const inputRef = ref(null) // Reference to the input field
+
+const onInputChange = (e) => {
+  if (e.target.value !== modelValue.value) {
+    modelValue.value = e.target.value // Sync value only if changed
+  }
+}
+
+// Check for pre-filled (autofilled) value on mount
+onMounted(() => {
+  nextTick(() => {
+    if (inputRef.value?.value && inputRef.value.value !== modelValue.value) {
+      modelValue.value = inputRef.value.value
+    }
+  })
+})
+</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>
+        <FormControl>
+          <div class="relative w-full  items-center">
+            <Input
+              :id="props.name"
+              ref="inputRef"
+              v-model="modelValue"
+              v-maska:[props.maskOptions]
+              :name="props.name"
+              :default-value="props.modelValue"
+              :class="classComputed"
+              :type="state.type"
+              v-bind="componentField"
+              :placeholder="props.placeholder"
+              :disabled="props.disabled"
+              @change="onInputChange"
+              @blur="$emit('blur', $event)"
+            />
+            <span class="absolute end-0 inset-y-0 flex items-center justify-center px-2">
+              <slot name="icon" />
+              <template v-if="props.type === 'password'">
+                <Eye v-if="state.type === 'text'" class="size-6 text-muted-foreground cursor-pointer" @click="state.type = 'password'" />
+                <EyeOff v-else class="size-6 text-muted-foreground cursor-pointer" @click="state.type = 'text'" />
+              </template>
+            </span>
+          </div>
+        </FormControl>
+        <FormDescription>
+          {{ props.description }}
+          <slot name="description" />
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/edge/components/shad/number.vue

@@ -0,0 +1,109 @@
+<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 },
+  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, default: false },
+  min: { type: Number, required: false },
+  max: { type: Number, required: false },
+  formatOptions: { type: Object, required: false, default: () => ({}) },
+  step: { type: Number, default: 1 },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const state = reactive({
+  showPassword: false,
+  type: '',
+})
+
+onBeforeMount(() => {
+  state.type = props.type
+})
+
+// Base v-model (can be string or number)
+const rawModel = useVModel(props, 'modelValue', emits, {
+  passive: false,
+  defaultValue: props.defaultValue,
+})
+
+// Coercion helper: returns number | null
+function toNumberOrNull(v) {
+  if (v === '' || v === undefined || v === null)
+    return null
+  if (typeof v === 'number')
+    return Number.isNaN(v) ? null : v
+  // Strip common formatting (e.g., "1,234.56")
+  const cleaned = String(v).replace(/,/g, '').trim()
+  const n = Number(cleaned)
+  return Number.isNaN(n) ? null : n
+}
+
+// Internal numeric ref exposed to NumberField
+const numericValue = computed({
+  get() {
+    // Prefer current raw value; fall back to default
+    const base = rawModel.value ?? props.defaultValue ?? null
+    return toNumberOrNull(base)
+  },
+  set(val) {
+    // NumberField may pass string or number; normalize to number | null
+    const n = toNumberOrNull(val)
+    emits('update:modelValue', n)
+  },
+})
+</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>
+
+        <NumberField
+          v-model="numericValue"
+          :default-value="numericValue ?? undefined"
+          :class="props.class"
+          :min="props.min"
+          :max="props.max"
+          :format-options="props.formatOptions"
+          :step="props.step"
+          :disabled="props.disabled"
+        >
+          <NumberFieldContent>
+            <NumberFieldDecrement class="mt-5" />
+            <FormControl>
+              <NumberFieldInput />
+            </FormControl>
+            <NumberFieldIncrement class="mt-5" />
+          </NumberFieldContent>
+        </NumberField>
+
+        <!-- keep validation/form integration without polluting NumberField props -->
+        <input type="hidden" v-bind="componentField" :value="numericValue ?? ''">
+
+        <span class="absolute end-0 inset-y-0 flex items-center justify-center px-2">
+          <slot name="icon" />
+        </span>
+
+        <FormDescription>
+          {{ props.description }} <slot name="description" />
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+  </div>
+</template>

package/edge/components/shad/select.vue

@@ -0,0 +1,151 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+const props = defineProps({
+  name: {
+    type: String,
+    required: false,
+  },
+  modelValue: {
+    type: [String, Boolean, Number, Array],
+    required: false,
+  },
+  class: {
+    type: null,
+    required: false,
+    default: 'w-full',
+  },
+  placeholder: {
+    type: String,
+    required: false,
+  },
+  label: {
+    type: String,
+    required: false,
+  },
+  description: {
+    type: String,
+    required: false,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  items: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  itemTitle: {
+    type: String,
+    required: false,
+    default: 'title',
+  },
+  itemValue: {
+    type: String,
+    required: false,
+    default: 'name',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const computedItems = computed(() => {
+  return props.items.map((item) => {
+    if (typeof item === 'string') {
+      return { [props.itemTitle]: item, [props.itemValue]: item }
+    }
+    const getNestedValue = (obj, path) => path.split('.').reduce((acc, key) => acc && acc[key], obj)
+    return {
+      [props.itemTitle]: getNestedValue(item, props.itemTitle),
+      [props.itemValue]: getNestedValue(item, props.itemValue),
+    }
+  })
+})
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: false,
+  prop: 'modelValue',
+})
+</script>
+
+<template>
+  <template v-if="props.name">
+    <FormField v-slot="{ componentField }" :name="props.name">
+      <FormItem>
+        <FormLabel class="flex">
+          {{ props.label }}
+          <div class="ml-auto inline-block">
+            <slot />
+          </div>
+        </FormLabel>
+        <div class="relative w-full items-center">
+          <Select v-model="modelValue" :disabled="props.disabled" :multiple="props.multiple" :default-value="modelValue" v-bind="componentField">
+            <FormControl>
+              <SelectTrigger class="text-foreground" :class="[$slots.icon ? 'pr-8' : '', props.class]">
+                <SelectValue :placeholder="props.placeholder" />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem
+                  v-for="item in computedItems"
+                  :key="item[props.itemTitle]"
+                  :value="item[props.itemValue]"
+                >
+                  {{ item[props.itemTitle] }}
+                </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <span class="absolute end-0 inset-y-0 flex items-center justify-center pl-2 pr-2">
+            <slot name="icon" />
+          </span>
+        </div>
+        <FormDescription>
+          {{ props.description }}
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+  </template>
+
+  <template v-else>
+    <div class="w-full">
+      <label class="flex mb-1">
+        {{ props.label }}
+      </label>
+      <div class="relative w-full items-center">
+        <Select v-model="modelValue" :disabled="props.disabled" :default-value="modelValue">
+          <SelectTrigger class="text-foreground" :class="[$slots.icon ? 'pr-8' : '', props.class]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem
+                v-for="item in computedItems"
+                :key="item[props.itemTitle]"
+                :value="item[props.itemValue]"
+              >
+                {{ item[props.itemTitle] }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <span class="absolute end-0 inset-y-0 flex items-center justify-center pl-2 pr-2">
+          <slot name="icon" />
+        </span>
+      </div>
+      <p class="text-sm text-muted-foreground mt-1">
+        {{ props.description }}
+      </p>
+    </div>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+</style>

package/edge/components/shad/selectTags.vue

@@ -0,0 +1,278 @@
+<script setup>
+import { useFilter } from 'reka-ui'
+import { useVModel } from '@vueuse/core'
+import { cn } from '~/lib/utils'
+const props = defineProps({
+  name: {
+    type: String,
+    required: false,
+  },
+  modelValue: {
+    type: Array,
+    required: false,
+  },
+  class: {
+    type: null,
+    required: false,
+    default: 'w-full',
+  },
+  placeholder: {
+    type: String,
+    required: false,
+  },
+  label: {
+    type: String,
+    required: false,
+  },
+  description: {
+    type: String,
+    required: false,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  items: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  itemTitle: {
+    type: String,
+    required: false,
+    default: 'title',
+  },
+  itemValue: {
+    type: String,
+    required: false,
+    default: 'name',
+  },
+  allowAdditions: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emits = defineEmits(['update:modelValue', 'add'])
+
+const computedItems = computed(() => {
+  return props.items.map((item) => {
+    if (typeof item === 'string') {
+      return { [props.itemTitle]: item, [props.itemValue]: item }
+    }
+    const getNestedValue = (obj, path) => path.split('.').reduce((acc, key) => acc && acc[key], obj)
+    return {
+      [props.itemTitle]: getNestedValue(item, props.itemTitle),
+      [props.itemValue]: getNestedValue(item, props.itemValue),
+    }
+  })
+})
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: false,
+  prop: 'modelValue',
+})
+const open = ref(false)
+const searchTerm = ref('')
+
+const { contains } = useFilter({ sensitivity: 'base' })
+
+const forceOpen = () => {
+  if (!props.disabled)
+    open.value = true
+}
+
+const filteredItems = computed(() => {
+  const options = computedItems.value.filter(i => !modelValue.value.includes(i[props.itemValue]))
+  return searchTerm.value ? options.filter(option => contains(option[props.itemTitle], searchTerm.value)) : options
+})
+
+const valueToTitle = computed(() => {
+  const map = {}
+  for (const it of computedItems.value) {
+    map[it[props.itemValue]] = it[props.itemTitle]
+  }
+  return map
+})
+
+const existingValueMap = computed(() => {
+  const map = {}
+  for (const item of computedItems.value) {
+    const value = String(item[props.itemValue])
+    map[value.toLowerCase()] = value
+  }
+  return map
+})
+
+const normalize = value => String(value || '').trim()
+
+const addValueToModel = (value) => {
+  const normalized = normalize(value)
+  if (!normalized)
+    return
+  if (!modelValue.value.includes(normalized))
+    modelValue.value = [...modelValue.value, normalized]
+}
+
+const addFromSearch = () => {
+  if (!props.allowAdditions)
+    return
+  const raw = normalize(searchTerm.value)
+  if (!raw)
+    return
+
+  const existingValue = existingValueMap.value[raw.toLowerCase()]
+  if (existingValue) {
+    addValueToModel(existingValue)
+    searchTerm.value = ''
+    open.value = false
+    return
+  }
+
+  addValueToModel(raw)
+  emits('add', raw)
+  searchTerm.value = ''
+  open.value = false
+}
+
+const onEnter = () => {
+  if (!props.allowAdditions)
+    return
+  addFromSearch()
+}
+
+const onSelectItem = (ev) => {
+  const value = ev?.detail?.value
+  if (typeof value === 'string') {
+    searchTerm.value = ''
+    addValueToModel(value)
+  }
+  if (filteredItems.value.length === 0)
+    open.value = false
+}
+</script>
+
+<template>
+  <template v-if="props.name">
+    <FormField :name="props.name">
+      <FormItem>
+        <FormLabel class="flex">
+          {{ props.label }}
+          <div class="ml-auto inline-block">
+            <slot />
+          </div>
+        </FormLabel>
+        <div class="relative w-full items-center">
+          <FormControl>
+            <Combobox v-model="modelValue" v-model:open="open" :ignore-filter="true" :disabled="props.disabled">
+              <ComboboxAnchor as-child>
+                <TagsInput
+                  v-model="modelValue"
+                  :class="cn('relative flex items-center gap-1 flex-nowrap pl-2 pr-1 pt-[7px] pb-[7px] w-80', props.class)"
+                  :disabled="props.disabled"
+                  @click="forceOpen"
+                >
+                  <!-- Wrapping area for tags + input -->
+                  <div class="flex flex-wrap items-center gap-2 flex-1 min-w-0">
+                    <TagsInputItem v-for="val in modelValue" :key="val" class="h-6" :value="val">
+                      <span class="px-1">{{ valueToTitle[val] ?? val }}</span>
+                      <TagsInputItemDelete v-if="!props.disabled" />
+                    </TagsInputItem>
+
+                    <ComboboxInput v-model="searchTerm" as-child>
+                      <TagsInputInput
+                        :disabled="props.disabled"
+                        :placeholder="props.placeholder"
+                        class="p-0 border-none shadow-none focus-visible:ring-0 h-auto grow min-w-[6rem] w-auto"
+                        @input="forceOpen"
+                        @keydown.enter.prevent="onEnter"
+                      />
+                    </ComboboxInput>
+                  </div>
+
+                  <!-- Non-wrapping trigger -->
+                  <ComboboxTrigger as-child>
+                    <Button variant="ghost" size="icon" class="h-6 w-6 z-10">
+                      <ChevronsUpDown class="h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </ComboboxTrigger>
+                </TagsInput>
+
+                <ComboboxList class="w-[--reka-popper-anchor-width]">
+                  <ComboboxEmpty>
+                    <button
+                      v-if="props.allowAdditions && searchTerm && searchTerm.trim() && !computedItems.some(item => String(item[props.itemValue]).toLowerCase() === searchTerm.trim().toLowerCase())"
+                      type="button"
+                      class="w-full rounded-sm px-2 py-1 text-left text-sm hover:bg-muted"
+                      @click.prevent="addFromSearch()"
+                    >
+                      Create "{{ searchTerm.trim() }}"
+                    </button>
+                    <span v-else-if="searchTerm && searchTerm.trim()" class="block px-2 py-1 text-sm text-muted-foreground">
+                      No results found
+                    </span>
+                    <span v-else class="block px-2 py-1 text-sm text-muted-foreground">
+                      Start typing to search
+                    </span>
+                  </ComboboxEmpty>
+                  <ComboboxGroup>
+                    <ComboboxItem
+                      v-for="item in filteredItems" :key="item[props.itemValue]" :value="item[props.itemValue]"
+                      @select.prevent="onSelectItem"
+                    >
+                      {{ item[props.itemTitle] }}
+                    </ComboboxItem>
+                  </ComboboxGroup>
+                </ComboboxList>
+              </ComboboxAnchor>
+            </Combobox>
+          </FormControl>
+
+          <span class="absolute end-0 inset-y-0 flex items-center justify-center pl-2 pr-2">
+            <slot name="icon" />
+          </span>
+        </div>
+        <FormDescription>
+          {{ props.description }}
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+  </template>
+
+  <template v-else>
+    <div class="w-full">
+      <label class="flex mb-1">
+        {{ props.label }}
+      </label>
+      <div class="relative w-full items-center">
+        <Select v-model="modelValue" :disabled="props.disabled" :default-value="modelValue">
+          <SelectTrigger class="text-foreground" :class="[$slots.icon ? 'pr-8' : '', props.class]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem
+                v-for="item in computedItems"
+                :key="item[props.itemTitle]"
+                :value="item[props.itemValue]"
+              >
+                {{ item[props.itemTitle] }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <span class="absolute end-0 inset-y-0 flex items-center justify-center pl-2 pr-2">
+          <slot name="icon" />
+        </span>
+      </div>
+      <p class="text-sm text-muted-foreground mt-1">
+        {{ props.description }}
+      </p>
+    </div>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+</style>