classcard-ui 0.2.830 → 0.2.832
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/classcard-ui.common.js +103 -59
- package/dist/classcard-ui.common.js.map +1 -1
- package/dist/classcard-ui.umd.js +103 -59
- package/dist/classcard-ui.umd.js.map +1 -1
- package/dist/classcard-ui.umd.min.js +1 -1
- package/dist/classcard-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CInputAddon/CInputAddon.vue +35 -9
- package/src/components/CMultiselect/CMultiselect.vue +17 -1
- package/src/stories/CMultiselect.stories.js +3 -0
package/package.json
CHANGED
|
@@ -11,7 +11,10 @@
|
|
|
11
11
|
</div>
|
|
12
12
|
<span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
|
|
13
13
|
</div>
|
|
14
|
-
<div
|
|
14
|
+
<div
|
|
15
|
+
v-if="!inlineAddon && addonType == 'leading'"
|
|
16
|
+
class="relative mt-1 flex rounded-md"
|
|
17
|
+
>
|
|
15
18
|
<span
|
|
16
19
|
:class="disabled ? 'opacity-50' : ''"
|
|
17
20
|
v-if="addon"
|
|
@@ -36,7 +39,10 @@
|
|
|
36
39
|
<c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
|
|
37
40
|
</div>
|
|
38
41
|
</div>
|
|
39
|
-
<div
|
|
42
|
+
<div
|
|
43
|
+
v-if="!inlineAddon && addonType == 'trailing'"
|
|
44
|
+
class="relative mt-1 flex rounded-md"
|
|
45
|
+
>
|
|
40
46
|
<input
|
|
41
47
|
:type="inputType"
|
|
42
48
|
:value="inputValue"
|
|
@@ -60,7 +66,10 @@
|
|
|
60
66
|
{{ addon }}
|
|
61
67
|
</span>
|
|
62
68
|
</div>
|
|
63
|
-
<div
|
|
69
|
+
<div
|
|
70
|
+
v-if="inlineAddon && addonType == 'trailing'"
|
|
71
|
+
class="relative mt-1 flex rounded-md"
|
|
72
|
+
>
|
|
64
73
|
<input
|
|
65
74
|
:type="inputType"
|
|
66
75
|
:value="inputValue"
|
|
@@ -71,23 +80,37 @@
|
|
|
71
80
|
:placeholder="placeholder"
|
|
72
81
|
:disabled="disabled"
|
|
73
82
|
/>
|
|
74
|
-
<div
|
|
83
|
+
<div
|
|
84
|
+
class="pointer-events-none absolute inset-y-0 right-3 flex items-center"
|
|
85
|
+
>
|
|
75
86
|
<div
|
|
76
87
|
v-if="!isValidate"
|
|
77
88
|
class="pointer-events-none right-0 flex items-center pr-2 text-red-600"
|
|
78
89
|
>
|
|
79
|
-
<c-icon
|
|
90
|
+
<c-icon
|
|
91
|
+
name="exclamation-circle"
|
|
92
|
+
type="solid"
|
|
93
|
+
class="h-5 w-5"
|
|
94
|
+
></c-icon>
|
|
80
95
|
</div>
|
|
81
96
|
<span
|
|
82
97
|
class="text-gray-500 sm:text-sm"
|
|
83
|
-
:class="[
|
|
98
|
+
:class="[
|
|
99
|
+
disabled ? 'opacity-50' : '',
|
|
100
|
+
inputType === 'number' ? 'mr-5' : '',
|
|
101
|
+
]"
|
|
84
102
|
>
|
|
85
103
|
{{ addon }}
|
|
86
104
|
</span>
|
|
87
105
|
</div>
|
|
88
106
|
</div>
|
|
89
|
-
<div
|
|
90
|
-
|
|
107
|
+
<div
|
|
108
|
+
v-if="inlineAddon && addonType == 'leading'"
|
|
109
|
+
class="relative mt-1 flex rounded-md"
|
|
110
|
+
>
|
|
111
|
+
<div
|
|
112
|
+
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
|
|
113
|
+
>
|
|
91
114
|
<span class="text-gray-500 sm:text-sm">{{ addon }}</span>
|
|
92
115
|
</div>
|
|
93
116
|
<input
|
|
@@ -111,7 +134,10 @@
|
|
|
111
134
|
<p v-if="!isValidate" class="mt-2 text-left text-sm text-red-600">
|
|
112
135
|
{{ errorMessage }}
|
|
113
136
|
</p>
|
|
114
|
-
<p
|
|
137
|
+
<p
|
|
138
|
+
v-if="helpText && isValidate == true"
|
|
139
|
+
:class="`mt-2 text-left text-sm ${helpTextColorStyles}`"
|
|
140
|
+
>
|
|
115
141
|
{{ helpText }}
|
|
116
142
|
</p>
|
|
117
143
|
</div>
|
|
@@ -104,7 +104,19 @@
|
|
|
104
104
|
class="mr-2"
|
|
105
105
|
></c-avatar>
|
|
106
106
|
<div class="w-full hover:text-white">
|
|
107
|
-
<
|
|
107
|
+
<div class="flex items-center">
|
|
108
|
+
<p>{{ option[optionLabel] }}</p>
|
|
109
|
+
<!-- <c-tag v-if="tags" label="Something" color="gray"></c-tag> -->
|
|
110
|
+
<div class="ml-3">
|
|
111
|
+
<span
|
|
112
|
+
v-if="tags"
|
|
113
|
+
class="inline-flex rounded-md bg-gray-400 px-2 py-px text-sm leading-5 text-white"
|
|
114
|
+
>
|
|
115
|
+
{{ option.type }}
|
|
116
|
+
</span>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
108
120
|
<p class="text-xs" v-if="option.description">
|
|
109
121
|
{{ option.description }}
|
|
110
122
|
</p>
|
|
@@ -252,6 +264,10 @@ export default {
|
|
|
252
264
|
helpText: {
|
|
253
265
|
type: String,
|
|
254
266
|
},
|
|
267
|
+
tags: {
|
|
268
|
+
type: Boolean,
|
|
269
|
+
default: false,
|
|
270
|
+
},
|
|
255
271
|
},
|
|
256
272
|
computed: {},
|
|
257
273
|
data() {
|
|
@@ -88,17 +88,20 @@ Default.args = {
|
|
|
88
88
|
text: "Packages",
|
|
89
89
|
initials: "AS",
|
|
90
90
|
children: [{ id: "15820_Package", text: "Mathematics" }],
|
|
91
|
+
description: "Some descriptions",
|
|
91
92
|
},
|
|
92
93
|
{
|
|
93
94
|
text: "Packages",
|
|
94
95
|
initials: "AS",
|
|
95
96
|
children: [{ id: "15820_Package", text: "Mathematics" }],
|
|
96
97
|
details: "something@gmail.com",
|
|
98
|
+
description: "Some descriptions",
|
|
97
99
|
},
|
|
98
100
|
{
|
|
99
101
|
text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ",
|
|
100
102
|
children: [{ id: "15820_Package", text: "Mathematics" }],
|
|
101
103
|
details: "something@gmail.com",
|
|
104
|
+
description: "Some descriptions",
|
|
102
105
|
},
|
|
103
106
|
],
|
|
104
107
|
optionLabel: "text",
|