mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2025-04-29 06:54:43 +00:00
22414744b0
Co-authored-by: qwerty287 <qwerty287@posteo.de> Co-authored-by: qwerty287 <80460567+qwerty287@users.noreply.github.com> Co-authored-by: Anbraten <6918444+anbraten@users.noreply.github.com> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<template>
|
|
<router-link v-if="to" :to="to" :title="title" :aria-label="title" class="icon-button">
|
|
<slot>
|
|
<Icon v-if="icon" :name="icon" />
|
|
</slot>
|
|
</router-link>
|
|
<a
|
|
v-else-if="href"
|
|
:href="href"
|
|
:title="title"
|
|
:aria-label="title"
|
|
class="icon-button"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<slot>
|
|
<Icon v-if="icon" :name="icon" />
|
|
</slot>
|
|
</a>
|
|
<button v-else :disabled="disabled" class="icon-button" type="button" :title="title" :aria-label="title">
|
|
<slot>
|
|
<Icon v-if="icon" :name="icon" />
|
|
</slot>
|
|
<div v-if="isLoading" class="absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center">
|
|
<Icon name="loading" class="animate-spin" />
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { RouteLocationRaw } from 'vue-router';
|
|
|
|
import Icon, { type IconNames } from '~/components/atomic/Icon.vue';
|
|
|
|
defineProps<{
|
|
icon?: IconNames;
|
|
disabled?: boolean;
|
|
to?: RouteLocationRaw;
|
|
isLoading?: boolean;
|
|
title?: string;
|
|
href?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.icon-button {
|
|
@apply relative flex items-center justify-center px-1 py-1 rounded-md bg-transparent hover-effect overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
</style>
|