Merge pull request #162 from OnroerendErfgoed/develop

release 0.14.0
OnroerendErfgoed · Nov 16, 2023 · 302331b · 302331b
2 parents 66b43af + bf3a20d
commit 302331b
Show file tree

Hide file tree

Showing 23 changed files with 711 additions and 534 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -2,7 +2,11 @@ import type { StorybookConfig } from '@storybook/vue3-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
+  ],
   framework: {
     name: '@storybook/vue3-vite',
     options: {

diff --git a/cypress/fixtures/actoren.json b/cypress/fixtures/actoren.json
@@ -1,33 +1,35 @@
-[{
+[
+  {
     "id": 12564,
     "uri": "https://dev-id.erfgoed.net/actoren/12564",
     "self": "https://dev-actoren.onroerenderfgoed.be/actoren/12564",
     "type": {
-        "id": 1,
-        "naam": "persoon",
-        "uri": "foaf:Person"
+      "id": 1,
+      "naam": "persoon",
+      "uri": "foaf:Person"
     },
     "zichtbaarheid": {
-        "id": 1,
-        "naam": "privaat"
+      "id": 1,
+      "naam": "privaat"
     },
     "omschrijving": "Van Humbeeck, Astrid",
     "naam": "Van Humbeeck",
     "voornaam": "Astrid",
     "status": {
-        "id": 75,
-        "status": "Actief"
+      "id": 75,
+      "status": "Actief"
     },
     "systemfields": {
-        "created_at": "2020-10-16T14:03:24.911936+02:00",
-        "created_by": {
-            "uri": "https://dev-id.erfgoed.net/actoren/12495",
-            "description": "Toelatingen Beschermd Erfgoed Aanvragen"
-        },
-        "updated_at": "2023-05-05T13:12:06.836065+02:00",
-        "updated_by": {
-            "uri": "https://dev-id.erfgoed.net/actoren/12564",
-            "description": "Van Humbeeck, Astrid"
-        }
+      "created_at": "2020-10-16T14:03:24.911936+02:00",
+      "created_by": {
+        "uri": "https://dev-id.erfgoed.net/actoren/12495",
+        "description": "Toelatingen Beschermd Erfgoed Aanvragen"
+      },
+      "updated_at": "2023-05-05T13:12:06.836065+02:00",
+      "updated_by": {
+        "uri": "https://dev-id.erfgoed.net/actoren/12564",
+        "description": "Van Humbeeck, Astrid"
+      }
     }
-}]
+  }
+]
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -12,14 +12,10 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
-
 // Import commands.js using ES2015 syntax:
-import './commands';
-
 import '@/scss/main.scss';
-
+import './commands';
 // Alternatively you can use CommonJS syntax:
-
 import { mount } from 'cypress/vue';
 
 // Augment the Cypress namespace to include type definitions for

diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -12,7 +12,6 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
-
 // Import commands.js using ES2015 syntax:
 import './commands';
 

diff --git a/package.json b/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": "0.13.0",
+  "version": "0.14.0",
   "exports": {
     ".": {
       "import": "./dist/vue-components.es.js",
@@ -79,14 +79,14 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^0.10.0",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-interactions": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
-    "@storybook/addon-viewport": "^7.2.1",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/builder-vite": "^7.2.1",
-    "@storybook/testing-library": "^0.2.0",
-    "@storybook/vue3-vite": "^7.2.1",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-viewport": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/builder-vite": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/vue3-vite": "^7.5.3",
     "@trivago/prettier-plugin-sort-imports": "4.1.0",
     "@types/node": "^18.14.2",
     "@types/proj4": "^2.5.2",
@@ -117,7 +117,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "sass": "^1.62.0",
     "start-server-and-test": "^2.0.0",
-    "storybook": "^7.2.1",
+    "storybook": "^7.5.3",
     "tslib": "^2.5.0",
     "typescript": "~4.8.4",
     "vite": "^4.1.4",

diff --git a/src/__tests__/OeWizard.cy.ts b/src/__tests__/OeWizard.cy.ts
@@ -9,10 +9,10 @@ describe('OeWizard', () => {
       components: { OeWizard },
       setup() {
         const steps: IStep[] = [
-          { name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
-          { name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
-          { name: 'Bijlagen', validate: () => Promise.resolve(true) },
-          { name: 'Overzicht', validate: () => Promise.resolve(true) },
+          { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
         ];
 
         return { steps };
@@ -152,10 +152,10 @@ describe('OeWizard', () => {
       components: { OeWizard },
       setup() {
         const steps: IStep[] = [
-          { name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
-          { name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
-          { name: 'Bijlagen', validate: () => Promise.resolve(true) },
-          { name: 'Overzicht', validate: () => Promise.resolve(true) },
+          { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
         ];
 
         return { steps };
@@ -178,10 +178,10 @@ describe('OeWizard', () => {
       components: { OeWizard },
       setup() {
         const steps: IStep[] = [
-          { name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
-          { name: 'Mijn gegevens', validate: () => Promise.resolve(false) },
-          { name: 'Bijlagen', validate: () => Promise.resolve(true) },
-          { name: 'Overzicht', validate: () => Promise.resolve(true) },
+          { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: false }) },
+          { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
         ];
 
         return { steps };
@@ -210,10 +210,17 @@ describe('OeWizard', () => {
       components: { OeWizard },
       setup() {
         const steps: IStep[] = [
-          { name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
-          { name: 'Mijn gegevens', validate: () => Promise.resolve(false) },
-          { name: 'Bijlagen', validate: () => Promise.resolve(true) },
-          { name: 'Overzicht', validate: () => Promise.resolve(true) },
+          { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
+          {
+            name: 'Mijn gegevens',
+            validate: () =>
+              Promise.resolve({
+                valid: false,
+                error: { id: '1', title: 'Error titel', content: 'Er heeft zich een error voorgedaan', type: 'error' },
+              }),
+          },
+          { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
         ];
 
         return { steps };
@@ -234,13 +241,18 @@ describe('OeWizard', () => {
   describe('disable submit', () => {
     const TestComponent = defineComponent({
       components: { OeWizard },
-      props: ['lastStepValid'],
+      props: {
+        lastStepValid: {
+          type: Boolean,
+          required: true,
+        },
+      },
       setup(props) {
         const steps: IStep[] = [
-          { name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
-          { name: 'Mijn gegevens', validate: () => Promise.resolve(true) },
-          { name: 'Bijlagen', validate: () => Promise.resolve(true) },
-          { name: 'Overzicht', validate: () => Promise.resolve(props.lastStepValid) },
+          { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Overzicht', validate: () => Promise.resolve({ valid: props.lastStepValid }) },
         ];
 
         return { steps };
@@ -283,10 +295,10 @@ describe('OeWizard', () => {
       components: { OeWizard },
       setup() {
         const steps: IStep[] = [
-          { name: 'Algemene gegevens', validate: () => Promise.resolve(true) },
-          { name: 'Mijn gegevens', validate: () => Promise.resolve(true), nextStepDisabled: true },
-          { name: 'Bijlagen', validate: () => Promise.resolve(true) },
-          { name: 'Overzicht', validate: () => Promise.resolve(true) },
+          { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }), nextStepDisabled: true },
+          { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) },
+          { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) },
         ];
 
         return { steps };

diff --git a/src/components/dumb/OeAutocomplete.vue b/src/components/dumb/OeAutocomplete.vue
@@ -9,7 +9,7 @@
     ></vl-input-field>
     <span v-if="loading" class="vl-loader vl-loader--small" data-cy="loader" />
 
-    <div v-if="showResults && searchTerm?.length >= props.minChars" class="vl-autocomplete" data-cy="result">
+    <div v-if="showResults && searchTerm?.length >= minChars" class="vl-autocomplete" data-cy="result">
       <div class="vl-autocomplete__list-wrapper">
         <div class="vl-autocomplete__list">
           <template v-if="loading">
@@ -20,7 +20,7 @@
           <li
             v-for="option in options"
             v-else
-            :key="option.value"
+            :key="(option.value as string | number)"
             tabindex="0"
             class="vl-autocomplete__cta"
             @keyup.enter="selectResult(option)"
@@ -41,7 +41,7 @@
 
 <script setup lang="ts">
 import { VlInputField } from '@govflanders/vl-ui-design-system-vue3';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { vClickOutside } from '@directives/click-outside.directive';
 import type { IAutocompleteOption, IAutocompleteProps } from '@models/autocomplete';
 
@@ -61,6 +61,8 @@ const loading = ref(false);
 const options = ref<IAutocompleteOption[]>([]);
 const showResults = ref(false);
 
+const minChars = computed(() => (isNaN(parseInt(searchTerm.value, 10)) ? props.minChars : 1));
+
 const handleInput = (value: string) => {
   searchTerm.value = value;
   showResults.value = true;
@@ -85,7 +87,7 @@ const fetchData = async (searchTerm: string) => {
 };
 
 watch(searchTerm, async () => {
-  if (searchTerm.value?.length >= props.minChars) {
+  if (searchTerm.value?.length >= minChars.value) {
     loading.value = true;
     const data = await fetchData(searchTerm.value);
     options.value = data;
@@ -105,7 +107,8 @@ watch(
     } else if (props.value?.title) {
       searchTerm.value = props.value?.title;
     }
-  }
+  },
+  { deep: true }
 );
 </script>
 

diff --git a/src/components/dumb/OeHeader.vue b/src/components/dumb/OeHeader.vue
@@ -3,7 +3,7 @@
     <div class="header__title vl-col--9-12 vl-col--12-12--m">
       <div class="heading vl-u-flex vl-u-flex-v-center">
         <h1 data-cy="application-name" class="vl-u-spacer-left--small" :title="appName">
-          <vl-link :to="appUrl" exact>{{ appName }}</vl-link>
+          <vl-link :href="appUrl" exact>{{ appName }}</vl-link>
         </h1>
         <a title="Navigeer naar de officiële website van Onroerend Erfgoed" :href="props.logoUrl">
           <img

diff --git a/src/components/dumb/OeSelect.vue b/src/components/dumb/OeSelect.vue
@@ -1,12 +1,12 @@
 <template>
   <div
     v-click-outside="hideResults"
-    @click="showResults = !showResults"
     class="js-vl-select"
     role="listbox"
     data-type="select-one"
     tabindex="0"
     dir="ltr"
+    @click="showResults = !showResults"
   >
     <div class="vl-select__inner">
       <div class="vl-input-field">
@@ -25,18 +25,18 @@
             {{ $props.placeholder }}
           </div>
         </div>
-        <template v-for="option in options" :key="'select-' + index">
-          <div
-            class="vl-select__item vl-select__item--choice vl-select__item--selectable"
-            :class="{ 'is-highlighted': isEqual(selectedOption, option), '': !isEqual(selectedOption, option) }"
-            role="treeitem"
-            @click="selectOption(option)"
-          >
-            <div>
-              {{ props.customLabel(option) }}
-            </div>
+        <div
+          v-for="(option, index) in options"
+          :key="'select-' + index"
+          class="vl-select__item vl-select__item--choice vl-select__item--selectable"
+          :class="{ 'is-highlighted': isEqual(selectedOption, option), '': !isEqual(selectedOption, option) }"
+          role="treeitem"
+          @click="selectOption(option)"
+        >
+          <div>
+            {{ props.customLabel(option) }}
           </div>
-        </template>
+        </div>
       </div>
     </div>
   </div>
@@ -49,7 +49,7 @@ import type { ISelectProps } from '@models/select';
 
 const showResults = ref<boolean>(false);
 
-const props = withDefaults(defineProps<ISelectProps<any>>(), {
+const props = withDefaults(defineProps<ISelectProps<unknown>>(), {
   modelValue: undefined,
   options: undefined,
   placeholder: 'Selecteer een optie',
@@ -62,7 +62,7 @@ const options = props.options || [];
 const selectedOption = ref(options.find((option) => isEqual(option, props.modelValue)));
 const selectOptionLabel = ref<string>(props.customLabel(selectedOption?.value) as string);
 
-const selectOption = (option: any) => {
+const selectOption = (option: unknown) => {
   selectedOption.value = option;
   selectOptionLabel.value = props.customLabel(selectedOption.value) as string;
   emit('update:modelValue', selectedOption.value);

diff --git a/src/components/dumb/OeWizard.vue b/src/components/dumb/OeWizard.vue
@@ -78,7 +78,7 @@ const totalSteps = ref(props.steps.length);
 const submitDisabled = computedAsync(
   async () => {
     if (props.disableSubmitWhenInvalid) {
-      return !(await props.steps[totalSteps.value - 1].validate());
+      return !(await props.steps[totalSteps.value - 1].validate()).valid;
     }
     return false;
   },
@@ -112,7 +112,7 @@ const previousStepsAreValid = async (step: number) => {
   const steps = props.steps.slice(0, step);
   const validations = await Promise.all(steps.map((s) => s.validate()));
 
-  return validations.every((v) => v);
+  return validations.every((v) => v.valid);
 };
 
 const reset = () => (currentStep.value = 0);