glib-web 4.39.7 → 4.40.0

package/AGENTS.md

@@ -0,0 +1,21 @@
+
+## References
+- Note that some of the references are located in directories pointed by symbolic links.
+- Please report if you cannot access any of the referenced documentation or examples.
+
+## System architecture
+- Read [ui_architecture.md](doc/common/ui_architecture.md)
+- This project implements the frontend components of the `glib` UI framework mentioned
+  in the architecture above.
+
+## Project guidelines
+- For working examples on how to use `glib` UI components, see all the jbuilder
+  files located in `doc/garage/`.
+
+## Behaviour and tendency
+- Read [behavior.md](doc/common/ai/behavior.md)
+
+## Rules
+* Always use `utils/type.js` to check types
+  - For example, avoid checking against `undefined` manually.
+

package/actions/bottom_banners/open.js

@@ -6,6 +6,7 @@ export default class {
 
     if (!targetId) console.error('targetId is required');
 
-    vueApp.bottomBanners[targetId] ||= newView;
+    // Always replace the banner so page-specific specs stay in sync across navigation
+    vueApp.bottomBanners[targetId] = newView;
   }
 }

package/actions/http/retry.js

@@ -7,8 +7,11 @@ const wait = ms => new Promise((resolve) => {
 });
 
 const retryWithDelay = async (
-  fn, retries = settings.http.retries, interval = settings.http.interval,
-  finalErr = 'Retry failed'
+  fn,
+  retries = settings.http.retries,
+  interval = settings.http.interval,
+  finalErr = 'Retry failed',
+  onFinal
 ) => {
   try {
     // try
@@ -17,6 +20,7 @@ const retryWithDelay = async (
     // if no retries left
     // throw error
     if (retries <= 0) {
+      if (onFinal) onFinal(err);
       return Promise.reject(finalErr);
     }
 
@@ -24,7 +28,7 @@ const retryWithDelay = async (
     await wait(interval);
 
     //recursively call the same func
-    return retryWithDelay(fn, (retries - 1), interval, finalErr);
+    return retryWithDelay(fn, (retries - 1), interval, finalErr, onFinal);
   }
 };
 
@@ -39,7 +43,9 @@ const httpExecuteWithRetry = (methodName, spec, component) => {
         Action.handleResponse(response, component);
       },
       error => {
-        if (error == 'Server error') err = new Error(error);
+        if (error == 'Server error') {
+          err = new Error(error);
+        }
       }
     );
 
@@ -48,7 +54,17 @@ const httpExecuteWithRetry = (methodName, spec, component) => {
     if (err) throw err;
   };
 
-  retryWithDelay(func, spec.retryLimit);
+  retryWithDelay(
+    func,
+    spec.retryLimit,
+    undefined,
+    undefined,
+    err => {
+      if (!spec?.silent) {
+        Utils.launch.snackbar.error("We're having trouble right now. Please try again.", component);
+      }
+    }
+  );
 };
 
-export { retryWithDelay, httpExecuteWithRetry };
+export { retryWithDelay, httpExecuteWithRetry };

package/app.vue

@@ -118,6 +118,9 @@ export default {
       title: "...",
       mainHeight: 0,
       actionCableConsumer: null,
+      tabWasBlurred: false,
+      onWindowFocus: null,
+      onWindowBlur: null,
     };
   },
   computed: {
@@ -179,12 +182,38 @@ export default {
         if (isRerender) GLib.action.execute(this.page.onRerender, this);
       }
     });
+    this.bindForegroundListeners();
     watchGlibEvent();
   },
+  beforeUnmount() {
+    this.unbindForegroundListeners();
+  },
   methods: {
     closeSheet() {
       this.vueApp.sheet.show = false;
     },
+    bindForegroundListeners() {
+      this.onWindowBlur = () => {
+        this.tabWasBlurred = true;
+      };
+      this.onWindowFocus = () => {
+        this.maybeExecuteOnForeground();
+      };
+
+      window.addEventListener('blur', this.onWindowBlur);
+      window.addEventListener('focus', this.onWindowFocus);
+    },
+    unbindForegroundListeners() {
+      window.removeEventListener('blur', this.onWindowBlur);
+      window.removeEventListener('focus', this.onWindowFocus);
+    },
+    maybeExecuteOnForeground() {
+      if (!this.page || !this.page.onForeground) return;
+      if (!this.tabWasBlurred) return; // Only fire after the tab has lost focus/visibility.
+
+      this.tabWasBlurred = false;
+      GLib.action.execute(this.page.onForeground, this);
+    },
     handleActionCable(val) {
       if (val.actionCable) {
         const { customer } = useSocket(val.actionCable, this.actionCableConsumer);

package/components/composable/upload_delegator.js

@@ -1,4 +1,4 @@
-import { vueApp } from "../../store";
+import eventBus from "../../utils/eventBus";
 import { useFileUtils, validateFiles } from "./file";
 
 const { makeKey } = useFileUtils();
@@ -8,8 +8,8 @@ function uploadFiles(obj) {
 
   if (!validateFiles({ newFiles: droppedFiles, files, spec })) return;
 
-  Object.assign(
-    vueApp.uploader,
+  eventBus.$emit(
+    'uploader/delegate',
     {
       files: Array.from(droppedFiles).reduce((prev, curr) => {
         prev[makeKey()] = curr;
@@ -24,4 +24,4 @@ function uploadFiles(obj) {
 function submitOnAllUploaded(obj) { }
 function setBusyWhenUploading(obj) { }
 
-export { uploadFiles, submitOnAllUploaded, setBusyWhenUploading };
+export { uploadFiles, submitOnAllUploaded, setBusyWhenUploading };

package/components/fields/_select.vue

@@ -2,7 +2,7 @@
   <div ref="container" :style="$styles()" :class="$classes()" v-if="loadIf">
     <!-- Set `menu-props` so the menu will never be wider than the select field.
          See https://github.com/vuetifyjs/vuetify/issues/17751 -->
-    <component :is="compName" :color="gcolor" v-model="fieldModel" :label="label" :items="normalizedOptions"
+    <component ref="comp" :is="compName" :color="gcolor" v-model="fieldModel" :label="label" :items="normalizedOptions"
       :chips="useChips" :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" :closable-chips="spec.multiple"
@@ -62,7 +62,7 @@ import { triggerOnChange, triggerOnInput, useGlibInput } from "../composable/for
 import { isBoolean } from '../../utils/type';
 
 import { useGlibSelectable, watchNoneOfAbove } from '../composable/selectable';
-import { ref } from 'vue';
+import { ref, defineExpose } from 'vue';
 import SelectItemDefault from "./_selectItemDefault.vue";
 import SelectItemWithImage from "./_selectItemWithImage.vue";
 import SelectItemWithIcon from "./_selectItemWithIcon.vue";
@@ -83,6 +83,7 @@ export default {
 
     const fieldModel = ref(props.spec.value || props.defaultValue);
     const options = ref(props.spec.options);
+    const comp = ref(null);
     const append = props.spec.append || {};
 
     const valueForDisableAll = props.spec.valueForDisableAll;
@@ -91,7 +92,13 @@ export default {
       watchNoneOfAbove({ model: fieldModel, options: options, valueForDisableAll });
     }
 
-    return { fieldModel, checkAll, isIndeterminate, isAllSelected, append };
+    // This is a public method that is called by other parts of the code, do not delete it.
+    function toggle() {
+      comp.value.menu = !comp.value.menu;
+    }
+    defineExpose(['toggle']);
+
+    return { fieldModel, checkAll, isIndeterminate, isAllSelected, append, toggle, comp };
   },
   data() {
     return {

package/components/fields/richText2.vue

@@ -260,7 +260,8 @@ export default defineComponent({
       quill.on('text-change', eventFiltering.debounce(function () {
         producedValue.value = sanitizedValue();
         nextTick(() => {
-          Action.executeWithFormData(props.spec.onChange || props.spec.onChangeAndLoad, instance.ctx, producedValue.value);
+          Action.executeWithFormData(props.spec.onChange, instance.ctx, producedValue.value);
+          Action.executeWithFormData(props.spec.onChangeAndLoad, instance.ctx, producedValue.value);
         });
       }));
 

package/components/mixins/events.js

@@ -2,6 +2,7 @@ import Action from "../../action";
 import UrlUtils from "../../utils/url";
 import * as TypeUtils from "../../utils/type";
 import { isRerender, vueApp } from "../../store";
+import { nextTick } from "vue";
 
 export default {
   data() {
@@ -39,7 +40,11 @@ export default {
     this._ready();
     this.$mounted();
     if (this.spec && this.spec.onChangeAndLoad && this.$registryEnabled()) {
-      this.$executeOnChange();
+      nextTick(() => {
+        const value = this.fieldModel;
+        console.log("NEW VALUE1", value);
+        GLib.action.executeWithFormData(this.spec.onChangeAndLoad, this, value);
+      });
     }
 
     if (this.spec && this.$registryEnabled()) {
@@ -202,25 +207,16 @@ export default {
     },
     $executeOnChange(newValue) {
       this.$nextTick(() => {
-        const value = newValue || this.fieldModel;
+        const value = newValue ?? this.fieldModel;
         console.log("NEW VALUE1", value);
-        GLib.action.executeWithFormData(this.spec.onChange || this.spec.onChangeAndLoad, this, value);
-      });
+        if (this.spec.onChange) {
+          GLib.action.executeWithFormData(this.spec.onChange, this, value);
+        }
+        if (this.spec.onChangeAndLoad) {
+          GLib.action.executeWithFormData(this.spec.onChangeAndLoad, this, value);
+        }
 
-      // Utils.type.ifObject(this.spec.onChange || this.spec.onChangeAndLoad, onChange => {
-      //   this.$nextTick(() => {
-      //     const value = newValue || this.fieldModel;
-      //     const formData = {
-      //       [this.spec.paramNameForFieldName || this.fieldName]: value
-      //     };
-      //     const params = {
-      //       [this.spec.paramNameForFormData || 'formData']: formData
-      //     };
-
-      //     const data = merge({}, onChange, params);
-      //     GLib.action.execute(data, this);
-      //   });
-      // });
+      });
     }
   }
 };

package/components/panels/timeline.vue

@@ -1,10 +1,9 @@
 <template>
   <!-- Paddings cannot be applied to v-timeline directly -->
   <div :style="$styles()" :class="$classes()" v-if="loadIf">
-    <v-timeline v-if="events" :density="density" :truncate-line="spec.truncateLine" align-top>
-      <!-- <v-timeline-item v-for="(item, index) in events" :key="index" :color="item.backgroundColor || 'white'" -->
+    <v-timeline v-if="events" :density="density" :truncate-line="spec.truncateLine" align-top :direction="spec.direction">
       <v-timeline-item v-for="(item, index) in events" :key="index" :density="density" :size="itemSize(item)"
-        :dot-color="item.backgroundColor || 'transparent'" :hide-dot="item.hideDot" :fill-dot="item.fillDot">
+        :dot-color="item.backgroundColor || 'transparent'" :hide-dot="item.hideDot" :fill-dot="item.fillDot" :side="spec.side">
         <template v-slot:icon>
           <div :class="itemClasses(item).includes('outlined') ? 'outlined-dots' : ''">
             <div v-if="item.text" class="number-circle" :style="{ color: item.color }">
@@ -35,6 +34,10 @@ export default {
     density() {
       return determineDensity(this.spec.styleClasses);
     },
+    itemSide() {
+      // Options: 'start' (left), 'end' (right), or undefined (alternating)
+      return this.spec.alignSide || undefined;
+    }
   },
   data() {
     return {

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

@@ -28,4 +28,15 @@ describe('glib lifecycle hooks', () => {
     cy.get('.views-tooltip p').should('have.text', 'onRerender')
     cy.get('#icon').should('contain.text', 'person')
   })
-})
+
+  it('execute onForeground after leaving and returning to tab', () => {
+    cy.visit(url)
+
+    cy.window().then((win) => {
+      win.dispatchEvent(new Event('blur'))
+      win.dispatchEvent(new Event('focus'))
+    })
+
+    cy.contains('page.onForeground').should('be.exist')
+  })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "4.39.7",
+  "version": "4.40.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/templates/thumbnail.vue

@@ -264,6 +264,17 @@ export default {
 .subsubtitle {
   margin-top: 5px;
 }
+
+.templates-thumbnail {
+  &:hover {
+    // Enhance button hover effect within hoverable thumbnails.
+    .views-button:hover {
+      &> .v-btn__overlay {
+        opacity: 0.12;
+      }
+    }
+  }
+}
 </style>
 
 <style lang="scss" scoped>

package/.claude/settings.local.json

@@ -1,18 +0,0 @@
-{
-  "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"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}

package/AGENT.md

@@ -1,11 +0,0 @@
-* System architecture
-  * Read [ui_architecture.md](doc/common/ui_architecture.md)
-  * This project implements the frontend components of the `glib` UI framework mentioned
-    in the architecture above.
-
-* Project guidelines
-  * For working examples on how to use `glib` UI components, see all the jbuilder
-    files located in `doc/garage/`.
-
-* Always use `utils/type.js` to check types
-  * For example, avoid checking against `undefined` manually.