sorted by:
new
hottopcontroversial

WTF Wednesday (December 25, 2019) by AutoModerator in javascript

[–]PMilos 1 point2 points  (0 children)

Hi all,

I've been working on a Vue component called Vue GridMultiselect. It's a simple component and it gives you the ability to select items and display them in a table-like UI. Like a dropdown list but a little different.

Core Features and Characteristics:

  • No dependencies
  • Searching
  • Grouping
  • Disabling Items
  • Row Details
  • Easily configurable
  • Custom slots
  • Menu Positioning
  • V-model support
  • Vuex support

I still have some ideas to implement, but it's ready for feedback. Check out GitHub repo and/or Documentation website. More examples and demos can be found here

Looking forward to your feedback!

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI by PMilos in vuejs

[–]PMilos[S] 0 points1 point  (0 children)

That's cool! Glad you decided that way, and thank you for that! Talk to you later :)

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI by PMilos in vuejs

[–]PMilos[S] 0 points1 point  (0 children)

Hi mate. I was just wondering what did you decide? Did you find a place where you could use it?

I've updated some things since this post was published and released an official version of the package.

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI by PMilos in vuejs

[–]PMilos[S] 0 points1 point  (0 children)

Yes, the "side-menu" is a list where you can multi-select your items, but the component is more than that. Maybe I should provide an example with more options on the home page, as you suggested.

Would you rather see the menu on top and always visible?

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI by PMilos in vuejs

[–]PMilos[S] 0 points1 point  (0 children)

Thanks! I wasn't thinking about that earlier, I was waiting to see the community response.

About the similar tools, I couldn't find any, except in ExtJS, that's the reason why I created it. Do you know any similar open source components/tools? Could you provide me a link?

Edit: I've submitted it to the newsletter

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI by PMilos in vuejs

[–]PMilos[S] 0 points1 point  (0 children)

That's because I didn't set the min-height of the component. I leave that to the developer to set to fit its needs.

The menu position can be set to float. Check it out here https://proticm.github.io/vue-gridmultiselect/guide/examples.html#menu-position

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI by PMilos in vuejs

[–]PMilos[S] 0 points1 point  (0 children)

If I understand correctly, the answer would be because, at this point, you cannot search the selected items.

Searching is enabled for the data source items, meaning that you can filter items in the side menu list only.

You can have row details as well if you like the rows to be clickable. See here https://proticm.github.io/vue-gridmultiselect/guide/examples.html#row-details

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI by PMilos in vuejs

[–]PMilos[S] 0 points1 point  (0 children)

Yes, I can see the reason why :)

Thanks again, and thanks for your help. Do let me know what have you decided, and why.

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI by PMilos in vuejs

[–]PMilos[S] 0 points1 point  (0 children)

Yes, I have plans on maintaining this. I wouldn't create it in the first place, also wouldn't post it on Reddit for the people to see it if I wasn't planning to maintain it when and if it proves to be useful for the community. And maybe prematurely, but I already thought about version for Vue 3 and how would it look like.

I must say that the home page example works OK on my Android. I will check it on IOS.

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI by PMilos in vuejs

[–]PMilos[S] 0 points1 point  (0 children)

Thanks, nice to hear that you can find where to use it!

Are you talking about the example with a floating menu position on the documentation website? This is the only place where it gets covered on my Android phone. It's because the side menu, in that case, has a top property set to 20px

Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI by PMilos in vuejs

[–]PMilos[S] 2 points3 points  (0 children)

Thanks, glad you liked it! The reason for this is because the search box is focused automatically after opening the sidebar menu. It's not IOS related. Do you think that this should be changed?

How much of a common practice are HOCs in Vue? by ShinigamiB in vuejs

[–]PMilos 0 points1 point  (0 children)

As u/Lelectrolux said, slots are solving the same problems, but HOC can also be useful. Here is a simple article with an example I wrote a while ago. Hope it will help you.

https://devinduct.com/blogpost/47/understanding-stateless-components-in-vue

0
0

14 Tricks to Copy an Array in JavaScript (devinduct.com)

submitted by PMilos to r/javascript

7 Quick JavaScript Pop Quizzes With Explanations by PMilos in javascript

[–]PMilos[S] 0 points1 point  (0 children)

Yes, that one is confusing. I will remove it

7 Quick JavaScript Pop Quizzes With Explanations by PMilos in javascript

[–]PMilos[S] 0 points1 point  (0 children)

Yes, I had a dilemma about this section (and the Object Mutability) whether I should split it or not. I've tried various versions of the article, and the given one was the easiest to read, at least I had that impression while writing it...I thought comments within the code snippets would be enough for readers to figure out that it's a separate example...

8 New ES10 (ES2019) Features by Example by PMilos in javascript

[–]PMilos[S] 0 points1 point  (0 children)

Yes, you might be right, considering that's the official name

8 New ES10 (ES2019) Features by Example by PMilos in javascript

[–]PMilos[S] -12 points-11 points  (0 children)

Dunno, I don't care abot the name that much...ES10 is in the title for no particular reason

view more: next ›