arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Button): use props instead of $props

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-06 16:04:02 +01:00
parent 5449d2aa5f
commit 7d29ff2b7a
3 changed files with 4 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/runtime/components/Button.vue
View File

@@ -85,7 +85,7 @@ const trailingIconName = computed(() => {
</script>
<template>
<ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: $props.class })" v-bind="{ ...forward, ...$attrs }">
<ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="{ ...forward, ...$attrs }">
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.icon()" aria-hidden="true" />
</slot>

1
test/components/Button.spec.ts
View File

@@ -5,6 +5,7 @@ import ComponentRender from '../component-render'
describe('Button', () => {
it.each([
['with label', { props: { label: 'Button' } }],
['with class', { props: { class: 'rounded-full font-bold' } }],
['with size', { props: { label: 'Button', size: 'lg' as const } }],
['with color', { props: { label: 'Button', color: 'red' as const } }],
// ['with variant', { props: { label: 'Button', variant: 'outline' } }],

9
test/components/__snapshots__/Button.spec.ts.snap
View File

@@ -7,6 +7,8 @@ exports[`Button > renders with block correctly 1`] = `
</button>"
`;
exports[`Button > renders with class correctly 1`] = `"<button type="button" class="inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1 rounded-full font-bold"></button>"`;
exports[`Button > renders with color correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-red-500 hover:bg-red-700 px-2.5 py-1.5 text-sm gap-x-1.5">
<!--v-if--><span class="">Button</span>
@@ -121,10 +123,3 @@ exports[`Button > renders with truncate correctly 1`] = `
<!--v-if-->
</button>"
`;
exports[`Button > renders with variant correctly 1`] = `
"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 px-2.5 py-1.5 text-sm gap-x-1.5">
<!--v-if--><span class="">Button</span>
<!--v-if-->
</button>"
`;