nvms / vue-atlas Goto Github PK

After each change nuxt^2.0.0 layout looks like i have sidebar. But i don't. After manually reload page in browser everything looks fine, again.
I can provide u screenshots, or video.

Components that provide 'width' props should accept int, and not string.

Some components that need this changed:

1. Select
2. Placeholder

File picker with previews will be great. For example https://lusaxweb.github.io/vuesax/components/upload.html#default

The Datepicker doesn't expand on focus ( by tabbing ) and neither does the Dropdown for that matter
Is this a mistake or can we somehow enable it?

Thanks!

There is currently no way to build this library on my own.

The build folder seems to be missing.

I suggest to increase size of checkbox and radio.
It hard to click on mobile, and it too small for desktop too.

Hi! Great work! Is it possible to use font-awesome 5, not 4?

Hi All.
I have tried build project locally, but seems like necessary webpack.build.js config are not presented.
How can I contribute ?

I think prop "trackBy" and "label" will be very useful for dropdown.
First of all, because many dropdowns are used with collections of objects.
And for compare value specified in v-model prop and value in options list.
So, just for setting this two props, i can easily generate dropdown.

The VaSelect component doesn't have any <select> input inside it.
This is not only problematic for form serialization, but also for the use of VaSelect on phone or tablets since this devices manage selection with a special dedicated responsive menu.

Hello, how far in roadmap is sidebar resizing and collapse? It's very important because sidebar in atlas kit is very functional.

a simple pagination component with sane event hooks

<va-button :active="false" @click.native="doSomething">Text</va-button>

When button is not active, click handler still works. This force to write additional check in click handler which makes code complicate. Is it the problem with active or with handling?

1. Go to LayoutManager
2. Click the button in the middle of the page, to the right
3. Try to scroll opened modal

(Alert documentation)[https://vue-atlas.com/documentation/modal] says "Based on the type you choose, a relevant icon will be shown to the left of the title. "
But seems like there no difference.

Hi, many thanks for your work!
What do you think about making the select menu search-bar fixed?
It would be useful to make it always accessible, especially if the list of options is very long.

Date Type input should be masked for easier input with the keyboard.

As a reference see the default behaviour on desktop browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

1. You can tab through the different parts of the date.
2. If you entered one part fully you will automatically brought to the next part.
3. If you click on the month part of the date it will auto selected and you can easily enter numbers. The same for the date and year part.

I could implement this if you like.

When a modal is opened:

• Focus should be properly trapped to the parent modal element.
• Escape should close the modal.

When a modal is closed:

• Focus should return to the element that triggered the modal.

In my opinion the time picker is not optimal yet and I dont have a solution for it yet. I find it really hard to design one properly.

But as a first step have the same masked input like on the default time input (). Then it would be easier for entering times with the keyboard.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

If you are interested I can do this for you.

• Go to the https://vue-atlas.com/documentation/notification
• Set any duration except 0
• Open notification

Notification doesn't close automatically

datatables are tricky to do "right", and I want to do this right. with that said, this might not make it into 2.0.3!

this will replace the current table component, which right now is just a wrapper around the builtin table element that adds some framework-specific styling to it.

this component should:

1. accept items as an array of objects. object keys should be expected to map to a column header.
2. optionally interface with VaPagination
3. have the ability to sort asc/desc by heading
4. accept a "selectable" prop, enabling you to "select" rows via a checkbox in the first column
5. recognize row items that have "children", and allow you to expand the row to reveal those children as additional, indented rows
6. have the ability to pin a column or columns to the left/right - potentially helpful when horizontally scrolling very large data sets
7. columns should accept custom filter methods to apply to the data in that column
8. should accept a loading prop that covers the table with a VaLoading (once VaLoading's backdrop is implemented) while data is being loaded - helpful for large data sets
9. should be able to export the table to csv (all data, or optionally just what is being viewed/filtered)
10. a column should accept a slot key that can be used as a reference to a scoped slot, i.e.:

<template>
  <va-table :columns="columns" :data="data">
    <template slot-scope="{row, index}" slot="second">
      <va-button><va-icon type="trash" /></va-button>
    </template>
  </va-table>
</template>

columns: [
    {
        title: 'First header',
        key: 'first'
    },
    {
        title: 'Second header',
        slot: 'second'
    }
],
data: [
 ...
]

fixed in f1be956

Hi! When I call form.validateFields it works okay, but after some success logic I want to reuse overall form again so I reset input data fields in code, this causes validation again and fields become red.
How to "cancel" validation on form?

Hi.
Hard to scroll any page on iOS. Almost not possible.
Hamburger menu not work. After click it becomes in hover state, but menu not appears.

Pressing escape should close/hide an active/open Dropdown, Select, Timepicker and Datepicker.

Page container has 100% height, but page content almost always is bigger. So page content overflows page container. Is it ok ?

We need name attributes in form inputs in order to be able to serialize form datas with the new FormData(myForm) method.

The name prop exists inside inputMixins.js but the VaInput, VaCheckbox, VaRadio, VaRange, etc. components doesn't have their name attribute defined by their name prop ( :name="name" ).

For the VaSelect component it's another issue since this component doesn't have any input inside...

I think ROADMAP will be very useful.

Hi. I think it will be great to have ability change type of entered value.
For example if u enter 10.05 and u want set that this is EUR currency.
Or u may enter 10 and set that this THz, or just Hz, whatever.

The actions of the page header are currently aligned with the bottom slot.

For better consistency with the Atlasian layouts align bottoms to the title instead.

See: https://atlaskit.atlassian.com/packages/core/page-header

Have you thought about using Feather Icons instead of FA? Even FA5 is still a little bit ugly... ( at least the non-pro ones )

Currently your library is not open source. Consider adding a license.

https://choosealicense.com/

I prefer the MIT license, because it allows other developers to use your component library more freely.

props to be considered:

1. animated, Boolean - a looped animation to convey live activity
2. width, String - 100% by default, accept same values as Input (xs, sm, md, lg, xl, or any px/em value)
3. graded, Boolean - if true, track color changes depending on current value? not sure about this yet
4. a Boolean prop that when enabled displays the current value as a percentage
5. a String prop that allows you to override the default value for the color of the track when its at 100%

For example like this
https://lusaxweb.github.io/vuesax/components/collapse.html

Just like in Buefy, on mobile devices such pickers are replaced by native components.
This has a lot of benefits to user. He will see regular pickers for his OS.
WDYT ?

To improve navigation with keyboard add event listeners to aside and modal. When you press the escape key the aside/modal should be closed.

I can implement this if you like.

I can't believe I missed this.

There is a problem with building options using v-for:

optionsList = [ { name : "1", value: "1" }, { name : "2", value: "2" } ];

<va-select v-model="simpleValue" placeholder="Select" no-uncheck>
   <va-option :v-for="item in optionsList" value="item.value">{{ item.name }}</va-option>
</va-select>

In this case inner li a element wrapper around option is not build so there is no padding of item:

1. colorpicker should be wrapped in a dropdown
2. trigger should be a button with a preview of the color, including opacity value
3. should emit a 'change' event with selected color in rgb, rgba, hex and hsb

Code from example page. When item is selected there is error:

[Vue warn]: Error in render: "TypeError: r.a.compile is not a function"
found in
---> <Render> at src/render.vue
       <VaButton> at src/Button/VaButton.vue
         <VaSelect> at src/Select/VaSelect.vue

When a dropdown is opened:

• Tab should be disabled until the dropdown is closed.
• Escape should close the dropdown.
• Array keys should navigate through dropdown items, assuming they are list items.
• On mobile, maybe this should open as a scrollable element, docked to the bottom of the viewport. A drawer?

When a dropdown is closed:

• It should retain its focused state.

When an aside is open:

• Focus should be trapped to the aside.
• Escape should close the aside.
• Arrow keys should not scroll the page behind it.

When an aside is closed:

• Focus should return to the element that triggered the aside.

I think it'd be nice if you could just pull out what you need to use, to limit webpack bundle size and what not...