@cloudron/pankow 4.1.5 → 4.1.6

package/components/InputDialog.vue

@@ -16,10 +16,12 @@ const rejectLabel = ref('No');
 const rejectStyle = ref('');
 const isPrompt = ref(false);
 const isMultiValue = ref(false);
+const autoCloseOnConfirm = ref(true);
 const value = ref([]);
 const required = ref([]);
 const placeholder = ref('');
 const internalId = ref(uuidv4());
+const confirmBusy = ref(false);
 
 const dialog = useTemplateRef('dialog');
 
@@ -46,6 +48,8 @@ function reset() {
   rejectStyle.value = '';
   isPrompt.value = false;
   isMultiValue.value = false;
+  autoCloseOnConfirm.value = true;
+  confirmBusy.value = false;
 }
 
 function info(options) {
@@ -81,6 +85,8 @@ function confirm(options) {
   if (options.confirmStyle) confirmStyle.value = options.confirmStyle;
   if (options.rejectStyle) rejectStyle.value = options.rejectStyle;
 
+  autoCloseOnConfirm.value = !!options.autoCloseOnConfirm;
+
   dialog.value.open();
 
   return new Promise((resolve, reject) => {
@@ -117,28 +123,41 @@ function prompt(options) {
   });
 }
 
+function close() {
+  dialog.value.close();
+  confirmBusy.value = false;
+}
+
 function onConfirmed() {
   if (!isFormValid.value) return;
 
-  resolver(isPrompt.value ? (isMultiValue.value ? value.value : value.value[0]) : true);
-  dialog.value.close();
+  const result = isPrompt.value ? (isMultiValue.value ? value.value : value.value[0]) : true;
+
+  resolver(result);
+
+  if (!result || autoCloseOnConfirm.value) {
+    dialog.value.close();
+  } else {
+    confirmBusy.value = true;
+  }
 }
 
 function onRejected() {
+  close();
   resolver(isPrompt.value ? null : false);
-  dialog.value.close();
 }
 
 defineExpose({
   info,
   confirm,
   prompt,
+  close,
 });
 
 </script>
 
 <template>
-  <Dialog ref="dialog" :title="title" :confirm-active="isFormValid" :confirm-label="confirmLabel" :rejectLabel="rejectLabel" :rejectStyle="rejectStyle" :confirmStyle="confirmStyle" @confirm="onConfirmed()" @close="onRejected()" :z-index="2003">
+  <Dialog ref="dialog" :title="title" :confirm-active="isFormValid" :confirm-busy="confirmBusy" :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()"/>

package/components/SingleSelect.vue

@@ -10,6 +10,7 @@ const props = defineProps({
     type: String,
     default: 'Select'
   },
+  id: String,
   optionLabel: {
     type: String,
     default: 'label'
@@ -173,7 +174,7 @@ watchEffect(handleDefaultSelect);
 <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="onKeyDown($event)">
     <!-- native select for required and accessibility handling -->
-    <select v-model="selectedKey" ref="nativeSelect" :required="$attrs['required']" style="display: none">
+    <select v-model="selectedKey" :id="id" 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": "4.1.5",
+  "version": "4.1.6",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -33,8 +33,8 @@
     "@vitejs/plugin-vue": "^6.0.5",
     "highlight.js": "^11.11.1",
     "typescript": "^5.9.3",
-    "vite": "^8.0.0",
+    "vite": "^8.0.1",
     "vue": "^3.5.30",
-    "vue-router": "^5.0.3"
+    "vue-router": "^5.0.4"
   }
 }