glib-web 6.0.2 → 6.0.4

package/components/panels/list.vue

@@ -21,8 +21,9 @@
             :data-dragSectionIndex="sectionIndex" :disabled="!$type.isObject(dragSupport)" item-key="id"
             @start="onDragStart" @end="onDragEnd">
             <template #item="{ element }">
-              <component :is="template(element)" :spec="element" :responsive-cols="spec.responsiveCols"
-                :data-dragRowId="element.id" />
+              <panels-custom v-if="isCustomRow(element)" :spec="element" :data-dragRowId="element.id" />
+              <component :is="template(element)" v-else :spec="element" :compName="element.template"
+                :responsive-cols="spec.responsiveCols" :data-dragRowId="element.id" />
             </template>
           </draggable>
         </div>
@@ -46,23 +47,29 @@
 </template>
 
 <script>
+import { getCurrentInstance } from "vue";
 import { vueApp } from "../../store";
 import draggable from "vuedraggable";
 import ThumbnailTemplate from "../../templates/thumbnail.vue";
 import EditableTemplate from "../../templates/editable.vue";
 import FeaturedTemplate from "../../templates/featured.vue";
 import CommentTemplate from "../../templates/comment.vue";
+import UnsupportedTemplate from "../../templates/unsupported.vue";
+import CustomPanel from "./custom.vue";
 import { useListAutoload } from "../composable/listAutoload";
 import GlibBase from "../base/glibBase.js";
 
 export default {
   components: {
     draggable,
+    "template-standard": ThumbnailTemplate,
     "template-thumbnail": ThumbnailTemplate,
     "template-editable": EditableTemplate,
     "template-featured": FeaturedTemplate,
     "template-commentOutgoing": CommentTemplate,
     "template-commentIncoming": CommentTemplate,
+    "template-unsupported": UnsupportedTemplate,
+    "panels-custom": CustomPanel,
   },
   extends: GlibBase,
   props: {
@@ -193,18 +200,28 @@ export default {
     $tearDown() {
       this.cancelAutoloadRequest();
     },
+    isCustomRow(row) {
+      // The Ruby `custom` list template emits a `data` payload (the inner template
+      // name lands in `row.template`). Route these through panels/custom so the
+      // payload is unwrapped into the rendered template's spec.
+      return this.$type.isObject(row.data);
+    },
     template(row) {
       const name = `template-${row.template.replace("/", "-")}`;
-      const strict = true;
-      if (strict) {
+
+      // Built-in templates registered locally on this component.
+      if (this.$options.components[name]) {
+        return name;
+      }
+
+      // Project-defined custom templates (e.g. `row.custom`) registered globally
+      // as `template-<name>`. Mirrors `panels/custom.vue` and `skeleton.vue`.
+      if (getCurrentInstance().appContext.components[name]) {
         return name;
-      } else {
-        if (this.$options.components[name]) {
-          return name;
-        }
-        console.warn(`Invalid template: ${row.template}`);
-        return null;
       }
+
+      console.warn(`Invalid template: ${row.template}`);
+      return "template-unsupported";
     },
     serializedSpec(row) {
       return JSON.stringify(row);
@@ -290,6 +307,21 @@ export default {
     // Publicly invokable
     action_appendRow(row, sectionIndex) {
       this.sections[sectionIndex].rows.push(row);
+    },
+    // Publicly invokable. Removes a row by id from any section reactively,
+    // preserving scroll position and already-loaded pages.
+    action_removeRow(rowId) {
+      let removed = false;
+      for (const section of this.sections) {
+        const before = section.rows.length;
+        section.rows = section.rows.filter((row) => row.id !== rowId);
+        if (section.rows.length !== before) {
+          removed = true;
+        }
+      }
+      if (!removed) {
+        console.warn("Row ID not found in list", rowId);
+      }
     }
   },
 };

package/components/panels/table.vue

@@ -5,32 +5,6 @@
     <table v-if="loadIf" :style="$styles()" :class="$classes()">
       <template v-for="(section, sectionIndex) in sections" :key="`head_${sectionIndex}`">
         <thead>
-          <tr v-if="importable || exportable">
-            <td colspan="10">
-              <div class="pa-3">
-                <template v-if="importable">
-                  <span>{{
-                    rows(section).length + section.dataRows.length
-                  }}
-                    rows</span>
-                  <input ref="fileInput" style="display: none;" type="file" accept=".csv"
-                    @change="loadFile($event, section)" />
-                  <v-btn @click="triggerImport(sectionIndex)">Import</v-btn>
-                  <v-btn :disabled="totalRows(section) <= 0" @click="submitRows($event, section)">Save</v-btn>
-                  <v-btn :disabled="totalRows(section) <= 0" @click="clear(section)">Clear</v-btn>
-                </template>
-
-                <div class="float-right">
-                  <v-btn v-if="exportable" :download="exportFile" :href="exportCsv(section)">{{ exportLabel }}</v-btn>
-                </div>
-              </div>
-
-              <div v-if="output" style="white-space: pre-line;">
-                {{ output }}
-              </div>
-            </td>
-          </tr>
-
           <tr v-if="section.header" :style="$styles(section.header)">
             <template v-if="section.header.dataCells">
               <th v-for="(cell, index) in section.header.dataCells" :key="index"
@@ -64,12 +38,6 @@
               </td>
             </tr>
           </template>
-
-          <tr v-for="(row, rowIndex) in section.dataRows" :key="`data_row_${rowIndex}`">
-            <td v-for="(cell, cellIndex) in row" :key="`data_cell_${cellIndex}`">
-              <a class="data-cell">{{ cell }}</a>
-            </td>
-          </tr>
         </tbody>
 
         <tfoot>
@@ -97,8 +65,6 @@
 
 <script>
 import { useTableAutoload } from "../composable/tableAutoload";
-import { useTableExport } from "../composable/tableExport";
-import { useTableImport } from "../composable/tableImport";
 import GlibBase from "../base/glibBase.js";
 
 export default {
@@ -108,9 +74,7 @@ export default {
   },
   setup() {
     return {
-      ...useTableAutoload(),
-      ...useTableExport(),
-      ...useTableImport()
+      ...useTableAutoload()
     };
   },
   data() {
@@ -118,24 +82,6 @@ export default {
       sections: []
     };
   },
-  computed: {
-    output() {
-      // let str = ""
-      // let count = 0
-      // for (const section of this.sections) {
-      //   for (const row of section.dataRows) {
-      //     const name = row[2]
-      //     const email = row[3]
-      //     const createdAt = row[5]
-      //     const activationState = row[14] ? 'active' : 'pending'
-      //     count += 1
-      //     str += `{ name: "${name}".to_s, email: '${email}'.to_s, created_at: '${createdAt}', activation_state: '${activationState}'},\n`
-      //   }
-      // }
-      // return `Processing ${count} rows:\n[\n${str}\n]`
-      return "";
-    }
-  },
   watch: {
     spec: {
       handler() {
@@ -157,23 +103,16 @@ export default {
           if (Utils.type.isObject(specSection.footer)) {
             section.footer = Object.assign({}, specSection.footer);
           }
-          section.dataRows = [];
           sections.push(section);
         });
       });
       this.sections = sections;
       this.autoloadAll(this.spec.nextPage);
-      this.initCsvExport();
-      this.initCsvImport();
       this.enableInfiniteScrollIfApplicable();
     },
     $tearDown() {
       this.cancelAutoloadRequest();
     },
-    clear(section) {
-      section.rows = [];
-      section.dataRows = [];
-    },
     colSpan(row, index) {
       const spans = row.colSpans || [];
       return spans[index] || 1;
@@ -188,16 +127,6 @@ export default {
         rowStyles = rowStyles.concat('clickable');
       }
       return rowStyles;
-    },
-    rows(section) {
-      return section.rows || [];
-    },
-    triggerImport(index) {
-      const input = this.$refs.fileInput[index];
-      input.click();
-    },
-    totalRows(section) {
-      return (section.rows || []).length + (section.dataRows || []).length;
     }
   }
 };
@@ -259,10 +188,6 @@ tbody {
   overflow: auto;
 }
 
-.data-cell {
-  white-space: pre-line;
-}
-
 table.table--grid {
   tbody {
     td {

package/components/validation.js

@@ -53,6 +53,13 @@ class NumericalityValidator extends AbstractValidator {
   }
 
   validate(key, count, value) {
+    // Reject non-numeric input (empty/whitespace string, null, undefined, NaN)
+    // instead of letting JS coerce it to 0 in the numeric comparisons below.
+    if (key !== 'in') {
+      const blank = value == null || (typeof value === 'string' && value.trim() === '');
+      if (blank || isNaN(Number(value))) return false;
+    }
+
     const obj = {
       'greater_than': () => count < value,
       'greater_than_or_equal_to': () => count <= value,
@@ -81,7 +88,7 @@ class FormatValidator extends AbstractValidator {
     if (this.isAllowBlank() && !isPresent(model)) return true;
 
     const regex = this.validationOptions.with || this.validationOptions.without || this.validationOptions.regex;
-    let match = !!(model || '').match(regex);
+    let match = !!String(model ?? '').match(regex);
     match = this.isInverse() ? !match : match;
 
     return match ? true : this.validationOptions.message;
@@ -112,30 +119,28 @@ class ExclusionValidator extends AbstractValidator {
   }
 }
 
-class LengthValidator extends AbsenceValidator {
+class LengthValidator extends AbstractValidator {
   build(model) {
     model ||= '';
     if (this.isAllowBlank() && !isPresent(model)) return true;
 
-    const { minimum, maximum } = this.validationOptions;
-    let result;
-    if (isPresent(minimum)) {
-      result = model.length > minimum ? true : this.errorMessage('too_short', minimum);
-    }
-    if (result !== true) return result;
-    if (isPresent(maximum)) {
-      result = model.length < maximum ? true : this.errorMessage('too_long', maximum);
-    }
-    if (result !== true) return result;
-    if (isPresent(this.validationOptions.is)) {
-      result = model.length === this.validationOptions.is ? true : this.errorMessage('wrong_length', this.validationOptions.is);
-    }
-    if (result !== true) return result;
-    if (isPresent(this.validationOptions.in)) {
-      result = (model.length >= this.validationOptions.is || model.length <= this.validatorOptions.is) ? true : this.errorMessage('wrong_length', this.validationOptions.in);
+    const { minimum, maximum, is } = this.validationOptions;
+    const length = model.length;
+
+    if (isPresent(minimum) && length < minimum) return this.errorMessage('too_short', minimum);
+    if (isPresent(maximum) && length > maximum) return this.errorMessage('too_long', maximum);
+    if (isPresent(is) && length !== is) return this.errorMessage('wrong_length', is);
+
+    const range = this.validationOptions.in || this.validationOptions.within;
+    if (isPresent(range)) {
+      const bounds = [range].flat();
+      const min = Math.min(...bounds);
+      const max = Math.max(...bounds);
+      if (length < min) return this.errorMessage('too_short', min);
+      if (length > max) return this.errorMessage('too_long', max);
     }
 
-    return result;
+    return true;
   }
 
   errorMessage(key, count) {

package/cypress/component/testUtils.js

@@ -1,16 +1,16 @@
 import { mount } from "cypress/vue";
-import genericMixin from "../../components/mixins/generic";
+import genericMixin from "../../components/mixins/generic.js";
 import stylesMixin from "../../components/mixins/styles.js";
-import updatableComponent from "../../components/mixins/updatableComponent";
-import vuetify from "../../plugins/vuetify";
-import Uploader from "../../utils/glibDirectUpload";
-import * as TypeUtils from "../../utils/type";
-import Framework from "../../utils/public";
-import App from "../../utils/app";
-import UrlUtils from "../../utils/url";
-import Format from "../../utils/format";
-import Dom from "../../utils/dom";
-import Settings from "../../utils/settings";
+import updatableComponent from "../../components/mixins/updatableComponent.js";
+import vuetify from "../../plugins/vuetify.js";
+import Uploader from "../../utils/glibDirectUpload.js";
+import * as TypeUtils from "../../utils/type.js";
+import Framework from "../../utils/public.js";
+import App from "../../utils/app.js";
+import UrlUtils from "../../utils/url.js";
+import Format from "../../utils/format.js";
+import Dom from "../../utils/dom.js";
+import Settings from "../../utils/settings.js";
 
 const glibGlobals = {
   app: App,

package/cypress/e2e/glib-web/fields.cy.js

@@ -49,4 +49,33 @@ describe('fields', () => {
     cy.get('input[name="user[age]"]').should('have.value', '')
     cy.get('textarea[name="user[bio]"]').should('have.value', '')
   })
+
+  it('marks a tooltip-bearing checkbox label with the dotted-underline affordance', () => {
+    cy.visit(url)
+
+    // Checkbox with a tooltip gets the affordance.
+    cy.get('#field_terms').should('have.class', 'has-tooltip')
+    cy.get('#field_terms .v-label')
+      .should('have.css', 'text-decoration-style', 'dotted')
+      .and('have.css', 'cursor', 'help')
+
+    // Checkbox without a tooltip is left undecorated.
+    cy.get('#field_news').should('not.have.class', 'has-tooltip')
+    cy.get('#field_news .v-label')
+      .should('have.css', 'text-decoration-line', 'none')
+  })
+
+  it('keeps a focused number field value on wheel without blocking other inputs', () => {
+    cy.visit(url)
+
+    // A focused number input must not change its value on wheel; it blurs instead
+    // so the wheel still scrolls the page.
+    cy.get('input[name="user[age]"]').type('25').should('have.value', '25')
+    cy.get('input[name="user[age]"]').focus().trigger('wheel', { deltaY: 120 })
+    cy.get('input[name="user[age]"]').should('have.value', '25').and('not.be.focused')
+
+    // A focused text input is untouched by wheel.
+    cy.get('input[name="user[full_name]"]').focus().trigger('wheel', { deltaY: 120 })
+    cy.get('input[name="user[full_name]"]').should('be.focused')
+  })
 })

package/cypress/e2e/glib-web/fieldsDateTime.cy.js

@@ -88,4 +88,71 @@ describe('fields_date_time', () => {
       expect(comp.spec.template.type).to.eq('plain')
     })
   })
+
+  it('parses a typed date and stores it as YYYY-MM-DD', () => {
+    cy.visit(url)
+
+    cy.get('#date_basic .v-field__input').clear()
+    cy.get('#date_basic .v-field__input').type('03/15/2025').blur()
+
+    cy.get('#date_basic .v-field__input').should('have.value', 'Mar 15, 2025')
+    cy.get('input[name="user[date_basic]"]').should('have.value', '2025-03-15')
+    cy.get('#date_status').should('contain.text', 'Date changed')
+  })
+
+  it('parses a typed date in a named-month format', () => {
+    cy.visit(url)
+
+    cy.get('#date_basic .v-field__input').clear()
+    cy.get('#date_basic .v-field__input').type('Mar 20 2025').blur()
+
+    cy.get('input[name="user[date_basic]"]').should('have.value', '2025-03-20')
+    cy.get('#date_status').should('contain.text', 'Date changed')
+  })
+
+  it('parses a typed date on Enter', () => {
+    cy.visit(url)
+
+    cy.get('#date_basic .v-field__input').clear()
+    cy.get('#date_basic .v-field__input').type('03/15/2025{enter}')
+
+    cy.get('input[name="user[date_basic]"]').should('have.value', '2025-03-15')
+  })
+
+  it('parses a typed datetime and stores it', () => {
+    cy.visit(url)
+
+    cy.get('#datetime_basic .v-field__input').clear()
+    cy.get('#datetime_basic .v-field__input').type('12/25/2024 20:15').blur()
+
+    cy.get('input[name="user[datetime_basic]"]').should('have.value', '2024-12-25T20:15')
+    cy.get('#datetime_status').should('contain.text', 'Datetime changed')
+  })
+
+  it('shows a validation error for an unparseable date and keeps the value', () => {
+    cy.visit(url)
+
+    cy.get('#date_basic .v-field__input').clear()
+    cy.get('#date_basic .v-field__input').type('not a date').blur()
+
+    cy.get('#date_basic').contains('Invalid date').should('be.visible')
+    cy.get('input[name="user[date_basic]"]').should('have.value', '2024-12-12')
+    cy.get('#date_status').should('contain.text', 'idle')
+  })
+
+  it('clears the date when the typed text is emptied', () => {
+    cy.visit(url)
+
+    cy.get('#date_basic .v-field__input').clear().blur()
+
+    cy.get('input[name="user[date_basic]"]').should('have.value', '')
+    cy.get('#date_status').should('contain.text', 'Date changed')
+  })
+
+  it('exposes the picker through the calendar append-inner icon', () => {
+    cy.visit(url)
+
+    cy.get('#date_basic').contains('calendar_today').should('be.visible')
+    cy.get('#date_basic').find('input.native-picker').should('exist')
+  })
 })

package/cypress/e2e/glib-web/fieldsSelect.cy.js

@@ -119,4 +119,52 @@ describe('fields_select', () => {
     cy.get('#select_media .v-select--multiple').should('not.exist');
     cy.get('#select_media .v-chip').should('not.exist');
   });
+
+  it('renders icon options in the basic example by default', () => {
+    cy.visit(url);
+
+    cy.get('#select_media .v-field__input').should('contain.text', 'Option 1');
+    cy.get('#select_media').click();
+    cy.get('.v-overlay--active .v-list-item').should('have.length', 4);
+    cy.get('.v-overlay--active .v-list-item').first().find('.v-icon').should('exist');
+    cy.get('.v-overlay--active .v-list-item').first().find('img').should('not.exist');
+  });
+
+  it('selects a different option in the basic example', () => {
+    cy.visit(url);
+
+    cy.get('#select_media').click();
+    cy.get('.v-overlay--active .v-list-item').contains('Option 3').click();
+    cy.get('#select_media input[type="hidden"]').should('have.value', 'option3');
+    cy.get('#select_media .v-field__input').should('contain.text', 'Option 3');
+  });
+
+  it('clears the basic example selection', () => {
+    cy.visit(url);
+
+    cy.get('#select_media input[type="hidden"]').should('have.value', 'option1');
+    cy.get('#select_media [aria-label="Clear Select with icon"]').click();
+    cy.get('#select_media input[type="hidden"]').should('have.value', '');
+    cy.get('#select_media .v-field__input').should('not.contain.text', 'Option 1');
+  });
+
+  it('filters searchable options by text and subtitle', () => {
+    cy.on('uncaught:exception', (err) => {
+      if (err.message.includes('ResizeObserver')) return false;
+    });
+
+    cy.visit(url);
+
+    cy.get('#select_searchable_subtitle').click();
+    cy.get('#select_searchable_subtitle input[type="text"]').type('app');
+    cy.get('.v-overlay--active .v-list-item').should('have.length', 1);
+    cy.get('.v-overlay--active .v-list-item').contains('Apple').should('be.visible');
+
+    cy.get('#select_searchable_subtitle input[type="text"]').clear();
+    cy.get('#select_searchable_subtitle input[type="text"]').type('root');
+    cy.get('.v-overlay--active .v-list-item').should('have.length', 2);
+    cy.get('.v-overlay--active .v-list-item').contains('Carrot').should('be.visible');
+    cy.get('.v-overlay--active .v-list-item').contains('Daikon').should('be.visible');
+    cy.get('.v-overlay--active .v-list-item').contains('Apple').should('not.exist');
+  });
 });

package/cypress/e2e/glib-web/list.cy.js

@@ -39,18 +39,111 @@ describe('list', () => {
     })
   })
 
-  // it('fires scroll callbacks on list events', () => {
-  //   cy.visit(url)
+  it('fires scroll callbacks when scrolling inside a fixed-height list', () => {
+    cy.visit(url)
+
+    // Bring the events list on-screen and wait past the registration delay.
+    cy.get('#list_events').scrollIntoView()
+    cy.wait(1100)
+
+    // Scrolling INSIDE the inner list (not the page) should fire the callbacks.
+    cy.get('#list_events').scrollTo('bottom')
+    cy.get('#list_event_status').should('contain', 'Scroll events: bottom reached')
+
+    cy.get('#list_events').scrollTo('top')
+    cy.get('#list_event_status').should('contain', 'Scroll events: top reached')
+  })
+
+  it('appends rows to the populated list (lists/append)', () => {
+    cy.visit(url)
+
+    cy.contains('Starter row').should('exist')
+
+    cy.contains('lists/append (thumbnail)').click()
+    cy.get('#lists_append_status').should('contain.text', 'Status: appended')
+    cy.contains('New 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 two rows').click()
+    cy.contains('Batch row A').should('exist')
+    cy.contains('Batch row B').should('exist')
+  })
+
+  it('removes a row by id (lists/remove)', () => {
+    cy.visit(url)
+
+    cy.contains('Removable Alpha').should('exist')
+
+    cy.contains('button', 'Remove Alpha').click()
+    cy.contains('Removable Alpha').should('not.exist')
+    cy.contains('Removable Bravo').should('exist')
+    cy.get('#lists_remove_status').should('contain.text', 'removed Alpha')
+
+    // Removing a non-existent row is a no-op but still runs onRemove.
+    cy.contains('button', 'Remove missing').click()
+    cy.get('#lists_remove_status').should('contain.text', 'no row matched')
+    cy.contains('Removable Bravo').should('exist')
+  })
+
+  it('registers a row id so logics/set can target the whole row', () => {
+    cy.visit(url)
+
+    cy.window().then((win) => {
+      expect(win.GLib.component.findById('target_row_alpha')).to.exist
+    })
+
+    cy.contains('button', 'Update Alpha (logics/set)').click()
+    cy.contains('Target Alpha (updated)').should('exist')
+  })
+
+  it('renders custom row templates (row.custom)', () => {
+    cy.visit(url)
+
+    cy.contains('Custom (thumbnail)').should('exist')
+    cy.contains('Custom (featured)').should('exist')
+    cy.contains('Unsupported template: nonExistentTemplate').should('exist')
+  })
+
+  it('loads more rows when scrolling the autoload list (nextPage asNeeded)', () => {
+    cy.visit(url)
+
+    // The autoload list starts with a finite page of rows.
+    cy.get('#list_autoload').scrollIntoView()
+    cy.contains('Item 29').should('exist')
+
+    // Autoload registers its scroll handler after a short delay; wait past it
+    // before scrolling so the bottom anchor visibility check is active.
+    cy.wait(1100)
 
-  //   cy.contains('Actions and Events').scrollIntoView()
-  //   cy.get('#list_event_status').should('contain', 'Scroll events: idle')
+    cy.get('#list_autoload').scrollTo('bottom')
+    cy.get('#list_autoload').scrollTo('bottom')
 
-  //   cy.wait(1100)
+    // Reaching the bottom fetches the next page and appends more rows.
+    cy.contains('Item 30').should('exist')
+  })
+
+  it('removes Bravo by id (lists/remove)', () => {
+    cy.visit(url)
 
-  //   cy.contains('Row 12').scrollIntoView()
-  //   cy.get('#list_event_status').should('contain', 'Scroll events: bottom reached')
+    cy.contains('Removable Bravo').should('exist')
 
-  //   cy.contains('Row 1').scrollIntoView()
-  //   cy.get('#list_event_status').should('contain', 'Scroll events: top reached')
-  // })
+    cy.contains('button', 'Remove Bravo').click()
+    cy.contains('Removable Bravo').should('not.exist')
+    cy.contains('Removable Charlie').should('exist')
+    cy.get('#lists_remove_status').should('contain.text', 'removed Bravo')
+  })
+
+  it('updates Bravo via logics/set targeting the row id', () => {
+    cy.visit(url)
+
+    cy.window().then((win) => {
+      expect(win.GLib.component.findById('target_row_bravo')).to.exist
+    })
+
+    cy.contains('button', 'Update Bravo (logics/set)').click()
+    cy.contains('Target Bravo (updated)').should('exist')
+  })
 })

package/package.json

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

package/plugins/vuetify.js

@@ -3,6 +3,7 @@ import { createVuetify } from "vuetify";
 import { aliases, md } from 'vuetify/iconsets/md';
 import 'vuetify/styles';
 import * as components from 'vuetify/components';
+import { Ripple } from 'vuetify/directives';
 import { jsonSettings } from "../store";
 // import * as directives from 'vuetify/directives'
 // import { md3 } from 'vuetify/blueprints';
@@ -10,7 +11,7 @@ import { jsonSettings } from "../store";
 const opts = {
     // blueprint: md3,
     components,
-    // directives,
+    directives: { Ripple },
     date: {
         formats: {
             glibDate: (d) => {