@nuxt/ui 2.11.0 → 2.12.0

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

@@ -1,14 +1,15 @@
 <template>
-  <HPopover ref="popover" v-slot="{ open: headlessOpen, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
+  <!-- eslint-disable-next-line vue/no-template-shadow -->
+  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
       :disabled="disabled"
-      class="inline-flex w-full"
+      :class="ui.trigger"
       role="button"
       @mouseover="onMouseOver"
     >
-      <slot :open="(open !== undefined) ? open : headlessOpen" :close="close">
+      <slot :open="open" :close="close">
         <button :disabled="disabled">
           Open
         </button>
@@ -16,15 +17,16 @@
     </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')" />
+      <div v-if="open" :class="[ui.overlay.base, ui.overlay.background]" />
     </Transition>
 
-    <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="open" 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" />
+            <slot name="panel" :open="open" :close="close" />
           </HPopoverPanel>
         </div>
       </Transition>
@@ -33,7 +35,7 @@
 </template>
 
 <script>
-import { computed, ref, toRef, onMounted, defineComponent } from "vue";
+import { computed, ref, toRef, onMounted, defineComponent, watch } from "vue";
 import { defu } from "defu";
 import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from "@headlessui/vue";
 import { useUI } from "../../composables/useUI";
@@ -81,15 +83,15 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:open"],
-  setup(props) {
+  setup(props, { emit }) {
     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));
     const [trigger, container] = usePopper(popper.value);
@@ -104,16 +106,35 @@ export default defineComponent({
       }
       const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides);
       popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]];
+      if (props.open) {
+        popoverApi.value?.togglePopover();
+      }
     });
     const containerStyle = computed(() => {
+      if (props.mode !== "hover") {
+        return {};
+      }
       const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
+      const placement = popper.value.placement?.split("-")[0];
       const padding = `${offsetDistance}px`;
-      return props.mode === "hover" ? {
-        paddingTop: padding,
-        paddingBottom: padding,
-        paddingLeft: padding,
-        paddingRight: padding
-      } : {};
+      if (placement === "top" || placement === "bottom") {
+        return {
+          paddingTop: padding,
+          paddingBottom: padding
+        };
+      } else if (placement === "left" || placement === "right") {
+        return {
+          paddingLeft: padding,
+          paddingRight: padding
+        };
+      } else {
+        return {
+          paddingTop: padding,
+          paddingBottom: padding,
+          paddingLeft: padding,
+          paddingRight: padding
+        };
+      }
     });
     function onMouseOver() {
       if (props.mode !== "hover" || !popoverApi.value) {
@@ -147,6 +168,22 @@ export default defineComponent({
         closeTimeout = null;
       }, props.closeDelay);
     }
+    watch(() => props.open, (newValue, oldValue) => {
+      if (!popoverApi.value)
+        return;
+      if (oldValue === void 0 || newValue === oldValue)
+        return;
+      if (newValue) {
+        popoverApi.value.popoverState = 0;
+      } else {
+        popoverApi.value.closePopover();
+      }
+    });
+    watch(() => popoverApi.value?.popoverState, (newValue, oldValue) => {
+      if (oldValue === void 0 || newValue === oldValue)
+        return;
+      emit("update:open", newValue === 0);
+    });
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

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

@@ -32,31 +32,41 @@ 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>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    popover: any;
+    popover: import("vue").Ref<any>;
     popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     containerStyle: import("vue").ComputedRef<{
+        paddingTop?: undefined;
+        paddingBottom?: undefined;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
+    } | {
         paddingTop: string;
         paddingBottom: string;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
+    } | {
         paddingLeft: string;
         paddingRight: string;
-    } | {
         paddingTop?: undefined;
         paddingBottom?: undefined;
-        paddingLeft?: undefined;
-        paddingRight?: undefined;
+    } | {
+        paddingTop: string;
+        paddingBottom: string;
+        paddingLeft: string;
+        paddingRight: string;
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
@@ -92,16 +102,16 @@ 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:open"?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    ui: any;
     popper: PopperOptions;
     class: any;
     disabled: boolean;

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,22 +69,22 @@ 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;
+    transition: boolean;
     class: any;
     modelValue: boolean;
     appear: boolean;
     overlay: boolean;
-    transition: boolean;
     preventClose: boolean;
     side: "right" | "left";
 }, {}>;

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/useFormGroup.d.ts

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

package/dist/runtime/composables/useFormGroup.mjs

@@ -7,7 +7,7 @@ export const useFormGroup = (inputProps, config) => {
   const formInputs = inject("form-inputs", void 0);
   const inputId = ref(inputProps?.id);
   onMounted(() => {
-    inputId.value = inputProps?.isFieldset ? null : inputProps?.id ?? uid();
+    inputId.value = inputProps?.legend === null || inputProps.legend ? void 0 : inputProps?.id ?? uid();
     if (formGroup) {
       formGroup.inputId.value = inputId.value;
       if (formInputs) {

package/dist/runtime/composables/useShortcuts.mjs

@@ -5,7 +5,9 @@ export const _useShortcuts = () => {
   const metaSymbol = ref(" ");
   const activeElement = useActiveElement();
   const usingInput = computed(() => {
-    const usingInput2 = !!(activeElement.value?.tagName === "INPUT" || activeElement.value?.tagName === "TEXTAREA" || activeElement.value?.contentEditable === "true");
+    const tagName = activeElement.value?.tagName;
+    const contentEditable = activeElement.value?.contentEditable;
+    const usingInput2 = !!(tagName === "INPUT" || tagName === "TEXTAREA" || contentEditable === "true" || contentEditable === "plaintext-only");
     if (usingInput2) {
       return activeElement.value?.name || true;
     }

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

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
 import type { Strategy } from '../types';
-export declare const useUI: <T>(key: any, $ui: Ref<Partial<T & {
-    strategy: Strategy;
-}> | undefined>, $config?: T | Ref<T> | undefined, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
+export declare const useUI: <T>(key: any, $ui?: Ref<(Partial<T> & {
+    strategy?: Strategy | undefined;
+}) | undefined> | undefined, $config?: T | Ref<T> | undefined, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
     ui: import("vue").ComputedRef<T>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;

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

@@ -1,7 +1,12 @@
 import { alert } from '../ui.config'
 import type { NestedKeyOf, ExtractDeepKey, ExtractDeepObject } from '.'
+import type { Button } from './button'
 import colors from '#ui-colors'
 import type { AppConfig } from 'nuxt/schema'
 
 export type AlertColor = keyof typeof alert.color | ExtractDeepKey<AppConfig, ['ui', 'alert', 'color']> | typeof colors[number]
 export type AlertVariant = keyof typeof alert.variant | ExtractDeepKey<AppConfig, ['ui', 'alert', 'variant']> | NestedKeyOf<typeof alert.color> | NestedKeyOf<ExtractDeepObject<AppConfig, ['ui', 'alert', 'color']>>
+
+export interface AlertAction extends Button {
+  click?: Function
+}

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

@@ -2,6 +2,9 @@ import type { Link } from './link'
 
 export interface BreadcrumbLink extends Link {
   label: string
+  labelClass?: string
   icon?: string
   iconClass?: string
+  // FIXME: This is a workaround for `link.to` not being resolved although it extends `NuxtLinkProps`
+  [key: string]: any
 }

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

@@ -3,11 +3,13 @@ import type { Avatar } from './avatar'
 
 export interface DropdownItem extends NuxtLinkProps {
   label: string
+  labelClass?: string
   slot?: string
   icon?: string
   iconClass?: string
   avatar?: Avatar
   shortcuts?: string[]
   disabled?: boolean
+  class?: string
   click?: Function
 }

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

@@ -15,6 +15,7 @@ export interface Form<T> {
   errors: Ref<FormError[]>
   setErrors(errs: FormError[], path?: string): void
   getErrors(path?: string): FormError[]
+  submit(): Promise<void>
 }
 
 export type FormSubmitEvent<T> = SubmitEvent & { data: T }
@@ -31,6 +32,6 @@ export interface InjectedFormGroupValue {
   inputId: Ref<string | undefined>
   name: Ref<string>
   size: Ref<string | number | symbol>
-  error: Ref<string | boolean>
+  error: Ref<string | boolean | undefined>
   eagerValidation: Ref<boolean>
 }

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

@@ -1,6 +1,8 @@
 import type { Placement, PositioningStrategy } from '@popperjs/core'
 
 export interface PopperOptions {
+  // Workaround for weak types: https://mariusschulz.com/blog/weak-type-detection-in-typescript#workarounds-for-weak-types
+  [key: string]: unknown
   locked?: boolean
   overflowPadding?: number
   offsetDistance?: number

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

@@ -1,7 +1,7 @@
 export type Strategy = 'merge' | 'override'
 
-export type NestedKeyOf<ObjectType extends object> = {
-  [Key in keyof ObjectType]: ObjectType[Key] extends object
+export type NestedKeyOf<ObjectType extends Record<string, any>> = {
+  [Key in keyof ObjectType]: ObjectType[Key] extends Record<string, any>
   ? NestedKeyOf<ObjectType[Key]>
   : Key
 }[keyof ObjectType]
@@ -20,9 +20,9 @@ type DeepKey<T, Keys extends string[]> =
     : T
 
 export type ExtractDeepKey<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
-  ? Result extends object ? keyof Result : never
+  ? Result extends Record<string, any> ? keyof Result : never
   : never
 
 export type ExtractDeepObject<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
-  ? Result extends object ? Result : never
+  ? Result extends Record<string, any> ? Result : never
   : never

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

@@ -3,6 +3,7 @@ import type { Avatar } from './avatar'
 
 export interface VerticalNavigationLink extends Link {
   label: string
+  labelClass?: string
   icon?: string
   iconClass?: string
   avatar?: Avatar

package/dist/runtime/ui.config/data/table.d.ts

@@ -43,8 +43,8 @@ declare const _default: {
             icon: string;
             trailing: boolean;
             square: boolean;
-            color: string;
-            variant: string;
+            color: "gray";
+            variant: "ghost";
             class: string;
         };
         loadingState: {

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

@@ -15,7 +15,7 @@ declare const _default: {
         openIcon: string;
         closeIcon: string;
         class: string;
-        variant: string;
+        variant: "soft";
     };
 };
 export default _default;

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

@@ -1,5 +1,6 @@
 declare const _default: {
     wrapper: string;
+    inner: string;
     title: string;
     description: string;
     actions: string;
@@ -12,7 +13,7 @@ declare const _default: {
     };
     avatar: {
         base: string;
-        size: string;
+        size: "md";
     };
     color: {
         white: {
@@ -31,9 +32,9 @@ declare const _default: {
         icon: null;
         closeButton: null;
         actionButton: {
-            size: string;
-            color: string;
-            variant: string;
+            size: "xs";
+            color: "primary";
+            variant: "link";
         };
     };
 };

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

@@ -1,5 +1,6 @@
 export default {
   wrapper: "w-full relative overflow-hidden",
+  inner: "w-0 flex-1",
   title: "text-sm font-medium",
   description: "mt-1 text-sm leading-4 opacity-90",
   actions: "flex items-center gap-2 mt-3 flex-shrink-0",

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

@@ -2,6 +2,9 @@ declare const _default: {
     base: string;
     font: string;
     rounded: string;
+    truncate: string;
+    block: string;
+    inline: string;
     size: {
         '2xs': string;
         xs: string;
@@ -58,6 +61,7 @@ declare const _default: {
     };
     icon: {
         base: string;
+        loading: string;
         size: {
             '2xs': string;
             xs: string;

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

@@ -2,6 +2,9 @@ export default {
   base: "focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0",
   font: "font-medium",
   rounded: "rounded-md",
+  truncate: "text-left break-all line-clamp-1",
+  block: "w-full flex justify-center items-center",
+  inline: "inline-flex items-center",
   size: {
     "2xs": "text-xs",
     xs: "text-xs",
@@ -58,6 +61,7 @@ export default {
   },
   icon: {
     base: "flex-shrink-0",
+    loading: "animate-spin",
     size: {
       "2xs": "h-4 w-4",
       xs: "h-4 w-4",