@nuxt/ui 2.8.1 → 2.10.0

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

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <HDialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -15,12 +15,13 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
+import { computed, toRef, defineComponent } from "vue";
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from "@headlessui/vue";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { slideover } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.slideover, slideover);
 export default defineComponent({
   components: {
     HDialog,
@@ -55,15 +56,18 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue", "close"],
-  setup(props, { attrs, emit }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.slideover));
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("slideover", toRef(props, "ui"), config, toRef(props, "class"));
     const isOpen = computed({
       get() {
         return props.modelValue;
@@ -72,7 +76,6 @@ export default defineComponent({
         emit("update:modelValue", value);
       }
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const transitionClass = computed(() => {
       if (!props.transition) {
         return {};
@@ -90,11 +93,10 @@ export default defineComponent({
       emit("close");
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       isOpen,
-      wrapperClass,
       transitionClass,
       close
     };

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

@@ -1,4 +1,3 @@
-/// <reference types="lodash" />
 import type { WritableComputedRef, PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
@@ -26,17 +25,20 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     isOpen: WritableComputedRef<boolean>;
-    wrapperClass: import("vue").ComputedRef<string>;
     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<{
@@ -65,15 +67,20 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     modelValue: boolean;
     appear: boolean;
     overlay: boolean;

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

@@ -1,22 +1,26 @@
 <template>
-  <div ref="trigger" :class="wrapperClass" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
+  <div ref="trigger" :class="ui.wrapper" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
     <slot :open="open">
       Hover
     </slot>
 
     <div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
       <Transition appear v-bind="ui.transition">
-        <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
-          <slot name="text">
-            {{ text }}
-          </slot>
+        <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)]" />
 
-          <span v-if="shortcuts?.length" :class="ui.shortcuts">
-            <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
-            <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
-              {{ shortcut }}
-            </Ukbd>
-          </span>
+          <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>
+              <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
+                {{ shortcut }}
+              </Ukbd>
+            </span>
+          </div>
         </div>
       </Transition>
     </div>
@@ -24,14 +28,15 @@
 </template>
 
 <script>
-import { computed, ref, defineComponent } from "vue";
+import { computed, ref, toRef, defineComponent } from "vue";
 import { defu } from "defu";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
 import UKbd from "../elements/Kbd.vue";
+import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { tooltip } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.tooltip, tooltip);
 export default defineComponent({
   components: {
     UKbd
@@ -62,20 +67,22 @@ export default defineComponent({
       type: Object,
       default: () => ({})
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.tooltip));
+  setup(props) {
+    const { ui, attrs } = useUI("tooltip", toRef(props, "ui"), config, toRef(props, "class"));
     const popper = computed(() => defu({}, props.popper, ui.value.popper));
     const [trigger, container] = usePopper(popper.value);
     const open = ref(false);
     let openTimeout = null;
     let closeTimeout = null;
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     function onMouseOver() {
       if (closeTimeout) {
         clearTimeout(closeTimeout);
@@ -103,13 +110,14 @@ export default defineComponent({
       }, props.closeDelay);
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       open,
-      wrapperClass,
       onMouseOver,
       onMouseLeave
     };

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

@@ -1,6 +1,5 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { PopperOptions } from '../../types/popper';
+import type { PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     text: {
         type: StringConstructor;
@@ -26,19 +25,23 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<PopperOptions>;
         default: () => {};
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     open: import("vue").Ref<boolean>;
-    wrapperClass: import("vue").ComputedRef<string>;
     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<{
@@ -66,13 +69,18 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<PopperOptions>;
         default: () => {};
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
+    ui: Partial<any>;
     popper: PopperOptions;
+    class: any;
     text: string;
     openDelay: number;
     closeDelay: number;

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

@@ -1,6 +1,16 @@
-export declare const useFormGroup: () => {
+type InputProps = {
+    id?: string;
+    size?: string | number | symbol;
+    color?: string;
+    name?: string;
+};
+export declare const useFormGroup: (inputProps?: InputProps, config?: any) => {
+    inputId: import("vue").Ref<string | undefined>;
+    name: import("vue").ComputedRef<string | undefined>;
+    size: import("vue").ComputedRef<any>;
+    color: import("vue").ComputedRef<string | undefined>;
     emitFormBlur: () => void;
     emitFormInput: import("@vueuse/shared").PromisifyFn<() => void>;
     emitFormChange: () => void;
-    formGroup: undefined;
 };
+export {};

package/dist/runtime/composables/useFormGroup.mjs

@@ -1,8 +1,19 @@
-import { inject, ref } from "vue";
+import { inject, ref, computed, onMounted } from "vue";
 import { useDebounceFn } from "@vueuse/core";
-export const useFormGroup = () => {
+export const useFormGroup = (inputProps, config) => {
   const formBus = inject("form-events", void 0);
   const formGroup = inject("form-group", void 0);
+  const formInputs = inject("form-inputs", void 0);
+  const inputId = ref(inputProps?.id);
+  onMounted(() => {
+    inputId.value = inputProps?.id ?? formGroup?.inputId.value;
+    if (formGroup) {
+      formGroup.inputId.value = inputId.value;
+      if (formInputs) {
+        formInputs.value[formGroup.name.value] = inputId;
+      }
+    }
+  });
   const blurred = ref(false);
   function emitFormEvent(type, path) {
     if (formBus) {
@@ -22,9 +33,15 @@ export const useFormGroup = () => {
     }
   }, 300);
   return {
+    inputId,
+    name: computed(() => inputProps?.name ?? formGroup?.name.value),
+    size: computed(() => {
+      const formGroupSize = config.size[formGroup?.size.value] ? formGroup?.size.value : null;
+      return inputProps?.size ?? formGroupSize ?? config?.default?.size;
+    }),
+    color: computed(() => formGroup?.error?.value ? "red" : inputProps?.color),
     emitFormBlur,
     emitFormInput,
-    emitFormChange,
-    formGroup
+    emitFormChange
   };
 };

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

@@ -1,10 +1,10 @@
 import type { Ref } from 'vue';
-import { VirtualElement } from '@popperjs/core/lib/popper-lite';
+import type { VirtualElement } from '@popperjs/core/lib/popper-lite';
 import type { Instance } from '@popperjs/core';
-import { MaybeElement } from '@vueuse/core';
+import type { MaybeElement } from '@vueuse/core';
 import type { PopperOptions } from '../types/popper';
 export declare const createPopper: <TModifier extends Partial<import("@popperjs/core").Modifier<any, any>>>(reference: Element | VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core").OptionsGeneric<TModifier>> | undefined) => Instance;
-export declare function usePopper({ locked, overflowPadding, offsetDistance, offsetSkid, gpuAcceleration, adaptive, scroll, resize, placement, strategy }: PopperOptions, virtualReference?: Ref<Element | VirtualElement>): readonly [Ref<MaybeElement>, Ref<MaybeElement>, Ref<{
+export declare function usePopper({ locked, overflowPadding, offsetDistance, offsetSkid, gpuAcceleration, adaptive, scroll, resize, arrow, placement, strategy }: PopperOptions, virtualReference?: Ref<Element | VirtualElement>): readonly [Ref<MaybeElement>, Ref<MaybeElement>, Ref<{
     state: {
         elements: {
             reference: Element | {

package/dist/runtime/composables/usePopper.mjs

@@ -1,14 +1,14 @@
 import { ref, onMounted, watchEffect } from "vue";
 import { popperGenerator, defaultModifiers } from "@popperjs/core/lib/popper-lite";
-import { omitBy, isUndefined } from "lodash-es";
 import flip from "@popperjs/core/lib/modifiers/flip";
 import offset from "@popperjs/core/lib/modifiers/offset";
 import preventOverflow from "@popperjs/core/lib/modifiers/preventOverflow";
 import computeStyles from "@popperjs/core/lib/modifiers/computeStyles";
 import eventListeners from "@popperjs/core/lib/modifiers/eventListeners";
+import arrowModifier from "@popperjs/core/lib/modifiers/arrow";
 import { unrefElement } from "@vueuse/core";
 export const createPopper = popperGenerator({
-  defaultModifiers: [...defaultModifiers, offset, flip, preventOverflow, computeStyles, eventListeners]
+  defaultModifiers: [...defaultModifiers, offset, flip, preventOverflow, computeStyles, eventListeners, arrowModifier]
 });
 export function usePopper({
   locked = false,
@@ -19,6 +19,7 @@ export function usePopper({
   adaptive = true,
   scroll = true,
   resize = true,
+  arrow = false,
   placement,
   strategy
 }, virtualReference) {
@@ -41,36 +42,51 @@ export function usePopper({
       if (!referenceEl) {
         return;
       }
-      instance.value = createPopper(referenceEl, popperEl, omitBy({
-        placement,
-        strategy,
-        modifiers: [{
-          name: "flip",
-          enabled: !locked
-        }, {
-          name: "preventOverflow",
-          options: {
-            padding: overflowPadding
+      const config = {
+        modifiers: [
+          {
+            name: "flip",
+            enabled: !locked
+          },
+          {
+            name: "preventOverflow",
+            options: {
+              padding: overflowPadding
+            }
+          },
+          {
+            name: "offset",
+            options: {
+              offset: [offsetSkid, offsetDistance]
+            }
+          },
+          {
+            name: "computeStyles",
+            options: {
+              adaptive,
+              gpuAcceleration
+            }
+          },
+          {
+            name: "eventListeners",
+            options: {
+              scroll,
+              resize
+            }
+          },
+          {
+            name: "arrow",
+            enabled: arrow
           }
-        }, {
-          name: "offset",
-          options: {
-            offset: [offsetSkid, offsetDistance]
-          }
-        }, {
-          name: "computeStyles",
-          options: {
-            adaptive,
-            gpuAcceleration
-          }
-        }, {
-          name: "eventListeners",
-          options: {
-            scroll,
-            resize
-          }
-        }]
-      }, isUndefined));
+        ]
+      };
+      if (placement) {
+        config.placement = placement;
+      }
+      if (strategy) {
+        config.strategy = strategy;
+      }
+      instance.value = createPopper(referenceEl, popperEl, config);
       onInvalidate(instance.value.destroy);
     });
   });

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

@@ -5,13 +5,13 @@ export declare function useToast(): {
         title?: string | undefined;
         description?: string | undefined;
         icon?: string | undefined;
-        avatar?: import("../types/avatar").Avatar | undefined;
-        closeButton?: import("../types/button").Button | undefined;
+        avatar?: import("../types").Avatar | undefined;
+        closeButton?: import("../types").Button | undefined;
         timeout?: number | undefined;
         actions?: import("../types/notification").NotificationAction[] | undefined;
         click?: Function | undefined;
         callback?: Function | undefined;
-        color?: string | undefined;
+        color?: any;
         ui?: any;
     };
     remove: (id: string) => void;

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

@@ -0,0 +1,10 @@
+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) => {
+    ui: import("vue").ComputedRef<T>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+};

package/dist/runtime/composables/useUI.mjs

@@ -0,0 +1,24 @@
+import { computed, toValue, useAttrs } from "vue";
+import { useAppConfig } from "#imports";
+import { mergeConfig, omit, get } from "../utils/index.mjs";
+export const useUI = (key, $ui, $config, $wrapperClass, withAppConfig = false) => {
+  const $attrs = useAttrs();
+  const appConfig = useAppConfig();
+  const ui = computed(() => {
+    const _ui = toValue($ui);
+    const _config = toValue($config);
+    const _wrapperClass = toValue($wrapperClass);
+    return mergeConfig(
+      _ui?.strategy || appConfig.ui?.strategy,
+      _wrapperClass ? { wrapper: _wrapperClass } : {},
+      _ui || {},
+      process.dev || withAppConfig ? get(appConfig.ui, key, {}) : {},
+      _config || {}
+    );
+  });
+  const attrs = computed(() => omit($attrs, ["class"]));
+  return {
+    ui,
+    attrs
+  };
+};

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

@@ -1,9 +1,15 @@
+import { avatar } from '../ui.config'
+import colors from '#ui-colors'
+
+export type AvatarSize = keyof typeof avatar.size
+export type AvatarChipColor = 'gray' | typeof colors[number]
+export type AvatarChipPosition = keyof typeof avatar.chip.position
+
 export interface Avatar {
   src?: string | boolean
   alt?: string
   text?: string
-  size?: string
-  chipColor?: string
-  chipVariant?: string
-  chipPosition?: string
+  size?: AvatarSize
+  chipColor?: AvatarChipColor
+  chipPosition?: AvatarChipPosition
 }

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

@@ -0,0 +1,14 @@
+import { badge } from '../ui.config'
+import type { NestedKeyOf } from '.'
+import colors from '#ui-colors'
+
+export type BadgeSize = keyof typeof badge.size
+export type BadgeColor = keyof typeof badge.color | typeof colors[number]
+export type BadgeVariant = keyof typeof badge.variant | NestedKeyOf<typeof badge.color>
+
+export interface Badge {
+  label?: string
+  size?: BadgeSize
+  color?: BadgeColor
+  variant?: BadgeVariant
+}

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

@@ -1,4 +1,11 @@
 import type { Link } from './link'
+import { button } from '../ui.config'
+import type { NestedKeyOf } from '.'
+import colors from '#ui-colors'
+
+export type ButtonSize = keyof typeof button.size
+export type ButtonColor = keyof typeof button.color | typeof colors[number]
+export type ButtonVariant = keyof typeof button.variant | NestedKeyOf<typeof button.color>
 
 export interface Button extends Link {
   type?: string
@@ -7,9 +14,9 @@ export interface Button extends Link {
   loading?: boolean
   disabled?: boolean
   padded?: boolean
-  size?: string
-  color?: string
-  variant?: string
+  size?: ButtonSize
+  color?: ButtonColor
+  variant?: ButtonVariant
   icon?: string
   loadingIcon?: string
   leadingIcon?: string

package/dist/runtime/types/command-palette.d.ts

@@ -21,6 +21,8 @@ export interface Group {
   key: string
   active?: string
   inactive?: string
-  commands: Command[]
+  commands?: Command[]
+  search?: Function
+  filter?: Function
   [key: string]: any
 }

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

@@ -1,10 +1,16 @@
-export interface FormError {
-  path: string
+import { Ref } from 'vue'
+
+export interface FormError<T extends string = string> {
+  path: T
   message: string
 }
 
+export interface FormErrorWithId extends FormError {
+  id: string
+}
+
 export interface Form<T> {
-  validate(path?: string, opts: { silent?: boolean } = { silent: false }): Promise<T>
+  validate(path?: string, opts?: { silent?: boolean }): Promise<T>
   clear(path?: string): void
   errors: Ref<FormError[]>
   setErrors(errs: FormError[], path?: string): void
@@ -12,10 +18,18 @@ export interface Form<T> {
 }
 
 export type FormSubmitEvent<T> = SubmitEvent & { data: T }
+export type FormErrorEvent = SubmitEvent & { errors: FormErrorWithId[] }
 
 export type FormEventType = 'blur' | 'input' | 'change' | 'submit'
 
 export interface FormEvent {
   type: FormEventType
-  path: string
+  path?: string
+}
+
+export interface InjectedFormGroupValue {
+  inputId: Ref<string | undefined>
+  name: Ref<string>
+  size: Ref<string | number | symbol>
+  error: Ref<string | boolean>
 }

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

@@ -1,12 +1,16 @@
 export * from './accordion'
 export * from './avatar'
+export * from './badge'
 export * from './button'
 export * from './clipboard'
 export * from './command-palette'
 export * from './dropdown'
 export * from './form'
 export * from './link'
+export * from './meter'
 export * from './notification'
 export * from './popper'
+export * from './progress'
 export * from './tabs'
 export * from './vertical-navigation'
+export * from './utils'

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

@@ -1,6 +1,7 @@
 import type { NuxtLinkProps } from '#app'
 
 export interface Link extends NuxtLinkProps {
+  active?: boolean
   exact?: boolean
   exactQuery?: boolean
   exactMatch?: boolean