glib-web 4.42.2 → 4.43.0

package/.github/workflows/lint.yml

@@ -0,0 +1,29 @@
+name: Lint
+
+on:
+  push:
+    branches:
+      - "**"
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+          cache: "yarn"
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run lint
+        run: yarn lint

package/.nycrc.json

@@ -26,8 +26,12 @@
     "utils/**"
   ],
   "exclude": [
-    "actions/cables",
-    "actions/analytics",
-    "utils/private"
+    "actions/cables/*",
+    "actions/analytics/*",
+    "utils/private/*",
+    "extensions/*",
+    "components/treeView.vue",
+    "actions/files/*",
+    "actions/bottom_banners/*"
   ]
 }

package/AGENTS.md

@@ -12,6 +12,9 @@
 - For working examples on how to use `glib` UI components, see all the jbuilder
   files located in `doc/garage/`.
 
+## Agent commands
+- Available agent command definitions live in `agent/commands/` (see the `.yaml` files there).
+
 ## Behaviour and tendency
 - Read [behavior.md](doc/common/ai/behavior.md)
 

package/action.js

@@ -87,6 +87,7 @@ import ActionBottomBannersClose from "./actions/bottom_banners/close";
 
 import ActionDetectCountry from "./actions/browsers/detectCountry";
 import ActionDetectTimezone from "./actions/browsers/detectTimezone";
+import ActionSetLocation from "./actions/browsers/setLocation";
 
 import ActionsCookiesRemove from "./actions/cookies/remove";
 import ActionsCookiesClear from "./actions/cookies/clear";
@@ -190,6 +191,7 @@ const actions = {
 
   "browsers/detectCountry": ActionDetectCountry,
   "browsers/detectTimezone": ActionDetectTimezone,
+  "browsers/setLocation": ActionSetLocation,
 
   "cookies/remove": ActionsCookiesRemove,
   "cookies/clear": ActionsCookiesClear,

package/actions/analytics/logEvent.js

@@ -1,9 +1,9 @@
 export default class {
-  logDisabled(spec) {
+  logDisabled() {
     return true;
   }
 
-  execute(properties, component) {
+  execute(properties) {
     if (Utils.settings.isDev) {
       return;
     }

package/actions/bottom_banners/close.js

@@ -1,7 +1,7 @@
 import { vueApp } from "../../store";
 
 export default class {
-  execute(properties, component) {
+  execute(properties) {
     const { targetId } = properties;
 
     delete vueApp.bottomBanners[targetId];

package/actions/bottom_banners/open.js

@@ -1,7 +1,7 @@
 import { vueApp } from "../../store";
 
 export default class {
-  execute(properties, component) {
+  execute(properties) {
     const { targetId, newView } = properties;
 
     if (!targetId) console.error('targetId is required');

package/actions/browsers/setLocation.js

@@ -0,0 +1,16 @@
+import Action from "../../action";
+import { jsonView } from "../../store";
+import history from "../../utils/history";
+
+export default class {
+  execute(spec, component) {
+    Utils.type.ifString(spec.url, (url) => {
+      if (spec.replace) {
+        history.updatePage(jsonView.page, url);
+      } else {
+        history.pushPage(jsonView.page, url);
+      }
+      Action.execute(spec.onSet, component);
+    });
+  }
+}

package/actions/cables/push.js

@@ -2,7 +2,7 @@ import { channels } from "../../components/composable/socket";
 
 
 export default class {
-  execute(properties, component) {
+  execute(properties) {
     const { event, payload, channel } = properties;
     const ch = channels[channel];
 

package/actions/components/invoke.js

@@ -2,7 +2,7 @@ import Action from "../../action";
 import { realComponent } from "../../components/helper";
 
 export default class {
-  execute(spec, component) {
+  execute(spec) {
     const target = realComponent(GLib.component.findById(spec.targetId));
 
     if (!target) {

package/actions/components/replace.js

@@ -2,7 +2,7 @@ import Action from "../../action";
 
 // Experimental. Can this be merged with `components_set` ?
 export default class {
-  execute(spec, component) {
+  execute(spec) {
     let target = GLib.component.findById(spec.targetId);
 
     if (!target) {

package/actions/components/replaceChildren.js

@@ -3,7 +3,7 @@ import Action from "../../action";
 
 // Experimental
 export default class {
-  execute(spec, component) {
+  execute(spec) {
     const target = GLib.component.findById(spec.targetId);
 
     if (!target) {

package/actions/components/set.js

@@ -1,7 +1,7 @@
 import { realComponent } from "../../components/helper";
 
 export default class {
-  execute(spec, component) {
+  execute(spec) {
     let targetComponent = realComponent(GLib.component.findById(spec.targetId));
 
     if (!targetComponent) {

package/actions/dialogs/close.js

@@ -1,5 +1,3 @@
-import { dialogs } from "../../store";
-
 export default class {
   execute(spec, component) {
     Utils.launch.dialog.close(spec, component);

package/actions/fields/getValues.js

@@ -1,13 +1,9 @@
 import Action from "../../action";
-import { getFormData } from "../../components/composable/form";
-import { isPresent } from "../../utils/type";
+import { getAllFormData } from "../../components/composable/form";
 
 export default class {
   execute(spec, component) {
-    const inputEl = component.$el.querySelector('input,select,textarea');
-    const formEl = inputEl.form;
-
-    const formData = getFormData(formEl);
+    const formData = getAllFormData();
     // const values = spec.fieldNames.reduce((prev, curr) => {
     //   Object.assign(prev, { [curr]: formData[curr] });
     //   return prev;
@@ -20,7 +16,7 @@ export default class {
     }, {});
 
     Utils.type.ifObject(spec.onGet, onGet => {
-      Action.executeWithFormData(onGet, component, values)
+      Action.executeWithFormData(onGet, component, values);
     });
   }
 }

package/actions/http/patch.js

@@ -1,7 +1,7 @@
 import { httpExecuteWithRetry } from "./retry";
 
 export default class {
-  execute(properties, controller, params) {
+  execute(properties, controller) {
     httpExecuteWithRetry('PATCH', properties, controller);
   }
 }

package/actions/http/post.js

@@ -1,7 +1,7 @@
 import { httpExecuteWithRetry } from "./retry";
 
 export default class {
-  execute(properties, controller, params) {
+  execute(properties, controller) {
     httpExecuteWithRetry('POST', properties, controller);
   }
 }

package/actions/http/put.js

@@ -1,7 +1,7 @@
 import { httpExecuteWithRetry } from "./retry";
 
 export default class {
-  execute(properties, controller, params) {
+  execute(properties, controller) {
     httpExecuteWithRetry('PUT', properties, controller);
   }
 }

package/actions/http/retry.js

@@ -59,7 +59,7 @@ const httpExecuteWithRetry = (methodName, spec, component) => {
     spec.retryLimit,
     undefined,
     undefined,
-    err => {
+    () => {
       if (!spec?.silent) {
         Utils.launch.snackbar.error("We're having trouble right now. Please try again.", component);
       }

package/actions/logics/set.js

@@ -2,7 +2,6 @@ import jsonLogic from 'json-logic-js';
 import merge from 'lodash.merge';
 import { nextTick } from "vue";
 import { sanitize } from "../../components/composable/date";
-import { htmlElement } from "../../components/helper";
 import { isPresent } from "../../utils/type";
 import { getFormData as _getFormData } from "../../components/composable/form";
 
@@ -95,16 +94,6 @@ export default class {
       if (!targetComponent) {
         console.warn("Component ID not found", id);
       }
-      Utils.type.ifObject(targetComponent, (component) => {
-        const element = htmlElement(component);
-        Utils.type.ifObject(element, (el) => {
-          Utils.type.ifFunction(el.closest, () => {
-            if (!el.closest('form')) {
-              console.warn("Target component is not inside a form", component.viewId || id);
-            }
-          });
-        });
-      });
       return targetComponent;
     }).filter((comp) => comp);
 

package/actions/popovers/open.js

@@ -1,4 +1,3 @@
-import eventBus from "../../utils/eventBus";
 import http from "../../utils/http";
 import { closeAllExcept, isExist } from "./helper";
 

package/actions/sheets/show.js

@@ -1,7 +1,7 @@
 import { vueApp } from "../../store";
 
 export default class {
-  execute(spec, component) {
+  execute(spec) {
 
     const { body, placement, scrim, elevation } = spec;
 
@@ -13,4 +13,4 @@ export default class {
       elevation
     };
   }
-}
+}

package/actions/timeouts/clear.js

@@ -1,11 +1,15 @@
 import { timerIds } from "./state";
 
 export default class {
-  execute(properties, component) {
+  execute(properties) {
     const { repeat, timerId } = properties;
 
     if (timerIds[timerId]) {
-      repeat ? clearInterval(timerIds[timerId]) : clearTimeout(timerIds[timerId]);
+      if (repeat) {
+        clearInterval(timerIds[timerId]);
+      } else {
+        clearTimeout(timerIds[timerId]);
+      }
       delete timerIds[timerId];
     }
   }

package/actions/timeouts/set.js

@@ -6,7 +6,11 @@ export default class {
 
     // clear timeout/interval if there is same timerId exist
     if (timerId && timerIds[timerId]) {
-      repeat ? clearInterval(timerIds[timerId]) : clearTimeout(timerIds[timerId]);
+      if (repeat) {
+        clearInterval(timerIds[timerId]);
+      } else {
+        clearTimeout(timerIds[timerId]);
+      }
       delete timerIds[timerId];
     }
 

package/actions/tours/stop.js

@@ -1,7 +1,7 @@
 import tour from "./start.js";
 
 export default class {
-  execute(spec, component) {
+  execute() {
     tour.stopTour();
   }
 }

package/actions/windows/open.js

@@ -1,4 +1,4 @@
-import { executeGlibEvent, vueApp } from "../../store";
+import { executeGlibEvent } from "../../store";
 import { showSkeletionViewIfExist } from "./skeletionView";
 
 export default class {

package/actions/windows/print.js

@@ -1,5 +1,5 @@
 export default class {
-  execute(properties, component) {
+  execute() {
     window.print();
   }
 }

package/agent/{glib_test_sync.yaml → commands/generate_test.yaml}

@@ -19,6 +19,7 @@ inputs:
     - 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.
+    - Prefer cy.contains('BUTTON_TEXT') over cy.contains('button', 'BUTTON_TEXT').
     - Match existing project patterns (describe/it, cy.visit, selectors, etc).
     - Use ASCII only.
   fallback_test_template: |
@@ -44,7 +45,7 @@ inputs:
 
           cy.wrap(labels).each((label) => {
             cy.visit(url)
-            cy.contains('button', label).click({ force: true })
+            cy.contains(label).click({ force: true })
             cy.location('href').then((hrefAfter) => {
               if (hrefAfter !== url) {
                 expect(hrefAfter).to.not.eq(url)
@@ -55,7 +56,7 @@ inputs:
                 if ($body.find(overlaySelectors).length) {
                   cy.get(overlaySelectors).should('exist')
                 } else {
-                  cy.contains('button', label).should('exist')
+                  cy.contains(label).should('exist')
                 }
               })
             })

package/agent/commands/scan_state_issue.yaml

@@ -0,0 +1,64 @@
+version: 1
+name: glib-web-stale-state-scan
+description: >
+  Scan glib-web components for stale state risks caused by spec updates via
+  components/set or logics/set, focusing on Vue2 mixins and Vue3 setup patterns.
+
+inputs:
+  component_dir: components
+  actions_dir: actions
+  mixins_dir: components/mixins
+  utils_dir: utils
+  report_path: /tmp/glib-web-stale-state-scan/report.md
+
+constraints:
+  - Use utils/type.js for any type checks in helper scripts.
+  - Use ASCII only in generated outputs.
+
+steps:
+  - id: scan-setup-nonreactive
+    instruction: |
+      Find setup() blocks that read props.spec non-reactively.
+      Use rg to list matches for:
+        - "setup(" within {{inputs.component_dir}}
+        - "props.spec" or "ref(props.spec" or "= props.spec"
+      Output: setup_nonreactive_hits (file:line, matched_text).
+
+  - id: scan-options-data-created
+    instruction: |
+      Find Options API initialization that derives state once from spec.
+      Use rg for:
+        - "data()" or "created()" or "mounted()" within {{inputs.component_dir}}
+        - inspect for "this.spec" assignments in same file.
+      Output: options_init_hits (file:line, matched_text).
+
+  - id: scan-lifecycle-mixin-usage
+    instruction: |
+      Find components that implement $ready/$updated or rely on Vue2 mixins.
+      Use rg for "$ready(" or "$updated(" within {{inputs.component_dir}}.
+      Output: lifecycle_hook_hits (file:line, matched_text).
+
+  - id: scan-action-merge-usage
+    instruction: |
+      Identify where action_merge / components/set / logics/set are used.
+      Use rg for:
+        - "action_merge" within {{inputs.component_dir}} and {{inputs.actions_dir}}
+        - "components/set" or "logics/set" within {{inputs.actions_dir}}
+      Output: merge_action_hits (file:line, matched_text).
+
+  - id: correlate-risk
+    instruction: |
+      Correlate hits to flag components with stale-state risks:
+        - setup_nonreactive_hits are high risk.
+        - options_init_hits without watchers on spec are medium risk.
+        - lifecycle_hook_hits indicate reliance on $ready/$updated.
+      Produce a concise markdown report at {{inputs.report_path}} with:
+        - Summary counts by risk level.
+        - Tables of findings per risk level (file, line, reason).
+        - Note where components are likely affected by components/set/logics/set.
+      Output: report_path.
+
+  - id: review-report
+    instruction: |
+      Open {{inputs.report_path}} and verify the report is readable and concise.
+      Output: report_preview.

package/app.vue

@@ -1,15 +1,15 @@
 <template>
-  <v-app :class="pageClasses" ref="appRef">
+  <v-app ref="appRef" :class="pageClasses">
     <component :is="containerComponent" :spec="formSpec" :style="'height: 100%;'">
-      <nav-layout ref="navBar" @mounted="updateMainHeight()" :page="page" :key="`navBar-${page.key}`" />
+      <nav-layout ref="navBar" :key="`navBar-${page.key}`" :page="page" @mounted="updateMainHeight()" />
 
-      <v-progress-linear color="primary" v-if="vueApp.indicator" :indeterminate="true" height="5"
+      <v-progress-linear v-if="vueApp.indicator" color="primary" :indeterminate="true" height="5"
         style="position: fixed; z-index: 4">
       </v-progress-linear>
 
       <v-main :style="`height: ${mainHeight}px;`">
         <v-container v-show="!vueApp.loading" :fluid="page.template == 'fullWidth'" :class="containerClasses">
-          <div class="pages-header" :key="`page-header-${page.key}`">
+          <div :key="`page-header-${page.key}`" class="pages-header">
             <panels-responsive :spec="header" />
           </div>
 
@@ -19,7 +19,7 @@
             <panels-responsive :key="`footer-${page.key}`" class="body-footer" :spec="bodyFooter" />
           </div>
 
-          <div class="pages-footer" :key="`page-footer-${page.key}`">
+          <div :key="`page-footer-${page.key}`" class="pages-footer">
             <panels-responsive :spec="footer" />
           </div>
         </v-container>
@@ -48,8 +48,8 @@
       </v-sheet>
     </Transition>
     <div class="glib-bottomBanner">
-      <glib-component v-for="(bottomBanner, index) in Object.values(vueApp.bottomBanners)" :spec="bottomBanner"
-        :key="index"></glib-component>
+      <glib-component v-for="(bottomBanner, index) in Object.values(vueApp.bottomBanners)" :key="index"
+        :spec="bottomBanner"></glib-component>
     </div>
   </v-app>
 </template>
@@ -71,6 +71,14 @@ import { nextTick } from "vue";
 
 export default {
   expose: ['updateMainHeight'],
+  components: {
+    "nav-layout": NavLayout,
+    "panels-form": FormPanel,
+  },
+  // mixins: [phoenixSocketMixin, actionCableMixin],
+  props: {
+    page: { type: Object, required: true },
+  },
   setup(props) {
     const filePaster = computed(() => props.page.filePaster);
     usePasteable(filePaster);
@@ -105,14 +113,6 @@ export default {
 
     return { vueApp, tooltipId, appRef };
   },
-  components: {
-    "nav-layout": NavLayout,
-    "panels-form": FormPanel,
-  },
-  // mixins: [phoenixSocketMixin, actionCableMixin],
-  props: {
-    page: { type: Object, required: true },
-  },
   data() {
     return {
       title: "...",
@@ -121,6 +121,7 @@ export default {
       tabWasBlurred: false,
       onWindowFocus: null,
       onWindowBlur: null,
+      onWindowResize: null,
     };
   },
   computed: {
@@ -147,6 +148,7 @@ export default {
     },
     containerComponent() {
       if (this.formSpec) {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.name = "panels-form";
         return "panels-form";
       }
@@ -161,13 +163,16 @@ export default {
     },
   },
   watch: {
-    "vueApp.indicator": function (val, oldVal) {
+    "vueApp.indicator": function (val) {
       document.title = val ? "..." : this.page.title;
     },
     page: {
-      handler(val, oldVal) {
+      handler(val) {
         if (!val) return;
         this.handleActionCable(val);
+        this.$nextTick(() => {
+          this.handlePageReady();
+        });
       },
       immediate: true
     }
@@ -187,6 +192,16 @@ export default {
   },
   beforeUnmount() {
     this.unbindForegroundListeners();
+    if (this.onWindowResize) {
+      window.removeEventListener("resize", this.onWindowResize, true);
+    }
+  },
+  mounted() {
+    this.onWindowResize = () => {
+      this.updateMainHeight();
+    };
+    window.addEventListener("resize", this.onWindowResize, true);
+    this.updateMainHeight();
   },
   methods: {
     closeSheet() {
@@ -228,16 +243,7 @@ export default {
         this.actionCableConsumer = null;
       }
     },
-    $mounted() {
-      window.addEventListener(
-        "resize",
-        (event) => {
-          this.updateMainHeight();
-        },
-        true
-      );
-    },
-    $ready() {
+    handlePageReady() {
       this.$type.ifString(this.page.title, (title) => {
         document.title = title;
       });

package/components/_avatar.vue

@@ -1,26 +1,26 @@
 <template>
   <common-badge :spec="spec">
     <v-avatar :size="spec.size" :color="spec.backgroundColor || 'surface-variant'" :class="cssClasses">
-      <p class="initials" v-if="spec.initials" :style="{ color: spec.initials.color || 'white' }">{{ spec.initials.text }}</p>
+      <p v-if="spec.initials" class="initials" :style="{ color: spec.initials.color || 'white' }">{{ spec.initials.text }}</p>
       <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
       <!-- <img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()" /> -->
-      <v-img :style="$styles()" :class="$classes()" :src="spec.url || spec.base64Data" @click="$onClick()"
-        v-else></v-img>
+      <v-img v-else :style="$styles()" :class="$classes()" :src="spec.url || spec.base64Data"
+        @click="$onClick()"></v-img>
     </v-avatar>
   </common-badge>
 </template>
 
 <script>
+import GlibBase from "./base/glibBase.js";
 export default {
+  extends: GlibBase,
   props: {
     spec: { type: Object, required: true }
   },
   computed: {
     cssClasses() {
       // Icons are nameless when used in other components, e.g. buttons
-      this.spec.view = this.spec.view || "avatar";
-
-      return this.$classes();
+      return this.$classes(this.spec, "avatar");
     },
   },
 };

package/components/_badge.vue

@@ -1,19 +1,21 @@
 <template>
   <v-badge :color="badge.backgroundColor || 'red'" overlap :model-value="badgeExists()" :style="styles()">
-    <template v-slot:badge>{{ badge.text }}</template>
+    <template #badge>{{ badge.text }}</template>
     <slot />
   </v-badge>
 </template>
 
 <script>
+import GlibBase from "./base/glibBase.js";
 export default {
+  extends: GlibBase,
   props: {
     spec: { type: Object, required: true }
   },
-  data() {
-    return {
-      badge: this.spec.badge || {}
-    };
+  computed: {
+    badge() {
+      return this.spec.badge || {};
+    }
   },
   methods: {
     badgeExists() {

package/components/_button.vue

@@ -6,12 +6,14 @@
 </template>
 
 <script>
+import GlibBase from "./base/glibBase.js";
 import InternalButton from "./_internal_button.vue";
 
 export default {
   components: {
     "internal-button": InternalButton,
   },
+  extends: GlibBase,
   props: {
     spec: { type: Object, required: true }
   },