@symbo.ls/avatar 2.11.204 → 2.11.210
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Avatar.js +1 -2
- package/AvatarBundle.js +9 -5
- package/AvatarChooser.js +66 -0
- package/index.js +1 -59
- package/package.json +2 -2
package/Avatar.js
CHANGED
|
@@ -9,7 +9,6 @@ export const Avatar = {
|
|
|
9
9
|
avatarType: 'initials',
|
|
10
10
|
borderRadius: '100%',
|
|
11
11
|
boxSize: 'C+X C+X',
|
|
12
|
-
|
|
13
|
-
src: `https://api.dicebear.com/7.x/${props.avatarType || 'adventurer-neutral'}/svg?seed=${props.key || key}`
|
|
12
|
+
src: `https://api.dicebear.com/7.x/${props.avatarType || 'initials'}/svg?seed=${props.key || key}`
|
|
14
13
|
})
|
|
15
14
|
}
|
package/AvatarBundle.js
CHANGED
|
@@ -5,14 +5,18 @@ import { Avatar } from './Avatar'
|
|
|
5
5
|
|
|
6
6
|
export const AvatarBundle = {
|
|
7
7
|
extend: Flex,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
props: {
|
|
9
|
+
childProps: {
|
|
10
|
+
'@light': {
|
|
11
|
+
border: 'X, var(--theme-document-light-background), solid'
|
|
12
|
+
},
|
|
13
|
+
'@dark': {
|
|
14
|
+
border: 'X, var(--theme-document-dark-background), solid'
|
|
15
|
+
},
|
|
12
16
|
':not(:last-child)': {
|
|
13
17
|
margin: '0 -Y2 0 0'
|
|
14
18
|
}
|
|
15
19
|
}
|
|
16
20
|
},
|
|
17
|
-
|
|
21
|
+
childExtend: Avatar
|
|
18
22
|
}
|
package/AvatarChooser.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
import { Button } from '@symbo.ls/button'
|
|
4
|
+
|
|
5
|
+
export const AvatarChooser = {
|
|
6
|
+
extend: Button,
|
|
7
|
+
tag: 'label',
|
|
8
|
+
|
|
9
|
+
props: {
|
|
10
|
+
round: 'C',
|
|
11
|
+
width: 'fit-content',
|
|
12
|
+
gap: 'Y',
|
|
13
|
+
padding: 'W2 A W2 W2',
|
|
14
|
+
theme: 'tertiary',
|
|
15
|
+
position: 'relative',
|
|
16
|
+
cursor: 'pointer'
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
Avatar: {
|
|
20
|
+
props: ({ state }) => ({
|
|
21
|
+
key: state.key,
|
|
22
|
+
boxSize: 'B1',
|
|
23
|
+
pointerEvents: 'none'
|
|
24
|
+
})
|
|
25
|
+
},
|
|
26
|
+
|
|
27
|
+
Select: {
|
|
28
|
+
props: {
|
|
29
|
+
outline: 'none',
|
|
30
|
+
pointerEvents: 'All',
|
|
31
|
+
appearance: 'none',
|
|
32
|
+
border: 'none',
|
|
33
|
+
width: '100%',
|
|
34
|
+
height: '100%',
|
|
35
|
+
background: 'none',
|
|
36
|
+
color: 'currentColor',
|
|
37
|
+
fontSize: 'A',
|
|
38
|
+
lineHeight: 1,
|
|
39
|
+
margin: '0 0 0 -B1+X',
|
|
40
|
+
padding: '0 A 0 B1+X',
|
|
41
|
+
':focus-visible': {
|
|
42
|
+
outline: 'none'
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
childExtend: { tag: 'option' },
|
|
47
|
+
$setPropsCollection: ({ parent, state }) => {
|
|
48
|
+
if (!parent.props.options) return []
|
|
49
|
+
return parent.props.options.map(v => {
|
|
50
|
+
if (v.text === state.key) return { ...v, selected: true }
|
|
51
|
+
return v
|
|
52
|
+
})
|
|
53
|
+
},
|
|
54
|
+
|
|
55
|
+
on: {
|
|
56
|
+
change: (ev, { state }) => {
|
|
57
|
+
state.update({ key: ev.target.value })
|
|
58
|
+
console.log(state.key)
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
Icon: {
|
|
64
|
+
name: 'arrowDown'
|
|
65
|
+
}
|
|
66
|
+
}
|
package/index.js
CHANGED
|
@@ -1,64 +1,6 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
|
-
import { Button } from '@symbo.ls/button'
|
|
4
|
-
|
|
5
3
|
export * from './Avatar'
|
|
6
4
|
export * from './AvatarIndicator'
|
|
7
5
|
export * from './AvatarBundle'
|
|
8
|
-
|
|
9
|
-
export const AvatarChooser = {
|
|
10
|
-
extend: Button,
|
|
11
|
-
tag: 'label',
|
|
12
|
-
|
|
13
|
-
props: {
|
|
14
|
-
round: 'C',
|
|
15
|
-
gap: 'Y',
|
|
16
|
-
padding: 'W2 A W2 W2',
|
|
17
|
-
theme: 'tertiary',
|
|
18
|
-
position: 'relative',
|
|
19
|
-
cursor: 'pointer'
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
Avatar: {
|
|
23
|
-
props: ({ state }) => ({
|
|
24
|
-
key: state.key,
|
|
25
|
-
boxSize: 'B1',
|
|
26
|
-
pointerEvents: 'none'
|
|
27
|
-
})
|
|
28
|
-
},
|
|
29
|
-
|
|
30
|
-
Select: {
|
|
31
|
-
props: {
|
|
32
|
-
outline: 'none',
|
|
33
|
-
pointerEvents: 'all',
|
|
34
|
-
appearance: 'none',
|
|
35
|
-
border: 'none',
|
|
36
|
-
width: '100%',
|
|
37
|
-
height: '100%',
|
|
38
|
-
background: 'none',
|
|
39
|
-
color: 'currentColor',
|
|
40
|
-
fontSize: 'A',
|
|
41
|
-
lineHeight: 1,
|
|
42
|
-
margin: '0 0 0 -B1+X',
|
|
43
|
-
padding: '0 A 0 B1+X',
|
|
44
|
-
':focus-visible': {
|
|
45
|
-
outline: 'none'
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
childExtend: { tag: 'option' },
|
|
50
|
-
$setPropsCollection: ({ parent, state }) => {
|
|
51
|
-
return parent.props.options.map(v => {
|
|
52
|
-
if (v.text === state.key) return { ...v, selected: true }
|
|
53
|
-
return v
|
|
54
|
-
})
|
|
55
|
-
},
|
|
56
|
-
|
|
57
|
-
on: {
|
|
58
|
-
change: (ev, { state }) => {
|
|
59
|
-
state.update({ key: ev.target.value })
|
|
60
|
-
console.log(state.key)
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
6
|
+
export * from './AvatarChooser'
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@symbo.ls/avatar",
|
|
3
|
-
"version": "2.11.
|
|
3
|
+
"version": "2.11.210",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"gitHead": "
|
|
6
|
+
"gitHead": "45ec4a9a2ab3233c83b705202980d45b0c3cb91e",
|
|
7
7
|
"dependencies": {
|
|
8
8
|
"@symbo.ls/atoms": "latest",
|
|
9
9
|
"@symbo.ls/button": "latest",
|