diff --git a/package-lock.json b/package-lock.json index 3f00d9b..2d672ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vuedraggable", - "version": "4.0.1", + "version": "4.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1717,6 +1717,12 @@ "@types/mime": "*" } }, + "@types/sortablejs": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.7.tgz", + "integrity": "sha512-lGCwwgpj8zW/ZmaueoPVSP7nnc9t8VqVWXS+ASX3eoUUENmiazv0rlXyTRludXzuX9ALjPsMqBu85TgJNWbTOg==", + "dev": true + }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -2199,17 +2205,6 @@ "unique-filename": "^1.1.1" } }, - "chalk": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", - "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, "cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", @@ -2273,18 +2268,6 @@ "supports-color": "^7.0.0" } }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -2375,18 +2358,6 @@ "webpack-sources": "^1.4.3" } }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.2.0", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz", - "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - } - }, "wrap-ansi": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", @@ -12743,11 +12714,6 @@ "is-plain-obj": "^1.0.0" } }, - "sortablejs": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz", - "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==" - }, "source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -13697,9 +13663,9 @@ "dev": true }, "typescript": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.3.tgz", - "integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==", + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz", + "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==", "dev": true }, "uglify-js": { @@ -14165,6 +14131,87 @@ } } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.5.0", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz", + "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue-router": { "version": "4.0.0-beta.13", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.0-beta.13.tgz", diff --git a/package.json b/package.json index 3d65d00..17c951c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "draggable component for vue", "license": "MIT", "main": "dist/vuedraggable.umd.min.js", - "types": "src/vuedraggable.d.ts", + "types": "types/vuedraggable.d.ts", "repository": { "type": "git", "url": "https://github.com/SortableJS/Vue.Draggable.git" @@ -15,9 +15,10 @@ "build:doc": "vue-cli-service build ./example/main.js --dest docs --mode development", "build": "vue-cli-service build --name vuedraggable --entry ./src/vuedraggable.js --target lib", "lint": "vue-cli-service lint src example", - "prepublishOnly": "npm run lint && npm run test:unit && npm run build:doc && npm run build", + "prepublishOnly": "npm run lint && npm run test:unit && npm run build:doc && npm run build:type && npm run build", "test:unit": "vue-cli-service test:unit --coverage", - "test:coverage": "vue-cli-service test:unit --coverage --verbose && codecov" + "test:coverage": "vue-cli-service test:unit --coverage --verbose && codecov", + "build:type": "tsc" }, "keywords": [ "vue", @@ -37,6 +38,7 @@ "vue": "^3.0.1" }, "devDependencies": { + "@types/sortablejs": "^1.10.7", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-unit-jest": "^4.5.4", @@ -57,7 +59,7 @@ "font-awesome": "^4.7.0", "jquery": "^3.5.1", "popper.js": "^1.16.1", - "typescript": "^4.0.3", + "typescript": "^4.3.5", "vue": "^3.0.1", "vue-jest": "^5.0.0-alpha.5", "vue-router": "^4.0.0-beta.13", @@ -91,6 +93,7 @@ "dist/*.css", "dist/*.map", "dist/*.js", + "types/*", "src/*" ], "module": "dist/vuedraggable.umd.js" diff --git a/src/vuedraggable.js b/src/vuedraggable.js index 26b7335..678a86b 100644 --- a/src/vuedraggable.js +++ b/src/vuedraggable.js @@ -199,6 +199,7 @@ const draggableComponent = defineComponent({ }, spliceList() { + // @ts-ignore const spliceList = list => list.splice(...arguments); this.alterList(spliceList); }, @@ -243,6 +244,7 @@ const draggableComponent = defineComponent({ } removeNode(evt.item); const newIndex = this.getVmIndexFromDomIndex(evt.newIndex); + // @ts-ignore this.spliceList(newIndex, 0, element); const added = { element, newIndex }; this.emitChanges({ added }); @@ -255,6 +257,7 @@ const draggableComponent = defineComponent({ return; } const { index: oldIndex, element } = this.context; + // @ts-ignore this.spliceList(oldIndex, 1); const removed = { element, oldIndex }; this.emitChanges({ removed }); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..14d8ca7 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "es2016", + "lib":["esnext", "DOM"], + "moduleResolution": "node", + "allowJs": true, + "checkJs": true, + "emitDeclarationOnly": true, + "downlevelIteration": true, + "esModuleInterop": true, + "outDir": "./types", + "declaration": true + }, + "files": [ + "./src/vuedraggable.js" + ] +} \ No newline at end of file diff --git a/types/core/componentBuilderHelper.d.ts b/types/core/componentBuilderHelper.d.ts new file mode 100644 index 0000000..a80299a --- /dev/null +++ b/types/core/componentBuilderHelper.d.ts @@ -0,0 +1,9 @@ +export function getComponentAttributes({ $attrs, componentData }: { + $attrs: any; + componentData?: {}; +}): any; +export function createSortableOption({ $attrs, callBackBuilder }: { + $attrs: any; + callBackBuilder: any; +}): any; +export function getValidSortableEntries(value: any): any[][]; diff --git a/types/core/componentStructure.d.ts b/types/core/componentStructure.d.ts new file mode 100644 index 0000000..48abad1 --- /dev/null +++ b/types/core/componentStructure.d.ts @@ -0,0 +1,22 @@ +export class ComponentStructure { + constructor({ nodes: { header, default: defaultNodes, footer }, root, realList }: { + nodes: { + header: any; + default: any; + footer: any; + }; + root: any; + realList: any; + }); + defaultNodes: any; + children: any[]; + externalComponent: any; + rootTransition: any; + tag: any; + realList: any; + get _isRootComponent(): any; + render(h: any, attributes: any): any; + updated(): void; + getUnderlyingVm(domElement: any): any; + getVmIndexFromDomIndex(domIndex: any, element: any): any; +} diff --git a/types/core/renderHelper.d.ts b/types/core/renderHelper.d.ts new file mode 100644 index 0000000..7648ea1 --- /dev/null +++ b/types/core/renderHelper.d.ts @@ -0,0 +1,7 @@ +export function computeComponentStructure({ $slots, tag, realList, getKey }: { + $slots: any; + tag: any; + realList: any; + getKey: any; +}): ComponentStructure; +import { ComponentStructure } from "./componentStructure"; diff --git a/types/core/sortableEvents.d.ts b/types/core/sortableEvents.d.ts new file mode 100644 index 0000000..d1f768a --- /dev/null +++ b/types/core/sortableEvents.d.ts @@ -0,0 +1,10 @@ +export namespace events { + export { manage }; + export { manageAndEmit }; + export { emit }; +} +export function isReadOnly(eventName: any): boolean; +declare const manage: string[]; +declare const manageAndEmit: string[]; +declare const emit: string[]; +export {}; diff --git a/types/util/console.d.ts b/types/util/console.d.ts new file mode 100644 index 0000000..3022ad6 --- /dev/null +++ b/types/util/console.d.ts @@ -0,0 +1 @@ +export const console: Console; diff --git a/types/util/htmlHelper.d.ts b/types/util/htmlHelper.d.ts new file mode 100644 index 0000000..9bce9b6 --- /dev/null +++ b/types/util/htmlHelper.d.ts @@ -0,0 +1,2 @@ +export function insertNodeAt(fatherNode: any, node: any, position: any): void; +export function removeNode(node: any): void; diff --git a/types/util/string.d.ts b/types/util/string.d.ts new file mode 100644 index 0000000..0ff46eb --- /dev/null +++ b/types/util/string.d.ts @@ -0,0 +1 @@ +export function camelize(str: any): any; diff --git a/types/util/tags.d.ts b/types/util/tags.d.ts new file mode 100644 index 0000000..10a103e --- /dev/null +++ b/types/util/tags.d.ts @@ -0,0 +1,3 @@ +export function isHtmlTag(name: any): boolean; +export function isHtmlAttribute(value: any): any; +export function isTransition(name: any): boolean; diff --git a/src/vuedraggable.d.ts b/types/vuedraggable.d.ts similarity index 92% rename from src/vuedraggable.d.ts rename to types/vuedraggable.d.ts index f8cb1b1..7264acb 100644 --- a/src/vuedraggable.d.ts +++ b/types/vuedraggable.d.ts @@ -1,3 +1,4 @@ +export default draggableComponent; declare const draggableComponent: import("vue").DefineComponent<{ list: { type: ArrayConstructor; @@ -30,7 +31,7 @@ declare const draggableComponent: import("vue").DefineComponent<{ required: boolean; default: any; }; -}, unknown, { +}, any, { error: boolean; }, { realList(): any; @@ -54,21 +55,20 @@ declare const draggableComponent: import("vue").DefineComponent<{ computeFutureIndex(relatedContext: any, evt: any): any; onDragMove(evt: any, originalEvent: any): any; onDragEnd(): void; -}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any[], any, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ +}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{ move: Function; - tag: string; clone: Function; + componentData: Record; + tag: string; list: unknown[]; modelValue: unknown[]; - componentData: Record; } & { itemKey?: string | Function; }>, { move: Function; - tag: string; clone: Function; + componentData: Record; + tag: string; list: unknown[]; modelValue: unknown[]; - componentData: Record; }>; -export default draggableComponent;