vitepress-theme-element-plus 0.0.7 → 0.0.8

package/README.md

@@ -1,3 +1,3 @@
-# vitepress-theme-element-plus
-
-轻量的 VitePress 文档主题。
+# vitepress-theme-element-plus
+
+轻量的 VitePress 文档主题。

package/client/components/A11yTag.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-import { ElTag } from 'element-plus'
-</script>
-
-<template>
-  <ElTag
-    size="small"
-    effect="plain"
-    hit
-    round
-  >
-    a11y
-  </ElTag>
-</template>
-
-<style lang="scss" scoped>
-.el-tag {
-  color: #6222c2;
-}
-.el-tag.is-hit {
-  border-color: #9065db;
-}
-.dark .el-tag {
-  color: #9065db;
-}
-.dark .el-tag.is-hit {
-  border-color: #6222c2;
-}
-</style>
+<script setup lang="ts">
+import { ElTag } from 'element-plus'
+</script>
+
+<template>
+  <ElTag
+    size="small"
+    effect="plain"
+    hit
+    round
+  >
+    a11y
+  </ElTag>
+</template>
+
+<style lang="scss" scoped>
+.el-tag {
+  color: #6222c2;
+}
+.el-tag.is-hit {
+  border-color: #9065db;
+}
+.dark .el-tag {
+  color: #9065db;
+}
+.dark .el-tag.is-hit {
+  border-color: #6222c2;
+}
+</style>

package/client/components/ApiTyping.vue

@@ -1,54 +1,54 @@
-<script setup lang="ts">
-import { Warning } from '@element-plus/icons-vue'
-import { ElButton, ElTooltip } from 'element-plus'
-
-defineProps({
-  type: String,
-  details: String,
-})
-</script>
-
-<template>
-  <span class="api-typing-container">
-    <code class="api-typing">
-      {{ type }}
-    </code>
-    <ClientOnly>
-      <ElTooltip v-if="details" effect="light" trigger="click">
-        <ElButton
-          text
-          :icon="Warning"
-          aria-label="Type details"
-          class="api-typing__warning-icon"
-        />
-        <template #content>
-          <slot>
-            <div class="m-1" style="max-width: 600px">
-              <code
-                style="
-                  color: var(--code-tooltip-color);
-                  background-color: var(--code-tooltip-bg-color);
-                "
-              >
-                {{ details }}
-              </code>
-            </div>
-          </slot>
-        </template>
-      </ElTooltip>
-    </ClientOnly>
-  </span>
-</template>
-
-<style scoped lang="scss">
-.api-typing-container {
-  display: inline-flex;
-  align-items: center;
-}
-.api-typing {
-  margin-right: 4px;
-}
-.api-typing__warning-icon {
-  padding: 8px;
-}
-</style>
+<script setup lang="ts">
+import { Warning } from '@element-plus/icons-vue'
+import { ElButton, ElTooltip } from 'element-plus'
+
+defineProps({
+  type: String,
+  details: String,
+})
+</script>
+
+<template>
+  <span class="api-typing-container">
+    <code class="api-typing">
+      {{ type }}
+    </code>
+    <ClientOnly>
+      <ElTooltip v-if="details" effect="light" trigger="click">
+        <ElButton
+          text
+          :icon="Warning"
+          aria-label="Type details"
+          class="api-typing__warning-icon"
+        />
+        <template #content>
+          <slot>
+            <div class="m-1" style="max-width: 600px">
+              <code
+                style="
+                  color: var(--code-tooltip-color);
+                  background-color: var(--code-tooltip-bg-color);
+                "
+              >
+                {{ details }}
+              </code>
+            </div>
+          </slot>
+        </template>
+      </ElTooltip>
+    </ClientOnly>
+  </span>
+</template>
+
+<style scoped lang="scss">
+.api-typing-container {
+  display: inline-flex;
+  align-items: center;
+}
+.api-typing {
+  margin-right: 4px;
+}
+.api-typing__warning-icon {
+  padding: 8px;
+}
+</style>

package/client/components/Backdrop.vue

@@ -1,41 +1,41 @@
-<script lang="ts" setup>
-import { useSidebar } from '../hooks/useSidebar'
-
-const { isOpen, close } = useSidebar()
-</script>
-
-<template>
-  <transition name="fade">
-    <div v-if="isOpen" class="VPBackdrop" @click="close()" />
-  </transition>
-</template>
-
-<style scoped lang="scss">
-.VPBackdrop {
-  position: fixed;
-  top: 0;
-  /*rtl:ignore*/
-  right: 0;
-  bottom: 0;
-  /*rtl:ignore*/
-  left: 0;
-  z-index: var(--vp-z-index-backdrop);
-  background: var(--vp-backdrop-bg-color);
-  transition: opacity 0.5s;
-}
-
-.VPBackdrop.fade-enter-from,
-.VPBackdrop.fade-leave-to {
-  opacity: 0;
-}
-
-.VPBackdrop.fade-leave-active {
-  transition-duration: 0.25s;
-}
-
-@media (min-width: 1440px) {
-  .VPBackdrop {
-    display: none;
-  }
-}
-</style>
+<script lang="ts" setup>
+import { useSidebar } from '../hooks/useSidebar'
+
+const { isOpen, close } = useSidebar()
+</script>
+
+<template>
+  <transition name="fade">
+    <div v-if="isOpen" class="VPBackdrop" @click="close()" />
+  </transition>
+</template>
+
+<style scoped lang="scss">
+.VPBackdrop {
+  position: fixed;
+  top: 0;
+  /*rtl:ignore*/
+  right: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-backdrop);
+  background: var(--vp-backdrop-bg-color);
+  transition: opacity 0.5s;
+}
+
+.VPBackdrop.fade-enter-from,
+.VPBackdrop.fade-leave-to {
+  opacity: 0;
+}
+
+.VPBackdrop.fade-leave-active {
+  transition-duration: 0.25s;
+}
+
+@media (min-width: 1440px) {
+  .VPBackdrop {
+    display: none;
+  }
+}
+</style>

package/client/components/Bili.vue

@@ -1,94 +1,94 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { useSize } from '../hooks/useSize'
-
-interface Props {
-  /**
-   * aid
-   */
-  aid?: string
-  /**
-   * bvid
-   */
-  bvid?: string
-  /**
-   * cid
-   */
-  cid?: string
-  /**
-   * 是否开启自动播放
-   */
-  autoplay?: boolean
-  /**
-   * 指定播放时间
-   */
-  time?: number | string
-  /**
-   * 指定视频分p
-   */
-  page?: number
-  /**
-   * 宽度
-   */
-  width?: number
-  /**
-   * 高度
-   */
-  height?: number
-  /**
-   * 尺寸比例
-   */
-  ratio?: number
-
-  /**
-   * 是否展示封面
-   * @default true
-   */
-  poster?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
-  ratio: 16 / 9,
-  poster: true,
-})
-
-const VIDEO_LINK = 'https://player.bilibili.com/player.html'
-const { el, width, height, resize } = useSize<HTMLIFrameElement>(props)
-const loaded = ref(false)
-
-const videoLink = computed(() => {
-  const { aid, bvid, cid, autoplay, time, page, poster } = props
-
-  return aid && cid
-    ? `${VIDEO_LINK}?aid=${aid}&cid=${cid}&t=${time}&autoplay=${
-      autoplay ? 1 : 0
-    }&p=${page}&poster=${poster ? 1 : 0}`
-    : bvid
-      ? `${VIDEO_LINK}?bvid=${bvid}&t=${time}&autoplay=${autoplay ? 1 : 0}&poster=${poster ? 1 : 0}`
-      : ''
-})
-
-function handleLoad() {
-  loaded.value = true
-  resize()
-}
-</script>
-
-<template>
-  <iframe
-    ref="el"
-    class="bili-iframe"
-    :src="videoLink"
-    :style="{ width, height }"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
-    @load="handleLoad"
-  />
-</template>
-
-<style lang="scss" scoped>
-.bili-iframe {
-  border-radius: 8px;
-  border: none;
-  background-color: #000;
-  transition: all 0.3s;
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useSize } from '../hooks/useSize'
+
+interface Props {
+  /**
+   * aid
+   */
+  aid?: string
+  /**
+   * bvid
+   */
+  bvid?: string
+  /**
+   * cid
+   */
+  cid?: string
+  /**
+   * 是否开启自动播放
+   */
+  autoplay?: boolean
+  /**
+   * 指定播放时间
+   */
+  time?: number | string
+  /**
+   * 指定视频分p
+   */
+  page?: number
+  /**
+   * 宽度
+   */
+  width?: number
+  /**
+   * 高度
+   */
+  height?: number
+  /**
+   * 尺寸比例
+   */
+  ratio?: number
+
+  /**
+   * 是否展示封面
+   * @default true
+   */
+  poster?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  ratio: 16 / 9,
+  poster: true,
+})
+
+const VIDEO_LINK = 'https://player.bilibili.com/player.html'
+const { el, width, height, resize } = useSize<HTMLIFrameElement>(props)
+const loaded = ref(false)
+
+const videoLink = computed(() => {
+  const { aid, bvid, cid, autoplay, time, page, poster } = props
+
+  return aid && cid
+    ? `${VIDEO_LINK}?aid=${aid}&cid=${cid}&t=${time}&autoplay=${
+      autoplay ? 1 : 0
+    }&p=${page}&poster=${poster ? 1 : 0}`
+    : bvid
+      ? `${VIDEO_LINK}?bvid=${bvid}&t=${time}&autoplay=${autoplay ? 1 : 0}&poster=${poster ? 1 : 0}`
+      : ''
+})
+
+function handleLoad() {
+  loaded.value = true
+  resize()
+}
+</script>
+
+<template>
+  <iframe
+    ref="el"
+    class="bili-iframe"
+    :src="videoLink"
+    :style="{ width, height }"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
+    @load="handleLoad"
+  />
+</template>
+
+<style lang="scss" scoped>
+.bili-iframe {
+  border-radius: 8px;
+  border: none;
+  background-color: #000;
+  transition: all 0.3s;
+}
+</style>