akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: move button to composition API

Browse Source
This commit is contained in:
Muhsin Keloth
2024-04-22 16:51:46 +05:30
parent ac4f591108
commit ee16fe4626
1 changed files with 89 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/v3/components/Form/Button.vue
+89 -101
View File
@@ -27,109 +27,97 @@
/>
</button>
</template>
<script>
export default {
props: {
type: {
type: String,
default: 'submit',
},
variant: {
type: String,
default: '',
},
size: {
type: String,
default: '',
},
icon: {
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,
},
rightIcon: {
type: Boolean,
default: false,
},
iconOnly: {
type: Boolean,
default: false,
},
},
computed: {
buttonClasses() {
return [this.colorClass, this.sizeClass];
},
colorClass() {
if (this.isDisabled) {
return 'bg-ash-200 text-ash-600 cursor-not-allowed';
}
if (this.colorScheme === 'primary') {
if (this.variant === 'outline') {
return 'text-primary-800 border border-primary-400 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
}
if (this.variant === 'ghost') {
return 'text-primary-800 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
}
return 'bg-primary-600 border-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-ash-900 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 === 'medium') {
return 'px-3 py-2 text-sm';
}
return 'px-4 py-2.5 text';
},
iconSize() {
switch (this.size) {
case 'medium':
return 16;
case 'large':
return 18;
<script setup>
import { computed, defineProps } from 'vue';
default:
return 16;
}
},
showDarkSpinner() {
return (
this.colorScheme === 'secondary' ||
this.variant === 'clear' ||
this.variant === 'link' ||
this.variant === 'hollow'
);
},
const props = defineProps({
type: {
type: String,
default: 'submit',
},
methods: {
handleClick(evt) {
this.$emit('click', evt);
},
variant: {
type: String,
default: '',
},
size: {
type: String,
default: '',
},
icon: {
type: String,
default: '',
},
colorScheme: {
type: String,
default: 'primary',
},
classNames: {
type: [String, Object],
default: '',
},
isDisabled: {
type: Boolean,
default: false,
},
rightIcon: {
type: Boolean,
default: false,
},
iconOnly: {
type: Boolean,
default: false,
},
});
const emits = defineEmits(['click']);
const colorClass = computed(() => {
if (props.isDisabled) {
return 'bg-ash-200 text-ash-600 cursor-not-allowed';
}
if (props.colorScheme === 'primary') {
if (props.variant === 'outline') {
return 'text-primary-800 border border-primary-400 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
}
if (props.variant === 'ghost') {
return 'text-primary-800 hover:text-primary-600 active:text-primary-600 focus:ring focus:ring-offset-1 focus:ring-primary-400';
}
return 'bg-primary-600 border-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
}
if (props.colorScheme === 'secondary') {
return 'bg-ash-100 text-ash-900 hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
}
if (props.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';
});
const sizeClass = computed(() => {
if (props.size === 'medium') {
return 'px-3 py-2 text-sm';
}
return 'px-4 py-2.5 text';
});
const iconSize = computed(() => {
switch (props.size) {
case 'medium':
return 16;
case 'large':
return 18;
default:
return 16;
}
});
const handleClick = () => {
emits('click');
};
const buttonClasses = computed(() => [
colorClass.value,
sizeClass.value,
props.classNames,
]);
</script>