@zap-wunschlachen/wl-shared-components 1.0.87 → 1.0.89

package/.github/workflows/unit.yml

@@ -0,0 +1,97 @@
+name: Unit Tests
+
+on:
+  push:
+    branches: [develop]
+    paths:
+      - "src/**"
+      - "tests/unit/**"
+      - "package.json"
+      - "package-lock.json"
+      - "tsconfig.json"
+      - "vitest.config.ts"
+      - "vite.config.ts"
+      - ".github/workflows/unit.yml"
+  pull_request:
+    branches: [develop]
+    paths:
+      - "src/**"
+      - "tests/unit/**"
+      - "package.json"
+      - "package-lock.json"
+      - "tsconfig.json"
+      - "vitest.config.ts"
+      - "vite.config.ts"
+      - ".github/workflows/unit.yml"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  checks: write
+
+concurrency:
+  group: unit-${{ github.head_ref || github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  unit-tests:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npx vitest run --reporter=dot --reporter=github-actions --reporter=junit --reporter=json --outputFile.junit=test-results/vitest-junit.xml --outputFile.json=test-results/vitest-results.json
+
+      - name: Test Report
+        uses: dorny/test-reporter@v2
+        if: always()
+        with:
+          name: Vitest Results
+          path: test-results/vitest-junit.xml
+          reporter: java-junit
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 7
+
+  coverage:
+    name: Coverage
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests with coverage
+        run: npx vitest run --coverage
+
+      - name: Upload coverage report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: coverage
+          path: coverage/
+          retention-days: 7

package/App.vue

@@ -73,7 +73,7 @@
           type="button"
           @click="currentPage = 'validatedinput'"
         >
-          ValidatedInput
+          Input
         </button>
       </nav>
     </header>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.87",
+  "version": "1.0.89",
   "type": "module",
   "module": "./src/index.ts",
   "types": "./src/index.ts",
@@ -27,7 +27,6 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
-    "@types/dompurify": "^3.0.5",
     "@chromatic-com/storybook": "^1.9.0",
     "@playwright/test": "^1.55.0",
     "@storybook/addon-actions": "^8.3.5",
@@ -42,6 +41,7 @@
     "@storybook/vue3-vite": "^8.3.5",
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
+    "@types/dompurify": "^3.0.5",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "@vue/test-utils": "^2.4.6",
@@ -51,17 +51,18 @@
     "playwright": "^1.55.0",
     "prettier": "^3.3.1",
     "storybook": "^8.3.5",
+    "tsx": "^4.21.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vitest": "^3.2.4",
     "vue": "^3.5.11",
-    "wait-on": "^8.0.4",
-    "tsx": "^4.21.0"
+    "wait-on": "^8.0.4"
   },
   "dependencies": {
     "@heroicons/vue": "^2.1.5",
     "@mdi/font": "^7.4.47",
     "@vitejs/plugin-vue": "^5.1.4",
+    "awesome-phonenumber": "^7.8.0",
     "date-fns": "^4.1.0",
     "dompurify": "^3.2.4",
     "flag-icons": "^7.5.0",

package/src/components/Input/Input.vue

@@ -66,6 +66,7 @@
 import { ref, nextTick, computed, inject, watch } from 'vue';
 import './Input.css';
 import { useI18n } from 'vue-i18n';
+import { resolvePreset } from './presets';
 import { siteColors } from "../../utils/index";
 
 // Inject theme colors from ThemeProvider, fallback to global siteColors
@@ -83,6 +84,7 @@ const { t } = useI18n();
 const emit = defineEmits([
   'update:modelValue', // Emits when the input value is updated
   'update:valid', // Emits when the validation state changes
+  'update:formatted', // Emits formatted value when preset has a format function
   'click:prepend', // Emits when the prepend icon is clicked
   'click:append', // Emits when the append icon is clicked
   'click:prepend-inner', // Emits when the prepend inner icon is clicked
@@ -96,8 +98,6 @@ const emit = defineEmits([
 // Generate unique ID for accessibility - connects input to hint/error message
 const inputHintId = `input-hint-${Math.random().toString(36).slice(2, 11)}`;
 
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
 // Define the component props
 const props = defineProps({
   /**
@@ -217,12 +217,13 @@ const props = defineProps({
   },
 
   /**
-   * Activates a built-in validation ruleset.
+   * Activates a built-in validation ruleset. Pass a string shorthand ('email', 'phone'),
+   * a preset factory result, or a custom { rules, format? } object.
    */
   preset: {
-    type: String,
+    type: [String, Object],
     default: undefined,
-    validator: (v) => [undefined, 'email'].includes(v),
+    validator: (v) => v === undefined || typeof v === 'string' || (typeof v === 'object' && Array.isArray(v.rules)),
   },
 
   /**
@@ -246,12 +247,8 @@ const props = defineProps({
 // --- Validation logic ---
 const validationError = ref('');
 
-const presetRules = computed(() => {
-  if (props.preset === 'email') {
-    return [(value) => EMAIL_REGEX.test(value) || t('wl.input.email_error', 'Ungültige E-Mail-Adresse')];
-  }
-  return [];
-});
+const resolvedPreset = computed(() => props.preset ? resolvePreset(props.preset, t) : null);
+const presetRules = computed(() => resolvedPreset.value?.rules ?? []);
 
 const allRules = computed(() => [...presetRules.value, ...props.rules]);
 
@@ -329,6 +326,9 @@ const onAppendInnerClick = () => {
 // Emit the updated value when the input changes, syncing with v-model
 const onInput = (value) => {
   emit('update:modelValue', value);
+  if (resolvedPreset.value?.format) {
+    emit('update:formatted', resolvedPreset.value.format(value));
+  }
   if (allRules.value.length > 0 && props.validateOn === 'input') {
     validate(value);
   }

package/src/components/Input/presets.ts

@@ -0,0 +1,60 @@
+import { parsePhoneNumber } from 'awesome-phonenumber';
+
+export interface InputPreset {
+  rules: ((value: string) => true | string)[];
+  format?: (value: string) => string | undefined;
+}
+
+type TranslateFn = (key: string, fallback: string) => string;
+
+const defaultT: TranslateFn = (_key, fallback) => fallback;
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function emailPreset(t: TranslateFn = defaultT): InputPreset {
+  return {
+    rules: [
+      (value) => EMAIL_REGEX.test(value) || t('wl.input.email_error', 'Ungültige E-Mail-Adresse'),
+    ],
+  };
+}
+
+export interface PhonePresetOptions {
+  region?: string;
+}
+
+export function phonePreset(options?: PhonePresetOptions, t: TranslateFn = defaultT): InputPreset {
+  const region = options?.region ?? 'DE';
+  return {
+    rules: [
+      (value) => {
+        if (!/^[+\d\s\-()/.]+$/.test(value)) return t('wl.input.phone_error', 'Ungültige Telefonnummer');
+        if (!/^[+0]/.test(value.trim())) return t('wl.input.phone_error', 'Ungültige Telefonnummer');
+        const pn = parsePhoneNumber(value, { regionCode: region });
+        return pn.possible || t('wl.input.phone_error', 'Ungültige Telefonnummer');
+      },
+    ],
+    format: (value) => {
+      if (!value) return undefined;
+      const pn = parsePhoneNumber(value, { regionCode: region });
+      return pn.possible && pn.number?.e164 ? pn.number.e164 : value;
+    },
+  };
+}
+
+const BUILT_IN_PRESETS: Record<string, (t: TranslateFn) => InputPreset> = {
+  email: (t) => emailPreset(t),
+  phone: (t) => phonePreset(undefined, t),
+};
+
+export function resolvePreset(
+  preset: string | InputPreset,
+  t: TranslateFn = defaultT,
+): InputPreset {
+  if (typeof preset === 'string') {
+    const factory = BUILT_IN_PRESETS[preset];
+    if (!factory) throw new Error(`Unknown preset: "${preset}"`);
+    return factory(t);
+  }
+  return preset;
+}

package/src/components/Select/Select.vue

@@ -31,6 +31,7 @@
     :aria-invalid="error || undefined"
     :aria-label="ariaLabel || undefined"
     :aria-describedby="ariaDescribedby || undefined"
+    :hide-no-data="hideNoData"
     :menu-props="computedMenuProps"
     v-model="internalValue"
     @click:append="onClickAppend"
@@ -61,6 +62,12 @@
       <slot name="append-inner"></slot>
     </template>
 
+    <template #no-data>
+      <slot name="no-data">
+        <v-list-item :title="resolvedNoDataText" />
+      </slot>
+    </template>
+
     <template v-if="$slots['item']" #item="slotProps">
       <slot name="item" v-bind="slotProps"></slot>
     </template>
@@ -76,6 +83,9 @@ import './Select.css';
 import { ref, watch, nextTick, computed, inject } from 'vue';
 import { defineProps, defineEmits } from 'vue';
 import { siteColors } from "../../utils/index";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 // Inject theme colors from ThemeProvider, fallback to global siteColors
 const injectedThemeColors = inject('themeColors', null);
@@ -306,6 +316,25 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+
+  /**
+   * When true, hides the dropdown menu when there are no items.
+   * Set to false to allow the menu to open and show a "no data" message.
+   * Default is false — the menu opens and shows noDataText.
+   */
+  hideNoData: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * Text shown in the dropdown when there are no items and hideNoData is false.
+   * Default is 'No data available'.
+   */
+  noDataText: {
+    type: String,
+    default: undefined,
+  },
 });
 
 // Define events that can be emitted by the component
@@ -319,6 +348,8 @@ const emits = defineEmits([
   'update:search', // Emit search updates for filtering items
 ]);
 
+const resolvedNoDataText = computed(() => props.noDataText ?? t('wl.select.no_data'));
+
 // Define a reactive reference for internal value based on the modelValue prop
 const internalValue = ref(props.modelValue);
 

package/src/components/index.ts

@@ -30,6 +30,7 @@ export { default as Dialog } from './Dialog/Dialog.vue';
 export { default as AnamneseAnswerDialog } from './AnamneseAnswerDialog/AnamneseAnswerDialog.vue';
 export { default as EditField } from './EditField/EditField.vue';
 export { default as Input } from './Input/Input.vue';
+export { emailPreset, phonePreset, type InputPreset } from './Input/presets';
 export { default as Modal } from './Modal/Modal.vue';
 export { default as NotificationBubble } from './NotificationBubble/NotificationBubble.vue';
 export { default as OtpInput } from './OtpInput/OtpInput.vue';

package/src/i18n/locales/de.json

@@ -32,6 +32,9 @@
       "fill_form_title": "Anamnesebogen benötigt!",
       "fill_form_description": "Bitte füllen Sie diesen vor ihren Termin aus",
       "anamnese_form": "Anamnesebogen"
+    },
+    "select": {
+      "no_data": "Keine Daten verfügbar"
     }
   }
 }

package/src/i18n/locales/en.json

@@ -32,6 +32,9 @@
       "fill_form_title": "Medical history form required!",
       "fill_form_description": "Please fill this out before your appointment",
       "anamnese_form": "Medical history form"
+    },
+    "select": {
+      "no_data": "No data available"
     }
   }
 }

package/src/pages/SelectPage.vue

@@ -117,6 +117,119 @@
         </div>
       </div>
 
+      <!-- No Data / Empty State -->
+      <div class="section">
+        <h3 class="section-title">No Data / Empty State</h3>
+        <p class="section-description">When items are empty, the dropdown opens and shows a configurable message (hideNoData defaults to false)</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Default (No Data Available)</h4>
+            <Select
+              v-model="noDataDefault"
+              label="Select an option"
+              :items="[]"
+            />
+            <p class="value-display">Empty items — click to see default message</p>
+          </div>
+
+          <div class="example-item">
+            <h4>Custom No Data Text</h4>
+            <Select
+              v-model="noDataCustomText"
+              label="Select a relationship"
+              :items="[]"
+              no-data-text="Failed to load relationships"
+            />
+            <p class="value-display">Simulates API failure with custom message</p>
+          </div>
+
+          <div class="example-item">
+            <h4>Hidden No Data (old behavior)</h4>
+            <Select
+              v-model="noDataHidden"
+              label="Select an option"
+              :items="[]"
+              :hide-no-data="true"
+            />
+            <p class="value-display">hideNoData=true — dropdown won't open</p>
+          </div>
+
+          <div class="example-item">
+            <h4>Custom No Data Slot</h4>
+            <Select
+              v-model="noDataCustomSlot"
+              label="Select an option"
+              :items="[]"
+            >
+              <template #no-data>
+                <div class="custom-no-data">
+                  <p class="custom-no-data-title">Nothing here yet</p>
+                  <p class="custom-no-data-desc">Try a different search or add a new item.</p>
+                  <button class="custom-no-data-btn" @click="onNoDataAction">Add new item</button>
+                </div>
+              </template>
+            </Select>
+            <p class="value-display">Uses #no-data slot for custom content</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- No Data - SelectAutocomplete -->
+      <div class="section">
+        <h3 class="section-title">No Data — SelectAutocomplete</h3>
+        <p class="section-description">Same no-data behavior applies to the autocomplete variant</p>
+        <div class="examples-grid">
+          <div class="example-item">
+            <h4>Default (No Data Available)</h4>
+            <SelectAutocomplete
+              v-model="noDataAutocompleteDefault"
+              label="Search..."
+              :items="[]"
+            />
+            <p class="value-display">Empty items — type to see default message</p>
+          </div>
+
+          <div class="example-item">
+            <h4>Custom No Data Text</h4>
+            <SelectAutocomplete
+              v-model="noDataAutocompleteCustom"
+              label="Search a patient"
+              :items="[]"
+              no-data-text="Kein Patient gefunden"
+            />
+            <p class="value-display">Custom text via noDataText prop</p>
+          </div>
+
+          <div class="example-item">
+            <h4>Custom No Data Slot</h4>
+            <SelectAutocomplete
+              v-model="noDataAutocompleteSlot"
+              label="Search..."
+              :items="[]"
+            >
+              <template #no-data>
+                <div class="custom-no-data">
+                  <p class="custom-no-data-title">No results found</p>
+                  <p class="custom-no-data-desc">Try adjusting your search terms.</p>
+                </div>
+              </template>
+            </SelectAutocomplete>
+            <p class="value-display">Uses #no-data slot for custom content</p>
+          </div>
+
+          <div class="example-item">
+            <h4>Hidden No Data</h4>
+            <SelectAutocomplete
+              v-model="noDataAutocompleteHidden"
+              label="Search..."
+              :items="[]"
+              :hide-no-data="true"
+            />
+            <p class="value-display">hideNoData=true — menu stays closed</p>
+          </div>
+        </div>
+      </div>
+
       <!-- Multiple Selection -->
       <div class="section">
         <h3 class="section-title">Multiple Selection</h3>
@@ -835,6 +948,20 @@ const disabledValue = ref({ title: 'Apple', value: 'apple' });
 const errorValue = ref(null);
 const preselectedValue = ref({ title: 'Cherry', value: 'cherry' });
 
+// No data / empty state
+const noDataDefault = ref(null);
+const noDataCustomText = ref(null);
+const noDataHidden = ref(null);
+const noDataCustomSlot = ref(null);
+const noDataAutocompleteDefault = ref(null);
+const noDataAutocompleteCustom = ref(null);
+const noDataAutocompleteSlot = ref(null);
+const noDataAutocompleteHidden = ref(null);
+
+const onNoDataAction = () => {
+  alert('Add new item clicked');
+};
+
 // Multiple selection
 const multipleValue = ref([]);
 const chipsValue = ref([]);
@@ -1299,4 +1426,43 @@ const removeSelection = (index: number) => {
 .patient-edit-btn:hover {
   background-color: rgba(23, 39, 116, 0.05);
 }
+
+/* Custom no-data slot styles */
+.custom-no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.25rem 1rem;
+  text-align: center;
+}
+
+.custom-no-data-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 0.375rem 0;
+}
+
+.custom-no-data-desc {
+  font-size: 0.8125rem;
+  color: #888;
+  margin: 0 0 0.75rem 0;
+  line-height: 1.4;
+}
+
+.custom-no-data-btn {
+  background: none;
+  border: 1.5px solid #4caf50;
+  color: #4caf50;
+  border-radius: 999px;
+  padding: 0.375rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.custom-no-data-btn:hover {
+  background-color: rgba(76, 175, 80, 0.08);
+}
 </style>