@saasmakers/ui 0.1.38 → 0.1.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import type { BaseButton } from '../../types/bases'
|
|
3
|
+
import { NuxtLinkLocale } from '#components'
|
|
4
|
+
|
|
5
|
+
const props = withDefaults(defineProps<BaseButton>(), {
|
|
6
|
+
background: true,
|
|
7
|
+
circular: false,
|
|
8
|
+
color: 'black',
|
|
9
|
+
confirmation: false,
|
|
10
|
+
disabled: false,
|
|
11
|
+
fullWidth: false,
|
|
12
|
+
icon: undefined,
|
|
13
|
+
iconColor: undefined,
|
|
14
|
+
id: undefined,
|
|
15
|
+
light: false,
|
|
16
|
+
loading: false,
|
|
17
|
+
reverse: false,
|
|
18
|
+
size: 'base',
|
|
19
|
+
text: '',
|
|
20
|
+
to: undefined,
|
|
21
|
+
type: 'button',
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
const emit = defineEmits<{
|
|
25
|
+
click: [event: MouseEvent, id: number | string | undefined]
|
|
26
|
+
confirm: [event: MouseEvent, id: number | string | undefined]
|
|
27
|
+
}>()
|
|
28
|
+
|
|
29
|
+
const confirming = ref(false)
|
|
30
|
+
|
|
31
|
+
const { t } = useI18n()
|
|
32
|
+
|
|
33
|
+
function onClick(event: MouseEvent) {
|
|
34
|
+
if (!props.loading) {
|
|
35
|
+
if (props.confirmation) {
|
|
36
|
+
if (confirming.value) {
|
|
37
|
+
emit('confirm', event, props.id)
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
setTimeout(() => (confirming.value = false), 3 * 1000)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
confirming.value = !confirming.value
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
emit('click', event, props.id)
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<template>
|
|
52
|
+
<component
|
|
53
|
+
:is="to ? NuxtLinkLocale : 'button'"
|
|
54
|
+
class="relative inline-block select-none appearance-none border rounded-md focus:outline-none"
|
|
55
|
+
:class="{
|
|
56
|
+
'inline-block': !circular,
|
|
57
|
+
'flex items-center justify-center': circular,
|
|
58
|
+
'cursor-not-allowed opacity-50': disabled,
|
|
59
|
+
'cursor-wait': loading,
|
|
60
|
+
'cursor-pointer': !loading,
|
|
61
|
+
'w-full': fullWidth,
|
|
62
|
+
'bg-transparent shadow-none': light,
|
|
63
|
+
'shadow-sm': !light,
|
|
64
|
+
|
|
65
|
+
'h-6 w-6': size === '2xs' && circular,
|
|
66
|
+
'h-8 w-8': size === 'xs' && circular && !confirming,
|
|
67
|
+
'h-10 w-10': size === 'sm' && circular && !confirming,
|
|
68
|
+
'h-12 w-12': size === 'base' && circular && !confirming,
|
|
69
|
+
'h-14 w-14': size === 'lg' && circular && !confirming,
|
|
70
|
+
'h-16 w-16': size === 'xl' && circular && !confirming,
|
|
71
|
+
|
|
72
|
+
'border-gray-900 dark:border-gray-100 bg-gray-900 dark:bg-gray-100 text-white dark:text-black': color === 'black' && !light,
|
|
73
|
+
'hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black': color === 'black' && !light && !disabled && !loading,
|
|
74
|
+
'border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100': color === 'black' && light,
|
|
75
|
+
'border-gray-700 dark:border-gray-300 bg-gray-700 dark:bg-gray-300 text-white dark:text-black': color === 'gray' && !light,
|
|
76
|
+
'hover:bg-gray-800 dark:hover:bg-gray-200': color === 'gray' && !light && !disabled && !loading,
|
|
77
|
+
'border-gray-700 dark:border-gray-300 text-gray-700 dark:text-gray-300': color === 'gray' && light,
|
|
78
|
+
'border-green-700 dark:border-green-300 bg-green-700 dark:bg-green-300 text-white dark:text-black': color === 'green' && !light,
|
|
79
|
+
'hover:bg-green-800 dark:hover:bg-green-200': color === 'green' && !light && !disabled && !loading,
|
|
80
|
+
'border-green-700 dark:border-green-300 text-green-700 dark:text-green-300': color === 'green' && light,
|
|
81
|
+
'border-indigo-700 dark:border-indigo-300 bg-indigo-700 dark:bg-indigo-300 text-white dark:text-black': color === 'indigo' && !light,
|
|
82
|
+
'hover:bg-indigo-800 dark:hover:bg-indigo-200': color === 'indigo' && !light && !disabled && !loading,
|
|
83
|
+
'border-indigo-700 dark:border-indigo-300 text-indigo-700 dark:text-indigo-300': color === 'indigo' && light,
|
|
84
|
+
'border-orange-700 dark:border-orange-300 bg-orange-700 dark:bg-orange-300 text-white dark:text-black': color === 'orange' && !light,
|
|
85
|
+
'hover:bg-orange-800 dark:hover:bg-orange-200': color === 'orange' && !light && !disabled && !loading,
|
|
86
|
+
'border-orange-700 dark:border-orange-300 text-orange-700 dark:text-orange-300': color === 'orange' && light,
|
|
87
|
+
'border-red-700 dark:border-red-300 bg-red-700 dark:bg-red-300 text-white dark:text-black': color === 'red' && !light,
|
|
88
|
+
'hover:bg-red-800 dark:hover:bg-red-200': color === 'red' && !light && !disabled && !loading,
|
|
89
|
+
'border-red-700 dark:border-red-300 text-red-700 dark:text-red-300': color === 'red' && light,
|
|
90
|
+
'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100': color === 'white' && !light,
|
|
91
|
+
'hover:bg-white dark:hover:bg-gray-900': color === 'white' && !light && !disabled && !loading,
|
|
92
|
+
'border-white dark:border-gray-900 text-white dark:text-black': color === 'white' && light,
|
|
93
|
+
'hover:border-black dark:hover:border-white hover:text-black dark:hover:text-white': color !== 'white' && light && !disabled && !loading,
|
|
94
|
+
'hover:bg-white dark:hover:bg-gray-900 hover:text-gray-800 dark:hover:text-gray-200': color === 'white' && light && !disabled && !loading,
|
|
95
|
+
|
|
96
|
+
'h-6 px-3': size === '2xs' && (!circular || confirming),
|
|
97
|
+
'h-8 px-4': size === 'xs' && (!circular || confirming),
|
|
98
|
+
'h-10 px-5': size === 'sm' && (!circular || confirming),
|
|
99
|
+
'h-12 px-6': size === 'base' && (!circular || confirming),
|
|
100
|
+
'h-13 px-6.5': size === 'lg' && (!circular || confirming),
|
|
101
|
+
'h-14 px-7': size === 'xl' && (!circular || confirming),
|
|
102
|
+
}"
|
|
103
|
+
:disabled="disabled"
|
|
104
|
+
:to="to"
|
|
105
|
+
:type="typeof to === 'object' && to ? null : type"
|
|
106
|
+
@click="onClick"
|
|
107
|
+
>
|
|
108
|
+
<span
|
|
109
|
+
class="h-full flex items-center justify-center"
|
|
110
|
+
:class="{ 'opacity-0': loading }"
|
|
111
|
+
>
|
|
112
|
+
<slot />
|
|
113
|
+
|
|
114
|
+
<BaseIcon
|
|
115
|
+
class="flex-initial"
|
|
116
|
+
:color="iconColor"
|
|
117
|
+
:icon="confirming ? undefined : icon"
|
|
118
|
+
:light="light"
|
|
119
|
+
:reverse="reverse"
|
|
120
|
+
:size="size"
|
|
121
|
+
:text="confirming ? t('globals.confirm') : text"
|
|
122
|
+
/>
|
|
123
|
+
</span>
|
|
124
|
+
|
|
125
|
+
<BaseSpinner
|
|
126
|
+
v-if="loading"
|
|
127
|
+
class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
128
|
+
:color="!background ? 'black' : light ? color : color === 'white' ? 'indigo' : 'white'"
|
|
129
|
+
:size="size"
|
|
130
|
+
/>
|
|
131
|
+
</component>
|
|
132
|
+
</template>
|
package/app/types/bases.d.ts
CHANGED
|
@@ -25,6 +25,29 @@ export type BaseStatus
|
|
|
25
25
|
| 'success'
|
|
26
26
|
| 'warning'
|
|
27
27
|
|
|
28
|
+
export interface BaseButton {
|
|
29
|
+
background?: boolean
|
|
30
|
+
circular?: boolean
|
|
31
|
+
color?: BaseColor
|
|
32
|
+
confirmation?: boolean
|
|
33
|
+
disabled?: boolean
|
|
34
|
+
fullWidth?: boolean
|
|
35
|
+
icon?: string
|
|
36
|
+
iconColor?: BaseColor
|
|
37
|
+
id?: number | string
|
|
38
|
+
light?: boolean
|
|
39
|
+
loading?: boolean
|
|
40
|
+
reverse?: boolean
|
|
41
|
+
size?: BaseButtonSize
|
|
42
|
+
text?: BaseTextText
|
|
43
|
+
to?: RouteLocationNamedI18n
|
|
44
|
+
type?: BaseButtonType
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export type BaseButtonSize = '2xs' | 'base' | 'lg' | 'sm' | 'xl' | 'xs'
|
|
48
|
+
|
|
49
|
+
export type BaseButtonType = 'button' | 'reset' | 'submit'
|
|
50
|
+
|
|
28
51
|
export interface BaseDivider {
|
|
29
52
|
borderStyle?: BaseDividerBorderStyle
|
|
30
53
|
margin?: number
|
|
@@ -79,6 +102,6 @@ export interface BaseText {
|
|
|
79
102
|
uppercase?: boolean
|
|
80
103
|
}
|
|
81
104
|
|
|
82
|
-
export type BaseTextBackground = '
|
|
105
|
+
export type BaseTextBackground = 'gray' | 'white'
|
|
83
106
|
|
|
84
107
|
export type BaseTextText = string | { base: string, sm: string }
|
package/app/types/global.d.ts
CHANGED
|
@@ -5,6 +5,9 @@ declare global {
|
|
|
5
5
|
type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
|
|
6
6
|
|
|
7
7
|
// Bases
|
|
8
|
+
type BaseButton = Bases.BaseButton
|
|
9
|
+
type BaseButtonSize = Bases.BaseButtonSize
|
|
10
|
+
type BaseButtonType = Bases.BaseButtonType
|
|
8
11
|
type BaseColor = Bases.BaseColor
|
|
9
12
|
type BaseSize = Bases.BaseSize
|
|
10
13
|
type BaseStatus = Bases.BaseStatus
|