141 lines
3.3 KiB
Vue
141 lines
3.3 KiB
Vue
<template>
|
|
<button
|
|
class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
|
|
:type="type"
|
|
:class="buttonClasses"
|
|
:disabled="isDisabled || isLoading"
|
|
@click="handleClick"
|
|
>
|
|
<fluent-icon :size="iconSize" :icon="icon" class="flex-shrink-0" />
|
|
<span
|
|
v-if="$slots.default"
|
|
class="text-sm font-medium truncate"
|
|
:class="{ 'text-left rtl:text-right': size !== 'expanded' }"
|
|
>
|
|
<slot />
|
|
</span>
|
|
<fluent-icon :size="iconSize" icon="chevron-right" class="flex-shrink-0" />
|
|
</button>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: 'submit',
|
|
},
|
|
variant: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
emoji: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
colorScheme: {
|
|
type: String,
|
|
default: 'primary',
|
|
},
|
|
classNames: {
|
|
type: [String, Object],
|
|
default: '',
|
|
},
|
|
isDisabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isLoading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isExpanded: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
// variantClasses() {
|
|
// if (this.variant.includes('link')) {
|
|
// return `clear ${this.variant}`;
|
|
// }
|
|
// return this.variant;
|
|
// },
|
|
// hasOnlyIcon() {
|
|
// const hasEmojiOrIcon = this.emoji || this.icon;
|
|
// return !this.$slots.default && hasEmojiOrIcon;
|
|
// },
|
|
// hasOnlyIconClasses() {
|
|
// return this.hasOnlyIcon ? 'button--only-icon' : '';
|
|
// },
|
|
|
|
buttonClasses() {
|
|
return [
|
|
this.colorClass,
|
|
this.sizeClass,
|
|
// this.variantClasses,
|
|
// this.hasOnlyIconClasses,
|
|
// this.size,
|
|
// this.colorClass,
|
|
// this.classNames,
|
|
// this.isDisabled ? 'disabled' : '',
|
|
// this.isExpanded ? 'expanded' : '',
|
|
];
|
|
},
|
|
colorClass() {
|
|
if (this.colorScheme === 'primary') {
|
|
return 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
|
|
}
|
|
if (this.colorScheme === 'secondary') {
|
|
return 'bg-ash-100 text-white hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
|
|
}
|
|
if (this.colorScheme === 'danger') {
|
|
return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
|
|
}
|
|
return 'bg-primary-500 text-white';
|
|
},
|
|
sizeClass() {
|
|
if (this.size === 'md') {
|
|
return 'px-3 py-2 text-sm';
|
|
}
|
|
return 'px-4 py-2.5 text';
|
|
},
|
|
iconSize() {
|
|
switch (this.size) {
|
|
case 'tiny':
|
|
return 12;
|
|
case 'small':
|
|
return 14;
|
|
case 'medium':
|
|
return 16;
|
|
case 'large':
|
|
return 18;
|
|
|
|
default:
|
|
return 16;
|
|
}
|
|
},
|
|
showDarkSpinner() {
|
|
return (
|
|
this.colorScheme === 'secondary' ||
|
|
this.variant === 'clear' ||
|
|
this.variant === 'link' ||
|
|
this.variant === 'hollow'
|
|
);
|
|
},
|
|
},
|
|
methods: {
|
|
handleClick(evt) {
|
|
this.$emit('click', evt);
|
|
},
|
|
},
|
|
};
|
|
</script>
|