@soft-stech/bootsman-ui-shadcn 1.1.36 → 1.1.38

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+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 { BuiTextarea as Textarea } from '@/components/ui/textarea'
+
+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="disabled"
+          />
+        </slot>
+      </FormControl>
+      <FormDescription v-if="config?.description">
+        {{ config.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>

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

@@ -0,0 +1,42 @@
+<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 { BuiInput as Input } from '@/components/ui/input'
+
+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="disabled"
+          />
+        </slot>
+      </FormControl>
+      <FormDescription v-if="config?.description">
+        {{ config.description }}
+      </FormDescription>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>

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

@@ -0,0 +1,81 @@
+<script setup lang="ts" generic="T extends ZodRawShape">
+import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
+import { computed, provide } from 'vue'
+import { FieldContextKey, useField } from 'vee-validate'
+import AutoFormField from './BuiAutoFormField.vue'
+import type { Config, ConfigItem, Shape } from './interface'
+import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
+import AutoFormLabel from './BuiAutoFormLabel.vue'
+import {
+  BuiAccordion as Accordion,
+  BuiAccordionContent as AccordionContent,
+  BuiAccordionItem as AccordionItem,
+  BuiAccordionTrigger as AccordionTrigger
+} from '@/components/ui/accordion'
+import { BuiFormItem as FormItem } from '@/components/ui/form'
+
+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="space-y-5 p-1">
+              <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/BuiAutoFormLabel.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { BuiFormLabel as FormLabel } from '@/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,39 @@
+import BuiAutoFormFieldArray from './BuiAutoFormFieldArray.vue'
+import BuiAutoFormFieldBoolean from './BuiAutoFormFieldBoolean.vue'
+import BuiAutoFormFieldDate from './BuiAutoFormFieldDate.vue'
+import BuiAutoFormFieldEnum from './BuiAutoFormFieldEnum.vue'
+import BuiAutoFormFieldFile from './BuiAutoFormFieldFile.vue'
+import BuiAutoFormFieldInput from './BuiAutoFormFieldInput.vue'
+import BuiAutoFormFieldNumber from './BuiAutoFormFieldNumber.vue'
+import BuiAutoFormFieldObject from './BuiAutoFormFieldObject.vue'
+
+export const INPUT_COMPONENTS = {
+  date: BuiAutoFormFieldDate,
+  select: BuiAutoFormFieldEnum,
+  radio: BuiAutoFormFieldEnum,
+  checkbox: BuiAutoFormFieldBoolean,
+  switch: BuiAutoFormFieldBoolean,
+  textarea: BuiAutoFormFieldInput,
+  number: BuiAutoFormFieldNumber,
+  string: BuiAutoFormFieldInput,
+  file: BuiAutoFormFieldFile,
+  array: BuiAutoFormFieldArray,
+  object: BuiAutoFormFieldObject
+}
+
+/**
+ * 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,95 @@
+import type * as z from 'zod'
+import type { Ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useFieldValue, useFormValues } from 'vee-validate'
+import { createContext } from 'radix-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
+    //@ts-ignore
+    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()
+    //@ts-ignore
+    const [_targetLast, ...targetInitial] = (dep.targetField as string).split('.').toReversed()
+
+    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {
+      //@ts-ignore
+      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 { getObjectFormSchema, getBaseSchema, getBaseType } from './utils'
+export type { Config, ConfigItem, FieldProps } from './interface'
+
+export { default as BuiAutoForm } from './BuiAutoForm.vue'
+export { default as BuiAutoFormField } from './BuiAutoFormField.vue'
+export { default as BuiAutoFormLabel } from './BuiAutoFormLabel.vue'
+
+export { default as BuiAutoFormFieldArray } from './BuiAutoFormFieldArray.vue'
+export { default as BuiAutoFormFieldBoolean } from './BuiAutoFormFieldBoolean.vue'
+export { default as BuiAutoFormFieldDate } from './BuiAutoFormFieldDate.vue'
+export { default as BuiAutoFormFieldEnum } from './BuiAutoFormFieldEnum.vue'
+export { default as BuiAutoFormFieldFile } from './BuiAutoFormFieldFile.vue'
+export { default as BuiAutoFormFieldInput } from './BuiAutoFormFieldInput.vue'
+export { default as BuiAutoFormFieldNumber } from './BuiAutoFormFieldNumber.vue'
+export { default as BuiAutoFormFieldObject } from './BuiAutoFormFieldObject.vue'

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

@@ -0,0 +1,81 @@
+import type { Component, InputHTMLAttributes } from 'vue'
+import type { ZodAny, z } from 'zod'
+import type { INPUT_COMPONENTS } from './constant'
+
+export interface FieldProps {
+  fieldName: string
+  label?: string
+  required?: boolean
+  config?: ConfigItem
+  disabled?: boolean
+}
+
+export interface Shape {
+  type: string
+  default?: any
+  required?: boolean
+  options?: string[]
+  schema?: ZodAny
+}
+
+export interface ConfigItem {
+  /** Value for the `FormLabel` */
+  label?: string
+  /** Value for the `FormDescription` */
+  description?: string
+  /** Pick which component to be rendered. */
+  component?: keyof typeof INPUT_COMPONENTS | Component
+  /** Hide `FormLabel`. */
+  hideLabel?: boolean
+  inputProps?: InputHTMLAttributes
+}
+
+// Define a type to unwrap an array
+type UnwrapArray<T> = T extends (infer U)[] ? U : never
+
+export type Config<SchemaType extends object> = {
+  // If SchemaType.key is an object, create a nested Config, otherwise ConfigItem
+  [Key in keyof SchemaType]?:
+  SchemaType[Key] extends any[]
+    ? UnwrapArray<Config<SchemaType[Key]>>
+    : SchemaType[Key] extends object
+      ? Config<SchemaType[Key]>
+      : ConfigItem;
+}
+
+export enum DependencyType {
+  DISABLES,
+  REQUIRES,
+  HIDES,
+  SETS_OPTIONS,
+}
+
+interface BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> {
+  sourceField: keyof SchemaType
+  type: DependencyType
+  targetField: keyof SchemaType
+  when: (sourceFieldValue: any, targetFieldValue: any) => boolean
+}
+
+export type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
+  BaseDependency<SchemaType> & {
+    type:
+      | DependencyType.DISABLES
+      | DependencyType.REQUIRES
+      | DependencyType.HIDES
+  }
+
+export type EnumValues = readonly [string, ...string[]]
+
+export type OptionsDependency<
+  SchemaType extends z.infer<z.ZodObject<any, any>>,
+> = BaseDependency<SchemaType> & {
+  type: DependencyType.SETS_OPTIONS
+
+  // Partial array of values from sourceField that will trigger the dependency
+  options: EnumValues
+}
+
+export type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
+  | ValueDependency<SchemaType>
+  | OptionsDependency<SchemaType>

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

@@ -0,0 +1,171 @@
+import type { z } from 'zod'
+
+// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.
+export type ZodObjectOrWrapped =
+  | z.ZodObject<any, any>
+  | z.ZodEffects<z.ZodObject<any, any>>
+
+/**
+ * Beautify a camelCase string.
+ * e.g. "myString" -> "My String"
+ */
+export function beautifyObjectName(string: string) {
+  // Remove bracketed indices
+  // if numbers only return the string
+  let output = string.replace(/\[\d+\]/g, '').replace(/([A-Z])/g, ' $1')
+  output = output.charAt(0).toUpperCase() + output.slice(1)
+  return output
+}
+
+/**
+ * Parse string and extract the index
+ * @param string
+ * @returns index or undefined
+ */
+export function getIndexIfArray(string: string) {
+  const indexRegex = /\[(\d+)\]/
+  // Match the index
+  const match = string.match(indexRegex)
+  // Extract the index (number)
+  const index = match ? Number.parseInt(match[1]) : undefined
+  return index
+}
+
+/**
+ * Get the lowest level Zod type.
+ * This will unpack optionals, refinements, etc.
+ */
+export function getBaseSchema<
+  ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,
+>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {
+  if (!schema)
+    return null
+  if ('innerType' in schema._def)
+    return getBaseSchema(schema._def.innerType as ChildType)
+
+  if ('schema' in schema._def)
+    return getBaseSchema(schema._def.schema as ChildType)
+
+  return schema as ChildType
+}
+
+/**
+ * Get the type name of the lowest level Zod type.
+ * This will unpack optionals, refinements, etc.
+ */
+export function getBaseType(schema: z.ZodAny) {
+  const baseSchema = getBaseSchema(schema)
+  return baseSchema ? baseSchema._def.typeName : ''
+}
+
+/**
+ * Search for a "ZodDefault" in the Zod stack and return its value.
+ */
+export function getDefaultValueInZodStack(schema: z.ZodAny): any {
+  const typedSchema = schema as unknown as z.ZodDefault<
+    z.ZodNumber | z.ZodString
+  >
+
+  if (typedSchema._def.typeName === 'ZodDefault')
+    return typedSchema._def.defaultValue()
+
+  if ('innerType' in typedSchema._def) {
+    return getDefaultValueInZodStack(
+      typedSchema._def.innerType as unknown as z.ZodAny,
+    )
+  }
+  if ('schema' in typedSchema._def) {
+    return getDefaultValueInZodStack(
+      (typedSchema._def as any).schema as z.ZodAny,
+    )
+  }
+
+  return undefined
+}
+
+export function getObjectFormSchema(
+  schema: ZodObjectOrWrapped,
+): z.ZodObject<any, any> {
+  if (schema?._def.typeName === 'ZodEffects') {
+    const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>
+    return getObjectFormSchema(typedSchema._def.schema)
+  }
+  return schema as z.ZodObject<any, any>
+}
+
+function isIndex(value: unknown): value is number {
+  return Number(value) >= 0
+}
+/**
+ * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax
+ */
+export function normalizeFormPath(path: string): string {
+  const pathArr = path.split('.')
+  if (!pathArr.length)
+    return ''
+
+  let fullPath = String(pathArr[0])
+  for (let i = 1; i < pathArr.length; i++) {
+    if (isIndex(pathArr[i])) {
+      fullPath += `[${pathArr[i]}]`
+      continue
+    }
+
+    fullPath += `.${pathArr[i]}`
+  }
+
+  return fullPath
+}
+
+type NestedRecord = Record<string, unknown> | { [k: string]: NestedRecord }
+/**
+ * Checks if the path opted out of nested fields using `[fieldName]` syntax
+ */
+export function isNotNestedPath(path: string) {
+  return /^\[.+\]$/.test(path)
+}
+function isObject(obj: unknown): obj is Record<string, unknown> {
+  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
+}
+function isContainerValue(value: unknown): value is Record<string, unknown> {
+  return isObject(value) || Array.isArray(value)
+}
+function cleanupNonNestedPath(path: string) {
+  if (isNotNestedPath(path))
+    return path.replace(/\[|\]/g, '')
+
+  return path
+}
+
+/**
+ * Gets a nested property value from an object
+ */
+export function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined
+export function getFromPath<TValue = unknown, TFallback = TValue>(
+  object: NestedRecord | undefined,
+  path: string,
+  fallback?: TFallback,
+): TValue | TFallback
+export function getFromPath<TValue = unknown, TFallback = TValue>(
+  object: NestedRecord | undefined,
+  path: string,
+  fallback?: TFallback,
+): TValue | TFallback | undefined {
+  if (!object)
+    return fallback
+
+  if (isNotNestedPath(path))
+    return object[cleanupNonNestedPath(path)] as TValue | undefined
+
+  const resolvedValue = (path || '')
+    .split(/\.|\[(\d+)\]/)
+    .filter(Boolean)
+    .reduce((acc, propKey) => {
+      if (isContainerValue(acc) && propKey in acc)
+        return acc[propKey]
+
+      return fallback
+    }, object as unknown)
+
+  return resolvedValue as TValue | undefined
+}

package/src/index.ts

@@ -37,6 +37,7 @@ export * from './components/ui/slider/index'
 export * from './components/ui/skeleton/index'
 export * from './components/ui/scroll-area/index'
 export * from './components/ui/collapsible/index'
+export * from './components/ui/auto-form/index'
 
 export * from './lib/utils'
 export { default as tailwind } from './tailwind-preset'

package/dist/BuiFormDescription.vue_vue_type_script_setup_true_lang-C8R2LDkW.js

@@ -1,19 +0,0 @@
-import { defineComponent as n, useAttrs as c, openBlock as m, createElementBlock as i, mergeProps as a, unref as e, renderSlot as p } from "vue";
-import { e as l } from "./useFormField-BSPc2uBO.js";
-import { c as d } from "./utils-DsnHoeYK.js";
-const f = ["id"], F = /* @__PURE__ */ n({
-  inheritAttrs: !1,
-  __name: "BuiFormDescription",
-  setup(u) {
-    const { formDescriptionId: t } = l(), { class: r, ...s } = c();
-    return (o, _) => (m(), i("p", a({
-      id: e(t),
-      class: e(d)("text-sm text-muted-foreground", e(r) ?? "")
-    }, s), [
-      p(o.$slots, "default")
-    ], 16, f));
-  }
-});
-export {
-  F as _
-};

package/dist/BuiFormMessage.vue_vue_type_script_setup_true_lang-B3zF0X2U.js

@@ -1,17 +0,0 @@
-import { defineComponent as s, openBlock as t, createBlock as n, unref as e, toValue as a } from "vue";
-import { e as m, E as c } from "./useFormField-BSPc2uBO.js";
-const f = /* @__PURE__ */ s({
-  __name: "BuiFormMessage",
-  setup(u) {
-    const { name: o, formMessageId: r } = m();
-    return (i, p) => (t(), n(e(c), {
-      id: e(r),
-      as: "p",
-      name: a(e(o)),
-      class: "text-sm font-medium text-destructive-foreground"
-    }, null, 8, ["id", "name"]));
-  }
-});
-export {
-  f as _
-};