docs: update examples

mfuu · Jun 19, 2024 · a7fe198 · a7fe198
1 parent 79dd2c7
commit a7fe198
Show file tree

Hide file tree

Showing 15 changed files with 60 additions and 108 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -11,10 +11,6 @@ defaults:
  run:
   working-directory: ./docs
 
-defaults:
- run:
-  working-directory: ./docs
-
 permissions:
   contents: write
 

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -45,13 +45,13 @@ export default defineConfig({
       '/demo/': {
         base: '/demo/',
         items: [
-          { text: 'Basic', link: 'index' },
+          { text: 'Basic', link: 'basic' },
           { text: 'Group', link: 'group' },
           { text: 'Infinity', link: 'infinity' },
           { text: 'Horizontal', link: 'horizontal' },
-          { text: 'Customize scroller', link: 'scroller' },
           { text: 'Scroll To', link: 'scrollto' },
           { text: 'Table Mode', link: 'table' },
+          { text: 'Customize Scroller', link: 'scroller' },
         ],
       },
     },

diff --git a/docs/components/basic.vue b/docs/components/basic.vue
@@ -4,6 +4,7 @@
     :keeps="15"
     data-key="id"
     handle=".handle"
+    chosen-class="chosen"
     class="basic-list"
   >
     <template v-slot:item="{ record, index, dateKey }">
@@ -37,9 +38,10 @@ export default {
 <style scoped>
 .basic-list {
   height: 500px;
+  padding: 5px;
 }
 
-.basic-list .list-item {
+.list-item {
   position: relative;
   border-radius: 5px;
   box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -59,4 +61,8 @@ export default {
   cursor: grab;
   text-align: right;
 }
+
+.chosen {
+  box-shadow: 0px 0px 0px 2px #30a46c;
+}
 </style>
diff --git a/docs/components/group.vue b/docs/components/group.vue
@@ -6,15 +6,15 @@
       data-key="id"
       handle=".handle"
       :group="group"
+      chosen-class="chosen"
       class="virtual-list"
     >
       <template v-slot:item="{ record, index, dateKey }">
         <div class="list-item">
           <div class="item-title">
-            <span class="index">#{{ index }}</span>
+            <span class="index">#  {{ index }}-{{ record.name }}</span>
             <span class="handle">☰</span>
           </div>
-          <p>{{ record.desc }}</p>
         </div>
       </template>
     </virtual-list>
@@ -25,15 +25,15 @@
       data-key="id"
       handle=".handle"
       :group="group"
+      chosen-class="chosen"
       class="virtual-list"
     >
       <template v-slot:item="{ record, index, dateKey }">
         <div class="list-item">
           <div class="item-title">
-            <span class="index">#{{ index }}</span>
+            <span class="index">#  {{ index }}-{{ record.name }}</span>
             <span class="handle">☰</span>
           </div>
-          <p>{{ record.desc }}</p>
         </div>
       </template>
     </virtual-list>
@@ -64,17 +64,20 @@ export default {
   justify-content: space-between;
 }
 
-.group-list .virtual-list {
+.virtual-list {
   height: 500px;
   width: 49%;
+  padding: 5px;
   display: inline-block;
 }
 
-.group-list .list-item {
+.list-item {
   position: relative;
   border-radius: 5px;
   box-shadow: 0px 2px 10px -5px #57bbb4;
   padding: 16px;
+  height: 50px;
+  overflow: hidden;
 }
 
 .item-title {
@@ -90,4 +93,8 @@ export default {
   cursor: grab;
   text-align: right;
 }
+
+.chosen {
+  box-shadow: 0px 0px 0px 2px #30a46c;
+}
 </style>
diff --git a/docs/components/horizontal.vue b/docs/components/horizontal.vue
@@ -6,6 +6,7 @@
     handle=".handle"
     direction="horizontal"
     class="horizontal-list"
+    chosen-class="chosen"
     :wrap-style="{ display: 'flex' }"
   >
     <template v-slot:item="{ record, index, dateKey }">
@@ -39,9 +40,11 @@ export default {
 <style scoped>
 .horizontal-list {
   height: 500px;
+  display: flex;
+  padding: 5px;
 }
 
-.horizontal-list .list-item {
+.list-item {
   position: relative;
   border-radius: 5px;
   box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -62,4 +65,8 @@ export default {
   cursor: grab;
   text-align: right;
 }
+
+.chosen {
+  box-shadow: 0px 0px 0px 2px #30a46c;
+}
 </style>
diff --git a/docs/components/infinity.vue b/docs/components/infinity.vue
@@ -5,6 +5,7 @@
     data-key="id"
     handle=".handle"
     class="infinity-list"
+    chosen-class="chosen"
     @bottom="bottomLoading"
   >
     <template v-slot:item="{ record, index, dateKey }">
@@ -52,9 +53,10 @@ export default {
 <style scoped>
 .infinity-list {
   height: 500px;
+  padding: 5px;
 }
 
-.infinity-list .list-item {
+.list-item {
   position: relative;
   border-radius: 5px;
   box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -75,6 +77,10 @@ export default {
   text-align: right;
 }
 
+.chosen {
+  box-shadow: 0px 0px 0px 2px #30a46c;
+}
+
 .footer {
   height: 50px;
   display: flex;

diff --git a/docs/components/scroller.vue b/docs/components/scroller.vue
@@ -5,6 +5,7 @@
     data-key="id"
     handle=".handle"
     :scroller="scroller"
+    chosen-class="chosen"
     class="window-scroll"
   >
     <template v-slot:item="{ record, index, dateKey }">
@@ -37,7 +38,7 @@ export default {
 </script>
 
 <style scoped>
-.window-scroll .list-item {
+.list-item {
   position: relative;
   border-radius: 5px;
   box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -57,4 +58,8 @@ export default {
   cursor: grab;
   text-align: right;
 }
+
+.chosen {
+  box-shadow: 0px 0px 0px 2px #30a46c;
+}
 </style>
diff --git a/docs/components/scrollto.vue b/docs/components/scrollto.vue
@@ -15,6 +15,7 @@
     :keeps="15"
     data-key="id"
     handle=".handle"
+    chosen-class="chosen"
     class="scrollto-list"
   >
     <template v-slot:item="{ record, index, dateKey }">
@@ -71,9 +72,10 @@ export default {
 
 .scrollto-list {
   height: 500px;
+  padding: 5px;
 }
 
-.scrollto-list .list-item {
+.list-item {
   position: relative;
   border-radius: 5px;
   box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -94,6 +96,10 @@ export default {
   text-align: right;
 }
 
+.chosen {
+  box-shadow: 0px 0px 0px 2px #30a46c;
+}
+
 input {
   width: 55px;
   border: 1px solid #aaa;

diff --git a/docs/components/table.vue b/docs/components/table.vue
@@ -5,6 +5,7 @@
     data-key="id"
     handle=".handle"
     class="table-list"
+    chosen-class="chosen"
     :table-mode="true"
   >
     <template v-slot:header>
@@ -48,9 +49,10 @@ export default {
 <style scoped>
 .table-list {
   height: 500px;
+  padding: 5px;
 }
 
-.table-list .list-item {
+.list-item {
   position: relative;
   border-radius: 5px;
   box-shadow: 0px 2px 10px -5px #57bbb4;
@@ -70,4 +72,8 @@ export default {
   cursor: grab;
   text-align: right;
 }
+
+.chosen {
+  box-shadow: 0px 0px 0px 2px #30a46c;
+}
 </style>
diff --git a/docs/demo/group.md b/docs/demo/group.md
@@ -2,21 +2,4 @@
 
 Drag and drop between groups
 
-**Key Code**
-```vue
-<virtual-list
-  ...
-  :group="group"
->
-  ...
-</virtual-list>
-<script setup>
-  const group = reactive({
-    name: 'name',
-    pull: true,
-    put: true,
-  });
-</script>
-```
-
 <preview path="../components/group.vue" />
diff --git a/docs/demo/horizontal.md b/docs/demo/horizontal.md
@@ -1,16 +1,3 @@
 # Horizontal list
 
-**Key Code**
-```vue
-<virtual-list
-  ...
-  :direction="direction"
->
-  ...
-</virtual-list>
-<script setup>
-  const direction = ref('horizontal');
-</script>
-```
-
 <preview path="../components/horizontal.vue" />
diff --git a/docs/demo/scroller.md b/docs/demo/scroller.md
@@ -1,18 +1,5 @@
-# Customize scroller
+# Customize Scroller
 
 This Demo uses `scroller: document`
 
-**Key Code**
-```vue
-<virtual-list
-  ...
-  :scroller="scroller"
->
-  ...
-</virtual-list>
-<script setup>
-  const scroller = ref(document);
-</script>
-```
-
 <preview path="../components/scroller.vue" />
diff --git a/docs/demo/scrollto.md b/docs/demo/scrollto.md
@@ -1,4 +1,4 @@
-# Scroll to ..
+# Scroll to
 
 Scroll to the specified location
 

diff --git a/docs/guide/methods.md b/docs/guide/methods.md
@@ -35,47 +35,3 @@ Scroll to the specified `index` position
 ## `scrollToOffset(offset: number)`
 
 Scroll to the specified offset
-
-## Example Usage
-
-```vue
-<template>
-  <button @click="scrollToIndex">scroll To Index</button>
-
-  <virtual-list
-    ref="virtualRef"
-    v-model="list"
-    data-key="id"
-  >
-    <template v-slot:item="{ record, index, dataKey }">
-      item slot content
-    </template>
-  </virtual-list>
-</template>
-
-<script>
-import virtualList from 'vue-virtual-draglist';
-import { ref, reactive, toRefs } from 'vue';
-export default {
-  components: {
-    virtualList
-  },
-  setup() {
-    const virtualRef = ref(null);
-
-    const data = reactive({
-      list: [{ id: 'a', text: 'a', id: 'b', text: 'b' }],
-    });
-
-    const scrollToIndex = () => {
-      virtualRef.value.scrollToIndex(0);
-    }
-
-    return {
-      ...toRefs(data),
-      virtualRef,
-      scrollToIndex
-    };
-  },
-};
-```
diff --git a/docs/index.md b/docs/index.md
@@ -10,7 +10,7 @@ hero:
   actions:
     - theme: brand
       text: Quickstart
-      link: /guide/index
+      link: /guide/install
     - theme: alt
       text: GitHub
       link: https://github.com/mfuu/vue-virtual-drag-list