@wlydfe/pro-ui 0.2.20 → 0.2.21

package/docs/.vitepress/theme/components/docs-code-demo.vue

@@ -0,0 +1,146 @@
+<template>
+  <ClientOnly>
+    <div class="docs-example-showcase" :data-path="path">
+      <AppAsyncComponent />
+    </div>
+    <div class="docs-example-btns" :data-path="path">
+      <el-tooltip content="在 Playground 中编辑">
+        <el-icon :size="size" @click="handleEditPlayground">
+          <svg
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+            width="1.2em"
+            height="1.2em"
+            data-v-5d9e4641=""
+          >
+            <path
+              d="M16 2v2h-1v3.243c0 1.158.251 2.301.736 3.352l4.282 9.276A1.5 1.5 0 0 1 18.656 22H5.344a1.5 1.5 0 0 1-1.362-2.129l4.282-9.276A7.994 7.994 0 0 0 9 7.243V4H8V2h8zm-2.612 8.001h-2.776c-.104.363-.23.721-.374 1.071l-.158.361L6.125 20h11.749l-3.954-8.567a9.978 9.978 0 0 1-.532-1.432zM11 7.243c0 .253-.01.506-.029.758h2.058a8.777 8.777 0 0 1-.021-.364L13 7.243V4h-2v3.243z"
+            ></path>
+          </svg>
+        </el-icon>
+      </el-tooltip>
+      <el-tooltip content="在 GitHub 中编辑">
+        <el-icon :size="size" @click="handleEdit"><EditPen /></el-icon>
+      </el-tooltip>
+      <el-tooltip content="复制代码">
+        <el-icon :size="size"><DocumentCopy v-copy="content" /></el-icon>
+      </el-tooltip>
+      <el-tooltip :content="show ? '收起源代码' : '查看源代码'">
+        <el-icon :size="size" @click="handleToggle">
+          <ArrowUp v-if="show" />
+          <ArrowDown v-else />
+        </el-icon>
+      </el-tooltip>
+    </div>
+    <div
+      :style="{
+        display: show ? 'block' : 'none'
+      }"
+      class="docs-example-language-vue language-vue"
+      :data-path="path"
+    >
+      <div class="content">
+        <highlightjs language="js" :code="decoded"></highlightjs>
+      </div>
+      <div class="line-numbers-wrapper">
+        <template v-for="item in total" :key="item">
+          <span class="line-number">
+            {{ item }}
+          </span>
+          <br />
+        </template>
+      </div>
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { DocumentCopy, ArrowDown, ArrowUp, EditPen, Position } from '@element-plus/icons-vue'
+import { getComponent } from '../../utils/getComponent'
+import { getPlaygroundEncoded } from '../../utils'
+
+// 编辑地址
+const editUrl = 'https://github.com/plus-pro-components/plus-pro-components/edit/dev/docs/examples'
+const editPlaygroundUrl = 'http://playground.plus-pro-components.com'
+// const editPlaygroundUrl = 'http://127.0.0.1:3002'
+
+// 自动加载 asyncRouter 文件夹下所有的异步路由
+const moduleFiles = import.meta.glob('../../../examples/**/*.vue', {
+  eager: true
+})
+
+const props = defineProps<{
+  source: string
+  path: string
+  rawSource: string
+}>()
+
+const show = ref(false)
+const total = ref(0)
+const size = 18
+
+const AppAsyncComponent = getComponent(moduleFiles, props.path)
+
+const handleToggle = () => {
+  show.value = !show.value
+}
+
+const decoded = computed(() => decodeURIComponent(props.source))
+const content = computed(() => decodeURIComponent(props.rawSource))
+
+// add line-number
+const tem = content.value.split('\r\n')
+total.value = tem.length
+
+// 去github编辑
+const handleEdit = () => {
+  const url = `${editUrl}/${props.path}.vue`
+  window.open(url, '_blank')
+}
+
+// 去Playground编辑
+const handleEditPlayground = () => {
+  const encoded = getPlaygroundEncoded(props.rawSource)
+  const url = `${editPlaygroundUrl}/#${encoded}`
+  window.open(url, '_blank')
+}
+</script>
+
+<style lang="scss" scoped>
+.docs-example-showcase {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px 4px 0 0;
+  padding: 20px;
+  overflow: auto;
+}
+.docs-example-btns {
+  border: 1px solid #dcdfe6;
+  border-top: 0;
+  padding: 20px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-radius: 0 0 4px 4px;
+  .el-icon {
+    cursor: pointer;
+    margin-left: 20px;
+    color: #747578;
+  }
+}
+.content {
+  padding-left: 32px;
+}
+
+.line-numbers-wrapper {
+  border-color: #dcdfe6;
+  line-height: 1.4;
+  padding-top: 11px;
+  user-select: none;
+  .line-number {
+    color: #aaa;
+    line-height: 1.4;
+  }
+}
+</style>

package/docs/.vitepress/theme/components/docs-markdown.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="docs-markdown-wrapper" v-html="parsed" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import MarkdownIt from 'markdown-it'
+
+const md = new MarkdownIt()
+
+const props = defineProps({
+  content: { type: String, required: true }
+})
+
+const parsed = computed(() => {
+  return md.render(props.content).replace(/<a/g, `<a target="_blank"`)
+})
+</script>
+
+<style>
+.docs-markdown-wrapper h3 {
+  margin-top: 1rem;
+}
+</style>

package/docs/.vitepress/theme/components/docs-tip.vue

@@ -0,0 +1,34 @@
+<template>
+  <ClientOnly>
+    <el-tooltip raw-content effect="light" trigger="click">
+      <template #content>
+        <code class="docs-tip-code">
+          {{ content }}
+        </code>
+      </template>
+      <el-icon :size="16" class="docs-tip-icon"><Warning /></el-icon>
+    </el-tooltip>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+import { Warning } from '@element-plus/icons-vue'
+
+defineProps({
+  content: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.docs-tip-code {
+  color: #0c61c9;
+  background-color: #f5f7fa;
+}
+.docs-tip-icon {
+  vertical-align: middle;
+  cursor: pointer;
+}
+</style>

package/docs/.vitepress/theme/components/layout.vue

@@ -0,0 +1,73 @@
+<!-- .vitepress/theme/Layout.vue -->
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { nextTick, provide } from 'vue'
+
+const { isDark } = useData()
+
+const enableTransitions = () =>
+  'startViewTransition' in document &&
+  window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+
+provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+  if (!enableTransitions()) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const clipPath = [
+    `circle(0px at ${x}px ${y}px)`,
+    `circle(${Math.hypot(
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y)
+    )}px at ${x}px ${y}px)`
+  ]
+
+  // @ts-ignore
+  await document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  }).ready
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    {
+      duration: 300,
+      easing: 'ease-in',
+      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
+    }
+  )
+})
+</script>
+
+<template>
+  <DefaultTheme.Layout />
+</template>
+
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+
+/* .VPSwitchAppearance {
+  width: 22px !important;
+}
+
+.VPSwitchAppearance .check {
+  transform: none !important;
+} */
+</style>

package/docs/.vitepress/theme/directives/index.ts

@@ -0,0 +1,43 @@
+import type { App } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const copy = {
+  mounted: function (el: any, { value }) {
+    el.$value = value
+
+    // el控件定义 onclick 事件
+    el.onclick = () => {
+      // 动态创建 textarea 标签
+      const textarea = document.createElement('textarea')
+      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
+      textarea.readOnly = true
+      textarea.style.position = 'absolute'
+      textarea.style.left = '-9999px'
+      // 将要 copy 的值赋给 textarea 标签的 value 属性
+      textarea.value = el.$value
+      // 将 textarea 插入到 body 中
+      document.body.appendChild(textarea)
+      // 选中值并复制
+      textarea.select()
+      const result = document.execCommand('Copy')
+      if (result) {
+        ElMessage.success('代码复制成功')
+      }
+      document.body.removeChild(textarea)
+    }
+    // 绑定点击事件，就是所谓的一键 copy 啦
+    el.addEventListener('click', el.handler)
+  },
+  // 当传进来的值更新的时候触发
+  beforeUpdate(el, { value }) {
+    el.$value = value
+  },
+  // 指令与元素解绑的时候，移除事件绑定
+  unmounted(el: any) {
+    el.removeEventListener('click', el.handler)
+  }
+}
+
+export default (app: App) => {
+  app.directive('copy', copy)
+}

package/docs/.vitepress/theme/index.ts

@@ -0,0 +1,41 @@
+import DefaultTheme from 'vitepress/theme'
+import type { App } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import plusZhCn from 'plus-pro-components/es/locale/lang/zh-cn'
+// @ts-ignore
+import PlusProComponents from 'plus-pro-components-main'
+// 导入plus-pro-components样式，alias 处理过，正常导入是plus-pro-components/index.min.css
+import 'plus-pro-components-css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+
+import 'highlight.js/lib/common'
+import hljsVuePlugin from '@highlightjs/vue-plugin/dist/highlightjs-vue.esm.min.js'
+
+import DocsCodeDemo from './components/docs-code-demo.vue'
+import DocsChangelog from './components/docs-changelog.vue'
+import DocsMarkdown from './components/docs-markdown.vue'
+import DocsTip from './components/docs-tip.vue'
+import MyLayout from './components/layout.vue'
+
+import directive from './directives'
+import './styles/index.scss'
+
+export default {
+  extends: DefaultTheme,
+  Layout: MyLayout,
+  enhanceApp({ app }: { app: App }) {
+    app.use(ElementPlus, {
+      locale: { ...zhCn, ...plusZhCn }
+    })
+    app.component('highlightjs', hljsVuePlugin.component)
+
+    app.use(PlusProComponents as unknown as any)
+    app.component('DocsCodeDemo', DocsCodeDemo)
+    app.component('DocsChangelog', DocsChangelog)
+    app.component('DocsMarkdown', DocsMarkdown)
+    app.component('DocsTip', DocsTip)
+    directive(app)
+  }
+}

package/docs/.vitepress/theme/styles/code.scss

@@ -0,0 +1,59 @@
+/* 本文件只放code样式 */
+// @import 'highlight.js/styles/vs2015.css';
+@import 'highlight.js/styles/color-brewer.css';
+
+.main {
+  /* vitePres默认 */
+  .github-light {
+    [class*='language-'] pre {
+      padding: 0 10px;
+
+      box-sizing: border-box;
+      overflow: auto hidden;
+    }
+  }
+  /* 组件文档自定义code */
+  .docs-example-language-vue {
+    &.language-vue {
+      margin: 0;
+      border-radius: 0;
+      overflow-y: hidden;
+      padding-top: 10px;
+
+      pre {
+        font-family: monospace, monospace;
+        font-size: 1em;
+        overflow: unset;
+        line-height: 1.4;
+        padding: 0;
+      }
+
+      code {
+        padding: 0 10px 20px;
+        line-height: 1.4;
+        font-size: 14px;
+        color: var(--el-text-color-primary);
+        background-color: var(--vp-code-block-bg);
+      }
+
+      .hljs-keyword {
+        color: #c792ea;
+      }
+      .hljs-attr,
+      .hljs-tag {
+        color: #717c11;
+      }
+      /* number boolean */
+      .hljs-number,
+      .hljs-literal {
+        color: #c25205;
+      }
+      .hljs-string {
+        color: #0b8235;
+      }
+      .hljs-variable {
+        color: var(--el-text-color-primary);
+      }
+    }
+  }
+}

package/docs/.vitepress/theme/styles/index.scss

@@ -0,0 +1,168 @@
+@import './code';
+
+$primaryColor: #0072ff;
+
+// 选
+:root {
+  --vp-c-green: #{$primaryColor};
+  --vp-c-green-light: #2a87f8;
+  --vp-c-green-lighter: #3e93fb;
+
+  --vp-c-green-dark: #046ae7;
+  --vp-c-green-darker: #0362d7;
+  --vp-layout-max-width: 90%;
+  --vp-sidebar-bg-color: #fff;
+  --vp-sidebar-width: 240px;
+  --prism-block-padding-y: 1.2em;
+
+  --vp-c-indigo-1: #{$primaryColor};
+  --vp-c-indigo-3: #{$primaryColor};
+  --vp-c-bg-alt: var(--el-fill-color-light);
+  --vp-c-brand-2: #2a87f8;
+}
+
+.dark {
+  --vp-sidebar-bg-color: #161618;
+}
+
+.VPContent .VPDoc.has-aside .content-container {
+  max-width: 1200px;
+}
+
+.wechat-link {
+  &::before {
+    content: 'fei1446628111';
+    display: inline-block;
+  }
+}
+
+.tagline-link {
+  font-weight: 500;
+  color: var(--vp-c-brand);
+  text-decoration-style: dotted;
+  transition: color 0.25s;
+}
+
+.VPSidebar {
+  .nav {
+    .item {
+      h2.text {
+        font-size: 18px;
+      }
+    }
+
+    .items {
+      padding-left: 10px;
+    }
+  }
+}
+
+.vp-doc {
+  .plus-steps-form .el-steps {
+    line-height: initial;
+  }
+  .el-pager li {
+    margin: 0;
+  }
+  .el-sub-menu .el-menu {
+    margin-left: 0;
+  }
+  .el-descriptions__table {
+    margin: 0;
+  }
+  h2 {
+    border-top: 0;
+  }
+  .el-link {
+    color: var(--el-link-text-color);
+  }
+  .el-link {
+    text-decoration: none;
+  }
+
+  .el-table__header,
+  .el-table__body {
+    margin: 0;
+  }
+  .el-table tr {
+    border-top: 0;
+  }
+  .plus-sidebar {
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .el-menu-item {
+    margin-top: 0;
+  }
+  th,
+  td {
+    border: 0;
+    min-width: 92px;
+  }
+  tr:nth-child(2n) {
+    background-color: unset;
+  }
+
+  tr:nth-last-child(1) {
+    border-bottom: 1px solid var(--vp-c-divider);
+  }
+
+  table {
+    display: table;
+    width: 100%;
+    .el-tag {
+      display: unset;
+      margin-left: 4px;
+    }
+  }
+
+  .el-table {
+    table {
+      display: block;
+    }
+  }
+
+  .plus-header .set-language-dropdown {
+    background-color: #fff;
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
+  }
+
+  .tip a {
+    text-decoration: underline;
+  }
+
+  .el-text a {
+    text-decoration: none;
+  }
+
+  .custom-block.warning a {
+    color: var(--vp-c-brand-1);
+  }
+}
+
+.plus-image-preview-footer__icon {
+  box-sizing: content-box;
+}
+
+.copyright {
+  white-space: pre;
+
+  .copyright-link {
+    color: var(--vp-c-brand);
+  }
+}
+
+.miit-link {
+  display: none;
+}
+
+.design-iframe {
+  width: 100%;
+  height: 80vh;
+  border: 0;
+  margin-top: 20px;
+}

package/docs/.vitepress/utils/getComponent.ts

@@ -0,0 +1,4 @@
+export const getComponent = (moduleFiles: Record<string, any>, path: string) => {
+  const key = Object.keys(moduleFiles).find(i => i.endsWith(`/examples/${path}.vue`)) as string
+  return moduleFiles[key]?.default
+}

package/docs/.vitepress/utils/highlight.ts

@@ -0,0 +1,16 @@
+import hljs from 'highlight.js'
+
+function wrap(code: string, lang: string): string {
+  return `<pre v-pre><code language="javascript">${code}\r\n</code></pre>`
+}
+
+export const highlight = (str: string, lang: string) => {
+  if (!lang) {
+    return wrap(str, 'text')
+  }
+  lang = lang.toLowerCase()
+
+  const code = hljs.highlight(str, { language: 'javascript' }).value
+
+  return wrap(code, 'text')
+}

package/docs/.vitepress/utils/index.ts

@@ -0,0 +1,11 @@
+import { utoa } from './utils'
+const MAIN_FILE_NAME = 'App.vue'
+
+export const getPlaygroundEncoded = (source: string) => {
+  const code = decodeURIComponent(source)
+  const originCode = {
+    [MAIN_FILE_NAME]: code
+  }
+  const encoded = utoa(JSON.stringify(originCode))
+  return encoded
+}

package/docs/.vitepress/utils/jump.ts

@@ -0,0 +1,28 @@
+import cookie from 'js-cookie'
+import { ElMessageBox } from 'element-plus'
+
+const isJumpKey = 'Plus-Pro-Components-Jump-Key'
+const github = 'plus-pro-components.github.io'
+const official = 'plus-pro-components.com'
+
+/**
+ * 文档地址自动跳转
+ */
+export const jump = () => {
+  const isZh = navigator.language === 'zh-CN'
+  const isGithub = location.host === github
+  const isJump = isZh && isGithub && !cookie.get(isJumpKey)
+
+  if (isJump) {
+    ElMessageBox.confirm('检测到你的访问地址是国内，是否跳转到国内镜像文档？', {
+      confirmButtonText: '是',
+      callback: (action: string) => {
+        if (action === 'cancel') {
+          cookie.set(isJumpKey, '1')
+        } else {
+          location.href = location.href.replace(github, official)
+        }
+      }
+    })
+  }
+}