vuepress-theme-uniapp-official 1.4.15 → 1.4.16

package/global-components/CompatibilityTable.d.ts

@@ -0,0 +1,12 @@
+interface Header {
+  title: string
+  width?: number
+  align?: 'left' | 'center' | 'right'
+}
+
+type Row = string[]
+
+export interface MdTableOptions {
+  rows: Row[]
+  headers: Header[]
+}

package/global-components/CompatibilityTable.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { ref, defineProps } from 'vue'
+import Popover from './Popover.vue'
+
+const props = defineProps({
+  table: String
+})
+
+/** @type {MdTableOptions} */
+const TABLE_OPTIONS = JSON.parse(props.table.replace(/\\/g, ''))
+
+const resolveTableCelContent = (content) => {
+  if (/~~.+~~/.test(content)) {
+    return `<s>${content}</s>`
+  }
+  return content
+}
+</script>
+
+<template>
+  <Popover>
+    <table>
+      <thead>
+        <tr>
+          <th v-for="header in TABLE_OPTIONS.headers" :style="header.align ? { textAlign: header.align } : ''"
+            :key="header.title">
+            {{ header.title }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, rowIndex) in TABLE_OPTIONS.rows">
+          <td v-for="(cel, celIndex) in row" :key="celIndex"
+            :style="TABLE_OPTIONS.headers[rowIndex].align ? { textAlign: TABLE_OPTIONS.headers[rowIndex].align } : ''">
+            <span v-html="resolveTableCelContent(cel)" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </Popover>
+</template>
+
+<style lang="stylus" scoped>
+table {
+  margin: 0;
+}
+</style>

package/global-components/Popover.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { ref } from 'vue'
+import { getNavbarHeight } from '../helper'
+
+const props = defineProps({
+  table: String
+})
+
+const infoHover = ref(false)
+let iconMouseOptions = {}
+
+const iconMouseEnter = (e) => {
+  const { top, left, bottom, right, height, width } = e.target.getBoundingClientRect()
+  iconMouseOptions = {
+    top,
+    left,
+    bottom,
+    right,
+    height,
+    width
+  }
+  infoHover.value = true
+}
+
+const iconMouseLeave = (e) => {
+  infoHover.value = false
+}
+
+const vPopover = {
+  inserted(el, binding, vnode, prevVnode) {
+    const ThemeDefaultContent = document.querySelector('.theme-default-content')
+    if (ThemeDefaultContent) {
+      ThemeDefaultContent.appendChild(el)
+    }
+  },
+  componentUpdated(el, binding, vnode, prevVnode) {
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+    const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
+    const screenWidth = document.documentElement.clientWidth
+
+    const { width, height } = el.getBoundingClientRect()
+    const { left: targetLeft, top: targetTop, bottom: targetBottom, right: targetRight, height: targetHeight, width: targetWidth } = iconMouseOptions
+    const OFFSET = 10
+    const NAVBAR_HEIGHT = getNavbarHeight()
+
+    // 默认 icon 正中间位置
+    const HALF_WIDTH = width / 2
+    const HALF_TARGET_WIDTH = targetWidth / 2
+    const TOP = height // + OFFSET
+    const LEFT = HALF_TARGET_WIDTH - HALF_WIDTH
+
+    const DEFAULT_TOP = targetTop + scrollTop
+    const DEFAULT_LEFT = targetLeft + scrollLeft
+
+    let currentTop = DEFAULT_TOP - TOP
+    let currentLeft = DEFAULT_LEFT + LEFT
+
+    if (targetTop - NAVBAR_HEIGHT - TOP - OFFSET > 0) {
+      // 上方空间够
+      currentTop = currentTop - OFFSET
+    } else {
+      // 上方空间不够
+      currentTop = currentTop + (height + targetHeight) + OFFSET
+    }
+
+    const RIGHT_OFFSET = (screenWidth - (targetLeft + HALF_TARGET_WIDTH)) - HALF_WIDTH
+    // const LEFT_OFFSET = (screenWidth - targetLeft - HALF_TARGET_WIDTH) - HALF_WIDTH
+
+    if (RIGHT_OFFSET < 0) {
+      // 右侧空间不够
+      currentLeft = screenWidth - width
+    }
+    el.style.top = `${currentTop < 0 ? 0 : currentTop}px`
+    el.style.left = `${currentLeft < 0 ? 0 : currentLeft}px`
+  }
+}
+</script>
+
+<template>
+  <div class="popover-container">
+    <i class="info" :class="{ 'info-hover': infoHover }" @mouseenter="iconMouseEnter" @mouseleave="iconMouseLeave">
+      <svg t="1715917545486" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="10306">
+        <path
+          d="M512 958.016C266.08 958.016 65.984 757.952 65.984 512 65.984 266.08 266.08 65.984 512 65.984c245.952 0 446.016 200.064 446.016 446.016 0 245.952-200.064 446.016-446.016 446.016z m0-828.032c-210.656 0-382.016 171.36-382.016 382.016 0 210.624 171.36 382.016 382.016 382.016 210.624 0 382.016-171.36 382.016-382.016S722.624 129.984 512 129.984z"
+          p-id="10307" fill="#2c3e50"></path>
+        <path
+          d="M464 304a1.5 1.5 0 1 0 96 0 1.5 1.5 0 1 0-96 0zM512 768c-17.664 0-32-14.304-32-32V448c0-17.664 14.336-32 32-32s32 14.336 32 32v288c0 17.696-14.336 32-32 32z"
+          p-id="10308" fill="#2c3e50"></path>
+      </svg>
+    </i>
+    <transition name="fade-in">
+      <div class="popover-content-container" v-show="infoHover" v-popover>
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+
+</template>
+
+<style lang="stylus" scoped>
+.popover-container {
+  position: relative;
+
+  .info {
+    user-select: none;
+    display: inline-block;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+    border-radius: 5px;
+  }
+
+  .info-hover {
+    background-color: #f0f0f0;
+  }
+}
+
+.popover-content-container {
+  position: absolute;
+  background-color: #fff;
+  z-index: 1;
+  border-radius: 5px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  transition: opacity .1s cubic-bezier(0.57, 0.85, 0.85, 0.57);
+  box-sizing: border-box;
+  padding: 10px;
+
+  &.show {
+    opacity: 1;
+  }
+}
+
+.fade-in-enter-active,.fade-in-leave-active {
+    transition: all .1s cubic-bezier(.55,0,.1,1)
+}
+
+.fade-in-enter,.fade-in-leave-active {
+    opacity: 0
+}
+
+</style>

package/index.js

@@ -41,6 +41,7 @@ module.exports = (themeConfig, ctx, pluginAPI) => {
 	})
 
 	pluginAPI.options.extendMarkdown.add('vuepress-theme-uni-app-md-plugins', (md) =>{
+		md.core.ruler.disable('emoji', true)
 		md.use(require('markdown-it-attrs'), {
 			leftDelimiter: '#{',
 			rightDelimiter: '}',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-uniapp-official",
-  "version": "1.4.15",
+  "version": "1.4.16",
   "description": "uni-app official website theme for vuepress",
   "main": "index.js",
   "repository": {
@@ -39,7 +39,7 @@
     "algoliasearch": "^4.13.1",
     "clipboard": "^2.0.11",
     "vuepress-plugin-check-md2": "^1.0.5",
-    "vuepress-plugin-expandable-row": "^1.0.6",
+    "vuepress-plugin-expandable-row": "^1.0.7",
     "vuepress-plugin-juejin-style-copy": "^1.0.4",
     "vuepress-plugin-mermaidjs": "1.9.1",
     "vuepress-plugin-named-chunks": "^1.1.4",