imba-localization 0.2.1 → 0.2.3

package/README.md

@@ -148,11 +148,9 @@ new Localization(url, default = 'en')
 A customizable dropdown component that allows users to select from available in the JSON localization file languages.
 
 ```imba
-import { Localization } from 'imba-localization'
+import { Localization, LanguageSelector } from 'imba-localization'
 const loc = new Localization("path/to/lang.json", "en")
 
-import { LanguageSelector } from 'imba-localization/components'
-
 # In your UI component
 tag AppHeader
     <self>
@@ -211,7 +209,8 @@ 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 { LanguageSelector } from 'imba-localization/components'
+import { Localization, LanguageSelector } from 'imba-localization'
+const loc = new Localization("path/to/lang.json", "en")
 
 # Create an inheritent class
 tag Languages < LanguageSelector
@@ -262,7 +261,7 @@ tag SomeIcon
 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).
 
 ```imba
-import {ArrowIcon} from 'imba-localization/components'
+import {ArrowIcon} from 'imba-localization'
 
 tag App
 	<self>

package/index.imba

@@ -37,6 +37,7 @@ export class Localization
 				console.log('There is no Localization for the default language', default)
 			return
 		onready! if onready isa Function
+		onchange(active) if onchange isa Function
 
 	get active
 		const saved = window.localStorage.getItem('imba-localization')
@@ -50,3 +51,52 @@ export class Localization
 			window.localStorage.setItem('imba-localization', name)
 			onchange(name) if onchange isa Function
 		
+export tag ArrowIcon
+	<self>
+		<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
+	state
+	icons = "https://kapowaz.github.io/square-flags/flags/##.svg"
+	#dropdown = false
+	arrow = ArrowIcon
+
+	def onselect key
+		#dropdown = false
+		state.active = key
+
+	css
+		$ease: 0.5s
+		.main rd:8px px:15px py:8px cursor:pointer 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 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-icon h:20px w:20px mr:10px rd:50%
+		.menu-item-text fs:13px
+
+	def icon country
+		return icons.replace('##',country)
+
+	def mouseleave e
+		const rect = self.getBoundingClientRect!
+		const menu = $menu.getBoundingClientRect!
+		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)
+		#dropdown = !inside
+
+	<self [pos:rel] @mouseenter=(#dropdown = true) @mouseleave=mouseleave>
+		<div.main [pos:rel d:hcc] .main-active=#dropdown>
+			<img.main-flag src=icon(state[state.active].$.flag)>
+			<div.main-name> state.$.name
+			<{arrow}.main-arrow [scale-y:1]=#dropdown>
+		
+		if #dropdown
+			<div$menu.menu [pos:abs w:100% > max-content o@off:0] ease>
+				for own key, value of state.languages
+					<div.menu-item @click=onselect(key) [d:none]=(key == state.active)>
+						<img.menu-item-icon src=icon(value.$.flag)>
+						<span.menu-item-text> value.$.name
+		

package/package.json

@@ -1,36 +1,18 @@
 {
   "name": "imba-localization",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/HeapVoid/imba-localization.git"
   },
-  "main": "index.js",
-  "module": "index.js",
-  "browser": "index.js",
-  "devDependencies": {
-    "imba": "latest",
-    "bimba-cli": "latest"
-  },
-  "scripts": {
-    "bundle": "bunx bimba index.imba --outdir . --minify",
-    "pub": "bunx bimba index.imba --outdir . --minify && bun publish"
-  },
+  "main": "index.imba",
+  "module": "index.imba",
+  "browser": "index.imba",
   "description": "A class to make using language localizations in Imba easier.",
   "keywords": ["imba", "theme", "localization"],
   "license": "MIT",
   "type": "module",
   "files": [
-    "index.imba",
-    "index.js",
-    "components.imba",
-    "components.d.ts"
-  ],
-  "exports": {
-    ".": "./index.js",
-    "./components": {
-      "import": "./components.imba",
-      "types": "./components.d.ts"
-    }
-  }
+    "index.imba"
+  ]
 }

package/components.d.ts

@@ -1,4 +0,0 @@
-declare module 'imba-localization/components' {
-    export const LanguageSelector: class;
-    export const ArrowIcon: class;
-}

package/components.imba

@@ -1,49 +0,0 @@
-export tag ArrowIcon
-	<self>
-		<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
-	state
-	icons = "https://kapowaz.github.io/square-flags/flags/##.svg"
-	#dropdown = false
-	arrow = ArrowIcon
-
-	def onselect key
-		#dropdown = false
-		state.active = key
-
-	css
-		$ease: 0.5s
-		.main rd:8px px:15px py:8px cursor:pointer 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 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-icon h:20px w:20px mr:10px rd:50%
-		.menu-item-text fs:13px
-
-	def icon country
-		return icons.replace('##',country)
-
-	def mouseleave e
-		const rect = self.getBoundingClientRect!
-		const menu = $menu.getBoundingClientRect!
-		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)
-		#dropdown = !inside
-
-	<self [pos:rel] @mouseenter=(#dropdown = true) @mouseleave=mouseleave>
-		<div.main [pos:rel d:hcc] .main-active=#dropdown>
-			<img.main-flag src=icon(state[state.active].$.flag)>
-			<div.main-name> state.$.name
-			<{arrow}.main-arrow [scale-y:1]=#dropdown>
-		
-		if #dropdown
-			<div$menu.menu [pos:abs w:100% > max-content o@off:0] ease>
-				for own key, value of state.languages
-					<div.menu-item @click=onselect(key) [d:none]=(key == state.active)>
-						<img.menu-item-icon src=icon(value.$.flag)>
-						<span.menu-item-text> value.$.name
-		

package/index.js

@@ -1 +0,0 @@
-var S=Symbol.for("#__init__"),E=Symbol.for("#__initor__"),Q=Symbol.for("#__inited__"),B=Symbol.for("#__hooks__"),A=Symbol.for("#__patch__"),D=Symbol.for("#has"),V=Symbol.for("#meta"),W=Symbol.for("imba"),O=Symbol.for("#__mixin__"),K=Symbol.for("#matcher"),M=Symbol.for("#L"),C=Symbol.for("#appendChild"),i=Symbol.for("#afterVisit"),j=Symbol.for("#beforeReconcile"),g=Symbol.for("#afterReconcile"),d=Symbol.for("##up");var q={IsExtension:1,IsTag:2,HasDescriptors:4,HasSuperCalls:8,HasConstructor:16,HasFields:32,HasMixins:64,HasInitor:128,HasDecorators:256,IsObjectExtension:512},R=new Map,X=globalThis[W]||={counter:0,classes:R};function c(h,n={}){return R.has(h)||R.set(h,{symbol:Symbol(h.name),parent:Object.getPrototypeOf(h.prototype)?.constructor,for:h,uses:null,inits:null,id:X.counter++,...n}),R.get(h)}function T(h,n){return typeof n==="string"?typeof h===n:n?.[Symbol.hasInstance]?.(h)}function Y(h,n){if(!h||!n)return!1;if(h.get)return n.get===h.get;if(h.set)return n.set===h.set;if(h.value)return h.value===n.value}function G(h,n,o,u={}){let r=h.constructor;if(!o&&n){if(o=Object.getOwnPropertyDescriptors(n),delete o.constructor,o[S])console.warn(`Cannot define plain fields when extending class ${r.name}`),delete o[S]}let z=c(r);if(z&&z.augments){let I=new Map;for(let f of Object.keys(o)){let v=Object.getOwnPropertyDescriptor(h,f);for(let w of z.augments){let P=I.get(w);P||I.set(w,P={});let U=Object.getOwnPropertyDescriptor(w.prototype,f);if(U&&!Y(v,U))console.warn("wont extend",f,U,v);else P[f]=o[f]}}for(let[f,v]of I)if(Object.keys(v).length)G(f.prototype,null,v)}return Object.defineProperties(h,o),h}function H(h,n){let o=c(h),u=c(n);if(u.parent){if(!(h.prototype instanceof u.parent))throw new Error(`Mixin ${n.name} has superclass not present in target class`)}if(!u.augments){u.augments=new Set;let z=u.ref=Symbol(n.name),I=Object[Symbol.hasInstance];n.prototype[z]=!0,Object.defineProperty(n,Symbol.hasInstance,{value:function(f){return this===n?f&&!!f[z]:I.call(this,f)}})}if(h.prototype[u.ref])return h;if(u.uses)for(let z of u.uses)H(h,z);u.augments.add(h),o.uses||=[],o.uses.push(n);let r=Object.getOwnPropertyDescriptors(n.prototype);if(delete r.constructor,r[S])o.inits||=[],o.inits.push(n.prototype[S]),delete r[S];if(Object.defineProperties(h.prototype,r),n?.mixed instanceof Function)n.mixed(h);return h}var F={cache:{},self:null,target:null,proxy:new Proxy({},{apply:(h,n,...o)=>{return F.target[n].apply(F.self,o)},get:(h,n)=>{return Reflect.get(F.target,n,F.self)},set:(h,n,o,u)=>{return Reflect.set(F.target,n,o,F.self)}})};function J(h,n,o,u,r=null){let z=Object.getPrototypeOf(h.prototype),I=u&q.HasMixins,f;if(I)R.set(h,R.get(z.constructor)),z=Object.getPrototypeOf(z);if(r){let w=u&q.IsObjectExtension?r:r.prototype,P=c(h);if(P.uses){if(r===w)console.warn("Cannot extend object with mixins");for(let U of P.uses)H(r,U)}if(u&q.HasSuperCalls)F.cache[n]=Object.create(Object.getPrototypeOf(w),Object.getOwnPropertyDescriptors(w));return G(w,h.prototype),r}let v=z?.constructor;if(f=c(h,{symbol:n}),Object.defineProperty(h,V,{value:f,enumerable:!1,configurable:!0}),o&&h.name!==o)Object.defineProperty(h,"name",{value:o,configurable:!0});if(f.flags=u,u&q.HasConstructor)h.prototype[E]=n;if(f.uses)for(let w of f.uses)w.mixes?.(h);if(v?.inherited instanceof Function)v.inherited(h);return h}function L(h,n){if(h[E]===n)h[Q]?.(),h[B]&&h[B].inited(h)}var N=Symbol();class Z{[S](h=null,n=!0,o=!0){var u;this.onready=h?h.onready:void 0,this.onerror=h?h.onerror:void 0,this.onchange=h?h.onchange:void 0,this.languages=h&&(u=h.languages)!==void 0?u:{},this.preferred=h&&(u=h.preferred)!==void 0?u:(window?.navigator?.language||"en-US").slice(0,2),this.default=h?h.default:void 0}constructor(h,n="en"){var o=this;return this[S](),this.default=n,window.fetch(h).then(function(u){return u.json()}).then(function(u){return o._finalize(u,void 0)}).catch(function(u){return o._finalize(void 0,u)}),new Proxy(this,{get:function(u,r,z){if(o[r])return Reflect.get(u,r,z);if(u.languages[r])return u.languages[r];if(u.languages[o.active]&&u.languages[o.active][r])return u.languages[o.active][r];if(T(o.onerror,Function))o.onerror("no_localization_key",r);return""}});L(this,N)}_finalize(h,n){if(n){if(T(this.onerror,Function))this.onerror("no_localization_file",n);else console.log("Localization file was not loaded",n);return}if(h)this.languages=h;if(!this.languages[this.default]){if(T(this.onerror,Function))this.onerror("no_default_localization",this.default);else console.log("There is no Localization for the default language",this.default);return}if(T(this.onready,Function))return this.onready()}get active(){let h=window.localStorage.getItem("imba-localization");if(h&&this.languages[h])return h;if(this.languages[this.preferred])return this.preferred;return this.default}set active(h){if(h=h&&this.languages[h]?h:this.active,window.localStorage.getItem("imba-localization")!=h){if(window.localStorage.setItem("imba-localization",h),T(this.onchange,Function))this.onchange(h)}}static{J(this,N,"Localization",16)}}export{Z as Localization};