@vueuse/integrations 13.9.0 → 14.0.0-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vueuse/integrations",
   "type": "module",
-  "version": "13.9.0",
+  "version": "14.0.0-alpha.0",
   "description": "Integration wrappers for utility libraries",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
@@ -104,8 +104,8 @@
     }
   },
   "dependencies": {
-    "@vueuse/core": "13.9.0",
-    "@vueuse/shared": "13.9.0"
+    "@vueuse/core": "14.0.0-alpha.0",
+    "@vueuse/shared": "14.0.0-alpha.0"
   },
   "devDependencies": {
     "@types/nprogress": "^0.2.3",

package/useAsyncValidator/component.d.mts

@@ -1,27 +1,19 @@
 import * as vue from 'vue';
-import { PropType } from 'vue';
+import { SlotsType, Reactive } from 'vue';
+import { UseAsyncValidatorOptions, UseAsyncValidatorReturn } from '@vueuse/integrations/useAsyncValidator';
 import { Rules } from 'async-validator';
 
-declare const UseAsyncValidator: vue.DefineComponent<vue.ExtractPropTypes<{
-    form: {
-        type: PropType<Record<string, any>>;
-        required: true;
-    };
-    rules: {
-        type: PropType<Rules>;
-        required: true;
-    };
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    form: {
-        type: PropType<Record<string, any>>;
-        required: true;
-    };
-    rules: {
-        type: PropType<Rules>;
-        required: true;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface UseAsyncValidatorProps {
+    form: Record<string, any>;
+    rules: Rules;
+    options?: UseAsyncValidatorOptions;
+}
+interface UseAsyncValidatorSlots {
+    default: (data: Reactive<UseAsyncValidatorReturn>) => any;
+}
+declare const UseAsyncValidator: vue.DefineSetupFnComponent<UseAsyncValidatorProps, Record<string, never>, SlotsType<UseAsyncValidatorSlots>, UseAsyncValidatorProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 export { UseAsyncValidator };
+export type { UseAsyncValidatorProps };

package/useAsyncValidator/component.mjs

@@ -1,87 +1,22 @@
-import { shallowRef, computed, toValue, watch, defineComponent, reactive } from 'vue';
-import { toRef, until } from '@vueuse/shared';
-import Schema from 'async-validator';
+import { useAsyncValidator } from '@vueuse/integrations/useAsyncValidator';
+import { defineComponent, reactive } from 'vue';
 
-const AsyncValidatorSchema = Schema.default || Schema;
-function useAsyncValidator(value, rules, options = {}) {
-  const {
-    validateOption = {},
-    immediate = true,
-    manual = false
-  } = options;
-  const valueRef = toRef(value);
-  const errorInfo = shallowRef(null);
-  const isFinished = shallowRef(true);
-  const pass = shallowRef(!immediate || manual);
-  const errors = computed(() => errorInfo.value?.errors || []);
-  const errorFields = computed(() => errorInfo.value?.fields || {});
-  const validator = computed(() => new AsyncValidatorSchema(toValue(rules)));
-  const execute = async () => {
-    isFinished.value = false;
-    pass.value = false;
-    try {
-      await validator.value.validate(valueRef.value, validateOption);
-      pass.value = true;
-      errorInfo.value = null;
-    } catch (err) {
-      errorInfo.value = err;
-    } finally {
-      isFinished.value = true;
-    }
-    return {
-      pass: pass.value,
-      errorInfo: errorInfo.value,
-      errors: errors.value,
-      errorFields: errorFields.value
-    };
-  };
-  if (!manual) {
-    watch(
-      [valueRef, validator],
-      () => execute(),
-      { immediate, deep: true }
-    );
-  }
-  const shell = {
-    isFinished,
-    pass,
-    errors,
-    errorInfo,
-    errorFields,
-    execute
-  };
-  function waitUntilFinished() {
-    return new Promise((resolve, reject) => {
-      until(isFinished).toBe(true).then(() => resolve(shell)).catch((error) => reject(error));
-    });
-  }
-  return {
-    ...shell,
-    then(onFulfilled, onRejected) {
-      return waitUntilFinished().then(onFulfilled, onRejected);
-    }
-  };
-}
-
-const UseAsyncValidator = /* @__PURE__ */ defineComponent({
-  name: "UseAsyncValidator",
-  props: {
-    form: {
-      type: Object,
-      required: true
-    },
-    rules: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props, { slots }) {
+const UseAsyncValidator = /* @__PURE__ */ defineComponent(
+  (props, { slots }) => {
     const data = reactive(useAsyncValidator(props.form, props.rules));
     return () => {
       if (slots.default)
         return slots.default(data);
     };
+  },
+  {
+    name: "UseAsyncValidator",
+    props: [
+      "form",
+      "options",
+      "rules"
+    ]
   }
-});
+);
 
 export { UseAsyncValidator };

package/useFocusTrap/component.d.mts

@@ -1,18 +1,22 @@
 import * as vue from 'vue';
+import { SlotsType, Reactive } from 'vue';
 import { RenderableComponent } from '@vueuse/core';
-import { Options } from 'focus-trap';
+import { UseFocusTrapOptions, UseFocusTrapReturn } from '@vueuse/integrations/useFocusTrap';
 
-interface UseFocusTrapOptions extends Options {
-    /**
-     * Immediately activate the trap
-     */
-    immediate?: boolean;
-}
-
-interface ComponentUseFocusTrapOptions extends RenderableComponent {
+interface UseFocusTrapProps extends RenderableComponent {
     options?: UseFocusTrapOptions;
 }
-declare const UseFocusTrap: vue.DefineComponent<ComponentUseFocusTrapOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ComponentUseFocusTrapOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+/**
+ * @deprecated
+ */
+interface ComponentUseFocusTrapOptions extends UseFocusTrapProps {
+}
+interface UseFocusTrapSlots {
+    default: (data: Reactive<UseFocusTrapReturn>) => any;
+}
+declare const UseFocusTrap: vue.DefineSetupFnComponent<UseFocusTrapProps, Record<string, never>, SlotsType<UseFocusTrapSlots>, UseFocusTrapProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 export { UseFocusTrap };
-export type { ComponentUseFocusTrapOptions };
+export type { ComponentUseFocusTrapOptions, UseFocusTrapProps };

package/useFocusTrap/component.mjs

@@ -1,31 +1,19 @@
-import { unrefElement } from '@vueuse/core';
-import { createFocusTrap } from 'focus-trap';
-import { defineComponent, ref, watch, onScopeDispose, h } from 'vue';
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+import { defineComponent, shallowRef, reactive, h } from 'vue';
 
-const UseFocusTrap = /* @__PURE__ */ defineComponent({
-  name: "UseFocusTrap",
-  props: ["as", "options"],
-  setup(props, { slots }) {
-    let trap;
-    const target = ref();
-    const activate = () => trap && trap.activate();
-    const deactivate = () => trap && trap.deactivate();
-    watch(
-      () => unrefElement(target),
-      (el) => {
-        if (!el)
-          return;
-        trap = createFocusTrap(el, props.options || {});
-        activate();
-      },
-      { flush: "post" }
-    );
-    onScopeDispose(() => deactivate());
+const UseFocusTrap = /* @__PURE__ */ defineComponent(
+  (props, { slots }) => {
+    const target = shallowRef();
+    const data = reactive(useFocusTrap(target, props.options));
     return () => {
       if (slots.default)
-        return h(props.as || "div", { ref: target }, slots.default());
+        return h(props.as || "div", { ref: target }, slots.default(data));
     };
+  },
+  {
+    name: "UseFocusTrap",
+    props: ["as", "options"]
   }
-});
+);
 
 export { UseFocusTrap };

package/useSortable/component.d.mts

@@ -1,40 +1,18 @@
 import * as vue from 'vue';
-import { PropType } from 'vue';
-import { ConfigurableDocument } from '@vueuse/core';
-import { Options } from 'sortablejs';
+import { SlotsType, Reactive } from 'vue';
+import { RenderableComponent } from '@vueuse/core';
+import { UseSortableOptions, UseSortableReturn } from '@vueuse/integrations/useSortable';
 
-type UseSortableOptions = Options & ConfigurableDocument;
-
-declare const UseSortable: vue.DefineComponent<vue.ExtractPropTypes<{
-    modelValue: {
-        type: PropType<any[]>;
-        required: true;
-    };
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
-    options: {
-        type: PropType<UseSortableOptions>;
-        required: true;
-    };
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}> | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    modelValue: {
-        type: PropType<any[]>;
-        required: true;
-    };
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
-    options: {
-        type: PropType<UseSortableOptions>;
-        required: true;
-    };
-}>> & Readonly<{}>, {
-    tag: string;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface UseSortableProps extends RenderableComponent {
+    modelValue: any[];
+    options?: UseSortableOptions;
+}
+interface UseSortableSlots {
+    default: (data: Reactive<UseSortableReturn>) => any;
+}
+declare const UseSortable: vue.DefineSetupFnComponent<UseSortableProps, Record<string, never>, SlotsType<UseSortableSlots>, UseSortableProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 export { UseSortable };
+export type { UseSortableProps };

package/useSortable/component.mjs

@@ -1,89 +1,25 @@
-import { defaultDocument, tryOnMounted, tryOnScopeDispose, unrefElement, useVModel } from '@vueuse/core';
-import { isRef, toValue, nextTick, defineComponent, ref, reactive, h } from 'vue';
-import Sortable from 'sortablejs';
+import { useVModel } from '@vueuse/core';
+import { useSortable } from '@vueuse/integrations/useSortable';
+import { defineComponent, shallowRef, reactive, h } from 'vue';
 
-function useSortable(el, list, options = {}) {
-  let sortable;
-  const { document = defaultDocument, ...resetOptions } = options;
-  const defaultOptions = {
-    onUpdate: (e) => {
-      moveArrayElement(list, e.oldIndex, e.newIndex, e);
-    }
-  };
-  const start = () => {
-    const target = typeof el === "string" ? document?.querySelector(el) : unrefElement(el);
-    if (!target || sortable !== void 0)
-      return;
-    sortable = new Sortable(target, { ...defaultOptions, ...resetOptions });
-  };
-  const stop = () => {
-    sortable?.destroy();
-    sortable = void 0;
-  };
-  const option = (name, value) => {
-    if (value !== void 0)
-      sortable?.option(name, value);
-    else
-      return sortable?.option(name);
-  };
-  tryOnMounted(start);
-  tryOnScopeDispose(stop);
-  return {
-    stop,
-    start,
-    option
-  };
-}
-function insertNodeAt(parentElement, element, index) {
-  const refElement = parentElement.children[index];
-  parentElement.insertBefore(element, refElement);
-}
-function removeNode(node) {
-  if (node.parentNode)
-    node.parentNode.removeChild(node);
-}
-function moveArrayElement(list, from, to, e = null) {
-  if (e != null) {
-    removeNode(e.item);
-    insertNodeAt(e.from, e.item, from);
-  }
-  const _valueIsRef = isRef(list);
-  const array = _valueIsRef ? [...toValue(list)] : toValue(list);
-  if (to >= 0 && to < array.length) {
-    const element = array.splice(from, 1)[0];
-    nextTick(() => {
-      array.splice(to, 0, element);
-      if (_valueIsRef)
-        list.value = array;
-    });
-  }
-}
-
-const UseSortable = /* @__PURE__ */ defineComponent({
-  name: "UseSortable",
-  props: {
-    modelValue: {
-      type: Array,
-      required: true
-    },
-    tag: {
-      type: String,
-      default: "div"
-    },
-    options: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props, { slots }) {
+const UseSortable = /* @__PURE__ */ defineComponent(
+  (props, { slots }) => {
     const list = useVModel(props, "modelValue");
-    const target = ref();
+    const target = shallowRef();
     const data = reactive(useSortable(target, list, props.options));
     return () => {
       if (slots.default)
-        return h(props.tag, { ref: target }, slots.default(data));
+        return h(props.as || "div", { ref: target }, slots.default(data));
     };
+  },
+  {
+    name: "UseSortable",
+    props: [
+      "as",
+      "modelValue",
+      "options"
+    ]
   }
-});
+);
 
 export { UseSortable };