glib-web 4.34.4 → 4.35.0

package/README.md

@@ -76,6 +76,7 @@ view.chipGroup styleClasses: ['custom']
 
 - On your project's directory:
   - `rm -rf node_modules`
+  - `yarn link glib-web`
   - `yarn install`
   - `bin/vite clobber`
   - `bin/vite dev`

package/actions/snackbars/alert.js

@@ -2,16 +2,15 @@ export default class {
   execute(spec, component) {
     // Set default timeout as recommended by Vuetify
     // See https://vuetifyjs.com/en/api/v-snackbar/#props
-    const timeout = spec.timeout || 4000
-    const persistent = timeout < 0
+    const timeout = spec.timeout || 4000;
+    const persistent = timeout < 0;
 
     const properties = Object.assign({}, spec, {
       timeout: timeout,
       closeDelay: timeout,
       buttons: persistent ? [
         {
-          text: "CLOSE",
-          onClick: spec.onClose
+          text: "CLOSE"
         }
       ] : []
     });

package/actions/windows/openWeb.js

@@ -1,5 +1,6 @@
 export default class {
   execute(properties) {
-    window.open(properties["url"]);
+    const target = properties["targetWindow"] || "_blank";
+    window.open(properties["url"], target);
   }
 }

package/components/_avatar.vue

@@ -1,7 +1,7 @@
 <template>
   <common-badge :spec="spec">
-    <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>
+    <v-avatar :size="spec.size" :color="spec.backgroundColor || 'surface-variant'" :class="cssClasses">
+      <p class="initials" 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()"
@@ -14,6 +14,22 @@
 export default {
   props: {
     spec: { type: Object, required: true }
-  }
+  },
+  computed: {
+    cssClasses() {
+      // Icons are nameless when used in other components, e.g. buttons
+      this.spec.view = this.spec.view || "avatar";
+
+      return this.$classes();
+    },
+  },
 };
 </script>
+
+<style lang="scss">
+.views {
+  .initials {
+    // To be overridden
+  }
+}
+</style>

package/components/_internal_button.vue

@@ -4,6 +4,8 @@
     :active="$classesInclude('active')" :icon="$classes().includes('icon') ? $vuetify : null" @click="onClick">
     <!-- <span v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span> -->
     <common-icon v-if="spec.icon" :spec="spec.icon || {}" />
+    <common-avatar v-if="spec.avatar" :spec="spec.avatar || {}" />
+
     <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
       {{ spec.text }}
     </div>

package/components/composable/upload_nothing.js

@@ -0,0 +1,21 @@
+import { useFileUtils, validateFile } from "./file";
+
+const { makeKey, Item } = useFileUtils();
+
+function uploadFiles({ droppedFiles, files, spec }) {
+  const { accepts } = spec;
+  let key = '';
+  files.value = {};
+  for (let index = 0; index < droppedFiles.length; index++) {
+    if (!validateFile(accepts, droppedFiles[index])) {
+      continue;
+    }
+    key = makeKey();
+    files.value[key] = new Item({ el: droppedFiles[index], status: 'pending' });
+    // validate per file, skip if invalid
+  }
+}
+function submitOnAllUploaded(obj) { }
+function setBusyWhenUploading(obj) { }
+
+export { uploadFiles, submitOnAllUploaded, setBusyWhenUploading };

package/components/fields/file.vue

@@ -26,9 +26,10 @@
         <glib-component v-if="spec.infoSpec" :spec="spec.infoSpec"></glib-component>
       </div>
     </div>
-    <input ref="directUploadFile" style="display: none" type="file" @change="uploadFiles" />
+    <input ref="directUploadFile" :name="spec.directUploadUrl ? '' : fieldName" style="display: none" type="file"
+      @change="uploadFiles" />
+    <input v-if="spec.directUploadUrl" type="hidden" :name="fieldName" :value="fileValue" :disabled="inputDisabled" />
     <v-progress-linear class="mt-1" v-if="showProgress" v-model="progress.value" />
-    <input type="hidden" :name="fieldName" :value="fileValue" :disabled="inputDisabled" />
   </div>
 </template>
 
@@ -88,6 +89,8 @@ export default {
       this.fileValue = null;
     },
     displayImagePreview(file, blob) {
+      if (!file.type.startsWith('image')) return;
+
       let reader = new FileReader();
       reader.onload = (e) => {
         this.fileTitle = file.name;
@@ -151,6 +154,10 @@ export default {
       }
     },
     uploadFiles(e) {
+      if (!this.spec.directUploadUrl) {
+        this.displayImagePreview(e.target.files[0], {});
+        return;
+      }
       Array.from(e.target.files).forEach((file) => this.uploadFile(file));
     },
     // toggleDisplayProgressIndicator() {

package/components/fields/multiUpload.vue

@@ -2,7 +2,8 @@
   <div :style="$styles()" :class="$classes()" v-if="loadIf">
     <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">
+      <input :name="props.spec.directUploadUrl ? '' : fieldName" 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>
@@ -10,8 +11,11 @@
         <p v-if="props.spec.hint" class="subtitle">{{ props.spec.hint }}</p>
       </div>
 
-      <input v-for="(file, index) in files" type="hidden" :name="fieldName" :value="file.signedId"
-        :disabled="inputDisabled" :key="`hidden-${index}`">
+
+      <template v-if="props.spec.directUploadUrl">
+        <input v-for="(file, index) in files" type="hidden" :name="fieldName" :value="file.signedId"
+          :disabled="inputDisabled" :key="`hidden-${index}`">
+      </template>
     </div>
 
     <div class="guploaded-file" v-if="showUploadedFile">
@@ -58,6 +62,7 @@ import { ref, computed, defineComponent, watch, getCurrentInstance } from 'vue';
 import { VIcon } from 'vuetify/components';
 import * as dropUploader from "../composable/upload";
 import * as delegateUploader from "../composable/upload_delegator";
+import * as nothingUploader from "../composable/upload_nothing";
 import { triggerOnChange, useGlibInput } from "../composable/form";
 import { nextTick } from "vue";
 import { useFilesState, useFileUtils } from "../composable/file";
@@ -70,7 +75,8 @@ export default defineComponent({
   props: { spec: { type: Object } },
   components: { VIcon },
   setup(props) {
-    const uploader = props.spec.strategy == 'delegate' ? delegateUploader : dropUploader;
+    const defaultUploader = props.spec.directUploadUrl ? dropUploader : nothingUploader;
+    const uploader = props.spec.strategy == 'delegate' ? delegateUploader : defaultUploader;
 
     const fileSelect = ref(null);
     const container = ref(null);

package/components/panels/form.vue

@@ -141,7 +141,7 @@ export default {
           this.formCtx = { form: this.$refs.form };
           if (onChange) this.$executeOnChange();
         };
-        this.formElement.onchange = eventFiltering.debounce(onChangeHandler, 300);
+        this.formElement.onchange = eventFiltering.debounce(onChangeHandler, 500);
 
         this.formElement.oninput = (event) => this.glibForm.updateDirtyState(event);
       }

package/components/panels/table.vue

@@ -70,6 +70,21 @@
             </td>
           </tr>
         </tbody>
+
+        <tfoot>
+          <tr v-if="section.footer" :style="$styles(section.footer)">
+            <template v-if="section.footer.dataCells">
+              <th v-for="(cell, index) in section.footer.dataCells" :key="index"
+                :colSpan="colSpan(section.footer, index)">
+                {{ cell }}
+              </th>
+            </template>
+            <th v-for="(cell, index) in section.footer.cellViews" v-else :key="index"
+              :colSpan="colSpan(section.footer, index)">
+              <glib-component :spec="cell" />
+            </th>
+          </tr>
+        </tfoot>
       </template>
     </table>
 

package/nav/appBar.vue

@@ -19,6 +19,7 @@
     <v-toolbar-items :class="navBar.collapseButtonsOnMobile ? 'hidden-sm-and-down' : null">
       <template v-for="(btn, index) in navBar.rightButtons">
         <common-dropdownMenu v-if="btn.childButtons" :key="index" :spec="btn" />
+        <v-divider vertical thickness="1" v-else-if="btn.type == 'divider'" :key="`divider_${index}`"></v-divider>
         <common-button v-else :key="`right_${index}`" :spec="buttonSpec(btn)" />
       </template>
     </v-toolbar-items>
@@ -124,7 +125,7 @@ export default {
       });
     },
     triggerDrawer() {
-      eventBus.$emit("drawers/toggle");
+      eventBus.$emit("glib-drawers/toggle");
     },
     // viewSourceEnabled: function () {
     //   // return process.env.NODE_ENV === "development";

package/nav/snackbar.vue

@@ -1,7 +1,6 @@
 <template>
-  <v-snackbar :vertical="vertical" v-model="show" :location="location" :color="gcolor"
-    :timeout="spec.timeout" :close-delay="spec.closeDelay"
-    :variant="variant">
+  <v-snackbar :vertical="vertical" v-model="show" :location="location" :color="gcolor" :timeout="spec.timeout"
+    :close-delay="spec.closeDelay" :variant="variant">
     <common-message :spec="spec" />
 
     <template v-slot:actions v-if="spec.buttons">
@@ -15,6 +14,7 @@
 </template>
 
 <script>
+import Action from "../action";
 import { determineColor, determineVariant } from '../utils/constant';
 
 export default {
@@ -36,15 +36,19 @@ export default {
       return this.spec.location || 'top';
     }
   },
+  watch: {
+    show: function (value) {
+      if (value) return;
+      Action.execute(this.spec.onClose, this);
+    }
+  },
   methods: {
     $ready() {
       this.variant = determineVariant(this.spec.styleClasses, 'elevated');
       this.vertical = [this.spec.styleClasses].flat().includes('vertical');
     },
     click: function (spec) {
-      const onClick = spec["onClick"];
       this.show = false;
-      GLib.action.execute(onClick, this);
     }
   }
 };

package/package.json

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