glib-web 4.42.1 → 4.42.2

package/.nycrc.json

@@ -9,10 +9,25 @@
     ".ts",
     ".vue"
   ],
+  "exclude-after-remap": true,
+  "include": [
+    "action.js",
+    "actions/**",
+    "app.vue",
+    "components/**",
+    "constant.js",
+    "extensions/**",
+    "index.js",
+    "keys.js",
+    "nav/**",
+    "plugins/**",
+    "store.js",
+    "templates/**",
+    "utils/**"
+  ],
   "exclude": [
-    "cypress/**",
-    "coverage/**",
-    "doc/**",
-    "node_modules/**"
+    "actions/cables",
+    "actions/analytics",
+    "utils/private"
   ]
-}
+}

package/action.js

@@ -85,9 +85,6 @@ import ActionListsAppend from "./actions/lists/append";
 import ActionBottomBannersOpen from "./actions/bottom_banners/open";
 import ActionBottomBannersClose from "./actions/bottom_banners/close";
 
-import ActionGlobalStatesWatch from "./actions/global_states/watch";
-import ActionGlobalStatesSet from "./actions/global_states/set";
-
 import ActionDetectCountry from "./actions/browsers/detectCountry";
 import ActionDetectTimezone from "./actions/browsers/detectTimezone";
 
@@ -189,9 +186,6 @@ const actions = {
   "bottomBanners/open": ActionBottomBannersOpen,
   "bottomBanners/close": ActionBottomBannersClose,
 
-  "globalStates/watch": ActionGlobalStatesWatch,
-  "globalStates/set": ActionGlobalStatesSet,
-
   "files/upload": ActionFilesUpload,
 
   "browsers/detectCountry": ActionDetectCountry,

package/agent/glib_test_sync.yaml

@@ -0,0 +1,108 @@
+version: 1
+name: glib-web-test-sync
+description: >
+  Compare doc/garage/test_page pages with Cypress tests in cypress/e2e/glib-web and
+  scaffold missing tests when a page exists without coverage.
+
+inputs:
+  doc_dir: doc/garage/test_page
+  test_dir: cypress/e2e/glib-web
+  test_helper: cypress/helper.ts
+  ai_test_prompt: |
+    Generate a Cypress e2e test for the glib test page: {{page_slug}}.
+    Inputs you can use:
+    - Source: {{doc_page_path}}
+    - Existing tests: {{existing_tests_dir}}
+    Requirements:
+    - Must use: import { testPageUrl } from "../../helper"
+    - Must set: const url = testPageUrl('{{page_slug}}')
+    - Click every button defined in {{doc_page_path}} (include nested buttons in dialogs/sheets/menus).
+    - For each button click, assert the expected result implied by its onClick action.
+    - Use one or more it blocks; revisit the page when state needs a reset.
+    - Match existing project patterns (describe/it, cy.visit, selectors, etc).
+    - Use ASCII only.
+  fallback_test_template: |
+    import { testPageUrl } from "../../helper"
+    const url = testPageUrl('{{page_slug}}')
+
+    const overlaySelectors = [
+      '.v-dialog',
+      '.v-snackbar',
+      '.v-menu__content',
+      '.v-sheet',
+      '.v-overlay__content',
+    ].join(',')
+
+    describe('{{page_slug}}', () => {
+      it('clicks each button', () => {
+        cy.visit(url)
+        cy.get('button').should('have.length.at.least', 1)
+        cy.get('button').then(($buttons) => {
+          const labels = Array.from($buttons)
+            .map((button) => button.innerText.trim())
+            .filter(Boolean)
+
+          cy.wrap(labels).each((label) => {
+            cy.visit(url)
+            cy.contains('button', label).click({ force: true })
+            cy.location('href').then((hrefAfter) => {
+              if (hrefAfter !== url) {
+                expect(hrefAfter).to.not.eq(url)
+                return
+              }
+
+              cy.get('body').then(($body) => {
+                if ($body.find(overlaySelectors).length) {
+                  cy.get(overlaySelectors).should('exist')
+                } else {
+                  cy.contains('button', label).should('exist')
+                }
+              })
+            })
+          })
+        })
+      })
+    })
+
+constraints:
+  - Use utils/type.js for any type checks in helper scripts.
+  - Ignore files that begin with "_" under doc/garage/test_page.
+
+steps:
+  - id: collect-doc-pages
+    instruction: |
+      List *.json.jbuilder files under {{inputs.doc_dir}}.
+      Remove the ".json.jbuilder" suffix to get page slugs.
+      Drop any file that starts with "_".
+      Output: doc_page_slugs.
+
+  - id: collect-test-page-slugs
+    instruction: |
+      Scan every *.cy.ts under {{inputs.test_dir}} and extract all occurrences of
+      testPageUrl('...'). Collect the string values into test_page_slugs.
+      If a file contains no testPageUrl calls, derive a fallback slug by:
+        - Removing the .cy.ts suffix.
+        - Converting camelCase to snake_case.
+      Output: test_page_slugs.
+
+  - id: diff-docs-vs-tests
+    instruction: |
+      Compute missing_page_slugs = doc_page_slugs - test_page_slugs.
+      Output: missing_page_slugs.
+
+  - id: generate-missing-test-content
+    instruction: |
+      For each slug in missing_page_slugs:
+        1) Set doc_page_path = {{inputs.doc_dir}}/<slug>.json.jbuilder.
+        2) Use the AI with {{inputs.ai_test_prompt}} to generate test content.
+        3) If AI output is empty or invalid, use {{inputs.fallback_test_template}}.
+      Output: generated_tests_map (slug -> test_content).
+
+  - id: scaffold-missing-tests
+    instruction: |
+      For each slug in missing_page_slugs:
+        1) Derive a filename by converting snake_case to camelCase and append ".cy.ts".
+           Example: file_upload_new -> fileUploadNew.cy.ts
+        2) Create {{inputs.test_dir}}/<filename> if it does not already exist.
+        3) Write generated_tests_map[<slug>] to the file.
+      Output: created_test_files.

package/components/_internal_button.vue

@@ -82,8 +82,13 @@ export default {
 <style lang="scss">
 .v-btn {
   &.link {
+    /* `height: inherit/auto/initial` will stretch to max height when used inside a horizontal panel,
+      presumably because it is affected by the panel's flex arrangement. */
+    height: 16px;
+    font-size: 1rem;
+
     .v-icon {
-      font-size: 16px;
+      font-size: 1.2rem;
     }
   }
 }
@@ -102,10 +107,6 @@ button {
     /* text-decoration: underline; */
     padding-left: 0;
     padding-right: 0;
-    /* `height: inherit/auto/initial` will stretch to max height when used inside a horizontal panel,
-      presumably because it is affected by the panel's flex arrangement. */
-    height: 16px;
-    font-size: 16px;
     line-height: 1;
     min-width: auto;
     box-shadow: none !important;

package/components/component.vue

@@ -68,7 +68,6 @@ import HiddenField from "./fields/hidden.vue";
 import TextField from "./fields/text.vue";
 import SubmitField from "./fields/submit.vue";
 import TextAreaField from "./fields/textarea.vue";
-const RichTextField = defineAsyncComponent(() => import("./fields/richText.vue"));
 const RichTextField2 = defineAsyncComponent(() => import("./fields/richText2.vue"));
 // import NewRichTextField from "./fields/newRichText.vue";
 const FileField = defineAsyncComponent(() => import("./fields/file.vue"));

package/components/fields/_select.vue

@@ -3,11 +3,10 @@
     <!-- 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"
-      :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"
-      :density="density" persistent-placeholder @update:modelValue="onChange" @focus="focused = true"
-      @blur="focused = false" :menu-props="{ maxWidth: 0 }">
+      :disabled="inputDisabled" :multiple="spec.multiple" :readonly="spec.readOnly" :clearable="spec.clearable"
+      :placeholder="spec.placeholder" :rules="$validation()" persistent-hint :append-icon="append.icon"
+      validate-on="input" item-title='text' :variant="variant" :density="density" persistent-placeholder
+      @update:modelValue="onChange" @focus="focused = true" @blur="focused = false" :menu-props="{ maxWidth: 0 }">
 
       <template #item="{ props, item }">
         <div class="fields-select-option">
@@ -23,7 +22,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">
@@ -40,35 +39,18 @@
       </template>
 
       <template v-if="useChips" #selection="{ item, index }">
-        <v-chip
-          v-if="index < maxVisibleChips"
-          :density="density"
-          closable
-          @click:close="removeItem(item)"
-        >
+        <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"
-        >
+          :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"
-        >
+        <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>

package/components/fields/radioGroup.vue

@@ -4,7 +4,7 @@
        validation error on page load.
     -->
   <v-radio-group v-model="fieldModel" :name="fieldName" :readonly="spec.readOnly" :disabled="inputDisabled"
-    :rules="$validation()" :inline="spec.row" validate-on="blur" @change="$executeOnChange()" :class="$classes()"
+    :rules="$validation()" :inline="spec.row" validate-on="input" @change="$executeOnChange()" :class="$classes()"
     :style="$styles()" v-if="loadIf">
     <!-- <div v-for="(childView, index) in spec.childViews" :key="index">
       <glib-component :spec="childView" />

package/components/multimedia/video.vue

@@ -24,12 +24,24 @@ export default {
       paddingBottom: null
     };
   },
+  watch: {
+    spec: {
+      deep: true,
+      handler() {
+        this.updateFromSpec();
+      }
+    }
+  },
   methods: {
     $ready() {
+      this.updateFromSpec();
+    },
+    updateFromSpec() {
+      this.paddingBottom = null;
       this.width = this.$length(this.spec.width);
       this.height = this.$length(this.spec.height);
 
-      if (this.height == null) {
+      if (Utils.type.isNull(this.height)) {
         // Let the container calculates the height
         this.height = "100%";
 

package/cypress/component/component.cy.ts

@@ -230,15 +230,6 @@ const componentSpecOverrides: Record<string, Record<string, unknown>> = {
       },
     ],
   },
-  "panels-bulkEdit": {
-    sections: [
-      {
-        header: { dataCells: ["Header"] },
-        rows: [],
-        dataRows: [],
-      },
-    ],
-  },
   "panels-bulkEdit2": {
     viewHeaders: [{ id: "col-1", text: "Header" }],
     viewCells: [{ view: "fields/text", name: "col-1", label: "Header" }],

package/cypress/e2e/glib-web/browsers.cy.ts

@@ -0,0 +1,55 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('browsers')
+
+const stubCountryLookup = () => {
+  cy.intercept('GET', 'http://ip-api.com/json/', {
+    statusCode: 200,
+    body: {
+      country: 'Testland',
+      countryCode: 'TT'
+    }
+  }).as('ipLookup')
+}
+
+describe('browsers', () => {
+  it('detects timezone and posts form data', () => {
+    stubCountryLookup()
+    cy.visit(url)
+
+    cy.contains('button', 'browsers/detectTimezone').click()
+
+    cy.get('.v-dialog').should('contain.text', 'Method: POST')
+    cy.get('.v-dialog').should('contain.text', 'timezone')
+  })
+
+  it('detects country with form data and posts', () => {
+    stubCountryLookup()
+    cy.visit(url)
+
+    cy.contains('button', 'browsers/detectCountry (with formData)').click()
+
+    cy.get('.v-dialog').should('contain.text', 'Method: POST')
+    cy.get('.v-dialog').should('contain.text', 'message')
+    cy.get('.v-dialog').should('contain.text', 'country')
+  })
+
+  it('updates status after detectTimezone', () => {
+    stubCountryLookup()
+    cy.visit(url)
+
+    cy.contains('button', 'browsers/detectTimezone (update status)').click()
+
+    cy.contains('#browsers_status', 'Status: detected timezone').should('exist')
+    cy.contains('.v-snackbar', 'Timezone detected').should('exist')
+  })
+
+  it('alerts for detectCountry without form data', () => {
+    stubCountryLookup()
+    cy.visit(url)
+
+    cy.contains('button', 'browsers/detectCountry (no formData)').click()
+
+    cy.contains('.v-snackbar', 'Country detect requested').should('exist')
+  })
+})

package/cypress/e2e/glib-web/calendar.cy.ts

@@ -0,0 +1,34 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('calendar')
+const sheetSelector = '#calendar_main .v-sheet'
+
+const expectSheetHeight = (height) => {
+  cy.get(sheetSelector).should(($sheet) => {
+    expect($sheet[0].style.height).to.eq(height)
+  })
+}
+
+const expectSheetWidth = (width) => {
+  cy.get(sheetSelector).should(($sheet) => {
+    expect($sheet[0].style.width).to.eq(width)
+  })
+}
+
+describe('calendar', () => {
+  it('resizes calendar with variant buttons', () => {
+    cy.visit(url)
+
+    cy.contains('button', 'Default size').click()
+    expectSheetHeight('420px')
+
+    cy.contains('button', 'Compact').click()
+    expectSheetHeight('320px')
+
+    cy.contains('button', 'Tall').click()
+    expectSheetHeight('560px')
+
+    cy.contains('button', 'Fixed width').click()
+    expectSheetWidth('720px')
+  })
+})

package/cypress/e2e/glib-web/calendarEmptyData.cy.ts

@@ -0,0 +1,10 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('calendar_empty_data')
+
+describe('calendar_empty_data', () => {
+  it('loads the empty calendar data page', () => {
+    cy.visit(url)
+    cy.get('body').should('exist')
+  })
+})

package/cypress/e2e/glib-web/carousel.cy.ts

@@ -0,0 +1,53 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('carousel')
+
+describe('carousel', () => {
+  it('updates distribution buttons', () => {
+    cy.visit(url)
+
+    cy.contains('button', 'Fill equally').click()
+    cy.window().then((win) => {
+      const comp = win.GLib.component.findById('carousel_main')
+      expect(comp).to.exist
+      expect(comp.spec.distribution).to.eq('fillEqually')
+    })
+
+    cy.contains('button', 'Space equally').click()
+    cy.window().then((win) => {
+      const comp = win.GLib.component.findById('carousel_main')
+      expect(comp.spec.distribution).to.eq('spaceEqually')
+    })
+
+    cy.contains('button', 'Clear distribution').click()
+    cy.window().then((win) => {
+      const comp = win.GLib.component.findById('carousel_main')
+      expect(comp.spec.distribution).to.eq(null)
+    })
+  })
+
+  it('updates action status from carousel items', () => {
+    cy.visit(url)
+
+    cy.contains('button', 'Pick A')
+      .closest('.v-carousel')
+      .as('actionCarousel')
+
+    cy.get('@actionCarousel').within(() => {
+      cy.contains('button', 'Pick A').click({ force: true })
+    })
+    cy.get('#carousel_action_status').should('contain.text', 'Action status: A')
+
+    cy.get('@actionCarousel').within(() => {
+      cy.get('.v-window__right').click({ force: true })
+      cy.contains('button', 'Pick B').click({ force: true })
+    })
+    cy.get('#carousel_action_status').should('contain.text', 'Action status: B')
+
+    cy.get('@actionCarousel').within(() => {
+      cy.get('.v-window__right').click({ force: true })
+      cy.contains('button', 'Pick C').click({ force: true })
+    })
+    cy.get('#carousel_action_status').should('contain.text', 'Action status: C')
+  })
+})

package/cypress/e2e/glib-web/charts.cy.ts

@@ -0,0 +1,11 @@
+import { testPageUrl } from "../../helper"
+const url = testPageUrl('charts')
+
+describe('charts', () => {
+  it('opens full charts demo', () => {
+    cy.visit(url)
+
+    cy.contains('h2', 'Charts').should('be.visible')
+    cy.get('#charts_preview').should('exist')
+  })
+})

package/cypress/e2e/glib-web/column.cy.ts

@@ -0,0 +1,27 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('column')
+
+describe('column', () => {
+  it('shows snackbars for column size buttons', () => {
+    cy.visit(url)
+
+    cy.contains('button', '6 cols').click()
+    cy.get('.v-snackbar').should('contain.text', 'Not implemented yet!')
+
+    cy.contains('button', '4 cols').click()
+    cy.get('.v-snackbar').should('contain.text', 'Not implemented yet!')
+  })
+
+  it('updates column padding', () => {
+    cy.visit(url)
+
+    cy.contains('button', 'Add padding').click()
+    cy.get('#column_main')
+      .should('have.css', 'padding-top', '12px')
+
+    cy.contains('button', 'Clear padding').click()
+    cy.get('#column_main')
+      .should('not.have.css', 'padding-top', '12px')
+  })
+})

package/cypress/e2e/glib-web/commands.cy.ts

@@ -0,0 +1,35 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('commands')
+
+describe('commands', () => {
+  it('copies values to the clipboard', () => {
+    cy.visit(url)
+
+    cy.window().then((win) => {
+      cy.stub(win.navigator.clipboard, 'writeText')
+        .callsFake((text) => Promise.resolve(text))
+        .as('writeText')
+    })
+
+    cy.contains('button', 'commands/copy').click()
+    cy.get('@writeText').should('have.been.calledWith', 'Paste this somewhere else')
+
+    cy.contains('button', 'commands/copy (short)').click()
+    cy.get('@writeText').should('have.been.calledWith', 'Copied from commands test page')
+
+    cy.contains('button', 'commands/copy (long)').click()
+    cy.get('@writeText').should(
+      'have.been.calledWith',
+      'Long text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+    )
+
+    cy.contains('button', 'commands/copy (with onCopy)').click()
+    cy.get('@writeText').should('have.been.calledWith', 'Copied with callback')
+    cy.get('#commands_status').should('contain.text', 'Status: copied')
+    cy.contains('.v-snackbar', 'Copied').should('exist')
+
+    cy.contains('button', 'commands/copy (multiline)').click()
+    cy.get('@writeText').should('have.been.calledWith', 'Line 1\nLine 2\nLine 3')
+  })
+})

package/cypress/e2e/glib-web/components.cy.ts

@@ -0,0 +1,50 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('components')
+
+describe('components', () => {
+  it('updates label text with components/set', () => {
+    cy.visit(url)
+
+    cy.contains('button', 'components/set text').click()
+
+    cy.contains('#components_basic', 'Label text: updated').should('exist')
+  })
+
+  it('toggles visibility with components/set', () => {
+    cy.visit(url)
+
+    cy.contains('button', 'Hide').click()
+    cy.get('#components_basic').should('not.be.visible')
+
+    cy.contains('button', 'Show').click()
+    cy.get('#components_basic').should('be.visible')
+  })
+
+  it('fires onSet callbacks', () => {
+    cy.visit(url)
+
+    cy.contains('button', 'components/set (with onSet)').click()
+
+    cy.contains('#components_status', 'Status: set callback fired').should('exist')
+    cy.contains('.v-snackbar', 'Updated').should('exist')
+  })
+
+  // it('replaces components and restores label', () => {
+  //   cy.visit(url)
+
+  //   cy.contains('button', 'Replace with icon').click()
+  //   cy.get('#components_replace_target', { timeout: 10000 })
+  //     .should('have.class', 'v-icon')
+  //     .and('contain.text', 'verified')
+
+  //   cy.contains('button', 'Replace with button').click()
+  //   cy.get('#components_replace_target', { timeout: 10000 })
+  //     .should('contain.text', 'New button')
+  //     .click()
+  //   cy.contains('.v-snackbar', 'Button clicked').should('exist')
+
+  //   cy.contains('button', 'Restore label').click()
+  //   cy.contains('#components_replace_target', 'Replace me').should('exist')
+  // })
+})

package/cypress/e2e/glib-web/custom.cy.ts

@@ -0,0 +1,17 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('custom')
+
+describe('custom', () => {
+  it('switches custom data payloads', () => {
+    cy.visit(url)
+
+    cy.get('#custom_main').should('contain.text', 'Primary')
+
+    cy.contains('button', 'Alternate data').click()
+    cy.get('#custom_main').should('contain.text', 'Alternate')
+
+    cy.contains('button', 'Primary data').click()
+    cy.get('#custom_main').should('contain.text', 'Primary')
+  })
+})

package/cypress/e2e/glib-web/dialogOpen.cy.ts

@@ -0,0 +1,14 @@
+import { testPageUrl } from "../../helper"
+const url = testPageUrl('dialog_open')
+
+describe('dialog open', () => {
+  it('opens and closes dialog', () => {
+    cy.visit(url)
+
+    cy.contains('open').click()
+    cy.get('.v-dialog').should('exist')
+
+    cy.get('.v-dialog').contains('close').click()
+    cy.get('.v-dialog').should('not.exist')
+  })
+})

package/cypress/e2e/glib-web/fileUploadNew.cy.ts

@@ -0,0 +1,12 @@
+import { testPageUrl } from "../../helper"
+const url = testPageUrl('file_upload_new')
+
+describe('file upload new', () => {
+  it('renders upload fields', () => {
+    cy.visit(url)
+
+    cy.contains('Reset').click()
+    cy.contains('Field Upload').should('exist')
+    cy.get('input[type="file"]').should('exist')
+  })
+})