glib-web 3.12.2 → 3.14.0

package/action.js

@@ -63,6 +63,10 @@ import ActionPopoversClose from "./actions/popovers/close";
 import ActionComponentsUpdate from "./actions/components/update";
 import ActionComponentsFind from "./actions/components/find";
 
+import ActionLabelsSet from "./actions/labels/set";
+
+import ActionListsAppend from "./actions/lists/append";
+
 import { vueApp } from "./store";
 
 const actions = {
@@ -126,7 +130,10 @@ const actions = {
   "popovers/close": ActionPopoversClose,
 
   "components/update": ActionComponentsUpdate,
-  "components/find": ActionComponentsFind
+  "components/find": ActionComponentsFind,
+
+  "labels/set": ActionLabelsSet,
+  "lists/append": ActionListsAppend
 };
 
 const customActions = {};
@@ -182,17 +189,18 @@ export default class Action {
     }
   }
 
-  static handleResponse(response, component) {
+  static handleResponse(response, component, windowMode = true) {
+    // The execution goes in the following order: onResponse, page render, onLoad
     vueApp.temp.analytics = response.analytics;
     GLib.action.execute(response.onResponse, component);
     vueApp.temp.analytics = null;
 
-    // TODO: The execution should be in the following order: onResponse, page render, onLoad
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {
-        const dialog = component.$closest("dialog");
-        if (dialog) {
-          dialog.updateContent(response)
+        const dialog = component.$closest("dialog")
+        const updateDialog = windowMode ? false : Utils.type.isObject(dialog)
+        if (updateDialog) {
+          dialog.updateContent(response);
         } else {
           vueApp.page = response;
         }

package/actions/cables/push.js

@@ -1,31 +1,16 @@
-import { vueApp } from "../../store";
+import { channels } from "../../components/composable/socket";
+
 
 export default class {
   execute(properties, component) {
-    Utils.type.ifString(properties.channel, channelName => {
-      const ws = vueApp.actionCable;
-      const channel = ws.channels[channelName];
-
-      // TODO: Use logDisabled() that reads params from server to decide whether we want to print the log or not.
-      // This is because `push` action's logs are a bit sensitive.
-      console.debug("Pushing to", channel);
+    const { event, payload, channel } = properties;
+    const ch = channels[channel];
 
-      Utils.type.ifString(properties.event, eventName => {
-        if (channel) {
-          const payload = Object.assign({}, properties.payload, {
-            formData: properties.formData
-          });
-          console.debug(`Pushing to '${channelName}/${eventName}'`, payload);
+    if (!event || !channel) {
+      console.error('No event name or channel');
+      return;
+    }
 
-          channel.perform(eventName, payload);
-        } else {
-          console.error(`Channel not joined: '${channelName}'`);
-          Utils.launch.snackbar.error(
-            "Something went wrong and we have been notified",
-            component
-          );
-        }
-      });
-    });
+    ch.perform(event, payload);
   }
 }

package/actions/dialogs/show.js

@@ -1,5 +1,13 @@
 export default class {
   execute(spec, component) {
+    let dialog = null
+    if (spec.updateExisting) {
+      dialog = component.$closest("dialog")
+      if (dialog) {
+        dialog.updateContent(spec)
+        return
+      }
+    }
     Utils.launch.dialog.open(spec, component);
   }
 }

package/actions/labels/set.js

@@ -0,0 +1,16 @@
+import Action from "../../action";
+
+export default class {
+  execute(properties, component) {
+    let targetComponent = component;
+    if (properties.targetId) {
+      targetComponent = GLib.component.findById(properties.targetId);
+    }
+
+    targetComponent.text = properties.text;
+
+    if (properties.onSet) {
+      Action.execute(properties.onSet, targetComponent);
+    }
+  }
+}

package/actions/lists/append.js

@@ -0,0 +1,15 @@
+export default class {
+  execute(properties, component) {
+    let targetComponent = component;
+    if (properties.targetId) {
+      targetComponent = GLib.component.findById(properties.targetId);
+    }
+
+    if (!targetComponent.sections || !targetComponent.sections[0].rows) {
+      console.warn('there is no sections or rows');
+      return null;
+    }
+
+    targetComponent.sections[0].rows.push(properties.row);
+  }
+}

package/actions/windows/open.js

@@ -8,6 +8,6 @@ export default class {
       return;
     }
 
-    Utils.http.load(properties, component);
+    Utils.http.load(properties, component, true);
   }
 }

package/app.vue

@@ -34,10 +34,14 @@ import Utils from "./utils/helper";
 import FormPanel from "./components/panels/form.vue";
 import { vueApp } from "./store";
 import { useDirtyState } from "./components/composable/dirtyState";
+import { useSocket } from "./components/composable/socket";
 
 const { watchDirtyState } = useDirtyState();
 
 export default {
+  setup() {
+    return { vueApp };
+  },
   components: {
     "nav-appbar": NavAppBar,
     "panels-form": FormPanel,
@@ -50,7 +54,7 @@ export default {
     return {
       title: "...",
       mainHeight: 0,
-      vueApp,
+      actionCableCustomer: null,
     };
   },
   computed: {
@@ -84,10 +88,24 @@ export default {
     "vueApp.indicator": function (val, oldVal) {
       document.title = val ? "..." : this.page.title;
     },
+    "vueApp.page": {
+      handler(val, oldVal) {
+        if (!val) {
+          return;
+        }
+
+        const { actionCable } = val;
+        if (actionCable) {
+          const { customer } = useSocket(actionCable, this.actionCableCustomer);
+          this.actionCableCustomer = customer;
+        }
+      },
+      immediate: true
+    }
   },
   created() {
     console.debug(
-      `Version123: ${Utils.settings.appVersion} (${Utils.settings.env})`
+      `Version: ${Utils.settings.appVersion} (${Utils.settings.env})`
     );
     Utils.history.saveInitialContent(this.page);
     Utils.history.restoreOnBackOrForward();

package/components/component.vue

@@ -71,6 +71,7 @@ import TextAreaField from "./fields/textarea.vue";
 const RichTextField = defineAsyncComponent(() => import("./fields/richText.vue"));
 // import NewRichTextField from "./fields/newRichText.vue";
 const FileField = defineAsyncComponent(() => import("./fields/file.vue"));
+const MultipleUploadField = defineAsyncComponent(() => import("./fields/multipleUpload.vue"));
 import AutocompleteField from "./fields/autocomplete.vue";
 import SelectField from "./fields/select.vue";
 import TimeZoneField from "./fields/timeZone.vue";
@@ -163,6 +164,7 @@ export default {
     "fields-richText": RichTextField,
     // "fields-newRichText": NewRichTextField,
     "fields-file": FileField,
+    "fields-multipleUpload": MultipleUploadField,
     "fields-autocomplete": AutocompleteField,
     "fields-select": SelectField,
     "fields-timeZone": TimeZoneField,

package/components/composable/socket.js

@@ -0,0 +1,97 @@
+import { createConsumer } from '@rails/actioncable';
+import { reactive } from "vue";
+import Action from "../../action";
+
+// Handler implementation
+class SocketHandler {
+  constructor(options) {
+    this.targetId = options.targetId;
+  }
+
+  initialized() {
+    console.log(`${this.targetId} initialized`);
+  }
+
+  rejected() {
+    console.error(`${this.targetId} rejected`);
+  }
+
+  received(data) {
+    Action.execute(data, this.component);
+  }
+
+  connected() {
+    console.log(`${this.targetId} connected`);
+  }
+
+  disconnected() {
+    console.log(`${this.targetId} disconnected`);
+  }
+
+  get component() {
+    if (this.targetId) {
+      return GLib.component.findById(this.targetId);
+    }
+  }
+}
+class ExampleSocketHandler extends SocketHandler {
+  received(data) {
+    this.component.text = data.text;
+  }
+}
+
+// you can implement your own handler or just use the default one
+const socketHandlers = reactive({
+  ExampleSocketHandler
+});
+
+const channels = reactive({});
+
+// API
+const useSocket = (config, defaultConsumer = null) => {
+  const consumer = defaultConsumer || createConsumer();
+
+  consumer.connection.events.error = function () {
+    console.error('Websocket error');
+    if (!config.onError) return;
+    Action.execute(config.onError, {});
+  };
+
+  config.channels.forEach(ch => {
+    if (!channels[ch.name]) {
+      let handler = null;
+
+      if (ch.handler && socketHandlers[ch.handler]) {
+        handler = new socketHandlers[ch.handler](ch.options);
+      } else {
+        handler = new SocketHandler(ch.options);
+      }
+
+      const channel = consumer.subscriptions.create(
+        { channel: ch.name, ...ch.options },
+        {
+          received(data) {
+            handler.received(data);
+          },
+          initialized() {
+            handler.initialized();
+          },
+          connected() {
+            handler.connected();
+          },
+          rejected() {
+            handler.rejected();
+          },
+          disconnected({ willAttemptReconnect: boolean }) {
+            handler.disconnected();
+          }
+        }
+      );
+      channels[ch.name] = channel;
+    }
+  });
+
+  return { consumer };
+};
+
+export { useSocket, channels };

package/components/fields/_select.vue

@@ -7,7 +7,6 @@
       @update:modelValue="onChange">
 
       <template #item="{props, item}">
-        <span :debug="console.log('DATA1', props, item)"></span>
         <v-list-subheader v-if="item.raw.header">
           {{ item.raw.header }}
         </v-list-subheader>

package/components/fields/multipleUpload.vue

@@ -0,0 +1,393 @@
+<template>
+  <div :style="$styles()" :class="$classes()">
+    <div ref="container" @click="handleClick" @drop="handleDrop" @dragover="handleDragOver" @dragleave="handleDragLeave"
+      class="gdrop-file border-[2px]">
+      <input ref="fileSelect" type="file" multiple style="display: none">
+
+      <div class="cloud" style="pointer-events: none;">
+        <v-icon ref="icon" size="48" class="icon">cloud_upload</v-icon>
+        <h4 class="title">{{ spec.title }}</h4>
+        <p class="subtitle">{{ spec.subtitle }}</p>
+      </div>
+
+      <input v-for="(file, index) in Object.values(files)" type="hidden" :name="spec.name" :value="file.signedId"
+        :disabled="inputDisabled" :key="`hidden-${index}`">
+    </div>
+
+    <div class="guploaded-file" v-if="showUploadedFile">
+      <p class="title" v-if="uploadTitle">{{ uploadTitle }} </p>
+
+      <template v-for="(file, index) in Object.entries(files)" :key="`added-${index}`">
+        <div :class="`file-container ${file[1].status == 'failed' ? 'opacity-50' : ''}`">
+          <div class="file">
+            <div @click.stop="handleRemoveFile(file[0])" class="close-btn">
+              <v-icon size="12" color="white">close</v-icon>
+            </div>
+            <div class="status">
+              <v-icon class="icon">{{ file[1].isImage() ? 'photo_library' : 'description' }}</v-icon>
+              <div class="progress">
+                <label class="label">{{ `${file[1].name} ${file[1].status === 'failed' ? uploadFailedText : ''}`
+                }}</label>
+                <div class="background" v-show="file[1].progress.value > 0">
+                  <div class="value" :style="{ width: `${file[1].progress.value}%` }"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+  </div>
+</template>
+
+<style>
+.border-\[2px\] {
+  border-width: 2px;
+}
+
+.border-\[4px\] {
+  border-width: 4px;
+}
+
+.\!font-semibold {
+  font-weight: 600px;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.guploaded-file {
+  /* pt-6 w-full */
+  padding-top: 24px;
+  width: 100%;
+
+  .title {
+    color: #6b7280;
+    font-weight: 600 !important;
+    margin-bottom: 8px;
+  }
+
+  .file-container {
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    background-color: #f3f4f6;
+    width: 100%;
+    padding: 16px;
+    margin-bottom: 16px;
+    min-height: 72px;
+  }
+
+  .file {
+    display: flex;
+    width: 100%;
+    position: relative;
+
+    .status {
+      display: flex;
+      width: 100%;
+      align-items: center;
+
+      .icon {
+        margin-right: 8px;
+      }
+
+      .progress {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .label {
+          /* mb-1 */
+          margin-bottom: 4px;
+        }
+
+        .background {
+          width: 100%;
+          background-color: #e5e7eb;
+          border-radius: 9999px;
+          height: 6px;
+
+          .value {
+            background-color: #4b5563;
+            height: inherit;
+            border-radius: inherit;
+          }
+        }
+      }
+    }
+
+    .close-btn {
+      border-radius: 9999px;
+      background-color: #6b7280;
+      position: absolute;
+      top: -24px;
+      right: -24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 2px;
+      cursor: pointer;
+    }
+  }
+}
+
+.gdrop-file {
+  /* px-6 py-10 border-[2px] border-dashed border-gray-400 w-full rounded-2xl cursor-pointer */
+  padding: 40px 24px;
+  border-style: dashed;
+  border-color: #9ca3af;
+  width: 100%;
+  border-radius: 16px;
+  cursor: pointer;
+
+  .cloud {
+    /* w-full flex flex-col justify-center items-center */
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .icon {
+      /* mb-3 text-gray-400 */
+      margin-bottom: 12px;
+      color: #9ca3af;
+    }
+
+    .title {
+      /* text-center mb-2 */
+      text-align: center;
+      margin-bottom: 8px;
+    }
+
+    .subtitle {
+      /* text-color-light text-center */
+      color: #A7ADB5;
+      text-align: center;
+    }
+  }
+}
+</style>
+
+<script>
+
+import Uploader from "../../utils/uploader";
+import { watchEffect } from 'vue';
+import { ref, computed, defineComponent } from 'vue';
+import { VIcon } from 'vuetify/components';
+const makeKey = () => Math.random().toString(36).slice(2, 7);
+
+
+class Item {
+  constructor(options) {
+    this.progress = { value: 0 };
+    this.status = options.status;
+    this.signedId = options.signedId;
+    this._name = options.name;
+    this._url = options.url;
+    this._type = options.type;
+    this.el = options.el;
+  }
+
+  isImage() {
+    return this.type.startsWith('image');
+  }
+
+  get type() {
+    if (this._type) {
+      return this._type;
+    }
+
+    if (this.el) {
+      return this.el.type;
+    }
+
+    return '';
+  }
+
+  get name() {
+    if (this._name) {
+      return this._name;
+    }
+
+    if (this.el) {
+      return this.el.name;
+    }
+
+    return '';
+  }
+
+  get url() {
+    if (this._url) {
+      return this._url;
+    }
+
+    return URL.createObjectURL(this.el);
+  }
+}
+
+export default defineComponent({
+  props: { spec: { type: Object } },
+  components: { VIcon },
+  setup(props) {
+    const spec = props.spec;
+    const fileSelect = ref(null);
+    const container = ref(null);
+    const icon = ref(null);
+
+    let files = null;
+    if (spec.files) {
+      files = ref(spec.files.reduce((prev, curr) => {
+        const key = makeKey();
+
+        prev[key] = new Item({
+          status: null, // pending, completed, failed
+          url: curr.url,
+          name: curr.name,
+          signedId: curr.signed_id,
+          type: curr.type,
+          el: null
+        });
+
+        return prev;
+      }, {}));
+    } else {
+      files = ref([]);
+    }
+
+    const setBusy = (value) => {
+      const event = new Event('forms/setBusy', { bubbles: true });
+      event.data = { value };
+      container.value.dispatchEvent(event);
+    };
+
+    const uploading = computed(() => Object.values(files.value).reduce((prev, curr) => prev || curr.status == 'pending', false));
+
+    watchEffect(() => {
+      if (!container.value) return null;
+
+      if (uploading.value) {
+        setBusy(true);
+      } else {
+        setBusy(false);
+      }
+    });
+
+    const showUploadedFile = computed(() => {
+      return Object.keys(files.value).length > 0;
+    });
+
+    function uploadFiles(droppedFiles) {
+      for (let index = 0; index < droppedFiles.length; index++) {
+        // show new dropped file and track progress
+        const key = makeKey();
+        files.value[key] = new Item({ el: droppedFiles[index], status: 'pending' });
+
+        const uploader = new Uploader(files.value[key].el, spec.directUploadUrl, files.value[key].progress);
+
+        // track progress
+        uploader.directUploadWillStoreFileWithXHR = (request) => {
+          request.upload.addEventListener("progress", event => {
+            files.value[key].progress.value = (event.loaded / event.total) * 100;
+          });
+
+          // can be use for aborting request
+          files.value[key].xhr = request;
+        };
+
+        // validate per file, skip if invalid
+        if (!uploader.validateFile(spec)) {
+          delete files.value[key];
+          continue;
+        }
+
+        // upload per file
+        uploader.start((error, blob) => {
+          if (!error) {
+            Object.assign(files.value[key], {
+              status: 'completed',
+              signedId: blob.signed_id
+            });
+          } else {
+            Object.assign(files.value[key], {
+              status: 'failed'
+            });
+          }
+        });
+      }
+    }
+
+    function handleDrop(e) {
+      e.preventDefault();
+      uploadFiles(e.dataTransfer.files);
+
+      e.currentTarget.classList.remove('border-[4px]');
+      container.value.classList.add('border-[2px]');
+    }
+
+    function handleRemoveFile(key) {
+      // abort upload
+      const xhr = files.value[key].xhr;
+      if (xhr) {
+        xhr.abort();
+      }
+
+      delete files.value[key];
+    }
+
+    function handleDragOver(e) {
+      e.preventDefault();
+      if (container.value.classList.contains('border-[2px]')) {
+        container.value.classList.remove('border-[2px]');
+      }
+      if (!container.value.classList.contains('border-[4px]')) {
+        container.value.classList.add('border-[4px]');
+      }
+    }
+
+    function handleDragLeave(e) {
+      e.preventDefault();
+      if (container.value.classList.contains('border-[4px]')) {
+        e.currentTarget.classList.remove('border-[4px]');
+      }
+      if (!container.value.classList.contains('border-[2px]')) {
+        container.value.classList.add('border-[2px]');
+      }
+    }
+
+    function handleClick(e) {
+      const onchange = () => {
+        uploadFiles(e.target.files);
+      };
+
+      fileSelect.value.onchange = onchange;
+      fileSelect.value.click();
+    }
+
+    const uploadFailedText = spec.uploadFailedText || '(UPLOAD FAILED)';
+    const uploadTitle = spec.uploadTitle || 'File added';
+
+    return {
+      files,
+      fileSelect,
+      container,
+      icon,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      handleClick,
+      handleRemoveFile,
+      showUploadedFile,
+      uploadFailedText,
+      uploadTitle
+    };
+  }
+})
+
+
+
+</script>

package/components/fields/text.vue

@@ -5,7 +5,7 @@
       :disabled="inputDisabled" :type="config.type" :rules="rules" :prepend-inner-icon="leftIconName"
       :append-inner-icon="config.appendIcon" :prefix="spec.leftText" :suffix="spec.rightText" :min="spec.min"
       :max="spec.max" :autofocus="spec.autoFocus || false" validate-on="blur" @click:appendInner="onRightIconClick"
-      @input="onChange" :variant="variant" persistent-placeholder />
+      @input="onChange" :variant="variant" persistent-placeholder @keyup="$onTyping({ duration: 2000 })" />
   </div>
 </template>
 

package/components/fields/textarea.vue

@@ -30,9 +30,9 @@ export default {
     }
   },
   methods: {
-    $ready() {
-      this.fieldModel = this.spec.value;
-    },
+    // $ready() {
+    //   this.fieldModel = this.spec.value;
+    // },
     styles() {
       const styles = this.$styles();
       this.height = styles.remove("height");

package/components/mixins/generic.js

@@ -8,7 +8,7 @@ export default {
       }
     },
     $closest(name) {
-      var parent = this.$parent;
+      var parent = this;
       while (parent != null) {
         if (
           (Utils.type.isObject(parent.spec) || Utils.type.isObject(parent.formSpec)) &&

package/components/p.vue

@@ -1,12 +1,18 @@
 <template>
   <!-- <p :style="genericStyles()" :class="$classes()" v-html="compiledText" /> -->
-  <p :style="genericStyles()" :class="$classes()">{{ spec.text }}</p>
+  <p :style="genericStyles()" :class="$classes()">{{ text }}</p>
 </template>
 
 <script>
 // import marked from "marked";
 
 export default {
+  expose: ['text'],
+  data: function () {
+    return {
+      text: this.spec.text
+    };
+  },
   props: {
     spec: { type: Object, required: true }
   }

package/index.js

@@ -8,17 +8,15 @@ import { useTheme } from "vuetify";
 import merge from 'lodash.merge';
 
 const Vue = createApp({
-  data() {
-    return {
-      vueApp,
-      themeConfig: useTheme()
-    };
+  setup() {
+    const themeConfig = useTheme();
+    return { themeConfig, vueApp };
   },
   created() {
     this.themeConfig.themes = merge(this.themeConfig.themes, settings.themes);
   },
   render: function () {
-    return h(App, { page: this.$data.vueApp.page });
+    return h(App, { page: this.vueApp.page });
   }
 });
 

package/nav/dialog.vue

@@ -178,17 +178,17 @@ export default {
               this.formSpec = response.fullPageForm;
               this.disableCloseButton = this.spec.disableCloseButton || false;
               this.updateContent(response)
-
-              Action.execute(response.onLoad, this);
             });
           });
         }
       } else {
-        this.title = this.spec.title;
+        // this.title = this.spec.title;
+        // this.body = this.spec.body;
+
         this.message = this.spec.message;
-        this.body = this.spec.body;
         this.disableCloseButton = this.spec.disableCloseButton || false;
-        Action.execute(spec.onLoad, this);
+
+        this.updateContent(this.spec);
       }
 
       this.model = true;
@@ -198,6 +198,11 @@ export default {
       this.header = response.header;
       this.body = response.body;
       this.footer = response.footer;
+
+      // Make sure action only executes after the content has finished populating.
+      this.$nextTick(() => {
+        Action.execute(response.onLoad, this);
+      })
     },
     updateMainHeight() {
       this.mainHeight = window.innerHeight - 140;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.12.2",
+  "version": "3.14.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -41,4 +41,4 @@
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }
-}
+}

package/store.js

@@ -10,7 +10,7 @@ export const vueApp = reactive({
     isFormDirty: false,
     stateUpdatedAt: null,
     webSocket: { channels: {}, header: {} },
-    actionCable: { channels: {} },
+    actionCable: null,
     registeredComponents: [],
     temp: {},
     richTextValues: {},

package/utils/form.js

@@ -32,7 +32,7 @@ export default class {
           url: Utils.url.appendParams(url, formData)
         };
         Utils.http.notifyFormSubmitted();
-        Utils.http.load(data, component);
+        Utils.http.load(data, component, false);
       } else {
         const data = {
           url: url,

package/utils/http.js

@@ -59,7 +59,7 @@ export default class {
     }
   }
 
-  static load(properties, component) {
+  static load(properties, component, windowMode) {
     const urlString = properties["url"];
     let url;
     try {
@@ -80,8 +80,8 @@ export default class {
       const htmlUrl = Utils.url.htmlUrl(properties["url"]);
 
       Utils.http.execute(properties, "GET", component, (data, response) => {
-        const dialog = component.$closest("dialog");
-        if (htmlUrl !== currentUrl && !Utils.type.isObject(dialog)) {
+        const pushHistory = windowMode ? true : !Utils.type.isObject(component.$closest("dialog"))
+        if (htmlUrl !== currentUrl && pushHistory) {
           const redirectUrl = Utils.url.htmlUrl(response.url);
           Utils.history.pushPage(data, redirectUrl);
         }
@@ -89,7 +89,7 @@ export default class {
         this.forceComponentUpdate(() => {
           Utils.history.resetScroll();
 
-          GLib.action.handleResponse(data, component)
+          GLib.action.handleResponse(data, component, windowMode)
 
           Action.execute(properties["onOpen"], component);
         });

package/utils/launch.js

@@ -5,6 +5,7 @@ import Snackbar from "../nav/snackbar.vue";
 import Popover from "../components/popover.vue";
 import { computePosition, flip, offset } from '@floating-ui/dom';
 import bus from "./eventBus";
+import { nextTick } from "vue";
 
 import { createApp, h } from "vue";
 
@@ -105,7 +106,6 @@ class LaunchDialog {
       this.stack = [];
     }
 
-
     // https://css-tricks.com/creating-vue-js-component-instances-programmatically/
     const props = {
       spec: properties,
@@ -149,11 +149,9 @@ class LaunchDialog {
       dialog.close();
     });
 
-    Action.execute(properties.onClose, component);
-
-    // Utils.type.ifObject(properties["onClose"], it => {
-    //   Action.execute(it, component);
-    // });
+    nextTick(() => {
+      Action.execute(properties.onClose, component);
+    })
   }
 
   // This is only meant to be used internally