Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 24 15:19
    mshabarov opened #962
  • Oct 24 15:13

    mshabarov on 957-empty-items

    fix: mouse scroll doesn't fetch… (compare)

  • Oct 23 17:56
    tulioag commented #961
  • Oct 23 17:51
    tulioag synchronize #961
  • Oct 23 17:51

    tulioag on 900_Valid_item_is_not_selected_if_ComboBox_has_a_dataprovider_and_autoopendisabled

    chore: revision fixes (compare)

  • Oct 23 09:44
    xdenser edited #2066
  • Oct 23 09:41
    xdenser opened #2066
  • Oct 22 17:17
    mtter opened #2065
  • Oct 22 13:02
    rolfsmeds commented #719
  • Oct 22 11:32
    rolfsmeds closed #904
  • Oct 22 11:32
    rolfsmeds commented #904
  • Oct 22 11:32
    rolfsmeds unlabeled #904
  • Oct 22 08:56
    tulioag synchronize #961
  • Oct 22 08:56

    tulioag on 900_Valid_item_is_not_selected_if_ComboBox_has_a_dataprovider_and_autoopendisabled

    fix: flush the pending requests… Merge branch 'master' into fix/… (compare)

  • Oct 22 08:45
    tulioag synchronize #961
  • Oct 22 08:45

    tulioag on 900_Valid_item_is_not_selected_if_ComboBox_has_a_dataprovider_and_autoopendisabled

    Fixed error Added test Disable change if allowCustomVa… (compare)

  • Oct 22 07:45

    mshabarov on 229-load-indicator

    (compare)

  • Oct 22 07:45

    mshabarov on master

    fix: flush the pending requests… (compare)

  • Oct 22 07:45
    mshabarov closed #958
  • Oct 22 07:24

    web-padawan on demo-cleanup

    (compare)

Serhii Kulykov
@web-padawan
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.
MdV303
@MdV303

Hi all, I have a question about styling the vaadin-upload component. I am able to apply custom styling to
vaadin-upload::part(upload-button)
and
vaadin-upload::part(file-list)

However, I am struggling to find the proper syntax to set styling on elements deeper in the component's hierarchy, in particular the status text part, called "status". None of the following attempts work:

        vaadin-upload::part(status) {
            color: #009acd;
        }

        :host() [part="status"] {
            color: #009acd;
        }

        #status {
            color: #009acd;
        }

        vaadin-upload-file::part(status) {
            color: #009acd;
        }

What am I missing here? Why does the syntax I use for "upload-button" and "file-list" have no effect on "status"?
Any help would be appreciated :-)

Martijn

suns
@sashafirsov
Hi all, is there any samples of declarative use of <vaadin-menu-bar>?
(Declarative means with tags and no JS)
suns
@sashafirsov
Same question about <vaadin-combo-box> - are there declarative use samples ?
Kari Söderholm
@Haprog

@MdV303 When you want to style the internal parts of the components (which are inside shadow DOM) you need to declare the styles in special style modules so they get injected to the components you're targeting. You should probably read the docs at https://github.com/vaadin/vaadin-themable-mixin#readme to understand how it works. Most Vaadin components have some useful CSS styling examples at "Styling" tab in the demos of the component so you can see the correct HTML+CSS syntax to define specific styles at least, but vaadin-upload doesn't seem to have styling examples with CSS.

Basically for styling the part you want you need something like:

<dom-module id="custom-upload-file-style" theme-for="vaadin-upload-file">
  <template>
    <style>
      [part="status"] {
        ...
      }
    </style>
  </template>
</dom-module>
Kari Söderholm
@Haprog

@sashafirsov Unfortunately <vaadin-menu-bar> doesn't support a declarative API for defining the contents atm. vaadin/vaadin-menu-bar#81

Basically the same for <vaadin-combo-box> though you can provide an "item template" declaratively (there's an example in API docs https://cdn.vaadin.com/vaadin-combo-box/5.0.11/#/elements/vaadin-combo-box). I didn't see an existing issue about providing a declarative API for combo box.

In both cases you can provide items property as an HTML attribute (JSON string) but it isn't pretty.

Example from above link:
<vaadin-combo-box items='[{"label": "Hydrogen", "value": "H"}]'>
  <template>
    [[index]]: [[item.label]] <b>[[item.value]</b>
  </template>
</vaadin-combo-box>
MdV303
@MdV303
@Haprog Thanks for your response. Indeed, I can't find styling examples for vaadin-upload anywhere... Tomorrow I'll be working on that particular project again so I can try your suggestion. Will let you know how it turns out.
suns
@sashafirsov
@Haprog I found that vaadin-combo-box sample in webcomponents.org . Which was not easy to dig out. Is there a good way to contribute into documentation? Declarative use is a level of magnitude easier to comprehend and replicate. Especially for learning, demo, or evaluation. Accounting that web components have more attraction from gitter community, IMO vaadin would benefit from docs upgrade.
Kari Söderholm
@Haprog

@sashafirsov You can find the component docs and demos from https://vaadin.com/components/ or directly from GitHub (e.g. via https://github.com/vaadin/vaadin#readme). Each Vaadin web component repository has release notes in GitHub "Releases" page with links to "Live Demo" (code examples) and "API Documentation" (this is the link I pasted above) for each release. For example here for combo box https://github.com/vaadin/vaadin-combo-box/releases

The same information can basically be found from here https://vaadin.com/components/vaadin-combo-box (just make sure to select "HTML" version from the left unless you want to see the Java API). Then use the "Examples" and "API" tabs. Here's a more direct link which shows the above code snippet https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxElement (though the info at vaadin.com is not immediately updated after new component releases so it might be slightly outdated in some cases. If you need to check the web component docs for a specific version or want to make sure you're looking at the latest version of the demos, check the links in the latest GitHub releases)

The best way to contribute to our component documentation atm. is by opening issues or commenting on issues at the related component's GitHub repository. You can also contribute pull requests but it would be better to first check with the team (e.g. via discussion in issue) what is a good approach or what kind of pull request would be ok depending on issue (just to avoid wasted effort in case we can't accept the pull request without major changes).

We're working on a new documentation site to replace https://vaadin.com/docs/ (which currently focuses mainly on the Java framework side). The new docs should better integrate all our documentation in one place and should also have embedded code examples and demos of our components (both Java and HTML/JS examples). It's still a work in progress though but the first version of it might be coming out in some months from now.

suns
@sashafirsov
@Haprog , just an idea for docs, when creating the page, making it "alive" is quite beneficial. Meaning having ranked Q&A and ability to ask question. Implementation could go over git bug+tags, disqus or even wiki. Should not be difficult to implement as web component :)
PHP is a good sample of alive API docs
Kari Söderholm
@Haprog
@sashafirsov We already have commenting currently at the end of all pages at vaadin.com/docs
And there's "Edit this page" button at the top right of most content pages which links to correct file in GitHub (since those docs are currently spread across several repositories depending on which section of the docs you're looking at).
suns
@sashafirsov
@Haprog , there is no point in generic docs as far as I see. The questions raised on level of component or module
Kari Söderholm
@Haprog
As I said, those component docs will be integrated there, so they would also have the commenting as far as I understand.
Also with live examples.
suns
@sashafirsov
(Y)
Kari Söderholm
@Haprog
Not sure though if the commenting has been thought about yet in the current prototype of the new docs. Thanks for mentioning it. I'll ask has it been already considered how it will work in the new version.
suns
@sashafirsov

@all, there is a demo for most of Vaadin components in CDN
https://cdn.xml4jquery.com/web-elements-loader/build/esm-unbundled/demo/vaadin-elements-demo.html

There is no JS, all declarative programming.

MdV303
@MdV303

@Haprog I have been experimenting a bit with several variants of your suggestion. I have tried

<dom-module id="vaadin-upload-custom-style" theme-for="vaadin-upload-file">
    <template>
        <style>
            [part="status"] {
                color: #009acd;
            }
        </style>
    </template>
</dom-module>

though I would prefer something like

const vaadinUploadCustomStyle = document.createElement('dom-module');
vaadinUploadCustomStyle.themeFor = 'vaadin-upload-file';
vaadinUploadCustomStyle.innerHTML = `
    <template>
        <style>
            [part="status"] {
                color: #009acd;
            }
        </style>
    </template>
`;
vaadinUploadCustomStyle.register('vaadin-upload-custom-style');

...as this syntax is used to import other styling modules, so I tried that too.

The styling is then imported by the element that uses vaadin-upload with

<style include="vaadin-upload-custom-style"></style>

However, in all cases Chrome gives the following warning, completely regardless of the content of the <style> tag:
Could not find style data in module named vaadin-upload-custom-style.

I checked the link you provided but I can't seem to find the answer on that page...

Kari Söderholm
@Haprog
@sashafirsov The demo you linked doesn't work atm. Just shows blank page and console shows HTTP 503 error.
Kari Söderholm
@Haprog

@MdV303 When you use theme-for approach you don't need to use include for it anywhere. It will be automatically loaded by the component itself. But the style module needs to be loaded/declared before the component loads, otherwise the styles aren't picked up. This is currently a technical limitation of the ThemableMixin. So you need to either define the <dom-module id="vaadin-upload-custom-style" theme-for="vaadin-upload-file"> inline on the page or make sure that the import for the file that contains it is before the import of vaadin-upload component.

If you want to use JS to register the styles then I'd suggest using the registerStyles API of themable mixin. See https://github.com/vaadin/vaadin-themable-mixin#styling-in-javascript

So instead of that <dom-module> HTML block you can have something like:

registerStyles('vaadin-upload-file', css`
  [part="status"] {
    color: #009acd;
  }
`);

(this will handle creating the dom-module element for you). But you still need to make sure this executes before the vaadin-upload component has been fully loaded.

@MdV303 Are you using Polymer 2 or 3?
Or maybe lit?
MdV303
@MdV303
I am pretty much done converting a Polymer 2.6 Single Page Application to Polymer 3, so currently I am working in Polymer 3. This is one of the last conversion issues I have to solve. In Polymer 2 I had no problems styling the inner components of vaadin-upload, so it's a tad frustrating that it is taking so much time and effort just to get the word "Queued" to be displayed in a color that is visible on a dark background... So thank you very much for your support! I'll try your suggestion and post back the result.
MdV303
@MdV303

Yes! I finally got it to work! I had to put the following code all the way up in the index.html, before loading the app element:

    <dom-module id="vaadin-upload-custom-style" theme-for="vaadin-upload-file">
        <template>
            <style>
                #status {
                    color: #009acd;
                }
            </style>
        </template>
    </dom-module>

Please note that

    [part="status"] {
        color: #009acd;
    }

does not work here. However, the status div also has an id and setting styling by its id appeared to work - for some reason.
Furthermore, the snippet above is in the end the only change I had to make. No includes, no separate styling file.

Kari Söderholm
@Haprog
@MdV303 Good to hear. [part="status"] should work just as well though (unless some of the characters are accidentally something else than ASCII, for example if the quotes are wrong character like some smart quotes). It's just a CSS attribute selector that also applies to the same element. We normally use that "part" in styling examples because only the part attributes are considered to be "public API" for styling (so we consider backwards compatibility and semver when chaning them). Other things in shadow DOM like IDs and possible class names are considered private and may change in any version so you should try not to rely on those.
Though more often we show it in examples with [part~="status"] (note the ~=) since in some cases one element may have more than one word separated by space in the part attribute (e.g. part="part1 anotherpart" in which case [part="part1"] would not match but [part~="part1"] would)