@progress/kendo-vue-buttons
Version:
9 lines (8 loc) • 4.03 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),o=require("@progress/kendo-vue-common"),z=require("../package-metadata.js"),T=n.defineComponent({name:"KendoSegmentedControl",emits:{change:e=>!0},props:{items:{type:Array,default:()=>[]},size:String,layoutMode:{type:String,default:"compact"},value:String,defaultValue:String,itemTemplate:[String,Function]},data(){return{interactionState:{selectedValue:this.$props.defaultValue,hoveredValue:void 0,focusedValue:void 0}}},computed:{selectedItemValue(){var e;return(e=this.$props.value)!=null?e:this.interactionState.selectedValue},sizeClass(){const e=this.$props.size;return e?o.kendoThemeMaps.sizeMap[e]:void 0},buttonClass(){return(e,t,s)=>o.classNames("k-segmented-control-button",{"k-selected":s,"k-hover":this.interactionState.hoveredValue===e&&!t,"k-focus":this.interactionState.focusedValue===e&&!t,"k-disabled":t})},iconClass(){return(e,t)=>o.classNames("k-segmented-control-button-icon",{...e&&{[e]:t}})}},watch:{selectedItemValue(){n.nextTick(()=>{this.updateThumbPosition()})}},created(){o.validatePackage(z.packageMetadata),this._resizeObserver=null},mounted(){n.nextTick(()=>{this.updateThumbPosition()}),this._resizeObserver=new ResizeObserver(()=>{this.updateThumbPosition()});const e=this.$refs.element;e&&this._resizeObserver.observe(e)},beforeUnmount(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)},methods:{updateThumbPosition(){const e=this.$refs.element,t=this.$refs.thumb;if(!e||!t)return;const s=e.querySelector(".k-segmented-control-button.k-selected");if(!s)return;const i=e.offsetWidth,{offsetWidth:c,offsetLeft:d}=s,a=`${d}px`,r=`${i-d-c}px`;t.style.left!==a&&(t.style.left=a),t.style.right!==r&&(t.style.right=r)},updateState(e){this.interactionState={...this.interactionState,...e}},handleButtonClick(e,t){var s,i;if(!e.disabled){if(this.selectedItemValue===e.value){(s=e.onClick)==null||s.call(e,t);return}this.$props.value===void 0&&e&&this.updateState({selectedValue:e.value}),this.$emit("change",e.value),(i=e.onClick)==null||i.call(e,t)}},handleMouseEnter(e,t,s,i){t||this.updateState({hoveredValue:e}),s==null||s(i)},handleMouseLeave(e,t){this.updateState({hoveredValue:void 0}),e==null||e(t)},handleFocus(e,t,s){this.updateState({focusedValue:e}),t==null||t(s)},handleBlur(e,t){this.updateState({focusedValue:void 0}),e==null||e(t)}},render(){const{items:e,layoutMode:t,itemTemplate:s}=this.$props,i=this.sizeClass,c=this.selectedItemValue,d=s?o.templateRendering.call(this,s,{}):void 0;return n.createVNode("div",{ref:"element",role:"group",class:o.classNames("k-segmented-control",i&&`k-segmented-control-${i}`,{"k-segmented-control-stretched":t==="stretch"})},[n.createVNode("div",{class:"k-segmented-control-thumb",ref:"thumb","aria-hidden":"true"},null),(e||[]).map(a=>{const{value:r,disabled:u,text:p,svgIcon:f,iconClassName:m,type:b="button",onMouseEnter:g,onMouseLeave:v,onFocus:k,onBlur:V,title:S,dir:C,"aria-label":y}=a,h=c===r;return n.createVNode("button",{key:r,type:b,class:this.buttonClass(r,u,h),disabled:u,"aria-disabled":u||void 0,"aria-pressed":h,title:S,dir:C,"aria-label":y,onClick:l=>this.handleButtonClick(a,l),onMouseenter:l=>this.handleMouseEnter(r,u,g,l),onMouseleave:l=>this.handleMouseLeave(v,l),onFocus:l=>this.handleFocus(r,k,l),onBlur:l=>this.handleBlur(V,l)},[o.getTemplate.call(this,{h:n.h,template:d,defaultRendering:n.createVNode(n.Fragment,null,[f&&n.createVNode(o.Icon,{class:this.iconClass(m,h),icon:f},null),n.createVNode("span",{class:"k-segmented-control-button-text"},[p])]),additionalProps:{item:a}})])})])}});exports.SegmentedControl=T;