@zap-wunschlachen/wl-shared-components 1.0.12 → 1.0.14

package/src/components/EditField/EditField.vue

@@ -1,202 +1,202 @@
-<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" />
-      <p>{{ 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="var(--Dental-Blue-0)" @click="onStartEditing"/>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed } 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 { VIcon } from 'vuetify/components';
-import './EditField.css'
-
-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" />
+      <p>{{ 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="var(--Dental-Blue-0)" @click="onStartEditing"/>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } 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 { VIcon } from 'vuetify/components';
+import './EditField.css'
+
+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>

package/src/components/IconBullet/IconBullet.vue

@@ -1,86 +1,86 @@
-<template>
-  <div class="container d-flex align-center" data-testid="root">
-    <div class="icon-container d-flex align-start">
-      <!-- Check if the icon slot is used; otherwise, display the icon from the prop -->
-      <slot name="icon" v-if="$slots.icon"></slot>
-      <v-icon v-else-if="icon" :size="iconSize" :icon="icon"></v-icon>
-    </div>
-
-    <div class="text-container d-flex flex-column">
-      <!-- Display content if provided, otherwise display header and subheader -->
-      <div v-if="content" v-html="content"></div>
-      <div class="d-flex flex-column text-container" v-else>
-        <h3 v-if="header">{{ header }}</h3>
-        <p class="p-large" v-if="subHeader">{{ subHeader }}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { defineProps } from 'vue';
-
-const props = defineProps({
-  /**
-   * HTML content to display in the main content area.
-   * If provided, this will override header and subheader.
-   */
-  content: {
-    type: String,
-    required: false,
-  },
-  /**
-   * Header text displayed above the subheader.
-   * Only displayed if content is not provided.
-   */
-  header: {
-    type: String,
-    required: false,
-  },
-  /**
-   * Subheader text displayed below the header.
-   * Only displayed if content is not provided.
-   */
-  subHeader: {
-    type: String,
-    required: false,
-  },
-  /**
-   * Icon to display next to the text.
-   * If an icon slot is provided, this prop will be ignored.
-   */
-  icon: {
-    type: String,
-    required: false,
-  },
-  /**
-   * Size of the icon displayed next to the text.
-   * Accepts SVG-compatible size values as a string, such as '23', '28', etc.
-   * Ignored if an icon slot is provided.
-   */
-  iconSize: {
-    type: String,
-    default: '38',
-    required: false,
-  },
-});
-</script>
-
-<style scoped>
-.container {
-  width: 400px;
-  min-width: 300px;
-  max-width: 400px;
-  gap: 24px;
-  padding-left: 50px;
-  padding-right: 40px;
-}
-
-.text-container {
-  gap: 11px;
-}
-
-.v-icon {
-  color: var(--Dental-Blue-0);
-}
-</style>
+<template>
+  <div class="container d-flex align-center" data-testid="root">
+    <div class="icon-container d-flex align-start">
+      <!-- Check if the icon slot is used; otherwise, display the icon from the prop -->
+      <slot name="icon" v-if="$slots.icon"></slot>
+      <v-icon v-else-if="icon" :size="iconSize" :icon="icon"></v-icon>
+    </div>
+
+    <div class="text-container d-flex flex-column">
+      <!-- Display content if provided, otherwise display header and subheader -->
+      <div v-if="content" v-html="content"></div>
+      <div class="d-flex flex-column text-container" v-else>
+        <h3 v-if="header">{{ header }}</h3>
+        <p class="p-large" v-if="subHeader">{{ subHeader }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  /**
+   * HTML content to display in the main content area.
+   * If provided, this will override header and subheader.
+   */
+  content: {
+    type: String,
+    required: false,
+  },
+  /**
+   * Header text displayed above the subheader.
+   * Only displayed if content is not provided.
+   */
+  header: {
+    type: String,
+    required: false,
+  },
+  /**
+   * Subheader text displayed below the header.
+   * Only displayed if content is not provided.
+   */
+  subHeader: {
+    type: String,
+    required: false,
+  },
+  /**
+   * Icon to display next to the text.
+   * If an icon slot is provided, this prop will be ignored.
+   */
+  icon: {
+    type: String,
+    required: false,
+  },
+  /**
+   * Size of the icon displayed next to the text.
+   * Accepts SVG-compatible size values as a string, such as '23', '28', etc.
+   * Ignored if an icon slot is provided.
+   */
+  iconSize: {
+    type: String,
+    default: '38',
+    required: false,
+  },
+});
+</script>
+
+<style scoped>
+.container {
+  width: 400px;
+  min-width: 300px;
+  max-width: 400px;
+  gap: 24px;
+  padding-left: 50px;
+  padding-right: 40px;
+}
+
+.text-container {
+  gap: 11px;
+}
+
+.v-icon {
+  color: var(--Dental-Blue-0);
+}
+</style>

package/src/components/IconBullet/IconBulletList.vue

@@ -1,41 +1,41 @@
-<template>
-  <div class="outer-container d-flex flex-column align-center mx-auto" data-testid="root">
-    <!-- Conditional rendering of header slot or header prop -->
-    <div class="text-center">
-      <slot name="header">
-        <h2 v-if="header">{{ header }}</h2>
-      </slot>
-    </div>
-
-    <div class="slot-container d-flex justify-center align-start flex-wrap">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { defineProps } from 'vue';
-
-const props = defineProps({
-  /**
-   * Header text displayed if the header slot is not provided.
-   */
-  header: {
-    type: String,
-    required: false,
-  },
-});
-</script>
-
-<style scoped>
-.outer-container {
-  max-width: 850px;
-  row-gap: 27px;
-}
-
-.slot-container {
-  align-content: center;
-  row-gap: 27px;
-  width: 100%;
-}
-</style>
+<template>
+  <div class="outer-container d-flex flex-column align-center mx-auto" data-testid="root">
+    <!-- Conditional rendering of header slot or header prop -->
+    <div class="text-center">
+      <slot name="header">
+        <h2 v-if="header">{{ header }}</h2>
+      </slot>
+    </div>
+
+    <div class="slot-container d-flex justify-center align-start flex-wrap">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  /**
+   * Header text displayed if the header slot is not provided.
+   */
+  header: {
+    type: String,
+    required: false,
+  },
+});
+</script>
+
+<style scoped>
+.outer-container {
+  max-width: 850px;
+  row-gap: 27px;
+}
+
+.slot-container {
+  align-content: center;
+  row-gap: 27px;
+  width: 100%;
+}
+</style>