glib-web 6.0.2 → 6.0.4

package/action.js

@@ -81,6 +81,7 @@ import ActionLogicsSet from "./actions/logics/set";
 import ActionLogicsRun from "./actions/logics/run";
 
 import ActionListsAppend from "./actions/lists/append";
+import ActionListsRemove from "./actions/lists/remove";
 
 import ActionBottomBannersOpen from "./actions/bottom_banners/open";
 import ActionBottomBannersClose from "./actions/bottom_banners/close";
@@ -182,6 +183,7 @@ const actions = {
   "logics/run": ActionLogicsRun,
 
   "lists/append": ActionListsAppend,
+  "lists/remove": ActionListsRemove,
 
   // deprecated
   "bottomBanners/open": ActionBottomBannersOpen,

package/actions/lists/remove.js

@@ -0,0 +1,23 @@
+import { nextTick } from "vue";
+import { realComponent } from "../../components/helper";
+
+export default class {
+  execute(spec, component) {
+    let target = component;
+
+    if (spec.targetId) {
+      target = realComponent(GLib.component.findById(spec.targetId));
+    }
+
+    if (!target) {
+      console.warn("Component ID not found", spec.targetId);
+      return;
+    }
+
+    target.action_removeRow(spec.rowId);
+
+    nextTick(() => {
+      GLib.action.execute(spec.onRemove, component);
+    });
+  }
+}

package/app.scss

@@ -188,4 +188,17 @@ blockquote, pre, ol, ul, dd {
       text-align: center;
     }
   }
-}
+}
+
+// A checkbox whose label carries a tooltip gets a "hover me for more info"
+// affordance (dotted underline + help cursor). Scoped to `.has-tooltip` so plain
+// checkboxes — the vast majority — render with no decoration. The marker class is
+// emitted by `$classes()` whenever the spec has a `tooltip`.
+.fields-check.has-tooltip {
+  .v-label {
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-underline-offset: 0.15em;
+    cursor: help;
+  }
+}

package/components/_internal_button.vue

@@ -13,33 +13,18 @@
 </template>
 
 <script>
-import { determineColor, determineDensity, determineVariant, determineSize } from '../utils/constant';
 import GlibBase from "./base/glibBase.js";
-
+import ButtonProps from "./mixins/buttonProps.js";
 
 export default {
   extends: GlibBase,
+  mixins: [ButtonProps],
   props: {
     spec: { type: Object, required: true },
     type: { type: String, default: "button" },
     hideTextOnXs: { type: Boolean },
     eventHandlers: { type: Object, default: null }
   },
-  computed: {
-    color() {
-      // return this.spec.color
-      return this.spec.color || determineColor(this.spec.styleClasses);
-    },
-    density() {
-      return determineDensity(this.spec.styleClasses);
-    },
-    size() {
-      return determineSize(this.spec.styleClasses);
-    },
-    variant() {
-      return determineVariant(this.spec.styleClasses, 'elevated');
-    }
-  },
   methods: {
     onClick(e) {
       if (this.type == 'submit') {
@@ -49,33 +34,6 @@ export default {
       e.stopPropagation(); // prevent event bubbling
 
       this.$onClick();
-    },
-    // $ready() {
-    //   this.$type.ifArray(this.spec.styleClasses, val => {
-    //     this.linkStyling = val.includes("link");
-    //   });
-
-    //   // const vm = this
-    //   // variants.forEach((value) => {
-    //   //   if (vm.$classes().includes(value)) {
-    //   //     vm.variant = value
-    //   //   }
-    //   // })
-    // },
-    styles() {
-      const styles = this.$styles();
-      // if (this.linkStyling) {
-      if (this.$classes().includes('link')) {
-        styles["color"] = styles["color"] || "#1976d2";
-      }
-      return styles;
-    },
-    // classes() {
-    //   const classes = this.$classes();
-    //   return classes;
-    // },
-    $registryEnabled() {
-      return false;
     }
   }
 };

package/components/_internal_icon.vue

@@ -13,7 +13,7 @@
 <script>
 import GlibBase from "./base/glibBase.js";
 import { vueApp } from "../store";
-import { determineColor } from '../utils/constant';
+import { determineColor, resolveIconName } from '../utils/constant';
 import { computed } from "vue";
 
 export default {
@@ -44,15 +44,10 @@ export default {
       return this.isBusy ? "autorenew" : this.name;
     },
     icon() {
-      if (this.spec.fa) {
-        return { name: `fab fa-${this.spec.fa.name}`, size: this.spec.fa.size };
-      } else if (this.spec.material) {
-        return { name: this.spec.material.name, size: this.spec.material.size };
-      } else {
-        // Fallback needed when logics_set clears/modifies the spec in ways that remove icon properties.
-        // Without this check, "Cannot read properties of undefined (reading 'name')" error occurs.
-        return { name: '', size: null };
-      }
+      return {
+        name: resolveIconName(this.spec) || '',
+        size: this.spec.fa?.size ?? this.spec.material?.size ?? null
+      };
     }
   }
 };

package/components/composable/listAutoload.js

@@ -33,11 +33,41 @@ function useListAutoload() {
     return proxy.$onVisibilityChange(el, callback);
   };
 
+  // When the list has a fixed height it scrolls internally; those `scroll` events
+  // don't bubble to `#page_body`, so the viewport-change listeners alone never
+  // re-evaluate the anchor visibility. Attach the handler to the list's own
+  // scroll container (the nearest scrollable ancestor of the anchor) as well.
+  const scrollContainer = () => {
+    let el = bottomAnchorEl.value || topAnchorEl.value;
+    while (el && el !== document.body && el.nodeType === 1) {
+      const overflowY = window.getComputedStyle(el).overflowY;
+      if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") {
+        return el;
+      }
+      el = el.parentElement;
+    }
+    return getProxy(instance)?.$el || null;
+  };
+
+  const addScrollContainerListener = (handler) => {
+    const el = scrollContainer();
+    if (!isFunction(handler) || !el || !isFunction(el.addEventListener)) return;
+    el.addEventListener("scroll", handler);
+  };
+
+  const removeScrollContainerListener = (handler) => {
+    const el = scrollContainer();
+    if (!isFunction(handler) || !el || !isFunction(el.removeEventListener)) return;
+    el.removeEventListener("scroll", handler);
+  };
+
   const enableInfiniteScrollIfApplicable = async (spec) => {
     await nextTick();
 
     removeViewportChangeListeners(topScrollHandler.value);
     removeViewportChangeListeners(bottomScrollHandler.value);
+    removeScrollContainerListener(topScrollHandler.value);
+    removeScrollContainerListener(bottomScrollHandler.value);
 
     const prevPage = spec?.prevPage || {};
     const nextPage = spec?.nextPage || {};
@@ -79,6 +109,7 @@ function useListAutoload() {
     );
 
     addViewportChangeListeners(topScrollHandler.value);
+    addScrollContainerListener(topScrollHandler.value);
   };
 
   const updateScrollAfterPrepending = (previousFirstRowIndex) => {
@@ -164,6 +195,7 @@ function useListAutoload() {
     );
 
     addViewportChangeListeners(bottomScrollHandler.value);
+    addScrollContainerListener(bottomScrollHandler.value);
   };
 
   const handleBottomScroll = (onScrollToBottom) => {

package/components/composable/tableAutoload.js

@@ -31,6 +31,35 @@ function useTableAutoload() {
     return proxy.$onVisibilityChange(el, callback);
   };
 
+  // When the table has a fixed height it scrolls internally; those `scroll` events
+  // don't bubble to `#page_body`, so the viewport-change listeners alone never
+  // re-evaluate the anchor visibility. Attach the handler to the table's own
+  // scroll container (the nearest scrollable ancestor of the anchor) as well.
+  const scrollContainer = () => {
+    const proxy = getProxy(instance);
+    let el = proxy?.$refs?.bottomAnchor || proxy?.$refs?.topAnchor;
+    while (el && el !== document.body && el.nodeType === 1) {
+      const overflowY = window.getComputedStyle(el).overflowY;
+      if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") {
+        return el;
+      }
+      el = el.parentElement;
+    }
+    return proxy?.$el || null;
+  };
+
+  const addScrollContainerListener = (handler) => {
+    const el = scrollContainer();
+    if (!isFunction(handler) || !el || !isFunction(el.addEventListener)) return;
+    el.addEventListener("scroll", handler);
+  };
+
+  const removeScrollContainerListener = (handler) => {
+    const el = scrollContainer();
+    if (!isFunction(handler) || !el || !isFunction(el.removeEventListener)) return;
+    el.removeEventListener("scroll", handler);
+  };
+
   const bottomAnchorStyles = computed(() => {
     return {
       display: infiniteScroll.value && nextPageUrl.value ? "block" : "none"
@@ -42,6 +71,8 @@ function useTableAutoload() {
 
     removeViewportChangeListeners(topScrollHandler.value);
     removeViewportChangeListeners(bottomScrollHandler.value);
+    removeScrollContainerListener(topScrollHandler.value);
+    removeScrollContainerListener(bottomScrollHandler.value);
 
     const proxy = getProxy(instance);
     if (!proxy) return;
@@ -81,6 +112,7 @@ function useTableAutoload() {
     );
 
     addViewportChangeListeners(topScrollHandler.value);
+    addScrollContainerListener(topScrollHandler.value);
   };
 
   const handleTopScroll = (onScrollToTop) => {
@@ -103,6 +135,7 @@ function useTableAutoload() {
     );
 
     addViewportChangeListeners(bottomScrollHandler.value);
+    addScrollContainerListener(bottomScrollHandler.value);
   };
 
   const handleBottomScroll = (onScrollToBottom) => {

package/components/fab.vue

@@ -1,21 +1,31 @@
 <template>
-  <div class="fab">
-    <common-button :spec="spec"></common-button>
-  </div>
+  <v-fab app :disabled="spec.disabled" :class="$classes()" :href="$href()" :variant="variant"
+    :rounded="$classes().includes('rounded') || null" :density="density" :size="size" :color="color"
+    :location="spec.location || 'bottom end'" :icon="iconValue" @click="$onClick">
+  </v-fab>
 </template>
 
 <script>
 import GlibBase from "./base/glibBase.js";
+import ButtonProps from "./mixins/buttonProps.js";
+import { resolveIconName } from "../utils/constant";
+
 export default {
   extends: GlibBase,
-  props: ['spec']
+  mixins: [ButtonProps],
+  props: {
+    spec: { type: Object, required: true }
+  },
+  computed: {
+    iconValue() {
+      return resolveIconName(this.spec.icon);
+    }
+  }
 };
 </script>
 
-<style scoped>
-.fab {
-  position: fixed;
-  right: 48px;
-  bottom: 24px;
+<style lang="scss" scoped>
+.v-fab.glib-clickable:not(.v-btn):not(.disabled):not(.no-hover):hover:before {
+  background: unset;
 }
 </style>

package/components/fields/_patternText.vue

@@ -4,10 +4,12 @@
     <!-- See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for why we need to use `pattern` -->
 
     <template v-else>
-      <v-text-field ref="field" :color="gcolor" :label="spec.label" :hint="spec.hint" :readonly="spec.readOnly"
-        :disabled="inputDisabled" :style="$styles()" :density="$classes().includes('compact') ? 'compact' : 'default'"
-        :clearable="spec.clearable" :variant="variant" validate-on="blur" persistent-placeholder
-        :placeholder="spec.placeholder" :value="format" @change="onChange" @click="openPicker" />
+      <v-text-field ref="field" v-model="inputText" :color="gcolor" :label="spec.label" :hint="spec.hint"
+        :readonly="spec.readOnly" :disabled="inputDisabled" :style="$styles()"
+        :density="$classes().includes('compact') ? 'compact' : 'default'" :clearable="spec.clearable"
+        :variant="variant" validate-on="blur" persistent-placeholder :placeholder="spec.placeholder"
+        :error-messages="parseError" append-inner-icon="calendar_today" @click:append-inner="openPicker"
+        @click:clear="onClear" @blur="parseTypedDate" @keydown.enter="parseTypedDate" />
       <input ref="nativePicker" v-model="fieldModel" class="native-picker" :type="type" :name="fieldName"
         :min="sanitizeValue(spec.min)" :max="sanitizeValue(spec.max)" :value="sanitizeValue(fieldModel)"
         @change="handleNativeChange" />
@@ -18,6 +20,7 @@
 
 <script>
 import { useDate } from "vuetify";
+import moment from "moment";
 import { sanitize } from "../composable/date";
 import { useGlibInput } from "../composable/form";
 import { useInputVariant } from "../composable/inputVariant";
@@ -25,6 +28,20 @@ import buttonDate from "./_buttonDate.vue";
 import { isPresent, isString, isFunction } from "../../utils/type";
 import GlibBase from "../base/glibBase.js";
 
+// Accepted formats for flexible parsing of typed/pasted dates. moment is lenient
+// (non-strict) so these cover the common cases (ISO, slash/dash variants, named
+// months) including the field's own displayed `fullDate` format.
+const PARSE_FORMATS = [
+  moment.ISO_8601,
+  "YYYY-MM-DD", "YYYY/MM/DD",
+  "MM/DD/YYYY", "M/D/YYYY", "MM-DD-YYYY",
+  "DD/MM/YYYY", "D/M/YYYY", "DD-MM-YYYY",
+  "MMM D YYYY", "MMM D, YYYY", "MMMM D YYYY", "MMMM D, YYYY",
+  "ddd, MMM DD, YYYY",
+  "YYYY-MM-DDTHH:mm", "YYYY-MM-DD HH:mm",
+  "MM/DD/YYYY HH:mm", "MM/DD/YYYY h:mm A"
+];
+
 export default {
   components: { buttonDate },
   extends: GlibBase,
@@ -40,23 +57,29 @@ export default {
 
     return { adapter, variant };
   },
+  data() {
+    return {
+      // Text shown in (and typed into) the editable field. Kept in sync with the
+      // formatted display value via the `format` watcher; parsed back into
+      // `fieldModel` on blur/enter.
+      inputText: undefined,
+      parseError: undefined
+    };
+  },
   computed: {
     format() {
-      if (!isPresent(this.fieldModel)) return;
-      if (!isPresent(this.spec.format)) {
-        switch (this.type) {
-          case 'date':
-            return this.adapter.format(this.fieldModel, 'fullDate');
-
-          case 'datetime-local':
-            return this.adapter.format(this.fieldModel, 'keyboardDateTime24h');
-
-          default:
-            return this.adapter.format(this.fieldModel, 'keyboardDateTime24h');
-        }
+      return this.formatValue(this.fieldModel);
+    }
+  },
+  watch: {
+    format: {
+      immediate: true,
+      handler(val) {
+        // Reflect external changes (native picker, initial value, clearing) into
+        // the visible text. Does not fire while typing, since `fieldModel` only
+        // changes once the typed text is parsed.
+        this.inputText = isPresent(val) ? val : undefined;
       }
-
-      return this.adapter.format(this.fieldModel, this.spec.format);
     }
   },
   methods: {
@@ -68,6 +91,23 @@ export default {
         return sanitize(val, this.type, timeZone);
       }
     },
+    formatValue(val) {
+      if (!isPresent(val)) return;
+      if (!isPresent(this.spec.format)) {
+        switch (this.type) {
+          case 'date':
+            return this.adapter.format(val, 'fullDate');
+
+          case 'datetime-local':
+            return this.adapter.format(val, 'keyboardDateTime24h');
+
+          default:
+            return this.adapter.format(val, 'keyboardDateTime24h');
+        }
+      }
+
+      return this.adapter.format(val, this.spec.format);
+    },
     openPicker() {
       if (this.inputDisabled || this.spec.readOnly) return;
 
@@ -86,7 +126,48 @@ export default {
         picker.click();
       }
     },
-    onChange() {
+    parseTypedDate() {
+      const text = isString(this.inputText) ? this.inputText.trim() : this.inputText;
+
+      // Empty input clears the value (also reached when typing then deleting).
+      if (!isPresent(text) || text === '') {
+        this.onClear();
+        return;
+      }
+
+      const parsed = moment(text, PARSE_FORMATS);
+      if (!parsed.isValid()) {
+        this.parseError = 'Invalid date';
+        return;
+      }
+
+      // Pass '' as the time zone so the typed wall-clock date is preserved rather
+      // than shifted, matching `handleNativeChange`. `sanitizeValue` slices it to
+      // the field's storage format (YYYY-MM-DD for date, etc.).
+      const value = this.sanitizeValue(parsed.toISOString(true), '');
+
+      // Enforce the same min/max the native picker honours. Sanitized values share
+      // a comparable per-type format, so lexicographic comparison reflects order.
+      const min = this.sanitizeValue(this.spec.min);
+      const max = this.sanitizeValue(this.spec.max);
+      if (isPresent(min) && value < min) {
+        this.parseError = `Date must be on or after ${this.formatValue(min)}`;
+        return;
+      }
+      if (isPresent(max) && value > max) {
+        this.parseError = `Date must be on or before ${this.formatValue(max)}`;
+        return;
+      }
+
+      this.parseError = undefined;
+      this.fieldModel = value;
+      this.inputText = this.format;
+      this.$executeOnChange();
+    },
+    onClear() {
+      this.parseError = undefined;
+      this.inputText = undefined;
+      this.fieldModel = undefined;
       this.$executeOnChange();
     },
     handleNativeChange(event) {

package/components/fields/_select.vue

@@ -6,7 +6,7 @@
       :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
-      :menu-props="{ maxWidth: 0 }" @update:modelValue="onChange" @focus="focused = true" @blur="focused = false">
+      :menu-props="{ maxWidth: 0 }" :custom-filter="filterBySubtitle" @update:modelValue="onChange" @focus="focused = true" @blur="focused = false">
 
       <template #item="{ props, item }">
         <v-list-subheader v-if="item.type == 'view'">
@@ -381,6 +381,13 @@ export default {
         triggerOnChange(containerEl);
       }
     },
+    filterBySubtitle(value, query, item) {
+      const q = (query || '').toString().toLowerCase();
+      if (!q) return true;
+      const text = (value || '').toString().toLowerCase();
+      const subtitle = (item?.raw?.subtitle || '').toString().toLowerCase();
+      return text.includes(q) || subtitle.includes(q);
+    },
     removeItem(item) {
       // fieldModel may not be an array when useChips is true but multiple is false.
       // This can happen when spec.useChips is explicitly set to true while spec.multiple is false.

package/components/fields/text.vue

@@ -7,7 +7,7 @@
       :suffix="spec.rightText" :min="spec.min" :max="spec.max" :autofocus="spec.autoFocus || false" validate-on="blur"
       :variant="variant" persistent-placeholder :clearable="spec.clearable" :rounded="spec.rounded"
       :autocomplete="spec.autocomplete" @click:appendInner="onRightIconClick" @input="onChange"
-      @keyup="$onTyping({ duration: 2000 })" @wheel.prevent />
+      @keyup="$onTyping({ duration: 2000 })" @wheel="onWheel" />
   </div>
 </template>
 
@@ -131,6 +131,17 @@ export default {
     action_focus() {
       this.$refs.field.focus();
     },
+    onWheel() {
+      // Only number inputs change their value on wheel scroll, and only while
+      // focused. Blur the focused number input so the value stays put while the
+      // wheel event still bubbles up and scrolls the page. All other field types
+      // (and unfocused number fields) are left untouched so the page can scroll.
+      if (this.config.type !== "number") return;
+      const input = this.$refs.field?.$el?.querySelector("input");
+      if (input && document.activeElement === input) {
+        input.blur();
+      }
+    },
     onChange: eventFiltering.debounce(function () {
       this.$executeOnChange();
     }, 300),

package/components/mixins/buttonProps.js

@@ -0,0 +1,30 @@
+import { determineColor, determineDensity, determineVariant, determineSize } from '../../utils/constant';
+
+export default {
+  computed: {
+    color() {
+      return this.spec.color || determineColor(this.spec.styleClasses);
+    },
+    density() {
+      return determineDensity(this.spec.styleClasses);
+    },
+    size() {
+      return determineSize(this.spec.styleClasses);
+    },
+    variant() {
+      return determineVariant(this.spec.styleClasses, 'elevated');
+    }
+  },
+  methods: {
+    styles() {
+      const styles = this.$styles();
+      if (this.$classes().includes('link')) {
+        styles["color"] = styles["color"] || "#1976d2";
+      }
+      return styles;
+    },
+    $registryEnabled() {
+      return false;
+    }
+  }
+};

package/components/mixins/longClick.js

@@ -1,13 +1,8 @@
 // From https://github.com/ittus/vue-long-click
 export default ({ delay = 400, interval = 50 }) => ({
-  bind: function(el, binding, vNode) {
+  beforeMount: function(el, binding) {
     if (typeof binding.value !== "function") {
-      const compName = vNode.context.name;
-      let warn = `[longclick:] provided expression '${binding.expression}' is not a function, but has to be`;
-      if (compName) {
-        warn += `Found in component '${compName}' `;
-      }
-      console.warn(warn)  
+      console.warn(`[longclick:] provided value is not a function`);
       return;
     }
 
@@ -48,9 +43,20 @@ export default ({ delay = 400, interval = 50 }) => ({
       binding.value(e);
     };
 
+    el._longClickStart = start;
+    el._longClickCancel = cancel;
+
     ["mousedown", "touchstart"].forEach(e => el.addEventListener(e, start));
     ["click", "mouseup", "touchend", "touchcancel"].forEach(e => {
       el.addEventListener(e, cancel);
     });
+  },
+  unmounted: function(el) {
+    if (el._longClickStart) {
+      ["mousedown", "touchstart"].forEach(e => el.removeEventListener(e, el._longClickStart));
+    }
+    if (el._longClickCancel) {
+      ["click", "mouseup", "touchend", "touchcancel"].forEach(e => el.removeEventListener(e, el._longClickCancel));
+    }
   }
 });

package/components/mixins/scrolling.js

@@ -13,10 +13,10 @@ export default {
         rect.left >= 0 &&
         rect.bottom <=
           (window.innerHeight ||
-            document.documentElement.clientHeight) /*or $(window).height() */ &&
+            document.documentElement.clientHeight) + 2 /*or $(window).height() */ &&
         rect.right <=
           (window.innerWidth ||
-            document.documentElement.clientWidth) /*or $(window).width() */
+            document.documentElement.clientWidth) + 2 /*or $(window).width() */
       );
     },
     // From https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433

package/components/mixins/styles.js

@@ -301,6 +301,14 @@ export default {
         classes.push("glib-clickable")
       );
 
+      // Marker for elements that carry a tooltip. The tooltip itself is wired up
+      // via JS hover/click listeners and leaves no other trace in the DOM, so this
+      // class is the only hook consumers have to style a "this has a tooltip"
+      // affordance (e.g. a dotted underline) scoped to elements that actually have one.
+      Utils.type.ifObject(properties.tooltip, () =>
+        classes.push("has-tooltip")
+      );
+
       // if (properties.readOnly) {
       //   classes.push("glib-input-disabled");
       // }

package/components/panels/custom.vue

@@ -44,15 +44,18 @@ export default {
   computed: {
     template() {
       const name = `template-${this.spec.template.replace("/", "-")}`;
-      const strict = true;
-      if (strict) {
+
+      // Built-in templates registered locally on this component.
+      if (this.$options.components[name]) {
         return name;
-      } else {
-        if (getCurrentInstance().appContext.components[name]) {
-          return name;
-        }
-        return "template-unsupported";
       }
+
+      // Project-defined templates registered globally as `template-<name>`.
+      if (getCurrentInstance().appContext.components[name]) {
+        return name;
+      }
+
+      return "template-unsupported";
     },
     contentSpec() {
       const onClick = this.spec.onClick ? { onClick: this.spec.onClick } : {};