@edgedev/create-edge-app 1.1.25 → 1.1.27

package/edge/components/shad/datepicker.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+import { CalendarDate, parseDate } from '@internationalized/date'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { onMounted, ref, watch } from 'vue'
+import { useField } from 'vee-validate'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Calendar } from '@/components/ui/calendar'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  description: {
+    type: String,
+    required: false,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Array],
+    required: false,
+    default: undefined,
+  },
+  multiple: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  minValue: {
+    type: String,
+    required: false,
+    default: '1900-01-01',
+  },
+  maxValue: {
+    type: String,
+    required: false,
+    default: '2099-01-14',
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const getCalendarDate = (dateString) => {
+  if (!dateString)
+    return null // Handle cases where the date string is not provided
+  const [year, month, day] = dateString.split('-').map(Number)
+  return new CalendarDate(year, month, day)
+}
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: false,
+  prop: 'modelValue',
+})
+
+const { setValue } = useField(props.name)
+
+const value = ref(props.multiple ? [] : null)
+
+const formatDate = (dates) => {
+  const pad = num => String(num).padStart(2, '0')
+
+  if (Array.isArray(dates)) {
+    return dates
+      .map(date => `${date.year}-${pad(date.month)}-${pad(date.day)}`)
+      .join(', ')
+  }
+  else if (dates) {
+    return `${dates.year}-${pad(dates.month)}-${pad(dates.day)}`
+  }
+  return ''
+}
+
+watch(() => value.value, (newValue) => {
+  if (props.multiple && Array.isArray(newValue)) {
+    // Sort dates in ascending order
+    newValue.sort((a, b) => {
+      const dateA = new Date(a.year, a.month - 1, a.day)
+      const dateB = new Date(b.year, b.month - 1, b.day)
+      return dateA - dateB
+    })
+  }
+
+  modelValue.value = props.multiple
+    ? newValue.map(date => formatDate(date))
+    : formatDate(newValue)
+  setValue(
+    props.multiple
+      ? newValue.map(date => `${date.year}-${date.month}-${date.day}`).join(', ')
+      : `${newValue?.year}-${newValue?.month}-${newValue?.day}`,
+  )
+})
+
+const placeholder = ref()
+
+onMounted(() => {
+  if (props.multiple) {
+    if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
+      value.value = props.modelValue.map(date => parseDate(date))
+    }
+    else {
+      value.value = [] // Set to an empty array if modelValue is empty or invalid
+    }
+  }
+  else {
+    if (typeof props.modelValue === 'string' && props.modelValue.trim() !== '') {
+      value.value = parseDate(props.modelValue)
+    }
+    else {
+      value.value = null // Set to null if modelValue is empty or invalid
+    }
+  }
+})
+</script>
+
+<template>
+  <FormField :name="props.name">
+    <FormItem class="flex flex-col space-y-1">
+      <FormLabel>{{ props.label }}</FormLabel>
+      <Popover>
+        <PopoverTrigger as-child>
+          <FormControl>
+            <Button
+              :class="cn(
+                'w-full border border-solid ps-3 text-start font-normal items-start h-auto', // Added 'items-start'
+                (!value || (Array.isArray(value) && value.length === 0)) && 'text-muted-foreground',
+              )"
+            >
+              <div class="flex flex-wrap gap-1 overflow-hidden">
+                <template v-if="Array.isArray(value)">
+                  <edge-chip v-for="date in value" :key="date" class="mr-1">
+                    {{ date }}
+                  </edge-chip>
+                </template>
+                <span v-else-if="value">
+                  {{ value }}
+                </span>
+              </div>
+              <CalendarIcon class="ms-auto h-4 w-4 opacity-50" />
+            </Button>
+            <input hidden>
+          </FormControl>
+        </PopoverTrigger>
+        <PopoverContent class="w-auto p-0">
+          <Calendar
+            v-model:placeholder="placeholder"
+            v-model="value"
+            :multiple="props.multiple"
+            :calendar-label="props.label"
+            initial-focus
+            :min-value="getCalendarDate(props.minValue)"
+            :max-value="getCalendarDate(props.maxValue)"
+          />
+        </PopoverContent>
+      </Popover>
+      <FormDescription>
+        {{ props.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>
+
+<style lang="scss" scoped>
+.PopoverContent {
+  width: 100vw;
+  max-height: var(--radix-popover-content-available-height);
+}
+</style>
+,

package/edge/components/shad/dialog.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { useVModel } from '@vueuse/core'
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: false,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+const setOpen = (value) => {
+  modelValue.value = value
+}
+</script>
+
+<template>
+  <Dialog
+    v-if="modelValue"
+    :open="modelValue"
+    @update:open="setOpen"
+  >
+    <slot />
+  </Dialog>
+</template>
+
+<style lang="scss" scoped>
+</style>

package/edge/components/shad/dropdownMenu.vue

@@ -0,0 +1,54 @@
+<!-- Usage:
+<edge-shad-dropdown-menu :items="[{ label: 'Hello', items: [{ title: 'Hello there', shortcut: '+L' }] }]">
+    <template #trigger>
+      <Button variant="outline" class="">
+        test
+      </Button>
+    </template>
+    <template #item="itemProps">
+      <edge-shad-dropdown-menu-item :item="itemProps.item" @click="console.log(itemProps.item)" />
+    </template>
+  </edge-shad-dropdown-menu> -->
+<script setup>
+const props = defineProps({
+  class: {
+    type: null,
+    required: false,
+  },
+  items: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  variant: {
+    type: String,
+    required: false,
+    default: 'filled',
+  },
+})
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <slot name="trigger" />
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="w-56">
+      <template v-for="(group, key) in props.items" :key="key">
+        <DropdownMenuLabel>
+          {{ group.label }}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <template v-for="(item, key2) in group.items" :key="key2">
+            <slot name="item" :item="item" />
+          </template>
+        </DropdownMenuGroup>
+      </template>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/edge/components/shad/dropdownMenuItem.vue

@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <DropdownMenuItem class="cursor-pointer">
+    <span>{{ props.item.title }}</span>
+    <DropdownMenuShortcut v-if="props.item.shortcut">
+      {{ props.item.shorcut }}
+    </DropdownMenuShortcut>
+  </DropdownMenuItem>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/edge/components/shad/form.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { useForm } from 'vee-validate'
+
+const props = defineProps({
+  schema: {
+    type: Object,
+    required: false,
+    default: () => ({}),
+  },
+  initialValues: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const emit = defineEmits(['submit', 'error'])
+
+const { schema, initialValues } = toRefs(props)
+
+const form = useForm({
+  validationSchema: schema,
+  initialValues: initialValues.value,
+})
+
+const onSubmit = form.handleSubmit(
+  async (values) => {
+    emit('submit', values)
+  },
+  (errors) => {
+    if (errors.errors.length !== 0) {
+      console.log(errors)
+      emit('error', errors)
+    }
+  },
+)
+
+// Expose form methods for parent components
+defineExpose({
+  // submission
+  handleSubmit: form.handleSubmit,
+  // value setters
+  setValues: form.setValues,
+  setFieldValue: form.setFieldValue,
+  // validation helpers
+  validate: form.validate,
+  validateField: form.validateField,
+  // state accessors
+  values: form.values,
+  errors: form.errors,
+  // utils
+  resetForm: form.resetForm,
+})
+</script>
+
+<template>
+  <form @submit.prevent="onSubmit">
+    <slot />
+  </form>
+</template>