vaadin/web-components

Vaadin has a high quality component set for building mobile and desktop web applications in modern browsers

Kari Söderholm

@Haprog

@lauritowal What are you trying to accomplish? It's the server that defines the status code. You can't change that fact after receiving it.

After checking out that demo, the commented code about "Interpret any server response as success" looks like a mistake to me.
XHR is an instance of XMLHttpRequest where status is readonly. That demo seems to be 2 years old though. I guess it's possible that xhr status was writable in browsers 2 years ago but I'm not sure. Couldn't easily find any info on if this has somehow changed.

Walter Laurito

@lauritowal

Hi @Haprog ! Thanks for your answer. I am doing event.preventDefault(); and
uploading the file manually via graphQL that's why I need a way to set everything to completed when the file is uploaded. Like stopping the progress bar and setting the complete icon.

Walter Laurito

@lauritowal

I tried event.detail.file.complete = true;
also

Walter Laurito

@lauritowal

Don't worry. I've changed the uploading a bit. Working now :)

Mark Garrett

@moderndeveloperllc

@tomivirkki Just saw the alpha for vaadin-accordian. I'm pretty excited about the move to LitElement and look forward to someday not having to bundle the (relatively) heavy Polymer 3 libraries.

Tomi Virkki

@tomivirkki

@moderndeveloperllc Yeah, the next generation Vaadin components are going to be lit :) @web-padawan is doing great job with the conversion.

Mark Garrett

@moderndeveloperllc

@tomivirkki Just got done voting on the proposals for vaadin-form. Really interested to see what y'all can do with that as iron-form is my last real Polymer dependency.

Serhii Kulykov

@web-padawan

@moderndeveloperllc see also the proposal here
https://github.com/vaadin/proposal-for-vaadin-form

API is not yet decided. It might be not a web component but e.g. lit-html directive

Mark Garrett

@moderndeveloperllc

@web-padawan I voted for a few I really liked. You can see the feature request I created about serialization. FWIW, I'm partial to the DOM-style API alternatives as it would be easier to port existing forms rather than a lit-html directive that would require much more work to port. Directives also appear to be designed for specific, limited functionality. A form() directive seems too big and complex, but that's JM2C.

Mark Garrett

@moderndeveloperllc

@web-padawan I'm testing out vaadin-accordion 2.0.0 -alpha. The component is rendering, but opened-changed does not seem to fire when I click a panel. A click registers, but not the event. opened-changed does fire if I select the panel header via keyboard and hit space.

Jean-François Lamy

@jflamy

npm noob question: "compression-webpack-plugin": "3.0.0" is listed in package.json, and has a dependency on a package that is flagged as having a security bug by github. If I edit package.json and use 3.0.1 (which exists and is said to fix the problem), then maven prepare-frontend resets the version to 3.0.0. How does prepare-frontend figure out the version and where can I change it ?

Serhii Kulykov

@web-padawan

@moderndeveloperllc thanks for reporting, will take a look why that happens.

@jflamy thanks for letting us know. On master this is handled in
https://github.com/vaadin/flow/blob/52fc8a2aed70246fa1b3b9883501bb9b67a4b554/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java#L243

Submitted vaadin/flow#7121 to handle the compression-webpack-plugin upgrade.

Mark Garrett

@moderndeveloperllc

@web-padawan Let me know if I need to open an issue into the repo. FYI, snippet of code can be found here: https://gist.github.com/moderndeveloperllc/4e007127c8746c632a5554129badb3a9 I tried to take it out of the form, and it still wasn't registering clicks.

paulkirspuu

@paulkirspuu

hey yall vaadiners!

https://vaadin.com/components/vaadin-tabs/html-examples/tabs-integration-demos#content-switcher-with-iron-pages not working out of the box, getting vaadin-list-mixin.js:207 Uncaught TypeError: Cannot read property 'disabled' of undefined.

ideas?

Kari Söderholm

@Haprog

@paulkirspuu Seems to work fine at that URL for me. Can you show your code for the view where you get that? Have you remembered to import iron-pages component?

paulkirspuu

@paulkirspuu

iron pages imported, as well as vaadin-tabs

at that url it works for me, too

ill dm you the code

Kari Söderholm

@Haprog

That demo seems to use Polymer data binding so you either need to have that code in a Polymer template or wrapped in a dom-bind to have the data binding work.

I guess it could be presented somehow more clearly. Usually in the demos we assume that the code should work as pasted in a normal HTML file, but that one seems to have a different assumption without explanation.

Kari Söderholm

@Haprog

Turns out @paulkirspuu was trying to use the example polymer data binding in a LitElement. I'm not sure but there might also be another nicer way to do this kind of tabs in Lit without iron-pages.

paulkirspuu

@paulkirspuu

got it working with https://www.webcomponents.org/element/vaadin/vaadin-tabs/elements/vaadin-tabs#event-selected-changed

Paul

@corbettcode

Howdy everyone, we just migrated to Vaadin 14 this past weekend and until today everything seemed to be working. Trying to build a production version yields the error: "Failed to execute goal com.vaadin:vaadin-maven-plugin:14.1.2:prepare-frontend (default) on project onerev-app:". Has anyone else encountered this?

sahilshah50

@sahilshah50

@moderndeveloperllc and @Haprog , thanks for replying to my query. Not sure how I missed your notification.
@Haprog your recommendation was spot on. I ended up using custom click trigger, checked for a "router-ignore" attribute on <a> element. It was a very small change in the click.js file that you mentioned.
// ignore the click if the <a> element has the 'download' or 'router-ignore' attribute
if (anchor.hasAttribute('download') || anchor.hasAttribute('router-ignore')) {
return;
}

I feel this small feature addition should be incorporated by vaadin team in original code. May be name the attribute "vaadin-ignore" :)

Kari Söderholm

@Haprog

Great to hear you got it working. @sahilshah50 you could open a feature request issue at https://github.com/vaadin/vaadin-router/issues if you like. But I can also link this discussion to the team that works on router.

Paul

@corbettcode

Vaadin 14.1.2 does not contain the latest version of FlexLayout. Makes me wonder what else is not up-to-date!

Kari Söderholm

@Haprog

@corbettcode FlexLayout is part of vaadin-ordered-layout-flow package. Latest stable release of that is 2.0.0 which seems to be included in Vaadin 14.1.2. But there does seem to be one newer commit in master branch of vaadin-ordered-layout-flow which isn't in any release yet. Are you referring to this one https://github.com/vaadin/vaadin-ordered-layout-flow/commit/4ccdeaec1e29764750ed9f0fa4bf23fa406436e4#diff-5e8cfb4002e77c7bd94f3bc270fe3fcb ?

https://github.com/vaadin/vaadin-ordered-layout-flow/issues/80#issuecomment-549953835

Paul

@corbettcode

@Haprog Yes, the new training videos state that there is an updated FlexLayout in 14.1. Check the layout video. Also, the web site does not mention FlexLayout in the Components library.

Paul

@corbettcode

@Haprog Trying to build a production version in a BitBucket pipeline yields the error: "Failed to execute goal com.vaadin:vaadin-maven-plugin:14.1.2:prepare-frontend (default) on project onerev-app:". I can build and run both on my development system without error. Do you know anything about this? If not, do know of anyone who would?

Kari Söderholm

@Haprog

@corbettcode Thanks for pointing that out about the training video! I guess that video was recorded with the assumption that the new version of FlexLayout would make it into Vaadin 14.1 but for some reason it got delayed (I don't know the details for the decisions). Hopefully we can add some note about this in the training materials soon or get the 14.2 out with this new FlexLayout version soon.

@corbettcode I don't know that much about the Java build and this channel is mainly about the components. Please ask about that in https://gitter.im/vaadin/flow or at https://vaadin.com/forum

Paul

@corbettcode

@Haprog Sorry...was not sure where to ask this. Thank you for letting me know.

GantaSanthoshkumar

@GantaSanthoshkumar

How to develop responsive design in vaadon

How to develop responsive design in vaadin, please provi

Rolando Isidoro

@rolandoisidoro

@GantaSanthoshkumar , maybe the Board PRO component is what you're looking for: https://vaadin.com/components/vaadin-board

Kari Söderholm

@Haprog

@GantaSanthoshkumar You might also want to take a look at few example templates that are available here https://vaadin.com/labs/layout-examples (there's a live demo of them too).

sahilshah50

@sahilshah50

@Haprog I have opened a new feature request as suggested by you vaadin/vaadin-router#424

Mateusz

@denzeloff

hello, i am looking for master guy who can better explain me how to create own component

i would like to create joystick as web component

such as https://github.com/bobboteck/JoyStick

Kari Söderholm

@Haprog

@denzeloff So you're just looking for info about how to create generic web components? Have you decided do you want to implement it as vanilla JS, Polymer 3 or LitElement based web component?

Or maybe something else.

Those libraries have their own documentation which probably would help you to get started.

Kari Söderholm

@Haprog

I might be biased but I'd recommend getting started by trying out LitElement and following their guide/tutorial from https://lit-element.polymer-project.org/

It's also good to know what parts are related to web component standards and what is library specific. Some resources you might want to check out also:

Mark Garrett

@moderndeveloperllc

@web-padawan Just wanted to say I'm using the new vaadin-tabs4 alpha. I have a pretty simple use case, but it's working fine so far!

@Haprog I echo your LitElement recommendation. It's clean and small. I'm happy that it looks like Vaadin is going down that path.

Where communities thrive

People

Repo info

Activity