glib-web 4.41.1 → 4.42.1

package/.claude/settings.local.json

@@ -0,0 +1,24 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//home/hgani/workspace/glib-web/app/views/json_ui/garage/**)",
+      "Read(//home/hgani/workspace/glib-web-npm/doc/garage/**)",
+      "Read(//home/hgani/workspace/glib-web-npm/doc/common/**)",
+      "Bash(find:*)",
+      "Bash(npx cypress run:*)",
+      "Read(//home/hgani/workspace/glib-web/**)",
+      "Bash(curl:*)",
+      "Bash(pkill:*)",
+      "Bash(gh pr list:*)",
+      "WebSearch",
+      "WebFetch(domain:vuetifyjs.com)",
+      "Bash(lsof:*)",
+      "Bash(readlink:*)",
+      "WebFetch(domain:github.com)",
+      "Bash(npm run dev)",
+      "Bash(npm run)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/actions/forms/submit.js

@@ -1,6 +1,16 @@
 export default class {
   execute(properties, component) {
-    const target = GLib.component.findById(properties.targetId) || component;
+    let target = component;
+
+    if (properties.targetId) {
+      target = GLib.component.findById(properties.targetId);
+
+      if (!target) {
+        console.warn("Component ID not found for form submission:", properties.targetId);
+        target = component;
+      }
+    }
+
     target.$dispatchEvent("forms/directSubmit", {
       url: properties.overrideUrl,
       method: properties.overrideMethod,

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

@@ -1,11 +1,11 @@
 <template>
-  <div ref="container" :style="$styles()" :class="$classes()" v-if="loadIf">
+  <div ref="container" :style="$styles()" :class="$classes()" v-if="loadIf" class="fields-select-wrapper">
     <!-- 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"
-      :chips="useChips" :disabled="inputDisabled" :multiple="spec.multiple" :readonly="spec.readOnly"
+      :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" :closable-chips="spec.multiple"
+      :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 }">
 
@@ -23,7 +23,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">
@@ -39,6 +39,41 @@
         <common-responsive v-if="spec.header" :spec="spec.header" />
       </template>
 
+      <template v-if="useChips" #selection="{ item, index }">
+        <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"
+        >
+          {{ 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"
+        >
+          Show less
+          <common-icon :spec="{ material: { name: 'expand_less' } }" class="ml-1" />
+        </v-chip>
+      </template>
+
       <template v-slot:append-item v-if="spec.footer">
         <common-responsive :spec="footer" />
       </template>
@@ -59,10 +94,10 @@
 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 } from 'vue';
+import { ref, defineExpose, computed, watch, nextTick, onMounted, onUnmounted } from 'vue';
 import SelectItemDefault from "./_selectItemDefault.vue";
 import SelectItemWithImage from "./_selectItemWithImage.vue";
 import SelectItemWithIcon from "./_selectItemWithIcon.vue";
@@ -85,6 +120,166 @@ export default {
     const options = ref(props.spec.options);
     const comp = ref(null);
     const append = props.spec.append || {};
+    const expanded = ref(false);
+    const chipExceedsMaxLines = ref(false);
+    const visibleChipCount = ref(Infinity);
+
+    // Constants for chip line calculation
+    const DEFAULT_MAX_LINES = 2;
+    const DEFAULT_LINE_HEIGHT = 40;
+    const CHIP_GAP = 12; // Gap between chips + margins
+
+    // Computed property for determining how many chips to show
+    const maxVisibleChips = computed(() => {
+      if (!expanded.value) {
+        return visibleChipCount.value;
+      }
+      // When expanded, show all chips except reserve space for "Show less" if needed
+      return chipExceedsMaxLines.value ? fieldModel.value.length - 1 : fieldModel.value.length;
+    });
+
+    // Helper function to find the container that holds all chips
+    const findChipsContainer = (allChips) => {
+      if (allChips.length === 0) return null;
+
+      let container = allChips[0].parentElement;
+      // Walk up the DOM to find a container that has multiple chips
+      while (container && container.querySelectorAll('.v-chip').length <= 1) {
+        container = container.parentElement;
+      }
+      return container;
+    };
+
+    // Method to check if chips exceed max lines
+    const checkChipLines = (isResizeTriggered = false) => {
+      if (!comp.value) return;
+
+      // Get max lines config: 0 = no limit, null/undefined = default 2
+      const maxLines = props.spec.maxChipLines ?? DEFAULT_MAX_LINES;
+
+      // If maxLines is 0, don't limit chips at all
+      if (maxLines === 0) {
+        chipExceedsMaxLines.value = false;
+        visibleChipCount.value = Infinity;
+        return;
+      }
+
+      // Skip the measurement logic if this is a resize-triggered event and we're collapsed
+      // This prevents incorrect measurements when collapsed with fewer chips visible
+      if (isResizeTriggered && !expanded.value && chipExceedsMaxLines.value) {
+        return;
+      }
+
+      // Try different selectors to find the correct container
+      let selectionEl = comp.value.$el.querySelector('.v-select__selection, .v-autocomplete__selection');
+      if (!selectionEl) {
+        // Fallback: try to find the component root and look for chips there
+        selectionEl = comp.value.$el;
+      }
+
+      // Find all chips
+      const allChips = comp.value.$el.querySelectorAll('.v-chip');
+
+      // Early return if no chips
+      if (allChips.length === 0) {
+        chipExceedsMaxLines.value = false;
+        visibleChipCount.value = Infinity;
+        return;
+      }
+
+      // Find the common parent of all chips
+      const chipsContainer = findChipsContainer(allChips);
+
+      // Get the height of a single line dynamically from actual chip height
+      // This adapts to density settings, custom styles, and theme changes
+      const lineHeight = allChips[0].offsetHeight || DEFAULT_LINE_HEIGHT;
+      const currentHeight = chipsContainer ? chipsContainer.scrollHeight : selectionEl.scrollHeight;
+      const lines = Math.floor(currentHeight / lineHeight);
+
+      const exceedsMaxLines = lines > maxLines;
+
+      if (exceedsMaxLines) {
+        // Calculate how many chips fit in maxLines using line-by-line simulation
+        const chips = chipsContainer ? chipsContainer.querySelectorAll('.v-chip') : allChips;
+        const containerWidth = chipsContainer ? chipsContainer.offsetWidth : selectionEl.offsetWidth;
+
+        let currentLineWidth = 0;
+        let currentLine = 1;
+        let count = 0;
+
+        // Simulate actual chip wrapping line by line
+        for (const chip of chips) {
+          const chipWidth = chip.offsetWidth + CHIP_GAP;
+
+          // Check if chip fits on current line
+          if (currentLineWidth + chipWidth > containerWidth) {
+            // Move to next line
+            currentLine++;
+            currentLineWidth = chipWidth;
+
+            if (currentLine > maxLines) {
+              break; // Exceeded max lines
+            }
+          } else {
+            // Fits on current line
+            currentLineWidth += chipWidth;
+          }
+
+          count++;
+        }
+
+        // Only limit if we actually exceeded maxLines during simulation
+        if (currentLine > maxLines || count < chips.length) {
+          // Some chips didn't fit - reserve space for expansion chip
+          visibleChipCount.value = Math.max(1, count - 1);
+          chipExceedsMaxLines.value = true;
+        } else {
+          // All chips fit within maxLines - show them all!
+          visibleChipCount.value = Infinity;
+          chipExceedsMaxLines.value = false;
+        }
+      } else {
+        visibleChipCount.value = Infinity;
+        chipExceedsMaxLines.value = false;
+      }
+    };
+
+    // Watch for changes in model and expansion state
+    watch([fieldModel, expanded], () => {
+      nextTick(() => {
+        checkChipLines();
+      });
+    });
+
+    // Add resize observer to recalculate on window resize
+    onMounted(() => {
+      const resizeObserver = new ResizeObserver(() => {
+        // CRITICAL: Don't recalculate when collapsed
+        // The collapsed state has fewer chips visible, giving wrong measurements
+        // Only measure on resize when expanded (showing all chips)
+        if (!expanded.value && chipExceedsMaxLines.value) {
+          return; // Skip resize-triggered recalculation when collapsed
+        }
+        checkChipLines(true); // Pass true to indicate this is a resize-triggered calculation
+      });
+
+      const observeComponent = () => {
+        if (comp.value && comp.value.$el) {
+          resizeObserver.observe(comp.value.$el);
+          return true;
+        }
+        return false;
+      };
+
+      // Try to observe immediately, or wait a bit for component to mount
+      if (!observeComponent()) {
+        setTimeout(observeComponent, 100);
+      }
+
+      onUnmounted(() => {
+        resizeObserver.disconnect();
+      });
+    });
 
     const valueForDisableAll = props.spec.valueForDisableAll;
     const { checkAll, isAllSelected, isIndeterminate } = useGlibSelectable({ model: fieldModel, options: options, valueForDisableAll });
@@ -92,13 +287,41 @@ export default {
       watchNoneOfAbove({ model: fieldModel, options: options, valueForDisableAll });
     }
 
+    // Method to handle chip collapse
+    function collapseChips() {
+      expanded.value = false;
+      // IMPORTANT: Force recalculation with multiple nextTick calls to ensure DOM is fully updated
+      nextTick(() => {
+        checkChipLines(false);
+        // IMPORTANT: Second nextTick is necessary because DOM updates are asynchronous and
+        // the first measurement may occur before all chips are properly removed/added
+        // Do not remove this nested nextTick - it's required for correct functionality
+        nextTick(() => {
+          checkChipLines(false);
+        });
+      });
+    }
+
     // This is a public method that is called by other parts of the code, do not delete it.
     function toggle() {
       comp.value.menu = !comp.value.menu;
     }
     defineExpose(['toggle']);
 
-    return { fieldModel, checkAll, isIndeterminate, isAllSelected, append, toggle, comp };
+    return {
+      fieldModel,
+      checkAll,
+      isIndeterminate,
+      isAllSelected,
+      append,
+      toggle,
+      comp,
+      expanded,
+      chipExceedsTwoLines: chipExceedsMaxLines,
+      visibleChipCount,
+      maxVisibleChips,
+      collapseChips
+    };
   },
   data() {
     return {
@@ -178,6 +401,20 @@ export default {
         triggerOnChange(containerEl);
       }
     },
+    removeItem(item) {
+      // 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() {
       return false;
     }
@@ -212,4 +449,21 @@ export default {
   display: flex;
   align-items: center;
 }
+
+.expansion-chip {
+  transition: all 0.2s ease-in-out;
+  box-sizing: content-box;
+  margin-left: 1px;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+}
 </style>

package/components/fields/check.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$classes()" :style="$styles()" v-if="loadIf" @click="$onClick()">
+  <div :class="$classes()" :style="$styles()" v-if="loadIf" @click="onClick($event)">
     <!-- This hidden field should always be there to make sure the submitted param is not empty,
          which could cause "Not accessible" error on the server. -->
     <input v-if="showUncheck" v-model="uncheckValue" type="hidden" :name="fieldName" />
@@ -70,6 +70,10 @@ export default {
     };
   },
   methods: {
+    onClick(event) {
+      event.stopPropagation(); // Prevent event bubbling to parent thumbnail
+      this.$onClick();
+    },
     _linkFieldModels(valueChanged) {
       if (!this.parentModel && valueChanged) {
         this.fieldModel = this.spec.value;

package/components/fields/text.vue

@@ -42,7 +42,7 @@ export default {
               // This regex follows the RFC 5321 standard for email validation,
               // with a slight improvement: it does not allow emails without a proper domain (e.g., "user@test" is invalid, must be "user@test.com").
               //https://stackoverflow.com/questions/13992403/regex-validation-of-email-addresses-according-to-rfc5321-rfc5322
-              /^([!#-'*+\/-9=?A-Z^-~-]+(\.[!#-'*+\/-9=?A-Z^-~-]+)*|"([]!#-[^-~ \t]|(\\[\t -~]))+")@([!#-'*+\/-9=?A-Z^-~-]+\.[!#-'*+\/-9=?A-Z^-~-]+|\[[\t -Z^-~]*])$/i.test(
+              /^([!#-'*+\/-9=?A-Z^-~-]+(\.[!#-'*+\/-9=?A-Z^-~-]+)*|"([]!#-[^-~ \t]|(\\[\t -~]))+")@([A-Z0-9-]+\.)+[A-Z]{2,}$/i.test(
                 v
               ) ||
               "E-mail must be valid",

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