imba-localization 0.3.3 → 0.3.4

package/README.md

@@ -292,10 +292,7 @@ You can use any other collection you prefer, just change the actual country code
 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:
 
 ```imba
-const arrow = 
-  <svg viewBox="..." xmlns="http://www.w3.org/2000/svg">
-    <path d="...">
-
+const arrow = <path d="...">
 
 <language-selector arrow=arrow>
 ```
@@ -305,10 +302,12 @@ const arrow =
 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 {svg-arrow-down} from 'imba-localization'
+import {path-arrow-down} from 'imba-localization'
 
 tag App
 	<self>
-		<{svg-arrow-down}>
-			css w:20px h:20px stroke:red
+    <svg viewBox="0 0 256 256">
+      css w:20px h:20px stroke:red
+		  <{svg-arrow-down}>
+			
 ```

package/localization.imba

@@ -51,21 +51,28 @@ export class Localization
 			window.localStorage.setItem('imba-localization', name)
 			onchange(name) if onchange isa Function
 
-export const svg-arrow-down = 
-	<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 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">
 
 tag language-selector
 	state
 	icons = "https://kapowaz.github.io/square-flags/flags/##.svg"
 	#dropdown = false
-	arrow = svg-arrow-down
+	arrow = path-arrow-down
 
 	def onselect key
 		#dropdown = false
 		state.active = key
 
-	css
+	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
+
+	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 bd:1px solid transparent
 		.main-active bgc:light-dark(#000000/20, #FFFFFF/30) bd:1px solid transparent
@@ -78,20 +85,12 @@ tag language-selector
 		.menu-item-icon h:20px w:20px mr:10px rd:50% bd:1px solid transparent
 		.menu-item-text fs:13px bd:1px solid transparent
 
-	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>
+	<self.language-selector [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 [ead:$ease] .main-arrow-active=#dropdown>
+			<svg.main-arrow [ead:$ease] .main-arrow-active=#dropdown viewBox="0 0 256 256">
+				<{arrow}>
 		
 		if #dropdown
 			<div$menu.menu [pos:abs w:100% > max-content o@off:0] ease>

package/package.json

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