Home Page: https://vaadin.com/docs/latest/ds/overview
License: Apache License 2.0
This package contains all free Vaadin web components.
See https://github.com/vaadin/web-components for more details.
Sunday is not showing now when year scroller is toggled visible on narrow mobile screens. Needs a UI design.
Vaadin Grid looks great and fulfills many of our need for a data table. One issue I could not yet resolve is "flickering" while scrolling to new records. The actual flickering is not caused by the grid but by the elements shown, but the grid is the only thing that can help: when inserting something different than text (e.g. images) these elements might take a short time to load. On the other hand elements reused while scrolling probably animate to their new state when inserted at the other end. To avoid this kind of user-irritating effects I would like to increase the number of invisible rows / amount of invisible space when scrolling. Is this already possible? If no would it be easy to introduce? Or do you have another idea to allow data elements to initialize themselfes for some time before showing them to the user (at least for slow scrolling)?
The current ZIP package is less than helpful for first time users.
Consider doing the following improvements:
At the same time, we could consider changing the way we publish the ZIP package. Instead of uploading it to vaadin.com servers, we could just use the GitHub release as the default place for the zip, and link to that from vaadin.com. We can get download stats from GitHub as well (easier than from vaadin.com, at least currently).
If vaadin-combo-box gets focus, it hides page scroll bar reducing page width on browsers that have non-overlaid scroll bar (e.g. Chrome on Windows and Chromium on Ubuntu, not OS X). Change to page width will align centered content again making the layout jump on each focus and blur.
To test, open https://cdn.vaadin.com/vaadin-elements/master/vaadin-combo-box/demo/ in non-OS X browser and focus any combo box.
We should bring in some static analysis and coding conventions to our projects.
Suggested tools:
Atom has plugins for JSHint, JSCS and polylint, but unfortunately JSCS is still missing the feature to lint JS code inside HTML documents (AtomLinter/linter-jscs#110). Also the polylint plugin for Atom seems to be quite buggy.
Using JSCS from command-line does work with HTML documents via `--extract' flag:
$ jscs --extract vaadin-combo-box.html -p google .
...
One space required after "if" keyword at ./vaadin-combo-box.html :
253 |
254 | _onArrowDown: function() {
255 | if(this.opened) {
----------------^
256 | this._focusedIndex = Math.min(this.$.selector.items.length - 1, this._focusedIndex + 1);
257 | } else {
...
Whether we're using these tools inside editor/IDE or not, we should still add these as part of our build process to catch errors at the latest on Travis build.
TODO:
Not all of the articles have IDS for bookmarking sections.
AsciiDoc does automatically generate IDs based on the titles, but title texts are subject to corrections, while IDs are usually more stable. The generated IDs also are not unique. This is not a big issue in Elements docs currently, as they are not compiled to the book or to other DocBook/PDF format, in which unique IDs are required (compilation fails if they are not unique). A possible future solution that would automate cross-document cross-reference resolution would also require that IDs are unique in the site scope.
A component for selecting a date or multiple dates/a range of dates.
Change the build script that produces the demos in format required by vaadin docs so that it no longer contains the actual running examples but just the code snippet and the link to the actual demo running on cdn.
We should add an example how to integrate with Vue.js
A basic split panel element, that allows the end user to divide an area in the UI to two sections with a certain ratio. The area can be divided either horizontally or vertically.
There’s already a ready made element for Polymer 0.5, and it’s probably fairly easy to port for 1.0
https://github.com/Polymer/core-splitter
We should package that neatly, so that the developer doesn’t have to provide any of the layout attributes.
<!-- Vertical means that the panels are stacked vertically,
so there the split is top/bottom -->
<vaadin-split-panel vertical>
<div style="min-height: 120px;">Top</div>
<div style="flex: 1;">Bottom</div>
</vaadin-split-panel>
The main <vaadin-split-panel> element would be a flex layout, and by default the contained elements be flexed equally to fill the whole element.
Only the first two child elements are renderer, others are ignored (removed/hidden?).
Hello, I'm using `<vaadin-combo-box" component in Polymer in our application. When we're binding the values, there are falsey values like numeric zero(o), empty string(""). However, when user tries to select these values, Vaadin control doesn't allow to select in the first attempt. But, if selected again, that option is selected. This is bug IMO. Any option, regardless of its value should be selected in first attempt.
I think the issue is that the control doesn't allow falsey values in JavaScript and considers them as default values.
We've checked this by changing the values to other values than falsey and it works. However, we cannot change the values. Is there any configuration option in the control by which we can tell Vaadin to not consider these values as default value?
Use cases to implement:
<paper-input>.<vaadin-date-picker>, which formats a date in a human format in the input field, but gives an ISO-formatted date in the value property.<paper-toggle-button>.I want a format like YYYY-MM-DD, how to specify, theres nothing in the docs.
Tracking issue for the 1.2 minor version of vaadin-grid, with the following sub-tasks:
Add the vaadin-context-menu dependency to the masterOverrides part to deploy it into cdn.
https://github.com/vaadin/vaadin-core-elements/blob/master/bower.json#L47
Running an angular2 application using browser-sync or lite-server, for instance any application based in the angular quick start, would occasionally produce errors in Firefox causing the app to fail.
This is caused because a browser-sync bug, which messes up certain documented files in the bower_components having a commented block with the following pattern: /* ... <body> ... */.
Workaround: Create a bs-config.json in the root of your project folder with the following contents.
{
"snippetOptions": {
"ignorePaths": "bower_components/**/*.html"
}
}
From @jouni on September 11, 2015 12:52
A component to show more content when the user requests it, usually by clicking the panel header to reveal more content below it.
Polymer Elements has iron-collapse which we can utilize, but we could provide a more polished element, since currently it requires some boilerplate to trigger the opening and closing, and doesn’t provide lazy-loading content for instance, and doesn’t provide any default styles for material design.
Suggested element name: vaadin-details (since HTML actually has a draft spec for this element named details).
the vaadin-upload polymer element imports vaadin-upload-icons which in turn imports iron-icons this breaks apps where the icons id is taken by a custom icon set.
Likewise, vaadin-upload-icons should implement its own set of icons, rather than importing the entire iron-icons set.
This will also drastically reduce file sizes.
Proto Repos:
Bullet-points:
Actions
The release downloads do not contain vaadin-grid currently...
Someone would have a solution for this:
Error encountered resolving symbol values statically. Calling function 'PolymerElement', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function
Investigate if it’s possible to auto-generate React wrappers for Vaadin Components.
When user opening any component from our CDN, it's incredibly slow for the first time:
http://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/vaadin-grid.html
It's 2.7s, which can't be acceptable.
It loads nice and quickly next time:
But for many users there won't be next time as they will just close the tab with a slow page.
This is obviously a server-side issue.
See rowClassGenerator(row) overlapping "row {Row} Reference to --" below:
This is just one instance, there are other places where the same thing happens with long method signatures.
Currently there’re differences about npm install across our elements:
To get those unified I suggest to:
sudo note from vaadin-grid README.Using sudo should not be recommended. It results in setting root-only restricted permissions on some npm package and cache directories, that could introduce even harder maintenance problems. Generally, it’s not our job to instruct users about permissions on their systems. For ex., neither polyserve nor web-component-tester READMEs, nor even gulp getting started docs mentions sudo. If we still want to help our users to get over npm permission issues, we’d better instruct them to fix global installs, to make them working without sudo.
This feature should make it easy for developers to customize the theme for Vaadin Components.
Polymer cross scope styling (custom properties and mixins) works well and feels natural for CSS developers, but it lacks some of the nice features from the Vaadin Framework Valo theme, like the automatically adjusting colors derived from a base color.
Size variations should be possible to do using standard CSS calc function.
We could try to add the missing color manipulation functions, similarly to what Polymer does with var. There’s a working draft specification for CSS which we should follow: http://dev.w3.org/csswg/css-color/#modifying-colors
User code:
v-button {
--valo-base-color: blue;
}v-button code:
:host {
background-color: var(--valo-base-color);
color: color( var(--valo-base-color) contrast(95%) );
@apply(--v-button-theme);
}The more advanced features like "bevel", "shadow" and "gradient" could simple be custom properties which are loaded using mixins from separate HTML imports. For example:
valo-3d-theme.html:
:root {
--valo-base-color: orange;
--valo-gradient: linear-gradient(
color(var(--valo-base-color) tint(5%)),
color(var(--valo-base-color) shade(5%))
);
--valo-bevel: 0 1px 0 0 color(var(--valo-base-color) tint(10%)),
0 -1px 0 0 color(var(--valo-base-color) shade(10%));
--v-button-theme: {
background-image: var(--valo-gradient);
box-shadow: var(--valo-bevel);
}
}Usage:
<link rel="import" href="valo-3d-theme.html">I was looking at https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/selection.html and found out that there were no anchors in the titles and difficult to share some exact example
This would be perfect:
Add any elements you would like to see us build as comments to this issue.
An element which makes it easy to build common form layouts.
At minimum, it should provide a way to present field labels/captions on the left side of the field (or right side for RTL languages). When there is not enough horizontal space, the label should be moved on top of the field. The label width should be uniform for all rows in the layout, so that the left (or right on RTL) edge of the fields align. It should be possible to align the labels in the "label column" either left or right (right-aligned being the default perhaps).
It should be possible to layout fields in 2 columns (possibly more in the future if that is seen as a common use case), and some fields can span multiple columns. The columns should also wrap when horizontal space is limited.
It should be possible to divide the overall form into sections using section headers/dividers.
The fields can be any input element, such as text inputs, dropdowns, checkboxes, radio groups, sliders, etc.
The labels could be either "floating" or static. Floating labels probably don’t make much sense for the "column layout" version.
A proof-of-concept example how required indicators, help/description and error messages could be shown, and how help/description/error messages and floating labels could work when the label is placed on the left side of the field: http://codepen.io/jouni/full/dcrAu/
You can also google for "form layout" to get inspiration.
Can be checked in docs site. It looks like:
Draft for a possible new element, for creating modal views that show detailed information for a certain item.
We have a collection of items, from which we are only showing a certain subset of information. To view the complete details for an item, the user needs to navigate/drill-down to that specific item. Usually, that view also allows the user to edit the details of that particular item, save it, or delete it (basic CRUD operations).
The most common way of showing detail information in desktop applications is a modal dialog, where you have a title at the top and buttons on at the bottom of the dialog, and a possibly scrolling content area in between.
On small viewports, some UI patterns have become common, such as having the primary actions always visible in the title bar of the view. The view usually also slides in from the bottom or from the right.
We can create an element that offers this responsive behaviour “out-of-the-box”.
The best place to “dogfeed” this is the Expense Manager demo application, where we have this kind of drill-down view for the expenses.
It would be awesome having an official GridTree component in Vaadin framework.
Nowadays only exists the GridTable and deficient Add-ons in case you need to show data in tree structures.
GridTable is quite slow to manage big data, and Grid is much faster than Table to render data on screen.
Draft for a possible new element, for creating context menus for any part of the UI.
(A lot of this is also defined in the Material design "Menus" specs: https://material.google.com/components/menus.html)
A context menu is a list of options that depend on the context for which the menu is displayed. It can be a hierarchical list, and it can contain disabled items and dividers. It is commonly displayed as an overlay on top of the other page content.
A context menu usually contains less options than a regular menu, possibly only a relevant subset of actions from the full application menu for the given context. Otherwise the functionality is very similar.
A "context" can be pretty much anything, and the lowest level we can define technically is an HTML element (hierarchy). As this is intended to be a general purpose element, it is the application developer’s responsibility to provide the context dependent information for the menu.
The items are usually clickable/actionable, and perform some action that targets the context, but they can also be purely informative. Some items can also be toggles (on/off, checked/unchecked), although that is a less common use case for context menus (but common for application menus).
Visually the items are usually short one line strings, but can also contain icons or multiline text. The visual formatting of the items should be the responsibility of the developer, but a simple default representation is provided.
When a mouse is used for interaction, the context menu opens from the secondary mouse button or from ctrl+primary mouse button.
On touch devices, long press/touch will open it.
The user can navigate the menu using the keyboard arrow keys, and activate the items using the enter key.
The context menu should open relative to the mouse/touch coordinates (but always contained within the browser viewport). On small viewports, the context menu should open as an bottom/action sheet, and the coordinates are ignored.
The context should also be programmatically openable, so the developer can provide an explicit button to open it (useful for touch devices for example, to help discovery). In this situation, it should also be possible to specify the target location for the context menu (where it should open on the screen, for example beneath the button that triggers the context menu).
Specific places for a context menu:
By default, the context menu applies to it’s parent element (to the <body> element in this example), and listens events on that element that will trigger the menu (context-click/right-click or long-press):
<body>
<vaadin-context-menu>
<vaadin-menu-item>Option 1</vaadin-menu-item>
<vaadin-menu-item>Option 2</vaadin-menu-item>
<vaadin-menu-item>Option 3</vaadin-menu-item>
<vaadin-menu-item divider>Other options</vaadin-menu-item>
<vaadin-menu-item toggle>
<paper-item>
<paper-item-body two-line>
<div>Option 4</div>
<div secondary>Another line for the option</div>
</paper-item-body>
</paper-item>
</vaadin-menu-item>
<vaadin-menu-item toggle>Option 5</vaadin-menu-item>
</vaadin-context-menu>
</body>To target a specific element (hierarchy), use the "for" attribute. The "open" event could be a callback function that can provide the "context" object for the menu data binding.
<paper-tabs id="my-tabs">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
<vaadin-context-menu for="my-tabs" on-open="opened" on-item-click="itemClicked">
<template is="dom-if" if="{{context.isTab}}">
<vaadin-menu-item>Close Tab "[[context.tab.title]]"</vaadin-menu-item>
<vaadin-menu-item>Close Other Tabs</vaadin-menu-item>
<vaadin-menu-item divider></vaadin-menu-item>
</template>
<vaadin-menu-item>Open a New Tab</vaadin-menu-item>
<vaadin-context-menu>A draft design for a responsive menu list element.
The idea is to have a navigation menu, optionally two levels deep, which works nicely on small screens and with touch devices.
The menu might be filterable as well, but I haven’t considered how that would work on small viewports yet. Another idea is to have some sort of built-in features that support the developer in adding a search feature in the app.
Below are various layout ideas.
Large viewport/area for menu
Small viewport/area for menu
the close ("x") button appears when i open a datetime picker.
But when i try it a 2nd time, the "x" button does not appear.
This is happening on the demos on your web page.
I am on Chrome latest on OSX btw
There are many out there who are building their client side apps with JVM based languages like Scala (Scala.js) or Groovy (grooscript). All of them are using Maven/Gradle for dependency management and WebJars (http://www.webjars.org) to pull int the client side libraries.
We should also provide a WebJar with Vaadin core elements to allow people to build great client side apps with our elements with JVM languages as well.
This is the tracking issue for the first version of the vaadin-date-picker element, with the following sub-tasks:
There’s no reason to make CDN users download the comments. Removing them could speed up the download at least some.
Remove the year toolbar and revise the whole date grid design accordingly.
I've found a demo video which seems to point to a 'yes' but it was not very clear.
So I'd like to know : does the Vaadin Designer lets you build with only web components (Vaadin Components) and particurarly for JavaScript dev only ? No server side components.
Thanks for clarification
This is the tracking issue for the first version of the vaadin-combo-box element:
<template> support for list items
<template> support for the selected item(s) in the input area@JouniK: "We need an introduction section in the site."
Display "Drop files here..." text next to left aligned "Upload Files" button on desktop.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.