classcard-ui 0.2.499 → 0.2.502
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 +75 -80
- package/dist/classcard-ui.common.js.map +1 -1
- package/dist/classcard-ui.umd.js +75 -80
- 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/CButtonIcon/CButtonIcon.vue +11 -28
- package/src/components/CGroupedSelect/CGroupedSelect.vue +11 -6
- package/src/components/CSelect/CSelect.vue +4 -4
package/package.json
CHANGED
|
@@ -3,42 +3,27 @@
|
|
|
3
3
|
<slot></slot>
|
|
4
4
|
<button
|
|
5
5
|
v-if="type == 'tertiary'"
|
|
6
|
-
class="flex cursor-pointer flex-row rounded-md px-2 py-2 text-sm text-indigo-600 hover:bg-indigo-100 hover:text-indigo-800 focus:
|
|
7
|
-
@click="$emit('action')"
|
|
6
|
+
class="focus:outline-none flex cursor-pointer flex-row rounded-md px-2 py-2 text-sm text-indigo-600 hover:bg-indigo-100 hover:text-indigo-800 focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2"
|
|
7
|
+
@click.prevent="$emit('action')"
|
|
8
8
|
>
|
|
9
|
-
<c-icon
|
|
10
|
-
v-if="icon"
|
|
11
|
-
:type="icon.type"
|
|
12
|
-
:class="icon.class"
|
|
13
|
-
:name="icon.name"
|
|
14
|
-
></c-icon>
|
|
9
|
+
<c-icon v-if="icon" :type="icon.type" :class="icon.class" :name="icon.name"></c-icon>
|
|
15
10
|
<slot></slot>
|
|
16
11
|
</button>
|
|
17
12
|
<button
|
|
18
13
|
v-else-if="type == 'rounded-hover'"
|
|
19
|
-
@click="$emit('action')"
|
|
20
|
-
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-500 focus:
|
|
14
|
+
@click.prevent="$emit('action')"
|
|
15
|
+
class="focus:outline-none flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500"
|
|
21
16
|
>
|
|
22
|
-
<c-icon
|
|
23
|
-
v-if="icon"
|
|
24
|
-
:type="icon.type"
|
|
25
|
-
:class="icon.class"
|
|
26
|
-
:name="icon.name"
|
|
27
|
-
></c-icon>
|
|
17
|
+
<c-icon v-if="icon" :type="icon.type" :class="icon.class" :name="icon.name"></c-icon>
|
|
28
18
|
</button>
|
|
29
19
|
<button
|
|
30
20
|
v-else
|
|
31
21
|
:type="type"
|
|
32
22
|
:class="classes"
|
|
33
|
-
class="inline-flex items-center rounded-md px-2 py-2 text-sm font-medium shadow-sm focus:
|
|
34
|
-
@click="$emit('action')"
|
|
23
|
+
class="focus:outline-none inline-flex items-center rounded-md px-2 py-2 text-sm font-medium shadow-sm focus:ring-2 focus:ring-offset-2"
|
|
24
|
+
@click.prevent="$emit('action')"
|
|
35
25
|
>
|
|
36
|
-
<c-icon
|
|
37
|
-
v-if="isLoading"
|
|
38
|
-
class="mr-2 h-5 w-5"
|
|
39
|
-
:class="loaderClasses"
|
|
40
|
-
name="loader"
|
|
41
|
-
></c-icon>
|
|
26
|
+
<c-icon v-if="isLoading" class="mr-2 h-5 w-5" :class="loaderClasses" name="loader"></c-icon>
|
|
42
27
|
<c-icon
|
|
43
28
|
v-if="icon"
|
|
44
29
|
:type="icon.type"
|
|
@@ -86,12 +71,10 @@ export default {
|
|
|
86
71
|
this.type == "secondary",
|
|
87
72
|
"border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
|
|
88
73
|
this.type == "primary",
|
|
89
|
-
"border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
|
|
90
|
-
this.type == "danger",
|
|
74
|
+
"border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600": this.type == "danger",
|
|
91
75
|
"border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
|
|
92
76
|
this.type == "success",
|
|
93
|
-
"text-gray-900 hover:bg-gray-200 bg-gray-100":
|
|
94
|
-
this.type == "secondary-gray",
|
|
77
|
+
"text-gray-900 hover:bg-gray-200 bg-gray-100": this.type == "secondary-gray",
|
|
95
78
|
"cursor-default pointer-events-none": this.isLoading,
|
|
96
79
|
};
|
|
97
80
|
},
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<div class="relative">
|
|
14
14
|
<input
|
|
15
15
|
type="text"
|
|
16
|
-
class="
|
|
16
|
+
class="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:pointer-events-none disabled:opacity-50 sm:text-sm"
|
|
17
17
|
aria-haspopup="listbox"
|
|
18
18
|
aria-expanded="true"
|
|
19
19
|
aria-labelledby="listbox-label"
|
|
@@ -23,7 +23,9 @@
|
|
|
23
23
|
@input="onInput"
|
|
24
24
|
:disabled="disabled"
|
|
25
25
|
/>
|
|
26
|
-
<span
|
|
26
|
+
<span
|
|
27
|
+
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
|
|
28
|
+
>
|
|
27
29
|
<svg
|
|
28
30
|
class="h-5 w-5 animate-spin text-gray-400"
|
|
29
31
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -73,7 +75,7 @@
|
|
|
73
75
|
To: "opacity-0"
|
|
74
76
|
-->
|
|
75
77
|
<ul
|
|
76
|
-
class="
|
|
78
|
+
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
|
77
79
|
tabindex="-1"
|
|
78
80
|
role="listbox"
|
|
79
81
|
aria-labelledby="listbox-label"
|
|
@@ -88,7 +90,7 @@
|
|
|
88
90
|
|
|
89
91
|
<span v-for="option in options" :key="option.id">
|
|
90
92
|
<li
|
|
91
|
-
class="relative cursor-default select-none py-2 pl-3 pr-9 text-left
|
|
93
|
+
class="relative cursor-default select-none bg-gray-100 py-2 pl-3 pr-9 text-left text-xs font-semibold text-gray-900"
|
|
92
94
|
role="option"
|
|
93
95
|
>
|
|
94
96
|
<span class="block truncate">
|
|
@@ -105,7 +107,9 @@
|
|
|
105
107
|
<!-- Selected: "font-semibold", Not Selected: "font-normal" -->
|
|
106
108
|
<span
|
|
107
109
|
:class="[
|
|
108
|
-
subOption
|
|
110
|
+
subOption[keyField] === value[keyField]
|
|
111
|
+
? 'font-semibold'
|
|
112
|
+
: 'font-normal',
|
|
109
113
|
' block break-words',
|
|
110
114
|
]"
|
|
111
115
|
>
|
|
@@ -119,7 +123,7 @@
|
|
|
119
123
|
-->
|
|
120
124
|
<span
|
|
121
125
|
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 group-hover:text-white"
|
|
122
|
-
v-if="subOption
|
|
126
|
+
v-if="subOption[keyField] === value[keyField]"
|
|
123
127
|
>
|
|
124
128
|
<!-- Heroicon name: solid/check -->
|
|
125
129
|
<svg
|
|
@@ -165,6 +169,7 @@ export default {
|
|
|
165
169
|
type: String,
|
|
166
170
|
default: "This field cannot be empty",
|
|
167
171
|
},
|
|
172
|
+
keyField: { type: String, default: "label" },
|
|
168
173
|
},
|
|
169
174
|
data() {
|
|
170
175
|
return {
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
<c-avatar
|
|
35
35
|
v-if="showImage && !selectSearch"
|
|
36
36
|
size="extraextrasmall"
|
|
37
|
-
image="
|
|
37
|
+
:image="value.photo"
|
|
38
38
|
:rounded="true"
|
|
39
39
|
></c-avatar>
|
|
40
40
|
<c-icon
|
|
@@ -104,13 +104,13 @@
|
|
|
104
104
|
>
|
|
105
105
|
<span class="flex items-center">
|
|
106
106
|
<c-avatar
|
|
107
|
-
v-if="showImage && option.
|
|
107
|
+
v-if="showImage && option.photo"
|
|
108
108
|
size="extraextrasmall"
|
|
109
|
-
:image="option.
|
|
109
|
+
:image="option.photo"
|
|
110
110
|
:rounded="true"
|
|
111
111
|
></c-avatar>
|
|
112
112
|
<span
|
|
113
|
-
:class="showImage && option.
|
|
113
|
+
:class="showImage && option.photo ? 'ml-3' : ''"
|
|
114
114
|
class="list-options block break-words font-normal"
|
|
115
115
|
>{{ option[renderOptionName] }}
|
|
116
116
|
</span>
|