vuetensils
vuetensils copied to clipboard
AustinGil
Adding label slot to input
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?
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.
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 :)
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!
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.
- I moved the slot for the radio buttons to inside
<legend> - I made sure slot is imediatly after the
<span class="vts-input__text">
I think awesome suggestion! Ensuring there is a label makes sense to me :)
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)
the date picker with the icon flipped based on state (dates are :placeholder text)
just my 2ct
@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?
@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.
@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.
@stuartjnelson did you see my responses to this PR? Do you want me to include those changes or do you have thoughts on them?