@symbo.ls/avatar 2.11.202 → 2.11.205

package/Avatar.js

@@ -4,14 +4,12 @@ import { Img } from '@symbo.ls/atoms'
 
 export const Avatar = {
   extend: Img,
-  props: {
+  props: ({ key, props }) => ({
     display: 'block',
     avatarType: 'initials',
     borderRadius: '100%',
     boxSize: 'C+X C+X',
-    cursor: 'pointer'
-  },
-  attr: {
-    src: ({ key, props }) => props.src || `https://avatars.dicebear.com/api/${props.avatarType || 'adventurer-neutral'}/${props.key || key}.svg`
-  }
+    cursor: 'pointer',
+    src: `https://api.dicebear.com/7.x/${props.avatarType || 'adventurer-neutral'}/svg?seed=${props.key || key}`
+  })
 }

package/AvatarChooser.js

@@ -0,0 +1,61 @@
+'use strict'
+
+import { Button } from '@symbo.ls/button'
+
+export const AvatarChooser = {
+  extend: Button,
+  tag: 'label',
+
+  props: {
+    round: 'C',
+    gap: 'Y',
+    padding: 'W2 A W2 W2',
+    theme: 'tertiary',
+    position: 'relative',
+    cursor: 'pointer'
+  },
+
+  Avatar: {
+    props: ({ state }) => ({
+      key: state.key,
+      boxSize: 'B1',
+      pointerEvents: 'none'
+    })
+  },
+
+  Select: {
+    props: {
+      outline: 'none',
+      pointerEvents: 'all',
+      appearance: 'none',
+      border: 'none',
+      width: '100%',
+      height: '100%',
+      background: 'none',
+      color: 'currentColor',
+      fontSize: 'A',
+      lineHeight: 1,
+      margin: '0 0 0 -B1+X',
+      padding: '0 A 0 B1+X',
+      ':focus-visible': {
+        outline: 'none'
+      }
+    },
+
+    childExtend: { tag: 'option' },
+    $setPropsCollection: ({ parent, state }) => {
+      if (!parent.props.options) return []
+      return parent.props.options.map(v => {
+        if (v.text === state.key) return { ...v, selected: true }
+        return v
+      })
+    },
+
+    on: {
+      change: (ev, { state }) => {
+        state.update({ key: ev.target.value })
+        console.log(state.key)
+      }
+    }
+  }
+}

package/index.js

@@ -1,54 +1,6 @@
 'use strict'
 
-import { Button } from '@symbo.ls/button'
-
 export * from './Avatar'
 export * from './AvatarIndicator'
 export * from './AvatarBundle'
-
-export const AvatarChooser = {
-  extend: Button,
-  tag: 'label',
-
-  props: {
-    round: 'C',
-    gap: 'Y',
-    padding: 'W2 A W2 W2',
-    theme: 'tertiary',
-    position: 'relative',
-    cursor: 'pointer'
-  },
-
-  Avatar: {
-    boxSize: 'B1',
-    pointerEvents: 'none'
-  },
-
-  select: {
-    props: {
-      id: 'avatar-chooser',
-      outline: 'none',
-      pointerEvents: 'all',
-      appearance: 'none',
-      border: 'none',
-      width: '100%',
-      height: '100%',
-      background: 'none',
-      color: 'currentColor',
-      fontSize: 'A',
-      lineHeight: 1,
-      margin: '0 0 0 -B1+X',
-      padding: '0 A 0 B1+X'
-    },
-
-    attr: { name: 'avatar-chooser' },
-
-    childExtend: { tag: 'option' },
-    $setPropsCollection: ({ parent }) => parent.props.options,
-    on: {
-      change: (ev, { parent }) => {
-        parent.Avatar.update({ key: ev.target.value })
-      }
-    }
-  }
-}
+export * from './AvatarChooser'

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/avatar",
-  "version": "2.11.202",
+  "version": "2.11.205",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "4a6bc5b8ca219fa9ae195bd25b29f9b82d6fbdae",
+  "gitHead": "34a12e0c41de4a08c45fa5f48b0913510b861c06",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/button": "latest",