@citizenplane/pimp 8.2.0 → 8.2.2
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/dist/pimp.es.js +66 -105
- package/dist/pimp.umd.js +2 -2
- package/dist/style.css +1 -1
- package/package-lock.json +256 -136
- package/package.json +4 -4
- package/src/components/visual/CpIcon.vue +3 -72
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citizenplane/pimp",
|
|
3
|
-
"version": "8.2.
|
|
3
|
+
"version": "8.2.2",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite --host",
|
|
6
6
|
"build": "vite build",
|
|
@@ -29,16 +29,16 @@
|
|
|
29
29
|
"animejs": "^3.2.0",
|
|
30
30
|
"feather-icons": "^4.29.0",
|
|
31
31
|
"luxon": "^3.2.1",
|
|
32
|
-
"maska": "^2.1.
|
|
32
|
+
"maska": "^2.1.6"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@babel/core": "^7.20.12",
|
|
36
36
|
"@vitejs/plugin-vue": "^2.3.4",
|
|
37
37
|
"@vue/babel-preset-app": "^5.0.8",
|
|
38
38
|
"@vue/eslint-config-prettier": "^7.0.0",
|
|
39
|
-
"@vue/test-utils": "^2.2.
|
|
39
|
+
"@vue/test-utils": "^2.2.8",
|
|
40
40
|
"babel-core": "^7.0.0-bridge.0",
|
|
41
|
-
"eslint": "^8.
|
|
41
|
+
"eslint": "^8.32.0",
|
|
42
42
|
"eslint-plugin-prettier": "^4.2.1",
|
|
43
43
|
"eslint-plugin-vue": "^9.9.0",
|
|
44
44
|
"husky": "^8.0.3",
|
|
@@ -5,46 +5,11 @@ import * as feather from 'feather-icons'
|
|
|
5
5
|
export default defineComponent({
|
|
6
6
|
name: 'CpIcon',
|
|
7
7
|
props: {
|
|
8
|
-
animation: {
|
|
9
|
-
type: String,
|
|
10
|
-
default: undefined,
|
|
11
|
-
},
|
|
12
|
-
|
|
13
|
-
animationSpeed: {
|
|
14
|
-
type: String,
|
|
15
|
-
default: undefined,
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
-
fill: {
|
|
19
|
-
type: String,
|
|
20
|
-
default: 'none',
|
|
21
|
-
},
|
|
22
|
-
|
|
23
8
|
size: {
|
|
24
9
|
type: [Number, String],
|
|
25
10
|
default: 24,
|
|
26
11
|
},
|
|
27
12
|
|
|
28
|
-
stroke: {
|
|
29
|
-
type: String,
|
|
30
|
-
default: 'currentColor',
|
|
31
|
-
},
|
|
32
|
-
|
|
33
|
-
strokeLinecap: {
|
|
34
|
-
type: String,
|
|
35
|
-
default: 'round',
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
strokeLinejoin: {
|
|
39
|
-
type: String,
|
|
40
|
-
default: 'round',
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
strokeWidth: {
|
|
44
|
-
type: [Number, String],
|
|
45
|
-
default: 2,
|
|
46
|
-
},
|
|
47
|
-
|
|
48
13
|
tag: {
|
|
49
14
|
type: String,
|
|
50
15
|
default: 'i',
|
|
@@ -67,7 +32,7 @@ export default defineComponent({
|
|
|
67
32
|
},
|
|
68
33
|
},
|
|
69
34
|
setup(props, { attrs }) {
|
|
70
|
-
let icon = feather.icons[props.type]
|
|
35
|
+
let icon = feather.icons[props.type] || ''
|
|
71
36
|
|
|
72
37
|
watch(
|
|
73
38
|
() => props.type,
|
|
@@ -86,10 +51,8 @@ export default defineComponent({
|
|
|
86
51
|
'data-tags': icon.tags,
|
|
87
52
|
'data-type': props.type,
|
|
88
53
|
class: {
|
|
89
|
-
|
|
54
|
+
cpIcon: true,
|
|
90
55
|
[`cpIcon--${props.type}`]: props.type,
|
|
91
|
-
[`cpIcon--${props.animation}`]: props.animation,
|
|
92
|
-
[`cpIcon--${props.animationSpeed}`]: props.animationSpeed,
|
|
93
56
|
},
|
|
94
57
|
},
|
|
95
58
|
|
|
@@ -99,12 +62,7 @@ export default defineComponent({
|
|
|
99
62
|
|
|
100
63
|
{
|
|
101
64
|
...icon.attrs,
|
|
102
|
-
fill: props.fill,
|
|
103
65
|
height: props.size,
|
|
104
|
-
stroke: props.stroke,
|
|
105
|
-
'stroke-linecap': props.strokeLinecap,
|
|
106
|
-
'stroke-linejoin': props.strokeLinejoin,
|
|
107
|
-
'stroke-width': props.strokeWidth,
|
|
108
66
|
width: props.size,
|
|
109
67
|
class: [icon.attrs.class, 'cpIcon__content'],
|
|
110
68
|
innerHTML: icon.contents,
|
|
@@ -117,38 +75,11 @@ export default defineComponent({
|
|
|
117
75
|
</script>
|
|
118
76
|
|
|
119
77
|
<style lang="scss">
|
|
120
|
-
@keyframes cpIcon--spin {
|
|
121
|
-
from {
|
|
122
|
-
transform: rotate(0);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
to {
|
|
126
|
-
transform: rotate(360deg);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
78
|
.cpIcon {
|
|
131
|
-
display: inline-
|
|
79
|
+
display: inline-flex;
|
|
132
80
|
overflow: hidden;
|
|
133
81
|
|
|
134
|
-
&--spin {
|
|
135
|
-
animation: cpIcon--spin 2s linear infinite;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
&--pulse {
|
|
139
|
-
animation: cpIcon--spin 2s infinite steps(8);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
&--slow {
|
|
143
|
-
animation-duration: 3s;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
&--fast {
|
|
147
|
-
animation-duration: 1s;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
82
|
&__content {
|
|
151
|
-
display: block;
|
|
152
83
|
height: inherit;
|
|
153
84
|
width: inherit;
|
|
154
85
|
}
|