@code-coaching/vuetiful 0.6.0 → 0.7.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/dist/style.css +1 -1
- package/dist/styles/all.css +501 -17
- package/dist/types/components/atoms/VChip.vue.d.ts +2 -0
- package/dist/types/components/atoms/index.d.ts +2 -1
- package/dist/types/components/index.d.ts +2 -2
- package/dist/vuetiful.es.mjs +21 -6
- package/dist/vuetiful.umd.js +10 -10
- package/package.json +1 -1
- package/src/components/atoms/VChip.vue +10 -0
- package/src/components/atoms/index.ts +2 -1
- package/src/components/index.ts +2 -2
- package/src/tailwind/generated/intellisense-classes.cjs +6 -6
package/dist/styles/all.css
CHANGED
|
@@ -18,7 +18,7 @@ Tailwind directives should only be included ONCE per project.
|
|
|
18
18
|
These directives should preceed ALL Skeleton stylesheets.
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
|
-
/* ! tailwindcss v3.
|
|
21
|
+
/* ! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com */
|
|
22
22
|
|
|
23
23
|
/*
|
|
24
24
|
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
@@ -49,7 +49,6 @@ These directives should preceed ALL Skeleton stylesheets.
|
|
|
49
49
|
3. Use a more readable tab size.
|
|
50
50
|
4. Use the user's configured `sans` font-family by default.
|
|
51
51
|
5. Use the user's configured `sans` font-feature-settings by default.
|
|
52
|
-
6. Use the user's configured `sans` font-variation-settings by default.
|
|
53
52
|
*/
|
|
54
53
|
|
|
55
54
|
html {
|
|
@@ -66,8 +65,6 @@ html {
|
|
|
66
65
|
/* 4 */
|
|
67
66
|
font-feature-settings: normal;
|
|
68
67
|
/* 5 */
|
|
69
|
-
font-variation-settings: normal;
|
|
70
|
-
/* 6 */
|
|
71
68
|
}
|
|
72
69
|
|
|
73
70
|
/*
|
|
@@ -649,9 +646,9 @@ a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not
|
|
|
649
646
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
650
647
|
}
|
|
651
648
|
|
|
652
|
-
|
|
649
|
+
.dark a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(
|
|
653
650
|
.logo-item
|
|
654
|
-
):not(a.card):not(.list-nav a)
|
|
651
|
+
):not(a.card):not(.list-nav a) {
|
|
655
652
|
--tw-text-opacity: 1;
|
|
656
653
|
color: rgb(var(--color-primary-500) / var(--tw-text-opacity));
|
|
657
654
|
}
|
|
@@ -747,7 +744,7 @@ code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
|
|
|
747
744
|
line-height:1rem;
|
|
748
745
|
}
|
|
749
746
|
|
|
750
|
-
|
|
747
|
+
.dark code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
|
|
751
748
|
--tw-text-opacity: 1;
|
|
752
749
|
color: rgb(var(--color-primary-400) / var(--tw-text-opacity));
|
|
753
750
|
}
|
|
@@ -756,7 +753,7 @@ code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
|
|
|
756
753
|
background-color: rgb(var(--color-primary-500) / 0.3);
|
|
757
754
|
}
|
|
758
755
|
|
|
759
|
-
|
|
756
|
+
.dark code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
|
|
760
757
|
background-color: rgb(var(--color-primary-500) / 0.2);
|
|
761
758
|
}
|
|
762
759
|
|
|
@@ -823,7 +820,7 @@ time:not(.unstyled):is(:not(.prose *)) {
|
|
|
823
820
|
line-height:1.25rem;
|
|
824
821
|
}
|
|
825
822
|
|
|
826
|
-
|
|
823
|
+
.dark time:not(.unstyled):is(:not(.prose *)) {
|
|
827
824
|
--tw-text-opacity: 1;
|
|
828
825
|
color: rgb(var(--color-surface-400) / var(--tw-text-opacity));
|
|
829
826
|
}
|
|
@@ -864,7 +861,7 @@ fieldset,
|
|
|
864
861
|
|
|
865
862
|
/* Date Calendar Picker (Webkit) */
|
|
866
863
|
|
|
867
|
-
|
|
864
|
+
.dark ::-webkit-calendar-picker-indicator {
|
|
868
865
|
--tw-invert: invert(100%);
|
|
869
866
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
870
867
|
}
|
|
@@ -924,7 +921,7 @@ progress::-webkit-progress-value {
|
|
|
924
921
|
width:100%;
|
|
925
922
|
}
|
|
926
923
|
|
|
927
|
-
|
|
924
|
+
.dark [type="range"] {
|
|
928
925
|
accent-color: rgb(var(--color-surface-50) / 1);
|
|
929
926
|
}
|
|
930
927
|
|
|
@@ -1070,6 +1067,260 @@ progress::-webkit-progress-value {
|
|
|
1070
1067
|
--tw-backdrop-sepia: ;
|
|
1071
1068
|
}
|
|
1072
1069
|
|
|
1070
|
+
.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_ {
|
|
1071
|
+
--tw-text-opacity: 1;
|
|
1072
|
+
color: rgb(248 113 113 / var(--tw-text-opacity));
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
.hljs-meta .hljs-string,.hljs-regexp,.hljs-string {
|
|
1076
|
+
--tw-text-opacity: 1;
|
|
1077
|
+
color: rgb(96 165 250 / var(--tw-text-opacity));
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
.variant-soft,.variant-soft-surface {
|
|
1081
|
+
background-color: rgb(var(--color-surface-400) / 0.2);
|
|
1082
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
|
|
1083
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
|
|
1084
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
|
|
1085
|
+
color: rgb(var(--color-surface-700));
|
|
1086
|
+
}
|
|
1087
|
+
|
|
1088
|
+
.dark .variant-soft,.dark .variant-soft-surface {
|
|
1089
|
+
color:rgb(var(--color-surface-200));
|
|
1090
|
+
background-color: rgb(var(--color-surface-500) / 0.2);
|
|
1091
|
+
}
|
|
1092
|
+
|
|
1093
|
+
.badge {
|
|
1094
|
+
display: inline-flex;
|
|
1095
|
+
align-items: center;
|
|
1096
|
+
justify-content: center;
|
|
1097
|
+
}
|
|
1098
|
+
|
|
1099
|
+
.badge > :not([hidden]) ~ :not([hidden]) {
|
|
1100
|
+
--tw-space-x-reverse: 0;
|
|
1101
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1102
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
.badge {
|
|
1106
|
+
white-space: nowrap;
|
|
1107
|
+
align-items:center;
|
|
1108
|
+
justify-content:center;
|
|
1109
|
+
font-weight: 600;
|
|
1110
|
+
font-size:.75rem;
|
|
1111
|
+
line-height:1rem;
|
|
1112
|
+
padding-left: 0.5rem;
|
|
1113
|
+
padding-right: 0.5rem;
|
|
1114
|
+
padding-top: 0.25rem;
|
|
1115
|
+
padding-bottom: 0.25rem;
|
|
1116
|
+
border-radius:var(--theme-rounded-base);
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
.btn {
|
|
1120
|
+
display: inline-flex;
|
|
1121
|
+
align-items: center;
|
|
1122
|
+
justify-content: center;
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1125
|
+
.btn > :not([hidden]) ~ :not([hidden]) {
|
|
1126
|
+
--tw-space-x-reverse: 0;
|
|
1127
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1128
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
.btn {
|
|
1132
|
+
white-space: nowrap;
|
|
1133
|
+
padding-left: 1.25rem;
|
|
1134
|
+
padding-right: 1.25rem;
|
|
1135
|
+
padding-top: 9px;
|
|
1136
|
+
padding-bottom: 9px;
|
|
1137
|
+
font-size: 1rem;
|
|
1138
|
+
line-height: 1.5rem;
|
|
1139
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1140
|
+
transition-duration: 150ms;
|
|
1141
|
+
align-items:center;
|
|
1142
|
+
justify-content:center;
|
|
1143
|
+
text-align:center;
|
|
1144
|
+
transition-property:all;
|
|
1145
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1146
|
+
transition-duration:.15s;
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
.btn:hover {
|
|
1150
|
+
--tw-brightness: brightness(1.15);
|
|
1151
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1152
|
+
}
|
|
1153
|
+
|
|
1154
|
+
.btn {
|
|
1155
|
+
/* Size (match base) */
|
|
1156
|
+
padding-left: 1.25rem;
|
|
1157
|
+
padding-right: 1.25rem;
|
|
1158
|
+
padding-top: 9px;
|
|
1159
|
+
padding-bottom: 9px;
|
|
1160
|
+
font-size: 1rem;
|
|
1161
|
+
line-height: 1.5rem;
|
|
1162
|
+
/* Core */
|
|
1163
|
+
white-space: nowrap;
|
|
1164
|
+
text-align:center;
|
|
1165
|
+
/* Flex Columns */
|
|
1166
|
+
display: inline-flex;
|
|
1167
|
+
align-items: center;
|
|
1168
|
+
justify-content: center;
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
.btn > :not([hidden]) ~ :not([hidden]) {
|
|
1172
|
+
--tw-space-x-reverse: 0;
|
|
1173
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1174
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
.btn{
|
|
1178
|
+
align-items:center;
|
|
1179
|
+
justify-content:center
|
|
1180
|
+
/* States */
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
.btn:hover {
|
|
1184
|
+
--tw-brightness: brightness(1.15);
|
|
1185
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
.btn {
|
|
1189
|
+
/* Transitions */
|
|
1190
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1191
|
+
transition-duration: 150ms;
|
|
1192
|
+
transition-property:all;
|
|
1193
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1194
|
+
transition-duration:.15s;
|
|
1195
|
+
border-radius:var(--theme-rounded-base);
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
.btn:active {
|
|
1199
|
+
--tw-scale-x: 95%;
|
|
1200
|
+
--tw-scale-y: 95%;
|
|
1201
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1202
|
+
--tw-brightness: brightness(.9);
|
|
1203
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1204
|
+
}
|
|
1205
|
+
|
|
1206
|
+
.btn-sm {
|
|
1207
|
+
padding-left: 0.75rem;
|
|
1208
|
+
padding-right: 0.75rem;
|
|
1209
|
+
padding-top: 0.375rem;
|
|
1210
|
+
padding-bottom: 0.375rem;
|
|
1211
|
+
font-size:.875rem;
|
|
1212
|
+
line-height:1.25rem;
|
|
1213
|
+
}
|
|
1214
|
+
|
|
1215
|
+
.chip {
|
|
1216
|
+
white-space: nowrap;
|
|
1217
|
+
padding-left: 0.75rem;
|
|
1218
|
+
padding-right: 0.75rem;
|
|
1219
|
+
padding-top: 0.375rem;
|
|
1220
|
+
padding-bottom: 0.375rem;
|
|
1221
|
+
cursor:pointer;
|
|
1222
|
+
text-align:center;
|
|
1223
|
+
font-size:.75rem;
|
|
1224
|
+
line-height:1rem;
|
|
1225
|
+
border-radius:.25rem;
|
|
1226
|
+
display: inline-flex;
|
|
1227
|
+
align-items: center;
|
|
1228
|
+
justify-content: center;
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
.chip > :not([hidden]) ~ :not([hidden]) {
|
|
1232
|
+
--tw-space-x-reverse: 0;
|
|
1233
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1234
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1235
|
+
}
|
|
1236
|
+
|
|
1237
|
+
.chip{
|
|
1238
|
+
align-items:center;
|
|
1239
|
+
justify-content:center
|
|
1240
|
+
}
|
|
1241
|
+
|
|
1242
|
+
.chip:hover {
|
|
1243
|
+
--tw-brightness: brightness(1.15);
|
|
1244
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1245
|
+
}
|
|
1246
|
+
|
|
1247
|
+
.chip {
|
|
1248
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1249
|
+
transition-duration: 150ms;
|
|
1250
|
+
transition-property:all;
|
|
1251
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1252
|
+
transition-duration:.15s;
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
.chip-disabled,.chip:disabled {
|
|
1256
|
+
cursor: not-allowed !important;
|
|
1257
|
+
opacity: 0.5 !important;
|
|
1258
|
+
}
|
|
1259
|
+
|
|
1260
|
+
.chip-disabled:active,.chip:disabled:active {
|
|
1261
|
+
--tw-scale-x: 1;
|
|
1262
|
+
--tw-scale-y: 1;
|
|
1263
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1264
|
+
}
|
|
1265
|
+
|
|
1266
|
+
.label > :not([hidden]) ~ :not([hidden]) {
|
|
1267
|
+
--tw-space-y-reverse: 0;
|
|
1268
|
+
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
|
|
1269
|
+
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
.label>:not([hidden])~:not([hidden]){
|
|
1273
|
+
--tw-space-y-reverse: 0;
|
|
1274
|
+
margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
|
|
1275
|
+
margin-bottom:calc(.25rem * var(--tw-space-y-reverse))
|
|
1276
|
+
}
|
|
1277
|
+
|
|
1278
|
+
.list,.list-dl,.list-nav ul {
|
|
1279
|
+
list-style-type: none;
|
|
1280
|
+
}
|
|
1281
|
+
|
|
1282
|
+
.list > :not([hidden]) ~ :not([hidden]),.list-dl > :not([hidden]) ~ :not([hidden]),.list-nav ul > :not([hidden]) ~ :not([hidden]) {
|
|
1283
|
+
--tw-space-y-reverse: 0;
|
|
1284
|
+
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
|
|
1285
|
+
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
|
|
1286
|
+
}
|
|
1287
|
+
|
|
1288
|
+
.list>:not([hidden])~:not([hidden]),.list-dl>:not([hidden])~:not([hidden]),.list-nav ul>:not([hidden])~:not([hidden]){
|
|
1289
|
+
--tw-space-y-reverse: 0;
|
|
1290
|
+
margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
|
|
1291
|
+
margin-bottom:calc(.25rem * var(--tw-space-y-reverse))
|
|
1292
|
+
}
|
|
1293
|
+
|
|
1294
|
+
.list-nav a,.list-nav button,.list-option {
|
|
1295
|
+
display: flex;
|
|
1296
|
+
align-items: center;
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1299
|
+
.list-nav a > :not([hidden]) ~ :not([hidden]),.list-nav button > :not([hidden]) ~ :not([hidden]),.list-option > :not([hidden]) ~ :not([hidden]) {
|
|
1300
|
+
--tw-space-x-reverse: 0;
|
|
1301
|
+
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
|
1302
|
+
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1303
|
+
}
|
|
1304
|
+
|
|
1305
|
+
.list-nav a,.list-nav button,.list-option {
|
|
1306
|
+
white-space: nowrap;
|
|
1307
|
+
display:flex;
|
|
1308
|
+
align-items:center;
|
|
1309
|
+
padding-left: 1rem;
|
|
1310
|
+
padding-right: 1rem;
|
|
1311
|
+
padding-top: 0.5rem;
|
|
1312
|
+
padding-bottom: 0.5rem;
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1315
|
+
.list-nav a:hover,.list-nav button:hover,.list-option:hover {
|
|
1316
|
+
background-color: rgb(var(--color-primary-500) / 0.1);
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
.list-nav a,.list-nav button,.list-option {
|
|
1320
|
+
cursor:pointer;
|
|
1321
|
+
border-radius:var(--theme-rounded-base);
|
|
1322
|
+
}
|
|
1323
|
+
|
|
1073
1324
|
.badge {
|
|
1074
1325
|
/* Core */
|
|
1075
1326
|
display: inline-flex;
|
|
@@ -1128,6 +1379,41 @@ button:disabled:active {
|
|
|
1128
1379
|
|
|
1129
1380
|
/* Standard button/anchor tag elements. */
|
|
1130
1381
|
|
|
1382
|
+
.btn {
|
|
1383
|
+
display: inline-flex;
|
|
1384
|
+
align-items: center;
|
|
1385
|
+
justify-content: center;
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
.btn > :not([hidden]) ~ :not([hidden]) {
|
|
1389
|
+
--tw-space-x-reverse: 0;
|
|
1390
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1391
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1392
|
+
}
|
|
1393
|
+
|
|
1394
|
+
.btn {
|
|
1395
|
+
white-space: nowrap;
|
|
1396
|
+
padding-left: 1.25rem;
|
|
1397
|
+
padding-right: 1.25rem;
|
|
1398
|
+
padding-top: 9px;
|
|
1399
|
+
padding-bottom: 9px;
|
|
1400
|
+
font-size: 1rem;
|
|
1401
|
+
line-height: 1.5rem;
|
|
1402
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1403
|
+
transition-duration: 150ms;
|
|
1404
|
+
align-items:center;
|
|
1405
|
+
justify-content:center;
|
|
1406
|
+
text-align:center;
|
|
1407
|
+
transition-property:all;
|
|
1408
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1409
|
+
transition-duration:.15s;
|
|
1410
|
+
}
|
|
1411
|
+
|
|
1412
|
+
.btn:hover {
|
|
1413
|
+
--tw-brightness: brightness(1.15);
|
|
1414
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1415
|
+
}
|
|
1416
|
+
|
|
1131
1417
|
.btn {
|
|
1132
1418
|
/* Size (match base) */
|
|
1133
1419
|
padding-left: 1.25rem;
|
|
@@ -1201,6 +1487,151 @@ button:disabled:active {
|
|
|
1201
1487
|
|
|
1202
1488
|
/* File Input Button */
|
|
1203
1489
|
|
|
1490
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1491
|
+
background-color: rgb(var(--color-surface-900));
|
|
1492
|
+
}
|
|
1493
|
+
|
|
1494
|
+
.dark input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1495
|
+
background-color: rgb(var(--color-surface-50));
|
|
1496
|
+
}
|
|
1497
|
+
|
|
1498
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1499
|
+
color: rgb(var(--color-surface-50));
|
|
1500
|
+
}
|
|
1501
|
+
|
|
1502
|
+
.dark input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1503
|
+
background-color:rgb(var(--color-surface-50));
|
|
1504
|
+
color:rgb(var(--color-surface-900));
|
|
1505
|
+
}
|
|
1506
|
+
|
|
1507
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1508
|
+
display: inline-flex;
|
|
1509
|
+
align-items: center;
|
|
1510
|
+
justify-content: center;
|
|
1511
|
+
}
|
|
1512
|
+
|
|
1513
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button > :not([hidden]) ~ :not([hidden]) {
|
|
1514
|
+
--tw-space-x-reverse: 0;
|
|
1515
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1516
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1517
|
+
}
|
|
1518
|
+
|
|
1519
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1520
|
+
white-space: nowrap;
|
|
1521
|
+
padding-left: 1.25rem;
|
|
1522
|
+
padding-right: 1.25rem;
|
|
1523
|
+
padding-top: 9px;
|
|
1524
|
+
padding-bottom: 9px;
|
|
1525
|
+
font-size: 1rem;
|
|
1526
|
+
line-height: 1.5rem;
|
|
1527
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1528
|
+
transition-duration: 150ms;
|
|
1529
|
+
align-items:center;
|
|
1530
|
+
justify-content:center;
|
|
1531
|
+
text-align:center;
|
|
1532
|
+
transition-property:all;
|
|
1533
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1534
|
+
transition-duration:.15s;
|
|
1535
|
+
}
|
|
1536
|
+
|
|
1537
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button:hover {
|
|
1538
|
+
--tw-brightness: brightness(1.15);
|
|
1539
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1540
|
+
}
|
|
1541
|
+
|
|
1542
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1543
|
+
/* Size (match base) */
|
|
1544
|
+
padding-left: 1.25rem;
|
|
1545
|
+
padding-right: 1.25rem;
|
|
1546
|
+
padding-top: 9px;
|
|
1547
|
+
padding-bottom: 9px;
|
|
1548
|
+
font-size: 1rem;
|
|
1549
|
+
line-height: 1.5rem;
|
|
1550
|
+
/* Core */
|
|
1551
|
+
white-space: nowrap;
|
|
1552
|
+
text-align:center;
|
|
1553
|
+
/* Flex Columns */
|
|
1554
|
+
display: inline-flex;
|
|
1555
|
+
align-items: center;
|
|
1556
|
+
justify-content: center;
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button > :not([hidden]) ~ :not([hidden]) {
|
|
1560
|
+
--tw-space-x-reverse: 0;
|
|
1561
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1562
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button{
|
|
1566
|
+
align-items:center;
|
|
1567
|
+
justify-content:center
|
|
1568
|
+
/* States */
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1571
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button:hover {
|
|
1572
|
+
--tw-brightness: brightness(1.15);
|
|
1573
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1574
|
+
}
|
|
1575
|
+
|
|
1576
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1577
|
+
/* Transitions */
|
|
1578
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1579
|
+
transition-duration: 150ms;
|
|
1580
|
+
transition-property:all;
|
|
1581
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1582
|
+
transition-duration:.15s;
|
|
1583
|
+
border-radius:var(--theme-rounded-base);
|
|
1584
|
+
}
|
|
1585
|
+
|
|
1586
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button:active {
|
|
1587
|
+
--tw-scale-x: 95%;
|
|
1588
|
+
--tw-scale-y: 95%;
|
|
1589
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1590
|
+
--tw-brightness: brightness(.9);
|
|
1591
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1592
|
+
}
|
|
1593
|
+
|
|
1594
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1595
|
+
padding-left: 0.75rem;
|
|
1596
|
+
padding-right: 0.75rem;
|
|
1597
|
+
padding-top: 0.375rem;
|
|
1598
|
+
padding-bottom: 0.375rem;
|
|
1599
|
+
font-size:.875rem;
|
|
1600
|
+
line-height:1.25rem;
|
|
1601
|
+
display: inline-flex;
|
|
1602
|
+
align-items: center;
|
|
1603
|
+
justify-content: center;
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1606
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button > :not([hidden]) ~ :not([hidden]) {
|
|
1607
|
+
--tw-space-x-reverse: 0;
|
|
1608
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1609
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1610
|
+
}
|
|
1611
|
+
|
|
1612
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1613
|
+
white-space: nowrap;
|
|
1614
|
+
padding-left: 1.25rem;
|
|
1615
|
+
padding-right: 1.25rem;
|
|
1616
|
+
padding-top: 9px;
|
|
1617
|
+
padding-bottom: 9px;
|
|
1618
|
+
font-size: 1rem;
|
|
1619
|
+
line-height: 1.5rem;
|
|
1620
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1621
|
+
transition-duration: 150ms;
|
|
1622
|
+
align-items:center;
|
|
1623
|
+
justify-content:center;
|
|
1624
|
+
text-align:center;
|
|
1625
|
+
transition-property:all;
|
|
1626
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1627
|
+
transition-duration:.15s;
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
input[type="file"]:not(.file-dropzone-input)::file-selector-button:hover {
|
|
1631
|
+
--tw-brightness: brightness(1.15);
|
|
1632
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1633
|
+
}
|
|
1634
|
+
|
|
1204
1635
|
input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
1205
1636
|
/* Size (match base) */
|
|
1206
1637
|
padding-left: 1.25rem;
|
|
@@ -1291,6 +1722,64 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
|
1291
1722
|
|
|
1292
1723
|
/* === States === */
|
|
1293
1724
|
|
|
1725
|
+
.chip {
|
|
1726
|
+
white-space: nowrap;
|
|
1727
|
+
padding-left: 0.75rem;
|
|
1728
|
+
padding-right: 0.75rem;
|
|
1729
|
+
padding-top: 0.375rem;
|
|
1730
|
+
padding-bottom: 0.375rem;
|
|
1731
|
+
cursor:pointer;
|
|
1732
|
+
/* Text */
|
|
1733
|
+
text-align:center;
|
|
1734
|
+
font-size:.75rem;
|
|
1735
|
+
line-height:1rem;
|
|
1736
|
+
/* Rounded */
|
|
1737
|
+
border-radius:.25rem;
|
|
1738
|
+
/* Flex Columns */
|
|
1739
|
+
display: inline-flex;
|
|
1740
|
+
align-items: center;
|
|
1741
|
+
justify-content: center;
|
|
1742
|
+
}
|
|
1743
|
+
|
|
1744
|
+
.chip > :not([hidden]) ~ :not([hidden]) {
|
|
1745
|
+
--tw-space-x-reverse: 0;
|
|
1746
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
1747
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
1748
|
+
}
|
|
1749
|
+
|
|
1750
|
+
.chip{
|
|
1751
|
+
align-items:center;
|
|
1752
|
+
justify-content:center
|
|
1753
|
+
/* States */
|
|
1754
|
+
}
|
|
1755
|
+
|
|
1756
|
+
.chip:hover {
|
|
1757
|
+
--tw-brightness: brightness(1.15);
|
|
1758
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
.chip {
|
|
1762
|
+
/* Transitions */
|
|
1763
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1764
|
+
transition-duration: 150ms;
|
|
1765
|
+
transition-property:all;
|
|
1766
|
+
transition-timing-function:cubic-bezier(.4,0,.2,1);
|
|
1767
|
+
transition-duration:.15s;
|
|
1768
|
+
}
|
|
1769
|
+
|
|
1770
|
+
.chip-disabled,
|
|
1771
|
+
.chip:disabled {
|
|
1772
|
+
cursor: not-allowed !important;
|
|
1773
|
+
opacity: 0.5 !important;
|
|
1774
|
+
}
|
|
1775
|
+
|
|
1776
|
+
.chip-disabled:active,
|
|
1777
|
+
.chip:disabled:active {
|
|
1778
|
+
--tw-scale-x: 1;
|
|
1779
|
+
--tw-scale-y: 1;
|
|
1780
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1781
|
+
}
|
|
1782
|
+
|
|
1294
1783
|
/* === Lists (Parents) === */
|
|
1295
1784
|
|
|
1296
1785
|
.list,
|
|
@@ -1430,10 +1919,6 @@ input[type="file"]:not(.file-dropzone-input)::file-selector-button {
|
|
|
1430
1919
|
.dark .variant-soft,.dark
|
|
1431
1920
|
.variant-soft-surface {
|
|
1432
1921
|
color:rgb(var(--color-surface-200));
|
|
1433
|
-
}
|
|
1434
|
-
|
|
1435
|
-
:is(.dark .variant-soft),:is(.dark
|
|
1436
|
-
.variant-soft-surface) {
|
|
1437
1922
|
background-color: rgb(var(--color-surface-500) / 0.2);
|
|
1438
1923
|
}
|
|
1439
1924
|
|
|
@@ -3288,8 +3773,7 @@ html{
|
|
|
3288
3773
|
-o-tab-size:4;
|
|
3289
3774
|
tab-size:4;
|
|
3290
3775
|
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
|
|
3291
|
-
font-feature-settings:normal
|
|
3292
|
-
font-variation-settings:normal
|
|
3776
|
+
font-feature-settings:normal
|
|
3293
3777
|
}
|
|
3294
3778
|
|
|
3295
3779
|
body{
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
|
|
2
|
+
export default _default;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { VBadge, VButton } from "./atoms";
|
|
1
|
+
import { VBadge, VButton, VChip } from "./atoms";
|
|
2
2
|
import { VDrawer, VRail, VRailTile, VShell } from "./molecules";
|
|
3
|
-
export { VButton, VRail, VRailTile, VShell, VDrawer, VBadge };
|
|
3
|
+
export { VButton, VRail, VRailTile, VShell, VDrawer, VBadge, VChip };
|
package/dist/vuetiful.es.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent, useAttrs, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createBlock, resolveDynamicComponent, withCtx, Fragment, createTextVNode, toDisplayString, createCommentVNode, ref, reactive, readonly, toRefs, computed, onMounted, createVNode, Transition, provide, createElementVNode, inject, mergeProps, withDirectives, resolveComponent, renderList, pushScopeId, popScopeId } from "vue";
|
|
2
|
-
const _sfc_main$
|
|
2
|
+
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
3
3
|
__name: "VBadge",
|
|
4
4
|
setup(__props) {
|
|
5
5
|
const attrs = useAttrs();
|
|
@@ -13,7 +13,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
|
-
const _sfc_main$
|
|
16
|
+
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
17
17
|
__name: "VButton",
|
|
18
18
|
props: {
|
|
19
19
|
tag: {
|
|
@@ -42,6 +42,20 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
|
+
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
46
|
+
__name: "VChip",
|
|
47
|
+
setup(__props) {
|
|
48
|
+
const attrs = useAttrs();
|
|
49
|
+
return (_ctx, _cache) => {
|
|
50
|
+
var _a;
|
|
51
|
+
return openBlock(), createElementBlock("div", {
|
|
52
|
+
class: normalizeClass(`vuetiful-chip chip ${(_a = unref(attrs).class) != null ? _a : ""}`)
|
|
53
|
+
}, [
|
|
54
|
+
renderSlot(_ctx.$slots, "default")
|
|
55
|
+
], 2);
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
});
|
|
45
59
|
const selectedRailTile = ref("");
|
|
46
60
|
const useRail = () => {
|
|
47
61
|
return {
|
|
@@ -364,12 +378,13 @@ const _sfc_main$3 = defineComponent({
|
|
|
364
378
|
var components = /* @__PURE__ */ Object.freeze({
|
|
365
379
|
__proto__: null,
|
|
366
380
|
[Symbol.toStringTag]: "Module",
|
|
367
|
-
VButton: _sfc_main$
|
|
381
|
+
VButton: _sfc_main$8,
|
|
368
382
|
VRail: _sfc_main$5,
|
|
369
383
|
VRailTile: _sfc_main$4,
|
|
370
384
|
VShell: _sfc_main$3,
|
|
371
385
|
VDrawer: _sfc_main$6,
|
|
372
|
-
VBadge: _sfc_main$
|
|
386
|
+
VBadge: _sfc_main$9,
|
|
387
|
+
VChip: _sfc_main$7
|
|
373
388
|
});
|
|
374
389
|
var main = "";
|
|
375
390
|
var tailwind = "";
|
|
@@ -47049,7 +47064,7 @@ var themeSwitcher_vue_vue_type_style_index_0_scoped_true_lang = "";
|
|
|
47049
47064
|
const _sfc_main = defineComponent({
|
|
47050
47065
|
components: {
|
|
47051
47066
|
DarkModeSwitch,
|
|
47052
|
-
VButton: _sfc_main$
|
|
47067
|
+
VButton: _sfc_main$8
|
|
47053
47068
|
},
|
|
47054
47069
|
props: {
|
|
47055
47070
|
bgLight: {
|
|
@@ -47292,4 +47307,4 @@ function install(app) {
|
|
|
47292
47307
|
}
|
|
47293
47308
|
}
|
|
47294
47309
|
var index = { install };
|
|
47295
|
-
export { _sfc_main$2 as CodeBlock, DarkModeSwitch, themeSwitcher as ThemeSwitcher, _sfc_main$
|
|
47310
|
+
export { _sfc_main$2 as CodeBlock, DarkModeSwitch, themeSwitcher as ThemeSwitcher, _sfc_main$9 as VBadge, _sfc_main$8 as VButton, _sfc_main$7 as VChip, _sfc_main$6 as VDrawer, _sfc_main$5 as VRail, _sfc_main$4 as VRailTile, _sfc_main$3 as VShell, index as default, useDarkMode, useDrawer, useRail, useTheme, clipboard as vClipboard };
|