@redseed/redseed-ui-vue3 8.3.0 → 8.3.1
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
|
@@ -20,6 +20,7 @@ const props = defineProps({
|
|
|
20
20
|
const emit = defineEmits(['change'])
|
|
21
21
|
|
|
22
22
|
const isOpen = ref(false)
|
|
23
|
+
const isMobileDevice = ref(false)
|
|
23
24
|
|
|
24
25
|
function toggleOptions() {
|
|
25
26
|
isOpen.value = !isOpen.value
|
|
@@ -40,6 +41,13 @@ function nativeChoose(event) {
|
|
|
40
41
|
emit('change', event.target.value)
|
|
41
42
|
}
|
|
42
43
|
|
|
44
|
+
function handleSelectClick(event) {
|
|
45
|
+
if (!isMobileDevice.value) {
|
|
46
|
+
event.preventDefault()
|
|
47
|
+
toggleOptions()
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
43
51
|
const formFieldSelectElement = ref(null)
|
|
44
52
|
const selectElement = ref(null)
|
|
45
53
|
const dropdownElement = ref(null)
|
|
@@ -100,6 +108,12 @@ function calculateDropdownPosition() {
|
|
|
100
108
|
}
|
|
101
109
|
|
|
102
110
|
onMounted(() => {
|
|
111
|
+
// Check if the device is a mobile device
|
|
112
|
+
// by checking if the device has a touch screen
|
|
113
|
+
// or if the device has a max touch points
|
|
114
|
+
isMobileDevice.value = 'ontouchstart' in window
|
|
115
|
+
|| (navigator.maxTouchPoints && navigator.maxTouchPoints > 0)
|
|
116
|
+
|
|
103
117
|
window.addEventListener('resize', () => calculateDropdownPosition())
|
|
104
118
|
})
|
|
105
119
|
|
|
@@ -117,7 +131,11 @@ defineExpose({
|
|
|
117
131
|
<FormFieldSlot
|
|
118
132
|
ref="formFieldSelectElement"
|
|
119
133
|
:id="$attrs.id"
|
|
120
|
-
:class="[
|
|
134
|
+
:class="[
|
|
135
|
+
$attrs.class,
|
|
136
|
+
'rsui-form-field-select',
|
|
137
|
+
{ 'rsui-form-field-select--mobile': isMobileDevice }
|
|
138
|
+
]"
|
|
121
139
|
:required="$attrs.required"
|
|
122
140
|
:showAsterisk="$attrs.showAsterisk"
|
|
123
141
|
:compact="$attrs.compact"
|
|
@@ -135,7 +153,7 @@ defineExpose({
|
|
|
135
153
|
:id="$attrs.id"
|
|
136
154
|
:name="$attrs.name"
|
|
137
155
|
:required="$attrs.required"
|
|
138
|
-
@click
|
|
156
|
+
@click="handleSelectClick"
|
|
139
157
|
@change.prevent="nativeChoose"
|
|
140
158
|
>
|
|
141
159
|
<option value="" disabled>
|
|
@@ -153,7 +171,7 @@ defineExpose({
|
|
|
153
171
|
</option>
|
|
154
172
|
</select>
|
|
155
173
|
|
|
156
|
-
<Teleport to="body">
|
|
174
|
+
<Teleport to="body" v-if="!isMobileDevice">
|
|
157
175
|
<transition
|
|
158
176
|
enter-active-class="enter-active-class"
|
|
159
177
|
enter-from-class="enter-from-class"
|