@henriquepetrelli/hp-design-system 1.1.6 → 1.1.8

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

@@ -1286,7 +1286,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 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"];
 
 
@@ -1301,39 +1301,29 @@ const _sfc_main$4 = {
     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 = 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 = () => {
@@ -1347,29 +1337,35 @@ onMounted(() => {
     (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 = computed(() => {
-  return props.lightBorderColor || '#72cce3'
-});
+watch(
+  () => props.modelValue,
+  (value) => {
+    isDarkMode.value = value;
+    applyTheme(value);
+  },
+  { immediate: true }
+);
 
-const computedLightBackgroundColor = computed(() => {
-  return props.lightBackgroundColor || '#96dcee'
-});
+const computedLightBorderColor = computed(
+  () => props.lightBorderColor || '#72cce3'
+);
 
-const computedDarkBorderColor = computed(() => {
-  return props.darkBorderColor || '#072f5f'
-});
+const computedLightBackgroundColor = computed(
+  () => props.lightBackgroundColor || '#96dcee'
+);
 
-const computedDarkBackgroundColor = computed(() => {
-  return props.darkBackgroundColor || '#1261a0'
-});
+const computedDarkBorderColor = computed(
+  () => props.darkBorderColor || '#072f5f'
+);
+
+const computedDarkBackgroundColor = computed(
+  () => props.darkBackgroundColor || '#1261a0'
+);
 
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("div", _hoisted_1$4, [
@@ -1378,7 +1374,6 @@ return (_ctx, _cache) => {
       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,
@@ -1409,7 +1404,7 @@ return (_ctx, _cache) => {
 }
 
 };
-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 = {