v19.2.44 is released
This commit is contained in:
pipeline
Родитель
61a1d88a1b
Коммит
113c4c1b47
|
|
@ -1,11 +1,30 @@
|
|||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { BarcodeGenerator } from '@syncfusion/ej2-barcode-generator';
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['backgroundColor', 'displayText', 'enableCheckSum', 'enablePersistence', 'enableRtl', 'foreColor', 'height', 'locale', 'margin', 'mode', 'type', 'value', 'width', 'invalid'];
|
||||
export const modelProps: string[] = [];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents vue Barcode Component
|
||||
* ```html
|
||||
|
|
@ -14,7 +33,14 @@ export const modelProps: string[] = [];
|
|||
*/
|
||||
@EJComponentDecorator({
|
||||
props: properties
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class BarcodeGeneratorComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -24,15 +50,21 @@ export class BarcodeGeneratorComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = false;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new BarcodeGenerator({});
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -40,7 +72,11 @@ export class BarcodeGeneratorComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -48,7 +84,12 @@ export class BarcodeGeneratorComponent extends ComponentBase {
|
|||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public exportAsBase64Image(exportType: Object): Object {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,30 @@
|
|||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { DataMatrixGenerator } from '@syncfusion/ej2-barcode-generator';
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['backgroundColor', 'displayText', 'enablePersistence', 'enableRtl', 'encoding', 'foreColor', 'height', 'locale', 'margin', 'mode', 'size', 'value', 'width', 'xDimension', 'invalid'];
|
||||
export const modelProps: string[] = [];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents vue DataMatrix Component
|
||||
* ```html
|
||||
|
|
@ -14,7 +33,14 @@ export const modelProps: string[] = [];
|
|||
*/
|
||||
@EJComponentDecorator({
|
||||
props: properties
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class DataMatrixGeneratorComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -24,15 +50,21 @@ export class DataMatrixGeneratorComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = false;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new DataMatrixGenerator({});
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -40,7 +72,11 @@ export class DataMatrixGeneratorComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -48,7 +84,12 @@ export class DataMatrixGeneratorComponent extends ComponentBase {
|
|||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public exportAsBase64Image(barcodeExportType: Object): Object {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,30 @@
|
|||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { QRCodeGenerator } from '@syncfusion/ej2-barcode-generator';
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['backgroundColor', 'displayText', 'enablePersistence', 'enableRtl', 'errorCorrectionLevel', 'foreColor', 'height', 'locale', 'margin', 'mode', 'value', 'version', 'width', 'xDimension', 'invalid'];
|
||||
export const modelProps: string[] = [];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents vue QRCode Component
|
||||
* ```html
|
||||
|
|
@ -14,7 +33,14 @@ export const modelProps: string[] = [];
|
|||
*/
|
||||
@EJComponentDecorator({
|
||||
props: properties
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class QRCodeGeneratorComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -24,15 +50,21 @@ export class QRCodeGeneratorComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = false;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new QRCodeGenerator({});
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -40,7 +72,11 @@ export class QRCodeGeneratorComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -48,7 +84,12 @@ export class QRCodeGeneratorComponent extends ComponentBase {
|
|||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public exportAsBase64Image(barcodeExportType: Object): Object {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-barcode-generator/styles/barcode/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-barcode-generator/styles/barcode/tailwind.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'barcode/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'barcode/tailwind.scss';
|
||||
|
|
@ -72,4 +72,3 @@ Base library provide options to enable following Vue functionalities in Essentia
|
|||
|
||||
- The individual npm package will no longer bundle dependent component's style. The online web tool [CRG](https://crg.syncfusion.com/) can be used to combine specific set of component and its dependent component styles.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -80,5 +80,5 @@ Check the license detail [here](https://github.com/syncfusion/ej2-vue-ui-compone
|
|||
|
||||
Check the changelog [here](https://ej2.syncfusion.com/vue/documentation/release-notes?utm_source=npm&utm_campaign=ej2-vue-base)
|
||||
|
||||
© Copyright 2018 Syncfusion, Inc. All Rights Reserved.
|
||||
© Copyright 2019 Syncfusion, Inc. All Rights Reserved.
|
||||
The Syncfusion Essential Studio license and copyright applies to this distribution.
|
||||
|
|
@ -2,87 +2,86 @@
|
|||
// Generated on Tue Apr 26 2016 09:56:05 GMT+0530 (India Standard Time)
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
|
||||
// base path that will be used to resolve all patterns (eg. files, exclude)
|
||||
basePath: '',
|
||||
|
||||
|
||||
// frameworks to use
|
||||
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
frameworks: ['jasmine-ajax', 'jasmine', 'requirejs',],
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [
|
||||
"test-main.js",
|
||||
{ pattern: "src/**/*.js", included: false },
|
||||
{ pattern: "spec/**/*.js", included: false },
|
||||
{ pattern: "node_modules/@syncfusion/ej2-base/**/*.js", included: false },
|
||||
],
|
||||
|
||||
// list of files to exclude
|
||||
exclude: [
|
||||
],
|
||||
|
||||
|
||||
// preprocess matching files before serving them to the browser
|
||||
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
preprocessors: {},
|
||||
|
||||
|
||||
// test results reporter to use
|
||||
// possible values: 'dots', 'progress'
|
||||
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
|
||||
reporters: ['dots', 'html'],
|
||||
|
||||
// the default html configuration
|
||||
htmlReporter: {
|
||||
outputFile: "test-report/units.html",
|
||||
pageTitle: "Unit Tests",
|
||||
subPageTitle: "Asampleprojectdescription"
|
||||
},
|
||||
|
||||
// web server port
|
||||
port: 9876,
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
colors: true,
|
||||
|
||||
|
||||
// level of logging
|
||||
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||
logLevel: config.LOG_INFO,
|
||||
|
||||
|
||||
// enable / disable watching file and executing tests whenever any file changes
|
||||
autoWatch: true,
|
||||
|
||||
|
||||
// start these browsers
|
||||
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
||||
browsers: ['ChromeHeadless', 'Chrome', 'Firefox'],
|
||||
|
||||
|
||||
// Continuous Integration mode
|
||||
// if true, Karma captures browsers, runs the tests and exits
|
||||
singleRun: false,
|
||||
|
||||
// Concurrency level
|
||||
// how many browser should be started simultaneous
|
||||
concurrency: Infinity,
|
||||
|
||||
|
||||
coverageReporter: {
|
||||
type: "html",
|
||||
check: {
|
||||
each: {
|
||||
statements: 90,
|
||||
branches: 90,
|
||||
functions: 100,
|
||||
lines: 90
|
||||
}
|
||||
config.set({
|
||||
|
||||
// base path that will be used to resolve all patterns (eg. files, exclude)
|
||||
basePath: '',
|
||||
|
||||
|
||||
// frameworks to use
|
||||
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
frameworks: ['jasmine-ajax', 'jasmine', 'requirejs',],
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [
|
||||
"test-main.js",
|
||||
{ pattern: "src/**/*.js", included: false },
|
||||
{ pattern: "spec/**/*.js", included: false },
|
||||
{ pattern: "node_modules/@syncfusion/ej2-base/**/*.js", included: false },
|
||||
],
|
||||
|
||||
// list of files to exclude
|
||||
exclude: [
|
||||
],
|
||||
|
||||
|
||||
// preprocess matching files before serving them to the browser
|
||||
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
preprocessors: {},
|
||||
|
||||
|
||||
// test results reporter to use
|
||||
// possible values: 'dots', 'progress'
|
||||
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
|
||||
reporters: ['dots', 'html'],
|
||||
|
||||
// the default html configuration
|
||||
htmlReporter: {
|
||||
outputFile: "test-report/units.html",
|
||||
pageTitle: "Unit Tests",
|
||||
subPageTitle: "Asampleprojectdescription"
|
||||
},
|
||||
|
||||
// web server port
|
||||
port: 9876,
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
colors: true,
|
||||
|
||||
|
||||
// level of logging
|
||||
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||
logLevel: config.LOG_INFO,
|
||||
|
||||
|
||||
// enable / disable watching file and executing tests whenever any file changes
|
||||
autoWatch: true,
|
||||
|
||||
|
||||
// start these browsers
|
||||
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
||||
browsers: ['ChromeHeadless', 'Chrome', 'Firefox'],
|
||||
|
||||
|
||||
// Continuous Integration mode
|
||||
// if true, Karma captures browsers, runs the tests and exits
|
||||
singleRun: false,
|
||||
|
||||
// Concurrency level
|
||||
// how many browser should be started simultaneous
|
||||
concurrency: Infinity,
|
||||
|
||||
|
||||
coverageReporter: {
|
||||
type: "html",
|
||||
check: {
|
||||
each: {
|
||||
statements: 90,
|
||||
branches: 90,
|
||||
functions: 100,
|
||||
lines: 90
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-vue-base",
|
||||
"version": "17.4.51",
|
||||
"version": "19.1.54",
|
||||
"description": "A common package of Essential JS 2 base Vue libraries, methods and class definitions",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
@ -24,13 +24,14 @@
|
|||
"module": "./index.js",
|
||||
"readme": "ReadMe.md",
|
||||
"peerDependencies": {
|
||||
"vue": "2.5.2 - 2.6.12"
|
||||
"vue": "2.5.2 - 3.0.5",
|
||||
"vue-class-component": "^8.0.0-rc.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@syncfusion/ej2-base": "*"
|
||||
"@syncfusion/ej2-base": "*",
|
||||
"glob": "^7.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vue": "2.5.2 - 2.6.11",
|
||||
"@types/chai": "^3.4.28",
|
||||
"@types/es6-promise": "0.0.28",
|
||||
"@types/jasmine": "^2.2.29",
|
||||
|
|
@ -38,12 +39,14 @@
|
|||
"@types/react": "^15.0.24",
|
||||
"@types/react-dom": "^15.5.0",
|
||||
"@types/requirejs": "^2.1.26",
|
||||
"typescript": "2.3.4",
|
||||
"vue": "2.5.2 - 2.6.11",
|
||||
"vue-class-component": "7.2.6",
|
||||
"es6-promise": "^3.2.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-typescript": "^3.1.6",
|
||||
"requirejs": "^2.3.3",
|
||||
"typescript": "2.3.4",
|
||||
"canteen": "^1.0.5",
|
||||
"jasmine-ajax": "^3.3.1",
|
||||
"jasmine-core": "^2.6.1",
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
import Vue from 'vue';
|
||||
import { EJComponentDecorator, ComponentBase } from '../src/index';
|
||||
import { VueComponent } from './sample-component';
|
||||
// import Vue from 'vue';
|
||||
// import { EJComponentDecorator, ComponentBase } from '../src/index';
|
||||
// import { VueComponent } from './sample-component';
|
||||
|
||||
describe('test', () => {
|
||||
let ele: HTMLElement;
|
||||
let result: any;
|
||||
beforeEach(() => {
|
||||
ele = document.createElement('div');
|
||||
document.body.appendChild(ele);
|
||||
});
|
||||
it('Component Intialized Properly', () => {
|
||||
let vue = new Vue({
|
||||
el: '#vue',
|
||||
template: "<ejs-vue />",
|
||||
components: {
|
||||
VueComponent
|
||||
}
|
||||
});
|
||||
expect(ele.firstElementChild.classList.contains('e-control')).toBe(true);
|
||||
expect((ele.firstElementChild as any).ej2_instances[0].getModuleName()).toBe('Styler');
|
||||
});
|
||||
});
|
||||
// describe('test', () => {
|
||||
// let ele: HTMLElement;
|
||||
// let result: any;
|
||||
// beforeEach(() => {
|
||||
// ele = document.createElement('div');
|
||||
// document.body.appendChild(ele);
|
||||
// });
|
||||
// it('Component Intialized Properly', () => {
|
||||
// let vue = new Vue({
|
||||
// el: '#vue',
|
||||
// template: "<ejs-vue />",
|
||||
// components: {
|
||||
// VueComponent
|
||||
// }
|
||||
// });
|
||||
// expect(ele.firstElementChild.classList.contains('e-control')).toBe(true);
|
||||
// expect((ele.firstElementChild as any).ej2_instances[0].getModuleName()).toBe('Styler');
|
||||
// });
|
||||
// });
|
||||
|
|
@ -1,149 +1,149 @@
|
|||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '../src/index';
|
||||
import { ChildProperty, Property, Component as Comp, compile, Collection, Event, NotifyPropertyChanges, INotifyPropertyChanged } from '@syncfusion/ej2-base';
|
||||
// import Vue from 'vue';
|
||||
// import { ComponentBase, EJComponentDecorator } from '../src/index';
|
||||
// import { ChildProperty, Property, Component as Comp, compile, Collection, Event, NotifyPropertyChanges, INotifyPropertyChanged } from '@syncfusion/ej2-base';
|
||||
|
||||
export interface StylerModel {
|
||||
size?: string;
|
||||
enablePersistence?: boolean;
|
||||
enableRtl?: boolean;
|
||||
locale?: string;
|
||||
created?: Function;
|
||||
destroyed?: Function;
|
||||
content?: string;
|
||||
template?: string | Function;
|
||||
}
|
||||
// export interface StylerModel {
|
||||
// size?: string;
|
||||
// enablePersistence?: boolean;
|
||||
// enableRtl?: boolean;
|
||||
// locale?: string;
|
||||
// created?: Function;
|
||||
// destroyed?: Function;
|
||||
// content?: string;
|
||||
// template?: string | Function;
|
||||
// }
|
||||
|
||||
export class LocalField extends ChildProperty<LocalField> {
|
||||
@Property()
|
||||
public status: string;
|
||||
@Property()
|
||||
public name: string;
|
||||
}
|
||||
// export class LocalField extends ChildProperty<LocalField> {
|
||||
// @Property()
|
||||
// public status: string;
|
||||
// @Property()
|
||||
// public name: string;
|
||||
// }
|
||||
|
||||
export interface FieldModel {
|
||||
status?: string;
|
||||
name?: string;
|
||||
template?:string | Function;
|
||||
}
|
||||
// export interface FieldModel {
|
||||
// status?: string;
|
||||
// name?: string;
|
||||
// template?:string | Function;
|
||||
// }
|
||||
|
||||
@NotifyPropertyChanges
|
||||
export class Styler extends Comp<HTMLElement> implements INotifyPropertyChanged {
|
||||
@Property('12px')
|
||||
public size: string;
|
||||
@Property(false)
|
||||
public enablePersistence: boolean;
|
||||
@Property('SampleContent')
|
||||
public content: string;
|
||||
@Property({ color: 'red' })
|
||||
public settings: { color: string, size: number };
|
||||
@Property()
|
||||
public template:string;
|
||||
@Property([])
|
||||
public items: string[];
|
||||
@Property()
|
||||
public event1: Function;
|
||||
@Collection([], LocalField)
|
||||
public fields: FieldModel[];
|
||||
@Property('true')
|
||||
public enableTouch: boolean;
|
||||
@Property()
|
||||
public event2: Function;
|
||||
@Property()
|
||||
public event3: Function;
|
||||
@Event()
|
||||
public created: Function;
|
||||
@Event()
|
||||
public destroyed: Function;
|
||||
public val:any;
|
||||
constructor(fontObj?: StylerModel, id?: string | HTMLElement) {
|
||||
super(fontObj, id);
|
||||
}
|
||||
public touchModule: Touch;
|
||||
public preRender(): void { }
|
||||
public getModuleName(): string {
|
||||
return 'Styler';
|
||||
}
|
||||
public getPersistData(): string {
|
||||
return this.ignoreOnPersist(['size']);
|
||||
}
|
||||
public render(): void {
|
||||
this.element.classList.add('e-styler');
|
||||
this.element.style.fontSize = this.size;
|
||||
this.element.innerHTML = this.content;
|
||||
if(this.template) {
|
||||
let compiledString: Function = compile(this.template);
|
||||
this.val = compiledString({test:'access'});
|
||||
}
|
||||
}
|
||||
public destroy(): void {
|
||||
this.element.classList.remove('e-styler');
|
||||
super.destroy();
|
||||
}
|
||||
public onPropertyChanged(newProp: any, oldProp: any): void {
|
||||
this.element.style.fontSize = newProp['size'];
|
||||
}
|
||||
}
|
||||
// @NotifyPropertyChanges
|
||||
// export class Styler extends Comp<HTMLElement> implements INotifyPropertyChanged {
|
||||
// @Property('12px')
|
||||
// public size: string;
|
||||
// @Property(false)
|
||||
// public enablePersistence: boolean;
|
||||
// @Property('SampleContent')
|
||||
// public content: string;
|
||||
// @Property({ color: 'red' })
|
||||
// public settings: { color: string, size: number };
|
||||
// @Property()
|
||||
// public template:string;
|
||||
// @Property([])
|
||||
// public items: string[];
|
||||
// @Property()
|
||||
// public event1: Function;
|
||||
// @Collection([], LocalField)
|
||||
// public fields: FieldModel[];
|
||||
// @Property('true')
|
||||
// public enableTouch: boolean;
|
||||
// @Property()
|
||||
// public event2: Function;
|
||||
// @Property()
|
||||
// public event3: Function;
|
||||
// @Event()
|
||||
// public created: Function;
|
||||
// @Event()
|
||||
// public destroyed: Function;
|
||||
// public val:any;
|
||||
// constructor(fontObj?: StylerModel, id?: string | HTMLElement) {
|
||||
// super(fontObj, id);
|
||||
// }
|
||||
// public touchModule: Touch;
|
||||
// public preRender(): void { }
|
||||
// public getModuleName(): string {
|
||||
// return 'Styler';
|
||||
// }
|
||||
// public getPersistData(): string {
|
||||
// return this.ignoreOnPersist(['size']);
|
||||
// }
|
||||
// public render(): void {
|
||||
// this.element.classList.add('e-styler');
|
||||
// this.element.style.fontSize = this.size;
|
||||
// this.element.innerHTML = this.content;
|
||||
// if(this.template) {
|
||||
// let compiledString: Function = compile(this.template);
|
||||
// this.val = compiledString({test:'access'});
|
||||
// }
|
||||
// }
|
||||
// public destroy(): void {
|
||||
// this.element.classList.remove('e-styler');
|
||||
// super.destroy();
|
||||
// }
|
||||
// public onPropertyChanged(newProp: any, oldProp: any): void {
|
||||
// this.element.style.fontSize = newProp['size'];
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
export const properties: string[] = ['status', 'name', 'size', 'settings', 'items'];
|
||||
// export const properties: string[] = ['status', 'name', 'size', 'settings', 'items'];
|
||||
|
||||
@EJComponentDecorator({
|
||||
props: properties
|
||||
})
|
||||
export class VueComponent extends ComponentBase {
|
||||
public ej2Instances: any;
|
||||
public propKeys:string[] = properties;
|
||||
public hasChildDirective: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = { 'columns': 'column', 'aggregates': { 'aggregate': { 'columns': 'column' } }, 'axes': { 'axis': { 'stripLines': 'stripLine', 'multiLevelLabels': { 'multiLevelLabel': { 'categories': 'category' } } } } };
|
||||
constructor() {
|
||||
super();
|
||||
this.ej2Instances = new Styler({});
|
||||
this.bindProperties();
|
||||
}
|
||||
// @EJComponentDecorator({
|
||||
// props: properties
|
||||
// })
|
||||
// export class VueComponent extends ComponentBase {
|
||||
// public ej2Instances: any;
|
||||
// public propKeys:string[] = properties;
|
||||
// public hasChildDirective: boolean = true;
|
||||
// public tagMapper: { [key: string]: Object } = { 'columns': 'column', 'aggregates': { 'aggregate': { 'columns': 'column' } }, 'axes': { 'axis': { 'stripLines': 'stripLine', 'multiLevelLabels': { 'multiLevelLabel': { 'categories': 'category' } } } } };
|
||||
// constructor() {
|
||||
// super();
|
||||
// this.ej2Instances = new Styler({});
|
||||
// this.bindProperties();
|
||||
// }
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div',(this as any).$slots.default);
|
||||
}
|
||||
}
|
||||
Vue.component('ejs-vue', VueComponent);
|
||||
// public render(createElement: any) {
|
||||
// return createElement('div',(this as any).$slots.default);
|
||||
// }
|
||||
// }
|
||||
// Vue.component('ejs-vue', VueComponent);
|
||||
|
||||
@EJComponentDecorator({
|
||||
props:[]
|
||||
})
|
||||
export class ChildsDirective extends Vue{
|
||||
public render(): any {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Vue.component('childs', ChildsDirective);
|
||||
// @EJComponentDecorator({
|
||||
// props:[]
|
||||
// })
|
||||
// export class ChildsDirective extends Vue{
|
||||
// public render(): any {
|
||||
// return null;
|
||||
// }
|
||||
// }
|
||||
// Vue.component('childs', ChildsDirective);
|
||||
|
||||
@EJComponentDecorator({
|
||||
props:[]
|
||||
})
|
||||
export class ChildDirective extends Vue{
|
||||
public render(): any {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Vue.component('child', ChildDirective);
|
||||
// @EJComponentDecorator({
|
||||
// props:[]
|
||||
// })
|
||||
// export class ChildDirective extends Vue{
|
||||
// public render(): any {
|
||||
// return null;
|
||||
// }
|
||||
// }
|
||||
// Vue.component('child', ChildDirective);
|
||||
|
||||
|
||||
@EJComponentDecorator({
|
||||
props:[]
|
||||
})
|
||||
export class MultiChildsDirective extends Vue{
|
||||
public render(): any {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Vue.component('multichilds', MultiChildsDirective);
|
||||
// @EJComponentDecorator({
|
||||
// props:[]
|
||||
// })
|
||||
// export class MultiChildsDirective extends Vue{
|
||||
// public render(): any {
|
||||
// return null;
|
||||
// }
|
||||
// }
|
||||
// Vue.component('multichilds', MultiChildsDirective);
|
||||
|
||||
@EJComponentDecorator({
|
||||
props:[]
|
||||
})
|
||||
export class MultiChildDirective extends Vue{
|
||||
public render(): any {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Vue.component('multichild', MultiChildDirective);
|
||||
// @EJComponentDecorator({
|
||||
// props:[]
|
||||
// })
|
||||
// export class MultiChildDirective extends Vue{
|
||||
// public render(): any {
|
||||
// return null;
|
||||
// }
|
||||
// }
|
||||
// Vue.component('multichild', MultiChildDirective);
|
||||
|
|
@ -1,79 +1,68 @@
|
|||
/**
|
||||
* Vue Component Base
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
|
||||
import { isNullOrUndefined, extend, getValue } from '@syncfusion/ej2-base';
|
||||
|
||||
export class ComponentBase extends Vue {
|
||||
|
||||
// tslint:disable:no-any
|
||||
protected ej2Instances: any;
|
||||
protected tagMapper: any;
|
||||
protected tagNameMapper: any;
|
||||
protected hasInjectedModules: boolean = false;
|
||||
protected hasChildDirective: boolean = false;
|
||||
protected childDirObjects: string = '';
|
||||
protected propKeys: any;
|
||||
|
||||
public created(): void {
|
||||
for (let prop of this.propKeys) {
|
||||
this.ej2Instances.addEventListener(prop, (args: object) => {
|
||||
this.$emit(prop, args);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public mounted(): void {
|
||||
this.ej2Instances.isVue = true;
|
||||
this.ej2Instances.vueInstance = this;
|
||||
this.ej2Instances.appendTo(this.$el);
|
||||
}
|
||||
public getInjectedServices(): Object[] {
|
||||
let ret = [];
|
||||
let provide: any = getValue('$vnode.context.$options.provide', this);
|
||||
if (provide) {
|
||||
// tslint:disable:no-any
|
||||
let injectables: any = provide;
|
||||
if (typeof provide === 'function') {
|
||||
// tslint:disable:no-any
|
||||
injectables = (this.$vnode.context.$options.provide as any)();
|
||||
}
|
||||
ret = injectables[this.ej2Instances.getModuleName()] || [];
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
public updated(): void {
|
||||
if (this.hasChildDirective) {
|
||||
let childKey: Object = {};
|
||||
this.fetchChildPropValues(childKey);
|
||||
let curChildDir: string = JSON.stringify(childKey);
|
||||
if (this.childDirObjects !== curChildDir) {
|
||||
this.childDirObjects = curChildDir;
|
||||
this.assignValueToWrapper(childKey, false);
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import * as Vue2 from 'vue';
|
||||
import Vue from 'vue';
|
||||
|
||||
export const aVue = _interopRequireWildcard(Vue2);
|
||||
export function _interopRequireWildcard(obj: any) {
|
||||
if (obj && obj.__esModule) {
|
||||
return obj;
|
||||
} else {
|
||||
let newObj: any = {};
|
||||
if (obj != null) {
|
||||
for (let key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
|
||||
}
|
||||
}
|
||||
newObj.default = obj;
|
||||
return newObj;
|
||||
}
|
||||
|
||||
public beforeDestroy(): void {
|
||||
let tempBeforeDestroyThis: any = this;
|
||||
tempBeforeDestroyThis.ej2Instances.destroy();
|
||||
(tempBeforeDestroyThis.$el as any).style.visibility = 'hidden';
|
||||
tempBeforeDestroyThis = null;
|
||||
}
|
||||
|
||||
export const allVue: any = aVue;
|
||||
export const gh: any = allVue.h;
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
export class ComponentBase extends vueImport {
|
||||
|
||||
// tslint:disable:no-any
|
||||
protected ej2Instances: any;
|
||||
protected tagMapper: any;
|
||||
protected tagNameMapper: any;
|
||||
protected hasInjectedModules: boolean = false;
|
||||
protected hasChildDirective: boolean = false;
|
||||
protected childDirObjects: string = '';
|
||||
protected propKeys: any;
|
||||
|
||||
constructor() {
|
||||
super(arguments);
|
||||
}
|
||||
|
||||
public bindProperties(): void {
|
||||
let options: Object = {};
|
||||
for (let prop of this.propKeys) {
|
||||
if (!isNullOrUndefined(this[prop])) {
|
||||
options[prop] = this[prop];
|
||||
}
|
||||
}
|
||||
if (this.hasChildDirective) {
|
||||
this.fetchChildPropValues(options);
|
||||
}
|
||||
if (this.hasInjectedModules) {
|
||||
|
||||
let prevModule: Object[] = this.getInjectedServices() || [];
|
||||
|
||||
public created(): void {
|
||||
if (!this.propKeys) {
|
||||
return
|
||||
}
|
||||
for (let prop of this.propKeys) {
|
||||
this.ej2Instances.addEventListener(prop, (args: object) => {
|
||||
this.$emit(prop, args);
|
||||
});
|
||||
}
|
||||
let injectables: any = getValue('$root.$options.provide', this);
|
||||
if (this.hasInjectedModules && !isExecute && injectables) {
|
||||
let prevModule: Object[] = injectables[this.ej2Instances.getModuleName()] || [];
|
||||
let curModule: Object[] = this.ej2Instances.getInjectedModules() || [];
|
||||
for (let mod of curModule) {
|
||||
if (prevModule.indexOf(mod) === -1) {
|
||||
|
|
@ -82,100 +71,333 @@ export class ComponentBase extends Vue {
|
|||
}
|
||||
this.ej2Instances.injectedModules = prevModule;
|
||||
}
|
||||
this.assignValueToWrapper(options);
|
||||
}
|
||||
|
||||
public assignValueToWrapper(option: Object, silent?: boolean): void {
|
||||
this.ej2Instances.setProperties(extend({}, {}, option, true), isNullOrUndefined(silent as any) ? true : silent);
|
||||
}
|
||||
|
||||
public fetchChildPropValues(childOption: Object): void {
|
||||
let dirProps: Object = this.getDirectiveValues(this.$slots.default, this.tagMapper || {}, this.tagNameMapper || {});
|
||||
if (!this.childDirObjects) {
|
||||
this.childDirObjects = JSON.stringify(dirProps);
|
||||
}
|
||||
for (let dirProp of Object.keys(dirProps)) {
|
||||
childOption[dirProp] = dirProps[dirProp];
|
||||
}
|
||||
}
|
||||
|
||||
public getDirectiveValues(tagDirectives: any, tagMapper: { [key: string]: Object }, tagNameMapper: Object): Object {
|
||||
let keyTags: string[] = Object.keys(tagMapper);
|
||||
let dir: Object = {};
|
||||
if (tagDirectives) {
|
||||
for (let tagDirective of tagDirectives) {
|
||||
if (tagDirective.componentOptions && tagDirective.componentOptions.children && tagDirective.componentOptions.tag) {
|
||||
let dirTag: string = tagDirective.componentOptions.tag;
|
||||
if (keyTags.indexOf(dirTag) !== -1) {
|
||||
let tagName: string = tagNameMapper[dirTag] ? tagNameMapper[dirTag] : dirTag;
|
||||
dir[tagName.replace('e-', '')] = [];
|
||||
for (let tagDirChild of tagDirective.componentOptions.children) {
|
||||
let retObj: Object = this.getVNodeValue(tagDirChild, tagMapper[dirTag], tagNameMapper);
|
||||
if (Object.keys(retObj).length !== 0) {
|
||||
dir[tagName.replace('e-', '')].push(retObj);
|
||||
}
|
||||
}
|
||||
|
||||
public mounted(): void {
|
||||
this.ej2Instances.isVue = true;
|
||||
this.ej2Instances.isVue3 = this.isVue3;
|
||||
this.ej2Instances.vueInstance = this;
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.ej2Instances = this.ej2Instances;
|
||||
this.ej2Instances.referModels = this.models;
|
||||
}
|
||||
this.ej2Instances.appendTo(this.$el);
|
||||
}
|
||||
public getInjectedServices(): Object[] {
|
||||
let ret = [];
|
||||
let provide: any = getValue('$vnode.context.$options.provide', this);
|
||||
if (provide) {
|
||||
// tslint:disable:no-any
|
||||
let injectables: any = provide;
|
||||
if (typeof provide === 'function') {
|
||||
// tslint:disable:no-any
|
||||
injectables = (this.$vnode.context.$options.provide as any)();
|
||||
}
|
||||
ret = injectables[this.ej2Instances.getModuleName()] || [];
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
public updated(): void {
|
||||
if (this.hasChildDirective) {
|
||||
let childKey: Object = {};
|
||||
this.fetchChildPropValues(childKey);
|
||||
let curChildDir: string = JSON.stringify(childKey);
|
||||
if (this.childDirObjects !== curChildDir) {
|
||||
this.childDirObjects = curChildDir;
|
||||
this.assignValueToWrapper(childKey, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public beforeDestroy(): void {
|
||||
let tempBeforeDestroyThis: any = this;
|
||||
tempBeforeDestroyThis.ej2Instances.destroy();
|
||||
(tempBeforeDestroyThis.$el as any).style.visibility = 'hidden';
|
||||
tempBeforeDestroyThis = null;
|
||||
}
|
||||
|
||||
public bindProperties(): void {
|
||||
let options: Object = {};
|
||||
for (let prop of this.propKeys) {
|
||||
if ((!isNullOrUndefined(this[prop]) && !this.isVue3) || (this[0] && !isNullOrUndefined(this[0][0]) && !isNullOrUndefined(this[0][0][prop]))) {
|
||||
options[prop] = !this.isVue3 ? this[prop] : this[0][0][prop];
|
||||
}
|
||||
}
|
||||
if (this.hasChildDirective) {
|
||||
this.fetchChildPropValues(options);
|
||||
}
|
||||
if (this.hasInjectedModules) {
|
||||
|
||||
let prevModule: Object[] = this.getInjectedServices() || [];
|
||||
let curModule: Object[] = this.ej2Instances.getInjectedModules() || [];
|
||||
for (let mod of curModule) {
|
||||
if (prevModule.indexOf(mod) === -1) {
|
||||
prevModule.push(mod);
|
||||
}
|
||||
}
|
||||
this.ej2Instances.injectedModules = prevModule;
|
||||
}
|
||||
this.assignValueToWrapper(options);
|
||||
}
|
||||
|
||||
public assignValueToWrapper(option: Object, silent?: boolean): void {
|
||||
this.ej2Instances.setProperties(extend({}, {}, option, true), isNullOrUndefined(silent as any) ? true : silent);
|
||||
}
|
||||
|
||||
public fetchChildPropValues(childOption: Object): void {
|
||||
let dirProps: Object = {};
|
||||
if(!this.isVue3) {
|
||||
dirProps = this.getDirectiveValues( this.$slots.default, this.tagMapper || {}, this.tagNameMapper || {});
|
||||
} else {
|
||||
if (this[0] && this[0][1].slots.default) {
|
||||
let propRef: any = this[0][1].slots.default();
|
||||
for (let i: number = 0; i < propRef.length; i++) {
|
||||
if (propRef[i].type.methods) {
|
||||
let key: string = propRef[i].type.methods.getTag().replace("e-", "");
|
||||
let ref: any = this.resolveArrayDirectives(propRef[i].children,key);
|
||||
let splitKeys: any = key.split('-');
|
||||
let controlName: string = this.ej2Instances.getModuleName().toLowerCase();
|
||||
let keyRef: string = (splitKeys.length > 1 && controlName.indexOf(splitKeys[0])>-1) ? splitKeys[1]: splitKeys[0];
|
||||
keyRef = keyRef.replace(controlName,'');
|
||||
if (controlName == "splitter" && keyRef == "panes") {
|
||||
keyRef = "paneSettings"
|
||||
} else if (controlName == "bulletchart" && keyRef == "range") {
|
||||
keyRef = "ranges";
|
||||
}
|
||||
dirProps[keyRef] = ref[key];
|
||||
}
|
||||
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!this.childDirObjects) {
|
||||
this.childDirObjects = JSON.stringify(dirProps);
|
||||
}
|
||||
for (let dirProp of Object.keys(dirProps)) {
|
||||
childOption[dirProp] = dirProps[dirProp];
|
||||
}
|
||||
}
|
||||
|
||||
public resolveArrayDirectives(slots: any, tagName: any) {
|
||||
let slot: any = [];
|
||||
let innerDirValues: any;
|
||||
slot = slots.default ? slots.default() : slots;
|
||||
let items: any = {};
|
||||
items[tagName] = [];
|
||||
for (const childSlot of slot) {
|
||||
let tempObj: any = {};
|
||||
let tagRef: any = childSlot.type.methods ? childSlot.type.methods.getTag() : tagName;
|
||||
if (childSlot.children) {
|
||||
let key: string;
|
||||
innerDirValues = this.resolveComplexDirs(childSlot.children, this.tagMapper["e-" + tagName], tagRef);
|
||||
if (innerDirValues.length) {
|
||||
tempObj = innerDirValues;
|
||||
} else {
|
||||
for(var i=0;i< Object.keys(innerDirValues).length;i++){
|
||||
key = Object.keys(innerDirValues)[i];
|
||||
tempObj[key] = innerDirValues[key];
|
||||
};
|
||||
}
|
||||
}
|
||||
if (childSlot.props) {
|
||||
Object.keys(childSlot.props).forEach((key) => {
|
||||
tempObj[key] = childSlot.props[key];
|
||||
});
|
||||
}
|
||||
if ((/[s]\b/).test(tagRef) && !(/[s]\b/).test(tagName) && innerDirValues) {
|
||||
items[tagName] =tempObj;
|
||||
}
|
||||
else {
|
||||
items[tagName].push(tempObj);
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
public resolveComplexDirs(slots: any, tagObject: any, tagName: string) {
|
||||
let slot: any = [];
|
||||
let innerDirValues: any;
|
||||
slot = slots.default ? slots.default() : slots;
|
||||
let items: any = {};
|
||||
for (const childSlot of slot) {
|
||||
let tagRef: any;
|
||||
let tag: any;
|
||||
if (tagObject[tagName]) {
|
||||
tagRef= Object.keys(tagObject[tagName]);
|
||||
tag= tagRef.find(
|
||||
(key: any) =>
|
||||
tagObject[tagName][key] ===
|
||||
childSlot.type.methods.getTag().replace(/[s]\b/, "")
|
||||
);
|
||||
tag = tag
|
||||
? tag.replace("e-", "")
|
||||
: childSlot.type.methods.getTag().replace("e-", "");
|
||||
if (this.ej2Instances.getModuleName().toLowerCase() == "diagram" && tag.indexOf('annotations') !=-1) {
|
||||
tag = 'annotations';
|
||||
}
|
||||
}
|
||||
if (childSlot.children) {
|
||||
innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
|
||||
if (!items[tag]) {
|
||||
items[tag] = [];
|
||||
}
|
||||
if (innerDirValues.length >1) {
|
||||
items[tag] = innerDirValues;
|
||||
} else {
|
||||
items[tag].push(innerDirValues);
|
||||
}
|
||||
}
|
||||
if (slot.length > 1) {
|
||||
items = Object.keys(items).length == 0 && !items.length ? [] : items;
|
||||
if (childSlot.prop) { items.push(childSlot.prop); }
|
||||
}
|
||||
else {
|
||||
items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
public resolveComplexInnerDirs(slots: any, tagObject: any, tagName: string) {
|
||||
let slot: any = [];
|
||||
let innerDirValues: any;
|
||||
slot = slots.default ? slots.default() : slots;
|
||||
let items: any = slot.length > 1 ? [] : {};
|
||||
for (const childSlot of slot) {
|
||||
let tag: string = childSlot.type.methods.getTag().replace("e-", "");
|
||||
if (childSlot.children) {
|
||||
innerDirValues = this.resolveMultilevelComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
|
||||
if ((/[s]\b/).test(tag) || slot.length > 1) {
|
||||
if ((/[s]\b/).test(tag)) {
|
||||
items[tag] = !items[tag] ? [] : items[tag];
|
||||
if (innerDirValues.length) {
|
||||
items[tag] = innerDirValues;
|
||||
} else {items[tag].push(innerDirValues);}
|
||||
} else if (innerDirValues) {
|
||||
items.push(innerDirValues)
|
||||
}
|
||||
} else {
|
||||
items = innerDirValues ? innerDirValues : items;
|
||||
}
|
||||
}
|
||||
|
||||
if (slot.length > 1 && childSlot.props) {
|
||||
if (items.length >= 0) {
|
||||
items.push(childSlot.props);
|
||||
} else {
|
||||
items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
|
||||
}
|
||||
} else {
|
||||
items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
|
||||
}
|
||||
}
|
||||
}
|
||||
return dir;
|
||||
}
|
||||
|
||||
public getMultiLevelDirValue(tagDirectories: any, tagKey: string | Object, tagNameMapper: Object): Object {
|
||||
let mulObj: Object = {};
|
||||
for (let tagDir of tagDirectories) {
|
||||
if (tagDir.componentOptions) {
|
||||
let key: string = tagDir.componentOptions.tag;
|
||||
let tagName: string = tagNameMapper[key] ? tagNameMapper[key] : key;
|
||||
mulObj[tagName.replace('e-', '')] = [];
|
||||
if (tagDir.componentOptions && tagDir.componentOptions.children) {
|
||||
for (let tagDirChild of tagDir.componentOptions.children) {
|
||||
let mulLevObj: Object = this.getVNodeValue(tagDirChild, tagKey[key], tagNameMapper);
|
||||
if (Object.keys(mulLevObj).length !== 0) {
|
||||
mulObj[tagName.replace('e-', '')].push(mulLevObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return mulObj;
|
||||
}
|
||||
|
||||
public getVNodeValue(tagDirective: any, tagKey: string | Object, tagNameMapper: Object): Object {
|
||||
let ret: Object = {};
|
||||
if (tagDirective.componentOptions) {
|
||||
let dirTag: string = tagDirective.componentOptions.tag;
|
||||
if (typeof tagKey === 'string' && dirTag === tagKey && tagDirective.data) {
|
||||
ret = tagDirective.data.attrs ? this.getCamelCaseProps(tagDirective.data.attrs) : this.getCamelCaseProps(tagDirective.data);
|
||||
} else if (typeof tagKey === 'object') {
|
||||
if (tagDirective.componentOptions.children && (Object.keys(tagKey).indexOf(dirTag) !== -1)) {
|
||||
ret = this.getMultiLevelDirValue(tagDirective.componentOptions.children, tagKey[dirTag], tagNameMapper);
|
||||
}
|
||||
if (tagDirective.data && tagDirective.data.attrs) {
|
||||
ret = extend(ret, this.getCamelCaseProps(tagDirective.data.attrs));
|
||||
}
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
/**
|
||||
* convert kebab case directive props to camel case
|
||||
*/
|
||||
public getCamelCaseProps(props: Object): Object {
|
||||
let retProps: Object = {};
|
||||
for (let prop of Object.keys(props)) {
|
||||
retProps[prop.replace(/-[a-z]/g, (e) => {return e[1].toUpperCase()})] = props[prop];
|
||||
}
|
||||
return retProps;
|
||||
}
|
||||
|
||||
public dataBind() {
|
||||
this.ej2Instances.dataBind();
|
||||
}
|
||||
|
||||
public setProperties(arg: Object, muteOnChange?: boolean): void {
|
||||
return this.ej2Instances.setProperties(arg, muteOnChange);
|
||||
}
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
public resolveMultilevelComplexInnerDirs(slots: any, tagObject: any, tagName: string) {
|
||||
let slot: any = [];
|
||||
let innerDirValues: any;
|
||||
slot = slots.default ? slots.default() : slots;
|
||||
let items: any = slot.length > 1 ? [] : {};
|
||||
for (const childSlot of slot) {
|
||||
let tag: string = childSlot.type.methods.getTag().replace("e-", "");
|
||||
if (childSlot.children) {
|
||||
innerDirValues = this.resolveComplexInnerDirs(childSlot.children, tagObject[tagName], childSlot.type.methods.getTag());
|
||||
}
|
||||
if((/[s]\b/).test(tag)) {
|
||||
items[tag] = !items[tag] ? [] : items[tag];
|
||||
if(innerDirValues.length) {
|
||||
items[tag] = innerDirValues;
|
||||
} else { items[tag].push(innerDirValues); }
|
||||
if (childSlot.props) {items[tag].push(childSlot.props);}
|
||||
} else {
|
||||
items = innerDirValues;
|
||||
items = childSlot.props ? (<any>Object).assign(items, childSlot.props) : items;
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
public getDirectiveValues(tagDirectives: any, tagMapper: { [key: string]: Object }, tagNameMapper: Object): Object {
|
||||
let keyTags: string[] = Object.keys(tagMapper);
|
||||
let dir: Object = {};
|
||||
if (tagDirectives) {
|
||||
for (let tagDirective of tagDirectives) {
|
||||
if (tagDirective.componentOptions && tagDirective.componentOptions.children && tagDirective.componentOptions.tag) {
|
||||
let dirTag: string = tagDirective.componentOptions.tag;
|
||||
if (keyTags.indexOf(dirTag) !== -1) {
|
||||
let tagName: string = tagNameMapper[dirTag] ? tagNameMapper[dirTag] : dirTag;
|
||||
dir[tagName.replace('e-', '')] = [];
|
||||
for (let tagDirChild of tagDirective.componentOptions.children) {
|
||||
let retObj: Object = this.getVNodeValue(tagDirChild, tagMapper[dirTag], tagNameMapper);
|
||||
if (Object.keys(retObj).length !== 0) {
|
||||
dir[tagName.replace('e-', '')].push(retObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return dir;
|
||||
}
|
||||
|
||||
public getMultiLevelDirValue(tagDirectories: any, tagKey: string | Object, tagNameMapper: Object): Object {
|
||||
let mulObj: Object = {};
|
||||
for (let tagDir of tagDirectories) {
|
||||
if (tagDir.componentOptions) {
|
||||
let key: string = tagDir.componentOptions.tag;
|
||||
let tagName: string = tagNameMapper[key] ? tagNameMapper[key] : key;
|
||||
mulObj[tagName.replace('e-', '')] = [];
|
||||
if (tagDir.componentOptions && tagDir.componentOptions.children) {
|
||||
for (let tagDirChild of tagDir.componentOptions.children) {
|
||||
let mulLevObj: Object = this.getVNodeValue(tagDirChild, tagKey[key], tagNameMapper);
|
||||
if (Object.keys(mulLevObj).length !== 0) {
|
||||
mulObj[tagName.replace('e-', '')].push(mulLevObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return mulObj;
|
||||
}
|
||||
|
||||
public getVNodeValue(tagDirective: any, tagKey: string | Object, tagNameMapper: Object): Object {
|
||||
let ret: Object = {};
|
||||
if (tagDirective.componentOptions) {
|
||||
let dirTag: string = tagDirective.componentOptions.tag;
|
||||
if (typeof tagKey === 'string' && dirTag === tagKey && tagDirective.data) {
|
||||
ret = tagDirective.data.attrs ? this.getCamelCaseProps(tagDirective.data.attrs) : this.getCamelCaseProps(tagDirective.data);
|
||||
} else if (typeof tagKey === 'object') {
|
||||
if (tagDirective.componentOptions.children && (Object.keys(tagKey).indexOf(dirTag) !== -1)) {
|
||||
ret = this.getMultiLevelDirValue(tagDirective.componentOptions.children, tagKey[dirTag], tagNameMapper);
|
||||
}
|
||||
if (tagDirective.data && tagDirective.data.attrs) {
|
||||
ret = extend(ret, this.getCamelCaseProps(tagDirective.data.attrs));
|
||||
}
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
/**
|
||||
* convert kebab case directive props to camel case
|
||||
*/
|
||||
public getCamelCaseProps(props: Object): Object {
|
||||
let retProps: Object = {};
|
||||
for (let prop of Object.keys(props)) {
|
||||
retProps[prop.replace(/-[a-z]/g, (e) => {return e[1].toUpperCase()})] = props[prop];
|
||||
}
|
||||
return retProps;
|
||||
}
|
||||
|
||||
public dataBind() {
|
||||
this.ej2Instances.dataBind();
|
||||
}
|
||||
|
||||
public setProperties(arg: Object, muteOnChange?: boolean): void {
|
||||
return this.ej2Instances.setProperties(arg, muteOnChange);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
* Vue Component Base
|
||||
*/
|
||||
import Vue, { ComponentOptions, PluginObject } from 'vue';
|
||||
import { Base, Component as EJ2Component, isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
import Vue from 'vue';
|
||||
// import { Base, Component as EJ2Component, isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase } from './component-base';
|
||||
export let $internalHooks = [
|
||||
'data',
|
||||
|
|
@ -20,7 +20,29 @@ export let $internalHooks = [
|
|||
'errorCaptured' // 2.5
|
||||
];
|
||||
|
||||
export function EJComponentDecorator(options: any): any {
|
||||
export function getProps(
|
||||
options: any = {}
|
||||
): any {
|
||||
if (options.props) {
|
||||
for (let prop of options.props) {
|
||||
(options.newprops || (options.newprops = {}))[prop] = {
|
||||
|
||||
};
|
||||
(options.watch || (options.watch = {}))[prop] = function (newVal: Object) { // watch it
|
||||
this.ej2Instances[prop] = newVal;
|
||||
if (this.dataBind && (options.name !== 'DateRangePickerComponent')) {
|
||||
this.dataBind();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
return [options.newprops, options.watch];
|
||||
}
|
||||
|
||||
export function EJComponentDecorator(options: any, isExecute?: any): any {
|
||||
if(!isExecute) {
|
||||
return;
|
||||
}
|
||||
return function (Component: any) {
|
||||
return EJcomponentFactory(Component, options);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,96 @@
|
|||
import Vue from 'vue';
|
||||
import { setTemplateEngine, getTemplateEngine, getUniqueID, createElement, detach, extend, getValue } from "@syncfusion/ej2-base";
|
||||
import Vue from "vue";
|
||||
import {
|
||||
setTemplateEngine,
|
||||
getTemplateEngine,
|
||||
getUniqueID,
|
||||
createElement,
|
||||
detach,
|
||||
extend,
|
||||
getValue,
|
||||
} from "@syncfusion/ej2-base";
|
||||
|
||||
import { aVue, allVue, gh } from "./component-base";
|
||||
|
||||
// tslint:disable:no-any
|
||||
let stringCompiler: (template: string, helper?: object) => (data: Object | JSON) => string = getTemplateEngine();
|
||||
let stringCompiler: (
|
||||
template: string,
|
||||
helper?: object
|
||||
) => (data: Object | JSON) => string = getTemplateEngine();
|
||||
|
||||
export function compile(templateElement: any, helper?: Object):
|
||||
(data: Object | JSON, component?: any, propName?: any) => Object {
|
||||
let that = this;
|
||||
if (typeof templateElement === 'string') {
|
||||
return stringCompiler(templateElement, helper);
|
||||
} else {
|
||||
return (data: any, context: any): any => {
|
||||
let pid: string = getUniqueID('templateParentDiv');
|
||||
let id: string = getUniqueID('templateDiv');
|
||||
let ele: HTMLElement = createElement('div', { id: pid, innerHTML: '<div id="' + id + '"></div>' });
|
||||
document.body.appendChild(ele);
|
||||
export function compile(
|
||||
templateElement: any,
|
||||
helper?: Object
|
||||
): (data: Object | JSON, component?: any, propName?: any) => Object {
|
||||
let that = this;
|
||||
if (typeof templateElement === "string") {
|
||||
return stringCompiler(templateElement, helper);
|
||||
} else {
|
||||
return (data: any, context: any): any => {
|
||||
let pid: string = getUniqueID("templateParentDiv");
|
||||
let id: string = getUniqueID("templateDiv");
|
||||
let ele: HTMLElement = createElement("div", {
|
||||
id: pid,
|
||||
innerHTML: '<div id="' + id + '"></div>',
|
||||
});
|
||||
document.body.appendChild(ele);
|
||||
|
||||
let tempObj: any = templateElement.call(that, {});
|
||||
let returnEle: any;
|
||||
if(context){
|
||||
let templateFunction: any = tempObj.template;
|
||||
let propsData: any = getValue('template.propsData',tempObj);
|
||||
let dataObj: any = { 'data': { data: extend(tempObj.data || {}, data) }, parent: context.vueInstance};
|
||||
if (propsData) {
|
||||
templateFunction = tempObj.template.extends;
|
||||
dataObj.propsData = propsData;
|
||||
}
|
||||
if (typeof templateFunction !== 'function') {
|
||||
templateFunction = Vue.extend(templateFunction);
|
||||
}
|
||||
let templateVue: any = new templateFunction(dataObj);
|
||||
//let templateVue: any = new Vue(tempObj.template);
|
||||
//templateVue.$data.data = extend(tempObj.data, data);
|
||||
templateVue.$mount('#' + id);
|
||||
returnEle = ele.childNodes;
|
||||
detach(ele);
|
||||
}
|
||||
let tempObj: any = templateElement.call(that, {});
|
||||
let returnEle: any;
|
||||
if (context) {
|
||||
if (gh) {
|
||||
let object: any = tempObj;
|
||||
let propsData: any = getValue("template.propsData", tempObj);
|
||||
let dataObj: any = {
|
||||
data: { data: extend(tempObj.data || {}, data) },
|
||||
parent: context.vueInstance,
|
||||
};
|
||||
if (!object.template) {
|
||||
object.template = object[Object.keys(object)[0]];
|
||||
}
|
||||
let templateCompRef: any;
|
||||
if(object.template.extends) {
|
||||
templateCompRef = object.template.extends._context.components.template;
|
||||
} else {
|
||||
templateCompRef = object.template._context.components[templateElement.name];
|
||||
}
|
||||
let tempRef: any;
|
||||
if (propsData) {
|
||||
tempRef = (<any>Object).assign(templateCompRef.data(), propsData);
|
||||
} else {
|
||||
tempRef = (<any>Object).assign(templateCompRef.data(), dataObj.data)
|
||||
}
|
||||
templateCompRef.data = function () { return tempRef; };
|
||||
allVue
|
||||
.createApp(templateCompRef)
|
||||
.mount("#" + id);
|
||||
returnEle = ele.childNodes;
|
||||
detach(ele);
|
||||
} else {
|
||||
let templateFunction = tempObj.template;
|
||||
let propsData: any = getValue("template.propsData", tempObj);
|
||||
let dataObj: any = {
|
||||
data: { data: extend(tempObj.data || {}, data) },
|
||||
parent: context.vueInstance,
|
||||
};
|
||||
if (propsData) {
|
||||
templateFunction = tempObj.template.extends;
|
||||
dataObj.propsData = propsData;
|
||||
}
|
||||
if (typeof templateFunction !== "function") {
|
||||
templateFunction = Vue.extend(templateFunction);
|
||||
}
|
||||
let templateVue: any = new templateFunction(dataObj);
|
||||
// let templateVue = new Vue(tempObj.template);
|
||||
// templateVue.$data.data = extend(tempObj.data, data);
|
||||
templateVue.$mount("#" + id);
|
||||
returnEle = ele.childNodes;
|
||||
detach(ele);
|
||||
}
|
||||
}
|
||||
|
||||
return returnEle || [];
|
||||
};
|
||||
}
|
||||
return returnEle || [];
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
setTemplateEngine({ compile: (compile as any) });
|
||||
setTemplateEngine({ compile: compile as any });
|
||||
|
|
|
|||
|
|
@ -40,4 +40,4 @@ require.config({
|
|||
|
||||
// number of seconds to wait before giving up on loading a script
|
||||
waitSeconds: 30,
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,6 +2,14 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 19.2.44 (2021-06-30)
|
||||
|
||||
### Chips
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- Issue with `selectedChips` property is not maintained after deletion of Chip items has been resolved.
|
||||
|
||||
## 18.4.44 (2021-02-23)
|
||||
|
||||
### CheckBox
|
||||
|
|
|
|||
|
|
@ -99,4 +99,4 @@ Check the license detail [here](https://github.com/syncfusion/ej2-vue-ui-compone
|
|||
|
||||
Check the changelog [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/buttons/CHANGELOG.md)
|
||||
|
||||
© Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
|
||||
© Copyright 2021 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-vue-buttons",
|
||||
"version": "19.1.54",
|
||||
"version": "19.1.63",
|
||||
"description": "A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch. for Vue",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
@ -57,13 +57,16 @@
|
|||
"@types/jasmine": "^2.2.29",
|
||||
"@types/jasmine-ajax": "^3.1.27",
|
||||
"@types/requirejs": "^2.1.26",
|
||||
"vue": "2.5.2 - 2.5.21",
|
||||
"vue": "2.5.2 - 3.0.5",
|
||||
"vue-class-component": "^8.0.0-rc.1",
|
||||
"vue-loader-v16": "^16.0.0-beta.5.4",
|
||||
"rollup": "^0.51.3",
|
||||
"rollup-plugin-commonjs": "^8.2.6",
|
||||
"rollup-plugin-node-resolve": "^3.0.0",
|
||||
"rollup-plugin-sourcemaps": "^0.4.2",
|
||||
"rollup-plugin-typescript": "^0.8.1",
|
||||
"rollup-plugin-uglify": "^2.0.1",
|
||||
"@types/node": "^15.6.0",
|
||||
"es6-promise": "^3.2.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-sass": "^3.1.0",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,30 @@
|
|||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['content', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'iconCss', 'iconPosition', 'isPrimary', 'isToggle', 'locale', 'created'];
|
||||
export const modelProps: string[] = [];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents the Essential JS 2 VueJS Button Component
|
||||
* ```html
|
||||
|
|
@ -14,7 +33,14 @@ export const modelProps: string[] = [];
|
|||
*/
|
||||
@EJComponentDecorator({
|
||||
props: properties
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class ButtonComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -24,15 +50,21 @@ export class ButtonComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = false;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new Button({});
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -40,7 +72,11 @@ export class ButtonComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -48,7 +84,12 @@ export class ButtonComponent extends ComponentBase {
|
|||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('button', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('button', slots);
|
||||
}
|
||||
|
||||
public click(): void {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['checked', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'indeterminate', 'label', 'labelPosition', 'locale', 'name', 'value', 'change', 'created'];
|
||||
export const modelProps: string[] = ['checked', 'indeterminate'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents the Essential JS 2 VueJS CheckBox Component
|
||||
* ```html
|
||||
|
|
@ -18,7 +37,14 @@ export const modelProps: string[] = ['checked', 'indeterminate'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class CheckBoxComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -28,17 +54,23 @@ export class CheckBoxComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = false;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new CheckBox({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -46,35 +78,57 @@ export class CheckBoxComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('input', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('input', slots);
|
||||
}
|
||||
|
||||
public click(): void {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { ChipList } from '@syncfusion/ej2-buttons';
|
||||
import { ChipsDirective, ChipDirective, ChipsPlugin, ChipPlugin } from './chips.directive'
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['avatarIconCss', 'avatarText', 'chips', 'cssClass', 'enableDelete', 'enablePersistence', 'enableRtl', 'enabled', 'leadingIconCss', 'leadingIconUrl', 'locale', 'selectedChips', 'selection', 'text', 'trailingIconCss', 'trailingIconUrl', 'beforeClick', 'click', 'created', 'delete'];
|
||||
export const modelProps: string[] = [];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents the Essential JS 2 VueJS ChipList Component.
|
||||
* ```html
|
||||
|
|
@ -15,7 +34,14 @@ export const modelProps: string[] = [];
|
|||
*/
|
||||
@EJComponentDecorator({
|
||||
props: properties
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class ChipListComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -25,15 +51,21 @@ export class ChipListComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = false;
|
||||
public tagMapper: { [key: string]: Object } = {"e-chips":"e-chip"};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new ChipList({});
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -41,7 +73,11 @@ export class ChipListComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -49,7 +85,12 @@ export class ChipListComponent extends ComponentBase {
|
|||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public add(chipsData: string[] | number[] | Object[] | string | number | Object): void {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class ChipsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class ChipsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-chips';
|
||||
}
|
||||
}
|
||||
export const ChipsPlugin = {
|
||||
name: 'e-chips',
|
||||
|
|
@ -25,11 +38,14 @@ export const ChipsPlugin = {
|
|||
* </ejs-chiplist>
|
||||
* ```
|
||||
*/
|
||||
@EJComponentDecorator({})
|
||||
export class ChipDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class ChipDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-chip';
|
||||
}
|
||||
}
|
||||
export const ChipPlugin = {
|
||||
name: 'e-chip',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { RadioButton } from '@syncfusion/ej2-buttons';
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['checked', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'label', 'labelPosition', 'locale', 'name', 'value', 'change', 'created'];
|
||||
export const modelProps: string[] = ['value'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents the Essential JS 2 VueJS RadioButton Component
|
||||
* ```html
|
||||
|
|
@ -18,7 +37,14 @@ export const modelProps: string[] = ['value'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class RadioButtonComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -28,17 +54,23 @@ export class RadioButtonComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = false;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new RadioButton({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -46,35 +78,57 @@ export class RadioButtonComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('input', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('input', slots);
|
||||
}
|
||||
|
||||
public click(): void {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { Switch } from '@syncfusion/ej2-buttons';
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['checked', 'cssClass', 'disabled', 'enablePersistence', 'enableRtl', 'locale', 'name', 'offLabel', 'onLabel', 'value', 'change', 'created'];
|
||||
export const modelProps: string[] = ['checked'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents the Essential JS 2 VueJS Switch Component.
|
||||
* ```html
|
||||
|
|
@ -18,7 +37,14 @@ export const modelProps: string[] = ['checked'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class SwitchComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -28,17 +54,23 @@ export class SwitchComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = false;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new Switch({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -46,35 +78,57 @@ export class SwitchComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('input', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('input', slots);
|
||||
}
|
||||
|
||||
public click(): void {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-buttons/styles/button/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-buttons/styles/button/tailwind.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-buttons/styles/check-box/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-buttons/styles/check-box/tailwind.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-buttons/styles/chips/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-buttons/styles/chips/tailwind.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-buttons/styles/radio-button/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-buttons/styles/radio-button/tailwind.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-buttons/styles/switch/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-buttons/styles/switch/tailwind.scss';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import 'button/tailwind-dark.scss';
|
||||
@import 'check-box/tailwind-dark.scss';
|
||||
@import 'radio-button/tailwind-dark.scss';
|
||||
@import 'switch/tailwind-dark.scss';
|
||||
@import 'chips/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import 'button/tailwind.scss';
|
||||
@import 'check-box/tailwind.scss';
|
||||
@import 'radio-button/tailwind.scss';
|
||||
@import 'switch/tailwind.scss';
|
||||
@import 'chips/tailwind.scss';
|
||||
|
|
@ -18,7 +18,8 @@
|
|||
"allowJs": false,
|
||||
"noEmitOnError": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"moduleResolution": "node"
|
||||
"moduleResolution": "node",
|
||||
"types": ["node"]
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,26 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 19.2.44 (2021-06-30)
|
||||
|
||||
### DatePicker
|
||||
|
||||
#### New Features
|
||||
|
||||
- `#245933` , `#F147808` - Now, you can enable the masked input using `enableMask` property
|
||||
|
||||
### DateTimePicker
|
||||
|
||||
#### New Features
|
||||
|
||||
- `#299471` - Now, you can enable the masked input using `enableMask` property
|
||||
|
||||
### TimePicker
|
||||
|
||||
#### New Features
|
||||
|
||||
- Now, you can enable the masked input using `enableMask` property
|
||||
|
||||
## 18.4.34 (2021-01-12)
|
||||
|
||||
### DateTimePicker
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-vue-calendars",
|
||||
"version": "19.1.66",
|
||||
"version": "17.2.48",
|
||||
"description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization. for Vue",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { Calendar } from '@syncfusion/ej2-calendars';
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['calendarMode', 'cssClass', 'dayHeaderFormat', 'depth', 'enablePersistence', 'enableRtl', 'enabled', 'firstDayOfWeek', 'isMultiSelection', 'keyConfigs', 'locale', 'max', 'min', 'serverTimezoneOffset', 'showTodayButton', 'start', 'value', 'values', 'weekNumber', 'weekRule', 'change', 'created', 'destroyed', 'navigated', 'renderDayCell'];
|
||||
export const modelProps: string[] = ['value', 'values'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents the Essential JS 2 VueJS Calendar Component.
|
||||
* ```html
|
||||
|
|
@ -18,7 +37,14 @@ export const modelProps: string[] = ['value', 'values'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class CalendarComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -28,17 +54,23 @@ export class CalendarComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new Calendar({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -46,35 +78,57 @@ export class CalendarComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public addDate(dates: Object | Object[]): void {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { DatePicker } from '@syncfusion/ej2-calendars';
|
||||
|
||||
|
||||
export const properties: string[] = ['allowEdit', 'calendarMode', 'cssClass', 'dayHeaderFormat', 'depth', 'enablePersistence', 'enableRtl', 'enabled', 'firstDayOfWeek', 'floatLabelType', 'format', 'htmlAttributes', 'isMultiSelection', 'keyConfigs', 'locale', 'max', 'min', 'openOnFocus', 'placeholder', 'readonly', 'serverTimezoneOffset', 'showClearButton', 'showTodayButton', 'start', 'strictMode', 'value', 'values', 'weekNumber', 'weekRule', 'width', 'zIndex', 'blur', 'change', 'cleared', 'close', 'created', 'destroyed', 'focus', 'navigated', 'open', 'renderDayCell'];
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['allowEdit', 'calendarMode', 'cssClass', 'dayHeaderFormat', 'depth', 'enableMask', 'enablePersistence', 'enableRtl', 'enabled', 'firstDayOfWeek', 'floatLabelType', 'format', 'htmlAttributes', 'isMultiSelection', 'keyConfigs', 'locale', 'maskPlaceholder', 'max', 'min', 'openOnFocus', 'placeholder', 'readonly', 'serverTimezoneOffset', 'showClearButton', 'showTodayButton', 'start', 'strictMode', 'value', 'values', 'weekNumber', 'weekRule', 'width', 'zIndex', 'blur', 'change', 'cleared', 'close', 'created', 'destroyed', 'focus', 'navigated', 'open', 'renderDayCell'];
|
||||
export const modelProps: string[] = ['value'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents the Essential JS 2 VueJS DatePicker Component.
|
||||
* ```html
|
||||
|
|
@ -18,7 +37,14 @@ export const modelProps: string[] = ['value'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class DatePickerComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -28,17 +54,23 @@ export class DatePickerComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new DatePicker({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -46,35 +78,57 @@ export class DatePickerComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('input', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('input', slots);
|
||||
}
|
||||
|
||||
public addDate(dates: Object | Object[]): void {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,32 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { DateRangePicker } from '@syncfusion/ej2-calendars';
|
||||
import { PresetsDirective, PresetDirective, PresetsPlugin, PresetPlugin } from './presets.directive'
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['allowEdit', 'calendarMode', 'cssClass', 'dayHeaderFormat', 'depth', 'enablePersistence', 'enableRtl', 'enabled', 'endDate', 'firstDayOfWeek', 'floatLabelType', 'format', 'htmlAttributes', 'keyConfigs', 'locale', 'max', 'maxDays', 'min', 'minDays', 'openOnFocus', 'placeholder', 'presets', 'readonly', 'separator', 'serverTimezoneOffset', 'showClearButton', 'start', 'startDate', 'strictMode', 'value', 'weekNumber', 'weekRule', 'width', 'zIndex', 'blur', 'change', 'cleared', 'close', 'created', 'destroyed', 'focus', 'navigated', 'open', 'renderDayCell', 'select'];
|
||||
export const modelProps: string[] = ['startDate', 'endDate', 'value'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents the Essential JS 2 VueJS DateRangePicker Component.
|
||||
* ```html
|
||||
|
|
@ -19,7 +38,14 @@ export const modelProps: string[] = ['startDate', 'endDate', 'value'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class DateRangePickerComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -29,17 +55,23 @@ export class DateRangePickerComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = false;
|
||||
public tagMapper: { [key: string]: Object } = {"e-presets":"e-preset"};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new DateRangePicker({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -47,35 +79,57 @@ export class DateRangePickerComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('input', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('input', slots);
|
||||
}
|
||||
|
||||
public focusIn(): void {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class PresetsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class PresetsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-presets';
|
||||
}
|
||||
}
|
||||
export const PresetsPlugin = {
|
||||
name: 'e-presets',
|
||||
|
|
@ -26,11 +39,14 @@ export const PresetsPlugin = {
|
|||
* </ejs-daterangepicker>
|
||||
* ```
|
||||
*/
|
||||
@EJComponentDecorator({})
|
||||
export class PresetDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class PresetDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-preset';
|
||||
}
|
||||
}
|
||||
export const PresetPlugin = {
|
||||
name: 'e-preset',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { DateTimePicker } from '@syncfusion/ej2-calendars';
|
||||
|
||||
|
||||
export const properties: string[] = ['allowEdit', 'calendarMode', 'cssClass', 'dayHeaderFormat', 'depth', 'enablePersistence', 'enableRtl', 'enabled', 'firstDayOfWeek', 'floatLabelType', 'format', 'htmlAttributes', 'isMultiSelection', 'keyConfigs', 'locale', 'max', 'min', 'openOnFocus', 'placeholder', 'readonly', 'scrollTo', 'serverTimezoneOffset', 'showClearButton', 'showTodayButton', 'start', 'step', 'strictMode', 'timeFormat', 'value', 'values', 'weekNumber', 'weekRule', 'width', 'zIndex', 'blur', 'change', 'cleared', 'close', 'created', 'destroyed', 'focus', 'navigated', 'open', 'renderDayCell'];
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['allowEdit', 'calendarMode', 'cssClass', 'dayHeaderFormat', 'depth', 'enableMask', 'enablePersistence', 'enableRtl', 'enabled', 'firstDayOfWeek', 'floatLabelType', 'format', 'htmlAttributes', 'isMultiSelection', 'keyConfigs', 'locale', 'maskPlaceholder', 'max', 'min', 'openOnFocus', 'placeholder', 'readonly', 'scrollTo', 'serverTimezoneOffset', 'showClearButton', 'showTodayButton', 'start', 'step', 'strictMode', 'timeFormat', 'value', 'values', 'weekNumber', 'weekRule', 'width', 'zIndex', 'blur', 'change', 'cleared', 'close', 'created', 'destroyed', 'focus', 'navigated', 'open', 'renderDayCell'];
|
||||
export const modelProps: string[] = ['value'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents the Essential JS 2 VueJS DateTimePicker Component.
|
||||
* ```html
|
||||
|
|
@ -18,7 +37,14 @@ export const modelProps: string[] = ['value'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class DateTimePickerComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -28,17 +54,23 @@ export class DateTimePickerComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new DateTimePicker({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -46,35 +78,57 @@ export class DateTimePickerComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('input', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('input', slots);
|
||||
}
|
||||
|
||||
public addDate(dates: Object | Object[]): void {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { TimePicker } from '@syncfusion/ej2-calendars';
|
||||
|
||||
|
||||
export const properties: string[] = ['allowEdit', 'cssClass', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'format', 'htmlAttributes', 'keyConfigs', 'locale', 'max', 'min', 'openOnFocus', 'placeholder', 'readonly', 'scrollTo', 'showClearButton', 'step', 'strictMode', 'value', 'width', 'zIndex', 'blur', 'change', 'cleared', 'close', 'created', 'destroyed', 'focus', 'itemRender', 'open'];
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['allowEdit', 'cssClass', 'enableMask', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'format', 'htmlAttributes', 'keyConfigs', 'locale', 'maskPlaceholder', 'max', 'min', 'openOnFocus', 'placeholder', 'readonly', 'scrollTo', 'showClearButton', 'step', 'strictMode', 'value', 'width', 'zIndex', 'blur', 'change', 'cleared', 'close', 'created', 'destroyed', 'focus', 'itemRender', 'open'];
|
||||
export const modelProps: string[] = ['value'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents the Essential JS 2 VueJS TimePicker Component.
|
||||
* ```html
|
||||
|
|
@ -18,27 +37,40 @@ export const modelProps: string[] = ['value'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class TimePickerComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
public propKeys: string[] = properties;
|
||||
public models: string[] = modelProps;
|
||||
public hasChildDirective: boolean = false;
|
||||
protected hasInjectedModules: boolean = false;
|
||||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new TimePicker({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -46,35 +78,57 @@ export class TimePickerComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('input', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('input', slots);
|
||||
}
|
||||
|
||||
public focusIn(): void {
|
||||
|
|
@ -89,6 +143,10 @@ export class TimePickerComponent extends ComponentBase {
|
|||
return this.ej2Instances.hide();
|
||||
}
|
||||
|
||||
public requiredModules(): Object[] {
|
||||
return this.ej2Instances.requiredModules();
|
||||
}
|
||||
|
||||
public show(event?: Object | Object | Object): void {
|
||||
return this.ej2Instances.show(event);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-calendars/styles/calendar/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-calendars/styles/calendar/tailwind.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-calendars/styles/datepicker/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-calendars/styles/datepicker/tailwind.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-calendars/styles/daterangepicker/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-calendars/styles/daterangepicker/tailwind.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-calendars/styles/datetimepicker/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-calendars/styles/datetimepicker/tailwind.scss';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import 'calendar/tailwind-dark.scss';
|
||||
@import 'timepicker/tailwind-dark.scss';
|
||||
@import 'datepicker/tailwind-dark.scss';
|
||||
@import 'daterangepicker/tailwind-dark.scss';
|
||||
@import 'datetimepicker/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import 'calendar/tailwind.scss';
|
||||
@import 'timepicker/tailwind.scss';
|
||||
@import 'datepicker/tailwind.scss';
|
||||
@import 'daterangepicker/tailwind.scss';
|
||||
@import 'datetimepicker/tailwind.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-calendars/styles/timepicker/tailwind-dark.scss';
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'ej2-calendars/styles/timepicker/tailwind.scss';
|
||||
|
|
@ -2,6 +2,24 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 19.2.44 (2021-06-30)
|
||||
|
||||
### Chart
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#331558` - Zooming working fine when the pan element not shown in toolbar.
|
||||
|
||||
#### New Features
|
||||
|
||||
- The "Spline Range Area" interactive chart series is now available.
|
||||
|
||||
### Stock Chart
|
||||
|
||||
#### New Features
|
||||
|
||||
- The legend feature has been added to the stock chart.
|
||||
|
||||
## 19.1.69 (2021-06-15)
|
||||
|
||||
### Chart
|
||||
|
|
@ -24,6 +42,10 @@
|
|||
|
||||
### Chart
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
- `#328528` - Histogram is rendering properly when the `binInterval` value is 0.
|
||||
|
||||
### Stock Chart
|
||||
|
||||
#### Bug Fixes
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
# ej2-vue-charts
|
||||
The [Vue Charts](https://www.syncfusion.com/vue-ui-components/charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm) control is used to visualize the data with user interactivity and provides customizing options to configure the data visually. It can bind data from datasource such as array of JSON objects , `OData web services` or
|
||||
[DataManager](https://ej2.syncfusion.com/vue/documentation/data/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm). All chart elements are rendered using Scalable Vector Graphics (SVG).
|
||||
The Chart control is used to visualize the data with user interactivity and provides customizing options to configure the data visually. It can bind data from datasource such as array of JSON objects , `OData web services` or
|
||||
[DataManager](http://ej2.syncfusion.com/vue/documentation/data/?utm_source=npm&utm_campaign=chart). All chart elements are rendered using Scalable Vector Graphics (SVG).
|
||||
|
||||
|
||||
|
||||
> Chart is part of Syncfusion Essential JS 2 commercial program. License is available in two models Community and Paid. Please refer the license file for more information. License can be obtained by registering at [https://www.syncfusion.com/downloads/essential-js2](https://www.syncfusion.com/downloads/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
> Chart is part of Syncfusion Essential JS 2 commercial program. License is available in two models Community and Paid. Please refer the license file for more information. License can be obtained by registering at [https://www.syncfusion.com/downloads/essential-js2](https://www.syncfusion.com/downloads/essential-js2?utm_source=npm&utm_campaign=chart)
|
||||
|
||||
|
||||
## Setup
|
||||
To install this package and its dependent packages, use the following command
|
||||
|
|
@ -16,82 +17,86 @@ npm install @syncfusion/ej2-vue-charts
|
|||
## Components included
|
||||
|
||||
Following list of components are available in the package
|
||||
* [Vue Charts](https://www.syncfusion.com/vue-ui-components/charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm) - Feature-rich chart control with built-in support for over 30+ chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
|
||||
* [Getting Started](https://ej2.syncfusion.com/vue/documentation/chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
* [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/line.html)
|
||||
* [Vue Accumulation Chart](https://www.syncfusion.com/vue-ui-components/charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm) - Built-in support for Pie, Doughnut, Pyramid and funnel series type, to show the proportions and percentages between the categories.
|
||||
* [Getting Started](https://ej2.syncfusion.com/vue/documentation/accumulation-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
* [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/default-pie.html)
|
||||
* [Vue Range Navigator](https://www.syncfusion.com/vue-ui-components/range-selector?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm) - Interface for selecting a small range from a large collection. It is commonly used in financial dashboards to filter a date range for data that needs to be visualized.
|
||||
* [Getting Started](https://ej2.syncfusion.com/vue/documentation/range-navigator/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
* [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/range-navigator/default.html)
|
||||
* Chart - Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
|
||||
* [Getting Started](https://ej2.syncfusion.com/vue/documentation/chart/getting-started.html)
|
||||
* [View Online Demos](https://ej2.syncfusion.com/angular/demos/#/material/chart/line)
|
||||
* [Product Page](https://www.syncfusion.com/vue-ui-components/charts/)
|
||||
* Accumulation Chart - Built-in support for Pie, Doughnut, Pyramid and funnel series type, to show the proportions and percentages between the categories.
|
||||
* [Getting Started](https://ej2.syncfusion.com/vue/documentation/accumulation-chart/getting-started.html)
|
||||
* [View Online Demos](https://ej2.syncfusion.com/vue/demos/#/material/chart/pie.html)
|
||||
* [Product Page](https://www.syncfusion.com/vue-ui-components/charts/)
|
||||
* Range Navigator - Interface for selecting a small range from a large collection. It is commonly used in financial dashboards to filter a date range for data that needs to be visualized.
|
||||
* [Getting Started](https://ej2.syncfusion.com/vue/documentation/rangenavigator/getting-started.html)
|
||||
* [View Online Demos](https://ej2.syncfusion.com/vue/demos/#/material/rangenavigator/default.html)
|
||||
* [Product Page](https://www.syncfusion.com/vue-ui-components/range-selector/)
|
||||
|
||||
## Supported frameworks
|
||||
|
||||
`Chart` components are available in following list of
|
||||
|
||||
1. [Angular](https://www.syncfusion.com/angular-ui-components/angular-charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
2. [React](https://www.syncfusion.com/react-ui-components/react-charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
3. [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
4. [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
5. [JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls/js-charts?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
1. [Angular](https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/charts?utm_source=npm&utm_campaign=chart)
|
||||
2. [React](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/charts?utm_source=npm&utm_campaign=chart)
|
||||
3. [ASP.NET Core](https://aspdotnetcore.syncfusion.com/Chart/Line#/material)
|
||||
4. [ASP.NET MVC](https://aspnetmvc.syncfusion.com/Chart/Line#/material)
|
||||
5. [JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls/charts)
|
||||
|
||||
## Showcase samples
|
||||
|
||||
* Asset Management ([Live Demo](https://ej2.syncfusion.com/showcase/vue/assetmanagement/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/))
|
||||
* Asset Management ([Live Demo](https://ej2.syncfusion.com/showcase/vue/assetmanagement/#/?utm_source=npm&utm_campaign=chart))
|
||||
|
||||
## Key Features
|
||||
|
||||
### Chart
|
||||
* **Chart Types** - Supports 30+ interactive chart types starting from line to financial chart.
|
||||
* [**Data sources**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/local-data.html) - Bind the Chart component with an array of JSON objects or DataManager.
|
||||
* **Chart Types** - Supports 25 interactive chart types starting from line to financial chart.
|
||||
* [**Data sources**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/local-data.html) - Bind the Chart component with an array of JSON objects or DataManager.
|
||||
* **Axis Types** - Supports multiple axes, and able to plot data with different data types such as numbers, datetime, logarithmic and string.
|
||||
* [**Multiple Pane**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/candle.html) - Provides the options to split the chart area into multiple pane.
|
||||
* [**Multilevel Labels**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/multi-levellabel.html) - Organizes or groups data points in the chart based on different categories.
|
||||
* [**Axis Crossing**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/axes-crossing.html) - Provides the option to moves the origin of axis to any point within the chart area.
|
||||
* [**Smart Labels**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/smartAxis-label.html) - Avoids overlapping of axis labels by trimming, wrapping, rotating, hiding, or placing them on multiple rows.
|
||||
* [**Stripline**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/stripline.html) - Provides options to highlight and annotate any region in chart.
|
||||
* [**DataLabel**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/data-label.html) - Datalabel annotates data points with label to improve the readability of data.
|
||||
* [**Technical Indicators**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/adindicator.html) - Incidators allows to analyze the past and predict the future market trends based on historic price, volume, or open interest.
|
||||
* [**Trendlines**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/trendlines.html) - Predicts the future trends with predetermined data for any measurements.
|
||||
* [**Error Bars**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/error-bar.html) - Provides options to handle any error or uncertainity in the measurements.
|
||||
* [**Empty Points**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/empty-point.html) - Provides options to handle missed data for the series elegantly with empty points.
|
||||
* [**Annotation**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/annotation.html) - Provides support to mark any specific area of interest by adding custom element.
|
||||
* [**Vertical Chart**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/vertical-chart.html) - Provides options to invert the chart.
|
||||
* [**Zooming**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/zooming.html) - Provides options to visualize the data points under any region using rectangular selection, pinch, or mouse wheel zooming.
|
||||
* [**Crosshair & Trackball**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/cross-hair.html) - Provides options to track data points closer to the mouse position or touch action.
|
||||
* [**Selection**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/range-selection.html) - Allows you to select any data point or subset of points using selection feature.
|
||||
* [**Export**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/export.html) - Provides the options to Export the chart to PDF, SVG and CSV formats.
|
||||
* [**RTL support**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/inversed.html) - Provides a full-fledged right-to-left mode which aligns axis in the chart control from right to left.
|
||||
* [**Multiple Pane**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/candle.html) - Provides the options to split the chart area into multiple pane.
|
||||
* [**Multilevel Labels**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/multi-levellabel.html) - Organizes or groups data points in the chart based on different categories.
|
||||
* [**Axis Crossing**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/axes-crossing.html) - Provides the option to moves the origin of axis to any point within the chart area.
|
||||
* [**Smart Labels**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/smartAxis-label.html) - Avoids overlapping of axis labels by trimming, wrapping, rotating, hiding, or placing them on multiple rows.
|
||||
* [**Stripline**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/stripline.html) - Provides options to highlight and annotate any region in chart.
|
||||
* [**DataLabel**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/data-label.html) - Datalabel annotates data points with label to improve the readability of data.
|
||||
* [**Technical Indicators**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/adindicator.html) - Incidators allows to analyze the past and predict the future market trends based on historic price, volume, or open interest.
|
||||
* [**Trendlines**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/trendlines.html) - Predicts the future trends with predetermined data for any measurements.
|
||||
* [**Error Bars**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/error-bar.html) - Provides options to handle any error or uncertainity in the measurements.
|
||||
* [**Empty Points**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/empty-point.html) - Provides options to handle missed data for the series elegantly with empty points.
|
||||
* [**Annotation**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/annotation.html) - Provides support to mark any specific area of interest by adding custom element.
|
||||
* [**Vertical Chart**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/vertical-chart.html) - Provides options to invert the chart.
|
||||
* [**Zooming**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/zooming.html) - Provides options to visualize the data points under any region using rectangular selection, pinch, or mouse wheel zooming.
|
||||
* [**Crosshair & Trackball**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/cross-hair.html) - Provides options to track data points closer to the mouse position or touch action.
|
||||
* [**Selection**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/range-selection.html) - Allows you to select any data point or subset of points using selection feature.
|
||||
* [**Export**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/export.html) - Provides the options to Export the chart to PDF, SVG and CSV formats.
|
||||
* [**RTL support**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/inversed.html) - Provides a full-fledged right-to-left mode which aligns axis in the chart control from right to left.
|
||||
|
||||
### Accumulation Chart
|
||||
* **Chart Types** - Supports Pie, Doughnut, Pyramid and Funnel.
|
||||
* [**Smart Labels**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/smart-labels.html) - Supports arrangement of data labels smartly to avoid overlapping when the data point value falls in close range.
|
||||
* [**Grouping**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/grouping.html) - Supports grouping based on value and point count.
|
||||
* [**Semi-Pie**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/semi-pie.html) - Provides options to customize the start and end angle of the pie chart.
|
||||
* [**Legend**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/default-doughnut.html) - Provides options to display additional information about the points with the help of legend.
|
||||
* [**Tooltip**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/doughnut.html) - Supports interactive features like tooltip, selection and explode.
|
||||
* [**Empty Points**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/chart/pie-emptyPoint.html) - Provides options to handle missed data for the series elegantly with empty points.
|
||||
* [**Smart Labels**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/smart-labels.html) - Supports arrangement of data labels smartly to avoid overlapping when the data point value falls in close range.
|
||||
* [**Grouping**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/grouping.html) - Supports grouping based on value and point count.
|
||||
* [**Semi-Pie**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/semi-pie.html) - Provides options to customize the start and end angle of the pie chart.
|
||||
* [**Legend**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/default-doughnut.html) - Provides options to display additional information about the points with the help of legend.
|
||||
* [**Tooltip**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/doughnut.html) - Supports interactive features like tooltip, selection and explode.
|
||||
* [**Empty Points**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/chart/pie-emptyPoint.html) - Provides options to handle missed data for the series elegantly with empty points.
|
||||
|
||||
### Range Navigator
|
||||
* **Data sources** - Supports local binding and remote data source.
|
||||
* [**Tooltip**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/rangenavigator/default.html) - Supports interactive features such as tooltip and animation.
|
||||
* [**Lightweight**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/rangenavigator/light-weight.html) - Supports light-weight Range navigator to load in mobile device.
|
||||
* [**Period Selector**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm#/material/rangenavigator/period-default.html) - Provides options to select the data over the custom period.
|
||||
* [**Tooltip**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/rangenavigator/default.html) - Supports interactive features such as tooltip and animation.
|
||||
* [**Lightweight**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/rangenavigator/light-weight.html) - Supports light-weight Range navigator to load in mobile device.
|
||||
* [**Period Selector**](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=chart#/material/rangenavigator/period-default.html) - Provides options to select the data over the custom period.
|
||||
* **Axis Types** - Supports multiple axis and series types to plot the data.
|
||||
|
||||
## Support
|
||||
Product support is available for through following mediums.
|
||||
|
||||
* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm) support system or [Community forum](https://www.syncfusion.com/forums?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm).
|
||||
* New [GitHub issue](https://github.com/syncfusion/ej2-vue-ui-components/issues/new?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm).
|
||||
* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=chart) support system or [Community forum](https://www.syncfusion.com/forums?utm_source=npm&utm_campaign=chart).
|
||||
* New [GitHub issue](https://github.com/syncfusion/ej2-vue-ui-components/issues/new).
|
||||
* Ask your query in Stack Overflow with tag `syncfusion`, `ej2`.
|
||||
|
||||
## License
|
||||
|
||||
Check the license detail [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
Check the license detail [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/license)
|
||||
|
||||
## Changelog
|
||||
|
||||
Check the changelog [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/charts/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=vue-chart-npm)
|
||||
Check the changelog [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/charts/CHANGELOG.md)
|
||||
|
||||
© Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-vue-charts",
|
||||
"version": "19.1.67",
|
||||
"version": "19.1.65",
|
||||
"description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. for Vue",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -1,14 +1,33 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { AccumulationChart } from '@syncfusion/ej2-charts';
|
||||
import { AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationSeriesCollectionPlugin, AccumulationSeriesPlugin } from './series.directive'
|
||||
import { AccumulationAnnotationsDirective, AccumulationAnnotationDirective, AccumulationAnnotationsPlugin, AccumulationAnnotationPlugin } from './annotations.directive'
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['allowExport', 'annotations', 'background', 'backgroundImage', 'border', 'center', 'currencyCode', 'dataSource', 'enableAnimation', 'enableBorderOnMouseMove', 'enableExport', 'enablePersistence', 'enableRtl', 'enableSmartLabels', 'height', 'highLightMode', 'highlightPattern', 'isMultiSelect', 'legendSettings', 'locale', 'margin', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'theme', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width', 'afterExport', 'animationComplete', 'annotationRender', 'beforePrint', 'beforeResize', 'chartMouseClick', 'chartMouseDown', 'chartMouseLeave', 'chartMouseMove', 'chartMouseUp', 'legendRender', 'load', 'loaded', 'pointClick', 'pointMove', 'pointRender', 'resized', 'seriesRender', 'textRender', 'tooltipRender'];
|
||||
export const modelProps: string[] = ['dataSource'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents Vuejs AccumulationChart Component
|
||||
* ```vue
|
||||
|
|
@ -20,7 +39,14 @@ export const modelProps: string[] = ['dataSource'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class AccumulationChartComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -30,17 +56,23 @@ export class AccumulationChartComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {"e-accumulation-series-collection":"e-accumulation-series","e-accumulation-annotations":"e-accumulation-annotation"};
|
||||
public tagNameMapper: Object = {"e-accumulation-series-collection":"e-series","e-accumulation-annotations":"e-annotations"};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new AccumulationChart({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -48,35 +80,57 @@ export class AccumulationChartComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public export(type: Object, fileName: string): void {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class AccumulationAnnotationsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class AccumulationAnnotationsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-accumulation-annotations';
|
||||
}
|
||||
}
|
||||
export const AccumulationAnnotationsPlugin = {
|
||||
name: 'e-accumulation-annotations',
|
||||
|
|
@ -15,11 +28,14 @@ export const AccumulationAnnotationsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class AccumulationAnnotationDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class AccumulationAnnotationDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-accumulation-annotation';
|
||||
}
|
||||
}
|
||||
export const AccumulationAnnotationPlugin = {
|
||||
name: 'e-accumulation-annotation',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class AccumulationSeriesCollectionDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class AccumulationSeriesCollectionDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-accumulation-series-collection';
|
||||
}
|
||||
}
|
||||
export const AccumulationSeriesCollectionPlugin = {
|
||||
name: 'e-accumulation-series-collection',
|
||||
|
|
@ -15,11 +28,14 @@ export const AccumulationSeriesCollectionPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class AccumulationSeriesDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class AccumulationSeriesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-accumulation-series';
|
||||
}
|
||||
}
|
||||
export const AccumulationSeriesPlugin = {
|
||||
name: 'e-accumulation-series',
|
||||
|
|
|
|||
|
|
@ -1,13 +1,32 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { BulletChart } from '@syncfusion/ej2-charts';
|
||||
import { BulletRangeCollectionDirective, BulletRangeDirective, BulletRangeCollectionPlugin, BulletRangePlugin } from './ranges.directive'
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['animation', 'border', 'categoryField', 'categoryLabelStyle', 'dataLabel', 'dataSource', 'enableGroupSeparator', 'enablePersistence', 'enableRtl', 'height', 'interval', 'labelFormat', 'labelPosition', 'labelStyle', 'legendSettings', 'locale', 'majorTickLines', 'margin', 'maximum', 'minimum', 'minorTickLines', 'minorTicksPerInterval', 'opposedPosition', 'orientation', 'query', 'ranges', 'subtitle', 'subtitleStyle', 'tabIndex', 'targetColor', 'targetField', 'targetTypes', 'targetWidth', 'theme', 'tickPosition', 'title', 'titlePosition', 'titleStyle', 'tooltip', 'type', 'valueBorder', 'valueField', 'valueFill', 'valueHeight', 'width', 'beforePrint', 'bulletChartMouseClick', 'legendRender', 'load', 'loaded', 'tooltipRender'];
|
||||
export const modelProps: string[] = ['dataSource'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents Vuejs BulletChart Component
|
||||
* ```vue
|
||||
|
|
@ -19,7 +38,14 @@ export const modelProps: string[] = ['dataSource'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class BulletChartComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -29,17 +55,23 @@ export class BulletChartComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {"e-bullet-range-collection":"e-bullet-range"};
|
||||
public tagNameMapper: Object = {"e-bullet-range-collection":"e-ranges"};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new BulletChart({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -47,35 +79,57 @@ export class BulletChartComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public createSvg(chart: Object): void {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class BulletRangeCollectionDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class BulletRangeCollectionDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-bullet-range-collection';
|
||||
}
|
||||
}
|
||||
export const BulletRangeCollectionPlugin = {
|
||||
name: 'e-bullet-range-collection',
|
||||
|
|
@ -15,11 +28,14 @@ export const BulletRangeCollectionPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class BulletRangeDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class BulletRangeDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-bullet-range';
|
||||
}
|
||||
}
|
||||
export const BulletRangePlugin = {
|
||||
name: 'e-bullet-range',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class AnnotationsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class AnnotationsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-annotations';
|
||||
}
|
||||
}
|
||||
export const AnnotationsPlugin = {
|
||||
name: 'e-annotations',
|
||||
|
|
@ -26,11 +39,14 @@ export const AnnotationsPlugin = {
|
|||
* </ejs-chart>
|
||||
* ```
|
||||
*/
|
||||
@EJComponentDecorator({})
|
||||
export class AnnotationDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class AnnotationDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-annotation';
|
||||
}
|
||||
}
|
||||
export const AnnotationPlugin = {
|
||||
name: 'e-annotation',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class AxesDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class AxesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-axes';
|
||||
}
|
||||
}
|
||||
export const AxesPlugin = {
|
||||
name: 'e-axes',
|
||||
|
|
@ -15,11 +28,14 @@ export const AxesPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class AxisDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class AxisDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-axis';
|
||||
}
|
||||
}
|
||||
export const AxisPlugin = {
|
||||
name: 'e-axis',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class CategoriesDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class CategoriesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-categories';
|
||||
}
|
||||
}
|
||||
export const CategoriesPlugin = {
|
||||
name: 'e-categories',
|
||||
|
|
@ -15,11 +28,14 @@ export const CategoriesPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class CategoryDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class CategoryDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-category';
|
||||
}
|
||||
}
|
||||
export const CategoryPlugin = {
|
||||
name: 'e-category',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { Chart } from '@syncfusion/ej2-charts';
|
||||
import { TrendlinesDirective, TrendlineDirective, TrendlinesPlugin, TrendlinePlugin } from './trendlines.directive'
|
||||
import { SegmentsDirective, SegmentDirective, SegmentsPlugin, SegmentPlugin } from './segments.directive'
|
||||
|
|
@ -17,9 +19,26 @@ import { SelectedDataIndexesDirective, SelectedDataIndexDirective, SelectedDataI
|
|||
import { IndicatorsDirective, IndicatorDirective, IndicatorsPlugin, IndicatorPlugin } from './indicators.directive'
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['allowExport', 'allowMultiSelection', 'annotations', 'axes', 'background', 'backgroundImage', 'border', 'chartArea', 'columns', 'crosshair', 'currencyCode', 'dataSource', 'description', 'enableAnimation', 'enableAutoIntervalOnBothAxis', 'enableCanvas', 'enableExport', 'enablePersistence', 'enableRtl', 'enableSideBySidePlacement', 'height', 'highlightMode', 'highlightPattern', 'indicators', 'isMultiSelect', 'isTransposed', 'legendSettings', 'locale', 'margin', 'palettes', 'primaryXAxis', 'primaryYAxis', 'rangeColorSettings', 'rows', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'tabIndex', 'theme', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width', 'zoomSettings', 'afterExport', 'animationComplete', 'annotationRender', 'axisLabelClick', 'axisLabelRender', 'axisMultiLabelRender', 'axisRangeCalculated', 'beforeExport', 'beforePrint', 'beforeResize', 'chartMouseClick', 'chartMouseDown', 'chartMouseLeave', 'chartMouseMove', 'chartMouseUp', 'drag', 'dragComplete', 'dragEnd', 'dragStart', 'legendClick', 'legendRender', 'load', 'loaded', 'multiLevelLabelClick', 'onZooming', 'pointClick', 'pointDoubleClick', 'pointMove', 'pointRender', 'resized', 'scrollChanged', 'scrollEnd', 'scrollStart', 'selectionComplete', 'seriesRender', 'sharedTooltipRender', 'textRender', 'tooltipRender', 'zoomComplete'];
|
||||
export const modelProps: string[] = ['dataSource'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents Vuejs chart Component
|
||||
* ```vue
|
||||
|
|
@ -31,7 +50,14 @@ export const modelProps: string[] = ['dataSource'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class ChartComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -41,17 +67,23 @@ export class ChartComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {"e-series-collection":{"e-series":{"e-trendlines":"e-trendline","e-segments":"e-segment"}},"e-axes":{"e-axis":{"e-striplines":"e-stripline","e-multilevellabels":{"e-multilevellabel":{"e-categories":"e-category"}}}},"e-rows":"e-row","e-columns":"e-column","e-rangecolorsettings":"e-rangecolorsetting","e-annotations":"e-annotation","e-selecteddataindexes":"e-selecteddataindex","e-indicators":"e-indicator"};
|
||||
public tagNameMapper: Object = {"e-series-collection":"e-series","e-striplines":"e-stripLines","e-multilevellabels":"e-multiLevelLabels","e-rangecolorsettings":"e-rangeColorSettings","e-selecteddataindexes":"e-selectedDataIndexes"};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new Chart({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -59,35 +91,57 @@ export class ChartComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public addAxes(axisCollection: Object[]): void {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class ColumnsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class ColumnsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-columns';
|
||||
}
|
||||
}
|
||||
export const ColumnsPlugin = {
|
||||
name: 'e-columns',
|
||||
|
|
@ -15,11 +28,14 @@ export const ColumnsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class ColumnDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class ColumnDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-column';
|
||||
}
|
||||
}
|
||||
export const ColumnPlugin = {
|
||||
name: 'e-column',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class IndicatorsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class IndicatorsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-indicators';
|
||||
}
|
||||
}
|
||||
export const IndicatorsPlugin = {
|
||||
name: 'e-indicators',
|
||||
|
|
@ -15,11 +28,14 @@ export const IndicatorsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class IndicatorDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class IndicatorDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-indicator';
|
||||
}
|
||||
}
|
||||
export const IndicatorPlugin = {
|
||||
name: 'e-indicator',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class MultiLevelLabelsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class MultiLevelLabelsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-multilevellabels';
|
||||
}
|
||||
}
|
||||
export const MultiLevelLabelsPlugin = {
|
||||
name: 'e-multilevellabels',
|
||||
|
|
@ -15,11 +28,14 @@ export const MultiLevelLabelsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class MultiLevelLabelDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class MultiLevelLabelDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-multilevellabel';
|
||||
}
|
||||
}
|
||||
export const MultiLevelLabelPlugin = {
|
||||
name: 'e-multilevellabel',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class RangeColorSettingsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class RangeColorSettingsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-rangecolorsettings';
|
||||
}
|
||||
}
|
||||
export const RangeColorSettingsPlugin = {
|
||||
name: 'e-rangecolorsettings',
|
||||
|
|
@ -15,11 +28,14 @@ export const RangeColorSettingsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class RangeColorSettingDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class RangeColorSettingDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-rangecolorsetting';
|
||||
}
|
||||
}
|
||||
export const RangeColorSettingPlugin = {
|
||||
name: 'e-rangecolorsetting',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class RowsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class RowsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-rows';
|
||||
}
|
||||
}
|
||||
export const RowsPlugin = {
|
||||
name: 'e-rows',
|
||||
|
|
@ -15,11 +28,14 @@ export const RowsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class RowDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class RowDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-row';
|
||||
}
|
||||
}
|
||||
export const RowPlugin = {
|
||||
name: 'e-row',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class SegmentsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class SegmentsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-segments';
|
||||
}
|
||||
}
|
||||
export const SegmentsPlugin = {
|
||||
name: 'e-segments',
|
||||
|
|
@ -15,11 +28,14 @@ export const SegmentsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class SegmentDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class SegmentDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-segment';
|
||||
}
|
||||
}
|
||||
export const SegmentPlugin = {
|
||||
name: 'e-segment',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class SelectedDataIndexesDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class SelectedDataIndexesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-selecteddataindexes';
|
||||
}
|
||||
}
|
||||
export const SelectedDataIndexesPlugin = {
|
||||
name: 'e-selecteddataindexes',
|
||||
|
|
@ -15,11 +28,14 @@ export const SelectedDataIndexesPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class SelectedDataIndexDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class SelectedDataIndexDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-selecteddataindex';
|
||||
}
|
||||
}
|
||||
export const SelectedDataIndexPlugin = {
|
||||
name: 'e-selecteddataindex',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class SeriesCollectionDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class SeriesCollectionDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-series-collection';
|
||||
}
|
||||
}
|
||||
export const SeriesCollectionPlugin = {
|
||||
name: 'e-series-collection',
|
||||
|
|
@ -15,11 +28,14 @@ export const SeriesCollectionPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class SeriesDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class SeriesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-series';
|
||||
}
|
||||
}
|
||||
export const SeriesPlugin = {
|
||||
name: 'e-series',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StripLinesDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StripLinesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-striplines';
|
||||
}
|
||||
}
|
||||
export const StripLinesPlugin = {
|
||||
name: 'e-striplines',
|
||||
|
|
@ -15,11 +28,14 @@ export const StripLinesPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StripLineDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StripLineDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stripline';
|
||||
}
|
||||
}
|
||||
export const StripLinePlugin = {
|
||||
name: 'e-stripline',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class TrendlinesDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class TrendlinesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-trendlines';
|
||||
}
|
||||
}
|
||||
export const TrendlinesPlugin = {
|
||||
name: 'e-trendlines',
|
||||
|
|
@ -15,11 +28,14 @@ export const TrendlinesPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class TrendlineDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class TrendlineDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-trendline';
|
||||
}
|
||||
}
|
||||
export const TrendlinePlugin = {
|
||||
name: 'e-trendline',
|
||||
|
|
|
|||
|
|
@ -1,13 +1,32 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { RangeNavigator } from '@syncfusion/ej2-charts';
|
||||
import { RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangenavigatorSeriesCollectionPlugin, RangenavigatorSeriesPlugin } from './series.directive'
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['allowIntervalData', 'allowSnapping', 'animationDuration', 'background', 'dataSource', 'disableRangeSelector', 'enableDeferredUpdate', 'enableGrouping', 'enablePersistence', 'enableRtl', 'groupBy', 'height', 'interval', 'intervalType', 'labelFormat', 'labelIntersectAction', 'labelPosition', 'labelStyle', 'locale', 'logBase', 'majorGridLines', 'majorTickLines', 'margin', 'maximum', 'minimum', 'navigatorBorder', 'navigatorStyleSettings', 'periodSelectorSettings', 'query', 'secondaryLabelAlignment', 'series', 'skeleton', 'skeletonType', 'theme', 'tickPosition', 'tooltip', 'useGroupingSeparator', 'value', 'valueType', 'width', 'xName', 'yName', 'beforePrint', 'changed', 'labelRender', 'load', 'loaded', 'resized', 'selectorRender', 'tooltipRender'];
|
||||
export const modelProps: string[] = ['dataSource'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents Vuejs RangeNavigator Component
|
||||
* ```vue
|
||||
|
|
@ -19,7 +38,14 @@ export const modelProps: string[] = ['dataSource'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class RangeNavigatorComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -29,17 +55,23 @@ export class RangeNavigatorComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {"e-rangenavigator-series-collection":"e-rangenavigator-series"};
|
||||
public tagNameMapper: Object = {"e-rangenavigator-series-collection":"e-series"};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new RangeNavigator({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -47,35 +79,57 @@ export class RangeNavigatorComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public createSecondaryElement(): void {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class RangenavigatorSeriesCollectionDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class RangenavigatorSeriesCollectionDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-rangenavigator-series-collection';
|
||||
}
|
||||
}
|
||||
export const RangenavigatorSeriesCollectionPlugin = {
|
||||
name: 'e-rangenavigator-series-collection',
|
||||
|
|
@ -15,11 +28,14 @@ export const RangenavigatorSeriesCollectionPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class RangenavigatorSeriesDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class RangenavigatorSeriesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-rangenavigator-series';
|
||||
}
|
||||
}
|
||||
export const RangenavigatorSeriesPlugin = {
|
||||
name: 'e-rangenavigator-series',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class SmithchartSeriesCollectionDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class SmithchartSeriesCollectionDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-seriesCollection';
|
||||
}
|
||||
}
|
||||
export const SmithchartSeriesCollectionPlugin = {
|
||||
name: 'e-seriesCollection',
|
||||
|
|
@ -15,11 +28,14 @@ export const SmithchartSeriesCollectionPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class SmithchartSeriesDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class SmithchartSeriesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-series';
|
||||
}
|
||||
}
|
||||
export const SmithchartSeriesPlugin = {
|
||||
name: 'e-series',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { Smithchart } from '@syncfusion/ej2-charts';
|
||||
import { SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, SmithchartSeriesCollectionPlugin, SmithchartSeriesPlugin } from './series.directive'
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['background', 'border', 'elementSpacing', 'enablePersistence', 'enableRtl', 'font', 'height', 'horizontalAxis', 'legendSettings', 'locale', 'margin', 'radialAxis', 'radius', 'renderType', 'series', 'theme', 'title', 'width', 'animationComplete', 'axisLabelRender', 'beforePrint', 'legendRender', 'load', 'loaded', 'seriesRender', 'subtitleRender', 'textRender', 'titleRender', 'tooltipRender'];
|
||||
export const modelProps: string[] = [];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents Vuejs Smithchart Component
|
||||
* ```vue
|
||||
|
|
@ -15,7 +34,14 @@ export const modelProps: string[] = [];
|
|||
*/
|
||||
@EJComponentDecorator({
|
||||
props: properties
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class SmithchartComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -25,15 +51,21 @@ export class SmithchartComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {"e-seriesCollection":"e-series"};
|
||||
public tagNameMapper: Object = {"e-seriesCollection":"e-series"};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new Smithchart({});
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -41,7 +73,11 @@ export class SmithchartComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -49,7 +85,12 @@ export class SmithchartComponent extends ComponentBase {
|
|||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public export(type: Object, fileName: string, orientation?: Object): void {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class RangeBandSettingsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class RangeBandSettingsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-rangeBandSettings';
|
||||
}
|
||||
}
|
||||
export const RangeBandSettingsPlugin = {
|
||||
name: 'e-rangeBandSettings',
|
||||
|
|
@ -15,11 +28,14 @@ export const RangeBandSettingsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class RangeBandSettingDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class RangeBandSettingDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-rangeBandSetting';
|
||||
}
|
||||
}
|
||||
export const RangeBandSettingPlugin = {
|
||||
name: 'e-rangeBandSetting',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { Sparkline } from '@syncfusion/ej2-charts';
|
||||
import { RangeBandSettingsDirective, RangeBandSettingDirective, RangeBandSettingsPlugin, RangeBandSettingPlugin } from './rangebandsettings.directive'
|
||||
|
||||
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['axisSettings', 'border', 'containerArea', 'dataLabelSettings', 'dataSource', 'enablePersistence', 'enableRtl', 'endPointColor', 'fill', 'format', 'height', 'highPointColor', 'lineWidth', 'locale', 'lowPointColor', 'markerSettings', 'negativePointColor', 'opacity', 'padding', 'palette', 'query', 'rangeBandSettings', 'rangePadding', 'startPointColor', 'theme', 'tiePointColor', 'tooltipSettings', 'type', 'useGroupingSeparator', 'valueType', 'width', 'xName', 'yName', 'axisRendering', 'dataLabelRendering', 'load', 'loaded', 'markerRendering', 'pointRegionMouseClick', 'pointRegionMouseMove', 'pointRendering', 'resize', 'seriesRendering', 'sparklineMouseClick', 'sparklineMouseMove', 'tooltipInitialize'];
|
||||
export const modelProps: string[] = [];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents Vuejs Sparkline Component
|
||||
* ```vue
|
||||
|
|
@ -15,7 +34,14 @@ export const modelProps: string[] = [];
|
|||
*/
|
||||
@EJComponentDecorator({
|
||||
props: properties
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class SparklineComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -25,15 +51,21 @@ export class SparklineComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {"e-rangeBandSettings":"e-rangeBandSetting"};
|
||||
public tagNameMapper: Object = {};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new Sparkline({});
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -41,7 +73,11 @@ export class SparklineComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -49,7 +85,12 @@ export class SparklineComponent extends ComponentBase {
|
|||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public renderSparkline(): void {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartAnnotationsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartAnnotationsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-annotations';
|
||||
}
|
||||
}
|
||||
export const StockChartAnnotationsPlugin = {
|
||||
name: 'e-stockchart-annotations',
|
||||
|
|
@ -26,11 +39,14 @@ export const StockChartAnnotationsPlugin = {
|
|||
* </ejs-chart>
|
||||
* ```
|
||||
*/
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartAnnotationDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartAnnotationDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-annotation';
|
||||
}
|
||||
}
|
||||
export const StockChartAnnotationPlugin = {
|
||||
name: 'e-stockchart-annotation',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartAxesDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartAxesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-axes';
|
||||
}
|
||||
}
|
||||
export const StockChartAxesPlugin = {
|
||||
name: 'e-stockchart-axes',
|
||||
|
|
@ -15,11 +28,14 @@ export const StockChartAxesPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartAxisDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartAxisDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-axis';
|
||||
}
|
||||
}
|
||||
export const StockChartAxisPlugin = {
|
||||
name: 'e-stockchart-axis',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartIndicatorsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartIndicatorsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-indicators';
|
||||
}
|
||||
}
|
||||
export const StockChartIndicatorsPlugin = {
|
||||
name: 'e-stockchart-indicators',
|
||||
|
|
@ -15,11 +28,14 @@ export const StockChartIndicatorsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartIndicatorDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartIndicatorDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-indicator';
|
||||
}
|
||||
}
|
||||
export const StockChartIndicatorPlugin = {
|
||||
name: 'e-stockchart-indicator',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartPeriodsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartPeriodsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-periods';
|
||||
}
|
||||
}
|
||||
export const StockChartPeriodsPlugin = {
|
||||
name: 'e-stockchart-periods',
|
||||
|
|
@ -15,11 +28,14 @@ export const StockChartPeriodsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartPeriodDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartPeriodDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-period';
|
||||
}
|
||||
}
|
||||
export const StockChartPeriodPlugin = {
|
||||
name: 'e-stockchart-period',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartRowsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartRowsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-rows';
|
||||
}
|
||||
}
|
||||
export const StockChartRowsPlugin = {
|
||||
name: 'e-stockchart-rows',
|
||||
|
|
@ -15,11 +28,14 @@ export const StockChartRowsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartRowDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartRowDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-row';
|
||||
}
|
||||
}
|
||||
export const StockChartRowPlugin = {
|
||||
name: 'e-stockchart-row',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartSelectedDataIndexesDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartSelectedDataIndexesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-selectedDataIndexes';
|
||||
}
|
||||
}
|
||||
export const StockChartSelectedDataIndexesPlugin = {
|
||||
name: 'e-stockchart-selectedDataIndexes',
|
||||
|
|
@ -15,11 +28,14 @@ export const StockChartSelectedDataIndexesPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartSelectedDataIndexDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartSelectedDataIndexDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-selectedDataIndex';
|
||||
}
|
||||
}
|
||||
export const StockChartSelectedDataIndexPlugin = {
|
||||
name: 'e-stockchart-selectedDataIndex',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartSeriesCollectionDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartSeriesCollectionDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-series-collection';
|
||||
}
|
||||
}
|
||||
export const StockChartSeriesCollectionPlugin = {
|
||||
name: 'e-stockchart-series-collection',
|
||||
|
|
@ -15,11 +28,14 @@ export const StockChartSeriesCollectionPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartSeriesDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartSeriesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-series';
|
||||
}
|
||||
}
|
||||
export const StockChartSeriesPlugin = {
|
||||
name: 'e-stockchart-series',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import Vue from 'vue';
|
||||
import { Options } from 'vue-class-component';
|
||||
import { isUndefined } from '@syncfusion/ej2-base';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
import { ComponentBase, EJComponentDecorator, getProps, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
import { StockChart } from '@syncfusion/ej2-charts';
|
||||
import { StockChartTrendlinesDirective, StockChartTrendlineDirective, StockChartTrendlinesPlugin, StockChartTrendlinePlugin } from './trendlines.directive'
|
||||
import { StockChartSeriesCollectionDirective, StockChartSeriesDirective, StockChartSeriesCollectionPlugin, StockChartSeriesPlugin } from './series.directive'
|
||||
|
|
@ -13,9 +15,26 @@ import { StockEventsDirective, StockEventDirective, StockEventsPlugin, StockEven
|
|||
import { StockChartIndicatorsDirective, StockChartIndicatorDirective, StockChartIndicatorsPlugin, StockChartIndicatorPlugin } from './indicators.directive'
|
||||
|
||||
|
||||
export const properties: string[] = ['annotations', 'axes', 'background', 'border', 'chartArea', 'crosshair', 'dataSource', 'enableCustomRange', 'enablePeriodSelector', 'enablePersistence', 'enableRtl', 'enableSelector', 'exportType', 'height', 'indicatorType', 'indicators', 'isMultiSelect', 'isSelect', 'isTransposed', 'locale', 'margin', 'periods', 'primaryXAxis', 'primaryYAxis', 'rows', 'selectedDataIndexes', 'selectionMode', 'series', 'seriesType', 'stockEvents', 'theme', 'title', 'titleStyle', 'tooltip', 'trendlineType', 'width', 'zoomSettings', 'axisLabelRender', 'load', 'loaded', 'onZooming', 'pointClick', 'pointMove', 'rangeChange', 'selectorRender', 'seriesRender', 'stockChartMouseClick', 'stockChartMouseDown', 'stockChartMouseLeave', 'stockChartMouseMove', 'stockChartMouseUp', 'stockEventRender', 'tooltipRender'];
|
||||
// {{VueImport}}
|
||||
export const properties: string[] = ['annotations', 'axes', 'background', 'border', 'chartArea', 'crosshair', 'dataSource', 'enableCustomRange', 'enablePeriodSelector', 'enablePersistence', 'enableRtl', 'enableSelector', 'exportType', 'height', 'indicatorType', 'indicators', 'isMultiSelect', 'isSelect', 'isTransposed', 'legendSettings', 'locale', 'margin', 'periods', 'primaryXAxis', 'primaryYAxis', 'rows', 'selectedDataIndexes', 'selectionMode', 'series', 'seriesType', 'stockEvents', 'theme', 'title', 'titleStyle', 'tooltip', 'trendlineType', 'width', 'zoomSettings', 'axisLabelRender', 'legendClick', 'legendRender', 'load', 'loaded', 'onZooming', 'pointClick', 'pointMove', 'rangeChange', 'selectorRender', 'seriesRender', 'stockChartMouseClick', 'stockChartMouseDown', 'stockChartMouseLeave', 'stockChartMouseMove', 'stockChartMouseUp', 'stockEventRender', 'tooltipRender'];
|
||||
export const modelProps: string[] = ['dataSource'];
|
||||
|
||||
export const testProp: any = getProps({props: properties});
|
||||
export const props = testProp[0];
|
||||
export const watch = testProp[1];
|
||||
|
||||
export const emitProbs: any = Object.keys(watch);
|
||||
emitProbs.push('modelchanged');
|
||||
for (let props of modelProps) {
|
||||
emitProbs.push(
|
||||
'update:'+props
|
||||
);
|
||||
}
|
||||
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
export let tempProxy: any;
|
||||
|
||||
/**
|
||||
* Represents Vuejs chart Component
|
||||
* ```vue
|
||||
|
|
@ -27,7 +46,14 @@ export const modelProps: string[] = ['dataSource'];
|
|||
model: {
|
||||
event: 'modelchanged'
|
||||
}
|
||||
})
|
||||
},isExecute)
|
||||
|
||||
/* Start Options({
|
||||
props: props,
|
||||
watch: watch,
|
||||
emits: emitProbs
|
||||
}) End */
|
||||
|
||||
export class StockChartComponent extends ComponentBase {
|
||||
|
||||
public ej2Instances: any;
|
||||
|
|
@ -37,17 +63,23 @@ export class StockChartComponent extends ComponentBase {
|
|||
protected hasInjectedModules: boolean = true;
|
||||
public tagMapper: { [key: string]: Object } = {"e-stockchart-series-collection":{"e-stockchart-series":{"e-trendlines":"e-trendline"}},"e-stockchart-axes":"e-stockchart-axis","e-stockchart-rows":"e-stockchart-row","e-stockchart-annotations":"e-stockchart-annotation","e-stockchart-selectedDataIndexes":"e-stockchart-selectedDataIndex","e-stockchart-periods":"e-stockchart-period","e-stockchart-stockevents":"e-stockchart-stockevent","e-stockchart-indicators":"e-stockchart-indicator"};
|
||||
public tagNameMapper: Object = {"e-stockchart-series-collection":"e-series","e-stockchart-axes":"e-axes","e-stockchart-rows":"e-rows","e-stockchart-annotations":"e-annotations","e-stockchart-selectedDataIndexes":"e-selectedDataIndexes","e-stockchart-periods":"e-periods","e-stockchart-stockevents":"e-stockEvents","e-stockchart-indicators":"e-indicators"};
|
||||
public isVue3: boolean;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
super(arguments);
|
||||
this.isVue3 = !isExecute;
|
||||
this.ej2Instances = new StockChart({}); this.ej2Instances._trigger = this.ej2Instances.trigger;
|
||||
this.ej2Instances.trigger = this.trigger;
|
||||
|
||||
this.bindProperties();
|
||||
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
||||
this.ej2Instances.setProperties = this.setProperties;
|
||||
tempProxy = this;
|
||||
}
|
||||
public setProperties(prop: any, muteOnChange: boolean): void {
|
||||
if(this.isVue3) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
||||
this.ej2Instances._setProperties(prop, muteOnChange);
|
||||
}
|
||||
|
|
@ -55,35 +87,57 @@ export class StockChartComponent extends ComponentBase {
|
|||
Object.keys(prop).map((key: string): void => {
|
||||
this.models.map((model: string): void => {
|
||||
if ((key === model) && !(/datasource/i.test(key))) {
|
||||
this.$emit('update:' + key, prop[key]);
|
||||
if (this.isVue3) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
||||
} else {
|
||||
(this as any).$emit('update:' + key, prop[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
public trigger(eventName: string, eventProp: {[key:string]:Object}, successHandler?: Function): void {
|
||||
if(!isExecute) {
|
||||
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
||||
}
|
||||
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/checked|value/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
} else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
||||
let key: string[] = this.models.toString().match(/currentView|selectedDate/) || [];
|
||||
let propKey: string = key[0];
|
||||
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
if (!isExecute) {
|
||||
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
||||
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
||||
} else {
|
||||
(this as any).$emit('update:'+ propKey, eventProp[propKey]);
|
||||
(this as any).$emit('modelchanged', eventProp[propKey]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.ej2Instances && this.ej2Instances._trigger) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
||||
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
||||
}
|
||||
}
|
||||
|
||||
public render(createElement: any) {
|
||||
return createElement('div', (this as any).$slots.default);
|
||||
let h: any = gh || createElement;
|
||||
let slots: any = null;
|
||||
if(!isNullOrUndefined((this as any).$slots.default)) {
|
||||
slots = gh ? (this as any).$slots.default() : (this as any).$slots.default;
|
||||
}
|
||||
return h('div', slots);
|
||||
}
|
||||
|
||||
public chartModuleInjection(): void {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockEventsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockEventsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-stockevents';
|
||||
}
|
||||
}
|
||||
export const StockEventsPlugin = {
|
||||
name: 'e-stockchart-stockevents',
|
||||
|
|
@ -15,11 +28,14 @@ export const StockEventsPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockEventDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockEventDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-stockchart-stockevent';
|
||||
}
|
||||
}
|
||||
export const StockEventPlugin = {
|
||||
name: 'e-stockchart-stockevent',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartTrendlinesDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartTrendlinesDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-trendlines';
|
||||
}
|
||||
}
|
||||
export const StockChartTrendlinesPlugin = {
|
||||
name: 'e-trendlines',
|
||||
|
|
@ -15,11 +28,14 @@ export const StockChartTrendlinesPlugin = {
|
|||
}
|
||||
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class StockChartTrendlineDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class StockChartTrendlineDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-trendline';
|
||||
}
|
||||
}
|
||||
export const StockChartTrendlinePlugin = {
|
||||
name: 'e-trendline',
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## 19.1.69 (2021-06-15)
|
||||
## 19.1.58 (2021-04-27)
|
||||
|
||||
### CircularGauge
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-vue-circulargauge",
|
||||
"version": "19.1.55",
|
||||
"version": "17.4.39",
|
||||
"description": "Essential JS 2 CircularGauge Components for Vue",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
@ -45,13 +45,16 @@
|
|||
"@types/jasmine": "^2.2.29",
|
||||
"@types/jasmine-ajax": "^3.1.27",
|
||||
"@types/requirejs": "^2.1.26",
|
||||
"vue": "2.5.2 - 2.5.21",
|
||||
"vue": "2.5.2 - 3.0.5",
|
||||
"vue-class-component": "^8.0.0-rc.1",
|
||||
"vue-loader-v16": "^16.0.0-beta.5.4",
|
||||
"rollup": "^0.51.3",
|
||||
"rollup-plugin-commonjs": "^8.2.6",
|
||||
"rollup-plugin-node-resolve": "^3.0.0",
|
||||
"rollup-plugin-sourcemaps": "^0.4.2",
|
||||
"rollup-plugin-typescript": "^0.8.1",
|
||||
"rollup-plugin-uglify": "^2.0.1",
|
||||
"@types/node": "^15.6.0",
|
||||
"es6-promise": "^3.2.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-sass": "^3.1.0",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,24 @@
|
|||
import { ComponentBase, EJComponentDecorator, allVue, gh } from '@syncfusion/ej2-vue-base';
|
||||
import * as Vue3 from 'vue-class-component';
|
||||
import Vue from 'vue';
|
||||
import { ComponentBase, EJComponentDecorator } from '@syncfusion/ej2-vue-base';
|
||||
|
||||
@EJComponentDecorator({})
|
||||
export class AnnotationsDirective extends Vue {
|
||||
export const isExecute: any = gh ? false : true;
|
||||
|
||||
let vueImport: any;
|
||||
if (!isExecute || parseInt(allVue.version) < 3) {
|
||||
vueImport = (Vue3 as any).Vue;
|
||||
} else {
|
||||
vueImport = Vue;
|
||||
}
|
||||
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class AnnotationsDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-annotations';
|
||||
}
|
||||
}
|
||||
export const AnnotationsPlugin = {
|
||||
name: 'e-annotations',
|
||||
|
|
@ -26,11 +39,14 @@ export const AnnotationsPlugin = {
|
|||
* </ejs-circulargauge>
|
||||
* ```
|
||||
*/
|
||||
@EJComponentDecorator({})
|
||||
export class AnnotationDirective extends Vue {
|
||||
@EJComponentDecorator({}, isExecute)
|
||||
export class AnnotationDirective extends vueImport {
|
||||
public render(): void {
|
||||
return;
|
||||
}
|
||||
public getTag(): string {
|
||||
return 'e-annotation';
|
||||
}
|
||||
}
|
||||
export const AnnotationPlugin = {
|
||||
name: 'e-annotation',
|
||||
|
|
|
|||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче