TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-27 11:41:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1158 from crater-invoice/dark-button

Browse Source 
add dark mode in button
This commit is contained in:
Yogesh Gohil
2023-03-25 12:47:52 +05:30
committed by GitHub
parent 04c7ae39a2 2c8bb38531
commit e8d92cd641
1 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
resources/scripts/components/base/BaseButton.vue
View File

@ -1,6 +1,7 @@
<script setup> <script setup>
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue' import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
const props = defineProps({ const props = defineProps({
contentLoading: { contentLoading: {
type: Boolean, type: Boolean,
@ -9,7 +10,7 @@ const props = defineProps({
defaultClass: { defaultClass: {
type: String, type: String,
default: default:
'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2', 'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
}, },
tag: { tag: {
type: String, type: String,
@ -27,6 +28,10 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
loadingRight: {
type: Boolean,
default: false,
},
size: { size: {
type: String, type: String,
default: 'md', default: 'md',
@ -81,17 +86,17 @@ const placeHolderSize = computed(() => {
const variantClass = computed(() => { const variantClass = computed(() => {
return { return {
'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500': 'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 dark:bg-primary-500 dark:hover:bg-primary-600':
props.variant === 'primary', props.variant === 'primary',
'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500': 'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
props.variant === 'secondary', props.variant === 'secondary',
'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500': 'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-100 shadow-inner focus:ring-primary-500 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-transparent dark:hover:text-primary-500 dark:hover:border-primary-500':
props.variant == 'primary-outline', props.variant == 'primary-outline',
'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0': 'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-900':
props.variant == 'white', props.variant == 'white',
'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500': 'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
props.variant === 'danger', props.variant === 'danger',
'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0': 'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
props.variant === 'gray', props.variant === 'gray',
} }
}) })
@ -124,6 +129,13 @@ const iconRightClass = computed(() => {
'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl', 'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
} }
}) })
const buttonDisabledClass = computed(() => {
if (props.disabled || props.loading)
return 'cursor-not-allowed bg-opacity-70 dark:!bg-opacity-40 hover:!bg-opacity-70 pointer-event-none'
return ''
})
</script> </script>
<template> <template>
@ -141,15 +153,17 @@ const iconRightClass = computed(() => {
<BaseCustomTag <BaseCustomTag
v-else v-else
:tag="tag" :tag="tag"
:disabled="disabled" :disabled="disabled || loading"
:class="[defaultClass, sizeClass, variantClass, roundedClass]" :class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
> >
<SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" /> <SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />
<slot v-else name="left" :class="iconLeftClass"></slot> <slot v-else name="left" :class="iconLeftClass" />
<slot /> <slot />
<slot name="right" :class="[iconRightClass, iconVariantClass]"></slot> <SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
<slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
</BaseCustomTag> </BaseCustomTag>
</template> </template>