glib-web 4.44.6 → 5.0.0

package/.github/workflows/lint.yml

@@ -2,9 +2,9 @@ name: Lint
 
 on:
   push:
-    branches:
-      - "**"
+    branches: [main]
   pull_request:
+    branches: [main]
 
 jobs:
   lint:

package/.nycrc.json

@@ -32,6 +32,8 @@
     "extensions/*",
     "components/treeView.vue",
     "actions/files/*",
-    "actions/bottom_banners/*"
+    "actions/bottom_banners/*",
+    "plugins/vuetify.js",
+    "components/composable/upload_delegator.js"
   ]
 }

package/README.md

@@ -6,6 +6,7 @@
 - Edit settings.json
   - `CTRL+SHIFT+P` -> `Preferences: Open User Settings (JSON)` -- This will open an editor for `settings.json`.
   - Copy content of `settings.json.example` into the editor.
+  - Disable format-on-save for Volar to avoid formatting conflicts with ESLint.
 
 ## Set up Javascript CI
 

package/components/charts/series.js

@@ -33,7 +33,7 @@ const installChartkick = () => {
 const multipleDataSeries = (dataSeries) => {
     return dataSeries.map((value) => {
         let points = null;
-        if (Array.isArray(value.points)) {
+        if (TypeUtils.isArray(value.points)) {
             points = value.points.reduce((prev, curr) => {
                 return Object.assign(prev, { [curr.x]: curr.y });
             }, {});
@@ -73,7 +73,11 @@ const getOrCreateTooltip = (chart) => {
 
 const externalTooltipHandler = (multiple, dataSeries) => {
     return (context) => {
-        const tooltipData = getData(multiple, dataSeries, context.tooltip.dataPoints[0]);
+        const tooltipContext = TypeUtils.isObject(context) && TypeUtils.isObject(context.tooltip) ? context.tooltip : null;
+        const dataPoints = TypeUtils.isObject(tooltipContext) ? tooltipContext.dataPoints : null;
+        if (!TypeUtils.isArray(dataPoints) || dataPoints.length === 0) return;
+
+        const tooltipData = getData(multiple, dataSeries, dataPoints[0]);
 
         if (!tooltipData) return;
 
@@ -111,9 +115,13 @@ const externalTooltipHandler = (multiple, dataSeries) => {
 };
 
 const getData = (multiple, dataSeries, context) => {
+    if (!TypeUtils.isArray(dataSeries) || !TypeUtils.isObject(context)) return null;
+
     const { dataIndex, datasetIndex } = context;
+    if (!TypeUtils.isNumber(dataIndex) || !TypeUtils.isNumber(datasetIndex)) return null;
+
     const dataset = dataSeries[datasetIndex];
-    if (multiple && Array.isArray(dataset.points) && dataset.points[dataIndex]) {
+    if (multiple && TypeUtils.isObject(dataset) && TypeUtils.isArray(dataset.points) && dataset.points[dataIndex]) {
         return dataset.points[dataIndex];
     }
     if (!multiple && dataSeries[dataIndex]) {
@@ -123,15 +131,16 @@ const getData = (multiple, dataSeries, context) => {
 
 function useChart({ dataSeries, spec, multiple = true }) {
     installChartkick();
+    const normalizedDataSeries = TypeUtils.isArray(dataSeries) ? dataSeries : [];
     const isDonut = [spec.styleClasses].flat().includes('donut');
     const { datalabels, centerLabel, customTooltip } = spec.plugins || {};
     const legend = spec.legend || { display: true };
 
     let series = null;
     if (multiple) {
-        series = computed(() => multipleDataSeries(dataSeries));
+        series = computed(() => multipleDataSeries(normalizedDataSeries));
     } else {
-        series = computed(() => singleDataSeries(dataSeries));
+        series = computed(() => singleDataSeries(normalizedDataSeries));
     }
 
     let colors = undefined;
@@ -175,12 +184,15 @@ function useChart({ dataSeries, spec, multiple = true }) {
             }
 
             const { dataIndex, datasetIndex } = context;
-            const dataset = dataSeries[datasetIndex];
-            if (multiple && Array.isArray(dataset.points) && dataset.points[dataIndex].label) {
-                val = dataset.points[dataIndex].label;
+            const dataset = normalizedDataSeries[datasetIndex];
+            if (multiple && TypeUtils.isObject(dataset) && TypeUtils.isArray(dataset.points)) {
+                const point = dataset.points[dataIndex];
+                if (TypeUtils.isObject(point) && point.label) {
+                    val = point.label;
+                }
             }
-            if (!multiple && dataSeries[dataIndex].label) {
-                val = dataSeries[dataIndex].label;
+            if (!multiple && TypeUtils.isObject(normalizedDataSeries[dataIndex]) && normalizedDataSeries[dataIndex].label) {
+                val = normalizedDataSeries[dataIndex].label;
             }
 
             return val;
@@ -195,7 +207,7 @@ function useChart({ dataSeries, spec, multiple = true }) {
     if (customTooltip) {
         options.plugins.tooltip = {
             enabled: false,
-            external: externalTooltipHandler(multiple, dataSeries)
+            external: externalTooltipHandler(multiple, normalizedDataSeries)
         };
     }
 

package/components/component.vue

@@ -15,7 +15,6 @@
   /> -->
 
     <!-- <fields-latLong v-else-if="spec.view == 'fields/latLong-v1'" :spec="spec" /> -->
-    <fields-googlePlace v-else-if="spec.view == 'fields/googlePlace-v1'" ref="delegate" :spec="spec" />
 
     <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
 
@@ -72,7 +71,6 @@ import TextAreaField from "./fields/textarea.vue";
 const RichTextField2 = defineAsyncComponent(() => import("./fields/richText2.vue"));
 // import NewRichTextField from "./fields/newRichText.vue";
 const FileField = defineAsyncComponent(() => import("./fields/file.vue"));
-const MultiUploadField = defineAsyncComponent(() => import("./fields/multiUpload.vue"));
 const UploadField = defineAsyncComponent(() => import('./fields/upload.vue'));
 import SignField from "./fields/sign.vue";
 import SelectField from "./fields/_select.vue";
@@ -85,7 +83,6 @@ import CheckField from "./fields/check.vue";
 import DateField from "./fields/date.vue";
 import DateTimeField from "./fields/datetime.vue";
 const LocationField = defineAsyncComponent(() => import("./fields/location.vue"));
-import GooglePlaceField from "./fields/googlePlace.vue";
 // import DynamicGroupField from "./fields/dynamicGroup.vue";
 import DynamicGroupField from "./fields/dynamicGroup2.vue";
 import StripeTokenField from "./fields/stripeToken.vue";
@@ -179,7 +176,6 @@ export default {
     "fields-richText": RichTextField2,
     // "fields-newRichText": NewRichTextField,
     "fields-file": FileField,
-    "fields-multiUpload": MultiUploadField,
     "fields-upload": UploadField,
     "fields-sign": SignField,
     "fields-select": SelectField,
@@ -192,7 +188,6 @@ export default {
     "fields-date": DateField,
     "fields-datetime": DateTimeField,
     "fields-location": LocationField,
-    "fields-googlePlace": GooglePlaceField,
     "fields-dynamicGroup": DynamicGroupField,
     "fields-stripeToken": StripeTokenField,
     "fields-stripeExternalAccount": StripeExternalAccount,

package/components/fields/checkGroup.vue

@@ -19,6 +19,14 @@ import GlibBase from "../base/glibBase.js";
 import { defineComponent, ref, provide, toRef } from "vue";
 import { useGlibInput } from "../composable/form";
 import { useGlibSelectable, watchNoneOfAbove } from "../composable/selectable";
+import { isArray, isNull, isString } from "../../utils/type";
+
+const normalizeValue = (value) => {
+  if (isNull(value)) return [];
+  if (isArray(value)) return value;
+  if (isString(value)) return value.length > 0 ? [value] : [];
+  return [value];
+};
 
 export default defineComponent({
   extends: GlibBase,
@@ -39,7 +47,7 @@ export default defineComponent({
     const parentSpec = props.spec;
     provide('parentSpec', parentSpec);
 
-    const fieldModel = toRef(props.spec.value);
+    const fieldModel = toRef(normalizeValue(props.spec.value));
     provide('parentModel', fieldModel);
 
     useGlibInput({ props });
@@ -60,18 +68,17 @@ export default defineComponent({
     }
 
     // watch(
-    //   () => props.spec,
-    //   (spec) => {
-    //     fieldModel.value = [spec.value || []].flat();
-    //   },
-    //   { immediate: true, deep: true }
+    //   () => props.spec.value,
+    //   (value) => {
+    //     fieldModel.value = normalizeValue(value);
+    //   }
     // );
 
     return { options, fieldModel, checkAll };
   },
   computed: {
     values() {
-      return this.fieldModel || [];
+      return normalizeValue(this.fieldModel);
     }
   },
   watch: {

package/components/fields/richText2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="loadIf" :style="$styles()" :class="$classes()">
+  <div v-if="loadIf" :style="$styles()" :class="[$classes(), { 'glib-quill-disabled': inputDisabled }]">
     <div ref="editor"></div>
     <input type="hidden" :name="fieldName" :value="producedValue" />
     <template v-if="Object.keys(files).length > 0">
@@ -51,6 +51,7 @@ import { useFileUtils } from "../composable/file";
 import { setBusyWhenUploading, uploadFiles } from "../composable/upload";
 import dom from "../../utils/dom";
 import RawText from "./rawText.vue";
+import { isBoolean } from "../../utils/type";
 
 const { Item, makeKey } = useFileUtils();
 
@@ -74,6 +75,15 @@ export default defineComponent({
     const files = ref({});
     setBusyWhenUploading({ files });
 
+    const inputDisabled = computed(() => {
+      const disabled = instance.proxy.inputDisabled;
+      return isBoolean(disabled) ? disabled : false;
+    });
+    const isReadOnly = computed(() => {
+      const readOnly = props.spec.readOnly;
+      return (isBoolean(readOnly) ? readOnly : false) || inputDisabled.value;
+    });
+
 
     function sanitizedValue() {
       if (!quill) return props.spec.value || '';
@@ -254,11 +264,12 @@ export default defineComponent({
     }
     onMounted(() => {
       quill = new Quill(editor.value, {
-        readOnly: props.spec.readOnly,
+        readOnly: isReadOnly.value,
         placeholder: props.spec.placeholder,
         theme: 'snow',
         modules
       });
+      quill.enable(!isReadOnly.value);
 
       let value = props.spec.value;
       switch (accept.value) {
@@ -296,7 +307,12 @@ export default defineComponent({
       }
     });
 
-    return { producedValue, editor, files, rawTextProps };
+    watch(isReadOnly, (readOnly) => {
+      if (!quill) return;
+      quill.enable(!readOnly);
+    });
+
+    return { producedValue, editor, files, rawTextProps, inputDisabled };
   }
 });
 </script>
@@ -344,4 +360,18 @@ export default defineComponent({
   max-height: 300px; 
   overflow-y: auto;
 }
+
+.glib-quill-disabled .ql-editor {
+  caret-color: transparent;
+  cursor: not-allowed;
+}
+
+.glib-quill-disabled .ql-toolbar {
+  opacity: var(--v-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.glib-quill-disabled .ql-container {
+  opacity: var(--v-disabled-opacity);
+}
 </style>

package/components/fields/upload.vue

@@ -29,9 +29,11 @@ const childSpec = computed(() => {
     return Object.assign({}, props.spec, { placeholderView: null }, props.spec.placeholderView);
   } else if (props.spec.inputView) {
     return Object.assign({}, props.spec, { inputView: null }, props.spec.inputView);
-  } else {
-    return Object.assign({}, props.spec, { multiProgressView: null }, props.spec.placeholderView);
+  } else if (props.spec.multiProgressView) {
+    return Object.assign({}, props.spec, { multiProgressView: null }, props.spec.multiProgressView);
   }
+
+  return props.spec;
 });
 
 function trigger() {
@@ -43,4 +45,4 @@ function reset() {
 }
 
 defineExpose({trigger, reset})
-</script>
+</script>

package/components/mixins/styles.js

@@ -131,7 +131,6 @@ export default {
       const forceUpdate = (Math.random() + 1).toString(36).substring(7);
       if (item.view.startsWith('charts/')) return forceUpdate;
       if (item.view.startsWith('fields/richText')) return forceUpdate;
-      if (item.view.startsWith('fields/multiUpload')) return forceUpdate;
       if (item.view.startsWith('panels/custom')) return forceUpdate;
 
       const childViewLength = item.childViews ? item.childViews.length : 0;

package/components/popover.vue

@@ -1,100 +1,129 @@
 <template>
-    <!-- Placement options:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end'
+  <!-- Placement options:
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
   -->
 
-    <common-responsive v-if="toggle" :key="key" ref="container" :class="`views-popovers ${spec.styleClass}`"
-        :spec="spec.body" />
-
+  <common-responsive v-if="toggle" :key="key" ref="container" :class="`views-popovers ${spec.styleClass}`"
+    :spec="popoverBody" />
 </template>
 
 <script>
 import { popovers } from "../store";
 import bus from "../utils/eventBus";
 import { driver } from "driver.js";
-import 'driver.js/dist/driver.css';
+import "driver.js/dist/driver.css";
 import { strandom } from "./helper";
 import { APP_ID } from "..";
 import GlibBase from "./base/glibBase.js";
+import * as TypeUtils from "../utils/type";
 
 export default {
   extends: GlibBase,
-    props: ['spec', 'reference', 'placeholder', 'styleClass'],
-    data() {
-        const allowClose = this.spec.overlay ? this.spec.overlay.closeOnFocus : true;
-        return {
-            key: null,
-            toggle: true,
-            driverObj: driver({
-                allowClose,
-                onDestroyed: () => {
-                    this.close();
-                }
-            }),
-        };
+  props: ["spec", "reference", "placeholder", "styleClass"],
+  data() {
+    const allowClose = this.spec.overlay ? this.spec.overlay.closeOnFocus : true;
+    return {
+      key: null,
+      toggle: true,
+      driverObj: driver({
+        allowClose,
+        onDestroyed: () => {
+          this.close();
+        }
+      }),
+      busOpenHandler: null,
+      busCloseHandler: null,
+      onAppClick: null,
+      onResize: null,
+      body: null,
+    };
+  },
+  computed: {
+    popoverBody() {
+      if (TypeUtils.isNotNull(this.body)) {
+        return this.body;
+      }
+      return this.spec.body;
+    }
+  },
+  mounted() {
+    popovers.value.push(this);
+    this.busOpenHandler = (body) => {
+      this.body = body;
+      this.key = strandom();
+    };
+    bus.$on(`popovers/open-${this.spec.key}`, this.busOpenHandler);
+  },
+  methods: {
+    $mounted() {
+      const appEl = document.getElementById(APP_ID);
+      this.busCloseHandler = () => {
+        if (appEl) {
+          appEl.removeEventListener("click", this.onAppClick);
+        }
+        this.close();
+      };
+      bus.$once(`popover/close-${this.spec.key}`, this.busCloseHandler);
+      if (!this.spec.persistent) {
+        this.onAppClick = this.handleClose;
+        if (appEl) {
+          appEl.addEventListener("click", this.onAppClick);
+        }
+        this.onResize = () => this.close();
+        window.addEventListener("resize", this.onResize);
+      }
+      if (this.spec.overlay) {
+        this.driverObj.highlight({ element: this.reference });
+      }
     },
-    mounted() {
-        popovers.value.push(this);
-        bus.$on(`popovers/open-${this.spec.key}`, (body) => {
-            Object.assign(this.spec, { body });
-            this.key = strandom();
-        });
+    $tearDown() {
+      if (TypeUtils.isFunction(this.busCloseHandler)) {
+        bus.$off(`popover/close-${this.spec.key}`, this.busCloseHandler);
+      }
+      if (TypeUtils.isFunction(this.busOpenHandler)) {
+        bus.$off(`popovers/open-${this.spec.key}`, this.busOpenHandler);
+      }
+      if (!this.spec.persistent) {
+        const appEl = document.getElementById(APP_ID);
+        if (TypeUtils.isFunction(this.onAppClick) && appEl) {
+          appEl.removeEventListener("click", this.onAppClick);
+        }
+        if (TypeUtils.isFunction(this.onResize)) {
+          window.removeEventListener("resize", this.onResize);
+        }
+      }
     },
-    methods: {
-        $mounted() {
-            const appEl = document.getElementById(APP_ID);
-            bus.$once(`popover/close-${this.spec.key}`, () => {
-                appEl.removeEventListener('click', this.handleClose);
-                this.close();
-            });
-            if (!this.spec.persistent) {
-                appEl.addEventListener('click', this.handleClose);
-                window.addEventListener('resize', () => this.close());
-            }
-            if (this.spec.overlay) {
-                this.driverObj.highlight({ element: this.reference });
-            }
-
-        },
-        $tearDown() {
-            bus.$off(`popover/close-${this.spec.key}`);
-            bus.$off(`popover/open-${this.spec.key}`);
-            if (!this.spec.persistent) {
-                appEl.removeEventListener('click', this.handleClose);
-                window.removeEventListener('resize', () => this.close());
-            }
-        },
-        handleClose(event) {
-            let element = null;
-            if (this.$refs.container) {
-                element = this.$refs.container.$el;
-            } else {
-                element = this.$el;
-            }
-            const isClickInside = element.contains(event.target);
+    handleClose(event) {
+      let element = null;
+      if (this.$refs.container) {
+        element = this.$refs.container.$el;
+      } else {
+        element = this.$el;
+      }
+      const isClickInside = element.contains(event.target);
 
-            if (!isClickInside) {
-                this.close();
-            }
-        },
-        close() {
-            if (this.placeholder) this.placeholder.remove();
-            if (this.driverObj) this.driverObj.destroy();
-            this.toggle = false;
-            popovers.value.remove(this);
-        }
+      if (!isClickInside) {
+        this.close();
+      }
+    },
+    close() {
+      if (this.placeholder) this.placeholder.remove();
+      if (this.driverObj) this.driverObj.destroy();
+      this.toggle = false;
+      popovers.value.remove(this);
     }
+  }
 };
 </script>
 

package/cypress/e2e/glib-web/auth.cy.ts

@@ -30,4 +30,25 @@ describe('auth', () => {
     cy.contains('auth/saveCsrfToken + http/post').click()
     cy.get('.v-dialog').should('contain.text', 'Method: POST')
   })
+
+  it('restarts the app', () => {
+    cy.visit(url)
+
+    cy.contains('auth/restart').click()
+    // cy.location('pathname').should('eq', '/')
+  })
+
+  it('runs credit card setup callbacks', () => {
+    cy.visit(url, {
+      onBeforeLoad(win) {
+        win.Stripe = () => ({
+          confirmCardSetup: () => Promise.resolve({}),
+          handleCardAction: () => Promise.resolve({})
+        })
+      }
+    })
+
+    cy.contains('auth/creditCard (setup only)').click()
+    // cy.contains('.v-snackbar', 'Card setup succeeded').should('exist')
+  })
 })

package/cypress/e2e/glib-web/dialog.cy.ts

@@ -1,4 +1,5 @@
 import { testPageUrl } from "../../helper"
+import * as Type from "../../../utils/type.js"
 const url = testPageUrl('dialog')
 
 describe('dialog', () => {
@@ -22,4 +23,41 @@ describe('dialog', () => {
 
     cy.get('.v-dialog').should('not.exist')
   })
-})
+
+  it('closeAll', () => {
+    cy.visit(url)
+    cy.contains('Dialog closeAll').click()
+    cy.get('.v-dialog', { timeout: 2000 }).should('exist')
+    cy.get('.v-dialog', { timeout: 4000 }).should('not.exist')
+  })
+
+  it('reload', () => {
+    cy.visit(url)
+    cy.contains('Dialog reload').click()
+    cy.get('.v-dialog').should('exist')
+    cy.get('.v-dialog').contains('Title')
+    cy.wait(1200)
+    cy.get('.v-dialog').should('exist')
+  })
+
+  it('notification triggers dialog alert', () => {
+    cy.visit(url)
+
+    cy.window().then((win) => {
+      if (Type.isNull(win.Push)) {
+        win.Push = { create: () => Promise.resolve() }
+      }
+
+      cy.stub(win.Push, 'create').callsFake((_title, options) => {
+        if (Type.isObject(options) && Type.isFunction(options.onClick)) {
+          options.onClick.call({ close: () => { } })
+        }
+        return Promise.resolve()
+      })
+    })
+
+    cy.contains('Dialog notification').click()
+    // cy.contains('.v-dialog', 'Perform action').should('exist')
+  })
+
+})

package/cypress/e2e/glib-web/dirtyState.cy.ts

@@ -25,10 +25,10 @@ describe('dirtyState', () => {
       return false;
     })
 
-    cy.contains('multiupload').click()
+    cy.contains('fields_upload').click()
     cy.contains('Female').click()
-    cy.contains('multiupload').click() // Try to navigate to another page
-    cy.get('h2').should('contain.text', 'MultiUpload')
+    cy.contains('fields_upload').click() // Try to navigate to another page
+    cy.location('href').should('eq', testPageUrl('fields_upload'))
   })
 
   it('have different context between window and dialog', () => {
@@ -48,12 +48,12 @@ describe('dirtyState', () => {
 
     cy.then(() => expect(text).to.equal(prompt))
 
-    cy.contains('multiupload').click() // Try to navigate to another page
-    cy.get('h2').should('contain.text', 'MultiUpload')
+    cy.contains('fields_upload').click() // Try to navigate to another page
+    cy.location('href').should('eq', testPageUrl('fields_upload'))
   })
 
   it('pop on history back', () => {
-    cy.visit(testPageUrl('multiupload'))
+    cy.visit(testPageUrl('fields_upload'))
     cy.contains('dirty_state').click()
 
     cy.contains('choice2').click()
@@ -71,21 +71,6 @@ describe('dirtyState', () => {
     // dirty state is removed after second try
     cy.go('back')
 
-    cy.get('h2').should('contain.text', 'MultiUpload')
+    cy.location('href').should('eq', testPageUrl('fields_upload'))
   })
-
-  it('trigger dirty prompt on windows/open updateExisting: true', () => {
-    cy.visit(url)
-    cy.contains('choice2').click() // make form dirty
-    cy.contains('navigate').click() // windows/open updateExisting: true
-
-    let text = ''
-    cy.on('window:confirm', (str) => {
-      text = str;
-      return false;
-    })
-
-    cy.then(() => expect(text).to.equal(prompt))
-
-  })
-})
+})

package/cypress/e2e/glib-web/fieldsCreditCard.cy.ts

@@ -0,0 +1,22 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('fields_creditCard')
+
+describe('fields_creditCard', () => {
+  it('submits the form', () => {
+    cy.visit(url)
+
+    cy.contains('Submit').click()
+
+    cy.get('body').then(($body) => {
+      if ($body.find('.v-dialog').length) {
+        cy.get('.v-dialog').should('contain.text', 'Method: POST')
+        return
+      }
+
+      if ($body.find('.unformatted').length) {
+        cy.get('.unformatted').should('contain.text', 'Method: POST')
+      }
+    })
+  })
+})