@opentinyvue/vue-renderless 3.21.0

package/dropdown-menu/index.js

@@ -0,0 +1,178 @@
+import {
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import userPopper from "../common/deps/vue-popper";
+const toggleItem = (state) => (active, item) => {
+  if (item.disabled) {
+    return;
+  }
+  if (item.type === "sort") {
+    if (!item.modelValue || item.modelValue === "desc") {
+      item.state.sort = "asc";
+      item.$emit("update:modelValue", "asc");
+      item.$emit("click", "asc");
+    } else {
+      item.state.sort = "desc";
+      item.$emit("update:modelValue", "desc");
+      item.$emit("click", "desc");
+    }
+  } else {
+    const singleton = state.children.length === 1 && item.state.showPopup;
+    state.children.forEach((item2, index) => {
+      if (index === active && !singleton) {
+        item2.toggle(true);
+      } else if (item2.state.showPopup) {
+        item2.toggle(false, { immediate: true });
+      }
+    });
+  }
+};
+const updateOffset = ({ props, state, vm }) => () => {
+  if (!vm.$refs.menu) {
+    return;
+  }
+  const rect = vm.$refs.menu.getBoundingClientRect();
+  if (props.direction === "down") {
+    state.offset = rect.bottom;
+  } else {
+    state.offset = window.innerHeight - rect.top;
+  }
+};
+const clickOutside = ({ props, state }) => () => {
+  if (props.closeOnClickOutside && props.closeOnClickOverlay) {
+    state.children.forEach((item) => {
+      item.type !== "filter" && item.toggle(false);
+    });
+  }
+};
+const getScroller = (el, root) => {
+  const overflowScrollReg = /scroll|auto/i;
+  let node = el;
+  let getComputedStyle = window.getComputedStyle;
+  while (node && node.tagName !== "HTML" && node.nodeType === 1 && node !== root) {
+    const { overflowY } = getComputedStyle(node);
+    if (overflowScrollReg.test(overflowY)) {
+      if (node.tagName !== "BODY") {
+        return node;
+      }
+      const { overflowY: htmlOverflowY } = getComputedStyle(node.parentNode);
+      if (overflowScrollReg.test(htmlOverflowY)) {
+        return node;
+      }
+    }
+    node = node.parentNode;
+  }
+  return root || null;
+};
+const useVuePopper = ({
+  api,
+  props,
+  hooks,
+  instance,
+  state,
+  dropdownVm,
+  designConfig
+}) => {
+  var _a, _b;
+  const { nextTick, onBeforeUnmount, onDeactivated, onMounted, reactive, toRefs, watch } = hooks;
+  const { emit, slots, vm, parent } = instance;
+  const designProps = {
+    placement: props.placement || ((_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.placement) || "bottom-end",
+    visibleArrow: props.visibleArrow || ((_b = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _b.visibleArrow) || false
+  };
+  const popper = userPopper({
+    emit,
+    nextTick,
+    onBeforeUnmount,
+    onDeactivated,
+    props: __spreadValues(__spreadValues({
+      popperOptions: { boundariesPadding: 0, gpuAcceleration: false },
+      offset: 0,
+      boundariesPadding: 5
+    }, props), designProps),
+    reactive,
+    vm,
+    slots,
+    toRefs,
+    watch
+  });
+  onMounted(() => {
+    if (!dropdownVm)
+      return;
+    if (popper.popperElm) {
+      dropdownVm.popperElm = popper.popperElm.value = vm.$el;
+      nextTick(() => {
+        if (popper.referenceElm) {
+          popper.referenceElm.value = dropdownVm.$el;
+        }
+      });
+      !props.multiStage && dropdownVm.initDomOperation();
+    }
+    if (dropdownVm.inheritWidth && popper.popperElm) {
+      dropdownVm.popperElm.style.minWidth = dropdownVm.$el.clientWidth + "px";
+    }
+  });
+  onBeforeUnmount(() => {
+    popper.destroyPopper("remove");
+    popper.popperElm = null;
+    popper.referenceElm = null;
+  });
+  api.doDestroy = popper.doDestroy;
+  state.size = (dropdownVm == null ? void 0 : dropdownVm.size) || "";
+  state.showPopper = popper.showPopper.value;
+  parent.$on("updatePopper", () => {
+    if (state.showPopper) {
+      popper.updatePopper();
+    }
+  });
+  parent.$on("visible", (value) => {
+    state.showPopper = value;
+    popper.showPopper.value = value;
+    if (state.showPopper) {
+      state.initShowPopper = true;
+    }
+  });
+  watch(
+    () => props.placement,
+    (value) => {
+      popper.currentPlacement.value = value;
+    }
+  );
+};
+const mounted = ({ api, parent, state }) => () => {
+  parent.$on("menu-selected-index", (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, vm, label, showContent, disabled }) => {
+  state.label = label;
+  state.showContent = showContent;
+  const data = { itemData, vm, disabled };
+  dispatch("TinyDropdown", "current-item-click", data);
+};
+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

@@ -0,0 +1,66 @@
+import "../chunk-G2ADBYYC.js";
+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, onMounted, inject } = hooks;
+  const { nextTick, mode, vm, parent, dispatch, emit, designConfig } = instance;
+  provide("dropdownMenuVm", vm);
+  provide("multiStage", props.multiStage);
+  const dropdownVm = inject("dropdownVm");
+  const state = reactive({
+    offset: 0,
+    scroller: null,
+    children: [],
+    size: "",
+    showPopper: false,
+    initShowPopper: !dropdownVm.lazyShowPopper,
+    // 辅助变量,
+    label: "",
+    showContent: false,
+    selected: false,
+    selectedIndex: -1,
+    canvasHeight: inject("change-size", null)
+  });
+  if (mode === "mobile") {
+    nextTick(() => {
+      state.scroller = getScroller(vm.$refs.menu);
+    });
+  } else {
+    useVuePopper({ api: api2, hooks, props, instance, state, dropdownVm, designConfig });
+  }
+  Object.assign(api2, {
+    state,
+    toggleItem: toggleItem(state),
+    clickOutside: clickOutside({ props, state }),
+    updateOffset: updateOffset({ props, state, vm }),
+    mounted: mounted({ api: api2, parent, state }),
+    handleMouseenter: handleMouseenter(emit),
+    handleMouseleave: handleMouseleave(emit),
+    handleMenuItemClick: handleMenuItemClick({ dispatch, state })
+  });
+  onMounted(api2.mounted);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/dynamic-scroller/index.js

@@ -0,0 +1,117 @@
+import "../chunk-G2ADBYYC.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-G2ADBYYC.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-G2ADBYYC.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-G2ADBYYC.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
+};