cbvirtua 1.0.6 → 1.0.8

package/vue/ListItem.tsx

@@ -1,64 +0,0 @@
-/** @jsxImportSource vue */
-import { ref, defineComponent, watch, StyleValue, PropType, VNode } from "vue";
-import { ItemResizeObserver } from "../core/resizer";
-import { isRTLDocument } from "../core/environment";
-
-/**
- * @internal
- */
-export const ListItem = /*#__PURE__*/ defineComponent({
-  props: {
-    _children: { type: Object as PropType<VNode>, required: true },
-    _resizer: { type: Object as PropType<ItemResizeObserver>, required: true },
-    _index: { type: Number, required: true },
-    _offset: { type: Number, required: true },
-    _hide: { type: Boolean },
-    _isHorizontal: { type: Boolean },
-    _element: { type: String, required: true },
-  },
-  setup(props) {
-    const elementRef = ref<HTMLDivElement>();
-
-    // The index may be changed if elements are inserted to or removed from the start of props.children
-    watch(
-      () => elementRef.value && props._index,
-      (_, __, onCleanup) => {
-        const cleanupObserver = props._resizer(elementRef.value!, props._index);
-        onCleanup(cleanupObserver);
-      },
-      {
-        flush: "post",
-      }
-    );
-
-    return () => {
-      const {
-        _children: children,
-        _offset: offset,
-        _hide: hide,
-        _element: Element,
-        _isHorizontal: isHorizontal,
-      } = props as Omit<typeof props, "_element"> & { _element: "div" };
-
-      const style: StyleValue = {
-        margin: 0,
-        padding: 0,
-        position: "absolute",
-        [isHorizontal ? "height" : "width"]: "100%",
-        [isHorizontal ? "top" : "left"]: "0px",
-        [isHorizontal ? (isRTLDocument() ? "right" : "left") : "top"]:
-          offset + "px",
-        visibility: hide ? "hidden" : "visible",
-      };
-      if (isHorizontal) {
-        style.display = "flex";
-      }
-
-      return (
-        <Element ref={elementRef} style={style}>
-          {children}
-        </Element>
-      );
-    };
-  },
-});

package/vue/VList.js

@@ -1,133 +0,0 @@
-import { jsx as _jsx } from "vue/jsx-runtime";
-/** @jsxImportSource vue */
-import { ref, onMounted, defineComponent, onUnmounted, watch, } from "vue";
-import { SCROLL_IDLE, UPDATE_SCROLL_STATE, UPDATE_SCROLL_EVENT, UPDATE_SCROLL_END_EVENT, UPDATE_SIZE_STATE, overscanEndIndex, overscanStartIndex, createVirtualStore, ACTION_ITEMS_LENGTH_CHANGE, getScrollSize, getMinContainerSize, } from "../core/store";
-import { createResizer } from "../core/resizer";
-import { createScroller } from "../core/scroller";
-import { ListItem } from "./ListItem";
-import { exists } from "../core/utils";
-const props = {
-    /**
-     * The data items rendered by this component.
-     */
-    data: { type: Array, required: true },
-    /**
-     * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
-     * @defaultValue 4
-     */
-    overscan: { type: Number, default: 4 },
-    /**
-     * Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.
-     *
-     * - If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases.
-     * - If set, you can opt out estimation and use the value as initial item size.
-     */
-    itemSize: Number,
-    /**
-     * While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
-     */
-    shift: Boolean,
-    /**
-     * If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
-     */
-    horizontal: Boolean,
-};
-export const VList = /*#__PURE__*/ defineComponent({
-    props: props,
-    emits: ["scroll", "scrollEnd", "rangeChange"],
-    setup(props, { emit, expose, slots }) {
-        var _a;
-        const isHorizontal = props.horizontal;
-        const rootRef = ref();
-        const store = createVirtualStore(props.data.length, (_a = props.itemSize) !== null && _a !== void 0 ? _a : 40, undefined, undefined, !props.itemSize);
-        const resizer = createResizer(store, isHorizontal);
-        const scroller = createScroller(store, isHorizontal);
-        const rerender = ref(store._getStateVersion());
-        const unsubscribeStore = store._subscribe(UPDATE_SCROLL_STATE + UPDATE_SIZE_STATE, () => {
-            rerender.value = store._getStateVersion();
-        });
-        const unsubscribeOnScroll = store._subscribe(UPDATE_SCROLL_EVENT, () => {
-            emit("scroll", store._getScrollOffset());
-        });
-        const unsubscribeOnScrollEnd = store._subscribe(UPDATE_SCROLL_END_EVENT, () => {
-            emit("scrollEnd");
-        });
-        onMounted(() => {
-            const root = rootRef.value;
-            if (!root)
-                return;
-            resizer._observeRoot(root);
-            scroller._observe(root);
-        });
-        onUnmounted(() => {
-            unsubscribeStore();
-            unsubscribeOnScroll();
-            unsubscribeOnScrollEnd();
-            resizer._dispose();
-            scroller._dispose();
-        });
-        watch(() => props.data.length, (count) => {
-            store._update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
-        });
-        watch([rerender, store._getJumpCount], ([, count], [, prevCount]) => {
-            if (count === prevCount)
-                return;
-            const jump = store._flushJump();
-            if (!jump)
-                return;
-            scroller._fixScrollJump(jump);
-        }, { flush: "post" });
-        watch([rerender, store._getRange], ([, [start, end]], [, [prevStart, prevEnd]]) => {
-            if (prevStart === start && prevEnd === end)
-                return;
-            emit("rangeChange", start, end);
-        }, { flush: "post" });
-        expose({
-            get scrollOffset() {
-                return store._getScrollOffset();
-            },
-            get scrollSize() {
-                return getScrollSize(store);
-            },
-            get viewportSize() {
-                return store._getViewportSize();
-            },
-            scrollToIndex: scroller._scrollToIndex,
-            scrollTo: scroller._scrollTo,
-            scrollBy: scroller._scrollBy,
-        });
-        return () => {
-            rerender.value;
-            const count = props.data.length;
-            const [startIndex, endIndex] = store._getRange();
-            const scrollDirection = store._getScrollDirection();
-            const totalSize = store._getTotalSize();
-            // https://github.com/inokawa/virtua/issues/252#issuecomment-1822861368
-            const minSize = getMinContainerSize(store);
-            const items = [];
-            for (let i = overscanStartIndex(startIndex, props.overscan, scrollDirection), j = overscanEndIndex(endIndex, props.overscan, scrollDirection, count); i <= j; i++) {
-                const e = slots.default(props.data[i])[0];
-                const key = e.key;
-                items.push(_jsx(ListItem, { _resizer: resizer._observeItem, _index: i, _offset: store._getItemOffset(i), _hide: store._isUnmeasuredItem(i), _element: "div", _children: e, _isHorizontal: isHorizontal }, exists(key) ? key : "_" + i));
-            }
-            return (_jsx("div", { ref: rootRef, style: {
-                    display: isHorizontal ? "inline-block" : "block",
-                    [isHorizontal ? "overflowX" : "overflowY"]: "auto",
-                    overflowAnchor: "none",
-                    contain: "strict",
-                    width: "100%",
-                    height: "100%",
-                }, children: _jsx("div", { style: {
-                        // contain: "content",
-                        overflowAnchor: "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
-                        flex: "none", // flex style on parent can break layout
-                        position: "relative",
-                        visibility: "hidden",
-                        width: isHorizontal ? totalSize + "px" : "100%",
-                        height: isHorizontal ? "100%" : totalSize + "px",
-                        [isHorizontal ? "minWidth" : "minHeight"]: minSize + "px",
-                        pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : "auto",
-                    }, children: items }) }));
-        };
-    },
-});

package/vue/VList.tsx

@@ -1,291 +0,0 @@
-/** @jsxImportSource vue */
-import {
-  ref,
-  onMounted,
-  defineComponent,
-  onUnmounted,
-  VNode,
-  watch,
-  ComponentOptionsMixin,
-  SlotsType,
-  ComponentOptionsWithObjectProps,
-  ComponentObjectPropsOptions,
-} from "vue";
-import {
-  SCROLL_IDLE,
-  UPDATE_SCROLL_STATE,
-  UPDATE_SCROLL_EVENT,
-  UPDATE_SCROLL_END_EVENT,
-  UPDATE_SIZE_STATE,
-  overscanEndIndex,
-  overscanStartIndex,
-  createVirtualStore,
-  ACTION_ITEMS_LENGTH_CHANGE,
-  getScrollSize,
-  getMinContainerSize,
-} from "../core/store";
-import { createResizer } from "../core/resizer";
-import { createScroller } from "../core/scroller";
-import { ScrollToIndexOpts } from "../core/types";
-import { ListItem } from "./ListItem";
-import { exists } from "../core/utils";
-
-interface VListHandle {
-  /**
-   * Get current scrollTop or scrollLeft.
-   */
-  readonly scrollOffset: number;
-  /**
-   * Get current scrollHeight or scrollWidth.
-   */
-  readonly scrollSize: number;
-  /**
-   * Get current offsetHeight or offsetWidth.
-   */
-  readonly viewportSize: number;
-  /**
-   * Scroll to the item specified by index.
-   * @param index index of item
-   * @param opts options
-   */
-  scrollToIndex(index: number, opts?: ScrollToIndexOpts): void;
-  /**
-   * Scroll to the given offset.
-   * @param offset offset from start
-   */
-  scrollTo(offset: number): void;
-  /**
-   * Scroll by the given offset.
-   * @param offset offset from current position
-   */
-  scrollBy(offset: number): void;
-}
-
-const props = {
-  /**
-   * The data items rendered by this component.
-   */
-  data: { type: Array, required: true },
-  /**
-   * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
-   * @defaultValue 4
-   */
-  overscan: { type: Number, default: 4 },
-  /**
-   * Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.
-   *
-   * - If not set, initial item sizes will be automatically estimated from measured sizes. This is recommended for most cases.
-   * - If set, you can opt out estimation and use the value as initial item size.
-   */
-  itemSize: Number,
-  /**
-   * While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
-   */
-  shift: Boolean,
-  /**
-   * If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
-   */
-  horizontal: Boolean,
-} satisfies ComponentObjectPropsOptions;
-
-export const VList = /*#__PURE__*/ defineComponent({
-  props: props,
-  emits: ["scroll", "scrollEnd", "rangeChange"],
-  setup(props, { emit, expose, slots }) {
-    const isHorizontal = props.horizontal;
-    const rootRef = ref<HTMLDivElement>();
-    const store = createVirtualStore(
-      props.data.length,
-      props.itemSize ?? 40,
-      undefined,
-      undefined,
-      !props.itemSize
-    );
-    const resizer = createResizer(store, isHorizontal);
-    const scroller = createScroller(store, isHorizontal);
-
-    const rerender = ref(store._getStateVersion());
-    const unsubscribeStore = store._subscribe(
-      UPDATE_SCROLL_STATE + UPDATE_SIZE_STATE,
-      () => {
-        rerender.value = store._getStateVersion();
-      }
-    );
-
-    const unsubscribeOnScroll = store._subscribe(UPDATE_SCROLL_EVENT, () => {
-      emit("scroll", store._getScrollOffset());
-    });
-    const unsubscribeOnScrollEnd = store._subscribe(
-      UPDATE_SCROLL_END_EVENT,
-      () => {
-        emit("scrollEnd");
-      }
-    );
-
-    onMounted(() => {
-      const root = rootRef.value;
-      if (!root) return;
-      resizer._observeRoot(root);
-      scroller._observe(root);
-    });
-    onUnmounted(() => {
-      unsubscribeStore();
-      unsubscribeOnScroll();
-      unsubscribeOnScrollEnd();
-      resizer._dispose();
-      scroller._dispose();
-    });
-
-    watch(
-      () => props.data.length,
-      (count) => {
-        store._update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
-      }
-    );
-
-    watch(
-      [rerender, store._getJumpCount],
-      ([, count], [, prevCount]) => {
-        if (count === prevCount) return;
-
-        const jump = store._flushJump();
-        if (!jump) return;
-
-        scroller._fixScrollJump(jump);
-      },
-      { flush: "post" }
-    );
-
-    watch(
-      [rerender, store._getRange],
-      ([, [start, end]], [, [prevStart, prevEnd]]) => {
-        if (prevStart === start && prevEnd === end) return;
-
-        emit("rangeChange", start, end);
-      },
-      { flush: "post" }
-    );
-
-    expose({
-      get scrollOffset() {
-        return store._getScrollOffset();
-      },
-      get scrollSize() {
-        return getScrollSize(store);
-      },
-      get viewportSize() {
-        return store._getViewportSize();
-      },
-      scrollToIndex: scroller._scrollToIndex,
-      scrollTo: scroller._scrollTo,
-      scrollBy: scroller._scrollBy,
-    } satisfies VListHandle);
-
-    return () => {
-      rerender.value;
-
-      const count = props.data.length;
-
-      const [startIndex, endIndex] = store._getRange();
-      const scrollDirection = store._getScrollDirection();
-      const totalSize = store._getTotalSize();
-
-      // https://github.com/inokawa/virtua/issues/252#issuecomment-1822861368
-      const minSize = getMinContainerSize(store);
-
-      const items: VNode[] = [];
-      for (
-        let i = overscanStartIndex(startIndex, props.overscan, scrollDirection),
-          j = overscanEndIndex(
-            endIndex,
-            props.overscan,
-            scrollDirection,
-            count
-          );
-        i <= j;
-        i++
-      ) {
-        const e = slots.default(props.data![i]!)[0]! as VNode;
-        const key = e.key;
-        items.push(
-          <ListItem
-            key={exists(key) ? key : "_" + i}
-            _resizer={resizer._observeItem}
-            _index={i}
-            _offset={store._getItemOffset(i)}
-            _hide={store._isUnmeasuredItem(i)}
-            _element="div"
-            _children={e}
-            _isHorizontal={isHorizontal}
-          />
-        );
-      }
-
-      return (
-        <div
-          ref={rootRef}
-          style={{
-            display: isHorizontal ? "inline-block" : "block",
-            [isHorizontal ? "overflowX" : "overflowY"]: "auto",
-            overflowAnchor: "none",
-            contain: "strict",
-            width: "100%",
-            height: "100%",
-          }}
-        >
-          <div
-            style={{
-              // contain: "content",
-              overflowAnchor: "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
-              flex: "none", // flex style on parent can break layout
-              position: "relative",
-              visibility: "hidden",
-              width: isHorizontal ? totalSize + "px" : "100%",
-              height: isHorizontal ? "100%" : totalSize + "px",
-              [isHorizontal ? "minWidth" : "minHeight"]: minSize + "px",
-              pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : "auto",
-            }}
-          >
-            {items}
-          </div>
-        </div>
-      );
-    };
-  },
-} as ComponentOptionsWithObjectProps<
-  typeof props,
-  VListHandle,
-  {},
-  {},
-  {},
-  ComponentOptionsMixin,
-  ComponentOptionsMixin,
-  {
-    /**
-     * Callback invoked whenever scroll offset changes.
-     * @param offset Current scrollTop or scrollLeft.
-     */
-    scroll: (offset: number) => void;
-    /**
-     * Callback invoked when scrolling stops.
-     */
-    scrollEnd: () => void;
-    /**
-     * Callback invoked when visible items range changes.
-     */
-    rangeChange: (
-      /**
-       * The start index of viewable items.
-       */
-      startIndex: number,
-      /**
-       * The end index of viewable items.
-       */
-      endIndex: number
-    ) => void;
-  },
-  string,
-  {},
-  string,
-  SlotsType<{ default: any }>
->);

package/vue/ec.css

@@ -1,48 +0,0 @@
-.ellipsis-tooltip {
-  z-index: 10;
-  display: inline-block;
-  background: #333333;
-  color: #ffffff;
-  padding: 5px 10px;
-  font-size: 13px;
-  border-radius: 4px;
-}
-
-.ellipsis-tooltip-arrow,
-.ellipsis-tooltip-arrow::before {
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  background: inherit;
-}
-
-.ellipsis-tooltip-arrow {
-  visibility: hidden;
-}
-
-.ellipsis-tooltip-arrow::before {
-  visibility: visible;
-  content: '';
-  transform: rotate(45deg);
-}
-
-.ellipsis-tooltip[data-popper-placement^='top'] > .ellipsis-tooltip-arrow {
-  bottom: -3px;
-}
-
-.ellipsis-tooltip[data-popper-placement^='bottom'] > .ellipsis-tooltip-arrow {
-  top: -3px;
-}
-
-.ellipsis-tooltip[data-popper-placement^='left'] > .ellipsis-tooltip-arrow {
-  right: -3px;
-}
-
-.ellipsis-tooltip[data-popper-placement^='right'] > .ellipsis-tooltip-arrow {
-  left: -3px;
-} 
-
-作者：JasonSubmara
-链接：https://juejin.cn/post/7278301902659190821
-来源：稀土掘金
-著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

package/vue/ec.js

@@ -1,78 +0,0 @@
-import { createPopper } from '@popperjs/core';
-
-const getPadding = el => {
-  const style = window.getComputedStyle(el, null);
-  const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
-  const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
-  const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
-  const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
-  return {
-    left: paddingLeft,
-    right: paddingRight,
-    top: paddingTop,
-    bottom: paddingBottom,
-  };
-};
-
-const renderContent = (target, parent) => {
-  const tooltipContent = document.createElement('div');
-  const arrowContent = document.createElement('div');
-  arrowContent.className = ['ellipsis-tooltip-arrow'].join(' ');
-  arrowContent.setAttribute('data-popper-arrow', 'true');
-  tooltipContent.innerText = target.dataset.title;
-  tooltipContent.setAttribute('role', 'tooltip');
-  tooltipContent.appendChild(arrowContent);
-  tooltipContent.className = ['ellipsis-tooltip'].join(' ');
-  parent.setAttribute('aria-describedby', 'tooltip');
-  parent.appendChild(tooltipContent);
-  return {
-    tooltipContent,
-  };
-};
-
-export function useEllipsisPopper(options = {}) {
-  const handleCellMouseEnter = event => {
-    const target = event.target;
-    const parent = target.parentNode;
-    let range = document.createRange();
-    range.setStart(target, 0);
-    range.setEnd(target, target.childNodes.length);
-    const rangeWidth = range.getBoundingClientRect().width;
-    range.detach();
-    const { left, right } = getPadding(target);
-    const horizontalPadding = left + right;
-    if (Math.floor(rangeWidth + horizontalPadding) > target.clientWidth) {
-      const { tooltipContent } = renderContent(target, parent);
-      const popperInstance = createPopper(parent, tooltipContent, {
-        placement: options.placement ?? 'top',
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [0, 8],
-            },
-          },
-        ],
-      });
-
-      const removePopper = () => {
-        popperInstance.destroy();
-        parent.removeChild(tooltipContent);
-        parent.removeAttribute('aria-describedby');
-        target.removeListener('mouseleave', removePopper);
-      };
-
-      target.addEventListener('mouseleave', removePopper);
-    }
-  };
-
-  return {
-    handleCellMouseEnter,
-  };
-}
-
-
-作者：JasonSubmara
-链接：https://juejin.cn/post/7278301902659190821
-来源：稀土掘金
-著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

package/vue/index.js

@@ -1,4 +0,0 @@
-/**
- * @module vue
- */
-export { VList } from "./VList";

package/vue/l.less

@@ -1,69 +0,0 @@
-#devices() {
-    .lenovo-1() {
-        @a: 1000px;
-        @b: 200px;
-    }
-}
-
-.rule(@content) {
-    @returns: #devices.lenovo-1();
-    @prop-1: @returns[@a];
-    @prop-2: @returns[@b];
-
-    @media (min-width: @prop-1) and (min-height: @prop-2) {
-        @content()
-    }
-}
-
-.a {
-
-    .rule({
-        color:#000
-    })
-}
-
-@devices: {
-    @lenovo: {
-        width: 1000px;
-        height: 800px;
-    }
-
-    @huawei: {
-        width: 1200px;
-        height: 800px;
-    }
-}
-
-.adapt(@deviceName, @content) {
-    @width: @devices[@@deviceName][width];
-    @height: @devices[@@deviceName][width];
-
-    @media (min-width: width) and (min-height: @height) {
-        @content()
-    }
-}
-
-.v {
-    .adapt(lenovo, {
-        .c {
-            color:#000;
-        }
-    })
-}
-
-// const { defineConfig } = require('@vue/cli-service')
-// const path = require('node:path')
-
-// module.exports = defineConfig({
-//   // 全局配置使用less变量
-//   pluginOptions: {
-//     'style-resources-loader': {
-//       preProcessor: 'less',
-//       patterns: [
-//           // 这个是加上自己的路径，注意此处不能使用别名路径
-//           path.resolve(__dirname, "./src/assets/css/lessGlobalVars.less")
-//       ]
-//     }
-//   }
-// })
-