glib-web 5.0.5 → 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/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/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/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/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/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/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "5.0.5",
+  "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"
   }
-}
+}