@nuxt/ui 2.12.3 → 2.14.0

package/dist/runtime/components/forms/InputMenu.vue

@@ -5,6 +5,7 @@
     :name="name"
     :model-value="modelValue"
     :disabled="disabled"
+    :nullable="nullable"
     as="div"
     :class="ui.wrapper"
     @update:model-value="onUpdate"
@@ -96,7 +97,8 @@ import {
   ComboboxButton as HComboboxButton,
   ComboboxOptions as HComboboxOptions,
   ComboboxOption as HComboboxOption,
-  ComboboxInput as HComboboxInput
+  ComboboxInput as HComboboxInput,
+  provideUseId
 } from "@headlessui/vue";
 import { computedAsync, useDebounceFn } from "@vueuse/core";
 import { defu } from "defu";
@@ -110,6 +112,7 @@ import { get, mergeConfig } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { input, inputMenu } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.input, input);
 const configMenu = mergeConfig(appConfig.ui.strategy, appConfig.ui.inputMenu, inputMenu);
 export default defineComponent({
@@ -188,6 +191,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    nullable: {
+      type: Boolean,
+      default: false
+    },
     placeholder: {
       type: String,
       default: null
@@ -281,6 +288,9 @@ export default defineComponent({
       }
     });
     const label = computed(() => {
+      if (!props.modelValue) {
+        return;
+      }
       if (props.valueAttribute) {
         const option = props.options.find((option2) => option2[props.valueAttribute] === props.modelValue);
         return option ? option[props.optionAttribute] : null;
@@ -384,6 +394,7 @@ export default defineComponent({
     function onChange(event) {
       query.value = event.target.value;
     }
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/forms/InputMenu.vue.d.ts

@@ -68,6 +68,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    nullable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     placeholder: {
         type: StringConstructor;
         default: null;
@@ -138,7 +142,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").ComputedRef<string | undefined>;
     popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
@@ -156,7 +160,7 @@ declare const _default: import("vue").DefineComponent<{
     query: import("vue").WritableComputedRef<string>;
     onUpdate: (event: any) => void;
     onChange: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
@@ -224,6 +228,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    nullable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     placeholder: {
         type: StringConstructor;
         default: null;
@@ -288,9 +296,9 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:query"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -299,6 +307,7 @@ declare const _default: import("vue").DefineComponent<{
     id: string;
     icon: string;
     color: any;
+    class: any;
     options: string[] | {
         [key: string]: any;
         disabled?: boolean | undefined;
@@ -307,20 +316,20 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     leading: boolean;
     search: (query: string) => Promise<any[]> | any[];
-    class: any;
+    variant: InputVariant;
+    disabled: boolean;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;
-    disabled: boolean;
-    variant: InputVariant;
-    required: boolean;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
+    required: boolean;
     inputClass: string;
+    nullable: boolean;
     query: string;
     selectedIcon: string;
     optionAttribute: string;

package/dist/runtime/components/forms/Radio.vue

@@ -26,21 +26,20 @@
 </template>
 
 <script>
-import { computed, defineComponent, inject, toRef, onMounted, ref } from "vue";
+import { computed, defineComponent, inject, toRef } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
+import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { radio } from "#ui/ui.config";
-import { uid } from "../../utils/uid";
-import { useFormGroup } from "../../composables/useFormGroup";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio);
 export default defineComponent({
-  inheritAttrs: false,
   props: {
     id: {
       type: String,
-      default: () => null
+      default: null
     },
     value: {
       type: [String, Number, Boolean],
@@ -93,14 +92,9 @@ export default defineComponent({
   emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("radio", toRef(props, "ui"), config, toRef(props, "class"));
+    const inputId = props.id ?? useId();
     const radioGroup = inject("radio-group", null);
     const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config);
-    const inputId = ref(props.id);
-    onMounted(() => {
-      if (!inputId.value) {
-        inputId.value = uid();
-      }
-    });
     const pick = computed({
       get() {
         return props.modelValue;

package/dist/runtime/components/forms/Radio.vue.d.ts

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     id: {
         type: StringConstructor;
-        default: () => null;
+        default: null;
     };
     value: {
         type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -50,7 +50,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }, {
-    inputId: import("vue").Ref<string>;
+    inputId: string;
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
@@ -58,10 +58,10 @@ declare const _default: import("vue").DefineComponent<{
     pick: import("vue").WritableComputedRef<string | number | boolean | Record<string, any>>;
     name: import("vue").ComputedRef<string | undefined>;
     inputClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
-        default: () => null;
+        default: null;
     };
     value: {
         type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
@@ -116,11 +116,11 @@ declare const _default: import("vue").DefineComponent<{
     value: string | number | boolean;
     id: string;
     color: any;
-    name: string;
     class: any;
+    name: string;
     label: string;
-    modelValue: string | number | boolean | Record<string, any>;
     disabled: boolean;
+    modelValue: string | number | boolean | Record<string, any>;
     required: boolean;
     help: string;
     inputClass: string;

package/dist/runtime/components/forms/RadioGroup.vue

@@ -12,6 +12,7 @@
         :label="option.label"
         :model-value="modelValue"
         :value="option.value"
+        :help="option.help"
         :disabled="option.disabled || disabled"
         :ui="uiRadio"
         @change="onUpdate(option.value)"

package/dist/runtime/components/forms/RadioGroup.vue.d.ts

@@ -53,7 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     }, string>>;
     normalizedOptions: import("vue").ComputedRef<any[]>;
     onUpdate: (value: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
         default: string;
@@ -105,12 +105,12 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     ui: any;
     color: any;
-    legend: string;
+    class: any;
     options: unknown[];
     name: string;
-    class: any;
-    modelValue: string | number | Record<string, any>;
+    legend: string;
     disabled: boolean;
+    modelValue: string | number | Record<string, any>;
     optionAttribute: string;
     valueAttribute: string;
     uiRadio: any;

package/dist/runtime/components/forms/Range.vue.d.ts

@@ -57,7 +57,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").ComputedRef<string | undefined>;
     value: import("vue").WritableComputedRef<number>;
     wrapperClass: import("vue").ComputedRef<string>;
     inputClass: import("vue").ComputedRef<string>;
@@ -68,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
         width: string;
     }>;
     onChange: (event: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
         default: number;
@@ -127,10 +127,10 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     id: string;
     color: any;
-    name: string;
     class: any;
-    modelValue: number;
+    name: string;
     disabled: boolean;
+    modelValue: number;
     max: number;
     min: number;
     inputClass: string;

package/dist/runtime/components/forms/Select.vue

@@ -241,7 +241,7 @@ export default defineComponent({
         variant?.replaceAll("{color}", color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
         (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.selectClass);
+      ), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass);
     });
     const isLeading = computed(() => {
       return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
@@ -316,3 +316,7 @@ export default defineComponent({
   }
 });
 </script>
+
+<style scoped>
+.form-select{background-image:none}
+</style>

package/dist/runtime/components/forms/Select.vue.d.ts

@@ -102,7 +102,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: ComputedRef<string | undefined>;
     normalizedOptionsWithPlaceholder: ComputedRef<{
         disabled?: boolean | undefined;
         children: {
@@ -121,7 +121,7 @@ declare const _default: import("vue").DefineComponent<{
     trailingWrapperIconClass: ComputedRef<string>;
     onInput: (event: Event) => void;
     onChange: (event: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | StringConstructor)[];
         default: string;
@@ -226,21 +226,21 @@ declare const _default: import("vue").DefineComponent<{
     id: string;
     icon: string;
     color: any;
+    class: any;
     options: unknown[];
     name: string;
     leading: boolean;
-    class: any;
+    variant: SelectVariant;
+    disabled: boolean;
     modelValue: string | number | Record<string, any>;
     loading: boolean;
-    disabled: boolean;
-    variant: SelectVariant;
-    required: boolean;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
+    required: boolean;
     optionAttribute: string;
     valueAttribute: string;
     selectClass: string;

package/dist/runtime/components/forms/SelectMenu.vue

@@ -133,7 +133,8 @@ import {
   Listbox as HListbox,
   ListboxButton as HListboxButton,
   ListboxOptions as HListboxOptions,
-  ListboxOption as HListboxOption
+  ListboxOption as HListboxOption,
+  provideUseId
 } from "@headlessui/vue";
 import { computedAsync, useDebounceFn } from "@vueuse/core";
 import { defu } from "defu";
@@ -147,6 +148,7 @@ import { get, mergeConfig } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { select, selectMenu } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.select, select);
 const configMenu = mergeConfig(appConfig.ui.strategy, appConfig.ui.selectMenu, selectMenu);
 export default defineComponent({
@@ -369,7 +371,7 @@ export default defineComponent({
         variant?.replaceAll("{color}", color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
         (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.selectClass);
+      ), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass);
     });
     const isLeading = computed(() => {
       return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
@@ -474,6 +476,7 @@ export default defineComponent({
     function onChange(event) {
       query.value = event.target.value;
     }
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/forms/SelectMenu.vue.d.ts

@@ -158,7 +158,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").ComputedRef<string | undefined>;
     popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
@@ -179,7 +179,7 @@ declare const _default: import("vue").DefineComponent<{
     query: import("vue").WritableComputedRef<string>;
     onUpdate: (event: any) => void;
     onChange: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
@@ -331,9 +331,9 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:query"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -342,6 +342,7 @@ declare const _default: import("vue").DefineComponent<{
     id: string;
     icon: string;
     color: any;
+    class: any;
     options: string[] | {
         [key: string]: any;
         disabled?: boolean | undefined;
@@ -349,20 +350,19 @@ declare const _default: import("vue").DefineComponent<{
     popper: PopperOptions;
     name: string;
     leading: boolean;
-    class: any;
+    variant: SelectVariant;
+    disabled: boolean;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;
-    disabled: boolean;
     multiple: boolean;
-    variant: SelectVariant;
-    required: boolean;
     placeholder: string;
     padded: boolean;
     loadingIcon: string;
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
+    required: boolean;
     query: string;
     selectedIcon: string;
     optionAttribute: string;

package/dist/runtime/components/forms/Textarea.vue

@@ -61,6 +61,10 @@ export default defineComponent({
       type: Number,
       default: 3
     },
+    maxrows: {
+      type: Number,
+      default: 0
+    },
     autoresize: {
       type: Boolean,
       default: false
@@ -147,7 +151,7 @@ export default defineComponent({
         const { scrollHeight } = textarea2.value;
         const newRows = (scrollHeight - padding) / lineHeight;
         if (newRows > props.rows) {
-          textarea2.value.rows = newRows;
+          textarea2.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows;
         }
       }
     };

package/dist/runtime/components/forms/Textarea.vue.d.ts

@@ -29,6 +29,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    maxrows: {
+        type: NumberConstructor;
+        default: number;
+    };
     autoresize: {
         type: BooleanConstructor;
         default: boolean;
@@ -90,13 +94,13 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").ComputedRef<string | undefined>;
     textarea: import("vue").Ref<HTMLTextAreaElement | null>;
     textareaClass: import("vue").ComputedRef<string>;
     onInput: (event: Event) => void;
     onChange: (event: Event) => void;
     onBlur: (event: FocusEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -125,6 +129,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    maxrows: {
+        type: NumberConstructor;
+        default: number;
+    };
     autoresize: {
         type: BooleanConstructor;
         default: boolean;
@@ -189,15 +197,15 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     id: string;
     color: any;
-    name: string;
     class: any;
+    name: string;
+    variant: TextareaVariant;
+    disabled: boolean;
     modelValue: string | number;
     rows: number;
-    disabled: boolean;
-    variant: TextareaVariant;
-    required: boolean;
     placeholder: string;
     padded: boolean;
+    required: boolean;
     autofocus: boolean;
     autofocusDelay: number;
     modelModifiers: {
@@ -205,6 +213,7 @@ declare const _default: import("vue").DefineComponent<{
         lazy?: boolean | undefined;
         number?: boolean | undefined;
     };
+    maxrows: number;
     autoresize: boolean;
     textareaClass: string;
 }, {}>;

package/dist/runtime/components/forms/Toggle.vue

@@ -20,7 +20,7 @@
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
-import { Switch as HSwitch } from "@headlessui/vue";
+import { Switch as HSwitch, provideUseId } from "@headlessui/vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
@@ -28,6 +28,7 @@ import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { toggle } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.toggle, toggle);
 export default defineComponent({
   components: {
@@ -69,7 +70,7 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: config.default.size,
+      default: () => config.default.size,
       validator(value) {
         return Object.keys(config.size).includes(value);
       }
@@ -124,6 +125,7 @@ export default defineComponent({
         color.value && ui.value.icon.off.replaceAll("{color}", color.value)
       );
     });
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/forms/Toggle.vue.d.ts

@@ -32,7 +32,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         type: PropType<ToggleSize>;
-        default: any;
+        default: () => any;
         validator(value: string): boolean;
     };
     class: {
@@ -49,13 +49,13 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").ComputedRef<string | undefined>;
     active: import("vue").WritableComputedRef<boolean>;
     switchClass: import("vue").ComputedRef<string>;
     containerClass: import("vue").ComputedRef<string>;
     onIconClass: import("vue").ComputedRef<string>;
     offIconClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
         default: null;
@@ -87,7 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         type: PropType<ToggleSize>;
-        default: any;
+        default: () => any;
         validator(value: string): boolean;
     };
     class: {
@@ -106,10 +106,10 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     id: string;
     color: any;
-    name: string;
     class: any;
-    modelValue: boolean;
+    name: string;
     disabled: boolean;
+    modelValue: boolean;
     onIcon: string;
     offIcon: string;
 }, {}>;

package/dist/runtime/components/layout/Card.vue

@@ -7,7 +7,7 @@
     <div v-if="$slots.header" :class="[ui.header.base, ui.header.padding, ui.header.background]">
       <slot name="header" />
     </div>
-    <div :class="[ui.body.base, ui.body.padding, ui.body.background]">
+    <div v-if="$slots.default" :class="[ui.body.base, ui.body.padding, ui.body.background]">
       <slot />
     </div>
     <div v-if="$slots.footer" :class="[ui.footer.base, ui.footer.padding, ui.footer.background]">

package/dist/runtime/components/layout/Card.vue.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     cardClass: import("vue").ComputedRef<string>;
-}, 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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
         type: StringConstructor;
         default: string;

package/dist/runtime/components/layout/Container.vue.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     containerClass: import("vue").ComputedRef<string>;
-}, 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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
         type: StringConstructor;
         default: string;