glib-web 5.0.4 → 5.0.6

package/.claude/settings.local.json

@@ -0,0 +1,39 @@
+{
+  "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)",
+      "Bash(npx eslint:*)",
+      "Bash(npm install:*)",
+      "Bash(yarn lint:*)",
+      "Bash(bin/rails db:migrate:*)",
+      "Bash(bin/rails server:*)",
+      "Bash(dpkg -S:*)",
+      "Bash(source:*)",
+      "Bash(node --version:*)",
+      "Bash(nvm ls:*)",
+      "Bash(nvm use:*)",
+      "Bash(git -C /home/hgani/workspace/glib-web-npm diff --cached --stat)",
+      "Bash(git -C /home/hgani/workspace/glib-web-npm diff --stat)",
+      "Bash(git *)",
+      "Bash(npm whoami *)",
+      "Bash(npm view *)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/actions/browsers/detectCountry.js

@@ -3,7 +3,10 @@
 import countries from "moment-timezone/data/meta/latest.json";
 import Action from "../../action";
 import http from "../../utils/http";
-import merge from 'lodash.merge';
+import * as mergeModule from 'lodash.merge';
+import { interopDefault } from "../../utils/interop.js";
+
+const merge = interopDefault(mergeModule);
 
 export default class {
   async execute(spec, component) {

package/actions/dialogs/notification.js

@@ -1,4 +1,7 @@
-import Push from "push.js";
+import * as PushModule from "push.js";
+import { interopDefault } from "../../utils/interop.js";
+
+const Push = interopDefault(PushModule);
 
 export default class {
   execute(properties, component) {

package/actions/logics/run.js

@@ -1,9 +1,12 @@
-import jsonLogic from 'json-logic-js';
+import * as jsonLogicModule from 'json-logic-js';
+import { interopDefault } from "../../utils/interop.js";
 // Method "closest" return nothing, so use getAllFormData instead
 // One page can consist of many forms
 // so please use carefully
 import { getAllFormData } from "../../components/composable/form";
 
+const jsonLogic = interopDefault(jsonLogicModule);
+
 export default class {
   execute(spec, component) {
     let condition = spec.condition;

package/actions/logics/set.js

@@ -1,10 +1,14 @@
-import jsonLogic from 'json-logic-js';
-import merge from 'lodash.merge';
+import * as jsonLogicModule from 'json-logic-js';
+import * as mergeModule from 'lodash.merge';
 import { nextTick } from "vue";
 import { sanitize } from "../../components/composable/date";
 import { isPresent } from "../../utils/type";
+import { interopDefault } from "../../utils/interop.js";
 import { getFormData as _getFormData } from "../../components/composable/form";
 
+const jsonLogic = interopDefault(jsonLogicModule);
+const merge = interopDefault(mergeModule);
+
 const sumDate = function (a, b) {
   const date = new Date(a);
   const tzoffset = date.getTimezoneOffset() * 60000;

package/components/_icon.vue

@@ -8,9 +8,9 @@
     <!-- model-value must be true to make the badge visible.
          Vuetify's v-badge uses this prop to toggle display:none/block -->
     <template #badge>{{ badge.text }}</template>
-    <InternalIcon :spec="spec" />
+    <InternalIcon ref="delegate" :spec="spec" />
   </v-badge>
-  <InternalIcon v-else :spec="spec" />
+  <InternalIcon v-else ref="delegate" :spec="spec" />
 </template>
 
 <script>

package/components/composable/date.js

@@ -1,5 +1,8 @@
-import moment from "moment-timezone";
+import * as momentModule from "moment-timezone";
 import { isString } from "../../utils/type";
+import { interopDefault } from "../../utils/interop.js";
+
+const moment = interopDefault(momentModule);
 
 export function sanitize(val, type, timeZone) {
   if (!val) return;

package/components/composable/gmap.js

@@ -14,7 +14,9 @@ function waitForGmapLoaded() {
 
 export function useAutocomplete({ inputRef, options, onPlaceChanged }) {
   let autocompleteInstance = null;
-  onMounted(() => {
+  onMounted(async () => {
+    await waitForGmapLoaded();
+
     let inputElement = null;
     if (inputRef.value instanceof HTMLElement) {
       inputElement = inputRef.value;

package/components/datetime.vue

@@ -3,8 +3,11 @@
 </template>
 
 <script>
-import moment from "moment";
+import * as momentModule from "moment";
 import GlibBase from "./base/glibBase.js";
+import { interopDefault } from "../utils/interop.js";
+
+const moment = interopDefault(momentModule);
 
 export default {
   extends: GlibBase,

package/components/fields/file.vue

@@ -55,7 +55,6 @@ export default {
       fileTitle: null,
       fileImage: null,
       fileValue: null,
-      inputElement: null,
       placeholder: {},
       buttonLabels: { delete: 'Delete', upload: 'Upload', change: 'Change' }
     };
@@ -92,14 +91,11 @@ export default {
       }
 
       this.placeholder = this.spec.placeholderView || { inputPlaceholder: 'Upload your file' };
-      this.$nextTick(() => {
-        this.inputElement = this.$refs.directUploadFile;
-      });
       const defaultLabels = { delete: 'Delete', upload: 'Upload', change: 'Change' };
       this.buttonLabels = Object.assign(defaultLabels, this.spec.buttonLabels);
     },
     triggerUpload() {
-      this.inputElement.click();
+      this.$refs.directUploadFile.click();
     },
     removeImage() {
       this.uploaded = false;
@@ -139,7 +135,7 @@ export default {
         this.spec.metadata
       );
 
-      const input = this.inputElement;
+      const input = this.$refs.directUploadFile;
       if (validateFile(this.spec.accepts, file)) {
         this.$dispatchEvent("forms/setBusy", { value: true });
 

package/components/fields/location.vue

@@ -39,9 +39,10 @@ export default {
 
     const { mapInstance, mapPromise } = useGmap({ mapRef: map, options: { zoom: 4 } });
 
-    const marker = new google.maps.Marker({ draggable: true });
+    let marker = null;
+    const markerPromise = mapPromise().then((map) => {
+      marker = new google.maps.Marker({ draggable: true });
 
-    mapPromise().then((map) => {
       const zoomRef = zoomField.value;
       if (zoomRef) {
         const zoomInput = zoomRef.$el.querySelector('input');
@@ -66,13 +67,15 @@ export default {
           lngComponent.fieldModel = position.lng();
         }
       });
+
+      return { map, marker };
     });
 
     const { autocompleteInstance } = useAutocomplete({
       inputRef: autocomplete,
       options: spec.autocompleteOptions,
       onPlaceChanged: (instance) => {
-        mapPromise().then((map) => {
+        markerPromise.then(({ map, marker }) => {
           const location = instance.getPlace().geometry.location;
           map.setCenter(location);
 

package/components/fields/phone/field.vue

@@ -26,8 +26,11 @@
 
 <script>
 import GlibBase from "../../base/glibBase.js";
-import PhoneNumber from "awesome-phonenumber";
+import * as PhoneNumberModule from "awesome-phonenumber";
 import allCountries from "./countries";
+import { interopDefault } from "../../../utils/interop.js";
+
+const PhoneNumber = interopDefault(PhoneNumberModule);
 
 function getCountryByIp() {
   return fetch("https://ip2c.org/s")

package/components/fields/textarea.vue

@@ -4,7 +4,8 @@
       :placeholder="spec.placeholder" :maxlength="maxLength" :readonly="spec.readOnly" :height="height"
       :rules="$validation()" counter :outlined="$classes().includes('outlined')" :disabled="inputDisabled"
       :no-resize="$classes().includes('no-resize')" validate-on="blur" :variant="variant" :density="density"
-      persistent-placeholder :clearable="spec.clearable" @update:modelValue="onChange()">
+      persistent-placeholder :clearable="spec.clearable" :rows="spec.rows || 5"
+      @update:modelValue="onChange()">
 
       <template #counter="{ counter }">
         <span v-if="!spec.readOnly">{{ counter }}</span>

package/components/image.vue

@@ -1,9 +1,9 @@
 <template>
   <common-badge v-if="spec.badge" :spec="spec">
-    <img class="aligner" :src="spec.url || spec.base64Data" :style="styles" :height="height" :width="width"
+    <img class="aligner" :src="spec.url || spec.base64Data" :alt="spec.alt" :style="styles" :height="height" :width="width"
       :class="$classes()" @click="$onClick()" />
   </common-badge>
-  <img v-else class="aligner" :src="spec.url || spec.base64Data" :style="styles" :height="height" :width="width"
+  <img v-else class="aligner" :src="spec.url || spec.base64Data" :alt="spec.alt" :style="styles" :height="height" :width="width"
     :class="$classes()" @click="$onClick()" />
 </template>
 

package/components/mixins/styles.js

@@ -2,8 +2,12 @@ import Hash from "../../utils/hash";
 import { determineColor } from "../../utils/constant";
 import { triggerOnChange } from "../composable/form";
 import { realComponent } from "../helper";
-import set from "lodash.set";
-import merge from "lodash.merge";
+import * as setModule from "lodash.set";
+import * as mergeModule from "lodash.merge";
+import { interopDefault } from "../../utils/interop.js";
+
+const set = interopDefault(setModule);
+const merge = interopDefault(mergeModule);
 const NUMBER_PRECISION = 2;
 const isNeedToBeFixed = (val, component) => {
   return component.type == 'number' && !Number.isInteger(val) && Number.isFinite(val);

package/components/panels/bulkEdit2.vue

@@ -70,9 +70,12 @@ export default {
 import { computed, getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
 import Action from "../../action";
 import Hash from "../../utils/hash";
-import Papa from "papaparse";
+import * as PapaModule from "papaparse";
 import launch from "../../utils/launch";
 import { isPresent } from "../../utils/type";
+import { interopDefault } from "../../utils/interop.js";
+
+const Papa = interopDefault(PapaModule);
 
 class Row {
   constructor({ id, columns, selected, index, status }) {

package/components/panels/custom.vue

@@ -14,7 +14,7 @@
     -->
     <!-- <component ref="ccomp" :is="template" v-if="customData" :name="spec.template" :spec="customData" /> -->
 
-    <component :is="template" :name="spec.template" :spec="contentSpec" />
+    <component :is="template" :compName="spec.template" :spec="contentSpec" />
 
   </div>
 </template>

package/components/panels/table.vue

@@ -53,12 +53,13 @@
               <td v-for="(cell, cellIndex) in row.cellViews" :key="`cell_${cellIndex}`"
                 :colSpan="colSpan(row, cellIndex)" :style="colStyles(row, cellIndex)">
                 <span>
-                  <!-- Prevent double links -->
-                  <glib-component v-if="$href(cell)" :spec="cell" />
-                  <!-- without "|| null" the browser will reload strangely -->
-                  <a v-else :href="$href(row) || null" @click="$onClick($event, row)">
+                  <!-- Cell has its own click target — render it directly to avoid nested anchors. -->
+                  <glib-component v-if="cell.onClick || $href(cell)" :spec="cell" />
+                  <!-- `:href="... || null"` so Vue omits the attribute when there's no URL; an empty string would trigger a page reload. -->
+                  <a v-else-if="row.onClick" :href="$href(row) || null" @click="$onClick($event, row)">
                     <glib-component :spec="cell" />
                   </a>
+                  <glib-component v-else :spec="cell" />
                 </span>
               </td>
             </tr>
@@ -216,24 +217,40 @@ table {
 // }
 
 tbody {
-  tr.clickable {
-    td>a {
-      cursor: pointer;
-    }
-
-    &:hover {
-      background: #eee;
-    }
-  }
-
   td {
     border-top: 1px solid rgba(0, 0, 0, 0.12);
 
     span {
       display: block;
       color: inherit;
+    }
+
+    // Non-clickable cells: default cursor; nested spans inherit it.
+    > span:not(:has(> a)) {
       cursor: default;
     }
+
+    // Clickable cell: move the span's padding onto the <a> so the full padded
+    // area is part of the click target. Children inherit the pointer cursor.
+    > span:has(> a) {
+      padding: 0;
+    }
+
+    > span > a {
+      display: block;
+      padding: var(--cell-padding);
+      cursor: pointer;
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  tr.clickable {
+    cursor: pointer;
+
+    &:hover {
+      background: #eee;
+    }
   }
 }
 
@@ -256,9 +273,7 @@ table.table--grid {
 
 table.table--plain {
   td {
-    >span {
-      padding: unset;
-    }
+    --cell-padding: 0;
   }
 }
 </style>
@@ -273,8 +288,12 @@ table.table--plain {
   }
 
   td {
+    // Override via --cell-padding (not `padding` on the span) so that clickable
+    // cells — which move the padding onto the inner <a> — stay in sync.
+    --cell-padding: 10px 24px;
+
     >span {
-      padding: 10px 24px;
+      padding: var(--cell-padding);
     }
   }
 }

package/components/popover.vue

@@ -46,6 +46,7 @@ export default {
       busCloseHandler: null,
       onAppClick: null,
       onResize: null,
+      dialogClickEl: null,
       body: null,
     };
   },
@@ -59,29 +60,63 @@ export default {
   },
   mounted() {
     popovers.value.push(this);
-    this.busOpenHandler = (body) => {
-      this.body = body;
-      this.key = strandom();
-    };
-    bus.$on(`popovers/open-${this.spec.key}`, this.busOpenHandler);
+    this.registerBusOpen();
+    this.handleMounted();
   },
   methods: {
-    $mounted() {
-      const appEl = document.getElementById(APP_ID);
+    registerBusOpen() {
+      this.busOpenHandler = (body) => {
+        this.body = body;
+        this.key = strandom();
+      };
+      bus.$on(`popovers/open-${this.spec.key}`, this.busOpenHandler);
+    },
+    registerBusClose(appEl) {
       this.busCloseHandler = () => {
         if (appEl) {
           appEl.removeEventListener("click", this.onAppClick);
         }
+        if (TypeUtils.isNotNull(this.dialogClickEl)) {
+          this.dialogClickEl.removeEventListener("click", this.onAppClick);
+        }
         this.close();
       };
       bus.$once(`popover/close-${this.spec.key}`, this.busCloseHandler);
+    },
+    registerOutsideListeners(appEl) {
+      this.onAppClick = this.handleClose;
+      if (appEl) {
+        appEl.addEventListener("click", this.onAppClick);
+      }
+      this.dialogClickEl = this.resolveDialogEl();
+      if (TypeUtils.isNotNull(this.dialogClickEl)) {
+        this.dialogClickEl.addEventListener("click", this.onAppClick);
+      }
+      this.onResize = () => this.close();
+      window.addEventListener("resize", this.onResize);
+    },
+    removeOutsideListeners(appEl) {
+      if (TypeUtils.isFunction(this.onAppClick) && appEl) {
+        appEl.removeEventListener("click", this.onAppClick);
+      }
+      if (TypeUtils.isFunction(this.onAppClick) && TypeUtils.isNotNull(this.dialogClickEl)) {
+        this.dialogClickEl.removeEventListener("click", this.onAppClick);
+      }
+      if (TypeUtils.isFunction(this.onResize)) {
+        window.removeEventListener("resize", this.onResize);
+      }
+    },
+    resolveDialogEl() {
+      if (TypeUtils.isNotNull(this.reference) && TypeUtils.isFunction(this.reference.closest)) {
+        return this.reference.closest(".v-dialog");
+      }
+      return null;
+    },
+    handleMounted() {
+      const appEl = document.getElementById(APP_ID);
+      this.registerBusClose(appEl);
       if (!this.spec.persistent) {
-        this.onAppClick = this.handleClose;
-        if (appEl) {
-          appEl.addEventListener("click", this.onAppClick);
-        }
-        this.onResize = () => this.close();
-        window.addEventListener("resize", this.onResize);
+        this.registerOutsideListeners(appEl);
       }
       if (this.spec.overlay) {
         this.driverObj.highlight({ element: this.reference });
@@ -96,12 +131,7 @@ export default {
       }
       if (!this.spec.persistent) {
         const appEl = document.getElementById(APP_ID);
-        if (TypeUtils.isFunction(this.onAppClick) && appEl) {
-          appEl.removeEventListener("click", this.onAppClick);
-        }
-        if (TypeUtils.isFunction(this.onResize)) {
-          window.removeEventListener("resize", this.onResize);
-        }
+        this.removeOutsideListeners(appEl);
       }
     },
     handleClose(event) {

package/components/shareButton.vue

@@ -14,7 +14,10 @@ import GlibBase from "./base/glibBase.js";
 import Action from "../action";
 import { Vue } from "..";
 
-import VueSocialSharing from "vue-social-sharing";
+import * as VueSocialSharingModule from "vue-social-sharing";
+import { interopDefault } from "../utils/interop.js";
+
+const VueSocialSharing = interopDefault(VueSocialSharingModule);
 Vue.use(VueSocialSharing, { networks: { copy: "" } });
 
 export default {

package/components/treeView.vue

@@ -34,8 +34,11 @@ import { defineComponent, ref } from "vue";
 import * as dropUploader from "./composable/upload";
 import * as delegateUploader from "./composable/upload_delegator";
 import { watch } from "vue";
-import merge from 'lodash.merge';
+import * as mergeModule from 'lodash.merge';
 import { useFileUtils } from "./composable/file";
+import { interopDefault } from "../utils/interop.js";
+
+const merge = interopDefault(mergeModule);
 const { signedIds } = useFileUtils();
 
 export default defineComponent({

package/index.js

@@ -8,7 +8,10 @@ import { jsonView, vueApp } from "./store";
 import './app.scss';
 
 // lib for deep merge
-import merge from 'lodash.merge';
+import * as mergeModule from 'lodash.merge';
+import { interopDefault } from "./utils/interop.js";
+
+const merge = interopDefault(mergeModule);
 
 const APP_ID = 'app';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "5.0.4",
+  "version": "5.0.6",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -68,4 +68,4 @@
     "vite-plugin-istanbul": "^7.2.1",
     "vite-plugin-ruby": "^5.1.1"
   }
-}
+}

package/templates/unsupported.vue

@@ -1,12 +1,12 @@
 <template>
-  <div>Unsupported template: {{ name }}</div>
+  <div>Unsupported template: {{ compName }}</div>
 </template>
 
 <script>
 export default {
   props: {
     spec: { type: Object, required: true },
-    name: { type: String, required: true }
+    compName: { type: String, required: true }
   }
 };
 </script>

package/utils/eventBus.js

@@ -1,5 +1,8 @@
 // eventBus.js
-import EventEmitter2 from "eventemitter2";
+import * as EventEmitter2Module from "eventemitter2";
+import { interopDefaultOr } from "./interop.js";
+
+const EventEmitter2 = interopDefaultOr(EventEmitter2Module, "EventEmitter2");
 
 const emitter = new EventEmitter2({ delimiter: '-', maxListeners: 0 });
 

package/utils/hash.js

@@ -1,4 +1,7 @@
-import merge from 'lodash.merge';
+import * as mergeModule from 'lodash.merge';
+import { interopDefault } from "./interop.js";
+
+const merge = interopDefault(mergeModule);
 export default class Hash {
   constructor(object) {
     if (object) {

package/utils/interop.js

@@ -0,0 +1,9 @@
+export function interopDefault(moduleRef) {
+  return moduleRef && moduleRef.default ? moduleRef.default : moduleRef;
+}
+
+export function interopDefaultOr(moduleRef, namedExport) {
+  if (moduleRef && moduleRef.default) return moduleRef.default;
+  if (moduleRef && moduleRef[namedExport]) return moduleRef[namedExport];
+  return moduleRef;
+}