primevue
Version:
PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
2 lines (1 loc) • 2.95 kB
JavaScript
import e from"primevue/ripple";import{ObjectUtils as t}from"primevue/utils";import n from"primevue/basecomponent";import l from"primevue/togglebutton/style";import{resolveDirective as a,openBlock as o,createElementBlock as i,mergeProps as u,createElementVNode as s,withDirectives as r,renderSlot as d,normalizeClass as c,createCommentVNode as p,toDisplayString as b}from"vue";var f={name:"ToggleButton",extends:{name:"BaseToggleButton",extends:n,props:{modelValue:Boolean,onIcon:String,offIcon:String,onLabel:{type:String,default:"Yes"},offLabel:{type:String,default:"No"},iconPos:{type:String,default:"left"},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null}},style:l,provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","focus","blur"],methods:{getPTOptions:function(e){return this.ptm(e,{context:{active:this.active,disabled:this.disabled}})},onChange:function(e){this.disabled||this.readonly||(this.$emit("update:modelValue",!this.modelValue),this.$emit("change",e))},onFocus:function(e){this.$emit("focus",e)},onBlur:function(e){this.$emit("blur",e)}},computed:{active:function(){return!0===this.modelValue},hasLabel:function(){return t.isNotEmpty(this.onLabel)&&t.isNotEmpty(this.offLabel)},hasIcon:function(){return this.$slots.icon||this.onIcon&&this.offIcon},label:function(){return this.hasLabel?this.modelValue?this.onLabel:this.offLabel:" "}},directives:{ripple:e}},h=["data-p-highlight","data-p-disabled"],m=["id","value","checked","tabindex","disabled","readonly","aria-labelledby","aria-label"];f.render=function(e,t,n,l,f,g){var y=a("ripple");return o(),i("div",u({class:e.cx("root")},g.getPTOptions("root"),{"data-pc-name":"togglebutton","data-p-highlight":g.active,"data-p-disabled":e.disabled}),[s("input",u({id:e.inputId,type:"checkbox",role:"switch",class:[e.cx("input"),e.inputClass],style:e.inputStyle,value:e.modelValue,checked:g.active,tabindex:e.tabindex,disabled:e.disabled,readonly:e.readonly,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=function(){return g.onFocus&&g.onFocus.apply(g,arguments)}),onBlur:t[1]||(t[1]=function(){return g.onBlur&&g.onBlur.apply(g,arguments)}),onChange:t[2]||(t[2]=function(){return g.onChange&&g.onChange.apply(g,arguments)})},g.getPTOptions("input")),null,16,m),r((o(),i("div",u({class:e.cx("box")},g.getPTOptions("box")),[d(e.$slots,"icon",{value:e.modelValue,class:c(e.cx("icon"))},(function(){return[e.onIcon||e.offIcon?(o(),i("span",u({key:0,class:[e.cx("icon"),e.modelValue?e.onIcon:e.offIcon]},g.getPTOptions("icon")),null,16)):p("",!0)]})),s("span",u({class:e.cx("label")},g.getPTOptions("label")),b(g.label),17)],16)),[[y]])],16,h)};export{f as default};