@7365admin1/layer-common 4.73.1-staging.463 → 4.73.1-staging.465

package/assets/css/primitives.css

@@ -818,6 +818,20 @@ select option {
   text-align: center;
 }
 
+/* The footer of a paging AppSelect. Same voice as the empty state - it is the
+   same kind of message about the list rather than an option in it - with a rule
+   above so it does not read as one more row to click. */
+.app-select__loading {
+  margin: 6px 0 0;
+  padding: 9px 8px;
+  border-top: 1px solid var(--border);
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--muted);
+  text-align: center;
+}
+
 .app-select__option {
   display: flex;
   align-items: center;

package/components/AppSelect.vue

@@ -53,7 +53,12 @@
       </div>
     </template>
 
-    <div class="app-select__menu" role="listbox">
+    <div
+      ref="singleMenu"
+      class="app-select__menu"
+      role="listbox"
+      @scroll.passive="onMenuScroll"
+    >
       <div v-if="searchable" class="app-select__search">
         <v-icon icon="mdi-magnify" size="16" />
         <input
@@ -83,6 +88,11 @@
       <p v-if="searchable && !visibleOptions.length" class="app-select__empty">
         {{ normalized.length ? "No matches" : "Nothing to choose from" }}
       </p>
+      <!-- In the list, not under the field: the wait belongs where the reader's
+           eye already is, at the end of what they just scrolled through. -->
+      <p v-if="loadingMore" class="app-select__loading" role="status">
+        Loading more...
+      </p>
     </div>
   </v-menu>
 
@@ -184,6 +194,34 @@ defineOptions({ inheritAttrs: false });
  */
 const model = defineModel<any>({ default: "" });
 
+/**
+ * ASKING FOR THE NEXT PAGE, FROM INSIDE THE LIST.
+ *
+ * A dropdown that pages should load as it is scrolled - a button under the
+ * field asks the reader to leave the list they are reading to fetch more of it.
+ * The menu is already the scroll container (`max-height: 280px; overflow-y:
+ * auto` in `primitives.css`), so the end of the list is the natural trigger.
+ */
+const emit = defineEmits<{ (e: "load-more"): void }>();
+
+/** How close to the end counts as the end. About one row and a half. */
+const LOAD_MORE_SLACK_PX = 48;
+
+const singleMenu = ref<HTMLElement | null>(null);
+/* Scroll fires per pixel. This makes the ask happen once per ARRIVAL at the
+   end, not once per event, and rearms when the list grows under the reader. */
+const askedAtBottom = ref(false);
+
+function onMenuScroll(event: Event) {
+  const el = event.target as HTMLElement | null;
+  if (!el || !props.hasMore || props.loadingMore) return;
+  const near = el.scrollHeight - el.scrollTop - el.clientHeight <= LOAD_MORE_SLACK_PX;
+  if (near && !askedAtBottom.value) emit("load-more");
+  askedAtBottom.value = near;
+}
+
+
+
 const props = defineProps({
   label: { type: String, default: "" },
   /** Strings, or the `{ title, value }` shape `v-select` already takes. */
@@ -204,6 +242,15 @@ const props = defineProps({
    * enough to read does not want a search field in front of it.
    */
   searchable: { type: Boolean, default: false },
+  /**
+   * MORE OPTIONS EXIST THAN ARE LOADED - see the `load-more` emit.
+   *
+   * Opt-in, and single-select only for now. A caller that leaves these alone
+   * behaves exactly as it did: no footer, no listener, no emit.
+   */
+  hasMore: { type: Boolean, default: false },
+  /** A page is on its way; shows the footer and stops further asking. */
+  loadingMore: { type: Boolean, default: false },
   searchPlaceholder: { type: String, default: "Search" },
 });
 
@@ -231,6 +278,24 @@ const visibleOptions = computed(() => {
   );
 });
 
+/*
+ * A page that does not fill the menu leaves nothing to scroll, and the reader
+ * would be stranded with no way to reach the rest. That is not hypothetical
+ * here: a page of ten whose rows are mostly filtered out by the caller can draw
+ * four options in a box built for eight. So whenever the list settles short of
+ * its own container, the next page is asked for straight away.
+ */
+watch(
+  () => [visibleOptions.value.length, props.hasMore, props.loadingMore, singleOpen.value],
+  async () => {
+    if (!props.hasMore || props.loadingMore || !singleOpen.value) return;
+    await nextTick();
+    const el = singleMenu.value;
+    if (el && el.scrollHeight <= el.clientHeight) emit("load-more");
+  },
+  { flush: "post" },
+);
+
 /* A stale term would hide the list the next time the popover opens, so it is
    dropped on every open - and the caret goes into the box, since opening a
    searchable select is almost always a prelude to typing. */