cbvirtua 1.0.7 → 1.0.9

package/style/rtl.less

@@ -0,0 +1,68 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+.@{ant-prefix}-row {
+  &-rtl {
+    direction: rtl;
+  }
+}
+
+// mixin
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      right: percentage((@index / @grid-columns));
+      left: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      right: auto;
+      left: percentage((@index / @grid-columns));
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      margin-right: percentage((@index / @grid-columns));
+      margin-left: 0;
+    }
+  }
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+  .@{ant-prefix}-col-push-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      right: auto;
+    }
+  }
+
+  .@{ant-prefix}-col-pull-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      left: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      right: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      left: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      margin-right: 0;
+    }
+  }
+}

package/menu/wzc-option.vue

@@ -1,74 +0,0 @@
-<template>
-    <li class="wzc_option" :style="styleVar" @click="currentSelect">
-      <div class="wzc_option_dropdown_item">{{ label }}</div>
-    </li>
-  </template>
-  
-  <script>
-  export default {
-    name: "wzc_select",
-    components: {},
-    props: {
-      width: {
-        type: Number,
-        default: -1,
-      },
-      height: {
-        type: Number,
-        default: 34,
-      },
-      label: {
-        type: String,
-      },
-      optionid: {
-        type: String,
-      },
-    },
-    data() {
-      return {};
-    },
-    created() {},
-    mounted() {},
-    watch: {},
-    computed: {
-      styleVar() {
-        return {
-          "--option-height": this.height + "px",
-          "--option-width": this.width == -1? "100%" : this.width + "px",
-        };
-      },
-    },
-    methods: {
-      currentSelect() {
-        this.$parent.label = this.label;
-        this.$parent.optionid = this.optionid;
-        this.$parent.isListShow = !this.$parent.isListShow;
-        // this.$emit('slot-content', {label: this.label, optionid: this.optionid} );
-      }
-    },
-  };
-  </script>
-  <style scoped>
-  .wzc_option {
-    list-style: none;
-    height: var(--option-height);
-    width: var(--option-width);
-    
-  }
-  .wzc_option:hover {
-    color: #409eff;
-    font-weight: 700;
-    background-color: #f5f7fa;
-  }
-  .wzc_option_dropdown_item {
-    height: 100%;
-    width: calc(100% - 30px);
-    line-height: var(--option-height);
-    cursor: pointer;
-    margin: 0 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  
-  </style>

package/menu/wzc-select.vue

@@ -1,209 +0,0 @@
-<template>
-    <div class="wzc_select" :style="styleVar">
-        <div class="divSelect" :class="{ 'drop_down': isListShow }" ref="divSelect">
-            <div class="divSelectinput" @click="dropDownSelect">
-                <!-- 选中后的内容 -->
-                <div class="selectinfos" :title="label" :class="{ 'no_select': label == '请选择' }"> {{ label }} </div>
-                <!-- 三角形图标 -->
-                <i class="imgthree" :class="{ 'is-reverse': isListShow }">
-                    <svg t="1707138975702" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                        xmlns="http://www.w3.org/2000/svg" p-id="1444" width="16" height="16">
-                        <path d="M512 187.24L699.501 512 887 836.76H137L324.5 512z" p-id="1445"></path>
-                    </svg>
-                </i>
-            </div>
-        </div>
-        <!-- 下拉框列表 -->
-        <transition name="drop-down">
-            <div class="Selectlist" v-show="isListShow" ref="dropDown">
-                <div class="select_triangle"></div>
-                <ul class="wzc_option_list">
-                    <slot name="wzc_option"></slot>
-                </ul>
-            </div>
-        </transition>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'wzc_select',
-    components: {},
-    props: {
-        placeholder: {
-            type: String,
-            default: '请选择'
-        },
-        width: {
-            type: Number,
-            default: 180
-        },
-        height: {
-            type: Number,
-            default: 40
-        },
-    },
-    data() {
-        return {
-            label: '',
-            isListShow: false,
-            optionid: ''
-        };
-    },
-    created() {
-        this.label = this.placeholder;
-    },
-    mounted() {
-        let _this = this;
-        document.addEventListener("click", function (e) {
-            if (_this.$refs.divSelect) {
-                if (!!_this.$refs.divSelect.contains(e.target) || !!_this.$refs.dropDown.contains(e.target))
-                    return;
-                else
-                    _this.isListShow = false;
-            }
-        })
-    },
-    computed: {
-        styleVar() {
-            return {
-                '--select-height': this.height + 'px',
-                '--select-width': this.width + 'px'
-            }
-        }
-    },
-    methods: {
-        dropDownSelect() {
-            this.isListShow = !this.isListShow;
-        },
-    },
-};
-</script>
-<style scoped>
-.wzc_select {
-    border: 1px solid #E6E6E6;
-    border-radius: 5px;
-    height: var(--select-height);
-    width: var(--select-width);
-    line-height: var(--select-height);
-}
-
-.divSelect {
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-}
-
-.drop_down {
-    box-shadow: 0px 0px 6px #709DF7;
-}
-
-.divSelectinput {
-    width: calc(100% - 20px);
-    height: 100%;
-    margin: 0 5px 0 15px;
-    display: flex;
-}
-
-.selectinfos {
-    width: 87.5%;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.no_select {
-    color: #D3DCE6;
-}
-
-.imgthree {
-    width: 12.5%;
-    line-height: var(--select-height);
-    text-align: center;
-    transform: rotate(180deg);
-    transition: all 0.3s;
-}
-
-.imgthree svg {
-    width: 1em;
-    height: 1em;
-}
-
-.imgthree:before {
-    cursor: pointer;
-    color: #D3DCE6;
-}
-
-.imgthree.is-reverse {
-    transform: rotate(0deg);
-}
-
-.Selectlist {
-    margin-top: 10px;
-    z-index: 800;
-    position: relative;
-    background-color: #fff;
-}
-
-.wzc_option_list {
-    border-radius: 5px;
-    border: 1px solid #E4E7ED;
-    width: 100%;
-    padding: 3px 0px;
-    box-shadow: 0px 0px 6px #709DF7;
-    background-color: #fff;
-    margin: 0;
-}
-
-.select_triangle {
-    width: 14px;
-    height: 7px;
-    position: relative;
-    left: 15px;
-}
-
-.select_triangle::before {
-    position: absolute;
-    content: "";
-    left: 0px;
-    width: 0;
-    height: 0;
-    border-top: 0px solid transparent;
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    border-bottom: 8px solid #EBEEF5;
-}
-
-.select_triangle::after {
-    position: absolute;
-    left: 2px;
-    top: 2px;
-    content: "";
-    width: 0;
-    height: 0;
-    border-top: 0px solid transparent;
-    border-left: 7px solid transparent;
-    border-right: 7px solid transparent;
-    border-bottom: 8px solid #fff;
-}
-
-.drop-down-enter {
-    opacity: 0;
-    transform: translate(0px, -80px) scaleY(0.2);
-}
-
-.drop-down-leave-to {
-    opacity: 0;
-    transform: translate(0px, -80px) scaleY(0.2);
-}
-
-.drop-down-enter-active {
-    transition: all 0.5s ease-in;
-}
-
-.drop-down-leave-active {
-    transition: all 0.5s ease;
-}
-</style>
-

package/vue/ListItem.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx } from "vue/jsx-runtime";
-/** @jsxImportSource vue */
-import { ref, defineComponent, watch } from "vue";
-import { isRTLDocument } from "../core/environment";
-/**
- * @internal
- */
-export const ListItem = /*#__PURE__*/ defineComponent({
-    props: {
-        _children: { type: Object, required: true },
-        _resizer: { type: Object, 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();
-        // 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;
-            const style = {
-                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 (_jsx(Element, { ref: elementRef, style: style, children: children }));
-        };
-    },
-});

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 }) }));
-        };
-    },
-});