vitepress-theme-element-plus 1.3.0 → 1.3.2

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 (42) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +3 -3
  3. package/client/components/A11yTag.vue +29 -29
  4. package/client/components/ApiTyping.vue +54 -54
  5. package/client/components/Backdrop.vue +41 -41
  6. package/client/components/Bili.vue +94 -94
  7. package/client/components/Content.vue +148 -148
  8. package/client/components/DeprecatedTag.vue +19 -19
  9. package/client/components/Doc.vue +185 -185
  10. package/client/components/DocAside.vue +46 -46
  11. package/client/components/DocAsideOutline.vue +145 -145
  12. package/client/components/DocFooter.vue +162 -162
  13. package/client/components/Footer.vue +100 -100
  14. package/client/components/FooterCopyright.vue +27 -27
  15. package/client/components/Layout.vue +156 -156
  16. package/client/components/Link.vue +41 -41
  17. package/client/components/LocalNav.vue +160 -160
  18. package/client/components/Nav.vue +69 -69
  19. package/client/components/NavBar.vue +203 -203
  20. package/client/components/NavBarTitle.vue +89 -89
  21. package/client/components/Sidebar.vue +129 -129
  22. package/client/components/SidebarGroup.vue +51 -51
  23. package/client/components/SidebarItem.vue +304 -304
  24. package/client/components/ThemeToggler.vue +129 -129
  25. package/client/components/VPNavBarSearch.vue +23 -23
  26. package/client/hooks/useBackTop.ts +71 -71
  27. package/client/hooks/useLangs.ts +50 -50
  28. package/client/hooks/useSidebarControl.ts +78 -78
  29. package/client/hooks/useSize.ts +69 -69
  30. package/client/icons/dark.vue +8 -8
  31. package/client/icons/light.vue +8 -8
  32. package/client/utils/client/common.ts +49 -49
  33. package/client/utils/client/outline.ts +133 -126
  34. package/client/utils/common.ts +90 -90
  35. package/index.ts +45 -45
  36. package/package.json +2 -2
  37. package/shared/constants.ts +3 -3
  38. package/styles/base.scss +105 -105
  39. package/styles/code.scss +290 -290
  40. package/styles/doc-content.scss +363 -363
  41. package/styles/index.scss +71 -71
  42. package/styles/tag-content.scss +30 -30
@@ -1,363 +1,363 @@
1
- @use 'sass:selector';
2
-
3
- @mixin isolate-vp-raw {
4
- @each $current-selector in & {
5
- $guarded-selector: selector.append($current-selector, ':not(:where(.vp-raw, .vp-raw *))');
6
- @at-root #{$guarded-selector} {
7
- @content;
8
- }
9
- }
10
- }
11
-
12
- .doc-content {
13
- h1 {
14
- @include isolate-vp-raw {
15
- margin-bottom: 2rem;
16
- font-weight: 600;
17
- font-size: 1.9rem;
18
- }
19
- }
20
-
21
- h2 {
22
- @include isolate-vp-raw {
23
- margin-top: 2.25rem;
24
- margin-bottom: 1.25rem;
25
- padding-bottom: 0.3rem;
26
- line-height: 1.25;
27
- font-size: 1.65rem;
28
- font-weight: 600;
29
- }
30
- }
31
-
32
- h3 {
33
- @include isolate-vp-raw {
34
- font-size: 1.35rem;
35
- margin-top: 2rem;
36
- font-weight: 600;
37
- }
38
- }
39
-
40
- h4 {
41
- @include isolate-vp-raw {
42
- font-size: 1.15rem;
43
- font-weight: 600;
44
- }
45
- }
46
-
47
- h5 {
48
- @include isolate-vp-raw {
49
- font-weight: 600;
50
- }
51
- }
52
-
53
- h2 + h3 {
54
- @include isolate-vp-raw {
55
- margin-top: 1.5rem;
56
- }
57
- }
58
-
59
- h3 + h4 {
60
- @include isolate-vp-raw {
61
- margin-top: 1rem;
62
- }
63
- }
64
-
65
- p {
66
- @include isolate-vp-raw {
67
- margin: 1rem 0;
68
- line-height: 1.7;
69
- }
70
- }
71
-
72
- a {
73
- @include isolate-vp-raw {
74
- font-weight: 500;
75
- text-decoration: inherit;
76
- color: var(--vp-c-brand);
77
- display: inline;
78
- align-items: center;
79
- }
80
- }
81
-
82
- a:hover {
83
- @include isolate-vp-raw {
84
- color: var(--vp-c-brand-3);
85
- }
86
- }
87
-
88
- a .link-icon {
89
- @include isolate-vp-raw {
90
- margin-left: 0.25rem;
91
- height: 1.2em;
92
- width: 1em;
93
- display: inline;
94
- vertical-align: text-bottom;
95
- }
96
- }
97
-
98
- h1,
99
- h2,
100
- h3,
101
- h4,
102
- h5,
103
- h6 {
104
- @include isolate-vp-raw {
105
- display: flex;
106
- align-items: center;
107
- color: var(--el-text-color-regular);
108
-
109
- // Special case for handling tagged header.
110
- .el-tag,
111
- .vp-tag {
112
- @include isolate-vp-raw {
113
- margin-left: 8px;
114
- }
115
- }
116
- }
117
- }
118
-
119
- @media screen and (min-width: 480px) {
120
- h1 {
121
- @include isolate-vp-raw {
122
- font-size: 2.2rem;
123
- }
124
- }
125
- }
126
-
127
- div .vp-table {
128
- @include isolate-vp-raw {
129
- width: 100%;
130
- overflow-y: hidden;
131
- overflow-x: auto;
132
- margin-bottom: 45px;
133
- }
134
-
135
- & > table {
136
- @include isolate-vp-raw {
137
- border-collapse: collapse;
138
- width: 100%;
139
- background-color: var(--bg-color);
140
- font-size: 14px;
141
- line-height: 1.5em;
142
- }
143
-
144
- tr {
145
- td:nth-child(2) {
146
- @include isolate-vp-raw {
147
- font-family: var(--font-family);
148
- }
149
- }
150
- }
151
-
152
- th,
153
- td {
154
- @include isolate-vp-raw {
155
- white-space: nowrap;
156
- border-top: 1px solid var(--border-color);
157
- border-bottom: 1px solid var(--border-color);
158
- padding: 0.6em 1em;
159
- text-align: left;
160
- max-width: 250px;
161
- white-space: pre-wrap;
162
- }
163
- }
164
-
165
- thead tr:first-child th {
166
- @include isolate-vp-raw {
167
- border-top: none;
168
- }
169
- }
170
-
171
- tbody tr td:first-child {
172
- @include isolate-vp-raw {
173
- font-family: var(--font-family-mono);
174
- }
175
- }
176
- }
177
- }
178
-
179
- .header-anchor:before {
180
- @include isolate-vp-raw {
181
- content: '#';
182
- }
183
- }
184
-
185
- a.header-anchor {
186
- @include isolate-vp-raw {
187
- position: absolute;
188
- margin-top: 0.125em;
189
- margin-left: -0.87em;
190
- padding-right: 0.23em;
191
- font-size: 0.85em;
192
- opacity: 0;
193
- }
194
- }
195
-
196
- h1:hover .header-anchor,
197
- h1:focus .header-anchor,
198
- h2:hover .header-anchor,
199
- h2:focus .header-anchor,
200
- h3:hover .header-anchor,
201
- h3:focus .header-anchor,
202
- h4:hover .header-anchor,
203
- h4:focus .header-anchor,
204
- h5:hover .header-anchor,
205
- h5:focus .header-anchor,
206
- h6:hover .header-anchor,
207
- h6:focus .header-anchor {
208
- @include isolate-vp-raw {
209
- opacity: 1;
210
- }
211
- }
212
-
213
- .custom-block {
214
- .custom-block-title {
215
- @include isolate-vp-raw {
216
- font-weight: 700;
217
- }
218
- }
219
-
220
- p:not(.custom-block-title) {
221
- @include isolate-vp-raw {
222
- font-size: 0.9rem;
223
- }
224
- }
225
-
226
- &.tip {
227
- @include isolate-vp-raw {
228
- padding: 8px 16px;
229
- background-color: var(--block-tip-bg-color);
230
- border-radius: 4px;
231
- border-left: 5px solid var(--el-color-primary);
232
- margin: 20px 0;
233
- }
234
- }
235
-
236
- &.warning {
237
- @include isolate-vp-raw {
238
- padding: 8px 16px;
239
- background-color: var(--block-warning-bg-color);
240
- border-radius: 4px;
241
- border-left: 5px solid var(--el-color-danger);
242
- margin: 20px 0;
243
- }
244
- }
245
- }
246
-
247
- blockquote {
248
- @include isolate-vp-raw {
249
- margin: 1rem 0;
250
- border-left: 0.2rem solid var(--el-border-color);
251
- padding: 0.25rem 0 0.25rem 1rem;
252
- font-size: 1rem;
253
- color: var(--text-color-lighter);
254
- }
255
- }
256
-
257
- blockquote > p {
258
- @include isolate-vp-raw {
259
- margin: 0;
260
- }
261
- }
262
-
263
- form {
264
- @include isolate-vp-raw {
265
- margin: 0;
266
- }
267
- }
268
-
269
- details summary {
270
- @include isolate-vp-raw {
271
- margin: 16px 0;
272
- font-size: 18px;
273
- font-weight: 600;
274
- cursor: pointer;
275
- }
276
- }
277
-
278
- figure {
279
- @include isolate-vp-raw {
280
- margin: 0;
281
- }
282
- }
283
-
284
- img {
285
- @include isolate-vp-raw {
286
- max-width: 100%;
287
- }
288
- }
289
-
290
- ul,
291
- ol {
292
- @include isolate-vp-raw {
293
- padding-left: 1.25em;
294
- }
295
- }
296
-
297
- li > ul,
298
- li > ol {
299
- @include isolate-vp-raw {
300
- margin: 0;
301
- }
302
- }
303
-
304
- p,
305
- ol,
306
- ul {
307
- @include isolate-vp-raw {
308
- margin: 1rem 0;
309
- line-height: 1.7;
310
- list-style-type: disc;
311
- }
312
- }
313
-
314
- ol > li {
315
- @include isolate-vp-raw {
316
- list-style: auto;
317
- }
318
- }
319
-
320
- .ep-task-list {
321
- @include isolate-vp-raw {
322
- padding-left: 0;
323
- }
324
-
325
- .el-checkbox {
326
- @include isolate-vp-raw {
327
- --el-checkbox-checked-text-color: var(--vp-c-brand);
328
- cursor: unset;
329
- }
330
- }
331
- .el-checkbox__input {
332
- @include isolate-vp-raw {
333
- cursor: unset;
334
- }
335
- }
336
- .el-checkbox__inner:hover {
337
- @include isolate-vp-raw {
338
- border: var(--el-checkbox-input-border);
339
- }
340
- }
341
- .el-checkbox__input.is-checked .el-checkbox__inner {
342
- @include isolate-vp-raw {
343
- background-color: var(--vp-c-brand);
344
- border-color: var(--vp-c-brand);
345
- }
346
- }
347
-
348
- & > li {
349
- @include isolate-vp-raw {
350
- list-style: none;
351
- }
352
- }
353
- }
354
-
355
- hr {
356
- @include isolate-vp-raw {
357
- margin-top: 20px;
358
- margin-bottom: 20px;
359
- border: 0;
360
- border-top: 1px solid var(--el-border-color-lighter);
361
- }
362
- }
363
- }
1
+ @use 'sass:selector';
2
+
3
+ @mixin isolate-vp-raw {
4
+ @each $current-selector in & {
5
+ $guarded-selector: selector.append($current-selector, ':not(:where(.vp-raw, .vp-raw *))');
6
+ @at-root #{$guarded-selector} {
7
+ @content;
8
+ }
9
+ }
10
+ }
11
+
12
+ .doc-content {
13
+ h1 {
14
+ @include isolate-vp-raw {
15
+ margin-bottom: 2rem;
16
+ font-weight: 600;
17
+ font-size: 1.9rem;
18
+ }
19
+ }
20
+
21
+ h2 {
22
+ @include isolate-vp-raw {
23
+ margin-top: 2.25rem;
24
+ margin-bottom: 1.25rem;
25
+ padding-bottom: 0.3rem;
26
+ line-height: 1.25;
27
+ font-size: 1.65rem;
28
+ font-weight: 600;
29
+ }
30
+ }
31
+
32
+ h3 {
33
+ @include isolate-vp-raw {
34
+ font-size: 1.35rem;
35
+ margin-top: 2rem;
36
+ font-weight: 600;
37
+ }
38
+ }
39
+
40
+ h4 {
41
+ @include isolate-vp-raw {
42
+ font-size: 1.15rem;
43
+ font-weight: 600;
44
+ }
45
+ }
46
+
47
+ h5 {
48
+ @include isolate-vp-raw {
49
+ font-weight: 600;
50
+ }
51
+ }
52
+
53
+ h2 + h3 {
54
+ @include isolate-vp-raw {
55
+ margin-top: 1.5rem;
56
+ }
57
+ }
58
+
59
+ h3 + h4 {
60
+ @include isolate-vp-raw {
61
+ margin-top: 1rem;
62
+ }
63
+ }
64
+
65
+ p {
66
+ @include isolate-vp-raw {
67
+ margin: 1rem 0;
68
+ line-height: 1.7;
69
+ }
70
+ }
71
+
72
+ a {
73
+ @include isolate-vp-raw {
74
+ font-weight: 500;
75
+ text-decoration: inherit;
76
+ color: var(--vp-c-brand);
77
+ display: inline;
78
+ align-items: center;
79
+ }
80
+ }
81
+
82
+ a:hover {
83
+ @include isolate-vp-raw {
84
+ color: var(--vp-c-brand-3);
85
+ }
86
+ }
87
+
88
+ a .link-icon {
89
+ @include isolate-vp-raw {
90
+ margin-left: 0.25rem;
91
+ height: 1.2em;
92
+ width: 1em;
93
+ display: inline;
94
+ vertical-align: text-bottom;
95
+ }
96
+ }
97
+
98
+ h1,
99
+ h2,
100
+ h3,
101
+ h4,
102
+ h5,
103
+ h6 {
104
+ @include isolate-vp-raw {
105
+ display: flex;
106
+ align-items: center;
107
+ color: var(--el-text-color-regular);
108
+
109
+ // Special case for handling tagged header.
110
+ .el-tag,
111
+ .vp-tag {
112
+ @include isolate-vp-raw {
113
+ margin-left: 8px;
114
+ }
115
+ }
116
+ }
117
+ }
118
+
119
+ @media screen and (min-width: 480px) {
120
+ h1 {
121
+ @include isolate-vp-raw {
122
+ font-size: 2.2rem;
123
+ }
124
+ }
125
+ }
126
+
127
+ div .vp-table {
128
+ @include isolate-vp-raw {
129
+ width: 100%;
130
+ overflow-y: hidden;
131
+ overflow-x: auto;
132
+ margin-bottom: 45px;
133
+ }
134
+
135
+ & > table {
136
+ @include isolate-vp-raw {
137
+ border-collapse: collapse;
138
+ width: 100%;
139
+ background-color: var(--bg-color);
140
+ font-size: 14px;
141
+ line-height: 1.5em;
142
+ }
143
+
144
+ tr {
145
+ td:nth-child(2) {
146
+ @include isolate-vp-raw {
147
+ font-family: var(--font-family);
148
+ }
149
+ }
150
+ }
151
+
152
+ th,
153
+ td {
154
+ @include isolate-vp-raw {
155
+ white-space: nowrap;
156
+ border-top: 1px solid var(--border-color);
157
+ border-bottom: 1px solid var(--border-color);
158
+ padding: 0.6em 1em;
159
+ text-align: left;
160
+ max-width: 250px;
161
+ white-space: pre-wrap;
162
+ }
163
+ }
164
+
165
+ thead tr:first-child th {
166
+ @include isolate-vp-raw {
167
+ border-top: none;
168
+ }
169
+ }
170
+
171
+ tbody tr td:first-child {
172
+ @include isolate-vp-raw {
173
+ font-family: var(--font-family-mono);
174
+ }
175
+ }
176
+ }
177
+ }
178
+
179
+ .header-anchor:before {
180
+ @include isolate-vp-raw {
181
+ content: '#';
182
+ }
183
+ }
184
+
185
+ a.header-anchor {
186
+ @include isolate-vp-raw {
187
+ position: absolute;
188
+ margin-top: 0.125em;
189
+ margin-left: -0.87em;
190
+ padding-right: 0.23em;
191
+ font-size: 0.85em;
192
+ opacity: 0;
193
+ }
194
+ }
195
+
196
+ h1:hover .header-anchor,
197
+ h1:focus .header-anchor,
198
+ h2:hover .header-anchor,
199
+ h2:focus .header-anchor,
200
+ h3:hover .header-anchor,
201
+ h3:focus .header-anchor,
202
+ h4:hover .header-anchor,
203
+ h4:focus .header-anchor,
204
+ h5:hover .header-anchor,
205
+ h5:focus .header-anchor,
206
+ h6:hover .header-anchor,
207
+ h6:focus .header-anchor {
208
+ @include isolate-vp-raw {
209
+ opacity: 1;
210
+ }
211
+ }
212
+
213
+ .custom-block {
214
+ .custom-block-title {
215
+ @include isolate-vp-raw {
216
+ font-weight: 700;
217
+ }
218
+ }
219
+
220
+ p:not(.custom-block-title) {
221
+ @include isolate-vp-raw {
222
+ font-size: 0.9rem;
223
+ }
224
+ }
225
+
226
+ &.tip {
227
+ @include isolate-vp-raw {
228
+ padding: 8px 16px;
229
+ background-color: var(--block-tip-bg-color);
230
+ border-radius: 4px;
231
+ border-left: 5px solid var(--el-color-primary);
232
+ margin: 20px 0;
233
+ }
234
+ }
235
+
236
+ &.warning {
237
+ @include isolate-vp-raw {
238
+ padding: 8px 16px;
239
+ background-color: var(--block-warning-bg-color);
240
+ border-radius: 4px;
241
+ border-left: 5px solid var(--el-color-danger);
242
+ margin: 20px 0;
243
+ }
244
+ }
245
+ }
246
+
247
+ blockquote {
248
+ @include isolate-vp-raw {
249
+ margin: 1rem 0;
250
+ border-left: 0.2rem solid var(--el-border-color);
251
+ padding: 0.25rem 0 0.25rem 1rem;
252
+ font-size: 1rem;
253
+ color: var(--text-color-lighter);
254
+ }
255
+ }
256
+
257
+ blockquote > p {
258
+ @include isolate-vp-raw {
259
+ margin: 0;
260
+ }
261
+ }
262
+
263
+ form {
264
+ @include isolate-vp-raw {
265
+ margin: 0;
266
+ }
267
+ }
268
+
269
+ details summary {
270
+ @include isolate-vp-raw {
271
+ margin: 16px 0;
272
+ font-size: 18px;
273
+ font-weight: 600;
274
+ cursor: pointer;
275
+ }
276
+ }
277
+
278
+ figure {
279
+ @include isolate-vp-raw {
280
+ margin: 0;
281
+ }
282
+ }
283
+
284
+ img {
285
+ @include isolate-vp-raw {
286
+ max-width: 100%;
287
+ }
288
+ }
289
+
290
+ ul,
291
+ ol {
292
+ @include isolate-vp-raw {
293
+ padding-left: 1.25em;
294
+ }
295
+ }
296
+
297
+ li > ul,
298
+ li > ol {
299
+ @include isolate-vp-raw {
300
+ margin: 0;
301
+ }
302
+ }
303
+
304
+ p,
305
+ ol,
306
+ ul {
307
+ @include isolate-vp-raw {
308
+ margin: 1rem 0;
309
+ line-height: 1.7;
310
+ list-style-type: disc;
311
+ }
312
+ }
313
+
314
+ ol > li {
315
+ @include isolate-vp-raw {
316
+ list-style: auto;
317
+ }
318
+ }
319
+
320
+ .ep-task-list {
321
+ @include isolate-vp-raw {
322
+ padding-left: 0;
323
+ }
324
+
325
+ .el-checkbox {
326
+ @include isolate-vp-raw {
327
+ --el-checkbox-checked-text-color: var(--vp-c-brand);
328
+ cursor: unset;
329
+ }
330
+ }
331
+ .el-checkbox__input {
332
+ @include isolate-vp-raw {
333
+ cursor: unset;
334
+ }
335
+ }
336
+ .el-checkbox__inner:hover {
337
+ @include isolate-vp-raw {
338
+ border: var(--el-checkbox-input-border);
339
+ }
340
+ }
341
+ .el-checkbox__input.is-checked .el-checkbox__inner {
342
+ @include isolate-vp-raw {
343
+ background-color: var(--vp-c-brand);
344
+ border-color: var(--vp-c-brand);
345
+ }
346
+ }
347
+
348
+ & > li {
349
+ @include isolate-vp-raw {
350
+ list-style: none;
351
+ }
352
+ }
353
+ }
354
+
355
+ hr {
356
+ @include isolate-vp-raw {
357
+ margin-top: 20px;
358
+ margin-bottom: 20px;
359
+ border: 0;
360
+ border-top: 1px solid var(--el-border-color-lighter);
361
+ }
362
+ }
363
+ }