glib-web 4.39.4 → 4.39.6

package/.claude/settings.local.json

@@ -8,7 +8,9 @@
       "Bash(npx cypress run:*)",
       "Read(//home/hgani/workspace/glib-web/**)",
       "Bash(curl:*)",
-      "Bash(pkill:*)"
+      "Bash(pkill:*)",
+      "Bash(gh pr list:*)",
+      "WebSearch"
     ],
     "deny": [],
     "ask": []

package/actions/sheets/open.js

@@ -10,7 +10,7 @@ export default class {
     if (loaderViews) {
       vueApp.sheet = {
         show: true,
-        spec: { childViews: loaderViews },
+        body: { childViews: loaderViews },
         placement
       };
     }
@@ -21,14 +21,14 @@ export default class {
       component,
       (response) => {
         vueApp.sheet = {
-          spec: Object.assign({}, response.body, { key: strandom() }),
+          body: Object.assign({}, response.body, { key: strandom() }),
           show: true,
           placement
         };
       },
       () => {
         vueApp.sheet = {
-          spec: {
+          body: {
             childViews: [
               { view: 'p', text: 'Failed to load' },
               { view: 'spacer', height: 8 },

package/app.vue

@@ -43,6 +43,7 @@
         <!-- <glib-component v-for="(rbSpec, index) in sheet.spec.childViews" :spec="rbSpec"
           :key="`${vueApp.sheet.spec.key}-${index}`"></glib-component> -->
 
+        <!-- TODO: fix this -->
         <panels-responsive :spec="sheet.body"></panels-responsive>
       </v-sheet>
     </Transition>
@@ -384,14 +385,6 @@ body,
   }
 }
 
-.v-input__details {
-  min-height: 0;
-  margin-bottom: 0;
-
-  .v-messages {
-    min-height: 0;
-  }
-}
 
 .v-label {
   opacity: 1;
@@ -406,13 +399,34 @@ body,
   pointer-events: none;
 }
 
+/* 1) Make input a positioning root */
+.v-input {
+  position: relative;
+}
+
+/* 2) Move details out of the layout flow */
 .v-input .v-input__details {
-  min-height: fit-content;
-  padding-top: 0px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
 
-  .v-messages__message {
-    padding-top: 6px;
-  }
+  /* remove Vuetify spacing */
+  height: auto !important;
+  min-height: 0 !important;
+  margin: 0 !important;
+  padding-top: 2px !important;
+
+  /* avoid layout shift */
+  pointer-events: none;
+  /* optional */
+}
+
+/* 3) Allow counter & error text to be readable */
+.v-input__details * {
+  pointer-events: auto;
+  /* let user select/copy text */
+  background: transparent;
 }
 
 .v-btn--disabled {

package/components/_message.vue

@@ -1,20 +1,10 @@
-<!-- TODO: Deprecate this in favor of supporting `body` in dialogs, banners, and sheets -->
 <template>
-  <div v-if="isMarkdown" v-html="compiledText"></div>
-  <div v-else class="unformatted">{{this.spec.message}}</div>
+  <div class="unformatted">{{this.spec.message}}</div>
 </template>
 
 <script>
 export default {
-  props: ["spec"],
-  computed: {
-    compiledText() {
-      return Utils.format.markdown(this.spec.message);
-    },
-    isMarkdown() {
-      return this.spec.message_format == 'markdown'
-    }
-  }
+  props: ["spec"]
 };
 </script>
 

package/components/fields/richText2.vue

@@ -76,14 +76,8 @@ export default defineComponent({
 
 
     function sanitizedValue() {
-      // let index = 0;
-      // const value = quill.root.innerHTML.replace(/src="([^"]+)"|href="([^"]+)"/g, function (_, g1, g2) {
-      //   if (g1) {
-      //     return `src="{{image${++index}}}"`;
-      //   } else if (g2) {
-      //     return `href="{{image${++index}}}"`;
-      //   }
-      // });
+      if (!quill) return props.spec.value || '';
+
       const value = quill.root.innerHTML;
 
       return produce === 'markdown' ? format.htmlToMarkdown(value) : value;
@@ -152,28 +146,32 @@ export default defineComponent({
         ["link"],
       ]
     };
-    if (props.spec.mentionList) {
-      const simpleSource = (searchTerm, renderList, mentionChar) => {
-        const matches = props.spec.mentionList.toSorted().map((v, index) => ({ id: index + 1, value: v }));
+    const mentionList = props.spec.mentionList || [];
+
+    if (mentionList.length > 0) {
+      const simpleSource = (searchTerm, renderList) => {
+        const normalizedTerm = (searchTerm || '').toLowerCase();
+        const matches = mentionList.toSorted((a, b) => a.localeCompare(b)).map((v, index) => ({ id: index + 1, value: v }));
 
-        if (searchTerm.length === 0) {
+        if (normalizedTerm.length === 0) {
           renderList(matches, searchTerm);
-        } else {
-          renderList(matches.filter((v) => v.value.toLowerCase().includes(searchTerm)), searchTerm);
+          return;
         }
-      };
 
-      const advancedSource = (searchTerm, renderList, mentionChar) => {
+        renderList(matches.filter((v) => v.value.toLowerCase().includes(normalizedTerm)), searchTerm);
+      };
 
-        const compareFn = (a, b) => a.value > b.value;
-        const options = props.spec.mentionList.toSorted(compareFn);
-        const isGrouped = !!props.spec.mentionList[0].group;
+      const advancedSource = (searchTerm, renderList) => {
+        const compareFn = (a, b) => a.value.localeCompare(b.value);
+        const options = mentionList.toSorted(compareFn);
+        const normalizedTerm = (searchTerm || '').toLowerCase();
+        const isGrouped = !!mentionList[0].group;
         let matches;
 
-        if (searchTerm.length === 0) {
+        if (normalizedTerm.length === 0) {
           matches = options;
         } else {
-          matches = options.filter((v) => v.value.toLowerCase().includes(searchTerm));
+          matches = options.filter((v) => v.value.toLowerCase().includes(normalizedTerm));
         }
 
         if (isGrouped) {
@@ -191,7 +189,7 @@ export default defineComponent({
         renderList(matches, searchTerm);
       };
 
-      const source = typeof props.spec.mentionList[0] == 'object' ? advancedSource : simpleSource;
+      const source = typeof mentionList[0] === 'object' ? advancedSource : simpleSource;
 
       Quill.register({ "blots/mention": MentionBlot, "modules/mention": Mention });
       modules.mention = {

package/components/fields/textarea.vue

@@ -4,7 +4,13 @@
       :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :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"
-      @update:modelValue="onChange()" persistent-placeholder :clearable="spec.clearable"></v-textarea>
+      @update:modelValue="onChange()" persistent-placeholder :clearable="spec.clearable">
+
+      <template #counter="{ counter }">
+        <span v-if="!spec.readOnly">{{ counter }}</span>
+      </template>
+    </v-textarea>
+
   </div>
 </template>
 

package/components/p.vue

@@ -25,6 +25,9 @@ p.muted {
   opacity: 0.7;
 }
 
+</style>
+
+<style lang="scss">
 .tooltip {
   padding: 4px 8px;
   color: white;

package/nav/appBar.vue

@@ -71,8 +71,12 @@ export default {
     //   }
     // },
     isPermanent() {
-      const display = this.$vuetify.display.name;
-      return display == "lg" || display == "xl";
+      if (this.navBar.collapseButtonsOnMobile) {
+        // const display = this.$vuetify.display.name;
+        // return display == "lg" || display == "xl";
+        return !this.$vuetify.display.smAndDown;
+      }
+      return true;
     },
     showDrawerMenu() {
       return this.page.leftDrawer && !this.isPermanent;

package/nav/drawer.vue

@@ -89,6 +89,12 @@ export default {
       openedGroups: openedGroups
     };
   },
+  mounted() {
+    this.registerDrawerToggleListener();
+  },
+  beforeUnmount() {
+    this.unregisterDrawerToggleListener();
+  },
   computed: {
     cssClasses() {
       // To make sure a css class name is assigned to this component
@@ -123,16 +129,29 @@ export default {
     trigger: function (val, oldVal) {
       this.state = !this.state;
     },
+    spec: {
+      handler() {
+        // When the page reloads reactively, the event bus listeners are cleared.
+        // Re-register the drawer toggle so future events still work.
+        if (bus.hasListener("glib-drawers/toggle", this.handleDrawerToggle)) {
+          // Listener is still active; skip re-registering to avoid duplicate toggles.
+          return;
+        }
+        this.registerDrawerToggleListener();
+      }
+    }
   },
   methods: {
-    $mounted() {
-      bus.$on("glib-drawers/toggle", (bool) => {
-        const data = isPresent(bool) ? bool : !this.state;
-        this.updateState(data);
-      });
+    registerDrawerToggleListener() {
+      this.unregisterDrawerToggleListener();
+      bus.$on("glib-drawers/toggle", this.handleDrawerToggle);
     },
-    $unmounted() {
-      bus.$off("glib-drawers/toggle");
+    unregisterDrawerToggleListener() {
+      bus.$off("glib-drawers/toggle", this.handleDrawerToggle);
+    },
+    handleDrawerToggle(bool) {
+      const data = isPresent(bool) ? bool : !this.state;
+      this.updateState(data);
     },
     updateState(state) {
       this.state = state;
@@ -172,7 +191,6 @@ export default {
   align-items: center;
   background-color: white;
 }
-
 </style>
 
 <style lang="scss">

package/nav/snackbar.vue

@@ -48,6 +48,8 @@ export default {
       this.vertical = [this.spec.styleClasses].flat().includes('vertical');
     },
     click: function (spec) {
+      const { onClick } = spec;
+      Action.execute(onClick, this);
       this.show = false;
     }
   }

package/package.json

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

package/templates/thumbnail.vue

@@ -49,15 +49,20 @@
 
         <common-badge :spec="spec">
           <div>
-            <v-list-item-title class="title">{{ spec.title }}</v-list-item-title>
-
-            <div class="subtitle" v-if="spec.subtitle">{{
-              spec.subtitle
-            }}</div>
+            <v-list-item-title class="title">
+              <div v-if="isMarkdown" v-html="formattedTitle"></div>
+              <template v-else>{{ spec.title }}</template>
+            </v-list-item-title>
+
+            <div class="subtitle" v-if="spec.subtitle">
+              <div v-if="isMarkdown" v-html="formattedSubtitle"></div>
+              <template v-else>{{ spec.subtitle }}</template>
+            </div>
 
-            <v-list-item-subtitle class="subsubtitle" v-if="spec.subsubtitle">{{
-              spec.subsubtitle
-            }}</v-list-item-subtitle>
+            <v-list-item-subtitle class="subsubtitle" v-if="spec.subsubtitle">
+              <div v-if="isMarkdown" v-html="formattedSubsubtitle"></div>
+              <template v-else>{{ spec.subsubtitle }}</template>
+            </v-list-item-subtitle>
             <div v-if="hasChips" class="chips">
               <template v-for="(item, index) in chips" :key="index">
                 <common-chip :spec="item" />
@@ -127,6 +132,18 @@ export default {
         return Object.assign({ view: 'avatar' }, val);
       });
     },
+    isMarkdown() {
+      return this.spec.textFormat == 'markdown';
+    },
+    formattedTitle() {
+      return Utils.format.markdown(this.spec.title);
+    },
+    formattedSubtitle() {
+      return Utils.format.markdown(this.spec.subtitle);
+    },
+    formattedSubsubtitle() {
+      return Utils.format.markdown(this.spec.subsubtitle);
+    },
     clickCondition() {
       if (this.spec.onClick || this.spec.onLongPress) {
         // This will show the clickable indication

package/utils/eventBus.js

@@ -9,5 +9,6 @@ export default {
     $off: (...args) => emitter.off(...args),
     $emit: (...args) => emitter.emit(...args),
     $removeAllListener: (...args) => emitter.removeAllListeners(...args),
-    currentListenerCount: () => emitter.listeners().length
-};
+    currentListenerCount: () => emitter.listeners().length,
+    hasListener: (event, listener) => emitter.listeners(event).includes(listener)
+};

package/utils/format.js

@@ -2,6 +2,9 @@ import { marked } from "marked";
 import { gfm } from "turndown-plugin-gfm";
 import TurndownService from "turndown";
 
+// Shared Marked configuration so Markdown ↔ Quill keeps GFM features and avoids extra IDs.
+const markedOptions = { gfm: true, breaks: true, headerIds: false, mangle: false };
+
 export default class {
   static markdownForEditor(text) {
 
@@ -23,12 +26,12 @@ export default class {
     marked.use({ renderer });
 
     return marked.parse(
-      text, { break: true }
+      text, markedOptions
     );
   }
 
   static markdown(text) {
-    return marked.parse(text);
+    return marked.parse(text, markedOptions);
   }
 
   static htmlToMarkdown(text) {
@@ -47,6 +50,36 @@ export default class {
         return "```\n" + content + "```";
       },
     });
+
+    // Quill renders every list inside <ol> and differentiates via data-list attributes.
+    // Ensure items marked as "bullet" remain unordered when converted back to Markdown.
+    turndownService.addRule("quillBulletList", {
+      filter(node) {
+        return node.nodeName === "LI" && node.getAttribute("data-list") === "bullet";
+      },
+      replacement(content, node, options) {
+        const normalized = content
+          .replace(/^\n+/, "")
+          .replace(/\n+$/, "\n")
+          .replace(/\n/gm, "\n    ");
+        const suffix = node.nextSibling && !/\n$/.test(normalized) ? "\n" : "";
+        return `${options.bulletListMarker}   ${normalized}${suffix}`;
+      },
+    });
+
+    turndownService.addRule("mention", {
+      filter(node) {
+        return node.nodeName === "SPAN" && node.classList && node.classList.contains("mention");
+      },
+      replacement(content, node) {
+        const dataset = node.dataset || {};
+        const denotation = dataset.denotationChar || "@";
+        const rawValue = dataset.value || node.textContent || "";
+        const normalizedValue = rawValue.trim();
+        return normalizedValue.startsWith(denotation) ? normalizedValue : `${denotation}${normalizedValue}`;
+      }
+    });
+
     return turndownService.turndown(text);
   }