@henriquepetrelli/hp-design-system 1.1.3 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1286,7 +1286,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
|
1286
1286
|
const ToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-14c54b46"]]);
|
|
1287
1287
|
|
|
1288
1288
|
const _hoisted_1$4 = { class: "theme-switcher-container" };
|
|
1289
|
-
const _hoisted_2$4 = ["id", "
|
|
1289
|
+
const _hoisted_2$4 = ["id", "aria-checked"];
|
|
1290
1290
|
const _hoisted_3$4 = ["for", "onKeydown"];
|
|
1291
1291
|
|
|
1292
1292
|
|
|
@@ -1324,6 +1324,7 @@ const props = __props;
|
|
|
1324
1324
|
|
|
1325
1325
|
const isDarkMode = ref(false);
|
|
1326
1326
|
|
|
1327
|
+
// Função para pegar variáveis CSS do projeto
|
|
1327
1328
|
const getCSSVariable = (name, fallback) => {
|
|
1328
1329
|
return (
|
|
1329
1330
|
getComputedStyle(document.documentElement).getPropertyValue(name).trim() ||
|
|
@@ -1331,6 +1332,7 @@ const getCSSVariable = (name, fallback) => {
|
|
|
1331
1332
|
)
|
|
1332
1333
|
};
|
|
1333
1334
|
|
|
1335
|
+
// Computed para cores do switcher
|
|
1334
1336
|
const computedLightBackgroundColor = computed(() => {
|
|
1335
1337
|
return (
|
|
1336
1338
|
props.lightBackgroundColor ||
|
|
@@ -1352,8 +1354,8 @@ const computedDarkBorderColor = computed(() => {
|
|
|
1352
1354
|
return props.darkBorderColor || getCSSVariable('--color-primary', '#072f5f')
|
|
1353
1355
|
});
|
|
1354
1356
|
|
|
1357
|
+
// Alterna tema baseado no valor atual de isDarkMode
|
|
1355
1358
|
const toggleTheme = () => {
|
|
1356
|
-
isDarkMode.value = !isDarkMode.value;
|
|
1357
1359
|
if (isDarkMode.value) {
|
|
1358
1360
|
document.documentElement.classList.remove('light');
|
|
1359
1361
|
document.documentElement.classList.add('dark');
|
|
@@ -1365,10 +1367,13 @@ const toggleTheme = () => {
|
|
|
1365
1367
|
}
|
|
1366
1368
|
};
|
|
1367
1369
|
|
|
1370
|
+
// Alterna tema via teclado
|
|
1368
1371
|
const handleKeydown = () => {
|
|
1372
|
+
isDarkMode.value = !isDarkMode.value;
|
|
1369
1373
|
toggleTheme();
|
|
1370
1374
|
};
|
|
1371
1375
|
|
|
1376
|
+
// Inicializa o tema baseado no localStorage ou preferência do sistema
|
|
1372
1377
|
onMounted(() => {
|
|
1373
1378
|
const savedTheme =
|
|
1374
1379
|
localStorage.getItem('theme') ||
|
|
@@ -1390,7 +1395,6 @@ return (_ctx, _cache) => {
|
|
|
1390
1395
|
id: __props.id,
|
|
1391
1396
|
class: "toggle--checkbox",
|
|
1392
1397
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((isDarkMode).value = $event)),
|
|
1393
|
-
checked: __props.modelValue,
|
|
1394
1398
|
onChange: toggleTheme,
|
|
1395
1399
|
role: "switch",
|
|
1396
1400
|
"aria-checked": isDarkMode.value,
|
|
@@ -1422,7 +1426,7 @@ return (_ctx, _cache) => {
|
|
|
1422
1426
|
}
|
|
1423
1427
|
|
|
1424
1428
|
};
|
|
1425
|
-
const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-
|
|
1429
|
+
const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-d1afbbb3"]]);
|
|
1426
1430
|
|
|
1427
1431
|
const _hoisted_1$3 = { class: "input__fieldset" };
|
|
1428
1432
|
const _hoisted_2$3 = {
|