@cloudron/pankow 3.5.3 → 3.5.5

package/components/Radiobutton.vue

@@ -1,6 +1,6 @@
 <template>
   <span class="pankow-radio">
-    <input :name="name" :id="id || internalId" class="pankow-radio-input" type="radio" v-model="internalValue" :value="value" :disabled="disabled"/>
+    <input :name="name" :id="id || internalId" class="pankow-radio-input" type="radio" v-model="internalValue" :value="value" :disabled="disabled" :required="$attrs['required']"/>
     <slot>
       <label :for="id || internalId" class="pankow-radio-input-label">{{ label }}</label>
     </slot>

package/components/SingleSelect.vue

@@ -74,6 +74,7 @@ const menuModel = computed(() => {
   });
 });
 
+const nativeSelect = useTemplateRef('nativeSelect');
 function selectIndex(index) {
   const item = props.options[index];
 
@@ -84,6 +85,11 @@ function selectIndex(index) {
 
   model.value = newValue;
   emits('select', newValue);
+
+  // let the browser know about the changes
+  nativeSelect.value.value = newValue;
+  nativeSelect.value.dispatchEvent(new Event('input', { bubbles: true }));
+  nativeSelect.value.dispatchEvent(new Event('change', { bubbles: true }));
 }
 
 function onMenuClosed() {
@@ -163,7 +169,7 @@ onMounted(() => {
 <template>
   <div class="pankow-singleselect" :class="{ 'pankow-singleselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop.prevent="onSelectNext" @keydown.up.stop.prevent="onSelectPrev" @keydown.esc.stop="onClose" @keydown.stop="onKeyDown($event)">
     <!-- native select for required and accessibility handling -->
-    <select v-model="selectedKey" :required="$attrs['required']" style="display: none">
+    <select v-model="selectedKey" ref="nativeSelect" :required="$attrs['required']" style="display: none">
       <option value=""></option>
       <option v-for="item in options" :value="optionKey ? item[optionKey] : item">{{ item[optionLabel] }}</option>
     </select>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.5.3",
+  "version": "3.5.5",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",

package/types/utils.d.ts

@@ -12,6 +12,7 @@ declare namespace _default {
     export { prettyLongDate };
     export { prettyFileSize };
     export { prettyEmailAddresses };
+    export { prettyDuration };
     export { sanitize };
     export { pathJoin };
     export { download };
@@ -39,6 +40,7 @@ export function formatDate(format: any, value: any): any;
 export function prettyLongDate(value: any): string;
 export function prettyFileSize(value: any): string;
 export function prettyEmailAddresses(addresses: any): any;
+export function prettyDuration(ms: any): any;
 export function sanitize(path: any): any;
 export function pathJoin(...args: any[]): any;
 export function download(entries: any, name: any): void;

package/utils.js

@@ -183,6 +183,17 @@ function prettyEmailAddresses(addresses) {
     return addresses.slice(1, -1);
 }
 
+function prettyDuration(ms) {
+  const totalSeconds = Math.floor(ms / 1000);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const df = new Intl.DurationFormat(undefined, { style: 'narrow' });
+  return df.format({ days, hours, minutes, seconds });
+}
+
 function sanitize(path) {
     path = '/' + path;
     return path.replace(/\/+/g, '/');
@@ -432,6 +443,7 @@ export {
     prettyLongDate,
     prettyFileSize,
     prettyEmailAddresses,
+    prettyDuration,
     sanitize,
     pathJoin,
     download,
@@ -460,6 +472,7 @@ export default {
     prettyLongDate,
     prettyFileSize,
     prettyEmailAddresses,
+    prettyDuration,
     sanitize,
     pathJoin,
     download,