@soft-stech/bootsman-ui-shadcn 1.2.2 → 1.3.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/main.css +1 -1
- package/dist/components/ui/progress/BuiProgress.vue.d.ts +5 -1
- package/dist/components/ui/progress/index.d.ts +4 -0
- package/dist/components/ui/progress/index.js +46 -30
- package/dist/index.js +166 -165
- package/dist/tailwind-preset.js +1 -1
- package/dist/variables.css +1 -1
- package/package.json +1 -1
- package/src/assets/variables.css +55 -55
- package/src/components/stories/BuiProgress.story.vue +3 -3
- package/src/components/ui/progress/BuiProgress.vue +7 -11
- package/src/components/ui/progress/index.ts +26 -4
- package/src/tailwind-preset.ts +1 -1
package/src/assets/variables.css
CHANGED
|
@@ -1,87 +1,87 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
--background: 0 0% 100%;
|
|
3
|
+
--foreground: 242 24% 21%;
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
--muted: 210 40% 96.1%;
|
|
6
|
+
--muted-foreground: 225 5% 47%;
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
--popover: 0 0% 100%;
|
|
9
|
+
--popover-foreground: 222.2 84% 4.9%;
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
--card: 0 0% 100%;
|
|
12
|
+
--card-foreground: 222.2 84% 4.9%;
|
|
13
|
+
--card-shadow: 240.88, 91.89%, 70.98%, 0.16;
|
|
14
|
+
--tab-shadow: 228, 51%, 11%, 0.08;
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
--border: 241 92% 71%;
|
|
17
|
+
--input: 225 11% 84%;
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
--primary: 241 92% 71%;
|
|
20
|
+
--primary-hover: 241 76% 62%;
|
|
21
|
+
--primary-active: 241 54% 54%;
|
|
22
|
+
--primary-foreground: 0 0% 100%;
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
--secondary: 210 40% 96.1%;
|
|
25
|
+
--secondary-foreground: 241 76% 62%;
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
--accent: 241 92% 71%;
|
|
28
|
+
--accent-foreground: 241 76% 62%;
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
--destructive: 328, 68%, 63%, 0.16;
|
|
31
|
+
--destructive-foreground: 328, 68%, 63%;
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
--success: 181, 34%, 39%, 0.16;
|
|
34
|
+
--success-foreground: 181, 34%, 39%;
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
--warning: 48, 79%, 45%, 0.16;
|
|
37
|
+
--warning-foreground: 48, 79%, 45%;
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
--ring: 241 92% 71%;
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
--radius: 0.5rem;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.dark {
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
--background: 242 24% 21%;
|
|
46
|
+
--foreground: 0 0% 100%;
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
--muted: 217.2 32.6% 17.5%;
|
|
49
|
+
--muted-foreground: 0, 0%, 100%, 0.32;
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
--popover: 222.2 84% 4.9%;
|
|
52
|
+
--popover-foreground: 210 40% 98%;
|
|
53
53
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
--card: 242 24% 21%;
|
|
55
|
+
--card-foreground: 210 40% 98%;
|
|
56
|
+
--card-shadow: 242.03, 93.67%, 69.02%, 0.4;
|
|
57
|
+
--tab-shadow: 228, 51%, 11%, 0.08;
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
--border: 241 92% 71%;
|
|
60
|
+
--input: 0, 0%, 100%, 0.32;
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
--primary: 241 92% 71%;
|
|
63
|
+
--primary-hover: 241 76% 62%;
|
|
64
|
+
--primary-active: 241 54% 54%;
|
|
65
|
+
--primary-foreground: 0 0% 100%;
|
|
66
66
|
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
--secondary: 217.2 32.6% 17.5%;
|
|
68
|
+
--secondary-foreground: 210 40% 98%;
|
|
69
69
|
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
--accent: 241 92% 71%;
|
|
71
|
+
--accent-foreground: 240 100% 77%;
|
|
72
72
|
|
|
73
|
-
|
|
74
|
-
|
|
73
|
+
--destructive: 328, 68%, 63%, 0.16;
|
|
74
|
+
--destructive-foreground: 328, 68%, 63%;
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
--success: 181, 34%, 39%, 0.16;
|
|
77
|
+
--success-foreground: 152 80% 38%;
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
--ring: 241 92% 71%;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
* {
|
|
83
|
-
|
|
83
|
+
@apply border-border;
|
|
84
84
|
}
|
|
85
85
|
body {
|
|
86
|
-
|
|
86
|
+
@apply bg-background text-foreground;
|
|
87
87
|
}
|
|
@@ -48,9 +48,9 @@ import { ref } from 'vue'
|
|
|
48
48
|
|
|
49
49
|
<Variant title="Colors">
|
|
50
50
|
<div class="m-4 flex flex-col gap-2">
|
|
51
|
-
<BuiProgress :model-value="50" class="max-w-[300px]
|
|
52
|
-
<BuiProgress :model-value="50" class="max-w-[300px]
|
|
53
|
-
<BuiProgress :model-value="50" class="max-w-[300px]
|
|
51
|
+
<BuiProgress :model-value="50" class="max-w-[300px]" color="primary" />
|
|
52
|
+
<BuiProgress :model-value="50" class="max-w-[300px]" color="red" />
|
|
53
|
+
<BuiProgress :model-value="50" class="max-w-[300px]" color="orange" />
|
|
54
54
|
</div>
|
|
55
55
|
</Variant>
|
|
56
56
|
</Story>
|
|
@@ -3,18 +3,21 @@ import { ProgressIndicator, ProgressRoot, type ProgressRootProps } from 'radix-v
|
|
|
3
3
|
import { cn } from '@/lib/utils'
|
|
4
4
|
import type { HTMLAttributes } from 'vue'
|
|
5
5
|
|
|
6
|
-
import { progressVariants, capVariants } from '.'
|
|
6
|
+
import { progressVariants, capVariants, indicatorVariants } from '.'
|
|
7
7
|
|
|
8
8
|
const props = withDefaults(
|
|
9
9
|
defineProps<
|
|
10
10
|
ProgressRootProps & {
|
|
11
11
|
class?: HTMLAttributes['class']
|
|
12
12
|
variant?: NonNullable<Parameters<typeof progressVariants>[0]>['variant']
|
|
13
|
+
color?: NonNullable<Parameters<typeof indicatorVariants>[0]>['color']
|
|
13
14
|
}
|
|
14
15
|
>(),
|
|
15
16
|
{
|
|
16
17
|
class: '',
|
|
17
|
-
modelValue: 0
|
|
18
|
+
modelValue: 0,
|
|
19
|
+
color: 'primary',
|
|
20
|
+
variant: 'default'
|
|
18
21
|
}
|
|
19
22
|
)
|
|
20
23
|
</script>
|
|
@@ -23,7 +26,7 @@ const props = withDefaults(
|
|
|
23
26
|
<ProgressRoot
|
|
24
27
|
:class="
|
|
25
28
|
cn(
|
|
26
|
-
|
|
29
|
+
'relative w-full overflow-hidden bg-primary bg-opacity-[0.16]',
|
|
27
30
|
progressVariants({ variant }),
|
|
28
31
|
props.class
|
|
29
32
|
)
|
|
@@ -31,14 +34,7 @@ const props = withDefaults(
|
|
|
31
34
|
v-bind="props"
|
|
32
35
|
>
|
|
33
36
|
<ProgressIndicator
|
|
34
|
-
:class="
|
|
35
|
-
cn(
|
|
36
|
-
'absolute box-content flex-1 bg-primary bg-opacity-60 transition-all duration-300 after:absolute after:right-0 after:top-0 after:bg-primary',
|
|
37
|
-
progressVariants({ variant }),
|
|
38
|
-
|
|
39
|
-
props.class
|
|
40
|
-
)
|
|
41
|
-
"
|
|
37
|
+
:class="cn(indicatorVariants({ color, variant }), props.class)"
|
|
42
38
|
:style="`width: calc(calc(100% - ${capVariants[variant ?? 'default']}) * ${
|
|
43
39
|
(props.modelValue ?? 0) * 0.01
|
|
44
40
|
})`"
|
|
@@ -2,12 +2,12 @@ export { default as BuiProgress } from './BuiProgress.vue'
|
|
|
2
2
|
|
|
3
3
|
import { cva } from 'class-variance-authority'
|
|
4
4
|
|
|
5
|
-
export const progressVariants = cva('
|
|
5
|
+
export const progressVariants = cva('', {
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
|
-
sm: 'h-
|
|
9
|
-
default: 'h-
|
|
10
|
-
lg: 'h-
|
|
8
|
+
sm: 'h-3 [&>*]:pl-2 rounded-[8px]',
|
|
9
|
+
default: 'h-5 [&>*]:pl-4 rounded-[8px]',
|
|
10
|
+
lg: 'h-10 [&>*]:pl-8 rounded-[16px]'
|
|
11
11
|
}
|
|
12
12
|
},
|
|
13
13
|
defaultVariants: {
|
|
@@ -15,6 +15,28 @@ export const progressVariants = cva('after:rounded-[50%/50%]', {
|
|
|
15
15
|
}
|
|
16
16
|
})
|
|
17
17
|
|
|
18
|
+
export const indicatorVariants = cva(
|
|
19
|
+
'absolute h-full box-content flex-1 bg-gradient-to-l transition-all duration-300',
|
|
20
|
+
{
|
|
21
|
+
variants: {
|
|
22
|
+
variant: {
|
|
23
|
+
sm: 'rounded-[6px]',
|
|
24
|
+
default: 'rounded-[8px]',
|
|
25
|
+
lg: 'rounded-[16px]'
|
|
26
|
+
},
|
|
27
|
+
color: {
|
|
28
|
+
primary: 'from-[rgba(115,113,249,0.80)] to-[rgba(115,113,249,0.24)]',
|
|
29
|
+
red: 'from-[rgba(224,95,163,0.8)] to-[rgba(224,95,163,0.24)]',
|
|
30
|
+
orange: 'from-[rgba(255,167,139,0.8)] to-[rgba(255,167,139,0.24)]'
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
defaultVariants: {
|
|
34
|
+
color: 'primary',
|
|
35
|
+
variant: 'default'
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
)
|
|
39
|
+
|
|
18
40
|
export const capVariants = {
|
|
19
41
|
sm: '8px',
|
|
20
42
|
default: '16px',
|
package/src/tailwind-preset.ts
CHANGED
|
@@ -77,7 +77,7 @@ export default {
|
|
|
77
77
|
sm: 'calc(var(--radius) - 4px)'
|
|
78
78
|
},
|
|
79
79
|
boxShadow: {
|
|
80
|
-
'card-shadow': '0px
|
|
80
|
+
'card-shadow': '0px 4px 8px 0px hsl(var(--card-shadow))',
|
|
81
81
|
'tab-shadow':
|
|
82
82
|
'0px 2px 4px 0px hsl(var(--tab-shadow)), 0px 4px 4px 0px hsl(var(--tab-shadow))'
|
|
83
83
|
},
|