@dative-gpi/foundation-shared-components 0.0.204 → 0.0.206

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.
Files changed (15) hide show
  1. package/components/FSCalendar.vue +1 -0
  2. package/components/FSCalendarTwin.vue +2 -1
  3. package/components/FSClock.vue +22 -6
  4. package/components/autocompletes/FSAutoCompleteAddress.vue +6 -6
  5. package/components/autocompletes/FSAutocompleteLanguage.vue +4 -5
  6. package/components/autocompletes/FSAutocompleteTimeZone.vue +4 -5
  7. package/components/fields/FSColorField.vue +9 -11
  8. package/components/fields/FSDateField.vue +10 -4
  9. package/components/fields/FSDateRangeField.vue +10 -4
  10. package/components/fields/FSDateTimeField.vue +24 -11
  11. package/components/fields/FSDateTimeRangeField.vue +39 -25
  12. package/components/fields/FSTermField.vue +191 -183
  13. package/components/fields/FSTimeField.vue +21 -12
  14. package/components/fields/FSTranslateField.vue +7 -14
  15. package/package.json +4 -4
package/components/fields/FSTermField.vue CHANGED
@@ -18,19 +18,19 @@
18
18
  :editable="$props.editable"
19
19
  :variant="$props.variant"
20
20
  :hideHeader="true"
21
- :modelValue="localDateSetting"
22
- @update:modelValue="localDateSettingChange"
21
+ :modelValue="innerDateSetting"
22
+ @update:modelValue="innerDateSettingChange"
23
23
  />
24
24
  <FSNumberField
25
- v-if="pastSettings.includes(localDateSetting)"
25
+ v-if="pastSettings.includes(innerDateSetting)"
26
26
  :rules="[NumberRules.required(), NumberRules.min(0)]"
27
27
  :editable="$props.editable"
28
28
  :hideHeader="true"
29
- :modelValue="localDateValue"
30
- @update:modelValue="localDateValueChange"
29
+ :modelValue="innerDateValue"
30
+ @update:modelValue="innerDateValueChange"
31
31
  />
32
32
  <template
33
- v-else-if="localDateSetting === DateSetting.Expression"
33
+ v-else-if="innerDateSetting === DateSetting.Expression"
34
34
  >
35
35
  <FSRow
36
36
  align="center-left"
@@ -43,8 +43,8 @@
43
43
  :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
44
44
  :editable="$props.editable"
45
45
  :hideHeader="true"
46
- :modelValue="localStartDate"
47
- @update:modelValue="localStartDateChange"
46
+ :modelValue="innerStartDate"
47
+ @update:modelValue="innerStartDateChange"
48
48
  />
49
49
  </FSRow>
50
50
  <FSRow
@@ -58,17 +58,17 @@
58
58
  :rules="[TextRules.required(), DateRules.validateExpression($props.variant)]"
59
59
  :editable="$props.editable"
60
60
  :hideHeader="true"
61
- :modelValue="localEndDate"
62
- @update:modelValue="localEndDateChange"
61
+ :modelValue="innerEndDate"
62
+ @update:modelValue="innerEndDateChange"
63
63
  />
64
64
  </FSRow>
65
65
  </template>
66
66
  <FSDateTimeRangeField
67
- v-else-if="localDateSetting === DateSetting.Pick"
67
+ v-else-if="innerDateSetting === DateSetting.Pick"
68
68
  :rules="[DateRules.required()]"
69
69
  :editable="$props.editable"
70
70
  :hideHeader="true"
71
- :modelValue="[parseForPicker(localStartDate)!, parseForPicker(localEndDate)!]"
71
+ :modelValue="[parseForPicker(innerStartDate)!, parseForPicker(innerEndDate)!]"
72
72
  @update:modelValue="onPickDates"
73
73
  />
74
74
  </FSRow>
@@ -77,8 +77,7 @@
77
77
  </template>
78
78
 
79
79
  <script lang="ts">
80
- import type { PropType} from "vue";
81
- import { computed, defineComponent, onMounted, ref} from "vue";
80
+ import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
82
81
  import _ from "lodash";
83
82
 
84
83
  import { DateRules, NumberRules, TextRules } from "@dative-gpi/foundation-shared-components/models";
@@ -167,10 +166,10 @@ export default defineComponent({
167
166
  const { parseForPicker,formatFromPicker, formatCurrentForPicker } = useAppTimeZone();
168
167
  const { getMessages } = useRules();
169
168
 
170
- const localDateSetting = ref<DateSetting>(DateSetting.PastDays);
171
- const localDateValue = ref<number>(1);
172
- const localStartDate = ref<string>("now - 1d");
173
- const localEndDate = ref<string>("now");
169
+ const innerDateSetting = ref<DateSetting>(DateSetting.PastDays);
170
+ const innerDateValue = ref<number>(1);
171
+ const innerStartDate = ref<string>("now - 1d");
172
+ const innerEndDate = ref<string>("now");
174
173
 
175
174
  const valid = ref<boolean>(false);
176
175
 
@@ -187,12 +186,12 @@ export default defineComponent({
187
186
  getMessages(props.startDate, props.rules).concat(getMessages(props.endDate, props.rules));
188
187
  });
189
188
 
190
- const localStartDateChange = (value: string) => {
189
+ const innerStartDateChange = (value: string) => {
191
190
  debouncedStartDate(value);
192
191
  };
193
192
 
194
193
  const onStartDateChange = (value: string) => {
195
- localStartDate.value = value;
194
+ innerStartDate.value = value;
196
195
  if (valid.value) {
197
196
  emit("update:startDate", value);
198
197
  }
@@ -200,12 +199,12 @@ export default defineComponent({
200
199
 
201
200
  const debouncedStartDate = _.debounce(onStartDateChange, 1000);
202
201
 
203
- const localEndDateChange = (value: string) => {
202
+ const innerEndDateChange = (value: string) => {
204
203
  debouncedEndDate(value);
205
204
  };
206
205
 
207
206
  const onEndDateChange = (value: string) => {
208
- localEndDate.value = value;
207
+ innerEndDate.value = value;
209
208
  if (valid.value) {
210
209
  emit("update:endDate", value);
211
210
  }
@@ -213,255 +212,255 @@ export default defineComponent({
213
212
 
214
213
  const debouncedEndDate = _.debounce(onEndDateChange, 1000);
215
214
 
216
- const localDateSettingChange = (value: DateSetting) => {
217
- localDateSetting.value = value;
215
+ const innerDateSettingChange = (value: DateSetting) => {
216
+ innerDateSetting.value = value;
218
217
  switch (value) {
219
218
  case DateSetting.None:
220
219
  return;
221
220
  case DateSetting.PastHours:
222
- localStartDate.value = `now - ${localDateValue.value}h`;
223
- localEndDate.value = "now";
221
+ innerStartDate.value = `now - ${innerDateValue.value}h`;
222
+ innerEndDate.value = "now";
224
223
  break;
225
224
  case DateSetting.PastDays:
226
- localStartDate.value = `now - ${localDateValue.value}d`;
227
- localEndDate.value = "now";
225
+ innerStartDate.value = `now - ${innerDateValue.value}d`;
226
+ innerEndDate.value = "now";
228
227
  break;
229
228
  case DateSetting.PastWeeks:
230
- localStartDate.value = `now - ${localDateValue.value}w`;
231
- localEndDate.value = "now";
229
+ innerStartDate.value = `now - ${innerDateValue.value}w`;
230
+ innerEndDate.value = "now";
232
231
  break;
233
232
  case DateSetting.PastMonths:
234
- localStartDate.value = `now - ${localDateValue.value}M`;
235
- localEndDate.value = "now";
233
+ innerStartDate.value = `now - ${innerDateValue.value}M`;
234
+ innerEndDate.value = "now";
236
235
  break;
237
236
  case DateSetting.PastYears:
238
- localStartDate.value = `now - ${localDateValue.value}y`;
239
- localEndDate.value = "now";
237
+ innerStartDate.value = `now - ${innerDateValue.value}y`;
238
+ innerEndDate.value = "now";
240
239
  break;
241
240
  case DateSetting.CurrentHour:
242
- localStartDate.value = "now/h";
243
- localEndDate.value = "now";
241
+ innerStartDate.value = "now/h";
242
+ innerEndDate.value = "now";
244
243
  break;
245
244
  case DateSetting.CurrentDay:
246
- localStartDate.value = "now/d";
247
- localEndDate.value = "now";
245
+ innerStartDate.value = "now/d";
246
+ innerEndDate.value = "now";
248
247
  break;
249
248
  case DateSetting.CurrentWeek:
250
- localStartDate.value = "now/w";
251
- localEndDate.value = "now";
249
+ innerStartDate.value = "now/w";
250
+ innerEndDate.value = "now";
252
251
  break;
253
252
  case DateSetting.CurrentMonth:
254
- localStartDate.value = "now/M";
255
- localEndDate.value = "now";
253
+ innerStartDate.value = "now/M";
254
+ innerEndDate.value = "now";
256
255
  break;
257
256
  case DateSetting.CurrentYear:
258
- localStartDate.value = "now/y";
259
- localEndDate.value = "now";
257
+ innerStartDate.value = "now/y";
258
+ innerEndDate.value = "now";
260
259
  break;
261
260
  case DateSetting.LastDay:
262
- localStartDate.value = `now - 1d/d`;
263
- localEndDate.value = "now/d";
261
+ innerStartDate.value = `now - 1d/d`;
262
+ innerEndDate.value = "now/d";
264
263
  break;
265
264
  case DateSetting.LastWeek:
266
- localStartDate.value = `now - 1w/w`;
267
- localEndDate.value = "now/w";
265
+ innerStartDate.value = `now - 1w/w`;
266
+ innerEndDate.value = "now/w";
268
267
  break;
269
268
  case DateSetting.LastMonth:
270
- localStartDate.value = `now - 1M/M`;
271
- localEndDate.value = "now/M";
269
+ innerStartDate.value = `now - 1M/M`;
270
+ innerEndDate.value = "now/M";
272
271
  break;
273
272
  case DateSetting.LastYear:
274
- localStartDate.value = `now - 1y/y`;
275
- localEndDate.value = "now/y";
273
+ innerStartDate.value = `now - 1y/y`;
274
+ innerEndDate.value = "now/y";
276
275
  break;
277
276
  case DateSetting.SinceLastDay:
278
- localStartDate.value = `now - 1d/d`;
279
- localEndDate.value = "now";
277
+ innerStartDate.value = `now - 1d/d`;
278
+ innerEndDate.value = "now";
280
279
  break;
281
280
  case DateSetting.SinceLastWeek:
282
- localStartDate.value = `now - 1w/w`;
283
- localEndDate.value = "now";
281
+ innerStartDate.value = `now - 1w/w`;
282
+ innerEndDate.value = "now";
284
283
  break;
285
284
  case DateSetting.SinceLastMonth:
286
- localStartDate.value = `now - 1M/M`;
287
- localEndDate.value = "now";
285
+ innerStartDate.value = `now - 1M/M`;
286
+ innerEndDate.value = "now";
288
287
  break;
289
288
  case DateSetting.SinceLastYear:
290
- localStartDate.value = `now - 1y/y`;
291
- localEndDate.value = "now";
289
+ innerStartDate.value = `now - 1y/y`;
290
+ innerEndDate.value = "now";
292
291
  break;
293
292
  case DateSetting.LastPeriod:
294
- localStartDate.value = "from - to + from";
295
- localEndDate.value = "from";
293
+ innerStartDate.value = "from - to + from";
294
+ innerEndDate.value = "from";
296
295
  break;
297
296
  case DateSetting.MinutesBeforeAfter:
298
- localStartDate.value = `alertstart - ${localDateValue.value}m`;
299
- localEndDate.value = `alertend + ${localDateValue.value}m`;
297
+ innerStartDate.value = `alertstart - ${innerDateValue.value}m`;
298
+ innerEndDate.value = `alertend + ${innerDateValue.value}m`;
300
299
  break;
301
300
  case DateSetting.HoursBeforeAfter:
302
- localStartDate.value = `alertstart - ${localDateValue.value}h`;
303
- localEndDate.value = `alertend + ${localDateValue.value}h`;
301
+ innerStartDate.value = `alertstart - ${innerDateValue.value}h`;
302
+ innerEndDate.value = `alertend + ${innerDateValue.value}h`;
304
303
  break;
305
304
  case DateSetting.DaysBeforeAfter:
306
- localStartDate.value = `alertstart - ${localDateValue.value}d`;
307
- localEndDate.value = `alertend + ${localDateValue.value}d`;
305
+ innerStartDate.value = `alertstart - ${innerDateValue.value}d`;
306
+ innerEndDate.value = `alertend + ${innerDateValue.value}d`;
308
307
  break;
309
308
  case DateSetting.WeeksBeforeAfter:
310
- localStartDate.value = `alertstart - ${localDateValue.value}w`;
311
- localEndDate.value = `alertend + ${localDateValue.value}w`;
309
+ innerStartDate.value = `alertstart - ${innerDateValue.value}w`;
310
+ innerEndDate.value = `alertend + ${innerDateValue.value}w`;
312
311
  break;
313
312
  case DateSetting.MinutesBefore:
314
- localStartDate.value = `alertstart - ${localDateValue.value}m`;
315
- localEndDate.value = "alertend";
313
+ innerStartDate.value = `alertstart - ${innerDateValue.value}m`;
314
+ innerEndDate.value = "alertend";
316
315
  break;
317
316
  case DateSetting.HoursBefore:
318
- localStartDate.value = `alertstart - ${localDateValue.value}h`;
319
- localEndDate.value = "alertend";
317
+ innerStartDate.value = `alertstart - ${innerDateValue.value}h`;
318
+ innerEndDate.value = "alertend";
320
319
  break;
321
320
  case DateSetting.DaysBefore:
322
- localStartDate.value = `alertstart - ${localDateValue.value}d`;
323
- localEndDate.value = "alertend";
321
+ innerStartDate.value = `alertstart - ${innerDateValue.value}d`;
322
+ innerEndDate.value = "alertend";
324
323
  break;
325
324
  case DateSetting.WeeksBefore:
326
- localStartDate.value = `alertstart - ${localDateValue.value}w`;
327
- localEndDate.value = "alertend";
325
+ innerStartDate.value = `alertstart - ${innerDateValue.value}w`;
326
+ innerEndDate.value = "alertend";
328
327
  break;
329
328
  case DateSetting.Expression:
330
329
  if (props.variant === "before-after") {
331
- localStartDate.value = `alertstart - ${localDateValue.value}d`;
332
- localEndDate.value = "alertend";
330
+ innerStartDate.value = `alertstart - ${innerDateValue.value}d`;
331
+ innerEndDate.value = "alertend";
333
332
  }
334
333
  else {
335
- localStartDate.value = `now - ${localDateValue.value}d`;
336
- localEndDate.value = "now";
334
+ innerStartDate.value = `now - ${innerDateValue.value}d`;
335
+ innerEndDate.value = "now";
337
336
  }
338
337
  break;
339
338
  case DateSetting.Pick:
340
- localEndDate.value = formatCurrentForPicker(0);
341
- localStartDate.value = formatCurrentForPicker(-1);
339
+ innerEndDate.value = formatCurrentForPicker(0);
340
+ innerStartDate.value = formatCurrentForPicker(-1);
342
341
  break;
343
342
  }
344
- emit("update:startDate", localStartDate.value);
345
- emit("update:endDate", localEndDate.value);
343
+ emit("update:startDate", innerStartDate.value);
344
+ emit("update:endDate", innerEndDate.value);
346
345
  };
347
346
 
348
- const localDateValueChange = (value: number) => {
349
- localDateValue.value = value ? value : 1;
347
+ const innerDateValueChange = (value: number) => {
348
+ innerDateValue.value = value ? value : 1;
350
349
 
351
- switch (localDateSetting.value) {
350
+ switch (innerDateSetting.value) {
352
351
  case DateSetting.None:
353
352
  return;
354
353
  case DateSetting.PastHours:
355
- localStartDate.value = `now - ${localDateValue.value}h`;
356
- localEndDate.value = "now";
354
+ innerStartDate.value = `now - ${innerDateValue.value}h`;
355
+ innerEndDate.value = "now";
357
356
  break;
358
357
  case DateSetting.PastDays:
359
- localStartDate.value = `now - ${localDateValue.value}d`;
360
- localEndDate.value = "now";
358
+ innerStartDate.value = `now - ${innerDateValue.value}d`;
359
+ innerEndDate.value = "now";
361
360
  break;
362
361
  case DateSetting.PastWeeks:
363
- localStartDate.value = `now - ${localDateValue.value}w`;
364
- localEndDate.value = "now";
362
+ innerStartDate.value = `now - ${innerDateValue.value}w`;
363
+ innerEndDate.value = "now";
365
364
  break;
366
365
  case DateSetting.PastMonths:
367
- localStartDate.value = `now - ${localDateValue.value}M`;
368
- localEndDate.value = "now";
366
+ innerStartDate.value = `now - ${innerDateValue.value}M`;
367
+ innerEndDate.value = "now";
369
368
  break;
370
369
  case DateSetting.PastYears:
371
- localStartDate.value = `now - ${localDateValue.value}y`;
372
- localEndDate.value = "now";
370
+ innerStartDate.value = `now - ${innerDateValue.value}y`;
371
+ innerEndDate.value = "now";
373
372
  break;
374
373
  case DateSetting.MinutesBeforeAfter:
375
- localStartDate.value = `alertstart - ${localDateValue.value}m`;
376
- localEndDate.value = `alertend + ${localDateValue.value}m`;
374
+ innerStartDate.value = `alertstart - ${innerDateValue.value}m`;
375
+ innerEndDate.value = `alertend + ${innerDateValue.value}m`;
377
376
  break;
378
377
  case DateSetting.HoursBeforeAfter:
379
- localStartDate.value = `alertstart - ${localDateValue.value}h`;
380
- localEndDate.value = `alertend + ${localDateValue.value}h`;
378
+ innerStartDate.value = `alertstart - ${innerDateValue.value}h`;
379
+ innerEndDate.value = `alertend + ${innerDateValue.value}h`;
381
380
  break;
382
381
  case DateSetting.DaysBeforeAfter:
383
- localStartDate.value = `alertstart - ${localDateValue.value}d`;
384
- localEndDate.value = `alertend + ${localDateValue.value}d`;
382
+ innerStartDate.value = `alertstart - ${innerDateValue.value}d`;
383
+ innerEndDate.value = `alertend + ${innerDateValue.value}d`;
385
384
  break;
386
385
  case DateSetting.WeeksBeforeAfter:
387
- localStartDate.value = `alertstart - ${localDateValue.value}w`;
388
- localEndDate.value = `alertend + ${localDateValue.value}w`;
386
+ innerStartDate.value = `alertstart - ${innerDateValue.value}w`;
387
+ innerEndDate.value = `alertend + ${innerDateValue.value}w`;
389
388
  break;
390
389
  case DateSetting.MinutesBefore:
391
- localStartDate.value = `alertstart - ${localDateValue.value}m`;
392
- localEndDate.value = "alertend";
390
+ innerStartDate.value = `alertstart - ${innerDateValue.value}m`;
391
+ innerEndDate.value = "alertend";
393
392
  break;
394
393
  case DateSetting.HoursBefore:
395
- localStartDate.value = `alertstart - ${localDateValue.value}h`;
396
- localEndDate.value = "alertend";
394
+ innerStartDate.value = `alertstart - ${innerDateValue.value}h`;
395
+ innerEndDate.value = "alertend";
397
396
  break;
398
397
  case DateSetting.DaysBefore:
399
- localStartDate.value = `alertstart - ${localDateValue.value}d`;
400
- localEndDate.value = "alertend";
398
+ innerStartDate.value = `alertstart - ${innerDateValue.value}d`;
399
+ innerEndDate.value = "alertend";
401
400
  break;
402
401
  case DateSetting.WeeksBefore:
403
- localStartDate.value = `alertstart - ${localDateValue.value}w`;
404
- localEndDate.value = "alertend";
402
+ innerStartDate.value = `alertstart - ${innerDateValue.value}w`;
403
+ innerEndDate.value = "alertend";
405
404
  break;
406
405
  }
407
- emit("update:startDate", localStartDate.value);
408
- emit("update:endDate", localEndDate.value);
406
+ emit("update:startDate", innerStartDate.value);
407
+ emit("update:endDate", innerEndDate.value);
409
408
  };
410
409
 
411
410
  const onPickDates = (value: number[] | null) => {
412
411
  if (!value) {
413
- localEndDate.value = formatCurrentForPicker(0);
414
- localStartDate.value = formatCurrentForPicker(-1);
412
+ innerEndDate.value = formatCurrentForPicker(0);
413
+ innerStartDate.value = formatCurrentForPicker(-1);
415
414
  if (valid.value) {
416
- emit("update:startDate", localStartDate.value);
417
- emit("update:endDate", localEndDate.value);
415
+ emit("update:startDate", innerStartDate.value);
416
+ emit("update:endDate", innerEndDate.value);
418
417
  }
419
418
  }
420
419
  else {
421
- if (value && value[0] != null && formatFromPicker(value[0]) !== localStartDate.value) {
422
- localStartDate.value = formatFromPicker(value[0]);
420
+ if (value && value[0] != null && formatFromPicker(value[0]) !== innerStartDate.value) {
421
+ innerStartDate.value = formatFromPicker(value[0]);
423
422
  if (valid.value) {
424
- emit("update:startDate", localStartDate.value);
423
+ emit("update:startDate", innerStartDate.value);
425
424
  }
426
425
  }
427
- if (value && value[1] != null && formatFromPicker(value[1]) !== localEndDate.value) {
428
- localEndDate.value = formatFromPicker(value[1]);
426
+ if (value && value[1] != null && formatFromPicker(value[1]) !== innerEndDate.value) {
427
+ innerEndDate.value = formatFromPicker(value[1]);
429
428
  if (valid.value) {
430
- emit("update:endDate", localEndDate.value);
429
+ emit("update:endDate", innerEndDate.value);
431
430
  }
432
431
  }
433
432
  }
434
433
  };
435
434
 
436
435
  const reset = (): void => {
437
- localStartDate.value = props.startDate;
438
- localEndDate.value = props.endDate;
436
+ innerStartDate.value = props.startDate;
437
+ innerEndDate.value = props.endDate;
439
438
 
440
439
  if (props.variant === "before-after") {
441
440
  if (props.endDate === "alertend") {
442
441
  let match = /^alertstart-([\d]+)([mhdw])$/g.exec(props.startDate.replaceAll(" ", ""));
443
442
  if (match != null) {
444
- localDateValue.value = parseInt(match[1]);
443
+ innerDateValue.value = parseInt(match[1]);
445
444
  switch (match[2]) {
446
445
  case 'm': {
447
- localDateSetting.value = DateSetting.MinutesBefore;
446
+ innerDateSetting.value = DateSetting.MinutesBefore;
448
447
  return;
449
448
  }
450
449
  case 'h': {
451
- localDateSetting.value = DateSetting.HoursBefore;
450
+ innerDateSetting.value = DateSetting.HoursBefore;
452
451
  return;
453
452
  }
454
453
  case 'd': {
455
- localDateSetting.value = DateSetting.DaysBefore;
454
+ innerDateSetting.value = DateSetting.DaysBefore;
456
455
  return;
457
456
  }
458
457
  case 'w': {
459
- localDateSetting.value = DateSetting.WeeksBefore;
458
+ innerDateSetting.value = DateSetting.WeeksBefore;
460
459
  return;
461
460
  }
462
461
  default: {
463
- localDateSetting.value = DateSetting.Expression;
464
- localDateValue.value = 1;
462
+ innerDateSetting.value = DateSetting.Expression;
463
+ innerDateValue.value = 1;
465
464
  return;
466
465
  }
467
466
  }
@@ -475,113 +474,113 @@ export default defineComponent({
475
474
  let startMatch = /^alertstart-([\d]+)([mhdw])$/g.exec(props.startDate.replaceAll(" ", ""));
476
475
  let endMatch = /^alertend\+([\d]+)([mhdw])$/g.exec(props.endDate.replaceAll(" ", ""));
477
476
  if (startMatch != null && endMatch != null && startMatch[1] === endMatch[1] && startMatch[2] === endMatch[2]) {
478
- localDateValue.value = parseInt(startMatch[1]);
477
+ innerDateValue.value = parseInt(startMatch[1]);
479
478
  switch(startMatch[2]) {
480
479
  case 'm': {
481
- localDateSetting.value = DateSetting.MinutesBeforeAfter;
480
+ innerDateSetting.value = DateSetting.MinutesBeforeAfter;
482
481
  return;
483
482
  }
484
483
  case 'h': {
485
- localDateSetting.value = DateSetting.HoursBeforeAfter;
484
+ innerDateSetting.value = DateSetting.HoursBeforeAfter;
486
485
  return;
487
486
  }
488
487
  case 'd': {
489
- localDateSetting.value = DateSetting.DaysBeforeAfter;
488
+ innerDateSetting.value = DateSetting.DaysBeforeAfter;
490
489
  return;
491
490
  }
492
491
  case 'w': {
493
- localDateSetting.value = DateSetting.WeeksBeforeAfter;
492
+ innerDateSetting.value = DateSetting.WeeksBeforeAfter;
494
493
  return;
495
494
  }
496
495
  default: {
497
- localDateSetting.value = DateSetting.Expression;
498
- localDateValue.value = 1;
496
+ innerDateSetting.value = DateSetting.Expression;
497
+ innerDateValue.value = 1;
499
498
  return;
500
499
  }
501
500
  }
502
501
  }
503
502
  }
504
503
 
505
- localDateSetting.value = DateSetting.Expression;
506
- localDateValue.value = 1;
504
+ innerDateSetting.value = DateSetting.Expression;
505
+ innerDateValue.value = 1;
507
506
  return;
508
507
  }
509
508
 
510
509
  if (props.lastPeriod && props.endDate === "from" && props.startDate === "from - to + from") {
511
- localDateSetting.value = DateSetting.LastPeriod;
510
+ innerDateSetting.value = DateSetting.LastPeriod;
512
511
  return;
513
512
  }
514
513
  if (props.endDate === "now/d" && props.startDate === "now - 1d/d") {
515
- localDateSetting.value = DateSetting.LastDay;
514
+ innerDateSetting.value = DateSetting.LastDay;
516
515
  return;
517
516
  }
518
517
  if (props.endDate === "now/w" && props.startDate === "now - 1w/w") {
519
- localDateSetting.value = DateSetting.LastWeek;
518
+ innerDateSetting.value = DateSetting.LastWeek;
520
519
  return;
521
520
  }
522
521
  if (props.endDate === "now/M" && props.startDate === "now - 1M/M") {
523
- localDateSetting.value = DateSetting.LastMonth;
522
+ innerDateSetting.value = DateSetting.LastMonth;
524
523
  return;
525
524
  }
526
525
  if (props.endDate === "now/y" && props.startDate === "now - 1y/y") {
527
- localDateSetting.value = DateSetting.LastYear;
526
+ innerDateSetting.value = DateSetting.LastYear;
528
527
  return;
529
528
  }
530
529
 
531
530
  if (props.endDate === "now") {
532
531
  let match = /^now-1([dwMy])\/([dwMy])$/g.exec(props.startDate.replaceAll(" ", ""));
533
532
  if (match != null) {
534
- localDateValue.value = 1;
533
+ innerDateValue.value = 1;
535
534
  switch (match[1]) {
536
535
  case 'd': {
537
- localDateSetting.value = DateSetting.SinceLastDay;
536
+ innerDateSetting.value = DateSetting.SinceLastDay;
538
537
  return;
539
538
  }
540
539
  case 'w': {
541
- localDateSetting.value = DateSetting.SinceLastWeek;
540
+ innerDateSetting.value = DateSetting.SinceLastWeek;
542
541
  return;
543
542
  }
544
543
  case 'M': {
545
- localDateSetting.value = DateSetting.SinceLastMonth;
544
+ innerDateSetting.value = DateSetting.SinceLastMonth;
546
545
  return;
547
546
  }
548
547
  case 'y': {
549
- localDateSetting.value = DateSetting.SinceLastYear;
548
+ innerDateSetting.value = DateSetting.SinceLastYear;
550
549
  return;
551
550
  }
552
551
  default: {
553
- localDateSetting.value = DateSetting.Expression;
552
+ innerDateSetting.value = DateSetting.Expression;
554
553
  return;
555
554
  }
556
555
  }
557
556
  }
558
557
  match = /^now-([\d]+)([hdwMy])$/g.exec(props.startDate.replaceAll(" ", ""));
559
558
  if (match != null) {
560
- localDateValue.value = parseInt(match[1]);
559
+ innerDateValue.value = parseInt(match[1]);
561
560
  switch (match[2]) {
562
561
  case 'h': {
563
- localDateSetting.value = DateSetting.PastHours;
562
+ innerDateSetting.value = DateSetting.PastHours;
564
563
  return;
565
564
  }
566
565
  case 'd': {
567
- localDateSetting.value = DateSetting.PastDays;
566
+ innerDateSetting.value = DateSetting.PastDays;
568
567
  return;
569
568
  }
570
569
  case 'w': {
571
- localDateSetting.value = DateSetting.PastWeeks;
570
+ innerDateSetting.value = DateSetting.PastWeeks;
572
571
  return;
573
572
  }
574
573
  case 'M': {
575
- localDateSetting.value = DateSetting.PastMonths;
574
+ innerDateSetting.value = DateSetting.PastMonths;
576
575
  return;
577
576
  }
578
577
  case 'y': {
579
- localDateSetting.value = DateSetting.PastYears;
578
+ innerDateSetting.value = DateSetting.PastYears;
580
579
  return;
581
580
  }
582
581
  default: {
583
- localDateSetting.value = DateSetting.Expression;
584
- localDateValue.value = 1;
582
+ innerDateSetting.value = DateSetting.Expression;
583
+ innerDateValue.value = 1;
585
584
  return;
586
585
  }
587
586
  }
@@ -589,30 +588,30 @@ export default defineComponent({
589
588
 
590
589
  match = /^now\/([hdwMy])$/g.exec(props.startDate.replaceAll(" ", ""));
591
590
  if (match != null) {
592
- localDateValue.value = 1;
591
+ innerDateValue.value = 1;
593
592
  switch (match[1]) {
594
593
  case 'h': {
595
- localDateSetting.value = DateSetting.CurrentHour;
594
+ innerDateSetting.value = DateSetting.CurrentHour;
596
595
  return;
597
596
  }
598
597
  case 'd': {
599
- localDateSetting.value = DateSetting.CurrentDay;
598
+ innerDateSetting.value = DateSetting.CurrentDay;
600
599
  return;
601
600
  }
602
601
  case 'w': {
603
- localDateSetting.value = DateSetting.CurrentWeek;
602
+ innerDateSetting.value = DateSetting.CurrentWeek;
604
603
  return;
605
604
  }
606
605
  case 'M': {
607
- localDateSetting.value = DateSetting.CurrentMonth;
606
+ innerDateSetting.value = DateSetting.CurrentMonth;
608
607
  return;
609
608
  }
610
609
  case 'y': {
611
- localDateSetting.value = DateSetting.CurrentYear;
610
+ innerDateSetting.value = DateSetting.CurrentYear;
612
611
  return;
613
612
  }
614
613
  default: {
615
- localDateSetting.value = DateSetting.Expression;
614
+ innerDateSetting.value = DateSetting.Expression;
616
615
  return;
617
616
  }
618
617
  }
@@ -620,24 +619,33 @@ export default defineComponent({
620
619
  }
621
620
 
622
621
  if (parseForPicker(props.endDate) != null && parseForPicker(props.startDate) != null) {
623
- localDateSetting.value = DateSetting.Pick;
624
- localDateValue.value = 1;
622
+ innerDateSetting.value = DateSetting.Pick;
623
+ innerDateValue.value = 1;
625
624
  return;
626
625
  }
627
626
 
628
- localDateSetting.value = DateSetting.Expression;
629
- localDateValue.value = 1;
627
+ innerDateSetting.value = DateSetting.Expression;
628
+ innerDateValue.value = 1;
630
629
  };
631
630
 
632
631
  onMounted(() => {
633
632
  reset();
634
633
  });
635
634
 
635
+ watch([() => props.startDate, () => props.endDate], () => {
636
+ if (
637
+ innerStartDate.value !== props.startDate ||
638
+ innerEndDate.value !== props.endDate
639
+ ) {
640
+ reset();
641
+ }
642
+ });
643
+
636
644
  return {
637
- localDateSetting,
638
- localDateValue,
639
- localStartDate,
640
- localEndDate,
645
+ innerDateSetting,
646
+ innerDateValue,
647
+ innerStartDate,
648
+ innerEndDate,
641
649
  pastSettings,
642
650
  DateSetting,
643
651
  NumberRules,
@@ -645,10 +653,10 @@ export default defineComponent({
645
653
  TextRules,
646
654
  messages,
647
655
  valid,
648
- localDateSettingChange,
649
- localDateValueChange,
650
- localStartDateChange,
651
- localEndDateChange,
656
+ innerDateSettingChange,
657
+ innerDateValueChange,
658
+ innerStartDateChange,
659
+ innerEndDateChange,
652
660
  parseForPicker,
653
661
  onPickDates
654
662
  };