@opentiny/vue-renderless 3.6.8 → 3.8.0

package/dropdown-item/mf.js

@@ -0,0 +1,79 @@
+import "../chunk-PKUHTIDK.js";
+import { omitText } from "../common/string";
+const api = ["dataStore", "handleClick", "dataStore", "mouseEnter", "mouseLeave"];
+const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
+  const api2 = {};
+  const dropdownMenuVm = inject("dropdownMenuVm");
+  const multiStage = inject("multiStage");
+  let dataStore = reactive({
+    checkedStatus: dropdownMenuVm.checkedStatus,
+    multiStageMenu: "",
+    multiStage: "",
+    itemData: "",
+    itemLabel: "",
+    showContent: false,
+    dropdownMenuVm,
+    currentIndex: props.currentIndex,
+    level: props.level
+  });
+  if (multiStage) {
+    dataStore.multiStageMenu = true;
+  }
+  const handleClick = ({ dataStore: dataStore2, props: props2, vm: vm2 }) => () => {
+    if (props2.disabled) {
+      dataStore2.checkedStatus = false;
+      return;
+    }
+    dataStore2.itemData = props2.itemData;
+    dataStore2.itemLabel = "";
+    dataStore2.showContent = false;
+    if (props2.level === "2") {
+      dataStore2.currentIndex = `${props2.level}-${props2.currentIndex}`;
+    } else {
+      dataStore2.currentIndex = `${props2.currentIndex}`;
+    }
+    dispatch("TinyDropdown", "selectedIndex", [dataStore2.currentIndex]);
+    dispatch("TinyDropdownMenu", "menu-item-click", [
+      dataStore2.itemData,
+      vm2,
+      dataStore2.itemLabel,
+      dataStore2.showContent,
+      dataStore2.currentIndex
+    ]);
+  };
+  const mouseLeave = ({ dataStore: dataStore2 }) => () => {
+    dataStore2.itemLabel = "";
+    dataStore2.showContent = false;
+    dispatch("TinyDropdownMenu", "mouseleave-tips", [dataStore2.showContent, dataStore2.itemLabel]);
+  };
+  const mouseEnter = ({ vm: vm2, dataStore: dataStore2 }) => (e) => {
+    const dom = e.target;
+    const text = dom.textContent;
+    const font = window.getComputedStyle(dom).font;
+    const rect = dom.getBoundingClientRect();
+    const res = omitText(text, font, rect.width);
+    const tooltip = dataStore2.dropdownMenuVm.$refs.tooltip;
+    if (res.o) {
+      tooltip.state.referenceElm = dom;
+      tooltip.state.popperElm && (tooltip.state.popperElm.style.display = "none");
+      tooltip.doDestroy();
+      dataStore2.itemLabel = text;
+      if (vm2.$refs.level.scrollWidth > vm2.$refs.level.offsetWidth) {
+        dataStore2.showContent = true;
+      }
+      setTimeout(tooltip.updatePopper, 20);
+    }
+    dispatch("TinyDropdownMenu", "mouseenter-tips", [dataStore2.showContent, dataStore2.itemLabel]);
+  };
+  Object.assign(api2, {
+    dataStore,
+    handleClick: handleClick({ dataStore, props, vm }),
+    mouseEnter: mouseEnter({ dataStore, vm, props }),
+    mouseLeave: mouseLeave({ dataStore, props })
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/dropdown-menu/index.js

@@ -1,7 +1,7 @@
 import {
   __spreadValues
 } from "../chunk-PKUHTIDK.js";
-import userPopper from "@opentiny/vue-renderless/common/deps/vue-popper";
+import userPopper from "../common/deps/vue-popper";
 const toggleItem = (state) => (active, item) => {
   if (item.disabled) {
     return;
@@ -113,9 +113,38 @@ const useVuePopper = ({ api, props, hooks, instance, state }) => {
     }
   );
 };
+const mounted = ({ api, parent, state }) => () => {
+  parent.$on("menuselectedIndex", (selectedIndex) => {
+    state.selectedIndex = selectedIndex;
+  });
+  parent.$on("menu-item-click", api.handleMenuItemClick);
+  parent.$on("mouseenter-tips", (showContent, label) => {
+    state.label = label;
+    state.showContent = showContent;
+  });
+  parent.$on("mouseleave-tips", (showContent, label) => {
+    state.label = label;
+    state.showContent = showContent;
+  });
+};
+const handleMenuItemClick = ({ state, dispatch }) => (itemData, instance, label, showContent) => {
+  state.label = label;
+  state.showContent = showContent;
+  dispatch("TinyDropdown", "current-item-click", [itemData, instance]);
+};
+const handleMouseenter = ({ emit }) => ($event) => {
+  emit("mouseenter", $event);
+};
+const handleMouseleave = ({ emit }) => ($event) => {
+  emit("mouseleave", $event);
+};
 export {
   clickOutside,
   getScroller,
+  handleMenuItemClick,
+  handleMouseenter,
+  handleMouseleave,
+  mounted,
   toggleItem,
   updateOffset,
   useVuePopper

package/dropdown-menu/vue.js

@@ -1,19 +1,24 @@
 import "../chunk-PKUHTIDK.js";
-import { toggleItem, updateOffset, clickOutside, getScroller, useVuePopper } from "./index";
-const api = ["state", "toggleItem", "updateOffset", "clickOutside", "doDestroy"];
+import { toggleItem, updateOffset, clickOutside, getScroller, useVuePopper, mounted, handleMenuItemClick, handleMouseenter, handleMouseleave } from "./index";
+const api = ["state", "toggleItem", "updateOffset", "clickOutside", "doDestroy", "handleMouseenter", "handleMouseleave"];
 const renderless = (props, hooks, instance) => {
   const api2 = {};
-  const { reactive, provide } = hooks;
-  const { refs, nextTick, mode, vm } = instance;
+  const { reactive, provide, onMounted } = hooks;
+  const { nextTick, mode, vm, parent, dispatch, emit, refs } = instance;
   const state = reactive({
     offset: 0,
     scroller: null,
     children: [],
     size: "",
-    showPopper: false
+    showPopper: false,
+    label: "",
+    showContent: false,
+    selected: false,
+    selectedIndex: -1
   });
+  provide("dropdownMenu", vm);
+  provide("multiStage", props.multiStage);
   if (mode === "mobile") {
-    provide("dropdownMenu", vm);
     nextTick(() => {
       state.scroller = getScroller(refs.menu);
     });
@@ -24,8 +29,13 @@ const renderless = (props, hooks, instance) => {
     state,
     toggleItem: toggleItem(state),
     clickOutside: clickOutside({ props, refs, state }),
-    updateOffset: updateOffset({ props, state, refs })
+    updateOffset: updateOffset({ props, state, refs }),
+    mounted: mounted({ api: api2, parent, state }),
+    handleMouseenter: handleMouseenter({ emit }),
+    handleMouseleave: handleMouseleave({ emit }),
+    handleMenuItemClick: handleMenuItemClick({ dispatch, state })
   });
+  onMounted(api2.mounted);
   return api2;
 };
 export {

package/dynamic-scroller/index.js

@@ -0,0 +1,117 @@
+import "../chunk-PKUHTIDK.js";
+const computedItemsWithSize = ({ props, state }) => () => {
+  const result = [];
+  const { items, keyField } = props;
+  const { simpleArray, vscrollData } = state;
+  const { sizes } = vscrollData;
+  const l = items.length;
+  for (let i = 0; i < l; i++) {
+    const item = items[i];
+    const id = simpleArray ? i : item[keyField];
+    let size = sizes[id];
+    if (typeof size === "undefined" && !state.temporary.undefinedMap[id]) {
+      size = 0;
+    }
+    result.push({ item, id, size });
+  }
+  return result;
+};
+const onScrollerResize = ({ api, emit, vm }) => () => {
+  const scroller = vm.$refs.scroller;
+  if (scroller) {
+    api.forceUpdate();
+  }
+  emit("resize");
+};
+const onScrollerVisible = ({ emit, state }) => () => {
+  state.temporary.events.emit("vscroll:update", { force: false });
+  emit("visible");
+};
+const forceUpdate = (state) => (clear = false) => {
+  if (clear || state.simpleArray) {
+    state.vscrollData.sizes = {};
+  }
+  state.temporary.events.emit("vscroll:update", { force: true });
+};
+const prepareProvide = (state) => {
+  if (typeof ResizeObserver !== "undefined") {
+    state.temporary.resizeObserver = new ResizeObserver((entries) => {
+      requestAnimationFrame(() => {
+        if (!Array.isArray(entries))
+          return;
+        for (const entry of entries) {
+          if (entry.target && entry.target._onResize) {
+            let width, height;
+            if (entry.borderBoxSize) {
+              const resizeObserverSize = entry.borderBoxSize[0];
+              width = resizeObserverSize.inlineSize;
+              height = resizeObserverSize.blockSize;
+            } else {
+              width = entry.contentRect.width;
+              height = entry.contentRect.height;
+            }
+            entry.target._onResize(entry.target._id, width, height);
+          }
+        }
+      });
+    });
+  }
+};
+const watchItemsWithSize = ({ props, vm }) => (next, prev) => {
+  const scrollTop = vm.$el.scrollTop;
+  const length = Math.min(next.length, prev.length);
+  let prevActiveTop = 0;
+  let activeTop = 0;
+  for (let i = 0; i < length; i++) {
+    if (prevActiveTop >= scrollTop)
+      break;
+    prevActiveTop += prev[i].size || props.minItemSize;
+    activeTop += next[i].size || props.minItemSize;
+  }
+  const offset = activeTop - prevActiveTop;
+  if (offset === 0)
+    return;
+  vm.$el.scrollTop += offset;
+};
+const scrollToItem = (vm) => (index) => {
+  const scroller = vm.$refs.scroller;
+  if (scroller)
+    scroller.scrollToItem(index);
+};
+const getItemSize = ({ props, state }) => (item, index = void 0) => {
+  const id = state.simpleArray ? index === 0 || index ? index : props.items.indexOf(item) : item[props.keyField];
+  return state.vscrollData.sizes[id] || 0;
+};
+const scrollToBottom = ({ state, vm, nextTick }) => () => {
+  if (state.temporary.scrollingToBottom)
+    return;
+  state.temporary.scrollingToBottom = true;
+  const el = vm.$el;
+  const step = (el2) => el2.scrollTop = el2.scrollHeight + 5e3;
+  nextTick(() => {
+    step(el);
+    const cb = () => {
+      step(el);
+      requestAnimationFrame(() => {
+        step(el);
+        if (state.temporary.undefinedSizes === 0) {
+          state.temporary.scrollingToBottom = false;
+        } else {
+          requestAnimationFrame(cb);
+        }
+      });
+    };
+    requestAnimationFrame(cb);
+  });
+};
+export {
+  computedItemsWithSize,
+  forceUpdate,
+  getItemSize,
+  onScrollerResize,
+  onScrollerVisible,
+  prepareProvide,
+  scrollToBottom,
+  scrollToItem,
+  watchItemsWithSize
+};

package/dynamic-scroller/vue.js

@@ -0,0 +1,88 @@
+import "../chunk-PKUHTIDK.js";
+import {
+  computedItemsWithSize,
+  onScrollerResize,
+  onScrollerVisible,
+  forceUpdate,
+  prepareProvide,
+  watchItemsWithSize,
+  scrollToItem,
+  getItemSize,
+  scrollToBottom
+} from "./index";
+const api = [
+  "state",
+  "onScrollerResize",
+  "onScrollerVisible",
+  "forceUpdate",
+  "scrollToItem",
+  "getItemSize",
+  "scrollToBottom"
+];
+const addWatchers = ({ watch, props, api: api2, state }) => {
+  watch(
+    () => props.items,
+    () => api2.forceUpdate()
+  );
+  watch(
+    () => state.simpleArray,
+    (value) => state.vscrollData.simpleArray = value,
+    { immediate: true }
+  );
+  watch(
+    () => props.direction,
+    (value) => api2.forceUpdate(value)
+  );
+  watch(
+    () => props.itemsWithSize,
+    (next, prev) => api2.watchItemsWithSize(next, prev)
+  );
+};
+const renderless = (props, { reactive, computed, onActivated, onDeactivated, watch, provide, toRef, toRefs }, { vm, nextTick, emit }, { emitter }) => {
+  const state = reactive({
+    simpleArray: computed(() => props.items.length && typeof props.items[0] !== "object"),
+    itemsWithSize: computed(() => api2.computedItemsWithSize()),
+    vscrollData: {
+      active: true,
+      sizes: {},
+      keyField: props.keyField,
+      simpleArray: false
+    }
+  });
+  const api2 = {
+    state,
+    computedItemsWithSize: computedItemsWithSize({ props, state }),
+    onScrollerVisible: onScrollerVisible({ emit, state }),
+    forceUpdate: forceUpdate(state),
+    watchItemsWithSize: watchItemsWithSize({ props, vm }),
+    scrollToItem: scrollToItem(vm),
+    getItemSize: getItemSize({ props, state }),
+    scrollToBottom: scrollToBottom({ state, vm, nextTick })
+  };
+  Object.assign(api2, {
+    onScrollerResize: onScrollerResize({ api: api2, emit, vm })
+  });
+  state.temporary = {
+    updates: [],
+    undefinedSizes: 0,
+    undefinedMap: {},
+    events: emitter(),
+    resizeObserver: null
+  };
+  prepareProvide(state);
+  provide("vscrollData", toRef(state, "vscrollData"));
+  provide("vscrollParent", { props: toRefs(props), state: toRefs(state) });
+  provide("vscrollResizeObserver", state.temporary.resizeObserver);
+  onActivated(() => {
+    state.vscrollData.active = true;
+  });
+  onDeactivated(() => {
+    state.vscrollData.active = false;
+  });
+  addWatchers({ watch, props, api: api2, state });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/dynamic-scroller-item/index.js

@@ -0,0 +1,147 @@
+import "../chunk-PKUHTIDK.js";
+const computedId = ({ props, state }) => () => {
+  if (state.vscrollData.simpleArray)
+    return props.index;
+  if (Object.prototype.hasOwnProperty.call(props.item, state.vscrollData.keyField)) {
+    return props.item[state.vscrollData.keyField];
+  }
+  throw new Error(`[TINY Error][DynamicScrollerItem] keyField '${state.vscrollData.keyField}' not found in your item`);
+};
+const computedSize = (state) => () => state.vscrollData.sizes[state.id] || 0;
+const computedFinalActive = ({ props, state }) => () => props.active && state.vscrollData.active;
+const updateWatchData = ({ api, props, state, watch }) => () => {
+  if (props.watchData && !state.temporary.watchData) {
+    state.temporary.watchData = watch(props.item, api.onDataUpdate, { deep: true });
+  } else if (state.temporary.watchData) {
+    state.temporary.watchData();
+    state.temporary.watchData = null;
+  }
+};
+const watchId = ({ api, state, vm }) => (value, oldValue) => {
+  vm.$el._id = state.id;
+  if (!state.size) {
+    api.onDataUpdate();
+  }
+  if (state.temporary.sizeObserved) {
+    const oldSize = state.vscrollData.sizes[oldValue];
+    const size = state.vscrollData.sizes[value];
+    if (oldSize !== null && oldSize !== size) {
+      api.applySize(oldSize);
+    }
+  }
+};
+const onDataUpdate = (api) => () => {
+  api.updateSize();
+};
+const updateSize = ({ api, state }) => () => {
+  if (state.finalActive) {
+    if (state.temporary.pendingSizeUpdate !== state.id) {
+      state.temporary.pendingSizeUpdate = state.id;
+      state.temporary.forceNextVScrollUpdate = null;
+      state.temporary.pendingVScrollUpdate = null;
+      api.computeSize(state.id);
+    }
+  } else {
+    state.temporary.forceNextVScrollUpdate = state.id;
+  }
+};
+const computeSize = ({ api, nextTick, state, vm }) => (id) => {
+  nextTick(() => {
+    if (state.id === id) {
+      const width = vm.$el.offsetWidth;
+      const height = vm.$el.offsetHeight;
+      api.applyWidthHeight(width, height);
+    }
+    state.temporary.pendingSizeUpdate = null;
+  });
+};
+const applyWidthHeight = ({ api, state }) => (width, height) => {
+  const size = ~~(state.vscrollParent.props.direction === "vertical" ? height : width);
+  if (size && state.size !== size) {
+    api.applySize(size);
+  }
+};
+const applySize = ({ emit, props, state, vm }) => (size) => {
+  const { vscrollParent } = state;
+  if (vscrollParent.state.temporary.undefinedMap[state.id]) {
+    vscrollParent.state.temporary.undefinedSizes--;
+    vscrollParent.state.temporary.undefinedMap[state.id] = void 0;
+  }
+  vm.$set(state.vscrollData.sizes, state.id, size);
+  if (props.emitResize)
+    emit("resize", state.id);
+};
+const watchFinalActive = ({ api, state }) => (value) => {
+  if (!state.size) {
+    const { vscrollParent } = state;
+    if (value) {
+      if (!vscrollParent.state.temporary.undefinedMap[state.id]) {
+        vscrollParent.state.temporary.undefinedSizes++;
+        vscrollParent.state.temporary.undefinedMap[state.id] = true;
+      }
+    } else {
+      if (vscrollParent.state.temporary.undefinedMap[state.id]) {
+        vscrollParent.state.temporary.undefinedSizes--;
+        vscrollParent.state.temporary.undefinedMap[state.id] = false;
+      }
+    }
+  }
+  if (state.vscrollResizeObserver) {
+    if (value) {
+      api.observeSize();
+    } else {
+      api.unobserveSize();
+    }
+  } else if (value && state.temporary.pendingVScrollUpdate === state.id) {
+    api.updateSize();
+  }
+};
+const observeSize = ({ api, state, vm }) => () => {
+  if (!state.vscrollResizeObserver)
+    return;
+  if (state.temporary.sizeObserved)
+    return;
+  state.vscrollResizeObserver.observe(vm.$el);
+  vm.$el._id = state.id;
+  vm.$el._onResize = api.onResize;
+  state.temporary.sizeObserved = true;
+};
+const onResize = ({ api, state }) => (id, width, height) => {
+  if (state.id === id) {
+    api.applyWidthHeight(width, height);
+  }
+};
+const unobserveSize = ({ state, vm }) => () => {
+  if (!state.vscrollResizeObserver)
+    return;
+  if (!state.temporary.sizeObserved)
+    return;
+  state.vscrollResizeObserver.unobserve(vm.$el);
+  vm.$el._onResize = void 0;
+  state.temporary.sizeObserved = false;
+};
+const onVscrollUpdate = ({ api, state }) => ({ force }) => {
+  if (!state.finalActive && force) {
+    state.temporary.pendingVScrollUpdate = state.id;
+  }
+  if (state.temporary.forceNextVScrollUpdate === state.id || force || !state.size) {
+    api.updateSize();
+  }
+};
+export {
+  applySize,
+  applyWidthHeight,
+  computeSize,
+  computedFinalActive,
+  computedId,
+  computedSize,
+  observeSize,
+  onDataUpdate,
+  onResize,
+  onVscrollUpdate,
+  unobserveSize,
+  updateSize,
+  updateWatchData,
+  watchFinalActive,
+  watchId
+};

package/dynamic-scroller-item/vue.js

@@ -0,0 +1,92 @@
+import {
+  __spreadValues
+} from "../chunk-PKUHTIDK.js";
+import {
+  computedId,
+  computedSize,
+  computedFinalActive,
+  updateWatchData,
+  watchId,
+  onDataUpdate,
+  updateSize,
+  computeSize,
+  applyWidthHeight,
+  applySize,
+  watchFinalActive,
+  observeSize,
+  onResize,
+  unobserveSize,
+  onVscrollUpdate
+} from "./index";
+const api = ["state"];
+const addWatchers = ({ watch, props, api: api2, state }) => {
+  watch(
+    () => props.watchData,
+    () => api2.updateWatchData()
+  );
+  watch(
+    () => state.id,
+    (value, oldValue) => api2.watchId(value, oldValue)
+  );
+  watch(
+    () => state.finalActive,
+    (value) => api2.watchFinalActive(value)
+  );
+};
+const renderless = (props, { reactive, computed, onMounted, onBeforeUnmount, watch, inject, markRaw }, { vm, nextTick, emit }) => {
+  const vscrollData = inject("vscrollData");
+  const vscrollParent = inject("vscrollParent");
+  const vscrollResizeObserver = markRaw(inject("vscrollResizeObserver"));
+  const state = reactive({
+    id: computed(() => api2.computedId()),
+    size: computed(() => api2.computedSize()),
+    finalActive: computed(() => api2.computedFinalActive()),
+    vscrollData,
+    vscrollParent: { props: __spreadValues({}, vscrollParent.props), state: __spreadValues({}, vscrollParent.state) },
+    vscrollResizeObserver
+  });
+  const api2 = {
+    state,
+    computedId: computedId({ props, state }),
+    computedSize: computedSize(state),
+    computedFinalActive: computedFinalActive({ props, state }),
+    applySize: applySize({ emit, props, state, vm }),
+    unobserveSize: unobserveSize({ state, vm })
+  };
+  Object.assign(api2, {
+    updateWatchData: updateWatchData({ api: api2, props, state, watch }),
+    watchId: watchId({ api: api2, state, vm }),
+    onDataUpdate: onDataUpdate(api2),
+    updateSize: updateSize({ api: api2, state }),
+    computeSize: computeSize({ api: api2, nextTick, state, vm }),
+    applyWidthHeight: applyWidthHeight({ api: api2, state }),
+    watchFinalActive: watchFinalActive({ api: api2, state }),
+    observeSize: observeSize({ api: api2, state, vm }),
+    onResize: onResize({ api: api2, state }),
+    onVscrollUpdate: onVscrollUpdate({ api: api2, state })
+  });
+  state.temporary = {
+    forceNextVScrollUpdate: null
+  };
+  api2.updateWatchData();
+  for (const k in props.sizeDependencies) {
+    watch(() => props.sizeDependencies[k], api2.onDataUpdate);
+  }
+  state.vscrollParent.state.temporary.events.on("vscroll:update", api2.onVscrollUpdate);
+  onMounted(() => {
+    if (state.finalActive) {
+      api2.updateSize();
+      api2.observeSize();
+    }
+  });
+  onBeforeUnmount(() => {
+    state.vscrollParent.state.temporary.events.off("vscroll:update", api2.onVscrollUpdate);
+    api2.unobserveSize();
+  });
+  addWatchers({ watch, props, api: api2, state });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/espace/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { xss } from "@opentiny/vue-renderless/common";
+import { xss } from "../common";
 const getUserHref = ({ api, props }) => (item) => {
   const type = item.type ? String(item.type).toLocaleLowerCase() : "";
   const value = item.value ? String(item.value).toLocaleLowerCase() : "";

package/espace/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { init } from "@opentiny/vue-renderless/common/deps/eSpaceCtrl";
+import { init } from "../common/deps/eSpaceCtrl";
 import { getUserHref, getUserTitle, doUserAction, initEspaceLink, openEspace, testUID, soundEspace } from "./index";
 const api = ["getUserHref", "getUserTitle", "doUserAction", "initEspaceLink", "openEspace", "testUID", "soundEspace"];
 const renderless = (props, { reactive }, { service }) => {

package/exception/vue.js

@@ -1,12 +1,14 @@
 import "../chunk-PKUHTIDK.js";
 import { create, getMessage } from "./index";
 const api = ["state", "create"];
-const renderless = (props, { computed, reactive }, { t, emit }) => {
+const renderless = (props, { computed, reactive }, { t, emit }, { images }) => {
   const api2 = {
     create: create(emit),
     getMessage: getMessage({ props, t })
   };
   const state = reactive({
+    urlType: props.type,
+    images,
     message: computed(() => api2.getMessage({ props, t }))
   });
   api2.state = state;

package/fall-menu/index.js

@@ -1,8 +1,8 @@
 import "../chunk-PKUHTIDK.js";
-import { REFRESH_INTERVAL } from "@opentiny/vue-renderless/common";
-import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
-import PopupManager from "@opentiny/vue-renderless/common/deps/popup-manager";
-import { xss } from "@opentiny/vue-renderless/common/xss.js";
+import { REFRESH_INTERVAL } from "../common";
+import { on, off } from "../common/deps/dom";
+import PopupManager from "../common/deps/popup-manager";
+import { xss } from "../common/xss.js";
 const arrowClick = (state) => (opt) => {
   state.pager += opt;
 };