fulldev-ui 0.7.0-beta.9 → 0.9.0

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

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/components/ui/form'
-import { Input } from '@/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

@@ -1,90 +0,0 @@
-<script setup lang="ts" generic="T extends ZodRawShape">
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
-import { FormItem } from '@/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

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { 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,40 +0,0 @@
-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

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

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

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

@@ -1,95 +0,0 @@
-import type { Component, InputHTMLAttributes } from 'vue'
-import type { z, ZodAny } 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 InputComponents {
-  date: Component;
-  select: Component;
-  radio: Component;
-  checkbox: Component;
-  switch: Component;
-  textarea: Component;
-  number: Component;
-  string: Component;
-  file: Component;
-  array: Component;
-  object: Component;
-}
-
-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

@@ -1,188 +0,0 @@
-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
-}
-
-type Booleanish = boolean | 'true' | 'false'
-
-export function booleanishToBoolean(value: Booleanish) {
-  switch (value) {
-    case 'true':
-    case true:
-      return true;
-    case 'false':
-    case false:
-      return false;
-  }
-}
-
-export function maybeBooleanishToBoolean(value?: Booleanish) {
-  return value ? booleanishToBoolean(value) : undefined
-}

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

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

package/src/components/ui/avatar/AvatarFallback.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/AvatarImage.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/Badge.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import type { HTMLAttributes } from 'vue'
-import { type BadgeVariants, badgeVariants } from '.'
-
-const props = defineProps<{
-  variant?: BadgeVariants['variant']
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn(badgeVariants({ variant }), props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/button/Button.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { type ButtonVariants, buttonVariants } from '.'
-
-interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
-})
-</script>
-
-<template>
-  <Primitive
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>