@nuxt/ui 2.10.0 → 2.11.1

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

@@ -2,40 +2,38 @@
   <Transition appear v-bind="ui.transition">
     <div
       :class="wrapperClass"
-      role="status" 
+      role="status"
       v-bind="attrs"
-      @mouseover="onMouseover" 
+      @mouseover="onMouseover"
       @mouseleave="onMouseleave"
     >
       <div :class="[ui.container, ui.rounded, ui.ring]">
-        <div :class="ui.padding">
-          <div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">
-            <UIcon v-if="icon" :name="icon" :class="iconClass" />
-            <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+        <div class="flex" :class="[ui.padding, ui.gap, { 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }]">
+          <UIcon v-if="icon" :name="icon" :class="iconClass" />
+          <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
-            <div class="w-0 flex-1">
-              <p :class="ui.title">
-                <slot name="title" :title="title">
-                  {{ title }}
-                </slot>
-              </p>
-              <p v-if="(description || $slots.description)" :class="ui.description">
-                <slot name="description" :description="description">
-                  {{ description }}
-                </slot>
-              </p>
+          <div :class="ui.inner">
+            <p :class="ui.title">
+              <slot name="title" :title="title">
+                {{ title }}
+              </slot>
+            </p>
+            <p v-if="(description || $slots.description)" :class="ui.description">
+              <slot name="description" :description="description">
+                {{ description }}
+              </slot>
+            </p>
 
-              <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
-                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
-              </div>
+            <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
+              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
             </div>
-            <div class="flex-shrink-0 flex items-center gap-3">
-              <div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
-                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
-              </div>
+          </div>
+          <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
+            <template v-if="!description && !$slots.description && actions.length">
+              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+            </template>
 
-              <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
-            </div>
+            <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="onClose" />
           </div>
         </div>
         <div v-if="timeout" :class="progressClass" :style="progressStyle" />
@@ -90,7 +88,7 @@ export default defineComponent({
     },
     timeout: {
       type: Number,
-      default: 5e3
+      default: () => config.default.timeout
     },
     actions: {
       type: Array,
@@ -109,11 +107,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["close"],
@@ -124,7 +122,7 @@ export default defineComponent({
     const wrapperClass = computed(() => {
       return twMerge(twJoin(
         ui.value.wrapper,
-        ui.value.background,
+        ui.value.background?.replaceAll("{color}", props.color),
         ui.value.rounded,
         ui.value.shadow
       ), props.class);
@@ -200,7 +198,8 @@ export default defineComponent({
       onMouseover,
       onMouseleave,
       onClose,
-      onAction
+      onAction,
+      twMerge
     };
   }
 });

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

@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     timeout: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     actions: {
         type: PropType<NotificationAction[]>;
@@ -44,11 +44,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -65,6 +65,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseleave: () => void;
     onClose: () => void;
     onAction: (action: NotificationAction) => void;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: (NumberConstructor | StringConstructor)[];
@@ -92,7 +93,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     timeout: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     actions: {
         type: PropType<NotificationAction[]>;
@@ -109,15 +110,16 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: any;
     description: string;
     icon: string;
     avatar: Avatar;
@@ -126,7 +128,6 @@ declare const _default: import("vue").DefineComponent<{
     actions: NotificationAction[];
     callback: Function;
     color: any;
-    ui: Partial<any>;
     class: any;
 }, {}>;
 export default _default;

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

@@ -1,20 +1,22 @@
 <template>
-  <div :class="wrapperClass" role="region" v-bind="attrs">
-    <div v-if="notifications.length" :class="ui.container">
-      <div v-for="notification of notifications" :key="notification.id">
-        <UNotification
-          v-bind="notification"
-          :class="notification.click && 'cursor-pointer'"
-          @click="notification.click && notification.click(notification)"
-          @close="toast.remove(notification.id)"
-        >
-          <template v-for="(_, name) in $slots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
-          </template>
-        </UNotification>
+  <Teleport to="body">
+    <div :class="wrapperClass" role="region" v-bind="attrs">
+      <div v-if="notifications.length" :class="ui.container">
+        <div v-for="notification of notifications" :key="notification.id">
+          <UNotification
+            v-bind="notification"
+            :class="notification.click && 'cursor-pointer'"
+            @click="notification.click && notification.click(notification)"
+            @close="toast.remove(notification.id)"
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData" />
+            </template>
+          </UNotification>
+        </div>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <script>
@@ -36,11 +38,11 @@ export default defineComponent({
   props: {
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -3,11 +3,11 @@ import type { Notification } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -36,14 +36,14 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
 }, {}>;
 export default _default;

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

@@ -4,7 +4,7 @@
       ref="trigger"
       as="div"
       :disabled="disabled"
-      class="inline-flex w-full"
+      :class="ui.trigger"
       role="button"
       @mouseover="onMouseOver"
     >
@@ -15,10 +15,15 @@
       </slot>
     </HPopoverButton>
 
+    <Transition v-if="overlay" appear v-bind="ui.overlay.transition">
+      <div v-if="(open !== undefined) ? open : headlessOpen" :class="[ui.overlay.base, ui.overlay.background]" @click="$emit('update:open')" />
+    </Transition>
+
     <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
+
           <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
             <slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
           </HPopoverPanel>
@@ -67,19 +72,24 @@ export default defineComponent({
       type: Number,
       default: 0
     },
+    overlay: {
+      type: Boolean,
+      default: false
+    },
     popper: {
       type: Object,
       default: () => ({})
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
+  emits: ["update:open"],
   setup(props) {
     const { ui, attrs } = useUI("popover", toRef(props, "ui"), config, toRef(props, "class"));
     const popper = computed(() => defu(props.mode === "hover" ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper));

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

@@ -22,17 +22,21 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     popper: {
         type: PropType<PopperOptions>;
         default: () => {};
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -56,7 +60,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
-}, 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, "update:open"[], "update:open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     mode: {
         type: PropType<"click" | "hover">;
         default: string;
@@ -78,20 +82,26 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     popper: {
         type: PropType<PopperOptions>;
         default: () => {};
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
-}>>, {
-    ui: Partial<any>;
+}>> & {
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+}, {
+    ui: any;
     popper: PopperOptions;
     class: any;
     disabled: boolean;
@@ -99,5 +109,6 @@ declare const _default: import("vue").DefineComponent<{
     mode: "click" | "hover";
     openDelay: number;
     closeDelay: number;
+    overlay: boolean;
 }, {}>;
 export default _default;

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

@@ -58,11 +58,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "close"],
@@ -82,10 +82,10 @@ export default defineComponent({
       }
       return {
         ...ui.value.transition,
-        enterFrom: props.side === "left" ? "-translate-x-full" : "translate-x-full",
-        enterTo: "translate-x-0",
-        leaveFrom: "translate-x-0",
-        leaveTo: props.side === "left" ? "-translate-x-full" : "translate-x-full"
+        enterFrom: props.side === "left" ? ui.value.translate.left : ui.value.translate.right,
+        enterTo: ui.value.translate.base,
+        leaveFrom: ui.value.translate.base,
+        leaveTo: props.side === "left" ? ui.value.translate.left : ui.value.translate.right
       };
     });
     function close(value) {

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

@@ -27,11 +27,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -69,17 +69,17 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
     modelValue: boolean;
     appear: boolean;

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

@@ -7,15 +7,16 @@
     <div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
       <Transition appear v-bind="ui.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
 
           <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
             <slot name="text">
               {{ text }}
             </slot>
-  
+
             <span v-if="shortcuts?.length" :class="ui.shortcuts">
-              <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
+              <span :class="ui.middot">&middot;</span>
+
               <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
                 {{ shortcut }}
               </Ukbd>
@@ -69,11 +70,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -27,11 +27,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -71,14 +71,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     popper: PopperOptions;
     class: any;
     text: string;

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

@@ -2,7 +2,7 @@ import type { WatchSource } from 'vue';
 export interface ShortcutConfig {
     handler: Function;
     usingInput?: string | boolean;
-    whenever?: WatchSource<Boolean>[];
+    whenever?: WatchSource<boolean>[];
 }
 export interface ShortcutsConfig {
     [key: string]: ShortcutConfig | Function;

package/dist/runtime/composables/defineShortcuts.mjs

@@ -2,6 +2,8 @@ import { ref, computed } from "vue";
 import { logicAnd, logicNot } from "@vueuse/math";
 import { useEventListener, useDebounceFn } from "@vueuse/core";
 import { useShortcuts } from "./useShortcuts.mjs";
+const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
+const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
 export const defineShortcuts = (config, options = {}) => {
   const { macOS, usingInput } = useShortcuts();
   let shortcuts = [];
@@ -58,11 +60,13 @@ export const defineShortcuts = (config, options = {}) => {
       return null;
     }
     let shortcut;
-    if (key.includes("-") && key.includes("_")) {
-      console.trace("[Shortcut] Invalid key");
-      return null;
+    if (key.includes("-") && key !== "-" && !key.match(chainedShortcutRegex)?.length) {
+      console.trace(`[Shortcut] Invalid key: "${key}"`);
+    }
+    if (key.includes("_") && key !== "_" && !key.match(combinedShortcutRegex)?.length) {
+      console.trace(`[Shortcut] Invalid key: "${key}"`);
     }
-    const chained = key.includes("-");
+    const chained = key.includes("-") && key !== "-";
     if (chained) {
       shortcut = {
         key: key.toLowerCase(),

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

@@ -0,0 +1,20 @@
+import type { Ref } from 'vue';
+import { buttonGroup } from '#ui/ui.config';
+type ButtonGroupProps = {
+    orientation?: Ref<'horizontal' | 'vertical'>;
+    size?: Ref<string>;
+    ui?: Ref<Partial<typeof buttonGroup>>;
+    rounded?: Ref<{
+        start: string;
+        end: string;
+    }>;
+};
+export declare function useProvideButtonGroup(buttonGroupProps: ButtonGroupProps): void;
+export declare function useInjectButtonGroup({ ui, props }: {
+    ui: any;
+    props: any;
+}): {
+    size: import("vue").ComputedRef<any>;
+    rounded: import("vue").ComputedRef<any>;
+};
+export {};

package/dist/runtime/composables/useButtonGroup.mjs

@@ -0,0 +1,52 @@
+import { computed, ref, provide, inject, onMounted, onUnmounted, getCurrentInstance } from "vue";
+export function useProvideButtonGroup(buttonGroupProps) {
+  const instance = getCurrentInstance();
+  const groupKey = `group-${instance.uid}`;
+  const state = ref({
+    children: [],
+    register(child) {
+      this.children.push(child);
+    },
+    unregister(child) {
+      const index = this.children.indexOf(child);
+      if (index > -1) {
+        this.children.splice(index, 1);
+      }
+    },
+    ...buttonGroupProps
+  });
+  provide(groupKey, state);
+}
+export function useInjectButtonGroup({ ui, props }) {
+  const instance = getCurrentInstance();
+  let parent = instance.parent;
+  let groupContext;
+  while (parent && !groupContext) {
+    if (parent.type.name === "ButtonGroup") {
+      groupContext = inject(`group-${parent.uid}`);
+      break;
+    }
+    parent = parent.parent;
+  }
+  const positionInGroup = computed(() => groupContext?.value.children.indexOf(instance));
+  onMounted(() => {
+    groupContext?.value.register(instance);
+  });
+  onUnmounted(() => {
+    groupContext?.value.unregister(instance);
+  });
+  return {
+    size: computed(() => groupContext?.value.size || props.size),
+    rounded: computed(() => {
+      if (!groupContext || positionInGroup.value === -1)
+        return ui.value.rounded;
+      if (groupContext.value.children.length === 1)
+        return groupContext.value.ui.rounded;
+      if (positionInGroup.value === 0)
+        return groupContext.value.rounded.start;
+      if (positionInGroup.value === groupContext.value.children.length - 1)
+        return groupContext.value.rounded.end;
+      return "rounded-none";
+    })
+  };
+}

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

@@ -3,6 +3,8 @@ type InputProps = {
     size?: string | number | symbol;
     color?: string;
     name?: string;
+    eagerValidation?: boolean;
+    legend?: string | null;
 };
 export declare const useFormGroup: (inputProps?: InputProps, config?: any) => {
     inputId: import("vue").Ref<string | undefined>;