Skip to content

Commit 5f1491a

Browse files
rennzhangrennzhang
committed
chore: 合并代码
2 parents 0684df0 + 5c91e89 commit 5f1491a

File tree

22 files changed

+9489
-142
lines changed

22 files changed

+9489
-142
lines changed

‎docs/.vitepress/config.mts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { defineConfig } from "vitepress"
22
import { resolve } from "path";
33
import UnoCSS from "unocss/vite";
4-
4+
import AutoImport from 'unplugin-auto-import/vite'
5+
import Components from 'unplugin-vue-components/vite'
6+
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
57

68
function pathResolve(dir: string) {
79
return resolve(process.cwd(), ".", dir);
@@ -106,7 +108,7 @@ function getExampleSidebar(lang: "en" | "zh") {
106108
link: `${route}/example/index`
107109
},
108110
{
109-
text: "Code Lint",
111+
text: "Code Syntax Check",
110112
link: `${route}/example/codeLint`
111113
},
112114
]
@@ -121,7 +123,13 @@ export default defineConfig({
121123
cleanUrls: true,
122124
vite: {
123125
plugins: [
124-
UnoCSS()
126+
UnoCSS(),
127+
AutoImport({
128+
resolvers: [ElementPlusResolver()],
129+
}),
130+
Components({
131+
resolvers: [ElementPlusResolver()],
132+
}),
125133
],
126134
resolve: {
127135
alias: [

‎docs/auto-imports.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* eslint-disable */
2+
/* prettier-ignore */
3+
// @ts-nocheck
4+
// Generated by unplugin-auto-import
5+
export {}
6+
declare global {
7+
8+
}

‎docs/components.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ export {}
77

88
declare module 'vue' {
99
export interface GlobalComponents {
10+
ElButton: typeof import('element-plus/es')['ElButton']
11+
ElDivider: typeof import('element-plus/es')['ElDivider']
12+
ElFormItem: typeof import('element-plus/es')['ElFormItem']
13+
ElInput: typeof import('element-plus/es')['ElInput']
14+
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
15+
ElSlider: typeof import('element-plus/es')['ElSlider']
1016
RouterLink: typeof import('vue-router')['RouterLink']
1117
RouterView: typeof import('vue-router')['RouterView']
1218
}

‎docs/demo/examples/Interactive/components/Example.vue

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<template>
2+
<div class="example">
3+
<div class="example-showcase">
4+
<slot name="config"></slot>
5+
6+
<div class="demo-container flex-center">
7+
8+
<slot></slot>
9+
</div>
10+
</div>
11+
<div class="example-action">
12+
<IconCopy v-if="!copied" style="margin-right: 6px" @click="copy(props.raw)" />
13+
<span v-else style="font-size: 12px;margin-right: 6px">Copied!</span>
14+
<IconCode @click="showCode = !showCode" />
15+
</div>
16+
<div :style="`height: ${showCode ? 'auto' : '0'};`" class="example-source">
17+
<VCodeBlock :code="props.raw" highlightjs lang="html" :theme="theme" />
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script lang="ts" setup>
23+
import {
24+
ref, defineProps, computed, watch, nextTick,
25+
} from "vue";
26+
import { useClipboard } from "@vueuse/core";
27+
import VCodeBlock from "@wdns/vue-code-block";
28+
import { useData } from "vitepress";
29+
30+
import IconCopy from "../../components/IconCopy.vue";
31+
import IconCode from "../../components/IconCode.vue";
32+
33+
// theme
34+
import "codemirror/theme/dracula.css";
35+
36+
const props = defineProps<{
37+
raw: string;
38+
}>();
39+
40+
const { isDark } = useData();
41+
42+
const showCode = ref(false);
43+
44+
const { copy, copied } = useClipboard();
45+
46+
const theme = ref("github");
47+
48+
// const demoRef = ref<any>(null);
49+
50+
watch(isDark, (val) => {
51+
console.log(" isDark", val)
52+
nextTick(() => {
53+
theme.value = val ? "github-dark" : "github";
54+
});
55+
}, { immediate: true, deep: true });
56+
57+
</script>
58+
59+
<style lang="less">
60+
.example {
61+
62+
border: 1px solid #e8e8e8;
63+
border-radius: 4px;
64+
65+
.example-showcase {
66+
padding: 1.5rem;
67+
padding-top: .5rem;
68+
border-bottom: 1px solid #e8e8e8;
69+
display: flex;
70+
flex-direction: column;
71+
justify-content: center;
72+
align-items: center;
73+
74+
.demo-container {
75+
z-index: 26;
76+
min-width: 100%;
77+
}
78+
}
79+
80+
.example-action {
81+
padding: 0.5rem;
82+
display: flex;
83+
justify-content: flex-end;
84+
}
85+
}
86+
87+
.example-source {
88+
overflow: hidden;
89+
transition: height 0.3s;
90+
position: relative;
91+
}
92+
93+
.icon-box {
94+
position: relative;
95+
cursor: pointer;
96+
padding: 2px;
97+
98+
.tooltips {
99+
position: absolute;
100+
top: -38px;
101+
left: 50%;
102+
transform: translateX(-50%);
103+
padding: 5px 10px;
104+
background-color: #333;
105+
color: #fff;
106+
white-space: nowrap;
107+
font-size: 13px;
108+
border-radius: 4px;
109+
}
110+
111+
svg {
112+
width: 20px;
113+
height: 20px;
114+
}
115+
}
116+
</style>

‎docs/demo/examples/Interactive/components/LangSelect.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<el-form-item label="Lang:" class="mr-4">
3+
<ElSelect v-model="value" placeholder="Select" style="width: 240px" size="small" filterable>
4+
<el-option v-for="item in LANG_OPTIONS" :key="item.value" :label="item.label" :value="item.value"
5+
@click.native="onLangChange(item)" />
6+
</ElSelect>
7+
</el-form-item>
8+
9+
</template>
10+
11+
<script lang="ts" setup>
12+
import { ref, } from "vue";
13+
import "codemirror/mode/apl/apl.js";
14+
import { ElSelect, ElOption, ElFormItem } from "element-plus";
15+
import { LangOption } from "../types"
16+
import { LANG_OPTIONS } from "../config/langOptions";
17+
const value = ref("javascript");
18+
import { useStore } from "../store";
19+
20+
const store = useStore();
21+
22+
23+
const onLangChange = (opt: LangOption) => {
24+
store.lang = opt.value
25+
store.langPath = opt.langPath
26+
store.code = opt.code
27+
};
28+
29+
</script>
30+
31+
<style scoped lang="less"></style>

‎docs/demo/examples/Interactive/components/Layout.vue

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<el-form-item label="Theme:" class="mr-4">
3+
<el-select v-model="store.theme" placeholder="unit" class="min-w-80px max-w-120px" size="small" filterable>
4+
<el-option v-for="item in THEME_OPTIONS" :key="item.value" :label="item.label" :value="item.value"
5+
@click="onThemeSelect(item)" />
6+
</el-select>
7+
</el-form-item>
8+
<el-form-item label="width:" class="mr-4">
9+
<el-input v-model="widthCount" placeholder="Please input" class="input-with-select min-w-100px !w-100px"
10+
size="small">
11+
<template #append>
12+
<el-select v-model="widthUnit" placeholder="unit" style="width: 60px" size="small">
13+
<el-option v-for="item in widthUnitOptions" :key="item.value" :label="item.label" :value="item.value" />
14+
</el-select>
15+
</template>
16+
</el-input>
17+
</el-form-item>
18+
19+
<el-form-item label="height:" class="mr-4">
20+
<el-input v-model="heightCount" placeholder="Please input" class="input-with-select min-w-100px !w-100px"
21+
size="small">
22+
<template #append>
23+
<el-select v-model="heightUnit" placeholder="unit" style="width: 60px" size="small">
24+
<el-option v-for="item in widthUnitOptions" :key="item.value" :label="item.label" :value="item.value" />
25+
</el-select>
26+
</template>
27+
</el-input>
28+
</el-form-item>
29+
<el-form-item label="fontSize:" class="mr-4 !w-140px">
30+
<el-input v-model="store.fontSize" placeholder="Please input" class="input-with-select min-w-40px max-w-60px"
31+
size="small">
32+
</el-input>
33+
</el-form-item>
34+
<el-form-item label="lineHeight:" class="mr-4 ">
35+
<el-input v-model="store.lineHeight" placeholder="Please input" class="input-with-select min-w-40px max-w-60px"
36+
size="small">
37+
</el-input>
38+
</el-form-item>
39+
<el-form-item label="bordered:">
40+
<el-checkbox v-model="store.border" class="min-w-40px" size="small">
41+
</el-checkbox>
42+
</el-form-item>
43+
<el-form-item label="readonly:">
44+
<el-checkbox v-model="store.readOnly" class="min-w-40px" size="small">
45+
</el-checkbox>
46+
</el-form-item>
47+
</template>
48+
49+
<script lang="ts" setup>
50+
import { ElSelect, ElOption, ElFormItem, ElCheckbox } from "element-plus";
51+
52+
import { ref, watch, } from "vue";
53+
import { useStore } from "../store";
54+
import { ThemeOption } from "../types";
55+
import { THEME_OPTIONS, } from "../config/themeOptions";
56+
import "../config/theme"
57+
58+
59+
60+
61+
const store = useStore();
62+
const widthCount = ref(100);
63+
const heightCount = ref(400);
64+
const widthUnit = ref("%");
65+
const heightUnit = ref("px");
66+
67+
68+
69+
const onThemeSelect = (opt: ThemeOption) => {
70+
store.themePath = opt.filePath
71+
};
72+
73+
watch([widthCount, widthUnit], () => {
74+
store.width = `${widthCount.value}${widthUnit.value}`;
75+
});
76+
77+
watch([heightCount, heightUnit], () => {
78+
store.height = `${heightCount.value}${heightUnit.value}`;
79+
});
80+
81+
82+
// 浏览器支持的所有宽度单位
83+
const widthUnitOptions = [{ label: "%", value: "%" }, { label: "px", value: "px" }, { label: "rem", value: "rem" }, { label: "em", value: "em" }, { label: "vw", value: "vw" }, { label: "vh", value: "vh" }];
84+
</script>
85+
<style lang="less">
86+
.el-form-item {
87+
margin-bottom: 0;
88+
}
89+
</style>

‎docs/demo/examples/Interactive/config/lang.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// 引入 codemirror 所有语言包
2+
import 'codemirror/mode/javascript/javascript';
3+
import 'codemirror/mode/css/css';
4+
import 'codemirror/mode/htmlmixed/htmlmixed';
5+
import 'codemirror/mode/vue/vue';
6+
import 'codemirror/mode/markdown/markdown';
7+
import 'codemirror/mode/jsx/jsx';
8+
import 'codemirror/mode/sass/sass';
9+
import 'codemirror/mode/php/php';
10+
import 'codemirror/mode/python/python';
11+
import 'codemirror/mode/go/go';
12+
import 'codemirror/mode/ruby/ruby';
13+
import 'codemirror/mode/sql/sql';

0 commit comments

Comments
 (0)