diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts deleted file mode 100644 index 38f768e..0000000 --- a/docs/.vitepress/config.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { defineConfig } from 'vitepress' - -// https://vitepress.dev/reference/site-config -export default defineConfig({ - title: "vue compose", - description: "A VitePress Site", - themeConfig: { - // https://vitepress.dev/reference/default-theme-config - nav: [ - { text: 'Home', link: '/' }, - { text: 'Examples', link: '/markdown-examples' } - ], - - sidebar: [ - { - text: '总览', - items: [ - { text: 'Markdown Examples', link: '/markdown-examples' }, - { text: 'Runtime API Examples', link: '/api-examples' } - ] - } - ], - - socialLinks: [ - { icon: 'github', link: 'https://github.com/baozjj/vueCompose' } - ] - } -}) diff --git a/docs/index.md b/docs/index.md deleted file mode 100644 index a2359bc..0000000 --- a/docs/index.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -# https://vitepress.dev/reference/default-theme-home-page -layout: home - -hero: - name: "vue compose" - text: "A VitePress Site" - tagline: My great project tagline - actions: - - theme: brand - text: Markdown Examples - link: /markdown-examples - - theme: alt - text: API Examples - link: /api-examples - -features: - - title: Feature A - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit - - title: Feature B - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit - - title: Feature C - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit ---- diff --git a/package.json b/package.json index 57be70b..5ccd891 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ "type-check": "vue-tsc --build --force", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "format": "prettier --write src/", - "docs:dev": "vitepress dev docs", - "docs:build": "vitepress build docs", + "docs:dev": "vitepress dev src", + "docs:build": "vitepress build src", "docs:preview": "vitepress preview docs" }, "dependencies": { diff --git a/docs/.vitepress/cache/deps/_metadata.json b/src/.vitepress/cache/deps/_metadata.json similarity index 79% rename from docs/.vitepress/cache/deps/_metadata.json rename to src/.vitepress/cache/deps/_metadata.json index 0fa303d..b15f554 100644 --- a/docs/.vitepress/cache/deps/_metadata.json +++ b/src/.vitepress/cache/deps/_metadata.json @@ -1,25 +1,25 @@ { - "hash": "625e17f5", - "configHash": "3193afe9", + "hash": "f023f743", + "configHash": "9f950202", "lockfileHash": "dfb63b6e", - "browserHash": "5c3d5a6e", + "browserHash": "9b1005c9", "optimized": { "vue": { "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js", "file": "vue.js", - "fileHash": "5d6da25e", + "fileHash": "02ecf9aa", "needsInterop": false }, "vitepress > @vue/devtools-api": { "src": "../../../../node_modules/@vue/devtools-api/dist/index.js", "file": "vitepress___@vue_devtools-api.js", - "fileHash": "9e6d9e13", + "fileHash": "874af93b", "needsInterop": false }, "vitepress > @vueuse/core": { "src": "../../../../node_modules/@vueuse/core/index.mjs", "file": "vitepress___@vueuse_core.js", - "fileHash": "e9e6a723", + "fileHash": "e153a697", "needsInterop": false } }, diff --git a/docs/.vitepress/cache/deps/chunk-AU3CLKKL.js b/src/.vitepress/cache/deps/chunk-AU3CLKKL.js similarity index 100% rename from docs/.vitepress/cache/deps/chunk-AU3CLKKL.js rename to src/.vitepress/cache/deps/chunk-AU3CLKKL.js diff --git a/docs/.vitepress/cache/deps/chunk-AU3CLKKL.js.map b/src/.vitepress/cache/deps/chunk-AU3CLKKL.js.map similarity index 100% rename from docs/.vitepress/cache/deps/chunk-AU3CLKKL.js.map rename to src/.vitepress/cache/deps/chunk-AU3CLKKL.js.map diff --git a/docs/.vitepress/cache/deps/package.json b/src/.vitepress/cache/deps/package.json similarity index 100% rename from docs/.vitepress/cache/deps/package.json rename to src/.vitepress/cache/deps/package.json diff --git a/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js b/src/.vitepress/cache/deps/vitepress___@vue_devtools-api.js similarity index 100% rename from docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js rename to src/.vitepress/cache/deps/vitepress___@vue_devtools-api.js diff --git a/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map b/src/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map similarity index 100% rename from docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map rename to src/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map diff --git a/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js b/src/.vitepress/cache/deps/vitepress___@vueuse_core.js similarity index 100% rename from docs/.vitepress/cache/deps/vitepress___@vueuse_core.js rename to src/.vitepress/cache/deps/vitepress___@vueuse_core.js diff --git a/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map b/src/.vitepress/cache/deps/vitepress___@vueuse_core.js.map similarity index 100% rename from docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map rename to src/.vitepress/cache/deps/vitepress___@vueuse_core.js.map diff --git a/docs/.vitepress/cache/deps/vue.js b/src/.vitepress/cache/deps/vue.js similarity index 100% rename from docs/.vitepress/cache/deps/vue.js rename to src/.vitepress/cache/deps/vue.js diff --git a/docs/.vitepress/cache/deps/vue.js.map b/src/.vitepress/cache/deps/vue.js.map similarity index 100% rename from docs/.vitepress/cache/deps/vue.js.map rename to src/.vitepress/cache/deps/vue.js.map diff --git a/src/.vitepress/config.ts b/src/.vitepress/config.ts new file mode 100644 index 0000000..559c68f --- /dev/null +++ b/src/.vitepress/config.ts @@ -0,0 +1,25 @@ +import { defineConfig } from 'vitepress' + +const Element = [ + { text: 'useDraggable', link: '/components/useDraggable/useDraggable.md' }, +] + +// https://vitepress.dev/reference/site-config +export default defineConfig({ + title: "vue compose", + description: "A VitePress Site", + themeConfig: { + nav: [ + { text: '快速入门', link: '/' }, + { text: 'API 示例', link: '/api-examples' } + ], + + sidebar: [ + { text: '元素', items: Element } + ], + + socialLinks: [ + { icon: 'github', link: 'https://github.com/baozjj/vueCompose' } + ] + } +}) diff --git a/docs/.vitepress/theme/index.ts b/src/.vitepress/theme/index.ts similarity index 100% rename from docs/.vitepress/theme/index.ts rename to src/.vitepress/theme/index.ts diff --git a/docs/.vitepress/theme/style.css b/src/.vitepress/theme/style.css similarity index 100% rename from docs/.vitepress/theme/style.css rename to src/.vitepress/theme/style.css diff --git a/docs/api-examples.md b/src/api-examples.md similarity index 100% rename from docs/api-examples.md rename to src/api-examples.md diff --git a/src/components/useDraggable/demo.vue b/src/components/useDraggable/demo.vue index 426f0e8..d3a3b78 100644 --- a/src/components/useDraggable/demo.vue +++ b/src/components/useDraggable/demo.vue @@ -1,15 +1,14 @@ @@ -18,8 +17,8 @@ import { onUnmounted, ref, watch } from 'vue' import { useDraggable } from './index' import type { IPosition } from './types' const dragDemo1 = ref(null) +const dragDemo2 = ref(null) const box = ref(null) -const btn = ref(null) const onStart = () => { console.log('onStart') @@ -43,19 +42,30 @@ const { position: dragDemo1Position } = useDraggable(dragDemo1, { containerElement: box, // handle: btn }) +useDraggable(dragDemo2, { + initialValue: { + x: 250, + y: 250 + }, +}) \ No newline at end of file diff --git a/src/components/useDraggable/index.ts b/src/components/useDraggable/index.ts index 17b958a..4224f08 100644 --- a/src/components/useDraggable/index.ts +++ b/src/components/useDraggable/index.ts @@ -40,13 +40,12 @@ export const useDraggable = ( const setStaticStyle = () => { if (!useDefaultStyles || !elementRef.value) return - elementRef.value!.classList.remove('use-dragging') + elementRef.value.classList.remove('use-dragging') elementRef.value.classList.add('use-draggable') } const setActiveStyle = () => { if (!useDefaultStyles || !elementRef.value) return - elementRef.value!.classList.remove('use-draggable') elementRef.value.classList.add('use-dragging') } @@ -73,8 +72,8 @@ export const useDraggable = ( return; } - draggingElement?.addEventListener('pointermove', onPointerMove, capture); - draggingElement?.addEventListener('pointerup', onPointerUp, capture); + draggingElement?.addEventListener('pointermove', onPointerMove as EventListener, capture); + draggingElement?.addEventListener('pointerup', onPointerUp as EventListener, capture); }; const onPointerMove = (event: PointerEvent) => { @@ -90,7 +89,7 @@ export const useDraggable = ( } if (containerElement) { - const boundaryRect = containerElement.value.getBoundingClientRect(); + const boundaryRect = containerElement.value!.getBoundingClientRect(); const elementRect = elementRef.value!.getBoundingClientRect(); newX = Math.max(boundaryRect.left, Math.min(boundaryRect.right - elementRect.width, newX)); @@ -111,8 +110,8 @@ export const useDraggable = ( setStaticStyle() isDragging.value = false; // 设置拖动结束 - draggingElement?.removeEventListener('pointermove', onPointerMove, capture); - draggingElement?.removeEventListener('pointerup', onPointerUp, capture); + draggingElement?.removeEventListener('pointermove', onPointerMove as EventListener, capture); + draggingElement?.removeEventListener('pointerup', onPointerUp as EventListener, capture); if (onEnd) { onEnd(position.value, event); // 调用 onEnd 回调 @@ -122,7 +121,7 @@ export const useDraggable = ( const initPosition = () => { let { x, y } = position.value if (containerElement) { - const boundaryRect = containerElement.value.getBoundingClientRect(); + const boundaryRect = containerElement.value!.getBoundingClientRect(); const elementRect = elementRef.value!.getBoundingClientRect(); x = Math.max(boundaryRect.left, Math.min(boundaryRect.right - elementRect.width, x)); y = Math.max(boundaryRect.top, Math.min(boundaryRect.bottom - elementRect.height, y)); @@ -137,10 +136,16 @@ export const useDraggable = ( handle.value!.style.cursor = 'move' setStaticStyle() initPosition() + if (containerElement) { + window.addEventListener('scroll', initPosition) + } }); onUnmounted(() => { handle.value?.removeEventListener('pointerdown', onPointerDown, capture); // 组件卸载时解绑 pointerdown 事件 + if (containerElement) { + window.removeEventListener('scroll', initPosition) + } }); return { diff --git a/src/components/useDraggable/style.css b/src/components/useDraggable/style.css index a445106..4b0c5a4 100644 --- a/src/components/useDraggable/style.css +++ b/src/components/useDraggable/style.css @@ -1,8 +1,10 @@ .use-draggable { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s ease; + z-index: 999; } .use-dragging { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -} \ No newline at end of file + user-select: none; +} diff --git a/src/components/useDraggable/useDraggable.md b/src/components/useDraggable/useDraggable.md new file mode 100644 index 0000000..22adc4f --- /dev/null +++ b/src/components/useDraggable/useDraggable.md @@ -0,0 +1,125 @@ +--- +category: Elements +--- + + + +# useDraggable + +使元素可拖动。 + +## Usage + + + +```vue + + + +``` + +```vue + + + +``` + +```vue + + + +``` + +```vue + + + +``` + +```vue + + + +``` diff --git a/src/doc/index.ts b/src/doc/index.ts new file mode 100644 index 0000000..b8454ab --- /dev/null +++ b/src/doc/index.ts @@ -0,0 +1,10 @@ +const ROUTER_CONFIG = { + ELEMENT: { + useDraggable: { + title: 'useDraggable', + path: '/.vitepress/doc/useDraggable.md' + } + } +} + +export default ROUTER_CONFIG \ No newline at end of file diff --git a/src/index.md b/src/index.md new file mode 100644 index 0000000..d066565 --- /dev/null +++ b/src/index.md @@ -0,0 +1,24 @@ +--- +# https://vitepress.dev/reference/default-theme-home-page +layout: home + +hero: + name: "vue compose" + text: "一个 Vue 3 的实用工具集合" + tagline: 提高开发效率的利器 + actions: + - theme: brand + text: 快速入门 + link: / + - theme: alt + text: API 示例 + link: /api-examples + +features: + - title: 轻松集成 + details: vueCompose 提供了简单易用的 API，使得集成到现有项目中变得非常轻松。 + - title: 功能丰富 + details: 包含丰富的实用功能，助力开发者提高开发效率 + - title: 状态管理 + details: 通过组合式 API 进行灵活的状态管理，使得组件之间的状态共享变得更加简单。 +--- diff --git a/docs/markdown-examples.md b/src/markdown-examples.md similarity index 100% rename from docs/markdown-examples.md rename to src/markdown-examples.md diff --git a/tsconfig.app.json b/tsconfig.app.json index e14c754..aef7c8d 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -1,6 +1,6 @@ { "extends": "@vue/tsconfig/tsconfig.dom.json", - "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "docs/**/*"], "exclude": ["src/**/__tests__/*"], "compilerOptions": { "composite": true,