tdesign-mobile-vue
Version:
tdesign-mobile-vue
302 lines (298 loc) • 12.9 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { defineComponent, ref, computed, createVNode, h } from 'vue';
import { StarFilledIcon } from 'tdesign-icons-vue-next';
import { onClickOutside } from '@vueuse/core';
import props from './props.js';
import config from '../config.js';
import { useFormDisabled } from '../form/hooks.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useConfig } from '../config-provider/useConfig.js';
import { useDefault } from '../shared/useDefault/index.js';
import 'lodash/isBoolean';
import 'lodash/isFunction';
import 'lodash/cloneDeep';
import 'lodash/isString';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import 'lodash/isArray';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-eb734424.js';
import 'dayjs';
import 'lodash/camelCase';
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(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.prefix;
var _Rate = defineComponent({
name: "".concat(prefix, "-rate"),
props: props,
setup: function setup(props2, context) {
var rateClass = usePrefixClass("rate");
var _useConfig = useConfig("rate"),
t = _useConfig.t,
globalConfig = _useConfig.globalConfig;
var isDisabled = useFormDisabled();
var rateWrapper = ref();
var _useDefault = useDefault(props2, context.emit, "value", "change"),
_useDefault2 = _slicedToArray(_useDefault, 1),
actualVal = _useDefault2[0];
var rateText = 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 = 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(value) {
if (typeof value === "string") {
return parseInt(value, 10);
}
return value;
};
var icon = function icon(isSelect) {
var icon2 = props2.icon;
var startComponent = StarFilledIcon;
var select = startComponent;
var unSelect = startComponent;
if (Array.isArray(icon2)) {
var _icon = _slicedToArray(icon2, 2),
_select = _icon[0],
_unSelect = _icon[1];
if (typeof _select === "function") {
select = _select(h);
} else {
select = _select;
}
if (typeof _unSelect === "function") {
unSelect = _unSelect(h);
} else {
unSelect = _unSelect;
}
}
if (isSelect) {
return select || startComponent;
}
return unSelect || startComponent;
};
var rootClasses = computed(function () {
return ["".concat(rateClass.value), _defineProperty({}, "".concat(rateClass.value, "--disabled"), isDisabled.value)];
});
var classes = function classes(n) {
var classPrefix = "".concat(rateClass.value, "__icon");
return _defineProperty(_defineProperty(_defineProperty({}, classPrefix, true), "".concat(classPrefix, "--current"), scaleIndex.value === Math.ceil(n)), "".concat(classPrefix, "--").concat(actualVal.value >= n ? "selected" : "unselected"), true);
};
var ratePopoverRef = ref();
var scaleIndex = ref(-1);
var popoverValue = ref(0);
var timer = ref(null);
var touchEnd = ref(false);
var tipsVisible = ref(false);
var tipsLeft = ref(0);
var actionType = ref("tap");
var touchStartTime = ref(0);
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(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 value = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1;
if (value > count) {
value = count;
} else if (value < 0) {
value = 0;
}
popoverValue.value = value;
var fontSize = size || getComputedStyle(rateWrapper.value).getPropertyValue("font-size");
var leftDis = Math.ceil(value - 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(value);
actionType.value = eventType;
if (value !== currentValue) {
actualVal.value = value;
}
if (touchEnd.value) {
hideTips(true);
}
}
};
var onSelect = function onSelect(value) {
actualVal.value = value;
hideTips();
};
return function () {
var iconComponent = function iconComponent(n, value) {
var classPrefix = "".concat(rateClass.value, "__icon-left");
var select = value >= n;
var selectHalf = Math.ceil(value) >= n;
var SelectIcon = icon(select);
var SelectHalfIcon = icon(selectHalf);
return createVNode("div", {
"style": {
fontSize: regSize(props2.size)
}
}, [props2.allowHalf ? createVNode("div", {
"class": "".concat(classPrefix, " ").concat(selectHalf ? "".concat(classPrefix, "--selected") : "".concat(classPrefix, "--unselected"))
}, [createVNode(SelectHalfIcon, null, null)]) : null, createVNode(SelectIcon, null, null)]);
};
var renderRateWrapper = function renderRateWrapper() {
var countList = Array.from(Array(props2.count), function (_, k) {
return k + 1;
});
return createVNode("div", {
"ref": rateWrapper,
"class": "".concat(rateClass.value, "__wrapper"),
"onTouchstart": onTouchstart,
"onTouchmove": onTouchmove,
"onTouchend": onTouchEnd,
"onTouchcancel": onTouchEnd
}, [countList.map(function (n) {
return 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 createVNode("span", {
"class": _defineProperty(_defineProperty({}, "".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 createVNode("div", {
"ref": ratePopoverRef,
"class": _defineProperty(_defineProperty({}, "".concat(rateClass.value, "__tips"), true), "".concat(rateClass.value, "__tips--").concat(props2.placement), props2.placement),
"style": {
left: "".concat(tipsLeft.value, "px")
}
}, [actionType.value === "tap" ? createVNode("div", {
"style": "display: flex"
}, [props2.allowHalf && createVNode("div", {
"class": _defineProperty(_defineProperty({}, "".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);
}
}, [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")
}), createVNode("span", {
"class": "".concat(rateClass.value, "__tips-text")
}, [Math.ceil(popoverValue.value) - 0.5])]), createVNode("div", {
"class": _defineProperty(_defineProperty({}, "".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));
}
}, [h(iconComponent(Math.ceil(popoverValue.value), Math.ceil(popoverValue.value)), {
style: _objectSpread({}, colors.value),
class: "".concat(rateClass.value, "__icon ").concat(rateClass.value, "__icon--selected")
}), createVNode("span", {
"class": "".concat(rateClass.value, "__tips-text")
}, [Math.ceil(popoverValue.value)])])]) : createVNode("div", {
"class": "".concat(rateClass.value, "__tips-item"),
"onClick": function onClick() {
return onSelect(popoverValue.value);
}
}, [h(iconComponent(Math.ceil(popoverValue.value), popoverValue.value), {
style: _objectSpread({}, colors.value),
class: _defineProperty(_defineProperty(_defineProperty({}, "".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)
}), createVNode("span", {
"class": "".concat(rateClass.value, "__tips-text")
}, [popoverValue.value])])]);
};
return createVNode("div", {
"class": rootClasses.value
}, [renderRateWrapper(), renderRateText(), renderRateTips()]);
};
}
});
export { _Rate as default };
//# sourceMappingURL=rate.js.map