@v-c/overflow 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 antdv-community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Item.cjs

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const ResizeObserver = require("@v-c/resize-observer");
+const util = require("@v-c/util");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const UNDEFINED = void 0;
+const Item = /* @__PURE__ */ vue.defineComponent({
+  name: "OverflowItem",
+  inheritAttrs: false,
+  props: {
+    prefixCls: {
+      type: String,
+      required: true
+    },
+    item: Object,
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    style: Object,
+    renderItem: Function,
+    responsive: Boolean,
+    responsiveDisabled: Boolean,
+    itemKey: [String, Number],
+    registerSize: {
+      type: Function,
+      required: true
+    },
+    display: Boolean,
+    order: {
+      type: Number,
+      required: true
+    },
+    component: {
+      type: [String, Object, Function],
+      default: "div"
+    },
+    invalidate: Boolean
+  },
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const mergedHidden = vue.computed(() => props.responsive && !props.display);
+    function internalRegisterSize(width) {
+      const key = props.itemKey ?? props.order;
+      props.registerSize(key, width);
+    }
+    vue.onUnmounted(() => {
+      internalRegisterSize(null);
+    });
+    return () => {
+      const {
+        prefixCls,
+        invalidate,
+        item,
+        renderItem,
+        responsive,
+        responsiveDisabled,
+        order,
+        component: Component = "div",
+        style
+      } = props;
+      const children = slots.default?.();
+      const childNode = renderItem && item !== UNDEFINED ? renderItem(item, {
+        index: order
+      }) : children;
+      let overflowStyle;
+      if (!invalidate) {
+        overflowStyle = {
+          opacity: mergedHidden.value ? 0 : 1,
+          height: mergedHidden.value ? 0 : UNDEFINED,
+          overflowY: mergedHidden.value ? "hidden" : UNDEFINED,
+          order: responsive ? order : UNDEFINED,
+          pointerEvents: mergedHidden.value ? "none" : UNDEFINED,
+          position: mergedHidden.value ? "absolute" : UNDEFINED
+        };
+      }
+      const overflowProps = {};
+      if (mergedHidden.value) {
+        overflowProps["aria-hidden"] = true;
+      }
+      const itemNode = vue.createVNode(Component, vue.mergeProps({
+        "class": util.classNames(!invalidate && prefixCls, props.class),
+        "style": {
+          ...overflowStyle,
+          ...style
+        }
+      }, overflowProps, attrs), _isSlot(childNode) ? childNode : {
+        default: () => [childNode]
+      });
+      if (!responsive) {
+        return itemNode;
+      }
+      return vue.createVNode(ResizeObserver, {
+        "disabled": responsiveDisabled,
+        "onResize": ({
+          offsetWidth
+        }) => {
+          internalRegisterSize(offsetWidth);
+        }
+      }, {
+        default: () => itemNode
+      });
+    };
+  }
+});
+exports.default = Item;

package/dist/Item.d.ts

@@ -0,0 +1,73 @@
+import { Key, VueNode } from '@v-c/util/dist/type';
+import { CSSProperties, PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        required: true;
+    };
+    item: PropType<any>;
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    style: PropType<CSSProperties>;
+    renderItem: PropType<(item: any, info: {
+        index: number;
+    }) => VueNode>;
+    responsive: BooleanConstructor;
+    responsiveDisabled: BooleanConstructor;
+    itemKey: PropType<Key>;
+    registerSize: {
+        type: PropType<(key: Key, width: number | null) => void>;
+        required: true;
+    };
+    display: BooleanConstructor;
+    order: {
+        type: NumberConstructor;
+        required: true;
+    };
+    component: {
+        type: PropType<any>;
+        default: string;
+    };
+    invalidate: BooleanConstructor;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        required: true;
+    };
+    item: PropType<any>;
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    style: PropType<CSSProperties>;
+    renderItem: PropType<(item: any, info: {
+        index: number;
+    }) => VueNode>;
+    responsive: BooleanConstructor;
+    responsiveDisabled: BooleanConstructor;
+    itemKey: PropType<Key>;
+    registerSize: {
+        type: PropType<(key: Key, width: number | null) => void>;
+        required: true;
+    };
+    display: BooleanConstructor;
+    order: {
+        type: NumberConstructor;
+        required: true;
+    };
+    component: {
+        type: PropType<any>;
+        default: string;
+    };
+    invalidate: BooleanConstructor;
+}>> & Readonly<{}>, {
+    responsive: boolean;
+    responsiveDisabled: boolean;
+    display: boolean;
+    invalidate: boolean;
+    class: any;
+    component: any;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/Item.js

@@ -0,0 +1,111 @@
+import { defineComponent, computed, onUnmounted, createVNode, mergeProps, isVNode } from "vue";
+import ResizeObserver from "@v-c/resize-observer";
+import { classNames } from "@v-c/util";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const UNDEFINED = void 0;
+const Item = /* @__PURE__ */ defineComponent({
+  name: "OverflowItem",
+  inheritAttrs: false,
+  props: {
+    prefixCls: {
+      type: String,
+      required: true
+    },
+    item: Object,
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    style: Object,
+    renderItem: Function,
+    responsive: Boolean,
+    responsiveDisabled: Boolean,
+    itemKey: [String, Number],
+    registerSize: {
+      type: Function,
+      required: true
+    },
+    display: Boolean,
+    order: {
+      type: Number,
+      required: true
+    },
+    component: {
+      type: [String, Object, Function],
+      default: "div"
+    },
+    invalidate: Boolean
+  },
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const mergedHidden = computed(() => props.responsive && !props.display);
+    function internalRegisterSize(width) {
+      const key = props.itemKey ?? props.order;
+      props.registerSize(key, width);
+    }
+    onUnmounted(() => {
+      internalRegisterSize(null);
+    });
+    return () => {
+      const {
+        prefixCls,
+        invalidate,
+        item,
+        renderItem,
+        responsive,
+        responsiveDisabled,
+        order,
+        component: Component = "div",
+        style
+      } = props;
+      const children = slots.default?.();
+      const childNode = renderItem && item !== UNDEFINED ? renderItem(item, {
+        index: order
+      }) : children;
+      let overflowStyle;
+      if (!invalidate) {
+        overflowStyle = {
+          opacity: mergedHidden.value ? 0 : 1,
+          height: mergedHidden.value ? 0 : UNDEFINED,
+          overflowY: mergedHidden.value ? "hidden" : UNDEFINED,
+          order: responsive ? order : UNDEFINED,
+          pointerEvents: mergedHidden.value ? "none" : UNDEFINED,
+          position: mergedHidden.value ? "absolute" : UNDEFINED
+        };
+      }
+      const overflowProps = {};
+      if (mergedHidden.value) {
+        overflowProps["aria-hidden"] = true;
+      }
+      const itemNode = createVNode(Component, mergeProps({
+        "class": classNames(!invalidate && prefixCls, props.class),
+        "style": {
+          ...overflowStyle,
+          ...style
+        }
+      }, overflowProps, attrs), _isSlot(childNode) ? childNode : {
+        default: () => [childNode]
+      });
+      if (!responsive) {
+        return itemNode;
+      }
+      return createVNode(ResizeObserver, {
+        "disabled": responsiveDisabled,
+        "onResize": ({
+          offsetWidth
+        }) => {
+          internalRegisterSize(offsetWidth);
+        }
+      }, {
+        default: () => itemNode
+      });
+    };
+  }
+});
+export {
+  Item as default
+};

package/dist/Overflow.cjs

@@ -0,0 +1,321 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const ResizeObserver = require("@v-c/resize-observer");
+const util = require("@v-c/util");
+const context = require("./context.cjs");
+const useEffectState = require("./hooks/useEffectState.cjs");
+const Item = require("./Item.cjs");
+const RawItem = require("./RawItem.cjs");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const RESPONSIVE = "responsive";
+const INVALIDATE = "invalidate";
+function defaultRenderRest(omittedItems) {
+  return `+ ${omittedItems.length} ...`;
+}
+const overflowProps = {
+  prefixCls: {
+    type: String,
+    default: "vc-overflow"
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  renderItem: Function,
+  renderRawItem: Function,
+  itemKey: [String, Number, Function],
+  itemWidth: {
+    type: Number,
+    default: 10
+  },
+  maxCount: [Number, String],
+  renderRest: [Function, Object],
+  renderRawRest: Function,
+  prefix: {},
+  suffix: {},
+  component: [String, Object, Function],
+  itemComponent: [String, Object, Function],
+  onVisibleChange: Function,
+  ssr: String
+};
+const OverflowImpl = /* @__PURE__ */ vue.defineComponent({
+  name: "Overflow",
+  inheritAttrs: false,
+  props: overflowProps,
+  emits: ["visibleChange"],
+  setup(props, {
+    attrs,
+    slots,
+    emit
+  }) {
+    const notifyEffectUpdate = useEffectState.useBatcher();
+    const [containerWidth, setContainerWidth] = useEffectState.default(notifyEffectUpdate, null);
+    const mergedContainerWidth = vue.computed(() => containerWidth.value || 0);
+    const [itemWidths, setItemWidths] = useEffectState.default(notifyEffectUpdate, /* @__PURE__ */ new Map());
+    const [prevRestWidth, setPrevRestWidth] = useEffectState.default(notifyEffectUpdate, 0);
+    const [restWidth, setRestWidth] = useEffectState.default(notifyEffectUpdate, 0);
+    const [prefixWidth, setPrefixWidth] = useEffectState.default(notifyEffectUpdate, 0);
+    const [suffixWidth, setSuffixWidth] = useEffectState.default(notifyEffectUpdate, 0);
+    const suffixFixedStart = vue.ref(null);
+    const displayCount = vue.ref(null);
+    const mergedDisplayCount = vue.computed(() => {
+      if (displayCount.value === null && props.ssr === "full") {
+        return Number.MAX_SAFE_INTEGER;
+      }
+      return displayCount.value || 0;
+    });
+    const restReady = vue.ref(false);
+    const itemPrefixCls = vue.computed(() => `${props.prefixCls}-item`);
+    const mergedRestWidth = vue.computed(() => Math.max(prevRestWidth.value, restWidth.value));
+    const data = vue.computed(() => props.data ?? []);
+    const isResponsive = vue.computed(() => props.maxCount === RESPONSIVE);
+    const shouldResponsive = vue.computed(() => data.value.length && isResponsive.value);
+    const invalidate = vue.computed(() => props.maxCount === INVALIDATE);
+    const showRest = vue.computed(() => shouldResponsive.value || typeof props.maxCount === "number" && data.value.length > props.maxCount);
+    const mergedData = vue.computed(() => {
+      let items = data.value;
+      if (shouldResponsive.value) {
+        if (containerWidth.value === null && props.ssr === "full") {
+          items = data.value;
+        } else {
+          const mergedItemWidth = props.itemWidth ?? 10;
+          const maxLen = Math.min(data.value.length, mergedContainerWidth.value / mergedItemWidth);
+          items = data.value.slice(0, Math.floor(maxLen));
+        }
+      } else if (typeof props.maxCount === "number") {
+        items = data.value.slice(0, props.maxCount);
+      }
+      return items;
+    });
+    const omittedItems = vue.computed(() => {
+      if (shouldResponsive.value) {
+        return data.value.slice(mergedDisplayCount.value + 1);
+      }
+      return data.value.slice(mergedData.value.length);
+    });
+    const getKey = (item, index) => {
+      const {
+        itemKey
+      } = props;
+      if (typeof itemKey === "function") {
+        return itemKey(item);
+      }
+      if (itemKey != null) {
+        return item?.[itemKey] ?? index;
+      }
+      return index;
+    };
+    function updateDisplayCount(count, suffixFixedStartVal, notReady) {
+      if (displayCount.value === count && (suffixFixedStartVal === void 0 || suffixFixedStartVal === suffixFixedStart.value)) {
+        return;
+      }
+      displayCount.value = count;
+      if (!notReady) {
+        restReady.value = count < data.value.length - 1;
+        props.onVisibleChange?.(count);
+        emit("visibleChange", count);
+      }
+      if (suffixFixedStartVal !== void 0) {
+        suffixFixedStart.value = suffixFixedStartVal;
+      }
+    }
+    function onOverflowResize(_, element) {
+      setContainerWidth(element.clientWidth);
+    }
+    function registerSize(key, width) {
+      setItemWidths((origin) => {
+        const clone = new Map(origin || []);
+        if (width === null) {
+          clone.delete(key);
+        } else {
+          clone.set(key, width);
+        }
+        return clone;
+      });
+    }
+    function registerOverflowSize(_, width) {
+      setRestWidth(width ?? 0);
+      setPrevRestWidth(restWidth.value);
+    }
+    function registerPrefixSize(_, width) {
+      setPrefixWidth(width ?? 0);
+    }
+    function registerSuffixSize(_, width) {
+      setSuffixWidth(width ?? 0);
+    }
+    function getItemWidth(index) {
+      const key = getKey(mergedData.value[index], index);
+      return itemWidths.value?.get(key);
+    }
+    vue.watchEffect(() => {
+      const container = mergedContainerWidth.value;
+      const rest = mergedRestWidth.value;
+      const list = mergedData.value;
+      if (container && typeof rest === "number" && list) {
+        let totalWidth = prefixWidth.value + suffixWidth.value;
+        const len = list.length;
+        const lastIndex = len - 1;
+        if (!len) {
+          updateDisplayCount(0, null);
+          return;
+        }
+        for (let i = 0; i < len; i += 1) {
+          let currentItemWidth = getItemWidth(i);
+          if (props.ssr === "full") {
+            currentItemWidth = currentItemWidth || 0;
+          }
+          if (currentItemWidth === void 0) {
+            updateDisplayCount(i - 1, void 0, true);
+            break;
+          }
+          totalWidth += currentItemWidth;
+          if (
+            // Only one means `totalWidth` is the final width
+            lastIndex === 0 && totalWidth <= container || i === lastIndex - 1 && totalWidth + (getItemWidth(lastIndex) || 0) <= container
+          ) {
+            updateDisplayCount(lastIndex, null);
+            break;
+          } else if (totalWidth + rest > container) {
+            updateDisplayCount(i - 1, totalWidth - currentItemWidth - suffixWidth.value + restWidth.value);
+            break;
+          }
+        }
+        if ((props.suffix ?? slots.suffix?.()) && getItemWidth(0) + suffixWidth.value > container) {
+          suffixFixedStart.value = null;
+        }
+      }
+    }, {
+      flush: "post"
+    });
+    return () => {
+      const {
+        prefixCls = "vc-overflow",
+        component: Component = "div",
+        itemComponent
+      } = props;
+      const renderItem = slots?.renderItem ?? props?.renderItem;
+      const renderRawItem = slots?.renderRawItem ?? props?.renderRawItem;
+      const renderRest = slots?.renderRest ?? props?.renderRest;
+      const renderRawRest = slots?.renderRawRest ?? props?.renderRawRest;
+      let prefix = slots?.prefix ?? props?.prefix;
+      let suffix = slots?.suffix ?? props?.suffix;
+      if (typeof prefix === "function") {
+        prefix = prefix();
+      }
+      if (typeof suffix === "function") {
+        suffix = suffix();
+      }
+      const displayRest = restReady.value && !!omittedItems.value.length;
+      let suffixStyle = {};
+      if (suffixFixedStart.value !== null && shouldResponsive.value) {
+        suffixStyle = {
+          position: "absolute",
+          left: `${suffixFixedStart.value}px`,
+          top: 0
+        };
+      }
+      const itemSharedProps = {
+        prefixCls: itemPrefixCls.value,
+        responsive: shouldResponsive.value,
+        component: itemComponent,
+        invalidate: invalidate.value
+      };
+      const internalRenderItemNode = (item, index) => {
+        const key = getKey(item, index);
+        if (renderRawItem) {
+          let _slot;
+          return vue.createVNode(context.OverflowContextProvider, {
+            "key": key,
+            "value": {
+              ...itemSharedProps,
+              order: index,
+              item,
+              itemKey: key,
+              registerSize,
+              display: index <= mergedDisplayCount.value
+            }
+          }, _isSlot(_slot = renderRawItem(item, index)) ? _slot : {
+            default: () => [_slot]
+          });
+        }
+        return vue.createVNode(Item.default, vue.mergeProps(itemSharedProps, {
+          "order": index,
+          "key": key,
+          "item": item,
+          "renderItem": renderItem,
+          "itemKey": key,
+          "registerSize": registerSize,
+          "display": index <= mergedDisplayCount.value
+        }), null);
+      };
+      const restContextProps = {
+        order: displayRest ? mergedDisplayCount.value : Number.MAX_SAFE_INTEGER,
+        class: `${itemPrefixCls.value}-rest`,
+        registerSize: registerOverflowSize,
+        display: displayRest
+      };
+      const mergedRenderRestFn = renderRest ?? defaultRenderRest;
+      const restNode = () => {
+        if (renderRawRest) {
+          let _slot2;
+          return vue.createVNode(context.OverflowContextProvider, {
+            "value": {
+              ...itemSharedProps,
+              ...restContextProps
+            }
+          }, _isSlot(_slot2 = renderRawRest(omittedItems.value)) ? _slot2 : {
+            default: () => [_slot2]
+          });
+        }
+        return vue.createVNode(Item.default, vue.mergeProps(itemSharedProps, restContextProps), {
+          default: () => typeof mergedRenderRestFn === "function" ? mergedRenderRestFn(omittedItems.value) : mergedRenderRestFn
+        });
+      };
+      const {
+        class: classAttr,
+        style: styleAttr,
+        ...restAttrs
+      } = attrs;
+      const overflowNode = vue.createVNode(Component, vue.mergeProps({
+        "class": util.classNames(!invalidate.value && prefixCls, classAttr),
+        "style": styleAttr
+      }, restAttrs), {
+        default: () => [prefix && vue.createVNode(Item.default, vue.mergeProps(itemSharedProps, {
+          "responsive": isResponsive.value,
+          "responsiveDisabled": !shouldResponsive.value,
+          "order": -1,
+          "class": `${itemPrefixCls.value}-prefix`,
+          "registerSize": registerPrefixSize,
+          "display": true
+        }), {
+          default: () => prefix
+        }), mergedData.value.map(internalRenderItemNode), showRest.value ? restNode() : null, suffix && vue.createVNode(Item.default, vue.mergeProps(itemSharedProps, {
+          "responsive": isResponsive.value,
+          "responsiveDisabled": !shouldResponsive.value,
+          "order": mergedDisplayCount.value,
+          "class": `${itemPrefixCls.value}-suffix`,
+          "registerSize": registerSuffixSize,
+          "display": true,
+          "style": suffixStyle
+        }), {
+          default: () => suffix
+        }), slots.default?.()]
+      });
+      return isResponsive.value ? vue.createVNode(ResizeObserver, {
+        "onResize": onOverflowResize,
+        "disabled": !shouldResponsive.value
+      }, _isSlot(overflowNode) ? overflowNode : {
+        default: () => [overflowNode]
+      }) : overflowNode;
+    };
+  }
+});
+const Overflow = OverflowImpl;
+Overflow.Item = RawItem.default;
+Overflow.RESPONSIVE = RESPONSIVE;
+Overflow.INVALIDATE = INVALIDATE;
+exports.OverflowContextProvider = context.OverflowContextProvider;
+exports.default = Overflow;