glib-web 4.6.0 → 4.8.0

package/action.js

@@ -257,6 +257,3 @@ export default class Action {
     return this._executeInternal(name, spec, component, params, customActions);
   }
 }
-
-// TODO: not recommended
-window.Action = Action;

package/actions/cookies/save.js

@@ -1,3 +1,5 @@
+import Action from "../../action";
+
 export default class {
   execute(spec, component) {
     const key = spec.key;

package/actions/fields/focus.js

@@ -1,9 +1,10 @@
 import { nextTick } from "vue";
 import Action from "../../action";
+import { realComponent } from "../../components/helper";
 
 export default class {
   execute(spec, component) {
-    let targetComponent = GLib.component.findById(spec.targetId);
+    let targetComponent = realComponent(GLib.component.findById(spec.targetId));
 
     if (!targetComponent) {
       console.warn("Component ID not found", spec.targetId);

package/actions/files/upload.js

@@ -4,17 +4,10 @@ import { useFilesState } from "../../components/composable/file";
 import Action from "../../action";
 
 export default class {
-  execute(spec, component, params) {
+  execute(spec, component) {
     const files = ref({});
-    const droppedFiles = params.files;
+    const droppedFiles = spec.files;
     const container = ref(component.$el);
-    const context = params.data;
-
-    // if drop item is not file
-    if (droppedFiles.length <= 0) {
-      Action.execute(spec.onFinished, {}, { glib: { context } });
-      return;
-    }
 
     setBusyWhenUploading({ files });
     // if drop item is file
@@ -24,8 +17,18 @@ export default class {
     if (spec.onFinished) {
       watch(uploaded, (val) => {
         const signedIds = Object.values(files.value).map((f) => f.signedId);
-        const obj = Object.assign({}, { glib: { signedIds, context } });
-        if (val) Action.execute(spec.onFinished, {}, obj);
+        const obj = {
+          [spec.paramNameForFormData || 'formData']: {
+            [spec.paramNameForFiles || 'files']: signedIds,
+            [spec.paramNameForContext || 'context']: spec.context,
+          }
+        };
+        const data = Object.assign(
+          {},
+          spec.onFinished,
+          obj
+        );
+        if (val) Action.execute(data, component);
       });
     }
   }

package/actions/http/patch.js

@@ -1,8 +1,6 @@
-import modifyFormData from "./modifyFormData";
 
 export default class {
   execute(properties, controller, params) {
-    modifyFormData(properties, params);
 
     GLib.http.execute(properties, "PATCH", controller, response =>
       GLib.action.handleResponse(response, controller)

package/actions/http/post.js

@@ -1,8 +1,5 @@
-import modifyFormData from "./modifyFormData";
-
 export default class {
   execute(properties, controller, params) {
-    modifyFormData(properties, params);
 
     GLib.http.execute(properties, "POST", controller, response =>
       GLib.action.handleResponse(response, controller)

package/actions/http/put.js

@@ -1,9 +1,5 @@
-import modifyFormData from "./modifyFormData";
-
 export default class {
   execute(properties, controller, params) {
-    modifyFormData(properties, params);
-
     GLib.http.execute(properties, "PUT", controller, response =>
       GLib.action.handleResponse(response, controller)
     );

package/actions/logics/set.js

@@ -25,6 +25,7 @@ export default class {
   execute(spec, component) {
     let targetComponent;
 
+    // TODO: add comment
     const dynamicGroupEntry = component.$closest("fields/internalDynamicGroupEntry");
     const targetIds = spec.targetId ? [spec.targetId] : spec.targetIds;
     if (targetIds.length > 0) {

package/components/_button.vue

@@ -1,8 +1,8 @@
 <template>
   <common-badge v-if="spec.badge" :spec="spec">
-    <internal-button :spec="spec" :disabled="$isBusy" />
+    <internal-button :spec="spec" />
   </common-badge>
-  <internal-button v-else :spec="spec" :disabled="$isBusy" />
+  <internal-button v-else :spec="spec" />
 </template>
 
 <script>

package/components/_dropdownMenu.vue

@@ -1,8 +1,8 @@
 <template>
   <v-menu left bottom>
     <template v-slot:activator="{ props }">
-      <v-btn :size="size" :variant="variant" :icon="iconStyling" :text="textStyling || null" v-bind="props" style="color: inherit;"
-        @click.stop.prevent="">
+      <v-btn :size="size" :variant="variant" :icon="iconStyling" :text="textStyling || null" v-bind="props"
+        style="color: inherit;" @click.stop.prevent="">
         <span v-if="spec.icon" :class="[textStyling ? 'padder' : '']"><common-icon :spec="spec.icon || {}" /></span>
         {{ spec.text }}
       </v-btn>
@@ -10,14 +10,14 @@
 
     <v-list>
       <v-list-item v-for="(childItem, childIndex) in spec.childButtons" :key="childIndex">
-        <common-button :spec="buttonSpec(childItem)" :disabled="childItem.disabled || $isBusy" />
+        <common-button :spec="buttonSpec(childItem)" />
       </v-list-item>
     </v-list>
   </v-menu>
 </template>
 
 <script>
-import { determineColor, determineDensity, determineVariant, determineSize } from '../utils/constant'
+import { determineColor, determineDensity, determineVariant, determineSize } from '../utils/constant';
 
 export default {
   props: {
@@ -31,10 +31,10 @@ export default {
   },
   computed: {
     size() {
-      return determineSize(this.spec.styleClasses)
+      return determineSize(this.spec.styleClasses);
     },
     variant() {
-      return determineVariant(this.spec.styleClasses, 'elevated')
+      return determineVariant(this.spec.styleClasses, 'elevated');
     }
   },
   methods: {

package/components/_icon.vue

@@ -5,12 +5,17 @@
 </template>
 
 <script>
+import { vueApp } from "../store";
 import { determineColor } from '../utils/constant';
+import { computed } from "vue";
 
 export default {
   props: {
-    spec: { type: Object, required: true },
-    isBusy: { type: Boolean }
+    spec: { type: Object, required: true }
+  },
+  setup() {
+    const isBusy = computed(() => vueApp.isBusy);
+    return { isBusy };
   },
   data() {
     return {
@@ -31,7 +36,7 @@ export default {
       return this.$classes();
     },
     value() {
-      return this.isBusy || this.$isBusy ? "autorenew" : this.name;
+      return this.isBusy ? "autorenew" : this.name;
     },
   },
   watch: {

package/components/_internal_button.vue

@@ -1,10 +1,10 @@
 <template>
   <!-- Use `click.prevent` to prevent bubbling when clicking a dropdown button that is
          located in a list row that has href. -->
-  <v-btn :type="type" :disabled="disabled || isBusy || spec.disabled" :style="styles()" :class="$classes()"
-    :href="$href()" :rel="$rel()" :variant="variant" :rounded="$classes().includes('rounded') || null"
-    :density="density" :size="size" :color="color" :active="$classesInclude('active')"
-    :icon="$classes().includes('icon') ? $vuetify : null" @click.prevent="
+  <v-btn :type="type" :disabled="isBusy || spec.disabled" :style="styles()" :class="$classes()" :href="$href()"
+    :rel="$rel()" :variant="variant" :rounded="$classes().includes('rounded') || null" :density="density" :size="size"
+    :color="color" :active="$classesInclude('active')" :icon="$classes().includes('icon') ? $vuetify : null"
+    @click.prevent="
       type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
       ">
     <!-- <span v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span> -->
@@ -24,7 +24,6 @@ export default {
   props: {
     spec: { type: Object, required: true },
     type: { type: String, default: "button" },
-    disabled: { type: Boolean },
     hideTextOnXs: { type: Boolean },
     eventHandlers: { type: Object, default: null }
   },

package/components/_tooltip.vue

@@ -1,13 +1,9 @@
 <template>
   <v-menu v-if="spec.childButtons" left bottom>
     <template v-slot:activator="{ on: onMenu }">
-      <v-tooltip
-        :disabled="tooltip.disabled"
-        :top="tooltipPositionMatches('top')"
-        :right="tooltipPositionMatches('right')"
-        :bottom="tooltipPositionMatches('bottom')"
-        :left="tooltipPositionMatches('left')"
-      >
+      <v-tooltip :disabled="tooltip.disabled" :top="tooltipPositionMatches('top')"
+        :right="tooltipPositionMatches('right')" :bottom="tooltipPositionMatches('bottom')"
+        :left="tooltipPositionMatches('left')">
         <template v-slot:activator="{ on: onTooltip }">
           <slot name="activator" :on="{ ...onMenu, ...onTooltip }" />
         </template>
@@ -16,25 +12,14 @@
     </template>
 
     <v-list>
-      <v-list-item
-        v-for="(childItem, childIndex) in spec.childButtons"
-        :key="childIndex"
-      >
-        <common-button
-          :spec="buttonSpec(childItem)"
-          :disabled="childItem.disabled || $isBusy"
-        />
+      <v-list-item v-for="(childItem, childIndex) in spec.childButtons" :key="childIndex">
+        <common-button :spec="buttonSpec(childItem)" :disabled="childItem.disabled" />
       </v-list-item>
     </v-list>
   </v-menu>
-  <v-tooltip
-    v-else
-    :disabled="tooltip.disabled"
-    :top="tooltipPositionMatches('top')"
-    :right="tooltipPositionMatches('right')"
-    :bottom="tooltipPositionMatches('bottom')"
-    :left="tooltipPositionMatches('left')"
-  >
+  <v-tooltip v-else :disabled="tooltip.disabled" :top="tooltipPositionMatches('top')"
+    :right="tooltipPositionMatches('right')" :bottom="tooltipPositionMatches('bottom')"
+    :left="tooltipPositionMatches('left')">
     <template v-slot:activator="{ on: onTooltip }">
       <slot name="activator" :on="{ ...onTooltip }" />
     </template>

package/components/avatar.vue

@@ -1,10 +1,11 @@
 <template>
   <common-badge :spec="spec">
-    <v-avatar :size="spec.size">
+    <v-avatar :size="spec.size" :color="spec.backgroundColor || 'surface-variant'" :class="$classes()">
+      <p v-if="spec.initials" :style="{ color: spec.initials.color || 'white' }">{{ spec.initials.text }}</p>
       <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
       <!-- <img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()" /> -->
-
-      <v-img :style="$styles()" :class="$classes()" :src="spec.url || spec.base64Data" @click="$onClick()"></v-img>
+      <v-img :style="$styles()" :class="$classes()" :src="spec.url || spec.base64Data" @click="$onClick()"
+        v-else></v-img>
     </v-avatar>
   </common-badge>
 </template>

package/components/banners/select.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- <div :style="$styles()" :class="$classes()" :color="spec.color || color"> -->
+
   <v-banner :style="$styles()" :class="$classes()">
     <template v-if="spec.icon" v-slot:prepend>
       <common-icon slot="icon" :spec="spec.icon" />
@@ -12,19 +12,11 @@
 
     <template v-slot:actions>
       <template v-for="(item, index) in spec.buttons">
-        <common-dropdownMenu v-if="item.childButtons" :key="'left-' + index" :spec="item" :disabled="$isBusy" />
-        <common-button v-else :key="index" :spec="buttonSpec(item)" :disabled="$isBusy" :hide-text-on-xs="true" />
+        <common-dropdownMenu v-if="item.childButtons" :key="'left-' + index" :spec="item" />
+        <common-button v-else :key="index" :spec="buttonSpec(item)" :hide-text-on-xs="true" />
       </template>
     </template>
-
-    <!-- <v-banner-actions>
-        <template v-for="(item, index) in spec.buttons">
-          <common-dropdownMenu v-if="item.childButtons" :key="'left-' + index" :spec="item" :disabled="$isBusy" />
-          <common-button v-else :key="index" :spec="buttonSpec(item)" :disabled="$isBusy" :hide-text-on-xs="true" />
-        </template>
-      </v-banner-actions> -->
   </v-banner>
-  <!-- </div> -->
 </template>
 
 <script>

package/components/component.vue

@@ -24,7 +24,7 @@
 
     <component :draggable="!!spec.dragData" ref="delegate" v-else-if="name" :is="name" :id="spec.id" :spec="spec"
       @[menter]="handlePopover(spec.onMouseEnter)" @[mleave]="handlePopover(spec.onMouseLeave)"
-      @[dstart()]="handleDragStart" />
+      @[dstart()]="handleDragStart" :key="spec.key" />
     <div v-else>Unsupported view: {{ spec.view }}</div>
   </Suspense>
 </template>

package/components/composable/file.js

@@ -1,4 +1,7 @@
 import { computed } from "vue";
+import Type from "../../utils/type";
+import mimeType from "../../utils/mime_type";
+import { showError } from "./alert";
 
 function useFileUtils() {
   const makeKey = () => Math.random().toString(36).slice(2, 7);
@@ -13,6 +16,7 @@ function useFileUtils() {
       this._url = options.url;
       this._type = options.type;
       this.el = options.el;
+      this.size = options.size;
     }
 
     isImage() {
@@ -87,4 +91,39 @@ function useFilesState(files) {
   return { uploading, uploaded, uploadingFileLength, uploadedFileLength };
 }
 
-export { useFileUtils, useFilesState };
+function validateFile(accepts, file) {
+  const MB_SIZE = 1000;
+  if (Type.isObject(accepts)) {
+    let validFileType = false;
+    [accepts.fileType].flat().forEach(key => {
+      const acceptsRegex = new RegExp(mimeType[key]);
+      if (!mimeType[key]) {
+        console.error(`Mime type not found: ${key}`);
+      }
+      if (acceptsRegex.test(file.type)) {
+        validFileType = true;
+      }
+    });
+
+    if (!validFileType) {
+      alert(accepts.fileTypeErrorText || "Invalid file type");
+      return false;
+    }
+
+    if (accepts.maxFileSize) {
+      if (file.size > accepts.maxFileSize * MB_SIZE) {
+        // support for old version, maxFileSizeErrorText is type of Object not String
+        if (typeof accepts.maxFileSizeErrorText == 'string') {
+          alert(accepts.maxFileSizeErrorText || "File too big");
+        } else {
+          showError({ body: accepts.maxFileSizeErrorText.body, button: accepts.maxFileSizeErrorText.button });
+        }
+        return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+export { useFileUtils, useFilesState, validateFile };

package/components/composable/tree.js

@@ -1,11 +1,14 @@
-import { inject, ref, watch } from "vue";
+import { getCurrentInstance, inject, ref, watch } from "vue";
 import Action from "../../action";
 
 function useGlibTreeNode(props) {
   const node = ref(props.node);
+
+  // variable from tree.vue
   const dropBox = inject('dropBox');
   const selected = inject('selected');
   const currTreeNode = inject('currTreeNode');
+  const instance = getCurrentInstance();
 
   watch(selected, (val) => {
     selectIfIdMatch(val);
@@ -26,7 +29,7 @@ function useGlibTreeNode(props) {
   }
 
   function handleClick(node) {
-    Action.execute(node.onClick, {});
+    Action.execute(node.onClick, instance.ctx);
   }
 
   function handleDragOver(e, node) {
@@ -48,16 +51,16 @@ function useGlibTreeNode(props) {
 
     dropBox.value = {};
 
-    const data = {};
+    const context = {};
     const files = e.dataTransfer.files;
 
     if (files.length <= 0) {
-      const dragData = JSON.parse(e.dataTransfer.getData('text'));
-      Object.assign(data, dragData, node.dropData);
+      const obj = JSON.parse(e.dataTransfer.getData('text'));
+      Object.assign(context, obj, node.dropData);
     } else {
-      Object.assign(data, node.dropData);
+      Object.assign(context, node.dropData);
     }
-    dropBox.value = { data, files };
+    dropBox.value = { context, files };
   }
 
   return { node, handleClick, handleDragOver, handleDragLeave, handleDrop };

package/components/composable/upload.js

@@ -2,7 +2,7 @@ import { watch } from 'vue';
 import { triggerOnChange } from "./form";
 import Uploader from "../../utils/glibDirectUpload";
 import { vueApp } from "../../store";
-import { useFilesState, useFileUtils } from "./file";
+import { useFilesState, useFileUtils, validateFile } from "./file";
 
 function submitOnAllUploaded({ url, formData, files }) {
   const { uploaded } = useFilesState(files);
@@ -68,8 +68,7 @@ function uploadOneFile({ files, key, spec, container, onAfterUploaded }) {
   };
 
   // validate per file, skip if invalid
-  if (!uploader.validateFile({ accepts: accepts })) {
-    console.log(accepts)
+  if (!validateFile(accepts, files.value[key].el)) {
     delete files.value[key];
     return;
   }

package/components/composable/upload_delegator.js

@@ -1,5 +1,5 @@
 import { vueApp } from "../../store";
-import { useFileUtils } from "./file";
+import { useFileUtils, validateFile } from "./file";
 
 const { makeKey } = useFileUtils();
 
@@ -11,6 +11,10 @@ function uploadFiles(obj) {
       files: Array.from(droppedFiles).reduce((prev, curr) => {
         prev[makeKey()] = curr;
 
+        if (!validateFile(spec.accepts, curr)) {
+          return;
+        }
+
         return prev;
       }, {}),
       spec: spec

package/components/fields/_patternText.vue

@@ -4,8 +4,8 @@
     <v-text-field :color="gcolor" v-model="fieldModel" :name="fieldName" :label="spec.label" :hint="spec.hint"
       :type="type" :readonly="spec.readOnly" :disabled="inputDisabled" :min="$sanitizeValue(spec.min)"
       :max="$sanitizeValue(spec.max)" :pattern="pattern" :rules="$validation()" :style="$styles()"
-      :density="$classes().includes('compact') ? 'compact' : 'default'" clearable @change="onChange" :variant="variant"
-      validate-on="blur" persistent-placeholder />
+      :density="$classes().includes('compact') ? 'compact' : 'default'" :clearable="spec.clearable" @change="onChange"
+      :variant="variant" validate-on="blur" persistent-placeholder />
   </div>
 </template>
 

package/components/fields/_select.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="container" :style="$styles()" :class="$classes()" v-if="loadIf">
     <component :is="compName" :color="gcolor" v-model="fieldModel" :label="label" :items="normalizedOptions"
-      :chips="spec.multiple" :multiple="spec.multiple" :readonly="spec.readOnly" :clearable="!spec.readOnly"
+      :chips="spec.multiple" :multiple="spec.multiple" :readonly="spec.readOnly" :clearable="spec.clearable"
       :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">
@@ -126,3 +126,10 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+/*This is to ensure that the text does not get clipped by the clear icon.*/
+::v-deep .v-autocomplete__selection {
+  display: block;
+}
+</style>

package/components/fields/check/_featured.vue

@@ -2,8 +2,8 @@
   <div :class="checked ? 'thumbnail-checked' : 'thumbnail-check'" @click="handleClick">
     <v-checkbox :color="gcolor" v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly"
       :disabled="inputDisabled" :true-icon="spec.onIcon" :false-icon="spec.offIcon" :value="spec.value"
-      :true-value="spec.checkValue" :false-value="uncheckValue" hide-details @change="$emit('change')"
-      :rules="$validation()" :multiple="false">
+      :true-value="spec.checkValue" :false-value="spec.uncheckValue" hide-details :rules="$validation()"
+      :multiple="false">
       <div class="thumbnail-content-wrapper">
         <div class="thumbnail-check-img">
           <img :src="spec.image.url" alt="" :width="spec.image.width" :height="spec.image.height" />
@@ -30,7 +30,7 @@ export default {
   },
   methods: {
     handleClick() {
-      this.checked = !this.checked
+      this.checked = !this.checked;
     },
   }
 };

package/components/fields/check/_thumbnail.vue

@@ -2,8 +2,8 @@
   <div class="checkbox-container">
     <v-checkbox :color="gcolor" v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly"
       :disabled="inputDisabled" :true-icon="spec.onIcon" :false-icon="spec.offIcon" :value="spec.value"
-      :true-value="spec.checkValue" :false-value="uncheckValue" hide-details @change="$emit('change')"
-      :rules="$validation()" :multiple="false"></v-checkbox>
+      :true-value="spec.checkValue" :false-value="spec.uncheckValue" hide-details :rules="$validation()"
+      :multiple="false"></v-checkbox>
     <div class="checkbox-icon">
       <img :src="spec.image.url" :width="spec.image.width" :height="spec.image.height" alt="img" />
     </div>

package/components/fields/dynamicSelect.vue

@@ -1,13 +1,13 @@
 <template>
   <div :style="$styles()" v-if="loadIf">
-    <v-autocomplete ref="autocomplete" v-model="model" :items="allItems" :loading="$isBusy"
-      :v-model:search-input="search" :label="spec.label" hide-no-data hide-selected no-filter return-object
-      :chips="true" :deletable-chips="true" :multiple="spec.multiple">
+    <v-autocomplete ref="autocomplete" v-model="model" :items="allItems" :v-model:search-input="search"
+      :label="spec.label" hide-no-data hide-selected no-filter return-object :chips="true" :deletable-chips="true"
+      :multiple="spec.multiple">
       <template v-slot:item="data">
         {{ data.item.title }} - {{ data.item.subtitle }}
       </template>
 
-      <!-- <v-list-item v-if="!$isBusy && nextPageUrl" slot="append-item" class="load-more">
+      <!-- <v-list-item v-if="nextPageUrl" slot="append-item" class="load-more">
         <v-list-item-content class="text-content" @click="loadMore">
           <v-list-item-title>Load More</v-list-item-title>
         </v-list-item-content>

package/components/fields/file.vue

@@ -34,6 +34,7 @@
 
 <script>
 import Uploader from "../../utils/glibDirectUpload";
+import { validateFile } from "../composable/file";
 
 export default {
   props: {
@@ -109,7 +110,7 @@ export default {
       );
 
       const input = this.inputElement;
-      if (upload.validateFile(this.spec)) {
+      if (validateFile(this.spec.accepts, file)) {
         this.$dispatchEvent("forms/setBusy", { value: true });
 
         // TODO: Delete