@cloudron/pankow 3.2.6 → 3.2.7

package/gallery/Index.vue

@@ -1,792 +0,0 @@
-<script setup>
-
-import { ref, useTemplateRef, onMounted } from 'vue';
-
-import {
-  Button,
-  ButtonGroup,
-  Dialog,
-  EmailInput,
-  InputDialog,
-  MainLayout,
-  Notification,
-  NumberInput,
-  TextInput,
-  PasswordInput,
-  Icon,
-  Breadcrumb,
-  Checkbox,
-  Radiobutton,
-  OfflineBanner,
-  Popover,
-  ProgressBar,
-  SideBar,
-  TabView,
-  TableView,
-  TagInput,
-  Menu,
-  SingleSelect,
-  MultiSelect,
-  Spinner,
-  Switch,
-  FormGroup,
-  InputGroup,
-} from '../index.js';
-
-import { prettyDate, prettyLongDate } from '../utils.js';
-
-import DirectoryViewDemo from './DirectoryViewDemo.vue';
-import CustomMenuItem from './CustomMenuItem.vue';
-
-const dateTime = ref('2024-05-01T01:13');
-const buttonTypeToggle = ref(false);
-const largeDialog = ref(false);
-const checkbox1Enabled = ref(true);
-const checkbox2Enabled = ref(false);
-const switch1 = ref(true);
-const switch2 = ref(false);
-const offlineBannerActive = ref(false);
-const textInputValue = ref('');
-const textInputErrorValue = ref('');
-const textInputDisabledValue = ref('do not edit');
-const passwordInputValue = ref('');
-const passwordInputDisabledValue = ref('something');
-const emailInputValue = ref('');
-const numberInputValue = ref(0);
-const numberInputDisabledValue = ref(1337);
-const tagInputValue = ref([ 'pecan', 'walnut' ]);
-const radiobutton = ref('one');
-const progressValue = ref(44);
-
-const breadcrumbHomeItem = {
-  label: 'Home',
-  icon: 'fa-solid fa-house',
-  route: '#'
-};
-const breadcrumbItems = [{
-  icon: '',
-  label: 'Cloudron',
-  action: () => { console.log('Breadcrumb Cloudron'); }
-}, {
-  icon: 'fa-solid fa-user-astronaut',
-  label: 'Founders',
-  action: () => { console.log('Breadcrumb Founders'); }
-}, {
-  icon: 'fa-regular fa-file-pdf',
-  label: 'Documents',
-  action: () => { console.log('Breadcrumb Documents'); }
-}, {
-  icon: '',
-  label: 'Tax',
-  action: () => { console.log('Breadcrumb Tax'); }
-}];
-const singleselectModel = [{
-  display: 'Pizza',
-  id: 'pizza'
-}, {
-  display: 'Pasta',
-  id: 'pasta'
-}, {
-  display: 'Pizza',
-  id: 'pizza2'
-}, {
-  display: 'Falafel',
-  id: 'falafel'
-}, {
-  display: 'Menemen',
-  id: 'menemen'
-},{
-  display: 'Pizza',
-  id: 'pizza11'
-}, {
-  display: 'Pasta',
-  id: 'pasta11'
-}, {
-  display: 'Pizza',
-  id: 'pizza211'
-}, {
-  display: 'Falafel',
-  id: 'falafel11'
-}, {
-  display: 'Menemen',
-  id: 'menemen11'
-},{
-  display: 'Pizza',
-  id: 'pizza22'
-}, {
-  display: 'Pasta',
-  id: 'pasta22'
-}, {
-  display: 'Pizza',
-  id: 'pizza222'
-}, {
-  display: 'Falafel',
-  id: 'falafel22'
-}, {
-  display: 'Menemen',
-  id: 'menemen22'
-}];
-const singleselectValue = ref({
-  display: 'Pasta',
-  id: 'pasta'
-});
-const singleselectValueWithKey = ref('falafel');
-const singleselectValueNoInit = ref('');
-const multiselectModel = [{
-  display: 'Pizza',
-  id: 'pizza'
-}, {
-  display: 'Pasta',
-  id: 'pasta'
-}, {
-  separator: true,
-}, {
-  display: 'Pizza',
-  id: 'pizza2'
-}, {
-  display: 'Falafel',
-  id: 'falafel'
-}, {
-  display: 'Menemen',
-  id: 'menemen'
-}];
-const multiselectValue = ref([]);
-const multiselectValueWithCustomLabel = ref([]);
-const multiselectValueWithOptionKey = ref([ 'falafel' ]);
-const multiselectValueWithSelectAll = ref([]);
-const menuModelItemsSingle = [{
-  label: 'Single Item',
-  action: () => { console.log('Single Menu Item'); }
-}];
-const menuModelItems = [{
-  label: 'Item 1',
-  action: () => { console.log('Menu Item 1 clicked'); }
-}, {
-  label: 'Item 2',
-  action: () => { console.log('Menu Item 2 clicked'); }
-}, {
-  separator: true
-}, {
-  label: 'Item 3',
-  action: () => { console.log('Menu Item 3 clicked'); }
-}];
-const menuModelItemsWithIcons = [{
-  icon: 'fa-solid fa-circle-notch fa-spin',
-  label: 'Item 1',
-  action: () => { console.log('Menu Item 1 clicked'); }
-}, {
-  icon: '',
-  label: 'Item 2',
-  checkbox: true,
-  action: () => { console.log('Menu Item 2 clicked'); }
-}, {
-  separator: true
-}, {
-  href: 'https://cloudron.io',
-  target: '_blank',
-  label: 'Item as link',
-}, {
-  separator: true
-}, {
-  icon: 'fa-regular fa-file-pdf',
-  label: 'Item 3',
-  action: () => { console.log('Menu Item 3 clicked'); }
-}];
-const menuModelWithDOMElements = [{
-  label: 'Normal Item',
-  action: () => { console.log('Normal Item clicked'); }
-}, {
-  type: CustomMenuItem,
-  action: () => { console.log('Large Item clicked'); }
-}, {
-  label: 'This is a link',
-  href: 'https://cloudron.io',
-  target: '_blank',
-}];
-const notificationPosition = ref('top-center');
-const tableColumns = {
-  status: {
-    label: 'Status',
-    sort(a, b) {
-      return a.index < b.index ? -1 : 1;
-    }
-  },
-  filename: {
-    label: 'File name',
-    icon: 'fa-solid fa-lock',
-    sort: true,
-  },
-  extra: {
-    label: 'Extra',
-    hideMobile: true,
-  },
-  action: {
-    label: 'Actions',
-    sort: false
-  }
-};
-const tableModel = ref([]);
-const tabs = {
-  tab0: 'Fruit',
-  tab1: 'Veggies',
-  tab2: 'Meat',
-  tab3: 'Drinks',
-};
-
-const myDialog = useTemplateRef('myDialog');
-function onButtonClick() {
-  myDialog.value.open();
-  console.log('Button clicked');
-}
-
-function onPopover(popover, event, elem = null) {
-  popover.open(event, elem);
-}
-
-const myInputDialog = useTemplateRef('myInputDialog');
-async function onAskForConfirmation() {
-  console.log('User answered with:', await myInputDialog.value.confirm({
-    message: 'Really delete this or that?',
-    confirmStyle: 'danger',
-    confirmLabel: 'yeah sure',
-    rejectLabel: 'hm no'
-  }) ? 'ok' : 'nay');
-}
-
-async function onAskForString() {
-  console.log('User answered with:', await myInputDialog.value.prompt({
-    message: 'New Filename',
-    value: 'newfile.txt',
-    confirmStyle: 'success',
-    confirmLabel: 'Save',
-    rejectLabel: 'Close'
-  }));
-}
-
-function onOpenMenu(menu, event, elem = null) {
-  menu.open(event, elem);
-}
-
-const sideBar = useTemplateRef('sideBar');
-function onSideBarEntry() {
-  sideBar.value.close();
-}
-
-function onRaiseNotification(text, type) {
-  if (type) window.pankow.notify({ text, type });
-  else window.pankow.notify(text);
-}
-
-function onRaisePersistentNotification(text) {
-  window.pankow.notify({
-    text,
-    persistent: true
-  });
-}
-
-const tabview = useTemplateRef('tabview');
-function onChangeTab(tab) {
-  tabview.value.open(tab);
-}
-
-function onSwitchChange(value) {
-  console.log('switch changed to', value);
-}
-
-onMounted(async () => {
-  console.log('Pankow widget gallery');
-
-  for (let i = 0; i < 100; ++i) {
-    tableModel.value.push({
-      status: {
-        label: i + ' some state',
-        index: i
-      },
-      filename: `Test file ${i}.txt`,
-      extra: 'Only visible on desktop',
-      action: 'foo'
-    });
-  }
-
-  document.getElementById('borderRadiusInput').addEventListener('change', (event) => {
-    let root = document.documentElement;
-    root.style.setProperty('--pankow-border-radius', event.target.value + 'px');
-  });
-
-  setTimeout(() => {
-    radiobutton.value = 'two';
-    singleselectValueWithKey.value = 'pizza';
-  }, 2000 );
-});
-
-</script>
-
-<template>
-
-  <Notification :position="notificationPosition"/>
-
-  <div class="main-content">
-    <SideBar ref="sideBar" class="side-bar">
-      <h2><img src="./logo.png" class="logo"/><span class="logo-text">ankow</span></h2>
-      <label>Border Radius</label>
-      <input id="borderRadiusInput" type="range" min="0" max="20" value="3"/>
-      <a @click="onSideBarEntry()" href="#button">Button</a>
-      <a @click="onSideBarEntry()" class="child" href="#button-outline">Outline</a>
-      <a @click="onSideBarEntry()" class="child" href="#button-small">Small</a>
-      <a @click="onSideBarEntry()" class="child" href="#button-plain">Plain</a>
-      <a @click="onSideBarEntry()" class="child" href="#button-tool">Toolbutton</a>
-      <a @click="onSideBarEntry()" class="child" href="#button-group">Button Groups</a>
-      <a @click="onSideBarEntry()" href="#tooltip">Tooltip</a>
-      <a @click="onSideBarEntry()" href="#menu">Menu</a>
-      <a @click="onSideBarEntry()" href="#icon">Icon</a>
-      <a @click="onSideBarEntry()" href="#spinner">Spinner</a>
-      <a @click="onSideBarEntry()" href="#form">Form</a>
-      <a @click="onSideBarEntry()" class="child" href="#form-textinput">Text Input</a>
-      <a @click="onSideBarEntry()" class="child" href="#form-passwordinput">Password Input</a>
-      <a @click="onSideBarEntry()" class="child" href="#form-emailinput">Email Input</a>
-      <a @click="onSideBarEntry()" class="child" href="#form-numberinput">Number Input</a>
-      <a @click="onSideBarEntry()" class="child" href="#form-taginput">Tag Input</a>
-      <a @click="onSideBarEntry()" class="child" href="#form-checkbox">Checkbox</a>
-      <a @click="onSideBarEntry()" class="child" href="#form-radiobutton">Radiobutton</a>
-      <a @click="onSideBarEntry()" class="child" href="#form-switch">Switch</a>
-      <a @click="onSideBarEntry()" class="child" href="#form-group">Form Group</a>
-      <a @click="onSideBarEntry()" class="child" href="#input-group">Input Group</a>
-      <a @click="onSideBarEntry()" href="#dialog">Dialog</a>
-      <a @click="onSideBarEntry()" href="#popover">Popover</a>
-      <a @click="onSideBarEntry()" href="#breadcrumb">Breadcrumb</a>
-      <a @click="onSideBarEntry()" href="#singleselect">Singleselect</a>
-      <a @click="onSideBarEntry()" href="#multiselect">Multiselect</a>
-      <a @click="onSideBarEntry()" href="#progressbar">Progressbar</a>
-      <a @click="onSideBarEntry()" href="#offlinebanner">Offline Banner</a>
-      <a @click="onSideBarEntry()" href="#notification">Notification</a>
-      <a @click="onSideBarEntry()" href="#tabview">Tab View</a>
-      <a @click="onSideBarEntry()" href="#tableview">Table View</a>
-      <a @click="onSideBarEntry()" href="#directoryview">Directory View</a>
-    </SideBar>
-    <MainLayout>
-      <template #dialogs>
-        <Dialog ref="myDialog" title="My Dialog" :show-x="true" rejectLabel="Done">
-          This is a dialog.
-          <Button @click="largeDialog = !largeDialog">Large/auto</Button>
-          <div :style="{ width: largeDialog ? '720px' : 'auto', height: largeDialog ? '400px' : 'auto' }"></div>
-        </Dialog>
-
-        <InputDialog ref="myInputDialog" />
-      </template>
-      <template #header>
-        <div style="text-align: center;">Header</div>
-      </template>
-      <template #body>
-        <div style="padding-left: 20px; padding-right: 20px;">
-          <h1>Pankow the Cloudron UI Toolkit</h1>
-          <p>
-            The <a href="https://vuejs.org">Vue.js</a> app needs to have <code>id="app"</code>
-          </p>
-
-          <div>
-            <h3>Z-index layers (wip)</h3>
-            <ul>
-              <li>Dialog 2000</li>
-              <li>SideBar 2000</li>
-              <li>Menu 3000</li>
-              <li>Tooltip 6000</li>
-              <li>OfflineBanner 30000</li>
-              <li>Notification 30001</li>
-            </ul>
-          </div>
-
-          <div>
-            <h2>utils pretty functions:</h2>
-            <input type="datetime-local" v-model="dateTime"/>
-            <p>prettyDate(): {{ prettyDate(dateTime) }}</p>
-            <p>prettyLongDate(): {{ prettyLongDate(dateTime) }}</p>
-          </div>
-
-          <h2 id="button">Button</h2>
-          <div style="display: flex; gap: 10px; flex-wrap: wrap;">
-            <Button>Regular</Button>
-            <Button danger>Danger</Button>
-            <Button secondary>Secondary</Button>
-            <Button success>Success</Button>
-          </div>
-          <br/>
-          <div style="display: flex; gap: 10px; flex-wrap: wrap;">
-            <Button danger :disabled="true">Disabled</Button>
-            <Button :success="buttonTypeToggle || null" @click="buttonTypeToggle = !buttonTypeToggle">Button type toggle</Button>
-            <Button href="https://cloudron.io">Link</Button>
-            <Button href="https://cloudron.io" disabled>Disabled link</Button>
-            <Button href="https://cloudron.io" target="_blank">Link with target</Button>
-          </div>
-
-          <h3 id="button-outline">Outline</h3>
-          <div style="display: flex; gap: 10px">
-            <Button outline >Regular</Button>
-            <Button outline danger>Danger</Button>
-            <Button outline secondary>Secondary</Button>
-            <Button outline secondary :disabled="true">Secondary</Button>
-            <Button outline success>Success</Button>
-          </div>
-
-          <h3 id="button-small">Small</h3>
-          <div style="display: flex; gap: 10px">
-            <Button small>Small</Button>
-            <Button small outline success>Small success outline</Button>
-          </div>
-
-          <h3 id="button-plain">Plain</h3>
-          <div style="display: flex; gap: 10px">
-            <Button plain >Regular</Button>
-            <Button plain danger>Danger</Button>
-            <Button plain secondary>Secondary</Button>
-            <Button plain success :disabled="true">Success</Button>
-          </div>
-
-          <h3 id="button-tool">Toolbuttons</h3>
-          <div style="display: flex; gap: 10px">
-            <Button tool icon="fa-solid fa-scissors"></Button>
-            <Button tool secondary>YaY</Button>
-            <Button tool outline danger :disabled="true" icon="fa-solid fa-paste"></Button>
-          </div>
-          <p>Toolbuttons do not have a min-width set</p>
-
-          <h3 id="button-group">Button Groups</h3>
-          <div style="display: flex; gap: 10px">
-            <ButtonGroup>
-              <Button>Regular</Button>
-              <Button danger icon="fa-solid fa-scissors">Danger</Button>
-              <Button tool secondary>YaY</Button>
-              <Button success href="https://cloudron.is">Success</Button>
-            </ButtonGroup>
-
-            <ButtonGroup>
-              <Button outline>Regular</Button>
-              <Button outline danger icon="fa-solid fa-scissors">Danger</Button>
-              <Button outline tool secondary>YaY</Button>
-              <Button outline secondary>Success</Button>
-            </ButtonGroup>
-          </div>
-
-          <h2 id="tooltip">Tooltip</h2>
-          <div style="display: flex; gap: 10px">
-            <Button v-tooltip.left="'Tooooooooltips'">left</Button>
-            <Button v-tooltip.top="'Tooooooooltips'">top</Button>
-            <Button v-tooltip.bottom="'Tooooooooltips'">bottom</Button>
-            <Button v-tooltip.right="'Tooooooooltips'">right</Button>
-          </div>
-
-          <h2 id="menu">Menu</h2>
-          <div style="display: flex; gap: 10px">
-            <Menu ref="menu1" :model="menuModelItems"></Menu>
-            <div @contextmenu="onOpenMenu($refs.menu1, $event)">Rightclick here</div>
-            <br/>
-            <Button :menu="menuModelItemsSingle">Single Menu Button</Button>
-            <Button :menu="menuModelItemsWithIcons">Menu Button</Button>
-            <Button :menu="menuModelWithDOMElements">Mixed content Menu</Button>
-          </div>
-
-          <h2 id="icon">Icon</h2>
-          <div style="display: flex; justify-content: space-around; width: 300px;">
-            <Icon icon="fa-solid fa-user" />
-            <Icon icon="fa-regular fa-folder" />
-            <Icon icon="fa-solid fa-tree" />
-            <Icon icon="fa-regular fa-file" />
-          </div>
-          <br/>
-          <Button success icon="fa-solid fa-user-plus">success</Button>
-
-          <h2 id="spinner">Spinner</h2>
-          <div>
-            <Spinner class="pankow-spinner-large"/>
-            <Spinner/>
-            <br/>
-            <br/>
-            <ButtonGroup>
-              <Button :loading="true">Regular</Button>
-              <Button plain :loading="true">Plain</Button>
-              <Button tool secondary :loading="false">Foo</Button>
-              <Button tool secondary :loading="true"/>
-            </ButtonGroup>
-          </div>
-
-          <h2 id="form">Form</h2>
-          <h3 id="form-textinput">Text Input</h3>
-          <FormGroup>
-            <label for="textInput">Label: |{{ textInputValue }}| (input gets trimmed)</label>
-            <TextInput id="textInput" v-model="textInputValue" placeholder="Some text input" style="width: 600px"/>
-          </FormGroup>
-          <FormGroup>
-            <label for="textInputError">Label: {{ textInputErrorValue }}</label>
-            <TextInput id="textInputError" v-model="textInputErrorValue" placeholder="Some error text input" class="has-error" style="width: 600px"/>
-          </FormGroup>
-          <FormGroup>
-            <label for="textDisabledInput">Disabled:</label>
-            <TextInput id="textDisabledInput" :disabled="true" v-model="textInputDisabledValue" style="width: 600px"/>
-          </FormGroup>
-
-          <h3 id="form-passwordinput">Password Input</h3>
-          <FormGroup>
-            <label for="passwordInput">Label: {{ passwordInputValue }}</label>
-            <PasswordInput id="passwordInput" v-model="passwordInputValue" placeholder="My password" style="width: 600px"/>
-          </FormGroup>
-          <FormGroup>
-            <label for="passwordDisabledInput">Disabled:</label>
-            <PasswordInput id="passwordDisabledInput" v-model="passwordInputDisabledValue" :disabled="true" style="width: 600px"/>
-          </FormGroup>
-
-          <h3 id="form-emailinput">Email Input</h3>
-          <FormGroup>
-            <label for="emailInput">Address: {{ emailInputValue }}</label>
-            <EmailInput id="emailInput" v-model="emailInputValue" placeholder="some@email.foo" style="width: 600px"/>
-          </FormGroup>
-
-          <h3 id="form-numberinput">Number Input</h3>
-          <FormGroup>
-            <label for="numberInput">Step 2 for min -10 and max unset: {{ numberInputValue }}</label>
-            <NumberInput id="numberInput" v-model="numberInputValue" placeholder="some number" step="2" min="-10" style="width: 600px"/>
-          </FormGroup>
-          <FormGroup>
-            <label for="numberDisabledInput">Disabled:</label>
-            <NumberInput id="numberDisabledInput" v-model="numberInputDisabledValue" :disabled="true" style="width: 600px"/>
-          </FormGroup>
-
-          <h3 id="form-taginput">Tag Input</h3>
-          <FormGroup>
-            <label for="tagInput">Tags: {{ tagInputValue.join(', ') }}</label>
-            <TagInput id="tagInput" v-model="tagInputValue" placeholder="some tags" style="width: 600px"/>
-          </FormGroup>
-
-          <h3 id="form-checkbox">Checkbox</h3>
-          <div>
-            <Checkbox v-model="checkbox1Enabled" :label="checkbox1Enabled ? 'Enabled' : 'Disabled'" :disabled="true"/>
-            <Checkbox v-model="checkbox2Enabled" :label="checkbox2Enabled ? 'Enabled' : 'Disabled'"/>
-            <Checkbox v-model="checkbox2Enabled" label="Same as above"/>
-          </div>
-
-          <h3 id="form-radiobutton">Radiobutton</h3>
-          <div>
-            <p>Selected: <b>{{ radiobutton }}</b></p>
-            <Radiobutton v-model="radiobutton" value="one" name="radiobutton" label="Radiobutton 1"/>
-            <Radiobutton v-model="radiobutton" value="two" name="radiobutton" label="Radiobutton 2"/>
-            <Radiobutton v-model="radiobutton" value="three" name="radiobutton" label="Radiobutton 3" :disabled="true"/>
-          </div>
-
-          <h3 id="form-switch">Switch</h3>
-          <div>
-            <Switch v-model="switch2" label="disabled" :disabled="true"/>
-            <Switch v-model="switch1" label="Same as big" :disabled="false" @change="onSwitchChange"/>
-            <h1 style="margin-top: 10px;"><Switch v-model="switch1" :label="switch1 ? 'yes' : 'no'"/></h1>
-          </div>
-
-          <h3 id="form-group">Form Group</h3>
-          <div>
-            <FormGroup>
-              <label for="formGroupInput">Some Label</label>
-              <TextInput id="formGroupInput" />
-            </FormGroup>
-          </div>
-
-          <h3 id="input-group">Input Group</h3>
-          <div style="display: flex; gap: 10px">
-            <InputGroup>
-              <Button danger>Left</Button>
-              <TextInput />
-            </InputGroup>
-
-            <InputGroup>
-              <Button tool success icon="fa-solid fa-clipboard" />
-              <TextInput />
-              <Button tool icon="fa-solid fa-scissors" />
-            </InputGroup>
-
-            <InputGroup>
-              <TextInput />
-              <SingleSelect v-model="singleselectValue" :options="singleselectModel" optionLabel="display"/>
-            </InputGroup>
-          </div>
-
-          <h2 id="dialog">Dialog</h2>
-          <div style="display: flex; gap: 10px">
-            <Button @click="onButtonClick()">Open Dialog</Button>
-            <Button @click="onAskForConfirmation()">Confirm</Button>
-            <Button @click="onAskForString()">Prompt</Button>
-          </div>
-
-          <h2 id="popover">Popover</h2>
-          <div style="display: flex; gap: 10px">
-            <Popover ref="popover">
-              <div style="padding: 20px">
-                <div>This is some popover</div>
-                <br/>
-                <Button>no action here</Button>
-              </div>
-            </Popover>
-            <Button ref="popoverButton" @click="onPopover($refs.popover, $event, $refs.popoverButton.$el)">Open Popover</Button>
-          </div>
-
-          <h2 id="breadcrumb">Breadcrumb</h2>
-          <Breadcrumb :home="breadcrumbHomeItem" :items="breadcrumbItems"/>
-
-          <h2 id="singleselect">Singleselect</h2>
-          <div>
-            <p>disabled</p>
-            <SingleSelect v-model="singleselectValue" :options="singleselectModel" optionLabel="display" :disabled="true"/>
-            <p>value is the selected object</p>
-            <SingleSelect v-model="singleselectValue" :options="singleselectModel" optionLabel="display" :search-threshold="2"/> {{ singleselectValue }}
-            <p>With explicit :option-key, result is the key value not the object:</p>
-            <SingleSelect v-model="singleselectValueWithKey" :options="singleselectModel" optionLabel="display" optionKey="id" /> {{ singleselectValueWithKey }}
-            <p>No initial value</p>
-            <SingleSelect v-model="singleselectValueNoInit" :options="singleselectModel" optionLabel="display" optionKey="id" placeholder="Nothing yet selected"/> {{ singleselectValueNoInit }}
-          </div>
-
-          <h2 id="multiselect">Multiselect</h2>
-          <MultiSelect v-model="multiselectValue" :options="multiselectModel" optionLabel="display"/> {{ multiselectValue }}
-          <br/>
-          <p>Custom button template:</p>
-          <MultiSelect v-model="multiselectValueWithCustomLabel" :options="multiselectModel" :search-threshold="2" optionLabel="display" selected-label="Selected %n items"/> {{ multiselectValueWithCustomLabel }}
-          <br/>
-          <p>With option key:</p>
-          <MultiSelect v-model="multiselectValueWithOptionKey" :options="multiselectModel" option-key="id" optionLabel="display"/> {{ multiselectValueWithOptionKey }}
-          <br/>
-          <p>With option selectAll:</p>
-          <MultiSelect v-model="multiselectValueWithSelectAll" :options="multiselectModel" select-all-label="Select All" :search-threshold="2" option-key="id" optionLabel="display"/> {{ multiselectValueWithSelectAll }}
-
-          <h2 id="progressbar">Progress</h2>
-          <div style="width: 100%; max-width: 720px;">
-            <NumberInput v-model="progressValue"/>
-            <br/><br/>
-            <ProgressBar :value="progressValue" />
-            <br/>
-            <ProgressBar :value="progressValue" :busy="true" />
-            <br/>
-            <ProgressBar :value="progressValue">Custom label with {{ progressValue }}</ProgressBar>
-            <br/>
-            <ProgressBar mode="indeterminate" :show-label="false"/>
-            <br/>
-            <div style="display: flex; align-items: center;">
-              <ProgressBar :value="progressValue" style="flex-grow: 1;"></ProgressBar>
-              <Button danger small tool icon="fa-solid fa-xmark"></Button>
-            </div>
-          </div>
-
-          <h2 id="offlinebanner">Offline Banner</h2>
-          <OfflineBanner :active="offlineBannerActive"/>
-          <Button @click="offlineBannerActive = !offlineBannerActive">Toggle Offline Banner</Button>
-
-          <h2 id="notification">Notification</h2>
-          <p>
-            Place a single <code>Notification</code> DOM node in the top section of the app and use <code>window.pankow.notify('message')</code>
-          </p>
-
-          <div style="display: flex; gap: 10px">
-            <Button @click="onRaiseNotification('Informational Notification')">Raise</Button>
-            <Button @click="onRaiseNotification('Danger!!!', 'danger')">Raise Danger</Button>
-            <Button @click="onRaiseNotification('All good', 'success')">Raise Success</Button>
-            <Button @click="onRaiseNotification('Mildly important', 'secondary')">Raise Secondary</Button>
-            <Button @click="onRaisePersistentNotification('This is persistent')">Persitent</Button>
-          </div>
-
-          <p>Position:</p>
-          <div style="display: flex; gap: 10px">
-            <Button outline @click="notificationPosition = 'top-left'">top-left</Button>
-            <Button outline @click="notificationPosition = 'top-center'">top-center</Button>
-            <Button outline @click="notificationPosition = 'top-right'">top-right</Button>
-            <Button outline @click="notificationPosition = 'bottom-left'">bottom-left</Button>
-            <Button outline @click="notificationPosition = 'bottom-center'">bottom-center</Button>
-            <Button outline @click="notificationPosition = 'bottom-right'">bottom-right</Button>
-          </div>
-
-          <h2 id="tabview">Tab View</h2>
-          <h3>Top</h3>
-          <TabView ref="tabview" style="height: 150px; width: 100%; max-width: 800px;" :tabs="tabs" :default-active="Object.keys(tabs)[3]">
-            <template #tab0>Here some fruit</template>
-            <template #tab1>Two veggies <Button @click="onChangeTab('tab0')">Change back to fruit</Button></template>
-            <template #tab2>No meat today</template>
-            <template #tab3>A whole lot of beverages<img src="./logo.png" class="logo"/><span class="logo-text">ankow</span></template>
-          </TabView>
-
-          <h3>Left</h3>
-          <TabView ref="tabview" tab-position="left" style="height: 150px; width: 100%; max-width: 800px;" :tabs="tabs" :default-active="Object.keys(tabs)[3]">
-            <template #tab0>Here some fruit</template>
-            <template #tab1>Two veggies <Button @click="onChangeTab('tab0')">Change back to fruit</Button></template>
-            <template #tab2>No meat today</template>
-            <template #tab3>A whole lot of beverages<img src="./logo.png" class="logo"/><span class="logo-text">ankow</span></template>
-          </TabView>
-
-          <h2 id="tableview">Table View</h2>
-          <TableView style="max-height: 200px; width: 100%; max-width: 800px;" :columns="tableColumns" :model="tableModel">
-            <template #status="slotProps">{{ slotProps.status.index }} status template</template>
-            <template #action="slotProps"><Button :disabled="!(slotProps.status.index%2)">{{ slotProps.action }}</Button></template>
-          </TableView>
-
-          <DirectoryViewDemo id="directoryview"/>
-
-          <br/>
-          <br/>
-          <br/>
-          <br/>
-        </div>
-      </template>
-      <template #footer>
-        <div style="text-align: center;">Footer</div>
-      </template>
-    </MainLayout>
-  </div>
-
-</template>
-
-<style>
-
-#app {
-  height: 100%;
-  overflow: hidden;
-}
-
-h2 {
-  margin-top: 50px;
-}
-
-.main-content {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-.side-bar {
-  color: white;
-  background-color: var(--pankow-color-dark);
-  padding: 20px;
-  margin-right: 40px;
-}
-
-.side-bar a {
-  padding: 10px;
-  color: white !important;
-  border-left: 2px transparent solid;
-  font-size: 16px;
-}
-
-.side-bar a.child {
-  padding-left: 15px;
-  font-size: 12px;
-}
-
-.side-bar a:hover {
-  border-left: 2px white solid;
-}
-
-.logo {
-  width: 100px;
-}
-
-.logo-text {
-  margin-left: -50px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .main-content {
-    background-color: black;
-    color: var(--pankow-color-light-dark);
-  }
-}
-
-</style>