Skip to content

Commit 5678a5c

Browse files
mfuumfuu
committed
feat: support smart scroll & rewrite sortable core
1 parent 8260a01 commit 5678a5c

File tree

16 files changed

+291
-2278
lines changed

16 files changed

+291
-2278
lines changed

‎.github/workflows/npm-publish.yml‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎.github/workflows/publish.yml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: npm publish
2+
3+
on:
4+
release:
5+
types: [published]
6+
permissions:
7+
id-token: write # Required for OIDC
8+
contents: read
9+
10+
jobs:
11+
publish-npm:
12+
runs-on: ubuntu-latest
13+
steps:
14+
- name: Checkout
15+
uses: actions/checkout@v4
16+
17+
- name: Setup Node
18+
uses: actions/setup-node@v4
19+
with:
20+
node-version: 20
21+
registry-url: https://registry.npmjs.org/
22+
23+
# Ensure npm 11.5.1 or later is installed
24+
- name: Install npm latest
25+
run: npm install -g npm@latest
26+
27+
- name: Install dependencies
28+
run: npm install
29+
30+
- name: Install submodules
31+
run: git submodule update --init --recursive
32+
33+
- name: Build
34+
run: npm run build
35+
36+
- name: Publish to npm
37+
run: npm publish

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
dev
44
issues
55
coverage
6+
/dist
67

78
# dependencies
89
node_modules
@@ -19,3 +20,7 @@ yarn.lock
1920
# vuepress
2021
.temp
2122
docs/*/dist
23+
24+
# System files
25+
.DS_Store
26+
Thumbs.db

‎README.md‎

Lines changed: 54 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -56,76 +56,77 @@ export default {
5656

5757
## Emits
5858

59-
| **Emit** | **Description** |
60-
| ------------- | ------------------ |
61-
| `top` | scrolled to top |
62-
| `bottom` | scrolled to bottom |
63-
| `drag` | drag is started |
64-
| `drop` | drag is completed |
65-
| `rangeChange` | range changed |
59+
| **Emit** | **Description** |
60+
| ------------- | ------------------------------------ |
61+
| `top` | Scrolled to top of scroll element |
62+
| `bottom` | Scrolled to bottom of scroll element |
63+
| `drag` | Element dragging started |
64+
| `drop` | Element dragging is completed |
65+
| `rangeChange` | List rendering range changed |
6666

6767
## Props
6868

6969
### Required props
7070

7171
| **Prop** | **Type** | **Description** |
7272
| ---------- | -------- | --------------------------------------------------------------------- |
73-
| `data-key` | String | The unique identifier of each piece of data, in the form of `'a.b.c'` |
74-
| `v-model` | Array | The data that needs to be rendered |
73+
| `data-key` | `String` | The unique identifier of each piece of data, in the form of `'a.b.c'` |
74+
| `v-model` | `Array` | The data that needs to be rendered |
7575

7676
### Optional props
7777

7878
**Commonly used**
7979

80-
| **Prop** | **Type** | **Default** | **Description** |
81-
| -------------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------- |
82-
| `keeps` | `Number` | `30` | The number of lines rendered by the virtual scroll |
83-
| `size` | `Number` | `-` | The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated |
84-
| `handle` | `Function/String` | `-` | Drag handle selector within list items |
85-
| `group` | `Function/String` | `-` | string: 'name' or object: `{ name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }` |
86-
| `direction` | `vertical \| horizontal` | `vertical` | Scroll direction |
87-
| `scroller` | `Document \| HTMLElement` | `-` | Virtual list scrolling element |
88-
| `lockAxis` | `x \| y` | `-` | Axis on which dragging will be locked |
89-
| `tableMode` | `Boolean` | `false` | display with table and tbody |
90-
| `keepOffset` | `Boolean` | `false` | When scrolling up to load data, keep the same offset as the previous scroll |
91-
| `debounceTime` | `Number` | `0` | debounce time on scroll |
92-
| `throttleTime` | `Number` | `0` | throttle time on scroll |
80+
| **Prop** | **Type** | **Default** | **Description** |
81+
| -------------- | ------------------------- | ----------- | ------------------------------------------------------------------------------- |
82+
| `keeps` | `Number` | `30` | The number of lines rendered by the virtual scroll |
83+
| `size` | `Number` | `-` | The estimated height of each piece of data, it will be automatically calculated |
84+
| `handle` | `Function/String` | `-` | Drag handle selector within list items |
85+
| `group` | `Object/String` | `-` | Set value to allow drag between different lists |
86+
| `direction` | `vertical \| horizontal` | `vertical` | Scroll direction |
87+
| `scroller` | `Document \| HTMLElement` | `-` | Virtual list scrolling element |
88+
| `lockAxis` | `x \| y` | `-` | Axis on which dragging will be locked |
89+
| `tableMode` | `Boolean` | `false` | Display with table and tbody |
90+
| `keepOffset` | `Boolean` | `false` | When scrolling up to load data, keep the same offset as the previous scroll |
91+
| `debounceTime` | `Number` | `0` | Scroll debounce time |
92+
| `throttleTime` | `Number` | `0` | Scroll throttle time |
9393

9494
**Uncommonly used**
9595

96-
| **Prop** | **Type** | **Default** | **Description** |
97-
| ------------------ | --------- | ------------------------ | ------------------------------------------------------------ |
98-
| `sortable` | `Boolean` | `true` | Whether the current list can be sorted by dragging |
99-
| `draggable` | `String` | `[role="item"]` | Specifies which items inside the element should be draggable |
100-
| `disabled` | `Boolean` | `false` | Disables the sortable if set to true |
101-
| `animation` | `Number` | `150` | Animation speed moving items when sorting |
102-
| `autoScroll` | `Boolean` | `true` | Automatic scrolling when moving to the edge of the container |
103-
| `scrollSpeed` | `Object` | `{ x: 10, y: 10 }` | Vertical&Horizontal scrolling speed (px) |
104-
| `scrollThreshold` | `Number` | `55` | Threshold to trigger autoscroll |
105-
| `delay` | `Number` | `0` | Time in milliseconds to define when the sorting should start |
106-
| `delayOnTouchOnly` | `Boolean` | `false` | Only delay on press if user is using touch |
107-
| `fallbackOnBody` | `Boolean` | `false` | Appends the ghost element into the document's body |
108-
| `rootTag` | `String` | `div` | Label type for root element |
109-
| `wrapTag` | `String` | `div` | Label type for list wrap element |
110-
| `wrapClass` | `String` | `''` | List wrapper element class |
111-
| `wrapStyle` | `Object` | `{}` | List wrapper element style |
112-
| `ghostClass` | `String` | `''` | The class of the mask element when dragging |
113-
| `ghostStyle` | `Object` | `{}` | The style of the mask element when dragging |
114-
| `chosenClass` | `String` | `''` | Class name for the chosen item |
115-
| `placeholderClass` | `String` | `''` | Class name for the drop placeholder |
96+
| **Prop** | **Type** | **Default** | **Description** |
97+
| -------------------- | --------- | ------------------ | ------------------------------------------------------------- |
98+
| `disabled` | `Boolean` | `false` | Disables the sortable if set to true |
99+
| `sortable` | `Boolean` | `true` | Whether the current list can be sorted by dragging |
100+
| `draggable` | `String` | `[role="item"]` | Specifies which items inside the element should be draggable. |
101+
| `animation` | `Number` | `150` | Animation speed moving items when sorting |
102+
| `autoScroll` | `Boolean` | `true` | Automatic scrolling when moving to the edge of the container |
103+
| `scrollSpeed` | `Object` | `{ x: 10, y: 10 }` | Vertical&Horizontal scrolling speed (px) |
104+
| `scrollThreshold` | `Number` | `55` | Threshold to trigger autoscroll |
105+
| `delay` | `Number` | `0` | Time in milliseconds to define when the sorting should start |
106+
| `delayOnTouchOnly` | `Boolean` | `false` | Only delay on press if user is using touch |
107+
| `appendToBody` | `Boolean` | `false` | Appends the ghost element into the document's body |
108+
| `dropOnAnimationEnd` | `Boolean` | `true` | Whether to trigger the drop event when the animation ends |
109+
| `rootTag` | `String` | `div` | Label type for root element |
110+
| `wrapTag` | `String` | `div` | Label type for list wrap element |
111+
| `wrapClass` | `String` | `''` | Class name for list wrap element |
112+
| `wrapStyle` | `Object` | `{}` | Style object for list wrap element |
113+
| `ghostClass` | `String` | `''` | Class name for the mask element when dragging |
114+
| `ghostStyle` | `Object` | `{}` | Style object for the mask element when dragging |
115+
| `chosenClass` | `String` | `''` | Class name for the chosen item |
116+
| `placeholderClass` | `String` | `''` | Class name for the drop placeholder |
116117

117118
## Methods
118119

119120
Use <code><a href="https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements">ref</a></code> to get the method inside the component
120121

121-
| **Method** | **Description** |
122-
| ------------------------ | ---------------------------------------------------------- |
123-
| `getSize(key)` | Get the size of the current item by unique key value |
124-
| `getOffset()` | Get the current scroll height |
125-
| `getClientSize()` | Get wrapper element client viewport size (width or height) |
126-
| `getScrollSize()` | Get all scroll size (scrollHeight or scrollWidth) |
127-
| `scrollToTop()` | Scroll to top of list |
128-
| `scrollToBottom()` | Scroll to bottom of list |
129-
| `scrollToKey(key)` | Scroll to the specified data-key position |
130-
| `scrollToIndex(index)` | Scroll to the specified index position |
131-
| `scrollToOffset(offset)` | Scroll to the specified offset |
122+
| **Method** | **Description** |
123+
| ----------------------------- | ---------------------------------------------------------- |
124+
| `getSize(key)` | Get the size of the current item by unique key value |
125+
| `getOffset()` | Get the current scroll height |
126+
| `getClientSize()` | Get wrapper element client viewport size (width or height) |
127+
| `getScrollSize()` | Get all scroll size (scrollHeight or scrollWidth) |
128+
| `scrollToTop()` | Scroll to top of list |
129+
| `scrollToBottom()` | Scroll to bottom of list |
130+
| `scrollToKey(key, align)` | Scroll to the specified data-key position |
131+
| `scrollToIndex(index, align)` | Scroll to the specified index position |
132+
| `scrollToOffset(offset)` | Scroll to the specified offset |

0 commit comments

Comments
 (0)