Closed Sqrcz closed 9 months ago
Great suggestion, but if I'll add my custom class to button my classes will duplicated, to fix that you need to disable inheritAttrs
and bind $attrs on root(or not) element
<template>
<component
v-bind="$attrs"
:is="buttonComponent"
:class="wrapperClasses"
:[linkAttr]="href"
:disabled="buttonComponent === 'button' && disabled"
>
...
</component>
</template>
<script lang="ts" setup>
/// ...
defineOptions({
inheritAttrs: false,
})
/// ...
Thanks, I'll take a look at this and prepare a fix.
Name | Link |
---|---|
Latest commit | 6198cdf64c44d682fd3dd3f42c6de9d484efa299 |
Latest deploy log | https://app.netlify.com/sites/sensational-seahorse-8635f8/deploys/656f286603559e0008edaa53 |
Deploy Preview | https://deploy-preview-250--sensational-seahorse-8635f8.netlify.app |
Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
Hey @cogor 👋
I've tested different options here... and adding v-bind="$attrs"
would require a way to filter unwanted parts which is not ideal when done manually... but we can take advantage of Vue's Attribute Inheritance. Especially this part: not explicitly declared in the receiving component's props or emits.
I've updated this PR with necessary changes... and I'm not getting duplicated classes and I'm able to add basic styles using regular class attribute.
Let me know what do you think about this approach.
Looks great
This is a way to move
twMerge
as global composable instead of importing it each component.Also this is a way to solve issue with custom user classes... proof of concept working for button, and main container of navbar.