glib-web 3.20.4 → 3.20.6

package/app.vue

@@ -37,7 +37,6 @@ 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 { merge } from 'lodash.merge';
 
 const { watchDirtyState } = useDirtyState();
 const { signedIds } = useDropableUtils();
@@ -169,7 +168,9 @@ export default {
       );
     },
     $ready() {
-      document.title = this.page.title;
+      this.$type.ifString(this.page.title, (title) => {
+        document.title = title;
+      });
 
       // this.$wsInitPhoenixSocket(this.page.phoenixSocket);
       // this.$wsInitActionCable(this.page.actionCable);

package/components/_responsive.vue

@@ -59,6 +59,7 @@ export default {
       // force update if child is charts
       if (item.view.toString().startsWith('charts/')) return item;
 
+      // TODO: fix reactivity issue
       return index;
 
       // return `view${index}_${item.view}`;

package/components/fields/_patternText.vue

@@ -1,8 +1,8 @@
 <template>
   <div :style="$styles()" :class="classes()">
     <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
-    <v-text-field v-model="fieldModel" :name="fieldName" :label="spec.label" :hint="spec.hint" :type="type"
-      :readonly="spec.readOnly" :disabled="inputDisabled" :min="$sanitizeValue(spec.min)"
+    <v-text-field color="primary" 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 />

package/components/fields/_select.vue

@@ -1,12 +1,12 @@
 <template>
   <div :style="$styles()" :class="classes()">
-    <v-autocomplete 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="primary" 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">
 
-      <template #item="{props, item}">
+      <template #item="{ props, item }">
         <v-list-subheader v-if="item.raw.header">
           {{ item.raw.header }}
         </v-list-subheader>
@@ -71,9 +71,9 @@ export default {
     },
     label() {
       if (this.focused && this.spec.hint) {
-        return `${this.spec.label} ${this.spec.hint}`
+        return `${this.spec.label} ${this.spec.hint}`;
       }
-      return this.spec.label
+      return this.spec.label;
     }
   },
   methods: {
@@ -90,7 +90,7 @@ export default {
           default:
             return Object.assign({}, i, {
               props: { subtitle: i.subtitle }
-            })
+            });
         }
       });
     },

package/components/fields/autocomplete.vue

@@ -1,10 +1,11 @@
 <!-- TODO: Remove (deprecated) -->
 <template>
   <div :style="genericStyles()">
-    <v-combobox v-model="fieldModel" :name="fieldName" :label="spec.label" :items="options || []" :chips="spec.multiple"
-      :deletable-chips="spec.multiple" :multiple="spec.multiple" :readonly="spec.readOnly" :disabled="inputDisabled"
-      :hint="spec.hint" :placeholder="spec.placeholder" :outlined="$classes().includes('outlined') || null"
-      :append-icon="append.icon" validate-on="blur" :variant="variant" persistent-placeholder />
+    <v-combobox color="primary" v-model="fieldModel" :name="fieldName" :label="spec.label" :items="options || []"
+      :chips="spec.multiple" :deletable-chips="spec.multiple" :multiple="spec.multiple" :readonly="spec.readOnly"
+      :disabled="inputDisabled" :hint="spec.hint" :placeholder="spec.placeholder"
+      :outlined="$classes().includes('outlined') || null" :append-icon="append.icon" validate-on="blur"
+      :variant="variant" persistent-placeholder />
   </div>
 </template>
 

package/components/fields/check.vue

@@ -3,9 +3,10 @@
     <!-- This hidden field should always be there to make sure the submitted param is not empty,
          which could cause "Not accessible" error on the server. -->
     <input v-model="uncheckValue" type="hidden" :name="fieldName" />
-    <v-checkbox v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly" :disabled="inputDisabled"
-      :label="fieldModel ? spec.onLabel || spec.label : spec.label" :true-icon="spec.onIcon" :false-icon="spec.offIcon"
-      :value="spec.value" :true-value="spec.checkValue" hide-details @change="changed" color="primary"></v-checkbox>
+    <v-checkbox color="primary" v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly"
+      :disabled="inputDisabled" :label="fieldModel ? spec.onLabel || spec.label : spec.label" :true-icon="spec.onIcon"
+      :false-icon="spec.offIcon" :value="spec.value" :true-value="spec.checkValue" hide-details
+      @change="changed"></v-checkbox>
   </div>
 </template>
 

package/components/fields/chipGroup.vue

@@ -5,7 +5,7 @@ w<template>
       <v-chip v-for="(option, index) in spec.options" :key="index" filter :variant="variant">{{
     option.text }}</v-chip>
     </v-chip-group>
-    <input v-for="(item, index) in $internalizeValue(fieldModel) " :key="index" type="hidden" :disabled="inputDisabled"
+    <input v-for="(item, index) in $internalizeValue(fieldModel)  " :key="index" type="hidden" :disabled="inputDisabled"
       :name="fieldName" :value="item" />
   </div>
 </template>
@@ -22,7 +22,7 @@ export default defineComponent({
   },
   computed: {
     color() {
-      return determineColor(this.spec.styleClasses, this.spec.color);
+      return determineColor(this.spec.styleClasses, this.spec.color || 'primary');
     }
   },
   methods: {

package/components/fields/multiUpload.vue

@@ -6,11 +6,11 @@
 
       <div class="cloud" style="pointer-events: none;">
         <v-icon ref="icon" size="48" class="icon">cloud_upload</v-icon>
-        <h4 v-if="spec.placeholder" class="title">{{ spec.placeholder }}</h4>
-        <p v-if="spec.hint" class="subtitle">{{ spec.hint }}</p>
+        <h4 v-if="props.spec.placeholder" class="title">{{ props.spec.placeholder }}</h4>
+        <p v-if="props.spec.hint" class="subtitle">{{ props.spec.hint }}</p>
       </div>
 
-      <input v-for="(file, index) in Object.values(files)" type="hidden" :name="spec.name" :value="file.signedId"
+      <input v-for="(file, index) in Object.values(files)" type="hidden" :name="props.spec.name" :value="file.signedId"
         :disabled="inputDisabled" :key="`hidden-${index}`">
     </div>
 
@@ -28,7 +28,7 @@
               <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>
+                      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>
@@ -205,18 +205,17 @@ export default defineComponent({
   props: { spec: { type: Object } },
   components: { VIcon },
   setup(props) {
-    const spec = props.spec;
     const fileSelect = ref(null);
     const container = ref(null);
     const icon = ref(null);
     const { ctx } = getCurrentInstance();
 
-    const responseMessages = spec.responseMessages;
-    const uploadTitle = spec.uploadTitle || 'File added';
+    const responseMessages = props.spec.responseMessages;
+    const uploadTitle = props.spec.uploadTitle || 'File added';
 
     let files = ref({});
-    if (spec.files && spec.files.length > 0) {
-      files = ref(spec.files.reduce((prev, curr) => {
+    if (props.spec.files && props.spec.files.length > 0) {
+      files = ref(props.spec.files.reduce((prev, curr) => {
         const key = makeKey();
 
         prev[key] = new Item({
@@ -232,11 +231,11 @@ export default defineComponent({
       }, {}));
     }
 
-    if (spec.onFinishUpload) {
+    if (props.spec.onFinishUpload) {
       const { uploaded } = useFilesState(files);
       watch(uploaded, (val, oldVal) => {
         if (val) {
-          nextTick(() => GLib.action.execute(spec.onFinishUpload, ctx));
+          nextTick(() => GLib.action.execute(props.spec.onFinishUpload, ctx));
         }
       });
     }
@@ -253,8 +252,8 @@ export default defineComponent({
         {
           droppedFiles: e.dataTransfer.files,
           files: files,
-          directUploadUrl: spec.directUploadUrl,
-          accepts: spec.accepts,
+          directUploadUrl: props.spec.directUploadUrl,
+          accepts: props.spec.accepts,
           responseMessages: responseMessages,
           container: container
         }
@@ -301,8 +300,8 @@ export default defineComponent({
           {
             droppedFiles: e.target.files,
             files: files,
-            directUploadUrl: spec.directUploadUrl,
-            accepts: spec.accepts,
+            directUploadUrl: props.spec.directUploadUrl,
+            accepts: props.spec.accepts,
             responseMessages: responseMessages,
             container: container
           }
@@ -325,7 +324,8 @@ export default defineComponent({
       handleRemoveFile,
       showUploadedFile,
       responseMessages,
-      uploadTitle
+      uploadTitle,
+      props
     };
   }
 })

package/components/fields/text.vue

@@ -1,11 +1,12 @@
 <template>
   <div :style="$styles()" :class="$classes()">
-    <v-text-field ref="field" v-model="fieldModel" :label="spec.label" :name="fieldName" :placeholder="spec.placeholder"
-      :density="density" :hint="spec.hint" :maxlength="spec.maxLength || 255" :readonly="spec.readOnly"
-      :disabled="inputDisabled" :type="config.type" :rules="rules" :prepend-inner-icon="leftIconName"
-      :append-inner-icon="config.appendIcon" :prefix="spec.leftText" :suffix="spec.rightText" :min="spec.min"
-      :max="spec.max" :autofocus="spec.autoFocus || false" validate-on="blur" @click:appendInner="onRightIconClick"
-      @input="onChange" :variant="variant" persistent-placeholder @keyup="$onTyping({ duration: 2000 })" />
+    <v-text-field color="primary" ref="field" v-model="fieldModel" :label="spec.label" :name="fieldName"
+      :placeholder="spec.placeholder" :density="density" :hint="spec.hint" :maxlength="spec.maxLength || 255"
+      :readonly="spec.readOnly" :disabled="inputDisabled" :type="config.type" :rules="rules"
+      :prepend-inner-icon="leftIconName" :append-inner-icon="config.appendIcon" :prefix="spec.leftText"
+      :suffix="spec.rightText" :min="spec.min" :max="spec.max" :autofocus="spec.autoFocus || false" validate-on="blur"
+      @click:appendInner="onRightIconClick" @input="onChange" :variant="variant" persistent-placeholder
+      @keyup="$onTyping({ duration: 2000 })" />
   </div>
 </template>
 
@@ -158,5 +159,4 @@ export default {
 //       min-height: 0;
 //     }
 //   }
-// }
-</style>
+// }</style>

package/components/fields/textarea.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="styles()" :class="classes()">
-    <v-textarea v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint"
+    <v-textarea color="primary" v-model="fieldModel" :label="spec.label" :name="fieldName" :hint="spec.hint"
       :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :readonly="spec.readOnly" :height="height"
       :rules="$validation()" counter :outlined="$classes().includes('outlined')" :disabled="inputDisabled"
       :no-resize="$classes().includes('no-resize')" validate-on="blur" :variant="variant" :density="density"

package/components/p.vue

@@ -7,14 +7,13 @@
 // import marked from "marked";
 
 export default {
-  expose: ['text'],
-  data: function () {
-    return {
-      text: this.spec.text
-    };
-  },
   props: {
     spec: { type: Object, required: true }
+  },
+  computed: {
+    text() {
+      return this.spec.text;
+    }
   }
   // computed: {
   //   compiledText() {

package/nav/appBar.vue

@@ -63,7 +63,6 @@ export default {
     // },
     isPermanent() {
       const display = this.$vuetify.display.name;
-      console.log("isPermanent1", display);
       return display == "lg" || display == "xl";
     },
     showDrawerMenu() {

package/nav/drawer.vue

@@ -12,12 +12,11 @@
       </template>
       <glib-component v-if="spec.body" :spec="spec.body" />
 
-
       <v-list :dense="true">
         <div v-for="(item, index) in spec.rows" :key="index" class="nav-item">
           <div v-if="item.type == 'button'" class="indicator"></div>
           <v-divider v-if="item.type == 'divider'" />
-          <nav-drawerLabel v-else-if="item.type == 'label'" :spec="item" />
+          <nav-drawerLabel v-else-if="item.type == 'label'" :spec="rowSpec(item)" />
           <nav-drawerButton v-else :spec="item" />
         </div>
       </v-list>
@@ -35,10 +34,9 @@
 
 
 <script>
-// import UrlUtils from "../utils/url";
 import NavDrawerButton from "./drawerButton.vue";
 import NavDrawerLabel from "./drawerLabel.vue";
-import bus from "../utils/eventBus";
+// import bus from "../utils/eventBus";
 import { useDisplay } from "vuetify";
 
 export default {
@@ -46,11 +44,10 @@ export default {
     "nav-drawerButton": NavDrawerButton,
     "nav-drawerLabel": NavDrawerLabel,
   },
-  // props: ["spec", "trigger", "permanent"],
   props: {
     spec: { type: Object, required: true },
     trigger: { type: [Object, Date], default: null },
-    permanent: { type: Boolean, required: true },
+    // permanent: { type: Boolean, required: true },
   },
   setup() {
     const { mdAndUp } = useDisplay();
@@ -114,10 +111,15 @@ export default {
     handleDrawerEnter() {
       this.isExpand = true;
     },
-
     handleDrawerLeave() {
       this.isExpand = false;
     },
+    rowSpec(item) {
+      return Object.assign({}, item, {
+        view: item.type,
+        type: null
+      });
+    }
   },
 };
 </script>

package/nav/drawerLabel.vue

@@ -1,7 +1,6 @@
 <template>
-  <v-list-item>
+  <v-list-item :class="$classes()">
     <v-list-item-title>{{ spec.text }}</v-list-item-title>
-
   </v-list-item>
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.20.4",
+  "version": "3.20.6",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -22,7 +22,6 @@
     "json-logic-js": "^2.0.0",
     "lodash.merge": "^4.6.2",
     "marked": "^4.0.0",
-    "material-design-icons-iconfont": "^6.7.0",
     "moment": "^2.29.4",
     "phoenix": "^1.5.3",
     "push.js": "^1.0.12",

package/plugins/vuetify.js

@@ -1,5 +1,5 @@
 import { createVuetify } from "vuetify";
-import 'material-design-icons-iconfont/dist/material-design-icons.css';
+// import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import { aliases, md } from 'vuetify/iconsets/md';
 import 'vuetify/styles';
 import * as components from 'vuetify/components';