@v-c/overflow 1.0.2 → 1.0.4-beta.1

package/dist/Overflow.js

@@ -154,7 +154,7 @@ var Overflow = /* @__PURE__ */ defineComponent({
 						break;
 					}
 					totalWidth += currentItemWidth;
-					if (lastIndex === 0 && totalWidth <= container || i === lastIndex - 1 && totalWidth + (getItemWidth(lastIndex) || 0) <= container) {
+					if (lastIndex === 0 && totalWidth <= container || i === lastIndex - 1 && totalWidth + getItemWidth(lastIndex) <= container) {
 						updateDisplayCount(lastIndex, null);
 						break;
 					} else if (totalWidth + rest > container) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/overflow",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.0.4-beta.1",
   "description": "overflow",
   "publishConfig": {
     "access": "public"
@@ -10,7 +10,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@v-c/resize-observer": "^1.0.8",
-    "@v-c/util": "^1.0.9"
+    "@v-c/util": "^1.0.17"
   },
   "scripts": {
     "build": "vite build",

package/dist/Item.cjs

@@ -1,92 +0,0 @@
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-let vue = require("vue");
-let _v_c_resize_observer = require("@v-c/resize-observer");
-_v_c_resize_observer = require_rolldown_runtime.__toESM(_v_c_resize_observer);
-let _v_c_util = require("@v-c/util");
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
-}
-var UNDEFINED = void 0;
-var Item_default = /* @__PURE__ */ (0, 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 = (0, vue.computed)(() => props.responsive && !props.display);
-		function internalRegisterSize(width) {
-			const key = props.itemKey ?? props.order;
-			props.registerSize(key, width);
-		}
-		(0, 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 = (0, vue.createVNode)(Component, (0, vue.mergeProps)({
-				"class": (0, _v_c_util.classNames)(!invalidate && prefixCls, props.class),
-				"style": {
-					...overflowStyle,
-					...style
-				}
-			}, overflowProps, attrs), _isSlot(childNode) ? childNode : { default: () => [childNode] });
-			if (!responsive) return itemNode;
-			return (0, vue.createVNode)(_v_c_resize_observer.default, {
-				"disabled": responsiveDisabled,
-				"onResize": ({ offsetWidth }) => {
-					internalRegisterSize(offsetWidth);
-				}
-			}, { default: () => itemNode });
-		};
-	}
-});
-exports.default = Item_default;

package/dist/Overflow.cjs

@@ -1,273 +0,0 @@
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-const require_context = require("./context.cjs");
-const require_useEffectState = require("./hooks/useEffectState.cjs");
-const require_Item = require("./Item.cjs");
-const require_RawItem = require("./RawItem.cjs");
-let vue = require("vue");
-let _v_c_resize_observer = require("@v-c/resize-observer");
-_v_c_resize_observer = require_rolldown_runtime.__toESM(_v_c_resize_observer);
-let _v_c_util = require("@v-c/util");
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
-}
-var RESPONSIVE = "responsive";
-var INVALIDATE = "invalidate";
-function defaultRenderRest(omittedItems) {
-	return `+ ${omittedItems.length} ...`;
-}
-var Overflow = /* @__PURE__ */ (0, vue.defineComponent)({
-	name: "Overflow",
-	inheritAttrs: false,
-	props: {
-		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
-	},
-	emits: ["visibleChange"],
-	setup(props, { attrs, slots, emit }) {
-		const notifyEffectUpdate = require_useEffectState.useBatcher();
-		const [containerWidth, setContainerWidth] = require_useEffectState.default(notifyEffectUpdate, null);
-		const mergedContainerWidth = (0, vue.computed)(() => containerWidth.value || 0);
-		const [itemWidths, setItemWidths] = require_useEffectState.default(notifyEffectUpdate, /* @__PURE__ */ new Map());
-		const [prevRestWidth, setPrevRestWidth] = require_useEffectState.default(notifyEffectUpdate, 0);
-		const [restWidth, setRestWidth] = require_useEffectState.default(notifyEffectUpdate, 0);
-		const [prefixWidth, setPrefixWidth] = require_useEffectState.default(notifyEffectUpdate, 0);
-		const [suffixWidth, setSuffixWidth] = require_useEffectState.default(notifyEffectUpdate, 0);
-		const suffixFixedStart = (0, vue.ref)(null);
-		const displayCount = (0, vue.ref)(null);
-		const mergedDisplayCount = (0, vue.computed)(() => {
-			if (displayCount.value === null && props.ssr === "full") return Number.MAX_SAFE_INTEGER;
-			return displayCount.value || 0;
-		});
-		const restReady = (0, vue.ref)(false);
-		const itemPrefixCls = (0, vue.computed)(() => `${props.prefixCls}-item`);
-		const mergedRestWidth = (0, vue.computed)(() => Math.max(prevRestWidth.value, restWidth.value));
-		const data = (0, vue.computed)(() => props.data ?? []);
-		const isResponsive = (0, vue.computed)(() => props.maxCount === RESPONSIVE);
-		const shouldResponsive = (0, vue.computed)(() => data.value.length && isResponsive.value);
-		const invalidate = (0, vue.computed)(() => props.maxCount === INVALIDATE);
-		const showRest = (0, vue.computed)(() => shouldResponsive.value || typeof props.maxCount === "number" && data.value.length > props.maxCount);
-		const mergedData = (0, 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 = (0, 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);
-		}
-		(0, 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 (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 (0, vue.createVNode)(require_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 (0, vue.createVNode)(require_Item.default, (0, 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 (0, vue.createVNode)(require_context.OverflowContextProvider, { "value": {
-						...itemSharedProps,
-						...restContextProps
-					} }, _isSlot(_slot2 = renderRawRest(omittedItems.value)) ? _slot2 : { default: () => [_slot2] });
-				}
-				return (0, vue.createVNode)(require_Item.default, (0, vue.mergeProps)(itemSharedProps, restContextProps), { default: () => typeof mergedRenderRestFn === "function" ? mergedRenderRestFn(omittedItems.value) : mergedRenderRestFn });
-			};
-			const { class: classAttr, style: styleAttr, ...restAttrs } = attrs;
-			const overflowNode = (0, vue.createVNode)(Component, (0, vue.mergeProps)({
-				"class": (0, _v_c_util.classNames)(!invalidate.value && prefixCls, classAttr),
-				"style": styleAttr
-			}, restAttrs), { default: () => [
-				prefix && (0, vue.createVNode)(require_Item.default, (0, 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 && (0, vue.createVNode)(require_Item.default, (0, 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 ? (0, vue.createVNode)(_v_c_resize_observer.default, {
-				"onResize": onOverflowResize,
-				"disabled": !shouldResponsive.value
-			}, _isSlot(overflowNode) ? overflowNode : { default: () => [overflowNode] }) : overflowNode;
-		};
-	}
-});
-Overflow.Item = require_RawItem.default;
-Overflow.RESPONSIVE = RESPONSIVE;
-Overflow.INVALIDATE = INVALIDATE;
-var Overflow_default = Overflow;
-exports.default = Overflow_default;

package/dist/RawItem.cjs

@@ -1,30 +0,0 @@
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-const require_context = require("./context.cjs");
-const require_Item = require("./Item.cjs");
-let vue = require("vue");
-let _v_c_util = require("@v-c/util");
-var RawItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	name: "OverflowRawItem",
-	inheritAttrs: false,
-	props: { component: {
-		type: [
-			String,
-			Object,
-			Function
-		],
-		default: "div"
-	} },
-	setup(props, { slots, attrs }) {
-		const context = require_context.useInjectOverflowContext();
-		return () => {
-			if (!context?.value) return (0, vue.createVNode)(props.component ?? "div", attrs, { default: () => [slots.default?.()] });
-			const { className: contextClassName, ...restContext } = context.value;
-			const { class: classAttr, ...restAttrs } = attrs;
-			return (0, vue.createVNode)(require_context.OverflowContextProvider, { "value": null }, { default: () => [(0, vue.createVNode)(require_Item.default, (0, vue.mergeProps)(restContext, restAttrs, {
-				"class": (0, _v_c_util.classNames)(contextClassName, classAttr),
-				"component": props.component
-			}), slots)] });
-		};
-	}
-});
-exports.default = RawItem_default;

package/dist/_virtual/rolldown_runtime.cjs

@@ -1,21 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-exports.__toESM = __toESM;

package/dist/context.cjs

@@ -1,17 +0,0 @@
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-let vue = require("vue");
-var OverflowContextKey = Symbol("OverflowContext");
-const OverflowContextProvider = /* @__PURE__ */ (0, vue.defineComponent)({
-	name: "OverflowContextProvider",
-	inheritAttrs: false,
-	props: { value: { type: Object } },
-	setup(props, { slots }) {
-		(0, vue.provide)(OverflowContextKey, (0, vue.computed)(() => props.value));
-		return () => slots.default?.();
-	}
-});
-function useInjectOverflowContext() {
-	return (0, vue.inject)(OverflowContextKey, null);
-}
-exports.OverflowContextProvider = OverflowContextProvider;
-exports.useInjectOverflowContext = useInjectOverflowContext;

package/dist/hooks/channelUpdate.cjs

@@ -1,12 +0,0 @@
-const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
-let _v_c_util_dist_raf = require("@v-c/util/dist/raf");
-_v_c_util_dist_raf = require_rolldown_runtime.__toESM(_v_c_util_dist_raf);
-function channelUpdate(callback) {
-	if (typeof MessageChannel === "undefined") (0, _v_c_util_dist_raf.default)(callback);
-	else {
-		const channel = new MessageChannel();
-		channel.port1.onmessage = () => callback();
-		channel.port2.postMessage(void 0);
-	}
-}
-exports.default = channelUpdate;

package/dist/hooks/useEffectState.cjs

@@ -1,32 +0,0 @@
-const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
-const require_channelUpdate = require("./channelUpdate.cjs");
-let vue = require("vue");
-let _v_c_util_dist_hooks_useEvent = require("@v-c/util/dist/hooks/useEvent");
-_v_c_util_dist_hooks_useEvent = require_rolldown_runtime.__toESM(_v_c_util_dist_hooks_useEvent);
-function useBatcher() {
-	const updateFuncRef = (0, vue.ref)(null);
-	const notifyEffectUpdate = (callback) => {
-		if (!updateFuncRef.value) {
-			updateFuncRef.value = [];
-			require_channelUpdate.default(() => {
-				updateFuncRef.value.forEach((fn) => {
-					fn();
-				});
-				updateFuncRef.value = null;
-			});
-		}
-		updateFuncRef.value.push(callback);
-	};
-	return notifyEffectUpdate;
-}
-function useEffectState(notifyEffectUpdate, defaultValue) {
-	const stateValue = (0, vue.ref)(defaultValue);
-	return [stateValue, (0, _v_c_util_dist_hooks_useEvent.default)((nextValue) => {
-		notifyEffectUpdate(() => {
-			if (typeof nextValue === "function") stateValue.value = nextValue(stateValue.value);
-			else stateValue.value = nextValue;
-		});
-	})];
-}
-exports.default = useEffectState;
-exports.useBatcher = useBatcher;

package/dist/index.cjs

@@ -1,9 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_context = require("./context.cjs");
-const require_Overflow = require("./Overflow.cjs");
-var src_default = require_Overflow.default;
-exports.OverflowContextProvider = require_context.OverflowContextProvider;
-exports.default = src_default;