@saasmakers/ui 0.1.41 → 0.1.42
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/BaseHeading.vue +30 -0
- package/app/components/bases/BaseMessage.vue +57 -0
- package/app/components/bases/BaseMetric.vue +73 -0
- package/app/components/bases/BaseParagraph.vue +25 -0
- package/app/composables/useIcons.ts +3 -0
- package/app/types/bases.d.ts +44 -1
- package/app/types/global.d.ts +8 -3
- package/package.json +1 -1
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import type { BaseHeading } from '../../types/bases'
|
|
3
|
+
|
|
4
|
+
withDefaults(defineProps<BaseHeading>(), {
|
|
5
|
+
alignment: 'left',
|
|
6
|
+
size: 'base',
|
|
7
|
+
tag: 'h1',
|
|
8
|
+
})
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<template>
|
|
12
|
+
<component
|
|
13
|
+
:is="tag"
|
|
14
|
+
class="select-text tracking-tight normal-case"
|
|
15
|
+
:class="{
|
|
16
|
+
'justify-start': alignment === 'left',
|
|
17
|
+
'justify-center text-center': alignment === 'center',
|
|
18
|
+
'justify-end': alignment === 'right',
|
|
19
|
+
|
|
20
|
+
'font-bold': ['xs', 'sm'].includes(size),
|
|
21
|
+
'font-extrabold': ['base', 'lg', 'xl'].includes(size),
|
|
22
|
+
|
|
23
|
+
'text-xl sm:text-2xl': size === 'sm',
|
|
24
|
+
'text-2xl sm:text-3xl': size === 'base',
|
|
25
|
+
'text-2xl sm:text-4xl': size === 'lg',
|
|
26
|
+
}"
|
|
27
|
+
>
|
|
28
|
+
<slot />
|
|
29
|
+
</component>
|
|
30
|
+
</template>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import type { BaseMessage } from '../../types/bases'
|
|
3
|
+
|
|
4
|
+
withDefaults(defineProps<BaseMessage>(), {
|
|
5
|
+
bordered: false,
|
|
6
|
+
description: '',
|
|
7
|
+
legend: '',
|
|
8
|
+
title: '',
|
|
9
|
+
})
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<template>
|
|
13
|
+
<div
|
|
14
|
+
class="flex flex-col items-center bg-gray-100 text-center text-gray-900 dark:bg-gray-900 dark:text-gray-100"
|
|
15
|
+
:class="{ 'rounded-lg border border-gray-200 dark:border-gray-800 p-6 sm:p-10': bordered }"
|
|
16
|
+
>
|
|
17
|
+
<div
|
|
18
|
+
v-if="$slots.animation"
|
|
19
|
+
class="mb-6 w-full"
|
|
20
|
+
>
|
|
21
|
+
<slot name="animation" />
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div>
|
|
25
|
+
<BaseHeading
|
|
26
|
+
v-if="title"
|
|
27
|
+
alignment="center"
|
|
28
|
+
size="sm"
|
|
29
|
+
tag="h1"
|
|
30
|
+
>
|
|
31
|
+
<span v-html="title" />
|
|
32
|
+
</BaseHeading>
|
|
33
|
+
|
|
34
|
+
<BaseParagraph
|
|
35
|
+
v-if="description"
|
|
36
|
+
alignment="center"
|
|
37
|
+
class="mt-2"
|
|
38
|
+
>
|
|
39
|
+
<span v-html="description" />
|
|
40
|
+
</BaseParagraph>
|
|
41
|
+
|
|
42
|
+
<div
|
|
43
|
+
v-if="$slots.default"
|
|
44
|
+
class="mt-6 flex flex-col items-center justify-center sm:flex-row sm:items-center"
|
|
45
|
+
>
|
|
46
|
+
<slot />
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<BaseText
|
|
50
|
+
v-if="legend"
|
|
51
|
+
class="mt-6 text-gray-600 dark:text-gray-400"
|
|
52
|
+
size="sm"
|
|
53
|
+
:text="legend"
|
|
54
|
+
/>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</template>
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import type { BaseMetric } from '../../types/bases'
|
|
3
|
+
import { getIcon } from '../../composables/useIcons'
|
|
4
|
+
|
|
5
|
+
const props = withDefaults(defineProps<BaseMetric>(), {
|
|
6
|
+
alignment: 'left',
|
|
7
|
+
performance: 'equal',
|
|
8
|
+
performanceTooltip: '',
|
|
9
|
+
size: 'base',
|
|
10
|
+
title: '',
|
|
11
|
+
value: undefined,
|
|
12
|
+
})
|
|
13
|
+
|
|
14
|
+
const performanceIcon = computed<string | undefined>(() => {
|
|
15
|
+
switch (props.performance) {
|
|
16
|
+
case 'down':
|
|
17
|
+
return getIcon('arrowDown')
|
|
18
|
+
|
|
19
|
+
case 'equal':
|
|
20
|
+
return getIcon('arrowRight')
|
|
21
|
+
|
|
22
|
+
case 'up':
|
|
23
|
+
return getIcon('arrowUp')
|
|
24
|
+
|
|
25
|
+
default:
|
|
26
|
+
return undefined
|
|
27
|
+
}
|
|
28
|
+
})
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<template>
|
|
32
|
+
<div
|
|
33
|
+
class="flex flex-col leading-normal"
|
|
34
|
+
:class="{
|
|
35
|
+
'items-start': alignment === 'left',
|
|
36
|
+
'items-center': alignment === 'center',
|
|
37
|
+
'items-right': alignment === 'right',
|
|
38
|
+
}"
|
|
39
|
+
>
|
|
40
|
+
<BaseText
|
|
41
|
+
bold
|
|
42
|
+
class="mb-1"
|
|
43
|
+
:size="size"
|
|
44
|
+
:text="`${value}`"
|
|
45
|
+
/>
|
|
46
|
+
|
|
47
|
+
<span class="relative flex items-center leading-4">
|
|
48
|
+
<BaseIcon
|
|
49
|
+
v-if="performanceTooltip"
|
|
50
|
+
v-tooltip="performanceTooltip"
|
|
51
|
+
class="mr-1"
|
|
52
|
+
:icon="getIcon('infoCircle')"
|
|
53
|
+
/>
|
|
54
|
+
|
|
55
|
+
<BaseText
|
|
56
|
+
class="mr-0.5 text-gray-600 dark:text-gray-400"
|
|
57
|
+
size="2xs"
|
|
58
|
+
:text="title"
|
|
59
|
+
/>
|
|
60
|
+
|
|
61
|
+
<BaseIcon
|
|
62
|
+
v-if="performanceIcon"
|
|
63
|
+
class="absolute right-0 translate-x-4 transform"
|
|
64
|
+
:class="{
|
|
65
|
+
'-mt-0.5': performance === 'down',
|
|
66
|
+
'mt-0.25': performance === 'up',
|
|
67
|
+
}"
|
|
68
|
+
:color="performance === 'down' ? 'red' : performance === 'equal' ? 'gray' : 'indigo'"
|
|
69
|
+
:icon="performanceIcon"
|
|
70
|
+
/>
|
|
71
|
+
</span>
|
|
72
|
+
</div>
|
|
73
|
+
</template>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import type { BaseParagraph } from '../../types/bases'
|
|
3
|
+
|
|
4
|
+
withDefaults(defineProps<BaseParagraph>(), {
|
|
5
|
+
alignment: 'left',
|
|
6
|
+
size: 'base',
|
|
7
|
+
})
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<template>
|
|
11
|
+
<p
|
|
12
|
+
class="select-text font-semibold leading-relaxed tracking-tight normal-case"
|
|
13
|
+
:class="{
|
|
14
|
+
'text-center': alignment === 'center',
|
|
15
|
+
'text-left': alignment === 'left',
|
|
16
|
+
'text-right': alignment === 'right',
|
|
17
|
+
|
|
18
|
+
'text-sm sm:text-base': size === 'sm',
|
|
19
|
+
'text-base sm:text-lg': size === 'base',
|
|
20
|
+
'text-lg sm:text-xl': size === 'lg',
|
|
21
|
+
}"
|
|
22
|
+
>
|
|
23
|
+
<slot />
|
|
24
|
+
</p>
|
|
25
|
+
</template>
|
|
@@ -9,6 +9,9 @@
|
|
|
9
9
|
// -> ./assets/icons
|
|
10
10
|
|
|
11
11
|
const icons = {
|
|
12
|
+
arrowDown: 'solar:alt-arrow-down-bold',
|
|
13
|
+
arrowRight: 'solar:alt-arrow-right-bold',
|
|
14
|
+
arrowUp: 'solar:alt-arrow-up-bold',
|
|
12
15
|
checkCircle: 'hugeicons:checkmark-circle-02',
|
|
13
16
|
close: 'hugeicons:cancel-01',
|
|
14
17
|
closeCircle: 'hugeicons:cancel-circle',
|
package/app/types/bases.d.ts
CHANGED
|
@@ -57,7 +57,7 @@ export interface BaseButton {
|
|
|
57
57
|
type?: BaseButtonType
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
type BaseButtonRounded = 'base' | 'full' | 'lg' | 'md' | 'none' | 'sm' | 'xl'
|
|
60
|
+
export type BaseButtonRounded = 'base' | 'full' | 'lg' | 'md' | 'none' | 'sm' | 'xl'
|
|
61
61
|
|
|
62
62
|
export type BaseButtonSize = '2xs' | 'base' | 'lg' | 'sm' | 'xl' | 'xs'
|
|
63
63
|
|
|
@@ -74,6 +74,18 @@ export type BaseDividerBorderStyle = 'dashed' | 'dotted' | 'solid'
|
|
|
74
74
|
|
|
75
75
|
export type BaseDividerSize = 'base' | 'sm'
|
|
76
76
|
|
|
77
|
+
export interface BaseHeading {
|
|
78
|
+
alignment?: BaseHeadingAlignment
|
|
79
|
+
size?: BaseHeadingSize
|
|
80
|
+
tag?: BaseHeadingTag
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export type BaseHeadingAlignment = 'center' | 'left' | 'right'
|
|
84
|
+
|
|
85
|
+
export type BaseHeadingSize = 'base' | 'lg' | 'sm' | 'xl' | 'xs'
|
|
86
|
+
|
|
87
|
+
export type BaseHeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
|
|
88
|
+
|
|
77
89
|
export interface BaseIcon {
|
|
78
90
|
bold?: boolean
|
|
79
91
|
clickable?: boolean
|
|
@@ -91,6 +103,28 @@ export interface BaseIcon {
|
|
|
91
103
|
uppercase?: boolean
|
|
92
104
|
}
|
|
93
105
|
|
|
106
|
+
interface BaseMessage {
|
|
107
|
+
bordered?: boolean
|
|
108
|
+
description?: string
|
|
109
|
+
legend?: string
|
|
110
|
+
title: string
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
export interface BaseMetric {
|
|
114
|
+
alignment?: BaseMetricAlignment
|
|
115
|
+
performance?: BaseMetricPerformance
|
|
116
|
+
performanceTooltip?: string
|
|
117
|
+
size?: BaseMetricSize
|
|
118
|
+
title?: BaseTextText
|
|
119
|
+
value?: number | string
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
export type BaseMetricAlignment = 'center' | 'left' | 'right'
|
|
123
|
+
|
|
124
|
+
export type BaseMetricPerformance = 'down' | 'equal' | 'up'
|
|
125
|
+
|
|
126
|
+
export type BaseMetricSize = 'base' | 'sm'
|
|
127
|
+
|
|
94
128
|
export interface BaseOverlay {
|
|
95
129
|
active?: boolean
|
|
96
130
|
clickable?: boolean
|
|
@@ -104,6 +138,15 @@ export type BaseOverlayOpacity = 0 | 25 | 50 | 75 | 95 | 100
|
|
|
104
138
|
|
|
105
139
|
export type BaseOverlayPosition = 'absolute' | 'fixed'
|
|
106
140
|
|
|
141
|
+
export interface BaseParagraph {
|
|
142
|
+
alignment?: BaseParagraphAlignment
|
|
143
|
+
size?: BaseParagraphSize
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
export type BaseParagraphAlignment = 'center' | 'left' | 'right'
|
|
147
|
+
|
|
148
|
+
export type BaseParagraphSize = 'base' | 'lg' | 'sm'
|
|
149
|
+
|
|
107
150
|
export interface BaseSpinner {
|
|
108
151
|
clickable?: boolean
|
|
109
152
|
color?: BaseColor
|
package/app/types/global.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ declare global {
|
|
|
9
9
|
type BaseBordered = Bases.BaseBordered
|
|
10
10
|
type BaseBorderedColor = Bases.BaseBorderedColor
|
|
11
11
|
type BaseButton = Bases.BaseButton
|
|
12
|
+
type BaseButtonRounded = Bases.BaseButtonRounded
|
|
12
13
|
type BaseButtonSize = Bases.BaseButtonSize
|
|
13
14
|
type BaseButtonType = Bases.BaseButtonType
|
|
14
15
|
type BaseColor = Bases.BaseColor
|
|
@@ -16,9 +17,13 @@ declare global {
|
|
|
16
17
|
type BaseDividerBorderStyle = Bases.BaseDividerBorderStyle
|
|
17
18
|
type BaseDividerSize = Bases.BaseDividerSize
|
|
18
19
|
type BaseIcon = Bases.BaseIcon
|
|
19
|
-
type
|
|
20
|
-
type
|
|
21
|
-
type
|
|
20
|
+
type BaseHeading = Bases.BaseHeading
|
|
21
|
+
type BaseHeadingAlignment = Bases.BaseHeadingAlignment
|
|
22
|
+
type BaseHeadingSize = Bases.BaseHeadingSize
|
|
23
|
+
type BaseHeadingTag = Bases.BaseHeadingTag
|
|
24
|
+
type BaseParagraph = Bases.BaseParagraph
|
|
25
|
+
type BaseParagraphAlignment = Bases.BaseParagraphAlignment
|
|
26
|
+
type BaseParagraphSize = Bases.BaseParagraphSize
|
|
22
27
|
type BaseSize = Bases.BaseSize
|
|
23
28
|
type BaseSpinner = Bases.BaseSpinner
|
|
24
29
|
type BaseStatus = Bases.BaseStatus
|