mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 lines
6.9 KiB
336 lines
6.9 KiB
<script lang="ts" setup> |
|
import type { ButtonType } from 'ant-design-vue/lib/button' |
|
import { useSlots } from 'vue' |
|
|
|
/** |
|
* @description |
|
* Button component |
|
* |
|
* @example |
|
* <NcButton type="primary" size="medium" :loading="loading" @click="onClick"> |
|
* Save |
|
* <template #loading> Saving </template> |
|
* </NcButton> |
|
*/ |
|
|
|
interface Props { |
|
loading?: boolean |
|
disabled?: boolean |
|
showAsDisabled?: boolean |
|
type?: ButtonType | 'danger' | 'secondary' | undefined |
|
size?: NcButtonSize |
|
centered?: boolean |
|
fullWidth?: boolean |
|
iconOnly?: boolean |
|
iconPosition?: 'left' | 'right' |
|
theme?: 'default' | 'ai' |
|
bordered?: boolean |
|
shadow?: boolean |
|
} |
|
|
|
const props = withDefaults(defineProps<Props>(), { |
|
disabled: false, |
|
showAsDisabled: false, |
|
size: 'medium', |
|
type: 'primary', |
|
fullWidth: false, |
|
centered: true, |
|
iconPosition: 'left', |
|
theme: 'default', |
|
bordered: true, |
|
shadow: true, |
|
}) |
|
|
|
const emits = defineEmits(['update:loading']) |
|
|
|
const slots = useSlots() |
|
|
|
const NcButton = ref<HTMLElement | null>(null) |
|
|
|
const { size, type, theme, bordered } = toRefs(props) |
|
|
|
const loading = useVModel(props, 'loading', emits) |
|
|
|
const isFocused = ref(false) |
|
const isClicked = ref(false) |
|
|
|
const onFocus = (e: FocusEvent) => { |
|
// Only focus when coming from another element which is not a mouse click |
|
nextTick(() => { |
|
if (isClicked.value) { |
|
isFocused.value = false |
|
} else { |
|
const relatedTarget = e.relatedTarget as HTMLElement | null |
|
|
|
isFocused.value = !!relatedTarget |
|
} |
|
|
|
isClicked.value = false |
|
}) |
|
} |
|
|
|
const onBlur = () => { |
|
isFocused.value = false |
|
isClicked.value = false |
|
} |
|
|
|
useEventListener(NcButton, 'mousedown', () => { |
|
isClicked.value = true |
|
}) |
|
</script> |
|
|
|
<template> |
|
<a-button |
|
ref="NcButton" |
|
:class="{ |
|
'small': size === 'small', |
|
'medium': size === 'medium', |
|
'xsmall': size === 'xsmall', |
|
'xxsmall': size === 'xxsmall', |
|
'size-xs': size === 'xs', |
|
'focused': isFocused, |
|
'theme-default': theme === 'default', |
|
'theme-ai': theme === 'ai', |
|
'bordered': bordered, |
|
'nc-btn-shadow': shadow, |
|
'nc-show-as-disabled': props.showAsDisabled, |
|
}" |
|
:disabled="props.disabled" |
|
:loading="loading" |
|
:tabindex="props.disabled ? -1 : 0" |
|
:type="type" |
|
class="nc-button" |
|
@blur="onBlur" |
|
@focus="onFocus" |
|
> |
|
<div |
|
:class="{ |
|
'justify-center': props.centered, |
|
'justify-start': !props.centered, |
|
}" |
|
class="flex flex-row gap-x-2.5 nc-btn-inner w-full" |
|
> |
|
<template v-if="iconPosition === 'left'"> |
|
<slot v-if="loading" name="loadingIcon"> |
|
<GeneralLoader class="flex !bg-inherit !text-inherit" size="medium" /> |
|
</slot> |
|
|
|
<slot v-else name="icon" /> |
|
</template> |
|
<div |
|
v-if="!(size === 'xxsmall' && loading) && !props.iconOnly" |
|
:class="{ |
|
'font-medium': type === 'primary' || type === 'danger', |
|
'w-full': props.fullWidth, |
|
}" |
|
class="flex flex-row items-center" |
|
> |
|
<slot v-if="loading && slots.loading" name="loading" /> |
|
|
|
<slot v-else /> |
|
</div> |
|
<template v-if="iconPosition === 'right'"> |
|
<slot v-if="loading" name="loadingIcon"> |
|
<GeneralLoader v-if="loading" class="flex !bg-inherit !text-inherit" size="medium" /> |
|
</slot> |
|
|
|
<slot v-else name="icon" /> |
|
</template> |
|
</div> |
|
</a-button> |
|
</template> |
|
|
|
<style lang="scss"> |
|
.ant-btn:before { |
|
display: none !important; |
|
} |
|
|
|
.nc-button { |
|
// Not Icon |
|
:not(.nc-icon):not(.material-symbols) { |
|
line-height: 0.95; |
|
} |
|
> .ant-btn-loading-icon { |
|
display: none !important; |
|
} |
|
} |
|
|
|
.nc-button { |
|
@apply !xs:(outline-none); |
|
|
|
&.nc-btn-shadow { |
|
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02); |
|
} |
|
outline: none; |
|
} |
|
|
|
.desktop { |
|
.nc-button.ant-btn.focused { |
|
&.theme-default { |
|
box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe; |
|
} |
|
|
|
&.theme-ai { |
|
box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #7d26cd; |
|
} |
|
} |
|
|
|
.nc-button.ant-btn-text.focused { |
|
&.theme-default { |
|
@apply text-brand-500; |
|
} |
|
|
|
&.theme-ai { |
|
@apply text-nc-content-purple-dark; |
|
} |
|
} |
|
} |
|
|
|
.nc-button.ant-btn { |
|
@apply rounded-lg font-medium; |
|
} |
|
|
|
.nc-button.ant-btn.small { |
|
@apply py-1 px-1.75 h-8 min-w-8; |
|
} |
|
|
|
.nc-button.ant-btn.medium { |
|
@apply py-2 px-4 h-10 min-w-10 xs:(h-10.5 max-h-10.5 min-w-10.5 !px-3); |
|
} |
|
|
|
.nc-button.ant-btn.size-xs { |
|
@apply px-2 py-0 h-7 min-w-7 rounded-lg text-small leading-[18px]; |
|
|
|
& > div { |
|
@apply gap-x-2; |
|
} |
|
} |
|
.nc-button.ant-btn.xsmall { |
|
@apply p-0.25 h-6.25 min-w-6.25 rounded-md; |
|
} |
|
|
|
.nc-button.ant-btn.xxsmall { |
|
@apply p-0 h-5.75 min-w-5.75 rounded-md; |
|
} |
|
|
|
.nc-button.ant-btn[disabled], |
|
.ant-btn-text.nc-button.ant-btn[disabled] { |
|
box-shadow: none !important; |
|
|
|
@apply border-0 !cursor-not-allowed; |
|
|
|
&.theme-default { |
|
@apply bg-gray-50 text-gray-300 md:(hover:bg-gray-50); |
|
} |
|
|
|
&.theme-ai { |
|
@apply bg-purple-50 text-purple-300 md:(hover:bg-purple-50); |
|
} |
|
} |
|
|
|
.nc-button.ant-btn.nc-show-as-disabled, |
|
.ant-btn-text.nc-button.ant-btn.nc-show-as-disabled { |
|
box-shadow: none !important; |
|
|
|
@apply border-0; |
|
|
|
&.theme-default { |
|
@apply bg-gray-50 text-gray-300 md:(hover:bg-gray-50); |
|
} |
|
|
|
&.theme-ai { |
|
@apply bg-purple-50 text-purple-300 md:(hover:bg-purple-50); |
|
} |
|
} |
|
|
|
.nc-button.ant-btn-text.ant-btn[disabled], |
|
.nc-button.ant-btn-text.ant-btn.nc-show-as-disabled { |
|
&.theme-default, |
|
&.theme-ai { |
|
@apply bg-transparent hover:bg-transparent; |
|
} |
|
} |
|
|
|
.nc-button.ant-btn-secondary[disabled], |
|
.nc-button.ant-btn-secondary.nc-show-as-disabled { |
|
@apply border-1; |
|
|
|
&:not(.bordered) { |
|
@apply border-transparent; |
|
} |
|
|
|
&.theme-default { |
|
@apply bg-white hover:bg-white border-gray-100 text-gray-300; |
|
|
|
&.bordered { |
|
@apply border-gray-100; |
|
} |
|
} |
|
|
|
&.theme-ai { |
|
@apply bg-purple-50 hover:bg-purple-50 text-purple-300; |
|
|
|
&.bordered { |
|
@apply border-purple-100; |
|
} |
|
} |
|
} |
|
|
|
.nc-button.ant-btn-primary { |
|
@apply border-0 xs:(hover:border-0) text-white; |
|
|
|
&.theme-default { |
|
@apply bg-brand-500 md:(hover:bg-brand-600); |
|
} |
|
|
|
&.theme-ai { |
|
@apply bg-purple-700 md:(hover:bg-purple-800); |
|
} |
|
} |
|
|
|
.nc-button.ant-btn-secondary { |
|
@apply border-1; |
|
|
|
&:not(.bordered) { |
|
@apply border-transparent; |
|
} |
|
|
|
&.theme-default { |
|
@apply bg-white text-gray-700 md:(hover:bg-gray-100); |
|
|
|
&.bordered { |
|
@apply border-gray-200; |
|
} |
|
} |
|
|
|
&.theme-ai { |
|
@apply bg-purple-50 text-purple-700 md:(hover:bg-purple-100); |
|
|
|
&.bordered { |
|
@apply border-purple-200; |
|
} |
|
} |
|
} |
|
|
|
.nc-button.ant-btn-danger { |
|
@apply bg-red-500 border-0 hover:border-0 md:(hover:bg-red-600); |
|
} |
|
|
|
.nc-button.ant-btn-text { |
|
box-shadow: none; |
|
|
|
@apply bg-transparent border-0; |
|
|
|
&.theme-default { |
|
@apply text-gray-700 hover:text-gray-900 hover:bg-gray-100; |
|
} |
|
|
|
&.theme-ai { |
|
@apply text-nc-content-purple-dark hover:text-nc-content-purple-dark hover:bg-nc-bg-purple-dark; |
|
} |
|
|
|
&:focus { |
|
box-shadow: none; |
|
} |
|
} |
|
</style>
|
|
|