glib-web 5.0.5 → 5.0.7

package/.github/dependabot.yml

@@ -0,0 +1,72 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+      day: monday
+    open-pull-requests-limit: 5
+    ignore:
+      # Major version bumps on framework deps need manual migration; review separately.
+      - dependency-name: vite
+        update-types: ["version-update:semver-major"]
+      - dependency-name: vue
+        update-types: ["version-update:semver-major"]
+      - dependency-name: vuetify
+        update-types: ["version-update:semver-major"]
+      - dependency-name: eslint
+        update-types: ["version-update:semver-major"]
+      - dependency-name: cypress
+        update-types: ["version-update:semver-major"]
+    groups:
+      vue:
+        applies-to: version-updates
+        patterns:
+          - vue
+          - vuetify
+          - vuedraggable
+          - vue-chartkick
+          - vue-social-sharing
+          - v-phone-input
+          - "@vitejs/plugin-vue"
+          - eslint-plugin-vue
+      chart:
+        applies-to: version-updates
+        patterns:
+          - chart.js
+          - chartjs-*
+          - "@types/chart.js"
+      cypress:
+        applies-to: version-updates
+        patterns:
+          - cypress
+          - "@cypress/*"
+      eslint:
+        applies-to: version-updates
+        patterns:
+          - eslint
+          - eslint-*
+          - typescript-eslint
+          - prettier
+      vite:
+        applies-to: version-updates
+        patterns:
+          - vite
+          - vite-plugin-*
+      lodash:
+        applies-to: version-updates
+        patterns:
+          - lodash
+          - lodash-es
+          - lodash.*
+      js-non-major:
+        applies-to: version-updates
+        patterns:
+          - "*"
+        update-types:
+          - minor
+          - patch
+      security-updates:
+        applies-to: security-updates
+        patterns:
+          - "*"

package/action.js

@@ -243,11 +243,13 @@ export default class Action {
       }
 
       if (Utils.type.isNotNull(fieldName)) {
-        // if (!fieldName.endsWith("[]")) { // Non-array param
-        //   fieldValue = fieldValue[0]
-        // }
+        // Strip trailing [] from fieldName when fieldValue is an array: populateFormData
+        // appends [] automatically for arrays, so keeping it in the key causes tags[][] on the server.
+        const formDataKey = (Utils.type.isArray(fieldValue) && fieldName.endsWith('[]'))
+          ? fieldName.slice(0, -2)
+          : fieldName;
         const formData = {
-          [fieldName]: fieldValue
+          [formDataKey]: fieldValue
         };
         data = Object.assign(
           {},

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/_select.vue

@@ -399,6 +399,8 @@ export default {
         // Single select mode - clear the value
         this.fieldModel = null;
       }
+
+      this.onChange();
     },
     $registryEnabled() {
       return false;

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/cypress/e2e/glib-web/listsAppend.cy.js

@@ -1,27 +1,27 @@
-import { testPageUrl } from "../../helper.js"
+import { testPageUrl } from "../../helper.js";
 
-const url = testPageUrl('lists_append')
+const url = testPageUrl('lists_append');
 
 describe('lists_append', () => {
   it('appends rows to the populated list', () => {
-    cy.visit(url)
+    cy.visit(url);
 
-    cy.contains('Starter row').should('exist')
+    cy.contains('Starter row').should('exist');
 
-    cy.contains('lists/append (thumbnail)').click()
+    cy.contains('lists/append (thumbnail)').click();
     cy.get('#lists_append_status')
-      .should('contain.text', 'Status: appended')
-    cy.contains('New row').should('exist')
+      .should('contain.text', 'Status: appended');
+    cy.contains('New row').should('exist');
 
-    cy.contains('Append standard row').click()
-    cy.contains('Standard row').should('exist')
+    // cy.contains('Append standard row').click()
+    // cy.contains('Standard row').should('exist')
 
-    cy.contains('Append + snackbar').click()
-    cy.contains('Snackbar row').should('exist')
-    cy.contains('.v-snackbar', 'Row appended').should('exist')
+    cy.contains('Append + snackbar').click();
+    cy.contains('Snackbar row').should('exist');
+    cy.contains('.v-snackbar', 'Row appended').should('exist');
 
-    cy.contains('Append two rows').click()
-    cy.contains('Batch row A').should('exist')
-    cy.contains('Batch row B').should('exist')
-  })
-})
+    cy.contains('Append two rows').click();
+    cy.contains('Batch row A').should('exist');
+    cy.contains('Batch row B').should('exist');
+  });
+});

package/package.json

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

package/utils/http.js

@@ -48,8 +48,9 @@ export default class {
 
   static populateFormData(formData, key, value) {
     if (GLib.type.isArray(value)) {
+      const arrayKey = key.endsWith('[]') ? key : `${key}[]`;
       for (const item of value) {
-        this.populateFormData(formData, `${key}[]`, item);
+        this.populateFormData(formData, arrayKey, item);
       }
     } else if (GLib.type.isObject(value)) {
       for (const innerKey in value) {