WorkRoot/Astro-Component
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Chnages to Switch Theme

Browse Source
This commit is contained in:
Clintchiz
2025-12-08 14:58:43 +05:30
parent 12757f80e1
commit 47d51de19c
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LanguageSwitcher.astro
+8 -3
View File
@@ -42,7 +42,7 @@ const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
<Dropdown openOn="click" placement="bottom-end" offset={5} shiftPadding={10} showArrow={true} closeOnSelect={true}> <Dropdown openOn="click" placement="bottom-end" offset={5} shiftPadding={10} showArrow={true} closeOnSelect={true}>
<span slot="trigger" class="wr:inline-flex wr:items-center wr:gap-2"> <span slot="trigger" class="wr:inline-flex wr:items-center wr:gap-2">
<span data-current-icon class="wr:inline"> <span data-current-icon class="wr:inline">
<Icon name="mdi:translate" class={icon} /> <Icon data-current-flag name="mdi:translate" class={icon} />
</span> </span>
{showLabel && <span data-current-label class="wr:text-sm wr:font-medium">Language</span>} {showLabel && <span data-current-label class="wr:text-sm wr:font-medium">Language</span>}
<svg data-dd-chev class="wr:size-4 wr:opacity-70 wr:transition-transform wr:duration-150" viewBox="0 0 24 24" fill="none"> <svg data-dd-chev class="wr:size-4 wr:opacity-70 wr:transition-transform wr:duration-150" viewBox="0 0 24 24" fill="none">
@@ -101,14 +101,19 @@ const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
const itemSelector = `[data-set-lang][data-owner="${containerId}"]`; const itemSelector = `[data-set-lang][data-owner="${containerId}"]`;
function reflectUI(code) { function reflectUI(code) {
// set label
const flagEl = host.querySelector("[data-current-flag]");
if (flagEl) {
const lang = languages.find(l => l.code === code) || { flag: "mdi:earth" };
flagEl.setAttribute("name", lang.flag || "mdi:earth");
}
const labelEl = host.querySelector("[data-current-label]"); const labelEl = host.querySelector("[data-current-label]");
if (labelEl) { if (labelEl) {
const lang = languages.find(l => l.code === code) || { label: code }; const lang = languages.find(l => l.code === code) || { label: code };
labelEl.textContent = lang.label; labelEl.textContent = lang.label;
} }
// mark active items (remember they are portaled)
document.querySelectorAll(itemSelector).forEach(el => { document.querySelectorAll(itemSelector).forEach(el => {
const active = el.getAttribute("data-set-lang") === code; const active = el.getAttribute("data-set-lang") === code;
el.setAttribute("aria-checked", active ? "true" : "false"); el.setAttribute("aria-checked", active ? "true" : "false");