vue-quest-ui 0.0.2 → 0.0.4
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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-quest-ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist",
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
"exports": {
|
|
13
13
|
".": {
|
|
14
14
|
"import": "./dist/vue-quest-ui.js",
|
|
15
|
-
"require": "./dist/vue-quest-ui-umd.cjs"
|
|
15
|
+
"require": "./dist/vue-quest-ui-umd.cjs",
|
|
16
|
+
"css": "./dist/vue-quest-ui.css"
|
|
16
17
|
}
|
|
17
18
|
},
|
|
18
19
|
"description": "A reusable component library",
|
|
@@ -38,6 +39,6 @@
|
|
|
38
39
|
"vue": "^3.2.0 || ^3.5.0"
|
|
39
40
|
},
|
|
40
41
|
"dependencies": {
|
|
41
|
-
"@iconify/vue": "^4.
|
|
42
|
+
"@iconify/vue": "^3.0.0 || ^4.0.0"
|
|
42
43
|
}
|
|
43
44
|
}
|
|
@@ -6,30 +6,35 @@ const props = defineProps({
|
|
|
6
6
|
icon: {
|
|
7
7
|
type: String,
|
|
8
8
|
required: true,
|
|
9
|
-
|
|
9
|
+
tsType: 'string',
|
|
10
|
+
description: 'Any iconify value.',
|
|
10
11
|
},
|
|
11
12
|
color: {
|
|
12
13
|
type: String,
|
|
13
14
|
required: false,
|
|
14
|
-
default:
|
|
15
|
+
default: null,
|
|
16
|
+
tsType: 'string',
|
|
15
17
|
description: 'Color of the icon.',
|
|
16
18
|
},
|
|
17
19
|
circle: {
|
|
18
20
|
type: Boolean,
|
|
19
21
|
required: false,
|
|
20
|
-
default: false,
|
|
22
|
+
default: false,
|
|
23
|
+
tsType: 'boolean',
|
|
21
24
|
description: 'Shows the icon in a circle.',
|
|
22
25
|
},
|
|
23
26
|
size: {
|
|
24
27
|
type: String,
|
|
25
28
|
required: false,
|
|
26
|
-
default: '
|
|
29
|
+
default: '16px',
|
|
30
|
+
tsType: 'string',
|
|
27
31
|
description: 'Size of the icon.',
|
|
28
32
|
},
|
|
29
33
|
alignText: {
|
|
30
34
|
type: Boolean,
|
|
31
35
|
required: false,
|
|
32
36
|
default: false,
|
|
37
|
+
tsType: 'boolean',
|
|
33
38
|
description: 'Vertically aligns the icon and text.',
|
|
34
39
|
},
|
|
35
40
|
});
|
|
@@ -43,7 +48,7 @@ const iconStyle = computed(() => {
|
|
|
43
48
|
padding: '3px',
|
|
44
49
|
}
|
|
45
50
|
}
|
|
46
|
-
return !!props.color ? {
|
|
51
|
+
return !!props.color ? {color: props.color} : null;
|
|
47
52
|
});
|
|
48
53
|
</script>
|
|
49
54
|
|
|
@@ -5,27 +5,24 @@ const props = defineProps({
|
|
|
5
5
|
image: {
|
|
6
6
|
type: String,
|
|
7
7
|
required: false,
|
|
8
|
-
default:
|
|
8
|
+
default: null,
|
|
9
|
+
tsType: 'string',
|
|
9
10
|
description: 'The image for the user, if not provided defaults to a user icon.'
|
|
10
11
|
},
|
|
11
12
|
size: {
|
|
12
13
|
type: String,
|
|
13
14
|
required: false,
|
|
14
15
|
default: '14px',
|
|
16
|
+
tsType: 'string',
|
|
15
17
|
description: 'Size of the image.'
|
|
16
18
|
},
|
|
17
|
-
|
|
19
|
+
backgroundColor: {
|
|
18
20
|
type: String,
|
|
19
21
|
required: false,
|
|
20
|
-
default:
|
|
22
|
+
default: null,
|
|
23
|
+
tsType: 'string',
|
|
21
24
|
description: 'Background color when showing the user icon.'
|
|
22
25
|
},
|
|
23
|
-
iconColor: {
|
|
24
|
-
type: String,
|
|
25
|
-
required: false,
|
|
26
|
-
default: '#fff',
|
|
27
|
-
description: 'Color when showing the user icon.'
|
|
28
|
-
},
|
|
29
26
|
});
|
|
30
27
|
|
|
31
28
|
</script>
|
|
@@ -33,7 +30,7 @@ const props = defineProps({
|
|
|
33
30
|
<template>
|
|
34
31
|
<div class="user-image__wrapper">
|
|
35
32
|
<img v-if="!!image" :src="image" :style="{fontSize: size}" class="user-image" />
|
|
36
|
-
<base-icon v-else icon="ph:user-fill" :size="size" circle :color="
|
|
33
|
+
<base-icon v-else icon="ph:user-fill" :size="size" circle :color="backgroundColor" :class="{'icon-border': !backgroundColor}" class="user-icon" />
|
|
37
34
|
</div>
|
|
38
35
|
</template>
|
|
39
36
|
|
|
@@ -45,11 +42,14 @@ const props = defineProps({
|
|
|
45
42
|
border-radius: 50%;
|
|
46
43
|
width: 2.35em;
|
|
47
44
|
}
|
|
48
|
-
.user-icon{
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
:deep(.user-icon){
|
|
46
|
+
svg{
|
|
47
|
+
width: 2.3em !important;
|
|
48
|
+
height: 2.3em !important;
|
|
49
|
+
}
|
|
50
|
+
&.icon-border{
|
|
51
|
+
border: 1px solid white;
|
|
52
|
+
border-radius: 50%;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
</style>
|