tdesign-mobile-vue
Version:
tdesign-mobile-vue
271 lines (263 loc) • 11.4 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 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 isArray = require('lodash/isArray');
var isObject = require('lodash/isObject');
var swiper_index = require('../swiper/index.js');
var noticeBar_props = require('./props.js');
var config = require('../config.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useClass = require('../hooks/useClass.js');
var shared_useVModel_index = require('../shared/useVModel/index.js');
require('../swiper/swiper.js');
require('@babel/runtime/helpers/typeof');
require('lodash/isNumber');
require('../swipe-cell/useSwipe.js');
require('@vueuse/core');
require('../shared/dom.js');
require('lodash/isFunction');
require('lodash/isString');
require('../shared/util.js');
require('../swiper/props.js');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../hooks/render-tnode.js');
require('lodash/isEmpty');
require('../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-8d930798.js');
require('../_chunks/dep-a20a5149.js');
require('dayjs');
require('../swiper/swiper-item.js');
require('../shared/component.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);
var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
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; }
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
}
var prefix = config["default"].prefix;
var iconDefault = {
info: vue.createVNode(tdesignIconsVueNext.InfoCircleFilledIcon, null, null),
success: vue.createVNode(tdesignIconsVueNext.CheckCircleFilledIcon, null, null),
warning: vue.createVNode(tdesignIconsVueNext.InfoCircleFilledIcon, null, null),
error: vue.createVNode(tdesignIconsVueNext.InfoCircleFilledIcon, null, null)
};
var _NoticeBar = vue.defineComponent({
name: "".concat(prefix, "-notice-bar"),
props: noticeBar_props["default"],
setup: function setup(props2) {
var noticeBarClass = hooks_useClass.usePrefixClass("notice-bar");
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var state = vue.reactive({
duration: 0,
offset: 0,
listWidth: 0,
itemWidth: 0,
timer: null,
nextTimer: null,
scroll: {
marquee: false,
speed: 50,
loop: -1,
delay: 0
}
});
var rootClasses = vue.computed(function () {
return ["".concat(noticeBarClass.value), "".concat(noticeBarClass.value, "--").concat(props2.theme)];
});
function handleClick(trigger) {
var _props2$onClick;
(_props2$onClick = props2.onClick) === null || _props2$onClick === void 0 || _props2$onClick.call(props2, trigger);
}
var animateStyle = vue.computed(function () {
return {
transform: state.offset ? "translateX(".concat(state.offset, "px)") : "",
transitionDuration: "".concat(state.duration, "s"),
transitionTimingFunction: "linear"
};
});
var listDOM = vue.ref();
var itemDOM = vue.ref();
var _toRefs = vue.toRefs(props2),
visible = _toRefs.visible,
modelValue = _toRefs.modelValue;
var _useVModel = shared_useVModel_index.useVModel(visible, modelValue, props2.defaultVisible),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
isShow = _useVModel2[0];
_useVModel2[1];
function handleScrolling() {
var _ref;
if (!(props2 !== null && props2 !== void 0 && props2.marquee) || ((_ref = isObject__default["default"](props2 === null || props2 === void 0 ? void 0 : props2.marquee) && (props2 === null || props2 === void 0 ? void 0 : props2.marquee)) === null || _ref === void 0 ? void 0 : _ref.loop) === 0) {
return;
}
if (typeof props2.marquee === "boolean") {
state.scroll = _objectSpread(_objectSpread({}, state.scroll), {}, {
marquee: props2.marquee
});
}
if (isObject__default["default"](props2.marquee)) {
var _marquee$speed, _marquee$delay;
var marquee = props2.marquee;
state.scroll = {
marquee: true,
loop: typeof (marquee === null || marquee === void 0 ? void 0 : marquee.loop) === "undefined" ? state.scroll.loop : marquee.loop,
speed: (_marquee$speed = marquee.speed) !== null && _marquee$speed !== void 0 ? _marquee$speed : state.scroll.speed,
delay: (_marquee$delay = marquee.delay) !== null && _marquee$delay !== void 0 ? _marquee$delay : state.scroll.delay
};
}
setTimeout(function () {
var _listDOM$value, _itemDOM$value;
var listDOMWidth = (_listDOM$value = listDOM.value) === null || _listDOM$value === void 0 ? void 0 : _listDOM$value.getBoundingClientRect().width;
var itemDOMWidth = (_itemDOM$value = itemDOM.value) === null || _itemDOM$value === void 0 ? void 0 : _itemDOM$value.getBoundingClientRect().width;
if (itemDOMWidth >= listDOMWidth) {
state.offset = -itemDOMWidth;
state.duration = itemDOMWidth / state.scroll.speed;
state.listWidth = listDOMWidth;
state.itemWidth = itemDOMWidth;
}
}, state.scroll.delay);
}
function handleTransitionend() {
state.scroll.loop = --state.scroll.loop;
if (state.scroll.loop === 0) {
state.scroll = _objectSpread(_objectSpread({}, state.scroll), {}, {
marquee: false
});
return;
}
state.offset = state.listWidth;
state.duration = 0;
setTimeout(function () {
state.offset = -state.itemWidth;
state.duration = (state.itemWidth + state.listWidth) / state.scroll.speed;
}, 0);
}
vue.onMounted(function () {
vue.nextTick(function () {
if (isShow.value) {
handleScrolling();
}
});
});
vue.watch(function () {
return isShow.value;
}, function () {
vue.nextTick(function () {
if (isShow.value) {
state.offset = state.listWidth;
state.duration = 0;
handleScrolling();
}
});
});
return function () {
if (isShow.value) {
var renderPrefixIcon = function renderPrefixIcon() {
var prefixIconContent = renderTNodeJSX("prefixIcon", {
defaultNode: iconDefault[props2.theme || "info"]
});
if (props2.prefixIcon && prefixIconContent) {
return vue.createVNode("div", {
"class": "".concat(noticeBarClass.value, "__prefix-icon"),
"onClick": function onClick() {
return handleClick("prefix-icon");
}
}, [prefixIconContent]);
}
};
var renderContent = function renderContent() {
var _slot;
var renderShowContent = function renderShowContent() {
var showContent = renderTNodeJSX("content");
if (!showContent) {
return null;
}
return showContent;
};
var renderOperationContent = function renderOperationContent() {
var operationContent = renderTNodeJSX("operation");
if (!operationContent) {
return null;
}
return vue.createVNode("span", {
"class": "".concat(noticeBarClass.value, "__operation"),
"onClick": function onClick(event) {
event.stopPropagation();
handleClick("operation");
}
}, [operationContent]);
};
return vue.createVNode("div", {
"ref": listDOM,
"class": "".concat(noticeBarClass.value, "__content-wrap"),
"onClick": function onClick() {
return handleClick("content");
}
}, [props2.direction === "vertical" && isArray__default["default"](props2.content) ? vue.createVNode("div", null, [vue.createVNode(swiper_index.Swiper, {
"autoplay": true,
"loop": true,
"direction": "vertical",
"duration": 2e3,
"height": 22,
"class": "".concat(noticeBarClass.value, "__content--vertical")
}, _isSlot(_slot = props2.content.map(function (item, index) {
return vue.createVNode(swiper_index.SwiperItem, {
"key": index
}, {
default: function _default() {
return [vue.createVNode("div", {
"class": "".concat(noticeBarClass.value, "__content--vertical-item")
}, [item])];
}
});
})) ? _slot : {
default: function _default() {
return [_slot];
}
})]) : vue.createVNode("div", {
"ref": itemDOM,
"class": ["".concat(noticeBarClass.value, "__content"), !state.scroll.marquee ? "".concat(noticeBarClass.value, "__content-wrapable") : ""],
"style": state.scroll.marquee ? animateStyle.value : "",
"onTransitionend": handleTransitionend
}, [renderShowContent(), renderOperationContent()])]);
};
var renderSuffixIconContent = function renderSuffixIconContent() {
var suffixIconContent = renderTNodeJSX("suffixIcon");
if (!suffixIconContent) {
return null;
}
return vue.createVNode("div", {
"class": "".concat(noticeBarClass.value, "__suffix-icon"),
"onClick": function onClick() {
return handleClick("suffix-icon");
}
}, [suffixIconContent]);
};
return vue.createVNode("div", {
"class": rootClasses.value
}, [renderPrefixIcon(), renderContent(), renderSuffixIconContent()]);
}
return null;
};
}
});
exports["default"] = _NoticeBar;
//# sourceMappingURL=notice-bar.js.map