glib-web 3.24.2 → 3.24.4

package/action.js

@@ -71,7 +71,7 @@ import ActionComponentsSet from "./actions/components/set";
 
 import ActionListsAppend from "./actions/lists/append";
 
-import { vueApp } from "./store";
+import { dialogs, vueApp } from "./store";
 
 const actions = {
   runMultiple: ActionsRunMultiple,
@@ -206,7 +206,7 @@ export default class Action {
 
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {
-        const dialog = component.$closest("dialog");
+        const dialog = dialogs.last();
         const updateDialog = windowMode ? false : Utils.type.isObject(dialog);
         if (updateDialog) {
           dialog.updateContent(response);

package/actions/components/set.js

@@ -1,3 +1,8 @@
+const setFileModel = (component, value) => {
+  component.fieldModel = component.$sanitizeValue(component.$externalizeValue(value));
+};
+
+
 export default class {
   execute(spec, component) {
     let targetComponent = component;
@@ -7,8 +12,9 @@ export default class {
     }
 
     Utils.type.ifObject(spec.data, (data) => {
-      targetComponent.action_merge(data)
-    })
+      targetComponent.action_merge(data);
+      if (data.value) setFileModel(targetComponent, data.value);
+    });
 
     GLib.action.execute(spec.onSet, targetComponent);
   }

package/actions/fields/blur.js

@@ -5,7 +5,7 @@ export default class {
     document.activeElement.blur();
 
     nextTick(() => {
-      Action.execute(spec.onBlur, targetComponent);
-    })
+      Action.execute(spec.onBlur, component);
+    });
   }
 }

package/actions/fields/focus.js

@@ -11,7 +11,7 @@ export default class {
     targetComponent.action_focus();
 
     nextTick(() => {
-      Action.execute(spec.onFocus, targetComponent);
-    })
+      Action.execute(spec.onFocus, component);
+    });
   }
 }

package/app.vue

@@ -35,14 +35,16 @@ import FormPanel from "./components/panels/form.vue";
 import { vueApp } from "./store";
 import { useDirtyState } from "./components/composable/dirtyState";
 import { useSocket } from "./components/composable/socket";
-import { uploadFiles, useFilesState, useDropableUtils, setBusyWhenUploading } from "./components/composable/dropable";
-import { ref, watch } from "vue";
+import { usePasteable } from "./components/composable/pasteable";
+import { computed } from "vue";
 
 const { watchDirtyState } = useDirtyState();
-const { signedIds } = useDropableUtils();
 
 export default {
-  setup() {
+  setup(props) {
+    const filePaster = computed(() => props.page.filePaster);
+    usePasteable(filePaster);
+
     return { vueApp };
   },
   components: {
@@ -95,7 +97,6 @@ export default {
       handler(val, oldVal) {
         if (!val) return;
         this.handleActionCable(val);
-        this.handlePasteFile(val);
       },
       immediate: true
     }
@@ -123,41 +124,6 @@ export default {
         this.actionCableConsumer = null;
       }
     },
-    handlePasteFile(val) {
-      // paste event
-      if (val.pasteFile) {
-        document.addEventListener('paste', this.onPaste);
-      } else {
-        document.removeEventListener('paste', this.onPaste);
-      }
-    },
-    async onPaste(event) {
-      const { directUploadUrl, accepts, url, inputName } = this.page.pasteFile;
-      const pastedFiles = event.clipboardData.files;
-      if (pastedFiles.length <= 0) return;
-
-      const files = ref({});
-      setBusyWhenUploading({ files });
-      const { uploaded } = useFilesState(files);
-      watch(uploaded, (val) => {
-        if (val) {
-          GLib.action.execute({
-            action: 'http/post',
-            url,
-            formData: inputName ? { [inputName]: { signed_ids: signedIds(files) } } : { signed_ids: signedIds(files) }
-          }, this);
-          files.value = {};
-        }
-      });
-      uploadFiles({
-        droppedFiles: pastedFiles,
-        files,
-        accepts,
-        directUploadUrl,
-        responseMessages: {}
-      });
-
-    },
     $mounted() {
       window.addEventListener(
         "resize",

package/components/component.vue

@@ -278,7 +278,7 @@ export default {
       }
     },
     $registryEnabled() {
-      return false;
+      return true;
     },
     $jsonLogicEnabled() {
       return false;

package/components/composable/dropable.js

@@ -2,6 +2,7 @@ import { computed, watch, onMounted, nextTick } from 'vue';
 import { triggerOnChange } from "./form";
 import Uploader from "../../utils/uploader";
 import { vueApp } from "../../store";
+import Action from "../../action";
 
 function useDropableUtils() {
   const makeKey = () => Math.random().toString(36).slice(2, 7);
@@ -77,11 +78,31 @@ function setBusyWhenUploading({ files }) {
   });
 }
 
+const showError = (options) => {
+  const { body, button } = options;
+  Action.execute(
+    {
+      action: 'snackbars/select',
+      message: body,
+      styleClasses: ['error', 'vertical'],
+      buttons: [{ text: button }]
+    },
+    {}
+  );
+};
 function uploadFiles({ droppedFiles, files, directUploadUrl, accepts = {}, responseMessages = {}, container }) {
-  const maxFileLength = accepts.maxFileLength || 10;
+  const { maxFileLength } = accepts;
+  // const droppedFilesSizeInByte = Array.from(droppedFiles).reduce((prev, curr) => prev + curr.size, 0);
+
+  // if (droppedFilesSizeInByte > maxFileSize * 1000) {
+  //   showError(accepts.maxFileSizeErrorText);
+
+  //   return;
+  // }
 
   if (droppedFiles.length > maxFileLength) {
-    alert("Files exceed the maximum limit per upload");
+    showError(accepts.maxFileLengthErrorText);
+
     return;
   }
 

package/components/composable/pasteable.js

@@ -0,0 +1,49 @@
+import { onMounted, ref, watch } from "vue";
+import { uploadFiles, useFilesState, setBusyWhenUploading, useDropableUtils } from "./dropable";
+
+const { signedIds } = useDropableUtils();
+
+const onPaste = async (event, filePaster) => {
+  const { directUploadUrl, accepts, url, inputName } = filePaster;
+  const pastedFiles = event.clipboardData.files;
+  if (pastedFiles.length <= 0) return;
+
+  const files = ref({});
+  setBusyWhenUploading({ files });
+  const { uploaded } = useFilesState(files);
+  watch(uploaded, (val) => {
+    if (val) {
+      GLib.action.execute({
+        action: 'http/post',
+        url,
+        formData: inputName ? { [inputName]: { signed_ids: signedIds(files) } } : { signed_ids: signedIds(files) }
+      }, {});
+      files.value = {};
+    }
+  });
+  uploadFiles({
+    droppedFiles: pastedFiles,
+    files,
+    accepts,
+    directUploadUrl,
+    responseMessages: {}
+  });
+
+};
+
+let handler = () => { };
+
+function usePasteable(filePaster) {
+  handler = (event) => onPaste(event, filePaster.value);
+  onMounted(() => {
+    watch(filePaster, (val, oldVal) => {
+      if (val) {
+        document.addEventListener('paste', handler);
+      } else {
+        document.removeEventListener('paste', handler);
+      }
+    }, { immediate: true });
+  });
+}
+
+export { usePasteable };

package/components/fields/_select.vue

@@ -1,10 +1,10 @@
 <template>
   <div ref="container" :style="$styles()" :class="classes()">
-    <v-autocomplete :color="gcolor" v-model="fieldModel" :label="label" :items="options || []" :chips="spec.multiple"
-      :multiple="spec.multiple" :readonly="spec.readOnly" :clearable="!spec.readOnly" :placeholder="spec.placeholder"
-      :rules="rules" persistent-hint :append-icon="append.icon" validate-on="blur" item-title='text' :variant="variant"
-      :closable-chips="spec.multiple" :density="density" persistent-placeholder @update:modelValue="onChange"
-      @focus="focused = true" @blur="focused = false">
+    <v-autocomplete :color="gcolor" v-model="fieldModel" :label="label" :items="normalizedOptions"
+      :chips="spec.multiple" :multiple="spec.multiple" :readonly="spec.readOnly" :clearable="!spec.readOnly"
+      :placeholder="spec.placeholder" :rules="rules" persistent-hint :append-icon="append.icon" validate-on="blur"
+      item-title='text' :variant="variant" :closable-chips="spec.multiple" :density="density" persistent-placeholder
+      @update:modelValue="onChange" @focus="focused = true" @blur="focused = false">
 
       <template #item="{ props, item }">
         <v-list-subheader v-if="item.raw.header">
@@ -54,6 +54,20 @@ export default {
     };
   },
   computed: {
+    normalizedOptions() {
+      return this.spec.options.map(i => {
+        switch (i.type) {
+          case "label":
+            return { header: i.text };
+          case "divider":
+            return { divider: true };
+          default:
+            return Object.assign({}, i, {
+              props: { subtitle: i.subtitle }
+            });
+        }
+      });
+    },
     values() {
       // Depends on whether the field is single or multiple
       if (this.$type.isArray(this.fieldModel)) {
@@ -88,25 +102,11 @@ export default {
     $ready() {
       this.updateData(false);
     },
-    normalizedOptions() {
-      return this.spec.options.map(i => {
-        switch (i.type) {
-          case "label":
-            return { header: i.text };
-          case "divider":
-            return { divider: true };
-          default:
-            return Object.assign({}, i, {
-              props: { subtitle: i.subtitle }
-            });
-        }
-      });
-    },
     classes() {
       return this.$classes().concat("g-text-field--hintless");
     },
     updateData(reinitValue) {
-      this.options = this.normalizedOptions();
+      // this.options = this.normalizedOptions();
       this.append = this.spec.append || {};
       this.rules = this.$validation();
 

package/components/fields/check.vue

@@ -22,6 +22,11 @@ export default {
       uncheckValue: this.spec.uncheckValue
     };
   },
+  computed: {
+    fieldName() {
+      return this.spec.name || this.spec.parentName;
+    }
+  },
   methods: {
     $ready() {
       this.updateData();
@@ -45,14 +50,6 @@ export default {
     updateData() {
       this.groupElement = this.$el.closest("[data-component=checkGroup]");
 
-      let groupName = null;
-      this.$type.ifObject(
-        this.groupElement,
-        val => (groupName = val.getAttribute("name"))
-      );
-
-      this.fieldName = this.spec.name || groupName;
-
       // this.fieldModel = this.spec.checked
       //   ? this.spec.checkValue
       //   : this.spec.value;

package/components/fields/checkGroup.vue

@@ -70,12 +70,13 @@ export default {
     childSpec(item) {
       if (this.spec.readOnly) {
         return Object.assign(item, {
+          parentName: this.spec.name,
           readOnly: this.spec.readOnly,
           onChange: this.spec.onChange,
         });
       }
 
-      return Object.assign(item, { onChange: this.spec.onChange });
+      return Object.assign(item, { onChange: this.spec.onChange, parentName: this.spec.name });
     },
   },
 };

package/components/fields/otpField.vue

@@ -11,7 +11,6 @@ import { triggerOnChange } from "../composable/form";
 import inputVariant from "../mixins/inputVariant";
 
 export default {
-  expose: ['fieldModel'],
   mixins: [inputVariant],
   props: {
     spec: { type: Object, required: true },

package/components/fields/select.vue

@@ -1,8 +1,5 @@
 <template>
-  <fields-genericSelect
-    ref="delegate"
-    :spec="updatedSpec"
-  />
+  <fields-genericSelect ref="delegate" :spec="updatedSpec" />
 </template>
 
 <script>

package/components/fields/text.vue

@@ -16,7 +16,6 @@ import inputVariant from "../mixins/inputVariant";
 import { determineDensity } from "../../utils/constant";
 
 export default {
-  expose: ['fieldModel'],
   mixins: [inputVariant],
   props: {
     spec: { type: Object, required: true },

package/components/label.vue

@@ -13,22 +13,7 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
-  data: function () {
-    return {
-      // text: " "
-    };
-  },
   methods: {
-    $ready() {
-      // this.$wsInitActionCable(this.spec.actionCable);
-
-      // this.text = this.spec.text;
-    },
-    // action_set(spec) {
-    //   if (spec.user_id !== spec.filterKey) {
-    //     this.text = spec.text;
-    //   }
-    // },
     action_merge(mergedSpec) {
       Object.assign(this.spec, mergedSpec);
       this.$ready();

package/components/mixins/events.js

@@ -30,12 +30,12 @@ export default {
   },
   created() {
     // watch components/update
-    if (this.spec) {
-      this.$watch(
-        () => Object.keys(this.spec).map((specKey) => this.spec[specKey]),
-        () => this._ready()
-      );
-    }
+    // if (this.spec) {
+    //   this.$watch(
+    //     () => Object.keys(this.spec).map((specKey) => this.spec[specKey]),
+    //     () => this._ready()
+    //   );
+    // }
 
     this.$created();
   },

package/components/mixins/generic.js

@@ -32,7 +32,7 @@ export default {
         Utils.type.ifObject(val.format, spec => {
           augmentedRules = augmentedRules.concat([
             v => {
-              if (v && !v.match(spec.regex)) {
+              if (v && !v.toString().match(spec.regex)) {
                 return spec.message;
               }
               return true;

package/components/mixins/styles.js

@@ -11,7 +11,7 @@ const isNeedToBeFixed = (val, component) => {
 export default {
   data: function () {
     return {
-      fieldName: null,
+      // fieldName: null,
       fieldModel: null,
       _show: true,
       _watchers: [],
@@ -35,6 +35,9 @@ export default {
     panelContext: { default: {} }
   },
   computed: {
+    fieldName() {
+      if (this.spec && this.spec.name) return this.spec.name;
+    },
     inputDisabled() {
       let disabled = false;
       if (Object.keys(this.panelContext).length > 0) { // handle nested
@@ -82,7 +85,7 @@ export default {
   },
   methods: {
     viewKey(item, index) {
-      if (!item) return '';
+      if (!item || !item.view) return '';
       // random string to trigger render
       const forceUpdate = (Math.random() + 1).toString(36).substring(7);
       if (item.view.startsWith('charts/')) return forceUpdate;
@@ -266,7 +269,7 @@ export default {
       if (hasCondition || isField) {
         // Has to be executed before $ready(). This executes regardless of whether a form is found because fields
         // may be used without a form.
-        this.fieldName = this.spec.name;
+        // this.fieldName = this.spec.name;
 
         // Avoid user input getting removed when updating certain parts of the page.
         if (valueChanged) {

package/components/p.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- <p :style="genericStyles()" :class="$classes()" v-html="compiledText" /> -->
-  <p :style="genericStyles()" :class="$classes()">{{ text }}</p>
+  <p :style="$styles()" :class="$classes()">{{ spec.text }}</p>
 </template>
 
 <script>
@@ -9,21 +8,7 @@
 export default {
   props: {
     spec: { type: Object, required: true }
-  },
-  computed: {
-    text() {
-      return this.spec.text;
-    }
   }
-  // computed: {
-  //   compiledText() {
-  //     if (this.spec.format == "markdown") {
-  //       return marked(this.spec.text, { sanitize: true });
-  //     } else {
-  //       return this.spec.text;
-  //     }
-  //   }
-  // }
 };
 </script>
 

package/components/panels/column.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-col :xxl="xxl.cols" :xl="xl.cols" :lg="lg.cols" :md="md.cols" :sm="sm.cols" :style="cssStyles()" :class="$classes()"
+  <v-col :xxl="xxl.cols" :xl="xl.cols" :lg="lg.cols" :md="md.cols" :sm="sm.cols" :style="cssStyles" :class="$classes()"
     :cols="xs.cols || 12" :order-xl="xl.order" :order-lg="lg.order" :order-md="md.order" :order-sm="sm.order"
     :order="xs.order">
     <common-responsive :spec="innerSpec()" :full-height="fullHeight" />
@@ -26,21 +26,7 @@ export default {
   computed: {
     fullHeight() {
       // Provide a default name so the panel will not be nameless when used in predefined layouts (e.g. page.body, list.header, etc.)
-      return this.spec.height == 'matchParent'
-    },
-  },
-  methods: {
-    $ready() {
-      this.xxl = this.spec.xxl || this.xxl;
-      this.xl = this.spec.xl || this.xl;
-      this.lg = this.spec.lg || this.lg;
-      this.md = this.spec.md || this.md;
-      this.sm = this.spec.sm || this.sm;
-      this.xs = this.spec.xs || this.xs;
-    },
-    innerSpec() {
-      // Remove properties that are handled by the container (i.e. v-col).
-      return new Hash(this.spec).without("padding").without("styleClasses");
+      return this.spec.height == 'matchParent';
     },
     cssStyles() {
       const styles = Object.assign({}, this.$styles());
@@ -111,7 +97,22 @@ export default {
       // Don't interfere with v-col's height (which is full height by default anyway) in order not to break the full height behaviour.
       // Let this be handled by the child (responsive) panel instead.
       return new Hash(styles).without("height");
+    }
+  },
+  methods: {
+    $ready() {
+      this.xxl = this.spec.xxl || this.xxl;
+      this.xl = this.spec.xl || this.xl;
+      this.lg = this.spec.lg || this.lg;
+      this.md = this.spec.md || this.md;
+      this.sm = this.spec.sm || this.sm;
+      this.xs = this.spec.xs || this.xs;
     },
+    innerSpec() {
+      // Remove properties that are handled by the container (i.e. v-col).
+      return new Hash(this.spec).without("padding").without("styleClasses");
+    },
+
     applyStyles(styles, spec) {
       Object.assign(styles, this.$styles(spec));
       Utils.type.ifBoolean(spec.hide, () => {

package/components/treeView.vue

@@ -196,6 +196,7 @@ export default defineComponent({
       }
     };
     const handleDragOver = (event, item) => {
+      if (item.children) item._open = true;
       if (item.dropData) {
         event.preventDefault();
         lastDragItem.value = item;

package/nav/dialog.vue

@@ -45,12 +45,17 @@ import Action from "../action";
 import FormPanel from "../components/panels/form.vue";
 import { useDirtyState } from "../components/composable/dirtyState";
 import { dialogs } from "../store";
+import { ref } from "vue";
+import { usePasteable } from "../components/composable/pasteable";
 
 export default {
   expose: ['isFormDirty', 'model'],
-  setup() {
+  setup(props) {
+    const filePaster = ref(undefined);
+    usePasteable(filePaster);
+
     const { isDirty } = useDirtyState();
-    return { isDirty };
+    return { isDirty, filePaster };
   },
   components: {
     "panels-form": FormPanel,
@@ -129,6 +134,7 @@ export default {
     // },
     close() {
       if (!this.isDirty()) {
+        this.filePaster = null;
         dialogs.remove(this);
         this.model = false;
       }
@@ -167,6 +173,7 @@ export default {
             "GET",
             this,
             (response) => {
+              this.filePaster = response.filePaster;
               Utils.http.forceComponentUpdate(() => {
                 this.urlLoaded = true;
                 this.message = "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.24.2",
+  "version": "3.24.4",
   "description": "",
   "main": "index.js",
   "scripts": {

package/plugins/updatableComponent.js

@@ -19,7 +19,8 @@ export default {
                 GLib.component.vueName(this)
               );
             }
-            GLib.component.register(id, this);
+            const newComponent = this.$refs.delegate || this;
+            GLib.component.register(id, newComponent);
           }
         },
         $tearDown() {
@@ -30,7 +31,7 @@ export default {
         },
         $registryEnabled() {
           // Common classes such as `_select` need to return false so that it doesn't override its parent (e.g. `select`).
-          return true;
+          return false;
         }
       }
     });

package/utils/http.js

@@ -1,7 +1,7 @@
 import Type from "./type";
 import Action from "../action";
 import { nextTick } from 'vue';
-import { ctx, vueApp } from "../store";
+import { ctx, dialogs, vueApp } from "../store";
 
 let loading = false;
 
@@ -80,7 +80,7 @@ export default class {
       const htmlUrl = Utils.url.htmlUrl(properties["url"]);
 
       Utils.http.execute(properties, "GET", component, (data, response) => {
-        const pushHistory = windowMode ? true : !Utils.type.isObject(component.$closest("dialog"));
+        const pushHistory = windowMode ? true : !Utils.type.isObject(dialogs.last());
         if (htmlUrl !== currentUrl && pushHistory) {
           const redirectUrl = Utils.url.htmlUrl(response.url);
           Utils.history.pushPage(data, redirectUrl);

package/utils/uploader.js

@@ -65,7 +65,7 @@ export default class Uploader {
       [spec.fileType].flat().forEach(key => {
         const acceptsRegex = new RegExp(mimeType[key]);
         if (!mimeType[key]) {
-          console.error(`Mime type not found: ${key}`)
+          console.error(`Mime type not found: ${key}`);
         }
         if (acceptsRegex.test(this.file.type)) {
           validFileType = true;
@@ -79,7 +79,8 @@ export default class Uploader {
 
       if (spec.maxFileSize) {
         if (this.file.size > spec.maxFileSize * MB_SIZE) {
-          alert(spec.maxFileSizeErrorText || "File too big");
+          // support for old version, maxFileSizeErrorText is type of Object not String
+          if (typeof spec.maxFileSizeErrorText == 'string') alert(spec.maxFileSizeErrorText || "File too big");
           return false;
         }
       }