188 lines
16 KiB
JavaScript
188 lines
16 KiB
JavaScript
import{h as w,A as fe,d as W,u as Y,bB as q,r as U,j as A,z as X,t as E,_ as h,g as C,b as i,e as T,x as p,bL as ve,bj as ge,bk as pe,D as ke,a3 as me,k as P,eb as xe,I as Z,ba as M,n as ee,cm as ye,be as Ce,bI as we,bD as Re,E as Q,ec as ze,bw as Se}from"./index-616702d4.js";import{u as J}from"./Eye-8736ca10.js";import{r as Te}from"./Radio-a179bbe7.js";import{g as _e}from"./Space-a048fa85.js";const Be=w("svg",{viewBox:"0 0 64 64",class:"check-icon"},w("path",{d:"M50.42,16.76L22.34,39.45l-8.1-11.46c-1.12-1.58-3.3-1.96-4.88-0.84c-1.58,1.12-1.95,3.3-0.84,4.88l10.26,14.51 c0.56,0.79,1.42,1.31,2.38,1.45c0.16,0.02,0.32,0.03,0.48,0.03c0.8,0,1.57-0.27,2.2-0.78l30.99-25.03c1.5-1.21,1.74-3.42,0.52-4.92 C54.13,15.78,51.93,15.55,50.42,16.76z"})),Ie=w("svg",{viewBox:"0 0 100 100",class:"line-icon"},w("path",{d:"M80.2,55.5H21.4c-2.8,0-5.1-2.5-5.1-5.5l0,0c0-3,2.3-5.5,5.1-5.5h58.7c2.8,0,5.1,2.5,5.1,5.5l0,0C85.2,53.1,82.9,55.5,80.2,55.5z"})),oe=fe("n-checkbox-group"),Fe={min:Number,max:Number,size:String,value:Array,defaultValue:{type:Array,default:null},disabled:{type:Boolean,default:void 0},"onUpdate:value":[Function,Array],onUpdateValue:[Function,Array],onChange:[Function,Array]},je=W({name:"CheckboxGroup",props:Fe,setup(e){const{mergedClsPrefixRef:f}=Y(e),n=q(e),{mergedSizeRef:k,mergedDisabledRef:s}=n,d=U(e.defaultValue),v=A(()=>e.value),c=J(v,d),a=A(()=>{var m;return((m=c.value)===null||m===void 0?void 0:m.length)||0}),t=A(()=>Array.isArray(c.value)?new Set(c.value):new Set);function B(m,r){const{nTriggerFormInput:R,nTriggerFormChange:g}=n,{onChange:l,"onUpdate:value":z,onUpdateValue:S}=e;if(Array.isArray(c.value)){const u=Array.from(c.value),I=u.findIndex(_=>_===r);m?~I||(u.push(r),S&&h(S,u,{actionType:"check",value:r}),z&&h(z,u,{actionType:"check",value:r}),R(),g(),d.value=u,l&&h(l,u)):~I&&(u.splice(I,1),S&&h(S,u,{actionType:"uncheck",value:r}),z&&h(z,u,{actionType:"uncheck",value:r}),l&&h(l,u),d.value=u,R(),g())}else m?(S&&h(S,[r],{actionType:"check",value:r}),z&&h(z,[r],{actionType:"check",value:r}),l&&h(l,[r]),d.value=[r],R(),g()):(S&&h(S,[],{actionType:"uncheck",value:r}),z&&h(z,[],{actionType:"uncheck",value:r}),l&&h(l,[]),d.value=[],R(),g())}return X(oe,{checkedCountRef:a,maxRef:E(e,"max"),minRef:E(e,"min"),valueSetRef:t,disabledRef:s,mergedSizeRef:k,toggleCheckbox:B}),{mergedClsPrefix:f}},render(){return w("div",{class:`${this.mergedClsPrefix}-checkbox-group`,role:"group"},this.$slots)}}),$e=C([i("checkbox",`
|
||
font-size: var(--n-font-size);
|
||
outline: none;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
word-break: break-word;
|
||
line-height: var(--n-size);
|
||
--n-merged-color-table: var(--n-color-table);
|
||
`,[T("show-label","line-height: var(--n-label-line-height);"),C("&:hover",[i("checkbox-box",[p("border","border: var(--n-border-checked);")])]),C("&:focus:not(:active)",[i("checkbox-box",[p("border",`
|
||
border: var(--n-border-focus);
|
||
box-shadow: var(--n-box-shadow-focus);
|
||
`)])]),T("inside-table",[i("checkbox-box",`
|
||
background-color: var(--n-merged-color-table);
|
||
`)]),T("checked",[i("checkbox-box",`
|
||
background-color: var(--n-color-checked);
|
||
`,[i("checkbox-icon",[C(".check-icon",`
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
`)])])]),T("indeterminate",[i("checkbox-box",[i("checkbox-icon",[C(".check-icon",`
|
||
opacity: 0;
|
||
transform: scale(.5);
|
||
`),C(".line-icon",`
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
`)])])]),T("checked, indeterminate",[C("&:focus:not(:active)",[i("checkbox-box",[p("border",`
|
||
border: var(--n-border-checked);
|
||
box-shadow: var(--n-box-shadow-focus);
|
||
`)])]),i("checkbox-box",`
|
||
background-color: var(--n-color-checked);
|
||
border-left: 0;
|
||
border-top: 0;
|
||
`,[p("border",{border:"var(--n-border-checked)"})])]),T("disabled",{cursor:"not-allowed"},[T("checked",[i("checkbox-box",`
|
||
background-color: var(--n-color-disabled-checked);
|
||
`,[p("border",{border:"var(--n-border-disabled-checked)"}),i("checkbox-icon",[C(".check-icon, .line-icon",{fill:"var(--n-check-mark-color-disabled-checked)"})])])]),i("checkbox-box",`
|
||
background-color: var(--n-color-disabled);
|
||
`,[p("border",`
|
||
border: var(--n-border-disabled);
|
||
`),i("checkbox-icon",[C(".check-icon, .line-icon",`
|
||
fill: var(--n-check-mark-color-disabled);
|
||
`)])]),p("label",`
|
||
color: var(--n-text-color-disabled);
|
||
`)]),i("checkbox-box-wrapper",`
|
||
position: relative;
|
||
width: var(--n-size);
|
||
flex-shrink: 0;
|
||
flex-grow: 0;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
`),i("checkbox-box",`
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
height: var(--n-size);
|
||
width: var(--n-size);
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
border-radius: var(--n-border-radius);
|
||
background-color: var(--n-color);
|
||
transition: background-color 0.3s var(--n-bezier);
|
||
`,[p("border",`
|
||
transition:
|
||
border-color .3s var(--n-bezier),
|
||
box-shadow .3s var(--n-bezier);
|
||
border-radius: inherit;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
border: var(--n-border);
|
||
`),i("checkbox-icon",`
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
left: 1px;
|
||
right: 1px;
|
||
top: 1px;
|
||
bottom: 1px;
|
||
`,[C(".check-icon, .line-icon",`
|
||
width: 100%;
|
||
fill: var(--n-check-mark-color);
|
||
opacity: 0;
|
||
transform: scale(0.5);
|
||
transform-origin: center;
|
||
transition:
|
||
fill 0.3s var(--n-bezier),
|
||
transform 0.3s var(--n-bezier),
|
||
opacity 0.3s var(--n-bezier),
|
||
border-color 0.3s var(--n-bezier);
|
||
`),ve({left:"1px",top:"1px"})])]),p("label",`
|
||
color: var(--n-text-color);
|
||
transition: color .3s var(--n-bezier);
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
padding: var(--n-label-padding);
|
||
font-weight: var(--n-label-font-weight);
|
||
`,[C("&:empty",{display:"none"})])]),ge(i("checkbox",`
|
||
--n-merged-color-table: var(--n-color-table-modal);
|
||
`)),pe(i("checkbox",`
|
||
--n-merged-color-table: var(--n-color-table-popover);
|
||
`))]),De=Object.assign(Object.assign({},P.props),{size:String,checked:{type:[Boolean,String,Number],default:void 0},defaultChecked:{type:[Boolean,String,Number],default:!1},value:[String,Number],disabled:{type:Boolean,default:void 0},indeterminate:Boolean,label:String,focusable:{type:Boolean,default:!0},checkedValue:{type:[Boolean,String,Number],default:!0},uncheckedValue:{type:[Boolean,String,Number],default:!1},"onUpdate:checked":[Function,Array],onUpdateChecked:[Function,Array],privateInsideTable:Boolean,onChange:[Function,Array]}),He=W({name:"Checkbox",props:De,setup(e){const f=U(null),{mergedClsPrefixRef:n,inlineThemeDisabled:k,mergedRtlRef:s}=Y(e),d=q(e,{mergedSize(o){const{size:x}=e;if(x!==void 0)return x;if(a){const{value:y}=a.mergedSizeRef;if(y!==void 0)return y}if(o){const{mergedSize:y}=o;if(y!==void 0)return y.value}return"medium"},mergedDisabled(o){const{disabled:x}=e;if(x!==void 0)return x;if(a){if(a.disabledRef.value)return!0;const{maxRef:{value:y},checkedCountRef:F}=a;if(y!==void 0&&F.value>=y&&!r.value)return!0;const{minRef:{value:$}}=a;if($!==void 0&&F.value<=$&&r.value)return!0}return o?o.disabled.value:!1}}),{mergedDisabledRef:v,mergedSizeRef:c}=d,a=ke(oe,null),t=U(e.defaultChecked),B=E(e,"checked"),m=J(B,t),r=me(()=>{if(a){const o=a.valueSetRef.value;return o&&e.value!==void 0?o.has(e.value):!1}else return m.value===e.checkedValue}),R=P("Checkbox","-checkbox",$e,xe,e,n);function g(o){if(a&&e.value!==void 0)a.toggleCheckbox(!r.value,e.value);else{const{onChange:x,"onUpdate:checked":y,onUpdateChecked:F}=e,{nTriggerFormInput:$,nTriggerFormChange:V}=d,D=r.value?e.uncheckedValue:e.checkedValue;y&&h(y,D,o),F&&h(F,D,o),x&&h(x,D,o),$(),V(),t.value=D}}function l(o){v.value||g(o)}function z(o){if(!v.value)switch(o.key){case" ":case"Enter":g(o)}}function S(o){switch(o.key){case" ":o.preventDefault()}}const u={focus:()=>{var o;(o=f.value)===null||o===void 0||o.focus()},blur:()=>{var o;(o=f.value)===null||o===void 0||o.blur()}},I=Z("Checkbox",s,n),_=A(()=>{const{value:o}=c,{common:{cubicBezierEaseInOut:x},self:{borderRadius:y,color:F,colorChecked:$,colorDisabled:V,colorTableHeader:D,colorTableHeaderModal:N,colorTableHeaderPopover:j,checkMarkColor:H,checkMarkColorDisabled:G,border:K,borderFocus:O,borderDisabled:L,borderChecked:re,boxShadowFocus:ne,textColor:te,textColorDisabled:ae,checkMarkColorDisabledChecked:ie,colorDisabledChecked:ce,borderDisabledChecked:le,labelPadding:de,labelLineHeight:se,labelFontWeight:ue,[M("fontSize",o)]:be,[M("size",o)]:he}}=R.value;return{"--n-label-line-height":se,"--n-label-font-weight":ue,"--n-size":he,"--n-bezier":x,"--n-border-radius":y,"--n-border":K,"--n-border-checked":re,"--n-border-focus":O,"--n-border-disabled":L,"--n-border-disabled-checked":le,"--n-box-shadow-focus":ne,"--n-color":F,"--n-color-checked":$,"--n-color-table":D,"--n-color-table-modal":N,"--n-color-table-popover":j,"--n-color-disabled":V,"--n-color-disabled-checked":ce,"--n-text-color":te,"--n-text-color-disabled":ae,"--n-check-mark-color":H,"--n-check-mark-color-disabled":G,"--n-check-mark-color-disabled-checked":ie,"--n-font-size":be,"--n-label-padding":de}}),b=k?ee("checkbox",A(()=>c.value[0]),_,e):void 0;return Object.assign(d,u,{rtlEnabled:I,selfRef:f,mergedClsPrefix:n,mergedDisabled:v,renderedChecked:r,mergedTheme:R,labelId:ye(),handleClick:l,handleKeyUp:z,handleKeyDown:S,cssVars:k?void 0:_,themeClass:b==null?void 0:b.themeClass,onRender:b==null?void 0:b.onRender})},render(){var e;const{$slots:f,renderedChecked:n,mergedDisabled:k,indeterminate:s,privateInsideTable:d,cssVars:v,labelId:c,label:a,mergedClsPrefix:t,focusable:B,handleKeyUp:m,handleKeyDown:r,handleClick:R}=this;(e=this.onRender)===null||e===void 0||e.call(this);const g=Ce(f.default,l=>a||l?w("span",{class:`${t}-checkbox__label`,id:c},a||l):null);return w("div",{ref:"selfRef",class:[`${t}-checkbox`,this.themeClass,this.rtlEnabled&&`${t}-checkbox--rtl`,n&&`${t}-checkbox--checked`,k&&`${t}-checkbox--disabled`,s&&`${t}-checkbox--indeterminate`,d&&`${t}-checkbox--inside-table`,g&&`${t}-checkbox--show-label`],tabindex:k||!B?void 0:0,role:"checkbox","aria-checked":s?"mixed":n,"aria-labelledby":c,style:v,onKeyup:m,onKeydown:r,onClick:R,onMousedown:()=>{Re("selectstart",window,l=>{l.preventDefault()},{once:!0})}},w("div",{class:`${t}-checkbox-box-wrapper`}," ",w("div",{class:`${t}-checkbox-box`},w(we,null,{default:()=>this.indeterminate?w("div",{key:"indeterminate",class:`${t}-checkbox-icon`},Ie):w("div",{key:"check",class:`${t}-checkbox-icon`},Be)}),w("div",{class:`${t}-checkbox-box__border`}))),g)}}),Ae=i("radio-group",`
|
||
display: inline-block;
|
||
font-size: var(--n-font-size);
|
||
`,[p("splitor",`
|
||
display: inline-block;
|
||
vertical-align: bottom;
|
||
width: 1px;
|
||
transition:
|
||
background-color .3s var(--n-bezier),
|
||
opacity .3s var(--n-bezier);
|
||
background: var(--n-button-border-color);
|
||
`,[T("checked",{backgroundColor:"var(--n-button-border-color-active)"}),T("disabled",{opacity:"var(--n-opacity-disabled)"})]),T("button-group",`
|
||
white-space: nowrap;
|
||
height: var(--n-height);
|
||
line-height: var(--n-height);
|
||
`,[i("radio-button",{height:"var(--n-height)",lineHeight:"var(--n-height)"}),p("splitor",{height:"var(--n-height)"})]),i("radio-button",`
|
||
vertical-align: bottom;
|
||
outline: none;
|
||
position: relative;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
padding-left: 14px;
|
||
padding-right: 14px;
|
||
white-space: nowrap;
|
||
transition:
|
||
background-color .3s var(--n-bezier),
|
||
opacity .3s var(--n-bezier),
|
||
border-color .3s var(--n-bezier),
|
||
color .3s var(--n-bezier);
|
||
color: var(--n-button-text-color);
|
||
border-top: 1px solid var(--n-button-border-color);
|
||
border-bottom: 1px solid var(--n-button-border-color);
|
||
`,[i("radio-input",`
|
||
pointer-events: none;
|
||
position: absolute;
|
||
border: 0;
|
||
border-radius: inherit;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
opacity: 0;
|
||
z-index: 1;
|
||
`),p("state-border",`
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
position: absolute;
|
||
box-shadow: var(--n-button-box-shadow);
|
||
transition: box-shadow .3s var(--n-bezier);
|
||
left: -1px;
|
||
bottom: -1px;
|
||
right: -1px;
|
||
top: -1px;
|
||
`),C("&:first-child",`
|
||
border-top-left-radius: var(--n-button-border-radius);
|
||
border-bottom-left-radius: var(--n-button-border-radius);
|
||
border-left: 1px solid var(--n-button-border-color);
|
||
`,[p("state-border",`
|
||
border-top-left-radius: var(--n-button-border-radius);
|
||
border-bottom-left-radius: var(--n-button-border-radius);
|
||
`)]),C("&:last-child",`
|
||
border-top-right-radius: var(--n-button-border-radius);
|
||
border-bottom-right-radius: var(--n-button-border-radius);
|
||
border-right: 1px solid var(--n-button-border-color);
|
||
`,[p("state-border",`
|
||
border-top-right-radius: var(--n-button-border-radius);
|
||
border-bottom-right-radius: var(--n-button-border-radius);
|
||
`)]),Q("disabled",`
|
||
cursor: pointer;
|
||
`,[C("&:hover",[p("state-border",`
|
||
transition: box-shadow .3s var(--n-bezier);
|
||
box-shadow: var(--n-button-box-shadow-hover);
|
||
`),Q("checked",{color:"var(--n-button-text-color-hover)"})]),T("focus",[C("&:not(:active)",[p("state-border",{boxShadow:"var(--n-button-box-shadow-focus)"})])])]),T("checked",`
|
||
background: var(--n-button-color-active);
|
||
color: var(--n-button-text-color-active);
|
||
border-color: var(--n-button-border-color-active);
|
||
`),T("disabled",`
|
||
cursor: not-allowed;
|
||
opacity: var(--n-opacity-disabled);
|
||
`)])]);function Ve(e,f,n){var k;const s=[];let d=!1;for(let v=0;v<e.length;++v){const c=e[v],a=(k=c.type)===null||k===void 0?void 0:k.name;a==="RadioButton"&&(d=!0);const t=c.props;if(a!=="RadioButton"){s.push(c);continue}if(v===0)s.push(c);else{const B=s[s.length-1].props,m=f===B.value,r=B.disabled,R=f===t.value,g=t.disabled,l=(m?2:0)+(r?0:1),z=(R?2:0)+(g?0:1),S={[`${n}-radio-group__splitor--disabled`]:r,[`${n}-radio-group__splitor--checked`]:m},u={[`${n}-radio-group__splitor--disabled`]:g,[`${n}-radio-group__splitor--checked`]:R},I=l<z?u:S;s.push(w("div",{class:[`${n}-radio-group__splitor`,I]}),c)}}return{children:s,isButtonGroup:d}}const Ue=Object.assign(Object.assign({},P.props),{name:String,value:[String,Number,Boolean],defaultValue:{type:[String,Number,Boolean],default:null},size:String,disabled:{type:Boolean,default:void 0},"onUpdate:value":[Function,Array],onUpdateValue:[Function,Array]}),Ge=W({name:"RadioGroup",props:Ue,setup(e){const f=U(null),{mergedSizeRef:n,mergedDisabledRef:k,nTriggerFormChange:s,nTriggerFormInput:d,nTriggerFormBlur:v,nTriggerFormFocus:c}=q(e),{mergedClsPrefixRef:a,inlineThemeDisabled:t,mergedRtlRef:B}=Y(e),m=P("Radio","-radio-group",Ae,ze,e,a),r=U(e.defaultValue),R=E(e,"value"),g=J(R,r);function l(b){const{onUpdateValue:o,"onUpdate:value":x}=e;o&&h(o,b),x&&h(x,b),r.value=b,s(),d()}function z(b){const{value:o}=f;o&&(o.contains(b.relatedTarget)||c())}function S(b){const{value:o}=f;o&&(o.contains(b.relatedTarget)||v())}X(Te,{mergedClsPrefixRef:a,nameRef:E(e,"name"),valueRef:g,disabledRef:k,mergedSizeRef:n,doUpdateValue:l});const u=Z("Radio",B,a),I=A(()=>{const{value:b}=n,{common:{cubicBezierEaseInOut:o},self:{buttonBorderColor:x,buttonBorderColorActive:y,buttonBorderRadius:F,buttonBoxShadow:$,buttonBoxShadowFocus:V,buttonBoxShadowHover:D,buttonColorActive:N,buttonTextColor:j,buttonTextColorActive:H,buttonTextColorHover:G,opacityDisabled:K,[M("buttonHeight",b)]:O,[M("fontSize",b)]:L}}=m.value;return{"--n-font-size":L,"--n-bezier":o,"--n-button-border-color":x,"--n-button-border-color-active":y,"--n-button-border-radius":F,"--n-button-box-shadow":$,"--n-button-box-shadow-focus":V,"--n-button-box-shadow-hover":D,"--n-button-color-active":N,"--n-button-text-color":j,"--n-button-text-color-hover":G,"--n-button-text-color-active":H,"--n-height":O,"--n-opacity-disabled":K}}),_=t?ee("radio-group",A(()=>n.value[0]),I,e):void 0;return{selfElRef:f,rtlEnabled:u,mergedClsPrefix:a,mergedValue:g,handleFocusout:S,handleFocusin:z,cssVars:t?void 0:I,themeClass:_==null?void 0:_.themeClass,onRender:_==null?void 0:_.onRender}},render(){var e;const{mergedValue:f,mergedClsPrefix:n,handleFocusin:k,handleFocusout:s}=this,{children:d,isButtonGroup:v}=Ve(Se(_e(this)),f,n);return(e=this.onRender)===null||e===void 0||e.call(this),w("div",{onFocusin:k,onFocusout:s,ref:"selfElRef",class:[`${n}-radio-group`,this.rtlEnabled&&`${n}-radio-group--rtl`,this.themeClass,v&&`${n}-radio-group--button-group`],style:this.cssVars},d)}});export{je as N,Ge as _,He as a};
|
||
//# sourceMappingURL=RadioGroup-46676ce6.js.map
|