@progress/kendo-vue-buttons
Version:
9 lines (8 loc) • 4.68 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 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 s=require("vue"),i=require("@progress/kendo-vue-common"),l=require("./selection-reducer.js"),n=require("./focus-reducer.js"),u=require("./data-reducer.js"),d=require("./Chip.js"),p=require("../package-metadata.js"),o=s.defineComponent({name:"KendoVueChipList",inheritAttrs:!1,props:{id:String,tabIndex:Number,dataItems:Array,defaultDataItems:{type:Array,default:function(){return[]}},value:[Object,Array,String,Number],defaultValue:{type:[Object,Array,String,Number],default:function(){return null}},size:{type:String,default:"medium"},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid",validator:function(t){return[null,"flat","outline","solid"].includes(t)}},selection:{type:String,default:function(){return"none"}},textField:{type:String,default:function(){return"text"}},valueField:{type:String,default:function(){return"value"}},avatarField:{type:String,default:function(){return"avatar"}},disabled:{type:Boolean,default:!1},dir:{type:String,default:function(){return"ltr"}},chip:[String,Function,Object],ariaLabelledBy:String,ariaDescribedBy:String},provide(){return{kendoSelection:this.currentValue,kendoFocused:this.currentFocused,kendoDataItems:this.computedDataItems,handleDispatchDataItems:this.handleDispatchDataItems,handleDispatchSelection:this.handleDispatchSelection,handleDispatchFocus:this.handleDispatchFocus}},created(){i.validatePackage(p.packageMetadata),this.currentDataItems=this.$props.dataItems||this.$props.defaultDataItems,this.currentValue.value=this.$props.value||this.$props.defaultValue},data(){return{currentDataItems:[],currentDir:"ltr",isRtl:!1,currentFocused:{value:!1},currentValue:{value:null}}},mounted(){this.chipList=this.chipListRef,this.currentDir=this.$props.dir!==void 0?this.$props.dir:this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1,this.isRtl=this.currentDir==="rtl"},computed:{computedDataItems(){return this.$props.dataItems||this.currentDataItems},computedValue(){return this.$props.value||this.currentValue.value},items(){return this.computedDataItems.reduce(this.itemsReducer,[])}},methods:{handleDispatchSelection(t){const e=l.selectionReducer(this.computedValue,{...t,selection:this.$props.selection,state:this.computedValue});this.handleChange(e,t.event),this.currentValue.value=e},handleDispatchFocus(t){const e=n.focusReducer(t.payload,{...t,items:this.items});this.currentFocused.value=e},handleDispatchDataItems(t){const e=u.dataReducer(this.computedDataItems,{...t,state:this.computedDataItems,valueField:this.$props.valueField});this.handleDataChange(e,t.event),this.currentDataItems=e},handleChange(t,e){this.$el&&this.$emit("change",{value:t,target:this.$el,event:e})},handleDataChange(t,e){this.$el&&this.$emit("datachange",{value:t,target:this.$el,event:e})},itemsReducer(t,e){return t.push(e[this.$props.valueField||this.$props.valueField]),t}},setup(){return{chipListRef:s.ref(null)}},render(){const{size:t}=this.$props;return s.createVNode("div",{ref:i.setRef(this,"chipList"),role:"listbox",id:this.$props.id,dir:this.currentDir,style:this.$attrs.style,tabindex:i.getTabIndex(this.$props.tabIndex,this.$props.disabled,void 0),class:i.classNames("k-chip-list",{[`k-chip-list-${i.kendoThemeMaps.sizeMap[t]||t}`]:t,"k-rtl":this.currentDir==="rtl","k-selection-single":this.$props.selection==="single","k-selection-multiple":this.$props.selection==="multiple","k-disabled":this.$props.disabled}),"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-orientation":"horizontal","aria-multiselectable":this.$props.selection==="multiple"?!0:void 0},[this.computedDataItems.map(function(e){const a=i.templateRendering.call(this,this.$props.chip,i.getListeners.call(this)),r=s.createVNode(d.Chip,{role:"option",dataItem:e,key:e[this.$props.valueField],text:e[this.$props.textField],value:e[this.$props.valueField],avatar:e[this.$props.avatarField],size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode},null);return i.getTemplate.call(this,{h:s.h,template:a,defaultRendering:r,additionalProps:{dataItem:e,key:e[this.$props.valueField],text:e[this.$props.textField],value:e[this.$props.valueField],size:this.$props.size}})},this)])}});exports.ChipList=o;