@nuxt/ui 2.12.3 → 2.14.0

package/dist/runtime/components/elements/Button.vue.d.ts

@@ -83,54 +83,67 @@ declare const _default: import("vue").DefineComponent<{
     to: {
         readonly type: PropType<RouteLocationRaw>;
         readonly default: undefined;
+        readonly required: false;
     };
     href: {
         readonly type: PropType<RouteLocationRaw>;
         readonly default: undefined;
+        readonly required: false;
     };
     target: {
-        readonly type: PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     rel: {
-        readonly type: PropType<string | null>;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     noRel: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     prefetch: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     noPrefetch: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     activeClass: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     exactActiveClass: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     prefetchedClass: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     replace: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     ariaCurrentValue: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     external: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -146,7 +159,7 @@ declare const _default: import("vue").DefineComponent<{
     leadingIconClass: import("vue").ComputedRef<string>;
     trailingIconClass: import("vue").ComputedRef<string>;
     linkProps: import("vue").ComputedRef<{}>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
         type: StringConstructor;
         default: string;
@@ -229,54 +242,67 @@ declare const _default: import("vue").DefineComponent<{
     to: {
         readonly type: PropType<RouteLocationRaw>;
         readonly default: undefined;
+        readonly required: false;
     };
     href: {
         readonly type: PropType<RouteLocationRaw>;
         readonly default: undefined;
+        readonly required: false;
     };
     target: {
-        readonly type: PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     rel: {
-        readonly type: PropType<string | null>;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     noRel: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     prefetch: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     noPrefetch: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     activeClass: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     exactActiveClass: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     prefetchedClass: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     replace: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     ariaCurrentValue: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     external: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
 }>>, {
     size: ButtonSize;
@@ -285,13 +311,23 @@ declare const _default: import("vue").DefineComponent<{
     icon: string;
     color: any;
     type: string;
-    leading: boolean;
-    replace: boolean;
     class: any;
+    target: NuxtLinkProps;
+    rel: NuxtLinkProps;
+    noRel: NuxtLinkProps;
+    prefetch: NuxtLinkProps;
+    noPrefetch: NuxtLinkProps;
+    activeClass: NuxtLinkProps;
+    exactActiveClass: NuxtLinkProps;
+    prefetchedClass: NuxtLinkProps;
+    replace: NuxtLinkProps;
+    ariaCurrentValue: NuxtLinkProps;
+    external: NuxtLinkProps;
+    leading: boolean;
+    variant: ButtonVariant;
     label: string;
-    loading: boolean;
     disabled: boolean;
-    variant: ButtonVariant;
+    loading: boolean;
     block: boolean;
     padded: boolean;
     loadingIcon: string;
@@ -301,15 +337,5 @@ declare const _default: import("vue").DefineComponent<{
     square: boolean;
     to: RouteLocationRaw;
     href: RouteLocationRaw;
-    target: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null;
-    rel: string | null;
-    noRel: boolean;
-    prefetch: boolean;
-    noPrefetch: boolean;
-    activeClass: string;
-    exactActiveClass: string;
-    prefetchedClass: string;
-    ariaCurrentValue: string;
-    external: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/ButtonGroup.d.ts

@@ -21,7 +21,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
         type: PropType<ButtonSize>;
         default: null;

package/dist/runtime/components/elements/Carousel.vue

@@ -0,0 +1,156 @@
+<template>
+  <div :class="ui.wrapper" v-bind="attrs">
+    <div ref="carouselRef" :class="ui.container" class="no-scrollbar">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        :class="ui.item"
+      >
+        <slot :item="item" :index="index" />
+      </div>
+    </div>
+
+    <div v-if="arrows" :class="ui.arrows.wrapper">
+      <slot name="prev" :on-click="onClickPrev" :disabled="isFirst">
+        <UButton
+          v-if="prevButton"
+          :disabled="isFirst"
+          v-bind="{ ...ui.default.prevButton, ...prevButton }"
+          :class="twMerge(ui.default.prevButton.class, prevButton?.class)"
+          aria-label="Prev"
+          @click="onClickPrev"
+        />
+      </slot>
+
+      <slot name="next" :on-click="onClickNext" :disabled="isLast">
+        <UButton
+          v-if="nextButton"
+          :disabled="isLast"
+          v-bind="{ ...ui.default.nextButton, ...nextButton }"
+          :class="twMerge(ui.default.nextButton.class, nextButton?.class)"
+          aria-label="Next"
+          @click="onClickNext"
+        />
+      </slot>
+    </div>
+
+    <div v-if="indicators" :class="ui.indicators.wrapper">
+      <template v-for="page in pages" :key="page">
+        <slot name="indicator" :on-click="onClick" :active="page === currentPage" :page="page">
+          <button
+            type="button"
+            :class="[
+              ui.indicators.base,
+              page === currentPage ? ui.indicators.active : ui.indicators.inactive
+            ]"
+            :aria-label="`set slide ${page}`"
+            @click="onClick(page)"
+          />
+        </slot>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, toRef, toRefs, computed, defineComponent } from "vue";
+import { twMerge } from "tailwind-merge";
+import { mergeConfig } from "../../utils";
+import UButton from "../elements/Button.vue";
+import { useUI } from "../../composables/useUI";
+import { useCarouselScroll } from "../../composables/useCarouselScroll";
+import { useScroll, useResizeObserver, useElementSize } from "@vueuse/core";
+import appConfig from "#build/app.config";
+import { carousel } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.carousel, carousel);
+export default defineComponent({
+  components: {
+    UButton
+  },
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    arrows: {
+      type: Boolean,
+      default: false
+    },
+    indicators: {
+      type: Boolean,
+      default: false
+    },
+    prevButton: {
+      type: Object,
+      default: () => config.default.prevButton
+    },
+    nextButton: {
+      type: Object,
+      default: () => config.default.nextButton
+    },
+    class: {
+      type: [String, Object, Array],
+      default: () => ""
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { expose }) {
+    const { ui, attrs } = useUI("carousel", toRef(props, "ui"), config, toRef(props, "class"));
+    const carouselRef = ref();
+    const itemWidth = ref(0);
+    const { x, arrivedState } = useScroll(carouselRef, { behavior: "smooth" });
+    const { width: carouselWidth } = useElementSize(carouselRef);
+    const { left: isFirst, right: isLast } = toRefs(arrivedState);
+    useCarouselScroll(carouselRef);
+    useResizeObserver(carouselRef, (entries) => {
+      const [entry] = entries;
+      itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0;
+    });
+    const currentPage = computed(() => Math.round(x.value / itemWidth.value) + 1);
+    const pages = computed(() => {
+      if (!itemWidth.value) {
+        return 0;
+      }
+      return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1;
+    });
+    function onClickNext() {
+      x.value += itemWidth.value;
+    }
+    function onClickPrev() {
+      x.value -= itemWidth.value;
+    }
+    function onClick(page) {
+      x.value = (page - 1) * itemWidth.value;
+    }
+    expose({
+      pages,
+      page: currentPage,
+      prev: onClickPrev,
+      next: onClickNext,
+      select: onClick
+    });
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      isFirst,
+      isLast,
+      carouselRef,
+      pages,
+      currentPage,
+      onClickNext,
+      onClickPrev,
+      onClick,
+      twMerge
+    };
+  }
+});
+</script>
+
+<style scoped>
+.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
+</style>

package/dist/runtime/components/elements/Carousel.vue.d.ts

@@ -0,0 +1,104 @@
+import type { PropType } from 'vue';
+import type { Button } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+    arrows: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indicators: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prevButton: {
+        type: PropType<Button & {
+            class?: string | undefined;
+        }>;
+        default: () => Button & {
+            class?: string | undefined;
+        };
+    };
+    nextButton: {
+        type: PropType<Button & {
+            class?: string | undefined;
+        }>;
+        default: () => Button & {
+            class?: string | undefined;
+        };
+    };
+    class: {
+        type: PropType<any>;
+        default: () => string;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    isFirst: import("vue").Ref<boolean>;
+    isLast: import("vue").Ref<boolean>;
+    carouselRef: import("vue").Ref<HTMLElement | undefined>;
+    pages: import("vue").ComputedRef<number>;
+    currentPage: import("vue").ComputedRef<number>;
+    onClickNext: () => void;
+    onClickPrev: () => void;
+    onClick: (page: number) => void;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+    arrows: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indicators: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prevButton: {
+        type: PropType<Button & {
+            class?: string | undefined;
+        }>;
+        default: () => Button & {
+            class?: string | undefined;
+        };
+    };
+    nextButton: {
+        type: PropType<Button & {
+            class?: string | undefined;
+        }>;
+        default: () => Button & {
+            class?: string | undefined;
+        };
+    };
+    class: {
+        type: PropType<any>;
+        default: () => string;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>>, {
+    ui: Partial<any>;
+    class: any;
+    items: any[];
+    arrows: boolean;
+    indicators: boolean;
+    prevButton: Button & {
+        class?: string | undefined;
+    };
+    nextButton: Button & {
+        class?: string | undefined;
+    };
+}, {}>;
+export default _default;

package/dist/runtime/components/elements/Chip.vue.d.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -41,9 +41,9 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     chipClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -78,12 +78,12 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
+    size: "sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl";
     ui: any;
     color: any;
+    class: any;
     inset: boolean;
     position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
-    class: any;
     text: string | number;
     show: boolean;
 }, {}>;

package/dist/runtime/components/elements/Dropdown.vue

@@ -56,7 +56,7 @@
 
 <script>
 import { defineComponent, ref, computed, watch, toRef, onMounted, resolveComponent } from "vue";
-import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from "@headlessui/vue";
+import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from "@headlessui/vue";
 import { defu } from "defu";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
@@ -67,6 +67,7 @@ import { usePopper } from "../../composables/usePopper";
 import { mergeConfig, getNuxtLinkProps } from "../../utils";
 import appConfig from "#build/app.config";
 import { dropdown } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.dropdown, dropdown);
 export default defineComponent({
   components: {
@@ -103,11 +104,11 @@ export default defineComponent({
     },
     openDelay: {
       type: Number,
-      default: 0
+      default: () => config.default.openDelay
     },
     closeDelay: {
       type: Number,
-      default: 0
+      default: () => config.default.closeDelay
     },
     class: {
       type: [String, Object, Array],
@@ -221,6 +222,7 @@ export default defineComponent({
       emit("update:open", newValue === 0);
     });
     const NuxtLink = resolveComponent("NuxtLink");
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/elements/Dropdown.vue.d.ts

@@ -25,11 +25,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     openDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     closeDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     class: {
         type: PropType<any>;
@@ -79,8 +79,8 @@ declare const _default: import("vue").DefineComponent<{
     getNuxtLinkProps: (props: any) => {};
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
     twJoin: typeof twJoin;
-    NuxtLink: string | import("vue").ConcreteComponent<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    NuxtLink: string | import("vue").ConcreteComponent<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<DropdownItem[][]>;
         default: () => never[];
@@ -104,11 +104,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     openDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     closeDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     class: {
         type: PropType<any>;
@@ -122,8 +122,8 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:open"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
-    popper: PopperOptions;
     class: any;
+    popper: PopperOptions;
     disabled: boolean;
     items: DropdownItem[][];
     open: boolean;

package/dist/runtime/components/elements/Icon.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     dynamic: import("vue").ComputedRef<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
         required: true;

package/dist/runtime/components/elements/Kbd.vue.d.ts

@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     kbdClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: StringConstructor;
         default: null;

package/dist/runtime/components/elements/Link.vue

@@ -7,7 +7,7 @@
     v-bind="$attrs"
     :class="active ? activeClass : inactiveClass"
   >
-    <slot />
+    <slot v-bind="{ isActive: active }" />
   </component>
   <NuxtLink
     v-else
@@ -23,9 +23,9 @@
       :rel="rel"
       :target="target"
       :class="active !== undefined ? (active ? activeClass : inactiveClass) : resolveLinkClass(route, $route, { isActive, isExactActive })"
-      @click="(e) => !isExternal && navigate(e)"
+      @click="(e) => (!isExternal && !disabled) && navigate(e)"
     >
-      <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
+      <slot v-bind="{ isActive: active !== undefined ? active : (exact ? isExactActive : isActive) }" />
     </a>
   </NuxtLink>
 </template>