glib-web 4.42.0 → 4.42.2

package/.nycrc.json

@@ -9,10 +9,25 @@
     ".ts",
     ".vue"
   ],
+  "exclude-after-remap": true,
+  "include": [
+    "action.js",
+    "actions/**",
+    "app.vue",
+    "components/**",
+    "constant.js",
+    "extensions/**",
+    "index.js",
+    "keys.js",
+    "nav/**",
+    "plugins/**",
+    "store.js",
+    "templates/**",
+    "utils/**"
+  ],
   "exclude": [
-    "cypress/**",
-    "coverage/**",
-    "doc/**",
-    "node_modules/**"
+    "actions/cables",
+    "actions/analytics",
+    "utils/private"
   ]
-}
+}

package/action.js

@@ -85,9 +85,6 @@ import ActionListsAppend from "./actions/lists/append";
 import ActionBottomBannersOpen from "./actions/bottom_banners/open";
 import ActionBottomBannersClose from "./actions/bottom_banners/close";
 
-import ActionGlobalStatesWatch from "./actions/global_states/watch";
-import ActionGlobalStatesSet from "./actions/global_states/set";
-
 import ActionDetectCountry from "./actions/browsers/detectCountry";
 import ActionDetectTimezone from "./actions/browsers/detectTimezone";
 
@@ -189,9 +186,6 @@ const actions = {
   "bottomBanners/open": ActionBottomBannersOpen,
   "bottomBanners/close": ActionBottomBannersClose,
 
-  "globalStates/watch": ActionGlobalStatesWatch,
-  "globalStates/set": ActionGlobalStatesSet,
-
   "files/upload": ActionFilesUpload,
 
   "browsers/detectCountry": ActionDetectCountry,

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/agent/glib_test_sync.yaml

@@ -0,0 +1,108 @@
+version: 1
+name: glib-web-test-sync
+description: >
+  Compare doc/garage/test_page pages with Cypress tests in cypress/e2e/glib-web and
+  scaffold missing tests when a page exists without coverage.
+
+inputs:
+  doc_dir: doc/garage/test_page
+  test_dir: cypress/e2e/glib-web
+  test_helper: cypress/helper.ts
+  ai_test_prompt: |
+    Generate a Cypress e2e test for the glib test page: {{page_slug}}.
+    Inputs you can use:
+    - Source: {{doc_page_path}}
+    - Existing tests: {{existing_tests_dir}}
+    Requirements:
+    - Must use: import { testPageUrl } from "../../helper"
+    - Must set: const url = testPageUrl('{{page_slug}}')
+    - Click every button defined in {{doc_page_path}} (include nested buttons in dialogs/sheets/menus).
+    - For each button click, assert the expected result implied by its onClick action.
+    - Use one or more it blocks; revisit the page when state needs a reset.
+    - Match existing project patterns (describe/it, cy.visit, selectors, etc).
+    - Use ASCII only.
+  fallback_test_template: |
+    import { testPageUrl } from "../../helper"
+    const url = testPageUrl('{{page_slug}}')
+
+    const overlaySelectors = [
+      '.v-dialog',
+      '.v-snackbar',
+      '.v-menu__content',
+      '.v-sheet',
+      '.v-overlay__content',
+    ].join(',')
+
+    describe('{{page_slug}}', () => {
+      it('clicks each button', () => {
+        cy.visit(url)
+        cy.get('button').should('have.length.at.least', 1)
+        cy.get('button').then(($buttons) => {
+          const labels = Array.from($buttons)
+            .map((button) => button.innerText.trim())
+            .filter(Boolean)
+
+          cy.wrap(labels).each((label) => {
+            cy.visit(url)
+            cy.contains('button', label).click({ force: true })
+            cy.location('href').then((hrefAfter) => {
+              if (hrefAfter !== url) {
+                expect(hrefAfter).to.not.eq(url)
+                return
+              }
+
+              cy.get('body').then(($body) => {
+                if ($body.find(overlaySelectors).length) {
+                  cy.get(overlaySelectors).should('exist')
+                } else {
+                  cy.contains('button', label).should('exist')
+                }
+              })
+            })
+          })
+        })
+      })
+    })
+
+constraints:
+  - Use utils/type.js for any type checks in helper scripts.
+  - Ignore files that begin with "_" under doc/garage/test_page.
+
+steps:
+  - id: collect-doc-pages
+    instruction: |
+      List *.json.jbuilder files under {{inputs.doc_dir}}.
+      Remove the ".json.jbuilder" suffix to get page slugs.
+      Drop any file that starts with "_".
+      Output: doc_page_slugs.
+
+  - id: collect-test-page-slugs
+    instruction: |
+      Scan every *.cy.ts under {{inputs.test_dir}} and extract all occurrences of
+      testPageUrl('...'). Collect the string values into test_page_slugs.
+      If a file contains no testPageUrl calls, derive a fallback slug by:
+        - Removing the .cy.ts suffix.
+        - Converting camelCase to snake_case.
+      Output: test_page_slugs.
+
+  - id: diff-docs-vs-tests
+    instruction: |
+      Compute missing_page_slugs = doc_page_slugs - test_page_slugs.
+      Output: missing_page_slugs.
+
+  - id: generate-missing-test-content
+    instruction: |
+      For each slug in missing_page_slugs:
+        1) Set doc_page_path = {{inputs.doc_dir}}/<slug>.json.jbuilder.
+        2) Use the AI with {{inputs.ai_test_prompt}} to generate test content.
+        3) If AI output is empty or invalid, use {{inputs.fallback_test_template}}.
+      Output: generated_tests_map (slug -> test_content).
+
+  - id: scaffold-missing-tests
+    instruction: |
+      For each slug in missing_page_slugs:
+        1) Derive a filename by converting snake_case to camelCase and append ".cy.ts".
+           Example: file_upload_new -> fileUploadNew.cy.ts
+        2) Create {{inputs.test_dir}}/<filename> if it does not already exist.
+        3) Write generated_tests_map[<slug>] to the file.
+      Output: created_test_files.

package/components/_internal_button.vue

@@ -82,8 +82,13 @@ export default {
 <style lang="scss">
 .v-btn {
   &.link {
+    /* `height: inherit/auto/initial` will stretch to max height when used inside a horizontal panel,
+      presumably because it is affected by the panel's flex arrangement. */
+    height: 16px;
+    font-size: 1rem;
+
     .v-icon {
-      font-size: 16px;
+      font-size: 1.2rem;
     }
   }
 }
@@ -102,10 +107,6 @@ button {
     /* text-decoration: underline; */
     padding-left: 0;
     padding-right: 0;
-    /* `height: inherit/auto/initial` will stretch to max height when used inside a horizontal panel,
-      presumably because it is affected by the panel's flex arrangement. */
-    height: 16px;
-    font-size: 16px;
     line-height: 1;
     min-width: auto;
     box-shadow: none !important;

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/component.vue

@@ -68,7 +68,6 @@ import HiddenField from "./fields/hidden.vue";
 import TextField from "./fields/text.vue";
 import SubmitField from "./fields/submit.vue";
 import TextAreaField from "./fields/textarea.vue";
-const RichTextField = defineAsyncComponent(() => import("./fields/richText.vue"));
 const RichTextField2 = defineAsyncComponent(() => import("./fields/richText2.vue"));
 // import NewRichTextField from "./fields/newRichText.vue";
 const FileField = defineAsyncComponent(() => import("./fields/file.vue"));

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

@@ -3,11 +3,10 @@
     <!-- Set `menu-props` so the menu will never be wider than the select field.
          See https://github.com/vuetifyjs/vuetify/issues/17751 -->
     <component ref="comp" :is="compName" :color="gcolor" v-model="fieldModel" :label="label" :items="normalizedOptions"
-      :disabled="inputDisabled" :multiple="spec.multiple" :readonly="spec.readOnly"
-      :clearable="spec.clearable" :placeholder="spec.placeholder" :rules="$validation()" persistent-hint
-      :append-icon="append.icon" validate-on="blur" item-title='text' :variant="variant"
-      :density="density" persistent-placeholder @update:modelValue="onChange" @focus="focused = true"
-      @blur="focused = false" :menu-props="{ maxWidth: 0 }">
+      :disabled="inputDisabled" :multiple="spec.multiple" :readonly="spec.readOnly" :clearable="spec.clearable"
+      :placeholder="spec.placeholder" :rules="$validation()" persistent-hint :append-icon="append.icon"
+      validate-on="input" item-title='text' :variant="variant" :density="density" persistent-placeholder
+      @update:modelValue="onChange" @focus="focused = true" @blur="focused = false" :menu-props="{ maxWidth: 0 }">
 
       <template #item="{ props, item }">
         <div class="fields-select-option">
@@ -23,7 +22,7 @@
           <select-item-default v-else :context="props" :item="item" :spec="spec"></select-item-default>
         </div>
       </template>
- 
+
       <template v-slot:prepend-item>
         <template v-if="spec.prependSelectAll">
           <v-list-item title="Select All" @click="checkAll">
@@ -40,35 +39,18 @@
       </template>
 
       <template v-if="useChips" #selection="{ item, index }">
-        <v-chip
-          v-if="index < maxVisibleChips"
-          :density="density"
-          closable
-          @click:close="removeItem(item)"
-        >
+        <v-chip v-if="index < maxVisibleChips" :density="density" closable @click:close="removeItem(item)">
           <span>{{ item.title }}</span>
         </v-chip>
         <v-chip
           v-if="!expanded && chipExceedsTwoLines && visibleChipCount < fieldModel.length && index === visibleChipCount"
-          :density="density"
-          clickable
-          @click="expanded = true"
-          class="text-caption expansion-chip"
-          variant="outlined"
-          color="primary"
-        >
+          :density="density" clickable @click="expanded = true" class="text-caption expansion-chip" variant="outlined"
+          color="primary">
           {{ fieldModel.length - visibleChipCount }} more
           <common-icon :spec="{ material: { name: 'expand_more' } }" class="ml-1" />
         </v-chip>
-        <v-chip
-          v-if="expanded && chipExceedsTwoLines && index === fieldModel.length - 1"
-          :density="density"
-          clickable
-          @click="collapseChips"
-          class="text-caption expansion-chip"
-          variant="outlined"
-          color="primary"
-        >
+        <v-chip v-if="expanded && chipExceedsTwoLines && index === fieldModel.length - 1" :density="density" clickable
+          @click="collapseChips" class="text-caption expansion-chip" variant="outlined" color="primary">
           Show less
           <common-icon :spec="{ material: { name: 'expand_less' } }" class="ml-1" />
         </v-chip>
@@ -94,7 +76,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 +384,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/fields/radioGroup.vue

@@ -4,7 +4,7 @@
        validation error on page load.
     -->
   <v-radio-group v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly" :disabled="inputDisabled"
-    :rules="$validation()" :inline="spec.row" validate-on="blur" @change="$executeOnChange()" :class="$classes()"
+    :rules="$validation()" :inline="spec.row" validate-on="input" @change="$executeOnChange()" :class="$classes()"
     :style="$styles()" v-if="loadIf">
     <!-- <div v-for="(childView, index) in spec.childViews" :key="index">
       <glib-component :spec="childView" />

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/multimedia/video.vue

@@ -24,12 +24,24 @@ export default {
       paddingBottom: null
     };
   },
+  watch: {
+    spec: {
+      deep: true,
+      handler() {
+        this.updateFromSpec();
+      }
+    }
+  },
   methods: {
     $ready() {
+      this.updateFromSpec();
+    },
+    updateFromSpec() {
+      this.paddingBottom = null;
       this.width = this.$length(this.spec.width);
       this.height = this.$length(this.spec.height);
 
-      if (this.height == null) {
+      if (Utils.type.isNull(this.height)) {
         // Let the container calculates the height
         this.height = "100%";
 

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();
         };