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

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

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

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

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

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

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

@@ -1,81 +0,0 @@
-<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/BuiAutoFormFieldObjectCard.vue

@@ -1,76 +0,0 @@
-<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 { BuiCard, BuiCardContent, BuiCardHeader, BuiCardTitle } from '@/components/ui/card'
-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">
-      <BuiCard as-child class="w-full border-0 shadow-none">
-        <FormItem>
-          <BuiCardHeader class="border-b-[1px] border-b-border/[0.16] 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 pb-0 pr-0">
-            <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>
-          </BuiCardContent>
-        </FormItem>
-      </BuiCard>
-    </slot>
-  </section>
-</template>

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

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

@@ -1,41 +0,0 @@
-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'
-import BuiAutoFormFieldObjectCard from './BuiAutoFormFieldObjectCard.vue'
-import BuiAutoFormFieldArrayCard from './BuiAutoFormFieldArrayCard.vue'
-
-export const INPUT_COMPONENTS = {
-  date: BuiAutoFormFieldDate,
-  select: BuiAutoFormFieldEnum,
-  radio: BuiAutoFormFieldEnum,
-  checkbox: BuiAutoFormFieldBoolean,
-  switch: BuiAutoFormFieldBoolean,
-  textarea: BuiAutoFormFieldInput,
-  number: BuiAutoFormFieldNumber,
-  string: BuiAutoFormFieldInput,
-  file: BuiAutoFormFieldFile,
-  array: BuiAutoFormFieldArrayCard,
-  object: BuiAutoFormFieldObjectCard
-}
-
-/**
- * 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

@@ -1,95 +0,0 @@
-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/avatar/BuiAvatar.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { AvatarRoot } from 'radix-vue'
-import { avatarVariant } from '.'
-import { cn } from '@/lib/utils'
-
-interface Props {
-  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']
-  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'sm',
-  shape: 'circle',
-})
-</script>
-
-<template>
-  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
-    <slot />
-  </AvatarRoot>
-</template>

package/src/components/ui/avatar/BuiAvatarFallback.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
-
-const props = defineProps<AvatarFallbackProps>()
-</script>
-
-<template>
-  <AvatarFallback v-bind="props">
-    <slot />
-  </AvatarFallback>
-</template>

package/src/components/ui/avatar/BuiAvatarImage.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue'
-
-const props = defineProps<AvatarImageProps>()
-</script>
-
-<template>
-  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
-</template>

package/src/components/ui/badge/BuiBadge.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
-import { badgeVariants } from '.'
-import { cn } from '@/lib/utils'
-import BuiButton from '@/components/ui/button/BuiButton.vue'
-import { XIcon } from 'lucide-vue-next'
-
-interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
-
-interface Props {
-  variant?: BadgeVariantProps['variant']
-  dismissable?: boolean
-}
-withDefaults(defineProps<Props>(), {
-  dismissable: false
-})
-
-const emit = defineEmits<{ (e: 'close'): void }>()
-</script>
-
-<template>
-  <div :class="cn(badgeVariants({ variant }))">
-    <div class="grow truncate">
-      <slot />
-    </div>
-    <BuiButton
-      variant="none"
-      size="icon"
-      class="focus-visible:ring-offset-0"
-      v-if="dismissable"
-      @click.stop="emit('close')"
-    >
-      <XIcon class="h-3 w-3" />
-    </BuiButton>
-  </div>
-</template>

package/src/components/ui/badge/index.ts

@@ -1,18 +0,0 @@
-import { cva } from 'class-variance-authority'
-
-export { default as BuiBadge } from './BuiBadge.vue'
-
-export const badgeVariants = cva(
-  'px-2 py-0.5 inline-flex items-center rounded-full font-normal transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-[13px] leading-5 gap-1',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary/[0.08] text-foreground hover:bg-primary/[0.16] dark:bg-primary/30 dark:hover:bg-primary/65'
-      }
-    },
-    defaultVariants: {
-      variant: 'default'
-    }
-  }
-)