imba-localization 0.1.9 → 0.2.1
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/README.md +2 -2
- package/components.imba +6 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -156,7 +156,7 @@ import { LanguageSelector } from 'imba-localization/components'
|
|
|
156
156
|
# In your UI component
|
|
157
157
|
tag AppHeader
|
|
158
158
|
<self>
|
|
159
|
-
<LanguageSelector
|
|
159
|
+
<LanguageSelector state=loc> # state attribute is mandatory
|
|
160
160
|
```
|
|
161
161
|
|
|
162
162
|
To make this component work as intended, your JSON file will need some adjustments. For each supported language you will need to define the display name for the language and also the country code for the flag to show (for example `en` language is used in `gb` and `us` countries):
|
|
@@ -223,7 +223,7 @@ tag Languages < LanguageSelector
|
|
|
223
223
|
# Using the adjusted component
|
|
224
224
|
tag MyApp
|
|
225
225
|
<self>
|
|
226
|
-
<Languages
|
|
226
|
+
<Languages state=loc>
|
|
227
227
|
```
|
|
228
228
|
|
|
229
229
|
#### Flag collections
|
package/components.imba
CHANGED
|
@@ -4,14 +4,14 @@ export tag ArrowIcon
|
|
|
4
4
|
<path d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z">
|
|
5
5
|
|
|
6
6
|
export tag LanguageSelector
|
|
7
|
-
|
|
7
|
+
state
|
|
8
8
|
icons = "https://kapowaz.github.io/square-flags/flags/##.svg"
|
|
9
9
|
#dropdown = false
|
|
10
10
|
arrow = ArrowIcon
|
|
11
11
|
|
|
12
12
|
def onselect key
|
|
13
13
|
#dropdown = false
|
|
14
|
-
|
|
14
|
+
state.active = key
|
|
15
15
|
|
|
16
16
|
css
|
|
17
17
|
$ease: 0.5s
|
|
@@ -36,14 +36,14 @@ export tag LanguageSelector
|
|
|
36
36
|
|
|
37
37
|
<self [pos:rel] @mouseenter=(#dropdown = true) @mouseleave=mouseleave>
|
|
38
38
|
<div.main [pos:rel d:hcc] .main-active=#dropdown>
|
|
39
|
-
<img.main-flag src=icon(
|
|
40
|
-
<div.main-name>
|
|
39
|
+
<img.main-flag src=icon(state[state.active].$.flag)>
|
|
40
|
+
<div.main-name> state.$.name
|
|
41
41
|
<{arrow}.main-arrow [scale-y:1]=#dropdown>
|
|
42
42
|
|
|
43
43
|
if #dropdown
|
|
44
44
|
<div$menu.menu [pos:abs w:100% > max-content o@off:0] ease>
|
|
45
|
-
for own key, value of
|
|
46
|
-
<div.menu-item @click=onselect(key) [d:none]=(key ==
|
|
45
|
+
for own key, value of state.languages
|
|
46
|
+
<div.menu-item @click=onselect(key) [d:none]=(key == state.active)>
|
|
47
47
|
<img.menu-item-icon src=icon(value.$.flag)>
|
|
48
48
|
<span.menu-item-text> value.$.name
|
|
49
49
|
|