@progress/kendo-vue-buttons 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/Button.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 i=require("vue"),t=require("@progress/kendo-vue-common"),b=require("./util.js"),y=require("./package-metadata.js"),$=b.default.styles,k=i.defineComponent({name:"KendoButton",emits:{click:null,mousedown:null,mouseup:null,pointerdown:null,pointerup:null,focus:null,blur:null,keypress:null,keydown:null},props:{ariaLabel:String,ariaPressed:Boolean,title:String,dir:String,selected:{type:Boolean,default:void 0},togglable:{type:Boolean,default:!1},icon:{type:String,default:function(){}},svgIcon:Object,iconClass:{type:String,default:function(){}},imageUrl:{type:String,default:function(){}},imageAlt:String,disabled:{type:Boolean,default:void 0},size:{type:String,default:"medium"},shape:{type:String},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid"},themeColor:{type:String,default:"base"},tabIndex:Number,accessKey:String,id:String,type:String,role:String},created(){t.validatePackage(y.packageMetadata),this.currentActive=this.$props.togglable===!0&&this.$props.selected===!0,this._activeTemp=void 0},data(){return{currentActive:null}},computed:{computedSelected(){return this._activeTemp!==void 0?this._activeTemp:this.$props.selected!==void 0?this.$props.selected:this.currentActive},buttonClasses(){const{disabled:e,icon:a,iconClass:r,imageUrl:s,dir:u,svgIcon:h,size:l,shape:o,rounded:d,fillMode:n,themeColor:c}=this.$props,p=h!==void 0||a!==void 0||r!==void 0||s!==void 0,m=t.getDefaultSlots(this);return{[$.button]:!0,[`k-button-${t.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-button-${o}`]:o&&o!=="rectangle",[`k-rounded-${t.kendoThemeMaps.roundedMap[d]||d}`]:d,"k-icon-button":!m&&p,"k-disabled":e,"k-selected":this.computedSelected,"k-rtl":u==="rtl",[`k-button-${n}`]:n,[`k-button-${n}-${c}`]:n&&c}}},updated(){this.$props.togglable&&this.$props.selected!==void 0&&this.$props.selected!==this.currentActive&&(this.currentActive=this.$props.selected)},methods:{focus(e){this.$el.focus(e)},toggleIfApplicable(){if(!this.disabled&&this.$props.togglable&&this.$props.selected===void 0){const e=!this.currentActive;this._activeTemp=e,this.currentActive=e,this._activeTemp=void 0}},handleClick(e){this.toggleIfApplicable(),this.disabled||this.$emit("click",e)},handleMouseDown(e){this.disabled||this.$emit("mousedown",e)},handlePointerDown(e){this.disabled||this.$emit("pointerdown",e)},handleMouseUp(e){this.disabled||this.$emit("mouseup",e)},handlePointerUp(e){this.disabled||this.$emit("pointerup",e)},handleFocus(e){this.disabled||this.$emit("focus",e)},handleBlur(e){this.disabled||this.$emit("blur",e)},handleKeypress(e){this.disabled||this.$emit("keypress",e)},handleKeydown(e){this.disabled||this.$emit("keydown",e)},handleContextmenu(e){this.disabled||this.$emit("contextmenu",e)}},render(){const{togglable:e,icon:a,svgIcon:r,iconClass:s,imageUrl:u,imageAlt:h,accessKey:l,tabIndex:o,id:d,type:n,disabled:c,role:p}=this.$props,f=t.getDefaultSlots(this),m=function(){if(u)return i.createVNode("img",{role:"presentation",class:"k-image",alt:h,src:u},null);if(a||r){const g=t.classNames("k-button-icon",s);return i.createVNode(t.Icon,{name:a,icon:r,class:g},null)}else if(s)return i.createVNode("span",{role:"presentation",class:s},null);return null};return i.createVNode("button",{class:this.buttonClasses,onClick:this.handleClick,onMousedown:this.handleMouseDown,onMouseup:this.handleMouseUp,onPointerdown:this.handlePointerDown,onPointerup:this.handlePointerUp,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeypress:this.handleKeypress,onKeydown:this.handleKeydown,onContextmenu:this.handleContextmenu,title:this.title,"aria-label":this.ariaLabel,"aria-disabled":c||void 0,"aria-pressed":e?!!this.currentActive:void 0,accesskey:l,tabindex:o,id:d,type:n,role:p},[m.call(this),f&&i.createVNode("span",{class:"k-button-text"},[f])])}});exports.Button=k;

package/Button.mjs

@@ -0,0 +1,232 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as y, createVNode as o } from "vue";
+import { validatePackage as $, getDefaultSlots as m, kendoThemeMaps as b, classNames as k, Icon as S } from "@progress/kendo-vue-common";
+import v from "./util.mjs";
+import { packageMetadata as C } from "./package-metadata.mjs";
+const w = v.styles, I = /* @__PURE__ */ y({
+  name: "KendoButton",
+  emits: {
+    click: null,
+    mousedown: null,
+    mouseup: null,
+    pointerdown: null,
+    pointerup: null,
+    focus: null,
+    blur: null,
+    keypress: null,
+    keydown: null
+  },
+  props: {
+    ariaLabel: String,
+    ariaPressed: Boolean,
+    title: String,
+    dir: String,
+    selected: {
+      type: Boolean,
+      default: void 0
+    },
+    togglable: {
+      type: Boolean,
+      default: !1
+    },
+    icon: {
+      type: String,
+      default: function() {
+      }
+    },
+    svgIcon: Object,
+    iconClass: {
+      type: String,
+      default: function() {
+      }
+    },
+    imageUrl: {
+      type: String,
+      default: function() {
+      }
+    },
+    imageAlt: String,
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    shape: {
+      type: String
+    },
+    rounded: {
+      type: String,
+      default: "medium"
+    },
+    fillMode: {
+      type: String,
+      default: "solid"
+    },
+    themeColor: {
+      type: String,
+      default: "base"
+    },
+    tabIndex: Number,
+    accessKey: String,
+    id: String,
+    type: String,
+    role: String
+  },
+  created() {
+    $(C), this.currentActive = this.$props.togglable === !0 && this.$props.selected === !0, this._activeTemp = void 0;
+  },
+  data() {
+    return {
+      currentActive: null
+    };
+  },
+  computed: {
+    computedSelected() {
+      return this._activeTemp !== void 0 ? this._activeTemp : this.$props.selected !== void 0 ? this.$props.selected : this.currentActive;
+    },
+    buttonClasses() {
+      const {
+        disabled: e,
+        icon: d,
+        iconClass: a,
+        imageUrl: i,
+        dir: r,
+        svgIcon: c,
+        size: n,
+        shape: s,
+        rounded: l,
+        fillMode: t,
+        themeColor: u
+      } = this.$props, h = c !== void 0 || d !== void 0 || a !== void 0 || i !== void 0, f = m(this);
+      return {
+        [w.button]: !0,
+        [`k-button-${b.sizeMap[n] || n}`]: n,
+        [`k-button-${s}`]: s && s !== "rectangle",
+        [`k-rounded-${b.roundedMap[l] || l}`]: l,
+        "k-icon-button": !f && h,
+        "k-disabled": e,
+        "k-selected": this.computedSelected,
+        "k-rtl": r === "rtl",
+        [`k-button-${t}`]: t,
+        [`k-button-${t}-${u}`]: t && u
+      };
+    }
+  },
+  updated() {
+    this.$props.togglable && this.$props.selected !== void 0 && this.$props.selected !== this.currentActive && (this.currentActive = this.$props.selected);
+  },
+  methods: {
+    focus(e) {
+      this.$el.focus(e);
+    },
+    toggleIfApplicable() {
+      if (!this.disabled && this.$props.togglable && this.$props.selected === void 0) {
+        const e = !this.currentActive;
+        this._activeTemp = e, this.currentActive = e, this._activeTemp = void 0;
+      }
+    },
+    handleClick(e) {
+      this.toggleIfApplicable(), this.disabled || this.$emit("click", e);
+    },
+    handleMouseDown(e) {
+      this.disabled || this.$emit("mousedown", e);
+    },
+    handlePointerDown(e) {
+      this.disabled || this.$emit("pointerdown", e);
+    },
+    handleMouseUp(e) {
+      this.disabled || this.$emit("mouseup", e);
+    },
+    handlePointerUp(e) {
+      this.disabled || this.$emit("pointerup", e);
+    },
+    handleFocus(e) {
+      this.disabled || this.$emit("focus", e);
+    },
+    handleBlur(e) {
+      this.disabled || this.$emit("blur", e);
+    },
+    handleKeypress(e) {
+      this.disabled || this.$emit("keypress", e);
+    },
+    handleKeydown(e) {
+      this.disabled || this.$emit("keydown", e);
+    },
+    handleContextmenu(e) {
+      this.disabled || this.$emit("contextmenu", e);
+    }
+  },
+  render() {
+    const {
+      togglable: e,
+      icon: d,
+      svgIcon: a,
+      iconClass: i,
+      imageUrl: r,
+      imageAlt: c,
+      accessKey: n,
+      tabIndex: s,
+      id: l,
+      type: t,
+      disabled: u,
+      role: h
+    } = this.$props, p = m(this), f = function() {
+      if (r)
+        return o("img", {
+          role: "presentation",
+          class: "k-image",
+          alt: c,
+          src: r
+        }, null);
+      if (d || a) {
+        const g = k("k-button-icon", i);
+        return o(S, {
+          name: d,
+          icon: a,
+          class: g
+        }, null);
+      } else if (i)
+        return o("span", {
+          role: "presentation",
+          class: i
+        }, null);
+      return null;
+    };
+    return o("button", {
+      class: this.buttonClasses,
+      onClick: this.handleClick,
+      onMousedown: this.handleMouseDown,
+      onMouseup: this.handleMouseUp,
+      onPointerdown: this.handlePointerDown,
+      onPointerup: this.handlePointerUp,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onKeypress: this.handleKeypress,
+      onKeydown: this.handleKeydown,
+      onContextmenu: this.handleContextmenu,
+      title: this.title,
+      "aria-label": this.ariaLabel,
+      "aria-disabled": u || void 0,
+      "aria-pressed": e ? !!this.currentActive : void 0,
+      accesskey: n,
+      tabindex: s,
+      id: l,
+      type: t,
+      role: h
+    }, [f.call(this), p && o("span", {
+      class: "k-button-text"
+    }, [p])]);
+  }
+});
+export {
+  I as Button
+};

package/ButtonGroup.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 i=require("vue"),u=require("@progress/kendo-vue-common"),c=require("./ButtonWrap.js"),g=require("./util.js"),f=require("./package-metadata.js"),o=g.default.styles,m=i.defineComponent({name:"KendoButtonGroup",props:{disabled:{type:Boolean,default:void 0},width:String,dir:{type:String,default:function(){}}},created(){u.validatePackage(f.packageMetadata)},render(){const t=u.getDefaultSlots(this),d=function(s,n,r,e){const a=u.classNames({[o["state-disabled"]]:this.$props.disabled,[o["group-start"]]:e?r:n===0,[o["group-end"]]:e?n===0:r});return i.h(c.ButtonWrap,{class:a,"aria-disabled":this.$props.disabled},function(){return[s]})},p=function(s){const n=s.length,r=this.$props.dir!==void 0?this.$props.dir==="rtl":this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1;return s.map((e,a)=>this.isValidButton(e)?d.call(this,e,a,a===n-1,r):e)},l=u.classNames([o["button-group"]],{"k-disabled":this.$props.disabled,[o["button-group-stretched"]]:!!this.$props.width});return i.createVNode("div",{style:{width:this.width},dir:this.$props.dir,role:"group","aria-disabled":this.$props.disabled,class:l},[p.call(this,t)])},methods:{isValidButton(t){return t&&t.tag&&t.tag.toLowerCase().indexOf("button")!==-1||t.componentOptions&&t.componentOptions.tag&&t.componentOptions.tag.toLowerCase().indexOf("button")!==-1||t.type&&t.type.name&&t.type.name.toLowerCase().indexOf("kendobutton")!==-1}}});exports.ButtonGroup=m;

package/ButtonGroup.mjs

@@ -0,0 +1,68 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as l, createVNode as m, h as f } from "vue";
+import { validatePackage as c, getDefaultSlots as g, classNames as i } from "@progress/kendo-vue-common";
+import { ButtonWrap as b } from "./ButtonWrap.mjs";
+import h from "./util.mjs";
+import { packageMetadata as $ } from "./package-metadata.mjs";
+const o = h.styles, S = /* @__PURE__ */ l({
+  name: "KendoButtonGroup",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    width: String,
+    dir: {
+      type: String,
+      default: function() {
+      }
+    }
+  },
+  created() {
+    c($);
+  },
+  render() {
+    const t = g(this), p = function(s, n, r, e) {
+      const a = i({
+        [o["state-disabled"]]: this.$props.disabled,
+        [o["group-start"]]: e ? r : n === 0,
+        [o["group-end"]]: e ? n === 0 : r
+      });
+      return f(b, {
+        class: a,
+        "aria-disabled": this.$props.disabled
+      }, function() {
+        return [s];
+      });
+    }, d = function(s) {
+      const n = s.length, r = this.$props.dir !== void 0 ? this.$props.dir === "rtl" : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1;
+      return s.map((e, a) => this.isValidButton(e) ? p.call(this, e, a, a === n - 1, r) : e);
+    }, u = i([o["button-group"]], {
+      "k-disabled": this.$props.disabled,
+      [o["button-group-stretched"]]: !!this.$props.width
+    });
+    return m("div", {
+      style: {
+        width: this.width
+      },
+      dir: this.$props.dir,
+      role: "group",
+      "aria-disabled": this.$props.disabled,
+      class: u
+    }, [d.call(this, t)]);
+  },
+  methods: {
+    isValidButton(t) {
+      return t && t.tag && t.tag.toLowerCase().indexOf("button") !== -1 || t.componentOptions && t.componentOptions.tag && t.componentOptions.tag.toLowerCase().indexOf("button") !== -1 || t.type && t.type.name && t.type.name.toLowerCase().indexOf("kendobutton") !== -1;
+    }
+  }
+});
+export {
+  S as ButtonGroup
+};

package/ButtonWrap.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 e=require("@progress/kendo-vue-common"),t=require("vue"),o=t.defineComponent({name:"KendoButtonWrap",render(){return e.getDefaultSlots(this)[0]}});exports.ButtonWrap=o;

package/ButtonWrap.mjs

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { getDefaultSlots as t } from "@progress/kendo-vue-common";
+import { defineComponent as o } from "vue";
+const a = /* @__PURE__ */ o({
+  name: "KendoButtonWrap",
+  render() {
+    return t(this)[0];
+  }
+});
+export {
+  a as ButtonWrap
+};

package/Chip/Chip.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 a=require("vue"),t=require("@progress/kendo-vue-common"),m=require("@progress/kendo-svg-icons"),n=require("./focus-reducer.js"),$=require("./data-reducer.js"),r=require("./selection-reducer.js"),S=require("../package-metadata.js"),b=a.defineComponent({name:"KendoVueChip",props:{id:String,text:String,avatar:{type:[String,Function,Object],default:function(){}},value:[String,Object],dir:{type:String,default:function(){return"ltr"}},removable:{type:Boolean,default:!1},removeIcon:{type:String,default:function(){return"x-circle"}},removeSvgIcon:{type:Object,default:function(){return m.xCircleIcon}},disabled:{type:Boolean,default:!1},icon:String,svgIcon:Object,selectedIcon:{type:String,default:function(){return"check"}},selectedSvgIcon:{type:Object,default:function(){return m.checkIcon}},look:{type:String,default:function(){return"solid"}},size:{type:String,default:"medium"},rounded:{type:String,default:"medium"},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","outline","solid"].includes(e)}},themeColor:{type:String,default:"base",validator:function(e){return[null,"base","error","info","success","warning"].includes(e)}},dataItem:Object,selected:Boolean,ariaDescribedBy:String,role:{type:String,default:"button"},tabIndex:Number,onMousedown:Function},emits:{click:null,keydown:null,blur:null,focus:null,remove:null},inject:{kendoSelection:{default:{value:null}},kendoFocused:{default:{value:null}},kendoDataItems:{default:null},handleDispatchDataItems:{default:t.noop},handleDispatchSelection:{default:t.noop},handleDispatchFocus:{default:t.noop}},created(){this.currentDir=void 0,t.validatePackage(S.packageMetadata)},mounted(){this.chip=t.getRef(this,"chip"),this.currentDir=this.$props.dir!==void 0?this.$props.dir==="rtl":this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1},updated(){this.kendoFocused.value===this.$props.value&&this.$el&&this.$el.focus()},computed:{currentSelected(){return this.$props.selected||(Array.isArray(this.kendoSelection.value)?this.kendoSelection.value.some(e=>e===this.$props.value):this.kendoSelection.value===this.$props.value)},chipLabelClass(){return{"k-chip-label":!0,"k-text-ellipsis":!0}}},methods:{computedFocused(){return this.kendoFocused.value===this.$props.value},handleMouseDown(e){this.$emit("mousedown",{target:this.target,event:e})},handleClick(e){this.handleDispatchSelection&&this.handleDispatchSelection({type:r.SELECTION_ACTION.toggle,payload:this.$props.value,event:e}),this.$emit("click",{target:this.target,event:e})},handleRemove(e){e.stopPropagation(),this.$props.removable&&(this.handleDispatchFocus&&(this.handleDispatchDataItems({type:$.DATA_ACTION.remove,payload:this.$props.value,event:e}),this.handleDispatchFocus({type:n.FOCUS_ACTION.reset,payload:this.$props.value,event:e}),this.handleDispatchSelection({type:r.SELECTION_ACTION.remove,payload:this.$props.value,event:e})),this.$emit("remove",{target:this.target,event:e}))},handleKeyDown(e){switch(e.keyCode){case t.Keys.left:this.handleDispatchFocus&&this.handleDispatchFocus({type:n.FOCUS_ACTION.prev,payload:this.$props.value,event:e});break;case t.Keys.right:this.handleDispatchFocus&&this.handleDispatchFocus({type:n.FOCUS_ACTION.next,payload:this.$props.value,event:e});break;case t.Keys.enter:this.handleDispatchFocus&&this.handleDispatchSelection({type:r.SELECTION_ACTION.toggle,payload:this.$props.value,event:e});break;case t.Keys.delete:this.handleRemove(e);break}this.$emit("keydown",{target:this.target,event:e})},handleFocus(e){this.handleDispatchFocus&&this.handleDispatchFocus({payload:this.$props.value,type:n.FOCUS_ACTION.current,event:e}),this.$emit("focus",{target:this.target,event:e})},handleBlur(e){this.$emit("blur",{target:this.target,event:e})}},setup(){return{chipRef:a.ref(null)}},render(){const{size:e,rounded:l,themeColor:c,fillMode:s,look:o,avatar:i,icon:d,svgIcon:u,selectedIcon:h,selectedSvgIcon:p,removeIcon:f,removeSvgIcon:g}=this.$props,k=t.templateRendering.call(this,i,t.getListeners.call(this)),v=i?a.createVNode("div",{class:`k-chip-avatar k-avatar k-rounded-${i.rounded||"medium"} k-avatar-${t.kendoThemeMaps.sizeMap[e]||e} k-avatar-solid k-avatar-solid-primary`,style:i.style},[a.createVNode("span",{class:"k-avatar-image"},[a.createVNode("img",{src:i.imageUrl,alt:i.imageAlt},null)])]):null,y=t.getTemplate.call(this,{h:a.h,template:k});return a.createVNode("div",{role:this.$props.role,id:this.$props.value,ref:t.setRef(this,"chip"),dir:this.currentDir,tabindex:t.getTabIndex(this.$props.tabIndex,this.$props.disabled,void 0),class:t.classNames("k-chip",{"k-rtl":this.currentDir==="rtl","k-disabled":this.$props.disabled,"k-selected":this.currentSelected,"k-focus":this.computedFocused(),[`k-chip-${t.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-rounded-${t.kendoThemeMaps.roundedMap[l]||l}`]:l,[`k-chip-${s}`]:s,[`k-chip-${s}-${c}`]:!!(s&&c),"k-chip-outline":o==="outline"||o==="outlined","k-chip-solid":o==="solid"||o==="filled"}),"aria-pressed":this.$props.role==="button"?this.currentSelected:void 0,"aria-selected":this.$props.role==="option"?this.currentSelected:void 0,"aria-disabled":this.$props.disabled,"aria-describedby":this.$props.ariaDescribedBy,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleClick,onKeydown:this.handleKeyDown,onMousedown:this.handleMouseDown},[this.currentSelected&&(h||p)&&a.createVNode(t.Icon,{name:t.getIconName(h),icon:p,size:"small"},null),(d||u)&&a.createVNode(t.Icon,{name:t.getIconName(d),icon:u,size:"small"},null),i?i.imageUrl?v:y:null,a.createVNode("span",{class:"k-chip-content"},[this.$props.text&&a.createVNode("span",{"aria-label":this.$props.text,class:this.chipLabelClass},[this.$props.text])]),this.$props.removable&&a.createVNode("span",{class:"k-chip-actions"},[a.createVNode("span",{class:"k-chip-action k-chip-remove-action"},[a.createVNode(t.Icon,{name:t.getIconName(f),icon:g,size:"small",onClick:this.handleRemove},null)])])])}});exports.Chip=b;