@nuxt/ui 3.0.2 → 3.1.1

package/dist/runtime/components/Pagination.vue

@@ -1,143 +1,49 @@
-<script lang="ts">
-import type { PaginationRootProps, PaginationRootEmits } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/pagination'
-import { tv } from '../utils/tv'
-import type { ButtonProps } from '../types'
-
-const appConfigPagination = _appConfig as AppConfig & { ui: { pagination: Partial<typeof theme> } }
-
-const pagination = tv({ extend: tv(theme), ...(appConfigPagination.ui?.pagination || {}) })
-
-export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'>> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  /**
-   * The icon to use for the first page control.
-   * @defaultValue appConfig.ui.icons.chevronDoubleLeft
-   * @IconifyIcon
-   */
-  firstIcon?: string
-  /**
-   * The icon to use for the previous page control.
-   * @defaultValue appConfig.ui.icons.chevronLeft
-   * @IconifyIcon
-   */
-  prevIcon?: string
-  /**
-   * The icon to use for the next page control.
-   * @defaultValue appConfig.ui.icons.chevronRight
-   * @IconifyIcon
-   */
-  nextIcon?: string
-  /**
-   * The icon to use for the last page control.
-   * @defaultValue appConfig.ui.icons.chevronDoubleRight
-   * @IconifyIcon
-   */
-  lastIcon?: string
-  /**
-   * The icon to use for the ellipsis control.
-   * @defaultValue appConfig.ui.icons.ellipsis
-   * @IconifyIcon
-   */
-  ellipsisIcon?: string
-  /**
-   * The color of the pagination controls.
-   * @defaultValue 'neutral'
-   * @IconifyIcon
-   */
-  color?: ButtonProps['color']
-  /**
-   * The variant of the pagination controls.
-   * @defaultValue 'outline'
-   */
-  variant?: ButtonProps['variant']
-  /**
-   * The color of the active pagination control.
-   * @defaultValue 'primary'
-   */
-  activeColor?: ButtonProps['color']
-  /**
-   * The variant of the active pagination control.
-   * @defaultValue 'solid'
-   */
-  activeVariant?: ButtonProps['variant']
-  /**
-   * Whether to show the first, previous, next, and last controls.
-   * @defaultValue true
-   */
-  showControls?: boolean
-  size?: ButtonProps['size']
-  /**
-   * A function to render page controls as links.
-   * @param page The page number to navigate to.
-   */
-  to?: (page: number) => ButtonProps['to']
-  class?: any
-  ui?: Partial<typeof pagination.slots>
-}
-
-export interface PaginationEmits extends PaginationRootEmits {}
-
-export interface PaginationSlots {
-  first(props?: {}): any
-  prev(props?: {}): any
-  next(props?: {}): any
-  last(props?: {}): any
-  ellipsis(props?: {}): any
-  item(props: {
-    page: number
-    pageCount: number
-    item: {
-      type: 'ellipsis'
-    } | {
-      type: 'page'
-      value: number
-    }
-    index: number
-  }): any
-}
+<script>
+import theme from "#build/ui/pagination";
 </script>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { useLocale } from '../composables/useLocale'
-import UButton from './Button.vue'
-
-const props = withDefaults(defineProps<PaginationProps>(), {
-  size: 'md',
-  color: 'neutral',
-  variant: 'outline',
-  activeColor: 'primary',
-  activeVariant: 'solid',
-  showControls: true,
-  showEdges: false,
-  itemsPerPage: 10,
-  siblingCount: 2,
-  total: 0
-})
-const emits = defineEmits<PaginationEmits>()
-const slots = defineSlots<PaginationSlots>()
-
-const appConfig = useAppConfig()
-const { dir } = useLocale()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emits)
-
-const firstIcon = computed(() => props.firstIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft))
-const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft))
-const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
-const lastIcon = computed(() => props.lastIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight))
-
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = pagination()
+<script setup>
+import { computed } from "vue";
+import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  firstIcon: { type: String, required: false },
+  prevIcon: { type: String, required: false },
+  nextIcon: { type: String, required: false },
+  lastIcon: { type: String, required: false },
+  ellipsisIcon: { type: String, required: false },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "outline" },
+  activeColor: { type: null, required: false, default: "primary" },
+  activeVariant: { type: null, required: false, default: "solid" },
+  showControls: { type: Boolean, required: false, default: true },
+  size: { type: null, required: false, default: "md" },
+  to: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultPage: { type: Number, required: false },
+  disabled: { type: Boolean, required: false },
+  itemsPerPage: { type: Number, required: false, default: 10 },
+  page: { type: Number, required: false },
+  showEdges: { type: Boolean, required: false, default: false },
+  siblingCount: { type: Number, required: false, default: 2 },
+  total: { type: Number, required: false, default: 0 }
+});
+const emits = defineEmits(["update:page"]);
+const slots = defineSlots();
+const { dir } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultPage", "disabled", "itemsPerPage", "page", "showEdges", "siblingCount", "total"), emits);
+const firstIcon = computed(() => props.firstIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft));
+const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
+const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
+const lastIcon = computed(() => props.lastIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pagination || {} })());
 </script>
 
 <template>
@@ -150,7 +56,7 @@ const ui = pagination()
       </PaginationFirst>
       <PaginationPrev v-if="showControls || !!slots.prev" as-child :class="ui.prev({ class: props.ui?.prev })">
         <slot name="prev">
-          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : undefined" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : void 0" />
         </slot>
       </PaginationPrev>
 
@@ -178,7 +84,7 @@ const ui = pagination()
 
       <PaginationNext v-if="showControls || !!slots.next" as-child :class="ui.next({ class: props.ui?.next })">
         <slot name="next">
-          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : undefined" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : void 0" />
         </slot>
       </PaginationNext>
       <PaginationLast v-if="showControls || !!slots.last" as-child :class="ui.last({ class: props.ui?.last })">

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

@@ -0,0 +1,119 @@
+import type { PaginationRootProps, PaginationRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/pagination';
+import type { ButtonProps } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type Pagination = ComponentConfig<typeof theme, AppConfig, 'pagination'>;
+export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defaultPage' | 'disabled' | 'itemsPerPage' | 'page' | 'showEdges' | 'siblingCount' | 'total'>> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon to use for the first page control.
+     * @defaultValue appConfig.ui.icons.chevronDoubleLeft
+     * @IconifyIcon
+     */
+    firstIcon?: string;
+    /**
+     * The icon to use for the previous page control.
+     * @defaultValue appConfig.ui.icons.chevronLeft
+     * @IconifyIcon
+     */
+    prevIcon?: string;
+    /**
+     * The icon to use for the next page control.
+     * @defaultValue appConfig.ui.icons.chevronRight
+     * @IconifyIcon
+     */
+    nextIcon?: string;
+    /**
+     * The icon to use for the last page control.
+     * @defaultValue appConfig.ui.icons.chevronDoubleRight
+     * @IconifyIcon
+     */
+    lastIcon?: string;
+    /**
+     * The icon to use for the ellipsis control.
+     * @defaultValue appConfig.ui.icons.ellipsis
+     * @IconifyIcon
+     */
+    ellipsisIcon?: string;
+    /**
+     * The color of the pagination controls.
+     * @defaultValue 'neutral'
+     * @IconifyIcon
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the pagination controls.
+     * @defaultValue 'outline'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * The color of the active pagination control.
+     * @defaultValue 'primary'
+     */
+    activeColor?: ButtonProps['color'];
+    /**
+     * The variant of the active pagination control.
+     * @defaultValue 'solid'
+     */
+    activeVariant?: ButtonProps['variant'];
+    /**
+     * Whether to show the first, previous, next, and last controls.
+     * @defaultValue true
+     */
+    showControls?: boolean;
+    size?: ButtonProps['size'];
+    /**
+     * A function to render page controls as links.
+     * @param page The page number to navigate to.
+     */
+    to?: (page: number) => ButtonProps['to'];
+    class?: any;
+    ui?: Pagination['slots'];
+}
+export interface PaginationEmits extends PaginationRootEmits {
+}
+export interface PaginationSlots {
+    first(props?: {}): any;
+    prev(props?: {}): any;
+    next(props?: {}): any;
+    last(props?: {}): any;
+    ellipsis(props?: {}): any;
+    item(props: {
+        page: number;
+        pageCount: number;
+        item: {
+            type: 'ellipsis';
+        } | {
+            type: 'page';
+            value: number;
+        };
+        index: number;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    activeColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    variant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    activeVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    itemsPerPage: number;
+    showEdges: boolean;
+    siblingCount: number;
+    total: number;
+    showControls: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PaginationSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PinInput.vue

@@ -1,91 +1,73 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
-import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/pin-input'
-import { tv } from '../utils/tv'
-import type { PartialString } from '../types/utils'
-
-const appConfigPinInput = _appConfig as AppConfig & { ui: { pinInput: Partial<typeof theme> } }
-
-const pinInput = tv({ extend: tv(theme), ...(appConfigPinInput.ui?.pinInput || {}) })
-
-type PinInputVariants = VariantProps<typeof pinInput>
-
-export interface PinInputProps extends Pick<PinInputRootProps, 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  /**
-   * @defaultValue 'primary'
-   */
-  color?: PinInputVariants['color']
-  /**
-   * @defaultValue 'outline'
-   */
-  variant?: PinInputVariants['variant']
-  /**
-   * @defaultValue 'md'
-   */
-  size?: PinInputVariants['size']
-  /**
-   * The number of input fields.
-   * @defaultValue 5
-   */
-  length?: number | string
-  highlight?: boolean
-  class?: any
-  ui?: PartialString<typeof pinInput.slots>
-}
-
-export type PinInputEmits = PinInputRootEmits & {
-  change: [payload: Event]
-  blur: [payload: Event]
-}
-
+<script>
+import theme from "#build/ui/pin-input";
 </script>
 
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useFormField } from '../composables/useFormField'
-import { looseToNumber } from '../utils'
-
-const props = withDefaults(defineProps<PinInputProps>(), {
-  type: 'text',
-  length: 5
-})
-const emits = defineEmits<PinInputEmits>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'placeholder', 'required', 'type'), emits)
-const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<PinInputProps>(props)
-
-const ui = computed(() => pinInput({
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { PinInputInput, PinInputRoot, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { looseToNumber } from "../utils";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  length: { type: [Number, String], required: false, default: 5 },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  highlight: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultValue: { type: Array, required: false },
+  disabled: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  mask: { type: Boolean, required: false },
+  modelValue: { type: [Array, null], required: false },
+  name: { type: String, required: false },
+  otp: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  type: { type: String, required: false, default: "text" }
+});
+const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "defaultValue", "disabled", "id", "mask", "modelValue", "name", "otp", "placeholder", "required", "type"), emits);
+const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pinInput || {} })({
   color: color.value,
   variant: props.variant,
   size: size.value,
   highlight: highlight.value
-}))
-
-const completed = ref(false)
-function onComplete(value: string[]) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
-  emits('change', event)
-  emitFormChange()
+}));
+const inputsRef = ref([]);
+const completed = ref(false);
+function onComplete(value) {
+  const event = new Event("change", { target: { value } });
+  emits("change", event);
+  emitFormChange();
 }
-
-function onBlur(event: FocusEvent) {
+function onBlur(event) {
   if (!event.relatedTarget || completed.value) {
-    emits('blur', event)
-    emitFormBlur()
+    emits("blur", event);
+    emitFormBlur();
+  }
+}
+function autoFocus() {
+  if (props.autofocus) {
+    inputsRef.value[0]?.$el?.focus();
   }
 }
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus();
+  }, props.autofocusDelay);
+});
+defineExpose({
+  inputsRef
+});
 </script>
 
 <template>
@@ -100,6 +82,7 @@ function onBlur(event: FocusEvent) {
     <PinInputInput
       v-for="(ids, index) in looseToNumber(props.length)"
       :key="ids"
+      :ref="(el) => inputsRef[index] = el"
       :index="index"
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"

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

@@ -0,0 +1,57 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/pin-input';
+import type { ComponentConfig } from '../types/utils';
+type PinInput = ComponentConfig<typeof theme, AppConfig, 'pinInput'>;
+export interface PinInputProps extends Pick<PinInputRootProps, 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: PinInput['variants']['color'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: PinInput['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: PinInput['variants']['size'];
+    /**
+     * The number of input fields.
+     * @defaultValue 5
+     */
+    length?: number | string;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    highlight?: boolean;
+    class?: any;
+    ui?: PinInput['slots'];
+}
+export type PinInputEmits = PinInputRootEmits & {
+    change: [payload: Event];
+    blur: [payload: Event];
+};
+declare const _default: import("vue").DefineComponent<PinInputProps, {
+    inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (payload: Event) => any;
+    complete: (value: string[]) => any;
+    change: (payload: Event) => any;
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<PinInputProps> & Readonly<{
+    onBlur?: ((payload: Event) => any) | undefined;
+    onComplete?: ((value: string[]) => any) | undefined;
+    onChange?: ((payload: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    length: number | string;
+    type: "text" | "number";
+    autofocusDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;