fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/accordion/AccordionTrigger.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { ChevronDown } from 'lucide-vue-next'
-import { AccordionHeader, AccordionTrigger, type AccordionTriggerProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AccordionHeader class="flex">
-    <AccordionTrigger
-      v-bind="delegatedProps"
-      :class="
-        cn(
-          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-          props.class
-        )
-      "
-    >
-      <slot />
-      <slot name="icon">
-        <ChevronDown class="h-4 w-4 shrink-0 transition-transform duration-200" />
-      </slot>
-    </AccordionTrigger>
-  </AccordionHeader>
-</template>

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

@@ -1,115 +0,0 @@
-<script setup lang="ts" generic="T extends ZodObjectOrWrapped">
-import { Form } from '@/components/ui/form'
-import { toTypedSchema } from '@vee-validate/zod'
-import type { FormContext, GenericObject } from 'vee-validate'
-import { computed, toRefs } from 'vue'
-import type { z, ZodAny } from 'zod'
-import AutoFormField from './AutoFormField.vue'
-import { provideDependencies } from './dependencies'
-import type { Config, ConfigItem, Dependency, Shape } from './interface'
-import {
-  getBaseSchema,
-  getBaseType,
-  getDefaultValueInZodStack,
-  getObjectFormSchema,
-  type ZodObjectOrWrapped,
-} 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/src/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/src/components/ui/auto-form/AutoFormFieldArray.vue

@@ -1,127 +0,0 @@
-<script setup lang="ts" generic="T extends z.ZodAny">
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
-import { Button } from '@/components/ui/button'
-import { FormItem, FormMessage } from '@/components/ui/form'
-import { Separator } from '@/components/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 type { Config, ConfigItem } from './interface'
-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/src/components/ui/auto-form/AutoFormFieldBoolean.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { Checkbox } from '@/components/ui/checkbox'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Switch } from '@/components/ui/switch'
-import { computed } from 'vue'
-import AutoFormLabel from './AutoFormLabel.vue'
-import type { FieldProps } from './interface'
-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/src/components/ui/auto-form/AutoFormFieldDate.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { cn } from '@/lib/utils'
-import type { FieldProps } from './interface'
-
-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/src/components/ui/auto-form/AutoFormFieldEnum.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Label } from '@/components/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import AutoFormLabel from './AutoFormLabel.vue'
-import type { FieldProps } from './interface'
-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>

package/src/components/ui/auto-form/AutoFormFieldFile.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { TrashIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-import AutoFormLabel from './AutoFormLabel.vue'
-import type { FieldProps } from './interface'
-import { beautifyObjectName } from './utils'
-
-defineProps<FieldProps>()
-
-const inputFile = ref<File>()
-async function parseFileAsString(file: File | undefined): Promise<string> {
-  return new Promise((resolve, reject) => {
-    if (file) {
-      const reader = new FileReader()
-      reader.onloadend = () => {
-        resolve(reader.result as string)
-      }
-      reader.onerror = (err) => {
-        reject(err)
-      }
-      reader.readAsDataURL(file)
-    }
-  })
-}
-</script>
-
-<template>
-  <FormField
-    v-slot="slotProps"
-    :name="fieldName"
-  >
-    <FormItem v-bind="$attrs">
-      <AutoFormLabel
-        v-if="!config?.hideLabel"
-        :required="required"
-      >
-        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-      </AutoFormLabel>
-      <FormControl>
-        <slot v-bind="slotProps">
-          <Input
-            v-if="!inputFile"
-            type="file"
-            v-bind="{ ...config?.inputProps }"
-            :disabled="config?.inputProps?.disabled ?? disabled"
-            @change="
-              async (ev: InputEvent) => {
-                const file = (ev.target as HTMLInputElement).files?.[0]
-                inputFile = file
-                const parsed = await parseFileAsString(file)
-                slotProps.componentField.onInput(parsed)
-              }
-            "
-          />
-          <div
-            v-else
-            class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent pl-3 pr-1 py-1 text-sm shadow-sm transition-colors"
-          >
-            <p>{{ inputFile?.name }}</p>
-            <Button
-              :size="'icon'"
-              :variant="'ghost'"
-              class="h-[26px] w-[26px]"
-              aria-label="Remove file"
-              type="button"
-              @click="
-                () => {
-                  inputFile = undefined
-                  slotProps.componentField.onInput(undefined)
-                }
-              "
-            >
-              <TrashIcon :size="16" />
-            </Button>
-          </div>
-        </slot>
-      </FormControl>
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>

package/src/components/ui/auto-form/AutoFormFieldInput.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { computed } from 'vue'
-import AutoFormLabel from './AutoFormLabel.vue'
-import type { FieldProps } from './interface'
-import { beautifyObjectName } from './utils'
-
-const props = defineProps<FieldProps>()
-const inputComponent = computed(() => (props.config?.component === 'textarea' ? Textarea : Input))
-</script>
-
-<template>
-  <FormField
-    v-slot="slotProps"
-    :name="fieldName"
-  >
-    <FormItem v-bind="$attrs">
-      <AutoFormLabel
-        v-if="!config?.hideLabel"
-        :required="required"
-      >
-        {{ config?.label || beautifyObjectName(label ?? fieldName) }}
-      </AutoFormLabel>
-      <FormControl>
-        <slot v-bind="slotProps">
-          <component
-            :is="inputComponent"
-            type="text"
-            v-bind="{ ...slotProps.componentField, ...config?.inputProps }"
-            :disabled="config?.inputProps?.disabled ?? disabled"
-          />
-        </slot>
-      </FormControl>
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>