@zap-wunschlachen/wl-shared-components 1.0.0

package/src/components/Select/Select.vue

@@ -0,0 +1,304 @@
+<template>
+  <v-combobox
+    ref="inputRef"
+    class="wl-select"
+    :class="{
+      'border-on-hover': borderOnHover
+    }"
+    rounded="lg"
+    :density="density"
+    :variant="props.variant"
+    :label="label"
+    :chips="chips"
+    :append-icon="appendIcon"
+    :append-inner-icon="appendInnerIcon"
+    :prepend-icon="prependIcon"
+    :prepend-inner-icon="prependInnerIcon"
+    :menu-icon="menuIcon"
+    :clear-icon="clearIcon"
+    :closable-chips="closableChips"
+    :multiple="multiple"
+    :hide-details="true"
+    :clearable="clearable"
+    :items="items"
+    :disabled="disabled"
+    :error="error"
+    :item-title="'title'"
+    :item-value="'value'"
+    :return-object="returnObject"
+    v-model="internalValue"
+    @click:append="onClickAppend"
+    @click:append-inner="onClickAppendInner"
+    @click:clear="onClickClear"
+    @click:prepend="onClickPrepend"
+    @click:prepend-inner="onClickPrependInner"
+    @update:search="onUpdateSearch"
+    data-testid="root"
+  >
+    <template v-slot:menu>
+      <slot name="menu"></slot>
+    </template>
+
+    <template v-if="$slots['prepend']" #prepend>
+      <slot name="prepend"></slot>
+    </template>
+
+    <template v-if="$slots['prepend-inner']" #prepend-inner>
+      <slot name="prepend-inner"></slot>
+    </template>
+
+    <template v-if="$slots['append']" #append>
+      <slot name="append"></slot>
+    </template>
+
+    <template v-if="$slots['append-inner']" #append-inner>
+      <slot name="append-inner"></slot>
+    </template>
+  </v-combobox>
+</template>
+
+<script setup>
+import './Select.css';
+import { ref, watch, nextTick } from 'vue';
+import { defineProps, defineEmits } from 'vue';
+
+// Define component props with default values and descriptions
+const props = defineProps({
+  /**
+   * Disables the select input when true, making it non-interactive.
+   * Default is false.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+    /**
+   * Changes the select input state, when true, put it into error state.
+   * Default is false.
+   */
+  error: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Allows clearing the selected value when true.
+   * Default is true.
+   */
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The label displayed above the select input.
+   * Default is 'Label'.
+   */
+  label: {
+    type: String,
+    default: 'Label',
+  },
+
+  /**
+   * Enables the display of selected items as chips when true.
+   * Default is false.
+   */
+  chips: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Icon to append to the select field.
+   */
+  appendIcon: {
+    type: String,
+  },
+
+  /**
+   * Inner icon to append inside the select field.
+   */
+  appendInnerIcon: {
+    type: String,
+  },
+
+  /**
+   * Icon to prepend to the select field.
+   */
+  prependIcon: {
+    type: String,
+  },
+
+  /**
+   * Inner icon to prepend inside the select field.
+   */
+  prependInnerIcon: {
+    type: String,
+  },
+
+  /**
+   * The icon for the menu toggle.
+   * Default is an empty string (no icon).
+   */
+  menuIcon: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * The icon to use for the clear button.
+   * Default is 'x-mark'.
+   */
+  clearIcon: {
+    type: String,
+    default: 'x-mark',
+  },
+
+  /**
+   * Enables closing chips when true.
+   * Default is false.
+   */
+  closableChips: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Allows multiple selections when true.
+   * Default is false.
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The items available for selection.
+   * Default is an empty array.
+   */
+  items: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * The selected value (can be a string, array, or object).
+   */
+  modelValue: {
+    type: [String, Array, Object],
+    default: undefined,
+  },
+
+  /**
+   * The density of the select input.
+   * Controls spacing and size. Default is 'compact'.
+   */
+  density: {
+    type: String,
+    default: 'compact',
+  },
+
+  /**
+   * When true, the selected item is returned as an object.
+   * Default is true.
+   */
+  returnObject: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * The property name of the item to display as the title.
+   */
+  itemTitle: {
+    type: String,
+    default: undefined,
+  },
+
+  /**
+   * The property name of the item to use as the value.
+   */
+  itemValue: {
+    type: String,
+    default: undefined,
+  },
+
+  variant: {
+    type: String,
+    default: 'outlined',
+  },
+
+  borderOnHover: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Define events that can be emitted by the component
+const emits = defineEmits([
+  'update:modelValue', // Emit when the model value is updated
+  'click:append', // Emit when the append icon is clicked
+  'click:appendInner', // Emit when the append inner icon is clicked
+  'click:clear', // Emit when the clear button is clicked
+  'click:prepend', // Emit when the prepend icon is clicked
+  'click:prependInner', // Emit when the prepend inner icon is clicked
+  'update:search', // Emit search updates for filtering items
+]);
+
+// Define a reactive reference for internal value based on the modelValue prop
+const internalValue = ref(props.modelValue);
+
+// Watch for changes in modelValue prop and update internalValue accordingly
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    internalValue.value = newValue;
+  },
+);
+
+// Watch for changes in internalValue and emit updated modelValue to parent
+watch(internalValue, (newValue) => {
+  emits('update:modelValue', newValue);
+});
+
+// Emit click events for various icon and button interactions
+const onClickAppend = (event) => emits('click:append', event);
+const onClickAppendInner = (event) => emits('click:appendInner', event);
+const onClickClear = (event) => emits('click:clear', event);
+const onClickPrepend = (event) => emits('click:prepend', event);
+const onClickPrependInner = (event) => emits('click:prependInner', event);
+
+// Emit search updates for filtering or searching items
+const onUpdateSearch = (searchValue) => emits('update:search', searchValue);
+
+const inputRef = ref(null)
+
+const getNativeInput = () => {
+  return inputRef.value?.$el?.querySelector('input');
+}
+
+const blur = () => {
+ nextTick(() => {
+    getNativeInput()?.blur();
+  });
+};
+
+const select = () => {
+  nextTick(() => {
+    getNativeInput()?.select();
+  });
+};
+
+const focus = () => {
+  nextTick(() => {
+    getNativeInput()?.focus();
+  });
+};
+
+defineExpose({
+  blur,
+  select,
+  focus
+});
+</script>

package/src/components/TextArea/TextArea.css

@@ -0,0 +1,3 @@
+.v-icon {
+  opacity: 1 !important;
+}

package/src/components/TextArea/TextArea.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-textarea
+    class="text-area"
+    v-model="internalValue"
+    clearable
+    :clear-icon="clearIcon"
+    :label="label"
+    :prepend-icon="prependIcon"
+    :prepend-inner-icon="prependInnerIcon"
+    :append-icon="appendIcon"
+    :append-inner-icon="appendInnerIcon"
+    base-color="var(--Soft-Concrete-1)"
+    bg-color="white"
+    variant="outlined"
+    color="var(--Dental-Light-Blue-1)"
+    rounded="lg"
+    @click:append="emit('click:append', $event)"
+    @click:appendInner="emit('click:appendInner', $event)"
+    @click:clear="emit('click:clear', $event)"
+    @click:control="emit('click:control', $event)"
+    @click:prepend="emit('click:prepend', $event)"
+    @click:prependInner="emit('click:prependInner', $event)"
+    data-testid="root"
+  >
+    <!-- You can include slots if needed -->
+  </v-textarea>
+</template>
+<script setup>
+import './TextArea.css';
+import { computed } from 'vue';
+
+// Define props for the TextArea component
+const props = defineProps({
+  /**
+   * The value bound to the textarea, supporting both String and Number types.
+   * Default is an empty string.
+   */
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+
+  /**
+   * Icon for clearing the textarea content.
+   * Default is 'text-area'.
+   */
+  clearIcon: {
+    type: String,
+    default: 'text-area',
+  },
+
+  /**
+   * Label for the textarea field.
+   * Default is 'Label'.
+   */
+  label: {
+    type: String,
+    default: 'Label',
+  },
+
+  /**
+   * Icon displayed before the textarea.
+   * Default is null, meaning no icon is displayed by default.
+   */
+  prependIcon: {
+    type: String,
+    default: null,
+  },
+
+  /**
+   * Inner icon displayed before the textarea, inside the input field.
+   * Default is null.
+   */
+  prependInnerIcon: {
+    type: String,
+    default: null,
+  },
+
+  /**
+   * Icon displayed after the textarea.
+   * Default is null.
+   */
+  appendIcon: {
+    type: String,
+    default: null,
+  },
+
+  /**
+   * Inner icon displayed after the textarea, inside the input field.
+   * Default is null.
+   */
+  appendInnerIcon: {
+    type: String,
+    default: null,
+  },
+
+  // Add more props as needed to customize the textarea
+});
+
+// Define emits for event handling
+const emit = defineEmits([
+  'update:modelValue', // Emitted when the model value is updated
+  'click:append', // Emitted when the append icon is clicked
+  'click:appendInner', // Emitted when the append inner icon is clicked
+  'click:clear', // Emitted when the clear button is clicked
+  'click:control', // Emitted when the main textarea control is clicked
+  'click:prepend', // Emitted when the prepend icon is clicked
+  'click:prependInner', // Emitted when the prepend inner icon is clicked
+]);
+
+// Computed property to create two-way binding for v-model
+const internalValue = computed({
+  get() {
+    return props.modelValue; // Getter returns the current modelValue prop
+  },
+  set(val) {
+    emit('update:modelValue', val); // Setter emits the updated value to parent component
+  },
+});
+</script>
+
+<style>
+.text-area .v-icon {
+  color: var(--Dental-Blue-0);
+}
+</style>

package/src/components/TickBox/TickBox.css

@@ -0,0 +1,49 @@
+/* Default state */
+.tick-box.default-state .v-icon {
+  color: var(--Dental-Blue-0) !important;
+}
+
+/* Success state */
+.tick-box.success-state .v-icon {
+  color: var(--Success-Green-0) !important;
+}
+
+/* Error state */
+.tick-box.error-state .svg {
+  color: var(--Error-Red-0) !important;
+}
+
+/* Common styles for the checkbox label */
+.tick-box .v-label {
+  opacity: 1 !important;
+}
+
+.tick-box svg path {
+  stroke: var(--Dental-Blue-0);
+  fill: white;
+  stroke-width: 3px;
+}
+
+.tick-box.success-state svg rect {
+  stroke: var(--Success-Green-0);
+  fill: white;
+  stroke-width: 1px;
+}
+
+.tick-box.success-state svg path {
+  stroke: var(--Success-Green-0);
+  fill: white;
+  stroke-width: 3px;
+}
+
+.tick-box.error-state svg path {
+  stroke: var(--Error-Red-0);
+  fill: white;
+  stroke-width: 3px;
+}
+
+.tick-box.error-state svg rect {
+  stroke: var(--Error-Red-0);
+  fill: white;
+  stroke-width: 1px;
+}

package/src/components/TickBox/TickBox.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-checkbox
+    class="tick-box"
+    :class="checkboxClass"
+    true-icon="heroicons:outline-checked"
+    false-icon="heroicons:outline"
+    :disabled="disabled"
+    :value="value"
+    :density="density"
+    v-model="internalValue"
+    :color="hoverColor"
+    :base-color="hoverColor"
+    data-testid="root"
+  >
+    <!-- Custom label slot with dynamic style -->
+    <template #label>
+      <span :style="labelStyles">{{ label }}</span>
+    </template>
+  </v-checkbox>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import './TickBox.css';
+
+// Define props for the TickBox component
+const props = defineProps({
+  /**
+   * The label text displayed next to the tick box.
+   * This prop is required.
+   */
+  label: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * Indicates if the tick box is in a success state.
+   * When true, the success styling will be applied.
+   */
+  success: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Indicates if the tick box is in an error state.
+   * When true, the error styling will be applied.
+   */
+  error: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Disables the tick box when true, making it non-interactive.
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * The value that the tick box represents when checked.
+   * Can be a string, number, or boolean. Default is `true`.
+   */
+  value: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+
+  /**
+   * The current value bound to the tick box for v-model.
+   * Can be an array for multiple selection or boolean for single selection.
+   * This prop is required.
+   */
+  modelValue: {
+    type: [Array, Boolean],
+    required: true,
+  },
+
+  /**
+   * Controls the density of the tick box, such as padding and size.
+   * Default is 'comfortable'.
+   */
+  density: {
+    type: String,
+    required: false,
+    default: 'comfortable',
+  },
+});
+
+// Emit event for v-model binding
+const emit = defineEmits(['update:modelValue']);
+
+// Computed property for v-model binding (two-way binding)
+const internalValue = computed({
+  get() {
+    return props.modelValue; // Get the current modelValue from the parent
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue); // Emit the updated value to the parent
+  },
+});
+
+// Computed property for dynamic class based on error or success state
+const checkboxClass = computed(() => {
+  if (props.error) return 'error-state'; // Return error class if in error state
+  if (props.success) return 'success-state'; // Return success class if in success state
+  return 'default-state'; // Default class when no error or success
+});
+
+// Computed property for dynamic label styles based on state
+const labelStyles = computed(() => {
+  if (props.error) return { color: 'var(--Error-Red-0)' }; // Error styling for label
+  if (props.success) return { color: 'var(--Success-Green-1)' }; // Success styling for label
+  return { color: 'var(--Dental-Blue-0)' }; // Default label styling
+});
+
+// Computed property for dynamic color based on error or success state
+const hoverColor = computed(() => {
+  if (props.error) return 'var(--Error-Red-0)';
+  if (props.success) return 'var(--Success-Green-1)';
+  return 'var(--Dental-Blue-0)';
+});
+</script>

package/src/components/index.ts

@@ -0,0 +1,20 @@
+// Components index file
+
+export { default as AccordionItem } from './Accordion/AccordionItem.vue';
+export { default as AccordionGroup } from './Accordion/AccordionGroup.vue';
+export { default as Audio } from './Audio/Audio.vue';
+export { default as Button } from './Button/Button.vue';
+export { default as Checkbox } from './CheckBox/Checkbox.vue';
+export { default as DateInput } from './DateInput/DateInput.vue';
+export { default as Dialog } from './Dialog/Dialog.vue';
+export { default as IconBulletList } from './IconBullet/IconBulletList.vue';
+export { default as IconBullet } from './IconBullet/IconBullet.vue';
+export { default as Input } from './Input/Input.vue';
+export { default as NotificationBubble } from './NotificationBubble/NotificationBubble.vue';
+export { default as Select } from './Select/Select.vue';
+export { default as TickBox } from './TickBox/TickBox.vue';
+export { default as TextArea } from './TextArea/TextArea.vue';
+export { default as OtpInput } from './OtpInput/OtpInput.vue';
+export { default as PhoneInput } from './PhoneInput/PhoneInput.vue';
+export { default as EditField } from './EditField/EditField.vue';
+export { default as Modal } from './Modal/Modal.vue';

package/src/constants/iconEnums.ts

@@ -0,0 +1,4 @@
+export enum IconEnum {
+    CALENDAR = 'calendar',
+    PLAY = 'play',
+}

package/src/i18n/i18n.ts

@@ -0,0 +1,16 @@
+import { createI18n } from 'vue-i18n';
+import enMessages from './locales/en.json';
+import deMessages from './locales/de.json';
+
+const libraryMessages = {
+  en: enMessages,
+  de: deMessages,
+};
+
+export const createInternalI18n = () => {
+  return createI18n({
+    locale: 'de',
+    fallbackLocale: 'de',
+    messages: libraryMessages,
+  });
+};

package/src/i18n/locales/de.json

@@ -0,0 +1,19 @@
+{
+  "wl": {
+    "date_input": {
+      "placeholder": "TT.MM.JJJJ",
+      "invalid_date": "Bitte ein gültiges Datum eingeben",
+      "min_date_error": "Das Datum darf nicht vor {date} liegen",
+      "max_date_error": "Das Datum darf nicht nach {date} liegen"
+    },
+    "input": {
+      "placeholder": "Geben Sie Ihren Text ein"
+    },
+    "otp_input": {
+      "enter_sms_code": "Bitte den per SMS gesendeten Code eingeben",
+      "code_was_sent": "Code an Nummer {phoneNumber} gesendet",
+      "confirm": "Bestätigen",
+      "resend": "Code erneut senden"
+    }
+  }
+}

package/src/i18n/locales/en.json

@@ -0,0 +1,19 @@
+{
+  "wl": {
+    "date_input": {
+      "placeholder": "DD.MM.YYYY",
+      "invalid_date": "Please enter a valid date",
+      "min_date_error": "The date must not be before {date}",
+      "max_date_error": "The date must not be after {date}"
+    },
+    "input": {
+      "placeholder": "Enter your text"
+    },
+    "otp_input": {
+      "enter_sms_code": "Please enter the code sent via SMS",
+      "code_was_sent": "Code sent to number {phoneNumber}",
+      "confirm": "Confirm",
+      "resend": "Resend code"
+    }
+  }
+}