by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Aug 13 15:04
    tomivirkki synchronize #1782
  • Aug 13 15:04

    tomivirkki on revert-eager-size

    Rename (compare)

  • Aug 13 14:09
    tomivirkki edited #1782
  • Aug 13 14:06
    tomivirkki synchronize #1782
  • Aug 13 14:06

    tomivirkki on revert-eager-size

    Add tests (compare)

  • Aug 13 09:33
    tomivirkki commented #258
  • Aug 13 09:09
    tomivirkki synchronize #1782
  • Aug 13 09:09

    tomivirkki on revert-eager-size

    Debounce data provider _effecti… (compare)

  • Aug 13 07:43
    tomivirkki synchronize #1782
  • Aug 13 07:43

    tomivirkki on revert-eager-size

    Debounce data provider _effecti… (compare)

  • Aug 12 14:13
    tomivirkki edited #1782
  • Aug 12 14:11
    tomivirkki commented #1782
  • Aug 12 14:09
    tomivirkki commented #1782
  • Aug 12 12:26
    tomivirkki commented #1782
  • Aug 12 09:13
    tomivirkki synchronize #1782
  • Aug 12 09:13

    tomivirkki on revert-eager-size

    Restore the comment (compare)

  • Aug 12 09:11
    tomivirkki opened #1782
  • Aug 12 09:03

    tomivirkki on revert-eager-size

    perf: Revert eager effective si… (compare)

  • Aug 11 07:00

    vaadin-bot on v14.3.3

    (compare)

  • Aug 11 07:00

    vaadin-bot on 14.3

    14.3.3 (compare)

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
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.
Leho Kraav
@lkraav
:heavy_plus_sign: 1
Mark Garrett
@moderndeveloperllc
Well, spoke too soon. Had to open vaadin/vaadin-tabs#150
lunga
@LTDO
Hello everyone, I'm new here. I just started learning Vaadin this year. I hope I'm in the right place to get as much knowledge and advice while still in the learning process.
Mark Garrett
@moderndeveloperllc
@LTDO Howdy! This chat is for the Vaadin web components and the Java discussions happen over in https://gitter.im/vaadin/flow. The developers are reasonably active here, and some of us users help out where we can.
Sourav Suman
@souravbairoliya_twitter
looking for tooltip feature in vaadin grid component when the data bind to the table is too big.
any sample code would be appreciated
or the approach
Tomi Virkki
@tomivirkki
@souravbairoliya_twitter We don't unfortunately have a dedicated tooltip component built-in yet. There's this add-on but note that it's commercial https://vaadin.com/directory/component/tooltip
frangomezvenegas
@FranGomezVenegas
@andersforsell Exactly! I created both builds and "es6-unbundled" still issued but "uncompiled-unbundled" works fine. Thanks a lot!
Mateusz
@denzeloff
hello, is there any video player component, which i can use to watch video from my raspberry pi in real time?
Serhii Kulykov
@web-padawan
We do not have any video player components and generally recommend to use<video> HTML element where possible.
Manoj2749
@Manoj2749
Hello, i'm using web-components in my project, i have added polyfills of web-components in our application,Its working fine in chrome,Firefox,IE,IE edge too,
But i have an problem, We are using ng-select dropdown to select values...In IE edge i am not able to select the drop down selection, its not working properly ,can someone help me on that
Kari Söderholm
@Haprog
ng-select is an Angular component right? Afaik it's not implemented as a web component so I'm not sure why you're asking here. Personally I don't have any Angular experience.
Manoj2749
@Manoj2749
App1(main app) App2(charts)..With the reference of Vaadin blog, i implemented web components its working fine , its not issue with ng-select. working in other components of application, i added polyfills in App1(main app) head tag, after adding polyfills selection of dropdown not behaving properly, if i'm removing polyfills its working fine...can someone help me on that
Mark Garrett
@moderndeveloperllc
@web-padawan With the new LitElement vaadin-app-layout, what is the procedure for registering styles for that element? I was using registerStyles('vaadin-app-layout', css...); and importing that into the element I was using vaadin-app-layout, but that doesn't seem to work anymore.
Mark Garrett
@moderndeveloperllc
@web-padawan It's difficult to debug the issue because in lit-elements there is no longer a <style> element in the shadowDOM to Inspect in the browser, nor does a dom-module get inserted anymore.
Serhii Kulykov
@web-padawan
It should work. For debugging, it's easier to use Firefox or add the following to HTML page: delete Document.prototype.adoptedStyleSheets (before any other scripts)
Please create an issue and I will investigate.
souravtyson
@souravtyson
i am working on polymer web-component. i have this page which gets open when i click on the button, the is opening but the focus of the page is at the bottom. i want to show the top view of the page but its not showing. Any idea how can i do it
Mark Garrett
@moderndeveloperllc
@web-padawan Took me almost all day, but I think I found the issue: vaadin/vaadin-app-layout#144
Basically, the Vaadin themes can wind up being loaded and inserted as styles after user custom styles since they have no moduleId.
sahilshah50
@sahilshah50

@souravtyson , I believe you are using vaadin-router for navigation. If you want a generic solution for all pages, you can use window.scrollTo(0, 0); in the "vaadin-router-location-changed" event. Check discussion on vaadin/vaadin-router#43

If you need more granular control, you can use onAfterEnter event on the webcomponents for which you wish to restore scroll position.
onAfterEnter(location, commands, router) {
//Restore scroll position in case of navigating back, else scroll to top
let y = 0;
if (history.state && history.state["scrollY"]) y = history.state["scrollY"];
setTimeout(function () { window.scrollTo(0, y); }, 1);
}

Mark Garrett
@moderndeveloperllc
Very strange issue going on with printing. I'm using vaadin-app-layout and vaadin-grid in a set of LitElements. When I go to print, it only prints what's available on the screen - not the multiple pages that the grid might take. Thoughts?
Tomi Virkki
@tomivirkki
@moderndeveloperllc you mentioned LitElement. Does the issue not occur without Lit? I'm not sure if I fully understand the issue; a live example would help. Also note that the grid uses virtual scrolling under the hood (iron-list currently) so the DOM will only include a subset of the items at a time if there are lots of them.
chisholmd
@chisholmd
Hi, I am using the vaadin-router and trying to use the onBeforeLeave event. The only code example I can find uses " implements BeforeLeaveObserver " ...but it looks like "implements" is only available via TypeScript. Can anyone tell me if TS is required in order to use this feature? or can point to a code example in plain ES6. Thanks for any help. For now I am going to assume that I can't use this feature of the vaadin-router.
Mark Garrett
@moderndeveloperllc
@tomivirkki I wish I could figure out a better way of describing what is going on. I put together a glitch.me, but the issue isn't occurring with it! I'm thinking this might be a packager (webpack) issue. I'm using height-by-rows, so all items are in the DOM. Troubleshooting this is very difficult as the print subsystem for browsers is pretty much a blackbox. JS breakpoints don't work. I'm looking at the Performance timeline now to see if there is something obviously wrong. FYI, the glitch I'm working with: https://glitch.com/edit/#!/level-perfume-rb4e46pxq?path=grid-element.js:1:0
sahilshah50
@sahilshah50
@chisholmd, you can find basic usage examples for Lifecycle events at following links:
https://vaadin.github.io/vaadin-router/vaadin-router/demo/#vaadin-router-lifecycle-callbacks-demos
https://github.com/vaadin/vaadin-router/wiki/Transition-Rules
And full documentation at: https://vaadin.github.io/vaadin-router/vaadin-router/#/classes/WebComponentInterface#method-onBeforeLeave
TS is not a prerequisite for using vaadin-router, and you should be able to use that callback in plain ES6.
Mark Garrett
@moderndeveloperllc
@tomivirkki @web-padawan Found the issue. CSS of course. I was following the instructions to use "content scrolling" and set html and body to height: 100%; otherwise my drawer isn't big enough on many pages. Unfortunately, this height doesn't work very well when printing. I'm guessing that it has to do with the vaadin-grid being in the shadowRoot of an enclosing component.

I fixed by also having

@media print {
    html, body {
        height: auto;
    }
}

in my CSS.

Mark Garrett
@moderndeveloperllc
Issue submitted for documentation: vaadin/vaadin-app-layout#148
Mark Garrett
@moderndeveloperllc
Issue with vaadin-development-mode-detector. When using webpack it is being included with other Vaadin elements. Unfortunately, it trips my CSP protections and reporting. The script executes because I'm not in dev mode, but I get a report each time the script loads. Anyone know a way to not have that script loaded?
Mark Garrett
@moderndeveloperllc
Sorry, the offending code does NOT execute, but browsers still see the Function() call and sends a CSP report to my reporting URL
Tim Sweet
@timothyswt_twitter

hey guys I'm impressed with the router project. I am hoping to use it in conjunction with the web components my team and I are developing using the loader i wrote a while back. https://github.com/orneryd/web-components

It has no runtime dependencies and supports sass. It lets you write es6 template literal syntax inside of html files and pass context for events into the exported function.

Tim Sweet
@timothyswt_twitter
it's essentially vanilla webcomponents with the ability to separate the html, css/scss, and js from each other while also allowing you to use es6 literal syntax so you don't have to learn anything other than what the browser supports out of the box. The event binding is the biggest feature as it allows you to put onclick=${this.myHandler} (or any on* events including dispatches of CustomEvents) onto any elements in the html and as long as it exists on the object passed to the template function (check the readme), it will be wired up for you automatically.
chisholmd
@chisholmd
I just read https://github.com/vaadin/vaadin-themable-mixin#stylable-shadow-parts
and I am more confused then ever. Is there a really simple example somewhere of how to style the selected value in a vaadin-select. Its kinda driving me craxy
chisholmd
@chisholmd
I have my-element and inside its template I have a vaadin-select that works fine, except that the selected value that is displayed is black. So I added this to the host: section of my-element's style block:
:host {
[part="input-field"] {
color: #fff;
}
}
..but the selected value that is displayed remains black. Did I read the instructions wrong?
chisholmd
@chisholmd

Right so I drilled into...
\bower_components\vaadin-select\theme\lumo\vaadin-select-styles.html
scrolled down to the <dom-module id="lumo-select-text-field">
and found [part="input-field"] {} and added color:#fff.

Finally I have white text!! So what is the proper way of doing that?

Kari Söderholm
@Haprog
@chisholmd Have you looked at the vaadin-select styling demos here https://cdn.vaadin.com/vaadin-select/2.1.7/demo/#select-styling-demos ?
Kari Söderholm
@Haprog

You need to create a style module like this

<dom-module id="my-select-style" theme-for="vaadin-select-text-field">
  <template>
    <style>
      [part="input-field"] {
        color: #fff;
      }
    </style>
  </template>
</dom-module>

This will affect all vaadin-selects on the page. And note that style modules need to be loaded before the component definition itself (vaadin-select in this case) is loaded or it won't have an effect.

If you only want it to affect specific vaadin-select elements only then do this instead:

<dom-module id="my-select-style" theme-for="vaadin-select-text-field">
  <template>
    <style>
      :host([theme~="custom-select"]) [part="input-field"] {
        color: #fff;
      }
    </style>
  </template>
</dom-module>

And then you need to give that select a theme attribute like <vaadin-select theme="custom-select"></vaadin-select>.

Mark Garrett
@moderndeveloperllc
@web-padawan Just an FYI, new alphas are working well for me so far. The module IDs set things in the right order for themes and I'm not seeing any regressions so far.