@syncfusion/ej2-vue-navigations 23.2.7 → 24.1.41

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-vue-navigations@*",
-  "_id": "@syncfusion/ej2-vue-navigations@23.2.5",
+  "_id": "@syncfusion/ej2-vue-navigations@22.41.2",
   "_inBundle": false,
-  "_integrity": "sha512-HBJ+lb9B6tYbPsNa5Zw3wjZP6r6J3vHnB1H2dxa5v1C8Qp1oDEcZX3lepJVNUDJFEso6tfxNILLgybqVxlwdMQ==",
+  "_integrity": "sha512-rhRthb1suS66caaSimBR1+1PoTJFizzbmowfL7knfWCn3RuaBcRlMFgzo4mo27P3wffAtFGuhx+CTe8omYtsvQ==",
   "_location": "/@syncfusion/ej2-vue-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -19,10 +19,10 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-vue-navigations/-/ej2-vue-navigations-23.2.5.tgz",
-  "_shasum": "65f1259916df2c58b494ef2651155b593b46d7ed",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-vue-navigations/-/ej2-vue-navigations-22.41.2.tgz",
+  "_shasum": "45571d978c1c0aa89a234406aaca3bf20d654864",
   "_spec": "@syncfusion/ej2-vue-navigations@*",
-  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.6",
-    "@syncfusion/ej2-navigations": "23.2.7",
-    "@syncfusion/ej2-vue-base": "~23.2.7"
+    "@syncfusion/ej2-base": "~24.1.41",
+    "@syncfusion/ej2-navigations": "24.1.41",
+    "@syncfusion/ej2-vue-base": "~24.1.41"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another for Vue",
@@ -55,7 +55,8 @@
     "vue menu component",
     "vue breadcrumb",
     "vue carousel",
-    "vue appbar"
+    "vue appbar",
+    "vue stepper"
   ],
   "license": "SEE LICENSE IN license",
   "main": "./dist/ej2-vue-navigations.umd.min.js",
@@ -69,6 +70,6 @@
     "ci-publish": "gulp ci-publish",
     "compile": "gulp ci-compile && gulp vue-global-script"
   },
-  "version": "23.2.7",
+  "version": "24.1.41",
   "sideEffects": false
 }

package/src/index.d.ts

@@ -15,3 +15,5 @@ export { SidebarComponent, SidebarPlugin } from './sidebar/sidebar.component';
 export { MenuItemsDirective, MenuItemDirective, MenuItemsPlugin, MenuItemPlugin } from './menu/items.directive';
 export { MenuComponent, MenuPlugin } from './menu/menu.component';
 export { AppBarComponent, AppBarPlugin } from './appbar/appbar.component';
+export { StepsDirective, StepDirective, StepsPlugin, StepPlugin } from './stepper/steps.directive';
+export { StepperComponent, StepperPlugin } from './stepper/stepper.component';

package/src/index.js

@@ -15,3 +15,5 @@ export { SidebarComponent, SidebarPlugin } from './sidebar/sidebar.component';
 export { MenuItemsDirective, MenuItemDirective, MenuItemsPlugin, MenuItemPlugin } from './menu/items.directive';
 export { MenuComponent, MenuPlugin } from './menu/menu.component';
 export { AppBarComponent, AppBarPlugin } from './appbar/appbar.component';
+export { StepsDirective, StepDirective, StepsPlugin, StepPlugin } from './stepper/steps.directive';
+export { StepperComponent, StepperPlugin } from './stepper/stepper.component';

package/src/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { StepsDirective, StepDirective, StepsPlugin, StepPlugin } from './steps.directive';
+export { StepperComponent, StepperPlugin } from './stepper.component';

package/src/stepper/index.js

@@ -0,0 +1,2 @@
+export { StepsDirective, StepDirective, StepsPlugin, StepPlugin } from './steps.directive';
+export { StepperComponent, StepperPlugin } from './stepper.component';

package/src/stepper/stepper.component.d.ts

@@ -0,0 +1,18 @@
+import { DefineVueComponent } from '@syncfusion/ej2-vue-base';
+import { StepperModel } from '@syncfusion/ej2-navigations';
+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 Stepper Component.
+ * ```html
+ * <ejs-stepper :steps='stepItems'></ejs-stepper>
+ * ```
+ */
+export declare let StepperComponent: DefineVueComponent<StepperModel>;
+export declare type StepperComponent = InstanceType<typeof StepperComponent>;
+export declare const StepperPlugin: {
+    name: string;
+    install(Vue: any): void;
+};

package/src/stepper/stepper.component.js

@@ -0,0 +1,168 @@
+import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
+import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
+import { isUndefined } from '@syncfusion/ej2-base';
+import { Stepper } from '@syncfusion/ej2-navigations';
+import { StepsDirective, StepDirective, StepsPlugin, StepPlugin } from './steps.directive';
+export var properties = ['isLazyUpdate', 'plugins', 'activeStep', 'animation', 'cssClass', 'enablePersistence', 'enableRtl', 'labelPosition', 'linear', 'locale', 'orientation', 'readOnly', 'showTooltip', 'stepType', 'steps', 'template', 'tooltipTemplate', 'beforeStepRender', 'created', 'stepChanged', 'stepChanging', 'stepClick'];
+export var modelProps = ['activeStep'];
+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 Stepper Component.
+ * ```html
+ * <ejs-stepper :steps='stepItems'></ejs-stepper>
+ * ```
+ */
+export var StepperComponent = vueDefineComponent({
+    name: 'StepperComponent',
+    mixins: [ComponentBase],
+    props: props,
+    watch: watch,
+    emits: emitProbs,
+    model: { event: 'modelchanged' },
+    provide: function () { return { custom: this.custom }; },
+    data: function () {
+        return {
+            ej2Instance: new Stepper({}),
+            propKeys: properties,
+            models: modelProps,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-steps": "e-step" },
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
+        };
+    },
+    created: function () {
+        this.ej2Instances._trigger = this.ej2Instances.trigger;
+        this.ej2Instances.trigger = this.trigger;
+        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('nav', 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]);
+                            }
+                        }
+                    });
+                });
+            }
+        },
+        trigger: function (eventName, eventProp, successHandler) {
+            if (!isExecute) {
+                this.models = !this.models ? this.ej2Instances.referModels : this.models;
+            }
+            if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
+                var key = this.models.toString().match(/checked|value/) || [];
+                var propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
+                    }
+                    else {
+                        if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
+                            this.$emit('update:' + propKey, eventProp[propKey]);
+                            this.$emit('modelchanged', eventProp[propKey]);
+                        }
+                    }
+                }
+            }
+            else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
+                var key = this.models.toString().match(/currentView|selectedDate/) || [];
+                var propKey = key[0];
+                if (eventProp && key && !isUndefined(eventProp[propKey])) {
+                    if (!isExecute) {
+                        this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
+                        this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    }
+                    else {
+                        this.$emit('update:' + propKey, eventProp[propKey]);
+                        this.$emit('modelchanged', eventProp[propKey]);
+                    }
+                }
+            }
+            if ((this.ej2Instances && this.ej2Instances._trigger)) {
+                this.ej2Instances._trigger(eventName, eventProp, successHandler);
+            }
+        },
+        custom: function () {
+            this.updated();
+        },
+        nextStep: function () {
+            return this.ej2Instances.nextStep();
+        },
+        previousStep: function () {
+            return this.ej2Instances.previousStep();
+        },
+        reset: function () {
+            return this.ej2Instances.reset();
+        },
+    }
+});
+export var StepperPlugin = {
+    name: 'ejs-stepper',
+    install: function (Vue) {
+        Vue.component(StepperPlugin.name, StepperComponent);
+        Vue.component(StepPlugin.name, StepDirective);
+        Vue.component(StepsPlugin.name, StepsDirective);
+    }
+};

package/src/stepper/steps.directive.d.ts

@@ -0,0 +1,24 @@
+import { DefineVueDirective } from '@syncfusion/ej2-vue-base';
+import { StepModel } from '@syncfusion/ej2-navigations';
+export declare let StepsDirective: any;
+export declare const StepsPlugin: {
+    name: string;
+    install(Vue: any): void;
+};
+/**
+ * 'e-step' directive represents a step of the Vue Stepper
+ * It must be contained in a Stepper component(`ejs-stepper`).
+ * ```html
+ * <ejs-stepper>
+ *  <e-steps>
+ *   <e-step :icon='e-icons e-folder' :text='Step 1' />
+ *   <e-step :icon='e-icons e-folder' :text='Step 2' />
+ *  </e-steps>
+ * </ejs-stepper>
+ * ```
+ */
+export declare let StepDirective: DefineVueDirective<StepModel>;
+export declare const StepPlugin: {
+    name: string;
+    install(Vue: any): void;
+};

package/src/stepper/steps.directive.js

@@ -0,0 +1,60 @@
+import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+export var StepsDirective = 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-steps';
+        }
+    }
+});
+export var StepsPlugin = {
+    name: 'e-steps',
+    install: function (Vue) {
+        Vue.component(StepsPlugin.name, StepsDirective);
+    }
+};
+/**
+ * 'e-step' directive represents a step of the Vue Stepper
+ * It must be contained in a Stepper component(`ejs-stepper`).
+ * ```html
+ * <ejs-stepper>
+ *  <e-steps>
+ *   <e-step :icon='e-icons e-folder' :text='Step 1' />
+ *   <e-step :icon='e-icons e-folder' :text='Step 2' />
+ *  </e-steps>
+ * </ejs-stepper>
+ * ```
+ */
+export var StepDirective = vueDefineComponent({
+    render: function () {
+        return;
+    },
+    methods: {
+        getTag: function () {
+            return 'e-step';
+        }
+    }
+});
+export var StepPlugin = {
+    name: 'e-step',
+    install: function (Vue) {
+        Vue.component(StepPlugin.name, StepDirective);
+    }
+};

package/stepper.d.ts

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

package/stepper.js

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