15 | {value}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/packages/core/src/sensors/useSensor.ts:
--------------------------------------------------------------------------------
1 | import type {Sensor, SensorDescriptor, SensorOptions} from './types';
2 | import {computed, type ComputedRef} from "vue";
3 |
4 | export function useSensor
17 |
21 | )
22 | })
23 |
24 | App.props = vuePropsType
25 | App.name = 'App'
26 | export default App
27 |
28 |
--------------------------------------------------------------------------------
/packages/core/src/components/Accessibility/types.ts:
--------------------------------------------------------------------------------
1 | import type {Active, Over} from '../../store';
2 |
3 | export interface Arguments {
4 | active: Active;
5 | over: Over | null;
6 | }
7 |
8 | export interface Announcements {
9 | onDragStart({active}: Pick
31 | {announcement}
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/packages/core/src/CreateContextVueVNode/PublicContextProvider.tsx:
--------------------------------------------------------------------------------
1 |
2 | import {defineComponent, provide, ref, watch} from "vue";
3 | import type {PublicContextDescriptor} from "../store";
4 |
5 |
6 |
7 | const PublicContextProvider = defineComponent<{value:PublicContextDescriptor}>((props, {slots}) => {
8 | //console.log(props)
9 | // const DndContext = ref{{ msg }}
11 | 12 |
13 |
14 |
19 |
20 |
15 | Edit
16 | components/HelloWorld.vue to test HMR
17 |
21 | Check out 22 | create-vue, the official Vue + Vite starter 25 |
26 |27 | Install 28 | Volar 29 | in your IDE for a better DX 30 |
31 |Click on the Vite and Vue logos to learn more
32 | 33 | 34 | 39 | -------------------------------------------------------------------------------- /packages/accessibility/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": ["./**/*.spec.*","./**/_stories/.*","./**/_stories/.*","./**/__stories__/.*", 3 | "./main.ts", "../script/*", 4 | "./Comp1", 5 | "./App.tsx", 6 | "./**/__test__", 7 | "./test/*", 8 | "./*.ts" 9 | ], 10 | "compilerOptions": { 11 | "rootDir": "./src", 12 | "outDir": "./dist/types", 13 | "target": "esnext", 14 | "useDefineForClassFields": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "strict": true, 18 | "jsx": "preserve", 19 | "jsxImportSource": "vue", 20 | "jsxFactory": "h", 21 | "jsxFragmentFactory": "Fragment", 22 | "strictNullChecks": false, 23 | "sourceMap": true, 24 | "declaration": true, 25 | "emitDeclarationOnly": true, 26 | "resolveJsonModule": true, 27 | "esModuleInterop": true, 28 | "types": ["vite/client", "node"], 29 | "lib": ["esnext", "dom"], 30 | "noImplicitAny": false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |
9 |
10 |
11 |
13 |
42 |
44 |
49 |
54 | );
55 | }
56 | })
57 |
58 | SortableItem.props = vuePropsType
59 | SortableItem.name = 'SortableItem'
60 |
61 | export default SortableItem
62 |
63 |
--------------------------------------------------------------------------------
/packages/core/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @dnd-kit-vue/core
2 |
3 | ## 0.1.2
4 |
5 | ### Patch Changes
6 |
7 | - ff2942d: fix 0.1.1 ts5.5.1
8 | - Updated dependencies [ff2942d]
9 | - @dnd-kit-vue/accessibility@0.1.2
10 | - @dnd-kit-vue/utilities@0.1.2
11 |
12 | ## 0.1.1
13 |
14 | ### Patch Changes
15 |
16 | - 23dd1f2: fix 0.1.0
17 | - Updated dependencies [23dd1f2]
18 | - @dnd-kit-vue/accessibility@0.1.1
19 | - @dnd-kit-vue/utilities@0.1.1
20 |
21 | ## 0.1.0
22 |
23 | ### Minor Changes
24 |
25 | - f221a5c: vue 3.4
26 |
27 | ### Patch Changes
28 |
29 | - Updated dependencies [f221a5c]
30 | - @dnd-kit-vue/accessibility@0.1.0
31 | - @dnd-kit-vue/utilities@0.1.0
32 |
33 | ## 0.0.5
34 |
35 | ### Patch Changes
36 |
37 | - 30fce38: scrollableAncestorRects
38 | - Updated dependencies [30fce38]
39 | - @dnd-kit-vue/accessibility@0.0.5
40 | - @dnd-kit-vue/utilities@0.0.5
41 |
42 | ## 0.0.4
43 |
44 | ### Patch Changes
45 |
46 | - fdf35bb: fix build
47 | - 7c16d6d: a
48 | - 7ae3e8f: 合并
49 | - Updated dependencies [fdf35bb]
50 | - Updated dependencies [7c16d6d]
51 | - Updated dependencies [7ae3e8f]
52 | - @dnd-kit-vue/accessibility@0.0.4
53 | - @dnd-kit-vue/utilities@0.0.4
54 |
55 | ## 0.0.2
56 |
57 | ### Patch Changes
58 |
59 | - aca2662: DragOverlay
60 | - Updated dependencies [aca2662]
61 | - @dnd-kit-vue/accessibility@0.0.2
62 | - @dnd-kit-vue/utilities@0.0.2
63 |
64 | ## 0.0.1
65 |
66 | ### Patch Changes
67 |
68 | - 98942bd: first version
69 | - Updated dependencies [98942bd]
70 | - @dnd-kit-vue/accessibility@0.0.1
71 | - @dnd-kit-vue/utilities@0.0.1
72 |
--------------------------------------------------------------------------------
/packages/core/src/utilities/rect/Rect.ts:
--------------------------------------------------------------------------------
1 | import type {ClientRect} from '../../types/rect';
2 | import {
3 | getScrollableAncestors,
4 | getScrollOffsets,
5 | getScrollXOffset,
6 | getScrollYOffset,
7 | } from '../scroll';
8 |
9 | const properties = [
10 | ['x', ['left', 'right'], getScrollXOffset],
11 | ['y', ['top', 'bottom'], getScrollYOffset],
12 | ] as const;
13 |
14 | export class Rect {
15 | constructor(rect: ClientRect, element: Element) {
16 | const scrollableAncestors = getScrollableAncestors(element);
17 | const scrollOffsets = getScrollOffsets(scrollableAncestors);
18 |
19 | this.rect = {...rect};
20 | this.width = rect.width;
21 | this.height = rect.height;
22 |
23 | for (const [axis, keys, getScrollOffset] of properties) {
24 | for (const key of keys) {
25 | Object.defineProperty(this, key, {
26 | get: () => {
27 | const currentOffsets = getScrollOffset(scrollableAncestors);
28 | const scrollOffsetsDeltla = scrollOffsets[axis] - currentOffsets;
29 |
30 | return this.rect[key] + scrollOffsetsDeltla;
31 | },
32 | enumerable: true,
33 | });
34 | }
35 | }
36 |
37 | Object.defineProperty(this, 'rect', {enumerable: false});
38 | }
39 |
40 | private rect: ClientRect;
41 |
42 | public width: number;
43 |
44 | public height: number;
45 |
46 | // The below properties are set by the `Object.defineProperty` calls in the constructor
47 | // @ts-ignore
48 | public top: number;
49 | // @ts-ignore
50 | public bottom: number;
51 | // @ts-ignore
52 | public right: number;
53 | // @ts-ignore
54 | public left: number;
55 | }
56 |
--------------------------------------------------------------------------------
/packages/core/src/hooks/utilities/useDragOverlayMeasuring.ts:
--------------------------------------------------------------------------------
1 |
2 | import {isHTMLElement, useNodeRef} from '@dnd-kit-vue/utilities';
3 |
4 | import {useResizeObserver} from './useResizeObserver';
5 | import {getMeasurableNode} from '../../utilities/nodes';
6 | import type {PublicContextDescriptor} from '../../store';
7 | import type {ClientRect} from '../../types';
8 | import {computed, type ComputedRef, type Ref, ref} from "vue";
9 |
10 | interface Arguments {
11 | measure(element: HTMLElement): ClientRect;
12 | }
13 |
14 | export function useDragOverlayMeasuring({
15 | measure,
16 | }: Arguments): ComputedRef<{ rect: Ref
50 | {/* ... */}
51 | {props.id}
52 |
53 |
3 |
4 |
13 |
14 |
15 |
88 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dnd-kit-vue",
3 | "version": "0.0.0",
4 | "private": true,
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "preview": "vite preview",
9 | "test:unit": "vitest",
10 | "build:all": "pnpm -C ./packages/accessibility build && pnpm -C ./packages/core build && pnpm -C ./packages/modifiers build && pnpm -C ./packages/sortable build && pnpm -C ./packages/utilities build",
11 | "type-check": "vue-tsc --build --force",
12 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
13 | "format": "prettier --write src/",
14 | "change": "pnpm changeset",
15 | "version": "pnpm changeset version",
16 | "publish": "pnpm changeset publish"
17 | },
18 | "dependencies": {
19 | "@changesets/cli": "^2.27.5",
20 | "@dnd-kit-vue/accessibility": "workspace:*",
21 | "@dnd-kit-vue/core": "workspace:*",
22 | "@dnd-kit-vue/modifiers": "workspace:*",
23 | "@dnd-kit-vue/sortable": "workspace:*",
24 | "@dnd-kit-vue/utilities": "workspace:*",
25 | "vue": "^3.4.27"
26 | },
27 | "devDependencies": {
28 | "@rushstack/eslint-patch": "^1.8.0",
29 | "@tsconfig/node20": "^20.1.4",
30 | "@types/jsdom": "^21.1.6",
31 | "@types/node": "^20.12.5",
32 | "@vitejs/plugin-vue": "^5.0.5",
33 | "@vitejs/plugin-vue-jsx": "^4.0.0",
34 | "@vue/eslint-config-prettier": "^9.0.0",
35 | "@vue/eslint-config-typescript": "^13.0.0",
36 | "@vue/test-utils": "^2.4.5",
37 | "@vue/tsconfig": "^0.5.1",
38 | "eslint": "^8.57.0",
39 | "eslint-plugin-vue": "^9.23.0",
40 | "jsdom": "^24.0.0",
41 | "npm-run-all2": "^6.1.2",
42 | "prettier": "^3.2.5",
43 | "typescript": "^5.5.1-rc",
44 | "vite": "^5.2.13",
45 | "vite-plugin-vue-devtools": "^7.0.25",
46 | "vitest": "^1.4.0",
47 | "vue-tsc": "^2.0.21"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/packages/core/src/utilities/scroll/getScrollableAncestors.ts:
--------------------------------------------------------------------------------
1 | import {
2 | getWindow,
3 | isDocument,
4 | isHTMLElement,
5 | isSVGElement,
6 | } from '@dnd-kit-vue/utilities';
7 |
8 | import {isFixed} from './isFixed';
9 | import {isScrollable} from './isScrollable';
10 |
11 | export function getScrollableAncestors(
12 | element: Node | null,
13 | limit?: number
14 | ): Element[] {
15 | const scrollParents: Element[] = [];
16 | function findScrollableAncestors(node: Node | null): Element[] {
17 | if (limit != null && scrollParents.length >= limit) {
18 | return scrollParents;
19 | }
20 |
21 | if (!node) {
22 | return scrollParents;
23 | }
24 |
25 |
26 | if (
27 | isDocument(node) &&
28 | node.scrollingElement != null &&
29 | !scrollParents.includes(node.scrollingElement)
30 | ) {
31 | scrollParents.push(node.scrollingElement);
32 |
33 | return scrollParents;
34 | }
35 |
36 | if (!isHTMLElement(node) || isSVGElement(node)) {
37 | return scrollParents;
38 | }
39 |
40 | if (scrollParents.includes(node)) {
41 | return scrollParents;
42 | }
43 |
44 | const {getComputedStyle} = getWindow(node);
45 | const computedStyle = getComputedStyle(node);
46 |
47 | if (node !== element) {
48 | if (isScrollable(node, computedStyle)) {
49 | scrollParents.push(node);
50 | }
51 | }
52 |
53 | if (isFixed(node, computedStyle)) {
54 | return scrollParents;
55 | }
56 |
57 | return findScrollableAncestors(node.parentNode);
58 | }
59 |
60 | if (!element) {
61 | return scrollParents;
62 | }
63 |
64 | return findScrollableAncestors(element);
65 | }
66 |
67 | export function getFirstScrollableAncestor(node: Node | null): Element | null {
68 | const [firstScrollableAncestor] = getScrollableAncestors(node, 1);
69 |
70 | return firstScrollableAncestor ?? null;
71 | }
72 |
--------------------------------------------------------------------------------
/packages/core/src/hooks/utilities/useRects.ts:
--------------------------------------------------------------------------------
1 |
2 | import {getWindow, useIsomorphicLayoutEffect} from '@dnd-kit-vue/utilities';
3 |
4 | import type {ClientRect} from '../../types';
5 | import {Rect, getClientRect} from '../../utilities/rect';
6 | import {isDocumentScrollingElement, useReducer} from '../../utilities';
7 |
8 | import {useResizeObserver} from './useResizeObserver';
9 | import {useWindowRect} from './useWindowRect';
10 | import { computed, type ComputedRef, ref, type ShallowRef, watch } from 'vue'
11 |
12 | const defaultValue: Rect[] = [];
13 |
14 | export function useRects(
15 | elements: ShallowRef
7 |
8 |
10 |
12 |