@saasmakers/ui 2.0.26 → 2.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.
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import type { BaseCircle } from '../../types/bases'
|
|
3
|
+
|
|
4
|
+
withDefaults(defineProps<BaseCircle>(), { color: 'indigo' })
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<template>
|
|
8
|
+
<span
|
|
9
|
+
class="inline-block size-2.5 shrink-0 rounded-full"
|
|
10
|
+
:class="{
|
|
11
|
+
'bg-red-500': color === 'red',
|
|
12
|
+
'bg-amber-500': color === 'amber',
|
|
13
|
+
'bg-indigo-500': color === 'indigo',
|
|
14
|
+
'bg-green-500': color === 'green',
|
|
15
|
+
}"
|
|
16
|
+
/>
|
|
17
|
+
</template>
|
|
@@ -45,7 +45,7 @@ function onTabClick(event: MouseEvent, tabValue: string) {
|
|
|
45
45
|
:is="tab.to ? NuxtLinkLocale : 'div'"
|
|
46
46
|
v-for="tab in tabs"
|
|
47
47
|
:key="tab.value"
|
|
48
|
-
class="flex flex-1 cursor-pointer items-center justify-center text-xs"
|
|
48
|
+
class="flex flex-1 cursor-pointer select-none items-center justify-center text-xs"
|
|
49
49
|
:class="{
|
|
50
50
|
'flex-col sm:flex-row': orientation === 'responsive',
|
|
51
51
|
'flex-col': orientation === 'vertical',
|
|
@@ -71,6 +71,17 @@ function onTabClick(event: MouseEvent, tabValue: string) {
|
|
|
71
71
|
:to="tab.to"
|
|
72
72
|
@click="onTabClick($event, tab.value)"
|
|
73
73
|
>
|
|
74
|
+
<BaseCircle
|
|
75
|
+
v-if="tab.circle"
|
|
76
|
+
class="flex-initial"
|
|
77
|
+
:class="{
|
|
78
|
+
'mb-1 sm:mb-0 sm:mr-1.5': orientation === 'responsive',
|
|
79
|
+
'mr-1.5': orientation === 'horizontal',
|
|
80
|
+
'mb-1': orientation === 'vertical',
|
|
81
|
+
}"
|
|
82
|
+
:color="tab.circle"
|
|
83
|
+
/>
|
|
84
|
+
|
|
74
85
|
<BaseIcon
|
|
75
86
|
v-if="tab.icon"
|
|
76
87
|
class="flex-initial"
|
|
@@ -84,7 +95,7 @@ function onTabClick(event: MouseEvent, tabValue: string) {
|
|
|
84
95
|
/>
|
|
85
96
|
|
|
86
97
|
<span
|
|
87
|
-
class="whitespace-nowrap flex-initial"
|
|
98
|
+
class="whitespace-nowrap font-medium flex-initial"
|
|
88
99
|
:class="{
|
|
89
100
|
'text-2xs sm:text-xs': orientation === 'responsive',
|
|
90
101
|
'text-2xs': orientation === 'vertical',
|
package/app/types/bases.d.ts
CHANGED
|
@@ -128,6 +128,12 @@ export interface BaseChart {
|
|
|
128
128
|
|
|
129
129
|
export type BaseChartType = 'bar' | 'line' | 'pie'
|
|
130
130
|
|
|
131
|
+
export interface BaseCircle {
|
|
132
|
+
color?: BaseCircleColor
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
export type BaseCircleColor = 'amber' | 'green' | 'indigo' | 'red'
|
|
136
|
+
|
|
131
137
|
export type BaseColor
|
|
132
138
|
= | 'black'
|
|
133
139
|
| 'gray'
|
package/app/types/fields.d.ts
CHANGED
package/app/types/global.d.ts
CHANGED
|
@@ -36,6 +36,8 @@ declare global {
|
|
|
36
36
|
type BaseCharacterSize = import('./bases').BaseCharacterSize
|
|
37
37
|
type BaseChart = import('./bases').BaseChart
|
|
38
38
|
type BaseChartType = import('./bases').BaseChartType
|
|
39
|
+
type BaseCircle = import('./bases').BaseCircle
|
|
40
|
+
type BaseCircleColor = import('./bases').BaseCircleColor
|
|
39
41
|
type BaseColor = import('./bases').BaseColor
|
|
40
42
|
type BaseDivider = import('./bases').BaseDivider
|
|
41
43
|
type BaseDividerBorderStyle = import('./bases').BaseDividerBorderStyle
|