@demos-europe/demosplan-ui 0.4.21 → 0.4.22

package/moveToClaudeMD.md

@@ -0,0 +1,65 @@
+# Claude Development Notes
+
+This file contains project-specific guidance and lessons learned for AI development assistance.
+
+## Testing Vue Components
+
+### Start Simple, Build Incrementally
+- Always test existing tests BEFORE making changes
+- Start with basic rendering tests, then add functionality tests
+- Don't try to test everything comprehensively in one go
+
+### Vue 3 + Jest Common Issues
+
+#### $root Mock Problems
+Vue components using `this.$root.$emit()` or `this.$root.$on()` are difficult to test:
+- Vue 3's proxy system rejects `$root` property assignment 
+- `globalProperties` doesn't always work for deeply nested access
+- **Solution**: Keep tests simple, focus on business logic over internal Vue mechanics
+
+#### Successful Test Patterns
+- Use `shallowMount` to avoid child component mounting issues
+- Use `attachTo: div` for components with DOM dependencies
+- Provide comprehensive stubs for complex child components:
+  ```javascript
+  stubs: {
+    ChildComponent: {
+      template: '<div class="child-stub"></div>',
+      props: ['prop1', 'prop2', 'complexObject']
+    }
+  }
+  ```
+
+#### When Tests Fail
+1. **Check existing tests first** - run them to establish baseline
+2. **Isolate the problem** - test one change at a time
+3. **Start with minimal viable test** - just check component mounts
+4. **Build up gradually** - add one assertion at a time
+
+### Component Testing Anti-Patterns
+- ❌ Testing every computed property and method
+- ❌ Overly complex test setup that mimics production too closely  
+- ❌ Testing Vue internals instead of component behavior
+- ❌ Making big test changes without validating each step
+
+### Component Testing Best Practices
+- ✅ Test user-facing behavior and component API
+- ✅ Test critical business logic and edge cases
+- ✅ Use existing working patterns as templates
+- ✅ Focus on inputs → outputs rather than internal state
+
+## Project Commands
+
+### Testing
+- `yarn test` - Run all tests
+- `yarn test <path>` - Run specific test file
+- Use Docker container for consistent testing environment:
+  ```bash
+  docker compose up -d
+  docker compose exec demosplan-ui yarn test
+  docker compose down
+  ```
+
+### Linting & Type Checking
+- Run lint and typecheck after making changes (if available)
+- Check package.json for available scripts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@demos-europe/demosplan-ui",
-  "version": "0.4.21",
+  "version": "0.4.22",
   "license": "MIT",
   "description": "Vue components, Vue directives, Design Token and Scss files to build interfaces for demosPlan.",
   "main": "./dist/demosplan-ui.umd.js",

package/src/components/DpAutocomplete/DpAutocomplete.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="relative">
+    <!-- Label displayed on small screens if search button is used -->
+    <label
+      v-if="searchButton"
+      id="autocomplete-label"
+      for="input-box"
+      class="mb-1 md:hidden">
+      {{ placeholder }}
+    </label>
     <!-- Search container -->
     <div
       aria-haspopup="listbox"
@@ -7,31 +15,43 @@
       :aria-expanded="isOptionsListVisible"
       :class="[
         isInputFocused ? 'border-interactive' : 'border-gray-300',
+        searchButton && isPlaceholderVisible ? 'justify-between' : 'justify-end',
         { 'focus-within:ring-1 focus-within:ring-interactive': isInputFocused }
       ]"
-      class="border rounded-md flex items-center overflow-hidden relative transition-colors duration-200 ease-in-out px-1 py-[2px]"
+      class="border rounded-md flex items-center overflow-hidden relative transition-colors duration-200 ease-in-out"
       role="combobox"
       :style="boxHeightStyle"
       tabindex="0"
       @mousedown.stop.prevent="focusInput">
+      <!-- Placeholder, if search button is used only displayed on lap-up screens -->
       <label
         id="autocomplete-label"
         for="input-box"
         :class="{
-          'h-full w-full px-1 py-[2px] text-gray-400 flex items-center m-0': true,
-          'absolute pointer-events-none': !isPlaceholderVisible,
-          'sr-only': !isPlaceholderVisible
+          'h-full w-full px-1 py-[2px] text-gray-400 items-center m-0': true,
+          'flex': !searchButton,
+          'hidden md:flex': searchButton,
+          'md:absolute md:pointer-events-none sr-only': !isPlaceholderVisible
         }">
         {{ placeholder }}
       </label>
+      <!-- Placeholder for small screens if search button is used -->
+      <template v-if="searchButton">
+        <span
+          :class="{ 'hidden': !isPlaceholderVisible }"
+          class="md:hidden h-full w-[80%] px-1 py-[2px] text-gray-400 flex items-center m-0">
+          {{ de.search.searching }}
+        </span>
+      </template>
       <div
         id="input-box"
         ref="input"
         role="textbox"
         :class="{
           'sr-only': isPlaceholderVisible,
-          'w-auto min-w-[10px]': isInputFocused,
-          'w-full': !isInputFocused
+          'min-w-[10px] self-start': isInputFocused,
+          'w-auto': isInputFocused && !searchButton,
+          'w-full': !isInputFocused || searchButton,
         }"
         class="py-[2px] px-1 outline-none whitespace-pre overflow-hidden"
         contenteditable="true"
@@ -41,6 +61,15 @@
         @mousedown.stop.prevent="focusInput"
         @keydown.stop="runSpecialKeys"
         @focusout="isInputFocused = false" />
+      <dp-button
+        v-if="(searchButton && !isPlaceholderVisible) || isPlaceholderVisible"
+        class="md:hidden search h-[34px] w-[34px] justify-center rounded-r-md rounded-l-none border-2 !border-l-1 z-[5] -ml-px -mr-px"
+        data-cy="handleSearch"
+        hide-text
+        icon="search"
+        :text="de.search.searching"
+        variant="outline"
+        @click="triggerSearch" />
       <div
         v-show="isInputFocused"
         :style="boxHeightStyle"
@@ -86,6 +115,7 @@
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { de } from '~/components/shared/translations'
 import { dpApi } from '~/lib/DpApi'
+import DpButton from '~/components/DpButton'
 
 /**
  * This component provides an autocomplete input field with dropdown suggestions.
@@ -113,56 +143,62 @@ const props = defineProps({
   },
 
   /**
-   * Array of options to display in the dropdown
+   * Minimum characters required before showing suggestions
    */
-  options: {
-    type: Array,
+  minChars: {
+    type: Number,
     required: false,
-    default: () => ([])
+    default: 3
   },
 
   /**
-   * Placeholder text to display when the input is empty
+   * Current value of the input (v-model)
    */
-  placeholder: {
+  modelValue: {
     type: String,
     required: false,
-    default: de.placeholderAutoSuggest
+    default: ''
   },
 
   /**
-   * Function that generates the API route for fetching suggestions
+   * Text to display when no results are found
    */
-  routeGenerator: {
-    type: Function,
-    required: true
+  noResultsText: {
+    type: String,
+    required: false,
+    default: de.autocompleteNoResults
   },
 
   /**
-   * Current value of the input (v-model)
+   * Array of options to display in the dropdown
    */
-  modelValue: {
-    type: String,
+  options: {
+    type: Array,
     required: false,
-    default: ''
+    default: () => ([])
   },
 
   /**
-   * Text to display when no results are found
+   * Placeholder text to display when the input is empty
    */
-  noResultsText: {
+  placeholder: {
     type: String,
     required: false,
-    default: de.autocompleteNoResults
+    default: de.placeholderAutoSuggest
   },
 
   /**
-   * Minimum characters required before showing suggestions
+   * Function that generates the API route for fetching suggestions
    */
-  minChars: {
-    type: Number,
+  routeGenerator: {
+    type: Function,
+    required: true
+  },
+
+  searchButton: {
+    type: Boolean,
     required: false,
-    default: 3
+    default: false
   }
 })
 
@@ -170,6 +206,7 @@ const emit = defineEmits([
   'update:modelValue',
   'search-changed',
   'selected',
+  'search',
   'searched'
 ])
 
@@ -180,7 +217,6 @@ const isOpenList = ref(true)
 const isInputFocused = ref(false)
 const isLoading = ref(false)
 
-
 const boxHeightNumber = computed(() => {
   return parseInt(props.height.replace('px', ''))
 })

package/src/components/DpProgressBar/DpProgressBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="c-progress-bar">
     <template v-if="indeterminate">
-      <div class="u-mb-0_25 weight--bold">
+      <div class="mb-1 font-bold">
         {{ label }}
       </div>
 
@@ -9,16 +9,16 @@
     </template>
 
     <template v-else>
-      <div class="u-mb-0_25 weight--bold">
+      <div class="mb-1 font-bold">
         {{ label }}
       </div>
 
       <div class="bg-color--grey-light-2">
         <div
-          class="u-mb-0_25 c-progress-bar__line"
-          :style="style" />
+          :style="style"
+          class="mb-1 c-progress-bar__line" />
       </div>
-      <span>
+      <span v-if="showPercentage">
         {{ percentage }}%
       </span>
     </template>
@@ -30,6 +30,12 @@ export default {
   name: 'DpProgressBar',
 
   props: {
+    showPercentage: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
     indeterminate: {
       type: Boolean,
       required: false,

package/tokens/dist/css/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 11 Jul 2025 07:14:07 GMT
+ * Generated on Mon, 14 Jul 2025 11:40:56 GMT
  */
 
 

package/tokens/dist/js/boxShadow.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 15 Jul 2025 09:58:21 GMT
+ * Generated on Tue, 15 Jul 2025 13:16:22 GMT
  */
 
 module.exports = {

package/tokens/dist/js/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 15 Jul 2025 09:58:21 GMT
+ * Generated on Tue, 15 Jul 2025 13:16:22 GMT
  */
 
 module.exports = {

package/tokens/dist/js/color.brand.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 15 Jul 2025 09:58:21 GMT
+ * Generated on Tue, 15 Jul 2025 13:16:22 GMT
  */
 
 module.exports = {

package/tokens/dist/js/color.data.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 15 Jul 2025 09:58:21 GMT
+ * Generated on Tue, 15 Jul 2025 13:16:22 GMT
  */
 
 module.exports = {

package/tokens/dist/js/color.palette.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 15 Jul 2025 09:58:21 GMT
+ * Generated on Tue, 15 Jul 2025 13:16:22 GMT
  */
 
 module.exports = {