mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-21 06:25:42 +02:00
Code Releases Activity

refactor(frontend): MkButtonのprops等整理 (#17282)

Browse Source 
* refactor(frontend): MkButtonのprops等整理

* fix
This commit is contained in:
かっこかり
2026-04-06 22:28:44 +09:00
committed by GitHub
parent 367766d864
commit ae34578c6f
9 changed files with 63 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
packages/frontend/src/components/MkButton.vue
View File

@@ -4,14 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<button
v-if="!link"
ref="el" class="_button"
<component
:is="component"
ref="el"
class="_button"
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait, [$style.active]: active }]"
:type="type"
:name="name"
:value="value"
:disabled="disabled || wait"
v-bind="cProps"
@click="emit('click', $event)"
@mousedown="onMousedown"
>
@@ -19,34 +17,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.content">
<slot></slot>
</div>
</button>
<MkA
v-else class="_button"
:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike, [$style.iconOnly]: iconOnly, [$style.wait]: wait, [$style.active]: active }]"
:to="to ?? '#'"
:behavior="linkBehavior"
@mousedown="onMousedown"
>
<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
<div :class="$style.content">
<slot></slot>
</div>
</MkA>
</component>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, useTemplateRef } from 'vue';
import type { MkABehavior } from '@/components/global/MkA.vue';
const props = defineProps<{
type?: 'button' | 'submit' | 'reset';
<script lang="ts">
interface MkButtonBase {
type?: string;
primary?: boolean;
gradate?: boolean;
rounded?: boolean;
inline?: boolean;
link?: boolean;
to?: string;
linkBehavior?: MkABehavior;
autofocus?: boolean;
wait?: boolean;
danger?: boolean;
@@ -55,12 +35,39 @@ const props = defineProps<{
large?: boolean;
transparent?: boolean;
asLike?: boolean;
iconOnly?: boolean;
active?: boolean;
}
interface MkButtonAsButton extends MkButtonBase {
type?: 'button' | 'submit' | 'reset';
name?: string;
value?: string;
disabled?: boolean;
iconOnly?: boolean;
active?: boolean;
}>();
}
interface MkButtonAsLink extends MkButtonBase {
type: 'a';
href: string;
target?: string;
rel?: string;
}
interface MkButtonAsRouterLink extends MkButtonBase {
type: 'routerLink';
to: string;
linkBehavior?: MkABehavior;
}
export type MkButtonProps = MkButtonAsButton | MkButtonAsLink | MkButtonAsRouterLink;
</script>
<script lang="ts" setup>
import { nextTick, computed, onMounted, useTemplateRef } from 'vue';
import MkA from '@/components/global/MkA.vue';
import type { MkABehavior } from '@/components/global/MkA.vue';
const props = defineProps<MkButtonProps>();
const emit = defineEmits<{
(ev: 'click', payload: PointerEvent): void;
@@ -69,6 +76,22 @@ const emit = defineEmits<{
const el = useTemplateRef('el');
const ripples = useTemplateRef('ripples');
const component = computed(() => {
if (props.type === 'a') return 'a';
if (props.type === 'routerLink') return MkA;
return 'button';
});
const cProps = computed(() => {
if (props.type === 'a') return { href: props.href ?? '#', target: props.target, rel: props.rel };
if (props.type === 'routerLink') return { to: props.to!, behavior: props.linkBehavior };
return {
type: props.type ?? 'button',
name: props.name,
value: props.value,
disabled: props.disabled || props.wait,
};
});
onMounted(() => {
if (props.autofocus) {
nextTick(() => {

2
packages/frontend/src/components/MkVisitorDashboard.vue
View File

@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div class="_gaps_s" :class="$style.mainActions">
<MkButton :class="$style.mainAction" full rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.joinThisServer }}</MkButton>
<MkButton :class="$style.mainAction" full rounded link to="https://misskey-hub.net/servers/">{{ i18n.ts.exploreOtherServers }}</MkButton>
<MkButton :class="$style.mainAction" full rounded type="a" target="_blank" rel="noopener" href="https://misskey-hub.net/servers/">{{ i18n.ts.exploreOtherServers }}</MkButton>
<MkButton :class="$style.mainAction" full rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
</div>
</div>