MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(component): re-enable fallback attrs such as 'disabled' for split button

This commit is contained in:
upsiflu 2025-01-16 10:30:42 +02:00
parent 322c5bf5c6
commit 68885b46b3
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
front/src/components/ui/Button.vue
View File

@ -61,10 +61,12 @@ onMounted(() => {
<div v-if="split" class="funkwhale button-group"> <div v-if="split" class="funkwhale button-group">
<button <button
ref="button" ref="button"
v-bind="color(props, ['interactive'])( v-bind="{
width(props, isIconOnly ? ['square'] : ['normalHeight', 'buttonWidth'])( ...$attrs,
align(props, { alignSelf:'start', alignText:'center' })( ...color(props, ['interactive'])(
)))" width(props, isIconOnly ? ['square'] : ['normalHeight', 'buttonWidth'])(
align(props, { alignSelf:'start', alignText:'center' })(
)))}"
class="funkwhale button split-main" class="funkwhale button split-main"
:aria-pressed="props.ariaPressed" :aria-pressed="props.ariaPressed"
:class="{ :class="{
@ -89,10 +91,12 @@ onMounted(() => {
<Loader v-if="isLoading" :container="false" /> <Loader v-if="isLoading" :container="false" />
</button> </button>
<button <button
v-bind="color(props, ['interactive'])( v-bind="{
width(props, ['square'])( ...$attrs,
align(props, { alignSelf:'start', alignText:'center' })( ...color(props, ['interactive'])(
)))" width(props, ['square'])(
align(props, { alignSelf:'start', alignText:'center' })(
)))}"
class="funkwhale button split-toggle" class="funkwhale button split-toggle"
:title="splitTitle" :title="splitTitle"
@click="onSplitClick" @click="onSplitClick"

20
front/ui-docs/components/ui/button.md
View File

@ -6,7 +6,7 @@ const click = ():Promise<void> => new Promise(resolve => setTimeout(resolve, 100
</script> </script>
```ts ```ts
import Button from "~/components/ui/Button.vue" import Button from "~/components/ui/Button.vue";
``` ```
# Button # Button
@ -15,7 +15,8 @@ Buttons are UI elements that users can interact with to perform actions and mani
```ts ```ts
{ {
thin?: true thinFont?: true
lowHeight?: true
isActive?: boolean isActive?: boolean
isLoading?: boolean isLoading?: boolean
@ -26,8 +27,8 @@ Buttons are UI elements that users can interact with to perform actions and mani
onClick?: (...args: any[]) => void | Promise<void> onClick?: (...args: any[]) => void | Promise<void>
autofocus? : boolean autofocus?: boolean
ariaPressed? : true ariaPressed?: true
} & (ColorProps | DefaultProps) } & (ColorProps | DefaultProps)
& VariantProps & VariantProps
& RaisedProps & RaisedProps
@ -89,7 +90,7 @@ Secondary buttons represent **neutral** actions such as cancelling a change or d
<Layout grid class="preview secondary"> <Layout grid class="preview secondary">
<div style="grid-column: span 3"> <div style="grid-column: span 4">
```vue-html ```vue-html
<Button secondary raised> <Button secondary raised>
@ -239,6 +240,15 @@ Round buttons have fully rounded edges.
Round button Round button
</Button> </Button>
## Split button
<Layout class="preview default raised">
<Button split splitIcon="bi-star" splitTitle="Star!" :onSplitClick="()=>console.log('1 star')">I am split</Button>
<Button> I am not split </Button>
<Button disabled> I am not split and I am disabled </Button>
<Button disabled split splitIcon="bi-star" splitTitle="Star!" :onSplitClick="()=>console.log('1 star')">I am split and disabled</Button>
</Layout>
## Button states ## Button states
### On/Off ### On/Off