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 NPM version NPM Downloads Docs & Demos -Function Count +Function Count
GitHub stars

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==