https://nextnature.org/_nuxt/CF2iR7zr.js

1import{d as defineComponent,m as onMounted,ai as resolveDirective,I as withDirectives,o as openBlock,c as createElementBlock,f as createBaseVNode,t as toDisplayString,y as normalizeStyle,z as normalizeClass,r as ref,A as computed,B as _export_sfc}from"./XJrsRs0_.js";const _hoisted_1=["id","name","checked","disabled"],_hoisted_2=["for","tabindex","aria-checked"],_hoisted_3={class:"label-container left-container"},_hoisted_4={class:"option-label"},_hoisted_5={class:"label-container right-container"},_hoisted_6={class:"option-label"},_sfc_main=defineComponent({__name:"Toggle",props:{modelValue:{type:Boolean},optionLabels:{default:()=>["ON","OFF"]},id:{default:"toggle-switch"},name:{default:""},disabled:{type:Boolean,default:!1},activeColor:{default:"#f4f4f4"},inactiveColor:{default:"#6C55FE"},switchColor:{default:"#f4f4f4"},activeSwitchColor:{default:"#6C55FE"},textColor:{default:"#f4f4f4"},activeTextColor:{default:"#6C55FE"}},emits:["update:modelValue","change"],setup(__props,{emit:__emit}){const props=__props,emit=__emit,isAnimating=ref(!1),toggleStyles=computed(()=>({"--active-color":props.activeColor,"--inactive-color":props.inactiveColor,"--switch-color":props.switchColor,"--active-switch-color":props.activeSwitchColor,"--text-color":props.textColor,"--active-text-color":props.activeTextColor})),animateToggle=()=>{isAnimating.value||(isAnimating.value=!0,setTimeout(()=>{isAnimating.value=!1},400))},handleKeyPress=event=>{isAnimating.value||props.disabled||(event.key===" "||event.key==="Enter")&&(event.preventDefault(),emit("update:modelValue",!props.modelValue),emit("change",!props.modelValue),animateToggle())},onChangeEvent=event=>{if(isAnimating.value||props.disabled)return;const target=event.target;emit("update:modelValue",target.checked),emit("change",target.checked),animateToggle()};onMounted(()=>{const checkbox=document.getElementById(props.id);checkbox&&(checkbox.removeEventListener("change",handleChangeEvent),checkbox.addEventListener("change",handleChangeEvent))});const handleChangeEvent=()=>{!isAnimating.value&&!props.disabled&&animateToggle()};return(_ctx,_cache)=>{const _directive_hoverable=resolveDirective("hoverable");return withDirectives((openBlock(),createElementBlock("div",{class:normalizeClass(["toggle-switcher",{disabled:__props.disabled,"animate-pulse":isAnimating.value}]),style:normalizeStyle(toggleStyles.value)},[createBaseVNode("input",{id:__props.id,type:"checkbox",name:__props.name,class:"toggle-checkbox",checked:__props.modelValue,disabled:__props.disabled,onChange:onChangeEvent},null,40,_hoisted_1),createBaseVNode("label",{for:__props.id,class:"toggle-label",tabindex:__props.disabled?-1:0,onKeydown:handleKeyPress,"aria-checked":__props.modelValue,role:"switch"},[createBaseVNode("div",_hoisted_3,[createBaseVNode("span",_hoisted_4,toDisplayString(__props.optionLabels[0]),1)]),_cache[0]||(_cache[0]=createBaseVNode("div",{class:"toggle-switch"},null,-1)),createBaseVNode("div",_hoisted_5,[createBaseVNode("span",_hoisted_6,toDisplayString(__props.optionLabels[1]),1)])],40,_hoisted_2)],6)),[[_directive_hoverable,void 0,void 0,{action:!0}]])}}}),__nuxt_component_0=Object.assign(_export_sfc(_sfc_main,[["__scopeId","data-v-b9829888"]]),{__name:"AppToggle"});export{__nuxt_component_0 as _};