veloce-vue 0.40.0 → 0.41.0
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/components/Button.vue +68 -55
- package/package.json +1 -1
- package/styles/index.css +5 -3
- package/styles/utilities.css +1 -2
- package/types/components/Button.vue.d.ts +2 -2
package/components/Button.vue
CHANGED
|
@@ -1,80 +1,80 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { computed, type Component } from
|
|
3
|
-
import { Icon, Loading } from
|
|
4
|
-
import { type Variant, type Severity, type Position, type Size, type FontWeight } from
|
|
2
|
+
import { computed, type Component } from "vue";
|
|
3
|
+
import { Icon, Loading } from "../exports/icons";
|
|
4
|
+
import { type Variant, type Severity, type Position, type Size, type FontWeight } from "../exports/types";
|
|
5
5
|
|
|
6
6
|
const props = defineProps({
|
|
7
|
-
label: { type: String, default:
|
|
7
|
+
label: { type: String, default: "" },
|
|
8
8
|
loading: { type: Boolean, default: false },
|
|
9
9
|
disabled: { type: Boolean, default: false },
|
|
10
|
-
variant: { type: String as () => Variant, default:
|
|
11
|
-
severity: { type: String as () => Severity, default:
|
|
10
|
+
variant: { type: String as () => Variant, default: "solid" },
|
|
11
|
+
severity: { type: String as () => Severity, default: "primary" },
|
|
12
12
|
icon: { type: Object as () => Component, default: () => null },
|
|
13
|
-
iconClass: { type: String, default:
|
|
14
|
-
iconPosition: { type: String as () => Position, default:
|
|
13
|
+
iconClass: { type: String, default: "" },
|
|
14
|
+
iconPosition: { type: String as () => Position, default: "right" },
|
|
15
15
|
rounded: { type: Boolean, default: false },
|
|
16
|
-
size: { type: String as () => Size, default:
|
|
17
|
-
fontWeight: { type: String as () => FontWeight, default:
|
|
16
|
+
size: { type: String as () => Size, default: "md" },
|
|
17
|
+
fontWeight: { type: String as () => FontWeight, default: "medium" as FontWeight },
|
|
18
18
|
neumorphic: { type: Boolean, default: false },
|
|
19
19
|
highlighted: { type: Boolean, default: false },
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
const severityClasses = {
|
|
23
23
|
primary: {
|
|
24
|
-
ghost:
|
|
25
|
-
outlined:
|
|
26
|
-
link:
|
|
27
|
-
soft:
|
|
28
|
-
solid:
|
|
29
|
-
neutral:
|
|
24
|
+
ghost: "bg-transparent text-primary hover:bg-primary/10 dark:hover:bg-neutral-800",
|
|
25
|
+
outlined: "border-primary! text-primary hover:bg-primary hover:text-inverted disabled:hover:text-primary disabled:hover:bg-primary disabled:hover:text-inverted",
|
|
26
|
+
link: "text-primary hover:underline",
|
|
27
|
+
soft: "bg-primary-light text-primary hover:bg-primary-light/80 dark:bg-primary/10 dark:text-primary dark:hover:bg-primary/20",
|
|
28
|
+
solid: "bg-primary text-inverted hover:bg-primary/70 disabled:hover:bg-primary dark:hover:bg-primary/80",
|
|
29
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
|
|
30
30
|
},
|
|
31
31
|
secondary: {
|
|
32
|
-
ghost:
|
|
33
|
-
outlined:
|
|
34
|
-
link:
|
|
35
|
-
soft:
|
|
36
|
-
solid:
|
|
37
|
-
neutral:
|
|
32
|
+
ghost: "bg-transparent text-secondary hover:bg-secondary/10 dark:hover:bg-neutral-800",
|
|
33
|
+
outlined: "border-secondary! text-secondary hover:bg-secondary hover:text-inverted disabled:hover:text-secondary disabled:hover:bg-secondary disabled:hover:text-inverted",
|
|
34
|
+
link: "text-secondary hover:underline",
|
|
35
|
+
soft: "bg-secondary-light text-secondary hover:bg-secondary-light/80 dark:bg-secondary/10 dark:text-secondary dark:hover:bg-secondary/20",
|
|
36
|
+
solid: "bg-secondary text-inverted hover:bg-secondary/70 disabled:hover:bg-secondary dark:hover:bg-secondary/80",
|
|
37
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
|
|
38
38
|
},
|
|
39
39
|
success: {
|
|
40
|
-
ghost:
|
|
41
|
-
outlined:
|
|
42
|
-
link:
|
|
43
|
-
soft:
|
|
44
|
-
solid:
|
|
45
|
-
neutral:
|
|
40
|
+
ghost: "bg-transparent text-success hover:bg-success/10 dark:hover:bg-neutral-800",
|
|
41
|
+
outlined: "border-success! text-success hover:bg-success hover:text-inverted disabled:hover:text-success disabled:hover:bg-success disabled:hover:text-inverted",
|
|
42
|
+
link: "text-success hover:underline",
|
|
43
|
+
soft: "bg-success-light text-success hover:bg-success-light/80 dark:bg-success/10 dark:text-success dark:hover:bg-success/20",
|
|
44
|
+
solid: "bg-success text-inverted hover:bg-success/70 disabled:hover:bg-success dark:hover:bg-success/80",
|
|
45
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
|
|
46
46
|
},
|
|
47
47
|
info: {
|
|
48
|
-
ghost:
|
|
49
|
-
outlined:
|
|
50
|
-
link:
|
|
51
|
-
soft:
|
|
52
|
-
solid:
|
|
53
|
-
neutral:
|
|
48
|
+
ghost: "bg-transparent text-info hover:bg-info/10 dark:hover:bg-neutral-800",
|
|
49
|
+
outlined: "border-info! text-info hover:bg-info hover:text-inverted disabled:hover:text-info disabled:hover:bg-info disabled:hover:text-inverted",
|
|
50
|
+
link: "text-info hover:underline",
|
|
51
|
+
soft: "bg-info-light text-info hover:bg-info-light/80 dark:bg-info/10 dark:text-info dark:hover:bg-info/20",
|
|
52
|
+
solid: "bg-info text-inverted hover:bg-info/70 disabled:hover:bg-info dark:hover:bg-info/80",
|
|
53
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
|
|
54
54
|
},
|
|
55
55
|
warning: {
|
|
56
|
-
ghost:
|
|
57
|
-
outlined:
|
|
58
|
-
link:
|
|
59
|
-
soft:
|
|
60
|
-
solid:
|
|
61
|
-
neutral:
|
|
56
|
+
ghost: "bg-transparent text-warning hover:bg-warning/10 dark:hover:bg-neutral-800",
|
|
57
|
+
outlined: "border-warning! text-warning hover:bg-warning hover:text-inverted disabled:hover:text-warning disabled:hover:bg-warning disabled:hover:text-inverted",
|
|
58
|
+
link: "text-warning hover:underline",
|
|
59
|
+
soft: "bg-warning-light text-warning hover:bg-warning-light/80 dark:bg-warning/10 dark:text-warning dark:hover:bg-warning/20",
|
|
60
|
+
solid: "bg-warning text-inverted hover:bg-warning/70 disabled:hover:bg-warning dark:hover:bg-warning/80",
|
|
61
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
|
|
62
62
|
},
|
|
63
63
|
error: {
|
|
64
|
-
ghost:
|
|
65
|
-
outlined:
|
|
66
|
-
link:
|
|
67
|
-
soft:
|
|
68
|
-
solid:
|
|
69
|
-
neutral:
|
|
64
|
+
ghost: "bg-transparent text-error hover:bg-error/10 dark:hover:bg-neutral-800",
|
|
65
|
+
outlined: "border-error! text-error hover:bg-error hover:text-inverted disabled:hover:text-error disabled:hover:bg-error disabled:hover:text-inverted",
|
|
66
|
+
link: "text-error hover:underline",
|
|
67
|
+
soft: "bg-error-light text-error hover:bg-error-light/80 dark:bg-error/10 dark:text-error dark:hover:bg-error/20",
|
|
68
|
+
solid: "bg-error text-inverted hover:bg-error/70 disabled:hover:bg-error dark:hover:bg-error/80",
|
|
69
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
|
|
70
70
|
},
|
|
71
71
|
neutral: {
|
|
72
|
-
ghost:
|
|
73
|
-
outlined:
|
|
74
|
-
link:
|
|
75
|
-
soft:
|
|
76
|
-
solid:
|
|
77
|
-
neutral:
|
|
72
|
+
ghost: "bg-transparent text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800",
|
|
73
|
+
outlined: "border-neutral-300! dark:border-neutral-700! text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800 disabled:hover:text-neutral-700 disabled:hover:text-inverted",
|
|
74
|
+
link: "text-neutral-700 dark:text-neutral-300 hover:underline",
|
|
75
|
+
soft: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700",
|
|
76
|
+
solid: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-100/80",
|
|
77
|
+
neutral: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
|
|
78
78
|
},
|
|
79
79
|
};
|
|
80
80
|
|
|
@@ -84,7 +84,20 @@ const classes = computed(() => {
|
|
|
84
84
|
</script>
|
|
85
85
|
|
|
86
86
|
<template>
|
|
87
|
-
<button
|
|
87
|
+
<button
|
|
88
|
+
type="button"
|
|
89
|
+
:disabled="props.disabled || props.loading"
|
|
90
|
+
:class="[
|
|
91
|
+
classes,
|
|
92
|
+
{ 'rounded-full': props.rounded },
|
|
93
|
+
{ 'justify-center': !props.icon },
|
|
94
|
+
{ 'px-2 py-1 text-sm': props.size === 'sm', 'px-2.5 py-1.5 text-sm': props.size === 'md', 'px-3 py-2 text-base': props.size === 'lg', 'px-3.5 py-2.5 text-lg': props.size === 'xl' },
|
|
95
|
+
{ 'font-normal': props.fontWeight === 'normal', 'font-medium': props.fontWeight === 'medium', 'font-semibold': props.fontWeight === 'semibold', 'font-bold': props.fontWeight === 'bold' },
|
|
96
|
+
{ 'veloce-button-neumorphic': props.neumorphic },
|
|
97
|
+
{ 'bg-highlight': props.highlighted },
|
|
98
|
+
]"
|
|
99
|
+
class="flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent transition-all duration-200 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
|
|
100
|
+
>
|
|
88
101
|
<slot v-if="$slots.default" />
|
|
89
102
|
<template v-else>
|
|
90
103
|
<span v-if="props.label" :class="{ 'order-2': props.iconPosition === 'left' }"> {{ props.label }} </span>
|
|
@@ -93,12 +106,12 @@ const classes = computed(() => {
|
|
|
93
106
|
</template>
|
|
94
107
|
</button>
|
|
95
108
|
</template>
|
|
96
|
-
<style
|
|
109
|
+
<style>
|
|
97
110
|
.veloce-button-neumorphic {
|
|
98
111
|
position: relative;
|
|
99
112
|
|
|
100
113
|
&::after {
|
|
101
|
-
content:
|
|
114
|
+
content: " ";
|
|
102
115
|
position: absolute;
|
|
103
116
|
inset: -1px;
|
|
104
117
|
border-top: inset;
|
package/package.json
CHANGED
package/styles/index.css
CHANGED
package/styles/utilities.css
CHANGED
|
@@ -16,6 +16,5 @@
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
@utility text-highlight {
|
|
19
|
-
|
|
20
|
-
/* @apply inline-table rounded bg-neutral-100 px-1.5 outline outline-neutral-200/75 dark:bg-neutral-800 dark:outline-neutral-700/75; */
|
|
19
|
+
@apply inline-table rounded bg-neutral-100 px-1.5 outline outline-neutral-200/75 dark:bg-neutral-800 dark:outline-neutral-700/75;
|
|
21
20
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { type Component } from
|
|
2
|
-
import { type Variant, type Severity, type Position, type Size, type FontWeight } from
|
|
1
|
+
import { type Component } from "vue";
|
|
2
|
+
import { type Variant, type Severity, type Position, type Size, type FontWeight } from "../exports/types";
|
|
3
3
|
declare var __VLS_1: {};
|
|
4
4
|
type __VLS_Slots = {} & {
|
|
5
5
|
default?: (props: typeof __VLS_1) => any;
|