glib-web 4.35.2 → 4.35.4

package/components/composable/file.js

@@ -126,4 +126,16 @@ function validateFile(accepts, file) {
   return true;
 }
 
-export { useFileUtils, useFilesState, validateFile };
+function validateFiles({ files, newFiles, accepts }) {
+  const { maxFileLength, maxFileLengthErrorText } = accepts;
+  if (maxFileLength !== null) {
+    const fileLength = newFiles.length + Object.keys(files.value).length;
+    if (fileLength > maxFileLength) {
+      showError(maxFileLengthErrorText);
+      return false;
+    }
+  }
+  return true;
+}
+
+export { useFileUtils, useFilesState, validateFile, validateFiles };

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, validateFile } from "./file";
+import { useFilesState, useFileUtils, validateFile, validateFiles } from "./file";
 const { makeKey, Item } = useFileUtils();
 
 function submitOnAllUploaded({ url, formData, files, actionName }) {
@@ -36,6 +36,8 @@ function uploadFiles({ droppedFiles, files, spec, container, onAfterUploaded })
   let { responseMessages } = spec;
   responseMessages ||= {};
 
+  if (!validateFiles({ newFiles: droppedFiles, accepts: spec.accepts, files })) return;
+
   let key = '';
   for (let index = 0; index < droppedFiles.length; index++) {
     // show new dropped file and track progress

package/components/composable/upload_nothing.js

@@ -1,9 +1,12 @@
-import { useFileUtils, validateFile } from "./file";
+import { useFileUtils, validateFile, validateFiles } from "./file";
 
 const { makeKey, Item } = useFileUtils();
 
 function uploadFiles({ droppedFiles, files, spec }) {
   const { accepts } = spec;
+
+  if (!validateFiles({ newFiles: droppedFiles, files, accepts })) return;
+
   let key = '';
   files.value = {};
   for (let index = 0; index < droppedFiles.length; index++) {

package/components/fields/_select.vue

@@ -16,9 +16,11 @@
             <glib-component :spec="item.raw" />
           </v-list-subheader>
           <v-divider v-else-if="item.raw.divider"></v-divider>
-          <select-item-default v-else-if="!item.raw.imageUrl" :context="props" :item="item"
-            :spec="spec"></select-item-default>
-          <select-item-with-image :context="props" :item="item" :spec="spec" v-else></select-item-with-image>
+          <select-item-with-image :context="props" :item="item" :spec="spec"
+            v-else-if="item.raw.imageUrl"></select-item-with-image>
+          <select-item-with-icon :context="props" :item="item" :spec="spec"
+            v-else-if="item.raw.icon"></select-item-with-icon>
+          <select-item-default v-else :context="props" :item="item" :spec="spec"></select-item-default>
         </div>
       </template>
 
@@ -57,18 +59,19 @@
 import inputVariant from '../mixins/inputVariant';
 import { determineDensity } from "../../utils/constant";
 import { triggerOnChange, triggerOnInput, useGlibInput } from "../composable/form";
-import Hash from '../../utils/hash';
 import { isBoolean } from '../../utils/type';
 
 import { useGlibSelectable, watchNoneOfAbove } from '../composable/selectable';
 import { ref } from 'vue';
 import SelectItemDefault from "./_selectItemDefault.vue";
 import SelectItemWithImage from "./_selectItemWithImage.vue";
+import SelectItemWithIcon from "./_selectItemWithIcon.vue";
 
 export default {
   components: {
     'select-item-default': SelectItemDefault,
-    'select-item-with-image': SelectItemWithImage
+    'select-item-with-image': SelectItemWithImage,
+    'select-item-with-icon': SelectItemWithIcon
   },
   mixins: [inputVariant],
   props: {
@@ -167,21 +170,6 @@ export default {
     },
     $registryEnabled() {
       return false;
-    },
-    itemIconSpec(iconSpec) {
-      const hash = new Hash(iconSpec);
-      const name = hash.remove('name');
-      const size = hash.remove('size');
-      const color = hash.remove('color');
-
-      return hash.deepMerge({
-        view: 'icon',
-        material: {
-          name: name,
-          size: size,
-          color: color
-        }
-      });
     }
   }
 };

package/components/fields/_selectItemDefault.vue

@@ -1,7 +1,6 @@
 <template>
   <v-list-item v-bind="props.context" :disabled="props.item.raw.disabled">
     <template v-slot:prepend="{ isActive }">
-      <glib-component v-if="props.item.raw.icon" :spec="itemIconSpec(props.item.raw.icon)" />
       <v-list-item-action start v-if="props.spec.multiple">
         <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
       </v-list-item-action>

package/components/fields/_selectItemWithIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-list-item v-bind="props.context" :disabled="props.item.raw.disabled">
+    <template v-slot:prepend="{ isActive }">
+      <v-list-item-action v-if="props.spec.multiple">
+        <v-checkbox-btn :model-value="isActive"></v-checkbox-btn>
+      </v-list-item-action>
+      <glib-component :spec="itemIconSpec(props.item.raw.icon)" />
+    </template>
+  </v-list-item>
+</template>
+
+<script setup>
+import Hash from "../../utils/hash";
+
+const props = defineProps(['context', 'item', 'spec']);
+
+function itemIconSpec(iconSpec) {
+  const hash = new Hash(iconSpec);
+  const name = hash.remove('name');
+  const size = hash.remove('size');
+  const color = hash.remove('color');
+
+  return hash.deepMerge({
+    view: 'icon',
+    material: {
+      name: name,
+      size: size,
+      color: color
+    }
+  });
+}
+</script>

package/components/fields/file.vue

@@ -89,13 +89,13 @@ export default {
       this.fileValue = null;
     },
     displayImagePreview(file, blob) {
+      this.fileTitle = file.name;
+      this.fileValue = blob.signed_id;
       if (!file.type.startsWith('image')) return;
 
       let reader = new FileReader();
       reader.onload = (e) => {
-        this.fileTitle = file.name;
         this.fileImage = e.target.result;
-        this.fileValue = blob.signed_id;
       };
       reader.readAsDataURL(file);
     },

package/nav/appBar.vue

@@ -16,13 +16,13 @@
     </span>
     <v-spacer></v-spacer>
 
-    <v-toolbar-items :class="navBar.collapseButtonsOnMobile ? 'hidden-sm-and-down' : null">
+    <div :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>
+    </div>
 
     <common-dropdownMenu v-if="showMobileMenu" class="hidden-md-and-up" :spec="mobileMenu" />
 

package/package.json

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