vuepress-theme-uniapp-official 1.4.26 → 1.4.27

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/global-components/CodeSimulator.vue +231 -88
  2. package/global-components/Popover.vue +6 -2
  3. package/package.json +6 -5
package/global-components/CodeSimulator.vue CHANGED
@@ -1,56 +1,178 @@
1
1
  <script>
2
- import clientRootMixin from 'vuepress-plugin-juejin-style-copy/clientRootMixin';
2
+ import clientRootMixin from 'vuepress-plugin-juejin-style-copy/clientRootMixin'
3
+ import Popover from './Popover.vue'
4
+
5
+ const qrCodeLogoD =
6
+ 'M597.333333 597.333333h85.333334v-85.333333h85.333333v128h-85.333333v42.666667h-85.333334v-42.666667h-85.333333v-128h85.333333v85.333333z m-384-85.333333h256v256H213.333333v-256z m85.333334 85.333333v85.333334h85.333333v-85.333334H298.666667zM213.333333 213.333333h256v256H213.333333V213.333333z m85.333334 85.333334v85.333333h85.333333V298.666667H298.666667z m213.333333-85.333334h256v256h-256V213.333333z m85.333333 85.333334v85.333333h85.333334V298.666667h-85.333334z m85.333334 384h85.333333v85.333333h-85.333333v-85.333333z m-170.666667 0h85.333333v85.333333h-85.333333v-85.333333z'
7
+ const appRedirectKeyword = 'appRedirect'
8
+ let imageIndex = 0
3
9
 
4
10
  export default {
5
- mixins:[clientRootMixin],
6
- props:{
7
- src:{
8
- type:String,
9
- default:''
10
- }
11
- },
12
- data(){
13
- return {
14
- activeIndex: 0
15
- }
16
- },
17
- mounted(){
18
- this.$copyUpdates && this.$copyUpdates()
19
- this.onWindowResize()
20
- window.addEventListener('resize', this.onWindowResize)
21
- },
22
- beforeDestroy(){
23
- window.removeEventListener('resize', this.onWindowResize)
24
- },
25
- methods:{
26
- onWindowResize(){
27
- const contentWidth = getComputedStyle(document.querySelector('.theme-default-content')).width
28
- if (window.matchMedia('(max-width: 410px)').matches) {
29
- this.$refs.codeIframe.style.maxWidth = contentWidth
30
- }
31
- },
32
- onClick(index){
33
- this.activeIndex = index
34
- },
35
- createdDom(h,node){
36
- let headerDom = []
37
- node.forEach((v, index) => {
38
- headerDom.push(h('p', {
39
- class: `pages-tabs-header-text ${this.activeIndex === index ? 'pages-tabs--active' : ''}`, on: {
40
- click: (e) => {
41
- this.onClick(index)
42
- }
43
- }
44
- }, v.title),)
45
- })
46
- return this.renderDom(h, h('div', { class: 'page-tabs' }, [
47
- h('div', { class: 'pages-tabs-header' }, headerDom),
48
- h('div', { class: 'page-snippet-code', key: this.activeIndex }, [node[this.activeIndex].node]),
49
- ]))
50
- },
51
- renderDom(h,node){
52
- return h('div', { class: 'page-runtime' }, [
53
- h('div', { class: 'page-snippet' , style: { height: this.src ? '667px' : 'auto' }}, [node]),
11
+ mixins: [clientRootMixin],
12
+ components: { Popover },
13
+ props: {
14
+ src: {
15
+ type: String,
16
+ default: '',
17
+ },
18
+ },
19
+ data() {
20
+ return {
21
+ activeIndex: 0,
22
+ appRedirectSrc: '',
23
+ qrCodeImageClass: `qrcode-img_${++imageIndex}`,
24
+ qrCodeImageParentDisplay: 'none',
25
+ firstRender: true,
26
+ }
27
+ },
28
+ mounted() {
29
+ this.$copyUpdates && this.$copyUpdates()
30
+ this.onWindowResize()
31
+ this.qrCodeImage = document.querySelector(`img.${this.qrCodeImageClass}`)
32
+ if (this.qrCodeImage) {
33
+ this.qrCodeImageContainer = this.qrCodeImage.parentElement
34
+ }
35
+ window.addEventListener('resize', this.onWindowResize)
36
+ },
37
+ beforeDestroy() {
38
+ window.removeEventListener('resize', this.onWindowResize)
39
+ },
40
+ methods: {
41
+ onWindowResize() {
42
+ const contentWidth = getComputedStyle(document.querySelector('.theme-default-content')).width
43
+ if (window.matchMedia('(max-width: 410px)').matches) {
44
+ this.$refs.codeIframe.style.maxWidth = contentWidth
45
+ }
46
+ },
47
+ onClick(index) {
48
+ this.activeIndex = index
49
+ },
50
+ createQRCodeSVG(h, style) {
51
+ if (this.appRedirectSrc) {
52
+ return h(
53
+ 'a',
54
+ {
55
+ style: Object.assign(
56
+ {
57
+ position: 'absolute',
58
+ top: '5px',
59
+ right: '12px',
60
+ cursor: 'pointer',
61
+ 'z-index': 5,
62
+ },
63
+ style
64
+ ),
65
+ attrs: {
66
+ href: this.appRedirectSrc,
67
+ target: '_blank',
68
+ },
69
+ },
70
+ [
71
+ h('Popover', {
72
+ on: {
73
+ show: () => {
74
+ if (this.appRedirectSrc) {
75
+ if (!this.qrCodeImage.src) {
76
+ import('qr-code-with-logo').then(({ default: QrCodeWithLogo }) => {
77
+ QrCodeWithLogo.toImage({
78
+ image: this.qrCodeImage,
79
+ content: this.appRedirectSrc,
80
+ width: 256,
81
+ nodeQrCodeOptions: {
82
+ margin: 2,
83
+ },
84
+ })
85
+ })
86
+ }
87
+ }
88
+ },
89
+ },
90
+ scopedSlots: {
91
+ reference: props =>
92
+ h(
93
+ 'svg',
94
+ {
95
+ class: 'app-redirect-icon',
96
+ style: {
97
+ width: '32px',
98
+ height: '32px',
99
+ },
100
+ attrs: {
101
+ t: Date.now(),
102
+ viewBox: '0 0 1024 1024',
103
+ version: '1.1',
104
+ xmlns: 'http://www.w3.org/2000/svg',
105
+ },
106
+ },
107
+ [
108
+ h('path', {
109
+ attrs: {
110
+ d: qrCodeLogoD,
111
+ fill: this.src ? '#fff' : '#aaa',
112
+ },
113
+ }),
114
+ ]
115
+ ),
116
+ default: props =>
117
+ h(
118
+ 'div',
119
+ {
120
+ style: {
121
+ display: 'flex',
122
+ width: '150px',
123
+ height: '170px',
124
+ 'flex-direction': 'column',
125
+ 'justify-content': 'center',
126
+ 'align-items': 'center',
127
+ },
128
+ },
129
+ [
130
+ h('img', {
131
+ class: this.qrCodeImageClass,
132
+ style: {
133
+ width: '150px',
134
+ height: '150px',
135
+ 'max-width': 'unset !important',
136
+ },
137
+ }),
138
+ h('span', { style: { 'font-weight': 'bold' } }, '手机扫码体验'),
139
+ ]
140
+ ),
141
+ },
142
+ }),
143
+ ]
144
+ )
145
+ }
146
+ },
147
+ wrapHeader(h, node) {
148
+ let headerDom = []
149
+ node.forEach((v, index) => {
150
+ headerDom.push(
151
+ h(
152
+ 'p',
153
+ {
154
+ class: `pages-tabs-header-text ${this.activeIndex === index ? 'pages-tabs--active' : ''}`,
155
+ on: {
156
+ click: e => {
157
+ this.onClick(index)
158
+ },
159
+ },
160
+ },
161
+ v.title
162
+ )
163
+ )
164
+ })
165
+ return this.renderDom(
166
+ h,
167
+ h('div', { class: 'page-tabs' }, [
168
+ h('div', { class: 'pages-tabs-header' }, headerDom),
169
+ h('div', { class: 'page-snippet-code', key: this.activeIndex }, [node[this.activeIndex].node]),
170
+ ])
171
+ )
172
+ },
173
+ renderDom(h, node) {
174
+ return h('div', { class: 'page-runtime', style: { position: 'relative' } }, [
175
+ h('div', { class: 'page-snippet', style: { height: this.src ? '667px' : 'auto' } }, [node]),
54
176
  h('div', { class: 'code-content', style: { display: this.src ? 'block' : 'none' } }, [
55
177
  h('iframe', {
56
178
  class: 'code-iframe',
@@ -62,46 +184,67 @@ export default {
62
184
  ref: 'codeIframe',
63
185
  }),
64
186
  ]),
187
+ this.createQRCodeSVG(h),
65
188
  ])
66
- }
67
- },
68
- render(h){
69
- const columns = this.$slots.default || []
70
- let boxObj = []
71
- let realDom = []
72
- columns.forEach((v, i) => {
73
- if (v.tag && v.children) {
74
- realDom.push(v)
75
- }
76
- })
77
- realDom.forEach((vnode, index) => {
78
- let code = vnode.children[0]
79
- if (vnode.tag === 'div' && code.tag === 'pre') {
80
- let i = index - 1
81
- if (i >= 0) {
82
- let textDom = realDom[i]
83
- if (textDom.tag === 'blockquote') {
84
- let text = textDom.children[0]
85
- let p = text.children[0]
86
- boxObj.push({
87
- title: p.text ? p.text : 'title',
88
- node: vnode
89
- })
90
- }
189
+ },
190
+ },
191
+ render(h) {
192
+ const columns = this.$slots.default || []
193
+ let boxObj = []
194
+ let realDom = []
195
+ columns.forEach((v, i) => {
196
+ if (v.tag && v.children) {
197
+ realDom.push(v)
198
+ }
199
+ })
200
+ for (let index = 0; index < realDom.length; index++) {
201
+ const vnode = realDom[index]
202
+ let code = vnode.children[0]
203
+
204
+ if (vnode.tag === 'blockquote' && code.tag === 'p' && this.firstRender) {
205
+ const pFirstChild = code.children[0]
206
+ if (pFirstChild) {
207
+ const text = pFirstChild.text
208
+ if (text && text.trim().indexOf(appRedirectKeyword) === 0) {
209
+ this.appRedirectSrc = text.trim().split(' ')[1] || ''
210
+ realDom.splice(index, 1)
211
+ this.$slots.default.splice(index, 1)
212
+ index--
213
+ continue
214
+ }
215
+ }
216
+ }
91
217
 
92
- }
93
- }
94
- })
95
- if (boxObj.length > 0) {
96
- return h('div', null, [this.createdDom(h, boxObj)])
97
- } else {
98
- if (this.src) {
99
- return this.renderDom(h, this.$slots.default)
100
- } else {
101
- return h('div', null, this.$slots.default)
102
- }
103
- }
104
- }
218
+ if (vnode.tag === 'div' && code.tag === 'pre') {
219
+ let i = index - 1
220
+ if (i >= 0) {
221
+ let textDom = realDom[i]
222
+ if (textDom.tag === 'blockquote') {
223
+ let text = textDom.children[0]
224
+ let p = text.children[0]
225
+ boxObj.push({
226
+ title: p.text ? p.text : 'title',
227
+ node: vnode,
228
+ })
229
+ }
230
+ }
231
+ }
232
+ }
233
+ this.firstRender = false
234
+ if (boxObj.length > 0) {
235
+ return h('div', null, [this.wrapHeader(h, boxObj)])
236
+ } else {
237
+ if (this.src) {
238
+ return this.renderDom(h, this.$slots.default)
239
+ } else {
240
+ const appRedirectQrCode = this.createQRCodeSVG(h, { right: '100px', top: '0' })
241
+ return h('div', appRedirectQrCode ? { style: { position: 'relative' } } : null, [
242
+ appRedirectQrCode,
243
+ this.$slots.default,
244
+ ])
245
+ }
246
+ }
247
+ },
105
248
  }
106
249
  </script>
107
250
 
package/global-components/Popover.vue CHANGED
@@ -1,7 +1,9 @@
1
1
  <script setup>
2
- import { ref, useSlots } from 'vue'
2
+ import { ref, useSlots, defineEmits } from 'vue'
3
3
  import { getNavbarHeight } from '../util'
4
4
 
5
+ const emit = defineEmits(['show', 'hide'])
6
+
5
7
  const props = defineProps({
6
8
  table: String
7
9
  })
@@ -21,10 +23,12 @@ const mouseEnter = (e) => {
21
23
  width
22
24
  }
23
25
  infoHover.value = true
26
+ emit('show')
24
27
  }
25
28
 
26
29
  const mouseLeave = (e) => {
27
30
  infoHover.value = false
31
+ emit('hide')
28
32
  }
29
33
 
30
34
  const vPopover = {
@@ -109,7 +113,7 @@ const vPopover = {
109
113
  .popover-content-wrapper {
110
114
  position: absolute;
111
115
  background-color: #fff;
112
- z-index: 1;
116
+ z-index: 5;
113
117
  border-radius: 5px;
114
118
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
115
119
  transition: opacity .1s cubic-bezier(0.57, 0.85, 0.85, 0.57);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vuepress-theme-uniapp-official",
3
- "version": "1.4.26",
3
+ "version": "1.4.27",
4
4
  "description": "uni-app official website theme for vuepress",
5
5
  "main": "index.js",
6
6
  "repository": {
@@ -38,14 +38,15 @@
38
38
  "@vuepress/plugin-back-to-top": "^1.9.5",
39
39
  "algoliasearch": "^4.13.1",
40
40
  "clipboard": "^2.0.11",
41
+ "markdown-it-attrs": "^4.1.6",
42
+ "markdown-it-raw-table": "^1.0.0",
43
+ "markdown-it-task-lists": "^2.1.1",
44
+ "qr-code-with-logo": "^1.1.0",
41
45
  "vuepress-plugin-check-md2": "^1.0.5",
42
46
  "vuepress-plugin-expandable-row": "^1.0.9",
43
47
  "vuepress-plugin-juejin-style-copy": "^1.0.4",
44
48
  "vuepress-plugin-mermaidjs": "1.9.1",
45
49
  "vuepress-plugin-named-chunks": "^1.1.4",
46
- "vuepress-plugin-zooming": "^1.1.8",
47
- "markdown-it-attrs": "^4.1.6",
48
- "markdown-it-raw-table": "^1.0.0",
49
- "markdown-it-task-lists": "^2.1.1"
50
+ "vuepress-plugin-zooming": "^1.1.8"
50
51
  }
51
52
  }