@iqual/nuxt-icms 1.4.10 → 1.5.0

package/components/ui/alert-dialog/AlertDialog.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogEmits, AlertDialogProps } from 'radix-vue'
-import { AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
-
-const props = defineProps<AlertDialogProps>()
-const emits = defineEmits<AlertDialogEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <AlertDialogRoot v-bind="forwarded">
-    <slot />
-  </AlertDialogRoot>
-</template>

package/components/ui/alert-dialog/AlertDialogAction.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogActionProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
-import { cn } from '@/lib/utils'
-import { AlertDialogAction } from 'radix-vue'
-import { computed } from 'vue'
-
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
-    <slot />
-  </AlertDialogAction>
-</template>

package/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogCancelProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
-import { cn } from '@/lib/utils'
-import { AlertDialogCancel } from 'radix-vue'
-import { computed } from 'vue'
-
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AlertDialogCancel
-    v-bind="delegatedProps"
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      props.class,
-    )"
-  >
-    <slot />
-  </AlertDialogCancel>
-</template>

package/components/ui/alert-dialog/AlertDialogContent.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogContentEmits, AlertDialogContentProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import {
-  AlertDialogContent,
-
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { computed } from 'vue'
-
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<AlertDialogContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <AlertDialogPortal>
-    <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    />
-    <AlertDialogContent
-      v-bind="forwarded"
-      :class="
-        cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          props.class,
-        )
-      "
-    >
-      <slot />
-    </AlertDialogContent>
-  </AlertDialogPortal>
-</template>

package/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogDescriptionProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import {
-  AlertDialogDescription,
-
-} from 'radix-vue'
-import { computed } from 'vue'
-
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AlertDialogDescription
-    v-bind="delegatedProps"
-    :class="cn('text-sm text-muted-foreground', props.class)"
-  >
-    <slot />
-  </AlertDialogDescription>
-</template>

package/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogTitleProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { AlertDialogTitle } from 'radix-vue'
-import { computed } from 'vue'
-
-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AlertDialogTitle
-    v-bind="delegatedProps"
-    :class="cn('text-lg font-semibold', props.class)"
-  >
-    <slot />
-  </AlertDialogTitle>
-</template>

package/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { AlertDialogTriggerProps } from 'radix-vue'
-import { AlertDialogTrigger } from 'radix-vue'
-
-const props = defineProps<AlertDialogTriggerProps>()
-</script>
-
-<template>
-  <AlertDialogTrigger v-bind="props">
-    <slot />
-  </AlertDialogTrigger>
-</template>

package/components/ui/alert-dialog/index.ts

@@ -1,9 +0,0 @@
-export { default as AlertDialog } from './AlertDialog.vue'
-export { default as AlertDialogAction } from './AlertDialogAction.vue'
-export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
-export { default as AlertDialogContent } from './AlertDialogContent.vue'
-export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
-export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
-export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
-export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
-export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'

package/components/ui/aspect-ratio/AspectRatio.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { AspectRatioProps } from 'radix-vue'
-import { AspectRatio } from 'radix-vue'
-
-const props = defineProps<AspectRatioProps>()
-</script>
-
-<template>
-  <AspectRatio v-bind="props">
-    <slot />
-  </AspectRatio>
-</template>

package/components/ui/aspect-ratio/index.ts

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

package/components/ui/auto-form/AutoForm.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts" generic="T extends ZodObjectOrWrapped">
-import type { FormContext, GenericObject } from 'vee-validate'
-import type { z, ZodAny } from 'zod'
-import type { Config, ConfigItem, Dependency, Shape } from './interface'
-import type { ZodObjectOrWrapped } from './utils'
-import { Form } from '@/lib/registry/default/ui/form'
-import { toTypedSchema } from '@vee-validate/zod'
-import { computed, toRefs } from 'vue'
-import AutoFormField from './AutoFormField.vue'
-import { provideDependencies } from './dependencies'
-import { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema } from './utils'
-
-const props = defineProps<{
-  schema: T
-  form?: FormContext<GenericObject>
-  fieldConfig?: Config<z.infer<T>>
-  dependencies?: Dependency<z.infer<T>>[]
-}>()
-
-const emits = defineEmits<{
-  submit: [event: z.infer<T>]
-}>()
-
-const { dependencies } = toRefs(props)
-provideDependencies(dependencies)
-
-const shapes = computed(() => {
-  // @ts-expect-error ignore {} not assignable to object
-  const val: { [key in keyof T]: Shape } = {}
-  const baseSchema = getObjectFormSchema(props.schema)
-  const shape = baseSchema.shape
-  Object.keys(shape).forEach((name) => {
-    const item = shape[name] as ZodAny
-    const baseItem = getBaseSchema(item) as ZodAny
-    let options = (baseItem && 'values' in baseItem._def) ? baseItem._def.values as string[] : undefined
-    if (!Array.isArray(options) && typeof options === 'object')
-      options = Object.values(options)
-
-    val[name as keyof T] = {
-      type: getBaseType(item),
-      default: getDefaultValueInZodStack(item),
-      options,
-      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
-      schema: baseItem,
-    }
-  })
-  return val
-})
-
-const fields = computed(() => {
-  // @ts-expect-error ignore {} not assignable to object
-  const val: { [key in keyof z.infer<T>]: { shape: Shape, fieldName: string, config: ConfigItem } } = {}
-  for (const key in shapes.value) {
-    const shape = shapes.value[key]
-    val[key as keyof z.infer<T>] = {
-      shape,
-      config: props.fieldConfig?.[key] as ConfigItem,
-      fieldName: key,
-    }
-  }
-  return val
-})
-
-const formComponent = computed(() => props.form ? 'form' : Form)
-const formComponentProps = computed(() => {
-  if (props.form) {
-    return {
-      onSubmit: props.form.handleSubmit(val => emits('submit', val)),
-    }
-  }
-  else {
-    const formSchema = toTypedSchema(props.schema)
-    return {
-      keepValues: true,
-      validationSchema: formSchema,
-      onSubmit: (val: GenericObject) => emits('submit', val),
-    }
-  }
-})
-</script>
-
-<template>
-  <component
-    :is="formComponent"
-    v-bind="formComponentProps"
-  >
-    <slot name="customAutoForm" :fields="fields">
-      <template v-for="(shape, key) of shapes" :key="key">
-        <slot
-          :shape="shape"
-          :name="key.toString() as keyof z.infer<T>"
-          :field-name="key.toString()"
-          :config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
-        >
-          <AutoFormField
-            :config="fieldConfig?.[key as keyof typeof fieldConfig] as ConfigItem"
-            :field-name="key.toString()"
-            :shape="shape"
-          />
-        </slot>
-      </template>
-    </slot>
-
-    <slot :shapes="shapes" />
-  </component>
-</template>

package/components/ui/auto-form/AutoFormField.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts" generic="U extends ZodAny">
-import type { ZodAny } from 'zod'
-import type { Config, ConfigItem, Shape } from './interface'
-import { computed } from 'vue'
-import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'
-import useDependencies from './dependencies'
-
-const props = defineProps<{
-  fieldName: string
-  shape: Shape
-  config?: ConfigItem | Config<U>
-}>()
-
-function isValidConfig(config: any): config is ConfigItem {
-  return !!config?.component
-}
-
-const delegatedProps = computed(() => {
-  if (['ZodObject', 'ZodArray'].includes(props.shape?.type))
-    return { schema: props.shape?.schema }
-  return undefined
-})
-
-const { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)
-</script>
-
-<template>
-  <component
-    :is="isValidConfig(config)
-      ? typeof config.component === 'string'
-        ? INPUT_COMPONENTS[config.component!]
-        : config.component
-      : INPUT_COMPONENTS[DEFAULT_ZOD_HANDLERS[shape.type]] "
-    v-if="!isHidden"
-    :field-name="fieldName"
-    :label="shape.schema?.description"
-    :required="isRequired || shape.required"
-    :options="overrideOptions || shape.options"
-    :disabled="isDisabled"
-    :config="config"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </component>
-</template>

package/components/ui/auto-form/AutoFormFieldArray.vue

@@ -1,110 +0,0 @@
-<script setup lang="ts" generic="T extends z.ZodAny">
-import type { Config, ConfigItem } from './interface'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
-import { Button } from '@/lib/registry/default/ui/button'
-import { FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Separator } from '@/lib/registry/default/ui/separator'
-import { PlusIcon, TrashIcon } from 'lucide-vue-next'
-import { FieldArray, FieldContextKey, useField } from 'vee-validate'
-import { computed, provide } from 'vue'
-import * as z from 'zod'
-import AutoFormField from './AutoFormField.vue'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName, getBaseType } from './utils'
-
-const props = defineProps<{
-  fieldName: string
-  required?: boolean
-  config?: Config<T>
-  schema?: z.ZodArray<T>
-  disabled?: boolean
-}>()
-
-function isZodArray(
-  item: z.ZodArray<any> | z.ZodDefault<any>,
-): item is z.ZodArray<any> {
-  return item instanceof z.ZodArray
-}
-
-function isZodDefault(
-  item: z.ZodArray<any> | z.ZodDefault<any>,
-): item is z.ZodDefault<any> {
-  return item instanceof z.ZodDefault
-}
-
-const itemShape = computed(() => {
-  if (!props.schema)
-    return
-
-  const schema: z.ZodAny = isZodArray(props.schema)
-    ? props.schema._def.type
-    : isZodDefault(props.schema)
-    // @ts-expect-error missing schema
-      ? props.schema._def.innerType._def.type
-      : null
-
-  return {
-    type: getBaseType(schema),
-    schema,
-  }
-})
-
-const fieldContext = useField(props.fieldName)
-// @ts-expect-error ignore missing `id`
-provide(FieldContextKey, fieldContext)
-</script>
-
-<template>
-  <FieldArray v-slot="{ fields, remove, push }" as="section" :name="fieldName">
-    <slot v-bind="props">
-      <Accordion type="multiple" class="w-full" collapsible :disabled="disabled" as-child>
-        <FormItem>
-          <AccordionItem :value="fieldName" class="border-none">
-            <AccordionTrigger>
-              <AutoFormLabel class="text-base" :required="required">
-                {{ schema?.description || beautifyObjectName(fieldName) }}
-              </AutoFormLabel>
-            </AccordionTrigger>
-
-            <AccordionContent>
-              <template v-for="(field, index) of fields" :key="field.key">
-                <div class="mb-4 p-1">
-                  <AutoFormField
-                    :field-name="`${fieldName}[${index}]`"
-                    :label="fieldName"
-                    :shape="itemShape!"
-                    :config="config as ConfigItem"
-                  />
-
-                  <div class="!my-4 flex justify-end">
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="secondary"
-                      @click="remove(index)"
-                    >
-                      <TrashIcon :size="16" />
-                    </Button>
-                  </div>
-                  <Separator v-if="!field.isLast" />
-                </div>
-              </template>
-
-              <Button
-                type="button"
-                variant="secondary"
-                class="mt-4 flex items-center"
-                @click="push(null)"
-              >
-                <PlusIcon class="mr-2" :size="16" />
-                Add
-              </Button>
-            </AccordionContent>
-
-            <FormMessage />
-          </AccordionItem>
-        </FormItem>
-      </Accordion>
-    </slot>
-  </FieldArray>
-</template>

package/components/ui/auto-form/AutoFormFieldBoolean.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { FieldProps } from './interface'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Switch } from '@/lib/registry/default/ui/switch'
-import { computed } from 'vue'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
-
-const props = defineProps<FieldProps>()
-
-const booleanComponent = computed(() => props.config?.component === 'switch' ? Switch : Checkbox)
-</script>
-
-<template>
-  <FormField v-slot="slotProps" :name="fieldName">
-    <FormItem>
-      <div class="space-y-0 mb-3 flex items-center gap-3">
-        <FormControl>
-          <slot v-bind="slotProps">
-            <component
-              :is="booleanComponent"
-              v-bind="{ ...slotProps.componentField }"
-              :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled"
-              :checked="slotProps.componentField.modelValue"
-              @update:checked="slotProps.componentField['onUpdate:modelValue']"
-            />
-          </slot>
-        </FormControl>
-        <AutoFormLabel v-if="!config?.hideLabel" :required="required">
-          {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-        </AutoFormLabel>
-      </div>
-
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>

package/components/ui/auto-form/AutoFormFieldDate.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type { FieldProps } from './interface'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
-import { cn } from '@/lib/utils'
-
-import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
-import { CalendarIcon } from 'lucide-vue-next'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
-
-defineProps<FieldProps>()
-
-const df = new DateFormatter('en-US', {
-  dateStyle: 'long',
-})
-</script>
-
-<template>
-  <FormField v-slot="slotProps" :name="fieldName">
-    <FormItem>
-      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
-        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-      </AutoFormLabel>
-      <FormControl>
-        <slot v-bind="slotProps">
-          <div>
-            <Popover>
-              <PopoverTrigger as-child :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled">
-                <Button
-                  variant="outline"
-                  :class="cn(
-                    'w-full justify-start text-left font-normal',
-                    !slotProps.componentField.modelValue && 'text-muted-foreground',
-                  )"
-                >
-                  <CalendarIcon class="mr-2 h-4 w-4" :size="16" />
-                  {{ slotProps.componentField.modelValue ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone())) : "Pick a date" }}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent class="w-auto p-0">
-                <Calendar initial-focus v-bind="slotProps.componentField" />
-              </PopoverContent>
-            </Popover>
-          </div>
-        </slot>
-      </FormControl>
-
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>

package/components/ui/auto-form/AutoFormFieldEnum.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Label } from '@/lib/registry/default/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName, maybeBooleanishToBoolean } from './utils'
-
-defineProps<FieldProps & {
-  options?: string[]
-}>()
-</script>
-
-<template>
-  <FormField v-slot="slotProps" :name="fieldName">
-    <FormItem>
-      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
-        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-      </AutoFormLabel>
-      <FormControl>
-        <slot v-bind="slotProps">
-          <RadioGroup v-if="config?.component === 'radio'" :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled" :orientation="'vertical'" v-bind="{ ...slotProps.componentField }">
-            <div v-for="(option, index) in options" :key="option" class="mb-2 flex items-center gap-3 space-y-0">
-              <RadioGroupItem :id="`${option}-${index}`" :value="option" />
-              <Label :for="`${option}-${index}`">{{ beautifyObjectName(option) }}</Label>
-            </div>
-          </RadioGroup>
-
-          <Select v-else :disabled="maybeBooleanishToBoolean(config?.inputProps?.disabled) ?? disabled" v-bind="{ ...slotProps.componentField }">
-            <SelectTrigger class="w-full">
-              <SelectValue :placeholder="config?.inputProps?.placeholder" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem v-for="option in options" :key="option" :value="option">
-                {{ beautifyObjectName(option) }}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </slot>
-      </FormControl>
-
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>