From 4440b7c53ee18ea892c94c493e4ce2d582880ce8 Mon Sep 17 00:00:00 2001
From: wheat
Date: Fri, 17 Sep 2021 03:17:56 -0400
Subject: [PATCH] feat(useDrauu): New function (#744)
Co-authored-by: Anthony Fu
---
README.md | 2 +-
indexes.json | 7 +
packages/add-ons.md | 1 +
packages/integrations/README.md | 1 +
packages/integrations/index.ts | 1 +
packages/integrations/package.json | 5 +
packages/integrations/pnpm-lock.yaml | 491 ++++++++++++++++++++++++
packages/integrations/useDrauu/demo.vue | 142 +++++++
packages/integrations/useDrauu/index.md | 25 ++
packages/integrations/useDrauu/index.ts | 119 ++++++
yarn.lock | 66 ++++
11 files changed, 859 insertions(+), 1 deletion(-)
create mode 100644 packages/integrations/pnpm-lock.yaml
create mode 100644 packages/integrations/useDrauu/demo.vue
create mode 100644 packages/integrations/useDrauu/index.md
create mode 100644 packages/integrations/useDrauu/index.ts
diff --git a/README.md b/README.md
index 5904278910a6..82781a31d438 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
-
+
diff --git a/indexes.json b/indexes.json
index c6a06144655a..452d5aa2879a 100644
--- a/indexes.json
+++ b/indexes.json
@@ -1060,6 +1060,13 @@
"category": "@Integrations",
"description": "wrapper for [`universal-cookie`](https://www.npmjs.com/package/universal-cookie)"
},
+ {
+ "name": "useDrauu",
+ "package": "integrations",
+ "docs": "https://vueuse.org/integrations/useDrauu/",
+ "category": "@Integrations",
+ "description": "reactive instance for [drauu](https://github.com/antfu/drauu)"
+ },
{
"name": "useFocusTrap",
"package": "integrations",
diff --git a/packages/add-ons.md b/packages/add-ons.md
index f94a6ba541a5..e2f1831ca1db 100644
--- a/packages/add-ons.md
+++ b/packages/add-ons.md
@@ -58,6 +58,7 @@ Utilities for vue-router
Integration wrappers for utility libraries
- [`useAxios`](https://vueuse.org/integrations/useAxios/) — wrapper for [`axios`](https://github.com/axios/axios)
- [`useCookies`](https://vueuse.org/integrations/useCookies/) — wrapper for [`universal-cookie`](https://www.npmjs.com/package/universal-cookie)
+ - [`useDrauu`](https://vueuse.org/integrations/useDrauu/) — reactive instance for [drauu](https://github.com/antfu/drauu)
- [`useFocusTrap`](https://vueuse.org/integrations/useFocusTrap/) — reactive wrapper for [`focus-trap`](https://github.com/focus-trap/focus-trap)
- [`useJwt`](https://vueuse.org/integrations/useJwt/) — wrapper for [`jwt-decode`](https://github.com/auth0/jwt-decode)
- [`useNProgress`](https://vueuse.org/integrations/useNProgress/) — reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress)
diff --git a/packages/integrations/README.md b/packages/integrations/README.md
index a7db85986b49..c14baa2866ab 100644
--- a/packages/integrations/README.md
+++ b/packages/integrations/README.md
@@ -16,6 +16,7 @@ npm i @vueuse/integrations
- [`useAxios`](https://vueuse.org/integrations/useAxios/) — wrapper for [`axios`](https://github.com/axios/axios)
- [`useCookies`](https://vueuse.org/integrations/useCookies/) — wrapper for [`universal-cookie`](https://www.npmjs.com/package/universal-cookie)
+ - [`useDrauu`](https://vueuse.org/integrations/useDrauu/) — reactive instance for [drauu](https://github.com/antfu/drauu)
- [`useFocusTrap`](https://vueuse.org/integrations/useFocusTrap/) — reactive wrapper for [`focus-trap`](https://github.com/focus-trap/focus-trap)
- [`useJwt`](https://vueuse.org/integrations/useJwt/) — wrapper for [`jwt-decode`](https://github.com/auth0/jwt-decode)
- [`useNProgress`](https://vueuse.org/integrations/useNProgress/) — reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress)
diff --git a/packages/integrations/index.ts b/packages/integrations/index.ts
index 5e444f11132c..49d6036c1129 100644
--- a/packages/integrations/index.ts
+++ b/packages/integrations/index.ts
@@ -1,5 +1,6 @@
export * from './useAxios'
export * from './useCookies'
+export * from './useDrauu'
export * from './useFocusTrap'
export * from './useJwt'
export * from './useNProgress'
diff --git a/packages/integrations/package.json b/packages/integrations/package.json
index 77d2cf8879d5..7e75f3774705 100644
--- a/packages/integrations/package.json
+++ b/packages/integrations/package.json
@@ -28,6 +28,10 @@
"import": "./useCookies.mjs",
"require": "./useCookies.cjs"
},
+ "./useDrauu": {
+ "import": "./useDrauu.mjs",
+ "require": "./useDrauu.cjs"
+ },
"./useFocusTrap": {
"import": "./useFocusTrap.mjs",
"require": "./useFocusTrap.cjs"
@@ -61,6 +65,7 @@
},
"optionalDependencies": {
"axios": "^0.21.4",
+ "drauu": "^0.1.0",
"focus-trap": "^6.6.1",
"jwt-decode": "^3.1.2",
"nprogress": "^0.2.0",
diff --git a/packages/integrations/pnpm-lock.yaml b/packages/integrations/pnpm-lock.yaml
new file mode 100644
index 000000000000..98d55184bcac
--- /dev/null
+++ b/packages/integrations/pnpm-lock.yaml
@@ -0,0 +1,491 @@
+lockfileVersion: 5.3
+
+specifiers:
+ '@types/nprogress': ^0.2.0
+ '@types/qrcode': ^1.4.1
+ '@types/universal-cookie': ^3.0.0
+ '@vueuse/shared': 6.3.3
+ axios: ^0.21.4
+ drauu: ^0.1.0
+ focus-trap: ^6.6.1
+ jwt-decode: ^3.1.2
+ nprogress: ^0.2.0
+ qrcode: ^1.4.4
+ universal-cookie: ^4.0.4
+ vue-demi: '*'
+
+dependencies:
+ '@vueuse/shared': 6.3.3
+ vue-demi: 0.11.4
+
+optionalDependencies:
+ axios: 0.21.4
+ drauu: 0.1.0
+ focus-trap: 6.6.1
+ jwt-decode: 3.1.2
+ nprogress: 0.2.0
+ qrcode: 1.4.4
+ universal-cookie: 4.0.4
+
+devDependencies:
+ '@types/nprogress': 0.2.0
+ '@types/qrcode': 1.4.1
+ '@types/universal-cookie': 3.0.0
+
+packages:
+
+ /@drauu/core/0.1.0:
+ resolution: {integrity: sha512-I8FnzXt7sVx+OfwzHfHvpKCK7G5ZR0Gf9pGe9w2QtRj9RBefEtskaY9eHgDHUCP5GeSoB1BIwWwFFGxMzq4kcQ==}
+ dependencies:
+ perfect-freehand: 0.5.3
+ transitivePeerDependencies:
+ - react
+ - react-dom
+ dev: false
+ optional: true
+
+ /@tldraw/core/0.0.53:
+ resolution: {integrity: sha512-hxZIUR3Sm320tvGW5lWEKfw1QJhe6mJu7IrG5ka5G3slusqaY3cQY9EafFqH07yEXul2MU2RENIQus7fh+Gwcg==}
+ peerDependencies:
+ react: ^17.0.2
+ react-dom: ^17.0.2
+ dependencies:
+ deepmerge: 4.2.2
+ ismobilejs: 1.1.1
+ react-use-gesture: 9.1.3
+ dev: false
+ optional: true
+
+ /@types/cookie/0.3.3:
+ resolution: {integrity: sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==}
+
+ /@types/node/16.9.1:
+ resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==}
+ dev: true
+
+ /@types/nprogress/0.2.0:
+ resolution: {integrity: sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==}
+ dev: true
+
+ /@types/qrcode/1.4.1:
+ resolution: {integrity: sha512-vxMyr7JM7tYPxu8vUE83NiosWX5DZieCyYeJRoOIg0pAkyofCBzknJ2ycUZkPGDFis2RS8GN/BeJLnRnAPxeCA==}
+ dependencies:
+ '@types/node': 16.9.1
+ dev: true
+
+ /@types/universal-cookie/3.0.0:
+ resolution: {integrity: sha512-EnipDS8yUDYvcyN7jVJYOK29zvJwsnVLUZoGtozjOzkM31ZfJSDrtofraIgoi7eagCHLXwrspqsFOHTtpcHFDg==}
+ deprecated: This is a stub types definition. universal-cookie provides its own type definitions, so you do not need this installed.
+ dependencies:
+ universal-cookie: 4.0.4
+ dev: true
+
+ /@vueuse/shared/6.3.3:
+ resolution: {integrity: sha512-2+YPRhFNUXEhhvKNTWBtNU6hGkft9+mfYSVjI4hZu2U8KDbNNKF/215lBPzMYI2twScDtPsAssQ+vu5t9PBy0g==}
+ peerDependencies:
+ '@vue/composition-api': ^1.1.0
+ vue: ^2.6.0 || ^3.2.0
+ peerDependenciesMeta:
+ '@vue/composition-api':
+ optional: true
+ vue:
+ optional: true
+ dependencies:
+ vue-demi: 0.11.4
+ dev: false
+
+ /ansi-regex/4.1.0:
+ resolution: {integrity: sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==}
+ engines: {node: '>=6'}
+ dev: false
+ optional: true
+
+ /ansi-styles/3.2.1:
+ resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+ engines: {node: '>=4'}
+ dependencies:
+ color-convert: 1.9.3
+ dev: false
+ optional: true
+
+ /axios/0.21.4:
+ resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
+ dependencies:
+ follow-redirects: 1.14.3
+ transitivePeerDependencies:
+ - debug
+ dev: false
+ optional: true
+
+ /base64-js/1.5.1:
+ resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+ dev: false
+ optional: true
+
+ /buffer-alloc-unsafe/1.1.0:
+ resolution: {integrity: sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==}
+ dev: false
+ optional: true
+
+ /buffer-alloc/1.2.0:
+ resolution: {integrity: sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==}
+ dependencies:
+ buffer-alloc-unsafe: 1.1.0
+ buffer-fill: 1.0.0
+ dev: false
+ optional: true
+
+ /buffer-fill/1.0.0:
+ resolution: {integrity: sha1-+PeLdniYiO858gXNY39o5wISKyw=}
+ dev: false
+ optional: true
+
+ /buffer-from/1.1.2:
+ resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+ dev: false
+ optional: true
+
+ /buffer/5.7.1:
+ resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+ dependencies:
+ base64-js: 1.5.1
+ ieee754: 1.2.1
+ dev: false
+ optional: true
+
+ /camelcase/5.3.1:
+ resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+ engines: {node: '>=6'}
+ dev: false
+ optional: true
+
+ /cliui/5.0.0:
+ resolution: {integrity: sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==}
+ dependencies:
+ string-width: 3.1.0
+ strip-ansi: 5.2.0
+ wrap-ansi: 5.1.0
+ dev: false
+ optional: true
+
+ /color-convert/1.9.3:
+ resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+ dependencies:
+ color-name: 1.1.3
+ dev: false
+ optional: true
+
+ /color-name/1.1.3:
+ resolution: {integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=}
+ dev: false
+ optional: true
+
+ /cookie/0.4.1:
+ resolution: {integrity: sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==}
+ engines: {node: '>= 0.6'}
+
+ /decamelize/1.2.0:
+ resolution: {integrity: sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=}
+ engines: {node: '>=0.10.0'}
+ dev: false
+ optional: true
+
+ /deepmerge/4.2.2:
+ resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
+ engines: {node: '>=0.10.0'}
+ dev: false
+ optional: true
+
+ /dijkstrajs/1.0.2:
+ resolution: {integrity: sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==}
+ dev: false
+ optional: true
+
+ /drauu/0.1.0:
+ resolution: {integrity: sha512-/sCWL0RpjrSQwJuu0gEBpf9j6HTVOAjaD6IwLT3ISWxbT9bNegHJgiHOQENAFOW8SNOx/sskGLnx/LY7das8Ww==}
+ dependencies:
+ '@drauu/core': 0.1.0
+ transitivePeerDependencies:
+ - react
+ - react-dom
+ dev: false
+ optional: true
+
+ /emoji-regex/7.0.3:
+ resolution: {integrity: sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==}
+ dev: false
+ optional: true
+
+ /find-up/3.0.0:
+ resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
+ engines: {node: '>=6'}
+ dependencies:
+ locate-path: 3.0.0
+ dev: false
+ optional: true
+
+ /focus-trap/6.6.1:
+ resolution: {integrity: sha512-x9BWuAeF5UrfWuYKJ3jYrjcVYSYptS9CqtxH5IH7lPlZrMsaugKeAa0HtoZSBZe5DmeTMx2m0qY464ZMzqarzw==}
+ dependencies:
+ tabbable: 5.2.1
+ dev: false
+ optional: true
+
+ /follow-redirects/1.14.3:
+ resolution: {integrity: sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw==}
+ engines: {node: '>=4.0'}
+ peerDependencies:
+ debug: '*'
+ peerDependenciesMeta:
+ debug:
+ optional: true
+ dev: false
+ optional: true
+
+ /get-caller-file/2.0.5:
+ resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+ engines: {node: 6.* || 8.* || >= 10.*}
+ dev: false
+ optional: true
+
+ /idb-keyval/5.1.5:
+ resolution: {integrity: sha512-J1utxYWQokYjy01LvDQ7WmiAtZCGUSkVi9EIBfUSyLOr/BesnMIxNGASTh9A1LzeISSjSqEPsfFdTss7EE7ofQ==}
+ dependencies:
+ safari-14-idb-fix: 1.0.6
+ dev: false
+ optional: true
+
+ /ieee754/1.2.1:
+ resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+ dev: false
+ optional: true
+
+ /is-fullwidth-code-point/2.0.0:
+ resolution: {integrity: sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=}
+ engines: {node: '>=4'}
+ dev: false
+ optional: true
+
+ /isarray/2.0.5:
+ resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+ dev: false
+ optional: true
+
+ /ismobilejs/1.1.1:
+ resolution: {integrity: sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==}
+ dev: false
+ optional: true
+
+ /jwt-decode/3.1.2:
+ resolution: {integrity: sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==}
+ dev: false
+ optional: true
+
+ /locate-path/3.0.0:
+ resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
+ engines: {node: '>=6'}
+ dependencies:
+ p-locate: 3.0.0
+ path-exists: 3.0.0
+ dev: false
+ optional: true
+
+ /nprogress/0.2.0:
+ resolution: {integrity: sha1-y480xTIT2JVyP8urkH6UIq28r7E=}
+ dev: false
+ optional: true
+
+ /p-limit/2.3.0:
+ resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+ engines: {node: '>=6'}
+ dependencies:
+ p-try: 2.2.0
+ dev: false
+ optional: true
+
+ /p-locate/3.0.0:
+ resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
+ engines: {node: '>=6'}
+ dependencies:
+ p-limit: 2.3.0
+ dev: false
+ optional: true
+
+ /p-try/2.2.0:
+ resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+ engines: {node: '>=6'}
+ dev: false
+ optional: true
+
+ /path-exists/3.0.0:
+ resolution: {integrity: sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=}
+ engines: {node: '>=4'}
+ dev: false
+ optional: true
+
+ /perfect-freehand/0.5.3:
+ resolution: {integrity: sha512-WbMEf78Chx1APwGNoKQf64fbUa12fCAXziKUf2BWoeZ2upsKu5OirCzLnIgjeZYkIB6jOoOtQawCb7CZZ+t/Aw==}
+ dependencies:
+ '@tldraw/core': 0.0.53
+ rko: 0.5.25
+ transitivePeerDependencies:
+ - react
+ - react-dom
+ dev: false
+ optional: true
+
+ /pngjs/3.4.0:
+ resolution: {integrity: sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==}
+ engines: {node: '>=4.0.0'}
+ dev: false
+ optional: true
+
+ /qrcode/1.4.4:
+ resolution: {integrity: sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==}
+ engines: {node: '>=4'}
+ hasBin: true
+ dependencies:
+ buffer: 5.7.1
+ buffer-alloc: 1.2.0
+ buffer-from: 1.1.2
+ dijkstrajs: 1.0.2
+ isarray: 2.0.5
+ pngjs: 3.4.0
+ yargs: 13.3.2
+ dev: false
+ optional: true
+
+ /react-use-gesture/9.1.3:
+ resolution: {integrity: sha512-CdqA2SmS/fj3kkS2W8ZU8wjTbVBAIwDWaRprX7OKaj7HlGwBasGEFggmk5qNklknqk9zK/h8D355bEJFTpqEMg==}
+ peerDependencies:
+ react: '>= 16.8.0'
+ dev: false
+ optional: true
+
+ /require-directory/2.1.1:
+ resolution: {integrity: sha1-jGStX9MNqxyXbiNE/+f3kqam30I=}
+ engines: {node: '>=0.10.0'}
+ dev: false
+ optional: true
+
+ /require-main-filename/2.0.0:
+ resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+ dev: false
+ optional: true
+
+ /rko/0.5.25:
+ resolution: {integrity: sha512-HU6M3PxK3VEqrr6QZKAsqO98juQX24kEgJkKSdFJhw8U/DBUGAnU/fgyxNIaTw7TCI7vjIy/RzBEXf5I4sijKg==}
+ peerDependencies:
+ react: ^17.0.2
+ react-dom: ^17.0.2
+ dependencies:
+ idb-keyval: 5.1.5
+ zustand: 3.5.10
+ dev: false
+ optional: true
+
+ /safari-14-idb-fix/1.0.6:
+ resolution: {integrity: sha512-oTEQOdMwRX+uCtWCKT1nx2gAeSdpr8elg/2gcaKUH00SJU2xWESfkx11nmXwTRHy7xfQoj1o4TTQvdmuBosTnA==}
+ dev: false
+ optional: true
+
+ /set-blocking/2.0.0:
+ resolution: {integrity: sha1-BF+XgtARrppoA93TgrJDkrPYkPc=}
+ dev: false
+ optional: true
+
+ /string-width/3.1.0:
+ resolution: {integrity: sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==}
+ engines: {node: '>=6'}
+ dependencies:
+ emoji-regex: 7.0.3
+ is-fullwidth-code-point: 2.0.0
+ strip-ansi: 5.2.0
+ dev: false
+ optional: true
+
+ /strip-ansi/5.2.0:
+ resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==}
+ engines: {node: '>=6'}
+ dependencies:
+ ansi-regex: 4.1.0
+ dev: false
+ optional: true
+
+ /tabbable/5.2.1:
+ resolution: {integrity: sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==}
+ dev: false
+ optional: true
+
+ /universal-cookie/4.0.4:
+ resolution: {integrity: sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==}
+ dependencies:
+ '@types/cookie': 0.3.3
+ cookie: 0.4.1
+
+ /vue-demi/0.11.4:
+ resolution: {integrity: sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==}
+ engines: {node: '>=12'}
+ hasBin: true
+ requiresBuild: true
+ peerDependencies:
+ '@vue/composition-api': ^1.0.0-rc.1
+ vue: ^3.0.0-0 || ^2.6.0
+ peerDependenciesMeta:
+ '@vue/composition-api':
+ optional: true
+ dev: false
+
+ /which-module/2.0.0:
+ resolution: {integrity: sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=}
+ dev: false
+ optional: true
+
+ /wrap-ansi/5.1.0:
+ resolution: {integrity: sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==}
+ engines: {node: '>=6'}
+ dependencies:
+ ansi-styles: 3.2.1
+ string-width: 3.1.0
+ strip-ansi: 5.2.0
+ dev: false
+ optional: true
+
+ /y18n/4.0.3:
+ resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+ dev: false
+ optional: true
+
+ /yargs-parser/13.1.2:
+ resolution: {integrity: sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==}
+ dependencies:
+ camelcase: 5.3.1
+ decamelize: 1.2.0
+ dev: false
+ optional: true
+
+ /yargs/13.3.2:
+ resolution: {integrity: sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==}
+ dependencies:
+ cliui: 5.0.0
+ find-up: 3.0.0
+ get-caller-file: 2.0.5
+ require-directory: 2.1.1
+ require-main-filename: 2.0.0
+ set-blocking: 2.0.0
+ string-width: 3.1.0
+ which-module: 2.0.0
+ y18n: 4.0.3
+ yargs-parser: 13.1.2
+ dev: false
+ optional: true
+
+ /zustand/3.5.10:
+ resolution: {integrity: sha512-upluvSRWrlCiExu2UbkuMIPJ9AigyjRFoO7O9eUossIj7rPPq7pcJ0NKk6t2P7KF80tg/UdPX6/pNKOSbs9DEg==}
+ peerDependencies:
+ react: '>=16.8'
+ peerDependenciesMeta:
+ react:
+ optional: true
+ dev: false
+ optional: true
diff --git a/packages/integrations/useDrauu/demo.vue b/packages/integrations/useDrauu/demo.vue
new file mode 100644
index 000000000000..ccb8a9e4714c
--- /dev/null
+++ b/packages/integrations/useDrauu/demo.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/integrations/useDrauu/index.md b/packages/integrations/useDrauu/index.md
new file mode 100644
index 000000000000..4047ed0ef36c
--- /dev/null
+++ b/packages/integrations/useDrauu/index.md
@@ -0,0 +1,25 @@
+---
+category: '@Integrations'
+---
+
+# useDrauu
+
+Reactive instance for [drauu](https://github.com/antfu/drauu)
+
+## Usage
+
+```html
+
+
+
+
+
+```
diff --git a/packages/integrations/useDrauu/index.ts b/packages/integrations/useDrauu/index.ts
new file mode 100644
index 000000000000..aad6a3cb68b4
--- /dev/null
+++ b/packages/integrations/useDrauu/index.ts
@@ -0,0 +1,119 @@
+import { ref, watch } from 'vue-demi'
+import { createDrauu, Drauu, Options, Brush } from 'drauu'
+import { MaybeElementRef, unrefElement, createEventHook } from '@vueuse/core'
+import { tryOnScopeDispose, Fn } from '@vueuse/shared'
+
+export type UseDrauuOptions = Omit
+
+/**
+ * Reactive drauu
+ *
+ * @see https://vueuse.org/useDrauu
+ * @param target The target svg element
+ * @param options Drauu Options
+ */
+export function useDrauu(
+ target: MaybeElementRef,
+ options?: UseDrauuOptions,
+) {
+ const drauuInstance = ref()
+
+ let disposables: Fn[] = []
+
+ const onChangedHook = createEventHook()
+ const onCanceledHook = createEventHook()
+ const onCommittedHook = createEventHook()
+ const onStartHook = createEventHook()
+ const onEndHook = createEventHook()
+ const canUndo = ref(false)
+ const canRedo = ref(false)
+ const altPressed = ref(false)
+ const shiftPressed = ref(false)
+
+ const brush = ref({
+ color: 'black',
+ size: 3,
+ arrowEnd: false,
+ cornerRadius: 0,
+ dasharray: undefined,
+ fill: 'transparent',
+ mode: 'draw',
+ })
+
+ watch(brush, () => {
+ const instance = drauuInstance.value
+
+ if (instance)
+ instance.brush = brush.value
+ }, { deep: true })
+
+ const undo = () => drauuInstance.value?.undo()
+ const redo = () => drauuInstance.value?.redo()
+ const clear = () => drauuInstance.value?.clear()
+ const cancel = () => drauuInstance.value?.cancel()
+ const load = (svg: string) => drauuInstance.value?.load(svg)
+ const dump = () => drauuInstance.value?.dump()
+
+ const cleanup = () => {
+ disposables.forEach(dispose => dispose())
+ drauuInstance.value?.unmount()
+ }
+
+ const syncStatus = () => {
+ if (drauuInstance.value) {
+ canUndo.value = drauuInstance.value.canUndo()
+ canRedo.value = drauuInstance.value.canRedo()
+ altPressed.value = drauuInstance.value.altPressed
+ shiftPressed.value = drauuInstance.value.shiftPressed
+ }
+ }
+
+ watch(
+ () => unrefElement(target),
+ (el) => {
+ if (!el || !(el instanceof SVGSVGElement))
+ return
+
+ if (drauuInstance.value)
+ cleanup()
+
+ drauuInstance.value = createDrauu({ el, ...options })
+
+ syncStatus()
+
+ disposables = [
+ drauuInstance.value.on('canceled', () => onCanceledHook.trigger()),
+ drauuInstance.value.on('committed', () => onCommittedHook.trigger()),
+ drauuInstance.value.on('start', () => onStartHook.trigger()),
+ drauuInstance.value.on('end', () => onEndHook.trigger()),
+ drauuInstance.value.on('changed', () => {
+ syncStatus()
+ onChangedHook.trigger()
+ }),
+ ]
+ }, { flush: 'post' })
+
+ tryOnScopeDispose(() => cleanup())
+
+ return {
+ drauuInstance,
+
+ load,
+ dump,
+ clear,
+ cancel,
+ undo,
+ redo,
+ canUndo,
+ canRedo,
+ brush,
+
+ onChanged: onChangedHook.on,
+ onCommitted: onCommittedHook.on,
+ onStart: onStartHook.on,
+ onEnd: onEndHook.on,
+ onCanceled: onCanceledHook.on,
+ }
+}
+
+export type UseDrauuReturn = ReturnType
diff --git a/yarn.lock b/yarn.lock
index 3fef5854b173..1caf7a178ff3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1113,6 +1113,13 @@
"@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.28"
algoliasearch "^4.0.0"
+"@drauu/core@0.1.2":
+ version "0.1.2"
+ resolved "https://registry.yarnpkg.com/@drauu/core/-/core-0.1.2.tgz#0b32fad77d735cb8451863fac7da153e174ddb2d"
+ integrity sha512-jMuxH5y82etwgrEZ26KzVYajEwM7aMqss+g5ZntcyS4K72iFf5T3AQnoPNER4628VE6hz2JQlhoUWGAS6xZIrg==
+ dependencies:
+ perfect-freehand "^0.5.3"
+
"@electron/get@^1.0.1":
version "1.12.4"
resolved "https://registry.yarnpkg.com/@electron/get/-/get-1.12.4.tgz#a5971113fc1bf8fa12a8789dc20152a7359f06ab"
@@ -1863,6 +1870,15 @@
dependencies:
defer-to-connect "^1.0.1"
+"@tldraw/core@^0.0.53":
+ version "0.0.53"
+ resolved "https://registry.yarnpkg.com/@tldraw/core/-/core-0.0.53.tgz#2db2b27df441169e452e0aa07570adca8b06b582"
+ integrity sha512-hxZIUR3Sm320tvGW5lWEKfw1QJhe6mJu7IrG5ka5G3slusqaY3cQY9EafFqH07yEXul2MU2RENIQus7fh+Gwcg==
+ dependencies:
+ deepmerge "^4.2.2"
+ ismobilejs "^1.1.1"
+ react-use-gesture "^9.1.3"
+
"@tootallnate/once@1":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -3470,6 +3486,13 @@ domutils@^2.5.2:
domelementtype "^2.2.0"
domhandler "^4.2.0"
+drauu@^0.1.0:
+ version "0.1.2"
+ resolved "https://registry.yarnpkg.com/drauu/-/drauu-0.1.2.tgz#1056032382d60d72db8f5d4ec68f5b8857d01bfb"
+ integrity sha512-2u+4OxP9FSgwz2033Y1sP8lg7SSF3dhPHkBdo97iNNJrD3gkYzgvsfJL1Z2x+rqksltRGtnlUByCW8/jIm7KKg==
+ dependencies:
+ "@drauu/core" "0.1.2"
+
duplexer3@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -4631,6 +4654,13 @@ icss-utils@^5.0.0:
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+idb-keyval@^5.1.3:
+ version "5.1.5"
+ resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-5.1.5.tgz#be11174bac0cb756dba4cc86fb36b6cd63f5ce6d"
+ integrity sha512-J1utxYWQokYjy01LvDQ7WmiAtZCGUSkVi9EIBfUSyLOr/BesnMIxNGASTh9A1LzeISSjSqEPsfFdTss7EE7ofQ==
+ dependencies:
+ safari-14-idb-fix "^1.0.6"
+
idb@3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/idb/-/idb-3.0.2.tgz#c8e9122d5ddd40f13b60ae665e4862f8b13fa384"
@@ -4962,6 +4992,11 @@ isexe@^2.0.0:
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+ismobilejs@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/ismobilejs/-/ismobilejs-1.1.1.tgz#c56ca0ae8e52b24ca0f22ba5ef3215a2ddbbaa0e"
+ integrity sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==
+
istanbul-lib-coverage@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
@@ -6437,6 +6472,14 @@ pend@~1.2.0:
resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+perfect-freehand@^0.5.3:
+ version "0.5.4"
+ resolved "https://registry.yarnpkg.com/perfect-freehand/-/perfect-freehand-0.5.4.tgz#4cc48dfe34c10977da9a6170d49cedb4c095ead3"
+ integrity sha512-DmM6N/jNIl3oPHV73q0xvR0UGuKUV7wfkINuLd8m+R5aiJbs2V+E2zseHGZ4HcU5VUzb/BlqEARP28NuxBTiGQ==
+ dependencies:
+ "@tldraw/core" "^0.0.53"
+ rko "^0.5.19"
+
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
version "2.3.0"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
@@ -6780,6 +6823,11 @@ react-is@^17.0.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+react-use-gesture@^9.1.3:
+ version "9.1.3"
+ resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-9.1.3.tgz#92bd143e4f58e69bd424514a5bfccba2a1d62ec0"
+ integrity sha512-CdqA2SmS/fj3kkS2W8ZU8wjTbVBAIwDWaRprX7OKaj7HlGwBasGEFggmk5qNklknqk9zK/h8D355bEJFTpqEMg==
+
read-pkg-up@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
@@ -7017,6 +7065,14 @@ rimraf@^3.0.0, rimraf@^3.0.2:
dependencies:
glob "^7.1.3"
+rko@^0.5.19:
+ version "0.5.25"
+ resolved "https://registry.yarnpkg.com/rko/-/rko-0.5.25.tgz#1095803900e3f912f6adf8a1c113b8227d3d88bf"
+ integrity sha512-HU6M3PxK3VEqrr6QZKAsqO98juQX24kEgJkKSdFJhw8U/DBUGAnU/fgyxNIaTw7TCI7vjIy/RzBEXf5I4sijKg==
+ dependencies:
+ idb-keyval "^5.1.3"
+ zustand "^3.5.9"
+
roarr@^2.15.3:
version "2.15.4"
resolved "https://registry.yarnpkg.com/roarr/-/roarr-2.15.4.tgz#f5fe795b7b838ccfe35dc608e0282b9eba2e7afd"
@@ -7097,6 +7153,11 @@ rxjs@^6.6.7:
dependencies:
tslib "^1.9.0"
+safari-14-idb-fix@^1.0.6:
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/safari-14-idb-fix/-/safari-14-idb-fix-1.0.6.tgz#cbaabc33a4500c44b5c432d6c525b0ed9b68bb65"
+ integrity sha512-oTEQOdMwRX+uCtWCKT1nx2gAeSdpr8elg/2gcaKUH00SJU2xWESfkx11nmXwTRHy7xfQoj1o4TTQvdmuBosTnA==
+
safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -8662,3 +8723,8 @@ yocto-queue@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^3.5.9:
+ version "3.5.10"
+ resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.5.10.tgz#d2622efd64530ffda285ee5b13ff645b68ab0faf"
+ integrity sha512-upluvSRWrlCiExu2UbkuMIPJ9AigyjRFoO7O9eUossIj7rPPq7pcJ0NKk6t2P7KF80tg/UdPX6/pNKOSbs9DEg==