@zap-wunschlachen/wl-shared-components 1.0.3 → 1.0.5

package/src/components/DateInput/DateInput.vue

@@ -1,263 +1,263 @@
-<template>
-  <Input
-    v-bind="$attrs" 
-    ref="inputRef"
-    id="date-input"
-    class="wl-date-input"
-    :class="{
-      'edit-layout': layout === 'edit-field'
-    }"
-    :variant="variant"   
-    :placeholder="placeholder" 
-    v-model="formattedDate"
-    :success="isDefaultLayout ? inputState === 'success' : false" 
-    :error="inputState === 'error'" 
-    @input="onDateInput" 
-    :hint="isDefaultLayout ? inputMessage : ''"
-    :hideDetails="isDefaultLayout ? inputState !== 'error' : true" 
-    type="tel" 
-    for="date-input"
-    data-testid="root">
-    <template #append>
-      <div class="date-wrapper" tabIndex="0" @keydown.enter.prevent="nativeDate?.showPicker()" >
-        <v-icon class="date-icon" icon="heroicons:calendar" />
-        <input 
-          ref="nativeDate" 
-          type="date"
-          tabIndex="-1"  
-          :min="nativeMin"
-          :max="nativeMax"
-          class="native-date"
-          :value="isoValue"
-          @input.stop="onNativeDateChange"
-        />
-      </div>
-    </template>
-  </Input>
-</template>
-
-<script setup lang="ts">
-import {
-  parse, parseISO, format, isValid, getHours,
-  getMinutes,
-  getSeconds,
-  getMilliseconds,
-  set,
-  startOfDay
-} from "date-fns";
-import { ref, watch, defineProps, defineEmits, computed, nextTick } from "vue";
-import Input from "../Input/Input.vue";
-import './DateInput.css';
-import { useI18n } from 'vue-i18n';
-
-// Define props to accept an initial date value
-const props = withDefaults(defineProps<{
-  modelValue?: string | null;
-  layout?: "default" | "edit-field";
-  minDate?: Date | null;
-  minDateErrorMessage?: string;
-  maxDate?: Date | null;
-  maxDateErrorMessage?: string;
-  variant?: string;
-  placeholder?: string;
-  invalidDateErrorMessage?: string;
-}>(), {
-  modelValue: null,
-  layout: 'default',
-  variant: 'outlined',
-});
-
-const emit = defineEmits<{
-  (event: "update:modelValue", value: string | null): void;
-}>();
-
-const { t } = useI18n();
-
-const placeholder = computed(() => props.placeholder || t('wl.date_input.placeholder', 'TT.MM.JJJJ'));
-const invalidDateMessage = computed(() => props.invalidDateErrorMessage || t('wl.date_input.invalid_date', 'Bitte ein gültiges Datum eingeben'));
-const maxDateMessage = computed(() => {
-  if (props.maxDate && isValid(props.maxDate)) {
-    return props.maxDateErrorMessage || t('wl.date_input.max_date_error', { date: format(props.maxDate, 'dd.MM.yyyy') });
-  }
-  return '';
-});
-const minDateMessage = computed(() => {
-  if (props.minDate && isValid(props.minDate)) {
-    return props.minDateErrorMessage || t('wl.date_input.min_date_error', { date: format(props.minDate, 'dd.MM.yyyy') });
-  }
-  return '';
-});
-
-const ISO_FORMAT = "yyyy-MM-dd";
-const DISPLAY_FORMAT = "dd.MM.yyyy";
-
-// Local reactive state for the input
-const formattedDate = ref("");
-const inputState = ref<"idle" | "error" | "success">("idle");
-const inputMessage = ref("");
-const nativeDate = ref<HTMLInputElement | null>(null)
-const inputRef = ref(null)
-
-const isDefaultLayout = computed(() => props.layout === "default")
-
-const isoValue = computed(() => {
-  const parsed = parse(formattedDate.value, DISPLAY_FORMAT, new Date());
-  return isValid(parsed) ? format(parsed, ISO_FORMAT) : "";
-});
-
-watch(
-  () => props.modelValue,
-  (newDate) => {
-    const parsed = parseISO(newDate ?? '');
-    formattedDate.value = (parsed && isValid(parsed)) ? format(parsed, DISPLAY_FORMAT) : "";
-  },
-  { immediate: true }
-);
-
-const nativeMin = computed(() => {
-  if (props.minDate && isValid(props.minDate)) {
-    return format(props.minDate, ISO_FORMAT);
-  }
-  return "";
-});
-
-const nativeMax = computed(() => {
-  if (props.maxDate && isValid(props.maxDate)) {
-    return format(props.maxDate, ISO_FORMAT);
-  }
-  return "";
-});
-
-function onDateInput(e: Event) {
-  const target = e.target as HTMLInputElement;
-  let value = target.value.replace(/\D/g, ""); // Remove non-digits
-
-  // Insert dot after day (2 digits)
-  if (value.length > 2) {
-    value = value.slice(0, 2) + "." + value.slice(2);
-  }
-  // Insert dot after month (next 2 digits)
-  if (value.length > 5) {
-    value = value.slice(0, 5) + "." + value.slice(5);
-  }
-  // Limit to 10 characters (DD.MM.YYYY)
-  if (value.length > 10) {
-    value = value.slice(0, 10);
-  }
-
-  formattedDate.value = value;
-
-  // If incomplete date, reset state
-  if (value.length < 10) {
-    inputState.value = "idle";
-    inputMessage.value = "";
-    return;
-  }
-
-  // Parse the date using dots as separator
-  const parsed = parseDateWithCurrentTime(value);
-
-  if (!isValid(parsed)) {
-    inputState.value = "error";
-    inputMessage.value = invalidDateMessage.value;
-    return;
-  }
-
-  if (props.minDate && isValid(props.minDate)) {
-    if (startOfDay(parsed) < startOfDay(props.minDate)) {
-      inputState.value = "error";
-      inputMessage.value = minDateMessage.value;
-      return;
-    }
-  }
-
-  if(props.maxDate && isValid(props.maxDate)) {
-    if (startOfDay(parsed) > startOfDay(props.maxDate)) {
-      inputState.value = "error";
-      inputMessage.value = maxDateMessage.value;
-      return;
-    }
-  }
-
-  inputState.value = "success";
-  inputMessage.value = "";
-
-  emit("update:modelValue", parsed.toISOString());
-}
-
-/**
- * Parse "dd.MM.yyyy" as a date, then apply the current local time (H:M:S.ms).
- * Returns a new Date object.
- */
-function parseDateWithCurrentTime(dateString: any) {
-  const now = new Date();
-
-  // 1) Parse date portion (defaults to midnight)
-  const parsedDate = parse(dateString, DISPLAY_FORMAT, now);
-
-  // 2) Overwrite the parsed date's time with the current local time
-  const result = set(parsedDate, {
-    hours: getHours(now),
-    minutes: getMinutes(now),
-    seconds: getSeconds(now),
-    milliseconds: getMilliseconds(now)
-  });
-
-  return result;
-}
-
-function onNativeDateChange(e: Event) {
-  if (!nativeDate.value) return;
-
-  const [year, month, day] = nativeDate.value.value.split("-");
-  const reformatted = `${day}.${month}.${year}`;
-  const fakeEvent = { target: { value: reformatted } } as unknown as Event;
-
-  onDateInput(fakeEvent);
-
-  if (props.layout === 'edit-field') {
-    // When DateInput is used in EditField, clicking events in the native picker removes focus from EditField.
-    // Since saving is based on blur in EditField, we need to restore focus and then blur to trigger save.
-    nextTick(() => {
-      inputRef.value?.focus?.();
-      inputRef.value?.blur?.();
-    });
-  }
-}
-
-defineExpose({
-  focus: () => inputRef.value?.focus?.(),
-  blur: () => inputRef.value?.blur?.(),
-  select: () => inputRef.value?.select?.()
-})
-</script>
-
-<style scoped>
-.native-date {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0 !important;
-  background: transparent;
-  color: transparent;
-  cursor: pointer;
-  z-index: 2;
-}
-
-.date-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.date-icon {
-  pointer-events: none;
-  cursor: pointer;
-  z-index: 1;
-}
+<template>
+  <Input
+    v-bind="$attrs" 
+    ref="inputRef"
+    id="date-input"
+    class="wl-date-input"
+    :class="{
+      'edit-layout': layout === 'edit-field'
+    }"
+    :variant="variant"   
+    :placeholder="placeholder" 
+    v-model="formattedDate"
+    :success="isDefaultLayout ? inputState === 'success' : false" 
+    :error="inputState === 'error'" 
+    @input="onDateInput" 
+    :hint="isDefaultLayout ? inputMessage : ''"
+    :hideDetails="isDefaultLayout ? inputState !== 'error' : true" 
+    type="tel" 
+    for="date-input"
+    data-testid="root">
+    <template #append>
+      <div class="date-wrapper" tabIndex="0" @keydown.enter.prevent="nativeDate?.showPicker()" >
+        <v-icon class="date-icon" icon="heroicons:calendar" />
+        <input 
+          ref="nativeDate" 
+          type="date"
+          tabIndex="-1"  
+          :min="nativeMin"
+          :max="nativeMax"
+          class="native-date"
+          :value="isoValue"
+          @input.stop="onNativeDateChange"
+        />
+      </div>
+    </template>
+  </Input>
+</template>
+
+<script setup lang="ts">
+import {
+  parse, parseISO, format, isValid, getHours,
+  getMinutes,
+  getSeconds,
+  getMilliseconds,
+  set,
+  startOfDay
+} from "date-fns";
+import { ref, watch, defineProps, defineEmits, computed, nextTick } from "vue";
+import Input from "../Input/Input.vue";
+import './DateInput.css';
+import { useI18n } from 'vue-i18n';
+
+// Define props to accept an initial date value
+const props = withDefaults(defineProps<{
+  modelValue?: string | null;
+  layout?: "default" | "edit-field";
+  minDate?: Date | null;
+  minDateErrorMessage?: string;
+  maxDate?: Date | null;
+  maxDateErrorMessage?: string;
+  variant?: string;
+  placeholder?: string;
+  invalidDateErrorMessage?: string;
+}>(), {
+  modelValue: null,
+  layout: 'default',
+  variant: 'outlined',
+});
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: string | null): void;
+}>();
+
+const { t } = useI18n();
+
+const placeholder = computed(() => props.placeholder || t('wl.date_input.placeholder', 'TT.MM.JJJJ'));
+const invalidDateMessage = computed(() => props.invalidDateErrorMessage || t('wl.date_input.invalid_date', 'Bitte ein gültiges Datum eingeben'));
+const maxDateMessage = computed(() => {
+  if (props.maxDate && isValid(props.maxDate)) {
+    return props.maxDateErrorMessage || t('wl.date_input.max_date_error', { date: format(props.maxDate, 'dd.MM.yyyy') });
+  }
+  return '';
+});
+const minDateMessage = computed(() => {
+  if (props.minDate && isValid(props.minDate)) {
+    return props.minDateErrorMessage || t('wl.date_input.min_date_error', { date: format(props.minDate, 'dd.MM.yyyy') });
+  }
+  return '';
+});
+
+const ISO_FORMAT = "yyyy-MM-dd";
+const DISPLAY_FORMAT = "dd.MM.yyyy";
+
+// Local reactive state for the input
+const formattedDate = ref("");
+const inputState = ref<"idle" | "error" | "success">("idle");
+const inputMessage = ref("");
+const nativeDate = ref<HTMLInputElement | null>(null)
+const inputRef = ref(null)
+
+const isDefaultLayout = computed(() => props.layout === "default")
+
+const isoValue = computed(() => {
+  const parsed = parse(formattedDate.value, DISPLAY_FORMAT, new Date());
+  return isValid(parsed) ? format(parsed, ISO_FORMAT) : "";
+});
+
+watch(
+  () => props.modelValue,
+  (newDate) => {
+    const parsed = parseISO(newDate ?? '');
+    formattedDate.value = (parsed && isValid(parsed)) ? format(parsed, DISPLAY_FORMAT) : "";
+  },
+  { immediate: true }
+);
+
+const nativeMin = computed(() => {
+  if (props.minDate && isValid(props.minDate)) {
+    return format(props.minDate, ISO_FORMAT);
+  }
+  return "";
+});
+
+const nativeMax = computed(() => {
+  if (props.maxDate && isValid(props.maxDate)) {
+    return format(props.maxDate, ISO_FORMAT);
+  }
+  return "";
+});
+
+function onDateInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  let value = target.value.replace(/\D/g, ""); // Remove non-digits
+
+  // Insert dot after day (2 digits)
+  if (value.length > 2) {
+    value = value.slice(0, 2) + "." + value.slice(2);
+  }
+  // Insert dot after month (next 2 digits)
+  if (value.length > 5) {
+    value = value.slice(0, 5) + "." + value.slice(5);
+  }
+  // Limit to 10 characters (DD.MM.YYYY)
+  if (value.length > 10) {
+    value = value.slice(0, 10);
+  }
+
+  formattedDate.value = value;
+
+  // If incomplete date, reset state
+  if (value.length < 10) {
+    inputState.value = "idle";
+    inputMessage.value = "";
+    return;
+  }
+
+  // Parse the date using dots as separator
+  const parsed = parseDateWithCurrentTime(value);
+
+  if (!isValid(parsed)) {
+    inputState.value = "error";
+    inputMessage.value = invalidDateMessage.value;
+    return;
+  }
+
+  if (props.minDate && isValid(props.minDate)) {
+    if (startOfDay(parsed) < startOfDay(props.minDate)) {
+      inputState.value = "error";
+      inputMessage.value = minDateMessage.value;
+      return;
+    }
+  }
+
+  if(props.maxDate && isValid(props.maxDate)) {
+    if (startOfDay(parsed) > startOfDay(props.maxDate)) {
+      inputState.value = "error";
+      inputMessage.value = maxDateMessage.value;
+      return;
+    }
+  }
+
+  inputState.value = "success";
+  inputMessage.value = "";
+
+  emit("update:modelValue", parsed.toISOString());
+}
+
+/**
+ * Parse "dd.MM.yyyy" as a date, then apply the current local time (H:M:S.ms).
+ * Returns a new Date object.
+ */
+function parseDateWithCurrentTime(dateString: any) {
+  const now = new Date();
+
+  // 1) Parse date portion (defaults to midnight)
+  const parsedDate = parse(dateString, DISPLAY_FORMAT, now);
+
+  // 2) Overwrite the parsed date's time with the current local time
+  const result = set(parsedDate, {
+    hours: getHours(now),
+    minutes: getMinutes(now),
+    seconds: getSeconds(now),
+    milliseconds: getMilliseconds(now)
+  });
+
+  return result;
+}
+
+function onNativeDateChange(e: Event) {
+  if (!nativeDate.value) return;
+
+  const [year, month, day] = nativeDate.value.value.split("-");
+  const reformatted = `${day}.${month}.${year}`;
+  const fakeEvent = { target: { value: reformatted } } as unknown as Event;
+
+  onDateInput(fakeEvent);
+
+  if (props.layout === 'edit-field') {
+    // When DateInput is used in EditField, clicking events in the native picker removes focus from EditField.
+    // Since saving is based on blur in EditField, we need to restore focus and then blur to trigger save.
+    nextTick(() => {
+      inputRef.value?.focus?.();
+      inputRef.value?.blur?.();
+    });
+  }
+}
+
+defineExpose({
+  focus: () => inputRef.value?.focus?.(),
+  blur: () => inputRef.value?.blur?.(),
+  select: () => inputRef.value?.select?.()
+})
+</script>
+
+<style scoped>
+.native-date {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0 !important;
+  background: transparent;
+  color: transparent;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.date-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.date-icon {
+  pointer-events: none;
+  cursor: pointer;
+  z-index: 1;
+}
 </style>

package/src/components/Dialog/Dialog.css

@@ -1,6 +1,6 @@
-.v-overlay__scrim {
-  fill: rgba(217, 217, 217, 0.55) !important;
-  backdrop-filter: blur(4px) !important;
-  opacity: 1 !important;
-  background: transparent !important;
-}
+.v-overlay__scrim {
+  fill: rgba(217, 217, 217, 0.55) !important;
+  backdrop-filter: blur(4px) !important;
+  opacity: 1 !important;
+  background: transparent !important;
+}

package/src/components/Dialog/Dialog.vue

@@ -1,29 +1,29 @@
-<template>
-  <div class="text-center pa-4" data-testid="root">
-    <!-- Scoped slot for the activator with click handler to open dialog -->
-    <slot name="activator" :openDialog="openDialog" />
-
-    <!-- Dialog component with direct binding to dialog.value -->
-    <v-dialog v-model="dialog" width="auto">
-      <slot :closeDialog="closeDialog" name="content"></slot>
-    </v-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import './Dialog.css';
-
-// Reactive dialog state
-const dialog = ref(false);
-
-// Methods to open and close the dialog
-const openDialog = () => {
-  console.log('entereed 1');
-  dialog.value = true;
-};
-const closeDialog = () => {
-  console.log('entereed 2');
-  dialog.value = false;
-};
-</script>
+<template>
+  <div class="text-center pa-4" data-testid="root">
+    <!-- Scoped slot for the activator with click handler to open dialog -->
+    <slot name="activator" :openDialog="openDialog" />
+
+    <!-- Dialog component with direct binding to dialog.value -->
+    <v-dialog v-model="dialog" width="auto">
+      <slot :closeDialog="closeDialog" name="content"></slot>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import './Dialog.css';
+
+// Reactive dialog state
+const dialog = ref(false);
+
+// Methods to open and close the dialog
+const openDialog = () => {
+  console.log('entereed 1');
+  dialog.value = true;
+};
+const closeDialog = () => {
+  console.log('entereed 2');
+  dialog.value = false;
+};
+</script>

package/src/components/EditField/EditField.css

@@ -1,20 +1,20 @@
-.wl-edit-field {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-}
-
-.wl-edit-field .input-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  width: 50%;
-  text-align: right;
-}
-
-.wl-edit-field .title-container {
-  display: flex;
-  align-items: center;
+.wl-edit-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.wl-edit-field .input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  width: 50%;
+  text-align: right;
+}
+
+.wl-edit-field .title-container {
+  display: flex;
+  align-items: center;
 }