@syncfusion/ej2-vue-navigations 20.4.53 → 21.1.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +211 -142
  3. package/dist/ej2-vue-navigations.umd.min.js +2 -2
  4. package/dist/ej2-vue-navigations.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-vue-navigations.es2015.js +1195 -1613
  6. package/dist/es6/ej2-vue-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-vue-navigations.es5.js +1337 -1877
  8. package/dist/es6/ej2-vue-navigations.es5.js.map +1 -1
  9. package/dist/global/ej2-vue-navigations.min.js +2 -2
  10. package/package.json +11 -10
  11. package/src/accordion/accordion.component.d.ts +3 -31
  12. package/src/accordion/accordion.component.js +137 -168
  13. package/src/accordion/items.directive.d.ts +2 -12
  14. package/src/accordion/items.directive.js +22 -71
  15. package/src/appbar/appbar.component.d.ts +3 -22
  16. package/src/appbar/appbar.component.js +83 -112
  17. package/src/breadcrumb/breadcrumb.component.d.ts +3 -25
  18. package/src/breadcrumb/breadcrumb.component.js +119 -150
  19. package/src/breadcrumb/items.directive.d.ts +2 -12
  20. package/src/breadcrumb/items.directive.js +22 -71
  21. package/src/carousel/carousel.component.d.ts +3 -29
  22. package/src/carousel/carousel.component.js +131 -162
  23. package/src/carousel/items.directive.d.ts +2 -12
  24. package/src/carousel/items.directive.js +22 -71
  25. package/src/context-menu/contextmenu.component.d.ts +3 -32
  26. package/src/context-menu/contextmenu.component.js +113 -142
  27. package/src/menu/items.directive.d.ts +2 -12
  28. package/src/menu/items.directive.js +22 -71
  29. package/src/menu/menu.component.d.ts +3 -32
  30. package/src/menu/menu.component.js +113 -142
  31. package/src/sidebar/sidebar.component.d.ts +3 -28
  32. package/src/sidebar/sidebar.component.js +128 -159
  33. package/src/tab/items.directive.d.ts +2 -12
  34. package/src/tab/items.directive.js +22 -71
  35. package/src/tab/tab.component.d.ts +3 -32
  36. package/src/tab/tab.component.js +113 -142
  37. package/src/toolbar/items.directive.d.ts +2 -12
  38. package/src/toolbar/items.directive.js +22 -71
  39. package/src/toolbar/toolbar.component.d.ts +3 -28
  40. package/src/toolbar/toolbar.component.js +101 -130
  41. package/src/treeview/treeview.component.d.ts +3 -39
  42. package/src/treeview/treeview.component.js +134 -163
  43. package/styles/accordion/bootstrap-dark.css +0 -1
  44. package/styles/accordion/bootstrap.css +0 -1
  45. package/styles/accordion/bootstrap4.css +0 -1
  46. package/styles/accordion/bootstrap5-dark.css +3 -4
  47. package/styles/accordion/bootstrap5.css +3 -4
  48. package/styles/accordion/fabric-dark.css +0 -1
  49. package/styles/accordion/fabric.css +0 -1
  50. package/styles/accordion/fluent-dark.css +3 -4
  51. package/styles/accordion/fluent.css +3 -4
  52. package/styles/accordion/highcontrast-light.css +0 -1
  53. package/styles/accordion/highcontrast.css +0 -1
  54. package/styles/accordion/material-dark.css +0 -1
  55. package/styles/accordion/material.css +0 -1
  56. package/styles/accordion/tailwind-dark.css +3 -4
  57. package/styles/accordion/tailwind.css +3 -4
  58. package/styles/appbar/bootstrap-dark.css +3 -0
  59. package/styles/appbar/bootstrap.css +3 -0
  60. package/styles/appbar/bootstrap4.css +3 -0
  61. package/styles/appbar/bootstrap5-dark.css +3 -0
  62. package/styles/appbar/bootstrap5.css +3 -0
  63. package/styles/appbar/fabric-dark.css +3 -0
  64. package/styles/appbar/fabric.css +3 -0
  65. package/styles/appbar/fluent-dark.css +3 -0
  66. package/styles/appbar/fluent.css +3 -0
  67. package/styles/appbar/highcontrast-light.css +3 -0
  68. package/styles/appbar/highcontrast.css +3 -0
  69. package/styles/appbar/material-dark.css +3 -0
  70. package/styles/appbar/material.css +3 -0
  71. package/styles/appbar/tailwind-dark.css +3 -0
  72. package/styles/appbar/tailwind.css +3 -0
  73. package/styles/bootstrap-dark.css +669 -938
  74. package/styles/bootstrap.css +658 -927
  75. package/styles/bootstrap4.css +724 -993
  76. package/styles/bootstrap5-dark.css +685 -954
  77. package/styles/bootstrap5.css +686 -955
  78. package/styles/carousel/bootstrap-dark.css +4 -0
  79. package/styles/carousel/bootstrap.css +4 -0
  80. package/styles/carousel/bootstrap4.css +4 -0
  81. package/styles/carousel/bootstrap5-dark.css +4 -0
  82. package/styles/carousel/bootstrap5.css +4 -0
  83. package/styles/carousel/fabric-dark.css +4 -0
  84. package/styles/carousel/fabric.css +4 -0
  85. package/styles/carousel/fluent-dark.css +4 -0
  86. package/styles/carousel/fluent.css +4 -0
  87. package/styles/carousel/highcontrast-light.css +4 -0
  88. package/styles/carousel/highcontrast.css +4 -0
  89. package/styles/carousel/material-dark.css +4 -0
  90. package/styles/carousel/material.css +4 -0
  91. package/styles/carousel/tailwind-dark.css +4 -0
  92. package/styles/carousel/tailwind.css +4 -0
  93. package/styles/fabric-dark.css +669 -938
  94. package/styles/fabric.css +669 -938
  95. package/styles/fluent-dark.css +677 -946
  96. package/styles/fluent.css +677 -946
  97. package/styles/h-scroll/bootstrap-dark.css +1 -1
  98. package/styles/h-scroll/bootstrap.css +1 -1
  99. package/styles/h-scroll/bootstrap4.css +1 -1
  100. package/styles/h-scroll/bootstrap5-dark.css +1 -1
  101. package/styles/h-scroll/bootstrap5.css +1 -1
  102. package/styles/h-scroll/fabric-dark.css +1 -1
  103. package/styles/h-scroll/fabric.css +1 -1
  104. package/styles/h-scroll/fluent-dark.css +1 -1
  105. package/styles/h-scroll/fluent.css +1 -1
  106. package/styles/h-scroll/highcontrast-light.css +1 -1
  107. package/styles/h-scroll/highcontrast.css +1 -1
  108. package/styles/h-scroll/material-dark.css +1 -1
  109. package/styles/h-scroll/material.css +1 -1
  110. package/styles/h-scroll/tailwind-dark.css +1 -1
  111. package/styles/h-scroll/tailwind.css +1 -1
  112. package/styles/highcontrast-light.css +668 -937
  113. package/styles/highcontrast.css +675 -944
  114. package/styles/material-dark.css +669 -938
  115. package/styles/material.css +661 -930
  116. package/styles/menu/bootstrap-dark.css +7 -7
  117. package/styles/menu/bootstrap.css +7 -7
  118. package/styles/menu/bootstrap4.css +10 -10
  119. package/styles/menu/bootstrap5-dark.css +7 -7
  120. package/styles/menu/bootstrap5.css +7 -7
  121. package/styles/menu/fabric-dark.css +7 -7
  122. package/styles/menu/fabric.css +7 -7
  123. package/styles/menu/fluent-dark.css +7 -7
  124. package/styles/menu/fluent.css +7 -7
  125. package/styles/menu/highcontrast-light.css +7 -7
  126. package/styles/menu/highcontrast.css +7 -7
  127. package/styles/menu/material-dark.css +7 -7
  128. package/styles/menu/material.css +7 -7
  129. package/styles/menu/tailwind-dark.css +7 -7
  130. package/styles/menu/tailwind.css +7 -7
  131. package/styles/tab/bootstrap-dark.css +5 -2
  132. package/styles/tab/bootstrap.css +5 -2
  133. package/styles/tab/bootstrap4.css +12 -9
  134. package/styles/tab/bootstrap5-dark.css +11 -8
  135. package/styles/tab/bootstrap5.css +11 -8
  136. package/styles/tab/fabric-dark.css +7 -4
  137. package/styles/tab/fabric.css +7 -4
  138. package/styles/tab/fluent-dark.css +8 -5
  139. package/styles/tab/fluent.css +8 -5
  140. package/styles/tab/highcontrast-light.css +10 -7
  141. package/styles/tab/highcontrast.css +10 -7
  142. package/styles/tab/material-dark.css +4 -1
  143. package/styles/tab/material.css +4 -1
  144. package/styles/tab/tailwind-dark.css +8 -5
  145. package/styles/tab/tailwind.css +8 -5
  146. package/styles/tailwind-dark.css +668 -937
  147. package/styles/tailwind.css +668 -937
  148. package/styles/toolbar/bootstrap-dark.css +647 -925
  149. package/styles/toolbar/bootstrap.css +638 -916
  150. package/styles/toolbar/bootstrap4.css +657 -935
  151. package/styles/toolbar/bootstrap5-dark.css +658 -936
  152. package/styles/toolbar/bootstrap5.css +658 -936
  153. package/styles/toolbar/fabric-dark.css +645 -923
  154. package/styles/toolbar/fabric.css +651 -929
  155. package/styles/toolbar/fluent-dark.css +650 -928
  156. package/styles/toolbar/fluent.css +650 -928
  157. package/styles/toolbar/highcontrast-light.css +642 -920
  158. package/styles/toolbar/highcontrast.css +647 -925
  159. package/styles/toolbar/material-dark.css +649 -927
  160. package/styles/toolbar/material.css +646 -924
  161. package/styles/toolbar/tailwind-dark.css +647 -925
  162. package/styles/toolbar/tailwind.css +645 -923
@@ -1,32 +1,10 @@
1
- var __extends = (this && this.__extends) || (function () {
2
- var extendStatics = function (d, b) {
3
- extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
7
- };
8
- return function (d, b) {
9
- extendStatics(d, b);
10
- function __() { this.constructor = d; }
11
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12
- };
13
- })();
14
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
15
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
16
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
17
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
18
- return c > 3 && r && Object.defineProperty(target, key, r), r;
19
- };
20
- import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
1
+ import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
21
2
  import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
22
3
  import { AppBar } from '@syncfusion/ej2-navigations';
23
- import { Options } from 'vue-class-component';
24
4
  export var properties = ['isLazyUpdate', 'plugins', 'colorMode', 'cssClass', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'isSticky', 'locale', 'mode', 'position', 'created', 'destroyed'];
25
5
  export var modelProps = [];
26
6
  export var testProp = getProps({ props: properties });
27
- export var props = testProp[0];
28
- export var watch = testProp[1];
29
- export var emitProbs = Object.keys(watch);
7
+ export var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
30
8
  emitProbs.push('modelchanged', 'update:modelValue');
31
9
  for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
32
10
  var props_1 = modelProps_1[_i];
@@ -38,102 +16,95 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
38
16
  * <ejs-appbar></ejs-appbar>
39
17
  * ```
40
18
  */
41
- var AppBarComponent = /** @class */ (function (_super) {
42
- __extends(AppBarComponent, _super);
43
- function AppBarComponent() {
44
- var _this = _super.call(this, arguments) || this;
45
- _this.propKeys = properties;
46
- _this.models = modelProps;
47
- _this.hasChildDirective = false;
48
- _this.hasInjectedModules = false;
49
- _this.tagMapper = {};
50
- _this.tagNameMapper = {};
51
- _this.isVue3 = !isExecute;
52
- _this.ej2Instances = new AppBar({});
53
- _this.bindProperties();
54
- _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
55
- _this.ej2Instances.setProperties = _this.setProperties;
56
- _this.ej2Instances.clearTemplate = _this.clearTemplate;
57
- _this.updated = _this.updated;
58
- return _this;
59
- }
60
- AppBarComponent.prototype.clearTemplate = function (templateNames) {
61
- if (!templateNames) {
62
- templateNames = Object.keys(this.templateCollection || {});
19
+ export var AppBarComponent = vueDefineComponent({
20
+ name: 'AppBarComponent',
21
+ mixins: [ComponentBase],
22
+ props: props,
23
+ watch: watch,
24
+ emits: emitProbs,
25
+ provide: function () { return { custom: this.custom }; },
26
+ data: function () {
27
+ return {
28
+ ej2Instances: new AppBar({}),
29
+ propKeys: properties,
30
+ models: modelProps,
31
+ hasChildDirective: false,
32
+ hasInjectedModules: false,
33
+ tagMapper: {},
34
+ tagNameMapper: {},
35
+ isVue3: !isExecute,
36
+ templateCollection: {},
37
+ };
38
+ },
39
+ created: function () {
40
+ this.bindProperties();
41
+ this.ej2Instances._setProperties = this.ej2Instances.setProperties;
42
+ this.ej2Instances.setProperties = this.setProperties;
43
+ this.ej2Instances.clearTemplate = this.clearTemplate;
44
+ this.updated = this.updated;
45
+ },
46
+ render: function (createElement) {
47
+ var h = !isExecute ? gh : createElement;
48
+ var slots = null;
49
+ if (!isNullOrUndefined(this.$slots.default)) {
50
+ slots = !isExecute ? this.$slots.default() : this.$slots.default;
63
51
  }
64
- if (templateNames.length && this.templateCollection) {
65
- for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
66
- var tempName = templateNames_1[_i];
67
- var elementCollection = this.templateCollection[tempName];
68
- if (elementCollection && elementCollection.length) {
69
- for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
70
- var ele = elementCollection_1[_a];
71
- var destroy = getValue('__vue__.$destroy', ele);
72
- if (destroy) {
73
- ele.__vue__.$destroy();
74
- }
75
- if (ele.innerHTML) {
76
- ele.innerHTML = '';
52
+ return h('header', slots);
53
+ },
54
+ methods: {
55
+ clearTemplate: function (templateNames) {
56
+ if (!templateNames) {
57
+ templateNames = Object.keys(this.templateCollection || {});
58
+ }
59
+ if (templateNames.length && this.templateCollection) {
60
+ for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
61
+ var tempName = templateNames_1[_i];
62
+ var elementCollection = this.templateCollection[tempName];
63
+ if (elementCollection && elementCollection.length) {
64
+ for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
65
+ var ele = elementCollection_1[_a];
66
+ var destroy = getValue('__vue__.$destroy', ele);
67
+ if (destroy) {
68
+ ele.__vue__.$destroy();
69
+ }
70
+ if (ele.innerHTML) {
71
+ ele.innerHTML = '';
72
+ }
77
73
  }
74
+ delete this.templateCollection[tempName];
78
75
  }
79
- delete this.templateCollection[tempName];
80
76
  }
81
77
  }
82
- }
83
- };
84
- AppBarComponent.prototype.setProperties = function (prop, muteOnChange) {
85
- var _this = this;
86
- if (this.isVue3) {
87
- this.models = !this.models ? this.ej2Instances.referModels : this.models;
88
- }
89
- if (this.ej2Instances && this.ej2Instances._setProperties) {
90
- this.ej2Instances._setProperties(prop, muteOnChange);
91
- }
92
- if (prop && this.models && this.models.length) {
93
- Object.keys(prop).map(function (key) {
94
- _this.models.map(function (model) {
95
- if ((key === model) && !(/datasource/i.test(key))) {
96
- if (_this.isVue3) {
97
- _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
98
- }
99
- else {
100
- _this.$emit('update:' + key, prop[key]);
101
- _this.$emit('modelchanged', prop[key]);
78
+ },
79
+ setProperties: function (prop, muteOnChange) {
80
+ var _this = this;
81
+ if (this.isVue3) {
82
+ this.models = !this.models ? this.ej2Instances.referModels : this.models;
83
+ }
84
+ if (this.ej2Instances && this.ej2Instances._setProperties) {
85
+ this.ej2Instances._setProperties(prop, muteOnChange);
86
+ }
87
+ if (prop && this.models && this.models.length) {
88
+ Object.keys(prop).map(function (key) {
89
+ _this.models.map(function (model) {
90
+ if ((key === model) && !(/datasource/i.test(key))) {
91
+ if (_this.isVue3) {
92
+ _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
93
+ }
94
+ else {
95
+ _this.$emit('update:' + key, prop[key]);
96
+ _this.$emit('modelchanged', prop[key]);
97
+ }
102
98
  }
103
- }
99
+ });
104
100
  });
105
- });
106
- }
107
- };
108
- AppBarComponent.prototype.render = function (createElement) {
109
- var h = !isExecute ? gh : createElement;
110
- var slots = null;
111
- if (!isNullOrUndefined(this.$slots.default)) {
112
- slots = !isExecute ? this.$slots.default() : this.$slots.default;
113
- }
114
- return h('header', slots);
115
- };
116
- AppBarComponent.prototype.custom = function () {
117
- this.updated();
118
- };
119
- AppBarComponent = __decorate([
120
- EJComponentDecorator({
121
- props: properties
122
- }, isExecute)
123
- ,Options({
124
- props: props,
125
- watch: watch,
126
- emits: emitProbs,
127
- provide: function provide() {
128
- return {
129
- custom: this.custom
130
- };
131
101
  }
132
- })
133
- ], AppBarComponent);
134
- return AppBarComponent;
135
- }(ComponentBase));
136
- export { AppBarComponent };
102
+ },
103
+ custom: function () {
104
+ this.updated();
105
+ },
106
+ }
107
+ });
137
108
  export var AppBarPlugin = {
138
109
  name: 'ejs-appbar',
139
110
  install: function (Vue) {
@@ -1,37 +1,15 @@
1
- import { ComponentBase } from '@syncfusion/ej2-vue-base';
2
1
  export declare const properties: string[];
3
2
  export declare const modelProps: string[];
4
3
  export declare const testProp: any;
5
- export declare const props: any;
6
- export declare const watch: any;
7
- export declare const emitProbs: any;
4
+ export declare const props: any, watch: any, emitProbs: any;
8
5
  /**
9
6
  * Represents the VueJS Breadcrumb Component.
10
7
  * ```html
11
8
  * <ejs-breadcrumb :items='breadcrumbItems'></ejs-breadcrumb>
12
9
  * ```
13
10
  */
14
- export declare class BreadcrumbComponent extends ComponentBase {
15
- ej2Instances: any;
16
- propKeys: string[];
17
- models: string[];
18
- hasChildDirective: boolean;
19
- protected hasInjectedModules: boolean;
20
- tagMapper: {
21
- [key: string]: Object;
22
- };
23
- tagNameMapper: Object;
24
- isVue3: boolean;
25
- templateCollection: any;
26
- constructor();
27
- clearTemplate(templateNames?: string[]): any;
28
- setProperties(prop: any, muteOnChange: boolean): void;
29
- trigger(eventName: string, eventProp: {
30
- [key: string]: Object;
31
- }, successHandler?: Function): void;
32
- render(createElement: any): any;
33
- custom(): void;
34
- }
11
+ export declare let BreadcrumbComponent: any;
12
+ export declare type BreadcrumbComponent = InstanceType<typeof BreadcrumbComponent>;
35
13
  export declare const BreadcrumbPlugin: {
36
14
  name: string;
37
15
  install(Vue: any): void;
@@ -1,34 +1,12 @@
1
- var __extends = (this && this.__extends) || (function () {
2
- var extendStatics = function (d, b) {
3
- extendStatics = Object.setPrototypeOf ||
4
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
5
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
7
- };
8
- return function (d, b) {
9
- extendStatics(d, b);
10
- function __() { this.constructor = d; }
11
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
12
- };
13
- })();
14
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
15
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
16
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
17
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
18
- return c > 3 && r && Object.defineProperty(target, key, r), r;
19
- };
20
- import { isUndefined } from '@syncfusion/ej2-base';
21
- import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
1
+ import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
22
2
  import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
3
+ import { isUndefined } from '@syncfusion/ej2-base';
23
4
  import { Breadcrumb } from '@syncfusion/ej2-navigations';
24
5
  import { BreadcrumbItemsDirective, BreadcrumbItemDirective, BreadcrumbItemsPlugin, BreadcrumbItemPlugin } from './items.directive';
25
- import { Options } from 'vue-class-component';
26
6
  export var properties = ['isLazyUpdate', 'plugins', 'activeItem', 'cssClass', 'disabled', 'enableActiveItemNavigation', 'enableNavigation', 'enablePersistence', 'enableRtl', 'itemTemplate', 'items', 'locale', 'maxItems', 'overflowMode', 'separatorTemplate', 'url', 'beforeItemRender', 'created', 'itemClick'];
27
7
  export var modelProps = ['activeItem'];
28
8
  export var testProp = getProps({ props: properties });
29
- export var props = testProp[0];
30
- export var watch = testProp[1];
31
- export var emitProbs = Object.keys(watch);
9
+ export var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
32
10
  emitProbs.push('modelchanged', 'update:modelValue');
33
11
  for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
34
12
  var props_1 = modelProps_1[_i];
@@ -40,146 +18,137 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
40
18
  * <ejs-breadcrumb :items='breadcrumbItems'></ejs-breadcrumb>
41
19
  * ```
42
20
  */
43
- var BreadcrumbComponent = /** @class */ (function (_super) {
44
- __extends(BreadcrumbComponent, _super);
45
- function BreadcrumbComponent() {
46
- var _this = _super.call(this, arguments) || this;
47
- _this.propKeys = properties;
48
- _this.models = modelProps;
49
- _this.hasChildDirective = true;
50
- _this.hasInjectedModules = false;
51
- _this.tagMapper = { "e-breadcrumb-items": "e-breadcrumb-item" };
52
- _this.tagNameMapper = { "e-breadcrumb-items": "e-items" };
53
- _this.isVue3 = !isExecute;
54
- _this.ej2Instances = new Breadcrumb({});
55
- _this.ej2Instances._trigger = _this.ej2Instances.trigger;
56
- _this.ej2Instances.trigger = _this.trigger;
57
- _this.bindProperties();
58
- _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
59
- _this.ej2Instances.setProperties = _this.setProperties;
60
- _this.ej2Instances.clearTemplate = _this.clearTemplate;
61
- _this.updated = _this.updated;
62
- return _this;
63
- }
64
- BreadcrumbComponent.prototype.clearTemplate = function (templateNames) {
65
- if (!templateNames) {
66
- templateNames = Object.keys(this.templateCollection || {});
21
+ export var BreadcrumbComponent = vueDefineComponent({
22
+ name: 'BreadcrumbComponent',
23
+ mixins: [ComponentBase],
24
+ props: props,
25
+ watch: watch,
26
+ emits: emitProbs,
27
+ model: { event: 'modelchanged' },
28
+ provide: function () { return { custom: this.custom }; },
29
+ data: function () {
30
+ return {
31
+ ej2Instances: new Breadcrumb({}),
32
+ propKeys: properties,
33
+ models: modelProps,
34
+ hasChildDirective: true,
35
+ hasInjectedModules: false,
36
+ tagMapper: { "e-breadcrumb-items": "e-breadcrumb-item" },
37
+ tagNameMapper: { "e-breadcrumb-items": "e-items" },
38
+ isVue3: !isExecute,
39
+ templateCollection: {},
40
+ };
41
+ },
42
+ created: function () {
43
+ this.ej2Instances._trigger = this.ej2Instances.trigger;
44
+ this.ej2Instances.trigger = this.trigger;
45
+ this.bindProperties();
46
+ this.ej2Instances._setProperties = this.ej2Instances.setProperties;
47
+ this.ej2Instances.setProperties = this.setProperties;
48
+ this.ej2Instances.clearTemplate = this.clearTemplate;
49
+ this.updated = this.updated;
50
+ },
51
+ render: function (createElement) {
52
+ var h = !isExecute ? gh : createElement;
53
+ var slots = null;
54
+ if (!isNullOrUndefined(this.$slots.default)) {
55
+ slots = !isExecute ? this.$slots.default() : this.$slots.default;
67
56
  }
68
- if (templateNames.length && this.templateCollection) {
69
- for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
70
- var tempName = templateNames_1[_i];
71
- var elementCollection = this.templateCollection[tempName];
72
- if (elementCollection && elementCollection.length) {
73
- for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
74
- var ele = elementCollection_1[_a];
75
- var destroy = getValue('__vue__.$destroy', ele);
76
- if (destroy) {
77
- ele.__vue__.$destroy();
78
- }
79
- if (ele.innerHTML) {
80
- ele.innerHTML = '';
57
+ return h('nav', slots);
58
+ },
59
+ methods: {
60
+ clearTemplate: function (templateNames) {
61
+ if (!templateNames) {
62
+ templateNames = Object.keys(this.templateCollection || {});
63
+ }
64
+ if (templateNames.length && this.templateCollection) {
65
+ for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
66
+ var tempName = templateNames_1[_i];
67
+ var elementCollection = this.templateCollection[tempName];
68
+ if (elementCollection && elementCollection.length) {
69
+ for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
70
+ var ele = elementCollection_1[_a];
71
+ var destroy = getValue('__vue__.$destroy', ele);
72
+ if (destroy) {
73
+ ele.__vue__.$destroy();
74
+ }
75
+ if (ele.innerHTML) {
76
+ ele.innerHTML = '';
77
+ }
81
78
  }
79
+ delete this.templateCollection[tempName];
82
80
  }
83
- delete this.templateCollection[tempName];
84
81
  }
85
82
  }
86
- }
87
- };
88
- BreadcrumbComponent.prototype.setProperties = function (prop, muteOnChange) {
89
- var _this = this;
90
- if (this.isVue3) {
91
- this.models = !this.models ? this.ej2Instances.referModels : this.models;
92
- }
93
- if (this.ej2Instances && this.ej2Instances._setProperties) {
94
- this.ej2Instances._setProperties(prop, muteOnChange);
95
- }
96
- if (prop && this.models && this.models.length) {
97
- Object.keys(prop).map(function (key) {
98
- _this.models.map(function (model) {
99
- if ((key === model) && !(/datasource/i.test(key))) {
100
- if (_this.isVue3) {
101
- _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
83
+ },
84
+ setProperties: function (prop, muteOnChange) {
85
+ var _this = this;
86
+ if (this.isVue3) {
87
+ this.models = !this.models ? this.ej2Instances.referModels : this.models;
88
+ }
89
+ if (this.ej2Instances && this.ej2Instances._setProperties) {
90
+ this.ej2Instances._setProperties(prop, muteOnChange);
91
+ }
92
+ if (prop && this.models && this.models.length) {
93
+ Object.keys(prop).map(function (key) {
94
+ _this.models.map(function (model) {
95
+ if ((key === model) && !(/datasource/i.test(key))) {
96
+ if (_this.isVue3) {
97
+ _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
98
+ }
99
+ else {
100
+ _this.$emit('update:' + key, prop[key]);
101
+ _this.$emit('modelchanged', prop[key]);
102
+ }
102
103
  }
103
- else {
104
- _this.$emit('update:' + key, prop[key]);
105
- _this.$emit('modelchanged', prop[key]);
104
+ });
105
+ });
106
+ }
107
+ },
108
+ trigger: function (eventName, eventProp, successHandler) {
109
+ if (!isExecute) {
110
+ this.models = !this.models ? this.ej2Instances.referModels : this.models;
111
+ }
112
+ if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
113
+ var key = this.models.toString().match(/checked|value/) || [];
114
+ var propKey = key[0];
115
+ if (eventProp && key && !isUndefined(eventProp[propKey])) {
116
+ if (!isExecute) {
117
+ this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
118
+ this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
119
+ this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
120
+ }
121
+ else {
122
+ if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
123
+ this.$emit('update:' + propKey, eventProp[propKey]);
124
+ this.$emit('modelchanged', eventProp[propKey]);
106
125
  }
107
126
  }
108
- });
109
- });
110
- }
111
- };
112
- BreadcrumbComponent.prototype.trigger = function (eventName, eventProp, successHandler) {
113
- if (!isExecute) {
114
- this.models = !this.models ? this.ej2Instances.referModels : this.models;
115
- }
116
- if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
117
- var key = this.models.toString().match(/checked|value/) || [];
118
- var propKey = key[0];
119
- if (eventProp && key && !isUndefined(eventProp[propKey])) {
120
- if (!isExecute) {
121
- this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
122
- this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
123
- this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
124
127
  }
125
- else {
126
- if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
128
+ }
129
+ else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
130
+ var key = this.models.toString().match(/currentView|selectedDate/) || [];
131
+ var propKey = key[0];
132
+ if (eventProp && key && !isUndefined(eventProp[propKey])) {
133
+ if (!isExecute) {
134
+ this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
135
+ this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
136
+ }
137
+ else {
127
138
  this.$emit('update:' + propKey, eventProp[propKey]);
128
139
  this.$emit('modelchanged', eventProp[propKey]);
129
140
  }
130
141
  }
131
142
  }
132
- }
133
- else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
134
- var key = this.models.toString().match(/currentView|selectedDate/) || [];
135
- var propKey = key[0];
136
- if (eventProp && key && !isUndefined(eventProp[propKey])) {
137
- if (!isExecute) {
138
- this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
139
- this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
140
- }
141
- else {
142
- this.$emit('update:' + propKey, eventProp[propKey]);
143
- this.$emit('modelchanged', eventProp[propKey]);
144
- }
143
+ if ((this.ej2Instances && this.ej2Instances._trigger)) {
144
+ this.ej2Instances._trigger(eventName, eventProp, successHandler);
145
145
  }
146
- }
147
- if ((this.ej2Instances && this.ej2Instances._trigger)) {
148
- this.ej2Instances._trigger(eventName, eventProp, successHandler);
149
- }
150
- };
151
- BreadcrumbComponent.prototype.render = function (createElement) {
152
- var h = !isExecute ? gh : createElement;
153
- var slots = null;
154
- if (!isNullOrUndefined(this.$slots.default)) {
155
- slots = !isExecute ? this.$slots.default() : this.$slots.default;
156
- }
157
- return h('nav', slots);
158
- };
159
- BreadcrumbComponent.prototype.custom = function () {
160
- this.updated();
161
- };
162
- BreadcrumbComponent = __decorate([
163
- EJComponentDecorator({
164
- props: properties,
165
- model: {
166
- event: 'modelchanged'
167
- }
168
- }, isExecute)
169
- ,Options({
170
- props: props,
171
- watch: watch,
172
- emits: emitProbs,
173
- provide: function provide() {
174
- return {
175
- custom: this.custom
176
- };
177
- }
178
- })
179
- ], BreadcrumbComponent);
180
- return BreadcrumbComponent;
181
- }(ComponentBase));
182
- export { BreadcrumbComponent };
146
+ },
147
+ custom: function () {
148
+ this.updated();
149
+ },
150
+ }
151
+ });
183
152
  export var BreadcrumbPlugin = {
184
153
  name: 'ejs-breadcrumb',
185
154
  install: function (Vue) {
@@ -1,10 +1,4 @@
1
- declare let vueImport: any;
2
- export declare class BreadcrumbItemsDirective extends vueImport {
3
- constructor();
4
- render(createElement: any): void;
5
- updated(): void;
6
- getTag(): string;
7
- }
1
+ export declare let BreadcrumbItemsDirective: any;
8
2
  export declare const BreadcrumbItemsPlugin: {
9
3
  name: string;
10
4
  install(Vue: any): void;
@@ -21,12 +15,8 @@ export declare const BreadcrumbItemsPlugin: {
21
15
  * </ejs-breadcrumb>
22
16
  * ```
23
17
  */
24
- export declare class BreadcrumbItemDirective extends vueImport {
25
- render(): void;
26
- getTag(): string;
27
- }
18
+ export declare let BreadcrumbItemDirective: any;
28
19
  export declare const BreadcrumbItemPlugin: {
29
20
  name: string;
30
21
  install(Vue: any): void;
31
22
  };
32
- export {};