109 lines
14 KiB
JavaScript
109 lines
14 KiB
JavaScript
import{At as e,Ft as t,Ht as n,Nt as r,Q as i,U as a,W as o,X as s,Z as c,_ as l,at as u,ct as d,g as f,h as p,m,nt as h,ot as g,rt as _,st as v,vn as y,xn as b,xt as x,zt as S}from"./client-DrrW410h.js";import{c as C,l as w,o as T,r as E}from"./_plugin-vue_export-helper-2ZWAS1ss.js";import{n as D}from"./use-form-item-CNQ45NOh.js";import{G as O,U as k,V as A,Z as j,at as M,j as N}from"./index-cNEa5D1b.js";var P=typeof document<`u`&&typeof window<`u`,{cubicBezierEaseInOut:F}=f;function I({duration:e=`.2s`,delay:t=`.1s`}={}){return[h(`&.fade-in-width-expand-transition-leave-from, &.fade-in-width-expand-transition-enter-to`,{opacity:1}),h(`&.fade-in-width-expand-transition-leave-to, &.fade-in-width-expand-transition-enter-from`,`
|
|
opacity: 0!important;
|
|
margin-left: 0!important;
|
|
margin-right: 0!important;
|
|
`),h(`&.fade-in-width-expand-transition-leave-active`,`
|
|
overflow: hidden;
|
|
transition:
|
|
opacity ${e} ${F},
|
|
max-width ${e} ${F} ${t},
|
|
margin-left ${e} ${F} ${t},
|
|
margin-right ${e} ${F} ${t};
|
|
`),h(`&.fade-in-width-expand-transition-enter-active`,`
|
|
overflow: hidden;
|
|
transition:
|
|
opacity ${e} ${F} ${t},
|
|
max-width ${e} ${F},
|
|
margin-left ${e} ${F},
|
|
margin-right ${e} ${F};
|
|
`)]}var L=_(`base-wave`,`
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-radius: inherit;
|
|
`),R=e({name:`BaseWave`,props:{clsPrefix:{type:String,required:!0}},setup(e){p(`-base-wave`,L,b(e,`clsPrefix`));let t=y(null),r=y(!1),i=null;return n(()=>{i!==null&&window.clearTimeout(i)}),{active:r,selfRef:t,play(){i!==null&&(window.clearTimeout(i),r.value=!1,i=null),S(()=>{var e;(e=t.value)==null||e.offsetHeight,r.value=!0,i=window.setTimeout(()=>{r.value=!1,i=null},1e3)})}}},render(){let{clsPrefix:e}=this;return r(`div`,{ref:`selfRef`,"aria-hidden":!0,class:[`${e}-base-wave`,this.active&&`${e}-base-wave--active`]})}}),z=P&&`chrome`in window;P&&navigator.userAgent.includes(`Firefox`);var B=P&&navigator.userAgent.includes(`Safari`)&&!z;function V(e){return i(e,[255,255,255,.16])}function H(e){return i(e,[0,0,0,.12])}var U=s(`n-button-group`),W=h([_(`button`,`
|
|
margin: 0;
|
|
font-weight: var(--n-font-weight);
|
|
line-height: 1;
|
|
font-family: inherit;
|
|
padding: var(--n-padding);
|
|
height: var(--n-height);
|
|
font-size: var(--n-font-size);
|
|
border-radius: var(--n-border-radius);
|
|
color: var(--n-text-color);
|
|
background-color: var(--n-color);
|
|
width: var(--n-width);
|
|
white-space: nowrap;
|
|
outline: none;
|
|
position: relative;
|
|
z-index: auto;
|
|
border: none;
|
|
display: inline-flex;
|
|
flex-wrap: nowrap;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
`,[g(`color`,[u(`border`,{borderColor:`var(--n-border-color)`}),g(`disabled`,[u(`border`,{borderColor:`var(--n-border-color-disabled)`})]),v(`disabled`,[h(`&:focus`,[u(`state-border`,{borderColor:`var(--n-border-color-focus)`})]),h(`&:hover`,[u(`state-border`,{borderColor:`var(--n-border-color-hover)`})]),h(`&:active`,[u(`state-border`,{borderColor:`var(--n-border-color-pressed)`})]),g(`pressed`,[u(`state-border`,{borderColor:`var(--n-border-color-pressed)`})])])]),g(`disabled`,{backgroundColor:`var(--n-color-disabled)`,color:`var(--n-text-color-disabled)`},[u(`border`,{border:`var(--n-border-disabled)`})]),v(`disabled`,[h(`&:focus`,{backgroundColor:`var(--n-color-focus)`,color:`var(--n-text-color-focus)`},[u(`state-border`,{border:`var(--n-border-focus)`})]),h(`&:hover`,{backgroundColor:`var(--n-color-hover)`,color:`var(--n-text-color-hover)`},[u(`state-border`,{border:`var(--n-border-hover)`})]),h(`&:active`,{backgroundColor:`var(--n-color-pressed)`,color:`var(--n-text-color-pressed)`},[u(`state-border`,{border:`var(--n-border-pressed)`})]),g(`pressed`,{backgroundColor:`var(--n-color-pressed)`,color:`var(--n-text-color-pressed)`},[u(`state-border`,{border:`var(--n-border-pressed)`})])]),g(`loading`,`cursor: wait;`),_(`base-wave`,`
|
|
pointer-events: none;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
animation-iteration-count: 1;
|
|
animation-duration: var(--n-ripple-duration);
|
|
animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out);
|
|
`,[g(`active`,{zIndex:1,animationName:`button-wave-spread, button-wave-opacity`})]),P&&`MozBoxSizing`in document.createElement(`div`).style?h(`&::moz-focus-inner`,{border:0}):null,u(`border, state-border`,`
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: inherit;
|
|
transition: border-color .3s var(--n-bezier);
|
|
pointer-events: none;
|
|
`),u(`border`,`
|
|
border: var(--n-border);
|
|
`),u(`state-border`,`
|
|
border: var(--n-border);
|
|
border-color: #0000;
|
|
z-index: 1;
|
|
`),u(`icon`,`
|
|
margin: var(--n-icon-margin);
|
|
margin-left: 0;
|
|
height: var(--n-icon-size);
|
|
width: var(--n-icon-size);
|
|
max-width: var(--n-icon-size);
|
|
font-size: var(--n-icon-size);
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
`,[_(`icon-slot`,`
|
|
height: var(--n-icon-size);
|
|
width: var(--n-icon-size);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
`,[O({top:`50%`,originalTransform:`translateY(-50%)`})]),I()]),u(`content`,`
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
min-width: 0;
|
|
`,[h(`~`,[u(`icon`,{margin:`var(--n-icon-margin)`,marginRight:0})])]),g(`block`,`
|
|
display: flex;
|
|
width: 100%;
|
|
`),g(`dashed`,[u(`border, state-border`,{borderStyle:`dashed !important`})]),g(`disabled`,{cursor:`not-allowed`,opacity:`var(--n-opacity-disabled)`})]),h(`@keyframes button-wave-spread`,{from:{boxShadow:`0 0 0.5px 0 var(--n-ripple-color)`},to:{boxShadow:`0 0 0.5px 4.5px var(--n-ripple-color)`}}),h(`@keyframes button-wave-opacity`,{from:{opacity:`var(--n-wave-opacity)`},to:{opacity:0}})]),G=e({name:`Button`,props:Object.assign(Object.assign({},m.props),{color:String,textColor:String,text:Boolean,block:Boolean,loading:Boolean,disabled:Boolean,circle:Boolean,size:String,ghost:Boolean,round:Boolean,secondary:Boolean,tertiary:Boolean,quaternary:Boolean,strong:Boolean,focusable:{type:Boolean,default:!0},keyboard:{type:Boolean,default:!0},tag:{type:String,default:`button`},type:{type:String,default:`default`},dashed:Boolean,renderIcon:Function,iconPlacement:{type:String,default:`left`},attrType:{type:String,default:`button`},bordered:{type:Boolean,default:!0},onClick:[Function,Array],nativeFocusBehavior:{type:Boolean,default:!B},spinProps:Object}),slots:Object,setup(e){let n=y(null),r=y(null),i=y(!1),s=M(()=>!e.quaternary&&!e.tertiary&&!e.secondary&&!e.text&&(!e.color||e.ghost||e.dashed)&&e.bordered),u=t(U,{}),{inlineThemeDisabled:f,mergedClsPrefixRef:p,mergedRtlRef:h,mergedComponentPropsRef:g}=o(e),{mergedSizeRef:_}=D({},{defaultSize:`medium`,mergedSize:t=>{let{size:n}=e;if(n)return n;let{size:r}=u;if(r)return r;let{mergedSize:i}=t||{};return i?i.value:g?.value?.Button?.size||`medium`}}),v=x(()=>e.focusable&&!e.disabled),b=t=>{var r;v.value||t.preventDefault(),!e.nativeFocusBehavior&&(t.preventDefault(),!e.disabled&&v.value&&((r=n.value)==null||r.focus({preventScroll:!0})))},S=t=>{var n;if(!e.disabled&&!e.loading){let{onClick:i}=e;i&&C(i,t),e.text||(n=r.value)==null||n.play()}},T=t=>{switch(t.key){case`Enter`:if(!e.keyboard)return;i.value=!1}},E=t=>{switch(t.key){case`Enter`:if(!e.keyboard||e.loading){t.preventDefault();return}i.value=!0}},O=()=>{i.value=!1},k=m(`Button`,`-button`,W,N,e,p),A=l(`Button`,h,p),j=x(()=>{let{common:{cubicBezierEaseInOut:t,cubicBezierEaseOut:n},self:r}=k.value,{rippleDuration:i,opacityDisabled:a,fontWeight:o,fontWeightStrong:s}=r,l=_.value,{dashed:u,type:f,ghost:p,text:m,color:h,round:g,circle:v,textColor:y,secondary:b,tertiary:x,quaternary:S,strong:C}=e,w={"--n-font-weight":C?s:o},T={"--n-color":`initial`,"--n-color-hover":`initial`,"--n-color-pressed":`initial`,"--n-color-focus":`initial`,"--n-color-disabled":`initial`,"--n-ripple-color":`initial`,"--n-text-color":`initial`,"--n-text-color-hover":`initial`,"--n-text-color-pressed":`initial`,"--n-text-color-focus":`initial`,"--n-text-color-disabled":`initial`},E=f===`tertiary`,D=f==="default",O=E?`default`:f;if(m){let e=y||h;T={"--n-color":`#0000`,"--n-color-hover":`#0000`,"--n-color-pressed":`#0000`,"--n-color-focus":`#0000`,"--n-color-disabled":`#0000`,"--n-ripple-color":`#0000`,"--n-text-color":e||r[d(`textColorText`,O)],"--n-text-color-hover":e?V(e):r[d(`textColorTextHover`,O)],"--n-text-color-pressed":e?H(e):r[d(`textColorTextPressed`,O)],"--n-text-color-focus":e?V(e):r[d(`textColorTextHover`,O)],"--n-text-color-disabled":e||r[d(`textColorTextDisabled`,O)]}}else if(p||u){let e=y||h;T={"--n-color":`#0000`,"--n-color-hover":`#0000`,"--n-color-pressed":`#0000`,"--n-color-focus":`#0000`,"--n-color-disabled":`#0000`,"--n-ripple-color":h||r[d(`rippleColor`,O)],"--n-text-color":e||r[d(`textColorGhost`,O)],"--n-text-color-hover":e?V(e):r[d(`textColorGhostHover`,O)],"--n-text-color-pressed":e?H(e):r[d(`textColorGhostPressed`,O)],"--n-text-color-focus":e?V(e):r[d(`textColorGhostHover`,O)],"--n-text-color-disabled":e||r[d(`textColorGhostDisabled`,O)]}}else if(b){let e=D?r.textColor:E?r.textColorTertiary:r[d(`color`,O)],t=h||e,n=f!=="default"&&f!==`tertiary`;T={"--n-color":n?c(t,{alpha:Number(r.colorOpacitySecondary)}):r.colorSecondary,"--n-color-hover":n?c(t,{alpha:Number(r.colorOpacitySecondaryHover)}):r.colorSecondaryHover,"--n-color-pressed":n?c(t,{alpha:Number(r.colorOpacitySecondaryPressed)}):r.colorSecondaryPressed,"--n-color-focus":n?c(t,{alpha:Number(r.colorOpacitySecondaryHover)}):r.colorSecondaryHover,"--n-color-disabled":r.colorSecondary,"--n-ripple-color":`#0000`,"--n-text-color":t,"--n-text-color-hover":t,"--n-text-color-pressed":t,"--n-text-color-focus":t,"--n-text-color-disabled":t}}else if(x||S){let e=D?r.textColor:E?r.textColorTertiary:r[d(`color`,O)],t=h||e;x?(T[`--n-color`]=r.colorTertiary,T[`--n-color-hover`]=r.colorTertiaryHover,T[`--n-color-pressed`]=r.colorTertiaryPressed,T[`--n-color-focus`]=r.colorSecondaryHover,T[`--n-color-disabled`]=r.colorTertiary):(T[`--n-color`]=r.colorQuaternary,T[`--n-color-hover`]=r.colorQuaternaryHover,T[`--n-color-pressed`]=r.colorQuaternaryPressed,T[`--n-color-focus`]=r.colorQuaternaryHover,T[`--n-color-disabled`]=r.colorQuaternary),T[`--n-ripple-color`]=`#0000`,T[`--n-text-color`]=t,T[`--n-text-color-hover`]=t,T[`--n-text-color-pressed`]=t,T[`--n-text-color-focus`]=t,T[`--n-text-color-disabled`]=t}else T={"--n-color":h||r[d(`color`,O)],"--n-color-hover":h?V(h):r[d(`colorHover`,O)],"--n-color-pressed":h?H(h):r[d(`colorPressed`,O)],"--n-color-focus":h?V(h):r[d(`colorFocus`,O)],"--n-color-disabled":h||r[d(`colorDisabled`,O)],"--n-ripple-color":h||r[d(`rippleColor`,O)],"--n-text-color":y||(h?r.textColorPrimary:E?r.textColorTertiary:r[d(`textColor`,O)]),"--n-text-color-hover":y||(h?r.textColorHoverPrimary:r[d(`textColorHover`,O)]),"--n-text-color-pressed":y||(h?r.textColorPressedPrimary:r[d(`textColorPressed`,O)]),"--n-text-color-focus":y||(h?r.textColorFocusPrimary:r[d(`textColorFocus`,O)]),"--n-text-color-disabled":y||(h?r.textColorDisabledPrimary:r[d(`textColorDisabled`,O)])};let A={"--n-border":`initial`,"--n-border-hover":`initial`,"--n-border-pressed":`initial`,"--n-border-focus":`initial`,"--n-border-disabled":`initial`};A=m?{"--n-border":`none`,"--n-border-hover":`none`,"--n-border-pressed":`none`,"--n-border-focus":`none`,"--n-border-disabled":`none`}:{"--n-border":r[d(`border`,O)],"--n-border-hover":r[d(`borderHover`,O)],"--n-border-pressed":r[d(`borderPressed`,O)],"--n-border-focus":r[d(`borderFocus`,O)],"--n-border-disabled":r[d(`borderDisabled`,O)]};let{[d(`height`,l)]:j,[d(`fontSize`,l)]:M,[d(`padding`,l)]:N,[d(`paddingRound`,l)]:P,[d(`iconSize`,l)]:F,[d(`borderRadius`,l)]:I,[d(`iconMargin`,l)]:L,waveOpacity:R}=r,z={"--n-width":v&&!m?j:`initial`,"--n-height":m?`initial`:j,"--n-font-size":M,"--n-padding":v||m?`initial`:g?P:N,"--n-icon-size":F,"--n-icon-margin":L,"--n-border-radius":m?`initial`:v||g?j:I};return Object.assign(Object.assign(Object.assign(Object.assign({"--n-bezier":t,"--n-bezier-ease-out":n,"--n-ripple-duration":i,"--n-opacity-disabled":a,"--n-wave-opacity":R},w),T),A),z)}),P=f?a(`button`,x(()=>{let t=``,{dashed:n,type:r,ghost:i,text:a,color:o,round:s,circle:c,textColor:l,secondary:u,tertiary:d,quaternary:f,strong:p}=e;n&&(t+=`a`),i&&(t+=`b`),a&&(t+=`c`),s&&(t+=`d`),c&&(t+=`e`),u&&(t+=`f`),d&&(t+=`g`),f&&(t+=`h`),p&&(t+=`i`),o&&(t+=`j${w(o)}`),l&&(t+=`k${w(l)}`);let{value:m}=_;return t+=`l${m[0]}`,t+=`m${r[0]}`,t}),j,e):void 0;return{selfElRef:n,waveElRef:r,mergedClsPrefix:p,mergedFocusable:v,mergedSize:_,showBorder:s,enterPressed:i,rtlEnabled:A,handleMousedown:b,handleKeydown:E,handleBlur:O,handleKeyup:T,handleClick:S,customColorCssVars:x(()=>{let{color:t}=e;if(!t)return null;let n=V(t);return{"--n-border-color":t,"--n-border-color-hover":n,"--n-border-color-pressed":H(t),"--n-border-color-focus":n,"--n-border-color-disabled":t}}),cssVars:f?void 0:j,themeClass:P?.themeClass,onRender:P?.onRender}},render(){let{mergedClsPrefix:e,tag:t,onRender:n}=this;n?.();let i=T(this.$slots.default,t=>t&&r(`span`,{class:`${e}-button__content`},t));return r(t,{ref:`selfElRef`,class:[this.themeClass,`${e}-button`,`${e}-button--${this.type}-type`,`${e}-button--${this.mergedSize}-type`,this.rtlEnabled&&`${e}-button--rtl`,this.disabled&&`${e}-button--disabled`,this.block&&`${e}-button--block`,this.enterPressed&&`${e}-button--pressed`,!this.text&&this.dashed&&`${e}-button--dashed`,this.color&&`${e}-button--color`,this.secondary&&`${e}-button--secondary`,this.loading&&`${e}-button--loading`,this.ghost&&`${e}-button--ghost`],tabindex:this.mergedFocusable?0:-1,type:this.attrType,style:this.cssVars,disabled:this.disabled,onClick:this.handleClick,onBlur:this.handleBlur,onMousedown:this.handleMousedown,onKeyup:this.handleKeyup,onKeydown:this.handleKeydown},this.iconPlacement===`right`&&i,r(k,{width:!0},{default:()=>T(this.$slots.icon,t=>(this.loading||this.renderIcon||t)&&r(`span`,{class:`${e}-button__icon`,style:{margin:E(this.$slots.default)?`0`:``}},r(j,null,{default:()=>this.loading?r(A,Object.assign({clsPrefix:e,key:`loading`,class:`${e}-icon-slot`,strokeWidth:20},this.spinProps)):r(`div`,{key:`icon`,class:`${e}-icon-slot`,role:`none`},this.renderIcon?this.renderIcon():t)})))}),this.iconPlacement===`left`&&i,this.text?null:r(R,{ref:`waveElRef`,clsPrefix:e}),this.showBorder?r(`div`,{"aria-hidden":!0,class:`${e}-button__border`,style:this.customColorCssVars}):null,this.showBorder?r(`div`,{"aria-hidden":!0,class:`${e}-button__state-border`,style:this.customColorCssVars}):null)}}),K=G;export{P as a,B as i,K as n,U as r,G as t}; |