bonkers-ui 1.0.26 → 1.0.27
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.
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<button
|
|
3
|
-
class="ui-button justify-center grid text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation
|
|
3
|
+
class="ui-button grid justify-center items-center grid-flow-col text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation "
|
|
4
4
|
:disabled="disabled"
|
|
5
5
|
:class="[
|
|
6
6
|
(!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
|
|
7
|
-
kind === EButtonTypes.SECONDARY
|
|
7
|
+
kind === EButtonTypes.SECONDARY
|
|
8
|
+
&& 'text-white bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
|
|
8
9
|
kind === EButtonTypes.WARNING && 'text-white bg-warning hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
|
|
9
10
|
kind === EButtonTypes.ERROR && 'text-white bg-error hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
|
|
10
11
|
kind === EButtonTypes.PRIMARY_OVERLAY
|
|
@@ -20,35 +21,22 @@
|
|
|
20
21
|
size === EButtonSizes.SMALL && 'py-xs px-md',
|
|
21
22
|
size === EButtonSizes.MEDIUM && 'py-sm px-sm',
|
|
22
23
|
size === EButtonSizes.LARGE && 'py-md px-md',
|
|
24
|
+
($slots.default || $slots.postfix) && 'gap-sm',
|
|
23
25
|
fullWidth && 'w-full',
|
|
24
26
|
disabled && 'pointer-events-none',
|
|
25
27
|
]"
|
|
26
28
|
>
|
|
27
|
-
<
|
|
28
|
-
v-if="slots.prefix"
|
|
29
|
-
class="ui-button__prefix"
|
|
30
|
-
:class="(slots.default || slots.postfix) && 'mr-sm'"
|
|
31
|
-
>
|
|
32
|
-
<slot name="prefix" />
|
|
33
|
-
</span>
|
|
29
|
+
<slot name="prefix" />
|
|
34
30
|
|
|
35
|
-
<
|
|
36
|
-
<slot />
|
|
37
|
-
</span>
|
|
31
|
+
<slot />
|
|
38
32
|
|
|
39
|
-
<
|
|
40
|
-
v-if="slots.postfix"
|
|
41
|
-
class="ui-button__postfix"
|
|
42
|
-
:class="(slots.default || slots.prefix) && 'ml-sm'"
|
|
43
|
-
>
|
|
44
|
-
<slot name="postfix" />
|
|
45
|
-
</span>
|
|
33
|
+
<slot name="postfix" />
|
|
46
34
|
</button>
|
|
47
35
|
</template>
|
|
48
36
|
|
|
49
37
|
<script lang="ts" setup>
|
|
50
38
|
import { EButtonSizes, EButtonTypes } from "./_typings";
|
|
51
|
-
|
|
39
|
+
|
|
52
40
|
type TProps = {
|
|
53
41
|
kind?: EButtonTypes;
|
|
54
42
|
size?: EButtonSizes;
|
|
@@ -56,17 +44,14 @@
|
|
|
56
44
|
disabled?: boolean;
|
|
57
45
|
}
|
|
58
46
|
|
|
59
|
-
const slots = useSlots();
|
|
60
|
-
|
|
61
47
|
const primaryColor = "text-white bg-primary disabled:bg-primary-300";
|
|
62
48
|
const primaryColorHover = "hover:bg-primary-600 ";
|
|
63
49
|
const primaryColorActive = "active:bg-primary-700 ";
|
|
64
50
|
|
|
65
|
-
defineProps<TProps>()
|
|
51
|
+
withDefaults( defineProps<TProps>(), {
|
|
52
|
+
kind: EButtonTypes.PRIMARY,
|
|
53
|
+
size: EButtonSizes.DEFAULT,
|
|
54
|
+
fullWidth: false,
|
|
55
|
+
disabled: false,
|
|
56
|
+
});
|
|
66
57
|
</script>
|
|
67
|
-
|
|
68
|
-
<style>
|
|
69
|
-
.ui-button {
|
|
70
|
-
grid-template-columns: auto auto auto;
|
|
71
|
-
}
|
|
72
|
-
</style>
|