fulldev-ui 0.6.5 → 0.7.0-beta.2

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>

package/src/components/ui/auto-form/constant.ts

@@ -0,0 +1,40 @@
+import type { InputComponents } from './interface'
+import AutoFormFieldArray from './AutoFormFieldArray.vue'
+import AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'
+import AutoFormFieldDate from './AutoFormFieldDate.vue'
+import AutoFormFieldEnum from './AutoFormFieldEnum.vue'
+import AutoFormFieldFile from './AutoFormFieldFile.vue'
+import AutoFormFieldInput from './AutoFormFieldInput.vue'
+import AutoFormFieldNumber from './AutoFormFieldNumber.vue'
+import AutoFormFieldObject from './AutoFormFieldObject.vue'
+
+export const INPUT_COMPONENTS: InputComponents = {
+  date: AutoFormFieldDate,
+  select: AutoFormFieldEnum,
+  radio: AutoFormFieldEnum,
+  checkbox: AutoFormFieldBoolean,
+  switch: AutoFormFieldBoolean,
+  textarea: AutoFormFieldInput,
+  number: AutoFormFieldNumber,
+  string: AutoFormFieldInput,
+  file: AutoFormFieldFile,
+  array: AutoFormFieldArray,
+  object: AutoFormFieldObject,
+}
+
+/**
+ * Define handlers for specific Zod types.
+ * You can expand this object to support more types.
+ */
+export const DEFAULT_ZOD_HANDLERS: {
+  [key: string]: keyof typeof INPUT_COMPONENTS
+} = {
+  ZodString: 'string',
+  ZodBoolean: 'checkbox',
+  ZodDate: 'date',
+  ZodEnum: 'select',
+  ZodNativeEnum: 'select',
+  ZodNumber: 'number',
+  ZodArray: 'array',
+  ZodObject: 'object',
+}

package/src/components/ui/auto-form/dependencies.ts

@@ -0,0 +1,92 @@
+import type { Ref } from 'vue'
+import type * as z from 'zod'
+import { createContext } from 'radix-vue'
+import { useFieldValue, useFormValues } from 'vee-validate'
+import { computed, ref, watch } from 'vue'
+import { type Dependency, DependencyType, type EnumValues } from './interface'
+import { getFromPath, getIndexIfArray } from './utils'
+
+export const [injectDependencies, provideDependencies] = createContext<Ref<Dependency<z.infer<z.ZodObject<any>>>[] | undefined>>('AutoFormDependencies')
+
+export default function useDependencies(
+  fieldName: string,
+) {
+  const form = useFormValues()
+  // parsed test[0].age => test.age
+  const currentFieldName = fieldName.replace(/\[\d+\]/g, '')
+  const currentFieldValue = useFieldValue<any>(fieldName)
+
+  if (!form)
+    throw new Error('useDependencies should be used within <AutoForm>')
+
+  const dependencies = injectDependencies()
+  const isDisabled = ref(false)
+  const isHidden = ref(false)
+  const isRequired = ref(false)
+  const overrideOptions = ref<EnumValues | undefined>()
+
+  const currentFieldDependencies = computed(() => dependencies.value?.filter(
+    dependency => dependency.targetField === currentFieldName,
+  ))
+
+  function getSourceValue(dep: Dependency<any>) {
+    const source = dep.sourceField as string
+    const index = getIndexIfArray(fieldName) ?? -1
+    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()
+    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()
+
+    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {
+      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()
+      return getFromPath(form.value, currentInitial.join('.') + sourceLast);
+    }
+
+    return getFromPath(form.value, source)
+  }
+
+  const sourceFieldValues = computed(() => currentFieldDependencies.value?.map(dep => getSourceValue(dep)))
+
+  const resetConditionState = () => {
+    isDisabled.value = false
+    isHidden.value = false
+    isRequired.value = false
+    overrideOptions.value = undefined
+  }
+
+  watch([sourceFieldValues, dependencies], () => {
+    resetConditionState()
+    currentFieldDependencies.value?.forEach((dep) => {
+      const sourceValue = getSourceValue(dep)
+      const conditionMet = dep.when(sourceValue, currentFieldValue.value)
+
+      switch (dep.type) {
+        case DependencyType.DISABLES:
+          if (conditionMet)
+            isDisabled.value = true
+
+          break
+        case DependencyType.REQUIRES:
+          if (conditionMet)
+            isRequired.value = true
+
+          break
+        case DependencyType.HIDES:
+          if (conditionMet)
+            isHidden.value = true
+
+          break
+        case DependencyType.SETS_OPTIONS:
+          if (conditionMet)
+            overrideOptions.value = dep.options
+
+          break
+      }
+    })
+  }, { immediate: true, deep: true })
+
+  return {
+    isDisabled,
+    isHidden,
+    isRequired,
+    overrideOptions,
+  }
+}

package/src/components/ui/auto-form/index.ts

@@ -0,0 +1,15 @@
+export { default as AutoForm } from './AutoForm.vue'
+export { default as AutoFormField } from './AutoFormField.vue'
+
+export { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'
+export { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'
+export { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'
+
+export { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'
+export { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'
+export { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'
+export { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'
+export { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'
+export { default as AutoFormLabel } from './AutoFormLabel.vue'
+export type { Config, ConfigItem, FieldProps } from './interface'
+export { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'