@pathscale/ui 2.11.9 → 2.11.10
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.
- package/dist/components/button/Button.css +10 -2
- package/dist/components/color-wheel-flower/ColorWheelFlower.css +0 -1
- package/dist/components/color-wheel-flower/ColorWheelFlower.generated.js +7 -1
- package/dist/components/language-switcher/LanguageSwitcher.generated.d.ts +2 -2
- package/dist/components/language-switcher/LanguageSwitcher.generated.js +97 -49
- package/dist/components/language-switcher/LanguageSwitcher.recipe.d.ts +1 -0
- package/dist/components/language-switcher/LanguageSwitcher.recipe.js +8 -2
- package/dist/components/language-switcher/createI18n.js +0 -2
- package/dist/layouts.manifest.json +1 -1
- package/dist/purge-manifest.json +2 -1
- package/package.json +1 -1
|
@@ -56,7 +56,16 @@
|
|
|
56
56
|
.button:disabled,
|
|
57
57
|
.button[aria-disabled="true"] {
|
|
58
58
|
cursor: not-allowed;
|
|
59
|
-
|
|
59
|
+
background-color: color-mix(
|
|
60
|
+
in oklab,
|
|
61
|
+
var(--button-bg),
|
|
62
|
+
transparent 50%
|
|
63
|
+
);
|
|
64
|
+
border-color: color-mix(
|
|
65
|
+
in oklab,
|
|
66
|
+
var(--button-border),
|
|
67
|
+
transparent 50%
|
|
68
|
+
);
|
|
60
69
|
}
|
|
61
70
|
|
|
62
71
|
.button:active,
|
|
@@ -128,7 +137,6 @@
|
|
|
128
137
|
}
|
|
129
138
|
.button--state-disabled {
|
|
130
139
|
cursor: not-allowed;
|
|
131
|
-
opacity: 0.55;
|
|
132
140
|
}
|
|
133
141
|
.button--state-hidden {
|
|
134
142
|
display: none;
|
|
@@ -420,7 +420,13 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
|
|
|
420
420
|
})), _el$9);
|
|
421
421
|
spread(_el$9, mergeProps(()=>({
|
|
422
422
|
class: clsx(CLASSES.highlight.base, isPulsing() && CLASSES.highlight.pulsing)
|
|
423
|
-
})
|
|
423
|
+
}), {
|
|
424
|
+
get style () {
|
|
425
|
+
return {
|
|
426
|
+
"border-color": item.hex
|
|
427
|
+
};
|
|
428
|
+
}
|
|
429
|
+
}), false);
|
|
424
430
|
return _el$5;
|
|
425
431
|
}
|
|
426
432
|
});
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { Component as __LayoutComponent } from "solid-js";
|
|
2
2
|
import "./LanguageSwitcher.css";
|
|
3
|
-
import type
|
|
3
|
+
import { type DropdownAlign } from "../dropdown";
|
|
4
4
|
import type { UIBaseProps } from "../vocabulary";
|
|
5
5
|
import type { I18nStore } from "./createI18n";
|
|
6
6
|
export interface LanguageSwitcherProps extends UIBaseProps {
|
|
7
|
-
/** Stable identity for the
|
|
7
|
+
/** Stable identity for the language control. */
|
|
8
8
|
id?: string;
|
|
9
9
|
/**
|
|
10
10
|
* The i18n store to use for language state
|
|
@@ -1,72 +1,120 @@
|
|
|
1
|
-
import { createComponent,
|
|
1
|
+
import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
|
|
2
2
|
import { defineComponent } from "solid-layouts/solid-2/application-boundary";
|
|
3
3
|
import "./LanguageSwitcher.css";
|
|
4
|
-
import { For, omit } from "solid-js";
|
|
4
|
+
import { For, Show, createSignal, omit } from "solid-js";
|
|
5
5
|
import { twMerge } from "../../lib/twMerge.js";
|
|
6
|
+
import dropdown from "../dropdown/index.js";
|
|
7
|
+
import icon from "../icon/index.js";
|
|
6
8
|
import { CLASSES, componentRecipe } from "./LanguageSwitcher.recipe.js";
|
|
7
|
-
var _tmpl$ = /*#__PURE__*/ template("<
|
|
9
|
+
var _tmpl$ = /*#__PURE__*/ template("<span>");
|
|
8
10
|
const __solidLayoutLanguageSwitcher = (_stable, p)=>{
|
|
9
11
|
const others = omit(p, "i18n", "class", "style", "aria-label", "currentLanguageLabel", "optionsLabel", "loadingLabel", "align", "onLanguageChange");
|
|
10
12
|
const currentLanguageName = ()=>p.i18n.languageNames[p.i18n.locale];
|
|
13
|
+
const isSelected = (lang)=>p.i18n.locale === lang;
|
|
14
|
+
const [open, setOpen] = createSignal(false);
|
|
11
15
|
const handleSelect = async (lang)=>{
|
|
12
16
|
await p.i18n.setLocale(lang);
|
|
13
17
|
p.onLanguageChange?.(lang);
|
|
14
18
|
};
|
|
15
|
-
const classes = ()=>twMerge(CLASSES.base,
|
|
16
|
-
|
|
17
|
-
const languages = p.i18n.languages;
|
|
18
|
-
const current = languages.findIndex((language)=>language.code === p.i18n.locale);
|
|
19
|
-
const next = (Math.max(0, current) + direction + languages.length) % languages.length;
|
|
20
|
-
const language = languages[next];
|
|
21
|
-
if (language) handleSelect(language.code);
|
|
22
|
-
};
|
|
23
|
-
var _el$ = _tmpl$();
|
|
24
|
-
spread(_el$, mergeProps(others, ()=>({
|
|
19
|
+
const classes = ()=>twMerge(CLASSES.base, p.class);
|
|
20
|
+
return createComponent(dropdown.Root, mergeProps(others, ()=>({
|
|
25
21
|
class: classes()
|
|
26
22
|
}), {
|
|
27
|
-
get
|
|
28
|
-
return
|
|
29
|
-
},
|
|
30
|
-
get value () {
|
|
31
|
-
return p.i18n.locale;
|
|
23
|
+
get open () {
|
|
24
|
+
return open();
|
|
32
25
|
},
|
|
26
|
+
onOpenChange: setOpen,
|
|
33
27
|
get disabled () {
|
|
34
28
|
return p.i18n.isLoading;
|
|
35
29
|
},
|
|
36
|
-
get
|
|
37
|
-
return p.
|
|
38
|
-
},
|
|
39
|
-
get ["aria-label"] () {
|
|
40
|
-
return `${p.currentLanguageLabel ?? "Current language"}: ${currentLanguageName()}`;
|
|
41
|
-
},
|
|
42
|
-
get title () {
|
|
43
|
-
return p.optionsLabel ?? p["aria-label"] ?? "Language selector";
|
|
30
|
+
get style () {
|
|
31
|
+
return p.style;
|
|
44
32
|
},
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
33
|
+
get children () {
|
|
34
|
+
return [
|
|
35
|
+
createComponent(dropdown.Trigger, mergeProps(()=>({
|
|
36
|
+
class: CLASSES.trigger
|
|
37
|
+
}), {
|
|
38
|
+
get ["aria-busy"] () {
|
|
39
|
+
return p.i18n.isLoading ? "true" : void 0;
|
|
40
|
+
},
|
|
41
|
+
get ["aria-label"] () {
|
|
42
|
+
return `${p.currentLanguageLabel ?? "Current language"}: ${currentLanguageName()}`;
|
|
43
|
+
},
|
|
44
|
+
get title () {
|
|
45
|
+
return p.optionsLabel ?? p["aria-label"] ?? "Language selector";
|
|
46
|
+
},
|
|
47
|
+
get children () {
|
|
48
|
+
return createComponent(Show, {
|
|
49
|
+
get when () {
|
|
50
|
+
return !p.i18n.isLoading;
|
|
51
|
+
},
|
|
52
|
+
get fallback () {
|
|
53
|
+
return createComponent(icon, mergeProps({
|
|
54
|
+
src: "icon-[mdi--loading]"
|
|
55
|
+
}, ()=>({
|
|
56
|
+
class: CLASSES.loadingIcon
|
|
57
|
+
}), {
|
|
58
|
+
width: 16,
|
|
59
|
+
height: 16,
|
|
60
|
+
get ["aria-label"] () {
|
|
61
|
+
return p.loadingLabel ?? "Loading language";
|
|
62
|
+
}
|
|
63
|
+
}));
|
|
64
|
+
},
|
|
65
|
+
get children () {
|
|
66
|
+
var _el$ = _tmpl$();
|
|
67
|
+
spread(_el$, mergeProps({
|
|
68
|
+
"data-slot": "language-current"
|
|
69
|
+
}, ()=>({
|
|
70
|
+
class: CLASSES.locale
|
|
71
|
+
}), {
|
|
72
|
+
"aria-hidden": "true"
|
|
73
|
+
}), true);
|
|
74
|
+
insert(_el$, ()=>p.i18n.locale.toUpperCase());
|
|
75
|
+
return _el$;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
})),
|
|
80
|
+
createComponent(dropdown.Menu, mergeProps(()=>({
|
|
81
|
+
class: CLASSES.menu
|
|
82
|
+
}), {
|
|
83
|
+
get align () {
|
|
84
|
+
return p.align;
|
|
85
|
+
},
|
|
86
|
+
get ["aria-label"] () {
|
|
87
|
+
return p.optionsLabel ?? "Language options";
|
|
88
|
+
},
|
|
89
|
+
get children () {
|
|
90
|
+
return createComponent(For, {
|
|
91
|
+
get each () {
|
|
92
|
+
return p.i18n.languages;
|
|
93
|
+
},
|
|
94
|
+
children: (lang)=>createComponent(dropdown.Item, mergeProps({
|
|
95
|
+
get id () {
|
|
96
|
+
return memo(()=>!!p.id)() ? `${p.id}-option-${lang.code}` : void 0;
|
|
97
|
+
},
|
|
98
|
+
onClick: ()=>void handleSelect(lang.code),
|
|
99
|
+
get ["aria-label"] () {
|
|
100
|
+
return lang.name;
|
|
101
|
+
}
|
|
102
|
+
}, ()=>({
|
|
103
|
+
class: twMerge(CLASSES.item, isSelected(lang.code) && CLASSES.itemSelected)
|
|
104
|
+
}), {
|
|
105
|
+
get ["aria-current"] () {
|
|
106
|
+
return isSelected(lang.code) ? "true" : void 0;
|
|
107
|
+
},
|
|
108
|
+
get children () {
|
|
109
|
+
return lang.name;
|
|
110
|
+
}
|
|
111
|
+
}))
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
}))
|
|
115
|
+
];
|
|
54
116
|
}
|
|
55
|
-
}), true);
|
|
56
|
-
insert(_el$, createComponent(For, {
|
|
57
|
-
get each () {
|
|
58
|
-
return p.i18n.languages;
|
|
59
|
-
},
|
|
60
|
-
children: (lang)=>(()=>{
|
|
61
|
-
var _el$2 = _tmpl$2();
|
|
62
|
-
insert(_el$2, ()=>lang.name);
|
|
63
|
-
effect(()=>lang.code, (_v$)=>{
|
|
64
|
-
_el$2.value = _v$;
|
|
65
|
-
});
|
|
66
|
-
return _el$2;
|
|
67
|
-
})()
|
|
68
117
|
}));
|
|
69
|
-
return _el$;
|
|
70
118
|
};
|
|
71
119
|
const LanguageSwitcher = defineComponent({
|
|
72
120
|
recipe: componentRecipe,
|
|
@@ -11,18 +11,24 @@ const CLASSES = {
|
|
|
11
11
|
const componentRecipe = recipe({
|
|
12
12
|
component: "language-switcher",
|
|
13
13
|
slots: {
|
|
14
|
-
root: {}
|
|
14
|
+
root: {},
|
|
15
|
+
"language-current": {}
|
|
15
16
|
},
|
|
16
17
|
_layouts: {
|
|
17
18
|
slots: {
|
|
18
19
|
root: {
|
|
19
20
|
base: "",
|
|
20
21
|
axes: {}
|
|
22
|
+
},
|
|
23
|
+
"language-current": {
|
|
24
|
+
base: "",
|
|
25
|
+
axes: {}
|
|
21
26
|
}
|
|
22
27
|
},
|
|
23
28
|
stateKeys: [],
|
|
24
29
|
slotIds: {
|
|
25
|
-
root:
|
|
30
|
+
root: 1,
|
|
31
|
+
"language-current": 0
|
|
26
32
|
}
|
|
27
33
|
}
|
|
28
34
|
});
|
|
@@ -25,9 +25,7 @@ function createI18n(options) {
|
|
|
25
25
|
if (lang === localeSignal() && Object.keys(translations()).length > 0) return;
|
|
26
26
|
setIsLoading(true);
|
|
27
27
|
try {
|
|
28
|
-
const minDelay = new Promise((resolve)=>setTimeout(resolve, 100));
|
|
29
28
|
let data;
|
|
30
|
-
await minDelay;
|
|
31
29
|
data = lang === defaultLanguage && Object.keys(initialTranslations).length > 0 ? initialTranslations : loadTranslations ? await loadTranslations(lang) : initialTranslations;
|
|
32
30
|
setTranslations(data);
|
|
33
31
|
setLocaleSignal(lang);
|
package/dist/purge-manifest.json
CHANGED