imba-localization 0.2.5 → 0.2.7

package/README.md

@@ -11,7 +11,7 @@ A lightweight Imba module for loading and handling JSON-based localization files
 - 🧠 **Intuitive access** - Proxy-based access to translation strings
 - 📡 **Event handling** - Support for `onready`, `onchange`, and `onerror` events
 - 🚀 **Simple integration** - Easy to use in any Imba-based web application
-- 🧩 **`<LanguageSelector>`** - Plug and play component for switching languages
+- 🧩 **`<LocalizationSelector>`** - Plug and play component for switching languages
 
 ## 📘 Notes
 
@@ -143,18 +143,18 @@ new LocalizationState(url, default = 'en')
 
 ## 🧩 Components
 
-### LanguageSelector
+### LocalizationSelector
 
 A customizable dropdown component that allows users to select from available in the JSON localization file languages.
 
 ```imba
-import { LocalizationState, LanguageSelector } from 'imba-localization'
+import { LocalizationState, LocalizationSelector } from 'imba-localization'
 const loc = new LocalizationState("path/to/lang.json", "en")
 
 # In your UI component
 tag AppHeader
     <self>
-      <LanguageSelector state=loc> # state attribute is mandatory
+      <LocalizationSelector state=loc> # state attribute is mandatory
 ```
 
 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):
@@ -175,45 +175,45 @@ Here are CSS classes (and one variable) you can redefine:
 css
   $ease: 0.5s
   .main 
-    cursor:pointer
-    rd:8px px:15px py:8px 
-    bgc:light-dark(#000000/10, #FFFFFF/20) 
-    fw:500 fs:13px 
-    ead:$ease
-	.main-active 
-    bgc:light-dark(#000000/20, #FFFFFF/30)
-	.main-flag 
-    mr:10px rd:50% w:20px h:20px
-	.main-name 
-    mr:10px
-	.main-arrow 
-    w:16px h:16px ml:auto
-    fill:light-dark(#000000,#FFFFFF) 
-    scale-y:-1 
-    ead:$ease
-	.menu 
-    t:100% l:50% x:-50% mt:2px rd:8px rd:8px py:5px zi:999
-    fw:500 fs:13px
-    backdrop-filter:blur(20px) 
-    bgc:light-dark(#000000/5, #FFFFFF/10) 
-    ead:$ease
-	.menu-item 
-    cursor:pointer
-    d:hflex px:10px py:5px rd:8px m:5px
-    bg@hover:light-dark(#000000/10, #FFFFFF/20)
-	.menu-item-icon 
-    h:20px w:20px mr:10px rd:50%
-	.menu-item-text 
-    fs:13px
+      cursor:pointer
+      rd:8px px:15px py:8px 
+      bgc:light-dark(#000000/10, #FFFFFF/20) 
+      fw:500 fs:13px 
+      ead:$ease
+  .main-active 
+      bgc:light-dark(#000000/20, #FFFFFF/30)
+  .main-flag 
+      mr:10px rd:50% w:20px h:20px
+  .main-name 
+      mr:10px
+  .main-arrow 
+      w:16px h:16px ml:auto
+      fill:light-dark(#000000,#FFFFFF) 
+      scale-y:-1 
+      ead:$ease
+  .menu 
+      t:100% l:50% x:-50% mt:2px rd:8px rd:8px py:5px zi:999
+      fw:500 fs:13px
+      backdrop-filter:blur(20px) 
+      bgc:light-dark(#000000/5, #FFFFFF/10) 
+      ead:$ease
+  .menu-item 
+      cursor:pointer
+      d:hflex px:10px py:5px rd:8px m:5px
+      bg@hover:light-dark(#000000/10, #FFFFFF/20)
+  .menu-item-icon 
+      h:20px w:20px mr:10px rd:50%
+  .menu-item-text 
+      fs:13px
 ```
 LanguageSelector can be easily customized through CSS and Imba tag (class) inheritance. Here how the above classes can be adjusted via the inheritance:
 
 ```imba
-import { LocalizationState, LanguageSelector } from 'imba-localization'
+import { LocalizationState, LocalizationSelector } from 'imba-localization'
 const loc = new LocalizationState("path/to/lang.json", "en")
 
 # Create an inheritent class
-tag Languages < LanguageSelector
+tag Languages < LocalizationSelector
   css
     $ease: 1s
     .menu-item rd:2px
@@ -230,7 +230,7 @@ tag MyApp
 You can redefine the collection of flag icons through the `icons` attribute:
 
 ```imba
-<LanguageSelector icons='https://flagicons.lipis.dev/flags/4x3/##.svg'>
+<LocalizationSelector icons='https://flagicons.lipis.dev/flags/4x3/##.svg'>
 ```
 There are many flag collections out there:
 - https://kapowaz.github.io/square-flags/flags/##.svg (default one)
@@ -253,12 +253,12 @@ tag SomeIcon
 			<path d="...">
 
 
-<LanguageSelector arrow=SomeIcon>
+<LocalizationSelector arrow=SomeIcon>
 ```
 
 ### ArrowIcon
 
-The default arrow icon used in the LanguageSelector 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).
+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).
 
 ```imba
 import {ArrowIcon} from 'imba-localization'

package/localization.imba

@@ -56,7 +56,7 @@ export tag ArrowIcon
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
 			<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">
 
-export tag LanguageSelector
+export tag LocalizationSelector
 	state
 	icons = "https://kapowaz.github.io/square-flags/flags/##.svg"
 	#dropdown = false
@@ -74,7 +74,7 @@ export tag LanguageSelector
 		.main-name mr:10px
 		.main-arrow w:16px h:16px fill:light-dark(#000000,#FFFFFF) ml:auto scale-y:-1 ead:$ease
 		.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
-		.menu-item d:hflex px:10px py:5px rd:8px cursor:pointer bg@hover:light-dark(#000000/10, #FFFFFF/20) m:5px
+		.menu-item d:hflex ai:center px:10px py:5px rd:8px cursor:pointer bg@hover:light-dark(#000000/10, #FFFFFF/20) m:5px
 		.menu-item-icon h:20px w:20px mr:10px rd:50%
 		.menu-item-text fs:13px
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imba-localization",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/HeapVoid/imba-localization.git"