glib-web 4.41.0 → 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/.nycrc.json

@@ -0,0 +1,18 @@
+{
+  "reporter": [
+    "text-summary",
+    "html"
+  ],
+  "report-dir": "./coverage",
+  "extension": [
+    ".js",
+    ".ts",
+    ".vue"
+  ],
+  "exclude": [
+    "cypress/**",
+    "coverage/**",
+    "doc/**",
+    "node_modules/**"
+  ]
+}

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/cypress/support/e2e.ts

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import '@cypress/code-coverage/support'
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

package/cypress.config.ts

@@ -1,9 +1,11 @@
 import { defineConfig } from "cypress";
+import codeCoverageTask from "@cypress/code-coverage/task";
 
 export default defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
-      // implement node event listeners here
+      codeCoverageTask(on, config);
+      return config;
     },
   },
 });

package/doc/TESTING.md

@@ -54,3 +54,17 @@ You **cannot write frontend tests in isolation**.
 ---
 
 These 6 concepts explain **why the test structure exists** and **what you need to get started**. Everything else (selectors, assertions, etc.) is standard Cypress mechanics.
+
+## Cypress Coverage Workflow
+
+- **Prerequisites**: Keep the backend `glib-web` server running with the matching `test_page/*` fixtures (same as normal Cypress runs) and make sure the frontend package is linked into that app: `yarn link glib-web` (run from the backend repo).
+- **Instrument code**: Coverage is only collected when `VITE_COVERAGE=true` because `vite-plugin-istanbul` has `requireEnv` enabled.
+- **Step-by-step run**:
+  1. From the backend repo (`glib-web`), ensure the link is active: `yarn link glib-web`.
+  2. From the backend repo, start Vite with instrumentation: `VITE_COVERAGE=true bin/vite dev`.
+  3. From the backend repo, start Rails: `bin/rails s`.
+  4. From this repo (`glib-web-npm`), execute `yarn test:coverage` to run Cypress and emit coverage reports via `nyc` (uses `.nycrc.json`).
+- **Manual run (if you need custom flags)**:
+  1. `VITE_COVERAGE=true yarn test`
+  2. `nyc report` (or add reporters, e.g. `nyc report --reporter=lcov`).
+- **Where to read results**: HTML report at `coverage/index.html`; summary printed in the terminal; raw data in `.nyc_output` and `coverage/coverage-final.json`.

package/package.json

@@ -1,10 +1,12 @@
 {
+  "type": "module",
   "name": "glib-web",
-  "version": "4.41.0",
+  "version": "4.42.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "cypress run --browser chrome"
+    "test": "cypress run --browser chrome",
+    "test:coverage": "VITE_COVERAGE=true cypress run --browser chrome && nyc report"
   },
   "author": "",
   "license": "ISC",
@@ -42,11 +44,18 @@
     "vuetify": "3.8.6"
   },
   "devDependencies": {
+    "@cypress/code-coverage": "^3.14.7",
     "@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",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vite": "^7.2.7",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-environment": "^1.1.3",
+    "vite-plugin-istanbul": "^7.2.1",
+    "vite-plugin-ruby": "^5.1.1"
   }
 }

package/plugins/viteDefaultConfig.js

@@ -0,0 +1,88 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import RubyPlugin from "vite-plugin-ruby";
+import vue from "@vitejs/plugin-vue";
+import viteCompression from "vite-plugin-compression";
+import EnvironmentPlugin from "vite-plugin-environment";
+import istanbul from "vite-plugin-istanbul";
+import * as TypeUtils from "../utils/type.js";
+
+function pickStringArray(value) {
+  if (!TypeUtils.isArray(value)) {
+    return null;
+  }
+
+  const filtered = value.filter((item) => TypeUtils.isString(item));
+  return filtered.length > 0 ? filtered : null;
+}
+
+function resolveGlibRoot(customRoot) {
+  if (TypeUtils.isString(customRoot)) {
+    return customRoot;
+  }
+
+  return path.resolve(fileURLToPath(new URL("..", import.meta.url)));
+}
+
+
+/**
+ * Builds the default Vite configuration used by glib projects.
+ *
+ * @param {object} [options] Configuration overrides.
+ * @param {string} [options.glibRoot] Root directory for the glib package (defaults to repo root).
+ * @param {string} [options.aliasName] Module alias name for glib imports.
+ * @param {string} [options.aliasPath] Filesystem path used for the alias.
+ * @param {string} [options.workspaceRoot] Workspace root for coverage and path resolution.
+ * @param {string[]} [options.istanbulInclude] Globs to include when running Istanbul.
+ * @param {string[]} [options.environmentVariables] Environment variables exposed to the client.
+ * @param {string[]} [options.serverAllow] Additional filesystem paths allowed by Vite dev server.
+ * @param {import("vite").Plugin[]} [options.plugins] Extra Vite plugins to append.
+ * @returns {import("vite").UserConfig} Config object passed to `defineConfig`.
+ */
+function useGlibViteDefineConfig(options = {}) {
+  if (TypeUtils.isNotNull(globalThis.window)) {
+    throw new Error("useGlibViteDefineConfig is only available in Node environments.");
+  }
+
+  const configOptions = TypeUtils.isObject(options) && !TypeUtils.isArray(options) ? options : {};
+
+  const glibRoot = resolveGlibRoot(configOptions.glibRoot);
+  const aliasName = TypeUtils.isString(configOptions.aliasName) ? configOptions.aliasName : "glib-web";
+  const aliasPath = TypeUtils.isString(configOptions.aliasPath) ? configOptions.aliasPath : glibRoot;
+  const workspaceRoot = TypeUtils.isString(configOptions.workspaceRoot)
+    ? configOptions.workspaceRoot
+    : path.resolve(glibRoot, "..");
+  const istanbulInclude = pickStringArray(configOptions.istanbulInclude) ?? [`${path.basename(glibRoot)}/**/*`];
+  const environmentVariables = pickStringArray(configOptions.environmentVariables) ?? ["VITE_GMAPS_API_KEY"];
+  const serverAllow = pickStringArray(configOptions.serverAllow) ?? [glibRoot];
+  const additionalPlugins = TypeUtils.isArray(configOptions.plugins) ? configOptions.plugins : [];
+
+  return defineConfig({
+    server: {
+      fs: {
+        allow: serverAllow.map((allowedPath) => path.resolve(allowedPath))
+      }
+    },
+    resolve: {
+      alias: {
+        [aliasName]: path.resolve(aliasPath)
+      }
+    },
+    plugins: [
+      vue(),
+      RubyPlugin(),
+      istanbul({
+        cwd: path.resolve(workspaceRoot),
+        include: istanbulInclude,
+        requireEnv: true
+      }),
+      viteCompression(),
+      EnvironmentPlugin(environmentVariables, { defineOn: "import.meta.env" }),
+      ...additionalPlugins
+    ]
+  });
+}
+
+export { useGlibViteDefineConfig };
+export default useGlibViteDefineConfig;

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> -->
 

package/utils/type.js

@@ -1,4 +1,4 @@
-import Hash from "./hash";
+import Hash from "./hash.js";
 
 export function isObject(obj) {
   return typeof obj === "object" && obj !== null;