@fy-/fws-vue 2.0.68 → 2.0.71
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.
|
@@ -11,6 +11,7 @@ import {
|
|
|
11
11
|
import type { ErrorObject } from "@vuelidate/core";
|
|
12
12
|
import { useTranslation } from "../../composables/translations";
|
|
13
13
|
import DefaultTagInput from "./DefaultTagInput.vue";
|
|
14
|
+
import { parse } from "path";
|
|
14
15
|
//import VueTailwindDatepicker from "vue-tailwind-datepicker";
|
|
15
16
|
|
|
16
17
|
type modelValueType = string | number | string[] | number[] | undefined;
|
|
@@ -41,6 +42,8 @@ const props = withDefaults(
|
|
|
41
42
|
maxLengthPerTag?: number;
|
|
42
43
|
disableDatesUnder18?: boolean;
|
|
43
44
|
copyButton?: boolean;
|
|
45
|
+
maxRange?: number;
|
|
46
|
+
minRange?: number;
|
|
44
47
|
}>(),
|
|
45
48
|
{
|
|
46
49
|
showLabel: true,
|
|
@@ -51,6 +54,8 @@ const props = withDefaults(
|
|
|
51
54
|
checkboxFalseValue: false,
|
|
52
55
|
disabled: false,
|
|
53
56
|
maxLengthPerTag: 0,
|
|
57
|
+
maxRange: 100,
|
|
58
|
+
minRange: 0,
|
|
54
59
|
disableDatesUnder18: false,
|
|
55
60
|
copyButton: false,
|
|
56
61
|
dpOptions: () => ({}),
|
|
@@ -136,6 +141,7 @@ defineExpose({ focus, blur, getInputRef });
|
|
|
136
141
|
'textarea-grow',
|
|
137
142
|
'select',
|
|
138
143
|
'phone',
|
|
144
|
+
'range',
|
|
139
145
|
'chips',
|
|
140
146
|
'tags',
|
|
141
147
|
'mask',
|
|
@@ -150,6 +156,7 @@ defineExpose({ focus, blur, getInputRef });
|
|
|
150
156
|
'text',
|
|
151
157
|
'phone',
|
|
152
158
|
'password',
|
|
159
|
+
'range',
|
|
153
160
|
'email',
|
|
154
161
|
'search',
|
|
155
162
|
'url',
|
|
@@ -166,6 +173,7 @@ defineExpose({ focus, blur, getInputRef });
|
|
|
166
173
|
v-if="label"
|
|
167
174
|
class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
|
|
168
175
|
>{{ label }}
|
|
176
|
+
<template v-if="type === 'range'"> ({{ model }}) </template>
|
|
169
177
|
</label>
|
|
170
178
|
<input
|
|
171
179
|
ref="inputRef"
|
|
@@ -174,17 +182,41 @@ defineExpose({ focus, blur, getInputRef });
|
|
|
174
182
|
:name="id"
|
|
175
183
|
:class="{
|
|
176
184
|
error: checkErrors,
|
|
185
|
+
'bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500':
|
|
186
|
+
type !== 'range',
|
|
187
|
+
'w-full h-2 bg-fv-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-fv-neutral-700':
|
|
188
|
+
type === 'range',
|
|
177
189
|
}"
|
|
178
190
|
v-model="model"
|
|
179
191
|
:autocomplete="autocomplete"
|
|
192
|
+
:min="type === 'range' ? minRange : undefined"
|
|
193
|
+
:max="type === 'range' ? maxRange : undefined"
|
|
180
194
|
:placeholder="placeholder"
|
|
181
195
|
:disabled="disabled"
|
|
182
196
|
:aria-describedby="help ? `${id}-help` : id"
|
|
183
|
-
class="bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500"
|
|
184
197
|
:required="req"
|
|
185
198
|
@focus="handleFocus"
|
|
186
199
|
@blur="handleBlur"
|
|
187
200
|
/>
|
|
201
|
+
<template v-if="type === 'range'">
|
|
202
|
+
<span
|
|
203
|
+
class="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6"
|
|
204
|
+
>Min ({{ minRange }})
|
|
205
|
+
</span>
|
|
206
|
+
<span
|
|
207
|
+
class="text-sm text-gray-500 dark:text-gray-400 absolute start-1/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6"
|
|
208
|
+
>{{ ((maxRange - minRange) / 3 + minRange).toFixed(0) }}</span
|
|
209
|
+
>
|
|
210
|
+
<span
|
|
211
|
+
class="text-sm text-gray-500 dark:text-gray-400 absolute start-2/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6"
|
|
212
|
+
>
|
|
213
|
+
{{ (((maxRange - minRange) / 3) * 2 + minRange).toFixed(0) }}
|
|
214
|
+
</span>
|
|
215
|
+
<span
|
|
216
|
+
class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6"
|
|
217
|
+
>Max ({{ maxRange }})</span
|
|
218
|
+
>
|
|
219
|
+
</template>
|
|
188
220
|
</div>
|
|
189
221
|
<!--
|
|
190
222
|
<div v-if="type == 'datepicker'">
|