@vueuse/integrations 13.9.0 → 14.0.0-alpha.1

package/dist/useAxios.js

@@ -0,0 +1,124 @@
+import { noop, until } from "@vueuse/shared";
+import axios, { AxiosError } from "axios";
+import { ref, shallowRef } from "vue";
+
+//#region useAxios/index.ts
+/**
+* Wrapper for axios.
+*
+* @see https://vueuse.org/useAxios
+*/
+function useAxios(...args) {
+	const url = typeof args[0] === "string" ? args[0] : void 0;
+	const argsPlaceholder = typeof url === "string" ? 1 : 0;
+	const defaultOptions = {
+		immediate: !!argsPlaceholder,
+		shallow: true,
+		abortPrevious: true
+	};
+	let defaultConfig = {};
+	let instance = axios;
+	let options = defaultOptions;
+	const isAxiosInstance = (val) => !!(val === null || val === void 0 ? void 0 : val.request);
+	if (args.length > 0 + argsPlaceholder)
+ /**
+	* Unable to use `instanceof` here because of (https://github.com/axios/axios/issues/737)
+	* so instead we are checking if there is a `request` on the object to see if it is an
+	* axios instance
+	*/
+	if (isAxiosInstance(args[0 + argsPlaceholder])) instance = args[0 + argsPlaceholder];
+	else defaultConfig = args[0 + argsPlaceholder];
+	if (args.length > 1 + argsPlaceholder) {
+		if (isAxiosInstance(args[1 + argsPlaceholder])) instance = args[1 + argsPlaceholder];
+	}
+	if (args.length === 2 + argsPlaceholder && !isAxiosInstance(args[1 + argsPlaceholder]) || args.length === 3 + argsPlaceholder) options = args[args.length - 1] || defaultOptions;
+	const { shallow, onSuccess = noop, onError = noop, immediate, resetOnExecute = false } = options;
+	const initialData = options.initialData;
+	const response = shallowRef();
+	const data = (shallow ? shallowRef : ref)(initialData);
+	const isFinished = shallowRef(false);
+	const isLoading = shallowRef(false);
+	const isAborted = shallowRef(false);
+	const error = shallowRef();
+	let abortController = new AbortController();
+	const abort = (message) => {
+		if (isFinished.value || !isLoading.value) return;
+		abortController.abort(message);
+		abortController = new AbortController();
+		isAborted.value = true;
+		isLoading.value = false;
+		isFinished.value = false;
+	};
+	const loading = (loading$1) => {
+		isLoading.value = loading$1;
+		isFinished.value = !loading$1;
+	};
+	/**
+	* Reset data to initialData
+	*/
+	const resetData = () => {
+		if (resetOnExecute) data.value = initialData;
+	};
+	const waitUntilFinished = () => new Promise((resolve, reject) => {
+		until(isFinished).toBe(true).then(() => error.value ? reject(error.value) : resolve(result));
+	});
+	const promise = {
+		then: (...args$1) => waitUntilFinished().then(...args$1),
+		catch: (...args$1) => waitUntilFinished().catch(...args$1)
+	};
+	let executeCounter = 0;
+	const execute = (executeUrl = url, config = {}) => {
+		error.value = void 0;
+		const _url = typeof executeUrl === "string" ? executeUrl : url !== null && url !== void 0 ? url : config.url;
+		if (_url === void 0) {
+			error.value = new AxiosError(AxiosError.ERR_INVALID_URL);
+			isFinished.value = true;
+			return promise;
+		}
+		resetData();
+		if (options.abortPrevious !== false) abort();
+		loading(true);
+		executeCounter += 1;
+		const currentExecuteCounter = executeCounter;
+		isAborted.value = false;
+		instance(_url, {
+			...defaultConfig,
+			...typeof executeUrl === "object" ? executeUrl : config,
+			signal: abortController.signal
+		}).then((r) => {
+			if (isAborted.value) return;
+			response.value = r;
+			const result$1 = r.data;
+			data.value = result$1;
+			onSuccess(result$1);
+		}).catch((e) => {
+			error.value = e;
+			onError(e);
+		}).finally(() => {
+			var _options$onFinish;
+			(_options$onFinish = options.onFinish) === null || _options$onFinish === void 0 || _options$onFinish.call(options);
+			if (currentExecuteCounter === executeCounter) loading(false);
+		});
+		return promise;
+	};
+	if (immediate && url) execute();
+	const result = {
+		response,
+		data,
+		error,
+		isFinished,
+		isLoading,
+		cancel: abort,
+		isAborted,
+		isCanceled: isAborted,
+		abort,
+		execute
+	};
+	return {
+		...result,
+		...promise
+	};
+}
+
+//#endregion
+export { useAxios };

package/{useChangeCase.d.mts → dist/useChangeCase.d.ts}

@@ -1,15 +1,13 @@
-import * as changeCase from 'change-case';
-import { Options } from 'change-case';
-import { MaybeRef, MaybeRefOrGetter, WritableComputedRef, ComputedRef } from 'vue';
+import * as changeCase from "change-case";
+import { Options } from "change-case";
+import { ComputedRef, MaybeRef, MaybeRefOrGetter, WritableComputedRef } from "vue";
 
+//#region useChangeCase/index.d.ts
 type EndsWithCase<T> = T extends `${infer _}Case` ? T : never;
-type FilterKeys<T> = {
-    [K in keyof T as K extends string ? K : never]: EndsWithCase<K>;
-};
+type FilterKeys<T> = { [K in keyof T as K extends string ? K : never]: EndsWithCase<K> };
 type ChangeCaseKeys = FilterKeys<typeof changeCase>;
 type ChangeCaseType = ChangeCaseKeys[keyof ChangeCaseKeys];
 declare function useChangeCase(input: MaybeRef<string>, type: MaybeRefOrGetter<ChangeCaseType>, options?: MaybeRefOrGetter<Options> | undefined): WritableComputedRef<string>;
 declare function useChangeCase(input: MaybeRefOrGetter<string>, type: MaybeRefOrGetter<ChangeCaseType>, options?: MaybeRefOrGetter<Options> | undefined): ComputedRef<string>;
-
-export { useChangeCase };
-export type { ChangeCaseType };
+//#endregion
+export { ChangeCaseType, useChangeCase };

package/dist/useChangeCase.iife.js

@@ -0,0 +1,61 @@
+(function(exports, change_case, vue) {
+
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+change_case = __toESM(change_case);
+vue = __toESM(vue);
+
+//#region useChangeCase/index.ts
+const changeCaseTransforms = /* @__PURE__ */ Object.entries(change_case).filter(([name, fn]) => typeof fn === "function" && name.endsWith("Case")).reduce((acc, [name, fn]) => {
+	acc[name] = fn;
+	return acc;
+}, {});
+/**
+* Reactive wrapper for `change-case`
+*
+* @see https://vueuse.org/useChangeCase
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function useChangeCase(input, type, options) {
+	const typeRef = (0, vue.computed)(() => {
+		const t = (0, vue.toValue)(type);
+		if (!changeCaseTransforms[t]) throw new Error(`Invalid change case type "${t}"`);
+		return t;
+	});
+	if (typeof input === "function") return (0, vue.computed)(() => changeCaseTransforms[typeRef.value]((0, vue.toValue)(input), (0, vue.toValue)(options)));
+	const text = (0, vue.ref)(input);
+	return (0, vue.computed)({
+		get() {
+			return changeCaseTransforms[typeRef.value](text.value, (0, vue.toValue)(options));
+		},
+		set(value) {
+			text.value = value;
+		}
+	});
+}
+
+//#endregion
+exports.useChangeCase = useChangeCase;
+})(this.VueUse = this.VueUse || {}, changeCase, Vue);

package/dist/useChangeCase.iife.min.js

@@ -0,0 +1 @@
+(function(exports,t,n){var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e},u=(e,t,n)=>(n=e==null?{}:r(s(e)),l(t||!e||!e.__esModule?i(n,`default`,{value:e,enumerable:!0}):n,e));t=u(t),n=u(n);let d=Object.entries(t).filter(([e,t])=>typeof t==`function`&&e.endsWith(`Case`)).reduce((e,[t,n])=>(e[t]=n,e),{});function f(e,t,r){let i=(0,n.computed)(()=>{let e=(0,n.toValue)(t);if(!d[e])throw Error(`Invalid change case type "${e}"`);return e});if(typeof e==`function`)return(0,n.computed)(()=>d[i.value]((0,n.toValue)(e),(0,n.toValue)(r)));let a=(0,n.ref)(e);return(0,n.computed)({get(){return d[i.value](a.value,(0,n.toValue)(r))},set(e){a.value=e}})}exports.useChangeCase=f})(this.VueUse=this.VueUse||{},changeCase,Vue);

package/dist/useChangeCase.js

@@ -0,0 +1,35 @@
+import * as changeCase from "change-case";
+import { computed, ref, toValue } from "vue";
+
+//#region useChangeCase/index.ts
+const changeCaseTransforms = /* @__PURE__ */ Object.entries(changeCase).filter(([name, fn]) => typeof fn === "function" && name.endsWith("Case")).reduce((acc, [name, fn]) => {
+	acc[name] = fn;
+	return acc;
+}, {});
+/**
+* Reactive wrapper for `change-case`
+*
+* @see https://vueuse.org/useChangeCase
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function useChangeCase(input, type, options) {
+	const typeRef = computed(() => {
+		const t = toValue(type);
+		if (!changeCaseTransforms[t]) throw new Error(`Invalid change case type "${t}"`);
+		return t;
+	});
+	if (typeof input === "function") return computed(() => changeCaseTransforms[typeRef.value](toValue(input), toValue(options)));
+	const text = ref(input);
+	return computed({
+		get() {
+			return changeCaseTransforms[typeRef.value](text.value, toValue(options));
+		},
+		set(value) {
+			text.value = value;
+		}
+	});
+}
+
+//#endregion
+export { useChangeCase };

package/dist/useCookies.d.ts

@@ -0,0 +1,64 @@
+import * as universal_cookie0 from "universal-cookie";
+import Cookie from "universal-cookie";
+import { IncomingMessage } from "node:http";
+
+//#region useCookies/index.d.ts
+
+/**
+ * Creates a new {@link useCookies} function
+ * @param req - incoming http request (for SSR)
+ * @see https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie
+ * @description Creates universal-cookie instance using request (default is window.document.cookie) and returns {@link useCookies} function with provided universal-cookie instance
+ */
+declare function createCookies(req?: IncomingMessage): (dependencies?: string[] | null, {
+  doNotParse,
+  autoUpdateDependencies
+}?: {
+  doNotParse?: boolean | undefined;
+  autoUpdateDependencies?: boolean | undefined;
+}) => {
+  /**
+   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+   */
+  get: <T = any>(name: string, options?: universal_cookie0.CookieGetOptions | undefined) => T;
+  /**
+   * Reactive get all cookies
+   */
+  getAll: <T = any>(options?: universal_cookie0.CookieGetOptions | undefined) => T;
+  set: (name: string, value: any, options?: universal_cookie0.CookieSetOptions | undefined) => void;
+  remove: (name: string, options?: universal_cookie0.CookieSetOptions | undefined) => void;
+  addChangeListener: (callback: universal_cookie0.CookieChangeListener) => void;
+  removeChangeListener: (callback: universal_cookie0.CookieChangeListener) => void;
+};
+/**
+ * Reactive methods to work with cookies (use {@link createCookies} method instead if you are using SSR)
+ * @param dependencies - array of watching cookie's names. Pass empty array if don't want to watch cookies changes.
+ * @param options
+ * @param options.doNotParse - don't try parse value as JSON
+ * @param options.autoUpdateDependencies - automatically update watching dependencies
+ * @param cookies - universal-cookie instance
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+declare function useCookies(dependencies?: string[] | null, {
+  doNotParse,
+  autoUpdateDependencies
+}?: {
+  doNotParse?: boolean | undefined;
+  autoUpdateDependencies?: boolean | undefined;
+}, cookies?: Cookie): {
+  /**
+   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+   */
+  get: <T = any>(name: string, options?: universal_cookie0.CookieGetOptions | undefined) => T;
+  /**
+   * Reactive get all cookies
+   */
+  getAll: <T = any>(options?: universal_cookie0.CookieGetOptions | undefined) => T;
+  set: (name: string, value: any, options?: universal_cookie0.CookieSetOptions | undefined) => void;
+  remove: (name: string, options?: universal_cookie0.CookieSetOptions | undefined) => void;
+  addChangeListener: (callback: universal_cookie0.CookieChangeListener) => void;
+  removeChangeListener: (callback: universal_cookie0.CookieChangeListener) => void;
+};
+//#endregion
+export { createCookies, useCookies };

package/dist/useCookies.iife.js

@@ -0,0 +1,104 @@
+(function(exports, __vueuse_shared, universal_cookie, vue) {
+
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+__vueuse_shared = __toESM(__vueuse_shared);
+universal_cookie = __toESM(universal_cookie);
+vue = __toESM(vue);
+
+//#region useCookies/index.ts
+/**
+* Creates a new {@link useCookies} function
+* @param req - incoming http request (for SSR)
+* @see https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie
+* @description Creates universal-cookie instance using request (default is window.document.cookie) and returns {@link useCookies} function with provided universal-cookie instance
+*/
+function createCookies(req) {
+	const universalCookie = new universal_cookie.default(req ? req.headers.cookie : null);
+	return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => useCookies(dependencies, {
+		doNotParse,
+		autoUpdateDependencies
+	}, universalCookie);
+}
+/**
+* Reactive methods to work with cookies (use {@link createCookies} method instead if you are using SSR)
+* @param dependencies - array of watching cookie's names. Pass empty array if don't want to watch cookies changes.
+* @param options
+* @param options.doNotParse - don't try parse value as JSON
+* @param options.autoUpdateDependencies - automatically update watching dependencies
+* @param cookies - universal-cookie instance
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}, cookies = new universal_cookie.default()) {
+	const watchingDependencies = autoUpdateDependencies ? [...dependencies || []] : dependencies;
+	let previousCookies = cookies.getAll({ doNotParse: true });
+	/**
+	* Adds reactivity to get/getAll methods
+	*/
+	const touches = (0, vue.shallowRef)(0);
+	const onChange = () => {
+		const newCookies = cookies.getAll({ doNotParse: true });
+		if (shouldUpdate(watchingDependencies || null, newCookies, previousCookies)) touches.value++;
+		previousCookies = newCookies;
+	};
+	cookies.addChangeListener(onChange);
+	(0, __vueuse_shared.tryOnScopeDispose)(() => {
+		cookies.removeChangeListener(onChange);
+	});
+	return {
+		get: (...args) => {
+			/**
+			* Auto update watching dependencies if needed
+			*/
+			if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0])) watchingDependencies.push(args[0]);
+			touches.value;
+			return cookies.get(args[0], {
+				doNotParse,
+				...args[1]
+			});
+		},
+		getAll: (...args) => {
+			touches.value;
+			return cookies.getAll({
+				doNotParse,
+				...args[0]
+			});
+		},
+		set: (...args) => cookies.set(...args),
+		remove: (...args) => cookies.remove(...args),
+		addChangeListener: (...args) => cookies.addChangeListener(...args),
+		removeChangeListener: (...args) => cookies.removeChangeListener(...args)
+	};
+}
+function shouldUpdate(dependencies, newCookies, oldCookies) {
+	if (!dependencies) return true;
+	for (const dependency of dependencies) if (newCookies[dependency] !== oldCookies[dependency]) return true;
+	return false;
+}
+
+//#endregion
+exports.createCookies = createCookies;
+exports.useCookies = useCookies;
+})(this.VueUse = this.VueUse || {}, VueUse, UniversalCookie, Vue);

package/dist/useCookies.iife.min.js

@@ -0,0 +1 @@
+(function(exports,t,n,r){var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e},d=(e,t,n)=>(n=e==null?{}:i(c(e)),u(t||!e||!e.__esModule?a(n,`default`,{value:e,enumerable:!0}):n,e));t=d(t),n=d(n),r=d(r);function f(e){let t=new n.default(e?e.headers.cookie:null);return(e,{doNotParse:n=!1,autoUpdateDependencies:r=!1}={})=>p(e,{doNotParse:n,autoUpdateDependencies:r},t)}function p(e,{doNotParse:i=!1,autoUpdateDependencies:a=!1}={},o=new n.default){let s=a?[...e||[]]:e,c=o.getAll({doNotParse:!0}),l=(0,r.shallowRef)(0),u=()=>{let e=o.getAll({doNotParse:!0});m(s||null,e,c)&&l.value++,c=e};return o.addChangeListener(u),(0,t.tryOnScopeDispose)(()=>{o.removeChangeListener(u)}),{get:(...e)=>(a&&s&&!s.includes(e[0])&&s.push(e[0]),l.value,o.get(e[0],{doNotParse:i,...e[1]})),getAll:(...e)=>(l.value,o.getAll({doNotParse:i,...e[0]})),set:(...e)=>o.set(...e),remove:(...e)=>o.remove(...e),addChangeListener:(...e)=>o.addChangeListener(...e),removeChangeListener:(...e)=>o.removeChangeListener(...e)}}function m(e,t,n){if(!e)return!0;for(let r of e)if(t[r]!==n[r])return!0;return!1}exports.createCookies=f,exports.useCookies=p})(this.VueUse=this.VueUse||{},VueUse,UniversalCookie,Vue);

package/dist/useCookies.js

@@ -0,0 +1,77 @@
+import { tryOnScopeDispose } from "@vueuse/shared";
+import Cookie from "universal-cookie";
+import { shallowRef } from "vue";
+
+//#region useCookies/index.ts
+/**
+* Creates a new {@link useCookies} function
+* @param req - incoming http request (for SSR)
+* @see https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie
+* @description Creates universal-cookie instance using request (default is window.document.cookie) and returns {@link useCookies} function with provided universal-cookie instance
+*/
+function createCookies(req) {
+	const universalCookie = new Cookie(req ? req.headers.cookie : null);
+	return (dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}) => useCookies(dependencies, {
+		doNotParse,
+		autoUpdateDependencies
+	}, universalCookie);
+}
+/**
+* Reactive methods to work with cookies (use {@link createCookies} method instead if you are using SSR)
+* @param dependencies - array of watching cookie's names. Pass empty array if don't want to watch cookies changes.
+* @param options
+* @param options.doNotParse - don't try parse value as JSON
+* @param options.autoUpdateDependencies - automatically update watching dependencies
+* @param cookies - universal-cookie instance
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function useCookies(dependencies, { doNotParse = false, autoUpdateDependencies = false } = {}, cookies = new Cookie()) {
+	const watchingDependencies = autoUpdateDependencies ? [...dependencies || []] : dependencies;
+	let previousCookies = cookies.getAll({ doNotParse: true });
+	/**
+	* Adds reactivity to get/getAll methods
+	*/
+	const touches = shallowRef(0);
+	const onChange = () => {
+		const newCookies = cookies.getAll({ doNotParse: true });
+		if (shouldUpdate(watchingDependencies || null, newCookies, previousCookies)) touches.value++;
+		previousCookies = newCookies;
+	};
+	cookies.addChangeListener(onChange);
+	tryOnScopeDispose(() => {
+		cookies.removeChangeListener(onChange);
+	});
+	return {
+		get: (...args) => {
+			/**
+			* Auto update watching dependencies if needed
+			*/
+			if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0])) watchingDependencies.push(args[0]);
+			touches.value;
+			return cookies.get(args[0], {
+				doNotParse,
+				...args[1]
+			});
+		},
+		getAll: (...args) => {
+			touches.value;
+			return cookies.getAll({
+				doNotParse,
+				...args[0]
+			});
+		},
+		set: (...args) => cookies.set(...args),
+		remove: (...args) => cookies.remove(...args),
+		addChangeListener: (...args) => cookies.addChangeListener(...args),
+		removeChangeListener: (...args) => cookies.removeChangeListener(...args)
+	};
+}
+function shouldUpdate(dependencies, newCookies, oldCookies) {
+	if (!dependencies) return true;
+	for (const dependency of dependencies) if (newCookies[dependency] !== oldCookies[dependency]) return true;
+	return false;
+}
+
+//#endregion
+export { createCookies, useCookies };

package/dist/useDrauu.d.ts

@@ -0,0 +1,33 @@
+import { EventHookOn, MaybeComputedElementRef } from "@vueuse/core";
+import { Brush, Drauu, Options } from "drauu";
+import { Ref, ShallowRef } from "vue";
+
+//#region useDrauu/index.d.ts
+type UseDrauuOptions = Omit<Options, 'el'>;
+interface UseDrauuReturn {
+  drauuInstance: Ref<Drauu | undefined>;
+  load: (svg: string) => void;
+  dump: () => string | undefined;
+  clear: () => void;
+  cancel: () => void;
+  undo: () => boolean | undefined;
+  redo: () => boolean | undefined;
+  canUndo: ShallowRef<boolean>;
+  canRedo: ShallowRef<boolean>;
+  brush: Ref<Brush>;
+  onChanged: EventHookOn;
+  onCommitted: EventHookOn;
+  onStart: EventHookOn;
+  onEnd: EventHookOn;
+  onCanceled: EventHookOn;
+}
+/**
+ * Reactive drauu
+ *
+ * @see https://vueuse.org/useDrauu
+ * @param target The target svg element
+ * @param options Drauu Options
+ */
+declare function useDrauu(target: MaybeComputedElementRef, options?: UseDrauuOptions): UseDrauuReturn;
+//#endregion
+export { UseDrauuOptions, UseDrauuReturn, useDrauu };

package/dist/useDrauu.iife.js

@@ -0,0 +1,146 @@
+(function(exports, __vueuse_core, __vueuse_shared, drauu, vue) {
+
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+__vueuse_core = __toESM(__vueuse_core);
+__vueuse_shared = __toESM(__vueuse_shared);
+drauu = __toESM(drauu);
+vue = __toESM(vue);
+
+//#region useDrauu/index.ts
+/**
+* Reactive drauu
+*
+* @see https://vueuse.org/useDrauu
+* @param target The target svg element
+* @param options Drauu Options
+*/
+function useDrauu(target, options) {
+	const drauuInstance = (0, vue.ref)();
+	let disposables = [];
+	const onChangedHook = (0, __vueuse_core.createEventHook)();
+	const onCanceledHook = (0, __vueuse_core.createEventHook)();
+	const onCommittedHook = (0, __vueuse_core.createEventHook)();
+	const onStartHook = (0, __vueuse_core.createEventHook)();
+	const onEndHook = (0, __vueuse_core.createEventHook)();
+	const canUndo = (0, vue.shallowRef)(false);
+	const canRedo = (0, vue.shallowRef)(false);
+	const altPressed = (0, vue.shallowRef)(false);
+	const shiftPressed = (0, vue.shallowRef)(false);
+	const brush = (0, vue.ref)({
+		color: "black",
+		size: 3,
+		arrowEnd: false,
+		cornerRadius: 0,
+		dasharray: void 0,
+		fill: "transparent",
+		mode: "draw",
+		...options === null || options === void 0 ? void 0 : options.brush
+	});
+	(0, vue.watch)(brush, () => {
+		const instance = drauuInstance.value;
+		if (instance) {
+			instance.brush = brush.value;
+			instance.mode = brush.value.mode;
+		}
+	}, { deep: true });
+	const undo = () => {
+		var _drauuInstance$value;
+		return (_drauuInstance$value = drauuInstance.value) === null || _drauuInstance$value === void 0 ? void 0 : _drauuInstance$value.undo();
+	};
+	const redo = () => {
+		var _drauuInstance$value2;
+		return (_drauuInstance$value2 = drauuInstance.value) === null || _drauuInstance$value2 === void 0 ? void 0 : _drauuInstance$value2.redo();
+	};
+	const clear = () => {
+		var _drauuInstance$value3;
+		return (_drauuInstance$value3 = drauuInstance.value) === null || _drauuInstance$value3 === void 0 ? void 0 : _drauuInstance$value3.clear();
+	};
+	const cancel = () => {
+		var _drauuInstance$value4;
+		return (_drauuInstance$value4 = drauuInstance.value) === null || _drauuInstance$value4 === void 0 ? void 0 : _drauuInstance$value4.cancel();
+	};
+	const load = (svg) => {
+		var _drauuInstance$value5;
+		return (_drauuInstance$value5 = drauuInstance.value) === null || _drauuInstance$value5 === void 0 ? void 0 : _drauuInstance$value5.load(svg);
+	};
+	const dump = () => {
+		var _drauuInstance$value6;
+		return (_drauuInstance$value6 = drauuInstance.value) === null || _drauuInstance$value6 === void 0 ? void 0 : _drauuInstance$value6.dump();
+	};
+	const cleanup = () => {
+		var _drauuInstance$value7;
+		disposables.forEach((dispose) => dispose());
+		(_drauuInstance$value7 = drauuInstance.value) === null || _drauuInstance$value7 === void 0 || _drauuInstance$value7.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;
+		}
+	};
+	(0, vue.watch)(() => (0, __vueuse_core.unrefElement)(target), (el) => {
+		if (!el || typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement)) return;
+		if (drauuInstance.value) cleanup();
+		drauuInstance.value = (0, drauu.createDrauu)({
+			el,
+			...options
+		});
+		syncStatus();
+		disposables = [
+			drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
+			drauuInstance.value.on("committed", (node) => onCommittedHook.trigger(node)),
+			drauuInstance.value.on("start", () => onStartHook.trigger()),
+			drauuInstance.value.on("end", () => onEndHook.trigger()),
+			drauuInstance.value.on("changed", () => {
+				syncStatus();
+				onChangedHook.trigger();
+			})
+		];
+	}, { flush: "post" });
+	(0, __vueuse_shared.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
+	};
+}
+
+//#endregion
+exports.useDrauu = useDrauu;
+})(this.VueUse = this.VueUse || {}, VueUse, VueUse, Drauu, Vue);