Merge pull request #323 from OnroerendErfgoed/develop

Release 1.18.0

.github/workflows/chromatic.yml

@@ -13,14 +13,14 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           always-auth: true
-          node-version: '18.x'
+          node-version: '20'
           registry-url: https://registry.npmjs.org
       - name: Install dependencies
         # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm

.github/workflows/cypress.yml

@@ -7,12 +7,12 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           always-auth: true
-          node-version: '18.x'
+          node-version: '20'
           registry-url: https://registry.npmjs.org
       - name: Install dependencies
         # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm

package.json

@@ -7,7 +7,7 @@
   "main": "./dist/vue-components.umd.js",
   "module": "./dist/vue-components.es.js",
   "typings": "./dist/src/main.d.ts",
-  "version": "1.17.8",
+  "version": "1.18.0",
   "exports": {
     ".": {
       "import": "./dist/vue-components.es.js",
@@ -133,5 +133,5 @@
     "@govflanders/vl-ui-design-system-style": "^1.0.0-alpha.3",
     "pyoes": "https://gitpkg.now.sh/OnroerendErfgoed/pyoes/npm-packages/pyoes"
   },
-  "_id": "vue_component_library@1.17.8"
+  "_id": "vue_component_library@1.18.0"
 }

src/__tests__/OeActorWidget.cy.ts

@@ -56,9 +56,16 @@ describe('OeActorWidget', () => {
       cy.wait('@dataSingleGet');
       cy.dataCy('actor-widget-detail').should('exist');
       cy.dataCy('actor-widget-detail-back-btn').click();
-      cy.wait('@dataGet');
       cy.dataCy('actor-widget-grid').should('exist');
     });
+
+    it('opens the detail view after click on eye-icon and preserves search after click on back btn', () => {
+      cy.dataCy('actor-widget-menu-search').type('astrid').type('{enter}');
+      cy.dataCy('actor-widget-detail-btn').click();
+      cy.wait('@dataSingleGet');
+      cy.dataCy('actor-widget-detail-back-btn').click();
+      cy.dataCy('actor-widget-menu-search').find('input').should('have.value', 'astrid');
+    });
   });
 
   describe('filter by actor type', () => {

src/components/dumb/OeDatepicker.vue

@@ -7,7 +7,7 @@
       visual-format="d-m-Y"
       :value="[datepickerDate]"
       :model-value="datepickerDate"
-      :mod-error="hasFormatError"
+      :mod-error="hasError"
       :parse-date="parseDate"
       @input="setDate"
     />
@@ -20,10 +20,13 @@
 <script setup lang="ts">
 import { VlDatepicker, VlFormMessageError } from '@govflanders/vl-ui-design-system-vue3';
 import { format, isValid, parse } from 'date-fns';
-import { computed, ref } from 'vue';
+import { has } from 'lodash';
+import { computed, ref, useAttrs } from 'vue';
 
+const attrs = useAttrs();
 const modelValue = defineModel<string | null>();
 const hasFormatError = ref(false);
+const hasError = computed(() => hasFormatError.value || has(attrs, 'mod-error'));
 
 const datumApiFormat = 'yyyy-MM-dd';
 const datumDisplayFormat = 'dd-MM-yyyy';

src/components/smart/OeActorWidget.vue

@@ -3,7 +3,7 @@
     <oe-loader v-if="loading"></oe-loader>
     <template #modal-content>
       <grid
-        v-if="state === ActorWidgetState.Grid"
+        v-show="state === ActorWidgetState.Grid"
         :search-actor="props.searchActor"
         :api="props.api"
         :get-sso-token="props.getSsoToken"
@@ -119,4 +119,10 @@ const resetWidget = () => {
     color: $primary-color;
   }
 }
+
+// Fix voor issue v-show - display: none wordt overschreven door vl-u-flex doordat deze !important gebruikt
+// Ref. https://github.com/vuejs/vue/issues/3761#issuecomment-251545116
+*[style*='display: none'] {
+  display: none !important;
+}
 </style>

src/components/smart/OeActorWidgetGrid.vue

@@ -5,6 +5,7 @@
         <vl-search
           id="actor-widget-menu-search"
           v-model="zoekterm"
+          data-cy="actor-widget-menu-search"
           name="actor-widget-menu-search"
           mod-inline
           mod-alt