chore: removed prop itemClass

Author: mfuu

README.md

@@ -1,17 +1,17 @@
-# vue-virtual-draglist
+# vue-virtual-sortable
 
-[![npm](https://img.shields.io/npm/v/vue-virtual-draglist/next.svg)](https://www.npmjs.com/package/vue-virtual-draglist) [![npm](https://img.shields.io/npm/dm/vue-virtual-draglist.svg)](https://www.npmjs.com/package/vue-virtual-draglist) [![vue2](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)
+[![npm](https://img.shields.io/npm/v/vue-virtual-sortable/next.svg)](https://www.npmjs.com/package/vue-virtual-sortable) [![npm](https://img.shields.io/npm/dm/vue-virtual-sortable.svg)](https://www.npmjs.com/package/vue-virtual-sortable) [![vue2](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)
 
 A virtual scrolling list component that can be sorted by dragging, support vue3
 
-If you use vue with 2.x, see [here](https://github.com/mfuu/vue-virtual-drag-list)
+If you use vue with 2.x, see [here](https://github.com/mfuu/vue-virtual-sortable)
 
-### [Live demo](https://mfuu.github.io/vue3-virtual-drag-list/)
+### [Live demo](https://mfuu.github.io/vue3-virtual-sortable/)
 
 ## Simple usage
 
 ```bash
-npm i vue-virtual-draglist@next
+npm i vue-virtual-sortable@next
 ```
 
 Root component:
@@ -42,7 +42,7 @@ Root component:
 </template>
 
 <script setup lang="ts">
-import VirtualList from 'vue-virtual-draglist';
+import VirtualList from 'vue-virtual-sortable';
 
 const list = ref([
   { id: '1', text: 'abc' },
@@ -103,8 +103,7 @@ const list = ref([
 | **Prop**           | **Type**  | **Default**              | **Description**                                               |
 | ------------------ | --------- | ------------------------ | ------------------------------------------------------------- |
 | `sortable`         | `Boolean` | `true`                   | Whether the current list can be sorted by dragging            |
-| `draggable`        | `String`  | `.virtual-dnd-list-item` | Specifies which items inside the element should be draggable. |
-| `itemClass`        | `String`  | `virtual-dnd-list-item`  | Default list item class                                       |
+| `draggable`        | `String`  | `[role="item"]`          | Specifies which items inside the element should be draggable. |
 | `disabled`         | `Boolean` | `false`                  | Disables the sortable if set to true                          |
 | `animation`        | `Number`  | `150`                    | Animation speed moving items when sorting                     |
 | `autoScroll`       | `Boolean` | `true`                   | Automatic scrolling when moving to the edge of the container  |

dist/virtual-drag-list.min.js

@@ -1,8 +1,8 @@
 {
-  "name": "vue-virtual-draglist",
-  "version": "3.3.8",
+  "name": "vue-virtual-sortable",
+  "version": "3.0.0",
   "description": "A virtual scrolling list component that can be sorted by dragging, support vue3",
-  "main": "dist/virtual-drag-list.min.js",
+  "main": "dist/virtual-list.min.js",
   "types": "types/index.d.ts",
   "files": [
     "dist",
@@ -18,7 +18,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/mfuu/vue-virtual-drag-list.git"
+    "url": "git+https://github.com/mfuu/vue-virtual-sortable.git"
   },
   "keywords": [
     "vue",
@@ -42,7 +42,7 @@
   },
   "homepage": "https://github.com/mfuu/vue3-virtual-drag-list#readme",
   "dependencies": {
-    "sortable-dnd": "^0.6.20"
+    "sortable-dnd": "^0.6.22"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
@@ -56,13 +56,13 @@
     "@vitepress-demo-preview/component": "^2.3.2",
     "@vitepress-demo-preview/plugin": "^1.2.3",
     "cross-env": "^7.0.3",
-    "lint-staged": "^11.1.2",
     "mockjs": "^1.1.0",
     "prettier": "^2.3.2",
     "rollup": "^2.56.2",
     "rollup-plugin-dts": "^4.2.3",
+    "tslib": "^2.8.1",
     "typescript": "^4.3.5",
-    "vitepress": "^1.4.1",
+    "vitepress": "~1.4.1",
     "vue": "~3.2.2"
   }
 }

dist/virtual-drag-list.js renamed to dist/virtual-list.js

@@ -11,7 +11,7 @@ const homepage = packageJson.homepage;
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 const banner = `
 /*!
- * vue-virtual-draglist v${version}
+ * vue-virtual-sortable v${version}
  * open source under the MIT license
  * ${homepage}
  */
@@ -24,7 +24,7 @@ export default [
     output: [
       {
         format: 'umd',
-        file: 'dist/virtual-drag-list.js',
+        file: 'dist/virtual-list.js',
         name: 'VirtualList',
         sourcemap: false,
         globals: {
@@ -34,7 +34,7 @@ export default [
       },
       {
         format: 'umd',
-        file: 'dist/virtual-drag-list.min.js',
+        file: 'dist/virtual-list.min.js',
         name: 'VirtualList',
         sourcemap: false,
         globals: {

dist/virtual-list.min.js

@@ -326,8 +326,9 @@ const VirtualList = defineComponent({
 
     // ========================================== layout ==========================================
     const renderSpacer = (offset) => {
+      const offsetKey = horizontal.value ? 'width' : 'height';
       if (props.tableMode) {
-        const tdStyle = { padding: 0, border: 0, height: `${offset}px` };
+        const tdStyle = { padding: 0, border: 0, [offsetKey]: `${offset}px` };
 
         return h('tr', {}, [h('td', { style: tdStyle })]);
       }
@@ -353,7 +354,6 @@ const VirtualList = defineComponent({
                   Item,
                   {
                     key: dataKey,
-                    class: props.itemClass,
                     style: dragging.value && isChosen && { display: 'none' },
                     dataKey: dataKey,
                     sizeKey: sizeKey,

package.json

@@ -55,13 +55,13 @@ const Item = defineComponent({
     const customSlot = createSlot({ mounted, updated, unmounted });
 
     return () => {
-      const { dataKey, itemClass } = props;
+      const { dataKey } = props;
       const [defaultSlot] = slots.default?.() || [];
       return h(
         customSlot,
         {
           key: dataKey,
-          class: itemClass,
+          role: 'item',
           vnode: defaultSlot,
           'data-key': dataKey,
         },

rollup.config.js

@@ -16,11 +16,7 @@ export const VirtualProps = {
   },
   draggable: {
     type: String,
-    default: '.virtual-dnd-list-item',
-  },
-  itemClass: {
-    type: String,
-    default: 'virtual-dnd-list-item',
+    default: '[role="item"]',
   },
   sortable: {
     type: Boolean,
@@ -141,8 +137,4 @@ export const ItemProps = {
     type: String,
     default: 'offsetHeight',
   },
-  itemClass: {
-    type: String,
-    default: undefined,
-  },
 };

src/index.tsx

@@ -15,10 +15,6 @@ declare const VirtualList: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    itemClass: {
-        type: StringConstructor;
-        default: string;
-    };
     sortable: {
         type: BooleanConstructor;
         default: boolean;
@@ -153,10 +149,6 @@ declare const VirtualList: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    itemClass: {
-        type: StringConstructor;
-        default: string;
-    };
     sortable: {
         type: BooleanConstructor;
         default: boolean;
@@ -285,7 +277,6 @@ declare const VirtualList: vue.DefineComponent<{
     dataKey: string;
     tableMode: boolean;
     draggable: string;
-    itemClass: string;
     sortable: boolean;
     handle: string | Function;
     group: string | Record<string, any>;