@nuxt/ui 2.18.4 → 3.0.0-alpha.0

package/dist/runtime/components/DropdownMenuContent.vue

@@ -0,0 +1,111 @@
+<script>
+import { tv } from "tailwind-variants";
+import theme from "#build/ui/dropdown-menu";
+const dropdownMenu = tv(theme)();
+</script>
+
+<script setup lang="ts" generic="T extends DropdownMenuItem">
+import { computed } from 'vue'
+import { DropdownMenu } from 'radix-vue/namespaced'
+import { useForwardPropsEmits } from 'radix-vue'
+import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import ULinkBase from './LinkBase.vue'
+import ULink from './Link.vue'
+import UAvatar from './Avatar.vue'
+import UIcon from './Icon.vue'
+import UKbd from './Kbd.vue'
+import { omit } from '../utils'
+import { pickLinkProps } from '../utils/link'
+
+const props = defineProps<DropdownMenuContentProps<T>>()
+const emits = defineEmits<DropdownMenuContentEmits>()
+const slots = defineSlots<DropdownMenuContentSlots<T>>()
+
+const appConfig = useAppConfig()
+const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'class', 'ui'), emits)
+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 ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as T[][] : [])
+</script>
+
+<template>
+  <DefineItemTemplate v-slot="{ item, active, index }">
+    <slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
+      <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="(item as T)" :active="active" :index="index">
+        <UAvatar v-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, active })" />
+      </slot>
+
+      <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
+        <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="(item as T)" :active="active" :index="index">
+          {{ item.label }}
+        </slot>
+
+        <UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, active })" />
+      </span>
+
+      <span v-if="item.children?.length || item.kbds?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
+        <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="(item as T)" :active="active" :index="index">
+          <UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, active })" />
+          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })">
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          </span>
+        </slot>
+      </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="ui.group({ class: uiOverride?.group })">
+        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+          <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: uiOverride?.label })">
+            <ReuseItemTemplate :item="item" :index="index" />
+          </DropdownMenu.Label>
+          <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: uiOverride?.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="item.label"
+              :class="ui.item({ class: uiOverride?.item })"
+            >
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.SubTrigger>
+
+            <UDropdownMenuContent
+              sub
+              :class="props.class"
+              :ui="ui"
+              :ui-override="uiOverride"
+              :portal="portal"
+              :items="item.children"
+              side="right"
+              align="start"
+              :align-offset="-4"
+              :side-offset="3"
+              v-bind="item.content"
+            >
+              <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+                <slot :name="name" v-bind="slotData" />
+              </template>
+            </UDropdownMenuContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.Item v-else as-child :disabled="item.disabled" :text-value="item.label" @select="item.select">
+            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
+              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.class], active })">
+                <ReuseItemTemplate :item="item" :active="active" :index="index" />
+              </ULinkBase>
+            </ULink>
+          </DropdownMenu.Item>
+        </template>
+      </DropdownMenu.Group>
+
+      <slot />
+    </component>
+  </DropdownMenu.Portal>
+</template>

package/dist/runtime/components/Form.vue

@@ -0,0 +1,206 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/form";
+const appConfig = _appConfig;
+const form = tv({ extend: tv(theme), ...appConfig.ui?.form || {} });
+</script>
+
+<script lang="ts" setup generic="T extends object">
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId } from 'vue'
+import { useEventBus } from '@vueuse/core'
+import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey } from '../composables/useFormField'
+import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
+import { FormValidationException } from '../types/form'
+
+const props = withDefaults(defineProps<FormProps<T>>(), {
+  validateOn() {
+    return ['input', 'blur', 'change'] as FormInputEvents[]
+  },
+  validateOnInputDelay: 300
+})
+const emits = defineEmits<FormEmits<T>>()
+defineSlots<FormSlots>()
+
+const formId = props.id ?? useId()
+
+const bus = useEventBus<FormEvent>(`form-${formId}`)
+const parentBus = inject(
+  formBusInjectionKey,
+  undefined
+)
+provide(formBusInjectionKey, bus)
+
+const nestedForms = ref<Map<string | number, { validate: () => any }>>(new Map())
+
+onMounted(async () => {
+  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 as FormInputEvents)) {
+      await _validate({ name: event.name, silent: true, nested: false })
+    }
+  })
+})
+
+onUnmounted(() => {
+  bus.reset()
+})
+
+onMounted(async () => {
+  if (parentBus) {
+    await nextTick()
+    parentBus.emit({ type: 'attach', validate: _validate, formId })
+  }
+})
+
+onUnmounted(() => {
+  if (parentBus) {
+    parentBus.emit({ type: 'detach', formId })
+  }
+})
+
+provide(formOptionsInjectionKey, computed(() => ({
+  disabled: props.disabled,
+  validateOnInputDelay: props.validateOnInputDelay
+})))
+
+const errors = ref<FormErrorWithId[]>([])
+provide('form-errors', errors)
+
+const inputs = ref<Record<string, string>>({})
+provide(formInputsInjectionKey, inputs)
+
+function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
+  return errs.map(err => ({
+    ...err,
+    id: inputs.value[err.name]
+  }))
+}
+
+async function getErrors(): Promise<FormErrorWithId[]> {
+  let errs = props.validate ? (await props.validate(props.state)) ?? [] : []
+
+  if (props.schema) {
+    if (isZodSchema(props.schema)) {
+      errs = errs.concat(await getZodErrors(props.state, props.schema))
+    } else if (isYupSchema(props.schema)) {
+      errs = errs.concat(await getYupErrors(props.state, props.schema))
+    } else if (isJoiSchema(props.schema)) {
+      errs = errs.concat(await getJoiErrors(props.state, props.schema))
+    } else if (isValibotSchema(props.schema)) {
+      errs = errs.concat(await getValibotError(props.state, props.schema))
+    } else {
+      throw new Error('Form validation failed: Unsupported form schema')
+    }
+  }
+
+  return resolveErrorIds(errs)
+}
+
+async function _validate(opts: { name?: string | string[], silent?: boolean, nested?: boolean } = { silent: false, nested: true }): Promise<T | false> {
+  const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name
+
+  const nestedValidatePromises = !names && opts.nested
+    ? Array.from(nestedForms.value.values()).map(
+      ({ validate }) => validate().then(() => undefined).catch((error: Error) => {
+        if (!(error instanceof FormValidationException)) {
+          throw error
+        }
+        return error
+      })
+    )
+    : []
+
+  if (names) {
+    const otherErrors = errors.value.filter(error => !names!.includes(error.name))
+    const pathErrors = (await getErrors()).filter(error => names!.includes(error.name)
+    )
+    errors.value = otherErrors.concat(pathErrors)
+  } else {
+    errors.value = await getErrors()
+  }
+
+  const childErrors = nestedValidatePromises ? await Promise.all(nestedValidatePromises) : []
+  if (errors.value.length + childErrors.length > 0) {
+    if (opts.silent) return false
+    throw new FormValidationException(formId, errors.value, childErrors)
+  }
+
+  return props.state as T
+}
+
+async function onSubmit(payload: Event) {
+  const event = payload as SubmitEvent
+
+  try {
+    await _validate({ nested: true })
+    const submitEvent: FormSubmitEvent<any> = {
+      ...event,
+      data: props.state
+    }
+    emits('submit', submitEvent)
+  } catch (error) {
+    if (!(error instanceof FormValidationException)) {
+      throw error
+    }
+
+    const errorEvent: FormErrorEvent = {
+      ...event,
+      errors: error.errors,
+      childrens: error.childrens
+    }
+
+    emits('error', errorEvent)
+  }
+}
+
+defineExpose<Form<T>>({
+  validate: _validate,
+  errors,
+
+  setErrors(errs: FormError[], name?: string) {
+    if (name) {
+      errors.value = errors.value
+        .filter(error => error.name !== name)
+        .concat(resolveErrorIds(errs))
+    } else {
+      errors.value = resolveErrorIds(errs)
+    }
+  },
+
+  async submit() {
+    await onSubmit(new Event('submit'))
+  },
+
+  getErrors(name?: string) {
+    if (name) {
+      return errors.value.filter(err => err.name === name)
+    }
+    return errors.value
+  },
+
+  clear(name?: string) {
+    if (name) {
+      errors.value = errors.value.filter(err => err.name !== name)
+    } else {
+      errors.value = []
+    }
+  },
+
+  disabled: computed(() => props.disabled)
+})
+</script>
+
+<template>
+  <component
+    :is="parentBus ? 'div' : 'form'"
+    :id="formId"
+    :class="form({ class: props.class })"
+    @submit.prevent="onSubmit"
+  >
+    <slot />
+  </component>
+</template>

package/dist/runtime/components/Form.vue.d.ts

@@ -0,0 +1,39 @@
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form } from '../types/form.js';
+export interface FormProps<T extends object> {
+    id?: string | number;
+    schema?: FormSchema<T>;
+    state: Partial<T>;
+    validate?: (state: Partial<T>) => Promise<FormError[]>;
+    validateOn?: FormInputEvents[];
+    disabled?: boolean;
+    validateOnInputDelay?: number;
+    class?: any;
+}
+export interface FormEmits<T extends object> {
+    (e: 'submit', payload: FormSubmitEvent<T>): void;
+    (e: 'error', payload: FormErrorEvent): void;
+}
+export interface FormSlots {
+    default(props?: {}): any;
+}
+declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onError?: ((payload: FormErrorEvent) => any) | undefined;
+        readonly onSubmit?: ((payload: FormSubmitEvent<T>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<{}> & Readonly<{
+        onError?: ((payload: FormErrorEvent) => any) | undefined;
+        onSubmit?: ((payload: FormSubmitEvent<T>) => any) | undefined;
+    }>, never>, "onSubmit" | "onError"> & FormProps<T>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<Form<T>>): void;
+    attrs: any;
+    slots: Readonly<FormSlots> & FormSlots;
+    emit: FormEmits<T>;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/FormField.vue

@@ -0,0 +1,82 @@
+<script>
+import { tv } from "tailwind-variants";
+import _appConfig from "#build/app.config";
+import theme from "#build/ui/form-field";
+const appConfig = _appConfig;
+const formField = tv({ extend: tv(theme), ...appConfig.ui?.formField || {} });
+</script>
+
+<script setup lang="ts">
+import { computed, ref, inject, provide, type Ref, useId } from 'vue'
+import { Label } from 'radix-vue'
+import { formFieldInjectionKey } from '../composables/useFormField'
+import type { FormError } from '../types/form'
+
+const props = defineProps<FormFieldProps>()
+const slots = defineSlots<FormFieldSlots>()
+
+const ui = computed(() => formField({
+  size: props.size,
+  required: props.required
+}))
+
+const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
+
+const error = computed(() => {
+  return (props.error && typeof props.error === 'string')
+    || typeof props.error === 'boolean'
+    ? props.error
+    : formErrors?.value?.find(error => error.name === props.name)?.message
+})
+
+const id = ref(useId())
+
+provide(formFieldInjectionKey, computed(() => ({
+  id: id.value,
+  error: error.value,
+  name: props.name,
+  size: props.size,
+  eagerValidation: props.eagerValidation,
+  validateOnInputDelay: props.validateOnInputDelay
+})))
+</script>
+
+<template>
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
+        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
+          <slot name="label" :label="label">
+            {{ label }}
+          </slot>
+        </Label>
+        <span v-if="hint || !!slots.hint" :class="ui.hint({ class: props.ui?.hint })">
+          <slot name="hint" :hint="hint">
+            {{ hint }}
+          </slot>
+        </span>
+      </div>
+
+      <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+
+    <div :class="[label && ui.container({ class: props.ui?.container })]">
+      <slot :error="error" />
+
+      <p v-if="(typeof error === 'string' && error) || !!slots.error" :class="ui.error({ class: props.ui?.error })">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </p>
+      <p v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+        <slot name="help" :help="help">
+          {{ help }}
+        </slot>
+      </p>
+    </div>
+  </div>
+</template>