@saasmakers/ui 0.1.39 → 0.1.41
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/app/components/bases/BaseBordered.vue +46 -0
- package/app/components/bases/BaseButton.vue +8 -0
- package/app/components/bases/BaseOverlay.vue +79 -0
- package/app/composables/useIcons.ts +1 -0
- package/app/composables/useMotion.ts +39 -0
- package/app/types/bases.d.ts +28 -2
- package/app/types/global.d.ts +9 -4
- package/package.json +1 -1
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import type { BaseBordered } from '../../types/bases'
|
|
3
|
+
|
|
4
|
+
withDefaults(defineProps<BaseBordered>(), {
|
|
5
|
+
background: 'white',
|
|
6
|
+
borderColor: 'gray',
|
|
7
|
+
hasBorder: true,
|
|
8
|
+
shadow: false,
|
|
9
|
+
title: '',
|
|
10
|
+
})
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<template>
|
|
14
|
+
<div
|
|
15
|
+
class="flex flex-col items-center p-4 sm:p-6"
|
|
16
|
+
:class="{
|
|
17
|
+
'rounded-xl border pt-0 sm:pt-0': hasBorder,
|
|
18
|
+
'shadow-sm': shadow,
|
|
19
|
+
|
|
20
|
+
'bg-gray-100 dark:bg-gray-900': background === 'gray',
|
|
21
|
+
'bg-white dark:bg-gray-900': background === 'white',
|
|
22
|
+
|
|
23
|
+
'border-black dark:border-white': borderColor === 'black',
|
|
24
|
+
'border-gray-200 dark:border-gray-800': borderColor === 'gray',
|
|
25
|
+
}"
|
|
26
|
+
>
|
|
27
|
+
<BaseText
|
|
28
|
+
v-if="title"
|
|
29
|
+
class="mb-4 inline-block px-3 text-center text-gray-900 -mt-2 sm:px-4 dark:text-gray-100"
|
|
30
|
+
:class="{
|
|
31
|
+
'bg-gray-100 dark:bg-gray-900': background === 'gray',
|
|
32
|
+
'bg-white dark:bg-gray-900': background === 'white',
|
|
33
|
+
}"
|
|
34
|
+
size="xs"
|
|
35
|
+
:text="title"
|
|
36
|
+
uppercase
|
|
37
|
+
/>
|
|
38
|
+
|
|
39
|
+
<div
|
|
40
|
+
v-if="$slots.default"
|
|
41
|
+
class="w-full"
|
|
42
|
+
>
|
|
43
|
+
<slot />
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</template>
|
|
@@ -15,6 +15,7 @@ const props = withDefaults(defineProps<BaseButton>(), {
|
|
|
15
15
|
light: false,
|
|
16
16
|
loading: false,
|
|
17
17
|
reverse: false,
|
|
18
|
+
rounded: 'md',
|
|
18
19
|
size: 'base',
|
|
19
20
|
text: '',
|
|
20
21
|
to: undefined,
|
|
@@ -62,6 +63,13 @@ function onClick(event: MouseEvent) {
|
|
|
62
63
|
'bg-transparent shadow-none': light,
|
|
63
64
|
'shadow-sm': !light,
|
|
64
65
|
|
|
66
|
+
'rounded-none': rounded === 'none' && !circular,
|
|
67
|
+
'rounded-sm': rounded === 'sm' && !circular,
|
|
68
|
+
'rounded': rounded === 'base' && !circular,
|
|
69
|
+
'rounded-md': rounded === 'md' && !circular,
|
|
70
|
+
'rounded-lg': rounded === 'lg' && !circular,
|
|
71
|
+
'rounded-full': rounded === 'full' || circular,
|
|
72
|
+
|
|
65
73
|
'h-6 w-6': size === '2xs' && circular,
|
|
66
74
|
'h-8 w-8': size === 'xs' && circular && !confirming,
|
|
67
75
|
'h-10 w-10': size === 'sm' && circular && !confirming,
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import type { BaseOverlay } from '../../types/bases'
|
|
3
|
+
import { Motion } from 'motion-v'
|
|
4
|
+
import { getIcon } from '../../composables/useIcons'
|
|
5
|
+
import useMotion from '../../composables/useMotion'
|
|
6
|
+
|
|
7
|
+
withDefaults(defineProps<BaseOverlay>(), {
|
|
8
|
+
active: true,
|
|
9
|
+
clickable: true,
|
|
10
|
+
fixed: true,
|
|
11
|
+
hasClose: true,
|
|
12
|
+
opacity: 75,
|
|
13
|
+
position: 'absolute',
|
|
14
|
+
})
|
|
15
|
+
|
|
16
|
+
const emit = defineEmits<{
|
|
17
|
+
click: [event: MouseEvent]
|
|
18
|
+
close: [event: MouseEvent]
|
|
19
|
+
}>()
|
|
20
|
+
|
|
21
|
+
const { fadeIn } = useMotion()
|
|
22
|
+
|
|
23
|
+
function onClick(event: MouseEvent) {
|
|
24
|
+
emit('click', event)
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function onClose(event: MouseEvent) {
|
|
28
|
+
emit('close', event)
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<template>
|
|
33
|
+
<div
|
|
34
|
+
v-hotkey="{ esc: onClose }"
|
|
35
|
+
:class="{
|
|
36
|
+
'fixed inset-0': fixed,
|
|
37
|
+
'cursor-pointer': clickable || hasClose,
|
|
38
|
+
}"
|
|
39
|
+
@click="onClick"
|
|
40
|
+
>
|
|
41
|
+
<BaseIcon
|
|
42
|
+
v-if="hasClose"
|
|
43
|
+
class="absolute right-4 top-4 z-50 text-gray-200 dark:text-gray-800"
|
|
44
|
+
:icon="getIcon('close')"
|
|
45
|
+
@click="onClose"
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
<div
|
|
49
|
+
v-if="$slots.default"
|
|
50
|
+
class="relative z-50 h-full w-full"
|
|
51
|
+
>
|
|
52
|
+
<slot />
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<Motion
|
|
56
|
+
:animate="fadeIn.animate"
|
|
57
|
+
as="span"
|
|
58
|
+
class="absolute inset-0 z-40"
|
|
59
|
+
:initial="fadeIn.initial"
|
|
60
|
+
>
|
|
61
|
+
<div
|
|
62
|
+
class="inset-0 bg-gray-900 dark:bg-gray-100"
|
|
63
|
+
:class="{
|
|
64
|
+
'h-0 w-0': !active,
|
|
65
|
+
|
|
66
|
+
'opacity-0': opacity === 0,
|
|
67
|
+
'opacity-25': opacity === 25,
|
|
68
|
+
'opacity-50': opacity === 50,
|
|
69
|
+
'opacity-75': opacity === 75,
|
|
70
|
+
'opacity-95': opacity === 95,
|
|
71
|
+
'opacity-100': opacity === 100,
|
|
72
|
+
|
|
73
|
+
'absolute': position === 'absolute',
|
|
74
|
+
'fixed': position === 'fixed',
|
|
75
|
+
}"
|
|
76
|
+
/>
|
|
77
|
+
</Motion>
|
|
78
|
+
</div>
|
|
79
|
+
</template>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export default function useMotion() {
|
|
2
|
+
const fadeIn = {
|
|
3
|
+
animate: {
|
|
4
|
+
opacity: 1,
|
|
5
|
+
transition: { duration: 0.25 },
|
|
6
|
+
},
|
|
7
|
+
initial: { opacity: 0 },
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const fadeInLeft = {
|
|
11
|
+
animate: {
|
|
12
|
+
opacity: 1,
|
|
13
|
+
transition: { duration: 0.25 },
|
|
14
|
+
x: 0,
|
|
15
|
+
},
|
|
16
|
+
initial: {
|
|
17
|
+
opacity: 0,
|
|
18
|
+
x: -25,
|
|
19
|
+
},
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const fadeInUp = {
|
|
23
|
+
animate: {
|
|
24
|
+
opacity: 1,
|
|
25
|
+
transition: { duration: 0.25 },
|
|
26
|
+
y: 0,
|
|
27
|
+
},
|
|
28
|
+
initial: {
|
|
29
|
+
opacity: 0,
|
|
30
|
+
y: 25,
|
|
31
|
+
},
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return {
|
|
35
|
+
fadeIn,
|
|
36
|
+
fadeInLeft,
|
|
37
|
+
fadeInUp,
|
|
38
|
+
}
|
|
39
|
+
}
|
package/app/types/bases.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export type BaseBackground = 'gray' | 'white'
|
|
2
|
+
|
|
1
3
|
export type BaseColor
|
|
2
4
|
= | 'black'
|
|
3
5
|
| 'gray'
|
|
@@ -25,6 +27,16 @@ export type BaseStatus
|
|
|
25
27
|
| 'success'
|
|
26
28
|
| 'warning'
|
|
27
29
|
|
|
30
|
+
export interface BaseBordered {
|
|
31
|
+
background?: BaseBackground
|
|
32
|
+
borderColor?: BaseBorderedColor
|
|
33
|
+
hasBorder?: boolean
|
|
34
|
+
shadow?: boolean
|
|
35
|
+
title: string
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export type BaseBorderedColor = 'black' | 'gray'
|
|
39
|
+
|
|
28
40
|
export interface BaseButton {
|
|
29
41
|
background?: boolean
|
|
30
42
|
circular?: boolean
|
|
@@ -38,12 +50,15 @@ export interface BaseButton {
|
|
|
38
50
|
light?: boolean
|
|
39
51
|
loading?: boolean
|
|
40
52
|
reverse?: boolean
|
|
53
|
+
rounded?: BaseButtonRounded
|
|
41
54
|
size?: BaseButtonSize
|
|
42
55
|
text?: BaseTextText
|
|
43
56
|
to?: RouteLocationNamedI18n
|
|
44
57
|
type?: BaseButtonType
|
|
45
58
|
}
|
|
46
59
|
|
|
60
|
+
type BaseButtonRounded = 'base' | 'full' | 'lg' | 'md' | 'none' | 'sm' | 'xl'
|
|
61
|
+
|
|
47
62
|
export type BaseButtonSize = '2xs' | 'base' | 'lg' | 'sm' | 'xl' | 'xs'
|
|
48
63
|
|
|
49
64
|
export type BaseButtonType = 'button' | 'reset' | 'submit'
|
|
@@ -76,6 +91,19 @@ export interface BaseIcon {
|
|
|
76
91
|
uppercase?: boolean
|
|
77
92
|
}
|
|
78
93
|
|
|
94
|
+
export interface BaseOverlay {
|
|
95
|
+
active?: boolean
|
|
96
|
+
clickable?: boolean
|
|
97
|
+
fixed?: boolean
|
|
98
|
+
hasClose?: boolean
|
|
99
|
+
opacity?: BaseOverlayOpacity
|
|
100
|
+
position?: BaseOverlayPosition
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export type BaseOverlayOpacity = 0 | 25 | 50 | 75 | 95 | 100
|
|
104
|
+
|
|
105
|
+
export type BaseOverlayPosition = 'absolute' | 'fixed'
|
|
106
|
+
|
|
79
107
|
export interface BaseSpinner {
|
|
80
108
|
clickable?: boolean
|
|
81
109
|
color?: BaseColor
|
|
@@ -102,6 +130,4 @@ export interface BaseText {
|
|
|
102
130
|
uppercase?: boolean
|
|
103
131
|
}
|
|
104
132
|
|
|
105
|
-
export type BaseTextBackground = 'gray' | 'white'
|
|
106
|
-
|
|
107
133
|
export type BaseTextText = string | { base: string, sm: string }
|
package/app/types/global.d.ts
CHANGED
|
@@ -5,19 +5,24 @@ declare global {
|
|
|
5
5
|
type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
|
|
6
6
|
|
|
7
7
|
// Bases
|
|
8
|
+
type BaseBackground = Bases.BaseBackground
|
|
9
|
+
type BaseBordered = Bases.BaseBordered
|
|
10
|
+
type BaseBorderedColor = Bases.BaseBorderedColor
|
|
8
11
|
type BaseButton = Bases.BaseButton
|
|
9
12
|
type BaseButtonSize = Bases.BaseButtonSize
|
|
10
13
|
type BaseButtonType = Bases.BaseButtonType
|
|
11
14
|
type BaseColor = Bases.BaseColor
|
|
12
|
-
type BaseSize = Bases.BaseSize
|
|
13
|
-
type BaseStatus = Bases.BaseStatus
|
|
14
15
|
type BaseDivider = Bases.BaseDivider
|
|
15
16
|
type BaseDividerBorderStyle = Bases.BaseDividerBorderStyle
|
|
16
17
|
type BaseDividerSize = Bases.BaseDividerSize
|
|
17
|
-
type BaseSpinner = Bases.BaseSpinner
|
|
18
18
|
type BaseIcon = Bases.BaseIcon
|
|
19
|
+
type BaseOverlay = Bases.BaseOverlay
|
|
20
|
+
type BaseOverlayOpacity = Bases.BaseOverlayOpacity
|
|
21
|
+
type BaseOverlayPosition = Bases.BaseOverlayPosition
|
|
22
|
+
type BaseSize = Bases.BaseSize
|
|
23
|
+
type BaseSpinner = Bases.BaseSpinner
|
|
24
|
+
type BaseStatus = Bases.BaseStatus
|
|
19
25
|
type BaseText = Bases.BaseText
|
|
20
|
-
type BaseTextBackground = Bases.BaseTextBackground
|
|
21
26
|
type BaseTextText = Bases.BaseTextText
|
|
22
27
|
}
|
|
23
28
|
|