edvoyui-component-library-test-flight 0.0.236 → 0.0.237
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/components/select/EUISelect.vue +30 -8
- package/dist/edvoy-ui.cjs.js +9 -9
- package/dist/edvoy-ui.css +1 -1
- package/dist/edvoy-ui.es.js +2719 -2713
- package/dist/edvoy-ui.umd.js +12 -12
- package/package.json +1 -1
|
@@ -59,8 +59,9 @@
|
|
|
59
59
|
:class="[
|
|
60
60
|
inputValue
|
|
61
61
|
? 'top-3.5 text-xs text-gray-400 cursor-default max-w-max'
|
|
62
|
-
: 'top-1/2 text-sm text-gray-700
|
|
63
|
-
disabled ? '
|
|
62
|
+
: 'top-1/2 text-sm text-gray-700 h-14 pt-5 pb-4 ring-0 ring-gray-200 ml-px group-focus-within:top-3.5 group-focus-within:py-0 group-focus-within:h-auto group-focus-within:text-xs group-focus-within:w-max w-[88%] group-focus-within:-translate-y-1/2 group-focus-within:text-gray-400',
|
|
63
|
+
!inputValue && (disabled ? 'bg-gray-100' : 'bg-white'),
|
|
64
|
+
disabled ? 'cursor-not-allowed' : !inputValue && 'cursor-pointer',
|
|
64
65
|
required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
|
|
65
66
|
]"
|
|
66
67
|
class="absolute pointer-events-none text-left font-medium inset-x-0 px-4 z-10 -translate-y-1/2 duration-200 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-xl group-focus-within:bg-transparent group-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 capitalize leading-[normal]"
|
|
@@ -94,22 +95,33 @@
|
|
|
94
95
|
:class="
|
|
95
96
|
isUseCustomSelect
|
|
96
97
|
? 'break-words flex items-start'
|
|
97
|
-
: 'flex items-center'
|
|
98
|
+
: 'flex items-center min-w-0 max-w-full overflow-hidden'
|
|
98
99
|
"
|
|
99
100
|
>
|
|
100
101
|
<img
|
|
101
102
|
v-if="
|
|
102
103
|
name == 'country' ? getFlag({ nameText:item[fieldName], iconlink:(item as any)?.iconlink }) : (item as any)?.iconlink
|
|
103
104
|
"
|
|
104
|
-
:class="
|
|
105
|
+
:class="
|
|
106
|
+
isUseCustomSelect
|
|
107
|
+
? 'w-6 mr-1 flex-initial'
|
|
108
|
+
: 'w-6 mr-2 flex-shrink-0'
|
|
109
|
+
"
|
|
105
110
|
:src="
|
|
106
111
|
name == 'country' ? getFlag({ nameText:item[fieldName], iconlink:(item as any)?.iconlink }) : (item as any)?.iconlink
|
|
107
112
|
"
|
|
108
113
|
:alt="item[fieldName]"
|
|
109
114
|
/>
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
115
|
+
<span
|
|
116
|
+
:class="!isUseCustomSelect && 'block min-w-0 truncate'"
|
|
117
|
+
:title="
|
|
118
|
+
!isUseCustomSelect ? String(item[fieldName] ?? '') : undefined
|
|
119
|
+
"
|
|
120
|
+
>
|
|
121
|
+
{{
|
|
122
|
+
isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName]
|
|
123
|
+
}}
|
|
124
|
+
</span>
|
|
113
125
|
</div>
|
|
114
126
|
</template>
|
|
115
127
|
|
|
@@ -119,7 +131,7 @@
|
|
|
119
131
|
<!-- Passing the 'option' data -->
|
|
120
132
|
</template>
|
|
121
133
|
<template v-else #option="item">
|
|
122
|
-
<div class="flex items-center gap-2">
|
|
134
|
+
<div class="flex items-center gap-2 break-words whitespace-normal">
|
|
123
135
|
<img
|
|
124
136
|
v-if="(item as any).iconlink"
|
|
125
137
|
class="flex-shrink-0 size-6"
|
|
@@ -940,6 +952,16 @@ const open = () => {
|
|
|
940
952
|
}
|
|
941
953
|
}
|
|
942
954
|
|
|
955
|
+
.v-select.vs--single:not(.customselect) {
|
|
956
|
+
.vs__selected-options {
|
|
957
|
+
@apply min-w-0 flex-nowrap overflow-hidden;
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
.vs__selected {
|
|
961
|
+
@apply min-w-0 max-w-full overflow-hidden;
|
|
962
|
+
}
|
|
963
|
+
}
|
|
964
|
+
|
|
943
965
|
.vs__selected-options {
|
|
944
966
|
@apply group-focus:bg-transparent focus-within:bg-transparent border-transparent;
|
|
945
967
|
background-color: v-bind(selectBG);
|