@soft-stech/bootsman-ui-shadcn 2.0.0 → 2.0.2

package/dist/components/auto-form/interface.d.ts

@@ -1,54 +0,0 @@
-import { Component, InputHTMLAttributes } from 'vue';
-import { ZodAny, z } from 'zod';
-import { 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;
-}
-type UnwrapArray<T> = T extends (infer U)[] ? U : never;
-export type Config<SchemaType extends object> = {
-    [Key in keyof SchemaType]?: SchemaType[Key] extends any[] ? UnwrapArray<Config<SchemaType[Key]>> : SchemaType[Key] extends object ? Config<SchemaType[Key]> : ConfigItem;
-};
-export declare enum DependencyType {
-    DISABLES = 0,
-    REQUIRES = 1,
-    HIDES = 2,
-    SETS_OPTIONS = 3
-}
-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;
-    options: EnumValues;
-};
-export type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> = ValueDependency<SchemaType> | OptionsDependency<SchemaType>;
-export {};

package/dist/components/auto-form/interface.js

@@ -1,4 +0,0 @@
-var E = /* @__PURE__ */ ((S) => (S[S.DISABLES = 0] = "DISABLES", S[S.REQUIRES = 1] = "REQUIRES", S[S.HIDES = 2] = "HIDES", S[S.SETS_OPTIONS = 3] = "SETS_OPTIONS", S))(E || {});
-export {
-  E as DependencyType
-};

package/dist/components/auto-form/utils.d.ts

@@ -1,45 +0,0 @@
-import { z } from 'zod';
-export type ZodObjectOrWrapped = z.ZodObject<any, any> | z.ZodEffects<z.ZodObject<any, any>>;
-/**
- * Beautify a camelCase string.
- * e.g. "myString" -> "My String"
- */
-export declare function beautifyObjectName(string: string): string;
-/**
- * Parse string and extract the index
- * @param string
- * @returns index or undefined
- */
-export declare function getIndexIfArray(string: string): number | undefined;
-/**
- * Get the lowest level Zod type.
- * This will unpack optionals, refinements, etc.
- */
-export declare function getBaseSchema<ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null;
-/**
- * Get the type name of the lowest level Zod type.
- * This will unpack optionals, refinements, etc.
- */
-export declare function getBaseType(schema: z.ZodAny): "" | z.ZodFirstPartyTypeKind.ZodAny;
-/**
- * Search for a "ZodDefault" in the Zod stack and return its value.
- */
-export declare function getDefaultValueInZodStack(schema: z.ZodAny): any;
-export declare function getObjectFormSchema(schema: ZodObjectOrWrapped): z.ZodObject<any, any>;
-/**
- * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax
- */
-export declare function normalizeFormPath(path: string): string;
-type NestedRecord = Record<string, unknown> | {
-    [k: string]: NestedRecord;
-};
-/**
- * Checks if the path opted out of nested fields using `[fieldName]` syntax
- */
-export declare function isNotNestedPath(path: string): boolean;
-/**
- * Gets a nested property value from an object
- */
-export declare function getFromPath<TValue = unknown>(object: NestedRecord | undefined, path: string): TValue | undefined;
-export declare function getFromPath<TValue = unknown, TFallback = TValue>(object: NestedRecord | undefined, path: string, fallback?: TFallback): TValue | TFallback;
-export {};

package/dist/components/auto-form/utils.js

@@ -1,74 +0,0 @@
-function y(e) {
-  let t = e.replace(/\[\d+\]/g, "").replace(/([A-Z])/g, " $1");
-  return t = t.charAt(0).toUpperCase() + t.slice(1), t;
-}
-function m(e) {
-  const t = /\[(\d+)\]/, n = e.match(t);
-  return n ? Number.parseInt(n[1]) : void 0;
-}
-function i(e) {
-  return e ? "innerType" in e._def ? i(e._def.innerType) : "schema" in e._def ? i(e._def.schema) : e : null;
-}
-function g(e) {
-  const t = i(e);
-  return t ? t._def.typeName : "";
-}
-function o(e) {
-  const t = e;
-  if (t._def.typeName === "ZodDefault")
-    return t._def.defaultValue();
-  if ("innerType" in t._def)
-    return o(
-      t._def.innerType
-    );
-  if ("schema" in t._def)
-    return o(
-      t._def.schema
-    );
-}
-function d(e) {
-  return e?._def.typeName === "ZodEffects" ? d(e._def.schema) : e;
-}
-function c(e) {
-  return Number(e) >= 0;
-}
-function _(e) {
-  const t = e.split(".");
-  if (!t.length)
-    return "";
-  let n = String(t[0]);
-  for (let r = 1; r < t.length; r++) {
-    if (c(t[r])) {
-      n += `[${t[r]}]`;
-      continue;
-    }
-    n += `.${t[r]}`;
-  }
-  return n;
-}
-function a(e) {
-  return /^\[.+\]$/.test(e);
-}
-function l(e) {
-  return e !== null && !!e && typeof e == "object" && !Array.isArray(e);
-}
-function s(e) {
-  return l(e) || Array.isArray(e);
-}
-function p(e) {
-  return a(e) ? e.replace(/\[|\]/g, "") : e;
-}
-function h(e, t, n) {
-  return e ? a(t) ? e[p(t)] : (t || "").split(/\.|\[(\d+)\]/).filter(Boolean).reduce((u, f) => s(u) && f in u ? u[f] : n, e) : n;
-}
-export {
-  y as beautifyObjectName,
-  i as getBaseSchema,
-  g as getBaseType,
-  o as getDefaultValueInZodStack,
-  h as getFromPath,
-  m as getIndexIfArray,
-  d as getObjectFormSchema,
-  a as isNotNestedPath,
-  _ as normalizeFormPath
-};

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

@@ -1,109 +0,0 @@
-<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/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" class="flex flex-col gap-5">
-    <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/auto-form/BuiAutoFormField.vue

@@ -1,45 +0,0 @@
-<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/auto-form/BuiAutoFormFieldArray.vue

@@ -1,105 +0,0 @@
-<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/accordion'
-import { BuiButton as Button } from '@/components/button'
-import { BuiSeparator as Separator } from '@/components/separator'
-import { BuiFormItem as FormItem, BuiFormMessage as FormMessage } from '@/components/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/auto-form/BuiAutoFormFieldArrayCard.vue

@@ -1,97 +0,0 @@
-<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 { BuiButton as Button } from '@/components/button'
-import { BuiSeparator as Separator } from '@/components/separator'
-import { BuiFormItem as FormItem, BuiFormMessage as FormMessage } from '@/components/form'
-import { BuiCard, BuiCardContent, BuiCardHeader, BuiCardTitle } from '@/components/card'
-
-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">
-      <BuiCard as-child class="w-full border-0 shadow-none">
-        <FormItem>
-          <BuiCardHeader class="border-b-border/16 border-b py-1">
-            <BuiCardTitle class="py-0 text-base">
-              {{
-                schema?.description ||
-                beautifyObjectName(fieldName.split('.')[fieldName.split('.').length - 1])
-              }}
-            </BuiCardTitle>
-          </BuiCardHeader>
-          <BuiCardContent class="flex flex-col gap-5 pr-0 pb-0">
-            <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" />
-            </Button>
-            <FormMessage />
-          </BuiCardContent>
-        </FormItem>
-      </BuiCard>
-    </slot>
-  </FieldArray>
-</template>

package/src/components/auto-form/BuiAutoFormFieldBoolean.vue

@@ -1,47 +0,0 @@
-<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/form'
-import { BuiSwitch as Switch } from '@/components/switch'
-import { BuiCheckbox as Checkbox } from '@/components/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/auto-form/BuiAutoFormFieldDate.vue

@@ -1,73 +0,0 @@
-<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/form'
-
-import { BuiCalendar as Calendar } from '@/components/calendar'
-import { BuiButton as Button } from '@/components/button'
-import {
-  BuiPopover as Popover,
-  BuiPopoverContent as PopoverContent,
-  BuiPopoverTrigger as PopoverTrigger
-} from '@/components/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>