Skip to content

Commit e32f0c0

Browse files
mfuumfuu
committed
docs: auto deploy
1 parent cf57402 commit e32f0c0

File tree

25 files changed

+1501
-0
lines changed

25 files changed

+1501
-0
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
name: Deploy
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
deploy:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v3
13+
with:
14+
fetch-depth: 0
15+
- uses: actions/setup-node@v3
16+
with:
17+
node-version: 16
18+
cache: yarn
19+
- run: cd docs
20+
- run: yarn install --frozen-lockfile
21+
22+
- name: Build
23+
run: yarn docs:build
24+
25+
- name: Deploy
26+
uses: peaceiris/actions-gh-pages@v3
27+
with:
28+
github_token: ${{ secrets.GITHUB_TOKEN }}
29+
publish_dir: docs/.vitepress/dist

‎docs/.gitignore‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.idea
2+
.vscode
3+
4+
# dependencies
5+
node_modules
6+
7+
# Logs
8+
npm-debug.log*
9+
yarn-debug.log*
10+
yarn-error.log*
11+
12+
# lock files
13+
package-lock.json
14+
yarn.lock
15+
16+
# vitepress
17+
cache
18+
dist

‎docs/.vitepress/config.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { defineConfig } from 'vitepress';
2+
import { componentPreview, containerPreview } from '@vitepress-demo-preview/plugin';
3+
4+
export default defineConfig({
5+
base: '/vue-virtual-drag-list/',
6+
lang: 'en-US',
7+
title: 'vue-virtual-drag-list',
8+
description: 'A virtual scrolling list component that can be sorted by dragging',
9+
10+
themeConfig: {
11+
search: {
12+
provider: 'local',
13+
},
14+
15+
socialLinks: [{ icon: 'github', link: 'https://github.com/mfuu/vue-virtual-drag-list' }],
16+
17+
footer: {
18+
message: 'Released under the MIT License.',
19+
copyright: `Copyright © 2019-${new Date().getFullYear()} mfuu`,
20+
},
21+
22+
nav: [
23+
{
24+
text: 'Guide',
25+
link: '/guide/install',
26+
activeMatch: '/guide/',
27+
},
28+
{
29+
text: 'Demo',
30+
link: '/demo/basic',
31+
activeMatch: '/demo/',
32+
},
33+
],
34+
35+
sidebar: {
36+
'/guide/': {
37+
base: '/guide/',
38+
items: [
39+
{ text: 'Getting Started', link: 'install' },
40+
{ text: 'Emits', link: 'emits' },
41+
{ text: 'Props', link: 'props' },
42+
{ text: 'Methods', link: 'methods' },
43+
],
44+
},
45+
'/demo/': {
46+
base: '/demo/',
47+
items: [
48+
{ text: 'Basic', link: 'index' },
49+
{ text: 'Group', link: 'group' },
50+
{ text: 'Infinity', link: 'infinity' },
51+
{ text: 'Horizontal', link: 'horizontal' },
52+
{ text: 'Customize scroller', link: 'scroller' },
53+
{ text: 'Scroll To', link: 'scrollto' },
54+
{ text: 'Table Mode', link: 'table' },
55+
],
56+
},
57+
},
58+
},
59+
markdown: {
60+
theme: {
61+
light: 'vitesse-light',
62+
dark: 'vitesse-dark',
63+
},
64+
codeTransformers: [
65+
{
66+
postprocess(code) {
67+
return code.replace(/\[!!code/g, '[!code');
68+
},
69+
},
70+
],
71+
config: (md) => {
72+
md.use(containerPreview);
73+
md.use(componentPreview);
74+
},
75+
},
76+
});

‎docs/.vitepress/theme/index.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import DefaultTheme from 'vitepress/theme';
2+
import { ElementPlusContainer } from '@vitepress-demo-preview/component';
3+
import '@vitepress-demo-preview/component/dist/style.css';
4+
5+
export default {
6+
...DefaultTheme,
7+
async enhanceApp({ app }) {
8+
if (!import.meta.env.SSR) {
9+
const VirtualList = await import('vue-virtual-draglist');
10+
app.component('virtual-list', VirtualList);
11+
}
12+
app.component('demo-preview', ElementPlusContainer);
13+
},
14+
};

‎docs/components/basic.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<virtual-list
3+
v-model="list"
4+
:keeps="15"
5+
data-key="id"
6+
handle=".handle"
7+
class="basic-list"
8+
>
9+
<template v-slot:item="{ record, index, dateKey }">
10+
<div class="list-item">
11+
<div class="item-title">
12+
<span class="index">#{{ index }}</span>
13+
<span class="handle">☰</span>
14+
</div>
15+
<p>{{ record.desc }}</p>
16+
</div>
17+
</template>
18+
</virtual-list>
19+
</template>
20+
21+
<script>
22+
import { reactive, toRefs } from 'vue';
23+
import { getPageData } from '../public/sentence';
24+
export default {
25+
setup() {
26+
const data = reactive({
27+
list: getPageData(100, 0),
28+
});
29+
30+
return {
31+
...toRefs(data),
32+
};
33+
},
34+
};
35+
</script>
36+
37+
<style scoped>
38+
.basic-list {
39+
height: 500px;
40+
}
41+
42+
.basic-list .list-item {
43+
position: relative;
44+
border-radius: 5px;
45+
box-shadow: 0px 2px 10px -5px #57bbb4;
46+
padding: 16px;
47+
}
48+
49+
.item-title {
50+
display: flex;
51+
justify-content: space-between;
52+
}
53+
54+
.index {
55+
float: left;
56+
}
57+
58+
.handle {
59+
cursor: grab;
60+
text-align: right;
61+
}
62+
</style>

‎docs/components/group.vue‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<div class="group-list">
3+
<virtual-list
4+
v-model="list1"
5+
:keeps="15"
6+
data-key="id"
7+
handle=".handle"
8+
:group="group"
9+
class="virtual-list"
10+
>
11+
<template v-slot:item="{ record, index, dateKey }">
12+
<div class="list-item">
13+
<div class="item-title">
14+
<span class="index">#{{ index }}</span>
15+
<span class="handle">☰</span>
16+
</div>
17+
<p>{{ record.desc }}</p>
18+
</div>
19+
</template>
20+
</virtual-list>
21+
22+
<virtual-list
23+
v-model="list2"
24+
:keeps="15"
25+
data-key="id"
26+
handle=".handle"
27+
:group="group"
28+
class="virtual-list"
29+
>
30+
<template v-slot:item="{ record, index, dateKey }">
31+
<div class="list-item">
32+
<div class="item-title">
33+
<span class="index">#{{ index }}</span>
34+
<span class="handle">☰</span>
35+
</div>
36+
<p>{{ record.desc }}</p>
37+
</div>
38+
</template>
39+
</virtual-list>
40+
</div>
41+
</template>
42+
43+
<script>
44+
import { reactive, toRefs } from 'vue';
45+
import { getPageData } from '../public/sentence';
46+
export default {
47+
setup() {
48+
const data = reactive({
49+
list1: getPageData(100, 0),
50+
list2: getPageData(100, 0),
51+
group: { name: 'group', pull: true, put: true },
52+
});
53+
54+
return {
55+
...toRefs(data),
56+
};
57+
},
58+
};
59+
</script>
60+
61+
<style scoped>
62+
.group-list {
63+
display: flex;
64+
justify-content: space-between;
65+
}
66+
67+
.group-list .virtual-list {
68+
height: 500px;
69+
width: 49%;
70+
display: inline-block;
71+
}
72+
73+
.group-list .list-item {
74+
position: relative;
75+
border-radius: 5px;
76+
box-shadow: 0px 2px 10px -5px #57bbb4;
77+
padding: 16px;
78+
}
79+
80+
.item-title {
81+
display: flex;
82+
justify-content: space-between;
83+
}
84+
85+
.index {
86+
float: left;
87+
}
88+
89+
.handle {
90+
cursor: grab;
91+
text-align: right;
92+
}
93+
</style>

‎docs/components/horizontal.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<virtual-list
3+
v-model="list"
4+
:keeps="15"
5+
data-key="id"
6+
handle=".handle"
7+
direction="horizontal"
8+
class="horizontal-list"
9+
:wrap-style="{ display: 'flex' }"
10+
>
11+
<template v-slot:item="{ record, index, dateKey }">
12+
<div class="list-item">
13+
<div class="item-title">
14+
<span class="index">#{{ index }}</span>
15+
<span class="handle">☰</span>
16+
</div>
17+
<p>{{ record.desc }}</p>
18+
</div>
19+
</template>
20+
</virtual-list>
21+
</template>
22+
23+
<script>
24+
import { reactive, toRefs } from 'vue';
25+
import { getPageData } from '../public/sentence';
26+
export default {
27+
setup() {
28+
const data = reactive({
29+
list: getPageData(100, 0),
30+
});
31+
32+
return {
33+
...toRefs(data),
34+
};
35+
},
36+
};
37+
</script>
38+
39+
<style scoped>
40+
.horizontal-list {
41+
height: 500px;
42+
}
43+
44+
.horizontal-list .list-item {
45+
position: relative;
46+
border-radius: 5px;
47+
box-shadow: 0px 2px 10px -5px #57bbb4;
48+
padding: 16px;
49+
width: fit-content;
50+
}
51+
52+
.item-title {
53+
display: flex;
54+
justify-content: space-between;
55+
}
56+
57+
.index {
58+
float: left;
59+
}
60+
61+
.handle {
62+
cursor: grab;
63+
text-align: right;
64+
}
65+
</style>

0 commit comments

Comments
 (0)