@henriquepetrelli/hp-design-system 1.1.7 → 1.1.8

package/dist/hp-design-system.umd.js

@@ -1290,7 +1290,7 @@
   const ToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-14c54b46"]]);
 
   const _hoisted_1$4 = { class: "theme-switcher-container" };
-  const _hoisted_2$4 = ["id", "checked", "aria-checked"];
+  const _hoisted_2$4 = ["id", "aria-checked"];
   const _hoisted_3$4 = ["for", "onKeydown"];
 
 
@@ -1305,39 +1305,29 @@
       type: String,
       default: () => `theme-${Math.random().toString(36).substring(2, 9)}`
     },
-    lightBorderColor: {
-      type: String,
-      default: ''
-    },
-    lightBackgroundColor: {
-      type: String,
-      default: ''
-    },
-    darkBorderColor: {
-      type: String,
-      default: ''
-    },
-    darkBackgroundColor: {
-      type: String,
-      default: ''
-    }
+    lightBorderColor: String,
+    lightBackgroundColor: String,
+    darkBorderColor: String,
+    darkBackgroundColor: String
   },
-    setup(__props) {
+    emits: ['update:modelValue'],
+    setup(__props, { emit: __emit }) {
 
   const props = __props;
 
+  const emit = __emit;
+
   const isDarkMode = vue.ref(false);
 
+  const applyTheme = (isDark) => {
+    document.documentElement.classList.toggle('dark', isDark);
+    document.documentElement.classList.toggle('light', !isDark);
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  };
+
   const toggleTheme = () => {
-    if (isDarkMode.value) {
-      document.documentElement.classList.remove('light');
-      document.documentElement.classList.add('dark');
-      localStorage.setItem('theme', 'dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-      document.documentElement.classList.add('light');
-      localStorage.setItem('theme', 'light');
-    }
+    emit('update:modelValue', isDarkMode.value);
+    applyTheme(isDarkMode.value);
   };
 
   const handleKeydown = () => {
@@ -1351,29 +1341,35 @@
       (window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light');
+
     isDarkMode.value = savedTheme === 'dark';
-    if (isDarkMode.value) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.add('light');
-    }
+    applyTheme(isDarkMode.value);
   });
 
-  const computedLightBorderColor = vue.computed(() => {
-    return props.lightBorderColor || '#72cce3'
-  });
+  vue.watch(
+    () => props.modelValue,
+    (value) => {
+      isDarkMode.value = value;
+      applyTheme(value);
+    },
+    { immediate: true }
+  );
 
-  const computedLightBackgroundColor = vue.computed(() => {
-    return props.lightBackgroundColor || '#96dcee'
-  });
+  const computedLightBorderColor = vue.computed(
+    () => props.lightBorderColor || '#72cce3'
+  );
 
-  const computedDarkBorderColor = vue.computed(() => {
-    return props.darkBorderColor || '#072f5f'
-  });
+  const computedLightBackgroundColor = vue.computed(
+    () => props.lightBackgroundColor || '#96dcee'
+  );
 
-  const computedDarkBackgroundColor = vue.computed(() => {
-    return props.darkBackgroundColor || '#1261a0'
-  });
+  const computedDarkBorderColor = vue.computed(
+    () => props.darkBorderColor || '#072f5f'
+  );
+
+  const computedDarkBackgroundColor = vue.computed(
+    () => props.darkBackgroundColor || '#1261a0'
+  );
 
   return (_ctx, _cache) => {
     return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
@@ -1382,7 +1378,6 @@
         id: __props.id,
         class: "toggle--checkbox",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((isDarkMode).value = $event)),
-        checked: __props.modelValue,
         onChange: toggleTheme,
         role: "switch",
         "aria-checked": isDarkMode.value,
@@ -1413,7 +1408,7 @@
   }
 
   };
-  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-715118dd"]]);
+  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-699fb0fe"]]);
 
   const _hoisted_1$3 = { class: "input__fieldset" };
   const _hoisted_2$3 = {