glib-web 4.5.1 → 4.6.1

package/components/_responsive.vue

@@ -1,5 +1,6 @@
 <template>
-  <component :is="componentName" :class="cssClasses" :style="$styles()" :href="$href()" @click="$onClick()">
+  <component v-if="loadIf" :is="componentName" :class="cssClasses" :style="$styles()" :href="$href()"
+    @click="$onClick()">
     <panels-responsive v-if="header" :spec="header" />
 
     <!--

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" />
     <div v-else>Unsupported view: {{ spec.view }}</div>
   </Suspense>
 </template>
@@ -228,17 +228,6 @@ export default {
       // $passthrough: true
     };
   },
-  computed: {
-    menter() {
-      return this.spec.onMouseEnter ? 'mouseenter' : null;
-    },
-    mleave() {
-      return this.spec.onMouseLeave ? 'mouseleave' : null;
-    },
-    dstart() {
-      return this.spec.dragData ? 'dragstart' : null;
-    }
-  },
   watch: {
     spec: {
       handler(spec) {
@@ -284,9 +273,6 @@ export default {
     },
     handlePopover(spec) {
       GLib.action.execute(spec, this);
-    },
-    handleDragStart(event) {
-      event.dataTransfer.setData('text', JSON.stringify(this.spec.dragData));
     }
   },
 };

package/components/composable/dirtyState.js

@@ -12,14 +12,14 @@ export function useDirtyState() {
   };
 
   const clearDirtyState = (context) => {
-    const ctx = context || ctx;
+    context ||= ctx();
     ctx.isFormDirty = false;
   };
 
   const setDirty = (context) => (context || ctx()).isFormDirty = true;
 
   const updateDirtyState = (context) => {
-    const ctx = context || ctx;
+    context ||= ctx();
     const clean = Object.keys(dirtySpecs).reduce((prev, curr) => {
       if (dirtySpecs[curr].disable) return prev;
       const initValue = dirtySpecs[curr].initValue || '';
@@ -27,7 +27,7 @@ export function useDirtyState() {
       return prev && (currValue.toString() == initValue.toString() || !currValue.toString());
     }, true);
 
-    clean ? clearDirtyState(ctx) : setDirty(ctx);
+    clean ? clearDirtyState(context) : setDirty(context);
   };
 
   return { clearDirtyState, setDirty, isDirty, updateDirtyState };

package/components/composable/file.js

@@ -13,6 +13,7 @@ function useFileUtils() {
       this._url = options.url;
       this._type = options.type;
       this.el = options.el;
+      this.size = options.size;
     }
 
     isImage() {

package/components/composable/tree.js

@@ -37,7 +37,7 @@ function useGlibTreeNode(props) {
   }
 
   function handleDragLeave(e, node) {
-    node.selected = false;
+    if (selected.value !== node.id) node.selected = false;
     currTreeNode.value = null;
   }
 

package/components/composable/upload_delegator.js

@@ -1,5 +1,6 @@
 import { vueApp } from "../../store";
 import { useFileUtils } from "./file";
+import Uploader from "../../utils/glibDirectUpload";
 
 const { makeKey } = useFileUtils();
 
@@ -11,6 +12,11 @@ function uploadFiles(obj) {
       files: Array.from(droppedFiles).reduce((prev, curr) => {
         prev[makeKey()] = curr;
 
+        const uploader = new Uploader(curr, spec.directUploadUrl, undefined, spec.storagePrefix, spec.metadata, spec.tagging || spec.tags);
+        if (!uploader.validateFile({ accepts: spec.accepts })) {
+          return;
+        }
+
         return prev;
       }, {}),
       spec: spec

package/components/fields/_select.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="container" :style="$styles()" :class="$classes()" v-if="loadIf">
-    <v-autocomplete :color="gcolor" v-model="fieldModel" :label="label" :items="normalizedOptions"
+    <component :is="compName" :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
@@ -27,7 +27,7 @@
       <template v-slot:append-item v-if="spec.footer">
         <common-responsive :spec="spec.footer" />
       </template>
-    </v-autocomplete>
+    </component>
 
     <input v-for="(item, index) in values" :key="index" type="hidden" :disabled="inputDisabled" :name="fieldName"
       :value="item" />
@@ -54,6 +54,9 @@ export default {
     };
   },
   computed: {
+    compName() {
+      return this.spec.searchable ? 'v-autocomplete' : 'v-select';
+    },
     normalizedOptions() {
       return this.spec.options.map(i => {
         switch (i.type) {
@@ -123,3 +126,10 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" 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/multiUpload.vue

@@ -20,20 +20,29 @@
       <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="image-icon">
+                <img v-if="file[1].isImage()" :src="pic" alt="img-icon" />
+                <img v-else-if="file[1].type.startsWith('application/pdf')" :src="pdf" alt="img-icon" />
+                <img v-else :src="doc" alt="img-icon" />
+              </div>
               <div class="progress">
-                <div class="label"><a :href="file[1].url" target="_blank">{{ `${file[1].name}` }}</a><span
-                    v-if="file[1].message" style="font-size: 0.75em">{{
-                      file[1].message }}</span></div>
-                <div class="background" v-show="file[1].progress.value > 0">
-                  <div class="value" :style="{ width: `${file[1].progress.value}%` }"></div>
+                <div class="label"><a :href="file[1].url" target="_blank">{{ `${file[1].name}` }}</a>
+                  <span v-if="file[1].message" :class="file[1].message != 'Completed' ? 'text-error' : ''">
+                    {{ file[1].message }}
+                  </span>
                 </div>
               </div>
+              <div @click.stop="handleRemoveFile(file[0])" class="close-btn">
+                <v-icon size="24" color="black">close</v-icon>
+              </div>
+            </div>
+          </div>
+          <div class="percentage-wrapper" v-show="file[1].progress.value > 0 && file[1].progress.value < 100">
+            <div class="background">
+              <div class="value" :style="{ width: `${file[1].progress.value}%` }"></div>
             </div>
+            <div class="percentage">{{ parseInt(file[1].progress.value) }}%</div>
           </div>
         </div>
       </template>
@@ -73,12 +82,14 @@
   .file-container {
     display: flex;
     align-items: center;
+    flex-direction: column;
     border-radius: 6px;
     background-color: #f3f4f6;
     width: 100%;
     padding: 16px;
     margin-bottom: 16px;
     min-height: 72px;
+    gap: 8px;
   }
 
   .file {
@@ -89,8 +100,24 @@
     .status {
       display: flex;
       width: 100%;
+      gap: 8px;
       align-items: center;
 
+      .image-icon {
+        width: 40px;
+        height: 40px;
+        background-color: #fff;
+        border-radius: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
       .icon {
         margin-right: 8px;
       }
@@ -104,14 +131,13 @@
         .label {
           /* mb-1 */
           display: flex;
-          align-items: center;
-          justify-content: space-between;
-          flex-wrap: nowrap;
+          flex-direction: column;
           margin-bottom: 4px;
         }
 
         .label a {
           color: #47495F;
+          font-weight: 600;
         }
 
         .label a:hover {
@@ -124,34 +150,41 @@
           text-decoration: none !important;
         }
 
-        .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;
     }
   }
+
+  .background {
+    width: 100%;
+    background-color: #e6e6e6;
+    border-radius: 9999px;
+    height: 8px;
+    display: flex;
+
+    .value {
+      background-color: #0A2A9E;
+      height: inherit;
+      border-radius: inherit;
+    }
+  }
+
+  .percentage-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    .percentage {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+  }
 }
 
 .gdrop-file {
@@ -201,6 +234,9 @@ import * as delegateUploader from "../composable/upload_delegator";
 import { triggerOnChange } from "../composable/form";
 import { nextTick } from "vue";
 import { useFilesState, useFileUtils } from "../composable/file";
+import doc from "./selectAsset/doc-1.png"
+import pic from "./selectAsset/pic-1.png"
+import pdf from "./selectAsset/pdf-1.png"
 const { makeKey, Item, signedIds } = useFileUtils();
 
 export default defineComponent({
@@ -336,7 +372,10 @@ export default defineComponent({
       handleRemoveFile,
       showUploadedFile,
       uploadTitle,
-      props
+      props,
+      doc,
+      pic,
+      pdf,
     };
   }
 })

package/components/mixins/generic.js

@@ -2,7 +2,21 @@ import { vueApp } from "../../store";
 import { ValidationFactory } from "../validation";
 
 export default {
+  computed: {
+    menter() {
+      return this.spec.onMouseEnter ? 'mouseenter' : null;
+    },
+    mleave() {
+      return this.spec.onMouseLeave ? 'mouseleave' : null;
+    }
+  },
   methods: {
+    dstart(dragData) {
+      return dragData || this.spec.dragData ? 'dragstart' : null;
+    },
+    handleDragStart(event, dragData) {
+      event.dataTransfer.setData('text', JSON.stringify(dragData || this.spec.dragData));
+    },
     $componentName() { // Can be overridden
       if (this.spec) {
         return this.spec.view?.replace('-v1', '');

package/components/mixins/styles.js

@@ -298,7 +298,12 @@ export default {
       const vm = realComponent(this);
       const val = vm.$sanitizeValue(vm.$externalizeValue(Utils.type.isNotNull(newSpec.value) ? newSpec.value : this.fieldModel));
       newSpec.value = isNeedToBeFixed(val, vm) ? val.toFixed(vm.spec.precision || NUMBER_PRECISION) : val;
-      vm.fieldModel = newSpec.value;
+
+      if (newSpec.value !== vm.fieldModel) {
+        vm.fieldModel = newSpec.value;
+        vm.$executeOnChange();
+      }
+
       if (Utils.type.isNotNull(newSpec.displayed)) vm._show = newSpec.displayed;
       vm._submitWhenNotDisplayed = newSpec.submitWhenNotDisplayed;
       Object.assign(vm.spec, newSpec);

package/components/panels/responsive.vue

@@ -1,5 +1,5 @@
 <template>
-  <common-responsive ref="delegate" v-if="loadIf" :spec="spec" />
+  <common-responsive ref="delegate" :spec="spec" />
 </template>
 
 <script>

package/components/panels/table.vue

@@ -11,7 +11,7 @@
                 <template v-if="importable">
                   <span>{{
                     rows(section).length + section.dataRows.length
-                  }}
+                    }}
                     rows</span>
                   <input ref="fileInput" style="display: none;" type="file" accept=".csv"
                     @change="loadFile($event, section)" />
@@ -48,7 +48,8 @@
         <tbody>
           <!-- <tr v-for="(row, index) in section.rows" :key="`row_${index}`"> -->
           <template v-for="(row, rowIndex) in section.rows" :key="`row_${rowIndex}`">
-            <tr :class="row.onClick ? 'clickable' : ''">
+            <tr :class="row.onClick ? 'clickable' : ''"
+              @[dstart(row.dragData)]="(e) => handleDragStart(e, row.dragData)" :draggable="!!row.dragData">
               <td v-for="(cell, cellIndex) in row.cellViews" :key="`cell_${cellIndex}`"
                 :colSpan="colSpan(row, cellIndex)" :style="colStyles(row, cellIndex)">
                 <span>

package/components/panels/tree/TreeNode.js

@@ -7,6 +7,7 @@ export default class TreeNode {
     } else {
       this.expand = false;
       this.title = options.title;
+      this.subtitle = options.subtitle;
       this.id = options.id;
       this.dropData = options.dropData;
       this.icon = options.icon;

package/components/panels/tree/standard.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="gtree-row">
     <div :class="`${node.selected ? 'node selected' : 'node'}`" @dragover="(e) => handleDragOver(e, node)"
-      @drop="(e) => handleDrop(e, node)" @dragleave="(e) => handleDragLeave(e, node)">
+      @drop="(e) => handleDrop(e, node)" @dragleave="(e) => handleDragLeave(e, node)" @click="handleClick(node)">
       <div class="content">
-        <v-btn style="z-index: 11" size="24" :icon="node.expand ? 'arrow_drop_down' : 'arrow_right'"
-          v-if="props.node.rows" @click="node.expand = !node.expand" variant="plain"></v-btn>
+        <v-btn style="z-index: 11;" size="24" :icon="node.expand ? 'arrow_drop_down' : 'arrow_right'"
+          v-if="props.node.rows" @click="node.expand = !node.expand" variant="plain" @click.stop></v-btn>
         <div style="width: 24px" v-else></div>
-        <div class="title" @click="handleClick(node)">
-          <v-icon v-if="node.icon" size="24" :icon="node.icon.name" :color="node.icon.color"></v-icon>
-          <span>{{ node.title }}</span>
+        <div class="text">
+          <v-icon v-if="node.icon" :size="node.icon.size || 24" :icon="node.icon.name"
+            :color="node.icon.color"></v-icon>
+          <div style="display: flex; flex-direction: column; width: 100%">
+            <div class="title">{{ node.title }}</div>
+            <div class="subtitle" v-if="node.subtitle">{{ node.subtitle }}</div>
+          </div>
         </div>
       </div>
       <div class="overlay"></div>
@@ -25,6 +29,7 @@
 <style lang="scss">
 .gtree-row .node {
   position: relative;
+  width: 100%;
 }
 
 .gtree-row .node .overlay {
@@ -34,7 +39,7 @@
 }
 
 .gtree-row .node .content {
-  padding: 0 8px;
+  padding: 8px 16px;
   width: 100%;
   display: flex;
   align-items: center;
@@ -48,11 +53,25 @@
   opacity: 0.04;
 }
 
-.gtree-row .node .title {
+.gtree-row .node .content .text {
+  width: 100%;
   display: flex;
-  gap: 2px;
+  gap: 6px;
   align-items: center;
   z-index: 10;
+  pointer-events: none;
+  overflow: hidden;
+
+  .title,
+  .subtitle {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .subtitle {
+    font-weight: lighter;
+    font-size: smaller;
+  }
 }
 
 .gtree-row .child-0-row {
@@ -65,7 +84,6 @@
   gap: 2px;
   align-items: center;
   cursor: pointer;
-  height: 40px;
 }
 </style>
 

package/components/panels/tree.vue

@@ -1,10 +1,10 @@
 <template>
   <div :style="$styles()" :class="$classes()" v-if="loadIf">
-    <template v-for="(section, index) in props.spec.sections" :key="index">
+    <template v-for="(section, index) in sections" :key="`${index}-${compKey}`">
       <panels-responsive :spec="section.header" v-if="section.header"></panels-responsive>
 
       <component :is="template(row.template)" v-for="(row, index) in section.rows"
-        v-bind="{ node: new TreeNode(row), level: 0 }" :key="index">
+        v-bind="{ node: treeNode(row), level: 0 }" :key="index">
       </component>
 
       <panels-responsive :spec="section.footer" v-if="section.footer"></panels-responsive>
@@ -24,14 +24,38 @@ function template(name) {
   }[name];
 }
 
+function treeNode(row) {
+  return new TreeNode(row);
+}
+
 const props = defineProps(['spec']);
 const dropBox = ref({ data: {}, files: [] });
 const selected = computed(() => props.spec.selected);
 const currTreeNode = ref({});
+const sections = ref(props.spec.sections);
+const compKey = ref(0);
+
+watch(props, (val) => {
+  sections.value = val.spec.sections;
+  compKey.value += 1;
+});
 
 watch(dropBox, (val) => {
   if (!val) return;
-  Action.execute(props.spec.onDrop, {}, val);
+
+  if (val.files.length > 0) {
+    Action.execute(props.spec.onDropFile, {}, val);
+  } else {
+    delete val.files;
+
+    const params = {
+      [props.spec.paramNameForFormData || 'formData']: val.data
+    };
+
+    const data = Object.assign({}, props.spec.onDropView, params);
+    // TODO: Need to pass the component as the second parameter
+    Action.execute(data, {});
+  }
 });
 
 provide('dropBox', dropBox);

package/package.json

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