Merge pull request #264 from OnroerendErfgoed/develop

release 1.10.0

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.9.0",
+  "version": "1.10.0",
   "exports": {
     ".": {
       "import": "./dist/vue-components.es.js",

src/__tests__/FilterAanduidingsobject.cy.ts

@@ -1,5 +1,5 @@
-import FilterAanduidingsobject from '../components/smart/FilterAanduidingsobject.vue';
 import { defineComponent, ref } from 'vue';
+import FilterAanduidingsobject from '@components/smart/FilterAanduidingsobject.vue';
 import type { IESAanduidingsobject } from '@models/aanduidingsobject';
 
 describe('FilterAanduidingsobject', () => {

src/__tests__/FilterText.cy.ts

@@ -1,5 +1,5 @@
-import FilterText from '../components/dumb/FilterText.vue';
 import { defineComponent, ref } from 'vue';
+import FilterText from '@components/dumb/FilterText.vue';
 
 describe('FilterText', () => {
   const TestComponent = defineComponent({

src/__tests__/NoRowsOverlay.cy.ts

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import NoRowsOverlay from '@/components/dumb/NoRowsOverlay.vue';
+import NoRowsOverlay from '@components/dumb/NoRowsOverlay.vue';
 
 describe('NoRowsOverlay', () => {
   const TestComponent = defineComponent({

src/__tests__/OeGrid.cy.ts

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import OeGrid from '@/components/dumb/OeGrid.vue';
+import OeGrid from '@components/dumb/OeGrid.vue';
 
 describe('Grid', () => {
   const TestComponent = defineComponent({

src/components/dumb/FilterInput.vue

@@ -70,6 +70,7 @@ import type { IFilter, IFilterInputProps, IFilterOption, TFilterInput } from '@m
 
 const props = withDefaults(defineProps<IFilterInputProps>(), {
   options: () => [],
+  defaultFilters: () => [],
 });
 const emit = defineEmits<{
   (e: 'filters-selected', filters: IFilter[]): void;
@@ -85,7 +86,7 @@ const setFilterInputValue = (value: TFilterInput, label: string) => (filterInput
 const clearInputs = () => (filterInputValue.value = {});
 
 // Filters
-const filters = ref<IFilter[]>([]);
+const filters = ref<IFilter[]>([...props.defaultFilters]);
 watch(
   filters,
   () => {
@@ -96,7 +97,7 @@ watch(
 
 // Filter helper methods
 const addFilter = () => {
-  const filter: IFilter = {
+  const filter = {
     key: selectedOption.value.key,
     label: selectedOption.value.label,
     value: {

src/components/dumb/GridWorkflow.vue

@@ -8,9 +8,9 @@
 </template>
 <script setup lang="ts">
 import { NoRowsOverlay } from '.';
-import OeGrid from '../dumb/OeGrid.vue';
 import { format } from 'date-fns';
 import { getCurrentInstance, ref } from 'vue';
+import OeGrid from '@components/dumb/OeGrid.vue';
 import type {
   ColDef,
   GridApi,

src/components/dumb/OeToaster.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <vl-toaster mod-top-right>
     <vl-alert
@@ -14,16 +15,12 @@
       :title="toast.title"
       @close="store.removeToast(toast?.id as string)"
     >
-      <template v-if="typeof toast.content === 'string'">
-        {{ toast.content }}
-      </template>
-      <template v-else>
-        <ul>
-          <li v-for="message in toast.content" :key="message">
-            {{ message }}
-          </li>
-        </ul>
-      </template>
+      <ul v-if="Array.isArray(toast.content)">
+        <li v-for="message in toast.content" :key="message">
+          {{ message }}
+        </li>
+      </ul>
+      <div v-else v-html="toast.content" />
     </vl-alert>
   </vl-toaster>
 </template>

src/components/smart/FilterAOEActor.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script setup lang="ts">
-import OeAutocomplete from '../dumb/OeAutocomplete.vue';
 import { computed, ref } from 'vue';
+import OeAutocomplete from '@components/dumb/OeAutocomplete.vue';
 import { ActorService } from '@services/actor.service';
 import type { IActor } from '@models/actor';
 import type { IAutocompleteOption } from '@models/autocomplete';

src/components/smart/FilterAanduidingsobject.vue

@@ -10,9 +10,9 @@
 </template>
 
 <script setup lang="ts">
-import OeAutocomplete from '../dumb/OeAutocomplete.vue';
 import { toRef } from '@vueuse/core';
 import { ref, watch } from 'vue';
+import OeAutocomplete from '@components/dumb/OeAutocomplete.vue';
 import { InventarisApiService } from '@services/inventaris-api.service';
 import type { IAutocompleteOption } from '@models/autocomplete';
 import type { IESAanduidingsobject, IFilterAanduidingsobjectProps } from '@models/index';

src/components/smart/OeActorWidgetGrid.vue

@@ -40,11 +40,11 @@
 </template>
 
 <script setup lang="ts">
-import OeGrid from '../dumb/OeGrid.vue';
-import OeActorWidgetGridActies from './OeActorWidgetGridActies.vue';
 import { VlButton, VlSearch } from '@govflanders/vl-ui-design-system-vue3';
 import { isEmpty, omitBy } from 'lodash';
 import { computed, getCurrentInstance, ref } from 'vue';
+import OeGrid from '@components/dumb/OeGrid.vue';
+import OeActorWidgetGridActies from '@components/smart/OeActorWidgetGridActies.vue';
 import { ActorService, type IActorenQuery } from '@services/actor.service';
 import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
 import type { ActorType, IActor } from '@models/actor';

src/models/filter-input.ts

@@ -4,6 +4,7 @@ export type TFilterInput = string | IGemeente;
 
 export interface IFilterInputProps {
   options: IFilterOption[];
+  defaultFilters?: IFilter[];
 }
 
 export interface IFilter {

src/stories/dumb-components/autocomplete.stories.ts

@@ -1,8 +1,8 @@
 import '@/scss/main.scss';
-import OeAutocomplete from '../../components/dumb/OeAutocomplete.vue';
 import { ref } from 'vue';
-import type { IAutocompleteOption } from '../../models/autocomplete';
+import OeAutocomplete from '@components/dumb/OeAutocomplete.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import type { IAutocompleteOption } from '@models/autocomplete';
 
 const meta: Meta<typeof OeAutocomplete> = {
   title: 'Dumb components/Autocomplete',

src/stories/dumb-components/clipboard-copy.stories.ts

@@ -1,4 +1,4 @@
-import ClipboardCopy from '../../components/dumb/ClipboardCopy.vue';
+import ClipboardCopy from '@components/dumb/ClipboardCopy.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 const meta: Meta<typeof ClipboardCopy> = {

src/stories/dumb-components/filter-datepicker.stories.ts

@@ -1,5 +1,5 @@
 import '@/scss/main.scss';
-import FilterDatepicker from '../../components/dumb/FilterDatepicker.vue';
+import FilterDatepicker from '@components/dumb/FilterDatepicker.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction

src/stories/dumb-components/filter-input.stories.ts

@@ -1,13 +1,13 @@
 import '@/scss/main.scss';
-import FilterDatepicker from '../../components/dumb/FilterDatepicker.vue';
-import FilterInput from '../../components/dumb/FilterInput.vue';
-import FilterRadio from '../../components/dumb/FilterRadio.vue';
-import FilterSelect from '../../components/dumb/FilterSelect.vue';
-import FilterText from '../../components/dumb/FilterText.vue';
-import FilterAanduidingsobject from '../../components/smart/FilterAanduidingsobject.vue';
-import FilterGemeente from '../../components/smart/FilterGemeente.vue';
-import { type IFilterOption, type IOption } from '../../models/filter-input';
+import FilterDatepicker from '@components/dumb/FilterDatepicker.vue';
+import FilterInput from '@components/dumb/FilterInput.vue';
+import FilterRadio from '@components/dumb/FilterRadio.vue';
+import FilterSelect from '@components/dumb/FilterSelect.vue';
+import FilterText from '@components/dumb/FilterText.vue';
+import FilterAanduidingsobject from '@components/smart/FilterAanduidingsobject.vue';
+import FilterGemeente from '@components/smart/FilterGemeente.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import type { IFilterOption, IOption } from '@models/filter-input';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof FilterInput> = {
@@ -45,6 +45,12 @@ setValue: function to apply the entered filter value from the custom filter fiel
         type: { summary: 'IFilterOption[]' },
       },
     },
+    defaultFilters: {
+      description: 'List of default filters',
+      table: {
+        type: { summary: 'IFilter[]' },
+      },
+    },
     'filters-selected': {
       description: 'Emits the currently active filters on each filter change',
       table: {
@@ -131,11 +137,21 @@ export const Default: Story = {
           value: 'nee',
         },
       ];
+      const defaultFilters = [
+        {
+          key: 'test1',
+          label: 'test2',
+          value: {
+            label: 'test3',
+            value: 'test4',
+          },
+        },
+      ];
 
-      return { filterOptions, statusOptions, radioOptions };
+      return { filterOptions, statusOptions, radioOptions, defaultFilters };
     },
     template: `
-    <filter-input v-slot="{ value, setValue, selectedOption, addFilter }" :options="filterOptions" @filters-selected="$event => filters = $event">
+    <filter-input v-slot="{ value, setValue, selectedOption, addFilter }" :options="filterOptions" :default-filters="defaultFilters" @filters-selected="$event => filters = $event">
       <filter-text v-if="selectedOption.key === 'id'" :value="value" @update:value="setValue($event, $event)" placeholder="ID" @keyup.enter="addFilter"></filter-text>
       <filter-text v-if="selectedOption.key === 'onderwerp'" :value="value" @update:value="setValue($event, $event)" placeholder="Onderwerp" @keyup.enter="addFilter"></filter-text>
       <filter-datepicker v-if="selectedOption.key === 'datum_goedkeuring_van' || selectedOption.key === 'datum_goedkeuring_tot'" :value="value" @update:value="setValue($event, $event[0])"></filter-datepicker>

src/stories/dumb-components/filter-radio.stories.ts

@@ -1,6 +1,6 @@
 import '@/scss/main.scss';
-import FilterRadio from '../../components/dumb/FilterRadio.vue';
 import { ref } from 'vue';
+import FilterRadio from '@components/dumb/FilterRadio.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction

src/stories/dumb-components/filter-select.stories.ts

@@ -1,5 +1,5 @@
 import '@/scss/main.scss';
-import FilterSelect from '../../components/dumb/FilterSelect.vue';
+import FilterSelect from '@components/dumb/FilterSelect.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction

src/stories/dumb-components/filter-text.stories.ts

@@ -1,5 +1,5 @@
 import '@/scss/main.scss';
-import FilterText from '../../components/dumb/FilterText.vue';
+import FilterText from '@components/dumb/FilterText.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction

src/stories/dumb-components/loader.stories.ts

@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
-import OeLoader from '../../components/dumb/OeLoader.vue';
 import { VlButton } from '@govflanders/vl-ui-design-system-vue3';
 import { ref } from 'vue';
+import OeLoader from '@components/dumb/OeLoader.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 const meta: Meta<typeof OeLoader> = {

src/stories/dumb-components/select.stories.ts

@@ -1,6 +1,6 @@
 import '@/scss/main.scss';
-import OeSelect from '../../components/dumb/OeSelect.vue';
 import { ref } from 'vue';
+import OeSelect from '@components/dumb/OeSelect.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import type { ISelectOption } from '@models/select';
 

src/stories/dumb-components/tiny-mce.stories.ts

@@ -1,6 +1,6 @@
 import '@/scss/main.scss';
-import OeTinyMce from '../../components/dumb/OeTinyMCE.vue';
 import { ref } from 'vue';
+import OeTinyMce from '@components/dumb/OeTinyMCE.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction

src/stories/dumb-components/wizard.stories.ts

@@ -1,8 +1,8 @@
 import '@/scss/main.scss';
-import OeWizard from '../../components/dumb/OeWizard.vue';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import type { IStep } from '../../models/wizard';
+import OeWizard from '@components/dumb/OeWizard.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import type { IStep } from '@models/wizard';
 
 const meta: Meta<typeof OeWizard> = {
   title: 'Dumb components/Wizard',

src/stories/smart-components/filter-aanduidingsobject.stories.ts

@@ -1,5 +1,5 @@
 import '@/scss/main.scss';
-import FilterAanduidingsobject from '../../components/smart/FilterAanduidingsobject.vue';
+import FilterAanduidingsobject from '@components/smart/FilterAanduidingsobject.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction

src/stories/smart-components/filter-aoe-actor.stories.ts

@@ -1,5 +1,5 @@
 import '@/scss/main.scss';
-import FilterAOEActor from '../../components/smart/FilterAOEActor.vue';
+import FilterAOEActor from '@components/smart/FilterAOEActor.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction

src/stories/smart-components/filter-gemeente.stories.ts

@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
-import FilterGemeente from '../../components/smart/FilterGemeente.vue';
-import type { IGemeente } from '../../models';
+import FilterGemeente from '@components/smart/FilterGemeente.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import type { IGemeente } from '@models/locatie';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof FilterGemeente> = {

src/stories/smart-components/filter-provincie.stories.ts

@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
-import FilterProvincie from '../../components/smart/FilterProvincie.vue';
-import type { IProvincie } from '../../models';
+import FilterProvincie from '@components/smart/FilterProvincie.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import type { IProvincie } from '@models/locatie';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof FilterProvincie> = {

src/stories/smart-components/oe-actor-widget.stories.ts

@@ -1,5 +1,5 @@
 import '@/scss/main.scss';
-import { OeActorWidget } from '@/components';
+import { OeActorWidget } from '@components/smart';
 import { ActorType } from '@models/actor';
 import type { Meta, StoryObj } from '@storybook/vue3';
 

src/stories/smart-components/oe-inventaris-link.stories.ts

@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { OeInventarisLink } from '@/components';
+import { OeInventarisLink } from '@components/smart';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import type { IInventarisLinkGebeurtenis, IInventarisLinkWaarneming, ILinks } from '@models/links';
 

src/stories/smart-components/oe-zoneerder.stories.ts

@@ -1,5 +1,5 @@
 import '@/scss/main.scss';
-import { OeZoneerder } from '@/components';
+import { OeZoneerder } from '@components/smart';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 const api = 'https://test-geo.onroerenderfgoed.be/';