fulldev-ui 0.6.5 → 0.7.0-beta.1

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

@@ -0,0 +1,45 @@
+<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

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { Checkbox } from 'fulldev-ui/components/ui/checkbox'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from 'fulldev-ui/components/ui/form'
+import { Switch } from 'fulldev-ui/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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Button } from 'fulldev-ui/components/ui/button'
+import { Calendar } from 'fulldev-ui/components/ui/calendar'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from 'fulldev-ui/components/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from 'fulldev-ui/components/ui/popover'
+import { cn } from 'fulldev-ui/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

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { Button } from 'fulldev-ui/components/ui/button'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from 'fulldev-ui/components/ui/form'
+import { Input } from 'fulldev-ui/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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from 'fulldev-ui/components/ui/form'
+import { Input } from 'fulldev-ui/components/ui/input'
+import { Textarea } from 'fulldev-ui/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>

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from 'fulldev-ui/components/ui/form'
+import { Input } from 'fulldev-ui/components/ui/input'
+import AutoFormLabel from './AutoFormLabel.vue'
+import type { FieldProps } from './interface'
+import { beautifyObjectName } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<FieldProps>()
+</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">
+          <Input
+            type="number"
+            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>

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

@@ -0,0 +1,90 @@
+<script setup lang="ts" generic="T extends ZodRawShape">
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'fulldev-ui/components/ui/accordion'
+import { FormItem } from 'fulldev-ui/components/ui/form'
+import { FieldContextKey, useField } from 'vee-validate'
+import { computed, provide } from 'vue'
+import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
+import AutoFormField from './AutoFormField.vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import type { Config, ConfigItem, Shape } from './interface'
+import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
+
+const props = defineProps<{
+  fieldName: string
+  required?: boolean
+  config?: Config<T>
+  schema?: ZodObject<T>
+  disabled?: boolean
+}>()
+
+const shapes = computed(() => {
+  // @ts-expect-error ignore {} not assignable to object
+  const val: { [key in keyof T]: Shape } = {}
+
+  if (!props.schema) return
+  const shape = getBaseSchema(props.schema)?.shape
+  if (!shape) return
+  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: item,
+    }
+  })
+  return val
+})
+
+const fieldContext = useField(props.fieldName)
+// @ts-expect-error ignore missing `id`
+provide(FieldContextKey, fieldContext)
+</script>
+
+<template>
+  <section>
+    <slot v-bind="props">
+      <Accordion
+        type="single"
+        as-child
+        class="w-full"
+        collapsible
+        :disabled="disabled"
+      >
+        <FormItem>
+          <AccordionItem
+            :value="fieldName"
+            class="border-none"
+          >
+            <AccordionTrigger>
+              <AutoFormLabel
+                class="text-base"
+                :required="required"
+              >
+                {{ schema?.description || beautifyObjectName(fieldName) }}
+              </AutoFormLabel>
+            </AccordionTrigger>
+            <AccordionContent class="p-1 space-y-5">
+              <template
+                v-for="(shape, key) in shapes"
+                :key="key"
+              >
+                <AutoFormField
+                  :config="config?.[key as keyof typeof config] as ConfigItem"
+                  :field-name="`${fieldName}.${key.toString()}`"
+                  :label="key.toString()"
+                  :shape="shape"
+                />
+              </template>
+            </AccordionContent>
+          </AccordionItem>
+        </FormItem>
+      </Accordion>
+    </slot>
+  </section>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { FormLabel } from 'fulldev-ui/components/ui/form'
+
+defineProps<{
+  required?: boolean
+}>()
+</script>
+
+<template>
+  <FormLabel>
+    <slot />
+    <span
+      v-if="required"
+      class="text-destructive"
+    >
+      *</span
+    >
+  </FormLabel>
+</template>