Skip to content
This repository has been archived by the owner on Apr 24, 2023. It is now read-only.

Commit

Permalink
feat(md-enhance): add CodeTabs and Tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mister-Hope
Mister-Hope committed Jun 4, 2022
1 parent 829c0d3 commit 81fcd85
Show file tree
Hide file tree
Showing 17 changed files with 1,889 additions and 20 deletions.
4 changes: 4 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,7 @@ packages/theme/**/*d.ts

# Coverage Files
coverage/

# Cache and Temp files
**/.vuepress/.cache/
**/.vuepress/.temp/
3 changes: 3 additions & 0 deletions packages/md-enhance/__tests__/demo/.vuepress/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ module.exports = {
],
],

cache: `${__dirname}/.cache`,
temp: `${__dirname}/.temp`,

/** 构建文件输出目录 */
dest: "./dist",

Expand Down
249 changes: 249 additions & 0 deletions packages/md-enhance/__tests__/unit/__snapshots__/codeTabs.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
// Vitest Snapshot v1

exports[`code tabs > shoud render mutiple block 1`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"},{\\"title\\":\\"ts\\"}]'>
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
<template v-slot:tab1=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-ts\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud render mutiple block 2`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"},{\\"title\\":\\"ts\\"}]'>
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
<template v-slot:tab1=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-ts\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud render single block 1`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"}]'>
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud render single block 2`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"}]'>
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support active 1`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"}]' :active=\\"0\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support active 2`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"}]' :active=\\"0\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support active 3`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"},{\\"title\\":\\"ts\\"}]' :active=\\"1\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
<template v-slot:tab1=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-ts\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support active 4`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"},{\\"title\\":\\"ts\\"}]' :active=\\"1\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
<template v-slot:tab1=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-ts\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support id 1`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"}]' tab-id=\\"event\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support id 2`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"}]' tab-id=\\"event-id\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support id 3`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"}]' tab-id=\\"id with space\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support id 4`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"}]' tab-id=\\"id starts and having space in the end\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support value 1`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\",\\"value\\":\\"javascript\\"}]'>
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support value 2`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\",\\"value\\":\\"javascript\\"}]' :active=\\"0\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support value 3`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\",\\"value\\":\\"js\\"},{\\"title\\":\\"ts\\",\\"value\\":\\"typescript\\"}]' :active=\\"1\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
<template v-slot:tab1=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-ts\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > shoud support value 4`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\",\\"value\\":\\"javascript\\"},{\\"title\\":\\"ts\\",\\"value\\":\\"typescript\\"}]' :active=\\"1\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
<template v-slot:tab1=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-ts\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > should ignore other items 1`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"}]' :active=\\"0\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > should ignore other items 2`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"}]' :active=\\"0\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\">
<pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > should ignore other items 3`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"},{\\"title\\":\\"ts\\"}]' :active=\\"1\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\"><pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
<template v-slot:tab1=\\"{ title, value, isActive }\\"><pre><code class=\\"language-ts\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
exports[`code tabs > should ignore other items 4`] = `
"<CodeTabs :data='[{\\"title\\":\\"js\\"},{\\"title\\":\\"ts\\"}]' :active=\\"1\\">
<template v-slot:tab0=\\"{ title, value, isActive }\\"><pre><code class=\\"language-js\\">const a = 1;
</code></pre>
</template>
<template v-slot:tab1=\\"{ title, value, isActive }\\"><pre><code class=\\"language-ts\\">const a = 1;
</code></pre>
</template>
</CodeTabs>
"
`;
Loading

0 comments on commit 81fcd85

Please sign in to comment.