mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-27 02:01:15 +08:00
refactor(docs): improve style and fix typo (#7094)
* refactor(docs): improve style and fix typo * fix(docs): dark
This commit is contained in:
parent
80676ed520
commit
3ab869b446
@ -1,8 +1,8 @@
|
||||
{
|
||||
"view-source": "View source",
|
||||
"hide-source": "Hide source",
|
||||
"edit-in-editor": "Edit in PlayGround",
|
||||
"edit-on-github": "Edit on Github",
|
||||
"edit-in-editor": "Edit in Playground",
|
||||
"edit-on-github": "Edit on GitHub",
|
||||
"edit-in-codepen": "Edit in Codepen.io",
|
||||
"copy-code": "Copy code",
|
||||
"switch-button-option-text": "Switch to Options API",
|
||||
|
3
docs/.vitepress/env.d.ts
vendored
Normal file
3
docs/.vitepress/env.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
export {}
|
@ -21,7 +21,7 @@ defineProps({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.example-showcase {
|
||||
padding: 1.5rem;
|
||||
padding: 0.8rem;
|
||||
margin: 0.5px;
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
@ -12,14 +12,14 @@ const contributors = computed(() => _contributors[props.id])
|
||||
<div class="mb-4">
|
||||
<div class="flex flex-wrap gap-4 pt-2">
|
||||
<div v-for="c of contributors" :key="c.hash">
|
||||
<VpLink
|
||||
<vp-link
|
||||
:href="`https://github.com/${c.login}`"
|
||||
class="flex gap-2 items-center link"
|
||||
no-icon
|
||||
>
|
||||
<img :src="c.avatar" class="w-8 h-8 rounded-full" />
|
||||
{{ c.name }}
|
||||
</VpLink>
|
||||
</vp-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -5,7 +5,7 @@ import CommonThemeToggler from '../common/vp-theme-toggler.vue'
|
||||
|
||||
<template>
|
||||
<div class="theme-toggler-content">
|
||||
<CommonThemeToggler @click="toggleDark()" />
|
||||
<CommonThemeToggler @click="() => toggleDark()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -4,7 +4,7 @@ import { isClient, useClipboard, useToggle } from '@vueuse/core'
|
||||
import { CaretTop } from '@element-plus/icons-vue'
|
||||
import { useLang } from '../composables/lang'
|
||||
import { useSourceCode } from '../composables/source-code'
|
||||
import { usePlayGround } from '../composables/use-playground'
|
||||
import { usePlayground } from '../composables/use-playground'
|
||||
|
||||
import demoBlockLocale from '../../i18n/component/demo-block.json'
|
||||
|
||||
@ -26,7 +26,7 @@ const { copy, isSupported } = useClipboard({
|
||||
read: false,
|
||||
})
|
||||
|
||||
const [sourceVisible, setSourceVisible] = useToggle()
|
||||
const [sourceVisible, toggleSourceVisible] = useToggle()
|
||||
const lang = useLang()
|
||||
const demoSourceUrl = useSourceCode(toRef(props, 'path'))
|
||||
|
||||
@ -46,8 +46,8 @@ const decodedDescription = computed(() =>
|
||||
decodeURIComponent(props.description!)
|
||||
)
|
||||
|
||||
const onPlaygroundClicked = () => {
|
||||
const { link } = usePlayGround(props.rawSource)
|
||||
const onPlaygroundClick = () => {
|
||||
const { link } = usePlayground(props.rawSource)
|
||||
if (!isClient) return
|
||||
window.open(link)
|
||||
}
|
||||
@ -70,16 +70,21 @@ const copyCode = async () => {
|
||||
<ClientOnly>
|
||||
<!-- danger here DO NOT USE INLINE SCRIPT TAG -->
|
||||
<p text="sm" v-html="decodedDescription" />
|
||||
|
||||
<div class="example">
|
||||
<Example :file="path" :demo="formatPathDemos[path]" />
|
||||
|
||||
<ElDivider class="m-0" />
|
||||
|
||||
<div class="op-btns">
|
||||
<ElTooltip :content="locale['edit-in-editor']" :show-arrow="false">
|
||||
<ElIcon :size="20" class="op-btn">
|
||||
<i-ri-play-circle-line @click="onPlaygroundClicked" />
|
||||
<ElIcon :size="16" class="op-btn">
|
||||
<i-ri-flask-line @click="onPlaygroundClick" />
|
||||
</ElIcon>
|
||||
</ElTooltip>
|
||||
<ElTooltip :content="locale['edit-on-github']" :show-arrow="false">
|
||||
<ElIcon
|
||||
:size="20"
|
||||
:size="16"
|
||||
class="op-btn github"
|
||||
style="color: var(--text-color-light)"
|
||||
>
|
||||
@ -89,35 +94,33 @@ const copyCode = async () => {
|
||||
</ElIcon>
|
||||
</ElTooltip>
|
||||
<ElTooltip :content="locale['copy-code']" :show-arrow="false">
|
||||
<ElIcon :size="20" class="op-btn" @click="copyCode">
|
||||
<!-- <CopyIcon /> -->
|
||||
<i-ri-file-copy-2-line />
|
||||
<ElIcon :size="16" class="op-btn" @click="copyCode">
|
||||
<i-ri-file-copy-line />
|
||||
</ElIcon>
|
||||
</ElTooltip>
|
||||
<ElTooltip :content="locale['view-source']" :show-arrow="false">
|
||||
<ElIcon :size="20" class="op-btn" @click="setSourceVisible">
|
||||
<!-- <SourceCodeIcon /> -->
|
||||
<ElIcon :size="16" class="op-btn" @click="toggleSourceVisible()">
|
||||
<i-ri-code-line />
|
||||
</ElIcon>
|
||||
</ElTooltip>
|
||||
</div>
|
||||
<ElDivider class="m-0" />
|
||||
<Example :file="path" :demo="formatPathDemos[path]" />
|
||||
<el-collapse-transition>
|
||||
|
||||
<ElCollapseTransition>
|
||||
<SourceCode v-show="sourceVisible" :source="source" />
|
||||
</el-collapse-transition>
|
||||
<transition name="el-fade-in-linear">
|
||||
</ElCollapseTransition>
|
||||
|
||||
<Transition name="el-fade-in-linear">
|
||||
<div
|
||||
v-show="sourceVisible"
|
||||
class="example-float-control"
|
||||
@click="setSourceVisible(false)"
|
||||
@click="toggleSourceVisible(false)"
|
||||
>
|
||||
<ElIcon :size="16">
|
||||
<CaretTop />
|
||||
</ElIcon>
|
||||
<span>{{ locale['hide-source'] }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
</Transition>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
@ -128,12 +131,11 @@ const copyCode = async () => {
|
||||
border-radius: var(--el-border-radius-base);
|
||||
|
||||
.op-btns {
|
||||
padding: 0.5rem;
|
||||
padding: 0.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
height: 2rem;
|
||||
|
||||
.el-icon {
|
||||
&:hover {
|
||||
|
@ -1,10 +1,12 @@
|
||||
import { useDark, useToggle } from '@vueuse/core'
|
||||
|
||||
export const isDark =
|
||||
// @ts-expect-error when PROD is true, do not useDark
|
||||
import.meta.env.DEV &&
|
||||
useDark({
|
||||
storageKey: 'el-theme-appearance',
|
||||
})
|
||||
// remove as boolean when dark mode is ok
|
||||
export const toggleDark = useToggle(isDark as boolean)
|
||||
export const isDark = useDark({
|
||||
storageKey: 'el-theme-appearance',
|
||||
})
|
||||
|
||||
// TODO: remove when dark mode is ready
|
||||
if (!import.meta.env.DEV) {
|
||||
isDark.value = false
|
||||
}
|
||||
|
||||
export const toggleDark = useToggle(isDark)
|
||||
|
@ -1,10 +1,16 @@
|
||||
import { computed } from 'vue'
|
||||
import { computed, unref } from 'vue'
|
||||
import { useData } from 'vitepress'
|
||||
import { useBrowserLocation } from '@vueuse/core'
|
||||
import type { MaybeRef } from '@vueuse/core'
|
||||
|
||||
export const useFeatureFlag = (flag: string) => {
|
||||
const location = useBrowserLocation()
|
||||
|
||||
export const useFeatureFlag = (flag: MaybeRef<string>) => {
|
||||
const { theme } = useData()
|
||||
|
||||
return computed(() => {
|
||||
return (theme.value.features || {})[flag]
|
||||
const _flag = unref(flag)
|
||||
const params = new URLSearchParams(location.value.search)
|
||||
return params.get(`feature:${_flag}`) || (theme.value.features || {})[_flag]
|
||||
})
|
||||
}
|
||||
|
@ -2,7 +2,7 @@ import { utoa } from '../utils'
|
||||
|
||||
const MAIN_FILE_NAME = 'App.vue'
|
||||
|
||||
export const usePlayGround = (source: string) => {
|
||||
export const usePlayground = (source: string) => {
|
||||
const code = decodeURIComponent(source)
|
||||
const originCode = {
|
||||
[MAIN_FILE_NAME]: code,
|
||||
|
4
docs/components.d.ts
vendored
4
docs/components.d.ts
vendored
@ -6,9 +6,9 @@ declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
IRiCodeLine: typeof import('~icons/ri/code-line')['default']
|
||||
IRiExternalLinkLine: typeof import('~icons/ri/external-link-line')['default']
|
||||
IRiFileCopy2Line: typeof import('~icons/ri/file-copy2-line')['default']
|
||||
IRiFileCopyLine: typeof import('~icons/ri/file-copy-line')['default']
|
||||
IRiFlaskLine: typeof import('~icons/ri/flask-line')['default']
|
||||
IRiGithubLine: typeof import('~icons/ri/github-line')['default']
|
||||
IRiPlayCircleLine: typeof import('~icons/ri/play-circle-line')['default']
|
||||
IRiTranslate2: typeof import('~icons/ri/translate2')['default']
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user