diff options
| -rw-r--r-- | README.md | 8 | ||||
| -rw-r--r-- | bower.json | 12 | ||||
| -rw-r--r-- | demo/polymer.html | 201 | ||||
| -rw-r--r-- | demo/react.html | 6 | ||||
| -rw-r--r-- | docs/angular2.adoc | 197 | ||||
| -rw-r--r-- | gulpfile.js | 4 | ||||
| -rw-r--r-- | tasks/cdn.js | 2 | ||||
| -rw-r--r-- | tasks/config.js | 1 | ||||
| -rw-r--r-- | tasks/docsite.js | 9 | ||||
| -rw-r--r-- | tasks/zip.js | 40 | ||||
| -rw-r--r-- | vaadin-core-elements.html | 3 |
11 files changed, 24 insertions, 459 deletions
@@ -29,6 +29,14 @@ You can see more detailed roadmaps of each element from their respective GitHub - [`<vaadin-upload>`](https://github.com/vaadin/vaadin-upload) 1.0 - [`<vaadin-icons>`](https://github.com/vaadin/vaadin-icons) 1.0 +#### Next up +- [`<vaadin-combo-box>`](https://github.com/vaadin/vaadin-combo-box) 1.x + - More customization options for the input element + - Dropdown item templates +- [`<vaadin-date-picker>`](https://github.com/vaadin/vaadin-date-picker) 1.x + - More customization options for the input element + - Keyboard input +- New elements in planning: `<vaadin-context-menu>`, `<vaadin-form-layout>`, `<vaadin-details>` ##### Version labels @@ -1,6 +1,6 @@ { "name": "vaadin-core-elements", - "version": "1.1.0-beta1", + "version": "1.1.2", "authors": [ "Vaadin Ltd" ], @@ -24,11 +24,11 @@ "**/tests" ], "dependencies": { - "vaadin-grid": "vaadin/vaadin-grid#1.1.0-beta1", - "vaadin-combo-box": "vaadin/vaadin-combo-box#1.1.0-beta1", - "vaadin-icons": "vaadin/vaadin-icons#1.0.0-rc1", - "vaadin-date-picker": "vaadin/vaadin-date-picker#1.1.0-beta1", - "vaadin-upload": "vaadin/vaadin-upload#1.1.0-beta1" + "vaadin-grid": "vaadin/vaadin-grid#~1.1.0", + "vaadin-combo-box": "vaadin/vaadin-combo-box#~1.1.0", + "vaadin-icons": "vaadin/vaadin-icons#~1.0.0", + "vaadin-date-picker": "vaadin/vaadin-date-picker#~1.1.0", + "vaadin-upload": "vaadin/vaadin-upload#~1.0.0" }, "devDependencies": { "web-component-tester": "^4.0.3", diff --git a/demo/polymer.html b/demo/polymer.html deleted file mode 100644 index 41e1e2c..0000000 --- a/demo/polymer.html +++ /dev/null @@ -1,201 +0,0 @@ -<!doctype html> -<!-- -title: Polymer -order: 1 -layout: page ---> -<html> - -<head> - <title>vaadin-core-elements Code Examples - Polymer Integration</title> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1" /> - <script src="../../webcomponentsjs/webcomponents-lite.js"></script> - <link rel="import" href="common.html"> - <style> - .demo-wrapper > div { - position: relative; - } - - .user-image { - width: auto; - height: auto; - margin: 0; - border: none; - } - .user-image img { - position: absolute; - bottom: 0px; - right: 0px; - width: auto; - max-width: 33%; - max-height: 33%; - } - </style> -</head> - -<body unresolved> - <section> - <h1>vaadin-core-elements</h1> - <table-of-contents select="h3" class="toc"></table-of-contents> - </section> - - <section id="template-example"> - <h3 id="headers">Polymer Integration (Light DOM data source)</h3> - <p>Static data can be easily bound to vaadin-grid light DOM cells with <a href="https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat">the template repeater</a>.</p> - <p><strong>Note:</strong> IE/Edge doesn't support template-repeating inside a table element.</p> - <!--<code-example source> - <div> - <template is="dom-bind" class="my-grid-with-template" demo> - <vaadin-grid id="my-grid-with-template" on-selected-items-changed="onSelect"> - <table> - <colgroup> - <col width="64"> - <col width="100"> - <col> - <col> - <col> - </colgroup> - <thead> - <tr> - <th>#</th> - <th></th> - <th>First Name</th> - <th>Last Name</th> - <th>Email</th> - </tr> - </thead> - <tbody> - <template is="dom-repeat" items="[[users]]"> - <tr> - <td>{{index}}</td> - <td> - <img src="{{item.user.picture.thumbnail}}" style="width: 24px"></img> - </td> - <td>{{item.user.name.first}}</td> - <td>{{item.user.name.last}}</td> - <td>{{item.user.email}}</td> - </tr> - </template> - </tbody> - </table> - </vaadin-grid> - <template is="dom-if" if="{{selected}}"> - <div class="user-image"> - <img src="{{selected.user.picture.large}}"></img> - </div> - </template> - </template> - </div> - <code demo-var="template"> - var template = template || document.querySelector('template.my-grid-with-template'); - - template.addEventListener('dom-change', function() { - // code - var grid = document.querySelector('#my-grid-with-template'); - - template.onSelect = function() { - if (grid.selection.selected().length === 0) { - template.selected = null; - } else { - template.selected = template.users[grid.selection.selected()]; - } - }; - - getJSON('https://randomuser.me/api?results=25', function(data) { - template.users = data.results; - }); - // end-code - }); - - if (template.render) { - // This is needed to make the template render on Chrome in vaadin-doc portlet - template.render(); - } - </code> - </code-example>--> - <script> - // Need this hack to make this demo work on vaadin-docs site - // (by default JSoup, which is used at server-side parsing of the source files, - // doesn't allow a template tag in a table tbody) - var wrapper = document.querySelector('#template-example'); - - if (/Trident|Edge/.test(navigator.userAgent)) { - wrapper.parentElement.removeChild(wrapper); - } else { - wrapper.innerHTML = wrapper.innerHTML.replace(/<!--|-->/g, ''); - } - </script> - - </section> - - <section> - <h3>Polymer Integration (Function data source)</h3> - <p>In case the data is loaded lazily or it changes dynamically a - function datasource is a better option. Click a row to see an enlarged user image.</p> - <code-example source> - <div> - <template is="dom-bind" class="my-grid-with-ds" demo> - <vaadin-grid id="my-grid-with-ds" items="[[items]]" size="[[size]]" on-selected-items-changed="onSelect"> - <table> - <colgroup> - <col name="user.picture.thumbnail" width="100"> - <col name="user.name.first"> - <col name="user.name.last"> - <col name="user.email"> - </colgroup> - </table> - </vaadin-grid> - <template is="dom-if" if="{{selected}}"> - <div class="user-image"> - <img src="{{selected.user.picture.large}}"></img> - </div> - </template> - </template> - </div> - <code demo-var="template"> - // code - var template = template || document.querySelector('template.my-grid-with-ds'); - - template.addEventListener('dom-change', function() { - var grid = document.querySelector('#my-grid-with-ds'); - - grid.columns[0].renderer = function(cell) { - cell.element.innerHTML = '<img style="width: 30px" src="' + cell.data + '" />'; - }; - - template.onSelect = function() { - if (grid.selection.selected().length === 0) { - template.selected = null; - } else { - grid.getItem([grid.selection.selected()], function(err, item) { - template.selected = item; - }); - } - }; - - template.size = 100; - template.items = function(params, callback) { - var url = 'https://randomuser.me/api?index=' + params.index + '&results=' + params.count; - getJSON(url, function(data) { - callback(data.results); - }); - }; - - }); - - // end-code - - if (template.render) { - // This is needed to make the template render on Chrome in vaadin-doc portlet - template.render(); - } - </code> - <code hidden> - document.body.removeAttribute('unresolved'); - </code> - </code-example> - </section> - -</body> -</html> diff --git a/demo/react.html b/demo/react.html index a4317d9..2194537 100644 --- a/demo/react.html +++ b/demo/react.html @@ -1,7 +1,7 @@ <!doctype html> <!-- -title: React -order: 3 +title: Overview +order: 1 layout: page --> @@ -20,7 +20,7 @@ layout: page <body unresolved> <section> - <h3>React Integration</h3> + <h1>React Integration</h1> <p>This example demonstrates using vaadin-grid with React framework. As React doesn't support custom attributes for elements, vaadin-grid DOM API can't be fully utilized in the initialization.</p> diff --git a/docs/angular2.adoc b/docs/angular2.adoc deleted file mode 100644 index a1a2364..0000000 --- a/docs/angular2.adoc +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Angular 2 -order: 2 -layout: page ---- - -[[vaadin-core-elements.angular2]] -= Angular 2 Integration - -While Vaadin Elements are built using Polymer, they also contain directives to enable seamless usage within Angular 2 applications. -This page assumes that you already have an Angular 2 application setup ready. -If you need help with the project setup, you should follow the https://angular.io/docs/ts/latest/quickstart.html[Angular 2 Quickstart] guide. - -== Installation - -Although Angular 2 dependecies are typically installed via https://www.npmjs.com/[npm], Vaadin Elements require installation with http://bower.io[Bower]. -To install a Vaadin Core Element, you should run the following command in your project directory (replace the `[element-name]` part with the actual name of the element). - -[NOTE] -Angular 2 support was introduced in `1.1.0-alpha1` versions of each element. + -For element versions `1.1.0-beta2` or newer, use Angular version `2.0.0-rc.0`. + -For element versions `1.1.0-alpha1 to 1.1.0-beta1`, use Angular version `2.0.0-beta.16/17`. - -[source,bash] ----- -bower install --save vaadin-[element-name]#1.1.0-beta2 ----- - -After the Bower installation is completed, you need to add the Web Components polyfill to the `<head>` section of your `index.html` file. -[source,html] ----- -<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> ----- - -The Web Components polyfill will enable usage of HTML imports in your application. -In order to have the newly installed Vaadin element available in your templates, you need to add an import for it. - -[source,html] ----- -<link rel="import" href="bower_components/vaadin-[element-name]/vaadin-[element-name].html"> ----- - -Also the SystemJS configuration needs some modifications in order to load the modules correctly. -Add the following `packages` entry for `bower_components` to your configuration unless it’s already present. - -[source,javascript] ----- -System.config({ - map: 'bower_components': 'bower_components', - packages: { - 'bower_components': { - defaultExtension: 'js' - } - } -}); ----- - -Before bootstrapping your application, you need to wait for the `WebComponentsReady` event. -This event is fired after the HTML imports are done and the custom elements are upgraded and ready to be used. -The following example demonstrates how to wrap your bootstrap code inside the event listener. - -[source,javascript] ----- -window.addEventListener('WebComponentsReady', function() { - System.import('app/main').then(null, console.error.bind(console)); -}); ----- - -[NOTE] -If you see errors about missing behaviors in the console, please visit this https://github.com/vaadin/vaadin-core-elements/issues/46[known issue]. - -Now you’re all set to use the element inside your Angular 2 application. - -== Importing - -Import the directive as follows. This example imports the [vaadinelement]#vaadin-date-picker# element, but you should replace the path with the element you’re importing. -Also the directive name should be replaced with a camel case representation of the element name. - -[source,javascript] ----- -import { VaadinDatePicker } from '../bower_components/vaadin-date-picker/directives/vaadin-date-picker'; ----- - -Your Angular 2 component also needs to declare the usage of the directive. -This can be done with the `directives` array of the `@Component` decorator. -After the directive is declared, the element is available to be used in the `template` of your component. - -[source] ----- -@Component({ - selector: 'my-component', - template: '<vaadin-date-picker [(value)]="birthDay"></vaadin-date-picker>', - directives: [VaadinDatePicker] -}) ----- - -Notice that for Vaadin Charts, you also need to import and declare the `DataSeries` directive as follows. - -[source] ----- -import { VaadinCharts, DataSeries } from '../bower_components/vaadin-charts/directives/vaadin-charts'; - -@Component({ - selector: 'my-component', - template: ` - <vaadin-area-chart> - <title>Fibonacci</title> - <x-axis><title>Index</title></x-axis> - <y-axis><title>Value</title></y-axis> - <data-series> - <data>1, 1, 2, 3, 5, 8, 13, 21, 34</data> - </data-series> - </vaadin-area-chart>`, - directives: [VaadinCharts, DataSeries] -}) ----- - -== Usage -For the most part you can use the API provided by the element. -This API is described in the documentation of each individual element. -Most notable changes introduced by the directives are the support for data-binding using the Angular 2 syntax and integration with the https://angular.io/docs/ts/latest/guide/forms.html[Angular forms]. - -=== Data-Binding -You can use Angular 2 data-binding syntax with all the properties declared in the API documentation for each element. -Some properties also support two-way data-binding. These are marked with [propertyname]#notifies# in the API documentation. - -[source] ----- -<vaadin-combo-box - label="My ComboBox" - [(value)]="myValue" - [items]="myItems"> -</vaadin-combo-box> ----- - - -=== Form Controls -When using input-like elements ([elementname]#vaadin-combo-box#, [elementname]#vaadin-date-picker# or [elementname]#vaadin-upload#) inside an Angular form, you should normally use the [propertyname]#ngControl# attribute to track the state and validity. -You can use two-way data-binding with [propertyname]#ngModel# as you would with other form fields. -Simple validation like the [propertyname]#required# validator is supported as well as defining custom validators. - -See the example below on how to use [elementname]#vaadin-combo-box# as a form control with data-bound [propertyname]#items# property. -[source] ----- -<vaadin-combo-box - label="My ComboBox" - [(ngModel)]="myValue" - [items]="myItems" - ngControl="myCombo" - required> -</vaadin-combo-box> ----- - -=== Styling -Due to the Shadow DOM encapsulation, applying normal CSS rules for a Vaadin Element is limited to the main element only. - -Therefore, in order to fully customize the appearance of Vaadin Elements, you need to use https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details[CSS properties] and https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins[CSS mixins]. -Unfortunately these styles cannot be applied on a component level, but instead you need to provide styles in application level and also use the `is="custom-style"` attribute. - -Changing the icon color of [vaadinelement]#vaadin-date-picker# to `red` could be done with the following example. -[source] ----- -<style is="custom-style"> - vaadin-date-picker { - --vaadin-date-picker-calendar-icon: { - fill: red; - } - } -</style> ----- - -See the documentation of each element for a list of available properties and mixins. - -=== Grid -The [elementname]#vaadin-grid# element uses a `table` child element to declaratively configure columns, headers and footers. -In case you’ll need to apply modifications to the declaratively configured [elementname]#vaadin-grid# columns, you must wait for the component to be fully initialized first. -To do this, you should use the `grid-ready` event as follows. - -[source] ----- -<vaadin-grid (grid-ready)="gridReady($event)" [items]="dataItems"> - <table> - <colgroup> - <col> - </colgroup> - </table> -</vaadin-grid> ----- -[source, javascript] ----- -gridReady(grid) { - // You can now configure the columns by adding a renderer function for example. - grid.columns[0].renderer = (cell) => { - cell.element.innerHTML = 'row-' + cell.row.index; - } -} ----- diff --git a/gulpfile.js b/gulpfile.js index e9485b2..9f60d08 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,9 +7,9 @@ var git = require('gulp-git'); var version = '0.3.0'; gulp.task('default', function() { - console.log('\n Use:\n gulp <stage|deploy[:cdn:zip]>\n'); + console.log('\n Use:\n gulp <stage|deploy[:cdn]>|<zip>\n'); }); gulp.task('clean', ['clean:cdn', 'clean:zip']); -gulp.task('deploy', ['deploy:cdn', 'deploy:zip']); +gulp.task('deploy', ['deploy:cdn']); diff --git a/tasks/cdn.js b/tasks/cdn.js index b290d42..816f852 100644 --- a/tasks/cdn.js +++ b/tasks/cdn.js @@ -28,7 +28,7 @@ gulp.task('cdn:stage-bower_components', function() { }); gulp.task('cdn:stage-vaadin-core-elements', function() { - return gulp.src(['LICENSE.html', 'README.md', 'vaadin-core-elements.html', 'demo/*', 'apidoc/*'], { + return gulp.src(['LICENSE.html', 'README.md', 'index.html', 'vaadin-core-elements.html', 'demo/*', 'apidoc/*'], { base: "." }) .pipe(modify({ diff --git a/tasks/config.js b/tasks/config.js index d87ce0d..61d550f 100644 --- a/tasks/config.js +++ b/tasks/config.js @@ -8,7 +8,6 @@ module.exports = { version: args.version || 'master', permalink: args.version ? 'latest' : '', toolsHost: args.toolsHostname || 'tools.vaadin.com', - zipHost: args.zipHostname || 'vaadin.com', paths: { staging: { bower: 'target/bower', diff --git a/tasks/docsite.js b/tasks/docsite.js index 1441c3b..50fb02e 100644 --- a/tasks/docsite.js +++ b/tasks/docsite.js @@ -67,13 +67,6 @@ gulp.task('cdn:docsite:core-elements-elements', ['cdn:docsite:bower_components'] .pipe(gulp.dest(docPath + '/')); }); -gulp.task('cdn:docsite:vaadin-grid', ['cdn:docsite:bower_components'], function(done) { - var elementDocsite = docPath + '/vaadin-grid'; - var elementDemo = stagingPath + '/vaadin-grid/demo/**'; - - return getDocModifyTask(elementDemo, elementDocsite, 'vaadin-grid'); -}); - function getDocModifyTask(sourceFiles, targetFolder, n) { fs.mkdirsSync(targetFolder); gutil.log('Generating site documentation from ' + sourceFiles + ' into ' + targetFolder); @@ -118,8 +111,6 @@ function getDocModifyTask(sourceFiles, targetFolder, n) { gulp.task('cdn:docsite:stage', ['cdn:docsite:core-elements', 'cdn:docsite:core-elements-elements', - //separate task for vaadin-grid until it uses asciidocs - 'cdn:docsite:vaadin-grid', 'cdn:docsite:core-elements-integrations', 'cdn:docsite:core-elements-ng2-integration']); diff --git a/tasks/zip.js b/tasks/zip.js index f80d0aa..cc469eb 100644 --- a/tasks/zip.js +++ b/tasks/zip.js @@ -1,15 +1,10 @@ -var args = require('yargs').argv; -var common = require('./common'); var config = require('./config'); var fs = require('fs-extra'); var gulp = require('gulp'); -var gutil = require('gulp-util'); var zip = require('gulp-zip'); var stagingPath = config.paths.staging.zip; var version = config.version; -var host = config.zipHost; -var user = args.zipUsername; var filename = 'vaadin-core-elements-' + version + '.zip'; var majorMinorVersion = version.replace(/(\d+\.\d+)(\.|-)(.*)/, '$1'); @@ -17,41 +12,8 @@ gulp.task('clean:zip', function() { fs.removeSync(stagingPath); }); -gulp.task('stage:zip', ['clean:zip', 'stage:cdn'], function() { +gulp.task('zip', ['clean:zip', 'stage:cdn'], function() { return gulp.src(config.paths.staging.cdn + '/' + version + '/**/*') .pipe(zip(filename)) .pipe(gulp.dest(stagingPath)); }); - -function computeDestination() { - common.checkArguments(['zipUsername', 'zipDestination']); - var path = majorMinorVersion != version ? majorMinorVersion + '/' + version : version; - path = args.zipDestination + path + '/' + filename; - return path; -} - -gulp.task('zip:upload', ['stage:zip'], function(done) { - var src = stagingPath + '/' + filename; - var dst = computeDestination(); - gutil.log('Uploading zip package (scp): ' + src + ' -> ' + user + '@' + host + ':' + dst); - require('scp2').scp(src, { - host: host, - username: user, - privateKey: config.paths.privateKey(), - path: dst - }, function(err) { - done(err); - }); -}); - -gulp.task('zip:update-references', ['zip:upload'], function(done) { - if (args.release) { - common.ssh(user, host, "sed -i '1i core-elements/" + majorMinorVersion + '/' + version + "' " + args.zipDestination + 'VERSIONS', done); - } else if (args.preRelease) { - common.ssh(user, host, "sed -i '1i core-elements/" + majorMinorVersion + '/' + version + "' " + args.zipDestination + 'PRERELEASES', done); - } else { - common.ssh(user, host, 'echo core-elements/' + majorMinorVersion + '/' + version + ' > ' + args.zipDestination + 'SNAPSHOT', done); - } -}); - -gulp.task('deploy:zip', ['zip:upload', 'zip:update-references']); diff --git a/vaadin-core-elements.html b/vaadin-core-elements.html index 316b174..a1c5fc1 100644 --- a/vaadin-core-elements.html +++ b/vaadin-core-elements.html @@ -1,2 +1,5 @@ +<link rel="import" href="../vaadin-icons/vaadin-icons.html"> <link rel="import" href="../vaadin-grid/vaadin-grid.html"> <link rel="import" href="../vaadin-combo-box/vaadin-combo-box.html"> +<link rel="import" href="../vaadin-upload/vaadin-upload.html"> +<link rel="import" href="../vaadin-date-picker/vaadin-date-picker.html"> |