You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
4.4 KiB
76 lines
4.4 KiB
import{u as N}from"./use-rtl-889b67fe.js";import{s as O,r as j,a as H}from"./RadioGroup-02ea8070.js";import{e as c,f as d,g as o,c as n,h as T,b as f}from"./light-0dfdc1ad.js";import{c as h}from"./create-key-bf4384d6.js";import{u as V}from"./use-config-816d55a6.js";import{u as L}from"./use-css-vars-class-3ae3b4b3.js";import{r as M}from"./use-merged-state-66be05d7.js";import{d as W,f as u,a8 as l}from"./index-f4658ae7.js";const K=c("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;
|
|
`,[d("checked",[o("dot",`
|
|
background-color: var(--n-color-active);
|
|
`)]),o("dot-wrapper",`
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
width: var(--n-radio-size);
|
|
`),c("radio-input",`
|
|
position: absolute;
|
|
border: 0;
|
|
border-radius: inherit;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
z-index: 1;
|
|
cursor: pointer;
|
|
`),o("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);
|
|
`,[n("&::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);
|
|
`),d("checked",{boxShadow:"var(--n-box-shadow-active)"},[n("&::before",`
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
`)])]),o("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);
|
|
`),T("disabled",`
|
|
cursor: pointer;
|
|
`,[n("&:hover",[o("dot",{boxShadow:"var(--n-box-shadow-hover)"})]),d("focus",[n("&:not(:active)",[o("dot",{boxShadow:"var(--n-box-shadow-focus)"})])])]),d("disabled",`
|
|
cursor: not-allowed;
|
|
`,[o("dot",{boxShadow:"var(--n-box-shadow-disabled)",backgroundColor:"var(--n-color-disabled)"},[n("&::before",{backgroundColor:"var(--n-dot-color-disabled)"}),d("checked",`
|
|
opacity: 1;
|
|
`)]),o("label",{color:"var(--n-text-color-disabled)"}),c("radio-input",`
|
|
cursor: not-allowed;
|
|
`)])]),Y=Object.assign(Object.assign({},f.props),j),oe=W({name:"Radio",props:Y,setup(a){const e=O(a),i=f("Radio","-radio",K,H,a,e.mergedClsPrefix),t=u(()=>{const{mergedSize:{value:b}}=e,{common:{cubicBezierEaseInOut:g},self:{boxShadow:x,boxShadowActive:w,boxShadowDisabled:z,boxShadowFocus:k,boxShadowHover:C,color:R,colorDisabled:S,colorActive:y,textColor:$,textColorDisabled:_,dotColorActive:D,dotColorDisabled:P,labelPadding:B,labelLineHeight:E,labelFontWeight:A,[h("fontSize",b)]:F,[h("radioSize",b)]:I}}=i.value;return{"--n-bezier":g,"--n-label-line-height":E,"--n-label-font-weight":A,"--n-box-shadow":x,"--n-box-shadow-active":w,"--n-box-shadow-disabled":z,"--n-box-shadow-focus":k,"--n-box-shadow-hover":C,"--n-color":R,"--n-color-active":y,"--n-color-disabled":S,"--n-dot-color-active":D,"--n-dot-color-disabled":P,"--n-font-size":F,"--n-radio-size":I,"--n-text-color":$,"--n-text-color-disabled":_,"--n-label-padding":B}}),{inlineThemeDisabled:s,mergedClsPrefixRef:v,mergedRtlRef:p}=V(a),m=N("Radio",p,v),r=s?L("radio",u(()=>e.mergedSize.value[0]),t,a):void 0;return Object.assign(e,{rtlEnabled:m,cssVars:s?void 0:t,themeClass:r==null?void 0:r.themeClass,onRender:r==null?void 0:r.onRender})},render(){const{$slots:a,mergedClsPrefix:e,onRender:i,label:t}=this;return i==null||i(),l("label",{class:[`${e}-radio`,this.themeClass,{[`${e}-radio--rtl`]:this.rtlEnabled,[`${e}-radio--disabled`]:this.mergedDisabled,[`${e}-radio--checked`]:this.renderSafeChecked,[`${e}-radio--focus`]:this.focus}],style:this.cssVars},l("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}),l("div",{class:`${e}-radio__dot-wrapper`},"\xA0",l("div",{class:[`${e}-radio__dot`,this.renderSafeChecked&&`${e}-radio__dot--checked`]})),M(a.default,s=>!s&&!t?null:l("div",{ref:"labelRef",class:`${e}-radio__label`},s||t)))}});export{oe as N};
|