zooplus / zoo-web-components Goto Github PK

Web-components library.

Home Page: https://zooplus.github.io/zoo-web-components/

License: MIT License

JavaScript 80.54% HTML 3.94% CSS 15.52%

web-components javascript css ui-components presentational-components web-component custom-elements vanilla-javascript vanilla-js shadow-dom

zoo-web-components's People

Contributors

Stargazers

Watchers

Forkers

makmi artydev anuragvohraec bartlech greg-minshall hustlonian dwolanind xblz mpad0x55 al-zooplus

zoo-web-components's Issues

in zoo-select green arrow did not change the size after button was made smaller

the style was override :

  row_cell_style: {
        width: '100%',
        textAlign:"left",
        '& zoo-input, zoo-select':{
            '& input, select' : {padding:'2px 12px'},
              width: '70%',
        }
    }

expected result is that button will be smaller and green arrow will be on the same position (middle left side )

Zoo-Input is not showing error message even after setting valid=false attribute and inputerrormsg="error"

Hi Team,

I am not able to invalidate a Zoo-Input element.

Here is the code :

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zoo Test</title>
</head>

<body>
  <div style="width: 250px;">
    <zoo-input labeltext="Input label"
      linktext="Forgotten your password?"
      linkhref="https://google.com"
      linktarget="about:blank"
      infotext="Additional helpful information for our users"
      valid="false" inputerrormsg="error is big">
      <input slot="inputelement" placeholder="input"/>
    </zoo-input>
  </div>
  <zoo-button type="hot" size="medium">
    <span slot="buttoncontent">Shopping Cart</span>
  </zoo-button>

  <script src="https://cdn.jsdelivr.net/npm/@zooplus/[email protected]/dist/zoo-components-iife.min.js"></script>

</body>

</html>

here is how it display's with no error message:

Empty paginator in Grid

When <zoo-grid> is defined without pagesizeselector slot and without both currentpage and maxpage attributes the paginator is displayed with just arrow icons. After clicking right one both disappear.

As all 3 aforementioned configs are optional I would expect that paginator component won't be displayed.

Error message in <input type="date"> component

In case of putting not valid date the field for error appeared even if error is not provided.

To Reproduce
Steps to reproduce the behavior:
1 put 02/28/2021
2. select day part (28)
3. increase it to 29
4. the field for empty error appeared

Expected behavior
Do not see error message part if error message is not provided
Screenshots

Desktop (please complete the following information):

Browser [chrome]
Version [e.g. 8.3.2]

[suggestion] Register your namespace "zoo"

Maybe you want to register the namespace "zoo" here with a pull request?
https://github.com/nuxodin/web-namespace-registry

Input type date is 2px higher than other inputs

Comparison with others inputs (for instance, with input type="number") inputs for type date is 2 px higher.
Ii is good to have all inputs in the same high.

  <div>
                <zoo-input>
                    <input id="ap-id-input" slot="input" type="number" inputMode="decimal"
                           placeholder={PLACEHOLDER}
                           onChange={e => {
                               e.preventDefault();
                               setFilters({...filters, apId: parseInt(e.target.value)})
                           }}/>
                </zoo-input>
            </div>
            <div>
                <zoo-input>
                    <input id="expiry-date-input" slot="input" type="date" date-format="mm/dd/yyyy"
                           onChange={e => setFilters({
                               ...filters,
                               expiryDate: e.target.value
                           })}
                    />
                </zoo-input>
            </div>

during resizing only height changed but length stay the same

**Desktop

Browser chrome.
Version 8.2.11

Initially selected options in zoo-input-tag

Is your feature request related to a problem? Please describe.
I would like to render zoo-input-tag with already selected options, for example in edit form (current behavior is more like for initial configuration).

Describe the solution you'd like
There should be a slot or attribute that would allow me to specify which options are initially selected and they should be rendered as tags.

Additional context
I have managed to workaround this by triggering click on desired data, so better solution is needed:

inputTag.current?.querySelectorAll('zoo-input-tag-option').forEach((elem) => {
      if (isValueSelected(elem.getAttribute('id')) {
        (elem as HTMLElement).click();
      }
});

Overlapping of zoo-input-tag

Describe the bug
Multiple instances of zoo-input-tag positioned in same column are overlapping their contents making them unreadable.

To Reproduce

Create two zoo-input-tag components one under another
Start typing in the upper one to see possible options
Options content is colliding with another zoo-input-tag

Expected behavior
Upper input overlays the lower one. Currently, there is a fixed styling of z-index, but customization maybe by CSS var is needed.

Screenshots

Additional context
Now there is an ugly workaround by setting style attribute inside shadow DOM by JavaScript.

Searchable Select first item selection

In searchable select when one wants to select first item on the prompted list:

nothing happens after item is clicked
if any other item is clicked and then first item is clicked again then it's value is showed in the input.

This is easy to reproduce in docs: https://zooplus.github.io/zoo-web-components-docs/index.html#searchable-select

CSS vars for customizing zoo-tooltip

Is your feature request related to a problem? Please describe.
Current styling for zoo-tooltip is not always versatile enough and it would be good to have some control over it by CSS vars.

Describe the solution you'd like
Expose CSS variables for positioning tooltip top/bottom and the tick (for completeness)

zooplus / zoo-web-components Goto Github PK

zoo-web-components's People

Contributors

Stargazers

Watchers

Forkers

zoo-web-components's Issues

in zoo-select green arrow did not change the size after button was made smaller

Zoo-Input is not showing error message even after setting valid=false attribute and inputerrormsg="error"

Empty paginator in Grid

Error message in <input type="date"> component

[suggestion] Register your namespace "zoo"

Input type date is 2px higher than other inputs

Initially selected options in zoo-input-tag

Overlapping of zoo-input-tag

Searchable Select first item selection

CSS vars for customizing zoo-tooltip

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent