|
1 | | -import { Options } from 'vue-class-component'; |
2 | | -import { ComponentBase, EJComponentDecorator, getProps, allVue, gh, isExecute } from '@syncfusion/ej2-vue-base'; |
| 1 | +import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base'; |
3 | 2 | import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base'; |
4 | 3 |
|
5 | 4 | import { BarcodeGenerator } from '@syncfusion/ej2-barcode-generator'; |
6 | 5 |
|
7 | 6 |
|
8 | | -// {{VueImport}} |
9 | 7 | export const properties: string[] = ['isLazyUpdate', 'plugins', 'backgroundColor', 'displayText', 'enableCheckSum', 'enablePersistence', 'enableRtl', 'foreColor', 'height', 'locale', 'margin', 'mode', 'type', 'value', 'width', 'invalid']; |
10 | 8 | export const modelProps: string[] = []; |
11 | 9 |
|
12 | 10 | export const testProp: any = getProps({props: properties}); |
13 | | -export const props = testProp[0]; |
14 | | -export const watch = testProp[1]; |
15 | | - |
16 | | -export const emitProbs: any = Object.keys(watch); |
| 11 | +export const props = testProp[0], watch = testProp[1], emitProbs: any = Object.keys(watch); |
17 | 12 | emitProbs.push('modelchanged', 'update:modelValue'); |
18 | | -for (let props of modelProps) { |
19 | | - emitProbs.push( |
20 | | - 'update:'+props |
21 | | - ); |
22 | | -} |
| 13 | +for (let props of modelProps) { emitProbs.push('update:'+props) } |
23 | 14 |
|
24 | 15 | /** |
25 | 16 | * Represents vue Barcode Component |
26 | 17 | * ```html |
27 | 18 | * <ejs-barcode-generator></ejs-barcode-generator> |
28 | 19 | * ``` |
29 | 20 | */ |
30 | | -@EJComponentDecorator({ |
31 | | - props: properties |
32 | | -},isExecute) |
33 | | - |
34 | | -/* Start Options({ |
| 21 | +export let BarcodeGeneratorComponent = vueDefineComponent({ |
| 22 | + name: 'BarcodeGeneratorComponent', |
| 23 | + mixins: [ComponentBase], |
35 | 24 | props: props, |
36 | 25 | watch: watch, |
37 | 26 | emits: emitProbs, |
38 | | - provide: function provide() { |
| 27 | + provide() { return { custom: this.custom } }, |
| 28 | + data() { |
39 | 29 | return { |
40 | | - custom: this.custom |
41 | | - }; |
42 | | - } |
43 | | -}) End */ |
| 30 | + ej2Instances: new BarcodeGenerator({}) as any, |
| 31 | + propKeys: properties as string[], |
| 32 | + models: modelProps as string[], |
| 33 | + hasChildDirective: false as boolean, |
| 34 | + hasInjectedModules: false as boolean, |
| 35 | + tagMapper: {} as { [key: string]: Object }, |
| 36 | + tagNameMapper: {} as Object, |
| 37 | + isVue3: !isExecute as boolean, |
| 38 | + templateCollection: {} as any, |
| 39 | + } |
| 40 | + }, |
| 41 | + created() { |
44 | 42 |
|
45 | | -export class BarcodeGeneratorComponent extends ComponentBase { |
46 | | - |
47 | | - public ej2Instances: any; |
48 | | - public propKeys: string[] = properties; |
49 | | - public models: string[] = modelProps; |
50 | | - public hasChildDirective: boolean = false; |
51 | | - protected hasInjectedModules: boolean = false; |
52 | | - public tagMapper: { [key: string]: Object } = {}; |
53 | | - public tagNameMapper: Object = {}; |
54 | | - public isVue3: boolean; |
55 | | - public templateCollection: any; |
56 | | - constructor() { |
57 | | - super(arguments); |
58 | | - this.isVue3 = !isExecute; |
59 | | - this.ej2Instances = new BarcodeGenerator({}); |
60 | 43 | this.bindProperties(); |
61 | 44 | this.ej2Instances._setProperties = this.ej2Instances.setProperties; |
62 | 45 | this.ej2Instances.setProperties = this.setProperties; |
63 | 46 | this.ej2Instances.clearTemplate = this.clearTemplate; |
64 | 47 | this.updated = this.updated; |
65 | | - } |
66 | | - |
67 | | - public clearTemplate(templateNames?: string[]): any { |
68 | | - if (!templateNames){ |
69 | | - templateNames = Object.keys(this.templateCollection || {}); |
70 | | - } |
71 | | - if (templateNames.length && this.templateCollection) { |
72 | | - for (let tempName of templateNames){ |
73 | | - let elementCollection: any = this.templateCollection[tempName]; |
74 | | - if(elementCollection && elementCollection.length) { |
75 | | - for(let ele of elementCollection) { |
76 | | - let destroy: any = getValue('__vue__.$destroy', ele); |
77 | | - if (destroy) { |
78 | | - ele.__vue__.$destroy(); |
79 | | - } |
80 | | - if (ele.innerHTML){ |
81 | | - ele.innerHTML = ''; |
82 | | - } |
83 | | - } |
84 | | - delete this.templateCollection[tempName]; |
85 | | - } |
86 | | - } |
87 | | -} |
88 | | - } |
89 | | - |
90 | | - |
91 | | - |
92 | | - public setProperties(prop: any, muteOnChange: boolean): void { |
93 | | - if(this.isVue3) { |
94 | | - this.models = !this.models ? this.ej2Instances.referModels : this.models; |
95 | | - } |
96 | | - if (this.ej2Instances && this.ej2Instances._setProperties) { |
97 | | - this.ej2Instances._setProperties(prop, muteOnChange); |
98 | | - } |
99 | | - if (prop && this.models && this.models.length) { |
100 | | - Object.keys(prop).map((key: string): void => { |
101 | | - this.models.map((model: string): void => { |
102 | | - if ((key === model) && !(/datasource/i.test(key))) { |
103 | | - if (this.isVue3) { |
104 | | - this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]); |
105 | | - } else { |
106 | | - (this as any).$emit('update:' + key, prop[key]); |
107 | | - (this as any).$emit('modelchanged', prop[key]); |
108 | | - } |
109 | | - } |
110 | | - }); |
111 | | - }); |
112 | | - } |
113 | | - } |
114 | | - |
115 | | - public render(createElement: any) { |
| 48 | + }, |
| 49 | + render(createElement: any) { |
116 | 50 | let h: any = !isExecute ? gh : createElement; |
117 | 51 | let slots: any = null; |
118 | 52 | if(!isNullOrUndefined((this as any).$slots.default)) { |
119 | 53 | slots = !isExecute ? (this as any).$slots.default() : (this as any).$slots.default; |
120 | 54 | } |
121 | 55 | return h('div', slots); |
| 56 | + }, |
| 57 | + methods: { |
| 58 | + clearTemplate(templateNames?: string[]): any { |
| 59 | + if (!templateNames){ templateNames = Object.keys(this.templateCollection || {}) } |
| 60 | + if (templateNames.length && this.templateCollection) { |
| 61 | + for (let tempName of templateNames){ |
| 62 | + let elementCollection: any = this.templateCollection[tempName]; |
| 63 | + if(elementCollection && elementCollection.length) { |
| 64 | + for(let ele of elementCollection) { |
| 65 | + let destroy: any = getValue('__vue__.$destroy', ele); |
| 66 | + if (destroy) { ele.__vue__.$destroy() } |
| 67 | + if (ele.innerHTML) { ele.innerHTML = '' } |
| 68 | + } |
| 69 | + delete this.templateCollection[tempName]; |
| 70 | + } |
| 71 | + } |
| 72 | + } |
| 73 | + }, |
| 74 | + setProperties(prop: any, muteOnChange: boolean): void { |
| 75 | + if(this.isVue3) { this.models = !this.models ? this.ej2Instances.referModels : this.models } |
| 76 | + if (this.ej2Instances && this.ej2Instances._setProperties) { |
| 77 | + this.ej2Instances._setProperties(prop, muteOnChange); |
| 78 | + } |
| 79 | + if (prop && this.models && this.models.length) { |
| 80 | + Object.keys(prop).map((key: string): void => { |
| 81 | + this.models.map((model: string): void => { |
| 82 | + if ((key === model) && !(/datasource/i.test(key))) { |
| 83 | + if (this.isVue3) { |
| 84 | + this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]); |
| 85 | + } else { |
| 86 | + (this as any).$emit('update:' + key, prop[key]); |
| 87 | + (this as any).$emit('modelchanged', prop[key]); |
| 88 | + } |
| 89 | + } |
| 90 | + }); |
| 91 | + }); |
| 92 | + } |
| 93 | + }, |
| 94 | + custom(): void { |
| 95 | + this.updated(); |
| 96 | + }, |
| 97 | + exportAsBase64Image(exportType: Object): Object { |
| 98 | + return this.ej2Instances.exportAsBase64Image(exportType); |
| 99 | + }, |
| 100 | + exportImage(filename: string, exportType: Object): void { |
| 101 | + return this.ej2Instances.exportImage(filename, exportType); |
| 102 | + }, |
122 | 103 | } |
123 | | - public custom(): void { |
124 | | - this.updated(); |
125 | | - } |
126 | | - |
127 | | - public exportAsBase64Image(exportType: Object): Object { |
128 | | - return this.ej2Instances.exportAsBase64Image(exportType); |
129 | | - } |
| 104 | +}); |
130 | 105 |
|
131 | | - public exportImage(filename: string, exportType: Object): void { |
132 | | - return this.ej2Instances.exportImage(filename, exportType); |
133 | | - } |
134 | | -} |
| 106 | +export type BarcodeGeneratorComponent = InstanceType<typeof BarcodeGeneratorComponent>; |
135 | 107 |
|
136 | 108 | export const BarcodeGeneratorPlugin = { |
137 | 109 | name: 'ejs-barcodegenerator', |
|
0 commit comments