vuepress-theme-uniapp-official 1.4.20 → 1.4.21

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 (3) hide show
  1. package/components/Toc-top.vue +79 -85
  2. package/components/Toc.vue +157 -151
  3. package/package.json +1 -1
package/components/Toc-top.vue CHANGED
@@ -1,95 +1,89 @@
1
1
  <template>
2
- <div class="table-of-contents">
3
- <div
4
- v-for="item in showHeaders"
5
- ref="chairTocItem"
6
- class="vuepress-toc-item-top"
7
- :class="[`vuepress-toc-h${item.level}`]"
8
- >
9
- <a
10
- :style="{ paddingLeft: createPaddingLeft(item.level) }"
11
- :href="`#${item.slug}`"
12
- :title="item.title.replace(/\\/g, '')"
13
- >
14
- {{ item.title.replace(/\\/g, '') }}
15
- </a>
16
- </div>
17
- <span
18
- v-if="pageHeaders && pageHeaders.length > expandHeaderLength"
19
- class="expand-button"
20
- @click="expandClick"
21
- >
22
- {{ !expand ? collapseText : expandText }}
23
- <uni-icon :type="!expand ? 'bottom' : 'top'"></uni-icon>
24
- </span>
25
- </div>
2
+ <div class="table-of-contents">
3
+ <div
4
+ v-for="item in showHeaders"
5
+ ref="chairTocItem"
6
+ class="vuepress-toc-item-top"
7
+ :class="[`vuepress-toc-h${item.level}`]"
8
+ >
9
+ <RouterLink
10
+ :style="{ paddingLeft: createPaddingLeft(item.level) }"
11
+ :to="`#${item.slug}`"
12
+ :title="item.title.replace(/\\/g, '')"
13
+ >
14
+ {{ item.title.replace(/\\/g, '') }}
15
+ </RouterLink>
16
+ </div>
17
+ <span v-if="pageHeaders && pageHeaders.length > expandHeaderLength" class="expand-button" @click="expandClick">
18
+ {{ !expand ? collapseText : expandText }}
19
+ <uni-icon :type="!expand ? 'bottom' : 'top'"></uni-icon>
20
+ </span>
21
+ </div>
26
22
  </template>
27
23
 
28
24
  <script>
29
- import toc from '../mixin/toc';
30
- import tocConfig from '@theme-config/toc';
25
+ import toc from '../mixin/toc'
26
+ import tocConfig from '@theme-config/toc'
31
27
 
32
- const { expandText, collapseText } = tocConfig;
28
+ const { expandText, collapseText } = tocConfig
33
29
 
34
- export default {
35
- mixins: [toc],
36
- data: () => ({
37
- expand: false,
38
- expandText,
39
- collapseText,
40
- expandHeaderLength: 10,
41
- }),
42
- computed: {
43
- showHeaders() {
44
- return this.expand
45
- ? this.pageHeaders
46
- : this.pageHeaders.slice(0, this.expandHeaderLength);
47
- },
48
- },
49
- methods: {
50
- expandClick() {
51
- this.expand = !this.expand;
52
- },
53
- },
54
- };
30
+ export default {
31
+ mixins: [toc],
32
+ data: () => ({
33
+ expand: false,
34
+ expandText,
35
+ collapseText,
36
+ expandHeaderLength: 10,
37
+ }),
38
+ computed: {
39
+ showHeaders() {
40
+ return this.expand ? this.pageHeaders : this.pageHeaders.slice(0, this.expandHeaderLength)
41
+ },
42
+ },
43
+ methods: {
44
+ expandClick() {
45
+ this.expand = !this.expand
46
+ },
47
+ },
48
+ }
55
49
  </script>
56
50
 
57
51
  <style lang="stylus" scoped>
58
- $paddingLeft = 1.5rem
59
- .table-of-contents
60
- margin 0 auto
61
- padding 2rem 2.5rem 0 2.5rem
62
- @media (max-width: $MQNarrow)
63
- padding 2rem 2rem 0 2rem
64
- @media (max-width: $MQMobileNarrow)
65
- padding 1.5rem 1.5rem 0 1.5rem
66
- // border-left: 2px solid #e6e6e6
67
- .expand-button
68
- padding-left $paddingLeft
69
- border-left 2px solid rgba(0, 0, 0, 0.08)
70
- color #666
71
- &:hover
72
- cursor pointer
73
- color $accentColor
74
- .vuepress-toc-item-top
75
- position relative
76
- padding 0.1rem 0.6rem 0.1rem $paddingLeft
77
- line-height 1.5rem
78
- border-left 2px solid rgba(0, 0, 0, 0.08)
79
- overflow hidden
80
- a
81
- // display block
82
- // color $textColor
83
- // width 100%
84
- box-sizing border-box
85
- font-size 15px
86
- font-weight 400
87
- text-decoration none
88
- transition color 0.3s
89
- overflow hidden
90
- text-overflow ellipsis
91
- white-space nowrap
92
- /* for i in range(2, 6)
93
- .vuepress-toc-h{i} a
94
- padding-left 1rem * (i - 1) */
52
+ $paddingLeft = 1.5rem
53
+ .table-of-contents
54
+ margin 0 auto
55
+ padding 2rem 2.5rem 0 2.5rem
56
+ @media (max-width: $MQNarrow)
57
+ padding 2rem 2rem 0 2rem
58
+ @media (max-width: $MQMobileNarrow)
59
+ padding 1.5rem 1.5rem 0 1.5rem
60
+ // border-left: 2px solid #e6e6e6
61
+ .expand-button
62
+ padding-left $paddingLeft
63
+ border-left 2px solid rgba(0, 0, 0, 0.08)
64
+ color #666
65
+ &:hover
66
+ cursor pointer
67
+ color $accentColor
68
+ .vuepress-toc-item-top
69
+ position relative
70
+ padding 0.1rem 0.6rem 0.1rem $paddingLeft
71
+ line-height 1.5rem
72
+ border-left 2px solid rgba(0, 0, 0, 0.08)
73
+ overflow hidden
74
+ a
75
+ // display block
76
+ // color $textColor
77
+ // width 100%
78
+ box-sizing border-box
79
+ font-size 15px
80
+ font-weight 400
81
+ text-decoration none
82
+ transition color 0.3s
83
+ overflow hidden
84
+ text-overflow ellipsis
85
+ white-space nowrap
86
+ /* for i in range(2, 6)
87
+ .vuepress-toc-h{i} a
88
+ padding-left 1rem * (i - 1) */
95
89
  </style>
package/components/Toc.vue CHANGED
@@ -1,165 +1,171 @@
1
1
  <template>
2
- <Sticker ref="sticker" :class="['vuepress-toc', visible ? '' : 'table-of-contents-sticker']" v-bind="$attrs">
3
- <h5>{{ onThisPage }}</h5>
4
- <!-- :key="item.slug" -->
5
- <div v-for="(item, index) in pageHeaders" ref="chairTocItem" class="vuepress-toc-item"
6
- :class="[`vuepress-toc-h${item.level}`, { active: activeIndex === index }]">
7
- <a :style="{ paddingLeft: createPaddingLeft(item.level) }" :href="`#${item.slug}`" :title="item.title.replace(/\\/g, '')">
8
- {{ item.title.replace(/\\/g, '') }}
9
- </a>
10
- </div>
11
- </Sticker>
2
+ <Sticker ref="sticker" :class="['vuepress-toc', visible ? '' : 'table-of-contents-sticker']" v-bind="$attrs">
3
+ <h5>{{ onThisPage }}</h5>
4
+ <!-- :key="item.slug" -->
5
+ <div
6
+ v-for="(item, index) in pageHeaders"
7
+ ref="chairTocItem"
8
+ class="vuepress-toc-item"
9
+ :class="[`vuepress-toc-h${item.level}`, { active: activeIndex === index }]"
10
+ >
11
+ <RouterLink
12
+ :style="{ paddingLeft: createPaddingLeft(item.level) }"
13
+ :to="`#${item.slug}`"
14
+ :title="item.title.replace(/\\/g, '')"
15
+ >
16
+ {{ item.title.replace(/\\/g, '') }}
17
+ </RouterLink>
18
+ </div>
19
+ </Sticker>
12
20
  </template>
13
21
 
14
22
  <script>
15
- import Sticker from './Sticker.vue';
16
- import toc from '../mixin/toc';
17
- import tocConfig from '@theme-config/toc';
23
+ import Sticker from './Sticker.vue'
24
+ import toc from '../mixin/toc'
25
+ import tocConfig from '@theme-config/toc'
18
26
 
19
- const { onThisPage } = tocConfig;
27
+ const { onThisPage } = tocConfig
20
28
 
21
- let initTop;
29
+ let initTop
22
30
  // get offset top
23
31
  function getAbsoluteTop(dom) {
24
- return dom && dom.getBoundingClientRect
25
- ? dom.getBoundingClientRect().top +
26
- document.body.scrollTop +
27
- document.documentElement.scrollTop
28
- : 0;
32
+ return dom && dom.getBoundingClientRect
33
+ ? dom.getBoundingClientRect().top + document.body.scrollTop + document.documentElement.scrollTop
34
+ : 0
29
35
  }
30
36
  export default {
31
- mixins: [toc],
32
- components: {
33
- Sticker,
34
- },
35
- data() {
36
- return {
37
- activeIndex: 0,
38
- tocConfig,
39
- onThisPage,
40
- };
41
- },
42
- watch: {
43
- activeIndex() {
44
- const items = this.$refs.chairTocItem || [];
45
- const dom = items[this.activeIndex];
46
- if (!dom) return;
47
- const rect = dom.getBoundingClientRect();
48
- const wrapperRect = this.$el.getBoundingClientRect();
49
- const top = rect.top - wrapperRect.top;
50
- if (top < 20) {
51
- this.$el.scrollTop = this.$el.scrollTop + top - 20;
52
- } else if (top + rect.height > wrapperRect.height) {
53
- this.$el.scrollTop += rect.top - (wrapperRect.height - rect.height);
54
- }
55
- },
56
- $route() { },
57
- },
58
- mounted() {
59
- // sync visible to parent component
60
- const syncVisible = () => {
61
- this.$emit('visible-change', this.visible);
62
- };
63
- syncVisible();
64
- this.$watch('visible', syncVisible);
65
- // binding event
66
- setTimeout(() => this._onScroll(), 1000);
67
- this._onScroll = () => this.onScroll();
68
- this._onHashChange = () => {
69
- const hash = decodeURIComponent(location.hash.substring(1));
70
- const index = (this.pageHeaders || []).findIndex(h => h.slug === hash);
71
- if (index >= 0) this.activeIndex = index;
72
- const dom = hash && document.getElementById(hash);
73
- if (dom) window.scrollTo(0, getAbsoluteTop(dom) - 20);
74
- };
75
- window.addEventListener('scroll', this._onScroll);
76
- // window.addEventListener('hashchange', this._onHashChange);
77
- const sideBar = document.querySelector('.sidebar');
78
- this.$refs.sticker.$el.style.top = sideBar && sideBar.style && sideBar.style.top;
79
- },
80
- beforeDestroy() {
81
- window.removeEventListener('scroll', this._onScroll);
82
- window.removeEventListener('hashchange', this._onHashChange);
83
- },
84
- methods: {
85
- onScroll() {
86
- if (initTop === undefined) {
87
- initTop = getAbsoluteTop(this.$el);
88
- }
89
- // update position
90
- const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
91
- const headings = this.pageHeaders || [];
92
- // change active toc with scrolling
93
- let i = 0;
94
- const addLink = index => {
95
- this.activeIndex = index;
96
- };
97
- for (; i < headings.length; i++) {
98
- const dom = document.getElementById(headings[i].slug);
99
- const top = getAbsoluteTop(dom);
100
- if (top - 50 < scrollTop) {
101
- addLink(i);
102
- } else {
103
- if (!i) addLink(i);
104
- break;
105
- }
106
- }
107
- },
108
- triggerEvt() {
109
- this._onScroll();
110
- this._onHashChange();
111
- },
112
- },
113
- };
37
+ mixins: [toc],
38
+ components: {
39
+ Sticker,
40
+ },
41
+ data() {
42
+ return {
43
+ activeIndex: 0,
44
+ tocConfig,
45
+ onThisPage,
46
+ }
47
+ },
48
+ watch: {
49
+ activeIndex() {
50
+ const items = this.$refs.chairTocItem || []
51
+ const dom = items[this.activeIndex]
52
+ if (!dom) return
53
+ const rect = dom.getBoundingClientRect()
54
+ const wrapperRect = this.$el.getBoundingClientRect()
55
+ const top = rect.top - wrapperRect.top
56
+ if (top < 20) {
57
+ this.$el.scrollTop = this.$el.scrollTop + top - 20
58
+ } else if (top + rect.height > wrapperRect.height) {
59
+ this.$el.scrollTop += rect.top - (wrapperRect.height - rect.height)
60
+ }
61
+ },
62
+ $route() {},
63
+ },
64
+ mounted() {
65
+ // sync visible to parent component
66
+ const syncVisible = () => {
67
+ this.$emit('visible-change', this.visible)
68
+ }
69
+ syncVisible()
70
+ this.$watch('visible', syncVisible)
71
+ // binding event
72
+ setTimeout(() => this._onScroll(), 1000)
73
+ this._onScroll = () => this.onScroll()
74
+ this._onHashChange = () => {
75
+ const hash = decodeURIComponent(location.hash.substring(1))
76
+ const index = (this.pageHeaders || []).findIndex(h => h.slug === hash)
77
+ if (index >= 0) this.activeIndex = index
78
+ const dom = hash && document.getElementById(hash)
79
+ if (dom) window.scrollTo(0, getAbsoluteTop(dom) - 20)
80
+ }
81
+ window.addEventListener('scroll', this._onScroll)
82
+ // window.addEventListener('hashchange', this._onHashChange);
83
+ const sideBar = document.querySelector('.sidebar')
84
+ this.$refs.sticker.$el.style.top = sideBar && sideBar.style && sideBar.style.top
85
+ },
86
+ beforeDestroy() {
87
+ window.removeEventListener('scroll', this._onScroll)
88
+ window.removeEventListener('hashchange', this._onHashChange)
89
+ },
90
+ methods: {
91
+ onScroll() {
92
+ if (initTop === undefined) {
93
+ initTop = getAbsoluteTop(this.$el)
94
+ }
95
+ // update position
96
+ const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
97
+ const headings = this.pageHeaders || []
98
+ // change active toc with scrolling
99
+ let i = 0
100
+ const addLink = index => {
101
+ this.activeIndex = index
102
+ }
103
+ for (; i < headings.length; i++) {
104
+ const dom = document.getElementById(headings[i].slug)
105
+ const top = getAbsoluteTop(dom)
106
+ if (top - 50 < scrollTop) {
107
+ addLink(i)
108
+ } else {
109
+ if (!i) addLink(i)
110
+ break
111
+ }
112
+ }
113
+ },
114
+ triggerEvt() {
115
+ this._onScroll()
116
+ this._onHashChange()
117
+ },
118
+ },
119
+ }
114
120
  </script>
115
121
 
116
122
  <style lang="stylus">
117
- .table-of-contents-sticker
118
- display none !important
119
- .vuepress-toc
120
- position fixed
121
- display none
122
- max-height 89vh
123
- width $vuepress-toc-width
124
- overflow-y hidden
125
- // margin-top $navbarHeight
126
- top $navbarHeight
127
- right 0
128
- box-sizing border-box
129
- background-color #fff
130
- /* background: #fff; */
131
- z-index 0
132
- .vuepress-toc-item
133
- position relative
134
- padding 0.1rem 0.6rem 0.1rem 1.5rem
135
- line-height 1.5rem
136
- border-left 2px solid rgba(0, 0, 0, 0.08)
137
- overflow hidden
138
- a
139
- display block
140
- color $textColor
141
- width 100%
142
- box-sizing border-box
143
- font-size 14px
144
- font-weight 400
145
- text-decoration none
146
- transition color 0.3s
147
- overflow hidden
148
- text-overflow ellipsis
149
- white-space nowrap
150
- &.active
151
- border-left-color $accentColor
152
- a
153
- color $accentColor
154
- &:hover
155
- a
156
- color $accentColor
157
- .vuepress-toc-h1 a
158
- .vuepress-toc-h2 a
159
- font-weight bold
160
- /* for i in range(2, 6)
161
- .vuepress-toc-h{i} a
162
- padding-left 1rem * (i - 1) */
163
- .vuepress-toc:hover
164
- overflow-y auto
123
+ .table-of-contents-sticker
124
+ display none !important
125
+ .vuepress-toc
126
+ position fixed
127
+ display none
128
+ max-height 89vh
129
+ width $vuepress-toc-width
130
+ overflow-y hidden
131
+ // margin-top $navbarHeight
132
+ top $navbarHeight
133
+ right 0
134
+ box-sizing border-box
135
+ background-color #fff
136
+ /* background: #fff; */
137
+ z-index 0
138
+ .vuepress-toc-item
139
+ position relative
140
+ padding 0.1rem 0.6rem 0.1rem 1.5rem
141
+ line-height 1.5rem
142
+ border-left 2px solid rgba(0, 0, 0, 0.08)
143
+ overflow hidden
144
+ a
145
+ display block
146
+ color $textColor
147
+ width 100%
148
+ box-sizing border-box
149
+ font-size 14px
150
+ font-weight 400
151
+ text-decoration none
152
+ transition color 0.3s
153
+ overflow hidden
154
+ text-overflow ellipsis
155
+ white-space nowrap
156
+ &.active
157
+ border-left-color $accentColor
158
+ a
159
+ color $accentColor
160
+ &:hover
161
+ a
162
+ color $accentColor
163
+ .vuepress-toc-h1 a
164
+ .vuepress-toc-h2 a
165
+ font-weight bold
166
+ /* for i in range(2, 6)
167
+ .vuepress-toc-h{i} a
168
+ padding-left 1rem * (i - 1) */
169
+ .vuepress-toc:hover
170
+ overflow-y auto
165
171
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vuepress-theme-uniapp-official",
3
- "version": "1.4.20",
3
+ "version": "1.4.21",
4
4
  "description": "uni-app official website theme for vuepress",
5
5
  "main": "index.js",
6
6
  "repository": {