nexa-ui-kit 0.11.6 → 0.11.8
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/dist/components/NAlert.js +2 -14
- package/dist/components/NAlert.nexa +3 -14
- package/dist/components/NAutocomplete.js +1 -1
- package/dist/components/NAutocomplete.nexa +2 -1
- package/dist/components/NAvatar.js +0 -5
- package/dist/components/NAvatar.nexa +1 -5
- package/dist/components/NBadge.js +0 -6
- package/dist/components/NBadge.nexa +1 -6
- package/dist/components/NBottomSheet.js +0 -5
- package/dist/components/NBottomSheet.nexa +1 -5
- package/dist/components/NButton.js +202 -296
- package/dist/components/NButton.nexa +224 -320
- package/dist/components/NCard.js +39 -82
- package/dist/components/NCard.nexa +27 -71
- package/dist/components/NCheckbox.js +74 -63
- package/dist/components/NCheckbox.nexa +64 -44
- package/dist/components/NChips.nexa +1 -0
- package/dist/components/NDataTable.js +1 -313
- package/dist/components/NDataTable.nexa +2 -314
- package/dist/components/NDatepicker.js +4 -25
- package/dist/components/NDatepicker.nexa +5 -25
- package/dist/components/NForm.nexa +1 -0
- package/dist/components/NFormField.js +0 -5
- package/dist/components/NFormField.nexa +1 -5
- package/dist/components/NImage.js +1 -6
- package/dist/components/NImage.nexa +2 -6
- package/dist/components/NInput.js +96 -263
- package/dist/components/NInput.nexa +89 -259
- package/dist/components/NInputNumber.nexa +1 -1
- package/dist/components/NModal.js +1 -118
- package/dist/components/NModal.nexa +2 -119
- package/dist/components/NMultiSelect.js +1 -1
- package/dist/components/NMultiSelect.nexa +2 -1
- package/dist/components/NPaginator.js +1 -11
- package/dist/components/NPaginator.nexa +2 -11
- package/dist/components/NPassword.nexa +1 -0
- package/dist/components/NProgressBar.js +0 -11
- package/dist/components/NProgressBar.nexa +1 -11
- package/dist/components/NRadio.js +1 -8
- package/dist/components/NRadio.nexa +2 -8
- package/dist/components/NScrollView.js +0 -6
- package/dist/components/NScrollView.nexa +1 -6
- package/dist/components/NSelect.js +7 -35
- package/dist/components/NSelect.nexa +8 -35
- package/dist/components/NSkeleton.js +3 -9
- package/dist/components/NSkeleton.nexa +4 -9
- package/dist/components/NSwitch.js +0 -6
- package/dist/components/NSwitch.nexa +1 -6
- package/dist/components/NTabs.js +0 -11
- package/dist/components/NTabs.nexa +1 -11
- package/dist/components/NTag.js +1 -11
- package/dist/components/NTag.nexa +2 -11
- package/dist/components/NToastContainer.js +3 -27
- package/dist/components/NToastContainer.nexa +4 -27
- package/dist/components/NTooltip.js +0 -13
- package/dist/components/NTooltip.nexa +1 -13
- package/dist/components/NTreeMenu.js +1 -21
- package/dist/components/NTreeMenu.nexa +2 -21
- package/dist/components/NVirtualList.js +0 -2
- package/dist/components/NVirtualList.nexa +1 -2
- package/dist/styles/tokens.css +82 -173
- package/package.json +4 -4
- package/src/components/NAlert.nexa +3 -14
- package/src/components/NAutocomplete.nexa +2 -1
- package/src/components/NAvatar.nexa +1 -5
- package/src/components/NBadge.nexa +1 -6
- package/src/components/NBottomSheet.nexa +1 -5
- package/src/components/NButton.nexa +224 -320
- package/src/components/NCard.nexa +27 -71
- package/src/components/NCheckbox.nexa +64 -44
- package/src/components/NChips.nexa +1 -0
- package/src/components/NDataTable.nexa +2 -314
- package/src/components/NDatepicker.nexa +5 -25
- package/src/components/NForm.nexa +1 -0
- package/src/components/NFormField.nexa +1 -5
- package/src/components/NImage.nexa +2 -6
- package/src/components/NInput.nexa +89 -259
- package/src/components/NInputNumber.nexa +1 -1
- package/src/components/NModal.nexa +2 -119
- package/src/components/NMultiSelect.nexa +2 -1
- package/src/components/NPaginator.nexa +2 -11
- package/src/components/NPassword.nexa +1 -0
- package/src/components/NProgressBar.nexa +1 -11
- package/src/components/NRadio.nexa +2 -8
- package/src/components/NScrollView.nexa +1 -6
- package/src/components/NSelect.nexa +8 -35
- package/src/components/NSkeleton.nexa +4 -9
- package/src/components/NSwitch.nexa +1 -6
- package/src/components/NTabs.nexa +1 -11
- package/src/components/NTag.nexa +2 -11
- package/src/components/NToastContainer.nexa +4 -27
- package/src/components/NTooltip.nexa +1 -13
- package/src/components/NTreeMenu.nexa +2 -21
- package/src/components/NVirtualList.nexa +1 -2
- package/src/styles/tokens.css +82 -173
|
@@ -50,13 +50,11 @@ const activeIndex = computed(() =>
|
|
|
50
50
|
gap: var(--n-space-6);
|
|
51
51
|
width: 100%;
|
|
52
52
|
}
|
|
53
|
-
|
|
54
53
|
.n-tabs-header {
|
|
55
54
|
display: flex;
|
|
56
55
|
position: relative;
|
|
57
56
|
border-bottom: 1px solid var(--n-color-border);
|
|
58
57
|
}
|
|
59
|
-
|
|
60
58
|
.n-tab {
|
|
61
59
|
flex: 1;
|
|
62
60
|
padding: var(--n-space-3) var(--n-space-5);
|
|
@@ -74,31 +72,24 @@ const activeIndex = computed(() =>
|
|
|
74
72
|
white-space: nowrap;
|
|
75
73
|
border-radius: var(--n-radius-sm) var(--n-radius-sm) 0 0;
|
|
76
74
|
}
|
|
77
|
-
|
|
78
75
|
.n-tab:hover:not(.is-active):not(.is-disabled) {
|
|
79
76
|
color: var(--n-color-text);
|
|
80
77
|
background: var(--n-color-glass);
|
|
81
78
|
}
|
|
82
|
-
|
|
83
79
|
.n-tab:focus-visible {
|
|
84
80
|
outline: none;
|
|
85
|
-
box-shadow: inset 0 0 0 2px var(--n-color-primary);
|
|
86
81
|
}
|
|
87
|
-
|
|
88
82
|
.n-tab.is-active {
|
|
89
83
|
color: var(--n-color-primary);
|
|
90
84
|
font-weight: var(--n-weight-semibold);
|
|
91
85
|
}
|
|
92
|
-
|
|
93
86
|
.n-tab.is-disabled {
|
|
94
87
|
opacity: 0.4;
|
|
95
88
|
cursor: not-allowed;
|
|
96
89
|
}
|
|
97
|
-
|
|
98
90
|
.n-tab-icon {
|
|
99
91
|
font-size: var(--n-text-base);
|
|
100
92
|
}
|
|
101
|
-
|
|
102
93
|
.n-tab-badge {
|
|
103
94
|
background: var(--n-color-primary);
|
|
104
95
|
color: white;
|
|
@@ -108,7 +99,6 @@ const activeIndex = computed(() =>
|
|
|
108
99
|
border-radius: var(--n-radius-full);
|
|
109
100
|
line-height: 1.2;
|
|
110
101
|
}
|
|
111
|
-
|
|
112
102
|
.n-tabs-indicator {
|
|
113
103
|
position: absolute;
|
|
114
104
|
bottom: -1px;
|
|
@@ -116,6 +106,6 @@ const activeIndex = computed(() =>
|
|
|
116
106
|
background: var(--n-color-primary);
|
|
117
107
|
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
118
108
|
border-radius: var(--n-radius-full);
|
|
119
|
-
box-shadow: 0 1px 6px rgba(99, 102, 241, 0.35);
|
|
120
109
|
}
|
|
110
|
+
|
|
121
111
|
</style>
|
package/dist/components/NTag.js
CHANGED
|
@@ -49,50 +49,41 @@ const __style = `.n-tag[data-v-15b3bf49]{
|
|
|
49
49
|
border: 1px solid transparent;
|
|
50
50
|
letter-spacing: 0.02em;
|
|
51
51
|
}
|
|
52
|
-
|
|
53
52
|
.n-tag.is-rounded[data-v-15b3bf49]{
|
|
54
53
|
border-radius: var(--n-radius-full);
|
|
55
54
|
}
|
|
56
|
-
|
|
57
55
|
.n-tag-sm[data-v-15b3bf49]{ padding: 0.15rem 0.5rem; font-size: 0.65rem; }
|
|
58
56
|
.n-tag-lg[data-v-15b3bf49]{ padding: 0.4rem 0.9rem; font-size: var(--n-text-sm); }
|
|
59
|
-
|
|
60
57
|
.n-tag-primary[data-v-15b3bf49]{
|
|
61
58
|
background: var(--n-color-primary-light);
|
|
62
59
|
border-color: var(--n-color-primary-border);
|
|
63
60
|
color: var(--n-color-primary);
|
|
64
61
|
}
|
|
65
|
-
|
|
66
62
|
.n-tag-success[data-v-15b3bf49]{
|
|
67
63
|
background: var(--n-color-success-light);
|
|
68
64
|
border-color: var(--n-color-success-border);
|
|
69
65
|
color: var(--n-color-success);
|
|
70
66
|
}
|
|
71
|
-
|
|
72
67
|
.n-tag-danger[data-v-15b3bf49]{
|
|
73
68
|
background: var(--n-color-danger-light);
|
|
74
69
|
border-color: var(--n-color-danger-border);
|
|
75
70
|
color: var(--n-color-danger);
|
|
76
71
|
}
|
|
77
|
-
|
|
78
72
|
.n-tag-warning[data-v-15b3bf49]{
|
|
79
73
|
background: var(--n-color-warning-light);
|
|
80
74
|
border-color: var(--n-color-warning-border);
|
|
81
75
|
color: var(--n-color-warning);
|
|
82
76
|
}
|
|
83
|
-
|
|
84
77
|
.n-tag-info[data-v-15b3bf49]{
|
|
85
78
|
background: var(--n-color-info-light);
|
|
86
79
|
border-color: var(--n-color-info-border);
|
|
87
80
|
color: var(--n-color-info);
|
|
88
81
|
}
|
|
89
|
-
|
|
90
82
|
.n-tag-secondary[data-v-15b3bf49]{
|
|
91
83
|
background: var(--n-color-surface-alt);
|
|
92
84
|
border-color: var(--n-color-border);
|
|
93
85
|
color: var(--n-color-text-secondary);
|
|
94
86
|
}
|
|
95
|
-
|
|
96
87
|
.n-tag-close[data-v-15b3bf49]{
|
|
97
88
|
background: transparent;
|
|
98
89
|
border: none;
|
|
@@ -103,7 +94,7 @@ const __style = `.n-tag[data-v-15b3bf49]{
|
|
|
103
94
|
margin-left: var(--n-space-1);
|
|
104
95
|
color: inherit;
|
|
105
96
|
opacity: 0.5;
|
|
106
|
-
transition:
|
|
97
|
+
transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
|
|
107
98
|
border-radius: var(--n-radius-sm);
|
|
108
99
|
display: flex;
|
|
109
100
|
align-items: center;
|
|
@@ -111,7 +102,6 @@ const __style = `.n-tag[data-v-15b3bf49]{
|
|
|
111
102
|
width: 18px;
|
|
112
103
|
height: 18px;
|
|
113
104
|
}
|
|
114
|
-
|
|
115
105
|
.n-tag-close[data-v-15b3bf49]:hover{
|
|
116
106
|
opacity: 1;
|
|
117
107
|
background: rgba(0,0,0,0.08);
|
|
@@ -31,50 +31,41 @@ const emit = defineEmits(['close'])
|
|
|
31
31
|
border: 1px solid transparent;
|
|
32
32
|
letter-spacing: 0.02em;
|
|
33
33
|
}
|
|
34
|
-
|
|
35
34
|
.n-tag.is-rounded {
|
|
36
35
|
border-radius: var(--n-radius-full);
|
|
37
36
|
}
|
|
38
|
-
|
|
39
37
|
.n-tag-sm { padding: 0.15rem 0.5rem; font-size: 0.65rem; }
|
|
40
38
|
.n-tag-lg { padding: 0.4rem 0.9rem; font-size: var(--n-text-sm); }
|
|
41
|
-
|
|
42
39
|
.n-tag-primary {
|
|
43
40
|
background: var(--n-color-primary-light);
|
|
44
41
|
border-color: var(--n-color-primary-border);
|
|
45
42
|
color: var(--n-color-primary);
|
|
46
43
|
}
|
|
47
|
-
|
|
48
44
|
.n-tag-success {
|
|
49
45
|
background: var(--n-color-success-light);
|
|
50
46
|
border-color: var(--n-color-success-border);
|
|
51
47
|
color: var(--n-color-success);
|
|
52
48
|
}
|
|
53
|
-
|
|
54
49
|
.n-tag-danger {
|
|
55
50
|
background: var(--n-color-danger-light);
|
|
56
51
|
border-color: var(--n-color-danger-border);
|
|
57
52
|
color: var(--n-color-danger);
|
|
58
53
|
}
|
|
59
|
-
|
|
60
54
|
.n-tag-warning {
|
|
61
55
|
background: var(--n-color-warning-light);
|
|
62
56
|
border-color: var(--n-color-warning-border);
|
|
63
57
|
color: var(--n-color-warning);
|
|
64
58
|
}
|
|
65
|
-
|
|
66
59
|
.n-tag-info {
|
|
67
60
|
background: var(--n-color-info-light);
|
|
68
61
|
border-color: var(--n-color-info-border);
|
|
69
62
|
color: var(--n-color-info);
|
|
70
63
|
}
|
|
71
|
-
|
|
72
64
|
.n-tag-secondary {
|
|
73
65
|
background: var(--n-color-surface-alt);
|
|
74
66
|
border-color: var(--n-color-border);
|
|
75
67
|
color: var(--n-color-text-secondary);
|
|
76
68
|
}
|
|
77
|
-
|
|
78
69
|
.n-tag-close {
|
|
79
70
|
background: transparent;
|
|
80
71
|
border: none;
|
|
@@ -85,7 +76,7 @@ const emit = defineEmits(['close'])
|
|
|
85
76
|
margin-left: var(--n-space-1);
|
|
86
77
|
color: inherit;
|
|
87
78
|
opacity: 0.5;
|
|
88
|
-
transition:
|
|
79
|
+
transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
|
|
89
80
|
border-radius: var(--n-radius-sm);
|
|
90
81
|
display: flex;
|
|
91
82
|
align-items: center;
|
|
@@ -93,10 +84,10 @@ const emit = defineEmits(['close'])
|
|
|
93
84
|
width: 18px;
|
|
94
85
|
height: 18px;
|
|
95
86
|
}
|
|
96
|
-
|
|
97
87
|
.n-tag-close:hover {
|
|
98
88
|
opacity: 1;
|
|
99
89
|
background: rgba(0,0,0,0.08);
|
|
100
90
|
transform: scale(1.15);
|
|
101
91
|
}
|
|
92
|
+
|
|
102
93
|
</style>
|
|
@@ -80,40 +80,34 @@ const __style = `.n-toast-container[data-v-4587cf3e]{
|
|
|
80
80
|
pointer-events: none;
|
|
81
81
|
padding: var(--n-space-4);
|
|
82
82
|
}
|
|
83
|
-
|
|
84
83
|
.is-top-right[data-v-4587cf3e]{
|
|
85
84
|
top: 0;
|
|
86
85
|
right: 0;
|
|
87
86
|
align-items: flex-end;
|
|
88
87
|
}
|
|
89
|
-
|
|
90
88
|
.is-top-left[data-v-4587cf3e]{
|
|
91
89
|
top: 0;
|
|
92
90
|
left: 0;
|
|
93
91
|
align-items: flex-start;
|
|
94
92
|
}
|
|
95
|
-
|
|
96
93
|
.is-bottom-right[data-v-4587cf3e]{
|
|
97
94
|
bottom: 0;
|
|
98
95
|
right: 0;
|
|
99
96
|
align-items: flex-end;
|
|
100
97
|
flex-direction: column-reverse;
|
|
101
98
|
}
|
|
102
|
-
|
|
103
99
|
.is-bottom-left[data-v-4587cf3e]{
|
|
104
100
|
bottom: 0;
|
|
105
101
|
left: 0;
|
|
106
102
|
align-items: flex-start;
|
|
107
103
|
flex-direction: column-reverse;
|
|
108
104
|
}
|
|
109
|
-
|
|
110
105
|
.is-top-center[data-v-4587cf3e]{
|
|
111
106
|
top: 0;
|
|
112
107
|
left: 50%;
|
|
113
108
|
transform: translateX(-50%);
|
|
114
109
|
align-items: center;
|
|
115
110
|
}
|
|
116
|
-
|
|
117
111
|
.n-toast[data-v-4587cf3e]{
|
|
118
112
|
pointer-events: auto;
|
|
119
113
|
min-width: 300px;
|
|
@@ -125,21 +119,18 @@ const __style = `.n-toast-container[data-v-4587cf3e]{
|
|
|
125
119
|
box-shadow: var(--n-shadow-lg), 0 8px 32px rgba(0, 0, 0, 0.08);
|
|
126
120
|
cursor: pointer;
|
|
127
121
|
animation: n-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
128
|
-
transition:
|
|
122
|
+
transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
|
|
129
123
|
backdrop-filter: blur(16px);
|
|
130
124
|
border-left: 3px solid var(--n-color-border);
|
|
131
125
|
}
|
|
132
|
-
|
|
133
126
|
.is-success[data-v-4587cf3e]{ border-left-color: var(--n-color-success); }
|
|
134
127
|
.is-error[data-v-4587cf3e]{ border-left-color: var(--n-color-danger); }
|
|
135
128
|
.is-info[data-v-4587cf3e]{ border-left-color: var(--n-color-primary); }
|
|
136
129
|
.is-warning[data-v-4587cf3e]{ border-left-color: var(--n-color-warning); }
|
|
137
|
-
|
|
138
130
|
.n-toast[data-v-4587cf3e]:hover{
|
|
139
131
|
transform: scale(1.02);
|
|
140
132
|
background: var(--n-color-surface-alt);
|
|
141
133
|
}
|
|
142
|
-
|
|
143
134
|
@keyframes n-toast-in {
|
|
144
135
|
from[data-v-4587cf3e]{
|
|
145
136
|
opacity: 0;
|
|
@@ -150,11 +141,9 @@ to[data-v-4587cf3e]{
|
|
|
150
141
|
transform: translateX(0) scale(1);
|
|
151
142
|
}
|
|
152
143
|
}
|
|
153
|
-
|
|
154
144
|
.is-top-left .n-toast[data-v-4587cf3e]{
|
|
155
145
|
animation-name: n-toast-in-left;
|
|
156
146
|
}
|
|
157
|
-
|
|
158
147
|
@keyframes n-toast-in-left {
|
|
159
148
|
from[data-v-4587cf3e]{
|
|
160
149
|
opacity: 0;
|
|
@@ -165,30 +154,26 @@ to[data-v-4587cf3e]{
|
|
|
165
154
|
transform: translateX(0) scale(1);
|
|
166
155
|
}
|
|
167
156
|
}
|
|
168
|
-
|
|
169
157
|
.is-bottom-right .n-toast[data-v-4587cf3e],
|
|
170
158
|
.is-bottom-left .n-toast[data-v-4587cf3e]{
|
|
171
159
|
animation-name: n-toast-in-up;
|
|
172
160
|
}
|
|
173
|
-
|
|
174
161
|
@keyframes n-toast-in-up {
|
|
175
162
|
from[data-v-4587cf3e]{
|
|
176
163
|
opacity: 0;
|
|
177
|
-
|
|
164
|
+
scale(0.95);
|
|
178
165
|
}
|
|
179
166
|
to[data-v-4587cf3e]{
|
|
180
167
|
opacity: 1;
|
|
181
|
-
|
|
168
|
+
scale(1);
|
|
182
169
|
}
|
|
183
170
|
}
|
|
184
|
-
|
|
185
171
|
.n-toast-body{
|
|
186
172
|
display: flex;
|
|
187
173
|
align-items: center;
|
|
188
174
|
gap: var(--n-space-3);
|
|
189
175
|
padding: var(--n-space-4) var(--n-space-5);
|
|
190
176
|
}
|
|
191
|
-
|
|
192
177
|
.n-toast-icon[data-v-4587cf3e]{
|
|
193
178
|
width: 28px;
|
|
194
179
|
height: 28px;
|
|
@@ -200,12 +185,10 @@ to[data-v-4587cf3e]{
|
|
|
200
185
|
font-weight: var(--n-weight-extrabold);
|
|
201
186
|
flex-shrink: 0;
|
|
202
187
|
}
|
|
203
|
-
|
|
204
188
|
.is-success .n-toast-icon[data-v-4587cf3e]{ background: var(--n-color-success); color: white; }
|
|
205
189
|
.is-error .n-toast-icon[data-v-4587cf3e]{ background: var(--n-color-danger); color: white; }
|
|
206
190
|
.is-info .n-toast-icon[data-v-4587cf3e]{ background: var(--n-color-primary); color: white; }
|
|
207
191
|
.is-warning .n-toast-icon[data-v-4587cf3e]{ background: var(--n-color-warning); color: white; }
|
|
208
|
-
|
|
209
192
|
.n-toast-message[data-v-4587cf3e]{
|
|
210
193
|
color: var(--n-color-text);
|
|
211
194
|
font-size: var(--n-text-sm);
|
|
@@ -213,7 +196,6 @@ to[data-v-4587cf3e]{
|
|
|
213
196
|
flex: 1;
|
|
214
197
|
line-height: var(--n-leading-normal);
|
|
215
198
|
}
|
|
216
|
-
|
|
217
199
|
.n-toast-dismiss[data-v-4587cf3e]{
|
|
218
200
|
background: transparent;
|
|
219
201
|
border: none;
|
|
@@ -226,22 +208,18 @@ to[data-v-4587cf3e]{
|
|
|
226
208
|
transition: opacity var(--n-transition-fast);
|
|
227
209
|
flex-shrink: 0;
|
|
228
210
|
}
|
|
229
|
-
|
|
230
211
|
.n-toast[data-v-4587cf3e]:hover .n-toast-dismiss{
|
|
231
212
|
opacity: 1;
|
|
232
213
|
}
|
|
233
|
-
|
|
234
214
|
.n-toast-dismiss[data-v-4587cf3e]:hover{
|
|
235
215
|
color: var(--n-color-text);
|
|
236
216
|
}
|
|
237
|
-
|
|
238
217
|
.n-toast-progress[data-v-4587cf3e]{
|
|
239
218
|
height: 3px;
|
|
240
219
|
background: var(--n-color-border);
|
|
241
220
|
position: relative;
|
|
242
221
|
overflow: hidden;
|
|
243
222
|
}
|
|
244
|
-
|
|
245
223
|
.n-toast-progress[data-v-4587cf3e]::after{
|
|
246
224
|
content: '';
|
|
247
225
|
position: absolute;
|
|
@@ -252,12 +230,10 @@ to[data-v-4587cf3e]{
|
|
|
252
230
|
background: currentColor;
|
|
253
231
|
animation: n-toast-shrink linear forwards;
|
|
254
232
|
}
|
|
255
|
-
|
|
256
233
|
.is-success .n-toast-progress[data-v-4587cf3e]::after{ background: var(--n-color-success); }
|
|
257
234
|
.is-error .n-toast-progress[data-v-4587cf3e]::after{ background: var(--n-color-danger); }
|
|
258
235
|
.is-info .n-toast-progress[data-v-4587cf3e]::after{ background: var(--n-color-primary); }
|
|
259
236
|
.is-warning .n-toast-progress[data-v-4587cf3e]::after{ background: var(--n-color-warning); }
|
|
260
|
-
|
|
261
237
|
@keyframes n-toast-shrink {
|
|
262
238
|
from[data-v-4587cf3e]{ transform: scaleX(1); }
|
|
263
239
|
to[data-v-4587cf3e]{ transform: scaleX(0); }
|
|
@@ -46,40 +46,34 @@ const positionClass = `is-${props.position.replace('-', '-')}`
|
|
|
46
46
|
pointer-events: none;
|
|
47
47
|
padding: var(--n-space-4);
|
|
48
48
|
}
|
|
49
|
-
|
|
50
49
|
.is-top-right {
|
|
51
50
|
top: 0;
|
|
52
51
|
right: 0;
|
|
53
52
|
align-items: flex-end;
|
|
54
53
|
}
|
|
55
|
-
|
|
56
54
|
.is-top-left {
|
|
57
55
|
top: 0;
|
|
58
56
|
left: 0;
|
|
59
57
|
align-items: flex-start;
|
|
60
58
|
}
|
|
61
|
-
|
|
62
59
|
.is-bottom-right {
|
|
63
60
|
bottom: 0;
|
|
64
61
|
right: 0;
|
|
65
62
|
align-items: flex-end;
|
|
66
63
|
flex-direction: column-reverse;
|
|
67
64
|
}
|
|
68
|
-
|
|
69
65
|
.is-bottom-left {
|
|
70
66
|
bottom: 0;
|
|
71
67
|
left: 0;
|
|
72
68
|
align-items: flex-start;
|
|
73
69
|
flex-direction: column-reverse;
|
|
74
70
|
}
|
|
75
|
-
|
|
76
71
|
.is-top-center {
|
|
77
72
|
top: 0;
|
|
78
73
|
left: 50%;
|
|
79
74
|
transform: translateX(-50%);
|
|
80
75
|
align-items: center;
|
|
81
76
|
}
|
|
82
|
-
|
|
83
77
|
.n-toast {
|
|
84
78
|
pointer-events: auto;
|
|
85
79
|
min-width: 300px;
|
|
@@ -91,21 +85,18 @@ const positionClass = `is-${props.position.replace('-', '-')}`
|
|
|
91
85
|
box-shadow: var(--n-shadow-lg), 0 8px 32px rgba(0, 0, 0, 0.08);
|
|
92
86
|
cursor: pointer;
|
|
93
87
|
animation: n-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
94
|
-
transition:
|
|
88
|
+
transition: color var(--n-transition-fast); cubic-bezier(0.16, 1, 0.3, 1);
|
|
95
89
|
backdrop-filter: blur(16px);
|
|
96
90
|
border-left: 3px solid var(--n-color-border);
|
|
97
91
|
}
|
|
98
|
-
|
|
99
92
|
.is-success { border-left-color: var(--n-color-success); }
|
|
100
93
|
.is-error { border-left-color: var(--n-color-danger); }
|
|
101
94
|
.is-info { border-left-color: var(--n-color-primary); }
|
|
102
95
|
.is-warning { border-left-color: var(--n-color-warning); }
|
|
103
|
-
|
|
104
96
|
.n-toast:hover {
|
|
105
97
|
transform: scale(1.02);
|
|
106
98
|
background: var(--n-color-surface-alt);
|
|
107
99
|
}
|
|
108
|
-
|
|
109
100
|
@keyframes n-toast-in {
|
|
110
101
|
from {
|
|
111
102
|
opacity: 0;
|
|
@@ -116,11 +107,9 @@ const positionClass = `is-${props.position.replace('-', '-')}`
|
|
|
116
107
|
transform: translateX(0) scale(1);
|
|
117
108
|
}
|
|
118
109
|
}
|
|
119
|
-
|
|
120
110
|
.is-top-left .n-toast {
|
|
121
111
|
animation-name: n-toast-in-left;
|
|
122
112
|
}
|
|
123
|
-
|
|
124
113
|
@keyframes n-toast-in-left {
|
|
125
114
|
from {
|
|
126
115
|
opacity: 0;
|
|
@@ -131,30 +120,26 @@ const positionClass = `is-${props.position.replace('-', '-')}`
|
|
|
131
120
|
transform: translateX(0) scale(1);
|
|
132
121
|
}
|
|
133
122
|
}
|
|
134
|
-
|
|
135
123
|
.is-bottom-right .n-toast,
|
|
136
124
|
.is-bottom-left .n-toast {
|
|
137
125
|
animation-name: n-toast-in-up;
|
|
138
126
|
}
|
|
139
|
-
|
|
140
127
|
@keyframes n-toast-in-up {
|
|
141
128
|
from {
|
|
142
129
|
opacity: 0;
|
|
143
|
-
|
|
130
|
+
scale(0.95);
|
|
144
131
|
}
|
|
145
132
|
to {
|
|
146
133
|
opacity: 1;
|
|
147
|
-
|
|
134
|
+
scale(1);
|
|
148
135
|
}
|
|
149
136
|
}
|
|
150
|
-
|
|
151
137
|
.n-toast-body {
|
|
152
138
|
display: flex;
|
|
153
139
|
align-items: center;
|
|
154
140
|
gap: var(--n-space-3);
|
|
155
141
|
padding: var(--n-space-4) var(--n-space-5);
|
|
156
142
|
}
|
|
157
|
-
|
|
158
143
|
.n-toast-icon {
|
|
159
144
|
width: 28px;
|
|
160
145
|
height: 28px;
|
|
@@ -166,12 +151,10 @@ const positionClass = `is-${props.position.replace('-', '-')}`
|
|
|
166
151
|
font-weight: var(--n-weight-extrabold);
|
|
167
152
|
flex-shrink: 0;
|
|
168
153
|
}
|
|
169
|
-
|
|
170
154
|
.is-success .n-toast-icon { background: var(--n-color-success); color: white; }
|
|
171
155
|
.is-error .n-toast-icon { background: var(--n-color-danger); color: white; }
|
|
172
156
|
.is-info .n-toast-icon { background: var(--n-color-primary); color: white; }
|
|
173
157
|
.is-warning .n-toast-icon { background: var(--n-color-warning); color: white; }
|
|
174
|
-
|
|
175
158
|
.n-toast-message {
|
|
176
159
|
color: var(--n-color-text);
|
|
177
160
|
font-size: var(--n-text-sm);
|
|
@@ -179,7 +162,6 @@ const positionClass = `is-${props.position.replace('-', '-')}`
|
|
|
179
162
|
flex: 1;
|
|
180
163
|
line-height: var(--n-leading-normal);
|
|
181
164
|
}
|
|
182
|
-
|
|
183
165
|
.n-toast-dismiss {
|
|
184
166
|
background: transparent;
|
|
185
167
|
border: none;
|
|
@@ -192,22 +174,18 @@ const positionClass = `is-${props.position.replace('-', '-')}`
|
|
|
192
174
|
transition: opacity var(--n-transition-fast);
|
|
193
175
|
flex-shrink: 0;
|
|
194
176
|
}
|
|
195
|
-
|
|
196
177
|
.n-toast:hover .n-toast-dismiss {
|
|
197
178
|
opacity: 1;
|
|
198
179
|
}
|
|
199
|
-
|
|
200
180
|
.n-toast-dismiss:hover {
|
|
201
181
|
color: var(--n-color-text);
|
|
202
182
|
}
|
|
203
|
-
|
|
204
183
|
.n-toast-progress {
|
|
205
184
|
height: 3px;
|
|
206
185
|
background: var(--n-color-border);
|
|
207
186
|
position: relative;
|
|
208
187
|
overflow: hidden;
|
|
209
188
|
}
|
|
210
|
-
|
|
211
189
|
.n-toast-progress::after {
|
|
212
190
|
content: '';
|
|
213
191
|
position: absolute;
|
|
@@ -218,14 +196,13 @@ const positionClass = `is-${props.position.replace('-', '-')}`
|
|
|
218
196
|
background: currentColor;
|
|
219
197
|
animation: n-toast-shrink linear forwards;
|
|
220
198
|
}
|
|
221
|
-
|
|
222
199
|
.is-success .n-toast-progress::after { background: var(--n-color-success); }
|
|
223
200
|
.is-error .n-toast-progress::after { background: var(--n-color-danger); }
|
|
224
201
|
.is-info .n-toast-progress::after { background: var(--n-color-primary); }
|
|
225
202
|
.is-warning .n-toast-progress::after { background: var(--n-color-warning); }
|
|
226
|
-
|
|
227
203
|
@keyframes n-toast-shrink {
|
|
228
204
|
from { transform: scaleX(1); }
|
|
229
205
|
to { transform: scaleX(0); }
|
|
230
206
|
}
|
|
207
|
+
|
|
231
208
|
</style>
|
|
@@ -90,7 +90,6 @@ export default _sfc_main
|
|
|
90
90
|
const __style = `.n-tooltip-wrapper[data-v-522b965d]{
|
|
91
91
|
display: inline-block;
|
|
92
92
|
}
|
|
93
|
-
|
|
94
93
|
.n-tooltip[data-v-522b965d]{
|
|
95
94
|
background: var(--n-color-glass);
|
|
96
95
|
color: var(--n-color-text);
|
|
@@ -106,59 +105,47 @@ const __style = `.n-tooltip-wrapper[data-v-522b965d]{
|
|
|
106
105
|
animation: n-tooltip-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
107
106
|
backdrop-filter: blur(12px);
|
|
108
107
|
}
|
|
109
|
-
|
|
110
108
|
@keyframes n-tooltip-in {
|
|
111
109
|
from[data-v-522b965d]{ opacity: 0; transform: scale(0.95); }
|
|
112
110
|
to[data-v-522b965d]{ opacity: 1; transform: scale(1); }
|
|
113
111
|
}
|
|
114
|
-
|
|
115
112
|
.is-top[data-v-522b965d]{
|
|
116
113
|
transform-origin: bottom center;
|
|
117
114
|
}
|
|
118
|
-
|
|
119
115
|
.is-bottom[data-v-522b965d]{
|
|
120
116
|
transform-origin: top center;
|
|
121
117
|
}
|
|
122
|
-
|
|
123
118
|
.is-left[data-v-522b965d]{
|
|
124
119
|
transform-origin: center right;
|
|
125
120
|
}
|
|
126
|
-
|
|
127
121
|
.is-right[data-v-522b965d]{
|
|
128
122
|
transform-origin: center left;
|
|
129
123
|
}
|
|
130
|
-
|
|
131
124
|
.n-tooltip[data-v-522b965d]::after{
|
|
132
125
|
content: '';
|
|
133
126
|
position: absolute;
|
|
134
127
|
border: 5px solid transparent;
|
|
135
128
|
}
|
|
136
|
-
|
|
137
129
|
.is-top[data-v-522b965d]::after{
|
|
138
130
|
top: 100%;
|
|
139
131
|
left: 50%;
|
|
140
132
|
transform: translateX(-50%);
|
|
141
133
|
border-top-color: var(--n-color-border);
|
|
142
134
|
}
|
|
143
|
-
|
|
144
135
|
.is-bottom[data-v-522b965d]::after{
|
|
145
136
|
bottom: 100%;
|
|
146
137
|
left: 50%;
|
|
147
138
|
transform: translateX(-50%);
|
|
148
139
|
border-bottom-color: var(--n-color-border);
|
|
149
140
|
}
|
|
150
|
-
|
|
151
141
|
.is-left[data-v-522b965d]::after{
|
|
152
142
|
left: 100%;
|
|
153
143
|
top: 50%;
|
|
154
|
-
transform: translateY(-50%);
|
|
155
144
|
border-left-color: var(--n-color-border);
|
|
156
145
|
}
|
|
157
|
-
|
|
158
146
|
.is-right[data-v-522b965d]::after{
|
|
159
147
|
right: 100%;
|
|
160
148
|
top: 50%;
|
|
161
|
-
transform: translateY(-50%);
|
|
162
149
|
border-right-color: var(--n-color-border);
|
|
163
150
|
}`
|
|
164
151
|
injectStyle('data-v-522b965d', __style)
|
|
@@ -93,7 +93,6 @@ const hide = () => {
|
|
|
93
93
|
.n-tooltip-wrapper {
|
|
94
94
|
display: inline-block;
|
|
95
95
|
}
|
|
96
|
-
|
|
97
96
|
.n-tooltip {
|
|
98
97
|
background: var(--n-color-glass);
|
|
99
98
|
color: var(--n-color-text);
|
|
@@ -109,59 +108,48 @@ const hide = () => {
|
|
|
109
108
|
animation: n-tooltip-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
110
109
|
backdrop-filter: blur(12px);
|
|
111
110
|
}
|
|
112
|
-
|
|
113
111
|
@keyframes n-tooltip-in {
|
|
114
112
|
from { opacity: 0; transform: scale(0.95); }
|
|
115
113
|
to { opacity: 1; transform: scale(1); }
|
|
116
114
|
}
|
|
117
|
-
|
|
118
115
|
.is-top {
|
|
119
116
|
transform-origin: bottom center;
|
|
120
117
|
}
|
|
121
|
-
|
|
122
118
|
.is-bottom {
|
|
123
119
|
transform-origin: top center;
|
|
124
120
|
}
|
|
125
|
-
|
|
126
121
|
.is-left {
|
|
127
122
|
transform-origin: center right;
|
|
128
123
|
}
|
|
129
|
-
|
|
130
124
|
.is-right {
|
|
131
125
|
transform-origin: center left;
|
|
132
126
|
}
|
|
133
|
-
|
|
134
127
|
.n-tooltip::after {
|
|
135
128
|
content: '';
|
|
136
129
|
position: absolute;
|
|
137
130
|
border: 5px solid transparent;
|
|
138
131
|
}
|
|
139
|
-
|
|
140
132
|
.is-top::after {
|
|
141
133
|
top: 100%;
|
|
142
134
|
left: 50%;
|
|
143
135
|
transform: translateX(-50%);
|
|
144
136
|
border-top-color: var(--n-color-border);
|
|
145
137
|
}
|
|
146
|
-
|
|
147
138
|
.is-bottom::after {
|
|
148
139
|
bottom: 100%;
|
|
149
140
|
left: 50%;
|
|
150
141
|
transform: translateX(-50%);
|
|
151
142
|
border-bottom-color: var(--n-color-border);
|
|
152
143
|
}
|
|
153
|
-
|
|
154
144
|
.is-left::after {
|
|
155
145
|
left: 100%;
|
|
156
146
|
top: 50%;
|
|
157
|
-
transform: translateY(-50%);
|
|
158
147
|
border-left-color: var(--n-color-border);
|
|
159
148
|
}
|
|
160
|
-
|
|
161
149
|
.is-right::after {
|
|
162
150
|
right: 100%;
|
|
163
151
|
top: 50%;
|
|
164
|
-
transform: translateY(-50%);
|
|
165
152
|
border-right-color: var(--n-color-border);
|
|
166
153
|
}
|
|
154
|
+
|
|
167
155
|
</style>
|