@zap-wunschlachen/wl-shared-components 1.0.88 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.88",
+  "version": "1.0.89",
   "type": "module",
   "module": "./src/index.ts",
   "types": "./src/index.ts",

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/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>

package/tests/unit/accessibility/patient-app-a11y.spec.ts

@@ -7,7 +7,7 @@ import { siteColors } from '@/utils';
 import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
 import AccordionItem from '@components/Accordion/AccordionItem.vue';
 import Button from '@components/Button/Button.vue';
-import Checkbox from '@components/Checkbox/Checkbox.vue';
+import Checkbox from '@components/CheckBox/Checkbox.vue';
 import DateInput from '@components/DateInput/DateInput.vue';
 import Dialog from '@components/Dialog/Dialog.vue';
 import EditField from '@components/EditField/EditField.vue';

package/tests/unit/components/Icons/calendar.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
-import Calendar from '@components/Icons/calendar.vue';
+import Calendar from '@components/Icons/Calendar.vue';
 
 // Mock siteColors
 vi.mock('@/utils/index', () => ({

package/tests/unit/components/Icons/play.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
-import Play from '@components/Icons/play.vue';
+import Play from '@components/Icons/Play.vue';
 
 // Mock siteColors
 vi.mock('@/utils/index', () => ({