config(EJ2-000): repository setup and included common docs contents

This commit is contained in:
undefined 2020-12-01 10:38:43 +05:30
Родитель 982a13c9f2
Коммит 945dbd44f5
63 изменённых файлов: 3063 добавлений и 2 удалений

33
.github/workflows/node.js.yml поставляемый Normal file
Просмотреть файл

@ -0,0 +1,33 @@
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: Node.js CI
on:
pull_request:
branches: [ master ]
types: [opened, closed, edited, synchronize]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x]
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install
run: npm i
- name: Test
run: npm run test

47
.github/workflows/publish.js.yml поставляемый Normal file
Просмотреть файл

@ -0,0 +1,47 @@
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: Node.js CI
on:
push:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x]
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: set environment variables
uses: allenevans/set-env@v2.0.0
with:
GIT_USER: ${{ secrets.WEB_GITLAB_USER }}
GIT_TOKEN: ${{ secrets.WEB_GITLAB_TOKEN }}
GIT_MAIL: ${{ secrets.USER_MAIL }}
- name: Install
run: npm i
- name: Get changed files
run: |
git diff --name-only HEAD^ HEAD
- name: Publish
run: npm run publish
env:
GIT_USER: ${{ secrets.WEB_GITLAB_USER }}
GIT_TOKEN: ${{ secrets.WEB_GITLAB_TOKEN }}
GIT_MAIL: ${{ secrets.USER_MAIL }}

43
.markdownlint.json Normal file
Просмотреть файл

@ -0,0 +1,43 @@
{
"header-increment": true,
"first-header-h1": true,
"header-style": { "style": "atx" },
"ul-style": { "style": "asterisk" },
"list-indent": true,
"ul-start-left": true,
"ul-indent": { "indent": 4 },
"no-trailing-spaces": true,
"no-hard-tabs": true,
"no-reversed-links": true,
"no-multiple-blanks": { "maximum" : 1 },
"line-length": false,
"commands-show-output": true,
"no-missing-space-atx": true,
"no-multiple-space-atx": true,
"no-missing-space-closed-atx": true,
"no-multiple-space-closed-atx": true,
"blanks-around-headers": true,
"header-start-left": true,
"no-duplicate-header": {"siblings_only": true},
"single-h1": true,
"no-trailing-punctuation": true,
"no-multiple-space-blockquote": true,
"no-blanks-blockquote": true,
"ol-prefix": { "style" : "ordered" },
"list-marker-space": true,
"blanks-around-fences": true,
"blanks-around-lists": false,
"no-inline-html": {
"allowed_elements": ["br", "kbd", "span", "div", "b"]
},
"no-bare-urls": true,
"hr-style": { "style" : "----"},
"no-emphasis-as-header": true,
"no-space-in-emphasis": true,
"no-space-in-code": true,
"no-space-in-links": true,
"fenced-code-language": true,
"first-line-h1": false,
"no-empty-links": true,
"required-headers": true
}

Просмотреть файл

@ -1,2 +1,8 @@
# ej2-vue-docs
Documentation for Essential JS 2 Vue UI components. https://ej2.syncfusion.com/vue/documentation/
# Syncfusion Angular Documentation
This is the GitHub repository for the technical product documentation for [Syncfusion Vue UI Components](https://ej2.syncfusion.com/home/vue.html).This documentation is published to https://ej2.syncfusion.com/vue/documentation/
## Contributions Welcome!
We welcome the [pull request](https://docs.github.com/en/github/managing-files-in-a-repository/editing-files-in-another-users-repository) for improving the Blazor Components user guide documentation. Your contribution towards this will be greatly appreciated.

102
gulpfile.js Normal file
Просмотреть файл

@ -0,0 +1,102 @@
var fs = require('fs');
var gulp = require('gulp');
var glob = require('glob');
var shelljs = require('shelljs');
var components;
var compPaths = glob.sync(`./src/**/`, { silent: true, ignore: [`./src/base/`, `./src/`, './src/common/', './src/getting-started/'] });
var user = process.env.GIT_USER;
var token = process.env.GIT_TOKEN;
var user_mail = process.env.GIT_MAIL;
/**
* Source shipping to gitlap
*/
gulp.task('ship-to-gitlap', function (done) {
console.log('---check----' + user_mail);
console.log('---user---' + user);
shelljs.exec(`git config --global user.email "${user_mail}"`);
shelljs.exec(`git config --global user.name "${user}"`);
var changes = shelljs.exec(`git diff --name-only HEAD^ HEAD`);
console.log('--changes----' + changes);
var changedFileNames = changes.stdout.split('\n');
console.log('--changedFileNames----' + changedFileNames);
var cloneRepos = [];
for (var i = 0; i < changedFileNames.length; i++) {
var curentRootRepo = changedFileNames[i].split('/')[1];
// if(curentRootRepo !='workflows'){
// return
// }
if (curentRootRepo != undefined && curentRootRepo !='workflows') {
cloneRepos.push(curentRootRepo);
}
}
console.log('--cloneRepos----' + cloneRepos);
for (var j = 0; j < cloneRepos.length; j++) {
var gitPath = 'https://' + user + ':' + token + `@gitlab.syncfusion.com/essential-studio/ej2-${cloneRepos[j]}-vue-docs`;
console.log('Clone has been started...!');
var clone = shelljs.exec('git clone ' + gitPath + ' -b master' + ' ' + `./gitlapRepo/ej2-${cloneRepos[j]}-vue-docs`, {
silent: false
});
if (clone.code !== 0) {
console.log(clone.stderr);
done();
return;
} else {
console.log('Clone has been completed...!');
shelljs.cp('-rf', `./src/${cloneRepos[j]}/*`, `./gitlapRepo/ej2-${cloneRepos[j]}-vue-docs/src`);
shelljs.cd(`./gitlapRepo/ej2-${cloneRepos[j]}-vue-docs`);
shelljs.exec('git add .');
shelljs.exec('git pull');
shelljs.exec('git commit -m \"ci-skip(EJ2-000): source updation from github repo [ci skip]\" --no-verify');
shelljs.exec('git push');
shelljs.cd('../../');
}
}
})
/**
* Lint md files in src location
*/
gulp.task('lint', function (done) {
var markdownlint = require('markdownlint');
components = controlsList();
var options = {
files: glob.sync('./src/' + components + '/*.md', { ignore: ['./src/**/api*.md', './src/summary.md', './src/release-notes/*.md'] }),
config: require('./.markdownlint.json')
};
markdownlint(options, function (result, err) {
if (err && err.toString().length) {
console.error(err.toString());
done();
process.exit(1);
} else {
console.log('\n*** Markdown Lint Succeeded ***\n');
done();
}
});
});
// Controls List
function controlsList() {
var controls = '**';
if (true) {
var ret = '';
for (var comp of compPaths) {
ret += comp.replace(/.\/src\//g, '') + '**/,';
}
return '{' + ret + '}';
}
else if (fs.existsSync('./controlsList.txt')) {
controls = fs.readFileSync('./controlsList.txt', 'utf8');
controls = '{' + controls + ',}';
}
return controls;
}

47
package.json Normal file
Просмотреть файл

@ -0,0 +1,47 @@
{
"name": "@syncfusion/ej2-vue-docs",
"version": "1.0.0",
"description": "Syncfusion Vue documentation",
"author": "Syncfusion Inc.",
"license": "UNLICENSED",
"dependencies": {
"core-js": "^2.5.7",
"cheerio": "^1.0.0-rc.2",
"gulp": "^3.9.1",
"gulp-csslint": "^1.0.1",
"gulp-csslint-report": "^2.0.0",
"gulp-gzip": "^1.4.2",
"lodash": "^4.17.11",
"markdownlint": "^0.11.0",
"markdown-link-extractor": "^1.2.0",
"markdown-spellcheck": "^1.3.1",
"prismjs": "^1.15.0",
"require-dir": "^1.0.0",
"shelljs": "^0.8.2",
"styled-components": "^3.4.9",
"typeface-merriweather": "0.0.43",
"typeface-montserrat": "0.0.43",
"typo-js": "^1.0.3",
"typescript": "^2.6.2",
"typography": "^0.16.17",
"typography-theme-wordpress-2016": "^0.15.10",
"webpack": "4.28.4",
"terser": "3.14.1"
},
"devDependencies": {
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.11.1",
"gh-pages": "^1.2.0",
"json-loader": "^0.5.7",
"prettier": "^1.14.2"
},
"config": {
"ghooks": {
"pre-commit": "gulp test"
}
},
"scripts": {
"test": "gulp lint",
"publish": "gulp ship-to-gitlap"
}
}

Просмотреть файл

@ -0,0 +1,23 @@
# Accessibility
The Syncfusion Vue UI components follow WAI-ARIA accessibility standard by default. This enables you to build accessible web applications which is fully navigable by user with disabilities.
## Keyboard Navigation
Keyboard navigation support enables users to interact with components using keyboard shortcuts. Each component has its own set of shortcuts, refer the following documents to get the details of each component.
* [AutoComplete](./auto-complete/accessibility/)
* [Calendar](./calendar/accessibility/)
* [Chart](./chart/accessibility/)
* [CircularGauge](./circular-gauge/accessibility/)
* [Combobox](./combo-box/accessibility/)
* [DatePicker](./datepicker/accessibility/)
* [Dialog](./dialog/accessibility/)
* [DropDownList](./drop-down-list/accessibility/)
* [Grid](./grid/accessibility/)
* [LinearGauge](./linear-gauge/accessibility/)
* [ListView](./list-view/accessibility/)
* [NumericTextBox](./numerictextbox/accessibility/)
* [TimePicker](./timepicker/accessibility/)
* [Toolbar](./toolbar/accessibility/)
* [ToolTip](./tooltip/accessibility/)

Просмотреть файл

@ -0,0 +1,122 @@
# Icons Library
The Syncfusion Vue library provides the set of `base64` formatted font icons, that can be utilized in the web application.
## Steps to use icon library
1. Add the class name `e-icons` to the HTML element which needs to render the icon. This class contains the font-family and common property of font icons.
2. Add the icon class with corresponding icon content from the [available icons](#available-icons). For example, the below code snippet represents the search icon class.
```css
.e-search:before{
content:'\e993';
}
```
3. Add `e-search` class name to the HTML element along with `e-icons` class.
```html
<span class="e-icons e-search"></span>
```
The below code snippet represents the complete example of icon usage.
```html
<!doctype html>
<html>
<head>
<title>Essential JS 2 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
<link href="./node_modules/@syncfusion/ej2/material.css" rel="stylesheet" />
<style>
.e-search:before{
content:'\e993';
}
.e-upload:before{
content: '\e725';
}
.e-font:before{
content: '\e34c';
}
</style>
</head>
<body>
<div class="icons">
<ul>
<li><span class="e-icons e-search"></span></li>
<li><span class="e-icons e-settings"></span></li>
<li><span class="e-icons e-upload"></span></li>
<li><span class="e-icons e-font"></span></li>
</ul>
</div>
</body>
</html>
```
## Customization
* The Syncfusion icon library can customize its color and size by overriding the `e-icons` class.
```html
<!doctype html>
<html>
<head>
<title>Essential JS 2 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
<link href="./node_modules/@syncfusion/ej2/material.css" rel="stylesheet" />
<style>
.e-icons{
color: #00ffff;
font-size: 26px;
}
.e-search:before{
content: '\e993';
}
.e-upload:before{
content: '\e725';
}
.e-font:before{
content: '\e34c';
}
</style>
</head>
<body>
<div class="icons">
<ul>
<li><span class="e-icons e-search"></span></li>
<li><span class="e-icons e-settings"></span></li>
<li><span class="e-icons e-upload"></span></li>
<li><span class="e-icons e-font"></span></li>
</ul>
</div>
</body>
</html>
```
## Available Icons
The complete package of Essential JS 2 icons is listed in the following table. The corresponding icon content can be referred in the content section.
<!-- markdownlint-disable MD033 -->
### Material
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/material/demo.html" style="height:1000px;"></iframe>
### Fabric
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/fabric/demo.html" style="height:1000px;"></iframe>
### Bootstrap
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/bootstrap/demo.html" style="height:1000px;"></iframe>
### Bootstrap 4
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/bootstrap4/demo.html" style="height:1000px;"></iframe>
### High Contrast
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/highcontrast/demo.html" style="height:1000px;"></iframe>

Двоичные данные
src/common/appearance/images/colorpicker.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 85 KiB

Двоичные данные
src/common/appearance/images/customized.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 73 KiB

Двоичные данные
src/common/appearance/images/download-dialog.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 8.1 KiB

Двоичные данные
src/common/appearance/images/download-icon.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 79 KiB

Двоичные данные
src/common/appearance/images/filter-customized.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 77 KiB

Двоичные данные
src/common/appearance/images/filter-dialog.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 32 KiB

Двоичные данные
src/common/appearance/images/filter-icon.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 74 KiB

Двоичные данные
src/common/appearance/images/filtered.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 75 KiB

Двоичные данные
src/common/appearance/images/import-dialog.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 10 KiB

Двоичные данные
src/common/appearance/images/import-icon.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 75 KiB

Двоичные данные
src/common/appearance/images/imported-settings.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 13 KiB

Двоичные данные
src/common/appearance/images/main.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 74 KiB

Двоичные данные
src/common/appearance/images/output-files.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 32 KiB

Двоичные данные
src/common/appearance/images/two-pane.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 85 KiB

Просмотреть файл

@ -0,0 +1,9 @@
# Overview
The Syncfusion Vue library styles are developed under the SCSS environment with `base64` embed font icons. The list of key features are described in the below topics.
## Key Features
* [Theming](./theme/)
* [Icons Library](./icons/)
* [Theme Studio](./theme-studio/)

Просмотреть файл

@ -0,0 +1,3 @@
* [Built-in Themes](appearance/theme.md)
* [Icons](appearance/icons.md)
* [Theme Studio](appearance/theme-studio.md)

Просмотреть файл

@ -0,0 +1,89 @@
# Overview
Theme Studio for Essential JS 2 can be used to customize a new theme from an existing theme. It doesn't support with Data visualization components like Chart, Diagram, Gauge, Range Navigator, Maps.
## Customizing theme color from theme studio
The Syncfusion Vue (Essential JS 2) themes are developed under the SCSS environment. Each theme has a unique common variable list. When you change the common variable color code value, it will reflect in all Syncfusion Vue UI components. All Syncfusion Vue component styles are derived from these [theme-based common variables](theme#common-variables). This common variable list is handled inside the theme studio application for customizing theme-based colors.
**Step 1:** Navigate to the theme studio application at [https://ej2.syncfusion.com/themestudio/](https://ej2.syncfusion.com/themestudio/).
**Step 2:** The theme studio application page can be divided into two sections: the components preview section on the left, and the theme customization section on the right.
![two-sections](images/two-pane.png)
**Step 3:** Click the color pickers in the theme customization section to select your desired color.
![colpr-picker](images/colorpicker.png)
**Step 4:** After selecting colors with the color pickers, the Syncfusion Vue components will have the newly selected colors applied to them in the components preview section.
![customized](images/customized.png)
### Filtering a specific list of components
Using the theme studio, you can apply custom themes to a list of specific components. This option is useful when you have integrated a selective list of Syncfusion Vue components in your application. The theme studio will filter the selected components and customize the final output for those component's styles alone, reducing the final output file size.
**Step 1:** Click the Filter icon in the top right corner and select the components whose theme you want to customize.
![filter-icon](images/filter-icon.png)
**Step 2:** Click the Apply button in the Filter dialog. Now, only the selected components will be rendered in the components preview section.
![filter-dialog](images/filter-dialog.png)
**Step 3:** Now you can customize the colors in the theme customization section for the components you selected.
![filter-customized](images/filter-customized.png)
### Download the customized theme
You can download the custom styles after customizing the theme colors.
**Step 1:** Click the Download button in the top right corner. The Download dialog will open.
![download-icon](images/download-icon.png)
**Step 2:** Assign a theme name in the File Name field and click the Download button.
![download-dialog](images/download-dialog.png)
**Step 3:** The download styles will come as a zip file that contains SCSS and CSS files for the selected Syncfusion Vue components. The current settings are stored in the `settings.json` file.
![output-files](images/output-files.png)
### Using a customized theme in a web application
You can directly use the customized CSS file in the web application.
**Step 1:** Copy/paste the customized CSS file from the download folder into your application at any folder. Example: `styles\{file-name}.css`.
**Step 2:** Refer the customized CSS file reference in the `index.html` or `shared/_layout.cshtml` main page head section.
```html
<head>
<link href="styles/{file-name}.css" rel="stylesheet"/>
</head>
```
## Import previously changed settings into the theme studio
When you want to change your application theme and UI design in the future, you wont need to customize the Syncfusion Vue components from scratch in the theme studio. Just import the old `settings.json` file to review and update your stored settings in the theme studio application.
**Step 1:** Click the Import icon in the top right corner.
![import-icon](images/import-icon.png)
**Step 2:** The Import Theme dialog will open. Click the Browse button and select a `settings.json` file you exported previously.
![import-dialog](images/import-dialog.png)
**Step 3:** Click the Import button.
![imported-settings](images/imported-settings.png)
**Step 4:** The stored data will be reflected in the theme studio application. Now you can change the theme colors based on your latest design and export the theme again.
![filter-customized](images/filter-customized.png)
**Step 5:** The exported file will contain your latest changes. You can just replace the older custom style with the newer one to refresh your application.

Просмотреть файл

@ -0,0 +1,227 @@
# Theming
The Syncfusion Vue library has provided the below list of in-built themes,
1. Googles Material
2. Microsoft Offices Fabric
3. Bootstrap
4. High Contrast
> The Syncfusion Bootstrap theme is designed based on `Bootstrap v3`, however, it can be compatible with `Bootstrap v4` applications. In addition to these four built-in themes, [ThemeStudio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/) provides support for the Fusion Theme that can only be downloaded from [ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=fusion).
Themes are shipped as individual and combined CSS files. Combined CSS file can be referred from the npm package `@syncfusion/ej2` and individual CSS files are available within same component repositorys `style` folder. In ej2 npm packages, we have shipped both CSS and SCSS files for all components.
Referring All components CSS
```css
@import "./node_modules/@syncfusion/ej2/<theme_name>.css";
```
Referring All components SCSS
```scss
@import "ej2/<theme_name>.scss";
```
## Referring individual control theme
We can get the individual theme from the individual npm package or from an overall ej2 npm package.
Referring individual control from individual package
```scss
@import "<dependent-package>/<dependent-control>/<theme_name>.scss";
@import "ej2-buttons/styles/button/<theme_name>.scss";
```
**Example:**
```scss
@import "ej2-base/styles/material.scss";
@import "ej2-buttons/styles/button/material.scss";
```
> `ej2-base` is common dependent package for all Syncfusion JavaScript control styles. So, it needs first to be added in the import statement.
Referring individual control from ej2 package
```scss
@import "ej2/<dependent-control>/<theme_name>.scss";
@import "ej2/button/<theme_name>.scss";
```
**Example:**
```scss
@import "ej2/base/material.scss";
@import "ej2/button/material.scss";
```
> The individual control theme will not include its dependent control styles. I.e. The dependent controls theme should be added before adding the individual control themes.
## Common Variables
The below list of common variables used in the Syncfusion Vue library themes for all components. You can change these variables to customize the corresponding theme.
### Google's Material
| Name | Value |
| ------------- | ------------- |
| `$accent` | ![#e3165b](https://ej2.syncfusion.com/download/documentation/svg/e3165b.svg) `#e3165b` |
| `$accent-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$primary` | ![#3f51b5](https://ej2.syncfusion.com/download/documentation/svg/3f51b5.svg) `#3f51b5` |
| `$primary-50` | ![#e8eaf6](https://ej2.syncfusion.com/download/documentation/svg/e8eaf6.svg) `#e8eaf6` |
| `$primary-100` | ![#c5cae9](https://ej2.syncfusion.com/download/documentation/svg/c5cae9.svg) `#c5cae9` |
| `$primary-200` | ![#9fa8da](https://ej2.syncfusion.com/download/documentation/svg/9fa8da.svg) `#9fa8da` |
| `$primary-300` | ![#7986cb](https://ej2.syncfusion.com/download/documentation/svg/7986cb.svg) `#7986cb` |
| `$primary-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$primary-50-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$primary-100-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$primary-200-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$primary-300-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$grey-white` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$grey-black` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$grey-50` | ![#fafafa](https://ej2.syncfusion.com/download/documentation/svg/fafafa.svg) `#fafafa` |
| `$grey-100` | ![#f5f5f5](https://ej2.syncfusion.com/download/documentation/svg/f5f5f5.svg) `#f5f5f5` |
| `$grey-200` | ![#eeeeee](https://ej2.syncfusion.com/download/documentation/svg/eeeeee.svg) `#eeeeee` |
| `$grey-300` | ![#e0e0e0](https://ej2.syncfusion.com/download/documentation/svg/e0e0e0.svg) `#e0e0e0` |
| `$grey-400` | ![#bdbdbd](https://ej2.syncfusion.com/download/documentation/svg/bdbdbd.svg) `#bdbdbd` |
| `$grey-500` | ![#9e9e9e](https://ej2.syncfusion.com/download/documentation/svg/9e9e9e.svg) `#9e9e9e` |
| `$grey-600` | ![#757575](https://ej2.syncfusion.com/download/documentation/svg/757575.svg) `#757575` |
| `$grey-700` | ![#616161](https://ej2.syncfusion.com/download/documentation/svg/616161.svg) `#616161` |
| `$grey-800` | ![#424242](https://ej2.syncfusion.com/download/documentation/svg/424242.svg) `#424242` |
| `$grey-900` | ![#212121](https://ej2.syncfusion.com/download/documentation/svg/212121.svg) `#212121` |
| `$grey-dark` | ![#303030](https://ej2.syncfusion.com/download/documentation/svg/303030.svg) `#303030` |
| `$grey-light-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$grey-dark-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$base-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$error-font` | ![#f44336](https://ej2.syncfusion.com/download/documentation/svg/f44336.svg) `#f44336` |
### Microsoft Offices Fabric
| Name | Value |
| ------------- | ------------- |
| `$theme-primary` | ![#0078d7](https://ej2.syncfusion.com/download/documentation/svg/f44336.svg) `#0078d7` |
| `$theme-dark-alt` | ![#006fc7](https://ej2.syncfusion.com/download/documentation/svg/006fc7.svg) `darken($theme-primary, 3%)` |
| `$theme-dark` | ![#005ba3](https://ej2.syncfusion.com/download/documentation/svg/005ba3.svg) `darken($theme-primary, 10%)` |
| `$theme-darker` | ![#00457a](https://ej2.syncfusion.com/download/documentation/svg/00457a.svg) `darken($theme-primary, 18%)` |
| `$theme-secondary` | ![#0081e5](https://ej2.syncfusion.com/download/documentation/svg/0081e5.svg) `lighten($theme-primary, 3%)` |
| `$theme-tertiary` | ![#42acff](https://ej2.syncfusion.com/download/documentation/svg/42acff.svg) `lighten($theme-primary, 21%)` |
| `$theme-light` | ![#b7e0ff](https://ej2.syncfusion.com/download/documentation/svg/b7e0ff.svg) `lighten($theme-primary, 44%)` |
| `$theme-lighter` | ![#d1ebff](https://ej2.syncfusion.com/download/documentation/svg/d1ebff.svg) `lighten($theme-primary, 49%)` |
| `$theme-lighter-alt` | ![#aliceblue](https://ej2.syncfusion.com/download/documentation/svg/aliceblue.svg) `lighten($theme-primary, 55%)` |
| `$neutral-white` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$neutral-lighter-alt` | ![#f8f8f8](https://ej2.syncfusion.com/download/documentation/svg/f8f8f8.svg) `#f8f8f8` |
| `$neutral-lighter` | ![#f4f4f4](https://ej2.syncfusion.com/download/documentation/svg/f4f4f4.svg) `#f4f4f4` |
| `$neutral-light` | ![#eaeaea](https://ej2.syncfusion.com/download/documentation/svg/eaeaea.svg) `#eaeaea` |
| `$neutral-quintenaryalt` | ![#dadada](https://ej2.syncfusion.com/download/documentation/svg/dadada.svg) `#dadada` |
| `$neutral-quintenary` | ![#d0d0d0](https://ej2.syncfusion.com/download/documentation/svg/d0d0d0.svg) `#d0d0d0` |
| `$neutral-tertiary-alt` | ![#c8c8c8](https://ej2.syncfusion.com/download/documentation/svg/c8c8c8.svg) `#c8c8c8` |
| `$neutral-tertiary` | ![#a6a6a6](https://ej2.syncfusion.com/download/documentation/svg/a6a6a6.svg) `#a6a6a6` |
| `$neutral-secondary-alt` | ![#767676](https://ej2.syncfusion.com/download/documentation/svg/767676.svg) `#767676` |
| `$neutral-secondary` | ![#666666](https://ej2.syncfusion.com/download/documentation/svg/666666.svg) `#666666` |
| `$neutral-primary` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
| `$neutral-dark` | ![#212121](https://ej2.syncfusion.com/download/documentation/svg/212121.svg) `#212121` |
| `$neutral-black` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$alert-bg` | ![#deecf9](https://ej2.syncfusion.com/download/documentation/svg/deecf9.svg) `#deecf9` |
| `$error-bg` | ![#fde7e9](https://ej2.syncfusion.com/download/documentation/svg/fde7e9.svg) `#fde7e9` |
| `$success-bg` | ![#dff6dd](https://ej2.syncfusion.com/download/documentation/svg/dff6dd.svg) `#dff6dd` |
| `$theme-dark-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$theme-primary-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$theme-light-font` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
| `$neutral-light-font` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
| `$neutral-light-fontalt` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$grey-dark-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$base-font` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
| `$message-font` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
| `$alert-font` | ![#d83b01](https://ej2.syncfusion.com/download/documentation/svg/d83b01.svg) `#d83b01` |
| `$error-font` | ![#a80000](https://ej2.syncfusion.com/download/documentation/svg/a80000.svg) `#a80000` |
| `$success-font` | ![#107c10](https://ej2.syncfusion.com/download/documentation/svg/107c10.svg) `#107c10` |
### Bootstrap
| Name | Value |
| ------------- | ------------- |
| `$brand-primary` | ![#317ab9](https://ej2.syncfusion.com/download/documentation/svg/317ab9.svg) `#317ab9` |
| `$brand-primary-darken-10` | ![#3071a9](https://ej2.syncfusion.com/download/documentation/svg/3071a9.svg) `#3071a9` |
| `$brand-primary-darken-15` | ![#2a6496](https://ej2.syncfusion.com/download/documentation/svg/2a6496.svg) `#2a6496` |
| `$brand-primary-darken-25` | ![#1f496e](https://ej2.syncfusion.com/download/documentation/svg/1f496e.svg) `#1f496e` |
| `$brand-primary-darken-35` | ![#142f46](https://ej2.syncfusion.com/download/documentation/svg/142f46.svg) `#142f46` |
| `$brand-primary-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$grey-base` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$grey-darker` | ![#222222](https://ej2.syncfusion.com/download/documentation/svg/222222.svg) `#222222` |
| `$grey-dark` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
| `$grey` | ![#555555](https://ej2.syncfusion.com/download/documentation/svg/555555.svg) `#555555` |
| `$grey-light` | ![#777777](https://ej2.syncfusion.com/download/documentation/svg/777777.svg) `#777777` |
| `$grey-44` | ![#444444](https://ej2.syncfusion.com/download/documentation/svg/444444.svg) `#444444` |
| `$grey-88` | ![#888888](https://ej2.syncfusion.com/download/documentation/svg/888888.svg) `#888888` |
| `$grey-99` | ![#999999](https://ej2.syncfusion.com/download/documentation/svg/999999.svg) `#999999` |
| `$grey-8c` | ![#8c8c8c](https://ej2.syncfusion.com/download/documentation/svg/8c8c8c.svg) `#8c8c8c` |
| `$grey-ad` | ![#adadad](https://ej2.syncfusion.com/download/documentation/svg/adadad.svg) `#adadad` |
| `$grey-dark-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$grey-white` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$grey-lighter` | ![#eeeeee](https://ej2.syncfusion.com/download/documentation/svg/eeeeee.svg) `#eeeeee` |
| `$grey-f9` | ![#f9f9f9](https://ej2.syncfusion.com/download/documentation/svg/f9f9f9.svg) `#f9f9f9` |
| `$grey-f8` | ![#f8f8f8](https://ej2.syncfusion.com/download/documentation/svg/f8f8f8.svg) `#f8f8f8` |
| `$grey-f5` | ![#f5f5f5](https://ej2.syncfusion.com/download/documentation/svg/f5f5f5.svg) `#f5f5f5` |
| `$grey-e6` | ![#e6e6e6](https://ej2.syncfusion.com/download/documentation/svg/e6e6e6.svg) `#e6e6e6` |
| `$grey-dd` | ![#dddddd](https://ej2.syncfusion.com/download/documentation/svg/dddddd.svg) `#dddddd` |
| `$grey-d4` | ![#d4d4d4](https://ej2.syncfusion.com/download/documentation/svg/d4d4d4.svg) `#d4d4d4` |
| `$grey-cc` | ![#cccccc](https://ej2.syncfusion.com/download/documentation/svg/cccccc.svg) `#cccccc` |
| `$grey-light-font` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
| `$brand-success` | ![#5cb85c](https://ej2.syncfusion.com/download/documentation/svg/5cb85c.svg) `#5cb85c` |
| `$brand-success-dark` | ![#3c763d](https://ej2.syncfusion.com/download/documentation/svg/3c763d.svg) `#3c763d` |
| `$brand-info` | ![#5bc0de](https://ej2.syncfusion.com/download/documentation/svg/5bc0de.svg) `#5bc0de` |
| `$brand-info-dark` | ![#31708f](https://ej2.syncfusion.com/download/documentation/svg/31708f.svg) `#31708f` |
| `$brand-warning` | ![#f0ad4e](https://ej2.syncfusion.com/download/documentation/svg/f0ad4e.svg) `#f0ad4e` |
| `$brand-warning-dark` | ![#8a6d3b](https://ej2.syncfusion.com/download/documentation/svg/8a6d3b.svg) `#8a6d3b` |
| `$brand-danger` | ![#d9534f](https://ej2.syncfusion.com/download/documentation/svg/d9534f.svg) `#d9534f` |
| `$brand-danger-dark` | ![#a94442](https://ej2.syncfusion.com/download/documentation/svg/a94442.svg) `#a94442` |
| `$brand-success-light` | ![#dff0d8](https://ej2.syncfusion.com/download/documentation/svg/dff0d8.svg) `#dff0d8` |
| `$brand-info-light` | ![#d9edf7](https://ej2.syncfusion.com/download/documentation/svg/d9edf7.svg) `#d9edf7` |
| `$brand-warning-light` | ![#fcf8e3](https://ej2.syncfusion.com/download/documentation/svg/fcf8e3.svg) `#fcf8e3` |
| `$brand-danger-light` | ![#f2dede](https://ej2.syncfusion.com/download/documentation/svg/f2dede.svg) `#f2dede` |
| `$input-border-focus` | ![#66afe9](https://ej2.syncfusion.com/download/documentation/svg/66afe9.svg) `#66afe9` |
| `$brand-success-font` | ![#3c763d](https://ej2.syncfusion.com/download/documentation/svg/3c763d.svg) `#3c763d` |
| `$brand-info-font` | ![#31708f](https://ej2.syncfusion.com/download/documentation/svg/31708f.svg) `#31708f` |
| `$brand-warning-font` | ![#8a6d3b](https://ej2.syncfusion.com/download/documentation/svg/8a6d3b.svg) `#8a6d3b` |
| `$brand-danger-font` |![#a94442](https://ej2.syncfusion.com/download/documentation/svg/a94442.svg) `#a94442` |
| `$base-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
### High Contrast
| Name | Value |
| ------------- | ------------- |
| `$selection-bg` | ![#ffd939](https://ej2.syncfusion.com/download/documentation/svg/ffd939.svg) `#ffd939` |
| `$selection-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$selection-border` | ![#ffd939](https://ej2.syncfusion.com/download/documentation/svg/ffd939.svg) `#ffd939` |
| `$hover-bg` | ![#685708](https://ej2.syncfusion.com/download/documentation/svg/685708.svg) `#685708` |
| `$hover-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$hover-border` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$border-default` | ![#969696](https://ej2.syncfusion.com/download/documentation/svg/969696.svg) `#969696` |
| `$border-alt` | ![#757575](https://ej2.syncfusion.com/download/documentation/svg/757575.svg) `#757575` |
| `$border-fg` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$border-fg-alt` | ![#ffd939](https://ej2.syncfusion.com/download/documentation/svg/ffd939.svg) `#ffd939` |
| `$bg-base-0` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$bg-base-5` | ![#0d0d0d](https://ej2.syncfusion.com/download/documentation/svg/0d0d0d.svg) `#0d0d0d` |
| `$bg-base-10` | ![#1a1a1a](https://ej2.syncfusion.com/download/documentation/svg/1a1a1a.svg) `#1a1a1a` |
| `$bg-base-15` | ![#262626](https://ej2.syncfusion.com/download/documentation/svg/262626.svg) `#262626` |
| `$bg-base-20` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
| `$bg-base-75` | ![#bfbfbf](https://ej2.syncfusion.com/download/documentation/svg/bfbfbf.svg) `#bfbfbf` |
| `$bg-base-100` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$header-font` | ![#ffd939](https://ej2.syncfusion.com/download/documentation/svg/ffd939.svg) `#ffd939` |
| `$header-font-alt` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$content-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$content-font-alt` | ![#969696](https://ej2.syncfusion.com/download/documentation/svg/969696.svg) `#969696` |
| `$link` | ![#8a8aff](https://ej2.syncfusion.com/download/documentation/svg/8a8aff.svg) `#8a8aff` |
| `$invert-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
| `$success-bg` | ![#166600](https://ej2.syncfusion.com/download/documentation/svg/166600.svg) `#166600` |
| `$error-bg` | ![#b30900](https://ej2.syncfusion.com/download/documentation/svg/b30900.svg) `#b30900` |
| `$message-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
| `$alert-bg` | ![#944000](https://ej2.syncfusion.com/download/documentation/svg/944000.svg) `#944000` |
| `$info-bg` | ![#0056b3](https://ej2.syncfusion.com/download/documentation/svg/0056b3.svg) `#0056b3` |
| `$success-alt` | ![#2bc700](https://ej2.syncfusion.com/download/documentation/svg/2bc700.svg) `#2bc700` |
| `$error-alt` | ![#ff6161](https://ej2.syncfusion.com/download/documentation/svg/ff6161.svg) `#ff6161` |
| `$alert-alt` | ![#ff7d1a](https://ej2.syncfusion.com/download/documentation/svg/ff7d1a.svg) `#ff7d1a` |
| `$info-alt` | ![#66b0ff](https://ej2.syncfusion.com/download/documentation/svg/66b0ff.svg) `#66b0ff` |
| `$disable` | ![#757575](https://ej2.syncfusion.com/download/documentation/svg/757575.svg) `#757575` |

54
src/common/browser.md Normal file
Просмотреть файл

@ -0,0 +1,54 @@
# Browser Support
The Syncfusion Essential JS 2 components are supported only in modern browsers. This includes the following versions.
| Chrome | Firefox | Opera | Edge | IE | Safari | IOS | Android | Windows Mobile |
|--------------|---------------|--------------|------------|------------|--------------|-----------|---------------|------------------------|
| Latest | Latest | Latest | 13 + | 11 + | 9 + | 9 + | 4.4 + | IE 11 + |
## Required Polyfills
The following polyfills are required to run Essential JS 2 components in each browser.
| Browser | Polyfills |
|:--------------------------------------------------------:|:-------------------:|
| Chrome(latest), Firefox(latest), Opera(latest), Edge, Safari 9+ | NONE |
| IE 11 | ES6 Promise |
The Syncfusion Essential JS 2 components are supported in IE 11 browser with ES6 Promise polyfill.
## Using CDN
To add ES6 Promise polyfill using a CDN, include this in your HTML file.
```typescript
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<!-- Minified version of `es6-promise-auto` below. -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
```
## Node.js
ES6 Promise polyfill can also be installed on the node.js.
To install:
```typescript
yarn add es6-promise
(or)
npm install es6-promise
```
To Use:
```typescript
var Promise = require('es6-promise').Promise;
```
For further details, refer to the link [here](https://github.com/stefanpenner/es6-promise).

Просмотреть файл

@ -0,0 +1,48 @@
# Animation
The **Animation** library is used to perform animation effects on HTML elements by running a sequence of frames.
## Animating a HTML Element
The `animate` method of `Animation` library can be used to animate the HTML elements. This method can also take additional `AnimationModel`. Refer the below code snippet to animate a multiple DOM element.
{% tab template="common/animation-multiple", isDefaultActive=true %}
```html
<template>
<div id='container'>
<div id='element1'></div>
<div id='element2'></div>
</div>
</template>
<script>
import { Animation } from '@syncfusion/ej2-base';
import Vue from "vue";
export default {
mounted: function () {
var animation = new Animation({ duration: 5000 });
animation.animate('#element1', { name: 'FadeOut' });
animation.animate('#element2', { name: 'ZoomOut' });
}
}
</script>
<style>
#element1, #element2 {
background: #333333;
border: 1px solid #cecece;
box-sizing: border-box;
float: left;
height: 100px;
width:100px;
}
#element2 {
margin-left: 20px;
}
</style>
```
{% endtab %}

Просмотреть файл

@ -0,0 +1,184 @@
# Drag and Drop
Drag and Drop is supported through two libraries. Those are [`Draggable`](https://ej2.syncfusion.com/documentation/api/base/draggable) and [`Droppable`](https://ej2.syncfusion.com/documentation/api/base/droppable). Draggable makes DOM to be dragged using mouse or touch gestures and Droppable mark required DOM as droppable zone.
## Initializing Draggable
You can make any element draggable by passing the element to Draggable constructor. Refer the following code snippet to enable draggable for the DOM element.
{% tab template="common/draggable-default" %}
```html
<template>
<div id='container'>
<div id='element1'>
<p>Draggable Element </p>
</div>
</div>
</template>
<script>
import { Draggable } from '@syncfusion/ej2-base';
import Vue from "vue";
export default {
mounted: function () {
var dragElement = document.getElementById('element1');
var draggable = new Draggable(dragElement, { clone: false });
}
}
</script>
<style>
#element1,
.helper {
height: 100px;
width: 150px;
border: 1px solid #cecece;
cursor: move;
user-select: none;
color: #6a77a7;
touch-action: none;
}
p {
padding-top: 23px;
text-align: center;
}
.helper {
opacity: 0.6;
}
.select {
border: 1px solid #cccccc;
background: #ededed;
}
</style>
```
{% endtab %}
## Creating Droppable zone
You can convert any DOM element as a droppable zone, which accepts the draggable elements. Refer the following code snippet to enable droppable zone.
{% tab template="common/droppable-default" %}
```html
<template>
<div id='droppable'>
<p class='drop'>
<span>Drop Target</span>
</p>
</div>
</template>
<script>
import { Droppable } from '@syncfusion/ej2-base';
import Vue from "vue";
export default {
mounted: function () {
var droppable = new Droppable(document.getElementById('droppable'));
}
}
</script>
<style>
.drop {
padding-top: 23px;
text-align: center;
}
#droppable {
margin: 5px;
line-height: 170px;
font-size: 14px;
width: 250px;
border: 1px solid #cecece;
background: #f6f6f6;
touch-action: none;
}
</style>
```
{% endtab %}
## Defining Drop Action
To define a drop action set [`drop`](https://ej2.syncfusion.com/documentation/api/base/droppable#drop) callback function during droppable object creation. You can get details of dropped element through dropped element property in event argument. Refer the following code snippet to use basic drag and drop action.
{% tab template="common/drag-drop-action", es5Template="drag-drop-template" %}
```html
<template>
<div id='container'>
<div id='droppable'>
<p class='drop'><span>Drop Target </span></p>
</div>
<div id='element1'>
<p class='drag-text'>Drag </p>
</div>
</div>
</template>
<script>
import { Draggable, Droppable } from '@syncfusion/ej2-base';
import Vue from "vue";
export default {
mounted: function () {
var draggable = new Draggable(document.getElementById('element1'), {
clone: false
});
var droppable = new Droppable(document.getElementById('droppable'), {
drop: (e) => {
e.droppedElement.querySelector('.drag-text').textContent = 'Dropped';
}
});
}
}
</script>
<style>
#element1 {
height: 100px;
width: 150px;
border: 1px solid #cecece;
cursor: move;
background: #cdffe3;
user-select: none;
touch-action: none;
}
#element1 p {
padding-top: 23px;
text-align: center;
}
.drop {
padding-top: 23px;
text-align: center;
}
#droppable {
margin: 5px;
line-height: 170px;
font-size: 14px;
width: 250px;
border: 1px solid #cecece;
background: #f6f6f6;
touch-action: none;
}
</style>
```
{% endtab %}
## See Also
[Define handle element for Draggable](https://ej2.syncfusion.com/documentation/api/base/draggable#handle)<br/>
[Restricting Draggable within conainer](https://ej2.syncfusion.com/documentation/api/base/draggable#dragarea)<br>
[Visual feedback of draggable element](https://ej2.syncfusion.com/documentation/api/base/draggable#clone)<br>
[Accepting specific drag element in droppable](https://ej2.syncfusion.com/documentation/api/base/droppable#accept)

Просмотреть файл

@ -0,0 +1,83 @@
# Event Binding
Syncfusion Vue UI components support Binding of both Custom and Native Events. For more information, refer official [Vue Documentation](https://vuejs.org/v2/guide/events.html)
## Custom Events
Custom events are the `Component` specific events provided by Syncfusion Vue components supported through `v-on` directive. The Syntax for Binding Custom Event is `v-on:event-name="function"`.
Refer the below code snippet for Binding of Custom Events.
```html
// Custom Event Binding
<template>
<div id="calendar">
<ejs-calendar v-on:created="display" />
</div>
</template>
<script>
import Vue from 'vue';
import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
Vue.use(CalendarPlugin);
export default {
methods: {
display: function() {
window.alert('Calendar Created');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
#calendar {
max-width: 250px;
margin: 0 auto;
}
</style>
```
## Native Events
Native events are the DOM events of Syncfusion Vue component's root element. `.native` modifier for `v-on` directive is used for binding these events. The Syntax for Binding Native Event is `v-on:event-name.native="function"`.
Refer the below code snippet for Binding Native Events.
```html
//Native Event Binding
<template>
<div id="button">
<ejs-button :content="name" v-on:click.native="clicked"></ejs-button>
</div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
export default {
data () {
return {
name: "Button"
};
},
methods: {
clicked: function() {
window.alert('Button Clicked');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
</style>
```

Просмотреть файл

@ -0,0 +1,29 @@
# Update Syncfusion npm package
The latest Syncfusion npm package can be updated with the help of [`npm-check-updates`](https://www.npmjs.com/package/npm-check-updates) package.
1. You can install the `npm-check-update package` globally to use this as CLI.
```bash
npm install -g npm-check-updates
ncu -u -f /^@syncfusion/
```
This will update the package.json file with latest version of all `@syncfusion` packages.
2. Now, run the following commands to update the packages in `node_modules` and remove the duplicate package which is already installed.
```bash
npm update
npm dedupe
```
## Updating a specific npm package
* Run the following commands from the command prompt in the application root to update a specific npm package in `node_modules` and remove the installed duplicate package.
```bash
npm update @syncfusion/ej2-grids
npm update @syncfusion/ej2-vue-grids
npm dedupe
```

Просмотреть файл

@ -0,0 +1,13 @@
# Overview
The Base (`ej2-base`) is the most common package which has common class definitions, libraries and methods for the Syncfusion Vue components.
## Key Features
* [Animation](./animation/)
* [Template Engine](./template/)
* [Localization](./localization/)
* [Internationalization](./internationalization/)
* [Drag and Drop](./drag-and-drop/)
* [Event Binding](./event-binding/)
* [Model Binding](./model-binding/)

Просмотреть файл

@ -0,0 +1,475 @@
# Internationalization
The `Internationalization` library provides support for formatting and parsing date and number objects
using the official [Unicode CLDR](http://cldr.unicode.org/) JSON data. The `en-US` locale is set as
default _culture_ and the `USD` is set as default _currencyCode_ for all Syncfusion Vue components.
## Loading Culture Data
It requires the following CLDR data to be loaded using the `loadCldr` function for cultures other than `en-US`.
| File Name | Path |
| ------------- | ------------- |
| ca-gregorian | cldr/main/en/ca-gregorian.json |
| timeZoneNames |cldr/main/en/timeZoneNames.json |
| numbers | cldr/main/en/numbers.json |
| numberingSystems | cldr/supplemental/numberingSystems.json |
| currencies | cldr/main/en/currencies.json |
>Note: For `en`, dependency files are already loaded in the library.
### Installing CLDR Data
CLDR data is available as npm package. So, you can install it through the below command to our package.
```bash
npm install cldr-data
```
### Binding to i18n library
```typescript
import { loadCldr } from '@syncfusion/ej2-base';
loadcldr(enNumberData, entimeZoneData);
```
## Changing Global Culture and Currency Code
To set the default culture and the currencyCode for all Syncfusion Vue components, you can use the methods
`setCulture` for setting default locale and `setCurrencyCode` for setting the currencyCode.
### Setting Global Culture
```typescript
import {setCulture} from '@syncfusion/ej2-base';
setCulture('ar');
```
### Setting Currency Code
```typescript
import { setCurrencyCode} from '@syncfusion/ej2-base';
setCurrencyCode('QAR');
```
>Note: If global culture is not set then `en-US` is set as default locale and the `USD` is set as a default currency code.
## Manipulating Numbers
<!-- markdownlint-disable MD024 -->
### Supported Format String
<!-- markdownlint-disable MD024 -->
Based on the [`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions)
number formatting and parsing operations are processed. You need to specify some or all of the following properties mentioned in the below table.
| No | Properties | Description |
| --- | --- | --- |
| 1 | `format` | Denotes the format to be set .Possible values are <br /> 1. **N -** denotes numeric type. <br /> 2. **C -** denotes currency type. <br /> 3. **P -** denotes percentage type. <br /> E.g: <br /> `formatNumber`( **1234344** ,{format:&#39;N4&#39;}). <br /> <br/>Note: If no format is specified it takes numeric as default format type. |
| 2 | `minimumFractionDigits` | Indicates the minimum number of fraction digits . Possible values are 0 to 20. |
| 3 | `maximumFractionDigits` | Indicates the maximum number of fraction digits. Possible values are 0 to 20. |
| 4 | `minimumSignificantDigits` | Indicates he minimum number of significant digits. Possible values are 1 to 21. <br /> **Note:** If `minimumSignificantDigits` is given it is mandatory to give `maximumSignificantDigits` |
| 5 | `maximumSignificantDigits` | Indicates he maximum number of significant digits. . Possible values are 1 to 21. <br />**Note:** If `maximumSignificantDigits` is given it is mandatory to give `minimumSignificantDigits` |
| 6 | `useGrouping` | Indicates whether to enable the group separator or not . By default grouping value will be true. |
| 7 | `minimumIntegerDigits` | Indicates the minimum number of the integer digits to be placed in the value. Possible values are 1 to 21. |
| 8 | `currency`| Indicates the currency code which needs to considered for the currency formatting. |
>Note: The `minimumIntegerDigits`, `minimumFractionDigits` and `maximumFractionDigits` are categorized
as group one,
`minimumSignificantDigits` and `maximumSignificantDigits` are categorized as group two.
If group two properties are defined, then the group one properties will be ignored.
### Custom number formatting and parsing
Custom number formatting and parsing are also supported by specifying the pattern directly
in the **format** property of `NumberFormatOptions`. Custom number format can be achieved by
using one or more custom format specifiers listed in the below table.
| Specifier | Description | Input | Format Output |
| ------- |--------------- | ---------------- | --------------- |
| 0 | Replaces the zero with the corresponding digit if one is present. Otherwise, zero appears in the result string. | `instance.formatNumber`(123,{format: '0000' }) | '0123' |
| # | Replaces the "#" symbol with the corresponding digit if one is present; otherwise, no digit appears in the result string.| `instance.formatNumber`(1234,{format: '####' }) | 1234 |
| . | Denotes the number of digits allowed after the decimal points if its not specified then no need to specify decimal point values. | `instance.formatNumber`(546321,{format: '###0.##0#' }) | 546321.000 |
| % | Percent specifier denotes the percentage type format. | `instance.formatNumber`(1,{format: '0000 %' }) | 0100 % |
| $ | Denotes the currency type format based on the global currency code specified. | `instance.formatNumber`(13,{format: '$ ###.00' }); | $ 13.00 |
| ; | Denotes separate formats for positive, negative and zero values. | `instance.formatNumber`(-120,{format: '###.##;(###.00);-0'}); | (120.00) |
| 'String' (single Quotes) | Denotes the characters enclosed within single Quote(') to be replaced in the resultant string. | `instance.formatNumber`(-123.44,{format: "####.## '@'"}) | 123.44 @ |
>Note: If custom format pattern is specified other [`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions) properties will not be considered.
### Number formatting
#### `getNumberFormat`
The [`getNumberFormat`](https://ej2.syncfusion.com/documentation/api/base/internationalization#getnumberformat)
method which will return a function that formats given numbers based on the
[`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions) specified.
{% tab template="common/intl-getNumber-format", es5Template="number-formatting-template" %}
```html
<template>
<div class="result"></div>
</template>
<script>
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
mounted:function(){
var intl = new Internationalization();
var nFormatter = intl.getNumberFormat({ skeleton: 'C3', currency: 'USD',minimumIntegerDigits:8});
var formattedValue = nFormatter(1234545.65)
document.querySelector('.result').innerHTML = formattedValue;
}
}
</script>
<style>
</style>
```
{% endtab %}
#### `formatNumber`
The [`formatNumber`](https://ej2.syncfusion.com/documentation/api/base/internationalization)
method which takes two arguments numeric value and[`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions)
and returns the formatted string.
{% tab template="common/intl-getNumber-format", es5Template="format-number-template" %}
```html
<template>
<div class="result"> </div>
</template>
<script>
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
mounted: function(){
var intl = new Internationalization();
var formattedString = intl.formatNumber(12345.65, { format:'C5' , useGrouping: false,
minimumSignificantDigits:1, maximumSignificantDigits:3 });
document.querySelector('.result').innerHTML = formattedString;
}
}
</script>
<style>
</style>
```
{% endtab %}
### Parsing
#### `getNumberParser`
The [`getNumberParser`](https://ej2.syncfusion.com/documentation/api/base/internationalization#getnumberparser) method which will return a function
that parses given string based on the [`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions) specified.
{% tab template="common/intl-parseNumber1", es5Template="parser-template" %}
```html
<template>
<div class="result"></div>
</template>
<script>
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
mounted:function(){
var intl = new Internationalization();
var nParser = intl.getNumberParser({ format:'P2' , useGrouping: false});
var val = nParser('123567.45%');
document.querySelector('.result').innerHTML = val + '';
}
}
</script>
<style>
</style>
```
{% endtab %}
#### `parseNumber`
The [`parseNumber`](https://ej2.syncfusion.com/documentation/api/base/internationalization#parsenumber) method which takes two arguments the string value, [`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions) and returns the numeric value.
{% tab template="common/intl-parseNumber" %}
```html
<template>
<div class="result"></div>
</template>
<script>
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
mounted:function(){
var intl = new Internationalization();
var val = intl.parseNumber('$01,234,545.650', { format: 'C3', currency: 'USD', minimumIntegerDigits: 8 });
document.querySelector('.result').innerHTML = val + '';
}
}
</script>
<style>
</style>
```
{% endtab %}
## Manipulating DateTime
### Supported Format String
Based on the [`DateFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/dateFormatOptions)
date formatting and parsing operations are processed. You need to specify some or all of the following properties
mentioned below table.
| Options | Descriptions |
| --- | --- | --- |
| Type | It specifies the type of format to be used supported types .<br/>1. **`date`** <br/> 2. **`dateTime`** <br/> 3. **`time`** <br/> Based on the type specified the supported skeletons are given below. <br/> 1. short <br/> 2. medium, <br/>3. long <br/>4. full <br/> **E.g:** `formatDate`(new Date(), {type: &#39;date&#39;, skeleton:medium})<br/> Note: If no type is specified then **date** type is set by default. |
| skeleton | Specifies the format in which the `dateTime` format will process |
<!-- markdownlint-disable MD036 -->
**Date type skeletons**
| skeleton | Option input | Format Output |
| --- | --- | --- |
| short | {type: &#39;date&#39;, skeleton:&#39;short&#39;}) | 11/4/16 |
| medium | {type: &#39;date&#39;, skeleton:&#39;medium&#39;}) | Nov 4, 2016 |
| long | {type: &#39;date&#39;, skeleton:&#39;long&#39;} | November 4, 2016 |
| full | {type: &#39;date&#39;, skeleton:full}) | Friday, November 4, 2016 |
**Time type skeletons**
| skeleton | Option input | Format Output |
| --- | --- | --- |
| short | {type: &#39;time&#39;, skeleton:&#39;short&#39;} | 1:03 PM |
| medium | {type: &#39;time&#39;, skeleton:&#39;medium&#39;} | 1:03:04 PM |
| Long | {type: &#39;time&#39;, skeleton:&#39;long&#39;}) | 1:03:04 PM GMT+5 |
| full | {type: &#39;time&#39;, skeleton:&#39;full&#39;}) | 1:03:04 PM GMT+05:30 |
**DateTime type skeletons**
| Skeleton | Option input | Format Output |
| --- | --- | --- |
| short | {type: &#39;`dateTime`&#39;, skeleton:&#39;short&#39;} | 11/4/16, 1:03 PM |
| medium | {type: &#39;`dateTime`, skeleton:&#39;medium&#39;} | Nov 4, 2016, 1:03:04 PM |
| Long | {type: &#39;`dateTime`&#39;, skeleton:&#39;long&#39;}) | November 4, 2016 at 1:03:04 PM GMT+5 |
| full | {type: &#39;`dateTime`&#39;, skeleton:&#39;full&#39;}) | Friday, November 4, 2016 at 1:03:04 PM GMT+05:30 |
**Additional skeletons**
Apart from the standard date type formats additional format are supported by using the additional skeletons given in below table.
| skeleton | Option input | Format Output |
| --- | --- | --- |
| d | {skeleton:&#39;d&#39;} | 7 |
| E | {skeleton:&#39;E&#39;} | Mon |
| Ed | {skeleton:&#39;Ed&#39;} | 7 Mon |
| Ehm | {skeleton:&#39;Ehm&#39;}) | Mon 12:43 AM |
| EHm | {skeleton:&#39;EHm;}); | Mon 12:43 |
| Ehms | {skeleton:&#39;Ehms&#39; } | Mon 2:45:23 PM |
| EHms | {skeleton:&#39;EHms&#39;}) | Mon 12:45:45 |
| Gy | {skeleton:&#39;Gy&#39; } | 2016 AD |
| GyMMM | {skeleton:&#39;GyMMM&#39;} | : Nov 2016 AD |
| GyMMMd | {skeleton:&#39;GyMMMd&#39;} | Nov 7, 2016 AD |
| GyMMMEd | {skeleton:&#39;GyMMMEd&#39;} | Mon, Nov 7, 2016 AD |
| h | {skeleton:&#39;h&#39;} | 12 PM |
| H | {skeleton:&#39;H&#39;} | 12 |
| hm | {skeleton:&#39;hm&#39;} | 12:59 PM |
| Hm | {skeleton:&#39;Hm&#39;} | 12:59 |
| hms | {skeleton:&#39;hms&#39;} | 12:59:13 PM |
| Hms | {skeleton:&#39;Hms&#39;} | 12:59:13 |
| M | {skeleton:&#39;M&#39;} | 11 |
| Md | {skeleton:&#39;Md&#39;} | 11/7 |
| MEd | {skeleton:&#39;hms&#39;} | Mon, 11/7 |
| MMM | {skeleton:&#39;MMM&#39;} | Nov |
| MMMEd | {skeleton:&#39;MMMEd&#39;} | Mon, Nov 7 |
| MMMd | {skeleton:&#39;MMMEd&#39;} | Nov 7 |
| ms | {skeleton:&#39;ms&#39;} | 59:13 |
| y | {skeleton:&#39;y&#39; } | 2016 |
| yM | {skeleton:&#39;yM&#39; } | 11/2016 |
| yMd | {skeleton:&#39;yMd&#39; } | 11/7/2016 |
| yMEd | {skeleton:&#39;yMEd&#39; } | Mon, 11/7/2016 |
| yMMM | {skeleton:&#39;yMMM&#39; } | Nov 2016 |
| yMMMd | {skeleton:&#39;yMMMd&#39;} | Nov 7, 2016 |
| yMMMEd | {skeleton:&#39;yMMMEd&#39;} | Mon, Nov 7, 2016 |
| yMMM | {skeleton:&#39;yMMM&#39;} | Nov 2016 |
>Note: Culture specific format skeletons are also supported.
### Custom Formats
To use the custom date and time formats we need to specify the date/time pattern directly in the *format* property.
The custom format string must contain one or more of the following standard date/time symbols
| Symbols | Description |
|--------- |------------- |
| G | Denotes the era in the date |
| y | Denotes the year.|
| M / L | Denotes month.|
| E / c | Denotes the day of week. |
| d | Denotes the day of month. |
| h / H | Denotes the hour. *h* for 12 hour and *H* for 24 hours format. |
| m | Denotes minutes. |
| s | Denotes seconds. |
| a | Denotes the am/pm designator it will only be displayed if hour is specified in the h format. |
| z | Denotes the time zone. |
| ' (single quotes) | To display words in the formatted date you can specify the words with in the single quotes |
**Custom format example**
```typescript
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
var intl = new Internationalization();
var formattedString = intl.formatDate(new Date('1/12/2014 10:20:33'), { format: '\'year:\'y' \'month:\' MM' });
//Output: "year:2014 month:01"
```
>Note: If format property is given in options other properties are not considered.
<!-- markdownlint-enable MD036 -->
### Formatting
#### `getDateFormat`
The [`getDateFormat`](https://ej2.syncfusion.com/documentation/api/base/internationalization#getdateformat)
method which will return a function that formats given date object based on the
[`DateFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/dateFormatOptions) specified.
{% tab template="common/intl-formatDate" %}
```html
<template>
<div class="result"></div>
</template>
<script>
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
mounted:function(){
var intl = new Internationalization();
var dFormatter = intl.getDateFormat({ skeleton: 'full', type: 'dateTime' });
var formattedString = dFormatter(new Date('1/12/2014 10:20:33'));
document.querySelector('.result').innerHTML = formattedString;
}
}
</script>
<style>
</style>
```
{% endtab %}
#### `formatDate`
The [`formatDate`](https://ej2.syncfusion.com/documentation/api/base/internationalization)
method which takes two arguments date object,
[`DateFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/dateFormatOptions) and
returns the formatted string.
{% tab template="common/intl-formatDate" %}
```html
<template>
<div class="result"></div>
</template>
<script>
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
mounted:function(){
var intl = new Internationalization();
var date = new Date();
var formattedString = intl.formatDate(new Date('1/12/2014 10:20:33'), { skeleton: 'GyMMM' });
document.querySelector('.result').innerHTML = formattedString;
}
}
</script>
<style>
</style>
```
{% endtab %}
<!-- markdownlint-enable MD036 -->
### Parsing
#### `getDateParser`
The [`getDateParser`](https://ej2.syncfusion.com/documentation/api/base/internationalization#getdateParser)
method which will return a function that parses given string based on the
[`DateFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/dateFormatOptions) specified.
{% tab template="common/intl-parseDate" %}
```html
<template>
<div class="result"> </div>
</template>
<script>
import Vue from 'vue';
import {Internationalization} from '@syncfusion/ej2-base';
export default {
mounted:function(){
var intl = new Internationalization();
var dParser = intl.getDateParser({skeleton: 'full', type: 'dateTime'});
var val = dParser('Friday, November 4, 2016 at 1:03:04 PM GMT+05:30');
document.querySelector('.result').innerHTML = val.toString();
}
}
</script>
<style>
</style>
```
{% endtab %}
#### `parseDate`
The [`parseDate`](https://ej2.syncfusion.com/documentation/api/base/internationalization#parsedate) method which takes two argument's string value, [`DateFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/dateFormatOptions) and returns the date Object.
{% tab template="common/intl-parseDate1" %}
```html
<template>
<div class="result"></div>
</template>
<script>
import Vue from 'vue';
import {Internationalization} from '@syncfusion/ej2-base';
export default {
mounted:function(){
var intl = new Internationalization();
var val = intl.parseDate('11/2016',{skeleton: 'yM'});
document.querySelector('.result').innerHTML = val.toString();
}
}
</script>
<style>
</style>
```
{% endtab %}

Просмотреть файл

@ -0,0 +1,96 @@
# Localization
Localization library allows you to localize the text content of the Syncfusion Vue UI component.
## Loading translations
To load translation object in your application use `load` function of `L10n` class.
{% tab template="common/intl" %}
```html
<template>
<div id="app">
<ejs-grid :dataSource='data' locale='de-DE' :allowGrouping='true' :allowPaging='true' :pageSettings='pageOptions' height='220px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { GridPlugin, Page, Group } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
setCulture('de-DE');
L10n.load({
'de-DE': {
'grid': {
'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte',
'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben',
'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster',
'Item': 'Artikel',
'Items': 'Artikel'
},
'pager':{
'currentPageInfo': '{0} von {1} Seiten',
'totalItemsInfo': '({0} Beiträge)',
'firstPageTooltip': 'Zur ersten Seite',
'lastPageTooltip': 'Zur letzten Seite',
'nextPageTooltip': 'Zur nächsten Seite',
'previousPageTooltip': 'Zurück zur letzten Seit',
'nextPagerTooltip': 'Zum nächsten Pager',
'previousPagerTooltip': 'Zum vorherigen Pager'
}
}
});
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
pageOptions: { pageSize: 7 }
};
},
provide: {
grid: [Page, Group]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
```
{% endtab %}
## Changing current locale
Current locale can be changed for all the Essential JS 2 components in your application by invoking
`setCulture` function with your desired culture name.
```typescript
import {L10n, setCulture} from '@syncfusion/ej2-base';
L10n.load({
'fr-BE': {
'Button': {
'id': 'Numéro de commande',
'date':'Date de commande'
}
}
});
setCulture('fr-BE');
```
>Note: Before changing a culture globally, ensure that locale text for the concerned culture is loaded through `L10n.load` function.

Просмотреть файл

@ -0,0 +1,50 @@
# Model Binding
## Integrating Vue model binding in Syncfusion Vue UI components
Syncfusion Vue UI components support model binding through the `v-model` directive.
The model binding support in Syncfusion Vue components uses custom 'modelchanged' event, which is used to notify Vue that a model is changed.
* Syncfusion Vue UI components that are initialized from form elements support model binding.
Refer to the following code snippet.
{% tab template="common/model", isDefaultActive=true %}
```html
<template>
<div id="app">
<ejs-checkbox v-model="checked" label="EJ2 Vue Checkbox" :checked="checked" />
<p>
Checkbox State: <span id="checked-state" v-text="checked" ></span>
</p>
</div>
</template>
<script>
import Vue from 'vue';
import { CheckBoxPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(CheckBoxPlugin);
export default {
data () {
return {
checked: true
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
#app {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
```
{% endtab %}

Просмотреть файл

@ -0,0 +1,8 @@
* [Event Binding](common/event-binding.md)
* [Model Binding](common/model-binding.md)
* [Template](common/template.md)
* [Animation](common/animation.md)
* [Localization](common/localization.md)
* [Internationalization](common/internationalization.md)
* [Drag and Drop](common/drag-and-drop.md)
* [Update NPM Packages](common/how-to/update-npm-package.md)

Просмотреть файл

@ -0,0 +1,264 @@
# Template
The Syncfusion Vue UI components support native Vue templates using single file components and Vue.component().
The two ways to configure template support are:
* Single File Components (.vue file)
* Vue.component()
## Single file components
* Define the template in a template.vue file, and create an empty object `data` in the **data option** of the template.vue file.
* Pass arguments as properties of a data object.
Refer to the following code snippet of template.vue file.
```html
// template.vue
<template>
<div class="button">
<ejs-button :content="`${data.ShipCountry}`"></ejs-button>
</div>
</template>
<script>
export default {
data () {
return {
data: {}
}
}
}
</script>
```
* Import the template.vue file in the corresponding app.vue file as specified in the following code snippet.
```html
import buttonTemplate from './template.vue'
```
* Create a template function which returns an object { key: 'template', value: 'importedTemplate' }.
```html
cTemplate: function(e) {
return {
template: buttonTemplate
};
}
```
* Template function is assigned to the template property of the Syncfusion Vue component.
Refer to the following code snippet of App.vue file.
```html
// App.vue
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="ds">
<e-columns>
<e-column headerText='Ship Country' width='150' textAlign='Center' :template='cTemplate' />
<e-column field="OrderID" headerText="Order ID" width=120 textAlign="Right" />
<e-column field="CustomerName" headerText="Customer Name" width=150 />
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { empData } from "./data";
import buttonTemplate from "./template.vue";
Vue.use(GridPlugin);
export default {
data() {
return {
ds: empData,
cTemplate: function(e) {
return {
template: buttonTemplate
};
}
};
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
```
## Vue.component()
The template is initialized with `Vue.component()` where template is provided with the template option.
* The template is initialized with `Vue.component()` where template is provided with the template option.
* Pass arguments as properties of a data object.
```html
var demoTemplate = Vue.component("demo", {
template: "<ejs-button :content="`${data.ShipCountry}`"></ejs-button>",
data() {
return {
data: {}
};
}
});
```
* Create a template function which returns an object { key: 'template', value: 'importedTemplate' }.
```html
cTemplate: function(e) {
return {
template: demoTemplate
};
}
```
* Template function is assigned to the template property of the Syncfusion Vue component.
* Refer to the following code snippet of App.vue file.
```html
// App.vue
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="ds">
<e-columns>
<e-column headerText='Ship Country' width='150' textAlign='Center' :template='cTemplate' />
<e-column field="OrderID" headerText="Order ID" width=120 textAlign="Right" />
<e-column field="CustomerName" headerText="Customer Name" width=150 />
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { empData } from "./data";
Vue.use(GridPlugin);
var demoTemplate = Vue.component("demo", {
template: "<ejs-button>{{data.ShipCountry}}</ejs-button>",
data() {
return {
data: {}
};
}
});
export default {
data() {
return {
ds: empData,
cTemplate: function(e) {
return {
template: demoTemplate
};
}
};
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
```
## Template sample
{% tab template="common/template", isDefaultActive=true %}
```html
<template>
<div id="grid">
<ejs-grid ref="grid" :dataSource="ds">
<e-columns>
<e-column field="OrderID" headerText="Order ID" width=120 textAlign="Right" />
<e-column field="CustomerName" headerText="Customer Name" width=150 />
<e-column field="ShipCountry" headerText="Ship Country" width=150 :template='cTemplate' />
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
Vue.use(GridPlugin);
Vue.use(ButtonPlugin);
var demoTemplate = Vue.component("demo", {
template: '<ejs-button :content="`${data.ShipCountry}`"></ejs-button>',
data() {
return {
data: {}
};
}
});
var empData = [{
OrderID: 10248,
ShipCountry: "France",
CustomerName: "Paul Henriot"
},
{
OrderID: 10249,
ShipCountry: "Germany",
CustomerName: "Karin Josephs"
},
{
OrderID: 10250,
ShipCountry: "Brazil",
CustomerName: "Mario Pontes"
},
{
OrderID: 10251,
ShipCountry: "France",
CustomerName: "Mary Saveley"
}];
export default {
data () {
return {
ds: empData,
cTemplate: function (e) {
return {
template: demoTemplate
};
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
#app {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
```
{% endtab %}

46
src/common/deployment.md Normal file
Просмотреть файл

@ -0,0 +1,46 @@
# Deployment
## CDN
The CDN links are provided individually for all the scripts and style sheets of Syncfusion Vue UI components.
The CDN link is provided to following files in the package
1. UMD Files
2. CSS Files
_The latest minified versions of all UMD, Global and CSS files are available on CDN:_
* **`https://cdn.syncfusion.com/ej2/PACKAGENAME/dist/PACKAGENAME.umd.min.js`**
* **`https://cdn.syncfusion.com/ej2/PACKAGENAME/styles/THEMENAME.css`**
For example
* [https://cdn.syncfusion.com/ej2/ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js](https://cdn.syncfusion.com/ej2/ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js)
* [https://cdn.syncfusion.com/ej2/ej2-vue-inputs/styles/material.css](https://cdn.syncfusion.com/ej2/ej2-vue-inputs/styles/material.css)
_Versioned files are also available on CDN._
* **`https://cdn.syncfusion.com/ej2/VERSION/PACKAGENAME/dist/PACKAGENAME.umd.min.js`**
* **`https://cdn.syncfusion.com/ej2/VERSION/PACKAGENAME/styles/THEMENAME.css`**
For example
* [https://cdn.syncfusion.com/ej2/1.0.18/ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js](https://cdn.syncfusion.com/ej2/1.0.18/ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js)
* [https://cdn.syncfusion.com/ej2/1.0.18/ej2-vue-inputs/styles/material.css](https://cdn.syncfusion.com/ej2/1.0.18/ej2-vue-inputs/styles/material.css)
## Packages
Syncfusion Vue packages is published and available in public
[npm](https://www.npmjs.com/search?q=ej2-vue&page=1&ranking=optimal) registry.
### Anatomy of NPM Packages
Syncfusion Vue UI components are shipped as npm packages. Following table explains the purpose of each file available in the package.
| Files | Purpose |
|---------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `dist/es6` | This folder contains the ES6 formatted JS file of the package. |
| `dist/<packagename>.umd.min.js` `dist/<packagename>.umd.js` | For applications using AMD or Common JS based module loader can be utilize these files. |
| `src/` | This folder contains the script files in AMD format. You can connect these AMD files as a package in System JS or Require JS. |
| `styles/<theme name>.css` `styles/<theme name>.scss` | This folder contains the CSS and SCSS files of the package. ||

Просмотреть файл

@ -0,0 +1,59 @@
<!-- markdownlint-disable MD024 -->
# Getting Started with Syncfusion Vue UI Components using direct scripts in a quickstart application
This article provides a step-by-step introduction to configure Syncfusion Vue UI components (Essential JS 2) and build a simple HTML web application.
## Getting started by using CDN link for script and style references
### Prerequisites
* [Visual Studio Code](https://code.visualstudio.com/)
### Configure Syncfusion JavaScript (ES5) control in the application
1. Create an app folder `quickstart` for the Syncfusion controls and open it in the Visual Studio Code.
2. The below hosted CDN links contains all Syncfusion Vue (ES) components resources in a single file.
> Scripts: `https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js`
>
> Styles: `https://cdn.syncfusion.com/ej2/material.css`
3. Create an HTML file `~/quickstart/index.html` and add the below Syncfusion and [Vue] (https://vuejs.org/v2/guide/installation.html#CDN) CDN link references. Now, the `Button` element and register the `Syncfusion Vue Button` component in the index.html by using the following code.
{% tab template="common/getting-started-es5", sourceFiles="index.html", skipVue="true" %}
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Syncfusion Vue (ES5) UI Components</title>
<!-- Essentail JS2 for Vue (All components Styles) -->
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css" />
<!-- Vue library file-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js" type="text/javascript"></script>
<!-- Essential JS 2 for Vue global script -->
<script src="https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Syncfusion Vue Button Components</h2>
<div id="app">
<ejs-button is-primary="true">Button</ejs-button>
</div>
<script>
new Vue({
el: '#app',
});
</script>
</body>
</html>
```
{% endtab %}
Note : While using Syncfusion Vue components in DOM templates, camelCased property (isPrimary) names need to specify in the kebab-cased (is-primary) equivalents.
4. Finally, run the `~/quickstart/index.html` file in the web browser and it will render the Syncfusion Vue Button component.

Просмотреть файл

@ -0,0 +1,5 @@
# Overview
This document illustrates how to build and run a simple Syncfusion Vue (Essential JS 2) component in web applications.
* [Getting Started with Syncfusion Vue UI Components and Vue CLI](./vue-cli/)

Просмотреть файл

@ -0,0 +1,3 @@
* [Vue CLI](getting-started/vue-cli.md)
* [Vue CLI with SCSS](getting-started/vue-sass.md)
* [Direct Scripts](getting-started/direct-scripts.md)

Просмотреть файл

@ -0,0 +1,144 @@
# Getting Started with Syncfusion Vue UI Components and Vue CLI
You can use [`Vue CLI`](https://github.com/vuejs/vue-cli) to setup your Vue applications.
To install Vue CLI, use the following command.
```bash
npm install -g @vue/cli
npm install -g @vue/cli-init
```
Start a new project using the following Vue CLI command.
```bash
vue init webpack-simple quickstart
cd quickstart
npm install
```
## Adding Syncfusion packages
All the available Syncfusion Vue packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) registry.
Choose the component to be installed. In this application, the button component is installed.
To install the button component, use the following command.
```bash
npm install @syncfusion/ej2-vue-buttons --save
```
## Registering Vue component
The two ways to register the Vue component are:
* Vue.use()
* Vue.component()
### Using Vue.use()
Import the component plugin from the EJ2 Vue package and register it using Vue.use() with component plugin as its argument.
Refer to the following code snippet.
```typescript
import { ButtonPlugin } from '@syncfuion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
```
Note : By registering the component plugin in Vue, all child directives can also be globally registered.
### Using Vue.component()
Import the component and component plugin from EJ2 Vue package and register it using the Vue.component() with name of component from component plugin and the EJ2 Vue component as its arguments.
Refer to the following the code snippet.
```typescript
import { ButtonComponent, ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.component(ButtonPlugin.name, ButtonComponent);
```
Note: By using the Vue.component(), only the EJ2 Vue component can be registered. The child directives should be registered separately.
## Creating Vue sample
Add the EJ2 Vue button to the `<template>` section of the `App.vue` file in src directory using `<ejs-button>`. The content attribute of the button component is provided as name in the data option of the `<script>` section.
```html
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<ejs-button :content="name"></ejs-button>
</div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
export default {
name: 'app',
data () {
return {
msg: 'Hi EJ2 Components for Vue',
name: 'Button'
}
}
}
</script>
```
## Adding CSS reference
Add the styles of the button component to the `<style>` section of the `App.vue` file as follows.
```html
<style>
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
</style>
```
## Running the application
Now, run the `npm run dev` command in the console to build your application and open it in the browser.
{% tab template="common/default", isDefaultActive=true %}
```html
<template>
<div id="app">
<ejs-button :content="name"></ejs-button>
</div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
export default {
data () {
return {
msg: 'Hi EJ2 Components for Vue',
name: 'Button'
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
#app {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
```
{% endtab %}

Просмотреть файл

@ -0,0 +1,166 @@
# Overview
Vue CLI 3 is a complete rewrite of the previous version of the Vue command line interface tool and comes with a set of new features which makes Vue development and the management of Vue projects a lot easier.
# Getting Started with Syncfusion Vue UI Components and Vue CLI
You can use [`Vue CLI`](https://github.com/vuejs/vue-cli) to setup your Vue applications.
At first it is mostly recommended to uninstall the old Vue CLI package from your system.
```bash
npm uninstall vue-cli -g
```
Then install Vue CLI 3, use the following commands.
```bash
npm install -g @vue/cli
npm install -g @vue/cli-init
```
Start a new project using the following Vue CLI command.
```bash
vue create quickstart
cd quickstart
npm install
```
Then well be prompted with the option to pick a default preset or to manually select features. Using the arrow keys, we can highlight our selection. But now we can select the `default`, then hit enter. If you wish to select manually, please use this [`vue-create`](https://cli.vuejs.org/guide/creating-a-project.html#vue-create) link for references.
```bash
cd quickstart
npm install
```
## Adding Syncfusion packages
All the available Syncfusion Vue packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) registry.
Choose the component to be installed. In this application, the calendar component is installed.
To install the calendar component, use the following command.
```bash
npm install @syncfusion/ej2-vue-calendars --save
```
## Registering Vue component
The two ways to register the Vue component are:
* Vue.use()
* Vue.component()
### Using Vue.use()
Import the component plugin from the EJ2 Vue package and register it using Vue.use() with component plugin as its argument.
Refer to the following code snippet.
```typescript
import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
Vue.use(CalendarPlugin);
```
Note : By registering the component plugin in Vue, all child directives can also be globally registered.
### Using Vue.component()
Import the component and component plugin from EJ2 Vue package and register it using the Vue.component() with name of component from component plugin and the EJ2 Vue component as its arguments.
Refer to the following the code snippet.
```typescript
import { CalendarComponent, CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
Vue.component(CalendarComponent, CalendarPlugin);
```
Note: By using the Vue.component(), only the EJ2 Vue component can be registered. The child directives should be registered separately.
## Creating Vue sample
Add the EJ2 Vue calendar to the `<template>` section of the `App.vue` file or inside components in src directory using `<ejs-calendar>`. The content attribute of the calendar component is provided as name in the data option of the `<script>` section.
```html
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<ejs-calendar ></ejs-calendar>
</div>
</template>
<script>
import Vue from 'vue';
import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
Vue.use(CalendarPlugin);
export default {
name: 'app',
data () {
return {
msg: 'Hi EJ2 Components for Vue',
name: 'Calendar'
}
}
}
</script>
```
## Adding CSS reference
Add the styles of calendar component to the `<style>` section of the `App.vue` file as follows.
```html
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
</style>
```
## Running the application
Now, run the `npm run serve` command in the console to build your application and open it in the browser.
{% tab template="common/cli3", isDefaultActive=true %}
```html
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<ejs-calendar ></ejs-calendar>
</div>
</template>
<script>
import Vue from 'vue';
import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
Vue.use(CalendarPlugin);
export default {
name: 'app',
data () {
return {
msg: 'Hi EJ2 Components for Vue',
name: 'Calendar'
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
#app {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
```
{% endtab %}

Просмотреть файл

@ -0,0 +1,225 @@
# Getting Started with Syncfusion Vue UI Components and Vue CLI
You can use [`Vue CLI`](https://github.com/vuejs/vue-cli) to setup your Vue applications.
To install Vue CLI, use the following command.
```bash
npm install -g @vue/cli
npm install -g @vue/cli-init
```
Start a new project using the following Vue CLI command.
```bash
vue init webpack-simple quickstart
cd quickstart
npm install
```
## Adding Syncfusion packages
All the available Syncfusion Vue packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) registry.
Choose the component to be installed. In this application, the button component is installed.
To install the button component, use the following command.
```bash
npm install @syncfusion/ej2-vue-grids --save
```
## Registering Vue component
The two ways to register the Vue component are:
* Vue.use()
* Vue.component()
### Using Vue.use()
Import the component plugin from the EJ2 Vue package and register it using Vue.use() with component plugin as its argument.
Refer to the following code snippet.
```typescript
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
Vue.use(GridPlugin);
```
Note: By registering the component plugin in Vue, all child directives can also be globally registered.
### Using Vue.component()
Import the component and component plugin from EJ2 Vue package and register it using the Vue.component() with name of component from component plugin and the EJ2 Vue component as its arguments.
Refer to the following the code snippet.
```typescript
import { GridComponent, GridPlugin } from "@syncfusion/ej2-vue-grids";
Vue.use(GridPlugin.name, GridComponent);
```
Note: By using the Vue.component(), only the EJ2 Vue component can be registered. The child directives should be registered separately.
## Creating Vue sample
Add the EJ2 Vue button in the `<template>` section of the `App.vue` file in src directory using `<ejs-button>`. The content attribute of the button component is provided as name in the data option of the `<script>` section.
```html
<template>
<div id="app">
<ejs-grid :dataSource="data" :allowPaging="true" :pageSettings="pageSettings">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="90"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, GridComponent } from "@syncfusion/ej2-vue-grids";
Vue.use(GridPlugin);
export default {
data() {
return {
data: [
{ OrderID: 10248, CustomerID: "VINET", Freight: 32.38 },
{ OrderID: 10249, CustomerID: "TOMSP", Freight: 11.61 },
{ OrderID: 10250, CustomerID: "HANAR", Freight: 65.83 },
{ OrderID: 10251, CustomerID: "VICTE", Freight: 41.34 },
{ OrderID: 10252, CustomerID: "SUPRD", Freight: 51.3 },
{ OrderID: 10253, CustomerID: "HANAR", Freight: 58.17 },
{ OrderID: 10254, CustomerID: "CHOPS", Freight: 22.98 }
],
pageSettings: { pageSize: 5 }
};
},
provide: {
grid: [Page]
}
};
</script>
```
## Adding SCSS reference
Add the styles of Grid component to the `<style>` section of the `App.vue` file as follows.
```html
<style lang="scss">
// syncfusion styles
@import "../node_modules/@syncfusion/ej2-base/styles/material.scss";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.scss";
</style>
```
## Adding includePaths option
While using scss files for style reference, you need to configure the `includePaths` in sass-loader options in the `webpack.config.js` like below:
```ts
module: {
rules: [
....
....
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
'scss': [
'vue-style-loader',
'css-loader',
{
loader: "sass-loader",
options: {
includePaths: [
path.resolve(__dirname,"./node_modules/@syncfusion")
]
}
}
]
....
....
}
}
}
....
....
]
}
```
## Running the application
Now, run the `npm run dev` command in the console to build your application and open it in the browser.
{% tab template="common/sass", isDefaultActive=true %}
```html
<template>
<div id="app">
<ejs-grid :dataSource="data" :allowPaging="true" :pageSettings='pageSettings'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
pageSettings: { pageSizes: true, pageSize: 9 }
};
},
provide: {
grid: [Page]
}
}
</script>
<style lang="scss">
// syncfusion styles
@import "../node_modules/@syncfusion/ej2-base/styles/material.scss";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.scss";
</style>
```
{% endtab %}
## How To Override styles
In Syncfusion Vue components, you can override control styles by replacing sass variable values like below:
```html
<style lang="scss">
// SASS Variable override
$accent: black;
$primary: blue;
// syncfusion styles
@import "../node_modules/@syncfusion/ej2-base/styles/material.scss";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.scss";
</style>
```

Просмотреть файл

@ -0,0 +1,29 @@
<!-- markdownlint-disable MD024 -->
# Installation
## Install by using npm CLI
Syncfusion Vue (Essential JS 2) packages are published in [npm](https://www.npmjs.com/search?q=ej2-vue). You can install the necessary packages from npms install command. For example, grid package can be installed using the following command.
```sh
npm install @syncfusion/ej2-vue-grids --save
```
## Install by using package.json
1. Add the Syncfusion Vue (Essential JS 2) package references in the `dependencies` of `~/package.json` file.
```json
{
"dependencies": {
"@syncfusion/ej2-vue-grids": "*",
"@syncfusion/ej2-vue-charts": "*"
}
}
```
> The `*` indicates the latest version of npm package. Refer the [documentation](https://docs.npmjs.com/misc/semver#versions) for more details about npm versioning.
2. Now, open the command prompt and run the `npm install` command line. This will install all npm dependencies in a single command line.
> Refer the [documentation](https://docs.npmjs.com/files/package.json) for more details about npm package.json

Просмотреть файл

@ -0,0 +1,29 @@
# Syncfusion Vue UI Components (Essential JS 2)
Syncfusion Vue is a modern UI Components library that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It also includes complete support for Angular, React, ASP.NET MVC and ASP.NET Core frameworks.
## How to best read this user guide
* The best way to get started would be to read the "Getting Started" section
of the documentation for the component that you would like to start using first.
The "Getting Started" guide gives just enough information that you need to know
before starting to write code. This is the only section that we recommend reading
end-to-end before starting to write code, all other information can be referred as needed.
* Now that you are familiar with the basics of using the component, the next
step would be to start integrating the component into your application.
A good starting point would be to refer to the code snippets in the
[online sample browser](http://ej2.syncfusion.com/vue/demos/) which contains
hundreds of code samples, it is very likely that you will find a code sample that
resembles your intended usage scenario.
* Another valuable resource is the API reference which provides detailed information
on the object hierarchy as well as the settings available on every object.
## Getting Help
If you are still not able to find the information that you are looking for at the
self-help resources mentioned above then please contact us by creating a support
ticket in our support site, or ask your query in StackOverflow with tag `syncfusion-ej2`.
>Note: Syncfusion does not collect any kind of information when our components are used in customer applications.

138
src/common/right-to-left.md Normal file
Просмотреть файл

@ -0,0 +1,138 @@
# Right-To-Left
Right To Left (RTL) can be enabled for Syncfusion Vue UI components by calling `enableRtl` with
`true`. This will render all the Syncfusion Vue components in the right to left direction. Find the code snippet
for this below.
{% tab template="common/right-to-left" %}
```html
<template>
<div id="app">
<ejs-grid :dataSource='data' locale='ar-AE' :allowPaging='true' :pageSettings='pageOptions'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { L10n, setCulture, enableRtl } from '@syncfusion/ej2-base';
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
setCulture('ar-AE');
// Enables Right to left alignment for all components
enableRtl(true);
L10n.load({
'ar-AE': {
'grid': {
'EmptyRecord': 'لا سجلات لعرضها',
'EmptyDataSourceError': 'يجب أن يكون مصدر البيانات فارغة في التحميل الأولي منذ يتم إنشاء الأعمدة من مصدر البيانات في أوتوجينيراتد عمود الشبكة'
},
'pager':{
'currentPageInfo': '{0} من {1} صفحة',
'totalItemsInfo': '({0} العناصر)',
'firstPageTooltip': 'انتقل إلى الصفحة الأولى',
'lastPageTooltip': 'انتقل إلى الصفحة الأخيرة',
'nextPageTooltip': 'انتقل إلى الصفحة التالية',
'previousPageTooltip': 'انتقل إلى الصفحة السابقة',
'nextPagerTooltip': 'الذهاب إلى بيجر المقبل',
'previousPagerTooltip': 'الذهاب إلى بيجر السابقة'
}
}
});
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
pageOptions: { pageSize: 7 }
};
},
provide: {
grid: [Page]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
```
{% endtab %}
## Enable RTL to individual component
To enable the RTL to an individual component, set the `enableRtl` property directly in its model options. For illustration, the `enableRtl` is added to the Grid component in following code snippet.
{% tab template="common/right-to-left" %}
```html
<template>
<div id="app">
<ejs-grid :dataSource='data' locale='ar-AE' :enableRtl='true' :allowPaging='true' :pageSettings='pageOptions'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
setCulture('ar-AE');
// Enables Right to left alignment for all components
L10n.load({
'ar-AE': {
'grid': {
'EmptyRecord': 'لا سجلات لعرضها',
'EmptyDataSourceError': 'يجب أن يكون مصدر البيانات فارغة في التحميل الأولي منذ يتم إنشاء الأعمدة من مصدر البيانات في أوتوجينيراتد عمود الشبكة'
},
'pager':{
'currentPageInfo': '{0} من {1} صفحة',
'totalItemsInfo': '({0} العناصر)',
'firstPageTooltip': 'انتقل إلى الصفحة الأولى',
'lastPageTooltip': 'انتقل إلى الصفحة الأخيرة',
'nextPageTooltip': 'انتقل إلى الصفحة التالية',
'previousPageTooltip': 'انتقل إلى الصفحة السابقة',
'nextPagerTooltip': 'الذهاب إلى بيجر المقبل',
'previousPagerTooltip': 'الذهاب إلى بيجر السابقة'
}
}
});
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
pageOptions: { pageSize: 7 }
};
},
provide: {
grid: [Page]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
```
{% endtab %}

Просмотреть файл

@ -0,0 +1,46 @@
# State Persistence
Syncfusion Vue UI components have support for persisting its state across page refreshes or navigation. To
enable this feature, set `enablePersistence` property as true to the required component. This will store
the components state in browsers `localStorage` object on page `unload` event. For example, we have
enabled persistence to grid component in the following code.
{% tab template="common/right-to-left" %}
```html
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowSorting='true' :enablePersistence='true' :allowPaging='true' :allowFiltering='true' height='210px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Sort, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data
};
},
provide: {
grid: [Sort, Page, Filter]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
```
{% endtab %}

7
src/common/summary.md Normal file
Просмотреть файл

@ -0,0 +1,7 @@
* [Introduction](introduction.md)
* [Installation](installation.md)
* [Deployment](deployment.md)
* [Right-To-Left](right-to-left.md)
* [State Persistence](state-persistence.md)
* [Accessibility](accessibility.md)
* [Browser Compatibility](browser.md)

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.7 KiB

Двоичные данные
src/common/visual-studio-code-integration/images/Extension.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 32 KiB

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 52 KiB

Двоичные данные
src/common/visual-studio-code-integration/images/Themes.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 56 KiB

Двоичные данные
src/common/visual-studio-code-integration/images/frameworktype.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 86 KiB

Двоичные данные
src/common/visual-studio-code-integration/images/run.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 37 KiB

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 65 KiB

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 3.0 KiB

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 31 KiB

Двоичные данные
src/common/visual-studio-code-integration/images/vue-styles.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 34 KiB

Просмотреть файл

@ -0,0 +1,9 @@
# Visual Studio Code Integration
## Overview
The Syncfusion Essential Studio Web extension for Visual Studio Code allows you to use the Syncfusion JavaScript components(React, Angular, and Vue) easily by configuring the Syncfusion NPM packages and themes.
The Syncfusion Web Extension provides the following support in Visual Studio Code:
[Project-Template](https://help.syncfusion.com/extension/javascript-extension/visual-studio-code/create-project): Creates Syncfusion Web applications by adding the required Syncfusion JavaScript components.

Просмотреть файл

@ -0,0 +1,3 @@
* [Overview](visual-studio-code-integration/overview.md)
* [Download and Installation](visual-studio-code-integration/visual-studio-code-extensions/download-and-installation.md)
* [Create Project](visual-studio-code-integration/visual-studio-code-extensions/create-project.md)

Просмотреть файл

@ -0,0 +1,46 @@
# Visual Studio Code Extensions
## Create project
Syncfusion provides **project templates** for **VisualStudio Code** to create Syncfusion Web applications. Syncfusion Web Project template creates applications with the selected Framework(React, Angular, and Vue), required Syncfusion NPM packages, component render code for the Grid, Chart, Scheduler components, and the style for making development easier with Syncfusion components.
> The Syncfusion Visual Studio Code project template provides support for Web project templates from v18.3.0.47.
The following steps help you create **Syncfusion Web Applications** through the **Visual Studio Code:**
1. In Visual Studio Code, open the command palette by pressing **Ctrl+Shift+P**. The Visual Studio Code palette opens, search the word **Syncfusion**, so you can get the templates provided.
![CreateProjectPalette](../images/CreateProjectPalette.png)
2. Select Syncfusion Web Template Studio: Launch and then press enter, Template Studio wizard for configuring the Syncfusion Web app will appear. Provide the require Project Name and Path to create the new Syncfusion Web application along with any one of the Framework(React, Angular, and Vue).
![ProjectLocation](../images/ProjectLocationName.png)
3. Click either **Next** or the **Framework** tab, and the Framework types will be appears. Choose any one of the Framework:
* React
* Angular
* Vue
![Framework](../images/frameworktype.png)
4. Click either Next or the Configuration tab, and the Configuration section will be loaded. Choose the preferred theme and then click Create. The project will be created.
![Themes](../images/Themes.png)
5. The created Syncfusion Web App is configured with the Syncfusion NPM packages, styles, and the component render code for the Syncfusion component added.
![NPM Packages](../images/vue-npm-install.png)
![Styles](../images/vue-styles.png)
![Components](../images/vue-components.png)
## Run the application
1. Click on **F5** or navigate to **Debug>Start debugging**
![Run](../images/run.png)
2. After compilation process completed, open the local host link in browser to see the output.
![Output](../images/vue-compilation.png)

Просмотреть файл

@ -0,0 +1,51 @@
# Download and Installation
Syncfusion publishes the Visual Studio Code extension in [Visual Studio Code marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Angular-VSCode-Extensions). You can either install it from Visual Studio Code or download and install it from the Visual Studio Code marketplace.
## Prerequisites
The following prerequisites software needs to be installed for the Syncfusion Web extension installation and for creating the Syncfusion Web applications along with any one of the Framework(React, Angular, and Vue).
* [Visual Studio Code](https://code.visualstudio.com/download)
> The minimum version of the Visual Studio Code is 1.38.0 to use the Syncfusion Web Extension.
* [C# Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)
* [Node.js](https://nodejs.org/en/download/)
## Install through the Visual Studio Code Extensions
The following steps explain how to install the Syncfusion Web extensions from Visual Studio Code Extensions.
1. Open Visual Studio Code.
2. Go to **View > Extensions**, and open Manage Extensions.
3. Type **“Syncfusion Web** in the search box.
![Extension](../images/Extension.png)
4. Click the Install button on the **"Web VSCode Extensions - Syncfusion"** extension.
5. After the installation, reload the Visual Studio Code using the **Reload Required** in Visual Studio Code palette.
6. Now, use the Syncfusion Web extensions from the Visual Studio Code palette.
![CreateProjectPalette](../images/CreateProjectPalette.png)
## Install from the Visual Studio Code Marketplace
The following steps explain how to download Syncfusion Web applications from the Visual Studio Code Marketplace and install them.
1. Open the [Syncfusion Web Extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Web-VSCode-Extensions)
2. Click Install from Visual Studio Code Marketplace. The browser opens the popup with the information like **“Open Visual Studio Code”**. Click Open Visual Studio Code, then [Syncfusion Web Extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Angular-VSCode-Extensions) will open in Visual Studio Code.
3. Click the Install button in the **"Web VSCode Extensions - Syncfusion"** extension.
4. After the installation, reload the Visual Studio Code using the Reload Required in Visual Studio Code palette.
5. Now, use the Syncfusion Web extensions from the Visual Studio Code palette.
![CreateProjectPalette](../images/CreateProjectPalette.png)