Prop value inconsistent in dev preview and after build in build preview
See original GitHub issueDescribe the bug A clear and concise description of what the bug is. Prop value is inconsistent in dev preview and prod build in latest release. Was working perfectly fine in previous release.
/// EBtn.vue
<script setup lang="ts">
withDefaults(
defineProps<{
label?: string;
unelevated?: boolean;
noCaps?: boolean;
outline?: boolean;
rounded?: boolean;
icon?: string;
color?: string;
round?: boolean;
size?: string;
stretch?: boolean;
type?: 'a' | 'submit' | 'button' | 'reset';
padding?: string;
to?: string;
disable?: boolean;
dense?: boolean;
}>(),
{
unelevated: true,
}
);
defineEmits<{ (e: 'click'): void }>();
</script>
<template>
<q-btn
v-bind="{ ...$props, color: disable ? 'light-grey' : color }"
@click="$emit('click')"
:padding="padding || (round || dense ? undefined : `8px 16px 8px ${!!icon ? '8px' : '16px'}`)"
>
<slot />
</q-btn>
</template>
In the above component, the padding
prop value should be undefined when
- no
padding
prop is passed round
prop istrue
This works as expected in dev preview, but after building, the value changes to 8px 16px 8px 16px
when the above props are passed
Codepen/jsFiddle/Codesandbox (required) Fork a Codepen (https://codepen.quasar.dev) or a jsFiddle (https://jsfiddle.quasar.dev) or a Codesandbox (https://codesandbox.quasar.dev) and hit save then copy-paste link here.
To Reproduce Steps to reproduce the behavior:
- copy the above component
- Use it this way
<e-btn
size="xs"
round
icon="mdi-bell"
color="grey"
unelevated
class="q-ml-sm"
/>
- run the dev server and inspect the element
- the element has proper padding
- see the padding value as you can see the padding is undefined
- build the project
- serve it
quasar serve
- inspect the element
- the button has different padding
Expected behavior A clear and concise description of what you expected to happen.
- The padding prop should be undefined
Screenshots If applicable, add screenshots to help explain your problem.
Platform (please complete the following information): Quasar Version: 2.1.1 @quasar/app Version: 3.1.3
Quasar mode:
- SPA
- SSR
- PWA
- Electron
- Cordova
- Capacitor
- BEX
Tested on:
- SPA
- SSR
- PWA
- Electron
- Cordova
- Capacitor
- BEX
OS: Linux ubuntu Node: LTS NPM: NA Yarn: 1.x Browsers: Chrome, Edge, Safari iOS:NA Android:NA Electron: NA
Additional context Add any other context about the problem here.
Issue Analytics
- State:
- Created 2 years ago
- Comments:14 (13 by maintainers)
Top GitHub Comments
@soulsam480 Vue has been upgraded to v3.2.22 in “@quasar/app” v3.2.3
Thanks for the follow-up. Since it’s a confirmed external issue, let’s close this ticket.