@cloudron/pankow 3.2.0 → 3.2.2

package/components/Dialog.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, useTemplateRef } from 'vue';
+import { ref, useTemplateRef, nextTick } from 'vue';
 import Button from './Button.vue';
 import Icon from './Icon.vue';
 
@@ -15,10 +15,6 @@ const props = defineProps({
     type: Number,
     default: 2000
   },
-  modal: {
-    type: Boolean,
-    default: false
-  },
   showX: {
     type: Boolean,
     default: false
@@ -52,14 +48,13 @@ const visible = ref(false);
 const dialog = useTemplateRef('dialog');
 const dialogBody = useTemplateRef('dialogBody');
 
-function open() {
+async function open() {
   visible.value = true;
 
   // try to focus some form elements else just the dialog
-  setTimeout(() => {
-    const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([style*="display:none"]):not([style*="display: none"])') || dialog.value;
-    focusElement.focus();
-  }, 100);
+  await nextTick();
+  const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([style*="display:none"]):not([style*="display: none"])') || dialog.value;
+  focusElement.focus();
 }
 
 function close() {
@@ -71,7 +66,6 @@ function onConfirm() {
 }
 
 function onDismiss() {
-  if (props.modal) return;
   onReject();
 }
 
@@ -100,7 +94,7 @@ defineExpose({ open, close });
         <div class="pankow-dialog-backdrop" @click="onDismiss" v-show="visible" :style="{ 'z-index': zIndex }"></div>
       </Transition>
       <Transition name="pankow-bounce-center-top">
-        <div ref="dialog" class="pankow-dialog" :class="{ 'pankow-dialog-center': center }" @click.stop v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="{ 'z-index': zIndex+1 }">
+        <div ref="dialog" class="pankow-dialog"  v-bind="$attrs" :class="{ 'pankow-dialog-center': center }" @click.stop v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="{ 'z-index': zIndex+1 }">
           <div class="pankow-dialog-header" v-show="title">
             {{ title }}
             <Icon v-show="showX" icon="fa-solid fa-xmark" style="cursor: pointer;" @click="onReject"/>

package/components/InputDialog.vue

@@ -15,7 +15,6 @@ const confirmLabel = ref('Yes');
 const rejectLabel = ref('No');
 const rejectStyle = ref('');
 const isPrompt = ref(false);
-const isModal = ref(true);
 const isMultiValue = ref(false);
 const value = ref([]);
 const required = ref([]);
@@ -46,7 +45,6 @@ function reset() {
   rejectLabel.value = 'No';
   rejectStyle.value = '';
   isPrompt.value = false;
-  isModal.value = true;
   isMultiValue.value = false;
 }
 
@@ -62,9 +60,6 @@ function info(options) {
   if (options.confirmStyle) confirmStyle.value = options.confirmStyle;
   rejectLabel.value = '';
 
-  if ('modal' in options) isModal.value = options.modal;
-  else isModal.value = true;
-
   dialog.value.open();
 
   return new Promise((resolve, reject) => {
@@ -86,9 +81,6 @@ function confirm(options) {
   if (options.confirmStyle) confirmStyle.value = options.confirmStyle;
   if (options.rejectStyle) rejectStyle.value = options.rejectStyle;
 
-  if ('modal' in options) isModal.value = options.modal;
-  else isModal.value = true;
-
   dialog.value.open();
 
   return new Promise((resolve, reject) => {
@@ -115,9 +107,6 @@ function prompt(options) {
   if (options.confirmStyle) confirmStyle.value = options.confirmStyle;
   if (options.rejectStyle) rejectStyle.value = options.rejectStyle;
 
-  if ('modal' in options) isModal.value = options.modal;
-  else isModal.value = true;
-
   dialog.value.open();
 
   setTimeout(() => { document.getElementById(internalId.value+0).focus(); }, 100);
@@ -149,14 +138,14 @@ defineExpose({
 </script>
 
 <template>
-  <Dialog ref="dialog" :title="title" :modal="isModal" :confirm-active="isFormValid" :confirm-label="confirmLabel" :rejectLabel="rejectLabel" :rejectStyle="rejectStyle" :confirmStyle="confirmStyle" @confirm="onConfirmed()" @close="onRejected()" :z-index="2003">
-    <div v-show="!isPrompt" v-html="message"></div>
-    <div v-show="isPrompt" class="pankow-input-dialog-prompt" v-for="(msg, index) in message">
+  <Dialog ref="dialog" :title="title" :confirm-active="isFormValid" :confirm-label="confirmLabel" :rejectLabel="rejectLabel" :rejectStyle="rejectStyle" :confirmStyle="confirmStyle" @confirm="onConfirmed()" @close="onRejected()" :z-index="2003">
+    <div v-if="isPrompt" class="pankow-input-dialog-prompt" v-for="(msg, index) in message">
       <label :for="internalId+index" v-html="msg"></label>
       <PasswordInput :id="internalId+index" v-if="type[index] === 'password'" v-model="value[index]" :placeholder="placeholder[index]" @keydown.enter="onConfirmed()"/>
       <NumberInput :id="internalId+index" v-else-if="type[index] === 'number'" v-model="value[index]" :placeholder="placeholder[index]" @keydown.enter="onConfirmed()"/>
       <TextInput :id="internalId+index" v-else v-model="value[index]" :placeholder="placeholder[index]" @keydown.enter="onConfirmed()"/>
     </div>
+    <div v-else v-html="message"></div>
   </Dialog>
 </template>
 

package/components/Menu.vue

@@ -71,8 +71,9 @@ const props = defineProps({
 const openEventTimeStamp = ref(0);
 const forElement = ref(null);
 const isOpen = ref(false);
-const pageX = ref(0);
-const pageY = ref(0);
+let pageX = 0;
+let targetBottom = 0;
+let targetTop = 0;
 const offsetY = ref(0);
 const rollUp = ref(false);
 const searchString = ref('');
@@ -115,8 +116,9 @@ function onItemActivated(item) {
 
 async function open(event, element = null) {
   isOpen.value = true;
-  pageX.value = element ? element.getBoundingClientRect().left : event.pageX;
-  pageY.value = element ? element.getBoundingClientRect().bottom : event.pageY;
+  pageX = element ? element.getBoundingClientRect().left : event.pageX;
+  targetBottom = element ? element.getBoundingClientRect().bottom : event.pageY;
+  targetTop = element ? element.getBoundingClientRect().top : event.pageY;
   offsetY.value = element ? (element.getBoundingClientRect().height + 2) : 0; // offset in case we roll up
   forElement.value = element;
 
@@ -183,6 +185,9 @@ function onBackdrop(event) {
 
 function close() {
   isOpen.value = false;
+  container.value.style.maxHeight = 'unset';
+  container.value.style.bottom = 'unset';
+  container.value.style.top = 'unset';
   container.value = null;
   emit('close');
 }
@@ -192,12 +197,14 @@ function position() {
 
   const size = getHiddenElementSize(container.value);
 
-  let left = pageX.value + 1;
-  let top = pageY.value + 1;
+  let left = pageX;
+  let top = targetBottom + 1;
   let width = container.value.offsetParent ? container.value.offsetWidth : size.width;
   let height = container.value.offsetParent ? container.value.offsetHeight : size.height;
   let viewport = getViewport();
 
+  let bottom = viewport.height - targetTop + 1;
+
   //flip
   if (left + width - document.body.scrollLeft > viewport.width) {
     // if this is like a dropdown right align instead of flip
@@ -210,8 +217,11 @@ function position() {
 
   //flip
   if (top + height - document.body.scrollTop > viewport.height) {
-    top -= height + offsetY.value;
-    rollUp.value = true;
+    if (top - document.body.scrollTop > viewport.height/2) {
+      rollUp.value = true;
+    } else {
+      rollUp.value = false;
+    }
   } else {
     rollUp.value = false;
   }
@@ -221,13 +231,17 @@ function position() {
     left = document.body.scrollLeft;
   }
 
-  //fit
-  if (top < document.body.scrollTop) {
-    top = document.body.scrollTop;
-  }
-
   container.value.style.left = left + 'px';
-  container.value.style.top = top + 'px';
+  if (rollUp.value) {
+    container.value.style.top = 'unset';
+    container.value.style.bottom = bottom + 'px';
+    container.value.style.maxHeight = viewport.height - bottom + 'px';
+    container.value.style.height = 'auto';
+  } else {
+    container.value.style.top = top + 'px';
+    container.value.style.bottom = 'unset';
+    container.value.style.maxHeight = viewport.height - top + 'px';
+  }
 }
 
 defineExpose({
@@ -271,7 +285,7 @@ defineExpose({
   z-index: 3001;
   color: var(--pankow-color-dark);
   overflow: auto;
-  max-height: 100%;
+  /*max-height: 100%;*/
   outline: none;
 }
 

package/components/MenuItem.vue

@@ -54,7 +54,7 @@ function onActivated() {
   display: flex;
   align-items: center;
   user-select: none;
-  padding: 8px 12px;
+  padding: 6px 10px;
   cursor: pointer;
   font-size: 14px; /* this also defines the overall widget size as all sizes are in rem */
   font-family: var(--font-family);

package/gallery/Index.vue

@@ -1,3 +1,326 @@
+<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"/>
@@ -42,8 +365,8 @@
     </SideBar>
     <MainLayout>
       <template #dialogs>
-        <Dialog ref="myDialog" title="My Dialog" :modal="modalIsDialog" :show-x="showXInDialog" rejectLabel="Done">
-          This is a <b>{{ modalIsDialog ? 'modal' : 'normal' }}</b> dialog.
+        <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>
@@ -73,8 +396,10 @@
           </div>
 
           <div>
-            <h2>utils.prettyDate():</h2>
-            <p><input type="datetime-local" v-model="dateTime"/> {{ prettyDate(dateTime) }}</p>
+            <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>
@@ -281,8 +606,7 @@
 
           <h2 id="dialog">Dialog</h2>
           <div style="display: flex; gap: 10px">
-            <Button @click="onButtonClick(false)">Open Dialog</Button>
-            <Button @click="onButtonClick(true)">Open Modal Dialog</Button>
+            <Button @click="onButtonClick()">Open Dialog</Button>
             <Button @click="onAskForConfirmation()">Confirm</Button>
             <Button @click="onAskForString()">Prompt</Button>
           </div>
@@ -408,330 +732,6 @@
 
 </template>
 
-<script>
-
-'use strict';
-
-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 } from '../utils.js';
-
-import DirectoryViewDemo from './DirectoryViewDemo.vue';
-import CustomMenuItem from './CustomMenuItem.vue';
-
-export default {
-    name: 'WidgetGallery',
-    components: {
-      CustomMenuItem,
-      Spinner,
-      Button,
-      ButtonGroup,
-      Dialog,
-      DirectoryViewDemo,
-      EmailInput,
-      InputDialog,
-      MainLayout,
-      TextInput,
-      PasswordInput,
-      Icon,
-      Breadcrumb,
-      Checkbox,
-      Radiobutton,
-      OfflineBanner,
-      Popover,
-      ProgressBar,
-      SideBar,
-      Menu,
-      MultiSelect,
-      SingleSelect,
-      Notification,
-      NumberInput,
-      TabView,
-      TableView,
-      TagInput,
-      Switch,
-      FormGroup,
-      InputGroup,
-    },
-    data() {
-      return {
-        dateTime: '2024-05-01T01:13',
-        buttonTypeToggle: false,
-        largeDialog: false,
-        modalIsDialog: false,
-        showXInDialog: false,
-        checkbox1Enabled: true,
-        checkbox2Enabled: false,
-        switch1: true,
-        switch2: false,
-        offlineBannerActive: false,
-        textInputValue: '',
-        textInputErrorValue: '',
-        textInputDisabledValue: 'do not edit',
-        passwordInputValue: '',
-        passwordInputDisabledValue: 'something',
-        emailInputValue: '',
-        numberInputValue: 0,
-        numberInputDisabledValue: 1337,
-        tagInputValue: [ 'pecan', 'walnut' ],
-        radiobutton: 'one',
-        progressValue: 44,
-        breadcrumbHomeItem: {
-          label: 'Home',
-          icon: 'fa-solid fa-house',
-          route: '#'
-        },
-        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'); }
-        }],
-        singleselectModel: [{
-          display: 'Pizza',
-          id: 'pizza'
-        }, {
-          display: 'Pasta',
-          id: 'pasta'
-        }, {
-          display: 'Pizza',
-          id: 'pizza2'
-        }, {
-          display: 'Falafel',
-          id: 'falafel'
-        }, {
-          display: 'Menemen',
-          id: 'menemen'
-        }],
-        singleselectValue: {
-          display: 'Pasta',
-          id: 'pasta'
-        },
-        singleselectValueWithKey: 'falafel',
-        singleselectValueNoInit: '',
-        multiselectModel: [{
-          display: 'Pizza',
-          id: 'pizza'
-        }, {
-          display: 'Pasta',
-          id: 'pasta'
-        }, {
-          separator: true,
-        }, {
-          display: 'Pizza',
-          id: 'pizza2'
-        }, {
-          display: 'Falafel',
-          id: 'falafel'
-        }, {
-          display: 'Menemen',
-          id: 'menemen'
-        }],
-        multiselectValue: [],
-        multiselectValueWithCustomLabel: [],
-        multiselectValueWithOptionKey: [ 'falafel' ],
-        multiselectValueWithSelectAll: [],
-        menuModelItemsSingle: [{
-          label: 'Single Item',
-          action: () => { console.log('Single Menu Item'); }
-        }],
-        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'); }
-        }],
-        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'); }
-        }],
-        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',
-        }],
-        notificationPosition: 'top-center',
-        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
-          }
-        },
-        tableModel: [],
-        tabs: {
-          tab0: 'Fruit',
-          tab1: 'Veggies',
-          tab2: 'Meat',
-          tab3: 'Drinks',
-        }
-      };
-    },
-    methods: {
-      prettyDate,
-      onButtonClick(modal) {
-        this.modalIsDialog = modal;
-        this.showXInDialog = !modal;
-        this.$refs.myDialog.open();
-        console.log('Button clicked');
-      },
-      onPopover(popover, event, elem = null) {
-        popover.open(event, elem);
-      },
-      async onAskForConfirmation() {
-        console.log('User answered with:', await this.$refs.myInputDialog.confirm({
-          message: 'Really delete this or that?',
-          confirmStyle: 'danger',
-          confirmLabel: 'yeah sure',
-          rejectLabel: 'hm no'
-        }) ? 'ok' : 'nay');
-      },
-      async onAskForString() {
-        console.log('User answered with:', await this.$refs.myInputDialog.prompt({
-          message: 'New Filename',
-          modal: false,
-          value: 'newfile.txt',
-          confirmStyle: 'success',
-          confirmLabel: 'Save',
-          rejectLabel: 'Close'
-        }));
-      },
-      onOpenMenu(menu, event, elem = null) {
-        menu.open(event, elem);
-      },
-      onSideBarEntry() {
-        this.$refs.sideBar.close();
-      },
-      onRaiseNotification(text, type) {
-        if (type) window.pankow.notify({ text, type });
-        else window.pankow.notify(text);
-      },
-      onRaisePersistentNotification(text) {
-        window.pankow.notify({
-          text,
-          persistent: true
-        });
-      },
-      onChangeTab(tab) {
-        this.$refs.tabview.open(tab);
-      },
-      onSwitchChange(value) {
-        console.log('switch changed to', value);
-      },
-    },
-    async mounted() {
-      console.log('Pankow widget gallery');
-
-      for (let i = 0; i < 100; ++i) {
-        this.tableModel.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(() => {
-        this.radiobutton = 'two';
-        this.singleselectValueWithKey = 'pizza';
-      }, 2000 );
-    }
-};
-
-</script>
-
 <style>
 
 #app {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.2.0",
+  "version": "3.2.2",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -14,13 +14,12 @@
   "dependencies": {
     "@fontsource/inter": "^5.2.6",
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "filesize": "^10.1.6",
-    "moment": "^2.30.1",
+    "filesize": "^11.0.1",
     "monaco-editor": "^0.52.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
-    "vite": "^7.0.3",
+    "vite": "^7.0.4",
     "vue": "^3.5.17"
   }
 }

package/utils.js

@@ -1,7 +1,6 @@
 
 import { filesize } from 'filesize';
 import { customRef } from 'vue';
-import moment from 'moment';
 
 // https://vuejs.org/api/reactivity-advanced.html#customref
 function useDebouncedRef(value, delay = 300) {
@@ -69,17 +68,55 @@ function prettyDecimalSize(size, fallback) {
     return (size / Math.pow(1000, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
 }
 
+function fromNow(date) {
+  const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+
+  const now = new Date();
+  const diff = date - now;
+
+  const seconds = Math.round(diff / 1000);
+  const minutes = Math.round(diff / (1000 * 60));
+  const hours = Math.round(diff / (1000 * 60 * 60));
+  const days = Math.round(diff / (1000 * 60 * 60 * 24));
+  const weeks = Math.round(diff / (1000 * 60 * 60 * 24 * 7));
+  const months = Math.round(diff / (1000 * 60 * 60 * 24 * 30));
+  const years = Math.round(diff / (1000 * 60 * 60 * 24 * 365));
+
+  // Pick the best unit based on the magnitude
+  if (Math.abs(seconds) < 60) return rtf.format(seconds, 'second');
+  if (Math.abs(minutes) < 60) return rtf.format(minutes, 'minute');
+  if (Math.abs(hours) < 24) return rtf.format(hours, 'hour');
+  if (Math.abs(days) < 7) return rtf.format(days, 'day');
+  if (Math.abs(weeks) < 4) return rtf.format(weeks, 'week');
+  if (Math.abs(months) < 12) return rtf.format(months, 'month');
+
+  return rtf.format(years, 'year');
+}
+
 // this will print a human friendly datetime offset from now
 function prettyDate(value) {
     if (!value) return 'never';
-    return moment(value).fromNow();
+
+    const date = new Date(value);
+    if (isNaN(date.getTime()))  return 'unkown';
+
+    return fromNow(date);
 }
 
 function prettyLongDate(value) {
     if (!value) return 'unknown';
 
     const date = new Date(value);
-    return date.toLocaleString();
+    if (isNaN(date.getTime()))  return 'unknown';
+
+    const formatter = new Intl.DateTimeFormat(undefined, {
+      dateStyle: 'long',
+      timeStyle: 'medium'
+    });
+
+    const formattedDate = formatter.format(date);
+
+    return formattedDate;
 }
 
 function prettyFileSize(value) {