imba-localization 0.3.3 → 0.3.5
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 +6 -7
- package/localization.imba +24 -25
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -292,10 +292,7 @@ You can use any other collection you prefer, just change the actual country code
|
|
|
292
292
|
You can use any arrow icon you prefer (or remove it though CSS) by passing a tag of the image to the LanguageSelector `arrow` attribute:
|
|
293
293
|
|
|
294
294
|
```imba
|
|
295
|
-
const arrow =
|
|
296
|
-
<svg viewBox="..." xmlns="http://www.w3.org/2000/svg">
|
|
297
|
-
<path d="...">
|
|
298
|
-
|
|
295
|
+
const arrow = <path d="...">
|
|
299
296
|
|
|
300
297
|
<language-selector arrow=arrow>
|
|
301
298
|
```
|
|
@@ -305,10 +302,12 @@ const arrow =
|
|
|
305
302
|
The default arrow icon used in the LocalizationSelector component is available as a separate icon (in case for some reason you don't want to use [imba-phosphor-icons](https://www.npmjs.com/package/imba-phosphor-icons) package by Sindre).
|
|
306
303
|
|
|
307
304
|
```imba
|
|
308
|
-
import {
|
|
305
|
+
import {path-arrow-down} from 'imba-localization'
|
|
309
306
|
|
|
310
307
|
tag App
|
|
311
308
|
<self>
|
|
312
|
-
|
|
313
|
-
|
|
309
|
+
<svg viewBox="0 0 256 256">
|
|
310
|
+
css w:20px h:20px stroke:red
|
|
311
|
+
<{svg-arrow-down}>
|
|
312
|
+
|
|
314
313
|
```
|
package/localization.imba
CHANGED
|
@@ -51,32 +51,17 @@ export class Localization
|
|
|
51
51
|
window.localStorage.setItem('imba-localization', name)
|
|
52
52
|
onchange(name) if onchange isa Function
|
|
53
53
|
|
|
54
|
-
export const
|
|
55
|
-
<svg viewBox="0 0 256 256">
|
|
56
|
-
<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">
|
|
54
|
+
export const path-arrow-down = <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">
|
|
57
55
|
|
|
58
56
|
tag language-selector
|
|
59
57
|
state
|
|
60
58
|
icons = "https://kapowaz.github.io/square-flags/flags/##.svg"
|
|
61
59
|
#dropdown = false
|
|
62
|
-
arrow =
|
|
60
|
+
arrow = path-arrow-down
|
|
63
61
|
|
|
64
62
|
def onselect key
|
|
65
63
|
#dropdown = false
|
|
66
|
-
state.active = key
|
|
67
|
-
|
|
68
|
-
css
|
|
69
|
-
$ease: 0.5s
|
|
70
|
-
.main rd:8px px:15px py:8px cursor:pointer bgc:light-dark(#000000/10, #FFFFFF/20) fw:500 fs:13px ead:$ease bd:1px solid transparent
|
|
71
|
-
.main-active bgc:light-dark(#000000/20, #FFFFFF/30) bd:1px solid transparent
|
|
72
|
-
.main-flag mr:10px rd:50% w:20px h:20px bd:1px solid transparent
|
|
73
|
-
.main-name mr:10px bd:1px solid transparent
|
|
74
|
-
.main-arrow w:16px h:16px fill:light-dark(#000000,#FFFFFF) ml:auto scale-y:-1 bd:1px solid transparent
|
|
75
|
-
.main-arrow-active scale-y:1 bd:1px solid transparent
|
|
76
|
-
.menu t:100% l:50% x:-50% zi:999 backdrop-filter:blur(20px) mt:2px rd:8px rd:8px py:5px bgc:light-dark(#000000/5, #FFFFFF/10) fw:500 fs:13px ead:$ease bd:1px solid transparent
|
|
77
|
-
.menu-item d:hflex ai:center px:10px py:5px rd:8px cursor:pointer bg@hover:light-dark(#000000/10, #FFFFFF/20) m:5px bd:1px solid transparent
|
|
78
|
-
.menu-item-icon h:20px w:20px mr:10px rd:50% bd:1px solid transparent
|
|
79
|
-
.menu-item-text fs:13px bd:1px solid transparent
|
|
64
|
+
state.active = key
|
|
80
65
|
|
|
81
66
|
def icon country
|
|
82
67
|
return icons.replace('##',country)
|
|
@@ -87,15 +72,29 @@ tag language-selector
|
|
|
87
72
|
const inside = e.clientY >= menu.bottom || e.clientY <= rect.top || (e.clientX <= rect.left and e.clientY <= rect.bottom) || (e.clientX <= menu.left and e.clientY >= menu.top) || (e.clientX >= rect.right and e.clientY <= rect.bottom) || (e.clientX >= menu.right and e.clientY >= menu.top)
|
|
88
73
|
#dropdown = !inside
|
|
89
74
|
|
|
75
|
+
css
|
|
76
|
+
$ease: 0.5s
|
|
77
|
+
.container rd:8px px:15px py:8px cursor:pointer bgc:light-dark(#000000/10, #FFFFFF/20) fw:500 fs:13px ead:$ease bd:1px solid transparent
|
|
78
|
+
@.active bgc:light-dark(#000000/20, #FFFFFF/30) bd:1px solid transparent
|
|
79
|
+
.flag mr:10px rd:50% w:20px h:20px bd:1px solid transparent
|
|
80
|
+
.name mr:10px bd:1px solid transparent
|
|
81
|
+
.arrow w:16px h:16px fill:light-dark(#000000,#FFFFFF) ml:auto scale-y:-1 bd:1px solid transparent
|
|
82
|
+
@.active scale-y:1 bd:1px solid transparent
|
|
83
|
+
.menu t:100% l:50% x:-50% zi:999 backdrop-filter:blur(20px) mt:2px rd:8px rd:8px py:5px bgc:light-dark(#000000/5, #FFFFFF/10) fw:500 fs:13px ead:$ease bd:1px solid transparent
|
|
84
|
+
.item d:hflex ai:center px:10px py:5px rd:8px cursor:pointer bg@hover:light-dark(#000000/10, #FFFFFF/20) m:5px bd:1px solid transparent
|
|
85
|
+
.icon h:20px w:20px mr:10px rd:50% bd:1px solid transparent
|
|
86
|
+
.text fs:13px bd:1px solid transparent
|
|
87
|
+
|
|
90
88
|
<self [pos:rel] @mouseenter=(#dropdown = true) @mouseleave=mouseleave>
|
|
91
|
-
<div.
|
|
92
|
-
<img.
|
|
93
|
-
<div.
|
|
94
|
-
<
|
|
89
|
+
<div.container [pos:rel d:hcc] .active=#dropdown>
|
|
90
|
+
<img.flag src=icon(state[state.active].$.flag)>
|
|
91
|
+
<div.name> state.$.name
|
|
92
|
+
<svg.arrow [ead:$ease] .active=#dropdown viewBox="0 0 256 256">
|
|
93
|
+
<{arrow}>
|
|
95
94
|
|
|
96
95
|
if #dropdown
|
|
97
96
|
<div$menu.menu [pos:abs w:100% > max-content o@off:0] ease>
|
|
98
97
|
for own key, value of state.languages
|
|
99
|
-
<div.
|
|
100
|
-
<img.
|
|
101
|
-
<span.
|
|
98
|
+
<div.item @click=onselect(key) [d:none]=(key == state.active)>
|
|
99
|
+
<img.icon src=icon(value.$.flag)>
|
|
100
|
+
<span.text> value.$.name
|