@volverjs/ui-vue 0.0.10-beta.58 → 0.0.10-beta.59

package/dist/components/VvDropdown/index.d.ts

@@ -19,7 +19,7 @@ export declare const VvDropdownProps: {
      * Dropdown role
      */
     role: {
-        type: PropType<`${DropdownRole}`>;
+        type: PropType<"listbox" | "menu">;
         default: DropdownRole;
         validator: (value: DropdownRole) => boolean;
     };
@@ -28,12 +28,12 @@ export declare const VvDropdownProps: {
         default: undefined;
     };
     placement: {
-        type: PropType<`${import("../../constants").Side}` | `${import("../../constants").Placement}`>;
+        type: PropType<"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end">;
         default: import("../../constants").Side;
-        validator: (value: import("../../constants").Side & import("../../constants").Placement) => boolean;
+        validator: (value: never) => boolean;
     };
     strategy: {
-        type: PropType<`${import("../../constants").Strategy}`>;
+        type: PropType<"absolute" | "fixed">;
         default: undefined;
         validator: (value: import("../../constants").Strategy) => boolean;
     };
@@ -42,25 +42,133 @@ export declare const VvDropdownProps: {
         default: undefined;
     };
     offset: {
-        type: PropType<import("../..").OffsetOptions | number | string>;
+        type: PropType<string | import("@floating-ui/dom").OffsetOptions | undefined>;
         default: number;
     };
     shift: {
-        type: PropType<import("../..").ShiftOptions | boolean>;
+        type: PropType<boolean | {
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/utils").Padding | undefined;
+            mainAxis?: boolean | undefined;
+            limiter?: {
+                fn: (state: import("@floating-ui/core").MiddlewareState) => import("@floating-ui/utils").Coords;
+                options?: any;
+            } | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+        } | import("@floating-ui/dom").Derivable<{
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/utils").Padding | undefined;
+            mainAxis?: boolean | undefined;
+            limiter?: {
+                fn: (state: import("@floating-ui/core").MiddlewareState) => import("@floating-ui/utils").Coords;
+                options?: any;
+            } | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+        }> | undefined>;
         default: boolean;
     };
     flip: {
-        type: PropType<import("../..").FlipOptions | boolean>;
+        type: PropType<boolean | {
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/utils").Padding | undefined;
+            mainAxis?: boolean | undefined;
+            fallbackPlacements?: import("@floating-ui/utils").Placement[] | undefined;
+            fallbackStrategy?: "initialPlacement" | "bestFit" | undefined;
+            fallbackAxisSideDirection?: "start" | "end" | "none" | undefined;
+            flipAlignment?: boolean | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+        } | import("@floating-ui/dom").Derivable<{
+            crossAxis?: boolean | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/utils").Padding | undefined;
+            mainAxis?: boolean | undefined;
+            fallbackPlacements?: import("@floating-ui/utils").Placement[] | undefined;
+            fallbackStrategy?: "initialPlacement" | "bestFit" | undefined;
+            fallbackAxisSideDirection?: "start" | "end" | "none" | undefined;
+            flipAlignment?: boolean | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+        }> | undefined>;
         default: boolean;
     };
     size: {
-        type: PropType<import("../..").SizeOptions | boolean>;
+        type: PropType<boolean | {
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/utils").Padding | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+            apply?: ((args: {
+                x: number;
+                y: number;
+                initialPlacement: import("@floating-ui/utils").Placement;
+                placement: import("@floating-ui/utils").Placement;
+                strategy: import("@floating-ui/utils").Strategy;
+                middlewareData: import("@floating-ui/core").MiddlewareData;
+                rects: import("@floating-ui/utils").ElementRects;
+                platform: import("@floating-ui/core").Platform;
+                elements: import("@floating-ui/dom").Elements;
+            } & {
+                availableWidth: number;
+                availableHeight: number;
+            }) => void | Promise<void>) | undefined;
+        } | import("@floating-ui/dom").Derivable<{
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/utils").Padding | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+            apply?: ((args: {
+                x: number;
+                y: number;
+                initialPlacement: import("@floating-ui/utils").Placement;
+                placement: import("@floating-ui/utils").Placement;
+                strategy: import("@floating-ui/utils").Strategy;
+                middlewareData: import("@floating-ui/core").MiddlewareData;
+                rects: import("@floating-ui/utils").ElementRects;
+                platform: import("@floating-ui/core").Platform;
+                elements: import("@floating-ui/dom").Elements;
+            } & {
+                availableWidth: number;
+                availableHeight: number;
+            }) => void | Promise<void>) | undefined;
+        }> | undefined>;
         default: () => {
             padding: number;
         };
     };
     autoPlacement: {
-        type: PropType<import("../..").AutoPlacementOptions | boolean>;
+        type: PropType<boolean | {
+            crossAxis?: boolean | undefined;
+            alignment?: import("@floating-ui/utils").Alignment | null | undefined;
+            autoAlignment?: boolean | undefined;
+            allowedPlacements?: import("@floating-ui/utils").Placement[] | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/utils").Padding | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+        } | import("@floating-ui/dom").Derivable<{
+            crossAxis?: boolean | undefined;
+            alignment?: import("@floating-ui/utils").Alignment | null | undefined;
+            autoAlignment?: boolean | undefined;
+            allowedPlacements?: import("@floating-ui/utils").Placement[] | undefined;
+            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
+            elementContext?: import("@floating-ui/core").ElementContext | undefined;
+            altBoundary?: boolean | undefined;
+            padding?: import("@floating-ui/utils").Padding | undefined;
+            boundary?: import("@floating-ui/dom").Boundary | undefined;
+        }> | undefined>;
         default: boolean;
     };
     arrow: {

package/dist/components/VvIcon/VvIcon.vue.d.ts

@@ -1,5 +1,5 @@
 import { type VvIconProps } from '.';
 declare const _default: import("vue").DefineComponent<VvIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VvIconProps> & Readonly<{}>, {
-    prefix: import(".").IconPrefix | string;
+    prefix: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/VvInputFile/VvInputFile.vue.d.ts

@@ -1,7 +1,7 @@
 import type { UploadedFile } from '../../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<globalThis.ExtractPropTypes<{
     modelValue: {
-        type: PropType<File | UploadedFile | (File | UploadedFile)[]>;
+        type: globalThis.PropType<File | UploadedFile | (File | UploadedFile)[]>;
     };
     progress: {
         type: (StringConstructor | NumberConstructor)[];
@@ -20,9 +20,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: boolean;
     };
     capture: {
-        type: PropType<"user" | "environment">;
+        type: globalThis.PropType<"user" | "environment">;
         default: undefined;
-        validation: (value?: string) => boolean;
+        validation: (value?: string | undefined) => boolean;
     };
     max: {
         type: (StringConstructor | NumberConstructor)[];
@@ -41,7 +41,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: string;
     };
     iconAdd: {
-        type: PropType<string | import("../VvIcon").VvIconProps>;
+        type: globalThis.PropType<string | import("../VvIcon").VvIconProps>;
         default: "add";
     };
     labelReplace: {
@@ -49,7 +49,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: string;
     };
     iconReplace: {
-        type: PropType<string | import("../VvIcon").VvIconProps>;
+        type: globalThis.PropType<string | import("../VvIcon").VvIconProps>;
         default: "edit";
     };
     labelDownload: {
@@ -57,7 +57,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: string;
     };
     iconDownload: {
-        type: PropType<string | import("../VvIcon").VvIconProps>;
+        type: globalThis.PropType<string | import("../VvIcon").VvIconProps>;
         default: "download";
     };
     labelRemove: {
@@ -65,11 +65,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: string;
     };
     icon: {
-        type: PropType<string | import("../VvIcon").VvIconProps>;
+        type: globalThis.PropType<string | import("../VvIcon").VvIconProps>;
         default: undefined;
     };
     iconPosition: {
-        type: PropType<`${import("../../constants").Position}`>;
+        type: globalThis.PropType<"before" | "after">;
         default: import("../../constants").Position;
         validation: (value: import("../../constants").Position) => boolean;
     };
@@ -118,7 +118,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: undefined;
     };
     modifiers: {
-        type: PropType<string | string[]>;
+        type: globalThis.PropType<string | string[]>;
         default: undefined;
     };
     name: {
@@ -132,7 +132,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
     remove: (args_0: File | UploadedFile) => any;
 }, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
     modelValue: {
-        type: PropType<File | UploadedFile | (File | UploadedFile)[]>;
+        type: globalThis.PropType<File | UploadedFile | (File | UploadedFile)[]>;
     };
     progress: {
         type: (StringConstructor | NumberConstructor)[];
@@ -151,9 +151,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: boolean;
     };
     capture: {
-        type: PropType<"user" | "environment">;
+        type: globalThis.PropType<"user" | "environment">;
         default: undefined;
-        validation: (value?: string) => boolean;
+        validation: (value?: string | undefined) => boolean;
     };
     max: {
         type: (StringConstructor | NumberConstructor)[];
@@ -172,7 +172,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: string;
     };
     iconAdd: {
-        type: PropType<string | import("../VvIcon").VvIconProps>;
+        type: globalThis.PropType<string | import("../VvIcon").VvIconProps>;
         default: "add";
     };
     labelReplace: {
@@ -180,7 +180,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: string;
     };
     iconReplace: {
-        type: PropType<string | import("../VvIcon").VvIconProps>;
+        type: globalThis.PropType<string | import("../VvIcon").VvIconProps>;
         default: "edit";
     };
     labelDownload: {
@@ -188,7 +188,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: string;
     };
     iconDownload: {
-        type: PropType<string | import("../VvIcon").VvIconProps>;
+        type: globalThis.PropType<string | import("../VvIcon").VvIconProps>;
         default: "download";
     };
     labelRemove: {
@@ -196,11 +196,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: string;
     };
     icon: {
-        type: PropType<string | import("../VvIcon").VvIconProps>;
+        type: globalThis.PropType<string | import("../VvIcon").VvIconProps>;
         default: undefined;
     };
     iconPosition: {
-        type: PropType<`${import("../../constants").Position}`>;
+        type: globalThis.PropType<"before" | "after">;
         default: import("../../constants").Position;
         validation: (value: import("../../constants").Position) => boolean;
     };
@@ -249,7 +249,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
         default: undefined;
     };
     modifiers: {
-        type: PropType<string | string[]>;
+        type: globalThis.PropType<string | string[]>;
         default: undefined;
     };
     name: {
@@ -265,6 +265,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
     label: string | number;
     disabled: boolean;
     modifiers: string | string[];
+    invalid: boolean;
     progress: string | number;
     icon: string | import("../VvIcon").VvIconProps;
     iconPosition: "before" | "after";
@@ -274,7 +275,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<gl
     multiple: boolean;
     readonly: boolean;
     hintLabel: string;
-    invalid: boolean;
     invalidLabel: string | unknown[];
     valid: boolean;
     validLabel: string | unknown[];

package/dist/components/VvInputFile/index.d.ts

@@ -16,7 +16,7 @@ export declare const VvInputFileProps: {
      * Input value
      */
     modelValue: {
-        type: PropType<File | UploadedFile | (File | UploadedFile)[]>;
+        type: globalThis.PropType<File | UploadedFile | (File | UploadedFile)[]>;
     };
     /**
      * Whether to show progress bar
@@ -55,7 +55,7 @@ export declare const VvInputFileProps: {
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture
      */
     capture: {
-        type: PropType<"user" | "environment">;
+        type: globalThis.PropType<"user" | "environment">;
         default: undefined;
         validation: (value?: string) => boolean;
     };
@@ -92,7 +92,7 @@ export declare const VvInputFileProps: {
      * @see VVIcon
      */
     iconAdd: {
-        type: PropType<string | VvIconProps>;
+        type: globalThis.PropType<string | VvIconProps>;
         default: "add";
     };
     /**
@@ -107,7 +107,7 @@ export declare const VvInputFileProps: {
      * @see VVIcon
      */
     iconReplace: {
-        type: PropType<string | VvIconProps>;
+        type: globalThis.PropType<string | VvIconProps>;
         default: "edit";
     };
     /**
@@ -122,7 +122,7 @@ export declare const VvInputFileProps: {
      * @see VVIcon
      */
     iconDownload: {
-        type: PropType<string | VvIconProps>;
+        type: globalThis.PropType<string | VvIconProps>;
         default: "download";
     };
     /**
@@ -133,11 +133,11 @@ export declare const VvInputFileProps: {
         default: string;
     };
     icon: {
-        type: PropType<string | VvIconProps>;
+        type: globalThis.PropType<string | VvIconProps>;
         default: undefined;
     };
     iconPosition: {
-        type: PropType<`${import("../../constants").Position}`>;
+        type: globalThis.PropType<"before" | "after">;
         default: import("../../constants").Position;
         validation: (value: import("../../constants").Position) => boolean;
     };
@@ -186,7 +186,7 @@ export declare const VvInputFileProps: {
         default: undefined;
     };
     modifiers: {
-        type: PropType<string | string[]>;
+        type: globalThis.PropType<string | string[]>;
         default: undefined;
     };
     name: {

package/dist/components/VvInputText/VvInputClearAction.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<globalThis.ExtractPropType
         default: string;
     };
     icon: {
-        type: PropType<string | VvIconProps>;
+        type: globalThis.PropType<string | VvIconProps>;
         default: string;
     };
 }>, {
@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<globalThis.ExtractPropType
         default: string;
     };
     icon: {
-        type: PropType<string | VvIconProps>;
+        type: globalThis.PropType<string | VvIconProps>;
         default: string;
     };
 }>> & Readonly<{
@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<globalThis.ExtractPropType
     icon: string | VvIconProps;
 }, {}, {
     VvIcon: import("vue").DefineComponent<VvIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VvIconProps> & Readonly<{}>, {
-        prefix: import("../VvIcon").IconPrefix | string;
+        prefix: string;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/VvInputText/VvInputPasswordAction.d.ts

@@ -13,11 +13,11 @@ declare const _default: import("vue").DefineComponent<globalThis.ExtractPropType
         default: string;
     };
     iconShow: {
-        type: PropType<string | VvIconProps>;
+        type: globalThis.PropType<string | VvIconProps>;
         default: "eye-on";
     };
     iconHide: {
-        type: PropType<string | VvIconProps>;
+        type: globalThis.PropType<string | VvIconProps>;
         default: "eye-off";
     };
 }>, {
@@ -39,11 +39,11 @@ declare const _default: import("vue").DefineComponent<globalThis.ExtractPropType
         default: string;
     };
     iconShow: {
-        type: PropType<string | VvIconProps>;
+        type: globalThis.PropType<string | VvIconProps>;
         default: "eye-on";
     };
     iconHide: {
-        type: PropType<string | VvIconProps>;
+        type: globalThis.PropType<string | VvIconProps>;
         default: "eye-off";
     };
 }>> & Readonly<{
@@ -56,7 +56,7 @@ declare const _default: import("vue").DefineComponent<globalThis.ExtractPropType
     iconHide: string | VvIconProps;
 }, {}, {
     VvIcon: import("vue").DefineComponent<VvIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VvIconProps> & Readonly<{}>, {
-        prefix: import("../VvIcon").IconPrefix | string;
+        prefix: string;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/VvInputText/VvInputStepAction.d.ts

@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<globalThis.ExtractPropType
     disabled: boolean;
 }, {}, {
     VvIcon: import("vue").DefineComponent<import("../VvIcon/index.js").VvIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("../VvIcon/index.js").VvIconProps> & Readonly<{}>, {
-        prefix: import("../VvIcon/index.js").IconPrefix | string;
+        prefix: string;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/VvInputText/VvInputText.es.js

@@ -4,6 +4,7 @@ import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdat
 import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useStorage, useElementVisibility } from "@vueuse/core";
 import mitt from "mitt";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
+const padTwoDigits = (num) => num.toString().padStart(2, "0");
 function isDateIsoString(dateString) {
   if (typeof dateString !== "string") {
     return false;
@@ -24,16 +25,15 @@ function getInputValueFromDate(date, typeOfInput = "date", withSeconds) {
   if (Number.isNaN(currentDate.getTime())) {
     return "";
   }
-  const span = (num) => num.toString().padStart(2, "0");
-  let toReturn = `${currentDate.getFullYear()}-${span(currentDate.getMonth() + 1)}`;
+  let toReturn = `${currentDate.getFullYear()}-${padTwoDigits(currentDate.getMonth() + 1)}`;
   if (typeOfInput === "month") {
     return toReturn;
   }
-  toReturn += `-${span(currentDate.getDate())}`;
+  toReturn += `-${padTwoDigits(currentDate.getDate())}`;
   if (typeOfInput === "date") {
     return toReturn;
   }
-  const time = withSeconds ? `${span(currentDate.getHours())}:${span(currentDate.getMinutes())}:${span(currentDate.getSeconds())}` : `${span(currentDate.getHours())}:${span(currentDate.getMinutes())}`;
+  const time = withSeconds ? `${padTwoDigits(currentDate.getHours())}:${padTwoDigits(currentDate.getMinutes())}:${padTwoDigits(currentDate.getSeconds())}` : `${padTwoDigits(currentDate.getHours())}:${padTwoDigits(currentDate.getMinutes())}`;
   if (typeOfInput === "time") {
     return time;
   }
@@ -64,9 +64,9 @@ function getDateFromInputValue(value, typeOfInput = "date") {
       throw new Error("Invalid time format. Expected: HH:mm or HH:mm:ss");
     }
     if (value.length === 8) {
-      return /* @__PURE__ */ new Date(`${currentYear}-${currentMonth + 1}-${currentDate}T${value}`);
+      return /* @__PURE__ */ new Date(`${currentYear}-${padTwoDigits(currentMonth + 1)}-${padTwoDigits(currentDate)}T${value}`);
     }
-    return /* @__PURE__ */ new Date(`${currentYear}-${currentMonth + 1}-${currentDate}T${value}:00`);
+    return /* @__PURE__ */ new Date(`${currentYear}-${padTwoDigits(currentMonth + 1)}-${padTwoDigits(currentDate)}T${value}:00`);
   }
   if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2})?$/.test(value)) {
     throw new Error("Invalid datetime format. Expected: YYYY-MM-DDThh:mm or YYYY-MM-DDThh:mm:ss");
@@ -2095,6 +2095,9 @@ function usePersistence(storageKey, storageType = StorageType.local, defaultValu
               (storageValue == null ? void 0 : storageValue.value) ?? localValue.value,
               storage
             );
+            if (storageValue.value) {
+              localValue.value = storageValue.value;
+            }
             return;
           }
           storageValue = void 0;
@@ -2123,18 +2126,15 @@ function usePersistence(storageKey, storageType = StorageType.local, defaultValu
       });
     }
   });
-  return computed({
-    get: () => {
-      return (storageValue == null ? void 0 : storageValue.value) ?? localValue.value;
-    },
-    set: (value) => {
-      if (storageValue) {
-        storageValue.value = value;
-        return;
-      }
-      localValue.value = value;
+  watch(localValue, (newValue) => {
+    if (storageValue) {
+      storageValue.value = newValue;
     }
+  }, {
+    deep: true,
+    immediate: true
   });
+  return localValue;
 }
 const _hoisted_1 = ["for"];
 const _hoisted_2 = {