tdesign-mobile-vue
Version:
tdesign-mobile-vue
334 lines (326 loc) • 14.9 kB
JavaScript
/**
* tdesign v1.9.3
* (c) 2025 TDesign Group
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var vue = require('vue');
var tdesignIconsVueNext = require('tdesign-icons-vue-next');
var core = require('@vueuse/core');
var rate_props = require('./props.js');
var config = require('../config.js');
var hooks_useVModel = require('../hooks/useVModel.js');
var form_hooks = require('../form/hooks.js');
var hooks_useClass = require('../hooks/useClass.js');
var configProvider_useConfig = require('../_chunks/dep-21f18d3b.js');
require('../_chunks/dep-6df33aaf.js');
require('../_chunks/dep-3d4c38f1.js');
require('../_chunks/dep-afa9f3f2.js');
require('../_chunks/dep-2f809ed9.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-ae809b86.js');
require('../_chunks/dep-757b152c.js');
require('../_chunks/dep-2b08c0a6.js');
require('../_chunks/dep-5be9198d.js');
require('../_chunks/dep-d5bc9590.js');
require('../_chunks/dep-b9642a56.js');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-28b1e09d.js');
require('../_chunks/dep-57aa1aa0.js');
require('dayjs');
require('../_chunks/dep-85204fa0.js');
require('../_chunks/dep-f6b14f80.js');
require('../_chunks/dep-a8d60643.js');
require('../_chunks/dep-7c911ba3.js');
require('../_chunks/dep-88fe047a.js');
require('../_chunks/dep-ef223206.js');
require('../_chunks/dep-49f0a63e.js');
require('../_chunks/dep-d950aa21.js');
require('../_chunks/dep-a697b1b9.js');
require('../_chunks/dep-4dfb9b9c.js');
require('../_chunks/dep-c65deed7.js');
require('../_chunks/dep-94eeec5a.js');
require('../_chunks/dep-060bf1cf.js');
require('../_chunks/dep-0e05e959.js');
require('../_chunks/dep-324da301.js');
require('../_chunks/dep-da6dc2cf.js');
require('../_chunks/dep-ccc9ad3d.js');
require('../_chunks/dep-c3cb976c.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var prefix = config["default"].prefix;
var _Rate = vue.defineComponent({
name: "".concat(prefix, "-rate"),
props: rate_props["default"],
setup: function setup(props2, context) {
var rateClass = hooks_useClass.usePrefixClass("rate");
var _useConfig = configProvider_useConfig.useConfig("rate"),
t = _useConfig.t,
globalConfig = _useConfig.globalConfig;
var isDisabled = form_hooks.useFormDisabled();
var rateWrapper = vue.ref();
var _toRefs = vue.toRefs(props2),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = hooks_useVModel["default"](value, modelValue, props2.defaultValue, props2.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
actualVal = _useVModel2[0],
setActualVal = _useVModel2[1];
var rateText = vue.computed(function () {
if (Array.isArray(props2.texts) && props2.texts.length > 0) {
return props2.texts[actualVal.value - 1];
}
return actualVal.value > 0 ? t(globalConfig.value.valueText, {
value: actualVal.value
}) : globalConfig.value.noValueText;
});
var colors = vue.computed(function () {
var color = props2.color;
if (Array.isArray(color) && color.length === 2) {
return {
"--td-rate-selected-color": color[0],
"--td-rate-unselected-color": color[1]
};
}
if (typeof color === "string") {
return {
"--td-rate-selected-color": color
};
}
return {};
});
var regSize = function regSize(val) {
return "".concat(val).includes("px") ? val : "".concat(val, "px");
};
var unitConvert = function unitConvert(value2) {
if (typeof value2 === "string") {
return parseInt(value2, 10);
}
return value2;
};
var icon = function icon(isSelect) {
var icon2 = props2.icon;
var startComponent = tdesignIconsVueNext.StarFilledIcon;
var select = startComponent;
var unSelect = startComponent;
if (Array.isArray(icon2)) {
var _icon = _slicedToArray__default["default"](icon2, 2),
_select = _icon[0],
_unSelect = _icon[1];
if (typeof _select === "function") {
select = _select(vue.h);
} else {
select = _select;
}
if (typeof _unSelect === "function") {
unSelect = _unSelect(vue.h);
} else {
unSelect = _unSelect;
}
}
if (isSelect) {
return select || startComponent;
}
return unSelect || startComponent;
};
var rootClasses = vue.computed(function () {
return ["".concat(rateClass.value), _defineProperty__default["default"]({}, "".concat(rateClass.value, "--disabled"), isDisabled.value)];
});
var classes = function classes(n) {
var classPrefix = "".concat(rateClass.value, "__icon");
return _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, classPrefix, true), "".concat(classPrefix, "--current"), scaleIndex.value === Math.ceil(n)), "".concat(classPrefix, "--").concat(actualVal.value >= n ? "selected" : "unselected"), true);
};
var ratePopoverRef = vue.ref();
var scaleIndex = vue.ref(-1);
var popoverValue = vue.ref(0);
var timer = vue.ref(null);
var touchEnd = vue.ref(false);
var tipsVisible = vue.ref(false);
var tipsLeft = vue.ref(0);
var actionType = vue.ref("tap");
var touchStartTime = vue.ref(0);
core.onClickOutside(ratePopoverRef, function (event) {
hideTips();
});
var hideTips = function hideTips() {
var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
if (delay) {
timer.value = setTimeout(function () {
handleCloseTips();
}, 3e3);
} else {
handleCloseTips();
}
};
var handleCloseTips = function handleCloseTips() {
tipsVisible.value = false;
scaleIndex.value = -1;
if (timer.value) {
clearTimeout(timer.value);
}
};
var onClick = function onClick(event) {
if (isDisabled.value) return;
getRect(event, "tap");
};
var onTouch = function onTouch(e, eventType) {
var _e$touches = _slicedToArray__default["default"](e.touches, 1),
touch = _e$touches[0];
getRect(touch, eventType);
};
var onTouchstart = function onTouchstart(e) {
if (isDisabled.value) return;
touchStartTime.value = Date.now();
touchEnd.value = false;
};
var onTouchmove = function onTouchmove(e) {
if (isDisabled.value) return;
if (Date.now() - touchStartTime.value <= 200) return;
onTouch(e, "move");
};
var onTouchEnd = function onTouchEnd(e) {
if (isDisabled.value) return;
touchEnd.value = true;
hideTips();
};
var getRect = function getRect(event, eventType) {
if (rateWrapper.value) {
var count = props2.count,
allowHalf = props2.allowHalf,
gap = props2.gap,
currentValue = props2.value,
size = props2.size;
var margin = unitConvert(gap);
var _rateWrapper$value$ge = rateWrapper.value.getBoundingClientRect(),
width = _rateWrapper$value$ge.width,
left = _rateWrapper$value$ge.left;
var starWidth = (width - (count - 1) * margin) / count;
var offsetX = event.pageX - left;
var num = (offsetX + margin) / (starWidth + margin);
var remainder = num % 1;
var integral = num - remainder;
var value2 = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1;
if (value2 > count) {
value2 = count;
} else if (value2 < 0) {
value2 = 0;
}
popoverValue.value = value2;
var fontSize = size || getComputedStyle(rateWrapper.value).getPropertyValue("font-size");
var leftDis = Math.ceil(value2 - 1) * (unitConvert(gap) + unitConvert(fontSize)) + unitConvert(fontSize) * 0.5;
tipsVisible.value = true;
tipsLeft.value = Math.max(leftDis, unitConvert(fontSize) * 0.5);
scaleIndex.value = Math.ceil(value2);
actionType.value = eventType;
if (value2 !== currentValue) {
setActualVal(value2);
}
if (touchEnd.value) {
hideTips(true);
}
}
};
var onSelect = function onSelect(value2) {
setActualVal(value2);
hideTips();
};
return function () {
var iconComponent = function iconComponent(n, value2) {
var classPrefix = "".concat(rateClass.value, "__icon-left");
var select = value2 >= n;
var selectHalf = Math.ceil(value2) >= n;
var SelectIcon = icon(select);
var SelectHalfIcon = icon(selectHalf);
return vue.createVNode("div", {
"style": {
fontSize: regSize(props2.size)
}
}, [props2.allowHalf ? vue.createVNode("div", {
"class": "".concat(classPrefix, " ").concat(selectHalf ? "".concat(classPrefix, "--selected") : "".concat(classPrefix, "--unselected"))
}, [vue.createVNode(SelectHalfIcon, null, null)]) : null, vue.createVNode(SelectIcon, null, null)]);
};
var renderRateWrapper = function renderRateWrapper() {
var countList = Array.from(Array(props2.count), function (_, k) {
return k + 1;
});
return vue.createVNode("div", {
"ref": rateWrapper,
"class": "".concat(rateClass.value, "__wrapper"),
"onTouchstart": onTouchstart,
"onTouchmove": onTouchmove,
"onTouchend": onTouchEnd,
"onTouchcancel": onTouchEnd
}, [countList.map(function (n) {
return vue.h(iconComponent(n, actualVal.value), {
key: n,
class: classes(n),
style: _objectSpread({
marginRight: "".concat(props2.count > n ? props2.gap : 0, "px")
}, colors.value),
onClick: onClick
});
})]);
};
var renderRateText = function renderRateText() {
if (!props2.showText) return null;
return vue.createVNode("span", {
"class": _defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(rateClass.value, "__text"), true), "".concat(rateClass.value, "__text--active"), actualVal.value > 0)
}, [rateText.value]);
};
var renderRateTips = function renderRateTips() {
if (!tipsVisible.value || props2.placement === "") return null;
return vue.createVNode("div", {
"ref": ratePopoverRef,
"class": _defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(rateClass.value, "__tips"), true), "".concat(rateClass.value, "__tips--").concat(props2.placement), props2.placement),
"style": {
left: "".concat(tipsLeft.value, "px")
}
}, [actionType.value === "tap" ? vue.createVNode("div", {
"style": "display: flex"
}, [props2.allowHalf && vue.createVNode("div", {
"class": _defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(rateClass.value, "__tips-item"), true), "".concat(rateClass.value, "__tips-item--active"), actualVal.value === Math.ceil(popoverValue.value) - 0.5),
"onClick": function onClick() {
return onSelect(Math.ceil(popoverValue.value) - 0.5);
}
}, [vue.h(iconComponent(Math.ceil(popoverValue.value), Math.ceil(popoverValue.value) - 0.5), {
style: _objectSpread({}, colors.value),
class: "".concat(rateClass.value, "__icon ").concat(rateClass.value, "__icon--unselected")
}), vue.createVNode("span", {
"class": "".concat(rateClass.value, "__tips-text")
}, [Math.ceil(popoverValue.value) - 0.5])]), vue.createVNode("div", {
"class": _defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(rateClass.value, "__tips-item"), true), "".concat(rateClass.value, "__tips-item--active"), props2.allowHalf && actualVal.value === Math.ceil(popoverValue.value)),
"onClick": function onClick() {
return onSelect(Math.ceil(popoverValue.value));
}
}, [vue.h(iconComponent(Math.ceil(popoverValue.value), Math.ceil(popoverValue.value)), {
style: _objectSpread({}, colors.value),
class: "".concat(rateClass.value, "__icon ").concat(rateClass.value, "__icon--selected")
}), vue.createVNode("span", {
"class": "".concat(rateClass.value, "__tips-text")
}, [Math.ceil(popoverValue.value)])])]) : vue.createVNode("div", {
"class": "".concat(rateClass.value, "__tips-item"),
"onClick": function onClick() {
return onSelect(popoverValue.value);
}
}, [vue.h(iconComponent(Math.ceil(popoverValue.value), popoverValue.value), {
style: _objectSpread({}, colors.value),
class: _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(rateClass.value, "__icon"), true), "".concat(rateClass.value, "__icon--selected"), Math.ceil(popoverValue.value) === popoverValue.value), "".concat(rateClass.value, "__icon--unselected"), Math.ceil(popoverValue.value) !== popoverValue.value)
}), vue.createVNode("span", {
"class": "".concat(rateClass.value, "__tips-text")
}, [popoverValue.value])])]);
};
return vue.createVNode("div", {
"class": rootClasses.value
}, [renderRateWrapper(), renderRateText(), renderRateTips()]);
};
}
});
exports["default"] = _Rate;
//# sourceMappingURL=rate.js.map