Vitepress

node_modules/@vueuse/integrations/useSortable/component.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+var vueDemi = require('vue-demi');
+var core = require('@vueuse/core');
+var Sortable = require('sortablejs');
+
+function useSortable(el, list, options = {}) {
+  let sortable;
+  const { document = core.defaultDocument, ...resetOptions } = options;
+  const defaultOptions = {
+    onUpdate: (e) => {
+      moveArrayElement(list, e.oldIndex, e.newIndex);
+    }
+  };
+  const start = () => {
+    const target = typeof el === "string" ? document?.querySelector(el) : core.unrefElement(el);
+    if (!target)
+      return;
+    sortable = new Sortable(target, { ...defaultOptions, ...resetOptions });
+  };
+  const stop = () => sortable?.destroy();
+  const option = (name, value) => {
+    if (value !== void 0)
+      sortable?.option(name, value);
+    else
+      return sortable?.option(name);
+  };
+  core.tryOnMounted(start);
+  core.tryOnScopeDispose(stop);
+  return { stop, start, option };
+}
+function moveArrayElement(list, from, to) {
+  const _valueIsRef = vueDemi.isRef(list);
+  const array = _valueIsRef ? [...core.toValue(list)] : core.toValue(list);
+  if (to >= 0 && to < array.length) {
+    const element = array.splice(from, 1)[0];
+    vueDemi.nextTick(() => {
+      array.splice(to, 0, element);
+      if (_valueIsRef)
+        list.value = array;
+    });
+  }
+}
+
+const UseSortable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
+  name: "UseSortable",
+  model: {
+    // Compatible with vue2
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      required: true
+    },
+    tag: {
+      type: String,
+      default: "div"
+    },
+    options: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, { slots }) {
+    const list = core.useVModel(props, "modelValue");
+    const target = vueDemi.ref();
+    const data = vueDemi.reactive(useSortable(target, list, props.options));
+    return () => {
+      if (slots.default)
+        return vueDemi.h(props.tag, { ref: target }, slots.default(data));
+    };
+  }
+});
+
+exports.UseSortable = UseSortable;

node_modules/@vueuse/integrations/useSortable/component.d.cts

@@ -0,0 +1,40 @@
+import * as vue_demi from 'vue-demi';
+import { PropType } from 'vue-demi';
+import { ConfigurableDocument } from '@vueuse/core';
+import { Options } from 'sortablejs';
+
+type UseSortableOptions = Options & ConfigurableDocument;
+
+declare const UseSortable: vue_demi.DefineComponent<{
+    modelValue: {
+        type: PropType<any[]>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<UseSortableOptions>;
+        required: true;
+    };
+}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    [key: string]: any;
+}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    modelValue: {
+        type: PropType<any[]>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<UseSortableOptions>;
+        required: true;
+    };
+}>>, {
+    tag: string;
+}, {}>;
+
+export { UseSortable };

node_modules/@vueuse/integrations/useSortable/component.d.mts

@@ -0,0 +1,40 @@
+import * as vue_demi from 'vue-demi';
+import { PropType } from 'vue-demi';
+import { ConfigurableDocument } from '@vueuse/core';
+import { Options } from 'sortablejs';
+
+type UseSortableOptions = Options & ConfigurableDocument;
+
+declare const UseSortable: vue_demi.DefineComponent<{
+    modelValue: {
+        type: PropType<any[]>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<UseSortableOptions>;
+        required: true;
+    };
+}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    [key: string]: any;
+}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    modelValue: {
+        type: PropType<any[]>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<UseSortableOptions>;
+        required: true;
+    };
+}>>, {
+    tag: string;
+}, {}>;
+
+export { UseSortable };

node_modules/@vueuse/integrations/useSortable/component.d.ts

@@ -0,0 +1,40 @@
+import * as vue_demi from 'vue-demi';
+import { PropType } from 'vue-demi';
+import { ConfigurableDocument } from '@vueuse/core';
+import { Options } from 'sortablejs';
+
+type UseSortableOptions = Options & ConfigurableDocument;
+
+declare const UseSortable: vue_demi.DefineComponent<{
+    modelValue: {
+        type: PropType<any[]>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<UseSortableOptions>;
+        required: true;
+    };
+}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
+    [key: string]: any;
+}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+    modelValue: {
+        type: PropType<any[]>;
+        required: true;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: PropType<UseSortableOptions>;
+        required: true;
+    };
+}>>, {
+    tag: string;
+}, {}>;
+
+export { UseSortable };

node_modules/@vueuse/integrations/useSortable/component.mjs

@@ -0,0 +1,75 @@
+import { isRef, nextTick, defineComponent, ref, reactive, h } from 'vue-demi';
+import { tryOnMounted, tryOnScopeDispose, unrefElement, defaultDocument, toValue, useVModel } from '@vueuse/core';
+import Sortable from 'sortablejs';
+
+function useSortable(el, list, options = {}) {
+  let sortable;
+  const { document = defaultDocument, ...resetOptions } = options;
+  const defaultOptions = {
+    onUpdate: (e) => {
+      moveArrayElement(list, e.oldIndex, e.newIndex);
+    }
+  };
+  const start = () => {
+    const target = typeof el === "string" ? document?.querySelector(el) : unrefElement(el);
+    if (!target)
+      return;
+    sortable = new Sortable(target, { ...defaultOptions, ...resetOptions });
+  };
+  const stop = () => sortable?.destroy();
+  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 moveArrayElement(list, from, to) {
+  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__ */ /* #__PURE__ */ defineComponent({
+  name: "UseSortable",
+  model: {
+    // Compatible with vue2
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      required: true
+    },
+    tag: {
+      type: String,
+      default: "div"
+    },
+    options: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, { slots }) {
+    const list = useVModel(props, "modelValue");
+    const target = ref();
+    const data = reactive(useSortable(target, list, props.options));
+    return () => {
+      if (slots.default)
+        return h(props.tag, { ref: target }, slots.default(data));
+    };
+  }
+});
+
+export { UseSortable };