@progress/kendo-vue-buttons 3.12.0-dev.202307181339 → 3.12.1-dev.202308170413

package/dist/es/Chip/Chip.d.ts

@@ -5,6 +5,27 @@ declare type DefaultMethods<V> = {
 };
 import { SVGIcon } from '@progress/kendo-vue-common';
 import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from '../models/events';
+/**
+ * Represents the properties of the Avatar in the Chip.
+ */
+export interface ChipAvatarProps {
+    /**
+     * Sets the image of the avatar.
+     */
+    imageUrl: string;
+    /**
+     * Defines the alternative text of the avatar image.
+     */
+    imageAlt: string;
+    /**
+     * Configures the `roundness` of the avatar. Default is set to 'medium'.
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Sets additional CSS styles to the avatar
+     */
+    style?: object;
+}
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
  */
@@ -66,7 +87,8 @@ export interface ChipProps {
      */
     look?: string;
     /**
-     * Defines the avatar template that will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     * If set to object of type ChipAvatarProps with image and imageAlt it renders a default Avatar. If set to string or a `render` function it
+     * defines the avatar template that will be shown.
      */
     avatar?: string | Function | Object;
     /**

package/dist/es/Chip/Chip.js

@@ -18,7 +18,12 @@ var ChipVue2 = {
   props: {
     id: String,
     text: String,
-    avatar: [String, Function, Object],
+    avatar: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return undefined;
+      }
+    },
     value: [String, Object],
     dir: {
       type: String,
@@ -286,6 +291,19 @@ var ChipVue2 = {
       removeIcon = _b.removeIcon,
       removeSvgIcon = _b.removeSvgIcon;
     var avatarTemplate = templateRendering.call(this, avatar, getListeners.call(this));
+    var avatarDefaultRendering = avatar ? h("div", {
+      "class": "k-chip-avatar k-avatar k-rounded-".concat(avatar.rounded || 'medium', " k-avatar-").concat(kendoThemeMaps.sizeMap[size] || size, " k-avatar-solid k-avatar-solid-primary"),
+      style: avatar.style
+    }, [h("span", {
+      "class": "k-avatar-image"
+    }, [h("img", {
+      src: avatar.imageUrl,
+      attrs: this.v3 ? undefined : {
+        src: avatar.imageUrl,
+        alt: avatar.imageAlt
+      },
+      alt: avatar.imageAlt
+    })])]) : null;
     var avatarRender = getTemplate.call(this, {
       h: h,
       template: avatarTemplate
@@ -344,7 +362,7 @@ var ChipVue2 = {
       },
       icon: svgIcon,
       size: 'small'
-    }), avatar && avatarRender, h("span", {
+    }), avatar ? avatar.imageUrl ? avatarDefaultRendering : avatarRender : null, h("span", {
       "class": 'k-chip-content'
     }, [this.$props.text && h("span", {
       "aria-label": this.$props.text,

package/dist/es/Chip/ChipList.d.ts

@@ -91,13 +91,17 @@ export interface ChipListProps extends FormComponentProps {
      */
     selection?: string;
     /**
-     * Represents the `text` field of Chip, used for the `label`.
+     * Represents the `text` field of Chip, defaults to 'text'.
      */
     textField?: string;
     /**
-     * Represents the `value` field of Chip, used for setting the Chip `id`.
+     * Represents the `value` field of the Chip, defaults to 'value'.
      */
     valueField?: string;
+    /**
+     * Represents the 'avatar' field in the Chip,  defaults to 'avatar'.
+     */
+    avatarField?: object;
     /**
      * Determines of ChipList is disabled.
      */

package/dist/es/Chip/ChipList.js

@@ -78,6 +78,12 @@ var ChipListVue2 = {
         return 'value';
       }
     },
+    avatarField: {
+      type: String,
+      default: function _default() {
+        return 'avatar';
+      }
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -228,6 +234,7 @@ var ChipListVue2 = {
           dataItem: item,
           text: item[this.$props.textField],
           value: item[this.$props.valueField],
+          avatar: item[this.$props.avatarField],
           size: this.$props.size,
           rounded: this.$props.rounded,
           fillMode: this.$props.fillMode
@@ -236,6 +243,7 @@ var ChipListVue2 = {
         key: item[this.$props.valueField],
         text: item[this.$props.textField],
         value: item[this.$props.valueField],
+        avatar: item[this.$props.avatarField],
         size: this.$props.size,
         rounded: this.$props.rounded,
         fillMode: this.$props.fillMode

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-buttons',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1689686872,
+    publishDate: 1692244674,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/Chip/Chip.d.ts

@@ -5,6 +5,27 @@ declare type DefaultMethods<V> = {
 };
 import { SVGIcon } from '@progress/kendo-vue-common';
 import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from '../models/events';
+/**
+ * Represents the properties of the Avatar in the Chip.
+ */
+export interface ChipAvatarProps {
+    /**
+     * Sets the image of the avatar.
+     */
+    imageUrl: string;
+    /**
+     * Defines the alternative text of the avatar image.
+     */
+    imageAlt: string;
+    /**
+     * Configures the `roundness` of the avatar. Default is set to 'medium'.
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Sets additional CSS styles to the avatar
+     */
+    style?: object;
+}
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
  */
@@ -66,7 +87,8 @@ export interface ChipProps {
      */
     look?: string;
     /**
-     * Defines the avatar template that will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     * If set to object of type ChipAvatarProps with image and imageAlt it renders a default Avatar. If set to string or a `render` function it
+     * defines the avatar template that will be shown.
      */
     avatar?: string | Function | Object;
     /**

package/dist/esm/Chip/Chip.js

@@ -18,7 +18,12 @@ var ChipVue2 = {
   props: {
     id: String,
     text: String,
-    avatar: [String, Function, Object],
+    avatar: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return undefined;
+      }
+    },
     value: [String, Object],
     dir: {
       type: String,
@@ -286,6 +291,19 @@ var ChipVue2 = {
       removeIcon = _b.removeIcon,
       removeSvgIcon = _b.removeSvgIcon;
     var avatarTemplate = templateRendering.call(this, avatar, getListeners.call(this));
+    var avatarDefaultRendering = avatar ? h("div", {
+      "class": "k-chip-avatar k-avatar k-rounded-".concat(avatar.rounded || 'medium', " k-avatar-").concat(kendoThemeMaps.sizeMap[size] || size, " k-avatar-solid k-avatar-solid-primary"),
+      style: avatar.style
+    }, [h("span", {
+      "class": "k-avatar-image"
+    }, [h("img", {
+      src: avatar.imageUrl,
+      attrs: this.v3 ? undefined : {
+        src: avatar.imageUrl,
+        alt: avatar.imageAlt
+      },
+      alt: avatar.imageAlt
+    })])]) : null;
     var avatarRender = getTemplate.call(this, {
       h: h,
       template: avatarTemplate
@@ -344,7 +362,7 @@ var ChipVue2 = {
       },
       icon: svgIcon,
       size: 'small'
-    }), avatar && avatarRender, h("span", {
+    }), avatar ? avatar.imageUrl ? avatarDefaultRendering : avatarRender : null, h("span", {
       "class": 'k-chip-content'
     }, [this.$props.text && h("span", {
       "aria-label": this.$props.text,

package/dist/esm/Chip/ChipList.d.ts

@@ -91,13 +91,17 @@ export interface ChipListProps extends FormComponentProps {
      */
     selection?: string;
     /**
-     * Represents the `text` field of Chip, used for the `label`.
+     * Represents the `text` field of Chip, defaults to 'text'.
      */
     textField?: string;
     /**
-     * Represents the `value` field of Chip, used for setting the Chip `id`.
+     * Represents the `value` field of the Chip, defaults to 'value'.
      */
     valueField?: string;
+    /**
+     * Represents the 'avatar' field in the Chip,  defaults to 'avatar'.
+     */
+    avatarField?: object;
     /**
      * Determines of ChipList is disabled.
      */

package/dist/esm/Chip/ChipList.js

@@ -78,6 +78,12 @@ var ChipListVue2 = {
         return 'value';
       }
     },
+    avatarField: {
+      type: String,
+      default: function _default() {
+        return 'avatar';
+      }
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -228,6 +234,7 @@ var ChipListVue2 = {
           dataItem: item,
           text: item[this.$props.textField],
           value: item[this.$props.valueField],
+          avatar: item[this.$props.avatarField],
           size: this.$props.size,
           rounded: this.$props.rounded,
           fillMode: this.$props.fillMode
@@ -236,6 +243,7 @@ var ChipListVue2 = {
         key: item[this.$props.valueField],
         text: item[this.$props.textField],
         value: item[this.$props.valueField],
+        avatar: item[this.$props.avatarField],
         size: this.$props.size,
         rounded: this.$props.rounded,
         fillMode: this.$props.fillMode

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-buttons',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1689686872,
+    publishDate: 1692244674,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/Chip/Chip.d.ts

@@ -5,6 +5,27 @@ declare type DefaultMethods<V> = {
 };
 import { SVGIcon } from '@progress/kendo-vue-common';
 import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from '../models/events';
+/**
+ * Represents the properties of the Avatar in the Chip.
+ */
+export interface ChipAvatarProps {
+    /**
+     * Sets the image of the avatar.
+     */
+    imageUrl: string;
+    /**
+     * Defines the alternative text of the avatar image.
+     */
+    imageAlt: string;
+    /**
+     * Configures the `roundness` of the avatar. Default is set to 'medium'.
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Sets additional CSS styles to the avatar
+     */
+    style?: object;
+}
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
  */
@@ -66,7 +87,8 @@ export interface ChipProps {
      */
     look?: string;
     /**
-     * Defines the avatar template that will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     * If set to object of type ChipAvatarProps with image and imageAlt it renders a default Avatar. If set to string or a `render` function it
+     * defines the avatar template that will be shown.
      */
     avatar?: string | Function | Object;
     /**

package/dist/npm/Chip/Chip.js

@@ -24,7 +24,12 @@ var ChipVue2 = {
   props: {
     id: String,
     text: String,
-    avatar: [String, Function, Object],
+    avatar: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return undefined;
+      }
+    },
     value: [String, Object],
     dir: {
       type: String,
@@ -292,6 +297,19 @@ var ChipVue2 = {
       removeIcon = _b.removeIcon,
       removeSvgIcon = _b.removeSvgIcon;
     var avatarTemplate = kendo_vue_common_1.templateRendering.call(this, avatar, kendo_vue_common_1.getListeners.call(this));
+    var avatarDefaultRendering = avatar ? h("div", {
+      "class": "k-chip-avatar k-avatar k-rounded-".concat(avatar.rounded || 'medium', " k-avatar-").concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size, " k-avatar-solid k-avatar-solid-primary"),
+      style: avatar.style
+    }, [h("span", {
+      "class": "k-avatar-image"
+    }, [h("img", {
+      src: avatar.imageUrl,
+      attrs: this.v3 ? undefined : {
+        src: avatar.imageUrl,
+        alt: avatar.imageAlt
+      },
+      alt: avatar.imageAlt
+    })])]) : null;
     var avatarRender = kendo_vue_common_1.getTemplate.call(this, {
       h: h,
       template: avatarTemplate
@@ -350,7 +368,7 @@ var ChipVue2 = {
       },
       icon: svgIcon,
       size: 'small'
-    }), avatar && avatarRender, h("span", {
+    }), avatar ? avatar.imageUrl ? avatarDefaultRendering : avatarRender : null, h("span", {
       "class": 'k-chip-content'
     }, [this.$props.text && h("span", {
       "aria-label": this.$props.text,

package/dist/npm/Chip/ChipList.d.ts

@@ -91,13 +91,17 @@ export interface ChipListProps extends FormComponentProps {
      */
     selection?: string;
     /**
-     * Represents the `text` field of Chip, used for the `label`.
+     * Represents the `text` field of Chip, defaults to 'text'.
      */
     textField?: string;
     /**
-     * Represents the `value` field of Chip, used for setting the Chip `id`.
+     * Represents the `value` field of the Chip, defaults to 'value'.
      */
     valueField?: string;
+    /**
+     * Represents the 'avatar' field in the Chip,  defaults to 'avatar'.
+     */
+    avatarField?: object;
     /**
      * Determines of ChipList is disabled.
      */

package/dist/npm/Chip/ChipList.js

@@ -84,6 +84,12 @@ var ChipListVue2 = {
         return 'value';
       }
     },
+    avatarField: {
+      type: String,
+      default: function _default() {
+        return 'avatar';
+      }
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -234,6 +240,7 @@ var ChipListVue2 = {
           dataItem: item,
           text: item[this.$props.textField],
           value: item[this.$props.valueField],
+          avatar: item[this.$props.avatarField],
           size: this.$props.size,
           rounded: this.$props.rounded,
           fillMode: this.$props.fillMode
@@ -242,6 +249,7 @@ var ChipListVue2 = {
         key: item[this.$props.valueField],
         text: item[this.$props.textField],
         value: item[this.$props.valueField],
+        avatar: item[this.$props.avatarField],
         size: this.$props.size,
         rounded: this.$props.rounded,
         fillMode: this.$props.fillMode

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-buttons',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1689686872,
+    publishDate: 1692244674,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-buttons",
   "description": "Kendo UI for Vue Buttons package",
-  "version": "3.12.0-dev.202307181339",
+  "version": "3.12.1-dev.202308170413",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -41,15 +41,15 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-common": "3.12.0-dev.202307181339",
-    "@progress/kendo-vue-popup": "3.12.0-dev.202307181339"
+    "@progress/kendo-vue-common": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-popup": "3.12.1-dev.202308170413"
   },
   "devDependencies": {
     "@progress/kendo-drawing": "^1.5.12",
     "@progress/kendo-svg-icons": "^1.0.0",
-    "@progress/kendo-vue-dropdowns": "3.12.0-dev.202307181339",
-    "@progress/kendo-vue-inputs": "3.12.0-dev.202307181339",
-    "@progress/kendo-vue-layout": "3.12.0-dev.202307181339"
+    "@progress/kendo-vue-dropdowns": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-inputs": "3.12.1-dev.202308170413",
+    "@progress/kendo-vue-layout": "3.12.1-dev.202308170413"
   },
   "@progress": {
     "friendlyName": "Buttons",