From 99f3e31b5ddba456983b5aa902a921b4fbecb9ad Mon Sep 17 00:00:00 2001
From: Vanderhaegen Cedrik <cedrik.vanderhaegen@vlaanderen.be>
Date: Tue, 7 May 2024 17:57:43 +0200
Subject: [PATCH 1/3] set next dev version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1b30aed..59a520b 100644
--- 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": "1.12.0",
+  "version": "1.13.0",
   "exports": {
     ".": {
       "import": "./dist/vue-components.es.js",

From 8cd2d70d1a6d19759c4993ce22741e9318d65ab7 Mon Sep 17 00:00:00 2001
From: wouter-adriaens <69460082+wouter-adriaens@users.noreply.github.com>
Date: Fri, 14 Jun 2024 15:36:00 +0200
Subject: [PATCH 2/3] #277 Actor widget default search (#278)

* #277 Actor widget default search

* #277 Actoren optional getSsoToken

* #277 Default dev actor api
---
 .../{smart => dumb}/OeActorWidgetDetail.vue   |  0
 .../OeActorWidgetGridActies.vue               |  2 +-
 src/components/dumb/index.ts                  |  4 ++
 src/components/smart/OeActorWidget.vue        |  8 +++-
 src/components/smart/OeActorWidgetGrid.vue    | 20 +++++----
 src/components/smart/index.ts                 |  2 +
 src/services/actor.service.ts                 | 42 ++++++++++++-------
 .../oe-actor-widget.stories.ts                | 27 +++++++++++-
 8 files changed, 79 insertions(+), 26 deletions(-)
 rename src/components/{smart => dumb}/OeActorWidgetDetail.vue (100%)
 rename src/components/{smart => dumb}/OeActorWidgetGridActies.vue (87%)

diff --git a/src/components/smart/OeActorWidgetDetail.vue b/src/components/dumb/OeActorWidgetDetail.vue
similarity index 100%
rename from src/components/smart/OeActorWidgetDetail.vue
rename to src/components/dumb/OeActorWidgetDetail.vue
diff --git a/src/components/smart/OeActorWidgetGridActies.vue b/src/components/dumb/OeActorWidgetGridActies.vue
similarity index 87%
rename from src/components/smart/OeActorWidgetGridActies.vue
rename to src/components/dumb/OeActorWidgetGridActies.vue
index 9c6e457..8e01e23 100644
--- a/src/components/smart/OeActorWidgetGridActies.vue
+++ b/src/components/dumb/OeActorWidgetGridActies.vue
@@ -7,7 +7,7 @@
       icon="eye"
       @click="props.params.setStateDetail(params.data?.id as number)"
     />
-    <a :href="`${props.params.actorenUrl}/beheer#/${params.data?.id}`" target="_blank" title="Bewerk actor">
+    <a :href="`${props.params.actorenUrl}beheer/${params.data?.id}`" target="_blank" title="Bewerk actor">
       <font-awesome-icon class="icon" icon="pencil" />
     </a>
   </div>
diff --git a/src/components/dumb/index.ts b/src/components/dumb/index.ts
index 6100e15..ac4663e 100644
--- a/src/components/dumb/index.ts
+++ b/src/components/dumb/index.ts
@@ -7,6 +7,8 @@ import FilterText from './FilterText.vue';
 import GridWorkflow from './GridWorkflow.vue';
 import InputPhone from './InputPhone.vue';
 import NoRowsOverlay from './NoRowsOverlay.vue';
+import OeActorWidgetDetail from './OeActorWidgetDetail.vue';
+import OeActorWidgetGridActies from './OeActorWidgetGridActies.vue';
 import OeAutocomplete from './OeAutocomplete.vue';
 import OeButton from './OeButton.vue';
 import OeContainer from './OeContainer.vue';
@@ -40,6 +42,8 @@ export {
   OeSelect,
   OeTinyMce,
   OeToaster,
+  OeActorWidgetGridActies,
+  OeActorWidgetDetail,
   OeWizard,
   SystemFields,
 };
diff --git a/src/components/smart/OeActorWidget.vue b/src/components/smart/OeActorWidget.vue
index a12dc55..9fce08a 100644
--- a/src/components/smart/OeActorWidget.vue
+++ b/src/components/smart/OeActorWidget.vue
@@ -4,6 +4,7 @@
     <template #modal-content>
       <grid
         v-if="state === ActorWidgetState.Grid"
+        :search-actor="props.searchActor"
         :api="props.api"
         :get-sso-token="props.getSsoToken"
         data-cy="actor-widget-grid"
@@ -40,8 +41,8 @@
 <script setup lang="ts">
 import { VlButton, VlModal } from '@govflanders/vl-ui-design-system-vue3';
 import { ref } from 'vue';
+import Detail from '@components/dumb/OeActorWidgetDetail.vue';
 import OeLoader from '@components/dumb/OeLoader.vue';
-import Detail from '@components/smart/OeActorWidgetDetail.vue';
 import Grid from '@components/smart/OeActorWidgetGrid.vue';
 import { ActorService } from '@services/actor.service';
 import type { ActorType, IActor } from '@models/actor';
@@ -49,8 +50,9 @@ import type { ActorType, IActor } from '@models/actor';
 interface IOeActorWidgetProps {
   id: string;
   api: string;
-  getSsoToken: () => Promise<string>;
+  getSsoToken?: () => Promise<string>;
   actorType?: ActorType;
+  searchActor?: string;
 }
 
 enum ActorWidgetState {
@@ -63,7 +65,9 @@ const props = withDefaults(defineProps<IOeActorWidgetProps>(), {
   api: '',
   getSsoToken: undefined,
   actorType: undefined,
+  searchActor: '',
 });
+
 const emit = defineEmits<{
   add: [IActor];
   close: [void];
diff --git a/src/components/smart/OeActorWidgetGrid.vue b/src/components/smart/OeActorWidgetGrid.vue
index 7ce1dd5..8825d4c 100644
--- a/src/components/smart/OeActorWidgetGrid.vue
+++ b/src/components/smart/OeActorWidgetGrid.vue
@@ -4,6 +4,7 @@
       <div class="vl-col--1-1 vl-u-flex vl-u-flex-align-flex-end">
         <vl-search
           id="actor-widget-menu-search"
+          v-model="zoekterm"
           name="actor-widget-menu-search"
           mod-inline
           mod-alt
@@ -42,23 +43,25 @@
 <script setup lang="ts">
 import { VlButton, VlSearch } from '@govflanders/vl-ui-design-system-vue3';
 import { isEmpty, omitBy } from 'lodash';
-import { computed, getCurrentInstance, ref } from 'vue';
+import { computed, getCurrentInstance, ref, watch } from 'vue';
+import { OeActorWidgetGridActies } from '@components/dumb';
 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';
 
 interface IOeActorWidgetGridProps {
   api: string;
-  getSsoToken: () => Promise<string>;
+  getSsoToken?: () => Promise<string>;
   actorType?: ActorType;
+  searchActor?: string;
 }
 
 const props = withDefaults(defineProps<IOeActorWidgetGridProps>(), {
   api: '',
   getSsoToken: undefined,
   actorType: undefined,
+  searchActor: '',
 });
 const emit = defineEmits<{
   selectActor: [IActor];
@@ -85,12 +88,15 @@ const handleSearchClick = (event: Event) => {
 const refresh = () => {
   // reset sort values
   gridOptions.value.columnApi?.resetColumnState();
-  // reset zoekterm values
-  zoekterm.value = '';
-  (document.querySelector('#actor-widget-menu-search') as HTMLInputElement).value = '';
   search();
 };
-
+watch(
+  () => props.searchActor,
+  () => {
+    zoekterm.value = props.searchActor;
+  },
+  { immediate: true }
+);
 // Grid
 const rowCount = ref(0);
 const getColumnDefinitions = (): ColDef[] => {
diff --git a/src/components/smart/index.ts b/src/components/smart/index.ts
index 49c097b..c2c08b4 100644
--- a/src/components/smart/index.ts
+++ b/src/components/smart/index.ts
@@ -4,6 +4,7 @@ import FilterGemeente from './FilterGemeente.vue';
 import FilterProvincie from './FilterProvincie.vue';
 import OeActorReferences from './OeActorReferences.vue';
 import OeActorWidget from './OeActorWidget.vue';
+import OeActorWidgetGrid from './OeActorWidgetGrid.vue';
 import OeAdres from './OeAdres.vue';
 import OeInventarisLink from './OeInventarisLink.vue';
 import OeZoneerder from './OeZoneerder.vue';
@@ -15,6 +16,7 @@ export {
   FilterGemeente,
   FilterProvincie,
   OeActorWidget,
+  OeActorWidgetGrid,
   OeActorReferences,
   OeZoneerder,
   OeInventarisLink,
diff --git a/src/services/actor.service.ts b/src/services/actor.service.ts
index cbed1f8..0eb2b54 100644
--- a/src/services/actor.service.ts
+++ b/src/services/actor.service.ts
@@ -1,4 +1,5 @@
 import { HttpService } from './http.service';
+import type { AxiosError } from 'axios';
 import type { ActorType, IActor } from '@models/actor';
 import type { IResponse } from '@models/grid';
 
@@ -12,21 +13,24 @@ export class ActorService extends HttpService {
   readonly API_URL: string;
 
   private actoren: IActor[] = [];
-  private getSsoToken: () => Promise<string>;
-  constructor(apiUrl: string, getSsoToken: () => Promise<string>) {
+  private getSsoToken: () => Promise<string | void>;
+
+  constructor(apiUrl: string, getSsoToken?: () => Promise<string>) {
     super();
     this.API_URL = apiUrl;
-    this.getSsoToken = getSsoToken;
+    this.getSsoToken = (getSsoToken as () => Promise<string>) || (() => Promise.resolve());
   }
 
   async getAOEActoren(searchTerm: string): Promise<IActor[]> {
     if (this.actoren?.length) {
       return this.actoren;
     }
-    const ssoToken = await this.getSsoToken();
+
     return (
       await this.get<IActor[]>(`${this.API_URL}/actoren/wij`, {
-        headers: { Authorization: 'Bearer ' + ssoToken },
+        headers: {
+          ...((await this.getSsoToken()) && { Authorization: 'Bearer ' + (await this.getSsoToken()) }),
+        },
         params: { omschrijving: `${searchTerm}` },
       })
     ).data;
@@ -38,7 +42,7 @@ export class ActorService extends HttpService {
       headers: {
         Range: contentRange,
         Accept: 'application/json',
-        Authorization: 'Bearer ' + (await this.getSsoToken()),
+        ...((await this.getSsoToken()) && { Authorization: 'Bearer ' + (await this.getSsoToken()) }),
       },
       params: query,
     });
@@ -52,13 +56,23 @@ export class ActorService extends HttpService {
   }
 
   async getActorById(id: number): Promise<IActor> {
-    return (
-      await this.get<IActor>(`${this.API_URL}/actoren/${id.toString()}?adressenregister`, {
-        headers: {
-          Accept: 'application/json',
-          Authorization: 'Bearer ' + (await this.getSsoToken()),
-        },
-      })
-    ).data;
+    try {
+      return (
+        await this.get<IActor>(`${this.API_URL}/actoren/${id.toString()}?adressenregister`, {
+          headers: {
+            Accept: 'application/json',
+            ...((await this.getSsoToken()) && { Authorization: 'Bearer ' + (await this.getSsoToken()) }),
+          },
+        })
+      ).data;
+    } catch (error) {
+      const e = error as AxiosError;
+      if (e.response?.status) {
+        console.error('Gelieve een gelding token te voorzien via de [getSsoToken] callback');
+      } else {
+        console.error(e);
+      }
+      return Promise.reject();
+    }
   }
 }
diff --git a/src/stories/smart-components/oe-actor-widget.stories.ts b/src/stories/smart-components/oe-actor-widget.stories.ts
index 9f7582a..d841055 100644
--- a/src/stories/smart-components/oe-actor-widget.stories.ts
+++ b/src/stories/smart-components/oe-actor-widget.stories.ts
@@ -55,13 +55,36 @@ export const Default: Story = {
     setup() {
       const actorType = ActorType.PERSOON;
       const id = '1';
-      const api = 'https://dev-actoren.onroerenderfgoed.be';
+      const api = 'https://dev-actoren.onroerenderfgoed.be/';
+      return { id, api, actorType };
+    },
+    template: `
+    <div style="zoom: .95">
+      <oe-actor-widget search-actor="van hum" :id="id" :api="api" :open="true" @add="console.log" @close="console.log" :actor-type="actorType">
+        <template v-slot:dropdown>
+          <div class="dropdown"></div>
+        </template>
+      </oe-actor-widget>
+    </div>
+    `,
+  }),
+};
+
+export const WithSsoTokenCallback: Story = {
+  render: () => ({
+    components: {
+      OeActorWidget,
+    },
+    setup() {
+      const actorType = ActorType.PERSOON;
+      const id = '1';
+      const api = 'http://local.onroerenderfgoed.be:6543/';
       const getSsoToken = async () => 1;
       return { id, api, getSsoToken, actorType };
     },
     template: `
     <div style="zoom: .95">
-      <oe-actor-widget :id="id" :api="api" :get-sso-token="getSsoToken" :open="true" @add="console.log" @close="console.log" :actor-type="actorType">
+      <oe-actor-widget search-actor="sois" :id="id" :api="api" :get-sso-token="getSsoToken" :open="true" @add="console.log" @close="console.log" :actor-type="actorType">
         <template v-slot:dropdown>
           <div class="dropdown"></div>
         </template>

From 2a0ad34cc1e003d009e014ed69e7b08c64c6f7fc Mon Sep 17 00:00:00 2001
From: wouter-adriaens <69460082+wouter-adriaens@users.noreply.github.com>
Date: Tue, 18 Jun 2024 15:19:47 +0200
Subject: [PATCH 3/3] #281 Add optional confirmation dialog on tab close (#282)

* #281 Add optional confirmation dialog on tab close

* #281 Fix unit tests

* #281 Tab close confirmation only in edit mode
---
 src/__tests__/OeContainer.cy.ts               | 60 ++++++++++++++++++-
 src/components/dumb/OeContainer.vue           | 24 +++++++-
 .../dumb/OeModalConfirmCancelChanges.vue      | 27 +++++++++
 src/components/dumb/index.ts                  |  2 +
 src/models/container.ts                       |  1 +
 .../dumb-components/container.stories.ts      | 23 +++++--
 6 files changed, 127 insertions(+), 10 deletions(-)
 create mode 100644 src/components/dumb/OeModalConfirmCancelChanges.vue

diff --git a/src/__tests__/OeContainer.cy.ts b/src/__tests__/OeContainer.cy.ts
index f376ff7..d1a0934 100644
--- a/src/__tests__/OeContainer.cy.ts
+++ b/src/__tests__/OeContainer.cy.ts
@@ -58,7 +58,7 @@ describe('Container', () => {
       setup: () => {
         const tabs = ref([
           { label: 'Menu', id: 'menu', closable: false, editMode: false },
-          { label: 'Tab 1', id: '1', closable: true, editMode: false },
+          { label: 'Tab 1', id: '1', closable: true, editMode: true },
           { label: 'Tab 2', id: '2', closable: true, editMode: false },
         ]);
         const activeTab = ref<ITab>(tabs.value[0]);
@@ -134,11 +134,12 @@ describe('Container', () => {
       });
     });
 
-    it('emits a tab-closed event with the selected tab on close', () => {
+    it('emits a tab-closed event with the selected tab on close after confirmation', () => {
       const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
 
       cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
         cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+        cy.dataCy('confirm-button').click();
 
         cy.get('@onTabClosedSpy').should(
           'have.been.calledWith',
@@ -146,5 +147,60 @@ describe('Container', () => {
         );
       });
     });
+
+    it('does not emit a tab-closed event with the selected tab on close after confirmation cancellation', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
+        cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+        cy.dataCy('cancel-button').click();
+
+        cy.get('@onTabClosedSpy').should(
+          'not.have.been.calledWith',
+          component.tabs.find((t) => t.id === '1')
+        );
+      });
+    });
+
+    it('emits a tab-closed event with the selected tab on close when confirmation is disabled', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy, disableConfirmCloseTab: true } }).then(
+        ({ component }) => {
+          cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+
+          cy.get('@onTabClosedSpy').should(
+            'have.been.calledWith',
+            component.tabs.find((t) => t.id === '1')
+          );
+        }
+      );
+    });
+
+    it('does not emit a tab-closed event with the selected tab on close when tab is in edit mode without confirmation', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
+        cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+
+        cy.get('@onTabClosedSpy').should(
+          'not.have.been.calledWith',
+          component.tabs.find((t) => t.id === '1')
+        );
+      });
+    });
+
+    it('emits a tab-closed event with the selected tab on close when tab is not in edit mode', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
+        cy.dataCy('bottom-tabs').find('.tab-2 .vl-pill__close').click();
+
+        cy.get('@onTabClosedSpy').should(
+          'have.been.calledWith',
+          component.tabs.find((t) => t.id === '2')
+        );
+      });
+    });
   });
 });
diff --git a/src/components/dumb/OeContainer.vue b/src/components/dumb/OeContainer.vue
index a66f0e5..f77e23c 100644
--- a/src/components/dumb/OeContainer.vue
+++ b/src/components/dumb/OeContainer.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="oe-container">
+    <OeModalConfirmCancelChanges
+      v-if="!props.disableConfirmCloseTab"
+      :open="confirmCancelChangesOpen"
+      @close="confirmCancelChangesOpen = false"
+      @confirm="closeTab(confirmTab as ITab, true)"
+    />
     <div data-cy="oe-container-content" class="oe-container__content">
       <slot></slot>
     </div>
@@ -13,7 +19,7 @@
           :close-label="`Sluit tab ${item.label}`"
           mod-clickable
           @click="(event: Event) => select(event, item)"
-          @close="close(item)"
+          @close="closeTab(item)"
         >
           {{ item.label }}
         </vl-pill>
@@ -24,11 +30,14 @@
 
 <script setup lang="ts">
 import { VlActionGroup, VlPill } from '@govflanders/vl-ui-design-system-vue3';
+import { ref } from 'vue';
+import { OeModalConfirmCancelChanges } from '@components/dumb';
 import type { IContainerProps, ITab } from '@models/container';
 
 const props = withDefaults(defineProps<IContainerProps>(), {
   tabs: () => [],
   activeTab: undefined,
+  disableConfirmCloseTab: false,
 });
 const emit = defineEmits<{
   (e: 'tab-selected', tab: ITab): void;
@@ -44,8 +53,17 @@ const select = (event: Event, item: ITab) => {
   }
 };
 
-const close = (item: ITab) => {
-  emit('tab-closed', item);
+// Confirm cancel modal
+const confirmCancelChangesOpen = ref(false);
+const confirmTab = ref<ITab>();
+const closeTab = (item: ITab, confirm = false) => {
+  if (confirm || props.disableConfirmCloseTab || !item.editMode) {
+    confirmCancelChangesOpen.value = false;
+    emit('tab-closed', item);
+  } else {
+    confirmTab.value = item;
+    confirmCancelChangesOpen.value = true;
+  }
 };
 </script>
 
diff --git a/src/components/dumb/OeModalConfirmCancelChanges.vue b/src/components/dumb/OeModalConfirmCancelChanges.vue
new file mode 100644
index 0000000..2412ab3
--- /dev/null
+++ b/src/components/dumb/OeModalConfirmCancelChanges.vue
@@ -0,0 +1,27 @@
+<template>
+  <vl-modal id="confirm-cancel-changes-modal">
+    <h2 class="vl-title vl-title--h2 vl-modal-dialog__title">
+      Ben je zeker dat je deze wijzigingen niet wilt bewaren?
+    </h2>
+    <div class="vl-u-spacer-bottom">
+      <p class="vl-u-spacer-bottom">
+        Bij het sluiten van deze fiche zullen je onbewaarde wijzigingen verloren gaan. Zorg ervoor dat je eerst je
+        wijzigingen bewaart, alvorens deze pagina te verlaten.
+      </p>
+    </div>
+    <div class="vl-u-flex vl-u-flex-align-center">
+      <vl-button data-cy="confirm-button" class="vl-button vl-u-spacer-right" @click="emit('confirm')"
+        >Ja, annuleer mijn wijzigingen</vl-button
+      >
+      <vl-button data-cy="cancel-button" class="vl-button large" @click="emit('close')"
+        >Nee, behoud mijn wijzigingen</vl-button
+      >
+    </div>
+  </vl-modal>
+</template>
+
+<script setup lang="ts">
+import { VlButton, VlModal } from '@govflanders/vl-ui-design-system-vue3';
+
+const emit = defineEmits(['confirm', 'close']);
+</script>
diff --git a/src/components/dumb/index.ts b/src/components/dumb/index.ts
index ac4663e..2775647 100644
--- a/src/components/dumb/index.ts
+++ b/src/components/dumb/index.ts
@@ -16,6 +16,7 @@ import OeGrid from './OeGrid.vue';
 import OeHeader from './OeHeader.vue';
 import OeInventarisLoadedLink from './OeInventarisLoadedLink.vue';
 import OeLoader from './OeLoader.vue';
+import OeModalConfirmCancelChanges from './OeModalConfirmCancelChanges.vue';
 import OeSelect from './OeSelect.vue';
 import OeTinyMce from './OeTinyMCE.vue';
 import OeToaster from './OeToaster.vue';
@@ -46,4 +47,5 @@ export {
   OeActorWidgetDetail,
   OeWizard,
   SystemFields,
+  OeModalConfirmCancelChanges,
 };
diff --git a/src/models/container.ts b/src/models/container.ts
index dfc8742..924c8cd 100644
--- a/src/models/container.ts
+++ b/src/models/container.ts
@@ -1,6 +1,7 @@
 export interface IContainerProps {
   activeTab?: ITab;
   tabs?: ITab[];
+  disableConfirmCloseTab?: boolean;
 }
 
 export interface ITab {
diff --git a/src/stories/dumb-components/container.stories.ts b/src/stories/dumb-components/container.stories.ts
index 81ef37a..b7d10ae 100644
--- a/src/stories/dumb-components/container.stories.ts
+++ b/src/stories/dumb-components/container.stories.ts
@@ -95,7 +95,7 @@ export const Tabs: Story = {
   parameters: {
     docs: {
       story: {
-        height: '250px',
+        height: '500px',
       },
       description: {
         story:
@@ -111,13 +111,14 @@ export const Tabs: Story = {
       VlButton,
     },
     setup: () => {
-      const tabs = ref([{ label: 'Menu', id: 'menu', closable: false }]);
+      const tabs = ref([{ label: 'Menu', id: 'menu', closable: false, editMode: false }]);
       const activeTab = ref<ITab>(tabs.value[0]);
       const addTab = () => {
         tabs.value.push({
           label: `Tab ${tabs.value.length.toString()}`,
           id: tabs.value.length.toString(),
           closable: true,
+          editMode: false,
         });
         activeTab.value = last(tabs.value) as ITab;
       };
@@ -126,17 +127,29 @@ export const Tabs: Story = {
         remove(tabs.value, (item) => item.id === tab.id);
         activeTab.value = tabs.value[0];
       };
+      const setEditMode = () => {
+        tabs.value[1].editMode = true;
+      };
 
-      return { tabs, activeTab, addTab, setActiveTab, closeTab };
+      return { tabs, activeTab, addTab, setActiveTab, closeTab, setEditMode };
     },
     template: `
-     <oe-container style="height: 200px" :tabs="tabs" :active-tab="activeTab" @tab-selected="setActiveTab" @tab-closed="closeTab">
+     <oe-container :tabs="tabs" :active-tab="activeTab" @tab-selected="setActiveTab" @tab-closed="closeTab">
       <div v-if="activeTab.id === 'menu'">
         <p class="vl-u-spacer--small">Dit is het menu overzicht</p>
+        <p class="vl-u-spacer-bottom--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum tellus pellentesque. Euismod quis viverra nibh cras pulvinar. Id leo in vitae turpis. Pretium lectus quam id leo. Dis parturient montes nascetur ridiculus mus. Enim facilisis gravida neque convallis a cras. Eget gravida cum sociis natoque penatibus et magnis. Nec nam aliquam sem et tortor consequat id porta. Non diam phasellus vestibulum lorem sed risus ultricies. Massa massa ultricies mi quis hendrerit dolor magna eget est. Eu nisl nunc mi ipsum faucibus vitae.</p> <br>
+        <p>Viverra nibh cras pulvinar mattis nunc sed. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Nulla facilisi etiam dignissim diam quis enim. Ipsum consequat nisl vel pretium lectus. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Ultrices tincidunt arcu non sodales neque. Enim eu turpis egestas pretium aenean. Sit amet nisl purus in mollis nunc sed. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. At tellus at urna condimentum mattis. Cum sociis natoque penatibus et. Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
+
         <vl-button @click="addTab">Open new tab</vl-button>
       </div>
        <div v-else>
-        Actieve tab - {{ activeTab.label }}
+        <vl-button @click="addTab">Open new tab</vl-button>
+        <vl-button @click="setEditMode">Set edit mode tab 1</vl-button>
+
+        Actieve tab - {{ activeTab }}
+        <pre>{{tabs}}</pre>
+        <p class="vl-u-spacer-bottom--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum tellus pellentesque. Euismod quis viverra nibh cras pulvinar. Id leo in vitae turpis. Pretium lectus quam id leo. Dis parturient montes nascetur ridiculus mus. Enim facilisis gravida neque convallis a cras. Eget gravida cum sociis natoque penatibus et magnis. Nec nam aliquam sem et tortor consequat id porta. Non diam phasellus vestibulum lorem sed risus ultricies. Massa massa ultricies mi quis hendrerit dolor magna eget est. Eu nisl nunc mi ipsum faucibus vitae.</p> <br>
+        <p>Viverra nibh cras pulvinar mattis nunc sed. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Nulla facilisi etiam dignissim diam quis enim. Ipsum consequat nisl vel pretium lectus. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Ultrices tincidunt arcu non sodales neque. Enim eu turpis egestas pretium aenean. Sit amet nisl purus in mollis nunc sed. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. At tellus at urna condimentum mattis. Cum sociis natoque penatibus et. Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
        </div>
      </oe-container>
     `,