imba-localization 0.2.4 → 0.2.6

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
 
@@ -54,10 +54,10 @@ Add this to your HTML head to load the localization file simultaneously with you
 
 ```imba
 # app.imba
-import { Localization } from 'imba-localization'
+import { LocalizationState } from 'imba-localization'
 
 # Create an instance with the JSON URL and optional default language
-const loc = new Localization("path/to/lang.json", "en")
+const loc = new LocalizationState("path/to/lang.json", "en")
 
 # Set up event handlers
 loc.onready = do
@@ -69,7 +69,7 @@ loc.onready = do
   console.log loc['user']['profile']  # Accessing nested properties
 
 loc.onerror = do(error, details)
-  # The Localization object can return following types of errors:
+  # The LocalizationState object can return following types of errors:
   # 'no_localization_file' - if there were a problem when downloading JSON file
   # 'no_default_localization' - if there is no localization in the file for the default language
   # 'no_localization_key' - if there is no requiered (from the interface) key in the file
@@ -123,7 +123,7 @@ Your localization file should follow this format:
 ### Constructor
 
 ```imba
-new Localization(url, default = 'en')
+new LocalizationState(url, default = 'en')
 ```
 
 - `url`: Path to your JSON localization file
@@ -143,18 +143,18 @@ new Localization(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 { Localization, LanguageSelector } from 'imba-localization'
-const loc = new Localization("path/to/lang.json", "en")
+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):
@@ -209,11 +209,11 @@ css
 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 { Localization, LanguageSelector } from 'imba-localization'
-const loc = new Localization("path/to/lang.json", "en")
+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

@@ -1,4 +1,4 @@
-export class Localization
+export class LocalizationState
 	onready
 	onerror
 	onchange
@@ -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

package/package.json

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