@soft-stech/bootsman-ui-shadcn 1.1.35 → 1.1.37

package/dist/{x-tjPysJ-8.js → x-qxSNtB0B.js}

@@ -1,4 +1,4 @@
-import { d as e } from "./utils-C9G8Xvqo.js";
+import { d as e } from "./utils-BNc3Bzhq.js";
 /**
  * @license lucide-vue-next v0.377.0 - ISC
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.1.35",
+  "version": "1.1.37",
   "type": "module",
   "files": [
     "dist",
@@ -15,6 +15,7 @@
     "url": "https://github.com/soft-stech/bootsman-ui-shadcn"
   },
   "dependencies": {
+    "@internationalized/date": "^3.5.5",
     "@tanstack/vue-table": "8.16.0",
     "@vee-validate/zod": "4.13.1",
     "@vueuse/core": "10.9.0",
@@ -50,6 +51,7 @@
     "glob": "10.3.12",
     "histoire": "0.17.17",
     "jsdom": "23.2.0",
+    "mlly": "1.4.2",
     "npm-run-all2": "6.1.2",
     "postcss": "8.4.38",
     "prettier": "3.2.5",
@@ -59,8 +61,7 @@
     "vite": "5.2.11",
     "vite-plugin-dts": "3.9.0",
     "vitest": "1.5.3",
-    "vue-tsc": "2.0.16",
-    "mlly": "1.4.2"
+    "vue-tsc": "2.0.16"
   },
   "scripts": {
     "build": "run-p type-check \"build-only {@}\" --",

package/src/components/stories/BuiAutoForm.story.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { BuiAutoForm } from '@/components/ui/auto-form'
+import { z } from 'zod'
+import { ref } from 'vue'
+import { useBuiForm } from '@/components/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+
+enum Sports {
+  Football = 'Football/Soccer',
+  Basketball = 'Basketball',
+  Baseball = 'Baseball',
+  Hockey = 'Hockey (Ice)',
+  None = "I don't like sports"
+}
+
+const schema = z.object({
+  addons: z.array(
+    z
+      .object({
+        type: z.nativeEnum(Sports),
+        name: z.string().min(1),
+        email: z.string().email()
+      })
+      .describe('Addon')
+  ),
+  username: z
+    .string({
+      required_error: 'Username is required.'
+    })
+    .min(2, {
+      message: 'Username must be at least 2 characters.'
+    }),
+
+  password: z
+    .string({
+      required_error: 'Password is required.'
+    })
+    .min(8, {
+      message: 'Password must be at least 8 characters.'
+    }),
+
+  favouriteNumber: z.coerce
+    .number({
+      invalid_type_error: 'Favourite number must be a number.'
+    })
+    .min(1, {
+      message: 'Favourite number must be at least 1.'
+    })
+    .max(10, {
+      message: 'Favourite number must be at most 10.'
+    })
+    .default(1)
+    .optional(),
+
+  acceptTerms: z.boolean().refine((value) => value, {
+    message: 'You must accept the terms and conditions.',
+    path: ['acceptTerms']
+  }),
+
+  sendMeMails: z.boolean().optional(),
+
+  birthday: z.coerce.date().optional(),
+
+  color: z.enum(['red', 'green', 'blue']).optional(),
+
+  // Another enum example
+  marshmallows: z.enum(['not many', 'a few', 'a lot', 'too many']),
+
+  // Native enum example
+  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),
+
+  bio: z
+    .string()
+    .min(10, {
+      message: 'Bio must be at least 10 characters.'
+    })
+    .max(160, {
+      message: 'Bio must not be longer than 30 characters.'
+    })
+    .optional(),
+
+  customParent: z.string().optional(),
+
+  file: z.string().optional()
+})
+
+const form = useBuiForm({
+  validationSchema: toTypedSchema(schema)
+})
+</script>
+
+<template>
+  <Story title="BuiAutoForm" autoPropsDisabled :layout="{ type: 'grid', width: '100%' }">
+    <Variant title="Default">
+      <BuiAutoForm :schema="schema" :form="form" class="m-4" />
+    </Variant>
+  </Story>
+</template>

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

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

@@ -0,0 +1,45 @@
+<script setup lang="ts" generic="U extends ZodAny">
+import type { ZodAny } from 'zod'
+import { computed } from 'vue'
+import type { Config, ConfigItem, Shape } from './interface'
+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/BuiAutoFormFieldArray.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts" generic="T extends z.ZodAny">
+import * as z from 'zod'
+import { computed, provide } from 'vue'
+import { PlusIcon, TrashIcon } from 'lucide-vue-next'
+import { FieldArray, FieldContextKey, useField } from 'vee-validate'
+import type { Config, ConfigItem } from './interface'
+import { beautifyObjectName, getBaseType } from './utils'
+import AutoFormField from './BuiAutoFormField.vue'
+import AutoFormLabel from './BuiAutoFormLabel.vue'
+import {
+  BuiAccordion as Accordion,
+  BuiAccordionContent as AccordionContent,
+  BuiAccordionItem as AccordionItem,
+  BuiAccordionTrigger as AccordionTrigger
+} from '@/components/ui/accordion'
+import { BuiButton as Button } from '@/components/ui/button'
+import { BuiSeparator as Separator } from '@/components/ui/separator'
+import { BuiFormItem as FormItem, BuiFormMessage as FormMessage } from '@/components/ui/form'
+
+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/BuiAutoFormFieldBoolean.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { beautifyObjectName } from './utils'
+import type { FieldProps } from './interface'
+import AutoFormLabel from './BuiAutoFormLabel.vue'
+import {
+  BuiFormControl as FormControl,
+  BuiFormDescription as FormDescription,
+  BuiFormField as FormField,
+  BuiFormItem as FormItem,
+  BuiFormMessage as FormMessage
+} from '@/components/ui/form'
+import { BuiSwitch as Switch } from '@/components/ui/switch'
+import { BuiCheckbox as Checkbox } from '@/components/ui/checkbox'
+
+const props = defineProps<FieldProps>()
+
+const booleanComponent = computed(() => (props.config?.component === 'switch' ? Switch : Checkbox))
+</script>
+
+<template>
+  <FormField v-slot="slotProps" :name="fieldName">
+    <FormItem>
+      <div class="mb-3 flex items-center gap-3 space-y-0">
+        <FormControl>
+          <slot v-bind="slotProps">
+            <component
+              :is="booleanComponent"
+              v-bind="{ ...slotProps.componentField }"
+              :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/BuiAutoFormFieldDate.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { CalendarIcon } from 'lucide-vue-next'
+import { beautifyObjectName } from './utils'
+import AutoFormLabel from './BuiAutoFormLabel.vue'
+import type { FieldProps } from './interface'
+import {
+  BuiFormControl as FormControl,
+  BuiFormDescription as FormDescription,
+  BuiFormField as FormField,
+  BuiFormItem as FormItem,
+  BuiFormMessage as FormMessage
+} from '@/components/ui/form'
+
+import { BuiCalendar as Calendar } from '@/components/ui/calendar'
+import { BuiButton as Button } from '@/components/ui/button'
+import {
+  BuiPopover as Popover,
+  BuiPopoverContent as PopoverContent,
+  BuiPopoverTrigger as PopoverTrigger
+} from '@/components/ui/popover'
+import { cn } from '@/lib/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="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/BuiAutoFormFieldEnum.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import AutoFormLabel from './BuiAutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
+import type { FieldProps } from './interface'
+import {
+  BuiFormControl as FormControl,
+  BuiFormDescription as FormDescription,
+  BuiFormField as FormField,
+  BuiFormItem as FormItem,
+  BuiFormMessage as FormMessage
+} from '@/components/ui/form'
+import {
+  BuiSelect as Select,
+  BuiSelectContent as SelectContent,
+  BuiSelectItem as SelectItem,
+  BuiSelectTrigger as SelectTrigger,
+  BuiSelectValue as SelectValue
+} from '@/components/ui/select'
+import { BuiLabel as Label } from '@/components/ui/label'
+import {
+  BuiRadioGroup as RadioGroup,
+  BuiRadioGroupItem as RadioGroupItem
+} from '@/components/ui/radio-group'
+
+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="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="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/BuiAutoFormFieldFile.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TrashIcon } from 'lucide-vue-next'
+import AutoFormLabel from './BuiAutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
+import type { FieldProps } from './interface'
+import {
+  BuiFormControl as FormControl,
+  BuiFormDescription as FormDescription,
+  BuiFormField as FormField,
+  BuiFormItem as FormItem,
+  BuiFormMessage as FormMessage
+} from '@/components/ui/form'
+import { BuiInput as Input } from '@/components/ui/input'
+import { BuiButton as Button } from '@/components/ui/button'
+
+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="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 py-1 pl-3 pr-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>