glib-web 4.41.1 → 4.42.0

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/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>
@@ -62,7 +97,7 @@ import { triggerOnChange, triggerOnInput, useGlibInput } from "../composable/for
 import { isBoolean } 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,12 @@ export default {
         triggerOnChange(containerEl);
       }
     },
+    removeItem(item) {
+      const index = this.fieldModel.indexOf(item.value);
+      if (index >= 0) {
+        this.fieldModel.splice(index, 1);
+      }
+    },
     $registryEnabled() {
       return false;
     }
@@ -212,4 +441,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/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "4.41.1",
+  "version": "4.42.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/templates/thumbnail.vue

@@ -10,6 +10,7 @@
         </template>
 </div> -->
 
+      <panels-responsive v-if="spec.left" :spec="spec.left" />
       <v-list-item v-longclick="$onLongPress" class="item-content" :style="columnStyles()">
         <!-- <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon> -->