tdesign-mobile-vue
Version:
tdesign-mobile-vue
260 lines (256 loc) • 10.5 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 { createVNode, defineComponent, reactive, computed, ref, toRefs, onMounted, nextTick, watch, isVNode } from 'vue';
import { InfoCircleFilledIcon, CheckCircleFilledIcon } from 'tdesign-icons-vue-next';
import isArray from 'lodash/isArray';
import isObject from 'lodash/isObject';
import { Swiper, SwiperItem } from '../swiper/index.js';
import props from './props.js';
import config from '../config.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useVModel } from '../shared/useVModel/index.js';
import '../swiper/swiper.js';
import '@babel/runtime/helpers/typeof';
import 'lodash/isNumber';
import '../swipe-cell/useSwipe.js';
import '@vueuse/core';
import '../shared/dom.js';
import 'lodash/isFunction';
import 'lodash/isString';
import '../shared/util.js';
import '../swiper/props.js';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import 'lodash/isEmpty';
import '../config-provider/useConfig.js';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
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 '../_chunks/dep-eb734424.js';
import 'dayjs';
import '../swiper/swiper-item.js';
import '../shared/component.js';
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; }
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var prefix = config.prefix;
var iconDefault = {
info: createVNode(InfoCircleFilledIcon, null, null),
success: createVNode(CheckCircleFilledIcon, null, null),
warning: createVNode(InfoCircleFilledIcon, null, null),
error: createVNode(InfoCircleFilledIcon, null, null)
};
var _NoticeBar = defineComponent({
name: "".concat(prefix, "-notice-bar"),
props: props,
setup: function setup(props2) {
var noticeBarClass = usePrefixClass("notice-bar");
var renderTNodeJSX = useTNodeJSX();
var state = reactive({
duration: 0,
offset: 0,
listWidth: 0,
itemWidth: 0,
timer: null,
nextTimer: null,
scroll: {
marquee: false,
speed: 50,
loop: -1,
delay: 0
}
});
var rootClasses = 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 = computed(function () {
return {
transform: state.offset ? "translateX(".concat(state.offset, "px)") : "",
transitionDuration: "".concat(state.duration, "s"),
transitionTimingFunction: "linear"
};
});
var listDOM = ref();
var itemDOM = ref();
var _toRefs = toRefs(props2),
visible = _toRefs.visible,
modelValue = _toRefs.modelValue;
var _useVModel = useVModel(visible, modelValue, props2.defaultVisible),
_useVModel2 = _slicedToArray(_useVModel, 2),
isShow = _useVModel2[0];
_useVModel2[1];
function handleScrolling() {
var _ref;
if (!(props2 !== null && props2 !== void 0 && props2.marquee) || ((_ref = isObject(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(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);
}
onMounted(function () {
nextTick(function () {
if (isShow.value) {
handleScrolling();
}
});
});
watch(function () {
return isShow.value;
}, function () {
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 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 createVNode("span", {
"class": "".concat(noticeBarClass.value, "__operation"),
"onClick": function onClick(event) {
event.stopPropagation();
handleClick("operation");
}
}, [operationContent]);
};
return createVNode("div", {
"ref": listDOM,
"class": "".concat(noticeBarClass.value, "__content-wrap"),
"onClick": function onClick() {
return handleClick("content");
}
}, [props2.direction === "vertical" && isArray(props2.content) ? createVNode("div", null, [createVNode(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 createVNode(SwiperItem, {
"key": index
}, {
default: function _default() {
return [createVNode("div", {
"class": "".concat(noticeBarClass.value, "__content--vertical-item")
}, [item])];
}
});
})) ? _slot : {
default: function _default() {
return [_slot];
}
})]) : 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 createVNode("div", {
"class": "".concat(noticeBarClass.value, "__suffix-icon"),
"onClick": function onClick() {
return handleClick("suffix-icon");
}
}, [suffixIconContent]);
};
return createVNode("div", {
"class": rootClasses.value
}, [renderPrefixIcon(), renderContent(), renderSuffixIconContent()]);
}
return null;
};
}
});
export { _NoticeBar as default };
//# sourceMappingURL=notice-bar.js.map