vxe-pc-ui 4.9.26 → 4.9.28

package/lib/notice-bar/src/notice-bar.js

@@ -32,7 +32,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       default: () => (0, _ui.getConfig)().noticeBar.size || (0, _ui.getConfig)().size
     }
   },
-  emits: [],
+  emits: ['start', 'end'],
   setup(props, context) {
     const {
       slots,
@@ -46,6 +46,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refElem = (0, _vue.ref)();
     const refContentElem = (0, _vue.ref)();
     const reactData = (0, _vue.reactive)({
+      animationStatus: false,
       animationDuration: 0
     });
     const refMaps = {
@@ -93,15 +94,29 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         reactData.animationDuration = Math.ceil(contEl.scrollWidth / sRate);
       }
     };
+    const animationStartEvent = evnt => {
+      reactData.animationStatus = true;
+      dispatchEvent('start', {
+        status: true
+      }, evnt);
+    };
+    const animationEndEvent = evnt => {
+      reactData.animationStatus = false;
+      dispatchEvent('end', {
+        status: false
+      }, evnt);
+    };
     Object.assign($xeNoticeBar, noticeBarMethods, noticeBarPrivateMethods);
     const renderVN = () => {
       const {
         vertical,
         duration,
-        direction
+        direction,
+        loop
       } = props;
       const {
-        animationDuration
+        animationDuration,
+        animationStatus
       } = reactData;
       const vSize = computeSize.value;
       const noticeText = computeNoticeText.value;
@@ -111,7 +126,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       return (0, _vue.h)('div', {
         ref: refElem,
         class: ['vxe-notice-bar', `is--${vertical ? 'vertical' : 'horizontal'}`, `dir--${direction || 'left'}`, {
-          [`size--${vSize}`]: vSize
+          [`size--${vSize}`]: vSize,
+          'is--loop': loop
         }]
       }, [prefixSlot ? (0, _vue.h)('div', {
         class: 'vxe-notice-bar--prefix'
@@ -121,10 +137,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         ref: refContentElem,
         class: 'vxe-notice-bar--inner'
       }, [(0, _vue.h)('div', {
-        class: 'vxe-notice-bar--wrapper',
+        class: ['vxe-notice-bar--wrapper', `is--${animationStatus ? 'progress' : 'end'}`],
         style: {
           animationDuration: duration ? (0, _dom.toCssUnit)(duration, 's') : `${animationDuration}s`
-        }
+        },
+        onAnimationstart: animationStartEvent,
+        onAnimationend: animationEndEvent
       }, defaultSlot ? defaultSlot({}) : noticeText)])]), suffixSlot ? (0, _vue.h)('div', {
         class: 'vxe-notice-bar--suffix'
       }, suffixSlot({})) : (0, _ui.renderEmptyElement)($xeNoticeBar)]);

package/lib/notice-bar/src/notice-bar.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeNoticeBar",props:{duration:[String,Number],direction:{type:String,default:()=>(0,_ui.getConfig)().noticeBar.direction},speed:{type:String,default:()=>(0,_ui.getConfig)().noticeBar.speed},content:String,vertical:Boolean,loop:{type:Boolean},size:{type:String,default:()=>(0,_ui.getConfig)().noticeBar.size||(0,_ui.getConfig)().size}},emits:[],setup(l,e){const{slots:c,emit:r}=e,t=(0,_vue.inject)("$xeTabs",null);var i=_xeUtils.default.uniqueId();const v=(0,_ui.useSize)(l)["computeSize"],d=(0,_vue.ref)(),_=(0,_vue.ref)(),f=(0,_vue.reactive)({animationDuration:0}),n={refElem:d},p=(0,_vue.computed)(()=>{var e=l["content"];return""+(e||"")});var u=(0,_vue.computed)(()=>t?t.reactData.resizeFlag:null);const o={},m={xID:i,props:l,context:e,reactData:f,getRefMaps:()=>n,getComputeMaps:()=>o};const a=()=>{var t=l["speed"],i=_.value;if(i){let e=46;"fast"===t?e=118:"slow"===t&&(e=18),f.animationDuration=Math.ceil(i.scrollWidth/e)}};Object.assign(m,{dispatchEvent:(e,t,i)=>{r(e,(0,_ui.createEvent)(i,{$noticeBar:m},t))}},{});return(0,_vue.watch)(u,()=>{a()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(m,"resize",a),a()}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(m,"resize")}),m.renderVN=()=>{var{vertical:e,duration:t,direction:i}=l,r=f["animationDuration"],n=v.value,u=p.value,o=c.default,a=c.prefix,s=c.suffix;return(0,_vue.h)("div",{ref:d,class:["vxe-notice-bar","is--"+(e?"vertical":"horizontal"),"dir--"+(i||"left"),{["size--"+n]:n}]},[a?(0,_vue.h)("div",{class:"vxe-notice-bar--prefix"},a({})):(0,_ui.renderEmptyElement)(m),(0,_vue.h)("div",{class:"vxe-notice-bar--content"},[(0,_vue.h)("div",{ref:_,class:"vxe-notice-bar--inner"},[(0,_vue.h)("div",{class:"vxe-notice-bar--wrapper",style:{animationDuration:t?(0,_dom.toCssUnit)(t,"s"):r+"s"}},o?o({}):u)])]),s?(0,_vue.h)("div",{class:"vxe-notice-bar--suffix"},s({})):(0,_ui.renderEmptyElement)(m)])},m},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeNoticeBar",props:{duration:[String,Number],direction:{type:String,default:()=>(0,_ui.getConfig)().noticeBar.direction},speed:{type:String,default:()=>(0,_ui.getConfig)().noticeBar.speed},content:String,vertical:Boolean,loop:{type:Boolean},size:{type:String,default:()=>(0,_ui.getConfig)().noticeBar.size||(0,_ui.getConfig)().size}},emits:["start","end"],setup(v,e){const{slots:d,emit:n}=e,t=(0,_vue.inject)("$xeTabs",null);var i=_xeUtils.default.uniqueId();const _=(0,_ui.useSize)(v)["computeSize"],p=(0,_vue.ref)(),f=(0,_vue.ref)(),m=(0,_vue.reactive)({animationStatus:!1,animationDuration:0}),r={refElem:p},x=(0,_vue.computed)(()=>{var e=v["content"];return""+(e||"")});var a=(0,_vue.computed)(()=>t?t.reactData.resizeFlag:null);const o={},g={xID:i,props:v,context:e,reactData:m,getRefMaps:()=>r,getComputeMaps:()=>o},u=(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$noticeBar:g},t))};i={dispatchEvent:u};const s=()=>{var t=v["speed"],i=f.value;if(i){let e=46;"fast"===t?e=118:"slow"===t&&(e=18),m.animationDuration=Math.ceil(i.scrollWidth/e)}},b=e=>{m.animationStatus=!0,u("start",{status:!0},e)},h=e=>{m.animationStatus=!1,u("end",{status:!1},e)};Object.assign(g,i,{});return(0,_vue.watch)(a,()=>{s()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(g,"resize",s),s()}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(g,"resize")}),g.renderVN=()=>{var{vertical:e,duration:t,direction:i,loop:n}=v,{animationDuration:r,animationStatus:a}=m,o=_.value,u=x.value,s=d.default,l=d.prefix,c=d.suffix;return(0,_vue.h)("div",{ref:p,class:["vxe-notice-bar","is--"+(e?"vertical":"horizontal"),"dir--"+(i||"left"),{["size--"+o]:o,"is--loop":n}]},[l?(0,_vue.h)("div",{class:"vxe-notice-bar--prefix"},l({})):(0,_ui.renderEmptyElement)(g),(0,_vue.h)("div",{class:"vxe-notice-bar--content"},[(0,_vue.h)("div",{ref:f,class:"vxe-notice-bar--inner"},[(0,_vue.h)("div",{class:["vxe-notice-bar--wrapper","is--"+(a?"progress":"end")],style:{animationDuration:t?(0,_dom.toCssUnit)(t,"s"):r+"s"},onAnimationstart:b,onAnimationend:h},s?s({}):u)])]),c?(0,_vue.h)("div",{class:"vxe-notice-bar--suffix"},c({})):(0,_ui.renderEmptyElement)(g)])},g},render(){return this.renderVN()}});

package/lib/notice-bar/style/style.css

@@ -32,14 +32,21 @@
   animation-play-state: running;
 }
 
+.vxe-notice-bar.is--loop .vxe-notice-bar--wrapper {
+  animation-iteration-count: infinite;
+}
 .vxe-notice-bar.is--horizontal.dir--left .vxe-notice-bar--wrapper {
-  padding-left: 100%;
   animation-name: scrollLeftText;
 }
 .vxe-notice-bar.is--horizontal.dir--right .vxe-notice-bar--wrapper {
-  padding-left: 100%;
   animation-name: scrollRightText;
 }
+.vxe-notice-bar.is--horizontal.dir--left .vxe-notice-bar--wrapper, .vxe-notice-bar.is--horizontal.dir--right .vxe-notice-bar--wrapper {
+  padding-left: 100%;
+}
+.vxe-notice-bar.is--horizontal.dir--left .vxe-notice-bar--wrapper.is--end, .vxe-notice-bar.is--horizontal.dir--right .vxe-notice-bar--wrapper.is--end {
+  padding-left: 0;
+}
 .vxe-notice-bar.is--horizontal .vxe-notice-bar--wrapper:hover {
   animation-play-state: paused;
 }

package/lib/notice-bar/style/style.min.css

@@ -1 +1 @@
-.vxe-notice-bar{display:flex;flex-direction:row;font-size:var(--vxe-ui-font-size-default);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-notice-bar--prefix,.vxe-notice-bar--suffix{flex-shrink:0}.vxe-notice-bar--content{flex-grow:1;overflow:hidden;padding:0 .2em}.vxe-notice-bar--inner{overflow:hidden}.vxe-notice-bar--wrapper{display:inline-block;white-space:nowrap;animation-duration:15s;animation-timing-function:linear;animation-delay:0s;animation-direction:normal;animation-fill-mode:none;animation-play-state:running}.vxe-notice-bar.is--horizontal.dir--left .vxe-notice-bar--wrapper{padding-left:100%;animation-name:scrollLeftText}.vxe-notice-bar.is--horizontal.dir--right .vxe-notice-bar--wrapper{padding-left:100%;animation-name:scrollRightText}.vxe-notice-bar.is--horizontal .vxe-notice-bar--wrapper:hover{animation-play-state:paused}@keyframes scrollRightText{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes scrollLeftText{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}.vxe-notice-bar.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-notice-bar.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-notice-bar.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-notice-bar{display:flex;flex-direction:row;font-size:var(--vxe-ui-font-size-default);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-notice-bar--prefix,.vxe-notice-bar--suffix{flex-shrink:0}.vxe-notice-bar--content{flex-grow:1;overflow:hidden;padding:0 .2em}.vxe-notice-bar--inner{overflow:hidden}.vxe-notice-bar--wrapper{display:inline-block;white-space:nowrap;animation-duration:15s;animation-timing-function:linear;animation-delay:0s;animation-direction:normal;animation-fill-mode:none;animation-play-state:running}.vxe-notice-bar.is--loop .vxe-notice-bar--wrapper{animation-iteration-count:infinite}.vxe-notice-bar.is--horizontal.dir--left .vxe-notice-bar--wrapper{animation-name:scrollLeftText}.vxe-notice-bar.is--horizontal.dir--right .vxe-notice-bar--wrapper{animation-name:scrollRightText}.vxe-notice-bar.is--horizontal.dir--left .vxe-notice-bar--wrapper,.vxe-notice-bar.is--horizontal.dir--right .vxe-notice-bar--wrapper{padding-left:100%}.vxe-notice-bar.is--horizontal.dir--left .vxe-notice-bar--wrapper.is--end,.vxe-notice-bar.is--horizontal.dir--right .vxe-notice-bar--wrapper.is--end{padding-left:0}.vxe-notice-bar.is--horizontal .vxe-notice-bar--wrapper:hover{animation-play-state:paused}@keyframes scrollRightText{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}@keyframes scrollLeftText{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}.vxe-notice-bar.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-notice-bar.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-notice-bar.size--mini{font-size:var(--vxe-ui-font-size-mini)}