@nuxt/ui 2.8.0 → 2.9.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;
 }, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     modelValue: boolean;
     appear: boolean;
     overlay: boolean;

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

@@ -1,5 +1,5 @@
 <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>
@@ -24,14 +24,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 +63,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 +106,12 @@ export default defineComponent({
       }, props.closeDelay);
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       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,22 @@ 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>>;
     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 +68,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;
+    color?: string;
+    name?: string;
+};
+export declare const useFormGroup: (inputProps?: InputProps, config?: any) => {
+    inputId: import("vue").ComputedRef<any>;
+    name: import("vue").ComputedRef<any>;
+    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,11 @@
-import { inject, ref } from "vue";
+import { inject, ref, computed } 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);
+  if (formGroup) {
+    formGroup.inputId.value = inputProps?.id ?? formGroup?.inputId.value;
+  }
   const blurred = ref(false);
   function emitFormEvent(type, path) {
     if (formBus) {
@@ -22,9 +25,12 @@ export const useFormGroup = () => {
     }
   }, 300);
   return {
+    inputId: computed(() => inputProps.id ?? formGroup?.inputId.value),
+    name: computed(() => inputProps?.name ?? formGroup?.name.value),
+    size: computed(() => inputProps?.size ?? formGroup?.size.value ?? config?.default?.size),
+    color: computed(() => formGroup?.error?.value ? "red" : inputProps?.color),
     emitFormBlur,
     emitFormInput,
-    emitFormChange,
-    formGroup
+    emitFormChange
   };
 };

package/dist/runtime/composables/usePopper.mjs

@@ -1,6 +1,5 @@
 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";
@@ -41,36 +40,47 @@ 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: "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 { 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>) => {
+    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) => {
+  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 ? 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,7 @@ export interface Group {
   key: string
   active?: string
   inactive?: string
-  commands: Command[]
+  commands?: Command[]
+  search?: Function
   [key: string]: any
 }

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

@@ -4,7 +4,7 @@ export interface FormError {
 }
 
 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
@@ -19,3 +19,10 @@ export interface FormEvent {
   type: FormEventType
   path: string
 }
+
+export interface InjectedFormGroupValue {
+  inputId: Ref<string>
+  name: Ref<string>
+  size: Ref<string>
+  error: Ref<string | boolean>
+}

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

@@ -1,5 +1,6 @@
 export * from './accordion'
 export * from './avatar'
+export * from './badge'
 export * from './button'
 export * from './clipboard'
 export * from './command-palette'
@@ -10,3 +11,4 @@ export * from './notification'
 export * from './popper'
 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

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

@@ -1,6 +1,8 @@
 import type { Avatar } from './avatar'
 import type { Button } from './button'
-import appConfig from '#build/app.config'
+import colors from '#ui-colors'
+
+export type NotificationColor = 'gray' | typeof colors[number]
 
 export interface NotificationAction extends Button {
   click?: Function
@@ -17,6 +19,6 @@ export interface Notification {
   actions?: NotificationAction[]
   click?: Function
   callback?: Function
-  color?: string
-  ui?: Partial<typeof appConfig.ui.notification>
+  color?: NotificationColor
+  ui?: any
 }

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

@@ -3,4 +3,5 @@ export interface TabItem {
   slot?: string
   disabled?: boolean
   content?: string
+  [key: string]: any
 }

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

@@ -0,0 +1,11 @@
+export type Strategy = 'merge' | 'override';
+
+export type NestedKeyOf<ObjectType extends object> = {
+  [Key in keyof ObjectType]: ObjectType[Key] extends object
+  ? NestedKeyOf<ObjectType[Key]>
+  : Key;
+}[keyof ObjectType];
+
+export type DeepPartial<T> = Partial<{
+  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string };
+}>;