glib-web 4.42.0 → 4.42.1

package/actions/logics/set.js

@@ -2,6 +2,7 @@ import jsonLogic from 'json-logic-js';
 import merge from 'lodash.merge';
 import { nextTick } from "vue";
 import { sanitize } from "../../components/composable/date";
+import { htmlElement } from "../../components/helper";
 import { isPresent } from "../../utils/type";
 import { getFormData as _getFormData } from "../../components/composable/form";
 
@@ -94,6 +95,16 @@ export default class {
       if (!targetComponent) {
         console.warn("Component ID not found", id);
       }
+      Utils.type.ifObject(targetComponent, (component) => {
+        const element = htmlElement(component);
+        Utils.type.ifObject(element, (el) => {
+          Utils.type.ifFunction(el.closest, () => {
+            if (!el.closest('form')) {
+              console.warn("Target component is not inside a form", component.viewId || id);
+            }
+          });
+        });
+      });
       return targetComponent;
     }).filter((comp) => comp);
 

package/components/charts/series.js

@@ -1,7 +1,9 @@
 import { Chart, Colors } from "chart.js";
 import chartDataLabels from 'chartjs-plugin-datalabels';
 import doughnutLabel from 'chartjs-plugin-doughnutlabel-v3';
-import { settings, Vue, vueApp } from "../..";
+import { settings } from "../../utils/settings";
+import { vueApp } from "../../store";
+import * as TypeUtils from "../../utils/type";
 import { computePosition, flip, offset } from '@floating-ui/dom';
 
 import 'chartkick/chart.js';
@@ -15,8 +17,18 @@ Chart.register(Colors);
 if (settings.chartPlugin.htmlLegendPlugin) Chart.register(settings.chartPlugin.htmlLegendPlugin);
 
 import VueChartkick from 'vue-chartkick';
-import { computed } from "vue";
-Vue.use(VueChartkick);
+import { computed, getCurrentInstance } from "vue";
+
+let chartkickInstalled = false;
+const installChartkick = () => {
+    if (chartkickInstalled) return;
+    const instance = getCurrentInstance();
+    const app = instance?.appContext?.app;
+    if (TypeUtils.isObject(app) && TypeUtils.isFunction(app.use)) {
+        app.use(VueChartkick);
+        chartkickInstalled = true;
+    }
+};
 
 const multipleDataSeries = (dataSeries) => {
     return dataSeries.map((value) => {
@@ -110,6 +122,7 @@ const getData = (multiple, dataSeries, context) => {
 };
 
 function useChart({ dataSeries, spec, multiple = true }) {
+    installChartkick();
     const isDonut = [spec.styleClasses].flat().includes('donut');
     const { datalabels, centerLabel, customTooltip } = spec.plugins || {};
     const legend = spec.legend || { display: true };
@@ -198,4 +211,4 @@ function useChart({ dataSeries, spec, multiple = true }) {
 }
 
 
-export { useChart };
+export { useChart };

package/components/composable/form.js

@@ -1,5 +1,6 @@
 import { getCurrentInstance, inject, nextTick, onBeforeUnmount, onBeforeUpdate, onMounted, provide, ref, watch } from "vue";
 import { closest, htmlElement } from "../helper";
+import { isArray, isFunction } from "../../utils/type.js";
 
 const setBusy = (htmlElement, value) => {
   const event = new Event('forms/setBusy', { bubbles: true });
@@ -13,6 +14,33 @@ const triggerOnChange = (htmlElement) => {
 
 const triggerOnInput = (htmlElement) => nextTick(() => htmlElement.dispatchEvent(new Event('input', { bubbles: true })));
 
+const getCheckboxNames = (el) => {
+  const checkboxNames = new Set();
+  const nonCheckboxNames = new Set();
+  if (!el || !isFunction(el.querySelectorAll)) return checkboxNames;
+
+  el.querySelectorAll('[name]').forEach((input) => {
+    const name = input.name;
+    if (input instanceof HTMLInputElement && input.type === 'checkbox') {
+      if (!nonCheckboxNames.has(name)) checkboxNames.add(name);
+      return;
+    }
+    nonCheckboxNames.add(name);
+    checkboxNames.delete(name);
+  });
+
+  return checkboxNames;
+};
+
+const warnDuplicateNames = (key, seenNames, warnedNames, checkboxNames) => {
+  if (seenNames.has(key) && !warnedNames.has(key) && !checkboxNames.has(key)) {
+    console.warn(`Multiple inputs share the same name: "${key}".`);
+    warnedNames.add(key);
+    return;
+  }
+  seenNames.add(key);
+};
+
 const getFormData = (el, ignoredFields = new Set()) => {
   if (!el) return {};
   if (!(el instanceof HTMLFormElement) && el instanceof HTMLElement) {
@@ -21,7 +49,11 @@ const getFormData = (el, ignoredFields = new Set()) => {
 
   const formData = new FormData(el);
   const obj = {};
+  const seenNames = new Set();
+  const warnedNames = new Set();
+  const checkboxNames = getCheckboxNames(el);
   formData.forEach((value, key) => {
+    warnDuplicateNames(key, seenNames, warnedNames, checkboxNames);
     if (ignoredFields.has(key)) return;
 
     // Reflect.has in favor of: object.hasOwnProperty(key)
@@ -29,7 +61,7 @@ const getFormData = (el, ignoredFields = new Set()) => {
       obj[key] = value;
       return;
     }
-    if (!Array.isArray(obj[key])) {
+    if (!isArray(obj[key])) {
       obj[key] = [obj[key]];
     }
     obj[key].push(value);
@@ -118,4 +150,4 @@ function useGlibInput({ props, cacheValue = true }) {
 
 }
 
-export { setBusy, triggerOnChange, triggerOnInput, useGlibForm, useGlibInput, getFormData, getAllFormData };
+export { setBusy, triggerOnChange, triggerOnInput, useGlibForm, useGlibInput, getFormData, getAllFormData };

package/components/fields/_select.vue

@@ -94,7 +94,7 @@
 import inputVariant from '../mixins/inputVariant';
 import { determineDensity } from "../../utils/constant";
 import { triggerOnChange, triggerOnInput, useGlibInput } from "../composable/form";
-import { isBoolean } from '../../utils/type';
+import { isBoolean, isArray } from '../../utils/type';
 
 import { useGlibSelectable, watchNoneOfAbove } from '../composable/selectable';
 import { ref, defineExpose, computed, watch, nextTick, onMounted, onUnmounted } from 'vue';
@@ -402,9 +402,17 @@ export default {
       }
     },
     removeItem(item) {
-      const index = this.fieldModel.indexOf(item.value);
-      if (index >= 0) {
-        this.fieldModel.splice(index, 1);
+      // fieldModel may not be an array when useChips is true but multiple is false.
+      // This can happen when spec.useChips is explicitly set to true while spec.multiple is false.
+      // In this scenario, fieldModel is a single value (not an array), so we need to handle both cases.
+      if (isArray(this.fieldModel)) {
+        const index = this.fieldModel.indexOf(item.value);
+        if (index >= 0) {
+          this.fieldModel.splice(index, 1);
+        }
+      } else {
+        // Single select mode - clear the value
+        this.fieldModel = null;
       }
     },
     $registryEnabled() {

package/components/mixins/generic.js

@@ -43,7 +43,7 @@ export default {
       Utils.type.ifObject(this.spec.validation, val => {
         Object.keys(val).forEach((key) => {
           const validator = ValidationFactory.getValidator(key, val[key]);
-          augmentedRules = augmentedRules.concat([validator.build.bind(validator)]);
+          augmentedRules = [validator.build.bind(validator), ...augmentedRules];
         });
       });
       return augmentedRules;

package/components/mixins/updatableComponent.js

@@ -22,7 +22,6 @@ export default {
       if (spec && spec.id && this.$registryEnabled()) {
 
         const id = this.viewId;
-
         const existingComponent = GLib.component.findById(id);
         // A component with the same ID in a different page shouldn't be considered a
         // duplicate. See `utils/components#deregister` for more details.

package/components/panels/flow.vue

@@ -122,35 +122,30 @@ export default {
   },
   methods: {
     applyStyles(styles, spec) {
-      if (spec.gap) {
-        styles['column-gap'] = `${spec.gap.y}px`;
-        styles['row-gap'] = `${spec.gap.x}px`;
-        if (spec.gap.all) {
-          styles['gap'] = `${spec.gap.all}px`;
-        }
-      }
-
-      if (spec.padding) {
+      Utils.type.ifObject(spec.gap, gap => {
+        Utils.type.ifNumber(gap.all, all => (styles["gap"] = `${all}px`));
+        Utils.type.ifNumber(gap.x, x => (styles["column-gap"] = `${x}px`));
+        Utils.type.ifNumber(gap.y, y => (styles["row-gap"] = `${y}px`));
+      });
 
-        Utils.type.ifObject(spec.padding, padding => {
-          Utils.type.ifNumber(
-            padding.top || padding.y || padding.all,
-            top => (styles["padding-top"] = `${top}px`)
-          );
-          Utils.type.ifNumber(
-            padding.bottom || padding.y || padding.all,
-            bottom => (styles["padding-bottom"] = `${bottom}px`)
-          );
-          Utils.type.ifNumber(
-            padding.left || padding.x || padding.all,
-            left => (styles["padding-left"] = `${left}px`)
-          );
-          Utils.type.ifNumber(
-            padding.right || padding.x || padding.all,
-            right => (styles["padding-right"] = `${right}px`)
-          );
-        });
-      }
+      Utils.type.ifObject(spec.padding, padding => {
+        Utils.type.ifNumber(
+          padding.top || padding.y || padding.all,
+          top => (styles["padding-top"] = `${top}px`)
+        );
+        Utils.type.ifNumber(
+          padding.bottom || padding.y || padding.all,
+          bottom => (styles["padding-bottom"] = `${bottom}px`)
+        );
+        Utils.type.ifNumber(
+          padding.left || padding.x || padding.all,
+          left => (styles["padding-left"] = `${left}px`)
+        );
+        Utils.type.ifNumber(
+          padding.right || padding.x || padding.all,
+          right => (styles["padding-right"] = `${right}px`)
+        );
+      });
     },
   }
 };

package/components/panels/form.vue

@@ -135,9 +135,6 @@ export default {
         const onChange = this.spec.onChange || this.spec.onChangeAndLoad;
         this.formCtx = { form: this.$refs.form };
         const onChangeHandler = () => {
-          if (this.$refs.form) {
-            this.$refs.form.resetValidation();
-          }
           this.formCtx = { form: this.$refs.form };
           if (onChange) this.$executeOnChange();
         };

package/cypress/component/component.cy.ts

@@ -0,0 +1,432 @@
+import { mount } from "cypress/vue";
+import { ref } from "vue";
+import Component from "../../components/component.vue";
+import genericMixin from "../../components/mixins/generic";
+import eventsMixin from "../../components/mixins/events";
+import stylesMixin from "../../components/mixins/styles";
+import updatableComponent from "../../components/mixins/updatableComponent";
+import Framework from "../../utils/public";
+import * as TypeUtils from "../../utils/type";
+import vuetify from "../../plugins/vuetify";
+import { vueApp } from "../../store";
+import App from "../../utils/app";
+import UrlUtils from "../../utils/url";
+import Format from "../../utils/format";
+import Dom from "../../utils/dom";
+import Settings from "../../utils/settings";
+
+const setupGlibGlobals = () => {
+  const win = window as Window & {
+    Utils?: {
+      app: typeof App;
+      type: typeof TypeUtils;
+      url: typeof UrlUtils;
+      format: typeof Format;
+      http: {
+        execute: (
+          properties: Record<string, unknown>,
+          methodName: string,
+          component: unknown,
+          jsonHandler?: (data: Record<string, unknown>, response: { url: string }) => void
+        ) => { request: { cancel: () => void } };
+        startIndicator?: () => void;
+        stopIndicator?: () => void;
+      };
+      dom: typeof Dom;
+      settings: typeof Settings;
+      launch: {
+        dialog: { alert: () => void };
+        snackbar: { error: () => void };
+      };
+    };
+    GLib?: typeof Framework;
+    Stripe?: (key: string) => {
+      elements: () => {
+        create: () => {
+          mount: (target: Element) => void;
+          addEventListener: (_name: string, _handler: (event: unknown) => void) => void;
+          clear: () => void;
+        };
+      };
+      createPaymentMethod: () => Promise<{
+        paymentMethod: { id: string; card: { brand: string; country: string; last4: string } };
+      }>;
+    };
+  };
+
+  win.Utils = {
+    app: App,
+    type: TypeUtils,
+    url: UrlUtils,
+    format: Format,
+    dom: Dom,
+    settings: Settings,
+    http: {
+      execute: (properties, _methodName, _component, jsonHandler) => {
+        if (TypeUtils.isFunction(jsonHandler)) {
+          jsonHandler(
+            { rows: [], pins: [], nextPageUrl: null },
+            { url: TypeUtils.isString(properties?.url) ? properties.url : "" }
+          );
+        }
+        return { request: { cancel: () => {} } };
+      },
+      startIndicator: () => {},
+      stopIndicator: () => {},
+    },
+    launch: {
+      dialog: { alert: () => {} },
+      snackbar: { error: () => {} },
+    },
+  };
+  win.GLib = Framework;
+  vueApp.colors = {};
+  if (!document.getElementById("page_body")) {
+    const pageBody = document.createElement("div");
+    pageBody.id = "page_body";
+    document.body.appendChild(pageBody);
+  }
+
+  if (!win.Stripe) {
+    win.Stripe = (_key: string) => ({
+      elements: () => ({
+        create: () => ({
+          mount: () => {},
+          addEventListener: () => {},
+          clear: () => {},
+        }),
+      }),
+      createPaymentMethod: () =>
+        Promise.resolve({
+          paymentMethod: {
+            id: "pm_test",
+            card: { brand: "visa", country: "US", last4: "4242" },
+          },
+        }),
+    });
+  }
+
+  const http = win.Utils.http;
+  http.execute = (properties, _methodName, _component, jsonHandler) => {
+    if (TypeUtils.isFunction(jsonHandler)) {
+      jsonHandler(
+        { rows: [], pins: [], nextPageUrl: null },
+        { url: TypeUtils.isString(properties?.url) ? properties.url : "" }
+      );
+    }
+    return { request: { cancel: () => {} } };
+  };
+};
+
+const provideDefaults = () => ({
+  isChrome: false,
+  mousePosition: ref({ x: 0, y: 0 }),
+  formCtx: { form: { isValid: true } },
+  radioGroupCtx: { fieldModel: null },
+});
+
+const componentRegistry = TypeUtils.isObject(Component.components)
+  ? (Component.components as Record<string, unknown>)
+  : {};
+const componentNames = Object.keys(componentRegistry).filter(
+  (name) => !name.toLowerCase().includes("stripe")
+);
+const viewFromName = (name: string) => name.replace("-", "/");
+const sampleLabelView = (text = "Sample label") => ({
+  view: "label",
+  text,
+});
+const sampleResponsiveSpec = (childViews = [sampleLabelView()]) => ({
+  view: "panels/responsive",
+  childViews,
+});
+const sampleFieldView = (name = "field", label = "Field") => ({
+  view: "fields/text",
+  name,
+  label,
+  value: "Sample",
+});
+const sampleOptions = [
+  { text: "Option A", value: "a" },
+  { text: "Option B", value: "b" },
+];
+const componentSpecOverrides: Record<string, Record<string, unknown>> = {
+  "views-skeleton": { template: "textArea" },
+  "views-datetime": { value: "2024-01-01T00:00:00Z" },
+  "views-markdown": { text: "Sample **markdown**" },
+  "views-html": { text: "<strong>Sample</strong>" },
+  "views-progressBar": { value: 0.6 },
+  "views-progressCircle": { value: 75, text: "Complete" },
+  "views-image": { url: "https://example.com/image.png", width: 120, height: 80 },
+  "views-avatar": { url: "https://example.com/avatar.png", text: "A" },
+  "views-icon": { material: { name: "info" } },
+  "views-tabBar": {
+    buttons: [{ text: "Tab 1" }, { text: "Tab 2" }],
+    activeIndex: 0,
+  },
+  "views-calendar": { dataUrl: "https://example.com/calendar" },
+  "views-map": {
+    latitude: 37.7749,
+    longitude: -122.4194,
+    zoom: 10,
+    dataUrl: "https://example.com/map",
+  },
+  "views-shareButton": {
+    network: "facebook",
+    url: "https://example.com",
+    text: "Share",
+  },
+  "views-treeView": {
+    items: [
+      {
+        id: "parent-1",
+        label: "Parent",
+        children: [{ id: "child-1", label: "Child" }],
+      },
+    ],
+  },
+  "panels-responsive": { childViews: [sampleLabelView()] },
+  "panels-scroll": { childViews: [sampleLabelView()] },
+  "panels-vertical": { childViews: [sampleLabelView()] },
+  "panels-horizontal": { childViews: [sampleLabelView()] },
+  "panels-flow": { childViews: [sampleLabelView()] },
+  "panels-column": { childViews: [sampleLabelView()] },
+  "panels-ul": { childViews: [sampleLabelView()] },
+  "panels-grid": {
+    childViews: [sampleLabelView()],
+    boxMinWidth: 120,
+    boxMaxWidth: 240,
+    columnGap: 8,
+    rowGap: 8,
+  },
+  "panels-split": {
+    left: sampleResponsiveSpec([sampleLabelView("Left")]),
+    center: sampleResponsiveSpec([sampleLabelView("Center")]),
+    right: sampleResponsiveSpec([sampleLabelView("Right")]),
+  },
+  "panels-form": {
+    url: "https://example.com/form",
+    childViews: [sampleFieldView("user[name]", "Name")],
+  },
+  "panels-list": {
+    sections: [
+      {
+        header: sampleResponsiveSpec([sampleLabelView("Header")]),
+        rows: [
+          {
+            template: "thumbnail",
+            title: "List Item",
+            subtitle: "Subtitle",
+          },
+        ],
+      },
+    ],
+  },
+  "panels-table": {
+    sections: [
+      {
+        header: { dataCells: ["Header"] },
+        rows: [{ cellViews: [sampleLabelView("Cell")] }],
+      },
+    ],
+  },
+  "panels-bulkEdit": {
+    sections: [
+      {
+        header: { dataCells: ["Header"] },
+        rows: [],
+        dataRows: [],
+      },
+    ],
+  },
+  "panels-bulkEdit2": {
+    viewHeaders: [{ id: "col-1", text: "Header" }],
+    viewCells: [{ view: "fields/text", name: "col-1", label: "Header" }],
+    dataRows: [],
+    import: { submitUrl: "https://example.com/bulk-edit", paramName: "rows" },
+  },
+  "panels-custom": {
+    template: "thumbnail",
+    data: { title: "Custom", subtitle: "Template" },
+  },
+  "panels-carousel": { childViews: [sampleLabelView("Slide 1"), sampleLabelView("Slide 2")] },
+  "panels-timeline": {
+    events: [
+      { text: "1", color: "#333333" },
+      { icon: "check", color: "#333333" },
+    ],
+    childViews: [sampleLabelView("Event 1"), sampleLabelView("Event 2")],
+  },
+  "panels-pagination": { length: 3, value: 1 },
+  "panels-tree": {
+    sections: [
+      {
+        rows: [
+          { template: "standard", title: "Root", rows: [] },
+        ],
+      },
+    ],
+  },
+  "panels-web": { url: "https://example.com" },
+  "panels-association": { childViews: [sampleLabelView()] },
+  "fields-select": { options: sampleOptions, value: "a" },
+  "fields-timeZone": { options: sampleOptions, value: "a" },
+  "fields-dynamicSelect": {
+    url: "https://example.com/dynamic-select",
+    selectedOptions: [{ title: "Option A", value: "a" }],
+  },
+  "fields-date": { value: "2024-01-01" },
+  "fields-datetime": { value: "2024-01-01T10:00" },
+  "fields-radioGroup": {
+    childViews: [
+      { view: "fields/radio", label: "Option A", value: "a" },
+      { view: "fields/radio", label: "Option B", value: "b" },
+    ],
+  },
+  "fields-radio": { label: "Option", value: "a" },
+  "fields-checkGroup": {
+    childViews: [
+      { view: "fields/check", label: "Option A", checkValue: "a" },
+      { view: "fields/check", label: "Option B", checkValue: "b" },
+    ],
+  },
+  "fields-check": {
+    label: "Check",
+    checkValue: "yes",
+    uncheckValue: "no",
+    value: "yes",
+  },
+  "fields-chipGroup": { options: sampleOptions, value: "a" },
+  "fields-dynamicGroup": {
+    name: "items",
+    titlePrefix: "Item",
+    groupFieldProperties: [[]],
+    template: {
+      childViews: [sampleFieldView("title", "Title")],
+    },
+  },
+  "fields-creditCard": { publicKey: "pk_test_123", name: "payment" },
+  "fields-submit": { text: "Submit" },
+  "banners-alert": { title: "Alert", message: "Something happened." },
+  "banners-select": {
+    title: "Select",
+    message: "Choose an option.",
+    buttons: [{ text: "Ok" }],
+  },
+  "charts-line": {
+    dataSeries: [
+      { title: "Series A", points: [{ x: "Jan", y: 10 }, { x: "Feb", y: 20 }] },
+    ],
+  },
+  "charts-column": {
+    dataSeries: [
+      { title: "Series A", points: [{ x: "Jan", y: 5 }, { x: "Feb", y: 15 }] },
+    ],
+  },
+  "charts-area": {
+    dataSeries: [
+      { title: "Series A", points: [{ x: "Jan", y: 8 }, { x: "Feb", y: 12 }] },
+    ],
+  },
+  "charts-pie": {
+    dataSeries: [
+      { title: "A", value: 10 },
+      { title: "B", value: 20 },
+    ],
+  },
+  "multimedia-video": {
+    url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+    width: 320,
+    height: 180,
+  },
+};
+const buildComponentSpec = (name: string) => {
+  const view = viewFromName(name);
+  const spec: Record<string, unknown> = {
+    view,
+    id: `${name}-spec`,
+    key: `${name}-key`,
+  };
+
+  if (name.startsWith("views-")) {
+    Object.assign(spec, { text: `${name} sample` });
+  }
+
+  if (name.startsWith("fields-")) {
+    Object.assign(spec, {
+      name: `${name}-field`,
+      label: `${name} label`,
+      value: "sample",
+    });
+  }
+
+  if (name.startsWith("panels-")) {
+    Object.assign(spec, { childViews: [sampleLabelView()] });
+  }
+
+  const override = componentSpecOverrides[name];
+  if (TypeUtils.isObject(override)) {
+    Object.assign(spec, override);
+  }
+
+  return spec;
+};
+const componentSpecs = componentNames.map((name) => ({
+  name,
+  spec: buildComponentSpec(name),
+}));
+
+
+const mountComponent = (spec: Record<string, unknown>) => {
+  mount(Component, {
+    props: { spec },
+    global: {
+      mixins: [genericMixin, eventsMixin, stylesMixin, updatableComponent],
+      plugins: [vuetify],
+      config: {
+        globalProperties: {
+          $type: {
+            isObject: TypeUtils.isObject,
+            isString: TypeUtils.isString,
+            isNumber: TypeUtils.isNumber,
+            isArray: TypeUtils.isArray,
+            ifObject: TypeUtils.ifObject,
+            ifString: TypeUtils.ifString,
+            ifNumber: TypeUtils.ifNumber,
+            ifArray: TypeUtils.ifArray,
+          },
+        },
+      },
+      provide: provideDefaults(),
+    },
+  });
+};
+
+const textFieldVariants = [
+  { view: "fields/text", type: "text" },
+  { view: "fields/number", type: "number" },
+  { view: "fields/email", type: "email" },
+  { view: "fields/url", type: "url" },
+  { view: "fields/password", type: "password" },
+];
+
+describe("component.vue", () => {
+  beforeEach(() => {
+    setupGlibGlobals();
+  });
+
+  componentSpecs.forEach(({ name, spec }) => {
+    it(`renders ${name} for ${spec.view}`, () => {
+      mountComponent(spec);
+      // cy.get(`[data-testid="${name}"]`).should("exist");
+    });
+  });
+
+  textFieldVariants.forEach(({ view, type }) => {
+    it(`renders fields-text for ${view}`, () => {
+      mountComponent({ view });
+      // cy.get('[data-testid="fields-text"]').should("have.attr", "data-type", type);
+    });
+  });
+
+});

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

@@ -20,4 +20,23 @@ describe('autoValidate', () => {
     cy.contains('is not included in the list').should('exist')
     cy.get('.fields-check .v-input--error').should('exist')
   })
-})
+
+  it('has email format validation', () => {
+    cy.visit(url)
+
+    cy.get('input[type="email"]').first().as('emailInput')
+    cy.get('@emailInput').closest('.v-input').as('emailField')
+
+    cy.get('@emailInput').clear().type('invalid-email').blur()
+    cy.get('@emailField').contains('E-mail must be valid').should('exist')
+
+    cy.get('@emailInput').clear().type('jane.doe@example').blur()
+    cy.get('@emailField').contains('E-mail must be valid').should('exist')
+
+    cy.get('@emailInput').clear().type('jane.doe@example.com').blur()
+    cy.get('@emailField').contains('E-mail must be valid').should('not.exist')
+
+    cy.get('@emailInput').clear().type('jane.doe@example.com.au').blur()
+    cy.get('@emailField').contains('E-mail must be valid').should('not.exist')
+  })
+})

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

@@ -0,0 +1,39 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('http')
+
+describe('http', () => {
+  it('http/post sends form data', () => {
+    cy.visit(url)
+
+    cy.contains('button', /^http\/post$/).click()
+
+    cy.get('.v-dialog .unformatted').should('contain.text', 'Method: POST')
+    cy.get('.v-dialog .unformatted').should('contain.text', '"first": "New"')
+    cy.get('.v-dialog .unformatted').should('contain.text', '"last": "Joe"')
+    cy.get('.v-dialog').contains('OK').click()
+    cy.get('.v-dialog').should('not.exist')
+  })
+
+  it('http/patch sends form data', () => {
+    cy.visit(url)
+
+    cy.contains('button', /^http\/patch$/).click()
+
+    cy.get('.v-dialog .unformatted').should('contain.text', 'Method: PATCH')
+    cy.get('.v-dialog .unformatted').should('contain.text', '"name": "Edit Joe"')
+    cy.get('.v-dialog').contains('OK').click()
+    cy.get('.v-dialog').should('not.exist')
+  })
+
+  it('http/delete sends form data', () => {
+    cy.visit(url)
+
+    cy.contains('button', /^http\/delete$/).click()
+
+    cy.get('.v-dialog .unformatted').should('contain.text', 'Method: DELETE')
+    cy.get('.v-dialog .unformatted').should('contain.text', '"name": "Delete Joe"')
+    cy.get('.v-dialog').contains('OK').click()
+    cy.get('.v-dialog').should('not.exist')
+  })
+})

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

@@ -0,0 +1,28 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('list_editable')
+
+describe('list_editable', () => {
+  it('check/uncheck all items', () => {
+    cy.visit(url)
+
+    cy.get('input[type="checkbox"][name="user[check_all]"]').as('checkAll')
+    cy.get('input[type="checkbox"][name^="user[items]"]').as('itemChecks')
+
+    cy.get('@itemChecks').should('have.length', 20)
+
+    cy.get('@checkAll').click()
+
+    cy.get('@checkAll').should('be.checked')
+    cy.get('@itemChecks').each(($input) => {
+      cy.wrap($input).should('be.checked')
+    })
+
+    cy.get('@checkAll').click()
+
+    cy.get('@checkAll').should('not.be.checked')
+    cy.get('@itemChecks').each(($input) => {
+      cy.wrap($input).should('not.be.checked')
+    })
+  })
+})

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

@@ -20,4 +20,20 @@ describe('logics_set', () => {
 
     // Test passes if no errors occurred
   })
+
+  it('warns on duplicate form field names', () => {
+    cy.visit(url, {
+      onBeforeLoad(win) {
+        cy.stub(win.console, 'warn').as('consoleWarn')
+      }
+    })
+
+    cy.contains('Logics Set - Icon Badge').should('be.visible')
+
+    cy.contains('Update label').scrollIntoView().should('be.visible').click()
+    cy.get('#say_label').should('contain.text', 'Hello').and('contain.text', 'Silent')
+
+    cy.get('@consoleWarn')
+      .should('have.been.calledWith', 'Multiple inputs share the same name: "user[say]".')
+  })
 })

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

@@ -0,0 +1,27 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('sheets')
+
+describe('sheets', () => {
+  it('sheets/show renders content and can close', () => {
+    cy.visit(url)
+
+    cy.contains('button', /^sheets\/show$/).click()
+
+    cy.get('.views-sheet').should('have.class', 'right')
+    cy.get('.views-sheet').contains('First ordered list item').should('exist')
+
+    cy.get('.views-sheet').contains('close').click()
+    cy.get('.views-sheet').should('not.exist')
+  })
+
+  it("sheets/open placement: 'right'", () => {
+    cy.visit(url)
+
+    cy.contains("button", "sheets/open placement: 'right'").click()
+
+    cy.get('.views-sheet', { timeout: 10000 }).should('have.class', 'right')
+    cy.get('.views-sheet', { timeout: 10000 }).contains('close').click()
+    cy.get('.views-sheet').should('not.exist')
+  })
+})

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

@@ -0,0 +1,40 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('snackbars')
+
+describe('snackbars', () => {
+  const closeDialogByText = (text: string) => {
+    cy.contains('.v-dialog', text, { timeout: 10000 }).within(() => {
+      cy.contains('.v-btn__content', 'OK').click()
+    })
+    cy.contains('.v-dialog', text).should('not.exist')
+  }
+
+  it('alert with no timeout triggers close action', () => {
+    cy.visit(url)
+
+    cy.contains('button', /^snackbars\/alert with no timeout$/).click()
+
+    cy.get('.v-snackbar')
+      .contains('This is a persistent alert snackbar')
+      .should('exist')
+    cy.get('.v-snackbar').contains('CLOSE').click()
+
+    cy.get('.v-dialog .unformatted').should('contain.text', 'Closed')
+    closeDialogByText('Closed')
+    cy.get('.v-dialog').should('not.exist')
+  })
+
+  it('select snackbar action triggers dialog', () => {
+    cy.visit(url)
+
+    cy.contains('button', /^snackbars\/select$/).click()
+
+    cy.get('.v-snackbar').contains('Option1').click()
+
+    cy.get('.v-dialog .unformatted').should('contain.text', 'Option 1')
+    closeDialogByText('Closed')
+    closeDialogByText('Option 1')
+    cy.get('.v-dialog').should('not.exist')
+  })
+})

package/cypress/support/component-index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts

@@ -0,0 +1,11 @@
+import "./commands";
+
+const win = window as Window & { __settings?: { theme?: object }; __page?: object };
+
+if (!win.__settings) {
+  win.__settings = { theme: {} };
+}
+
+if (!win.__page) {
+  win.__page = {};
+}

package/cypress/support/launch-stub.js

@@ -0,0 +1,8 @@
+const noop = () => {};
+
+export default {
+  dialog: { open: noop, close: noop },
+  sheet: { open: noop, close: noop },
+  snackbar: { open: noop, close: noop },
+  popover: { open: noop, close: noop },
+};

package/cypress.config.ts

@@ -1,7 +1,42 @@
 import { defineConfig } from "cypress";
+import vue from "@vitejs/plugin-vue";
 import codeCoverageTask from "@cypress/code-coverage/task";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const launchStub = path.resolve(__dirname, "cypress/support/launch-stub.js");
+const launchModule = path.resolve(__dirname, "utils/launch.js");
 
 export default defineConfig({
+  component: {
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+      viteConfig: {
+        plugins: [vue()],
+        resolve: {
+          alias: [
+            {
+              find: "../../utils/launch",
+              replacement: launchStub,
+            },
+            {
+              find: launchModule,
+              replacement: launchStub,
+            },
+            {
+              find: /utils\/launch$/,
+              replacement: launchStub,
+            },
+          ],
+        },
+      },
+    },
+    specPattern: "cypress/component/**/*.cy.{js,jsx,ts,tsx}",
+    supportFile: "cypress/support/component.ts",
+  },
   e2e: {
     setupNodeEvents(on, config) {
       codeCoverageTask(on, config);

package/package.json

@@ -1,12 +1,13 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "4.42.0",
+  "version": "4.42.1",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "cypress run --browser chrome",
-    "test:coverage": "VITE_COVERAGE=true cypress run --browser chrome && nyc report"
+    "test": "env -u ELECTRON_RUN_AS_NODE cypress run --browser chrome",
+    "test:component": "env -u ELECTRON_RUN_AS_NODE cypress run --component",
+    "test:coverage": "env -u ELECTRON_RUN_AS_NODE VITE_COVERAGE=true cypress run --browser chrome && env -u ELECTRON_RUN_AS_NODE VITE_COVERAGE=true cypress run --component && nyc report"
   },
   "author": "",
   "license": "ISC",
@@ -45,12 +46,14 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.7",
+    "@cypress/vite-dev-server": "^5.0.0",
     "@types/chart.js": "^2.9.34",
     "@vitejs/plugin-vue": "^6.0.2",
     "cypress": "^13.13.1",
     "eslint": "^8.36.0",
     "eslint-plugin-vue": "^9.26.0",
     "prettier": "^1.18.2",
+    "sass-embedded": "^1.97.1",
     "typescript": "^4.9.5",
     "vite": "^7.2.7",
     "vite-plugin-compression": "^0.5.1",
@@ -58,4 +61,4 @@
     "vite-plugin-istanbul": "^7.2.1",
     "vite-plugin-ruby": "^5.1.1"
   }
-}
+}

package/templates/editable.vue

@@ -1,6 +1,6 @@
 <template>
   <component :is="componentName" :href="$href()" class="thumbnail" :class="cssClasses" @[clickCondition]="$onClick()">
-    <panels-responsive :spec="spec.header" />
+    <panels-responsive v-if="headerSpec" :spec="headerSpec" />
     <div style="display:flex;">
       <!-- <div v-if="spec.leftOuterButtons" style="display:flex; margin-top:10px;">
         <template v-for="(item, index) in spec.leftOuterButtons" :key="index">
@@ -14,7 +14,7 @@
         <!-- <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon> -->
 
         <!-- Specify a key to prevent reuse which causes an issue where the checkbox would use the previous name. -->
-        <fields-check v-if="checkSpec" :key="checkSpec.name" :spec="checkSpec" />
+        <glib-component v-if="checkSpec" :key="checkSpec.name" :spec="checkSpec" />
 
         <template v-slot:prepend>
           <div style="display: flex">
@@ -50,10 +50,10 @@
 
           <v-list-item-subtitle v-if="spec.subtitle">{{
             spec.subtitle
-          }}</v-list-item-subtitle>
+            }}</v-list-item-subtitle>
           <v-list-item-subtitle v-if="spec.subsubtitle">{{
             spec.subsubtitle
-          }}</v-list-item-subtitle>
+            }}</v-list-item-subtitle>
 
           <div v-if="hasChips" class="chips">
             <template v-for="(item, index) in chips" :key="index">
@@ -71,19 +71,16 @@
         </template>
 
       </v-list-item>
-      <panels-responsive :spec="spec.right" />
+      <panels-responsive v-if="rightSpec" :spec="rightSpec" />
     </div>
-    <panels-responsive :spec="spec.footer" />
+    <panels-responsive v-if="footerSpec" :spec="footerSpec" />
   </component>
 </template>
 
 <script>
-import CheckField from "../components/fields/check.vue";
+import * as TypeUtils from "../utils/type.js";
 
 export default {
-  components: {
-    "fields-check": CheckField
-  },
   props: {
     spec: { type: Object, required: true },
     responsiveCols: { type: Number, default: () => 0 }
@@ -93,6 +90,32 @@ export default {
       // editButtons: []
     };
   },
+  setup(props) {
+    const name = props.spec.fieldCheckName;
+    const checkSpec = TypeUtils.isString(name) && name.length > 0 ? {
+      id: props.spec.id,
+      view: "fields/check",
+      name: name,
+      checkValue: true,
+      valueIf: props.spec.fieldCheckValueIf,
+      padding: { left: 16 }
+    } : null;
+
+    const chipsSource = TypeUtils.isArray(props.spec.chips) ? props.spec.chips : [];
+    const chips = chipsSource.filter(item => TypeUtils.isObject(item)).map(item => {
+      let color = null;
+      TypeUtils.ifArray(item.styleClasses, classes => {
+        for (const val of ["success", "info", "warning", "error"]) {
+          if (classes.includes(val)) {
+            color = val;
+          }
+        }
+      });
+      return Object.assign({}, item, { color: color, view: "chip" });
+    });
+
+    return { checkSpec, chips };
+  },
   computed: {
     componentName() {
       // Use `a` to enable "open in new tab".
@@ -102,6 +125,15 @@ export default {
     cssClasses() {
       return this.$classes(this.spec, "templates/thumbnail");
     },
+    headerSpec() {
+      return TypeUtils.isObject(this.spec.header) ? this.spec.header : null;
+    },
+    rightSpec() {
+      return TypeUtils.isObject(this.spec.right) ? this.spec.right : null;
+    },
+    footerSpec() {
+      return TypeUtils.isObject(this.spec.footer) ? this.spec.footer : null;
+    },
     clickCondition() {
       if (this.spec.onClick || this.spec.onLongPress) {
         // This will show the clickable indication
@@ -110,35 +142,8 @@ export default {
       return null;
     },
     hasChips() {
-      return this.spec.chips && this.spec.chips.length > 0;
+      return this.chips.length > 0;
     },
-    // Implemented as computed so that it gets reflected when reordering
-    chips() {
-      return (this.spec.chips || []).map(item => {
-        var color = null;
-        this.$type.ifArray(item.styleClasses, classes => {
-          for (const val of ["success", "info", "warning", "error"]) {
-            if (classes.includes(val)) {
-              color = val;
-            }
-          }
-        });
-        return Object.assign({}, item, { color: color, view: "chip" });
-      });
-    },
-    // Implemented as computed so that it gets reflected when navigating to another list containing check fields.
-    checkSpec() {
-      if (this.spec.fieldCheckName) {
-        return {
-          view: "fields/checkGroup",
-          name: this.spec.fieldCheckName,
-          checkValue: true,
-          valueIf: this.spec.fieldCheckValueIf,
-          padding: { left: 16 }
-        };
-      }
-      return null;
-    }
     // cssStyles() {
     //   const styles = this.$styles();
     //   // switch(this.spec.align) {
@@ -155,6 +160,9 @@ export default {
     // },
   },
   methods: {
+    $registryEnabled() {
+      return false;
+    },
     buttonSpec(item) {
       // Classes should be coming from the backend
       // const styleClasses = ["text", "x-small"]
@@ -229,4 +237,4 @@ a.thumbnail {
   //   cursor: move;
   // }
 }
-</style>
+</style>