@syncfusion/ej2-vue-navigations 23.2.7 → 24.1.46

package/dist/es6/ej2-vue-navigations.es2015.js

@@ -1,4 +1,4 @@
-import { Accordion, AppBar, Breadcrumb, Carousel, ContextMenu, Menu, Sidebar, Tab, Toolbar, TreeView } from '@syncfusion/ej2-navigations';
+import { Accordion, AppBar, Breadcrumb, Carousel, ContextMenu, Menu, Sidebar, Stepper, Tab, Toolbar, TreeView } from '@syncfusion/ej2-navigations';
 import { ComponentBase, getProps, gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
 import { getValue, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
 
@@ -1813,6 +1813,227 @@ const AppBarPlugin = {
     }
 };
 
-export { AccordionItemsDirective, AccordionItemDirective, AccordionItemsPlugin, AccordionItemPlugin, AccordionComponent, AccordionPlugin, ItemsDirective, ItemDirective, ItemsPlugin, ItemPlugin, ToolbarComponent, ToolbarPlugin, ContextMenuComponent, ContextMenuPlugin, BreadcrumbItemsDirective, BreadcrumbItemDirective, BreadcrumbItemsPlugin, BreadcrumbItemPlugin, BreadcrumbComponent, BreadcrumbPlugin, CarouselItemsDirective, CarouselItemDirective, CarouselItemsPlugin, CarouselItemPlugin, CarouselComponent, CarouselPlugin, TabItemsDirective, TabItemDirective, TabItemsPlugin, TabItemPlugin, TabComponent, TabPlugin, TreeViewComponent, TreeViewPlugin, SidebarComponent, SidebarPlugin, MenuItemsDirective, MenuItemDirective, MenuItemsPlugin, MenuItemPlugin, MenuComponent, MenuPlugin, AppBarComponent, AppBarPlugin };
+let StepsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render(createElement) {
+        if (!isExecute) {
+            let h = !isExecute ? gh : createElement;
+            let slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = !isExecute ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
+        return;
+    },
+    updated() {
+        if (!isExecute && this.custom) {
+            this.custom();
+        }
+    },
+    methods: {
+        getTag() {
+            return 'e-steps';
+        }
+    }
+});
+const StepsPlugin = {
+    name: 'e-steps',
+    install(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 :iconCss='e-icons e-folder' :text='Step 1' />
+ *   <e-step :iconCss='e-icons e-folder' :text='Step 2' />
+ *  </e-steps>
+ * </ejs-stepper>
+ * ```
+ */
+let StepDirective = vueDefineComponent({
+    render() {
+        return;
+    },
+    methods: {
+        getTag() {
+            return 'e-step';
+        }
+    }
+});
+const StepPlugin = {
+    name: 'e-step',
+    install(Vue) {
+        Vue.component(StepPlugin.name, StepDirective);
+    }
+};
+
+const properties$10 = ['isLazyUpdate', 'plugins', 'activeStep', 'animation', 'cssClass', 'enablePersistence', 'enableRtl', 'labelPosition', 'linear', 'locale', 'orientation', 'readOnly', 'showTooltip', 'stepType', 'steps', 'template', 'tooltipTemplate', 'beforeStepRender', 'created', 'stepChanged', 'stepChanging', 'stepClick'];
+const modelProps$10 = ['activeStep'];
+const testProp$10 = getProps({ props: properties$10 });
+const props$10 = testProp$10[0];
+const watch$10 = testProp$10[1];
+const emitProbs$10 = Object.keys(watch$10);
+emitProbs$10.push('modelchanged', 'update:modelValue');
+for (let props of modelProps$10) {
+    emitProbs$10.push('update:' + props);
+}
+/**
+ * Represents the Essential JS 2 VueJS Stepper Component.
+ * ```html
+ * <ejs-stepper :steps='stepItems'></ejs-stepper>
+ * ```
+ */
+let StepperComponent = vueDefineComponent({
+    name: 'StepperComponent',
+    mixins: [ComponentBase],
+    props: props$10,
+    watch: watch$10,
+    emits: emitProbs$10,
+    model: { event: 'modelchanged' },
+    provide() { return { custom: this.custom }; },
+    data() {
+        return {
+            ej2Instance: new Stepper({}),
+            propKeys: properties$10,
+            models: modelProps$10,
+            hasChildDirective: true,
+            hasInjectedModules: false,
+            tagMapper: { "e-steps": "e-step" },
+            tagNameMapper: {},
+            isVue3: !isExecute,
+            templateCollection: {},
+        };
+    },
+    created() {
+        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(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
+        }
+        return h('nav', slots);
+    },
+    methods: {
+        clearTemplate(templateNames) {
+            if (!templateNames) {
+                templateNames = Object.keys(this.templateCollection || {});
+            }
+            if (templateNames.length && this.templateCollection) {
+                for (let tempName of templateNames) {
+                    let elementCollection = this.templateCollection[tempName];
+                    if (elementCollection && elementCollection.length) {
+                        for (let ele of elementCollection) {
+                            let destroy = getValue('__vue__.$destroy', ele);
+                            if (destroy) {
+                                ele.__vue__.$destroy();
+                            }
+                            if (ele.innerHTML) {
+                                ele.innerHTML = '';
+                            }
+                        }
+                        delete this.templateCollection[tempName];
+                    }
+                }
+            }
+        },
+        setProperties(prop, muteOnChange) {
+            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((key) => {
+                    this.models.map((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(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)) {
+                let key = this.models.toString().match(/checked|value/) || [];
+                let 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)) {
+                let key = this.models.toString().match(/currentView|selectedDate/) || [];
+                let 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() {
+            this.updated();
+        },
+        nextStep() {
+            return this.ej2Instances.nextStep();
+        },
+        previousStep() {
+            return this.ej2Instances.previousStep();
+        },
+        reset() {
+            return this.ej2Instances.reset();
+        },
+    }
+});
+const StepperPlugin = {
+    name: 'ejs-stepper',
+    install(Vue) {
+        Vue.component(StepperPlugin.name, StepperComponent);
+        Vue.component(StepPlugin.name, StepDirective);
+        Vue.component(StepsPlugin.name, StepsDirective);
+    }
+};
+
+export { AccordionItemsDirective, AccordionItemDirective, AccordionItemsPlugin, AccordionItemPlugin, AccordionComponent, AccordionPlugin, ItemsDirective, ItemDirective, ItemsPlugin, ItemPlugin, ToolbarComponent, ToolbarPlugin, ContextMenuComponent, ContextMenuPlugin, BreadcrumbItemsDirective, BreadcrumbItemDirective, BreadcrumbItemsPlugin, BreadcrumbItemPlugin, BreadcrumbComponent, BreadcrumbPlugin, CarouselItemsDirective, CarouselItemDirective, CarouselItemsPlugin, CarouselItemPlugin, CarouselComponent, CarouselPlugin, TabItemsDirective, TabItemDirective, TabItemsPlugin, TabItemPlugin, TabComponent, TabPlugin, TreeViewComponent, TreeViewPlugin, SidebarComponent, SidebarPlugin, MenuItemsDirective, MenuItemDirective, MenuItemsPlugin, MenuItemPlugin, MenuComponent, MenuPlugin, AppBarComponent, AppBarPlugin, StepsDirective, StepDirective, StepsPlugin, StepPlugin, StepperComponent, StepperPlugin };
 export * from '@syncfusion/ej2-navigations';
 //# sourceMappingURL=ej2-vue-navigations.es2015.js.map