@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

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,46 +1,46 @@
-<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 accessibility attributes -->
-    <v-dialog
-      v-model="dialog"
-      width="auto"
-      role="dialog"
-      aria-modal="true"
-      :aria-labelledby="dialogTitleId"
-      @keydown.escape="closeDialog"
-      :persistent="props.persistent"
-    >
-      <slot :closeDialog="closeDialog" :titleId="dialogTitleId" name="content"></slot>
-    </v-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import './Dialog.css';
-
-const props = defineProps({
-  persistent: {
-    type: Boolean,
-    default: false
-  }
-});
-
-// Reactive dialog state
-const dialog = ref(false);
-
-// Generate unique ID for accessibility (stable across re-renders)
-const dialogTitleId = `dialog-title-${Math.random().toString(36).slice(2, 9)}`;
-
-// Methods to open and close the dialog
-const openDialog = () => {
-  dialog.value = true;
-};
-
-const closeDialog = () => {
-  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 accessibility attributes -->
+    <v-dialog
+      v-model="dialog"
+      width="auto"
+      role="dialog"
+      aria-modal="true"
+      :aria-labelledby="dialogTitleId"
+      @keydown.escape="closeDialog"
+      :persistent="props.persistent"
+    >
+      <slot :closeDialog="closeDialog" :titleId="dialogTitleId" name="content"></slot>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import './Dialog.css';
+
+const props = defineProps({
+  persistent: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Reactive dialog state
+const dialog = ref(false);
+
+// Generate unique ID for accessibility (stable across re-renders)
+const dialogTitleId = `dialog-title-${Math.random().toString(36).slice(2, 9)}`;
+
+// Methods to open and close the dialog
+const openDialog = () => {
+  dialog.value = true;
+};
+
+const closeDialog = () => {
+  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;
 }

package/src/components/EditField/EditField.vue

@@ -1,211 +1,211 @@
-<template>
-  <div class="wl-edit-field" data-testid="root">
-    <div class="title-container" tabIndex="-1">
-      <v-icon v-if="props.icon !== ''" :icon="props.icon" size="16" class="mr-2" :color="colors['primary-color']" />
-      <p :style="{ color: colors['font_color_title_code'] }">{{ props.title }}</p>
-    </div>
-
-    <div ref="inputWrapperRef" class="input-wrapper">
-      <slot name="input" :is-input-focused="isInputFocused">
-        <template v-if="props.type === 'select'">
-          <Select
-            v-bind="props.inputProps"
-            reverse
-            ref="inputElementRef"
-            label=""
-            :return-object="false"
-            :modelValue="internalValue"
-            :items="items"
-            :border-on-hover="true"
-            @blur="handleBlur"
-            @keyup.enter="onEnter"
-            @keyup.esc="onEsc"
-            @focus="onFocus"
-            @update:model-value="(value) => { internalValue = value }"
-          />
-        </template>
-
-        <template v-else-if="props.type === 'date'">
-          <DateInput
-            v-bind="props.inputProps"
-            ref="inputElementRef"
-            reverse
-            :layout="'edit-field'"
-            :border-on-hover="true"
-            v-model="internalValue"
-            @blur="handleBlur"
-            @keyup.enter="onEnter"
-            @keyup.esc="onEsc"
-            @focus="onFocus"
-          />
-        </template>
-
-        <template v-else-if="props.type === 'phone'">
-          <PhoneInput
-            v-bind="props.inputProps"
-            ref="inputElementRef"
-            style="width: 100%;" 
-            density="compact"
-            hideDetails
-            reverse
-            :border-on-hover="true"
-            append-inner-icon=""
-            v-model="internalValue"
-            @blur="handleBlur"
-            @keyup.enter="onEnter"
-            @keyup.esc="onEsc"
-            @focus="onFocus"
-            @update:phone="(value) => internalValue = value"
-          />
-        </template>
-
-        <template v-else-if="props.type === 'text'">
-          <Input
-            v-bind="props.inputProps"
-            ref="inputElementRef" 
-            reverse
-            :border-on-hover="true"
-            @blur="handleBlur"
-            @keyup.enter="onEnter"
-            @keyup.esc="onEsc"
-            @focus="onFocus"
-            v-model="internalValue" 
-            @update:modelValue="(value) => internalValue = value"
-          />
-        </template>
-      </slot>
-
-      <template v-if="computedAppendIcon">
-        <v-icon :icon="computedAppendIcon" class="ml-1" size="16" :color="colors['primary-color']" @click="onStartEditing"/>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed, inject } from 'vue';
-import Input from '../Input/Input.vue';
-import Select from '../Select/Select.vue';
-import DateInput from '../DateInput/DateInput.vue';
-import PhoneInput from '../PhoneInput/PhoneInput.vue';
-import './EditField.css'
-import { siteColors } from "../../utils/index";
-
-// Inject theme colors from ThemeProvider, fallback to global siteColors
-const injectedThemeColors = inject('themeColors', null);
-const colors = computed(() => {
-  if (injectedThemeColors) {
-    return (injectedThemeColors as any).value;
-  }
-  return siteColors;
-});
-
-const props = defineProps({
-  title: { type: String, required: true },
-  value: { required: true },
-  icon: { type: String, required: false },
-  type: { type: String, required: false },
-  items: { type: Array, required: false },
-  selectOnFocus: { type: Boolean, default: false },
-  appendIcon: { type: String, required: false },
-  inputProps: { type: Object, default: () => ({}) }
-})
-const emit = defineEmits(['update:value'])
-
-const internalValue = ref(props.value)
-const isInputFocused = ref(false)
-const skipSave = ref(false)
-
-const inputWrapperRef = ref(null);
-const inputElementRef = ref(null);
-
-const computedAppendIcon = computed(() => 
-  props.appendIcon === undefined
-    ? 'heroicons:pencil'
-    : props.appendIcon
-)
-
-const itemsLookup = ref<Record<string, string>>({});
-
-if (props.items && Array.isArray(props.items)) {
-  itemsLookup.value = (props.items as Array<{ value: string; title: string }>).reduce((acc, item) => {
-    acc[item.value] = item.title;
-    return acc;
-  }, {} as Record<string, string>);
-}
-
-watch(() => props.value, v => (internalValue.value = v))
-
-async function onStartEditing() {
-  inputElementRef.value?.focus?.();
-}
-
-function save() {
-  if (internalValue.value !== props.value) {
-    emit('update:value', internalValue.value)
-  }
-}
-
-function handleBlur(){
-  if(skipSave.value){
-    skipSave.value = false;
-    return;
-  }
-
-  save();
-}
-
-function onEnter(){
-  inputElementRef.value?.blur?.();
-}
-
-function onEsc() {
-  internalValue.value = props.value;
-  skipSave.value = true;
-  inputElementRef.value?.blur?.();
-}
-
-function onFocus() {
-  if(props.selectOnFocus && inputElementRef.value) {
-    inputElementRef.value?.select?.();
-  }
-}
-
-</script>
-
-<style scoped>
-
-.editable-display.placeholder {
-  color: #aaa;
-}
-
-.editable-display {
-  cursor: text;
-  width: 100%;
-  border: 1.5px solid transparent;
-  padding: 8px;
-  min-height: calc(1.2em + 16px);
-}
-
-.editable-display:hover {
-  border-radius: 8px;
-  border: 1px solid var(--soft-concrete-1, #DDDDDF);
-  background: var(--White, #FFF);
-}
-
-.editable-display.edited {
-  border-radius: 8px;
-  border: 1px solid var(--soft-concrete-1, #DDDDDF);
-  background: var(--White, #FFF);;
-}
-
-.editable-input {
-  border-radius: 8px;
-  border: 1.5px solid var(--Dental-Blue-0, #172774);
-  background: var(--White, #FFF);
-  width: 100%;
-  outline: none;
-  text-align: right;
-  padding: 8px;
-}
-</style>
+<template>
+  <div class="wl-edit-field" data-testid="root">
+    <div class="title-container" tabIndex="-1">
+      <v-icon v-if="props.icon !== ''" :icon="props.icon" size="16" class="mr-2" :color="colors['primary-color']" />
+      <p :style="{ color: colors['font_color_title_code'] }">{{ props.title }}</p>
+    </div>
+
+    <div ref="inputWrapperRef" class="input-wrapper">
+      <slot name="input" :is-input-focused="isInputFocused">
+        <template v-if="props.type === 'select'">
+          <Select
+            v-bind="props.inputProps"
+            reverse
+            ref="inputElementRef"
+            label=""
+            :return-object="false"
+            :modelValue="internalValue"
+            :items="items"
+            :border-on-hover="true"
+            @blur="handleBlur"
+            @keyup.enter="onEnter"
+            @keyup.esc="onEsc"
+            @focus="onFocus"
+            @update:model-value="(value) => { internalValue = value }"
+          />
+        </template>
+
+        <template v-else-if="props.type === 'date'">
+          <DateInput
+            v-bind="props.inputProps"
+            ref="inputElementRef"
+            reverse
+            :layout="'edit-field'"
+            :border-on-hover="true"
+            v-model="internalValue"
+            @blur="handleBlur"
+            @keyup.enter="onEnter"
+            @keyup.esc="onEsc"
+            @focus="onFocus"
+          />
+        </template>
+
+        <template v-else-if="props.type === 'phone'">
+          <PhoneInput
+            v-bind="props.inputProps"
+            ref="inputElementRef"
+            style="width: 100%;" 
+            density="compact"
+            hideDetails
+            reverse
+            :border-on-hover="true"
+            append-inner-icon=""
+            v-model="internalValue"
+            @blur="handleBlur"
+            @keyup.enter="onEnter"
+            @keyup.esc="onEsc"
+            @focus="onFocus"
+            @update:phone="(value) => internalValue = value"
+          />
+        </template>
+
+        <template v-else-if="props.type === 'text'">
+          <Input
+            v-bind="props.inputProps"
+            ref="inputElementRef" 
+            reverse
+            :border-on-hover="true"
+            @blur="handleBlur"
+            @keyup.enter="onEnter"
+            @keyup.esc="onEsc"
+            @focus="onFocus"
+            v-model="internalValue" 
+            @update:modelValue="(value) => internalValue = value"
+          />
+        </template>
+      </slot>
+
+      <template v-if="computedAppendIcon">
+        <v-icon :icon="computedAppendIcon" class="ml-1" size="16" :color="colors['primary-color']" @click="onStartEditing"/>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, inject } from 'vue';
+import Input from '../Input/Input.vue';
+import Select from '../Select/Select.vue';
+import DateInput from '../DateInput/DateInput.vue';
+import PhoneInput from '../PhoneInput/PhoneInput.vue';
+import './EditField.css'
+import { siteColors } from "../../utils/index";
+
+// Inject theme colors from ThemeProvider, fallback to global siteColors
+const injectedThemeColors = inject('themeColors', null);
+const colors = computed(() => {
+  if (injectedThemeColors) {
+    return (injectedThemeColors as any).value;
+  }
+  return siteColors;
+});
+
+const props = defineProps({
+  title: { type: String, required: true },
+  value: { required: true },
+  icon: { type: String, required: false },
+  type: { type: String, required: false },
+  items: { type: Array, required: false },
+  selectOnFocus: { type: Boolean, default: false },
+  appendIcon: { type: String, required: false },
+  inputProps: { type: Object, default: () => ({}) }
+})
+const emit = defineEmits(['update:value'])
+
+const internalValue = ref(props.value)
+const isInputFocused = ref(false)
+const skipSave = ref(false)
+
+const inputWrapperRef = ref(null);
+const inputElementRef = ref(null);
+
+const computedAppendIcon = computed(() => 
+  props.appendIcon === undefined
+    ? 'heroicons:pencil'
+    : props.appendIcon
+)
+
+const itemsLookup = ref<Record<string, string>>({});
+
+if (props.items && Array.isArray(props.items)) {
+  itemsLookup.value = (props.items as Array<{ value: string; title: string }>).reduce((acc, item) => {
+    acc[item.value] = item.title;
+    return acc;
+  }, {} as Record<string, string>);
+}
+
+watch(() => props.value, v => (internalValue.value = v))
+
+async function onStartEditing() {
+  inputElementRef.value?.focus?.();
+}
+
+function save() {
+  if (internalValue.value !== props.value) {
+    emit('update:value', internalValue.value)
+  }
+}
+
+function handleBlur(){
+  if(skipSave.value){
+    skipSave.value = false;
+    return;
+  }
+
+  save();
+}
+
+function onEnter(){
+  inputElementRef.value?.blur?.();
+}
+
+function onEsc() {
+  internalValue.value = props.value;
+  skipSave.value = true;
+  inputElementRef.value?.blur?.();
+}
+
+function onFocus() {
+  if(props.selectOnFocus && inputElementRef.value) {
+    inputElementRef.value?.select?.();
+  }
+}
+
+</script>
+
+<style scoped>
+
+.editable-display.placeholder {
+  color: #aaa;
+}
+
+.editable-display {
+  cursor: text;
+  width: 100%;
+  border: 1.5px solid transparent;
+  padding: 8px;
+  min-height: calc(1.2em + 16px);
+}
+
+.editable-display:hover {
+  border-radius: 8px;
+  border: 1px solid var(--soft-concrete-1, #DDDDDF);
+  background: var(--White, #FFF);
+}
+
+.editable-display.edited {
+  border-radius: 8px;
+  border: 1px solid var(--soft-concrete-1, #DDDDDF);
+  background: var(--White, #FFF);;
+}
+
+.editable-input {
+  border-radius: 8px;
+  border: 1.5px solid var(--Dental-Blue-0, #172774);
+  background: var(--White, #FFF);
+  width: 100%;
+  outline: none;
+  text-align: right;
+  padding: 8px;
+}
+</style>