@fifteen/design-system-vue/dist/cjs/components/form/FToggle.js

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

"use strict";const q=require("./FField.js");;/* empty css         */const x=require("../FIcon.js");;/* empty css         */const e=require("vue"),n=require("../../utils/getCssColor.js"),E=require("../../.generated/icons.js"),N=require("../../composables/useIcon.js"),M=require("../../composables/useFieldWithValidation.js"),w=require("../../composables/useInputEventBindings.js"),z=["for"],H={class:"FToggle__wrapper"},O=["id","name","disabled"],R={class:"FToggle__track__thumb"},D={key:0,class:"FToggle__labelText"},K={key:1,class:"FToggle__labelText"},S=e.defineComponent({__name:"FToggle",props:{reverse:{type:Boolean,default:!1},thumbColor:{default:"neutral--light-5"},hoverBorderColor:{default:"secondary"},toggledColor:{default:"secondary"},toggledBorderColor:{default:"secondary"},noCheckmarkIcon:{type:Boolean,default:!1},smallText:{type:Boolean,default:!1},fieldset:{type:Boolean},name:{default:""},label:{default:""},labelTextColor:{},hint:{default:""},hintTextColor:{default:"neutral--dark-4"},hideHint:{type:Boolean,default:!1},hintIcon:{default:null},modelValue:{type:Boolean,default:void 0},disabled:{type:Boolean,default:!1},loading:{type:Boolean},color:{default:"neutral--light-2"},textColor:{default:"neutral--dark-4"},errorColor:{default:"danger"},validationTrigger:{default:"change"},rules:{type:[Function,Array],default:()=>[]},errorMessage:{default:""},validateOnMount:{type:Boolean,default:!1},focusColor:{},borderColor:{}},emits:["update:modelValue","change","focus","blur"],setup(f,{expose:C,emit:m}){const o=f,p=m;C({focus:B}),N.registerIcons("icons",{checkmark:E.checkmark});const a=e.useId(),d=e.ref(),{isValid:u,hint:_,value:t,validate:i}=M.useFieldWithValidation(o,{validateOnMount:o.validateOnMount}),{handleBlur:c,handleFocus:g}=w.useInputEventBindings(i,o.validationTrigger,p),h=e.computed(()=>({"--FToggle--toggled-border-color":n.getCssColor(o.toggledBorderColor),"--FToggle--toggled-color":n.getCssColor(o.toggledColor),"--FToggle--color":n.getCssColor(o.color),"--FToggle--thumb-color":n.getCssColor(o.thumbColor),"--FToggle--error-color":n.getCssColor(o.errorColor),"--FToggle--hover-border-color":n.getCssColor(o.hoverBorderColor),"--FToggle--text-color":n.getCssColor(o.textColor)})),v=e.computed(()=>o.disabled?"neutral--dark-1":u.value?o.hintTextColor:o.errorColor),T=e.computed(()=>({"FToggle__toggledIcon--visible":t.value})),F=e.computed(()=>({"FToggle--error":!u.value,"FToggle--disabled":o.disabled,"FToggle--smallText":o.smallText})),k=e.computed(()=>({"FToggle__label--reverse":o.reverse})),b=e.computed(()=>({"FToggle__track--toggled":t.value}));function y(){i(t.value,o.validationTrigger==="change")}function B(){d.value?.focus()}return(l,r)=>{const I=x,V=q;return e.openBlock(),e.createBlock(V,e.mergeProps({class:["FToggle",e.unref(F)],style:e.unref(h)},{name:l.name,hint:e.unref(_),hideHint:l.hideHint,hintTextColor:e.unref(v),hintIcon:l.hintIcon}),{default:e.withCtx(()=>[e.createElementVNode("label",{class:e.normalizeClass(["FToggle__label",e.unref(k)]),for:e.unref(a)},[e.createElementVNode("div",H,[e.withDirectives(e.createElementVNode("input",{class:"FToggle__hiddenCheckbox",id:e.unref(a),ref_key:"toggleRef",ref:d,"onUpdate:modelValue":r[0]||(r[0]=s=>e.isRef(t)?t.value=s:null),name:l.name,type:"checkbox",disabled:l.disabled,onBlur:r[1]||(r[1]=(...s)=>e.unref(c)&&e.unref(c)(...s)),onChange:y,onFocus:r[2]||(r[2]=(...s)=>e.unref(g)&&e.unref(g)(...s)),onKeypress:r[3]||(r[3]=e.withKeys(s=>t.value=!e.unref(t),["enter"]))},null,40,O),[[e.vModelCheckbox,e.unref(t)]]),e.createElementVNode("div",{class:e.normalizeClass(["FToggle__track",e.unref(b)])},[e.createElementVNode("div",R,[l.noCheckmarkIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(I,{key:0,class:e.normalizeClass(["FToggle__toggledIcon",e.unref(T)]),name:"checkmark",color:l.toggledColor,size:"10"},null,8,["color","class"]))])],2)]),l.label?(e.openBlock(),e.createElementBlock("span",D,e.toDisplayString(l.label),1)):(e.openBlock(),e.createElementBlock("span",K,[e.renderSlot(l.$slots,"label")]))],10,z)]),_:3},16,["class","style"])}}});module.exports=S;