@christianriedl/utils 1.0.158 → 1.0.159

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/DateTimeInput.vue +24 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@christianriedl/utils",
3
- "version": "1.0.158",
3
+ "version": "1.0.159",
4
4
  "description": "Interfaces, local storage, service worker, configuration, application state",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/DateTimeInput.vue CHANGED
@@ -2,8 +2,9 @@
2
2
  import { inject, ref, onUnmounted, onMounted, watch } from 'vue';
3
3
  import { Helper, EDirection, IAppState, appStateSymbol } from '@christianriedl/utils';
4
4
  import { VDateInput } from 'vuetify/labs/VDateInput';
5
+ import { VIconBtn } from 'vuetify/labs/VIconBtn'
5
6
 
6
- const props = defineProps<{ modelValue: Date, withTime?: boolean, utc?: boolean, steps?: number, nextPrev?: boolean }>();
7
+ const props = defineProps<{ modelValue: Date, withTime?: boolean, utc?: boolean, steps?: number, nextPrev?: boolean, variant?: any, density?: any }>();
7
8
  const emits = defineEmits<{ (e: 'update:modelValue', value: Date): void }>();
8
9
 
9
10
 
@@ -12,11 +13,13 @@
12
13
  const steps = props.steps ?? 1;
13
14
 
14
15
  if (props.nextPrev) {
15
- const appState = inject(appStateSymbol)!;
16
- onMounted(() => { appState.navigate.value = onNavigate; });
17
- onUnmounted(() => { appState.navigate.value = null });
16
+ const appState = inject(appStateSymbol)!;
17
+ onMounted(() => { appState.navigate.value = onNavigate; });
18
+ onUnmounted(() => { appState.navigate.value = null });
18
19
  }
19
- watch(props, () => init(), {immediate: true});
20
+ watch(props, () => init());
21
+ init();
22
+ onDateChange();
20
23
 
21
24
  function init () {
22
25
  dateValue.value = props.modelValue ?? new Date();
@@ -26,31 +29,30 @@
26
29
  dateValue.value.setUTCHours(0, 0, 0, 0);
27
30
  else
28
31
  dateValue.value.setHours(0, 0, 0, 0);
29
- onDateChange();
30
32
  }
31
33
  function onDateChange() {
32
34
  let date = dateValue.value;
33
35
  if (props.withTime) {
34
36
  let ticks = date.getTime();
35
37
  const arrTime = timeValue.value.split(':');
36
- ticks += Number(arrTime[0]) * 3600 + Number(arrTime[1] * 60) * 1000;
38
+ ticks += (Number(arrTime[0]) * 3600 + Number(arrTime[1]) * 60) * 1000;
37
39
  date = new Date(ticks);
38
40
  }
39
- emits('update:modelValue', date);
41
+ emits('update:modelValue', date);
40
42
  }
41
- function onNext() {
43
+ function onNext(evt?: MouseEvent) {
42
44
  if (steps == 31)
43
45
  dateValue.value = new Date(dateValue.value.getFullYear(), dateValue.value.getMonth() + 1, dateValue.value.getDate());
44
46
  else
45
47
  dateValue.value = new Date(dateValue.value.getTime() + steps * 24 * 60 * 60 * 1000);
46
48
  onDateChange();
47
49
  }
48
- function onPrevious() {
50
+ function onPrevious(evt?: MouseEvent) {
49
51
  if (steps == 31)
50
52
  dateValue.value = new Date(dateValue.value.getFullYear(), dateValue.value.getMonth() - 1, dateValue.value.getDate());
51
53
  else
52
54
  dateValue.value = new Date(dateValue.value.getTime() + steps * 24 * 60 * 60 * 1000);
53
- onDateChange();
55
+ onDateChange();
54
56
  }
55
57
  function onNavigate(direction: EDirection): void {
56
58
  if (direction === EDirection.Left)
@@ -61,9 +63,15 @@
61
63
  </script>
62
64
 
63
65
  <template>
64
- <v-date-input v-model="dateValue" :max-width="textWidth" prepend-icon="props.nextPrev ? $prev : undefined" append-icon="props.nextPrev ? $next"
65
- @update:modelValue="onDateChange" @click:prepend="onPrevious" @click:append="onNext">
66
- </v-date-input>
67
- <v-text-field v-if="props.withTime" v-model="timeValue" type="date" @update:modelValue="onDateChange">
68
- </v-text-field>
66
+ <div class="d-flex align-center">
67
+ <v-icon-btn v-if="props.nextPrev" icon="$prev" variant="tonal" @click="onPrevious"></v-icon-btn>
68
+ <v-date-input v-model="dateValue" prepend-icon=""
69
+ hide-details :variant="props.variant" :density="props.density"
70
+ @update:modelValue="onDateChange" @click:prepend="onPrevious" @click:append="onNext">
71
+ </v-date-input>
72
+ <v-icon-btn v-if="props.nextPrev" icon="$next" variant="tonal" @click="onNext"></v-icon-btn>
73
+ <v-text-field v-if="props.withTime" v-model="timeValue" type="time" hide-details :variant="props.variant" :density="props.density"
74
+ @update:modelValue="onDateChange">
75
+ </v-text-field>
76
+ </div>
69
77
  </template>