Is there are a way to handle custom "types" of theme variants?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Package
v4.x
Description
Hey there!
Thanks for a module, its really nice and useful.
But I have one problem.
For example - lets take a look on <UModal> component (or <UCard>).
Theme has just few variants: transition, fullscreen, overlay, scrollable. Thats all.
Imagine I need to add custom sizes for modals (or cards), lets say sm, md (defaul), lg.
For now, to achieve it - Im creating new custom wrapper component, like MyModal.vue, add my "size" prop, and pass all slots and props to child <UModal />.
So in this example - the only reason why <MyModal> exists - handle customization for sizes.
So my question is - is there are any way to add new "type of variants" for ui components?
I understand I can easily add new custom variants for existing one - lets say, I can add new "color" for UButton, or new variant "variant" (solid, soft etc). But if component have no variant "color" - I cant do anything with it at the moment.
And from that question I have a second one - how to handle my own "variants" the same way as I do for ui theme?
I have folder "theme" in app directory with configs for all components, and its imported and passed into app.config.
Can I handle my own props same way as variants, so my theming is centralized?
For example, when I add MyModal with prop "size" - can I handle it with theme config, and create new "my-modal" with variant "size"?
Or whats the best way to handle such behaviour?
Right now I dont really like the fact my theming is scattered across the project.
UI components - in theme config, custom components - in props or classes of the component itself.
And for modal in this example I need to look into both modal ui config and MyModal component classes. I wish to put it in one place.
Thanks in advance!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the UModal and UCard theme configurations, the custom MyModal.vue wrapper described in the issue, and the app.config integration. Clarify whether the request is for a supported custom variant mechanism or guidance for centralizing custom props; done requires a documented or implemented approach for centralized size styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100