vitepress-theme-element-plus 0.0.3 → 0.0.4

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.
Files changed (41) hide show
  1. package/README.md +3 -3
  2. package/client/components/A11yTag.vue +29 -29
  3. package/client/components/ApiTyping.vue +54 -54
  4. package/client/components/Backdrop.vue +41 -41
  5. package/client/components/Bili.vue +94 -94
  6. package/client/components/Content.vue +148 -150
  7. package/client/components/DeprecatedTag.vue +19 -19
  8. package/client/components/Doc.vue +181 -181
  9. package/client/components/DocAside.vue +46 -46
  10. package/client/components/DocAsideOutline.vue +82 -82
  11. package/client/components/DocFooter.vue +159 -159
  12. package/client/components/Footer.vue +77 -77
  13. package/client/components/FooterCopyright.vue +27 -27
  14. package/client/components/Layout.vue +156 -156
  15. package/client/components/Link.vue +41 -41
  16. package/client/components/LocalNav.vue +160 -160
  17. package/client/components/Nav.vue +69 -69
  18. package/client/components/NavBar.vue +203 -203
  19. package/client/components/NavBarTitle.vue +75 -75
  20. package/client/components/Sidebar.vue +129 -129
  21. package/client/components/SidebarGroup.vue +51 -51
  22. package/client/components/SidebarItem.vue +302 -302
  23. package/client/components/Tag.vue +25 -25
  24. package/client/components/VPNavBarSearch.vue +23 -23
  25. package/client/components/VersionTag.vue +18 -18
  26. package/client/hooks/useBackTop.ts +71 -71
  27. package/client/hooks/useLangs.ts +50 -50
  28. package/client/hooks/useSidebar.ts +93 -18
  29. package/client/hooks/useSidebarControl.ts +78 -78
  30. package/client/hooks/useSize.ts +69 -69
  31. package/client/utils/client/common.ts +49 -49
  32. package/client/utils/client/outline.ts +113 -113
  33. package/client/utils/common.ts +90 -90
  34. package/index.ts +26 -26
  35. package/package.json +73 -73
  36. package/shared/constants.ts +3 -3
  37. package/styles/base.scss +37 -37
  38. package/styles/code.scss +282 -282
  39. package/styles/doc-content.scss +161 -161
  40. package/styles/index.scss +69 -69
  41. package/styles/tag-content.scss +30 -30
package/styles/doc-content.scss CHANGED
@@ -1,161 +1,161 @@
1
- .doc-content {
2
- h1 {
3
- margin-bottom: 2rem;
4
- font-weight: 600;
5
- font-size: 1.9rem;
6
- }
7
-
8
- h2 {
9
- margin-top: 2.25rem;
10
- margin-bottom: 1.25rem;
11
- padding-bottom: .3rem;
12
- line-height: 1.25;
13
- font-size: 1.65rem;
14
- font-weight: 600;
15
- }
16
-
17
- h3 {
18
- font-size: 1.35rem;
19
- font-weight: 600;
20
- }
21
-
22
- h4 {
23
- font-size: 1.15rem;
24
- font-weight: 600;
25
- }
26
-
27
- h5 {
28
- font-weight: 600;
29
- }
30
-
31
- h2+h3 {
32
- margin-top: 1.5rem;
33
- }
34
-
35
- p {
36
- margin: 1rem 0;
37
- line-height: 1.7;
38
- }
39
-
40
- a {
41
- font-weight: 500;
42
- text-decoration: inherit;
43
- color: var(--brand-color);
44
- display: inline-flex;
45
- align-items: center;
46
- }
47
-
48
- a .link-icon {
49
- margin-left: .25rem;
50
- height: 1em;
51
- width: 1em;
52
- }
53
-
54
-
55
- h1,
56
- h2,
57
- h3,
58
- h4,
59
- h5,
60
- h6 {
61
- display: flex;
62
- align-items: center;
63
- color: var(--el-text-color-regular);
64
-
65
- // Special case for handling tagged header.
66
- .el-tag,
67
- .vp-tag {
68
- margin-left: 8px;
69
- }
70
- }
71
-
72
- @media screen and (min-width: 480px) {
73
- h1 {
74
- font-size: 2.2rem;
75
- }
76
- }
77
-
78
- div .vp-table {
79
- width: 100%;
80
- overflow-y: hidden;
81
- overflow-x: auto;
82
- margin-bottom: 45px;
83
-
84
- & > table {
85
- border-collapse: collapse;
86
- width: 100%;
87
- background-color: var(--bg-color);
88
- font-size: 14px;
89
- line-height: 1.5em;
90
-
91
- tr {
92
- td:nth-child(2) {
93
- font-family: var(--font-family);
94
- }
95
- }
96
-
97
- th,
98
- td {
99
- white-space: nowrap;
100
- border-top: 1px solid var(--border-color);
101
- border-bottom: 1px solid var(--border-color);
102
- padding: 0.6em 1em;
103
- text-align: left;
104
- max-width: 250px;
105
- white-space: pre-wrap;
106
- }
107
-
108
- thead tr:first-child th {
109
- border-top: none;
110
- }
111
-
112
- tbody tr td:first-child {
113
- font-family: var(--font-family-mono);
114
- }
115
- }
116
- }
117
-
118
- .header-anchor:before {
119
- content: '#';
120
- }
121
-
122
- a.header-anchor {
123
- position: absolute;
124
- margin-top: .125em;
125
- margin-left: -.87em;
126
- padding-right: .23em;
127
- font-size: .85em;
128
- opacity: 0;
129
- }
130
-
131
- h1:hover .header-anchor,h1:focus .header-anchor,h2:hover .header-anchor,h2:focus .header-anchor,h3:hover .header-anchor,h3:focus .header-anchor,h4:hover .header-anchor,h4:focus .header-anchor,h5:hover .header-anchor,h5:focus .header-anchor,h6:hover .header-anchor,h6:focus .header-anchor {
132
- opacity: 1
133
- }
134
-
135
-
136
- .custom-block {
137
- .custom-block-title {
138
- font-weight: 700;
139
- }
140
-
141
- p:not(.custom-block-title) {
142
- font-size: 0.9rem;
143
- }
144
-
145
- &.tip {
146
- padding: 8px 16px;
147
- background-color: var(--block-tip-bg-color);
148
- border-radius: 4px;
149
- border-left: 5px solid var(--el-color-primary);
150
- margin: 20px 0;
151
- }
152
-
153
- &.warning {
154
- padding: 8px 16px;
155
- background-color: var(--block-warning-bg-color);
156
- border-radius: 4px;
157
- border-left: 5px solid var(--el-color-danger);
158
- margin: 20px 0;
159
- }
160
- }
161
- }
1
+ .doc-content {
2
+ h1 {
3
+ margin-bottom: 2rem;
4
+ font-weight: 600;
5
+ font-size: 1.9rem;
6
+ }
7
+
8
+ h2 {
9
+ margin-top: 2.25rem;
10
+ margin-bottom: 1.25rem;
11
+ padding-bottom: .3rem;
12
+ line-height: 1.25;
13
+ font-size: 1.65rem;
14
+ font-weight: 600;
15
+ }
16
+
17
+ h3 {
18
+ font-size: 1.35rem;
19
+ font-weight: 600;
20
+ }
21
+
22
+ h4 {
23
+ font-size: 1.15rem;
24
+ font-weight: 600;
25
+ }
26
+
27
+ h5 {
28
+ font-weight: 600;
29
+ }
30
+
31
+ h2+h3 {
32
+ margin-top: 1.5rem;
33
+ }
34
+
35
+ p {
36
+ margin: 1rem 0;
37
+ line-height: 1.7;
38
+ }
39
+
40
+ a {
41
+ font-weight: 500;
42
+ text-decoration: inherit;
43
+ color: var(--brand-color);
44
+ display: inline-flex;
45
+ align-items: center;
46
+ }
47
+
48
+ a .link-icon {
49
+ margin-left: .25rem;
50
+ height: 1em;
51
+ width: 1em;
52
+ }
53
+
54
+
55
+ h1,
56
+ h2,
57
+ h3,
58
+ h4,
59
+ h5,
60
+ h6 {
61
+ display: flex;
62
+ align-items: center;
63
+ color: var(--el-text-color-regular);
64
+
65
+ // Special case for handling tagged header.
66
+ .el-tag,
67
+ .vp-tag {
68
+ margin-left: 8px;
69
+ }
70
+ }
71
+
72
+ @media screen and (min-width: 480px) {
73
+ h1 {
74
+ font-size: 2.2rem;
75
+ }
76
+ }
77
+
78
+ div .vp-table {
79
+ width: 100%;
80
+ overflow-y: hidden;
81
+ overflow-x: auto;
82
+ margin-bottom: 45px;
83
+
84
+ & > table {
85
+ border-collapse: collapse;
86
+ width: 100%;
87
+ background-color: var(--bg-color);
88
+ font-size: 14px;
89
+ line-height: 1.5em;
90
+
91
+ tr {
92
+ td:nth-child(2) {
93
+ font-family: var(--font-family);
94
+ }
95
+ }
96
+
97
+ th,
98
+ td {
99
+ white-space: nowrap;
100
+ border-top: 1px solid var(--border-color);
101
+ border-bottom: 1px solid var(--border-color);
102
+ padding: 0.6em 1em;
103
+ text-align: left;
104
+ max-width: 250px;
105
+ white-space: pre-wrap;
106
+ }
107
+
108
+ thead tr:first-child th {
109
+ border-top: none;
110
+ }
111
+
112
+ tbody tr td:first-child {
113
+ font-family: var(--font-family-mono);
114
+ }
115
+ }
116
+ }
117
+
118
+ .header-anchor:before {
119
+ content: '#';
120
+ }
121
+
122
+ a.header-anchor {
123
+ position: absolute;
124
+ margin-top: .125em;
125
+ margin-left: -.87em;
126
+ padding-right: .23em;
127
+ font-size: .85em;
128
+ opacity: 0;
129
+ }
130
+
131
+ h1:hover .header-anchor,h1:focus .header-anchor,h2:hover .header-anchor,h2:focus .header-anchor,h3:hover .header-anchor,h3:focus .header-anchor,h4:hover .header-anchor,h4:focus .header-anchor,h5:hover .header-anchor,h5:focus .header-anchor,h6:hover .header-anchor,h6:focus .header-anchor {
132
+ opacity: 1
133
+ }
134
+
135
+
136
+ .custom-block {
137
+ .custom-block-title {
138
+ font-weight: 700;
139
+ }
140
+
141
+ p:not(.custom-block-title) {
142
+ font-size: 0.9rem;
143
+ }
144
+
145
+ &.tip {
146
+ padding: 8px 16px;
147
+ background-color: var(--block-tip-bg-color);
148
+ border-radius: 4px;
149
+ border-left: 5px solid var(--el-color-primary);
150
+ margin: 20px 0;
151
+ }
152
+
153
+ &.warning {
154
+ padding: 8px 16px;
155
+ background-color: var(--block-warning-bg-color);
156
+ border-radius: 4px;
157
+ border-left: 5px solid var(--el-color-danger);
158
+ margin: 20px 0;
159
+ }
160
+ }
161
+ }
package/styles/index.scss CHANGED
@@ -1,69 +1,69 @@
1
- :root {
2
- --vp-layout-max-width: 1680px;
3
- --vp-sidebar-width-small: 266px;
4
- --vp-sidebar-width-mobile: 320px;
5
- --text-color: var(--el-text-color-primary);
6
- --text-color-light: var(--el-text-color-regular);
7
- --text-color-lighter: var(--el-text-color-secondary);
8
- --brand-color: var(--el-color-primary);
9
- --brand-color-light: var(--el-color-primary-light-1);
10
- --bg-brand-color: var(--el-color-primary-light-9);
11
- --bg-color: var(--el-bg-color);
12
- --bg-color-rgb: 255, 255, 255;
13
- --bg-color-soft: #fafafa;
14
- --bg-color-mute: #f2f2f2;
15
- --border-color: var(--el-border-color);
16
- --border-color-light: var(--el-border-color-lighter);
17
- --font-family: var(--el-font-family);
18
- --font-family-mono: "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
19
- --success-color: var(--el-color-success);
20
- --warning-color: var(--el-color-warning);
21
- --danger-color: var(--el-color-danger);
22
- --vp-screen-max-width: 1362px;
23
- --vp-sidebar-width-mobile: 320px;
24
- --vp-sidebar-width-small: 266px;
25
- --code-font-family: var(--font-family-mono);
26
- --code-font-size: var(--el-font-size-base);
27
- --code-bg-color: var(--el-fill-color-light);
28
- --code-text-color: var(--text-color);
29
- --code-tooltip-bg-color: var(--code-bg-color);
30
- --code-tooltip-color: #0c61c9;
31
- --block-tip-bg-color: rgba(var(--el-color-primary-rgb), .1);
32
- --block-warning-bg-color: rgba(var(--el-color-danger-rgb), .1);
33
- --link-active-bg-color: rgba(var(--el-color-primary-rgb), .1)
34
-
35
- &.dark {
36
- --el-color-primary: #a8b1ff;
37
- }
38
- }
39
-
40
- :root:root {
41
- --vp-nav-height: 55px;
42
- --vp-nav-logo-height: 28px;
43
- --vp-c-brand: var(--el-color-primary);
44
- --vp-c-brand-1: var(--el-color-primary);
45
- --el-bg-color: var(--vp-c-bg);
46
- }
47
- // fix "vitepress-plugin-group-icons"
48
- .vp-code-block-title-bar.vp-code-block-title-bar {
49
- margin: 16px 0px 0px;
50
- }
51
-
52
- .vp-code-group .tabs.tabs {
53
- margin-right: 0px;
54
- margin-left: 0px;
55
- border-radius: 8px 8px 0px 0px;
56
- }
57
-
58
- @media screen and (min-width: 1440px) {
59
- :root {
60
- --vp-sidebar-width-small: 234px;
61
- }
62
- }
63
-
64
- @media screen and (min-width: 1680px) {
65
- :root {
66
- --vp-screen-max-width: 1482px;
67
- --vp-sidebar-width-small: 290px;
68
- }
69
- }
1
+ :root {
2
+ --vp-layout-max-width: 1680px;
3
+ --vp-sidebar-width-small: 266px;
4
+ --vp-sidebar-width-mobile: 320px;
5
+ --text-color: var(--el-text-color-primary);
6
+ --text-color-light: var(--el-text-color-regular);
7
+ --text-color-lighter: var(--el-text-color-secondary);
8
+ --brand-color: var(--el-color-primary);
9
+ --brand-color-light: var(--el-color-primary-light-1);
10
+ --bg-brand-color: var(--el-color-primary-light-9);
11
+ --bg-color: var(--el-bg-color);
12
+ --bg-color-rgb: 255, 255, 255;
13
+ --bg-color-soft: #fafafa;
14
+ --bg-color-mute: #f2f2f2;
15
+ --border-color: var(--el-border-color);
16
+ --border-color-light: var(--el-border-color-lighter);
17
+ --font-family: var(--el-font-family);
18
+ --font-family-mono: "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
19
+ --success-color: var(--el-color-success);
20
+ --warning-color: var(--el-color-warning);
21
+ --danger-color: var(--el-color-danger);
22
+ --vp-screen-max-width: 1362px;
23
+ --vp-sidebar-width-mobile: 320px;
24
+ --vp-sidebar-width-small: 266px;
25
+ --code-font-family: var(--font-family-mono);
26
+ --code-font-size: var(--el-font-size-base);
27
+ --code-bg-color: var(--el-fill-color-light);
28
+ --code-text-color: var(--text-color);
29
+ --code-tooltip-bg-color: var(--code-bg-color);
30
+ --code-tooltip-color: #0c61c9;
31
+ --block-tip-bg-color: rgba(var(--el-color-primary-rgb), .1);
32
+ --block-warning-bg-color: rgba(var(--el-color-danger-rgb), .1);
33
+ --link-active-bg-color: rgba(var(--el-color-primary-rgb), .1)
34
+
35
+ &.dark {
36
+ --el-color-primary: #a8b1ff;
37
+ }
38
+ }
39
+
40
+ :root:root {
41
+ --vp-nav-height: 55px;
42
+ --vp-nav-logo-height: 28px;
43
+ --vp-c-brand: var(--el-color-primary);
44
+ --vp-c-brand-1: var(--el-color-primary);
45
+ --el-bg-color: var(--vp-c-bg);
46
+ }
47
+ // fix "vitepress-plugin-group-icons"
48
+ .vp-code-block-title-bar.vp-code-block-title-bar {
49
+ margin: 16px 0px 0px;
50
+ }
51
+
52
+ .vp-code-group .tabs.tabs {
53
+ margin-right: 0px;
54
+ margin-left: 0px;
55
+ border-radius: 8px 8px 0px 0px;
56
+ }
57
+
58
+ @media screen and (min-width: 1440px) {
59
+ :root {
60
+ --vp-sidebar-width-small: 234px;
61
+ }
62
+ }
63
+
64
+ @media screen and (min-width: 1680px) {
65
+ :root {
66
+ --vp-screen-max-width: 1482px;
67
+ --vp-sidebar-width-small: 290px;
68
+ }
69
+ }
package/styles/tag-content.scss CHANGED
@@ -1,30 +1,30 @@
1
- .vp-tag {
2
- --vp-tag-color: var(--el-color-primary);
3
- --vp-tag-border-color: var(--el-color-primary);
4
-
5
- display: inline-block;
6
- padding: 0 7px;
7
- border-radius: 10px;
8
- border: 1px solid var(--vp-tag-border-color);
9
- font-size: var(--el-font-size-extra-small);
10
- color: var(--vp-tag-color);
11
- line-height: 18px;
12
- white-space: nowrap;
13
-
14
- &.beta {
15
- --vp-tag-color: var(--el-color-danger);
16
- --vp-tag-border-color: var(--el-color-danger);
17
- }
18
- &.deprecated {
19
- --vp-tag-color: var(--el-color-warning);
20
- --vp-tag-border-color: var(--el-color-warning);
21
- }
22
- &.a11y {
23
- --vp-tag-color: var(--purple-color);
24
- --vp-tag-border-color: var(--purple-color-light);
25
- }
26
- &.required {
27
- --vp-tag-color: var(--el-color-success);
28
- --vp-tag-border-color: var(--el-color-success);
29
- }
30
- }
1
+ .vp-tag {
2
+ --vp-tag-color: var(--el-color-primary);
3
+ --vp-tag-border-color: var(--el-color-primary);
4
+
5
+ display: inline-block;
6
+ padding: 0 7px;
7
+ border-radius: 10px;
8
+ border: 1px solid var(--vp-tag-border-color);
9
+ font-size: var(--el-font-size-extra-small);
10
+ color: var(--vp-tag-color);
11
+ line-height: 18px;
12
+ white-space: nowrap;
13
+
14
+ &.beta {
15
+ --vp-tag-color: var(--el-color-danger);
16
+ --vp-tag-border-color: var(--el-color-danger);
17
+ }
18
+ &.deprecated {
19
+ --vp-tag-color: var(--el-color-warning);
20
+ --vp-tag-border-color: var(--el-color-warning);
21
+ }
22
+ &.a11y {
23
+ --vp-tag-color: var(--purple-color);
24
+ --vp-tag-border-color: var(--purple-color-light);
25
+ }
26
+ &.required {
27
+ --vp-tag-color: var(--el-color-success);
28
+ --vp-tag-border-color: var(--el-color-success);
29
+ }
30
+ }