112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
<script setup>
|
|
import {NButton, NP, NFlex, NTag, NIcon} from "naive-ui";
|
|
import {TbLock} from "vue-icons-plus/tb"
|
|
import {Link} from "@inertiajs/vue3";
|
|
import {computed, h} from "vue";
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
lock: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
lockMessage: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
href: {
|
|
type: String,
|
|
default: '/'
|
|
},
|
|
icon: {
|
|
type: [Object, Function],
|
|
default: null
|
|
},
|
|
tag: {
|
|
type: [Object, Function, String],
|
|
default: Link
|
|
},
|
|
click: {
|
|
type: [Function, Object],
|
|
}
|
|
})
|
|
const emits = defineEmits(['click'])
|
|
|
|
const buttonThemeOverride = {
|
|
heightLarge: '64px',
|
|
borderRadiusLarge: '8px'
|
|
}
|
|
|
|
const pThemeOverride = {
|
|
pMargin: '',
|
|
pLineHeight: '1.4'
|
|
}
|
|
|
|
const hasIcon = computed(() => props.icon !== null)
|
|
|
|
const isLink = computed(() => props.tag === 'link')
|
|
|
|
const onClick = () => {
|
|
if (isLink.value || props.lock) return
|
|
|
|
emits('click')
|
|
}
|
|
|
|
const lockTag = computed(() => {
|
|
if (props.lock) return 'button'
|
|
return props.tag
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative overflow-hidden w-full rounded-md" style="background-color: rgb(18, 18, 22);">
|
|
<NButton :tag="lockTag"
|
|
:href="href"
|
|
:theme-overrides="buttonThemeOverride"
|
|
@click="onClick"
|
|
size="large"
|
|
block
|
|
class="justify-start! text-left!"
|
|
:disabled="lock"
|
|
>
|
|
<template v-if="hasIcon" #icon>
|
|
<component :is="icon" v-if="icon" />
|
|
</template>
|
|
<NFlex justify="space-between" align="center">
|
|
<NFlex vertical :size="2" :class="hasIcon ? 'ml-2' : ''">
|
|
{{ title }}
|
|
<NP :theme-overrides="pThemeOverride" depth="3">
|
|
{{ description }}
|
|
</NP>
|
|
</NFlex>
|
|
</NFlex>
|
|
</NButton>
|
|
|
|
<div v-if="lock" class="absolute inset-0 flex items-center justify-center backdrop-blur-[1.5px]" style="background-color: var(--n-scrollbar-color);"></div>
|
|
|
|
<div v-if="lock" class="absolute inset-0 flex items-center justify-center">
|
|
<NFlex>
|
|
<NTag :bordered="false" round>
|
|
<template #icon>
|
|
<NIcon :component="TbLock" size="16" />
|
|
</template>
|
|
{{ lockMessage }}
|
|
</NTag>
|
|
</NFlex>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.n-button) {
|
|
@apply justify-start!;
|
|
}
|
|
</style>
|