@byyuurin/ui 0.0.8 → 0.0.10

package/dist/runtime/components/DropdownMenuContent.vue

@@ -0,0 +1,188 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { DropdownMenuContentEmits as RekaDropdownMenuContentEmits, DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'reka-ui'
+import type { dropdownMenu } from '../theme'
+import type { ArrayOrNested, ComponentAttrs, DropdownMenuItem, DropdownMenuSlots, NestedItem } from '../types'
+
+type ExtractItem<T extends ArrayOrNested<any>> = Extract<NestedItem<T>, { slot: string }>
+
+export type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<DropdownMenuSlots<T>, 'default'> & {
+  default?: any
+}
+
+export interface DropdownMenuContentEmits extends RekaDropdownMenuContentEmits {}
+
+type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
+
+export interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends ComponentAttrs<typeof dropdownMenu>, Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
+  size?: DropdownMenuVariants['size']
+  items?: T
+  portal?: boolean
+  sub?: boolean
+  labelKey: keyof NestedItem<T>
+  checkedIcon?: string
+  loadingIcon?: string
+  externalIcon?: boolean | string
+}
+</script>
+
+<script setup lang="ts" generic="T extends ArrayOrNested<DropdownMenuItem>">
+import { createReusableTemplate, reactiveOmit } from '@vueuse/core'
+import { useForwardPropsEmits } from 'reka-ui'
+import { DropdownMenu } from 'reka-ui/namespaced'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { get, isArrayOfArray, omit } from '../utils'
+import { pickLinkProps } from '../utils/link'
+import Avatar from './Avatar.vue'
+// eslint-disable-next-line import/no-self-import
+import DropdownMenuContent from './DropdownMenuContent.vue'
+import Kbd from './Kbd.vue'
+import Link from './Link.vue'
+import LinkBase from './LinkBase.vue'
+
+const props = defineProps<DropdownMenuContentProps<T>>()
+const emit = defineEmits<DropdownMenuContentEmits>()
+const slots = defineSlots<DropdownMenuContentSlots<T>>()
+
+const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'loadingIcon', 'externalIcon', 'class', 'ui'), emit)
+// @ts-expect-error pass check
+const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuContentSlots<T>[string]>
+
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>()
+
+const groups = computed(
+  () => props.items?.length
+    ? isArrayOfArray(props.items) ? props.items : [props.items]
+    : [],
+)
+
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('dropdownMenu', props))
+</script>
+
+<template>
+  <DefineItemTemplate v-slot="{ item, active, index }">
+    <slot :name="((item.slot || 'item') as keyof DropdownMenuContentSlots<T>)" :item="(item as ExtractItem<T>)" :index="index">
+      <slot :name="(`${item.slot || 'item'}-leading` as keyof DropdownMenuContentSlots<T>)" :item="(item as ExtractItem<T>)" :active="active" :index="index">
+        <span
+          v-if="item.loading"
+          :class="style.itemLeadingIcon({ class: [loadingIcon || theme.app.icons.loading, props.ui?.itemLeadingIcon], loading: true })"
+        ></span>
+        <span
+          v-else-if="item.icon"
+          :class="style.itemLeadingIcon({ class: [item.icon, props.ui?.itemLeadingIcon], active })"
+        ></span>
+        <Avatar
+          v-else-if="item.avatar"
+          v-bind="item.avatar"
+          :size="item.avatar.size || props.size"
+          :class="style.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar, active })"
+        />
+      </slot>
+
+      <span
+        v-if="get(item, props.labelKey as string) || !!slots[(`${item.slot || 'item'}-label` as keyof DropdownMenuContentSlots<T>)]"
+        :class="style.itemLabel({ class: props.ui?.itemLabel, active })"
+      >
+        <slot :name="(`${item.slot || 'item'}-label` as keyof DropdownMenuContentSlots<T>)" :item="(item as ExtractItem<T>)" :active="active" :index="index">
+          {{ get(item, props.labelKey as string) }}
+        </slot>
+
+        <span
+          v-if="item.target === '_blank' && externalIcon !== false"
+          :class="style.itemLabelExternalIcon({ class: [typeof externalIcon === 'string' ? externalIcon : theme.app.icons.external, props.ui?.itemLabelExternalIcon], active })"
+        ></span>
+      </span>
+
+      <span :class="style.itemTrailing({ class: props.ui?.itemTrailing })">
+        <slot :name="(`${item.slot || 'item'}-trailing` as keyof DropdownMenuContentSlots<T>)" :item="(item as ExtractItem<T>)" :active="active" :index="index">
+          <span v-if="item.children?.length" :class="style.itemTrailingIcon({ class: [theme.app.icons.chevronRight, props.ui?.itemTrailingIcon], active })"></span>
+          <span v-else-if="item.kbds?.length" :class="style.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
+            <Kbd
+              v-for="(kbd, kbdIndex) in item.kbds"
+              :key="kbdIndex"
+              v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
+              :size="props.size"
+            />
+          </span>
+        </slot>
+
+        <DropdownMenu.ItemIndicator as-child>
+          <span :class="style.itemTrailingIcon({ class: [checkedIcon || theme.app.icons.check, props.ui?.itemTrailingIcon] })"></span>
+        </DropdownMenu.ItemIndicator>
+      </span>
+    </slot>
+  </DefineItemTemplate>
+
+  <DropdownMenu.Portal :disabled="!portal">
+    <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
+      <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="style.group({ class: props.ui?.group })">
+        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+          <DropdownMenu.Label v-if="item.type === 'label'" :class="style.label({ class: props.ui?.label })">
+            <ReuseItemTemplate :item="item" :index="index" />
+          </DropdownMenu.Label>
+          <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="style.separator({ class: props.ui?.separator })" />
+          <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+            <DropdownMenu.SubTrigger
+              as="button"
+              type="button"
+              :disabled="item.disabled"
+              :text-value="get(item, props.labelKey as string)"
+              :class="style.item({ class: props.ui?.item })"
+            >
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.SubTrigger>
+
+            <DropdownMenuContent
+              sub
+              :class="props.class"
+              :ui="props.ui"
+              :portal="props.portal"
+              :items="item.children"
+              side="right"
+              align="start"
+              :align-offset="-4"
+              :side-offset="3"
+              :label-key="labelKey"
+              :checked-icon="checkedIcon"
+              :loading-icon="loadingIcon"
+              :external-icon="externalIcon"
+              v-bind="item.content"
+            >
+              <template v-for="(_, name) in proxySlots" #[name]="slotProps">
+                <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotProps"></slot>
+              </template>
+            </DropdownMenuContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.CheckboxItem
+            v-else-if="item.type === 'checkbox'"
+            :model-value="item.checked"
+            :disabled="item.disabled"
+            :text-value="get(item, props.labelKey as string)"
+            :class="style.item({ class: [props.ui?.item, item.class] })"
+            @update:model-value="item.onUpdateChecked"
+            @select="item.onSelect"
+          >
+            <ReuseItemTemplate :item="item" :index="index" />
+          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.Item
+            v-else
+            as-child
+            :disabled="item.disabled"
+            :text-value="get(item, props.labelKey as string)"
+            @select="item.onSelect"
+          >
+            <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
+              <LinkBase v-bind="slotProps" :class="style.item({ class: [props.ui?.item, item.class], active })">
+                <ReuseItemTemplate :item="item" :active="active" :index="index" />
+              </LinkBase>
+            </Link>
+          </DropdownMenu.Item>
+        </template>
+      </DropdownMenu.Group>
+
+      <slot></slot>
+    </component>
+  </DropdownMenu.Portal>
+</template>

package/dist/runtime/components/Form.vue

@@ -0,0 +1,311 @@
+<script lang="ts">
+import type { ComputedRef, DeepReadonly, Ref } from 'vue'
+import type { form } from '../theme'
+import type { ComponentAttrs, FormError, FormErrorEvent, FormErrorWithId, FormEvent, FormInputEvents, FormSchema, FormSubmitEvent, FormValidateOptions } from '../types'
+
+export interface FormEmits<T extends object> {
+  submit: [payload: FormSubmitEvent<T>]
+  error: [payload: FormErrorEvent]
+}
+
+export interface FormSlots {
+  default?: (props?: { errors: FormError[] }) => any
+}
+
+export interface FormExpose<T extends object> {
+  validate: (options?: FormValidateOptions<T>) => Promise<T | false>
+  clear: (path?: string) => void
+  errors: Ref<FormError[]>
+  setErrors: (errors: FormError[], name?: keyof T) => void
+  getErrors: (name?: keyof T) => FormError[]
+  submit: () => Promise<void>
+  disabled: ComputedRef<boolean>
+  dirty: ComputedRef<boolean>
+  dirtyFields: DeepReadonly<Set<keyof T>>
+  touchedFields: DeepReadonly<Set<keyof T>>
+  blurredFields: DeepReadonly<Set<keyof T>>
+}
+
+export interface FormProps<T extends object> extends Omit<ComponentAttrs<typeof form>, 'ui'> {
+  id?: string | number
+  /**  Schema to validate the form state. */
+  schema?: FormSchema<T>
+  /** An object representing the current state of the form. */
+  state: Partial<T>
+  /**
+   * Custom validation function to validate the form state.
+   * @param state - The current state of the form.
+   * @returns A promise that resolves to an array of FormError objects, or an array of FormError objects directly.
+   */
+  validate?: (state: Partial<T>) => Promise<FormError[]> | FormError[]
+  /**
+   * The list of input events that trigger the form validation.
+   * @default ["blur", "change", "input"]
+   */
+  validateOn?: FormInputEvents[]
+  /** Disable all inputs inside the form. */
+  disabled?: boolean
+  /**
+   * Delay in milliseconds before validating the form on input events.
+   * @default 300
+   */
+  validateOnInputDelay?: number
+  /**
+   * If true, schema transformations will be applied to the state on submit.
+   * @default true
+   */
+  transform?: boolean
+  onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>)
+}
+
+export class FormValidationExceptionError extends Error {
+  formId: string | number
+  errors: FormErrorWithId[]
+  children?: FormValidationExceptionError[]
+
+  constructor(formId: string | number, errors: FormErrorWithId[], childErrors?: FormValidationExceptionError[]) {
+    super('Form validation exception')
+    this.name = 'FormValidationExceptionError'
+    this.formId = formId
+    this.errors = errors
+    this.children = childErrors
+    Object.setPrototypeOf(this, FormValidationExceptionError.prototype)
+  }
+}
+</script>
+
+<script setup lang="ts" generic="T extends object">
+import { useEventBus } from '@vueuse/core'
+import { computed, nextTick, onMounted, onUnmounted, readonly, ref, useId } from 'vue'
+import { injectFormBus, provideFormBus, provideFormErrors, provideFormInputs, provideFormLoading, provideFormOptions } from '../app/injections'
+import { useTheme } from '../composables/useTheme'
+import { validateSchema } from '../utils'
+
+const props = withDefaults(defineProps<FormProps<T>>(), {
+  validateOn: () => ['input', 'blur', 'change'],
+  validateOnInputDelay: 300,
+  transform: true,
+})
+
+const emit = defineEmits<FormEmits<T>>()
+defineSlots<FormSlots>()
+
+const formId = props.id ?? useId()
+
+const bus = useEventBus<FormEvent<T>>(`form-${formId}`)
+const parentBus = injectFormBus()
+
+provideFormBus(bus)
+
+const nestedForms = ref<Map<string | number, { validate: typeof validateFn }>>(new Map())
+
+onMounted(() => {
+  bus.on(async (event) => {
+    if (event.type === 'attach') {
+      nestedForms.value.set(event.formId, { validate: event.validate })
+    }
+    else if (event.type === 'detach') {
+      nestedForms.value.delete(event.formId)
+    }
+    else if (props.validateOn?.includes(event.type) && !loading.value) {
+      if (event.type !== 'input')
+        await validateFn({ name: event.name, silent: true, nested: false })
+      else if (event.eager || blurredFields.has(event.name))
+        await validateFn({ name: event.name, silent: true, nested: false })
+    }
+
+    if (event.type === 'blur')
+      blurredFields.add(event.name)
+
+    if (event.type === 'change' || event.type === 'input' || event.type === 'blur' || event.type === 'focus')
+      touchedFields.add(event.name)
+
+    if (event.type === 'change' || event.type === 'input')
+      dirtyFields.add(event.name)
+  })
+})
+
+onUnmounted(() => {
+  bus.reset()
+})
+
+onMounted(async () => {
+  if (parentBus) {
+    await nextTick()
+    parentBus.emit({ type: 'attach', validate: validateFn as FormExpose<T>['validate'], formId })
+  }
+})
+
+onUnmounted(() => {
+  if (parentBus)
+    parentBus.emit({ type: 'detach', formId })
+})
+
+const errors = ref<FormErrorWithId[]>([])
+provideFormErrors(errors)
+
+const inputs = ref<{ [P in keyof T]?: { id?: string, pattern?: RegExp } }>({})
+provideFormInputs(inputs as any)
+
+const dirtyFields = new Set<keyof T>()
+const touchedFields = new Set<keyof T>()
+const blurredFields = new Set<keyof T>()
+
+function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
+  return errs.map((err) => ({
+    ...err,
+    id: err?.name ? inputs.value[err.name]?.id : undefined,
+  }))
+}
+
+const transformedState = ref<T | null>(null)
+
+async function getErrors(): Promise<FormErrorWithId[]> {
+  let errs = props.validate ? (await props.validate(props.state)) ?? [] : []
+
+  if (props.schema) {
+    const { errors, result } = await validateSchema(props.state, props.schema as FormSchema<typeof props.state>)
+
+    if (errors)
+      errs = errs.concat(errors)
+    else
+      transformedState.value = result
+  }
+
+  return resolveErrorIds(errs)
+}
+
+async function validateFn(options: FormValidateOptions<T>): Promise<T | false> {
+  const _options: FormValidateOptions<T> = {
+    silent: false,
+    nested: true,
+    transform: false,
+    ...options,
+  }
+
+  const names = _options.name && !Array.isArray(_options.name) ? [_options.name] : _options.name as (keyof T)[]
+
+  const nestedValidatePromises = !names && _options.nested
+    ? Array.from(nestedForms.value.values()).map(
+        ({ validate }) => validate(_options).then(() => {}).catch((error: Error) => {
+          if (!(error instanceof FormValidationExceptionError))
+            throw error
+
+          return error
+        }),
+      )
+    : []
+
+  if (names) {
+    const otherErrors = errors.value.filter((error) => !names.some((name) => {
+      const pattern = inputs.value?.[name]?.pattern
+      return name === error.name || (pattern && error.name?.match(pattern))
+    }))
+
+    // eslint-disable-next-line unicorn/no-await-expression-member
+    const pathErrors = (await getErrors()).filter((error) => names.some((name) => {
+      const pattern = inputs.value?.[name]?.pattern
+      return name === error.name || (pattern && error.name?.match(pattern))
+    }))
+
+    errors.value = otherErrors.concat(pathErrors)
+  }
+  else {
+    errors.value = await getErrors()
+  }
+
+  // eslint-disable-next-line unicorn/no-await-expression-member
+  const childErrors = (await Promise.all(nestedValidatePromises)).filter((val) => val !== undefined)
+
+  if (errors.value.length + childErrors.length > 0) {
+    if (_options.silent)
+      return false
+
+    throw new FormValidationExceptionError(formId, errors.value, childErrors)
+  }
+
+  if (_options.transform)
+    Object.assign(props.state, transformedState.value)
+
+  return props.state as T
+}
+
+const loading = ref(false)
+provideFormLoading(readonly(loading))
+
+async function onSubmitWrapper(payload: Event) {
+  loading.value = true
+
+  const event = payload as FormSubmitEvent<any>
+
+  try {
+    event.data = await validateFn({ nested: true, transform: props.transform })
+    await props.onSubmit?.(event)
+    dirtyFields.clear()
+  }
+  catch (error) {
+    if (!(error instanceof FormValidationExceptionError))
+      throw error
+
+    const errorEvent: FormErrorEvent = {
+      ...event,
+      errors: error.errors,
+      children: error.children,
+    }
+    emit('error', errorEvent)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const disabled = computed(() => props.disabled || loading.value)
+
+provideFormOptions(computed(() => ({
+  disabled: disabled.value,
+  validateOnInputDelay: props.validateOnInputDelay,
+})))
+
+defineExpose<FormExpose<T>>({
+  validate: validateFn as FormExpose<T>['validate'],
+  errors,
+
+  setErrors(errs: FormError[], name?: keyof T) {
+    errors.value = name
+      ? errors.value
+          .filter((error) => error.name !== name)
+          .concat(resolveErrorIds(errs))
+      : resolveErrorIds(errs)
+  },
+
+  async submit() {
+    await onSubmitWrapper(new Event('submit'))
+  },
+
+  getErrors(name?: keyof T) {
+    if (name)
+      return errors.value.filter((err) => err.name === name)
+
+    return errors.value
+  },
+
+  clear(name?: string) {
+    errors.value = name ? errors.value.filter((err) => err.name !== name) : []
+  },
+
+  disabled,
+  dirty: computed(() => dirtyFields.size > 0),
+  dirtyFields: readonly(dirtyFields) as DeepReadonly<Set<keyof T>>,
+  blurredFields: readonly(blurredFields) as DeepReadonly<Set<keyof T>>,
+  touchedFields: readonly(touchedFields) as DeepReadonly<Set<keyof T>>,
+})
+
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('form', props))
+</script>
+
+<template>
+  <component :is="parentBus ? 'div' : 'form'" :id="formId" :class="style" @submit.prevent="onSubmitWrapper">
+    <slot :errors="errors"></slot>
+  </component>
+</template>

package/dist/runtime/components/FormItem.vue

@@ -0,0 +1,129 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { formItem } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface FormFieldSlots {
+  label?: (props: { label?: string }) => any
+  hint?: (props: { hint?: string }) => any
+  description?: (props: { description?: string }) => any
+  help?: (props: { help?: string }) => any
+  error?: (props: { error?: string | boolean }) => any
+  default?: (props: { error?: string | boolean }) => any
+}
+
+type FormItemVariants = VariantProps<typeof formItem>
+
+export interface FormItemProps extends ComponentAttrs<typeof formItem> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
+  /** The name of the FormItem. Also used to match form errors. */
+  name?: string
+  /** A regular expression to match form error names. */
+  errorPattern?: RegExp
+  label?: string
+  description?: string
+  help?: string
+  error?: string | boolean
+  hint?: string
+  /**
+   * @default 'md'
+   */
+  size?: FormItemVariants['size']
+  required?: boolean
+  /** If true, validation on input will be active immediately instead of waiting for a blur event. */
+  eagerValidation?: boolean
+  /**
+   * Delay in milliseconds before validating the form on input events.
+   * @default 300
+   */
+  validateOnInputDelay?: number
+}
+</script>
+
+<script setup lang="ts">
+import { Label, Primitive } from 'reka-ui'
+import { computed, ref, useId } from 'vue'
+import { injectFormErrors, provideFormInputId, provideFormItem } from '../app/injections'
+import { useTheme } from '../composables/useTheme'
+
+const props = defineProps<FormItemProps>()
+const slots = defineSlots<FormFieldSlots>()
+
+const id = ref(useId())
+// Copies id's initial value to bind aria-attributes such as aria-describedby.
+// This is required for the RadioGroup component which unsets the id value.
+const ariaId = id.value
+provideFormInputId(id)
+
+const formErrors = injectFormErrors()
+const error = computed(() => {
+  if (props.error)
+    return props.error
+
+  const formError = formErrors?.value.find((error) => {
+    if (error.name && error.name === props.name)
+      return true
+
+    if (error.name && props.errorPattern)
+      return error.name.match(props.errorPattern)
+
+    return false
+  })
+
+  return formError?.message
+})
+
+provideFormItem(computed(() => ({
+  ...props,
+  error: error.value,
+  ariaId,
+})))
+
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('formItem', props))
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <div :class="style.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="props.label || slots.label" :class="style.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" :class="style.label({ class: props.ui?.label })">
+          <slot name="label" :label="props.label">
+            {{ props.label }}
+          </slot>
+        </Label>
+        <span v-if="props.hint || slots.hint" :id="`${ariaId}-hint`" :class="style.hint({ class: props.ui?.hint })">
+          <slot name="hint" :hint="props.hint">
+            {{ props.hint }}
+          </slot>
+        </span>
+      </div>
+
+      <p v-if="props.description || slots.description" :id="`${ariaId}-description`" :class="style.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+
+    <div :class="(props.label || slots.label || props.description || slots.description) && style.container({ class: props.ui?.container })">
+      <slot :error="error"></slot>
+
+      <p v-if="(typeof error === 'string' && error) || slots.error" :id="`${ariaId}-error`" :class="style.error({ class: props.ui?.error })">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </p>
+      <p v-else :class="style.help({ class: props.ui?.help })">
+        <slot name="help" :help="props.help">
+          {{ help }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
+</template>