85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<button :type="nativeType" :disabled="loading?true:null" :class="`py-${sizes['p-y']} px-${sizes['p-x']} text-${sizes['font']} ${theme.Button.body}`" :style="buttonStyle"
|
||
|
|
class="btn" @click="$emit('click',$event)"
|
||
|
|
>
|
||
|
|
<template v-if="!loading">
|
||
|
|
<slot />
|
||
|
|
</template>
|
||
|
|
<loader v-else class="h-6 w-6 text-white mx-auto" />
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { themes } from '~/config/form-themes.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'OpenFormButton',
|
||
|
|
|
||
|
|
props: {
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
|
||
|
|
size: {
|
||
|
|
type: String,
|
||
|
|
default: 'medium'
|
||
|
|
},
|
||
|
|
|
||
|
|
nativeType: {
|
||
|
|
type: String,
|
||
|
|
default: 'submit'
|
||
|
|
},
|
||
|
|
|
||
|
|
loading: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
|
||
|
|
theme: { type: Object, default: () => themes.default }
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
buttonStyle () {
|
||
|
|
return {
|
||
|
|
backgroundColor: this.color,
|
||
|
|
color: this.getTextColor(this.color),
|
||
|
|
'--tw-ring-color': this.color
|
||
|
|
}
|
||
|
|
},
|
||
|
|
sizes () {
|
||
|
|
if (this.size === 'small') {
|
||
|
|
return {
|
||
|
|
font: 'sm',
|
||
|
|
'p-y': '1',
|
||
|
|
'p-x': '2'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
font: 'base',
|
||
|
|
'p-y': '2',
|
||
|
|
'p-x': '4'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
getTextColor (bgColor, lightColor = '#FFFFFF', darkColor = '#000000') {
|
||
|
|
const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor
|
||
|
|
const r = parseInt(color.substring(0, 2), 16) // hexToR
|
||
|
|
const g = parseInt(color.substring(2, 4), 16) // hexToG
|
||
|
|
const b = parseInt(color.substring(4, 6), 16) // hexToB
|
||
|
|
const uicolors = [r / 255, g / 255, b / 255]
|
||
|
|
const c = uicolors.map((col) => {
|
||
|
|
if (col <= 0.03928) {
|
||
|
|
return col / 12.92
|
||
|
|
}
|
||
|
|
return Math.pow((col + 0.055) / 1.055, 2.4)
|
||
|
|
})
|
||
|
|
const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2])
|
||
|
|
return (L > 0.45) ? darkColor : lightColor
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|