@nuxt/ui 2.12.2 → 2.13.0

package/dist/runtime/components/overlays/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <HDialog :class="ui.wrapper" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -76,7 +76,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "close"],
+  emits: ["update:modelValue", "close", "close-prevented"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("modal", toRef(props, "ui"), config, toRef(props, "class"));
     const isOpen = computed({
@@ -96,6 +96,10 @@ export default defineComponent({
       };
     });
     function close(value) {
+      if (props.preventClose) {
+        emit("close-prevented");
+        return;
+      }
       isOpen.value = value;
       emit("close");
     }

package/dist/runtime/components/overlays/Modal.vue.d.ts

@@ -40,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     isOpen: import("vue").WritableComputedRef<boolean>;
     transitionClass: import("vue").ComputedRef<any>;
     close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -76,6 +76,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    "onClose-prevented"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
     transition: boolean;

package/dist/runtime/components/overlays/Popover.vue

@@ -67,11 +67,11 @@ export default defineComponent({
     },
     openDelay: {
       type: Number,
-      default: 0
+      default: () => config.default.openDelay
     },
     closeDelay: {
       type: Number,
-      default: 0
+      default: () => config.default.closeDelay
     },
     overlay: {
       type: Boolean,

package/dist/runtime/components/overlays/Popover.vue.d.ts

@@ -16,11 +16,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     openDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     closeDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     overlay: {
         type: BooleanConstructor;
@@ -86,11 +86,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     openDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     closeDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     overlay: {
         type: BooleanConstructor;

package/dist/runtime/components/overlays/Slideover.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -65,7 +65,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "close"],
+  emits: ["update:modelValue", "close", "close-prevented"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("slideover", toRef(props, "ui"), config, toRef(props, "class"));
     const isOpen = computed({
@@ -89,6 +89,10 @@ export default defineComponent({
       };
     });
     function close(value) {
+      if (props.preventClose) {
+        emit("close-prevented");
+        return;
+      }
       isOpen.value = value;
       emit("close");
     }

package/dist/runtime/components/overlays/Slideover.vue.d.ts

@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
     isOpen: WritableComputedRef<boolean>;
     transitionClass: import("vue").ComputedRef<any>;
     close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<boolean>;
         default: boolean;
@@ -78,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    "onClose-prevented"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
     transition: boolean;

package/dist/runtime/components/overlays/Tooltip.vue

@@ -58,11 +58,11 @@ export default defineComponent({
     },
     openDelay: {
       type: Number,
-      default: 0
+      default: () => config.default.openDelay
     },
     closeDelay: {
       type: Number,
-      default: 0
+      default: () => config.default.closeDelay
     },
     popper: {
       type: Object,

package/dist/runtime/components/overlays/Tooltip.vue.d.ts

@@ -15,11 +15,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     openDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     closeDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     popper: {
         type: PropType<PopperOptions>;
@@ -59,11 +59,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     openDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     closeDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     popper: {
         type: PropType<PopperOptions>;

package/dist/runtime/composables/useCarouselScroll.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from 'vue';
+export declare const useCarouselScroll: (el: Ref<HTMLElement>) => void;

package/dist/runtime/composables/useCarouselScroll.mjs

@@ -0,0 +1,35 @@
+import { ref, onMounted, onUnmounted } from "vue";
+export const useCarouselScroll = (el) => {
+  const x = ref(0);
+  function onMouseDown(e) {
+    el.value.style.scrollSnapType = "none";
+    el.value.style.scrollBehavior = "auto";
+    x.value = e.pageX;
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  }
+  function onMouseUp() {
+    el.value.style.removeProperty("scroll-behavior");
+    el.value.style.removeProperty("scroll-snap-type");
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+  }
+  function onMouseMove(e) {
+    e.preventDefault();
+    const delta = e.pageX - x.value;
+    x.value = e.pageX;
+    el.value.scrollBy(-delta, 0);
+  }
+  onMounted(() => {
+    if (!el.value) {
+      return;
+    }
+    el.value.addEventListener("mousedown", onMouseDown);
+  });
+  onUnmounted(() => {
+    if (!el.value) {
+      return;
+    }
+    el.value.removeEventListener("mousedown", onMouseDown);
+  });
+};

package/dist/runtime/composables/usePopper.d.ts

@@ -153,15 +153,15 @@ export declare function usePopper({ locked, overflowPadding, offsetDistance, off
                 };
             } | undefined;
             offset?: {
-                "bottom-end"?: {
+                auto?: {
                     y: number;
                     x: number;
                 } | undefined;
-                "bottom-start"?: {
+                "bottom-end"?: {
                     y: number;
                     x: number;
                 } | undefined;
-                auto?: {
+                "bottom-start"?: {
                     y: number;
                     x: number;
                 } | undefined;

package/dist/runtime/types/horizontal-navigation.d.ts

@@ -0,0 +1,13 @@
+import type { Link } from './link'
+import type { Avatar } from './avatar'
+import type { Badge } from './badge'
+
+export interface HorizontalNavigationLink extends Link {
+  label: string
+  labelClass?: string
+  icon?: string
+  iconClass?: string
+  avatar?: Avatar
+  click?: Function
+  badge?: string | number | Badge
+}

package/dist/runtime/types/index.d.ts

@@ -10,6 +10,7 @@ export * from './command-palette'
 export * from './dropdown'
 export * from './form-group'
 export * from './form'
+export * from './horizontal-navigation'
 export * from './input'
 export * from './kbd'
 export * from './link'

package/dist/runtime/types/vertical-navigation.d.ts

@@ -1,5 +1,6 @@
 import type { Link } from './link'
 import type { Avatar } from './avatar'
+import type { Badge } from './badge'
 
 export interface VerticalNavigationLink extends Link {
   label: string
@@ -8,5 +9,5 @@ export interface VerticalNavigationLink extends Link {
   iconClass?: string
   avatar?: Avatar
   click?: Function
-  badge?: string | number
+  badge?: string | number | Badge
 }

package/dist/runtime/ui.config/elements/carousel.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    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;
+        };
+    };
+};
+export default _default;

package/dist/runtime/ui.config/elements/carousel.mjs

@@ -0,0 +1,26 @@
+export default {
+  wrapper: "relative",
+  container: "relative w-full flex overflow-x-auto snap-x snap-mandatory scroll-smooth",
+  item: "flex flex-none snap-center",
+  arrows: {
+    wrapper: "flex items-center justify-between"
+  },
+  indicators: {
+    wrapper: "absolute flex items-center justify-center gap-3 bottom-4 inset-x-0",
+    base: "rounded-full h-3 w-3",
+    active: "bg-primary-500 dark:bg-primary-400",
+    inactive: "bg-gray-100 dark:bg-gray-800 mix-blend-overlay"
+  },
+  default: {
+    prevButton: {
+      color: "black",
+      class: "rtl:[&_span:first-child]:rotate-180 absolute left-4 top-1/2 transform -translate-y-1/2 rounded-full",
+      icon: "i-heroicons-chevron-left-20-solid"
+    },
+    nextButton: {
+      color: "black",
+      class: "rtl:[&_span:last-child]:rotate-180 absolute right-4 top-1/2 transform -translate-y-1/2 rounded-full",
+      icon: "i-heroicons-chevron-right-20-solid "
+    }
+  }
+};

package/dist/runtime/ui.config/elements/dropdown.d.ts

@@ -26,7 +26,7 @@ declare const _default: {
         };
         avatar: {
             base: string;
-            size: "3xs";
+            size: "2xs";
         };
         label: string;
         shortcuts: string;
@@ -43,6 +43,10 @@ declare const _default: {
         placement: string;
         strategy: string;
     };
+    default: {
+        openDelay: number;
+        closeDelay: number;
+    };
     arrow: {
         ring: string;
         background: string;

package/dist/runtime/ui.config/elements/dropdown.mjs

@@ -13,21 +13,21 @@ export default {
   divide: "divide-y divide-gray-200 dark:divide-gray-700",
   padding: "p-1",
   item: {
-    base: "group flex items-center gap-2 w-full",
+    base: "group flex items-center gap-1.5 w-full",
     rounded: "rounded-md",
-    padding: "px-2 py-1.5",
+    padding: "px-1.5 py-1.5",
     size: "text-sm",
     active: "bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white",
     inactive: "text-gray-700 dark:text-gray-200",
     disabled: "cursor-not-allowed opacity-50",
     icon: {
-      base: "flex-shrink-0 h-4 w-4",
+      base: "flex-shrink-0 w-5 h-5",
       active: "text-gray-500 dark:text-gray-400",
       inactive: "text-gray-400 dark:text-gray-500"
     },
     avatar: {
       base: "flex-shrink-0",
-      size: "3xs"
+      size: "2xs"
     },
     label: "truncate",
     shortcuts: "hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto"
@@ -45,6 +45,10 @@ export default {
     placement: "bottom-end",
     strategy: "fixed"
   },
+  default: {
+    openDelay: 0,
+    closeDelay: 0
+  },
   arrow: {
     ...arrow,
     ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",

package/dist/runtime/ui.config/forms/inputMenu.d.ts

@@ -34,7 +34,7 @@ declare const _default: {
         };
         avatar: {
             base: string;
-            size: "3xs";
+            size: "2xs";
         };
         chip: {
             base: string;

package/dist/runtime/ui.config/forms/inputMenu.mjs

@@ -14,28 +14,28 @@ export default {
   option: {
     base: "cursor-default select-none relative flex items-center justify-between gap-1",
     rounded: "rounded-md",
-    padding: "px-2 py-1.5",
+    padding: "px-1.5 py-1.5",
     size: "text-sm",
     color: "text-gray-900 dark:text-white",
-    container: "flex items-center gap-2 min-w-0",
+    container: "flex items-center gap-1.5 min-w-0",
     active: "bg-gray-100 dark:bg-gray-900",
     inactive: "",
     selected: "pe-7",
     disabled: "cursor-not-allowed opacity-50",
     empty: "text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5",
     icon: {
-      base: "flex-shrink-0 h-4 w-4",
+      base: "flex-shrink-0 h-5 w-5",
       active: "text-gray-900 dark:text-white",
       inactive: "text-gray-400 dark:text-gray-500"
     },
     selectedIcon: {
       wrapper: "absolute inset-y-0 end-0 flex items-center",
       padding: "pe-2",
-      base: "h-4 w-4 text-gray-900 dark:text-white flex-shrink-0"
+      base: "h-5 w-5 text-gray-900 dark:text-white flex-shrink-0"
     },
     avatar: {
       base: "flex-shrink-0",
-      size: "3xs"
+      size: "2xs"
     },
     chip: {
       base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full"

package/dist/runtime/ui.config/forms/select.mjs

@@ -2,7 +2,7 @@ import input from "./input.mjs";
 export default {
   ...input,
   form: "form-select",
-  placeholder: "text-gray-900 dark:text-white",
+  placeholder: "text-gray-400 dark:text-gray-500",
   default: {
     size: "sm",
     color: "white",

package/dist/runtime/ui.config/forms/selectMenu.d.ts

@@ -28,7 +28,7 @@ declare const _default: {
         };
         avatar: {
             base: string;
-            size: "3xs";
+            size: "2xs";
         };
         chip: {
             base: string;

package/dist/runtime/ui.config/index.d.ts

@@ -12,6 +12,7 @@ export { default as kbd } from './elements/kbd';
 export { default as progress } from './elements/progress';
 export { default as meter } from './elements/meter';
 export { default as meterGroup } from './elements/meterGroup';
+export { default as carousel } from './elements/carousel';
 export { default as input } from './forms/input';
 export { default as inputMenu } from './forms/inputMenu';
 export { default as formGroup } from './forms/formGroup';
@@ -28,6 +29,7 @@ export { default as container } from './layout/container';
 export { default as skeleton } from './layout/skeleton';
 export { default as divider } from './layout/divider';
 export { default as verticalNavigation } from './navigation/verticalNavigation';
+export { default as horizontalNavigation } from './navigation/horizontalNavigation';
 export { default as commandPalette } from './navigation/commandPalette';
 export { default as pagination } from './navigation/pagination';
 export { default as tabs } from './navigation/tabs';

package/dist/runtime/ui.config/index.mjs

@@ -12,6 +12,7 @@ export { default as kbd } from "./elements/kbd.mjs";
 export { default as progress } from "./elements/progress.mjs";
 export { default as meter } from "./elements/meter.mjs";
 export { default as meterGroup } from "./elements/meterGroup.mjs";
+export { default as carousel } from "./elements/carousel.mjs";
 export { default as input } from "./forms/input.mjs";
 export { default as inputMenu } from "./forms/inputMenu.mjs";
 export { default as formGroup } from "./forms/formGroup.mjs";
@@ -28,6 +29,7 @@ export { default as container } from "./layout/container.mjs";
 export { default as skeleton } from "./layout/skeleton.mjs";
 export { default as divider } from "./layout/divider.mjs";
 export { default as verticalNavigation } from "./navigation/verticalNavigation.mjs";
+export { default as horizontalNavigation } from "./navigation/horizontalNavigation.mjs";
 export { default as commandPalette } from "./navigation/commandPalette.mjs";
 export { default as pagination } from "./navigation/pagination.mjs";
 export { default as tabs } from "./navigation/tabs.mjs";

package/dist/runtime/ui.config/navigation/breadcrumb.mjs

@@ -1,11 +1,11 @@
 export default {
   wrapper: "relative",
   ol: "flex items-center gap-x-1.5",
-  li: "flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm",
-  base: "flex items-center gap-x-1.5 group font-semibold",
-  label: "",
+  li: "flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm leading-6 min-w-0",
+  base: "flex items-center gap-x-1.5 group font-semibold min-w-0",
+  label: "block truncate",
   icon: {
-    base: "flex-shrink-0 w-4 h-4",
+    base: "flex-shrink-0 w-5 h-5",
     active: "",
     inactive: ""
   },

package/dist/runtime/ui.config/navigation/commandPalette.d.ts

@@ -46,7 +46,7 @@ declare const _default: {
             };
             avatar: {
                 base: string;
-                size: "3xs";
+                size: "2xs";
             };
             chip: {
                 base: string;

package/dist/runtime/ui.config/navigation/commandPalette.mjs

@@ -10,8 +10,8 @@ export default {
     icon: {
       base: "pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500",
       loading: "animate-spin",
-      size: "h-4 w-4",
-      padding: "ps-10"
+      size: "h-5 w-5",
+      padding: "ps-11"
     },
     closeButton: {
       base: "absolute end-4",
@@ -26,27 +26,27 @@ export default {
   },
   group: {
     wrapper: "p-2",
-    label: "px-2 my-2 text-xs font-semibold text-gray-900 dark:text-white",
+    label: "px-2.5 my-2 text-xs font-semibold text-gray-900 dark:text-white",
     container: "text-sm text-gray-700 dark:text-gray-200",
     command: {
-      base: "flex justify-between select-none items-center rounded-md px-2 py-1.5 gap-2 relative",
+      base: "flex justify-between select-none items-center rounded-md px-2.5 py-1.5 gap-2 relative",
       active: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white",
       inactive: "",
       label: "flex items-center gap-1.5 min-w-0",
       prefix: "text-gray-400 dark:text-gray-500",
       suffix: "text-gray-400 dark:text-gray-500",
-      container: "flex items-center gap-2 min-w-0",
+      container: "flex items-center gap-1.5 min-w-0",
       icon: {
-        base: "flex-shrink-0 w-4 h-4",
+        base: "flex-shrink-0 w-5 h-5",
         active: "text-gray-900 dark:text-white",
         inactive: "text-gray-400 dark:text-gray-500"
       },
       selectedIcon: {
-        base: "h-4 w-4 text-gray-900 dark:text-white flex-shrink-0"
+        base: "h-5 w-5 text-gray-900 dark:text-white flex-shrink-0"
       },
       avatar: {
         base: "flex-shrink-0",
-        size: "3xs"
+        size: "2xs"
       },
       chip: {
         base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full"

package/dist/runtime/ui.config/navigation/horizontalNavigation.d.ts

@@ -0,0 +1,27 @@
+declare const _default: {
+    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";
+    };
+};
+export default _default;

package/dist/runtime/ui.config/navigation/horizontalNavigation.mjs

@@ -0,0 +1,26 @@
+export default {
+  wrapper: "relative w-full flex items-center justify-between",
+  container: "flex items-center min-w-0",
+  inner: "min-w-0",
+  base: "group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75",
+  before: "before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50",
+  after: "after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2",
+  active: "text-gray-900 dark:text-white after:bg-primary-500 dark:after:bg-primary-400 after:rounded-full",
+  inactive: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white",
+  label: "truncate relative",
+  icon: {
+    base: "flex-shrink-0 w-5 h-5",
+    active: "text-gray-700 dark:text-gray-200",
+    inactive: "text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"
+  },
+  avatar: {
+    base: "flex-shrink-0",
+    size: "2xs"
+  },
+  badge: {
+    base: "flex-shrink-0 ml-auto relative rounded",
+    color: "gray",
+    variant: "solid",
+    size: "xs"
+  }
+};

package/dist/runtime/ui.config/navigation/verticalNavigation.d.ts

@@ -17,12 +17,13 @@ declare const _default: {
     };
     avatar: {
         base: string;
-        size: "3xs";
+        size: "2xs";
     };
     badge: {
         base: string;
-        active: string;
-        inactive: string;
+        color: "gray";
+        variant: "solid";
+        size: "xs";
     };
     divider: {
         wrapper: {