@progress/kendo-vue-buttons 3.7.4-dev.202212300853 → 3.7.4-dev.202301091431

package/dist/es/Button.js

@@ -26,6 +26,7 @@ var ButtonVue2 = {
   },
   props: {
     ariaLabel: String,
+    title: String,
     dir: String,
     selected: {
       type: Boolean,
@@ -259,12 +260,14 @@ var ButtonVue2 = {
       onKeypress: this.handleKeypress,
       onKeydown: this.handleKeydown,
       onContextmenu: this.handleContextmenu,
-      "aria-label": this.ariaLabel,
+      title: this.title,
       attrs: this.v3 ? undefined : {
+        title: this.title,
         "aria-label": this.ariaLabel,
         "aria-disabled": this.$props.disabled || undefined,
         "aria-pressed": togglable ? this.currentActive ? true : undefined : undefined
       },
+      "aria-label": this.ariaLabel,
       "aria-disabled": this.$props.disabled || undefined,
       "aria-pressed": togglable ? this.currentActive ? true : undefined : undefined
     }, [iconElement.call(this), defaultSlot && h("span", {

package/dist/es/ButtonInterface.d.ts

@@ -26,6 +26,10 @@ export interface ButtonInterface {
      * Sets the aria-label of the Button.
      */
     ariaLabel?: string;
+    /**
+     * Sets the aria-label of the Button.
+     */
+    title?: string;
     /**
      * Sets the direction of the Button.
      */

package/dist/es/Chip/Chip.js

@@ -33,7 +33,7 @@ var ChipVue2 = {
     removeIcon: {
       type: String,
       default: function _default() {
-        return 'k-i-x-circle';
+        return 'x-circle';
       }
     },
     disabled: {
@@ -131,6 +131,12 @@ var ChipVue2 = {
       return this.$props.selected || (Array.isArray(this.kendoSelection.value) ? this.kendoSelection.value.some(function (i) {
         return i === _this.$props.value;
       }) : this.kendoSelection.value === this.$props.value);
+    },
+    chipLabelClass: function chipLabelClass() {
+      return {
+        'k-chip-label': true,
+        'k-text-ellipsis': true
+      };
     }
   },
   methods: {
@@ -310,13 +316,16 @@ var ChipVue2 = {
       attrs: this.v3 ? undefined : {
         "aria-label": this.$props.text
       },
-      "class": 'k-chip-label'
+      "class": this.chipLabelClass
     }, [this.$props.text])]), this.$props.removable && h("span", {
       "class": "k-chip-actions"
     }, [h("span", {
       "class": "k-chip-action k-chip-remove-action"
     }, [h(Icon, {
-      "class": this.$props.removeIcon,
+      name: this.$props.removeIcon,
+      attrs: this.v3 ? undefined : {
+        name: this.$props.removeIcon
+      },
       onClick: this.handleRemove,
       on: this.v3 ? undefined : {
         "click": this.handleRemove

package/dist/es/FloatingActionButton/FloatingActionButton.js

@@ -390,9 +390,9 @@ var FloatingActionButtonVue2 = {
       name: icon,
       attrs: this.v3 ? undefined : {
         name: icon,
-        svgIcon: svgIcon
+        icon: svgIcon
       },
-      svgIcon: svgIcon,
+      icon: svgIcon,
       "class": 'k-fab-icon'
     }) : iconClass ? h(Icon, {
       "class": iconClass

package/dist/es/FloatingActionButton/FloatingActionButtonItem.js

@@ -101,9 +101,9 @@ var FloatingActionButtonItemVue2 = {
       name: icon,
       attrs: this.v3 ? undefined : {
         name: icon,
-        svgIcon: svgIcon
+        icon: svgIcon
       },
-      svgIcon: svgIcon,
+      icon: svgIcon,
       "class": "k-fab-item-icon"
     })]);
     item = getTemplate.call(this, {

package/dist/es/ListButton/ButtonItem.js

@@ -76,9 +76,9 @@ var ButtonItemVue2 = {
         name: dataItem.icon,
         attrs: this.v3 ? undefined : {
           name: dataItem.icon,
-          svgIcon: dataItem.svgIcon
+          icon: dataItem.svgIcon
         },
-        svgIcon: dataItem.svgIcon,
+        icon: dataItem.svgIcon,
         "class": dataItem.iconClass
       }) : dataItem.iconClass && h("span", {
         "class": dataItem.iconClass,

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: 1672389521,
+    publishDate: 1673273361,
     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/es/toolbar/Toolbar.d.ts

@@ -61,6 +61,18 @@ export interface ToolbarProps {
      * ].
      */
     buttons?: string[];
+    /**
+     * Configures the `size` of the Toolbar.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
 }
 /**
  * @hidden

package/dist/es/toolbar/Toolbar.js

@@ -15,7 +15,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { Keys, validatePackage, getDefaultSlots } from '@progress/kendo-vue-common';
+import { Keys, validatePackage, getDefaultSlots, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { toolbarButtons, internalButtons } from './../util';
 import { packageMetadata } from '../package-metadata';
 /**
@@ -38,6 +38,13 @@ var ToolbarVue2 = {
       default: function _default() {
         return undefined;
       }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
     }
   },
   created: function created() {
@@ -52,6 +59,13 @@ var ToolbarVue2 = {
   computed: {
     selectors: function selectors() {
       return this.$props.buttons || toolbarButtons;
+    },
+    wrapperClass: function wrapperClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-toolbar': true
+      }, _a["k-toolbar-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-toolbar-resizable'] = true, _a;
     }
   },
   mounted: function mounted() {
@@ -94,7 +108,7 @@ var ToolbarVue2 = {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
     return h("div", {
-      "class": 'k-toolbar',
+      "class": this.wrapperClass,
       role: "toolbar",
       attrs: this.v3 ? undefined : {
         role: "toolbar",

package/dist/es/toolbar/tools/ToolbarItem.d.ts

@@ -41,21 +41,15 @@ declare let ToolbarItemVue2: ComponentOptions<ToolbarItemAll, DefaultData<Toolba
  *  ```jsx
  *  <template>
  *    <Toolbar>
- *    <ToolbarItem>
  *      <ButtonGroup>
  *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
  *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
  *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
  *      </ButtonGroup>
- *    </ToolbarItem>
- *    <ToolbarSpacer />
- *    <ToolbarItem>
+ *      <ToolbarSpacer />
  *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
- *    </ToolbarItem>
- *    <ToolbarSeparator />
- *    <ToolbarItem>
+ *      <ToolbarSeparator />
  *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
- *    </ToolbarItem>
  *  </Toolbar>
  *  </template>
  *  ```

package/dist/es/toolbar/tools/ToolbarItem.js

@@ -24,7 +24,9 @@ var ToolbarItemVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
-    return h("span", [defaultSlot]);
+    return h("div", {
+      "class": 'k-toolbar-item'
+    }, [defaultSlot]);
   }
 };
 /**
@@ -33,21 +35,15 @@ var ToolbarItemVue2 = {
  *  ```jsx
  *  <template>
  *    <Toolbar>
- *    <ToolbarItem>
  *      <ButtonGroup>
  *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
  *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
  *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
  *      </ButtonGroup>
- *    </ToolbarItem>
- *    <ToolbarSpacer />
- *    <ToolbarItem>
+ *      <ToolbarSpacer />
  *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
- *    </ToolbarItem>
- *    <ToolbarSeparator />
- *    <ToolbarItem>
+ *      <ToolbarSeparator />
  *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
- *    </ToolbarItem>
  *  </Toolbar>
  *  </template>
  *  ```

package/dist/es/toolbar/tools/ToolbarSeparator.d.ts

@@ -13,21 +13,15 @@ declare let ToolbarSeparatorVue2: ComponentOptions<Vue2type, DefaultData<{}>, De
  *  ```jsx
  *  <template>
  *    <Toolbar>
- *    <ToolbarItem>
  *      <ButtonGroup>
  *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
  *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
  *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
  *      </ButtonGroup>
- *    </ToolbarItem>
- *    <ToolbarSpacer />
- *    <ToolbarItem>
+ *      <ToolbarSpacer />
  *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
- *    </ToolbarItem>
- *    <ToolbarSeparator />
- *    <ToolbarItem>
+ *      <ToolbarSeparator />
  *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
- *    </ToolbarItem>
  *  </Toolbar>
  *  </template>
  *  ```

package/dist/es/toolbar/tools/ToolbarSeparator.js

@@ -3,7 +3,6 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { ToolbarItem } from './ToolbarItem';
 /**
  * @hidden
  */
@@ -18,12 +17,9 @@ var ToolbarSeparatorVue2 = {
   },
   render: function render(createElement) {
     var h = gh || createElement;
-    return (
-      // @ts-ignore
-      h(ToolbarItem, {
-        "class": "k-separator"
-      })
-    );
+    return h("div", {
+      "class": "k-separator"
+    });
   }
 };
 /**
@@ -32,21 +28,15 @@ var ToolbarSeparatorVue2 = {
  *  ```jsx
  *  <template>
  *    <Toolbar>
- *    <ToolbarItem>
  *      <ButtonGroup>
  *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
  *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
  *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
  *      </ButtonGroup>
- *    </ToolbarItem>
- *    <ToolbarSpacer />
- *    <ToolbarItem>
+ *      <ToolbarSpacer />
  *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
- *    </ToolbarItem>
- *    <ToolbarSeparator />
- *    <ToolbarItem>
+ *      <ToolbarSeparator />
  *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
- *    </ToolbarItem>
  *  </Toolbar>
  *  </template>
  *  ```

package/dist/es/toolbar/tools/ToolbarSpacer.d.ts

@@ -13,21 +13,15 @@ declare let ToolbarSpacerVue2: ComponentOptions<Vue2type, DefaultData<{}>, Defau
  *  ```jsx
  *  <template>
  *    <Toolbar>
- *    <ToolbarItem>
  *      <ButtonGroup>
  *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
  *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
  *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
  *      </ButtonGroup>
- *    </ToolbarItem>
- *    <ToolbarSpacer />
- *    <ToolbarItem>
+ *      <ToolbarSpacer />
  *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
- *    </ToolbarItem>
- *    <ToolbarSeparator />
- *    <ToolbarItem>
+ *      <ToolbarSeparator />
  *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
- *    </ToolbarItem>
  *  </Toolbar>
  *  </template>
  *  ```

package/dist/es/toolbar/tools/ToolbarSpacer.js

@@ -28,21 +28,15 @@ var ToolbarSpacerVue2 = {
  *  ```jsx
  *  <template>
  *    <Toolbar>
- *    <ToolbarItem>
  *      <ButtonGroup>
  *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
  *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
  *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
  *      </ButtonGroup>
- *    </ToolbarItem>
- *    <ToolbarSpacer />
- *    <ToolbarItem>
+ *      <ToolbarSpacer />
  *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
- *    </ToolbarItem>
- *    <ToolbarSeparator />
- *    <ToolbarItem>
+ *      <ToolbarSeparator />
  *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
- *    </ToolbarItem>
  *  </Toolbar>
  *  </template>
  *  ```

package/dist/esm/Button.js

@@ -26,6 +26,7 @@ var ButtonVue2 = {
   },
   props: {
     ariaLabel: String,
+    title: String,
     dir: String,
     selected: {
       type: Boolean,
@@ -259,12 +260,14 @@ var ButtonVue2 = {
       onKeypress: this.handleKeypress,
       onKeydown: this.handleKeydown,
       onContextmenu: this.handleContextmenu,
-      "aria-label": this.ariaLabel,
+      title: this.title,
       attrs: this.v3 ? undefined : {
+        title: this.title,
         "aria-label": this.ariaLabel,
         "aria-disabled": this.$props.disabled || undefined,
         "aria-pressed": togglable ? this.currentActive ? true : undefined : undefined
       },
+      "aria-label": this.ariaLabel,
       "aria-disabled": this.$props.disabled || undefined,
       "aria-pressed": togglable ? this.currentActive ? true : undefined : undefined
     }, [iconElement.call(this), defaultSlot && h("span", {

package/dist/esm/ButtonInterface.d.ts

@@ -26,6 +26,10 @@ export interface ButtonInterface {
      * Sets the aria-label of the Button.
      */
     ariaLabel?: string;
+    /**
+     * Sets the aria-label of the Button.
+     */
+    title?: string;
     /**
      * Sets the direction of the Button.
      */

package/dist/esm/Chip/Chip.js

@@ -33,7 +33,7 @@ var ChipVue2 = {
     removeIcon: {
       type: String,
       default: function _default() {
-        return 'k-i-x-circle';
+        return 'x-circle';
       }
     },
     disabled: {
@@ -131,6 +131,12 @@ var ChipVue2 = {
       return this.$props.selected || (Array.isArray(this.kendoSelection.value) ? this.kendoSelection.value.some(function (i) {
         return i === _this.$props.value;
       }) : this.kendoSelection.value === this.$props.value);
+    },
+    chipLabelClass: function chipLabelClass() {
+      return {
+        'k-chip-label': true,
+        'k-text-ellipsis': true
+      };
     }
   },
   methods: {
@@ -310,13 +316,16 @@ var ChipVue2 = {
       attrs: this.v3 ? undefined : {
         "aria-label": this.$props.text
       },
-      "class": 'k-chip-label'
+      "class": this.chipLabelClass
     }, [this.$props.text])]), this.$props.removable && h("span", {
       "class": "k-chip-actions"
     }, [h("span", {
       "class": "k-chip-action k-chip-remove-action"
     }, [h(Icon, {
-      "class": this.$props.removeIcon,
+      name: this.$props.removeIcon,
+      attrs: this.v3 ? undefined : {
+        name: this.$props.removeIcon
+      },
       onClick: this.handleRemove,
       on: this.v3 ? undefined : {
         "click": this.handleRemove

package/dist/esm/FloatingActionButton/FloatingActionButton.js

@@ -390,9 +390,9 @@ var FloatingActionButtonVue2 = {
       name: icon,
       attrs: this.v3 ? undefined : {
         name: icon,
-        svgIcon: svgIcon
+        icon: svgIcon
       },
-      svgIcon: svgIcon,
+      icon: svgIcon,
       "class": 'k-fab-icon'
     }) : iconClass ? h(Icon, {
       "class": iconClass

package/dist/esm/FloatingActionButton/FloatingActionButtonItem.js

@@ -101,9 +101,9 @@ var FloatingActionButtonItemVue2 = {
       name: icon,
       attrs: this.v3 ? undefined : {
         name: icon,
-        svgIcon: svgIcon
+        icon: svgIcon
       },
-      svgIcon: svgIcon,
+      icon: svgIcon,
       "class": "k-fab-item-icon"
     })]);
     item = getTemplate.call(this, {

package/dist/esm/ListButton/ButtonItem.js

@@ -76,9 +76,9 @@ var ButtonItemVue2 = {
         name: dataItem.icon,
         attrs: this.v3 ? undefined : {
           name: dataItem.icon,
-          svgIcon: dataItem.svgIcon
+          icon: dataItem.svgIcon
         },
-        svgIcon: dataItem.svgIcon,
+        icon: dataItem.svgIcon,
         "class": dataItem.iconClass
       }) : dataItem.iconClass && h("span", {
         "class": dataItem.iconClass,

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: 1672389521,
+    publishDate: 1673273361,
     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/toolbar/Toolbar.d.ts

@@ -61,6 +61,18 @@ export interface ToolbarProps {
      * ].
      */
     buttons?: string[];
+    /**
+     * Configures the `size` of the Toolbar.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
 }
 /**
  * @hidden

package/dist/esm/toolbar/Toolbar.js

@@ -15,7 +15,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { Keys, validatePackage, getDefaultSlots } from '@progress/kendo-vue-common';
+import { Keys, validatePackage, getDefaultSlots, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { toolbarButtons, internalButtons } from './../util.js';
 import { packageMetadata } from '../package-metadata.js';
 /**
@@ -38,6 +38,13 @@ var ToolbarVue2 = {
       default: function _default() {
         return undefined;
       }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
     }
   },
   created: function created() {
@@ -52,6 +59,13 @@ var ToolbarVue2 = {
   computed: {
     selectors: function selectors() {
       return this.$props.buttons || toolbarButtons;
+    },
+    wrapperClass: function wrapperClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-toolbar': true
+      }, _a["k-toolbar-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-toolbar-resizable'] = true, _a;
     }
   },
   mounted: function mounted() {
@@ -94,7 +108,7 @@ var ToolbarVue2 = {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
     return h("div", {
-      "class": 'k-toolbar',
+      "class": this.wrapperClass,
       role: "toolbar",
       attrs: this.v3 ? undefined : {
         role: "toolbar",

package/dist/esm/toolbar/tools/ToolbarItem.d.ts

@@ -41,21 +41,15 @@ declare let ToolbarItemVue2: ComponentOptions<ToolbarItemAll, DefaultData<Toolba
  *  ```jsx
  *  <template>
  *    <Toolbar>
- *    <ToolbarItem>
  *      <ButtonGroup>
  *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
  *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
  *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
  *      </ButtonGroup>
- *    </ToolbarItem>
- *    <ToolbarSpacer />
- *    <ToolbarItem>
+ *      <ToolbarSpacer />
  *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
- *    </ToolbarItem>
- *    <ToolbarSeparator />
- *    <ToolbarItem>
+ *      <ToolbarSeparator />
  *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
- *    </ToolbarItem>
  *  </Toolbar>
  *  </template>
  *  ```

package/dist/esm/toolbar/tools/ToolbarItem.js

@@ -24,7 +24,9 @@ var ToolbarItemVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
-    return h("span", [defaultSlot]);
+    return h("div", {
+      "class": 'k-toolbar-item'
+    }, [defaultSlot]);
   }
 };
 /**
@@ -33,21 +35,15 @@ var ToolbarItemVue2 = {
  *  ```jsx
  *  <template>
  *    <Toolbar>
- *    <ToolbarItem>
  *      <ButtonGroup>
  *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
  *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
  *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
  *      </ButtonGroup>
- *    </ToolbarItem>
- *    <ToolbarSpacer />
- *    <ToolbarItem>
+ *      <ToolbarSpacer />
  *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
- *    </ToolbarItem>
- *    <ToolbarSeparator />
- *    <ToolbarItem>
+ *      <ToolbarSeparator />
  *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
- *    </ToolbarItem>
  *  </Toolbar>
  *  </template>
  *  ```

package/dist/esm/toolbar/tools/ToolbarSeparator.d.ts

@@ -13,21 +13,15 @@ declare let ToolbarSeparatorVue2: ComponentOptions<Vue2type, DefaultData<{}>, De
  *  ```jsx
  *  <template>
  *    <Toolbar>
- *    <ToolbarItem>
  *      <ButtonGroup>
  *        <Button :icon="'bold'" :title="'Bold'" :togglable="true" />
  *        <Button :icon="'italic'" :title="'Italic'" :togglable="true" />
  *        <Button :icon="'underline'" :title="'Underline'" :togglable="true" />
  *      </ButtonGroup>
- *    </ToolbarItem>
- *    <ToolbarSpacer />
- *    <ToolbarItem>
+ *      <ToolbarSpacer />
  *      <SplitButton :text="'Insert'" :items="splitItems"> </SplitButton>
- *    </ToolbarItem>
- *    <ToolbarSeparator />
- *    <ToolbarItem>
+ *      <ToolbarSeparator />
  *      <Button :icon="'cut'" :title="'Cut'"> Cut </Button>
- *    </ToolbarItem>
  *  </Toolbar>
  *  </template>
  *  ```