cbvirtua 1.0.0 → 1.0.2

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "cbvirtua": "^1.0.0"
+  }
 }

package/vue/ListItem.tsx

@@ -0,0 +1,64 @@
+/** @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.tsx

@@ -0,0 +1,291 @@
+/** @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

@@ -0,0 +1,48 @@
+.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

@@ -0,0 +1,78 @@
+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/l.less

@@ -0,0 +1,69 @@
+#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")
+//       ]
+//     }
+//   }
+// })
+