@v-c/rate 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/Rate.cjs

@@ -0,0 +1,277 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_Star = require("./Star.cjs");
+const require_useRefs = require("./useRefs.cjs");
+const require_util = require("./util.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+let __v_c_util_dist_hooks_useMergedState = require("@v-c/util/dist/hooks/useMergedState");
+__v_c_util_dist_hooks_useMergedState = require_rolldown_runtime.__toESM(__v_c_util_dist_hooks_useMergedState);
+let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+__v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(__v_c_util_dist_KeyCode);
+let __v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
+__v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(__v_c_util_dist_pickAttrs);
+let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+var defaults = {
+	prefixCls: "vc-rate",
+	count: 5,
+	allowHalf: false,
+	allowClear: true,
+	keyboard: true,
+	character: "★",
+	direction: "ltr",
+	tabIndex: 0
+};
+var Rate_default = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, expose }) => {
+	const [setStarRef, starRefs] = require_useRefs.default();
+	const rateRef = (0, vue.ref)(null);
+	const triggerFocus = () => {
+		if (!props.disabled) rateRef.value.focus();
+	};
+	const triggerBlur = () => {
+		if (!props.disabled) rateRef.value.blur();
+	};
+	expose({
+		focus: triggerFocus,
+		blur: triggerBlur
+	});
+	const [state, setStateValue] = (0, __v_c_util_dist_hooks_useMergedState.default)(props.defaultValue || 0, { value: (0, vue.computed)(() => props.value) });
+	const [cleanedValue, setCleanedValue] = (0, __v_c_util_dist_hooks_useMergedState.default)(null);
+	const getStarValue = (index, x) => {
+		const { direction, allowHalf } = props;
+		const reverse = direction === "rtl";
+		let starValue = index + 1;
+		if (allowHalf) {
+			const starEle = starRefs.value.get(index);
+			const leftDis = require_util.getOffsetLeft(starEle);
+			const width = starEle.clientWidth;
+			if (reverse && x - leftDis > width / 2) starValue -= .5;
+			else if (!reverse && x - leftDis < width / 2) starValue -= .5;
+		}
+		return starValue;
+	};
+	const changeValue = (nextValue) => {
+		setStateValue(nextValue);
+		props?.onChange?.(nextValue);
+	};
+	const focused = (0, vue.ref)(false);
+	const onInternalFocus = () => {
+		focused.value = true;
+		props?.onFocus?.();
+	};
+	const onInternalBlur = () => {
+		focused.value = false;
+		props?.onBlur?.();
+	};
+	const hoverValue = (0, vue.ref)(null);
+	const onHover = (event, index) => {
+		const nextHoverValue = getStarValue(index, event.pageX);
+		if (nextHoverValue !== cleanedValue.value) {
+			hoverValue.value = nextHoverValue;
+			setCleanedValue(null);
+		}
+		props?.onHoverChange?.(nextHoverValue);
+	};
+	const onMouseLeaveCallback = (event) => {
+		const { disabled } = props;
+		if (!disabled) {
+			hoverValue.value = null;
+			setCleanedValue(null);
+			props?.onHoverChange?.(void 0);
+		}
+		if (event) props?.onMouseLeave?.(event);
+	};
+	const onClick = (event, index) => {
+		const { allowClear } = props;
+		const newValue = getStarValue(index, event.pageX);
+		let isReset = false;
+		if (allowClear) isReset = newValue === state.value;
+		onMouseLeaveCallback();
+		changeValue(isReset ? 0 : newValue);
+		setCleanedValue(isReset ? newValue : null);
+	};
+	const onInternalKeyDown = (event) => {
+		const { keyCode } = event;
+		const value = state.value;
+		const { keyboard, count, direction, allowHalf } = props;
+		const reverse = direction === "rtl";
+		const step = allowHalf ? .5 : 1;
+		if (keyboard) {
+			if (keyCode === __v_c_util_dist_KeyCode.default.RIGHT && value < count && !reverse) {
+				changeValue(value + step);
+				event.preventDefault();
+			} else if (keyCode === __v_c_util_dist_KeyCode.default.LEFT && value > 0 && !reverse) {
+				changeValue(value - step);
+				event.preventDefault();
+			} else if (keyCode === __v_c_util_dist_KeyCode.default.RIGHT && value > 0 && reverse) {
+				changeValue(value - step);
+				event.preventDefault();
+			} else if (keyCode === __v_c_util_dist_KeyCode.default.LEFT && value < count && reverse) {
+				changeValue(value + step);
+				event.preventDefault();
+			}
+		}
+		props?.onKeyDown?.(event);
+	};
+	(0, vue.onMounted)(() => {
+		const { autoFocus, disabled } = props;
+		if (autoFocus && !disabled) triggerFocus();
+	});
+	return () => {
+		const { count, allowHalf, disabled, prefixCls, direction, character, characterRender, tabIndex,...restProps } = props;
+		const { className, style, restAttrs } = (0, __v_c_util_dist_props_util.getAttrStyleAndClass)(attrs);
+		const classString = (0, __v_c_util.clsx)(prefixCls, className, {
+			[`${prefixCls}-disabled`]: disabled,
+			[`${prefixCls}-rtl`]: direction === "rtl"
+		});
+		const starNodes = Array.from({ length: count }).fill(0).map((_, index) => (0, vue.createVNode)(require_Star.default, {
+			"ref": setStarRef(index),
+			"index": index,
+			"count": count,
+			"disabled": disabled,
+			"prefixCls": `${prefixCls}-star`,
+			"allowHalf": allowHalf,
+			"value": hoverValue.value === null ? state.value : hoverValue.value,
+			"onClick": onClick,
+			"onHover": onHover,
+			"key": index,
+			"character": character,
+			"characterRender": characterRender,
+			"focused": focused.value
+		}, null));
+		return (0, vue.createVNode)("ul", (0, vue.mergeProps)({
+			"id": restProps.id,
+			"class": classString,
+			"style": style,
+			"onMouseleave": onMouseLeaveCallback,
+			"tabindex": disabled ? -1 : tabIndex,
+			"onFocus": disabled ? null : onInternalFocus,
+			"onBlur": disabled ? null : onInternalBlur,
+			"onKeydown": disabled ? null : onInternalKeyDown,
+			"ref": rateRef
+		}, (0, __v_c_util_dist_pickAttrs.default)(restAttrs, {
+			aria: true,
+			data: true,
+			attr: true
+		})), [starNodes]);
+	};
+}, {
+	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		value: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		allowClear: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		keyboard: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		tabIndex: {
+			type: [Number, String],
+			required: false,
+			default: void 0
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onHoverChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onFocus: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onMouseLeave: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		"onUpdate:value": {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		id: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		count: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		character: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		characterRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		allowHalf: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	}, defaults),
+	inheritAttrs: false,
+	name: "Rate"
+});
+exports.default = Rate_default;

package/dist/Rate.d.ts

@@ -0,0 +1,23 @@
+import { FocusEventHandler, KeyboardEventHandler } from '@v-c/util/dist/EventInterface';
+import { StarProps } from './Star';
+export type Direction = 'ltr' | 'rtl';
+export interface RateProps extends Pick<StarProps, 'count' | 'character' | 'characterRender' | 'allowHalf' | 'disabled'> {
+    'prefixCls'?: string;
+    'defaultValue'?: number;
+    'value'?: number;
+    'allowClear'?: boolean;
+    'keyboard'?: boolean;
+    'direction'?: string;
+    'tabIndex'?: number | string;
+    'autoFocus'?: boolean;
+    'onHoverChange'?: (value: number) => void;
+    'onChange'?: (value: number) => void;
+    'onFocus'?: () => void;
+    'onBlur'?: () => void;
+    'onKeyDown'?: KeyboardEventHandler;
+    'onMouseLeave'?: FocusEventHandler;
+    'onUpdate:value'?: (value: number) => void;
+    'id'?: string;
+}
+declare const _default: import('vue').DefineSetupFnComponent<RateProps, {}, {}, RateProps & {}, import('vue').PublicProps>;
+export default _default;

package/dist/Rate.js

@@ -0,0 +1,272 @@
+import Star_default from "./Star.js";
+import useRefs_default from "./useRefs.js";
+import { getOffsetLeft } from "./util.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, onMounted, ref } from "vue";
+import { clsx } from "@v-c/util";
+import useMergedState from "@v-c/util/dist/hooks/useMergedState";
+import KeyCode from "@v-c/util/dist/KeyCode";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+import { getAttrStyleAndClass } from "@v-c/util/dist/props-util";
+var defaults = {
+	prefixCls: "vc-rate",
+	count: 5,
+	allowHalf: false,
+	allowClear: true,
+	keyboard: true,
+	character: "★",
+	direction: "ltr",
+	tabIndex: 0
+};
+var Rate_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
+	const [setStarRef, starRefs] = useRefs_default();
+	const rateRef = ref(null);
+	const triggerFocus = () => {
+		if (!props.disabled) rateRef.value.focus();
+	};
+	const triggerBlur = () => {
+		if (!props.disabled) rateRef.value.blur();
+	};
+	expose({
+		focus: triggerFocus,
+		blur: triggerBlur
+	});
+	const [state, setStateValue] = useMergedState(props.defaultValue || 0, { value: computed(() => props.value) });
+	const [cleanedValue, setCleanedValue] = useMergedState(null);
+	const getStarValue = (index, x) => {
+		const { direction, allowHalf } = props;
+		const reverse = direction === "rtl";
+		let starValue = index + 1;
+		if (allowHalf) {
+			const starEle = starRefs.value.get(index);
+			const leftDis = getOffsetLeft(starEle);
+			const width = starEle.clientWidth;
+			if (reverse && x - leftDis > width / 2) starValue -= .5;
+			else if (!reverse && x - leftDis < width / 2) starValue -= .5;
+		}
+		return starValue;
+	};
+	const changeValue = (nextValue) => {
+		setStateValue(nextValue);
+		props?.onChange?.(nextValue);
+	};
+	const focused = ref(false);
+	const onInternalFocus = () => {
+		focused.value = true;
+		props?.onFocus?.();
+	};
+	const onInternalBlur = () => {
+		focused.value = false;
+		props?.onBlur?.();
+	};
+	const hoverValue = ref(null);
+	const onHover = (event, index) => {
+		const nextHoverValue = getStarValue(index, event.pageX);
+		if (nextHoverValue !== cleanedValue.value) {
+			hoverValue.value = nextHoverValue;
+			setCleanedValue(null);
+		}
+		props?.onHoverChange?.(nextHoverValue);
+	};
+	const onMouseLeaveCallback = (event) => {
+		const { disabled } = props;
+		if (!disabled) {
+			hoverValue.value = null;
+			setCleanedValue(null);
+			props?.onHoverChange?.(void 0);
+		}
+		if (event) props?.onMouseLeave?.(event);
+	};
+	const onClick = (event, index) => {
+		const { allowClear } = props;
+		const newValue = getStarValue(index, event.pageX);
+		let isReset = false;
+		if (allowClear) isReset = newValue === state.value;
+		onMouseLeaveCallback();
+		changeValue(isReset ? 0 : newValue);
+		setCleanedValue(isReset ? newValue : null);
+	};
+	const onInternalKeyDown = (event) => {
+		const { keyCode } = event;
+		const value = state.value;
+		const { keyboard, count, direction, allowHalf } = props;
+		const reverse = direction === "rtl";
+		const step = allowHalf ? .5 : 1;
+		if (keyboard) {
+			if (keyCode === KeyCode.RIGHT && value < count && !reverse) {
+				changeValue(value + step);
+				event.preventDefault();
+			} else if (keyCode === KeyCode.LEFT && value > 0 && !reverse) {
+				changeValue(value - step);
+				event.preventDefault();
+			} else if (keyCode === KeyCode.RIGHT && value > 0 && reverse) {
+				changeValue(value - step);
+				event.preventDefault();
+			} else if (keyCode === KeyCode.LEFT && value < count && reverse) {
+				changeValue(value + step);
+				event.preventDefault();
+			}
+		}
+		props?.onKeyDown?.(event);
+	};
+	onMounted(() => {
+		const { autoFocus, disabled } = props;
+		if (autoFocus && !disabled) triggerFocus();
+	});
+	return () => {
+		const { count, allowHalf, disabled, prefixCls, direction, character, characterRender, tabIndex,...restProps } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const classString = clsx(prefixCls, className, {
+			[`${prefixCls}-disabled`]: disabled,
+			[`${prefixCls}-rtl`]: direction === "rtl"
+		});
+		const starNodes = Array.from({ length: count }).fill(0).map((_, index) => createVNode(Star_default, {
+			"ref": setStarRef(index),
+			"index": index,
+			"count": count,
+			"disabled": disabled,
+			"prefixCls": `${prefixCls}-star`,
+			"allowHalf": allowHalf,
+			"value": hoverValue.value === null ? state.value : hoverValue.value,
+			"onClick": onClick,
+			"onHover": onHover,
+			"key": index,
+			"character": character,
+			"characterRender": characterRender,
+			"focused": focused.value
+		}, null));
+		return createVNode("ul", mergeProps({
+			"id": restProps.id,
+			"class": classString,
+			"style": style,
+			"onMouseleave": onMouseLeaveCallback,
+			"tabindex": disabled ? -1 : tabIndex,
+			"onFocus": disabled ? null : onInternalFocus,
+			"onBlur": disabled ? null : onInternalBlur,
+			"onKeydown": disabled ? null : onInternalKeyDown,
+			"ref": rateRef
+		}, pickAttrs(restAttrs, {
+			aria: true,
+			data: true,
+			attr: true
+		})), [starNodes]);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		value: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		allowClear: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		keyboard: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		tabIndex: {
+			type: [Number, String],
+			required: false,
+			default: void 0
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onHoverChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onFocus: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onMouseLeave: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		"onUpdate:value": {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		id: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		count: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		character: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		characterRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		allowHalf: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	}, defaults),
+	inheritAttrs: false,
+	name: "Rate"
+});
+export { Rate_default as default };

package/dist/Star.cjs

@@ -0,0 +1,125 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+__v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(__v_c_util_dist_KeyCode);
+var Star_default = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const onHover = (e) => {
+		const { index } = props;
+		props?.onHover?.(e, index);
+	};
+	const onClick = (e) => {
+		const { index } = props;
+		props?.onClick?.(e, index);
+	};
+	const onKeyDown = (e) => {
+		const { index } = props;
+		if (e.keyCode === __v_c_util_dist_KeyCode.default.ENTER) props?.onClick?.(e, index);
+	};
+	const cls = (0, vue.computed)(() => {
+		const { prefixCls, index, value, allowHalf, focused } = props;
+		const starValue = index + 1;
+		let className = prefixCls;
+		if (value === 0 && index === 0 && focused) className += ` ${prefixCls}-focused`;
+		else if (allowHalf && value + .5 >= starValue && value < starValue) {
+			className += ` ${prefixCls}-half ${prefixCls}-active`;
+			if (focused) className += ` ${prefixCls}-focused`;
+		} else {
+			if (starValue <= value) className += ` ${prefixCls}-full`;
+			else className += ` ${prefixCls}-zero`;
+			if (starValue === value && focused) className += ` ${prefixCls}-focused`;
+		}
+		return className;
+	});
+	return () => {
+		const { disabled, prefixCls, characterRender, character, index, count, value } = props;
+		const characterNode = typeof character === "function" ? character({
+			disabled,
+			prefixCls,
+			index,
+			count,
+			value
+		}) : character;
+		let star = (0, vue.createVNode)("li", { "class": cls.value }, [(0, vue.createVNode)("div", {
+			"onClick": disabled ? null : onClick,
+			"onKeydown": disabled ? null : onKeyDown,
+			"onMousemove": disabled ? null : onHover,
+			"role": "radio",
+			"aria-checked": value > index ? "true" : "false",
+			"aria-posinset": index + 1,
+			"aria-setsize": count,
+			"tabindex": disabled ? -1 : 0
+		}, [(0, vue.createVNode)("div", { "class": `${prefixCls}-first` }, [characterNode]), (0, vue.createVNode)("div", { "class": `${prefixCls}-second` }, [characterNode])])]);
+		if (characterRender) star = characterRender(star, props);
+		return star;
+	};
+}, {
+	props: {
+		value: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		index: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		allowHalf: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		character: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		characterRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onClick: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onHover: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		focused: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		count: {
+			type: Number,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "RateStar",
+	inheritAttrs: false
+});
+exports.default = Star_default;

package/dist/Star.d.ts

@@ -0,0 +1,16 @@
+import { VueNode } from '@v-c/util/dist/type';
+export interface StarProps {
+    value?: number;
+    index?: number;
+    prefixCls?: string;
+    allowHalf?: boolean;
+    disabled?: boolean;
+    character?: ((props: StarProps) => any) | VueNode;
+    characterRender?: ((origin: any, props: StarProps) => any);
+    onClick?: (e: MouseEvent | KeyboardEvent, index: number) => void;
+    onHover?: (e: MouseEvent, index: number) => void;
+    focused?: boolean;
+    count?: number;
+}
+declare const _default: import('vue').DefineSetupFnComponent<StarProps, {}, {}, StarProps & {}, import('vue').PublicProps>;
+export default _default;

package/dist/Star.js

@@ -0,0 +1,122 @@
+import { computed, createVNode, defineComponent } from "vue";
+import KeyCode from "@v-c/util/dist/KeyCode";
+var Star_default = /* @__PURE__ */ defineComponent((props) => {
+	const onHover = (e) => {
+		const { index } = props;
+		props?.onHover?.(e, index);
+	};
+	const onClick = (e) => {
+		const { index } = props;
+		props?.onClick?.(e, index);
+	};
+	const onKeyDown = (e) => {
+		const { index } = props;
+		if (e.keyCode === KeyCode.ENTER) props?.onClick?.(e, index);
+	};
+	const cls = computed(() => {
+		const { prefixCls, index, value, allowHalf, focused } = props;
+		const starValue = index + 1;
+		let className = prefixCls;
+		if (value === 0 && index === 0 && focused) className += ` ${prefixCls}-focused`;
+		else if (allowHalf && value + .5 >= starValue && value < starValue) {
+			className += ` ${prefixCls}-half ${prefixCls}-active`;
+			if (focused) className += ` ${prefixCls}-focused`;
+		} else {
+			if (starValue <= value) className += ` ${prefixCls}-full`;
+			else className += ` ${prefixCls}-zero`;
+			if (starValue === value && focused) className += ` ${prefixCls}-focused`;
+		}
+		return className;
+	});
+	return () => {
+		const { disabled, prefixCls, characterRender, character, index, count, value } = props;
+		const characterNode = typeof character === "function" ? character({
+			disabled,
+			prefixCls,
+			index,
+			count,
+			value
+		}) : character;
+		let star = createVNode("li", { "class": cls.value }, [createVNode("div", {
+			"onClick": disabled ? null : onClick,
+			"onKeydown": disabled ? null : onKeyDown,
+			"onMousemove": disabled ? null : onHover,
+			"role": "radio",
+			"aria-checked": value > index ? "true" : "false",
+			"aria-posinset": index + 1,
+			"aria-setsize": count,
+			"tabindex": disabled ? -1 : 0
+		}, [createVNode("div", { "class": `${prefixCls}-first` }, [characterNode]), createVNode("div", { "class": `${prefixCls}-second` }, [characterNode])])]);
+		if (characterRender) star = characterRender(star, props);
+		return star;
+	};
+}, {
+	props: {
+		value: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		index: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		allowHalf: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		character: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		characterRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onClick: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onHover: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		focused: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		count: {
+			type: Number,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "RateStar",
+	inheritAttrs: false
+});
+export { Star_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+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/index.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_Rate = require("./Rate.cjs");
+var src_default = require_Rate.default;
+exports.default = src_default;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { default as Rate } from './Rate';
+export default Rate;

package/dist/index.js

@@ -0,0 +1,3 @@
+import Rate_default from "./Rate.js";
+var src_default = Rate_default;
+export { src_default as default };

package/dist/useRefs.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let __v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
+function useRefs() {
+	const refs = (0, vue.ref)(/* @__PURE__ */ new Map());
+	const setRef = (key) => (el) => {
+		refs.value.set(key, (0, __v_c_util_dist_Dom_findDOMNode.getDOM)(el));
+	};
+	(0, vue.onBeforeUpdate)(() => {
+		refs.value = /* @__PURE__ */ new Map();
+	});
+	return [setRef, refs];
+}
+var useRefs_default = useRefs;
+exports.default = useRefs_default;

package/dist/useRefs.d.ts

@@ -0,0 +1,6 @@
+import { Key } from '@v-c/util/dist/type';
+import { Ref } from 'vue';
+export type RefsValue = Map<Key, any>;
+type UseRef = [(key: Key) => (el: any) => void, Ref<RefsValue>];
+declare function useRefs(): UseRef;
+export default useRefs;

package/dist/useRefs.js

@@ -0,0 +1,14 @@
+import { onBeforeUpdate, ref } from "vue";
+import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
+function useRefs() {
+	const refs = ref(/* @__PURE__ */ new Map());
+	const setRef = (key) => (el) => {
+		refs.value.set(key, getDOM(el));
+	};
+	onBeforeUpdate(() => {
+		refs.value = /* @__PURE__ */ new Map();
+	});
+	return [setRef, refs];
+}
+var useRefs_default = useRefs;
+export { useRefs_default as default };

package/dist/util.cjs

@@ -0,0 +1,34 @@
+function getScroll(w) {
+	let ret = w.scrollX;
+	const method = "scrollLeft";
+	if (typeof ret !== "number") {
+		const d = w.document;
+		ret = d.documentElement[method];
+		if (typeof ret !== "number") ret = d.body[method];
+	}
+	return ret;
+}
+function getClientPosition(elem) {
+	let x;
+	let y;
+	const doc = elem.ownerDocument;
+	const { body } = doc;
+	const docElem = doc && doc.documentElement;
+	const box = elem.getBoundingClientRect();
+	x = box.left;
+	y = box.top;
+	x -= docElem.clientLeft || body.clientLeft || 0;
+	y -= docElem.clientTop || body.clientTop || 0;
+	return {
+		left: x,
+		top: y
+	};
+}
+function getOffsetLeft(el) {
+	const pos = getClientPosition(el);
+	const doc = el.ownerDocument;
+	const w = doc.defaultView || doc.parentWindow;
+	pos.left += getScroll(w);
+	return pos.left;
+}
+exports.getOffsetLeft = getOffsetLeft;

package/dist/util.d.ts

@@ -0,0 +1 @@
+export declare function getOffsetLeft(el: HTMLElement): number;

package/dist/util.js

@@ -0,0 +1,34 @@
+function getScroll(w) {
+	let ret = w.scrollX;
+	const method = "scrollLeft";
+	if (typeof ret !== "number") {
+		const d = w.document;
+		ret = d.documentElement[method];
+		if (typeof ret !== "number") ret = d.body[method];
+	}
+	return ret;
+}
+function getClientPosition(elem) {
+	let x;
+	let y;
+	const doc = elem.ownerDocument;
+	const { body } = doc;
+	const docElem = doc && doc.documentElement;
+	const box = elem.getBoundingClientRect();
+	x = box.left;
+	y = box.top;
+	x -= docElem.clientLeft || body.clientLeft || 0;
+	y -= docElem.clientTop || body.clientTop || 0;
+	return {
+		left: x,
+		top: y
+	};
+}
+function getOffsetLeft(el) {
+	const pos = getClientPosition(el);
+	const doc = el.ownerDocument;
+	const w = doc.defaultView || doc.parentWindow;
+	pos.left += getScroll(w);
+	return pos.left;
+}
+export { getOffsetLeft };

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@v-c/rate",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/util": "^1.0.2"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "prepublish": "pnpm build",
+    "patch": "bumpp --release patch",
+    "bump": "bumpp"
+  }
+}