glib-web 3.18.0 → 3.19.0

package/README.md

@@ -22,11 +22,19 @@
 - `yarn link glib-web`
 - `bin/vite dev`
 
-## Clean up to fix strange errors when running vite dev
+## Clean up to fix strange errors (e.g. tiny-emitter error) when running vite dev
 
 - Stop vite server
-- `bin/vite clobber`
-- `bin/vite dev`
+
+- On your glib-web-npm's directory:
+  - `rm -rf node_modules`
+  - `yarn install`
+
+- On your project's directory:
+  - `rm -rf node_modules`
+  - `yarn install`
+  - `bin/vite clobber`
+  - `bin/vite dev`
 
 ## Prepare for publishing
 

package/action.js

@@ -2,10 +2,6 @@ import TypeUtils from "./utils/type";
 
 import ActionsRunMultiple from "./actions/runMultiple";
 
-import ActionsFormsSubmit from "./actions/forms/submit";
-import ActionsFieldsReset from "./actions/fields/reset";
-import ActionsFieldsFocus from "./actions/fields/focus";
-
 import ActionsHttpGetV1 from "./actions/http/get";
 import ActionsHttpPostV1 from "./actions/http/post";
 import ActionsHttpPatchV1 from "./actions/http/patch";
@@ -61,10 +57,15 @@ const ActionToursStop = import("./actions/tours/stop");
 import ActionPopoversOpen from "./actions/popovers/open";
 import ActionPopoversClose from "./actions/popovers/close";
 
+import ActionsFormsSubmit from "./actions/forms/submit";
+import ActionsFieldsReset from "./actions/fields/reset";
+import ActionsFieldsFocus from "./actions/fields/focus";
+
 import ActionComponentsUpdate from "./actions/components/update";
 import ActionComponentsFind from "./actions/components/find";
-
-import ActionLabelsSet from "./actions/labels/set";
+import ActionComponentsFindClosest from "./actions/components/findClosest";
+import ActionComponentsReplace from "./actions/components/replace";
+import ActionComponentsSet from "./actions/components/set";
 
 import ActionListsAppend from "./actions/lists/append";
 
@@ -73,10 +74,6 @@ import { vueApp } from "./store";
 const actions = {
   runMultiple: ActionsRunMultiple,
 
-  "forms/submit": ActionsFormsSubmit,
-  "fields/reset": ActionsFieldsReset,
-  "fields/focus": ActionsFieldsFocus,
-
   "http/get": ActionsHttpGetV1,
   "http/post": ActionsHttpPostV1,
   "http/patch": ActionsHttpPatchV1,
@@ -131,10 +128,16 @@ const actions = {
   "popovers/open": ActionPopoversOpen,
   "popovers/close": ActionPopoversClose,
 
+  "forms/submit": ActionsFormsSubmit,
+  "fields/reset": ActionsFieldsReset,
+  "fields/focus": ActionsFieldsFocus,
+
   "components/update": ActionComponentsUpdate,
   "components/find": ActionComponentsFind,
+  "components/findClosest": ActionComponentsFindClosest,
+  "components/replace": ActionComponentsReplace,
+  "components/set": ActionComponentsSet,
 
-  "labels/set": ActionLabelsSet,
   "lists/append": ActionListsAppend
 };
 

package/actions/components/findClosest.js

@@ -0,0 +1,6 @@
+export default class {
+  execute(spec, component) {
+    const target = component.$closest(spec.view);
+    Action.execute(spec.onFind, target);
+  }
+}

package/actions/components/replace.js

@@ -0,0 +1,11 @@
+// Experimental
+export default class {
+  execute(spec, component) {
+    const target = GLib.component.findById(spec.targetId);
+    if (target) {
+      Object.assign(target.spec, spec.newView);
+    }
+
+    Action.execute(properties.onReplace, targetComponent);
+  }
+}

package/actions/components/set.js

@@ -0,0 +1,15 @@
+export default class {
+  execute(spec, component) {
+    let targetComponent = component;
+
+    if (spec.targetId) {
+      targetComponent = GLib.component.findById(spec.targetId);
+    }
+
+    Utils.type.ifObject(spec.data, (data) => {
+      targetComponent.action_merge(data)
+    })
+
+    GLib.action.execute(spec.onSet, targetComponent);
+  }
+}

package/actions/fields/focus.js

@@ -1,6 +1,13 @@
 export default class {
-  execute(properties, component) {
-    const target = GLib.component.findById(properties.targetId);
-    target.action_focus();
+  execute(spec, component) {
+    let targetComponent = component;
+
+    if (spec.targetId) {
+      targetComponent = GLib.component.findById(spec.targetId);
+    }
+
+    targetComponent.action_focus();
+
+    Action.execute(spec.onFocus, targetComponent);
   }
 }

package/components/_responsive.vue

@@ -56,6 +56,9 @@ export default {
       return item.view == "panels/column-v1";
     },
     viewKey(item, index) {
+      // force update if child is charts
+      if (item.view.toString().startsWith('charts/')) return item;
+
       return index;
 
       // return `view${index}_${item.view}`;

package/components/charts/series.js

@@ -55,16 +55,28 @@ function useChart({ dataSeries, spec, multiple = true }) {
         options.plugins.datalabels = datalabels;
         options.plugins.datalabels.formatter = (value, context) => {
             const type = datalabels.formatType || 'value';
+            let val = null;
 
             switch (type) {
                 case 'label':
-                    return context.chart.data.labels[context.dataIndex];
+                    val = context.chart.data.labels[context.dataIndex];
                     break;
 
                 case 'value':
-                    return `${spec.prefix || ''}${value}${spec.suffix || ''}`;
+                    val = `${spec.prefix || ''}${value}${spec.suffix || ''}`;
                     break;
             }
+
+            const { dataIndex, datasetIndex } = context;
+            const dataset = dataSeries[datasetIndex];
+            if (multiple && Array.isArray(dataset.points) && dataset.points[dataIndex].label) {
+                val = dataset.points[dataIndex].label;
+            }
+            if (!multiple && dataSeries[dataIndex].label) {
+                val = dataSeries[dataIndex].label;
+            }
+
+            return val;
         };
     }
     if (centerLabel) {

package/components/component.vue

@@ -273,6 +273,9 @@ export default {
     $registryEnabled() {
       return false;
     },
+    $jsonLogicEnabled() {
+      return false;
+    },
     handlePopover(spec) {
       GLib.action.execute(spec, this);
     }

package/components/composable/dirtyState.js

@@ -12,8 +12,8 @@ export function useDirtyState() {
     ctx().isFormDirty = false;
   };
 
-  const updateDirtyState = (val, oldVal, spec) => {
-    if (!spec.disableDirtyCheck && val != oldVal && val != spec.value) {
+  const updateDirtyState = (val, oldVal, initValue, spec) => {
+    if (!spec.disableDirtyCheck && val != oldVal && val != initValue) {
       ctx().isFormDirty = true;
     }
   };

package/components/fields/_patternText.vue

@@ -2,8 +2,8 @@
   <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)" :max="$sanitizeValue(spec.max)"
-      :pattern="pattern" :rules="$validation()" :style="$styles()"
+      :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 />
   </div>
@@ -24,14 +24,14 @@ export default {
       if (Utils.type.isString(val)) {
         return new Date(val).getTime() / 1000;
       }
-      return null;
+      return val;
     },
     $externalizeValue(val) {
       if (Utils.type.isNumber(val)) {
         const date = new Date(val * 1000);
-        return Utils.format.local_iso8601(date);
+        return date.toISOString();
       }
-      return null;
+      return val;
     },
     $sanitizeValue(val) {
       if (val) {

package/components/fields/_select.vue

@@ -20,6 +20,13 @@
         </v-list-item>
       </template>
 
+      <template v-slot:prepend-item v-if="spec.header">
+        <common-responsive :spec="spec.header" />
+      </template>
+
+      <template v-slot:append-item v-if="spec.footer">
+        <common-responsive :spec="spec.footer" />
+      </template>
     </v-autocomplete>
 
     <input v-for="(item, index) in values" :key="index" type="hidden" :disabled="inputDisabled" :name="fieldName"
@@ -63,7 +70,7 @@ export default {
       return determineDensity(this.spec.styleClasses);
     },
     label() {
-      if (this.focused) {
+      if (this.focused && this.spec.hint) {
         return `${this.spec.label} ${this.spec.hint}`
       }
       return this.spec.label

package/components/fields/file.vue

@@ -23,9 +23,7 @@
           {{ buttonLabels.delete }}
         </v-btn>
 
-
         <glib-component v-if="spec.infoSpec" :spec="spec.infoSpec"></glib-component>
-
       </div>
     </div>
     <input ref="directUploadFile" style="display: none" type="file" @change="uploadFiles" />

package/components/fields/multiUpload.vue

@@ -26,8 +26,9 @@
             <div class="status">
               <v-icon class="icon">{{ file[1].isImage() ? 'photo_library' : 'description' }}</v-icon>
               <div class="progress">
-                <label class="label">{{ `${file[1].name} ${file[1].status === 'failed' ? uploadFailedText : ''}`
-                }}</label>
+                <div class="label"><span>{{ `${file[1].name}` }}</span><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>
@@ -96,12 +97,16 @@
 
       .progress {
         display: flex;
-        width: 100%;
+        flex-grow: 1;
         flex-direction: column;
         justify-content: space-between;
 
         .label {
           /* mb-1 */
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: nowrap;
           margin-bottom: 4px;
         }
 
@@ -239,6 +244,9 @@ export default defineComponent({
     const container = ref(null);
     const icon = ref(null);
 
+    const responseMessages = spec.responseMessages;
+    const uploadTitle = spec.uploadTitle || 'File added';
+
     let files = ref({});
     if (spec.files && spec.files.length > 0) {
       files = ref(spec.files.reduce((prev, curr) => {
@@ -308,11 +316,14 @@ export default defineComponent({
           if (!error) {
             Object.assign(files.value[key], {
               status: 'completed',
-              signedId: blob.signed_id
+              signedId: blob.signed_id,
+              message: responseMessages['200']
             });
           } else {
+            const message = responseMessages[error.slice(-3) || 'else'];
             Object.assign(files.value[key], {
-              status: 'failed'
+              status: 'failed',
+              message: message
             });
           }
         });
@@ -366,9 +377,6 @@ export default defineComponent({
       fileSelect.value.click();
     }
 
-    const uploadFailedText = spec.uploadFailedText || '(UPLOAD FAILED)';
-    const uploadTitle = spec.uploadTitle || 'File added';
-
     return {
       files,
       fileSelect,
@@ -380,7 +388,7 @@ export default defineComponent({
       handleClick,
       handleRemoveFile,
       showUploadedFile,
-      uploadFailedText,
+      responseMessages,
       uploadTitle
     };
   }

package/components/label.vue

@@ -53,7 +53,7 @@ span.muted {
 }
 
 span.small {
-  font-size: 80%;
+  font-size: 90%;
 }
 
 a:hover {

package/components/mixins/generic.js

@@ -4,7 +4,7 @@ export default {
   methods: {
     $componentName() { // Can be overridden
       if (this.spec) {
-        return this.spec.view;
+        return this.spec.view?.replace('-v1', '');
       }
     },
     $closest(name) {
@@ -12,8 +12,8 @@ export default {
       while (parent != null) {
         if (
           (Utils.type.isObject(parent.spec) || Utils.type.isObject(parent.formSpec)) &&
-          parent.$componentName() == name
-          // GLib.component.vueName(parent) == name
+          parent.$componentName() == name &&
+          parent.$registryEnabled()
         ) {
           return parent;
         }
@@ -78,6 +78,9 @@ export default {
           Utils.ws.handleResponse(payload.onResponse, this);
         });
       }
+    },
+    action_merge(mergedSpec) {
+      Object.assign(this.spec, mergedSpec);
     }
   }
 };

package/components/mixins/styles.js

@@ -49,7 +49,8 @@ export default {
 
       Object.assign(fieldModels, { [this.fieldName]: this.$internalizeValue(val) });
 
-      updateDirtyState(val, oldVal, this.spec);
+      const initValue = this.$sanitizeValue(this.$externalizeValue(this.spec.value));
+      updateDirtyState(val, oldVal, initValue, this.spec);
     },
     spec: {
       handler(spec, oldSpec) {
@@ -101,17 +102,29 @@ export default {
         this._watchers.push(watcher1);
       }
 
-      if (this.spec && (this.spec.showIf || this.spec.loadIf)) {
+      if (this.spec && (this.spec.showIf || this.spec.loadIf) && this.$jsonLogicEnabled()) {
         watcher2 = watchFieldModels(this.spec.showIf || this.spec.loadIf, (value) => {
+          const oldValue = this._show;
+
           if (value) {
             this._show = true;
           } else {
             this._show = false;
           }
+
+          if (oldValue != value) {
+            this.$nextTick(() => {
+              // Call either onIfTrue or onIfFalse.
+              Action.execute(this.spec[`onIf${value.toString().capitalize()}`], this);
+            });
+          }
         });
         this._watchers.push(watcher2);
       }
     },
+    $jsonLogicEnabled() {
+      return true;
+    },
     // TODO: Deprecated
     genericStyles(spec) {
       return this.$styles(spec);

package/extensions/string.js

@@ -45,3 +45,7 @@ String.prototype.compare = function(str) {
 String.prototype.squish = function() {
   return this.replace(/\s+/g, " ").trim();
 };
+
+String.prototype.capitalize = function() {
+  return this.charAt(0).toUpperCase() + this.slice(1);
+};

package/index.js

@@ -80,9 +80,6 @@ Vue.mixin(stylesMixin);
 import scrollingMixin from "./components/mixins/scrolling.js";
 Vue.mixin(scrollingMixin);
 
-import datasetMixins from "./components/mixins/dataset.js";
-Vue.mixin(datasetMixins);
-
 Vue.config.globalProperties.extension = {};
 import extension from "./components/mixins/extension.js";
 Vue.mixin(extension);

package/nav/dialog.vue

@@ -10,7 +10,7 @@
         </h3>
         <div v-else></div>
 
-        <v-btn size="small" text icon @click="close" variant="flat">
+        <v-btn v-if="!disableCloseButton" size="small" text icon @click="close" variant="flat">
           <v-icon>close</v-icon>
         </v-btn>
       </div>

package/package.json

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

package/utils/settings.js

@@ -6,7 +6,7 @@ class MutableSettings {
     this.themes = {};
     this.gtagId = null;
     this.errorHandler = (err, message) => {
-      console.error(message || err.message);
+      console.error(message || err.message, err);
     };
     this.headerAugmenter = (_url, _method) => {
       // Set a custom augmenter to add custom HTTP headers.

package/actions/labels/set.js

@@ -1,16 +0,0 @@
-import Action from "../../action";
-
-export default class {
-  execute(properties, component) {
-    let targetComponent = component;
-    if (properties.targetId) {
-      targetComponent = GLib.component.findById(properties.targetId);
-    }
-
-    targetComponent.text = properties.text;
-
-    if (properties.onSet) {
-      Action.execute(properties.onSet, targetComponent);
-    }
-  }
-}

package/components/mixins/dataset.js

@@ -1,10 +0,0 @@
-export default {
-  mounted() {
-    if (this.spec && this.spec.dataset) {
-      const data = this.spec.dataset;
-      for (const key in this.spec.dataset) {
-        this.$el.dataset[key] = data[key];
-      }
-    }
-  }
-};