@fastkit/vui 0.19.34 → 0.19.36
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/vui.css +67 -41
- package/dist/vui.d.ts +357 -711
- package/dist/vui.mjs +2 -2
- package/dist/vui.mjs.map +1 -1
- package/package.json +27 -27
- package/src/components/VAvatar/VAvatar.scss +26 -23
- package/src/components/VCard/VCard.scss +12 -9
- package/src/components/VCheckable/VCheckable.scss +4 -4
- package/src/components/VChip/VChip.scss +24 -21
- package/src/components/VOption/VOption.scss +7 -4
- package/src/components/VPagination/VPagination.scss +19 -16
- package/src/components/VPaper/VPaper.scss +5 -5
- package/src/components/VTabs/VTab.scss +20 -17
- package/src/components/VTooltip/VTooltip.scss +1 -2
- package/src/styles/core/functions.scss +10 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fastkit/vui",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.36",
|
|
4
4
|
"description": "A simple, extensible UI kit for Vue applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"fastkit",
|
|
@@ -44,35 +44,35 @@
|
|
|
44
44
|
"src"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@fastkit/
|
|
48
|
-
"@fastkit/color-scheme-gen": "^0.14.
|
|
49
|
-
"@fastkit/dom": "^0.2.
|
|
50
|
-
"@fastkit/
|
|
51
|
-
"@fastkit/
|
|
52
|
-
"@fastkit/
|
|
53
|
-
"@fastkit/
|
|
54
|
-
"@fastkit/
|
|
55
|
-
"@fastkit/
|
|
56
|
-
"@fastkit/
|
|
57
|
-
"@fastkit/
|
|
58
|
-
"@fastkit/vue-
|
|
59
|
-
"@fastkit/vue-
|
|
60
|
-
"@fastkit/vue-
|
|
61
|
-
"@fastkit/vue-
|
|
62
|
-
"@fastkit/vue-
|
|
63
|
-
"@fastkit/vue-
|
|
64
|
-
"@fastkit/vue-resize": "^0.2.
|
|
65
|
-
"@fastkit/vue-
|
|
66
|
-
"@fastkit/vue-location": "^0.2.
|
|
67
|
-
"@fastkit/vue-stack": "^0.16.
|
|
68
|
-
"@fastkit/vue-
|
|
69
|
-
"@fastkit/vue-
|
|
70
|
-
"@fastkit/vue-
|
|
71
|
-
"@fastkit/
|
|
47
|
+
"@fastkit/color-scheme": "^2.0.10",
|
|
48
|
+
"@fastkit/color-scheme-gen": "^0.14.13",
|
|
49
|
+
"@fastkit/dom": "^0.2.6",
|
|
50
|
+
"@fastkit/helpers": "^0.14.5",
|
|
51
|
+
"@fastkit/media-match": "^2.0.7",
|
|
52
|
+
"@fastkit/media-match-gen": "^0.14.13",
|
|
53
|
+
"@fastkit/icon-font": "^2.0.7",
|
|
54
|
+
"@fastkit/tiny-logger": "^0.14.5",
|
|
55
|
+
"@fastkit/rules": "^0.14.7",
|
|
56
|
+
"@fastkit/vue-body-scroll-lock": "^0.2.10",
|
|
57
|
+
"@fastkit/vue-app-layout": "^0.15.10",
|
|
58
|
+
"@fastkit/vue-color-scheme": "^0.15.12",
|
|
59
|
+
"@fastkit/vue-click-outside": "^0.2.9",
|
|
60
|
+
"@fastkit/vue-keyboard": "^0.2.5",
|
|
61
|
+
"@fastkit/vue-form-control": "^0.20.20",
|
|
62
|
+
"@fastkit/vue-loading": "^0.15.12",
|
|
63
|
+
"@fastkit/vue-media-match": "^0.14.10",
|
|
64
|
+
"@fastkit/vue-resize": "^0.2.9",
|
|
65
|
+
"@fastkit/vue-scroller": "^0.15.9",
|
|
66
|
+
"@fastkit/vue-location": "^0.2.9",
|
|
67
|
+
"@fastkit/vue-stack": "^0.16.12",
|
|
68
|
+
"@fastkit/vue-transitions": "^0.2.10",
|
|
69
|
+
"@fastkit/vue-utils": "^0.15.9",
|
|
70
|
+
"@fastkit/vue-action": "^0.3.16",
|
|
71
|
+
"@fastkit/stylebase": "^0.13.1"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
74
|
"vue": "^3.4.0",
|
|
75
|
-
"vue-router": "^4.
|
|
75
|
+
"vue-router": "^4.4.0"
|
|
76
76
|
},
|
|
77
77
|
"buildOptions": {
|
|
78
78
|
"name": "Vui"
|
|
@@ -4,31 +4,34 @@
|
|
|
4
4
|
.v-avatar {
|
|
5
5
|
@include core.button-reset;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
8
|
+
& {
|
|
9
|
+
--avatar-radius: 50%;
|
|
10
|
+
--avatar-font-weight: var(--typo-medium-weight);
|
|
11
|
+
--avatar-base-font-size: var(--typo-base-size);
|
|
12
|
+
--avatar-font-size: var(--avatar-base-font-size);
|
|
11
13
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
flex-basis: var(--avatar-size);
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
width: var(--avatar-size);
|
|
19
|
+
min-width: var(--avatar-size);
|
|
20
|
+
height: var(--avatar-size);
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
font-size: var(--avatar-font-size);
|
|
23
|
+
font-weight: var(--avatar-font-weight);
|
|
24
|
+
line-height: 1;
|
|
25
|
+
text-align: center;
|
|
26
|
+
vertical-align: bottom;
|
|
27
|
+
cursor: default;
|
|
28
|
+
border-style: solid;
|
|
29
|
+
border-width: 1px;
|
|
30
|
+
border-radius: var(--avatar-radius);
|
|
29
31
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
+
--shadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
|
|
33
|
+
--focusShadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
|
|
34
|
+
}
|
|
32
35
|
|
|
33
36
|
&--clickable {
|
|
34
37
|
cursor: pointer;
|
|
@@ -4,15 +4,18 @@
|
|
|
4
4
|
.v-card {
|
|
5
5
|
@include core.remove-tap-highlight;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
7
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
8
|
+
& {
|
|
9
|
+
position: relative;
|
|
10
|
+
width: 100%;
|
|
11
|
+
padding: 0;
|
|
12
|
+
text-align: left;
|
|
13
|
+
appearance: none;
|
|
14
|
+
touch-action: manipulation;
|
|
15
|
+
user-select: none;
|
|
16
|
+
border: 0;
|
|
17
|
+
outline: 0;
|
|
18
|
+
}
|
|
16
19
|
|
|
17
20
|
&,
|
|
18
21
|
&:hover,
|
|
@@ -6,16 +6,16 @@
|
|
|
6
6
|
--icon-size: var(--control-checkable-icon-size);
|
|
7
7
|
--color: var(--control-checkable-base-color);
|
|
8
8
|
|
|
9
|
-
&--checked {
|
|
10
|
-
--color: var(--main-color);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
9
|
display: inline-flex;
|
|
14
10
|
align-items: center;
|
|
15
11
|
padding-right: 1em;
|
|
16
12
|
cursor: pointer;
|
|
17
13
|
user-select: none;
|
|
18
14
|
|
|
15
|
+
&--checked {
|
|
16
|
+
--color: var(--main-color);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
19
|
&--invalid:not(#{&}--readonly) {
|
|
20
20
|
--color: var(--main-color);
|
|
21
21
|
}
|
|
@@ -6,27 +6,30 @@
|
|
|
6
6
|
|
|
7
7
|
$chip-sizes: xs, sm, md, lg, xl;
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
9
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
10
|
+
& {
|
|
11
|
+
--chip-radius: calc(var(--chip-height) / 2);
|
|
12
|
+
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
height: var(--chip-height);
|
|
17
|
+
padding: 0 var(--chip-padding);
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
font-size: var(--chip-font-size);
|
|
20
|
+
font-weight: var(--chip-font-weight);
|
|
21
|
+
line-height: 1;
|
|
22
|
+
text-align: center;
|
|
23
|
+
white-space: nowrap;
|
|
24
|
+
vertical-align: bottom;
|
|
25
|
+
cursor: default;
|
|
26
|
+
border-style: solid;
|
|
27
|
+
border-width: 1px;
|
|
28
|
+
border-radius: var(--chip-radius);
|
|
29
|
+
|
|
30
|
+
--shadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
|
|
31
|
+
--focusShadow-color: rgba(0, 0, 0, 0) !important; // @TODO layer supports
|
|
32
|
+
}
|
|
30
33
|
|
|
31
34
|
&--clickable {
|
|
32
35
|
cursor: pointer;
|
|
@@ -4,10 +4,13 @@
|
|
|
4
4
|
.v-option {
|
|
5
5
|
@include core.button-reset;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
8
|
+
& {
|
|
9
|
+
position: relative;
|
|
10
|
+
display: flex;
|
|
11
|
+
width: 100%;
|
|
12
|
+
padding: 0.75em 1em;
|
|
13
|
+
}
|
|
11
14
|
|
|
12
15
|
// font-size: 0.875em;
|
|
13
16
|
|
|
@@ -7,18 +7,18 @@
|
|
|
7
7
|
--pagination-font-size: var(--pagination-item-font-size);
|
|
8
8
|
--pagination-radius: var(--pagination-item-radius);
|
|
9
9
|
|
|
10
|
-
&::before {
|
|
11
|
-
width: var(--pagination-size);
|
|
12
|
-
margin: var(--pagination-margin);
|
|
13
|
-
content: none;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
10
|
display: flex;
|
|
17
11
|
align-items: center;
|
|
18
12
|
overflow: hidden;
|
|
19
13
|
font-weight: bold;
|
|
20
14
|
line-height: 1;
|
|
21
15
|
|
|
16
|
+
&::before {
|
|
17
|
+
width: var(--pagination-size);
|
|
18
|
+
margin: var(--pagination-margin);
|
|
19
|
+
content: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
22
|
&--left {
|
|
23
23
|
justify-content: flex-start;
|
|
24
24
|
}
|
|
@@ -35,16 +35,19 @@
|
|
|
35
35
|
a#{&}__item {
|
|
36
36
|
@include core.button-reset;
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
38
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
39
|
+
& {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
min-width: var(--pagination-size);
|
|
44
|
+
height: var(--pagination-size);
|
|
45
|
+
margin: calc(var(--pagination-margin) * 0.5);
|
|
46
|
+
font-size: var(--pagination-font-size);
|
|
47
|
+
color: inherit;
|
|
48
|
+
border-radius: var(--pagination-radius);
|
|
49
|
+
transition: 0.1s;
|
|
50
|
+
}
|
|
48
51
|
|
|
49
52
|
&:hover,
|
|
50
53
|
&:focus {
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
.v-paper {
|
|
3
3
|
--paper-radius: var(--control-field-radius);
|
|
4
4
|
|
|
5
|
+
display: block;
|
|
6
|
+
color: var(--paper-text-color);
|
|
7
|
+
background-color: var(--paper-background--color);
|
|
8
|
+
border-radius: var(--paper-radius);
|
|
9
|
+
|
|
5
10
|
&--plain {
|
|
6
11
|
--paper-background--color: var(--palette-background);
|
|
7
12
|
--paper-text-color: inherit;
|
|
@@ -14,11 +19,6 @@
|
|
|
14
19
|
--paper-link-color: var(--nav-color);
|
|
15
20
|
}
|
|
16
21
|
|
|
17
|
-
display: block;
|
|
18
|
-
color: var(--paper-text-color);
|
|
19
|
-
background-color: var(--paper-background--color);
|
|
20
|
-
border-radius: var(--paper-radius);
|
|
21
|
-
|
|
22
22
|
&__inner {
|
|
23
23
|
position: relative;
|
|
24
24
|
border-radius: inherit;
|
|
@@ -4,26 +4,29 @@
|
|
|
4
4
|
.v-tab {
|
|
5
5
|
@include core.button-reset;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
8
|
+
& {
|
|
9
|
+
--tab-content-color: var(--palette-caption);
|
|
10
|
+
--tab-content-focus-color: var(--main-color);
|
|
11
|
+
--tab-content-opacity: 0.7;
|
|
10
12
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
position: relative;
|
|
14
|
+
z-index: 3;
|
|
15
|
+
display: flex;
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
// flex: 1 1 auto;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
height: var(--tabs-height);
|
|
21
|
+
padding: 0 1.25em;
|
|
22
|
+
font: inherit;
|
|
23
|
+
font-size: var(--tabs-font-size);
|
|
22
24
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
// color: inherit;
|
|
26
|
+
white-space: nowrap;
|
|
27
|
+
user-select: none;
|
|
28
|
+
transition: color 0.6s;
|
|
29
|
+
}
|
|
27
30
|
|
|
28
31
|
&::before {
|
|
29
32
|
position: absolute;
|
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
--menu-shadow: var(--tooltip-shadow);
|
|
3
3
|
|
|
4
4
|
font-size: var(--tooltip-font-size);
|
|
5
|
+
border-radius: var(--tooltip-radius);
|
|
5
6
|
|
|
6
7
|
.v-menu__body {
|
|
7
8
|
color: var(--tooltip-color) !important;
|
|
8
9
|
background: var(--tooltip-background) !important;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
|
-
border-radius: var(--tooltip-radius);
|
|
12
|
-
|
|
13
12
|
// opacity: var(--tooltip-opacity);
|
|
14
13
|
|
|
15
14
|
&__inner {
|
|
@@ -47,15 +47,17 @@
|
|
|
47
47
|
@mixin button-reset() {
|
|
48
48
|
@include remove-tap-highlight;
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
& {
|
|
51
|
+
padding: 0;
|
|
52
|
+
appearance: none;
|
|
53
|
+
touch-action: manipulation;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
user-select: none;
|
|
55
56
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
// background-color: transparent;
|
|
58
|
+
border-width: 0;
|
|
59
|
+
outline: 0;
|
|
60
|
+
}
|
|
59
61
|
|
|
60
62
|
&,
|
|
61
63
|
&:hover,
|