@nuxt/ui 2.11.0 → 2.12.0

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

@@ -5,5 +5,97 @@ declare const _default: {
     };
     rounded: string;
     shadow: string;
+    orientation: {
+        'rounded-none': {
+            horizontal: {
+                start: string;
+                end: string;
+            };
+            vertical: {
+                start: string;
+                end: string;
+            };
+        };
+        'rounded-sm': {
+            horizontal: {
+                start: string;
+                end: string;
+            };
+            vertical: {
+                start: string;
+                end: string;
+            };
+        };
+        rounded: {
+            horizontal: {
+                start: string;
+                end: string;
+            };
+            vertical: {
+                start: string;
+                end: string;
+            };
+        };
+        'rounded-md': {
+            horizontal: {
+                start: string;
+                end: string;
+            };
+            vertical: {
+                start: string;
+                end: string;
+            };
+        };
+        'rounded-lg': {
+            horizontal: {
+                start: string;
+                end: string;
+            };
+            vertical: {
+                start: string;
+                end: string;
+            };
+        };
+        'rounded-xl': {
+            horizontal: {
+                start: string;
+                end: string;
+            };
+            vertical: {
+                start: string;
+                end: string;
+            };
+        };
+        'rounded-2xl': {
+            horizontal: {
+                start: string;
+                end: string;
+            };
+            vertical: {
+                start: string;
+                end: string;
+            };
+        };
+        'rounded-3xl': {
+            horizontal: {
+                start: string;
+                end: string;
+            };
+            vertical: {
+                start: string;
+                end: string;
+            };
+        };
+        'rounded-full': {
+            horizontal: {
+                start: string;
+                end: string;
+            };
+            vertical: {
+                start: string;
+                end: string;
+            };
+        };
+    };
 };
 export default _default;

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

@@ -4,5 +4,16 @@ export default {
     vertical: "inline-flex flex-col -space-y-px"
   },
   rounded: "rounded-md",
-  shadow: "shadow-sm"
+  shadow: "shadow-sm",
+  orientation: {
+    "rounded-none": { horizontal: { start: "rounded-s-none", end: "rounded-e-none" }, vertical: { start: "rounded-t-none", end: "rounded-b-none" } },
+    "rounded-sm": { horizontal: { start: "rounded-s-sm", end: "rounded-e-sm" }, vertical: { start: "rounded-t-sm", end: "rounded-b-sm" } },
+    rounded: { horizontal: { start: "rounded-s", end: "rounded-e" }, vertical: { start: "rounded-t", end: "rounded-b" } },
+    "rounded-md": { horizontal: { start: "rounded-s-md", end: "rounded-e-md" }, vertical: { start: "rounded-t-md", end: "rounded-b-md" } },
+    "rounded-lg": { horizontal: { start: "rounded-s-lg", end: "rounded-e-lg" }, vertical: { start: "rounded-t-lg", end: "rounded-b-lg" } },
+    "rounded-xl": { horizontal: { start: "rounded-s-xl", end: "rounded-e-xl" }, vertical: { start: "rounded-t-xl", end: "rounded-b-xl" } },
+    "rounded-2xl": { horizontal: { start: "rounded-s-2xl", end: "rounded-e-2xl" }, vertical: { start: "rounded-t-2xl", end: "rounded-b-2xl" } },
+    "rounded-3xl": { horizontal: { start: "rounded-s-3xl", end: "rounded-e-3xl" }, vertical: { start: "rounded-t-3xl", end: "rounded-b-3xl" } },
+    "rounded-full": { horizontal: { start: "rounded-s-full", end: "rounded-e-full" }, vertical: { start: "rounded-t-full", end: "rounded-b-full" } }
+  }
 };

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

@@ -1,6 +1,7 @@
 declare const _default: {
     wrapper: string;
     container: string;
+    trigger: string;
     width: string;
     height: string;
     background: string;
@@ -25,8 +26,9 @@ declare const _default: {
         };
         avatar: {
             base: string;
-            size: string;
+            size: "3xs";
         };
+        label: string;
         shortcuts: string;
     };
     transition: {

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

@@ -1,7 +1,8 @@
-import _popperArrow from "../_popperArrow.mjs";
+import { arrow } from "../popper.mjs";
 export default {
   wrapper: "relative inline-flex text-left rtl:text-right",
   container: "z-20 group",
+  trigger: "inline-flex w-full",
   width: "w-48",
   height: "",
   background: "bg-white dark:bg-gray-800",
@@ -28,6 +29,7 @@ export default {
       base: "flex-shrink-0",
       size: "3xs"
     },
+    label: "truncate",
     shortcuts: "hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto"
   },
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
@@ -44,7 +46,7 @@ export default {
     strategy: "fixed"
   },
   arrow: {
-    ..._popperArrow,
+    ...arrow,
     ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",
     background: "before:bg-white dark:before:bg-gray-700"
   }

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

@@ -5,8 +5,48 @@ declare const _default: {
     transition: string;
     rounded: string;
     shadow: string;
+    list: string;
+    orientation: {
+        'rounded-none': {
+            left: string;
+            right: string;
+        };
+        'rounded-sm': {
+            left: string;
+            right: string;
+        };
+        rounded: {
+            left: string;
+            right: string;
+        };
+        'rounded-md': {
+            left: string;
+            right: string;
+        };
+        'rounded-lg': {
+            left: string;
+            right: string;
+        };
+        'rounded-xl': {
+            left: string;
+            right: string;
+        };
+        'rounded-2xl': {
+            left: string;
+            right: string;
+        };
+        'rounded-3xl': {
+            left: string;
+            right: string;
+        };
+        'rounded-full': {
+            left: string;
+            right: string;
+        };
+    };
     default: {
         size: string;
+        icon: string;
     };
 };
 export default _default;

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

@@ -5,7 +5,20 @@ export default {
   transition: "transition-all",
   rounded: "rounded-full",
   shadow: "",
+  list: "list-disc list-inside",
+  orientation: {
+    "rounded-none": { left: "rounded-s-none", right: "rounded-e-none" },
+    "rounded-sm": { left: "rounded-s-sm", right: "rounded-e-sm" },
+    rounded: { left: "rounded-s", right: "rounded-e" },
+    "rounded-md": { left: "rounded-s-md", right: "rounded-e-md" },
+    "rounded-lg": { left: "rounded-s-lg", right: "rounded-e-lg" },
+    "rounded-xl": { left: "rounded-s-xl", right: "rounded-e-xl" },
+    "rounded-2xl": { left: "rounded-s-2xl", right: "rounded-e-2xl" },
+    "rounded-3xl": { left: "rounded-s-3xl", right: "rounded-e-3xl" },
+    "rounded-full": { left: "rounded-s-full", right: "rounded-e-full" }
+  },
   default: {
-    size: "md"
+    size: "md",
+    icon: "i-heroicons-minus-20-solid"
   }
 };

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

@@ -1,11 +1,14 @@
 declare const _default: {
     wrapper: string;
+    container: string;
     base: string;
+    form: string;
     rounded: string;
     color: string;
     background: string;
     border: string;
     ring: string;
+    inner: string;
     label: string;
     required: string;
     help: string;

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

@@ -1,11 +1,14 @@
 export default {
   wrapper: "relative flex items-start",
+  container: "flex items-center h-5",
   base: "h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent",
+  form: "form-checkbox",
   rounded: "rounded",
   color: "text-{color}-500 dark:text-{color}-400",
   background: "bg-white dark:bg-gray-900",
   border: "border border-gray-300 dark:border-gray-700",
   ring: "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
+  inner: "ms-3 flex flex-col",
   label: "text-sm font-medium text-gray-700 dark:text-gray-200",
   required: "text-sm text-red-500 dark:text-red-400",
   help: "text-sm text-gray-500 dark:text-gray-400",

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

@@ -1,6 +1,7 @@
 declare const _default: {
     wrapper: string;
     base: string;
+    form: string;
     rounded: string;
     placeholder: string;
     size: {
@@ -62,6 +63,7 @@ declare const _default: {
     icon: {
         base: string;
         color: string;
+        loading: string;
         size: {
             '2xs': string;
             xs: string;

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

@@ -1,6 +1,7 @@
 export default {
   wrapper: "relative",
   base: "relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0",
+  form: "form-input",
   rounded: "rounded-md",
   placeholder: "placeholder-gray-400 dark:placeholder-gray-500",
   size: {
@@ -62,6 +63,7 @@ export default {
   icon: {
     base: "flex-shrink-0 text-gray-400 dark:text-gray-500",
     color: "text-{color}-500 dark:text-{color}-400",
+    loading: "animate-spin",
     size: {
       "2xs": "h-4 w-4",
       xs: "h-4 w-4",
@@ -74,24 +76,24 @@ export default {
       wrapper: "absolute inset-y-0 start-0 flex items-center",
       pointer: "pointer-events-none",
       padding: {
-        "2xs": "ps-2",
-        xs: "ps-2.5",
-        sm: "ps-2.5",
-        md: "ps-3",
-        lg: "ps-3.5",
-        xl: "ps-3.5"
+        "2xs": "px-2",
+        xs: "px-2.5",
+        sm: "px-2.5",
+        md: "px-3",
+        lg: "px-3.5",
+        xl: "px-3.5"
       }
     },
     trailing: {
       wrapper: "absolute inset-y-0 end-0 flex items-center",
       pointer: "pointer-events-none",
       padding: {
-        "2xs": "pe-2",
-        xs: "pe-2.5",
-        sm: "pe-2.5",
-        md: "pe-3",
-        lg: "pe-3.5",
-        xl: "pe-3.5"
+        "2xs": "px-2",
+        xs: "px-2.5",
+        sm: "px-2.5",
+        md: "px-3",
+        lg: "px-3.5",
+        xl: "px-3.5"
       }
     }
   },

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

@@ -0,0 +1,64 @@
+declare const _default: {
+    container: string;
+    trigger: string;
+    width: string;
+    height: string;
+    base: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    ring: string;
+    empty: string;
+    option: {
+        base: string;
+        rounded: string;
+        padding: string;
+        size: string;
+        color: string;
+        container: string;
+        active: string;
+        inactive: string;
+        selected: string;
+        disabled: string;
+        empty: string;
+        icon: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        selectedIcon: {
+            wrapper: string;
+            padding: string;
+            base: string;
+        };
+        avatar: {
+            base: string;
+            size: "3xs";
+        };
+        chip: {
+            base: string;
+        };
+    };
+    transition: {
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    popper: {
+        placement: string;
+    };
+    default: {
+        selectedIcon: string;
+        trailingIcon: string;
+    };
+    arrow: {
+        ring: string;
+        background: string;
+        base: string;
+        rounded: string;
+        shadow: string;
+        placement: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,62 @@
+import { arrow } from "../popper.mjs";
+export default {
+  container: "z-20 group",
+  trigger: "inline-flex w-full",
+  width: "w-full",
+  height: "max-h-60",
+  base: "relative focus:outline-none overflow-y-auto scroll-py-1",
+  background: "bg-white dark:bg-gray-800",
+  shadow: "shadow-lg",
+  rounded: "rounded-md",
+  padding: "p-1",
+  ring: "ring-1 ring-gray-200 dark:ring-gray-700",
+  empty: "text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5",
+  option: {
+    base: "cursor-default select-none relative flex items-center justify-between gap-1",
+    rounded: "rounded-md",
+    padding: "px-2 py-1.5",
+    size: "text-sm",
+    color: "text-gray-900 dark:text-white",
+    container: "flex items-center gap-2 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",
+      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"
+    },
+    avatar: {
+      base: "flex-shrink-0",
+      size: "3xs"
+    },
+    chip: {
+      base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full"
+    }
+  },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    leaveActiveClass: "transition ease-in duration-100",
+    leaveFromClass: "opacity-100",
+    leaveToClass: "opacity-0"
+  },
+  popper: {
+    placement: "bottom-end"
+  },
+  default: {
+    selectedIcon: "i-heroicons-check-20-solid",
+    trailingIcon: "i-heroicons-chevron-down-20-solid"
+  },
+  arrow: {
+    ...arrow,
+    ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",
+    background: "before:bg-white dark:before:bg-gray-700"
+  }
+};

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

@@ -1,10 +1,13 @@
 declare const _default: {
     wrapper: string;
+    container: string;
     base: string;
+    form: string;
     color: string;
     background: string;
     border: string;
     ring: string;
+    inner: string;
     label: string;
     required: string;
     help: string;

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

@@ -1,10 +1,13 @@
 export default {
   wrapper: "relative flex items-start",
+  container: "flex items-center h-5",
   base: "h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent",
+  form: "form-radio",
   color: "text-{color}-500 dark:text-{color}-400",
   background: "bg-white dark:bg-gray-900",
   border: "border border-gray-300 dark:border-gray-700",
   ring: "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
+  inner: "ms-3 flex flex-col",
   label: "text-sm font-medium text-gray-700 dark:text-gray-200",
   required: "text-sm text-red-500 dark:text-red-400",
   help: "text-sm text-gray-500 dark:text-gray-400",

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

@@ -1,4 +1,5 @@
 declare const _default: {
+    form: string;
     placeholder: string;
     default: {
         size: string;
@@ -69,6 +70,7 @@ declare const _default: {
     icon: {
         base: string;
         color: string;
+        loading: string;
         size: {
             '2xs': string;
             xs: string;

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

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

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

@@ -1,15 +1,10 @@
 declare const _default: {
-    container: string;
-    width: string;
-    height: string;
-    base: string;
-    background: string;
-    shadow: string;
-    rounded: string;
-    padding: string;
-    ring: string;
+    select: string;
     input: string;
+    required: string;
+    label: string;
     option: {
+        create: string;
         base: string;
         rounded: string;
         padding: string;
@@ -33,7 +28,7 @@ declare const _default: {
         };
         avatar: {
             base: string;
-            size: string;
+            size: "3xs";
         };
         chip: {
             base: string;
@@ -49,7 +44,8 @@ declare const _default: {
     };
     default: {
         selectedIcon: string;
-        clearOnClose: boolean;
+        clearSearchOnClose: boolean;
+        showCreateOptionWhen: string;
     };
     arrow: {
         ring: string;
@@ -59,5 +55,16 @@ declare const _default: {
         shadow: string;
         placement: string;
     };
+    container: string;
+    trigger: string;
+    width: string;
+    height: string;
+    base: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    ring: string;
+    empty: string;
 };
 export default _default;

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

@@ -1,44 +1,14 @@
-import _popperArrow from "../_popperArrow.mjs";
+import { arrow } from "../popper.mjs";
+import inputMenu from "./inputMenu.mjs";
 export default {
-  container: "z-20 group",
-  width: "w-full",
-  height: "max-h-60",
-  base: "relative focus:outline-none overflow-y-auto scroll-py-1",
-  background: "bg-white dark:bg-gray-800",
-  shadow: "shadow-lg",
-  rounded: "rounded-md",
-  padding: "p-1",
-  ring: "ring-1 ring-gray-200 dark:ring-gray-700",
-  input: "block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none",
+  ...inputMenu,
+  select: "inline-flex items-center text-left cursor-default",
+  input: "block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none",
+  required: "absolute inset-0 w-px opacity-0 cursor-default",
+  label: "block truncate",
   option: {
-    base: "cursor-default select-none relative flex items-center justify-between gap-1",
-    rounded: "rounded-md",
-    padding: "px-2 py-1.5",
-    size: "text-sm",
-    color: "text-gray-900 dark:text-white",
-    container: "flex items-center gap-2 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",
-      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"
-    },
-    avatar: {
-      base: "flex-shrink-0",
-      size: "3xs"
-    },
-    chip: {
-      base: "flex-shrink-0 w-2 h-2 mx-1 rounded-full"
-    }
+    ...inputMenu.option,
+    create: "block truncate"
   },
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
@@ -51,10 +21,11 @@ export default {
   },
   default: {
     selectedIcon: "i-heroicons-check-20-solid",
-    clearOnClose: false
+    clearSearchOnClose: false,
+    showCreateOptionWhen: "empty"
   },
   arrow: {
-    ..._popperArrow,
+    ...arrow,
     ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-700",
     background: "before:bg-white dark:before:bg-gray-700"
   }

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

@@ -1,4 +1,5 @@
 declare const _default: {
+    form: string;
     default: {
         size: string;
         color: string;
@@ -67,6 +68,7 @@ declare const _default: {
     icon: {
         base: string;
         color: string;
+        loading: string;
         size: {
             '2xs': string;
             xs: string;

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

@@ -1,6 +1,7 @@
 import input from "./input.mjs";
 export default {
   ...input,
+  form: "form-textarea",
   default: {
     size: "sm",
     color: "white",

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

@@ -13,6 +13,7 @@ export { default as progress } from './elements/progress';
 export { default as meter } from './elements/meter';
 export { default as meterGroup } from './elements/meterGroup';
 export { default as input } from './forms/input';
+export { default as inputMenu } from './forms/inputMenu';
 export { default as formGroup } from './forms/formGroup';
 export { default as textarea } from './forms/textarea';
 export { default as select } from './forms/select';