vaadin / web-components Goto Github PK

View Code? Open in Web Editor NEW

401.0 17.0 78.0 129.29 MB

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+

Home Page: https://vaadin.com/docs/latest/components

JavaScript 95.07% Shell 0.01% TypeScript 2.29% HTML 2.62%

vaadin webcomponents custom-elements ui-components ui-kit design-system design-systems hacktoberfest web-components

web-components's Introduction

Vaadin web components

Vaadin components is an evolving set of high-quality web components for business web applications.

Installation

Install the components that you need from npm:

npm install @vaadin/grid

Usage

Live demo →

Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vaadin example</title>
  </head>
  <body>
    <!-- Use web components in your HTML like regular built-in elements. -->
    <vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort>
      <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column>
      <vaadin-grid-sort-column width="9em" path="firstName"></vaadin-grid-sort-column>
      <vaadin-grid-sort-column width="9em" path="lastName"></vaadin-grid-sort-column>
      <vaadin-grid-column width="9em" path="address.city"></vaadin-grid-column>
    </vaadin-grid>

    <!-- Vaadin web components use standard JavaScript modules. -->
    <script type="module">
      // Importing the following modules registers <vaadin-grid> and its column
      // elements so that you can use them in this page.
      import '@vaadin/grid/vaadin-grid.js';
      import '@vaadin/grid/vaadin-grid-selection-column.js';
      import '@vaadin/grid/vaadin-grid-sort-column.js';

      // Use component's properties to populate data.
      const grid = document.querySelector('vaadin-grid');
      fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
        .then((res) => res.json())
        .then((json) => (grid.items = json.result));
    </script>
  </body>
</html>

Serve your HTML with a development server that supports bare module specifiers, such as @web/dev-server:

npm i -g @web/dev-server
web-dev-server --node-resolve --open

Components

This project contains components for Vaadin 20+. Please see individual repositories for older Vaadin versions.

Core Components

The components below are licensed under the Apache License 2.0.

Component	npm version (latest)	npm version (next)	Issues
`<vaadin-accordion>`			Issues
`<vaadin-app-layout>`			Issues
`<vaadin-avatar>`			Issues
`<vaadin-avatar-group>`			Issues
`<vaadin-button>`			Issues
`<vaadin-checkbox>`			Issues
`<vaadin-checkbox-group>`			Issues
`<vaadin-combo-box>`			Issues
`<vaadin-confirm-dialog>`			Issues
`<vaadin-context-menu>`			Issues
`<vaadin-custom-field>`			Issues
`<vaadin-date-picker>`			Issues
`<vaadin-date-time-picker>`			Issues
`<vaadin-details>`			Issues
`<vaadin-dialog>`			Issues
`<vaadin-email-field>`			Issues
`<vaadin-form-layout>`			Issues
`<vaadin-grid>`			Issues
`<vaadin-horizontal-layout>`			Issues
`<vaadin-icon>`			Issues
`<vaadin-icons>`			Issues
`<vaadin-integer-field>`			Issues
`<vaadin-item>`			Issues
`<vaadin-list-box>`			Issues
`<vaadin-login>`			Issues
`<vaadin-menu-bar>`			Issues
`<vaadin-message-input>`			Issues
`<vaadin-message-list>`			Issues
`<vaadin-multi-select-combo-box>`			Issues
`<vaadin-notification>`			Issues
`<vaadin-number-field>`			Issues
`<vaadin-password-field>`			Issues
`<vaadin-progress-bar>`			Issues
`<vaadin-radio-group>`			Issues
`<vaadin-scroller>`			Issues
`<vaadin-select>`			Issues
`<vaadin-side-nav>`			Issues
`<vaadin-split-layout>`			Issues
`<vaadin-tabs>`			Issues
`<vaadin-tabsheet>`			Issues
`<vaadin-text-area>`			Issues
`<vaadin-text-field>`			Issues
`<vaadin-time-picker>`			Issues
`<vaadin-tooltip>`			Issues
`<vaadin-upload>`			Issues
`<vaadin-virtual-list>`			Issues

Pro Components

The components below are licensed under Vaadin Commercial License and Service Terms and available as part of the Vaadin Pro Subscription.

Component	npm version (latest)	npm version (next)	Issues
`<vaadin-board>`			Issues
`<vaadin-charts>`			Issues
`<vaadin-cookie-consent>`			Issues
`<vaadin-crud>`			Issues
`<vaadin-grid-pro>`			Issues
`<vaadin-map>`			Issues
`<vaadin-rich-text-editor>`			Issues

Browser support

Desktop:

Chrome (evergreen)
Firefox (evergreen)
Safari 15 or newer
Edge (Chromium, evergreen)

Mobile:

Chrome (evergreen) for Android (4.4 or newer)
Safari for iOS (15 or newer)

Documentation

Check out our design system documentation.

Examples

Are you looking for an example project to get started? Visit start.vaadin.com to create a Vaadin app.

Questions

For help and support questions, please use Vaadin Forum.

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.

Contributing

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

Development

See the Development guide for how to set up and develop this project locally.

LICENSE

For specific package(s), check the LICENSE file under the package folder.

web-components's People

Contributors

Stargazers

Watchers

Forkers

jojule gero1992 mario-pinheiro bramkragten maltindal eriklumme semisse lodin yangxin1994 akankshakmr174 felipeegasneris yashasva abhinav5481 iamdarshshah dtanp-rft vishalrranjan roastedcpu knoobie nohecastellanos eagleera piyushchauhan2011 sensational-code vesanieminen malikfaizanhaider peterblazejewicz fpipita wyysf123 gatanaso pks-os ij11 christophe-g naoak marcinlovescode mogrady-professional miracleonyenma scootcho javascript-univers-labs whjvenyl datadobi study-canyue kreo raceland-automacao-lda adleyang bugraahmetcaglar rossbroom99 itpreneur ntnglt abdiiwan1841 exnadella nikolayyst paulweezydesign raldur dethell steverep gpsfl guidogerb gtzluis advantis-io flang 7perpanasa ellasalo hasancankucuk lawrencedlockhart npadula paodb dazum-developers vishalsingh2972 mgsantiago-10g soylentbob audible123 xpamamadeus kchobantonov eshan-one princeofnubia abdullahgheith abhishekrgoud dingjq00

web-components's Issues

[context-menu] Prevent over-scroll

When the context menu is opened, it is still possible to scroll the parent element.

In desktop is an issue because the overlay is missplaced from its original context element. Screenshot: http://g.recordit.co/Y00QkO8Ywo.gif
In mobile it's weird that even thought there is a glass panel covering the body it's still scrollable. Screenshot: http://g.recordit.co/aYCT3VKsqR.gif

In PR vaadin/vaadin-context-menu#33 there were two tries to fix this, one based on adding/removing a pixel to scroll which seems not very reliable, and another based on cssing the body which is better, but only covers the case of the body. Probably the best solution should be based on javascript wheel, touchstart and touchmove events.

[combo-box] Add has-items attribute for styling

I need a dropdown="false" atribute for not open dropdown list and hide the dropdown icon.

[date-picker] Support for Buddhist calendar (BE)?

A.D.+543 = B.E. YEAR
Example: 2016 + 543 = 2559 B.E.

Sorry to problem.
Thank you.

[date-picker] Mouse scroll sensitivity affects the usability of the scrollers

We need to test the scroller on as many platforms as possible (OS X, Windows, Linux) and as many different mouse types as we can find in the office, and try out different scroll speed adjustments which the OS offers to see how they affect the scrolling speed compared to other scrollable elements on a webpage.

[date-picker] Confirmed/buffered single-selection mode

Refine the “Today” button behavior for immediate single-select mode (separate task vaadin/vaadin-date-picker#170)
Add the confirmed/buffered single-selection mode

[combo-box] Multi-select

We have initial designs for this feature (mockups), but we need to write some end user scenarios to validate the designs (useful for user testing).

Adding multi values
- Order of selected items
- MVP: keep all values visible in closed input
Editing multi values
- Keyboard navigation: select "chips/tokens" (not cursor between them)
Removing multi values

pdf/excel export

Any clue to export the content to PDF/Excel (web component version)?

Thanks, great grid!
--Nick

[upload] Make order of file list configurable

It might make sense to make the order of added files configurable (add new file to the top vs to the bottom).

Suggestion done during the UX testing

[grid] Grouping and aggregate/summary row support

[upload] Implement file preview

It’s important to have file preview thumbnails when picking files from Photo Library. In this case the files have the same name (“image.jpeg”). It’s impossible to distinguish between them and find out if a wrong photo has been uploaded.

Suggestion done during the UX testing

[grid] Responsive column configuration

I'm using Vaadin Grid and need responsiveness (any kind of wrapping would work). Is it possible to do this cleanly?

[date-picker] Range select

Range selection has currently been designed to work within one date picker.

We should evaluate different scenarios if they are better served with to individual pickers instead, or if we can and need to improve the single picker design in some way to accommodate more scenarios.

It’s not 100% clear to me how this relates to multi-select also, when the user can select many individual days from the picker, so it could be considered here as well.

[upload] Drag and drop doesn't work in latest chrome on Windows 10 Touch

Replicate issue in your website: https://vaadin.com/elements/-/element/vaadin-upload when using a windows 10 touch laptop

Using chrome 56 on Windows 10
Works for OSX
With latest firefox it works
Works with other versions of Windows (like 8 and vista)

Add example of more complex filtering

There’s a nice use case pointed out by @samiheikki in this forum thread: https://vaadin.com/forum/#!/thread/15243361

It would be great if we could add something like that to the grid examples. Not sure if we should use vaadin-date-picker, though. Would be nice, but does it make sense to use some of our other elements in the grid examples?

[grid] Select multiple rows with ctrl/cmd-click or shift-click

It would be a nice feature to handle the ctrl/cmd+click on a row for the multiple selection, instead of using the checkbox.
The auto-select attribute can make this useless, but the best use case would be when the auto-select attribute is not present, to always select the row on click cell (one only selected), but allow the multiple selection with the ctrl/cmd+click cell and the checkbox selection.

Online tool to customize the iconset

Use https://github.com/PolymerLabs/polyicon and replace the Material design icons with our Vaadin icons, and deploy somewhere under vaadin.com (as an MVP deploy in GitHub).

[combo-box] Back button in android should close popup

Normally in Android pushing back button closes any popup like keyboard, or native select options

Including Vaadin Icons from the CDN should be dirty easy

I'd like to include Vaadin Icons with just one easily understood line of HTML/CSS. Google Fonts does it by e.g.

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

[upload] prevent duplicate uploads

It would be nice to detect and prevent duplicated uploads of the same file, if possible.

Suggestion done during the UX testing

[combo-box] Support for numeric arrays of values, or throw an error

This code does not work, but we do not test when assigning the array, we should call the toString of each element or throw an error.

<vaadin-combo-box id="rangeStart" label="Range start"
items='[0,10,20,30,40,50,60,70,80,90]'></vaadin-combo-box>

[upload] Add an all uploads completed event

It might be beneficial to have an event after multiple uploads complete. Right now the events are only fired for each single file.

Suggestion done during the UX testing

[charts] Size doesn't update correctly when removing display: none from the parent

Vaadin Charts version: 3.1.0-rc1

Steps to reproduce

npm install polymer-cli
polymer init and select starter-kit.
Wait for dependencies to install
Add a vaadin-chart to my-view2.html
Use polymer serve to start the application
Browse to my-view2.html so that it is attached
Go back to my-view1.html and resize the window
After resizing, go back to my-view2.html
The size of the chart should now be something else what you expected

[upload] Add more server error messages

Would be nice if we can give the more detailed reason of failure, not just “server unavailable”. Might be good to show the detailed information in a tooltip or on click.

Suggestion done during the UX testing

[upload] Add a reason_id to file-reject event detail object

DX testing in vaadin/vaadin-upload#43 revealed that it's hard to find the reason while handling the “file-reject” event. Currently, the upload only sends a localized message string in event detail.

[icons] Not github icon :)

And also Linkedin, Email, and Skype :-)

[grid] Add an empty state template (data source is empty)

It would be a nice feature to add an empty state template to the grid (same way as the row details) for when the data source is empty

Redesign "Cancel All" feature

“Cancel All” button removes the complete files from the list, while the word “cancel” suggests that it would only affect the files that are in progress.

[date-picker] Support relative offset for initialPosition

Feature request from Ilya M.

vaadin-date-picker currently support setting initial position to some absolute date value. While in some use cases (travel date next week, birthday ~30 years ago, ...), the developer might want to change the initial position to some relative offset from today. A fixed date as initial position value for these cases would quickly become outdated.

Would be nice to have some means to set the initial position with some offset instead of absolute date value.

As a quick improvement for these cases we should probably provide an example in our documentation on how to set the initial position with some calculated date with offset from today.

[upload] Support optional `FileReader` transport instead of `XMLHttpRequest`

As a developer, I want the upload element to “upload” files with FileReader instead of XMLHttpRequest.

API idea:

transport property accepting string options:
- "XMLHttpRequest" (default)
- "FileReader"
with transport="FileReader", method property accepts string options:
- "arrayBuffer" (default) → fileReader.readAsArrayBuffer() is used
- "text" → fileReader.readAsText() is used

<vaadin-upload transport="FileReader" method="text"></vaadin-upload>
<script>
  vaadinUpload.addEventListener('upload-success', function(e) {
    e.detail.xhr; /* `undefined` with FileReader transport */
    e.detail.fileReader; /* FileReader instance */
    e.detail.fileReader.result; /* text content of the “uploaded” file */
  });
</script>

Autogenerate all icons assets from a source Sketch file

SVG, PNG and font formats (including the CSS for the fonts) should be autogenerated from a source Sketch file using the process described in https://github.com/cognitom/symbols-for-sketch#name-convention

The JSON “meta” file should also be generated from the Sketch file. The category and keyword data should be encoded inside the Sketch pages/artboard/layers.

Calendar element

Here is shows how to easily integrate it in to Polymer
http://stackoverflow.com/questions/29378824/rendering-fullcalendar-io-in-polymer-a-core-animated-pages-section.

The Cal is very well done in terms of functionality, but it would be great if it can be full Polymerised :)

[upload] Possibility to use other values than bytes for maxFileSize

E.g. "15", "1000kb", "10MB", "12GB"

[date-picker] Scroll the overlay to center the initial date and today vertically

Currently, when the overlay is scrolled to some date, for example, scrolling to today or the previously selected date on open, the month of that target date is positioned at the top of the overlay.

Instead, the target date should be scrolled to the center of the overlay.

~~Also, adjust the today button behavior so that it selects today instead of scrolling to it when today is inside the 50% height area in the center of the overlay.~~ (done)

[grid] Fire scroll events

We should fire scroll events when the grid is scrolled, which the developer can listen and react to.

var grid = document.querySelector("vaadin-grid");
grid.addEventListener("scroll", function(e) {
  ...
});

The event object ("e") should have both scrollTop and scrollLeft properties that present the grid’s state. If possible, it should also have the scrollHeight property that indicates the total of the grid body.

This will enable developers to do additional customizations based on the scroll position, to add some functionality which is not built-in, like a scrollbar indicator (like you see in Google Docs).

Provide both ligature and non-ligature fonts

The ligatures add roughly 15% more size to the font files (the svg font gets 100% more size, but we probably won’t ship that in the next version).

We should offer both options for the user to choose from.

The ligatures are nice for designers to use in design tools like Sketch, as they can just type the name of the icon instead of search for the correct unicode to copy-paste. Also, in browsers that support ligatures, it provides a nice fallback text for screen readers to announce, in cases where that is feasible.

On the other hand, the added size can be considered unnecessary for the users to download on their devices, if they are not used in the app (only single unicode characters used to set the icons).

[upload] Add tests for i18n

There seem to be no tests for changing the default i18n localization values.

On a small browser window, the overlay is scrolled alternatively up and down when navigating left/right

Steps to reproduce

Open https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-date-picker/demo/
Resize browser height to less than the popup height
Open first popup and navigate using arrow left/right

Expected outcome

Initial scroll position is maintained when navigating left/right

Actual outcome

Every navigation operation scrolls either up or down

Browsers Affected

Chrome
Firefox
Safari

[combo-box] Unify mouse and keyboard item focus/highlight

Currently the user can have two separate highlighted rows in the dropdown: one for the mouse cursor and one for the keyboard.

These two should be one and the same, and the mouse cursor should move the keyboard focus to the highlighted item.

When the mouse cursor leaves the dropdown, the keyboard focus should be cleared, unless there is a previous value/selection in the input. If there is a previous value/selection, the focus/highlight should return to that item.

[charts] support lazy loading chart dependencies

Currently, using any chart at all requires downloading javascript for all charts which is not very optimal.

I would like to see that the imports get split so that any given chart will only download the javascript it needs to run.

You may want to wrap individual scripts in HTML files and use HTML imports so that the de-duping mechanism ensures only one of each gets downloaded if you have several charts.

Allow any number of children

Instead of just two child elements and one splitter element, we could support any number of children with a splitter element between each child element.

See https://codepen.io/pen/ for a use case (the HTML, CSS and JS panels).

[grid] Built-in filter options

Hello Vaadin Team,

i'd like to know if your plans for the Grid 2.0 contain build-in filter options like KendoUI is featuring it in the following example: http://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes

In this example, when clicking on the arrows at the end of each column header, a overlay with filtering options depending on the column content is displayed. This is very easy and useful for setting multiple filter selectors (e.g. for selecting orders from customers from Germany and Finland at once). This might be possible with a text input too, but then the user has to know and to understand the Boolean logic of setting something like "Germany || Finland" as filter text.

So, just a show yes or no/not yet/not to soon would be enough for me so that I can decide if I've to worry about implementing this on my own or not :)

Thanks for all your work and have calm and relaxing Christmas days!
Michael

[text-field] Allow the developer to configure how validation result is emphasized

Current situation

The current default behavior defined in vaadin/vaadin-text-field#12 is that a failed validation is only indicated after the user blurs the field and that a previously failed validation is cleared immediately during typing.

This works nicely for some part of the use cases and avoids the following edge case:

Not giving the user a failed validation message prematurely before the user has had time to finish typing

But the following cases are not covered:

Giving the user immediate feedback about the invalid state, for example in a number field, if the user types in letters, or if the maximum allowed length is exceeded.
Giving the user (immediate or deferred) explicit feedback about a successful validation, for example marking an email address field with a “success icon” when the user has entered a valid email address

Change proposal

We should move back to updating the validation status immediately after the user types in the field. But instead of having a way to just indicate the invalid state, we should also offer a way to configure the input to show the following combinations of states:

Invalid state only – a common indication is red text and possibly an icon
Success state only – a common indication is green text and possibly an icon
Invalid and success states – either state is triggered after user input, depending on the validation status
No state indication – it should be possible to disable the styles completely. This could even be the default.

There’s a prototype in https://github.com/vaadin/vaadin-input/tree/proto/validation-feedback
(relevant API examples in https://github.com/vaadin/vaadin-text-field/blob/5690eced3c247b09de821c4017679fd42cd3f755/demo/validation-feedback.html)

[grid] Pagination

In some use cases, a paginated data grid is easier for the user than a purely scrolling one. Also, scrolling and paging can be nicely combined with "virtual paging", as you can see in this example.

This could be added as an example (not directly baked in as a feature), and we could provide the pagination element as an official add-on that can be added below the grid without any extra configuration. On top of that, the scrolling could be disabled with some extra property perhaps.

In the meantime, use this pagination example as a starting point: https://cdn.vaadin.com/vaadin-grid/2.0.0-beta1/demo/pagination.html

Delay on layouting on Edge browser

The demo UI has second+ delay before it layouts to correct column count from 1 column, on Microsoft Edge. Demo from 2017-03-03.

[date-picker] Close overlay when pushing back in android

The android back button always closes popups in android apps. Date picker should capture history.back() and close it as well.

[grid] Freeze/fix columns to the right

Adding this feature to the wishlist.

Some use cases require columns to be fixed on the right edge of the grid.

Should work simultaneously with fixed columns on the left side.

Touch target size in Material Design is 48px on touch screen and 40px on desktop. Please change size of days. Height 48px(40px) and width based on screen width with max-width 48px(40px).
https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-touch-target-size

[grid] Drag/lasso selection

This will be a very cool feature to select multiple line with a lasso type selection, as there is on google drive.
Holding mouse click down and drag over the line to selected.

vaadin / web-components Goto Github PK

web-components's Introduction

Vaadin web components

Installation

Usage

Components

Core Components

Pro Components

Browser support

Documentation

Examples

Questions

Big Thanks

Contributing

Development

LICENSE

web-components's People

Contributors

Stargazers

Watchers

Forkers

web-components's Issues

Steps to reproduce

Steps to reproduce

Expected outcome

Actual outcome

Browsers Affected

Current situation

Change proposal

Recommend Projects

Recommend Topics

Recommend Org