@nuxt/ui 3.3.2 → 4.0.0-alpha.0

package/dist/runtime/components/AuthForm.vue

@@ -0,0 +1,214 @@
+<script>
+import theme from "#build/ui/auth-form";
+</script>
+
+<script setup>
+import { reactive, ref, computed, useTemplateRef } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { omit } from "../utils";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+import UIcon from "./Icon.vue";
+import USeparator from "./Separator.vue";
+import UForm from "./Form.vue";
+import UFormField from "./FormField.vue";
+import UCheckbox from "./Checkbox.vue";
+import USelectMenu from "./SelectMenu.vue";
+import UInput from "./Input.vue";
+import UPinInput from "./PinInput.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  icon: { type: String, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  fields: { type: Array, required: false },
+  providers: { type: Array, required: false },
+  separator: { type: [String, Object], required: false, default: "or" },
+  submit: { type: Object, required: false },
+  schema: { type: null, required: false },
+  validate: { type: Function, required: false },
+  validateOn: { type: Array, required: false },
+  validateOnInputDelay: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  onSubmit: { type: Function, required: false },
+  ui: { type: null, required: false }
+});
+const state = reactive((props.fields || []).reduce((acc, field) => {
+  if (field.name) {
+    acc[field.name] = field.defaultValue;
+  }
+  return acc;
+}, {}));
+defineEmits(["submit"]);
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const formRef = useTemplateRef("formRef");
+const passwordVisibility = ref(false);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.authForm || {} })());
+defineExpose({
+  formRef,
+  state
+});
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="icon || !!slots.icon || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header">
+        <div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+          <slot name="leading">
+            <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          </slot>
+        </div>
+
+        <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+
+        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </div>
+      </slot>
+    </div>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <div v-if="providers?.length || !!slots.providers" :class="ui.providers({ class: props.ui?.providers })">
+        <slot name="providers">
+          <UButton
+            v-for="(provider, index) in providers"
+            :key="index"
+            block
+            color="neutral"
+            variant="subtle"
+            v-bind="provider"
+          />
+        </slot>
+      </div>
+
+      <USeparator
+        v-if="providers?.length && fields?.length"
+        v-bind="typeof separator === 'object' ? separator : { label: separator }"
+        :class="ui.separator({ class: props.ui?.separator })"
+      />
+
+      <UForm
+        v-if="fields?.length"
+        ref="formRef"
+        :state="state"
+        :schema="schema"
+        :validate="validate"
+        :validate-on="validateOn"
+        :class="ui.form({ class: props.ui?.form })"
+        :disabled="disabled"
+        :loading-auto="loadingAuto"
+        @submit="onSubmit"
+      >
+        <UFormField
+          v-for="field in fields"
+          :key="field.name"
+          :label="field.type === 'checkbox' ? '' : field.label ?? ''"
+          :description="field.description"
+          :help="field.help"
+          :hint="field.hint"
+          :name="field.name"
+          :size="field.size"
+          :required="field.required"
+          :error="field.error"
+        >
+          <slot :name="`${field.name}-field`" v-bind="{ state, field }">
+            <UCheckbox
+              v-if="field.type === 'checkbox'"
+              v-model="state[field.name]"
+              :class="ui.checkbox({ class: props.ui?.checkbox })"
+              v-bind="omit(field, ['description', 'help', 'hint', 'size'])"
+            />
+            <USelectMenu
+              v-else-if="field.type === 'select'"
+              v-model="state[field.name]"
+              :class="ui.select({ class: props.ui?.select })"
+              v-bind="omit(field, ['description', 'help', 'hint', 'size'])"
+            />
+            <UInput
+              v-else-if="field.type === 'password'"
+              v-model="state[field.name]"
+              :class="ui.password({ class: props.ui?.password })"
+              :type="passwordVisibility ? 'text' : 'password'"
+              v-bind="omit(field, ['label', 'description', 'help', 'hint', 'size', 'type', 'required', 'defaultValue'])"
+              :ui="{ root: 'w-full' }"
+            >
+              <template #trailing>
+                <UButton
+                  color="neutral"
+                  variant="link"
+                  size="sm"
+                  :icon="passwordVisibility ? appConfig.ui.icons.eyeOff : appConfig.ui.icons.eye"
+                  :aria-label="passwordVisibility ? t('authForm.hidePassword') : t('authForm.showPassword')"
+                  :aria-pressed="passwordVisibility"
+                  aria-controls="password"
+                  @click="passwordVisibility = !passwordVisibility"
+                />
+              </template>
+            </UInput>
+            <UPinInput
+              v-else-if="field.type === 'otp'"
+              :id="field.name"
+              v-model="state[field.name]"
+              :class="ui.otp({ class: props.ui?.otp })"
+              otp
+              v-bind="field.otp"
+            />
+            <UInput
+              v-else
+              v-model="state[field.name]"
+              :class="ui.input({ class: props.ui?.input })"
+              v-bind="omit(field, ['label', 'description', 'help', 'hint', 'size', 'required', 'defaultValue'])"
+            />
+          </slot>
+
+          <template v-if="!!slots[`${field.name}-label`]" #label>
+            <slot :name="`${field.name}-label`" />
+          </template>
+          <template v-if="!!slots[`${field.name}-description`]" #description>
+            <slot :name="`${field.name}-description`" />
+          </template>
+          <template v-if="!!slots[`${field.name}-hint`]" #hint>
+            <slot :name="`${field.name}-hint`" />
+          </template>
+          <template v-if="!!slots[`${field.name}-help`]" #help>
+            <slot :name="`${field.name}-help`" />
+          </template>
+          <template v-if="!!slots[`${field.name}-error`]" #error>
+            <slot :name="`${field.name}-error`" />
+          </template>
+        </UFormField>
+
+        <slot v-if="!!slots.validation" name="validation" />
+
+        <slot name="submit" :loading="loading">
+          <UButton
+            type="submit"
+            :label="t('authForm.submit')"
+            block
+            :loading="loading"
+            :loading-auto="loadingAuto"
+            v-bind="submit"
+          />
+        </slot>
+      </UForm>
+    </div>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,90 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/auth-form';
+import type { ButtonProps, FormProps, FormFieldProps, SeparatorProps, PinInputProps } from '../types';
+import type { FormSchema, FormSubmitEvent, InferInput } from '../types/form';
+import type { ComponentConfig } from '../types/tv';
+type AuthForm = ComponentConfig<typeof theme, AppConfig, 'authForm'>;
+type AuthFormField = FormFieldProps & {
+    name: string;
+    type?: 'checkbox' | 'select' | 'password' | 'text' | 'otp' | 'email';
+    defaultValue?: any;
+    otp?: PinInputProps;
+};
+export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed above the title.
+     * @IconifyIcon
+     */
+    icon?: string;
+    title?: string;
+    description?: string;
+    fields?: F[];
+    /**
+     * Display a list of Button under the description.
+     * `{ color: 'neutral', variant: 'subtle', block: true }`{lang="ts-type"}
+     */
+    providers?: ButtonProps[];
+    /**
+     * The text displayed in the separator.
+     * @defaultValue 'or'
+     */
+    separator?: string | SeparatorProps;
+    /**
+     * Display a submit button at the bottom of the form.
+     * `{ label: 'Continue', block: true }`{lang="ts-type"}
+     */
+    submit?: ButtonProps;
+    schema?: T;
+    validate?: FormProps<T>['validate'];
+    validateOn?: FormProps<T>['validateOn'];
+    validateOnInputDelay?: FormProps<T>['validateOnInputDelay'];
+    disabled?: FormProps<T>['disabled'];
+    loading?: ButtonProps['loading'];
+    loadingAuto?: FormProps<T>['loadingAuto'];
+    class?: any;
+    onSubmit?: FormProps<T>['onSubmit'];
+    ui?: AuthForm['slots'];
+}
+export type AuthFormEmits<T extends object> = {
+    submit: [payload: FormSubmitEvent<T>];
+};
+type DynamicFieldSlots<T, F, SlotProps = {
+    field: F;
+    state: T;
+}> = Record<string, (props: SlotProps) => any> & Record<`${keyof T extends string ? keyof T : never}-field`, (props: SlotProps) => any>;
+type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
+export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
+    header(props?: {}): any;
+    leading(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    providers(props?: {}): any;
+    validation(props?: {}): any;
+    submit(props: {
+        loading: boolean;
+    }): any;
+    footer(props?: {}): any;
+} & DynamicFieldSlots<T, F> & DynamicFormFieldSlots<T>;
+declare const _default: <T extends FormSchema, F extends AuthFormField>(__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 onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit"> & AuthFormProps<T, F> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<import("../types").Form<T>> | null>>;
+        state: import("vue").Reactive<InferInput<T>>;
+    }>): void;
+    attrs: any;
+    slots: AuthFormSlots<import("vue").Reactive<InferInput<T>>, F>;
+    emit: (evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/avatar';
 import type { ChipProps } from '../types';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;
 export interface AvatarProps {
     /**

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

@@ -1,6 +1,6 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/avatar-group';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type AvatarGroup = ComponentConfig<typeof theme, AppConfig, 'avatarGroup'>;
 export interface AvatarGroupProps {
     /**

package/dist/runtime/components/Badge.vue

@@ -6,7 +6,7 @@ import theme from "#build/ui/badge";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -29,14 +29,14 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} })({
   color: props.color,
   variant: props.variant,
-  size: buttonGroupSize.value || props.size,
+  size: fieldGroupSize.value || props.size,
   square: props.square || !slots.default && !props.label,
-  buttonGroup: orientation.value
+  fieldGroup: orientation.value
 }));
 </script>
 

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/badge';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { ComponentConfig } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type Badge = ComponentConfig<typeof theme, AppConfig, 'badge'>;
 export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
     /**

package/dist/runtime/components/Banner.vue

@@ -0,0 +1,117 @@
+<script>
+import theme from "#build/ui/banner";
+</script>
+
+<script setup>
+import { computed, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { useHead, useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+import ULink from "./Link.vue";
+import UContainer from "./Container.vue";
+import UIcon from "./Icon.vue";
+import UButton from "./Button.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  icon: { type: String, required: false },
+  title: { type: String, required: false },
+  actions: { type: Array, required: false },
+  to: { type: null, required: false },
+  target: { type: [String, Object, null], required: false },
+  color: { type: null, required: false },
+  close: { type: [Boolean, Object], required: false },
+  closeIcon: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const emits = defineEmits(["close"]);
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.banner || {} })({
+  color: props.color,
+  to: !!props.to
+}));
+const id = computed(() => `banner-${props.id || "1"}`);
+watch(id, (newId) => {
+  if (typeof document === "undefined" || typeof localStorage === "undefined") return;
+  const isClosed = localStorage.getItem(newId) === "true";
+  const htmlElement = document.querySelector("html");
+  htmlElement?.classList.toggle("hide-banner", isClosed);
+});
+useHead({
+  script: [{
+    key: "prehydrate-template-banner",
+    innerHTML: `
+            if (localStorage.getItem('${id.value}') === 'true') {
+              document.querySelector('html').classList.add('hide-banner')
+            }`.replace(/\s+/g, " "),
+    type: "text/javascript"
+  }]
+});
+function onClose() {
+  localStorage.setItem(id.value, "true");
+  document.querySelector("html")?.classList.add("hide-banner");
+  emits("close");
+}
+</script>
+
+<template>
+  <Primitive :as="as" class="banner" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ULink
+      v-if="to"
+      :aria-label="title"
+      v-bind="{ to, target, ...$attrs }"
+      class="focus:outline-none"
+      tabindex="-1"
+      raw
+    >
+      <span class="absolute inset-0 " aria-hidden="true" />
+    </ULink>
+
+    <UContainer :class="ui.container({ class: props.ui?.container })">
+      <div :class="ui.left({ class: props.ui?.left })" />
+
+      <div :class="ui.center({ class: props.ui?.center })">
+        <slot name="leading">
+          <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+        </slot>
+
+        <div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+
+        <div v-if="actions?.length" :class="ui.actions({ class: props.ui?.actions })">
+          <slot name="actions">
+            <UButton v-for="(action, index) in actions" :key="index" color="neutral" size="xs" v-bind="action" />
+          </slot>
+        </div>
+      </div>
+
+      <div :class="ui.right({ class: props.ui?.right })">
+        <slot name="close" :ui="ui">
+          <UButton
+            v-if="close"
+            :icon="closeIcon || appConfig.ui.icons.close"
+            size="md"
+            color="neutral"
+            variant="ghost"
+            :aria-label="t('banner.close')"
+            v-bind="typeof close === 'object' ? close : {}"
+            :class="ui.close({ class: props.ui?.close })"
+            @click="onClose"
+          />
+        </slot>
+      </div>
+    </UContainer>
+  </Primitive>
+</template>
+
+<style scoped>
+.hide-banner .banner{display:none}
+</style>

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

@@ -0,0 +1,72 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/banner';
+import type { ButtonProps, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type Banner = ComponentConfig<typeof theme, AppConfig, 'banner'>;
+export interface BannerProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * A unique id saved to local storage to remember if the banner has been dismissed.
+     * Change this value to show the banner again.
+     * @defaultValue '1'
+     */
+    id?: string;
+    /**
+     * The icon displayed next to the title.
+     * @IconifyIcon
+     */
+    icon?: string;
+    title?: string;
+    /**
+     * Display a list of actions next to the title.
+     * `{ color: 'neutral', size: 'xs' }`{lang="ts-type"}
+     */
+    actions?: ButtonProps[];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Banner['variants']['color'];
+    /**
+     * Display a close button to dismiss the banner.
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @emits `close`
+     * @defaultValue false
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    closeIcon?: string;
+    class?: any;
+    ui?: Banner['slots'];
+}
+export interface BannerSlots {
+    leading(props?: {}): any;
+    title(props?: {}): any;
+    actions(props?: {}): any;
+    close(props: {
+        ui: any;
+    }): any;
+}
+export interface BannerEmits {
+    close: [];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BannerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<BannerProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BannerSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};