vitepress-theme-element-plus 1.3.1 → 1.4.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.
Files changed (45) 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 +219 -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 +159 -156
  16. package/client/components/Link.vue +41 -41
  17. package/client/components/LocalNav.vue +160 -160
  18. package/client/components/MobilePreviewFrame.vue +175 -0
  19. package/client/components/MobilePreviewLayout.vue +140 -0
  20. package/client/components/Nav.vue +69 -69
  21. package/client/components/NavBar.vue +203 -203
  22. package/client/components/NavBarTitle.vue +89 -89
  23. package/client/components/Sidebar.vue +129 -129
  24. package/client/components/SidebarGroup.vue +51 -51
  25. package/client/components/SidebarItem.vue +304 -304
  26. package/client/components/ThemeToggler.vue +129 -129
  27. package/client/components/VPNavBarSearch.vue +23 -23
  28. package/client/hooks/useBackTop.ts +71 -71
  29. package/client/hooks/useLangs.ts +50 -50
  30. package/client/hooks/useSidebarControl.ts +78 -78
  31. package/client/hooks/useSize.ts +69 -69
  32. package/client/icons/dark.vue +8 -8
  33. package/client/icons/light.vue +8 -8
  34. package/client/mobile-preview.ts +60 -0
  35. package/client/utils/client/common.ts +49 -49
  36. package/client/utils/client/outline.ts +116 -116
  37. package/client/utils/common.ts +90 -90
  38. package/index.ts +57 -45
  39. package/package.json +2 -2
  40. package/shared/constants.ts +3 -3
  41. package/styles/base.scss +105 -105
  42. package/styles/code.scss +290 -290
  43. package/styles/doc-content.scss +363 -363
  44. package/styles/index.scss +71 -71
  45. package/styles/tag-content.scss +30 -30
package/client/components/Content.vue CHANGED
@@ -1,148 +1,148 @@
1
- <script setup lang="ts">
2
- import { useData } from 'vitepress'
3
- import VPPage from 'vitepress/dist/client/theme-default/components/VPPage.vue'
4
- import NotFound from 'vitepress/dist/client/theme-default/NotFound.vue'
5
- import { useLayout } from 'vitepress/theme'
6
- import { getCurrentInstance } from 'vue'
7
- import ApiTyping from './ApiTyping.vue'
8
- import VPDoc from './Doc.vue'
9
- import Footer from './Footer.vue'
10
- import FooterCopyright from './FooterCopyright.vue'
11
- import VPHome from './VPHome.vue'
12
-
13
- const { page, frontmatter } = useData()
14
- const { isHome, hasSidebar } = useLayout()
15
- const { appContext } = getCurrentInstance()
16
-
17
- appContext.app.component('ApiTyping', ApiTyping)
18
- </script>
19
-
20
- <template>
21
- <div id="VPContent" class="VPContent" :class="{ 'has-sidebar': hasSidebar, 'is-home': isHome }">
22
- <slot v-if="page.isNotFound" name="not-found">
23
- <NotFound />
24
- </slot>
25
-
26
- <VPPage v-else-if="frontmatter.layout === 'page'">
27
- <template #page-top>
28
- <slot name="page-top" />
29
- </template>
30
- <template #page-bottom>
31
- <slot name="page-bottom" />
32
- </template>
33
- </VPPage>
34
-
35
- <VPHome v-else-if="frontmatter.layout === 'home'">
36
- <template #home-hero-before>
37
- <slot name="home-hero-before" />
38
- </template>
39
- <template #home-hero-info-before>
40
- <slot name="home-hero-info-before" />
41
- </template>
42
- <template #home-hero-info>
43
- <slot name="home-hero-info" />
44
- </template>
45
- <template #home-hero-info-after>
46
- <slot name="home-hero-info-after" />
47
- </template>
48
- <template #home-hero-actions-after>
49
- <slot name="home-hero-actions-after" />
50
- </template>
51
- <template #home-hero-image>
52
- <slot name="home-hero-image" />
53
- </template>
54
- <template #home-hero-after>
55
- <slot name="home-hero-after" />
56
- </template>
57
- <template #home-features-before>
58
- <slot name="home-features-before" />
59
- </template>
60
- <template #home-features-after>
61
- <slot name="home-features-after" />
62
- </template>
63
- </VPHome>
64
-
65
- <component :is="frontmatter.layout" v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'" />
66
-
67
- <VPDoc v-else>
68
- <template #doc-top>
69
- <slot name="doc-top" />
70
- </template>
71
- <template #doc-bottom>
72
- <slot name="doc-bottom" />
73
- </template>
74
-
75
- <template #doc-footer-before>
76
- <slot name="doc-footer-before" />
77
- </template>
78
- <template #doc-before>
79
- <slot name="doc-before" />
80
- </template>
81
- <template #doc-after>
82
- <slot name="doc-after" />
83
- </template>
84
-
85
- <template #aside-top>
86
- <slot name="aside-top" />
87
- </template>
88
- <template #aside-outline-before>
89
- <slot name="aside-outline-before" />
90
- </template>
91
- <template #aside-outline-after>
92
- <slot name="aside-outline-after" />
93
- </template>
94
- <template #aside-ads-before>
95
- <slot name="aside-ads-before" />
96
- </template>
97
- <template #aside-ads-after>
98
- <slot name="aside-ads-after" />
99
- </template>
100
- <template #aside-bottom>
101
- <slot name="aside-bottom" />
102
- </template>
103
- </VPDoc>
104
- <Footer />
105
- <FooterCopyright v-if="isHome" />
106
- </div>
107
- </template>
108
-
109
- <style scoped>
110
- .VPContent {
111
- flex-grow: 1;
112
- flex-shrink: 0;
113
- margin: var(--vp-layout-top-height, 0px) auto 0;
114
- width: 100%;
115
- }
116
-
117
- .VPContent.is-home {
118
- width: 100%;
119
- max-width: 100%;
120
- }
121
-
122
- .VPContent.has-sidebar {
123
- margin: 0;
124
- }
125
-
126
- @media (min-width: 960px) {
127
- .VPContent {
128
- padding-top: calc(var(--vp-nav-height) + 47px);
129
- }
130
-
131
- .VPContent.has-sidebar {
132
- margin: var(--vp-layout-top-height, 0px) 0 0;
133
- padding-left: var(--vp-sidebar-width-small);
134
- }
135
- }
136
-
137
- @media screen and (min-width: 1440px) {
138
- .VPContent.has-sidebar {
139
- padding-left: calc(var(--vp-sidebar-width-small) + 32px);
140
- }
141
- }
142
-
143
- @media screen and (min-width: 1680px) {
144
- .VPContent.has-sidebar {
145
- padding-left: calc(var(--vp-sidebar-width-small) + 48px);
146
- }
147
- }
148
- </style>
1
+ <script setup lang="ts">
2
+ import { useData } from 'vitepress'
3
+ import VPPage from 'vitepress/dist/client/theme-default/components/VPPage.vue'
4
+ import NotFound from 'vitepress/dist/client/theme-default/NotFound.vue'
5
+ import { useLayout } from 'vitepress/theme'
6
+ import { getCurrentInstance } from 'vue'
7
+ import ApiTyping from './ApiTyping.vue'
8
+ import VPDoc from './Doc.vue'
9
+ import Footer from './Footer.vue'
10
+ import FooterCopyright from './FooterCopyright.vue'
11
+ import VPHome from './VPHome.vue'
12
+
13
+ const { page, frontmatter } = useData()
14
+ const { isHome, hasSidebar } = useLayout()
15
+ const { appContext } = getCurrentInstance()
16
+
17
+ appContext.app.component('ApiTyping', ApiTyping)
18
+ </script>
19
+
20
+ <template>
21
+ <div id="VPContent" class="VPContent" :class="{ 'has-sidebar': hasSidebar, 'is-home': isHome }">
22
+ <slot v-if="page.isNotFound" name="not-found">
23
+ <NotFound />
24
+ </slot>
25
+
26
+ <VPPage v-else-if="frontmatter.layout === 'page'">
27
+ <template #page-top>
28
+ <slot name="page-top" />
29
+ </template>
30
+ <template #page-bottom>
31
+ <slot name="page-bottom" />
32
+ </template>
33
+ </VPPage>
34
+
35
+ <VPHome v-else-if="frontmatter.layout === 'home'">
36
+ <template #home-hero-before>
37
+ <slot name="home-hero-before" />
38
+ </template>
39
+ <template #home-hero-info-before>
40
+ <slot name="home-hero-info-before" />
41
+ </template>
42
+ <template #home-hero-info>
43
+ <slot name="home-hero-info" />
44
+ </template>
45
+ <template #home-hero-info-after>
46
+ <slot name="home-hero-info-after" />
47
+ </template>
48
+ <template #home-hero-actions-after>
49
+ <slot name="home-hero-actions-after" />
50
+ </template>
51
+ <template #home-hero-image>
52
+ <slot name="home-hero-image" />
53
+ </template>
54
+ <template #home-hero-after>
55
+ <slot name="home-hero-after" />
56
+ </template>
57
+ <template #home-features-before>
58
+ <slot name="home-features-before" />
59
+ </template>
60
+ <template #home-features-after>
61
+ <slot name="home-features-after" />
62
+ </template>
63
+ </VPHome>
64
+
65
+ <component :is="frontmatter.layout" v-else-if="frontmatter.layout && frontmatter.layout !== 'doc'" />
66
+
67
+ <VPDoc v-else>
68
+ <template #doc-top>
69
+ <slot name="doc-top" />
70
+ </template>
71
+ <template #doc-bottom>
72
+ <slot name="doc-bottom" />
73
+ </template>
74
+
75
+ <template #doc-footer-before>
76
+ <slot name="doc-footer-before" />
77
+ </template>
78
+ <template #doc-before>
79
+ <slot name="doc-before" />
80
+ </template>
81
+ <template #doc-after>
82
+ <slot name="doc-after" />
83
+ </template>
84
+
85
+ <template #aside-top>
86
+ <slot name="aside-top" />
87
+ </template>
88
+ <template #aside-outline-before>
89
+ <slot name="aside-outline-before" />
90
+ </template>
91
+ <template #aside-outline-after>
92
+ <slot name="aside-outline-after" />
93
+ </template>
94
+ <template #aside-ads-before>
95
+ <slot name="aside-ads-before" />
96
+ </template>
97
+ <template #aside-ads-after>
98
+ <slot name="aside-ads-after" />
99
+ </template>
100
+ <template #aside-bottom>
101
+ <slot name="aside-bottom" />
102
+ </template>
103
+ </VPDoc>
104
+ <Footer />
105
+ <FooterCopyright v-if="isHome" />
106
+ </div>
107
+ </template>
108
+
109
+ <style scoped>
110
+ .VPContent {
111
+ flex-grow: 1;
112
+ flex-shrink: 0;
113
+ margin: var(--vp-layout-top-height, 0px) auto 0;
114
+ width: 100%;
115
+ }
116
+
117
+ .VPContent.is-home {
118
+ width: 100%;
119
+ max-width: 100%;
120
+ }
121
+
122
+ .VPContent.has-sidebar {
123
+ margin: 0;
124
+ }
125
+
126
+ @media (min-width: 960px) {
127
+ .VPContent {
128
+ padding-top: calc(var(--vp-nav-height) + 47px);
129
+ }
130
+
131
+ .VPContent.has-sidebar {
132
+ margin: var(--vp-layout-top-height, 0px) 0 0;
133
+ padding-left: var(--vp-sidebar-width-small);
134
+ }
135
+ }
136
+
137
+ @media screen and (min-width: 1440px) {
138
+ .VPContent.has-sidebar {
139
+ padding-left: calc(var(--vp-sidebar-width-small) + 32px);
140
+ }
141
+ }
142
+
143
+ @media screen and (min-width: 1680px) {
144
+ .VPContent.has-sidebar {
145
+ padding-left: calc(var(--vp-sidebar-width-small) + 48px);
146
+ }
147
+ }
148
+ </style>
package/client/components/DeprecatedTag.vue CHANGED
@@ -1,19 +1,19 @@
1
- <script lang="ts" setup>
2
- import { ElTag } from 'element-plus'
3
-
4
- defineProps<{
5
- version: string
6
- }>()
7
- </script>
8
-
9
- <template>
10
- <ElTag
11
- size="small"
12
- type="warning"
13
- effect="plain"
14
- hit
15
- round
16
- >
17
- deprecated
18
- </ElTag>
19
- </template>
1
+ <script lang="ts" setup>
2
+ import { ElTag } from 'element-plus'
3
+
4
+ defineProps<{
5
+ version: string
6
+ }>()
7
+ </script>
8
+
9
+ <template>
10
+ <ElTag
11
+ size="small"
12
+ type="warning"
13
+ effect="plain"
14
+ hit
15
+ round
16
+ >
17
+ deprecated
18
+ </ElTag>
19
+ </template>