classcard-ui 0.2.500 → 0.2.501
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 +64 -54
- package/dist/classcard-ui.common.js.map +1 -1
- package/dist/classcard-ui.umd.js +64 -54
- 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/CGroupedSelect/CGroupedSelect.vue +11 -6
package/package.json
CHANGED
|
@@ -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 {
|