mirror of https://github.com/allinssl/allinssl
2 lines
8.8 KiB
JavaScript
2 lines
8.8 KiB
JavaScript
import{d as e,r as n,k as a,x as t,V as r,J as o,H as i,D as s,b4 as l,E as u,b5 as d,F as m,G as p,b6 as c,b7 as f,ar as b,R as v,T as h,b8 as g,aN as y,b9 as x,I as w,K as $,ba as z,bb as N,o as k,aU as Y,aW as B,M as P,bc as S}from"./main-e4AvE_no.js";const O=e({name:"SlotMachineNumber",props:{clsPrefix:{type:String,required:!0},value:{type:[Number,String],required:!0},oldOriginalNumber:{type:Number,default:void 0},newOriginalNumber:{type:Number,default:void 0}},setup(e){const s=n(null),l=n(e.value),u=n(e.value),d=n("up"),m=n(!1),p=a((()=>m.value?`${e.clsPrefix}-base-slot-machine-current-number--${d.value}-scroll`:null)),c=a((()=>m.value?`${e.clsPrefix}-base-slot-machine-old-number--${d.value}-scroll`:null));function f(){const n=e.newOriginalNumber,a=e.oldOriginalNumber;void 0!==a&&void 0!==n&&(n>a?b("up"):a>n&&b("down"))}function b(e){d.value=e,m.value=!1,r((()=>{var e;null===(e=s.value)||void 0===e||e.offsetWidth,m.value=!0}))}return t(o(e,"value"),((e,n)=>{l.value=n,u.value=e,r(f)})),()=>{const{clsPrefix:n}=e;return i("span",{ref:s,class:`${n}-base-slot-machine-number`},null!==l.value?i("span",{class:[`${n}-base-slot-machine-old-number ${n}-base-slot-machine-old-number--top`,c.value]},l.value):null,i("span",{class:[`${n}-base-slot-machine-current-number`,p.value]},i("span",{ref:"numberWrapper",class:[`${n}-base-slot-machine-current-number__inner`,"number"!=typeof e.value&&`${n}-base-slot-machine-current-number__inner--not-number`]},u.value)),null!==l.value?i("span",{class:[`${n}-base-slot-machine-old-number ${n}-base-slot-machine-old-number--bottom`,c.value]},l.value):null)}}}),{cubicBezierEaseOut:C}=l;const E=s([s("@keyframes n-base-slot-machine-fade-up-in","\n from {\n transform: translateY(60%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n "),s("@keyframes n-base-slot-machine-fade-down-in","\n from {\n transform: translateY(-60%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n "),s("@keyframes n-base-slot-machine-fade-up-out","\n from {\n transform: translateY(0%);\n opacity: 1;\n }\n to {\n transform: translateY(-60%);\n opacity: 0;\n }\n "),s("@keyframes n-base-slot-machine-fade-down-out","\n from {\n transform: translateY(0%);\n opacity: 1;\n }\n to {\n transform: translateY(60%);\n opacity: 0;\n }\n "),u("base-slot-machine","\n overflow: hidden;\n white-space: nowrap;\n display: inline-block;\n height: 18px;\n line-height: 18px;\n ",[u("base-slot-machine-number","\n display: inline-block;\n position: relative;\n height: 18px;\n width: .6em;\n max-width: .6em;\n ",[function({duration:e=".2s"}={}){return[s("&.fade-up-width-expand-transition-leave-active",{transition:`\n opacity ${e} ${C},\n max-width ${e} ${C},\n transform ${e} ${C}\n `}),s("&.fade-up-width-expand-transition-enter-active",{transition:`\n opacity ${e} ${C},\n max-width ${e} ${C},\n transform ${e} ${C}\n `}),s("&.fade-up-width-expand-transition-enter-to",{opacity:1,transform:"translateX(0) translateY(0)"}),s("&.fade-up-width-expand-transition-enter-from",{maxWidth:"0 !important",opacity:0,transform:"translateY(60%)"}),s("&.fade-up-width-expand-transition-leave-from",{opacity:1,transform:"translateY(0)"}),s("&.fade-up-width-expand-transition-leave-to",{maxWidth:"0 !important",opacity:0,transform:"translateY(60%)"})]}({duration:".2s"}),d({duration:".2s",delay:"0s"}),u("base-slot-machine-old-number","\n display: inline-block;\n opacity: 0;\n position: absolute;\n left: 0;\n right: 0;\n ",[m("top",{transform:"translateY(-100%)"}),m("bottom",{transform:"translateY(100%)"}),m("down-scroll",{animation:"n-base-slot-machine-fade-down-out .2s cubic-bezier(0, 0, .2, 1)",animationIterationCount:1}),m("up-scroll",{animation:"n-base-slot-machine-fade-up-out .2s cubic-bezier(0, 0, .2, 1)",animationIterationCount:1})]),u("base-slot-machine-current-number","\n display: inline-block;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n transform: translateY(0);\n width: .6em;\n ",[m("down-scroll",{animation:"n-base-slot-machine-fade-down-in .2s cubic-bezier(0, 0, .2, 1)",animationIterationCount:1}),m("up-scroll",{animation:"n-base-slot-machine-fade-up-in .2s cubic-bezier(0, 0, .2, 1)",animationIterationCount:1}),p("inner","\n display: inline-block;\n position: absolute;\n right: 0;\n top: 0;\n width: .6em;\n ",[m("not-number","\n right: unset;\n left: 0;\n ")])])])])]),I=e({name:"BaseSlotMachine",props:{clsPrefix:{type:String,required:!0},value:{type:[Number,String],default:0},max:{type:Number,default:void 0},appeared:{type:Boolean,required:!0}},setup(e){c("-base-slot-machine",E,o(e,"clsPrefix"));const r=n(),s=n(),l=a((()=>{if("string"==typeof e.value)return[];if(e.value<1)return[0];const n=[];let a=e.value;for(void 0!==e.max&&(a=Math.min(e.max,a));a>=1;)n.push(a%10),a/=10,a=Math.floor(a);return n.reverse(),n}));return t(o(e,"value"),((e,n)=>{"string"==typeof e?(s.value=void 0,r.value=void 0):"string"==typeof n?(s.value=e,r.value=void 0):(s.value=e,r.value=n)})),()=>{const{value:n,clsPrefix:a}=e;return"number"==typeof n?i("span",{class:`${a}-base-slot-machine`},i(f,{name:"fade-up-width-expand-transition",tag:"span"},{default:()=>l.value.map(((e,n)=>i(O,{clsPrefix:a,key:l.value.length-n-1,oldOriginalNumber:r.value,newOriginalNumber:s.value,value:e})))}),i(b,{key:"+",width:!0},{default:()=>void 0!==e.max&&e.max<n?i(O,{clsPrefix:a,value:"+"}):null})):i("span",{class:`${a}-base-slot-machine`},n)}}}),A=s([s("@keyframes badge-wave-spread",{from:{boxShadow:"0 0 0.5px 0px var(--n-ripple-color)",opacity:.6},to:{boxShadow:"0 0 0.5px 4.5px var(--n-ripple-color)",opacity:0}}),u("badge","\n display: inline-flex;\n position: relative;\n vertical-align: middle;\n font-family: var(--n-font-family);\n ",[m("as-is",[u("badge-sup",{position:"static",transform:"translateX(0)"},[v({transformOrigin:"left bottom",originalTransform:"translateX(0)"})])]),m("dot",[u("badge-sup","\n height: 8px;\n width: 8px;\n padding: 0;\n min-width: 8px;\n left: 100%;\n bottom: calc(100% - 4px);\n ",[s("::before","border-radius: 4px;")])]),u("badge-sup","\n background: var(--n-color);\n transition:\n background-color .3s var(--n-bezier),\n color .3s var(--n-bezier);\n color: #FFF;\n position: absolute;\n height: 18px;\n line-height: 18px;\n border-radius: 9px;\n padding: 0 6px;\n text-align: center;\n font-size: var(--n-font-size);\n transform: translateX(-50%);\n left: 100%;\n bottom: calc(100% - 9px);\n font-variant-numeric: tabular-nums;\n z-index: 2;\n display: flex;\n align-items: center;\n ",[v({transformOrigin:"left bottom",originalTransform:"translateX(-50%)"}),u("base-wave",{zIndex:1,animationDuration:"2s",animationIterationCount:"infinite",animationDelay:"1s",animationTimingFunction:"var(--n-ripple-bezier)",animationName:"badge-wave-spread"}),s("&::before",'\n opacity: 0;\n transform: scale(1);\n border-radius: 9px;\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n ')])])]),R=e({name:"Badge",props:Object.assign(Object.assign({},$.props),{value:[String,Number],max:Number,dot:Boolean,type:{type:String,default:"default"},show:{type:Boolean,default:!0},showZero:Boolean,processing:Boolean,color:String,offset:Array}),setup(e,{slots:t}){const{mergedClsPrefixRef:r,inlineThemeDisabled:o,mergedRtlRef:i}=w(e),s=$("Badge","-badge",A,z,e,r),l=n(!1),u=a((()=>e.show&&(e.dot||void 0!==e.value&&!(!e.showZero&&Number(e.value)<=0)||!N(t.value))));k((()=>{u.value&&(l.value=!0)}));const d=Y("Badge",i,r),m=a((()=>{const{type:n,color:a}=e,{common:{cubicBezierEaseInOut:t,cubicBezierEaseOut:r},self:{[B("color",n)]:o,fontFamily:i,fontSize:l}}=s.value;return{"--n-font-size":l,"--n-font-family":i,"--n-color":a||o,"--n-ripple-color":a||o,"--n-bezier":t,"--n-ripple-bezier":r}})),p=o?P("badge",a((()=>{let n="";const{type:a,color:t}=e;return a&&(n+=a[0]),t&&(n+=S(t)),n})),m,e):void 0,c=a((()=>{const{offset:n}=e;if(!n)return;const[a,t]=n,r="number"==typeof a?`${a}px`:a,o="number"==typeof t?`${t}px`:t;return{transform:`translate(calc(${(null==d?void 0:d.value)?"50%":"-50%"} + ${r}), ${o})`}}));return{rtlEnabled:d,mergedClsPrefix:r,appeared:l,showBadge:u,handleAfterEnter:()=>{l.value=!0},handleAfterLeave:()=>{l.value=!1},cssVars:o?void 0:m,themeClass:null==p?void 0:p.themeClass,onRender:null==p?void 0:p.onRender,offsetStyle:c}},render(){var e;const{mergedClsPrefix:n,onRender:a,themeClass:t,$slots:r}=this;null==a||a();const o=null===(e=r.default)||void 0===e?void 0:e.call(r);return i("div",{class:[`${n}-badge`,this.rtlEnabled&&`${n}-badge--rtl`,t,{[`${n}-badge--dot`]:this.dot,[`${n}-badge--as-is`]:!o}],style:this.cssVars},o,i(h,{name:"fade-in-scale-up-transition",onAfterEnter:this.handleAfterEnter,onAfterLeave:this.handleAfterLeave},{default:()=>this.showBadge?i("sup",{class:`${n}-badge-sup`,title:g(this.value),style:this.offsetStyle},y(r.value,(()=>[this.dot?null:i(I,{clsPrefix:n,appeared:this.appeared,max:this.max,value:this.value})])),this.processing?i(x,{clsPrefix:n}):null):null}))}});export{R as N};
|