@syncfusion/ej2-vue-ribbon 21.1.35

package/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * index
+ */
+export * from './src/index';

package/index.js

@@ -0,0 +1,4 @@
+/**
+ * index
+ */
+export * from './src/index';

package/license

@@ -0,0 +1,6 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

package/package.json

@@ -0,0 +1,62 @@
+{
+  "_from": "@syncfusion/ej2-vue-ribbon@*",
+  "_id": "@syncfusion/ej2-vue-ribbon@0.25.0",
+  "_inBundle": false,
+  "_integrity": "sha512-Z212t6x90K0cvTd4C+0Y8E1oZ9rwu8U7vZXBNJ6v9EESfFb5erJ7jtmfsoZmyjgRZIV5dccHffQfptu20TN5mg==",
+  "_location": "/@syncfusion/ej2-vue-ribbon",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "@syncfusion/ej2-vue-ribbon@*",
+    "name": "@syncfusion/ej2-vue-ribbon",
+    "escapedName": "@syncfusion%2fej2-vue-ribbon",
+    "scope": "@syncfusion",
+    "rawSpec": "*",
+    "saveSpec": null,
+    "fetchSpec": "*"
+  },
+  "_requiredBy": [
+    "/"
+  ],
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-vue-ribbon/-/ej2-vue-ribbon-0.25.0.tgz",
+  "_shasum": "7cc59323450aa97639a3b8976f0bf75281a7314a",
+  "_spec": "@syncfusion/ej2-vue-ribbon@*",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "author": {
+    "name": "Syncfusion Inc."
+  },
+  "bugs": {
+    "url": "https://github.com/syncfusion/ej2-vue-ui-components/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {
+    "@syncfusion/ej2-base": "~21.1.35",
+    "@syncfusion/ej2-ribbon": "21.1.35",
+    "@syncfusion/ej2-vue-base": "~21.1.35"
+  },
+  "deprecated": false,
+  "description": "Essential JS 2 Component for Vue",
+  "devDependencies": {},
+  "es2015": "dist/es6/ej2-vue-ribbon.es2015.js",
+  "homepage": "https://www.syncfusion.com/vue-components",
+  "keywords": [
+    "vue",
+    "vuejs",
+    "ej2-vue-ribbon",
+    "vue-ribbon"
+  ],
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-vue-ribbon.umd.min.js",
+  "module": "./index.js",
+  "name": "@syncfusion/ej2-vue-ribbon",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/syncfusion/ej2-vue-ui-components.git"
+  },
+  "scripts": {
+    "postinstall": "node ../ej2-vue-base/postinstall.js"
+  },
+  "version": "21.1.35",
+  "sideEffects": false
+}

package/ribbon.d.ts

@@ -0,0 +1,4 @@
+/**
+ * ribbon
+ */
+export * from './src/ribbon/index';

package/ribbon.js

@@ -0,0 +1,4 @@
+/**
+ * ribbon
+ */
+export * from './src/ribbon/index';

package/src/global.js

@@ -0,0 +1 @@
+export * from './index';

package/src/index.d.ts

@@ -0,0 +1,6 @@
+export * from '@syncfusion/ej2-ribbon';
+export { RibbonItemsDirective, RibbonItemDirective, RibbonItemsPlugin, RibbonItemPlugin } from './ribbon/items.directive';
+export { RibbonCollectionsDirective, RibbonCollectionDirective, RibbonCollectionsPlugin, RibbonCollectionPlugin } from './ribbon/collections.directive';
+export { RibbonGroupsDirective, RibbonGroupDirective, RibbonGroupsPlugin, RibbonGroupPlugin } from './ribbon/groups.directive';
+export { RibbonTabsDirective, RibbonTabDirective, RibbonTabsPlugin, RibbonTabPlugin } from './ribbon/tabs.directive';
+export { RibbonComponent, RibbonPlugin } from './ribbon/ribbon.component';

package/src/index.js

@@ -0,0 +1,6 @@
+export * from '@syncfusion/ej2-ribbon';
+export { RibbonItemsDirective, RibbonItemDirective, RibbonItemsPlugin, RibbonItemPlugin } from './ribbon/items.directive';
+export { RibbonCollectionsDirective, RibbonCollectionDirective, RibbonCollectionsPlugin, RibbonCollectionPlugin } from './ribbon/collections.directive';
+export { RibbonGroupsDirective, RibbonGroupDirective, RibbonGroupsPlugin, RibbonGroupPlugin } from './ribbon/groups.directive';
+export { RibbonTabsDirective, RibbonTabDirective, RibbonTabsPlugin, RibbonTabPlugin } from './ribbon/tabs.directive';
+export { RibbonComponent, RibbonPlugin } from './ribbon/ribbon.component';

package/src/ribbon/collections.directive.d.ts

@@ -0,0 +1,30 @@
+export declare let RibbonCollectionsDirective: any;
+export declare const RibbonCollectionsPlugin: {
+    name: string;
+    install(Vue: any): void;
+};
+/**
+ * `e-ribbon-collection` directive represent a collection in the VueJS Ribbon.
+ * ```vue
+ * <ejs-ribbon>
+ *   <e-ribbon-tabs>
+ *    <e-ribbon-tab></e-ribbon-tab>
+ *    <e-ribbon-tab>
+ *       <e-ribbon-groups>
+ *         <e-ribbon-group>
+ *             <e-ribbon-collections>
+ *                 <e-ribbon-collection></e-ribbon-collection>
+ *                 <e-ribbon-collection></e-ribbon-collection>
+ *             </e-ribbon-collections>
+ *         </e-ribbon-group>
+ *       </e-ribbon-groups>
+ *    </e-ribbon-tab>
+ *   </e-ribbon-tabs>
+ * </ejs-ribbon>
+ * ```
+ */
+export declare let RibbonCollectionDirective: any;
+export declare const RibbonCollectionPlugin: {
+    name: string;
+    install(Vue: any): void;
+};

package/src/ribbon/collections.directive.js

@@ -0,0 +1,68 @@
+import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+export var RibbonCollectionsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
+        if (!isExecute) {
+            var h = !isExecute ? gh : createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = !isExecute ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
+        return;
+    },
+    updated: function () {
+        if (!isExecute && this.custom) {
+            this.custom();
+        }
+    },
+    methods: {
+        getTag: function () {
+            return 'e-ribbon-collections';
+        }
+    }
+});
+export var RibbonCollectionsPlugin = {
+    name: 'e-ribbon-collections',
+    install: function (Vue) {
+        Vue.component(RibbonCollectionsPlugin.name, RibbonCollectionsDirective);
+    }
+};
+/**
+ * `e-ribbon-collection` directive represent a collection in the VueJS Ribbon.
+ * ```vue
+ * <ejs-ribbon>
+ *   <e-ribbon-tabs>
+ *    <e-ribbon-tab></e-ribbon-tab>
+ *    <e-ribbon-tab>
+ *       <e-ribbon-groups>
+ *         <e-ribbon-group>
+ *             <e-ribbon-collections>
+ *                 <e-ribbon-collection></e-ribbon-collection>
+ *                 <e-ribbon-collection></e-ribbon-collection>
+ *             </e-ribbon-collections>
+ *         </e-ribbon-group>
+ *       </e-ribbon-groups>
+ *    </e-ribbon-tab>
+ *   </e-ribbon-tabs>
+ * </ejs-ribbon>
+ * ```
+ */
+export var RibbonCollectionDirective = vueDefineComponent({
+    render: function () {
+        return;
+    },
+    methods: {
+        getTag: function () {
+            return 'e-ribbon-collection';
+        }
+    }
+});
+export var RibbonCollectionPlugin = {
+    name: 'e-ribbon-collection',
+    install: function (Vue) {
+        Vue.component(RibbonCollectionPlugin.name, RibbonCollectionDirective);
+    }
+};

package/src/ribbon/groups.directive.d.ts

@@ -0,0 +1,26 @@
+export declare let RibbonGroupsDirective: any;
+export declare const RibbonGroupsPlugin: {
+    name: string;
+    install(Vue: any): void;
+};
+/**
+ * `e-ribbon-group` directive represent a group in the VueJS Ribbon.
+ * ```vue
+ * <ejs-ribbon>
+ *   <e-ribbon-tabs>
+ *    <e-ribbon-tab></e-ribbon-tab>
+ *    <e-ribbon-tab>
+ *       <e-ribbon-groups>
+ *         <e-ribbon-group></e-ribbon-group>
+ *         <e-ribbon-group></e-ribbon-group>
+ *       </e-ribbon-groups>
+ *    </e-ribbon-tab>
+ *   </e-ribbon-tabs>
+ * </ejs-ribbon>
+ * ```
+ */
+export declare let RibbonGroupDirective: any;
+export declare const RibbonGroupPlugin: {
+    name: string;
+    install(Vue: any): void;
+};

package/src/ribbon/groups.directive.js

@@ -0,0 +1,64 @@
+import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+export var RibbonGroupsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
+        if (!isExecute) {
+            var h = !isExecute ? gh : createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = !isExecute ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
+        return;
+    },
+    updated: function () {
+        if (!isExecute && this.custom) {
+            this.custom();
+        }
+    },
+    methods: {
+        getTag: function () {
+            return 'e-ribbon-groups';
+        }
+    }
+});
+export var RibbonGroupsPlugin = {
+    name: 'e-ribbon-groups',
+    install: function (Vue) {
+        Vue.component(RibbonGroupsPlugin.name, RibbonGroupsDirective);
+    }
+};
+/**
+ * `e-ribbon-group` directive represent a group in the VueJS Ribbon.
+ * ```vue
+ * <ejs-ribbon>
+ *   <e-ribbon-tabs>
+ *    <e-ribbon-tab></e-ribbon-tab>
+ *    <e-ribbon-tab>
+ *       <e-ribbon-groups>
+ *         <e-ribbon-group></e-ribbon-group>
+ *         <e-ribbon-group></e-ribbon-group>
+ *       </e-ribbon-groups>
+ *    </e-ribbon-tab>
+ *   </e-ribbon-tabs>
+ * </ejs-ribbon>
+ * ```
+ */
+export var RibbonGroupDirective = vueDefineComponent({
+    render: function () {
+        return;
+    },
+    methods: {
+        getTag: function () {
+            return 'e-ribbon-group';
+        }
+    }
+});
+export var RibbonGroupPlugin = {
+    name: 'e-ribbon-group',
+    install: function (Vue) {
+        Vue.component(RibbonGroupPlugin.name, RibbonGroupDirective);
+    }
+};

package/src/ribbon/index.d.ts

@@ -0,0 +1,5 @@
+export { RibbonItemsDirective, RibbonItemDirective, RibbonItemsPlugin, RibbonItemPlugin } from './items.directive';
+export { RibbonCollectionsDirective, RibbonCollectionDirective, RibbonCollectionsPlugin, RibbonCollectionPlugin } from './collections.directive';
+export { RibbonGroupsDirective, RibbonGroupDirective, RibbonGroupsPlugin, RibbonGroupPlugin } from './groups.directive';
+export { RibbonTabsDirective, RibbonTabDirective, RibbonTabsPlugin, RibbonTabPlugin } from './tabs.directive';
+export { RibbonComponent, RibbonPlugin } from './ribbon.component';

package/src/ribbon/index.js

@@ -0,0 +1,5 @@
+export { RibbonItemsDirective, RibbonItemDirective, RibbonItemsPlugin, RibbonItemPlugin } from './items.directive';
+export { RibbonCollectionsDirective, RibbonCollectionDirective, RibbonCollectionsPlugin, RibbonCollectionPlugin } from './collections.directive';
+export { RibbonGroupsDirective, RibbonGroupDirective, RibbonGroupsPlugin, RibbonGroupPlugin } from './groups.directive';
+export { RibbonTabsDirective, RibbonTabDirective, RibbonTabsPlugin, RibbonTabPlugin } from './tabs.directive';
+export { RibbonComponent, RibbonPlugin } from './ribbon.component';

package/src/ribbon/items.directive.d.ts

@@ -0,0 +1,34 @@
+export declare let RibbonItemsDirective: any;
+export declare const RibbonItemsPlugin: {
+    name: string;
+    install(Vue: any): void;
+};
+/**
+ * `e-ribbon-item` directive represent a item in the VueJS Ribbon.
+ * ```vue
+ * <ejs-ribbon>
+ *   <e-ribbon-tabs>
+ *    <e-ribbon-tab></e-ribbon-tab>
+ *    <e-ribbon-tab>
+ *       <e-ribbon-groups>
+ *         <e-ribbon-group>
+ *             <e-ribbon-collections>
+ *                 <e-ribbon-collection>
+ *                     <e-ribbon-items>
+ *                         <e-ribbon-item></e-ribbon-item>
+ *                         <e-ribbon-item></e-ribbon-item>
+ *                     </e-ribbon-items>
+ *                 </e-ribbon-collection>
+ *             </e-ribbon-collections>
+ *         </e-ribbon-group>
+ *       </e-ribbon-groups>
+ *    </e-ribbon-tab>
+ *   </e-ribbon-tabs>
+ * </ejs-ribbon>
+ * ```
+ */
+export declare let RibbonItemDirective: any;
+export declare const RibbonItemPlugin: {
+    name: string;
+    install(Vue: any): void;
+};

package/src/ribbon/items.directive.js

@@ -0,0 +1,72 @@
+import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+export var RibbonItemsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render: function (createElement) {
+        if (!isExecute) {
+            var h = !isExecute ? gh : createElement;
+            var slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = !isExecute ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
+        return;
+    },
+    updated: function () {
+        if (!isExecute && this.custom) {
+            this.custom();
+        }
+    },
+    methods: {
+        getTag: function () {
+            return 'e-ribbon-items';
+        }
+    }
+});
+export var RibbonItemsPlugin = {
+    name: 'e-ribbon-items',
+    install: function (Vue) {
+        Vue.component(RibbonItemsPlugin.name, RibbonItemsDirective);
+    }
+};
+/**
+ * `e-ribbon-item` directive represent a item in the VueJS Ribbon.
+ * ```vue
+ * <ejs-ribbon>
+ *   <e-ribbon-tabs>
+ *    <e-ribbon-tab></e-ribbon-tab>
+ *    <e-ribbon-tab>
+ *       <e-ribbon-groups>
+ *         <e-ribbon-group>
+ *             <e-ribbon-collections>
+ *                 <e-ribbon-collection>
+ *                     <e-ribbon-items>
+ *                         <e-ribbon-item></e-ribbon-item>
+ *                         <e-ribbon-item></e-ribbon-item>
+ *                     </e-ribbon-items>
+ *                 </e-ribbon-collection>
+ *             </e-ribbon-collections>
+ *         </e-ribbon-group>
+ *       </e-ribbon-groups>
+ *    </e-ribbon-tab>
+ *   </e-ribbon-tabs>
+ * </ejs-ribbon>
+ * ```
+ */
+export var RibbonItemDirective = vueDefineComponent({
+    render: function () {
+        return;
+    },
+    methods: {
+        getTag: function () {
+            return 'e-ribbon-item';
+        }
+    }
+});
+export var RibbonItemPlugin = {
+    name: 'e-ribbon-item',
+    install: function (Vue) {
+        Vue.component(RibbonItemPlugin.name, RibbonItemDirective);
+    }
+};

package/src/ribbon/ribbon.component.d.ts

@@ -0,0 +1,16 @@
+export declare const properties: string[];
+export declare const modelProps: string[];
+export declare const testProp: any;
+export declare const props: any, watch: any, emitProbs: any;
+/**
+ * Represents the Essential JS 2 VueJS Ribbon Component
+ * ```vue
+ * <ejs-ribbon></ejs-ribbon>
+ * ```
+ */
+export declare let RibbonComponent: any;
+export declare type RibbonComponent = InstanceType<typeof RibbonComponent>;
+export declare const RibbonPlugin: {
+    name: string;
+    install(Vue: any): void;
+};

package/src/ribbon/ribbon.component.js

@@ -0,0 +1,161 @@
+import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
+import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
+import { Ribbon } from '@syncfusion/ej2-ribbon';
+import { RibbonItemsDirective, RibbonItemDirective, RibbonItemsPlugin, RibbonItemPlugin } from './items.directive';
+import { RibbonCollectionsDirective, RibbonCollectionDirective, RibbonCollectionsPlugin, RibbonCollectionPlugin } from './collections.directive';
+import { RibbonGroupsDirective, RibbonGroupDirective, RibbonGroupsPlugin, RibbonGroupPlugin } from './groups.directive';
+import { RibbonTabsDirective, RibbonTabDirective, RibbonTabsPlugin, RibbonTabPlugin } from './tabs.directive';
+export var properties = ['isLazyUpdate', 'plugins', 'activeLayout', 'cssClass', 'enablePersistence', 'enableRtl', 'fileMenu', 'helpPaneTemplate', 'isMinimized', 'launcherIconCss', 'locale', 'selectedTab', 'tabAnimation', 'tabs', 'width', 'launcherIconClick', 'ribbonCollapsing', 'ribbonExpanding', 'tabSelected', 'tabSelecting'];
+export var modelProps = [];
+export var testProp = getProps({ props: properties });
+export var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
+emitProbs.push('modelchanged', 'update:modelValue');
+for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
+    var props_1 = modelProps_1[_i];
+    emitProbs.push('update:' + props_1);
+}
+/**
+ * Represents the Essential JS 2 VueJS Ribbon Component
+ * ```vue
+ * <ejs-ribbon></ejs-ribbon>
+ * ```
+ */
+export var RibbonComponent = vueDefineComponent({
+    name: 'RibbonComponent',
+    mixins: [ComponentBase],
+    props: props,
+    watch: watch,
+    emits: emitProbs,
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            ej2Instances: new Ribbon({}),
+            propKeys: properties,
+            models: modelProps,
+            hasChildDirective: true,
+            hasInjectedModules: true,
+            tagMapper: { "e-ribbon-tabs": { "e-ribbon-tab": { "e-ribbon-groups": { "e-ribbon-group": { "e-ribbon-collections": { "e-ribbon-collection": { "e-ribbon-items": "e-ribbon-item" } } } } } } },
+            tagNameMapper: { "e-ribbon-items": "e-items", "e-ribbon-collections": "e-collections", "e-ribbon-groups": "e-groups", "e-ribbon-tabs": "e-tabs" },
+            isVue3: !isExecute,
+            templateCollection: {},
+        };
+    },
+    created: function () {
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    },
+    render: function (createElement) {
+        var h = !isExecute ? gh : createElement;
+        var slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
+        }
+        return h('div', slots);
+    },
+    methods: {
+        clearTemplate: function (templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
+                    var tempName = templateNames_1[_i];
+                    var elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
+                            var ele = elementCollection_1[_a];
+                            var destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
+                        }
+                        delete this.templateCollection[tempName];
+                    }
+                }
+            }
+        },
+        setProperties: function (prop, muteOnChange) {
+            var _this = this;
+            if (this.isVue3) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if (this.ej2Instances && this.ej2Instances._setProperties) {
+                this.ej2Instances._setProperties(prop, muteOnChange);
+            }
+            if (prop && this.models && this.models.length) {
+                Object.keys(prop).map(function (key) {
+                    _this.models.map(function (model) {
+                        if ((key === model) && !(/datasource/i.test(key))) {
+                            if (_this.isVue3) {
+                                _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                            }
+                            else {
+                                _this.$emit('update:' + key, prop[key]);
+                                _this.$emit('modelchanged', prop[key]);
+                            }
+                        }
+                    });
+                });
+            }
+        },
+        custom: function () {
+            this.updated();
+        },
+        addCollection: function (groupId, collection, targetId, isAfter) {
+            return this.ej2Instances.addCollection(groupId, collection, targetId, isAfter);
+        },
+        addGroup: function (tabId, group, targetId, isAfter) {
+            return this.ej2Instances.addGroup(tabId, group, targetId, isAfter);
+        },
+        addItem: function (collectionId, item, targetId, isAfter) {
+            return this.ej2Instances.addItem(collectionId, item, targetId, isAfter);
+        },
+        addTab: function (tab, targetId, isAfter) {
+            return this.ej2Instances.addTab(tab, targetId, isAfter);
+        },
+        disableItem: function (itemId) {
+            return this.ej2Instances.disableItem(itemId);
+        },
+        enableItem: function (itemId) {
+            return this.ej2Instances.enableItem(itemId);
+        },
+        refreshLayout: function () {
+            return this.ej2Instances.refreshLayout();
+        },
+        removeCollection: function (collectionId) {
+            return this.ej2Instances.removeCollection(collectionId);
+        },
+        removeGroup: function (groupId) {
+            return this.ej2Instances.removeGroup(groupId);
+        },
+        removeItem: function (itemId) {
+            return this.ej2Instances.removeItem(itemId);
+        },
+        removeTab: function (tabId) {
+            return this.ej2Instances.removeTab(tabId);
+        },
+        selectTab: function (tabId) {
+            return this.ej2Instances.selectTab(tabId);
+        },
+    }
+});
+export var RibbonPlugin = {
+    name: 'ejs-ribbon',
+    install: function (Vue) {
+        Vue.component(RibbonPlugin.name, RibbonComponent);
+        Vue.component(RibbonTabPlugin.name, RibbonTabDirective);
+        Vue.component(RibbonTabsPlugin.name, RibbonTabsDirective);
+        Vue.component(RibbonGroupPlugin.name, RibbonGroupDirective);
+        Vue.component(RibbonGroupsPlugin.name, RibbonGroupsDirective);
+        Vue.component(RibbonCollectionPlugin.name, RibbonCollectionDirective);
+        Vue.component(RibbonCollectionsPlugin.name, RibbonCollectionsDirective);
+        Vue.component(RibbonItemPlugin.name, RibbonItemDirective);
+        Vue.component(RibbonItemsPlugin.name, RibbonItemsDirective);
+    }
+};

package/src/ribbon/tabs.directive.d.ts

@@ -0,0 +1,22 @@
+export declare let RibbonTabsDirective: any;
+export declare const RibbonTabsPlugin: {
+    name: string;
+    install(Vue: any): void;
+};
+/**
+ * `e-ribbon-tab` directive represent a column of the VueJS Ribbon.
+ * It must be contained in a Ribbon component(`ejs-ribbon`).
+ * ```vue
+ * <ejs-ribbon>
+ *   <e-ribbon-tabs>
+ *    <e-ribbon-tab></e-ribbon-tab>
+ *    <e-ribbon-tab></e-ribbon-tab>
+ *   </e-ribbon-tabs>
+ * </ejs-ribbon>
+ * ```
+ */
+export declare let RibbonTabDirective: any;
+export declare const RibbonTabPlugin: {
+    name: string;
+    install(Vue: any): void;
+};