@nuxt/ui 2.12.2 → 2.13.0

package/dist/module.d.ts

@@ -1,7 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { CollectionNames, IconsPluginOptions } from '@egoist/tailwindcss-icons';
 
-declare const _default$F: {
+declare const _default$H: {
     wrapper: string;
     base: string;
     divide: string;
@@ -61,7 +61,7 @@ declare const _default$F: {
     };
 };
 
-declare const _default$E: {
+declare const _default$G: {
     wrapper: string;
     background: string;
     rounded: string;
@@ -121,13 +121,13 @@ declare const _default$E: {
     };
 };
 
-declare const _default$D: {
+declare const _default$F: {
     wrapper: string;
     ring: string;
     margin: string;
 };
 
-declare const _default$C: {
+declare const _default$E: {
     base: string;
     rounded: string;
     font: string;
@@ -161,7 +161,7 @@ declare const _default$C: {
     };
 };
 
-declare const _default$B: {
+declare const _default$D: {
     base: string;
     font: string;
     rounded: string;
@@ -242,7 +242,7 @@ declare const _default$B: {
     };
 };
 
-declare const _default$A: {
+declare const _default$C: {
     wrapper: {
         horizontal: string;
         vertical: string;
@@ -343,7 +343,7 @@ declare const _default$A: {
     };
 };
 
-declare const _default$z: {
+declare const _default$B: {
     wrapper: string;
     base: string;
     background: string;
@@ -378,7 +378,7 @@ declare const _default$z: {
     };
 };
 
-declare const _default$y: {
+declare const _default$A: {
     wrapper: string;
     container: string;
     trigger: string;
@@ -406,7 +406,7 @@ declare const _default$y: {
         };
         avatar: {
             base: string;
-            size: "3xs";
+            size: "2xs";
         };
         label: string;
         shortcuts: string;
@@ -423,6 +423,10 @@ declare const _default$y: {
         placement: string;
         strategy: string;
     };
+    default: {
+        openDelay: number;
+        closeDelay: number;
+    };
     arrow: {
         ring: string;
         background: string;
@@ -433,7 +437,7 @@ declare const _default$y: {
     };
 };
 
-declare const _default$x: {
+declare const _default$z: {
     wrapper: string;
     item: {
         base: string;
@@ -454,7 +458,7 @@ declare const _default$x: {
     };
 };
 
-declare const _default$w: {
+declare const _default$y: {
     wrapper: string;
     inner: string;
     title: string;
@@ -495,7 +499,7 @@ declare const _default$w: {
     };
 };
 
-declare const _default$v: {
+declare const _default$x: {
     base: string;
     padding: string;
     size: {
@@ -512,7 +516,7 @@ declare const _default$v: {
     };
 };
 
-declare const _default$u: {
+declare const _default$w: {
     wrapper: string;
     indicator: {
         container: {
@@ -587,7 +591,7 @@ declare const _default$u: {
     };
 };
 
-declare const _default$t: {
+declare const _default$v: {
     wrapper: string;
     indicator: {
         container: string;
@@ -664,7 +668,7 @@ declare const _default$t: {
     };
 };
 
-declare const _default$s: {
+declare const _default$u: {
     wrapper: string;
     base: string;
     background: string;
@@ -716,7 +720,34 @@ declare const _default$s: {
     };
 };
 
-declare const _default$r: {
+declare const _default$t: {
+    wrapper: string;
+    container: string;
+    item: string;
+    arrows: {
+        wrapper: string;
+    };
+    indicators: {
+        wrapper: string;
+        base: string;
+        active: string;
+        inactive: string;
+    };
+    default: {
+        prevButton: {
+            color: "black";
+            class: string;
+            icon: string;
+        };
+        nextButton: {
+            color: "black";
+            class: string;
+            icon: string;
+        };
+    };
+};
+
+declare const _default$s: {
     wrapper: string;
     base: string;
     form: string;
@@ -823,7 +854,7 @@ declare const _default$r: {
     };
 };
 
-declare const _default$q: {
+declare const _default$r: {
     container: string;
     trigger: string;
     width: string;
@@ -859,7 +890,7 @@ declare const _default$q: {
         };
         avatar: {
             base: string;
-            size: "3xs";
+            size: "2xs";
         };
         chip: {
             base: string;
@@ -887,7 +918,7 @@ declare const _default$q: {
     };
 };
 
-declare const _default$p: {
+declare const _default$q: {
     wrapper: string;
     label: {
         wrapper: string;
@@ -912,7 +943,7 @@ declare const _default$p: {
     };
 };
 
-declare const _default$o: {
+declare const _default$p: {
     form: string;
     default: {
         size: string;
@@ -1018,7 +1049,7 @@ declare const _default$o: {
     };
 };
 
-declare const _default$n: {
+declare const _default$o: {
     form: string;
     placeholder: string;
     default: {
@@ -1126,7 +1157,7 @@ declare const _default$n: {
     };
 };
 
-declare const _default$m: {
+declare const _default$n: {
     select: string;
     input: string;
     required: string;
@@ -1156,7 +1187,7 @@ declare const _default$m: {
         };
         avatar: {
             base: string;
-            size: "3xs";
+            size: "2xs";
         };
         chip: {
             base: string;
@@ -1196,7 +1227,7 @@ declare const _default$m: {
     empty: string;
 };
 
-declare const _default$l: {
+declare const _default$m: {
     wrapper: string;
     legend: string;
     default: {
@@ -1204,7 +1235,7 @@ declare const _default$l: {
     };
 };
 
-declare const _default$k: {
+declare const _default$l: {
     wrapper: string;
     container: string;
     base: string;
@@ -1222,7 +1253,7 @@ declare const _default$k: {
     };
 };
 
-declare const _default$j: {
+declare const _default$k: {
     wrapper: string;
     container: string;
     base: string;
@@ -1241,7 +1272,7 @@ declare const _default$j: {
     };
 };
 
-declare const _default$i: {
+declare const _default$j: {
     base: string;
     rounded: string;
     ring: string;
@@ -1302,7 +1333,7 @@ declare const _default$i: {
     };
 };
 
-declare const _default$h: {
+declare const _default$i: {
     wrapper: string;
     base: string;
     rounded: string;
@@ -1366,7 +1397,7 @@ declare const _default$h: {
     };
 };
 
-declare const _default$g: {
+declare const _default$h: {
     base: string;
     background: string;
     divide: string;
@@ -1390,19 +1421,19 @@ declare const _default$g: {
     };
 };
 
-declare const _default$f: {
+declare const _default$g: {
     base: string;
     padding: string;
     constrained: string;
 };
 
-declare const _default$e: {
+declare const _default$f: {
     base: string;
     background: string;
     rounded: string;
 };
 
-declare const _default$d: {
+declare const _default$e: {
     wrapper: {
         base: string;
         horizontal: string;
@@ -1437,7 +1468,7 @@ declare const _default$d: {
     label: string;
 };
 
-declare const _default$c: {
+declare const _default$d: {
     wrapper: string;
     base: string;
     ring: string;
@@ -1456,12 +1487,13 @@ declare const _default$c: {
     };
     avatar: {
         base: string;
-        size: "3xs";
+        size: "2xs";
     };
     badge: {
         base: string;
-        active: string;
-        inactive: string;
+        color: "gray";
+        variant: "solid";
+        size: "xs";
     };
     divider: {
         wrapper: {
@@ -1470,6 +1502,33 @@ declare const _default$c: {
     };
 };
 
+declare const _default$c: {
+    wrapper: string;
+    container: string;
+    inner: string;
+    base: string;
+    before: string;
+    after: string;
+    active: string;
+    inactive: string;
+    label: string;
+    icon: {
+        base: string;
+        active: string;
+        inactive: string;
+    };
+    avatar: {
+        base: string;
+        size: "2xs";
+    };
+    badge: {
+        base: string;
+        color: "gray";
+        variant: "solid";
+        size: "xs";
+    };
+};
+
 declare const _default$b: {
     wrapper: string;
     container: string;
@@ -1518,7 +1577,7 @@ declare const _default$b: {
             };
             avatar: {
                 base: string;
-                size: "3xs";
+                size: "2xs";
             };
             chip: {
                 base: string;
@@ -1723,6 +1782,10 @@ declare const _default$5: {
     popper: {
         strategy: string;
     };
+    default: {
+        openDelay: number;
+        closeDelay: number;
+    };
     arrow: {
         base: string;
         ring: string;
@@ -1766,6 +1829,10 @@ declare const _default$4: {
     popper: {
         strategy: string;
     };
+    default: {
+        openDelay: number;
+        closeDelay: number;
+    };
     arrow: {
         base: string;
         ring: string;
@@ -1865,7 +1932,7 @@ declare const _default$1: {
 };
 
 declare namespace config {
-  export { _default$x as accordion, _default$w as alert, _default$E as avatar, _default$D as avatarGroup, _default$C as badge, _default$8 as breadcrumb, _default$B as button, _default$A as buttonGroup, _default$g as card, _default$j as checkbox, _default$z as chip, _default$b as commandPalette, _default$f as container, _default$3 as contextMenu, _default$d as divider, _default$y as dropdown, _default$p as formGroup, _default$r as input, _default$q as inputMenu, _default$v as kbd, _default$t as meter, _default$s as meterGroup, _default$7 as modal, _default$2 as notification, _default$1 as notifications, _default$a as pagination, _default$4 as popover, _default$u as progress, _default$k as radio, _default$l as radioGroup, _default$h as range, _default$n as select, _default$m as selectMenu, _default$e as skeleton, _default$6 as slideover, _default$F as table, _default$9 as tabs, _default$o as textarea, _default$i as toggle, _default$5 as tooltip, _default$c as verticalNavigation };
+  export { _default$z as accordion, _default$y as alert, _default$G as avatar, _default$F as avatarGroup, _default$E as badge, _default$8 as breadcrumb, _default$D as button, _default$C as buttonGroup, _default$h as card, _default$t as carousel, _default$k as checkbox, _default$B as chip, _default$b as commandPalette, _default$g as container, _default$3 as contextMenu, _default$e as divider, _default$A as dropdown, _default$q as formGroup, _default$c as horizontalNavigation, _default$s as input, _default$r as inputMenu, _default$x as kbd, _default$v as meter, _default$u as meterGroup, _default$7 as modal, _default$2 as notification, _default$1 as notifications, _default$a as pagination, _default$4 as popover, _default$w as progress, _default$l as radio, _default$m as radioGroup, _default$i as range, _default$o as select, _default$n as selectMenu, _default$f as skeleton, _default$6 as slideover, _default$H as table, _default$9 as tabs, _default$p as textarea, _default$j as toggle, _default$5 as tooltip, _default$d as verticalNavigation };
 }
 
 type Strategy = 'merge' | 'override'
@@ -1902,6 +1969,10 @@ interface ModuleOptions {
     global?: boolean;
     icons: CollectionNames[] | 'all' | IconsPluginOptions;
     safelistColors?: string[];
+    /**
+     * Disables the global css styles added by the module.
+     */
+    disableGlobalStyles?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.12.2",
+  "version": "2.13.0",
   "configKey": "ui",
   "compatibility": {
     "nuxt": "^3.0.0-rc.8"

package/dist/module.mjs

@@ -14,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.12.2";
+const version = "2.13.0";
 
 function omit(object, keysToOmit) {
   const result = { ...object };
@@ -319,7 +319,8 @@ const module = defineNuxtModule({
   defaults: {
     prefix: "U",
     icons: ["heroicons"],
-    safelistColors: ["primary"]
+    safelistColors: ["primary"],
+    disableGlobalStyles: false
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
@@ -327,7 +328,9 @@ const module = defineNuxtModule({
     nuxt.options.build.transpile.push(runtimeDir);
     nuxt.options.build.transpile.push("@popperjs/core", "@headlessui/vue");
     nuxt.options.alias["#ui"] = runtimeDir;
-    nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
+    if (!options.disableGlobalStyles) {
+      nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
+    }
     nuxt.hook("tailwindcss:config", function(tailwindConfig) {
       tailwindConfig.theme = tailwindConfig.theme || {};
       tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};

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

@@ -81,11 +81,11 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
     to: {
-        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: PropType<RouteLocationRaw>;
         readonly default: undefined;
     };
     href: {
-        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: PropType<RouteLocationRaw>;
         readonly default: undefined;
     };
     target: {
@@ -227,11 +227,11 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
     to: {
-        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: PropType<RouteLocationRaw>;
         readonly default: undefined;
     };
     href: {
-        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: PropType<RouteLocationRaw>;
         readonly default: undefined;
     };
     target: {
@@ -299,8 +299,8 @@ declare const _default: import("vue").DefineComponent<{
     trailingIcon: string;
     trailing: boolean;
     square: boolean;
-    to: import("vue-router").RouteLocationRaw;
-    href: import("vue-router").RouteLocationRaw;
+    to: RouteLocationRaw;
+    href: RouteLocationRaw;
     target: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null;
     rel: string | null;
     noRel: boolean;

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

@@ -0,0 +1,149 @@
+<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="index in indicatorsCount" :key="index">
+        <slot name="indicator" :on-click="onClick" :active="index === currentIndex" :index="index">
+          <button
+            type="button"
+            :class="[
+              ui.indicators.base,
+              index === currentIndex ? ui.indicators.active : ui.indicators.inactive
+            ]"
+            :aria-label="`set slide ${index}`"
+            @click="onClick(index)"
+          />
+        </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) {
+    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 currentIndex = computed(() => Math.round(x.value / itemWidth.value) + 1);
+    const indicatorsCount = 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(index) {
+      x.value = (index - 1) * itemWidth.value;
+    }
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      isFirst,
+      isLast,
+      carouselRef,
+      indicatorsCount,
+      currentIndex,
+      onClickNext,
+      onClickPrev,
+      onClick,
+      twMerge
+    };
+  }
+});
+</script>
+
+<style scoped>
+.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
+</style>