search

AustinGil / vuetensils

🍴 A tasty toolset for Vue.js 🛠 - Lightweight, functional components to boost your next project.
https://vuetensils.austingil.com/
MIT License
658 stars 38 forks source link

Adding label slot to input #130

Closed stuartjnelson closed 1 year ago

stuartjnelson commented 3 years ago

Screenshot 2021-09-17 at 15 53 18

I wanted to be able to add an SVG icon inside of the <label>. I could do that with the <slot #description> but then it was a bit of a fiddle depending on amount of text etc. What do you think?

I'm loving Vuetensilis btw. I feel like I might have a bunch of small ideas like this. Are you happy me creating small PRs or would you prefer for me to create an issue first to ask about it?

AustinGil commented 3 years ago

Yeah, I've seen this sort of UI before and unfortunately it cannot currently support this sort of thing. But I would like to add some sort of support for it. Im thinking I want to eventually add a default scoped slot that let's you do whatever you want with the layout and provides the bindings and listeners you need. The tricky part is when you give up control over markup, you give up a lot of the semantic/accessibility controls too.

AustinGil commented 3 years ago

Please feel free to make issues and/or PRs are you like. I'm the only maintainer at the moment and have a lot going on so it's not the fastest moving project, but I dont want to continue moving it forward :)

stuartjnelson commented 3 years ago

I realised this would be cool also to use an SVG as indicator for select input. Is there anything I could do to get this in or is it more right now you don't want to add this feature?

Agree about what happens when you give up control of the markup. I made a JS a11y accordion plugin 4ish years ago. It got forked for Vue which was cool but then the markup was DESTROYED with divs...

I'd be happy to help with some small bits. I want build a pattern library around it. Your Inspiration section SOLD me!

AustinGil commented 3 years ago

I think the best solution right now to support that would be to have a couple other named slots like "before-input" and "after-input". It's not my favorite solution, but without the completely flexible default slot that I have in mind, it may be the best thing.

stuartjnelson commented 3 years ago
stuartjnelson commented 3 years ago

I think awesome suggestion! Ensuring there is a label makes sense to me :)

WebMechanic commented 2 years ago

PMFJI but I think this is a pure stylistic problem that can be solved with CSS alone and not in Vuetensils.

We added SVG backgrounds on the aria-valid states (here incl. :focus outline)

image

the date picker with the icon flipped based on state (dates are :placeholder text)

image

just my 2ct

AustinGil commented 2 years ago

@WebMechanic you're right for some cases, but working with DOM nodes is a lot more convenient in other cases. With content in the DOM, it's easier to inherit colors or do animations.

@stuartjnelson sorry for the delay on this PR. I think I left it with some change requests for you. Did you still want to get it merged? If not, I think I can tackle it myself.

Also side note, may I ask where you all are using Vuetensils?

WebMechanic commented 2 years ago

@AustinGil I'm in Germany working on a big relaunch of our real estate portal. More here to keep this issue clean.

Was .../VMultiselect/Autocomplete.vue supposed to be there? It looks "alien" and WIP-ish. Also uses loads of atomic utility classes.

AustinGil commented 2 years ago

@WebMechanic yeah, that was a placholder. I think it would be a great addition to the library, but it's a very complicated component to build. I've got this from another example.

AustinGil commented 1 year ago

@stuartjnelson did you see my responses to this PR? Do you want me to include those changes or do you have thoughts on them?

AustinGil commented 1 year ago

Closing this for now. May add it to the next release separately.