mower-ng/mower-ng
4
0
Fork 0
Code Issues 61 Pull requests Projects 1 Wiki Activity
mower-ng/ui/dist/assets/RadioGroup.js
zhbaor 553b57d30c
All checks were successful
ci/woodpecker/push/check_format Pipeline was successful
Details
移除暗色主题；使用仿Element UI主题
2025-02-16 20:28:20 +08:00

157 lines
13 KiB
JavaScript
Raw Blame History

import{X as ae,aZ as M,Z as B,a0 as x,$ as s,aD as E,M as S,x as ie,h as de,b3 as L,r as $,b as U,aC as G,Q as O,a7 as j,as as F,A as N,B as y,a3 as se,a9 as V,c as D,aa as I,a8 as K,ac as W,S as le}from"./_plugin-vue_export-helper.js";import{b as ue}from"./main.js";import{g as ce}from"./get-slot.js";const be={radioSizeSmall:"14px",radioSizeMedium:"16px",radioSizeLarge:"18px",labelPadding:"0 8px",labelFontWeight:"400"};function he(o){const{borderColor:e,primaryColor:t,baseColor:a,textColorDisabled:n,inputColorDisabled:l,textColor2:d,opacityDisabled:u,borderRadius:i,fontSizeSmall:g,fontSizeMedium:v,fontSizeLarge:C,heightSmall:h,heightMedium:w,heightLarge:m,lineHeight:R}=o;return Object.assign(Object.assign({},be),{labelLineHeight:R,buttonHeightSmall:h,buttonHeightMedium:w,buttonHeightLarge:m,fontSizeSmall:g,fontSizeMedium:v,fontSizeLarge:C,boxShadow:`inset 0 0 0 1px ${e}`,boxShadowActive:`inset 0 0 0 1px ${t}`,boxShadowFocus:`inset 0 0 0 1px ${t}, 0 0 0 2px ${M(t,{alpha:.2})}`,boxShadowHover:`inset 0 0 0 1px ${t}`,boxShadowDisabled:`inset 0 0 0 1px ${e}`,color:a,colorDisabled:l,colorActive:"#0000",textColor:d,textColorDisabled:n,dotColorActive:t,dotColorDisabled:e,buttonBorderColor:e,buttonBorderColorActive:t,buttonBorderColorHover:e,buttonColor:a,buttonColorActive:a,buttonTextColor:d,buttonTextColorActive:t,buttonTextColorHover:t,opacityDisabled:u,buttonBoxShadowFocus:`inset 0 0 0 1px ${t}, 0 0 0 2px ${M(t,{alpha:.3})}`,buttonBoxShadowHover:"inset 0 0 0 1px #0000",buttonBoxShadow:"inset 0 0 0 1px #0000",buttonBorderRadius:i})}const Z={name:"Radio",common:ae,self:he},fe=B("radio",`
line-height: var(--n-label-line-height);
outline: none;
position: relative;
user-select: none;
-webkit-user-select: none;
display: inline-flex;
align-items: flex-start;
flex-wrap: nowrap;
font-size: var(--n-font-size);
word-break: break-word;
`,[x("checked",[s("dot",`
background-color: var(--n-color-active);
`)]),s("dot-wrapper",`
position: relative;
flex-shrink: 0;
flex-grow: 0;
width: var(--n-radio-size);
`),B("radio-input",`
position: absolute;
border: 0;
border-radius: inherit;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
z-index: 1;
cursor: pointer;
`),s("dot",`
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: var(--n-radio-size);
width: var(--n-radio-size);
background: var(--n-color);
box-shadow: var(--n-box-shadow);
border-radius: 50%;
transition:
background-color .3s var(--n-bezier),
box-shadow .3s var(--n-bezier);
`,[S("&::before",`
content: "";
opacity: 0;
position: absolute;
left: 4px;
top: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: 50%;
transform: scale(.8);
background: var(--n-dot-color-active);
transition:
opacity .3s var(--n-bezier),
background-color .3s var(--n-bezier),
transform .3s var(--n-bezier);
`),x("checked",{boxShadow:"var(--n-box-shadow-active)"},[S("&::before",`
opacity: 1;
transform: scale(1);
`)])]),s("label",`
color: var(--n-text-color);
padding: var(--n-label-padding);
font-weight: var(--n-label-font-weight);
display: inline-block;
transition: color .3s var(--n-bezier);
`),E("disabled",`
cursor: pointer;
`,[S("&:hover",[s("dot",{boxShadow:"var(--n-box-shadow-hover)"})]),x("focus",[S("&:not(:active)",[s("dot",{boxShadow:"var(--n-box-shadow-focus)"})])])]),x("disabled",`
cursor: not-allowed;
`,[s("dot",{boxShadow:"var(--n-box-shadow-disabled)",backgroundColor:"var(--n-color-disabled)"},[S("&::before",{backgroundColor:"var(--n-dot-color-disabled)"}),x("checked",`
opacity: 1;
`)]),s("label",{color:"var(--n-text-color-disabled)"}),B("radio-input",`
cursor: not-allowed;
`)])]),ge={name:String,value:{type:[String,Number,Boolean],default:"on"},checked:{type:Boolean,default:void 0},defaultChecked:Boolean,disabled:{type:Boolean,default:void 0},label:String,size:String,onUpdateChecked:[Function,Array],"onUpdate:checked":[Function,Array],checkedValue:{type:Boolean,default:void 0}},Q=ie("n-radio-group");function ve(o){const e=de(Q,null),t=L(o,{mergedSize(r){const{size:c}=o;if(c!==void 0)return c;if(e){const{mergedSizeRef:{value:f}}=e;if(f!==void 0)return f}return r?r.mergedSize.value:"medium"},mergedDisabled(r){return!!(o.disabled||e!=null&&e.disabledRef.value||r!=null&&r.disabled.value)}}),{mergedSizeRef:a,mergedDisabledRef:n}=t,l=$(null),d=$(null),u=$(o.defaultChecked),i=U(o,"checked"),g=G(i,u),v=O(()=>e?e.valueRef.value===o.value:g.value),C=O(()=>{const{name:r}=o;if(r!==void 0)return r;if(e)return e.nameRef.value}),h=$(!1);function w(){if(e){const{doUpdateValue:r}=e,{value:c}=o;F(r,c)}else{const{onUpdateChecked:r,"onUpdate:checked":c}=o,{nTriggerFormInput:f,nTriggerFormChange:b}=t;r&&F(r,!0),c&&F(c,!0),f(),b(),u.value=!0}}function m(){n.value||v.value||w()}function R(){m(),l.value&&(l.value.checked=v.value)}function z(){h.value=!1}function k(){h.value=!0}return{mergedClsPrefix:e?e.mergedClsPrefixRef:j(o).mergedClsPrefixRef,inputRef:l,labelRef:d,mergedName:C,mergedDisabled:n,renderSafeChecked:v,focus:h,mergedSize:a,handleRadioInputChange:R,handleRadioInputBlur:z,handleRadioInputFocus:k}}const pe=Object.assign(Object.assign({},V.props),ge),ze=N({name:"Radio",props:pe,setup(o){const e=ve(o),t=V("Radio","-radio",fe,Z,o,e.mergedClsPrefix),a=D(()=>{const{mergedSize:{value:g}}=e,{common:{cubicBezierEaseInOut:v},self:{boxShadow:C,boxShadowActive:h,boxShadowDisabled:w,boxShadowFocus:m,boxShadowHover:R,color:z,colorDisabled:k,colorActive:r,textColor:c,textColorDisabled:f,dotColorActive:b,dotColorDisabled:p,labelPadding:_,labelLineHeight:A,labelFontWeight:T,[I("fontSize",g)]:H,[I("radioSize",g)]:P}}=t.value;return{"--n-bezier":v,"--n-label-line-height":A,"--n-label-font-weight":T,"--n-box-shadow":C,"--n-box-shadow-active":h,"--n-box-shadow-disabled":w,"--n-box-shadow-focus":m,"--n-box-shadow-hover":R,"--n-color":z,"--n-color-active":r,"--n-color-disabled":k,"--n-dot-color-active":b,"--n-dot-color-disabled":p,"--n-font-size":H,"--n-radio-size":P,"--n-text-color":c,"--n-text-color-disabled":f,"--n-label-padding":_}}),{inlineThemeDisabled:n,mergedClsPrefixRef:l,mergedRtlRef:d}=j(o),u=K("Radio",d,l),i=n?W("radio",D(()=>e.mergedSize.value[0]),a,o):void 0;return Object.assign(e,{rtlEnabled:u,cssVars:n?void 0:a,themeClass:i==null?void 0:i.themeClass,onRender:i==null?void 0:i.onRender})},render(){const{$slots:o,mergedClsPrefix:e,onRender:t,label:a}=this;return t==null||t(),y("label",{class:[`${e}-radio`,this.themeClass,this.rtlEnabled&&`${e}-radio--rtl`,this.mergedDisabled&&`${e}-radio--disabled`,this.renderSafeChecked&&`${e}-radio--checked`,this.focus&&`${e}-radio--focus`],style:this.cssVars},y("input",{ref:"inputRef",type:"radio",class:`${e}-radio-input`,value:this.value,name:this.mergedName,checked:this.renderSafeChecked,disabled:this.mergedDisabled,onChange:this.handleRadioInputChange,onFocus:this.handleRadioInputFocus,onBlur:this.handleRadioInputBlur}),y("div",{class:`${e}-radio__dot-wrapper`}," ",y("div",{class:[`${e}-radio__dot`,this.renderSafeChecked&&`${e}-radio__dot--checked`]})),se(o.default,n=>!n&&!a?null:y("div",{ref:"labelRef",class:`${e}-radio__label`},n||a)))}}),me=B("radio-group",`
display: inline-block;
font-size: var(--n-font-size);
`,[s("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);
`,[x("checked",{backgroundColor:"var(--n-button-border-color-active)"}),x("disabled",{opacity:"var(--n-opacity-disabled)"})]),x("button-group",`
white-space: nowrap;
height: var(--n-height);
line-height: var(--n-height);
`,[B("radio-button",{height:"var(--n-height)",lineHeight:"var(--n-height)"}),s("splitor",{height:"var(--n-height)"})]),B("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);
background: var(--n-button-color);
color: var(--n-button-text-color);
border-top: 1px solid var(--n-button-border-color);
border-bottom: 1px solid var(--n-button-border-color);
`,[B("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;
`),s("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;
`),S("&: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);
`,[s("state-border",`
border-top-left-radius: var(--n-button-border-radius);
border-bottom-left-radius: var(--n-button-border-radius);
`)]),S("&: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);
`,[s("state-border",`
border-top-right-radius: var(--n-button-border-radius);
border-bottom-right-radius: var(--n-button-border-radius);
`)]),E("disabled",`
cursor: pointer;
`,[S("&:hover",[s("state-border",`
transition: box-shadow .3s var(--n-bezier);
box-shadow: var(--n-button-box-shadow-hover);
`),E("checked",{color:"var(--n-button-text-color-hover)"})]),x("focus",[S("&:not(:active)",[s("state-border",{boxShadow:"var(--n-button-box-shadow-focus)"})])])]),x("checked",`
background: var(--n-button-color-active);
color: var(--n-button-text-color-active);
border-color: var(--n-button-border-color-active);
`),x("disabled",`
cursor: not-allowed;
opacity: var(--n-opacity-disabled);
`)])]);function xe(o,e,t){var a;const n=[];let l=!1;for(let d=0;d<o.length;++d){const u=o[d],i=(a=u.type)===null||a===void 0?void 0:a.name;i==="RadioButton"&&(l=!0);const g=u.props;if(i!=="RadioButton"){n.push(u);continue}if(d===0)n.push(u);else{const v=n[n.length-1].props,C=e===v.value,h=v.disabled,w=e===g.value,m=g.disabled,R=(C?2:0)+(h?0:1),z=(w?2:0)+(m?0:1),k={[`${t}-radio-group__splitor--disabled`]:h,[`${t}-radio-group__splitor--checked`]:C},r={[`${t}-radio-group__splitor--disabled`]:m,[`${t}-radio-group__splitor--checked`]:w},c=R<z?r:k;n.push(y("div",{class:[`${t}-radio-group__splitor`,c]}),u)}}return{children:n,isButtonGroup:l}}const Ce=Object.assign(Object.assign({},V.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]}),ke=N({name:"RadioGroup",props:Ce,setup(o){const e=$(null),{mergedSizeRef:t,mergedDisabledRef:a,nTriggerFormChange:n,nTriggerFormInput:l,nTriggerFormBlur:d,nTriggerFormFocus:u}=L(o),{mergedClsPrefixRef:i,inlineThemeDisabled:g,mergedRtlRef:v}=j(o),C=V("Radio","-radio-group",me,Z,o,i),h=$(o.defaultValue),w=U(o,"value"),m=G(w,h);function R(b){const{onUpdateValue:p,"onUpdate:value":_}=o;p&&F(p,b),_&&F(_,b),h.value=b,n(),l()}function z(b){const{value:p}=e;p&&(p.contains(b.relatedTarget)||u())}function k(b){const{value:p}=e;p&&(p.contains(b.relatedTarget)||d())}le(Q,{mergedClsPrefixRef:i,nameRef:U(o,"name"),valueRef:m,disabledRef:a,mergedSizeRef:t,doUpdateValue:R});const r=K("Radio",v,i),c=D(()=>{const{value:b}=t,{common:{cubicBezierEaseInOut:p},self:{buttonBorderColor:_,buttonBorderColorActive:A,buttonBorderRadius:T,buttonBoxShadow:H,buttonBoxShadowFocus:P,buttonBoxShadowHover:X,buttonColor:Y,buttonColorActive:q,buttonTextColor:J,buttonTextColorActive:ee,buttonTextColorHover:oe,opacityDisabled:te,[I("buttonHeight",b)]:ne,[I("fontSize",b)]:re}}=C.value;return{"--n-font-size":re,"--n-bezier":p,"--n-button-border-color":_,"--n-button-border-color-active":A,"--n-button-border-radius":T,"--n-button-box-shadow":H,"--n-button-box-shadow-focus":P,"--n-button-box-shadow-hover":X,"--n-button-color":Y,"--n-button-color-active":q,"--n-button-text-color":J,"--n-button-text-color-hover":oe,"--n-button-text-color-active":ee,"--n-height":ne,"--n-opacity-disabled":te}}),f=g?W("radio-group",D(()=>t.value[0]),c,o):void 0;return{selfElRef:e,rtlEnabled:r,mergedClsPrefix:i,mergedValue:m,handleFocusout:k,handleFocusin:z,cssVars:g?void 0:c,themeClass:f==null?void 0:f.themeClass,onRender:f==null?void 0:f.onRender}},render(){var o;const{mergedValue:e,mergedClsPrefix:t,handleFocusin:a,handleFocusout:n}=this,{children:l,isButtonGroup:d}=xe(ue(ce(this)),e,t);return(o=this.onRender)===null||o===void 0||o.call(this),y("div",{onFocusin:a,onFocusout:n,ref:"selfElRef",class:[`${t}-radio-group`,this.rtlEnabled&&`${t}-radio-group--rtl`,this.themeClass,d&&`${t}-radio-group--button-group`],style:this.cssVars},l)}});export{ke as _,ze as a,Z as b,ge as r,ve as s};
Reference in a new issue View git blame Copy permalink