glib-web 3.24.4 → 3.25.1

package/action.js

@@ -29,6 +29,7 @@ import ActionsWindowsOpen from "./actions/windows/open";
 import ActionsWindowsOpenWeb from "./actions/windows/openWeb";
 import ActionsWindowsReload from "./actions/windows/reload";
 import ActionsWindowsCloseWithReload from "./actions/windows/closeWithReload";
+import ActionsWindowsCloseWithOpen from "./actions/windows/closeWithOpen";
 import ActionsWindowsRefreshState from "./actions/windows/refreshState";
 import ActionsWindowsPrint from "./actions/windows/print";
 
@@ -45,6 +46,8 @@ import ActionsAuthSaveCsrfToken from "./actions/auth/saveCsrfToken";
 import ActionsAuthRestart from "./actions/auth/restart";
 import ActionsCreditCard from "./actions/auth/creditCard";
 
+import ActionsCookiesSave from "./actions/cookies/save";
+
 import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
 import ActionCommandsCopy from "./actions/commands/copy";
@@ -67,8 +70,11 @@ import ActionComponentsUpdate from "./actions/components/update";
 import ActionComponentsFind from "./actions/components/find";
 import ActionComponentsFindClosest from "./actions/components/findClosest";
 import ActionComponentsReplace from "./actions/components/replace";
+import ActionComponentsReplaceChildren from "./actions/components/replaceChildren";
 import ActionComponentsSet from "./actions/components/set";
 
+import ActionLogicsSet from "./actions/logics/set";
+
 import ActionListsAppend from "./actions/lists/append";
 
 import { dialogs, vueApp } from "./store";
@@ -103,6 +109,7 @@ const actions = {
   "windows/openWeb": ActionsWindowsOpenWeb,
   "windows/reload": ActionsWindowsReload,
   "windows/closeWithReload": ActionsWindowsCloseWithReload,
+  "windows/closeWithOpen": ActionsWindowsCloseWithOpen,
   "windows/refreshState": ActionsWindowsRefreshState,
   "windows/print": ActionsWindowsPrint,
 
@@ -119,6 +126,8 @@ const actions = {
   "auth/restart": ActionsAuthRestart,
   "auth/creditCard": ActionsCreditCard,
 
+  "cookies/save": ActionsCookiesSave,
+
   "analytics/logEvent": ActionsAnalyticsLogEvent,
 
   "commands/copy": ActionCommandsCopy,
@@ -140,8 +149,11 @@ const actions = {
   "components/find": ActionComponentsFind,
   "components/findClosest": ActionComponentsFindClosest,
   "components/replace": ActionComponentsReplace,
+  "components/replaceChildren": ActionComponentsReplaceChildren,
   "components/set": ActionComponentsSet,
 
+  "logics/set": ActionLogicsSet,
+
   "lists/append": ActionListsAppend
 };
 

package/actions/components/replace.js

@@ -1,4 +1,4 @@
-// Experimental
+// Experimental. Can this be merged with `components_set` ?
 export default class {
   execute(spec, component) {
     const target = GLib.component.findById(spec.targetId) || component;

package/actions/components/replaceChildren.js

@@ -0,0 +1,15 @@
+import { nextTick } from "vue";
+
+// Experimental
+export default class {
+  execute(spec, component) {
+    const target = GLib.component.findById(spec.targetId) || component;
+    if (target) {
+      Object.assign(target.spec.childViews, spec.childViews);
+    }
+
+    nextTick(() => {
+      Action.execute(spec.onReplace, target);
+    });
+  }
+}

package/actions/cookies/save.js

@@ -0,0 +1,10 @@
+export default class {
+  execute(spec, component) {
+    const key = spec.key;
+    const value = spec.value;
+    if (Utils.type.isNotNull(key) && Utils.type.isNotNull(value)) {
+      document.cookie = `${key}=${value}`;
+      Action.execute(spec.onSave, component);
+    }
+  }
+}

package/actions/logics/set.js

@@ -0,0 +1,40 @@
+import jsonLogic from 'json-logic-js';
+
+const subscript = function(a, b) {
+  if (a) {
+    if (b) { // This is expected when the dependent field doesn't have a value
+      return a[b];
+    } else {
+      console.info('Null subscript')
+    }
+  } else {
+    console.error('Left hand operator not found')
+  }
+};
+jsonLogic.add_operation("[]", subscript);
+
+// Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
+const nullishCoalescing = function(a, b) {
+  return a ?? b;
+}
+jsonLogic.add_operation("??", nullishCoalescing);
+
+export default class {
+  execute(spec, component) {
+    let targetComponent = component;
+
+    if (spec.targetId) {
+      targetComponent = GLib.component.findById(spec.targetId);
+    }
+
+    Utils.type.ifObject(spec.conditionalData, (properties) => {
+      const data = {}
+      for (const key in properties) {
+        data[key] = jsonLogic.apply(properties[key], spec.variables);
+      }
+      targetComponent.action_merge(data);
+    });
+
+    GLib.action.execute(spec.onSet, targetComponent);
+  }
+}

package/actions/windows/close.js

@@ -1,4 +1,4 @@
-import { vueApp } from "../../store";
+import { executeGlobalEvent, vueApp } from "../../store";
 
 export default class {
   execute(properties, component) {

package/actions/windows/closeWithOpen.js

@@ -0,0 +1,9 @@
+export default class {
+  execute(properties, component) {
+    // TODO: Need to find out how to prevent onpopstate() from executing.
+    Utils.history.back()
+
+    // Open right away so there is no visible flicker.
+    Utils.http.load(properties, component, true);
+  }
+}

package/app.vue

@@ -14,7 +14,9 @@
           </div>
 
           <div id="page_body" class="pages-body body-wrapper">
-            <panels-responsive :spec="body" />
+            <panels-responsive class="body-header" :spec="bodyHeader" />
+            <panels-responsive class="body-content" :spec="body" />
+            <panels-responsive class="body-footer" :spec="bodyFooter" />
           </div>
 
           <div class="pages-footer">
@@ -72,6 +74,9 @@ export default {
     footer() {
       return this.page.footer || {};
     },
+    bodyFooter() {
+      return this.page.bodyFooter || {};
+    },
     containerComponent() {
       if (this.formSpec) {
         this.name = "panels-form";
@@ -214,6 +219,24 @@ body,
   height: 100%;
 }
 
+.pages-body {
+  display: flex;
+  flex-direction: column;
+
+  .body-header {
+    display: block;
+  }
+
+  .body-content {
+    flex: 1 0 auto;
+    display: block;
+  }
+
+  .body-footer {
+    display: block;
+  }
+}
+
 /******/
 
 /*** panels/scrollTo support ***/

package/components/charts/series.js

@@ -2,6 +2,7 @@ import { Chart, Colors } from "chart.js";
 import chartDataLabels from 'chartjs-plugin-datalabels';
 import doughnutLabel from 'chartjs-plugin-doughnutlabel-v3';
 import { Vue } from "../..";
+import { computePosition, flip, offset } from '@floating-ui/dom';
 
 import 'chartkick/chart.js';
 
@@ -30,9 +31,89 @@ const multipleDataSeries = (dataSeries) => {
 
 const singleDataSeries = (dataSeries) => dataSeries.reduce((prev, curr) => Object.assign(prev, { [curr.title]: curr.value }), {});
 
+const getOrCreateTooltip = (chart) => {
+    let tooltipEl = chart.canvas.parentNode.querySelector('#_glib-chart-tooltip');
+    let referenceEl = chart.canvas.parentNode.querySelector('#_glib-chart-reference');
+
+    if (!tooltipEl) {
+        tooltipEl = document.createElement('div');
+        tooltipEl.id = '_glib-chart-tooltip';
+        tooltipEl.style.opacity = 1;
+        tooltipEl.style.pointerEvents = 'none';
+        tooltipEl.style.position = 'absolute';
+        tooltipEl.style.transition = 'all .1s ease';
+        tooltipEl.style.lineHeight = 1;
+
+        chart.canvas.parentNode.appendChild(tooltipEl);
+    }
+
+    if (!referenceEl) {
+        referenceEl = document.createElement('div');
+        referenceEl.id = '_glib-chart-reference';
+        referenceEl.style.position = 'absolute';
+        referenceEl.style.width = '1px';
+        referenceEl.style.height = '1px';
+        referenceEl.style.opacity = 0;
+
+        chart.canvas.parentNode.appendChild(referenceEl);
+    }
+
+    return { tooltipEl, referenceEl };
+};
+
+const externalTooltipHandler = (multiple, dataSeries) => {
+    return (context) => {
+        const tooltipData = getData(multiple, dataSeries, context.tooltip.dataPoints[0]);
+
+        if (!tooltipData) return;
+
+        const innerHTML = tooltipData.tooltip;
+
+        // Tooltip Element
+        const { chart, tooltip } = context;
+        const { tooltipEl, referenceEl } = getOrCreateTooltip(chart);
+
+        // Hide if no tooltip
+        if (tooltip.opacity === 0) {
+            tooltipEl.style.opacity = 0;
+            return;
+        }
+
+        if (tooltip.body) {
+            tooltipEl.innerHTML = innerHTML;
+        }
+
+        const position = chart.canvas.getBoundingClientRect();
+
+        referenceEl.style.left = position.left + tooltip.caretX + 'px';
+        referenceEl.style.top = position.top + tooltip.caretY + 'px';
+        computePosition(referenceEl, tooltipEl, { placement: 'right', middleware: [flip(), offset(8)] })
+            .then(({ x, y }) => {
+                tooltipEl.style.left = x + 'px';
+                tooltipEl.style.top = y + 'px';
+            });
+
+        // Display, position, and set styles for font
+        tooltipEl.style.opacity = 1;
+        tooltipEl.style.font = tooltip.options.bodyFont.string;
+        tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
+    };
+};
+
+const getData = (multiple, dataSeries, context) => {
+    const { dataIndex, datasetIndex } = context;
+    const dataset = dataSeries[datasetIndex];
+    if (multiple && Array.isArray(dataset.points) && dataset.points[dataIndex]) {
+        return dataset.points[dataIndex];
+    }
+    if (!multiple && dataSeries[dataIndex]) {
+        return dataSeries[dataIndex];
+    }
+};
+
 function useChart({ dataSeries, spec, multiple = true }) {
     const isDonut = [spec.styleClasses].flat().includes('donut');
-    const { datalabels, centerLabel } = spec.plugins || {};
+    const { datalabels, centerLabel, customTooltip } = spec.plugins || {};
     const legend = spec.legend || { display: true };
 
     let series = null;
@@ -85,6 +166,13 @@ function useChart({ dataSeries, spec, multiple = true }) {
         };
     }
 
+    if (customTooltip) {
+        options.plugins.tooltip = {
+            enabled: false,
+            external: externalTooltipHandler(multiple, dataSeries)
+        };
+    }
+
     return { series, colors, options };
 }
 

package/components/fields/multiUpload.vue

@@ -10,7 +10,7 @@
         <p v-if="props.spec.hint" class="subtitle">{{ props.spec.hint }}</p>
       </div>
 
-      <input v-for="(file, index) in completedFiles" type="hidden" :name="props.spec.name" :value="file.signedId"
+      <input v-for="(file, index) in files" type="hidden" :name="props.spec.name" :value="file.signedId"
         :disabled="inputDisabled" :key="`hidden-${index}`">
     </div>
 
@@ -246,8 +246,6 @@ export default defineComponent({
       return Object.keys(files.value).length > 0;
     });
 
-    const completedFiles = computed(() => Object.values(files.value).filter((value) => value.status == 'completed'));
-
     function handleDrop(e) {
       e.preventDefault();
       uploadFiles(
@@ -325,7 +323,6 @@ export default defineComponent({
       handleClick,
       handleRemoveFile,
       showUploadedFile,
-      completedFiles,
       responseMessages,
       uploadTitle,
       props

package/components/mixins/events.js

@@ -212,14 +212,15 @@ export default {
         this.$nextTick(() => {
           const value = newValue || this.fieldModel;
           const formData = {
-            [this.fieldName]: value
+            [this.spec.paramNameForFieldName || this.fieldName]: value
           };
           const params = this.spec.paramNameForFormData
             ? {
-              [this.spec.paramNameForFormData]: formData
+              [this.spec.paramNameForFormData || formData]: formData
             }
             : formData;
-          const data = merge({}, onChange, { formData: params });
+
+          const data = merge({}, onChange, params);
           GLib.action.execute(data, this);
         });
       });

package/components/panels/carousel.vue

@@ -46,15 +46,20 @@ export default {
             break;
         }
 
+        const containerHeight = this.spec.height;
         const chunkSize = 12 / colSize;
         const panels = []
         for (let i = 0; i < childViews.length; i += chunkSize) {
           const chunk = childViews.slice(i, i + chunkSize);
           panels.push({
             view: 'panels/responsive',
+            height: containerHeight ? containerHeight - 100 : null,
+            // backgroundColor: '#ff0000',
             childViews: chunk.map((panel) => {
               return {
                 view: 'panels/column',
+                // backgroundColor: '#00ff00',
+                height: 'matchParent',
                 [breakpoint]: { cols: colSize },
                 childViews: [panel]
               }

package/package.json

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