hys-ui 0.4.0 → 0.6.0

package/dist/components/HysSortableList/HysSortableList2.vue.js

@@ -1,145 +1,514 @@
-import { defineComponent as B, ref as b, onDeactivated as E, openBlock as m, createElementBlock as D, mergeProps as N, unref as p, createVNode as g, TransitionGroup as H, withCtx as K, Fragment as L, renderList as R, normalizeClass as U, createElementVNode as c, withModifiers as k, renderSlot as $, createTextVNode as G, toDisplayString as w, nextTick as q } from "vue";
-import { useHysRootAttrs as F } from "../../config.js";
-import { GripVertical as M, ChevronUp as O, ChevronDown as P } from "lucide-vue-next";
-const Y = ["data-sort-id", "aria-label", "onKeydown", "onDragover"], j = ["draggable", "disabled", "aria-label", "onDragstart"], J = { class: "hys-ui-pf-sort-label" }, Q = { class: "hys-ui-v4-sort-actions" }, W = ["disabled", "aria-label", "onClick"], X = ["disabled", "aria-label", "onClick"], Z = {
-  class: "hys-ui-pf-sort-status",
+import { defineComponent as _e, useId as Fe, useTemplateRef as X, shallowRef as O, computed as n, onMounted as Ue, onActivated as We, onDeactivated as qe, onBeforeUnmount as Je, watch as Se, openBlock as r, createElementBlock as T, mergeProps as P, unref as o, createElementVNode as V, normalizeStyle as Y, normalizeClass as R, createBlock as d, resolveDynamicComponent as v, withCtx as f, renderSlot as $, createCommentVNode as y, createVNode as Z, TransitionGroup as Qe, Fragment as Ce, renderList as Xe, withModifiers as De, createTextVNode as j, toDisplayString as L, Teleport as Ye, normalizeProps as Ze, guardReactiveProps as et, nextTick as tt } from "vue";
+import { GripVertical as at, ChevronLeft as lt, ChevronUp as ot, ChevronRight as st, ChevronDown as nt } from "lucide-vue-next";
+import { useHysRootAttrs as rt } from "../../config.js";
+import { useMotion as it } from "../../motion/useMotion.js";
+import { wholeRowDrag as ut, candidateAt as dt } from "./geometry.js";
+import { buildSortIndex as ct, keyToken as ee, sortPorts as vt, registerSortPort as ft, feedback as yt } from "./model.js";
+import { restoreStoredSort as ht, discardSortHistory as mt, resetSort as bt, navigateHistory as xe, keysArray as gt } from "./transactions.js";
+import { useSortDrag as pt } from "./useSortDrag.js";
+import { useSortWindow as kt } from "./useSortWindow.js";
+import St from "./SortableGhost/SortableGhost.vue.js";
+const Ct = ["data-drop-state", "aria-busy"], Dt = ["colspan"], xt = ["checked", "disabled", "aria-label", "onClick"], Bt = ["disabled", "aria-label"], Kt = { class: "hys-sort-actions" }, Tt = ["disabled", "aria-label", "onClick"], $t = ["disabled", "aria-label", "onClick"], wt = ["colspan"], zt = {
+  class: "hys-sort-sr",
   role: "status"
-}, le = /* @__PURE__ */ B({
+}, Rt = /* @__PURE__ */ _e({
   __name: "HysSortableList",
   props: {
     modelValue: {},
-    disabled: { type: Boolean }
+    defaultItems: {},
+    itemKey: {},
+    itemLabel: {},
+    listId: {},
+    ariaLabel: { default: "可排序列表" },
+    layout: { default: "vertical" },
+    mode: { default: "insert" },
+    disabled: { type: Boolean },
+    itemDisabled: {},
+    fixed: {},
+    handle: { type: [Boolean, String], default: !0 },
+    showButtons: { type: Boolean, default: !0 },
+    keyboard: { type: Boolean, default: !0 },
+    dragDelay: { default: 0 },
+    touchDelay: { default: 180 },
+    dragThreshold: { default: 5 },
+    axis: { default: "both" },
+    bounds: {},
+    snap: { type: Boolean },
+    livePreview: { type: Boolean, default: !0 },
+    group: {},
+    maxItems: {},
+    selectable: { type: Boolean },
+    selectedKeys: {},
+    defaultSelectedKeys: {},
+    clone: {},
+    canDrag: {},
+    canDrop: {},
+    resolveIndex: {},
+    beforeDrop: {},
+    save: {},
+    history: { type: [Boolean, Number], default: !0 },
+    storageKey: {},
+    autoScroll: { type: [Boolean, Object], default: !0 },
+    virtual: { type: [Boolean, Object] },
+    listTag: { default: "div" },
+    tableColumns: {},
+    motion: { type: Boolean, default: !0 },
+    animationDuration: { default: 180 },
+    animationEasing: { default: "ease" },
+    moveClass: {},
+    ghostClass: {},
+    ghostStyle: { type: [Boolean, null, String, Object, Array] },
+    showHandle: { type: Boolean, default: !0 }
   },
-  emits: ["update:modelValue"],
-  setup(u, { emit: T }) {
-    const A = F(), n = u, C = T, h = b(), i = b(null), r = b(null), v = b("");
-    async function f(e, t) {
-      var s, o;
-      if (n.disabled || e === t || e < 0 || e >= n.modelValue.length || t < 0 || t >= n.modelValue.length) return;
-      const a = [...n.modelValue], l = a.splice(e, 1)[0];
-      a.splice(t, 0, l), C("update:modelValue", a), v.value = l.label + "已移至第 " + (t + 1) + " 项", await q(), (o = Array.from(((s = h.value) == null ? void 0 : s.querySelectorAll("[data-sort-id]")) || []).find((d) => d.dataset.sortId === l.id)) == null || o.focus({ preventScroll: !0 });
-    }
-    function _(e, t) {
-      e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown") && (e.preventDefault(), f(t, t + (e.key === "ArrowUp" ? -1 : 1)));
-    }
-    function I(e, t) {
-      if (n.disabled || !e.dataTransfer) {
-        e.preventDefault();
-        return;
-      }
-      i.value = t.id;
-      const a = e.currentTarget.closest("[data-sort-id]");
-      a && e.dataTransfer.setDragImage(a, 24, a.offsetHeight / 2), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", t.id), v.value = "正在拖动" + t.label;
-    }
-    function V(e, t) {
-      const a = n.modelValue.findIndex((o) => o.id === i.value), l = n.modelValue.findIndex((o) => o.id === e);
-      if (a < 0 || l < 0) return -1;
-      const s = l + (t === "after" ? 1 : 0);
-      return s - (a < s ? 1 : 0);
-    }
-    function S(e, t) {
-      if (!i.value) return;
-      e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move");
-      const a = e.currentTarget.getBoundingClientRect(), l = e.clientY < a.top + a.height / 2 ? "before" : "after", s = n.modelValue.findIndex((o) => o.id === i.value);
-      r.value = V(t.id, l) === s ? null : { id: t.id, position: l };
-    }
-    function y() {
-      i.value = null, r.value = null;
-    }
-    function x(e) {
-      var t;
-      e.relatedTarget instanceof Node && ((t = h.value) != null && t.contains(e.relatedTarget)) || (r.value = null);
+  emits: ["update:modelValue", "update:selectedKeys", "start", "preview", "change", "cancel", "invalid", "conflict", "save-error"],
+  setup(c, { expose: Be, emit: Ke }) {
+    const l = c, k = Ke, te = rt(), { effectiveMotion: Te } = it(), ae = Fe(), le = `${ae}-sort-help`, D = X("root"), oe = X("viewport"), A = X("surface"), G = O(
+      l.modelValue ?? l.defaultItems ?? []
+    ), $e = G.value.slice(), se = O(
+      l.defaultSelectedKeys ?? []
+    ), x = O(!1), _ = O(""), B = n(() => l.modelValue ?? G.value), M = n(() => l.motion && Te.value !== "off"), i = n(() => l.listTag === "table"), H = n(
+      () => i.value ? "tr" : l.listTag === "ul" || l.listTag === "ol" ? "li" : "div"
+    ), I = n(() => i.value ? "td" : "div"), ne = n(() => l.showHandle !== !1), re = n(() => ne.value || l.selectable), F = n(
+      () => l.tableColumns ?? 1 + Number(re.value) + Number(l.showButtons)
+    ), K = n(
+      () => l.layout === "horizontal" && !i.value
+    ), U = n(() => l.layout === "grid" && !i.value);
+    function S(e) {
+      return typeof l.itemKey == "function" ? l.itemKey(e) : e[l.itemKey ?? "id"];
+    }
+    function C(e) {
+      const a = typeof l.itemLabel == "function" ? l.itemLabel(e) : e[l.itemLabel ?? "label"];
+      return String(a ?? S(e) ?? "");
+    }
+    const m = n(() => ct(B.value, S, l.fixed)), ie = n(
+      () => new Map(m.value.fixed.map((e) => [e.key, e.placement]))
+    ), we = n(
+      () => new Set(typeof l.itemDisabled == "function" ? [] : l.itemDisabled)
+    ), N = n(
+      () => new Set(
+        (l.selectedKeys ?? se.value).filter(
+          (e) => m.value.keys.has(e)
+        )
+      )
+    );
+    let W;
+    function ze(e) {
+      l.modelValue === void 0 && (G.value = e), k("update:modelValue", e);
+    }
+    function ue(e) {
+      if (!l.selectable) return;
+      const a = Array.from(new Set(e)).filter(
+        (t) => m.value.keys.has(t)
+      );
+      l.selectedKeys === void 0 && (se.value = a), k("update:selectedKeys", a);
     }
-    function z(e) {
-      if (i.value) {
-        if (e.preventDefault(), r.value) {
-          const t = n.modelValue.findIndex((a) => a.id === i.value);
-          f(t, V(r.value.id, r.value.position));
+    function Ve(e, a) {
+      if (!l.selectable || l.disabled || x.value) return;
+      const t = new Set(N.value), s = W === void 0 ? void 0 : m.value.keys.get(W), u = m.value.keys.get(e);
+      if (a != null && a.shiftKey && s !== void 0 && u !== void 0)
+        for (let p = Math.min(s, u); p <= Math.max(s, u); p++) {
+          const h = B.value[p];
+          me(h, p) || t.add(S(h));
         }
-        y();
+      else
+        t.has(e) ? t.delete(e) : t.add(e), W = e;
+      ue([...t]);
+    }
+    function q(e) {
+      var t;
+      const a = ee(e);
+      return Array.from(((t = A.value) == null ? void 0 : t.children) ?? []).find(
+        (s) => s instanceof HTMLElement && s.dataset.sortKey === a
+      );
+    }
+    function de(e) {
+      _.value = e.message, e.reason === "cancelled" ? k("cancel", e) : e.reason === "save" ? k("save-error", e) : e.reason === "conflict" ? k("conflict", e) : k("invalid", e);
+    }
+    const b = {
+      id: () => l.listId ?? ae,
+      props: l,
+      key: S,
+      label: C,
+      row: q,
+      apply: ze,
+      focus: be,
+      scroll: Q,
+      reject: de,
+      root: () => D.value ?? void 0,
+      surface: () => A.value ?? void 0,
+      data: () => m.value,
+      lock: (e) => {
+        x.value = e;
+      },
+      start: (e) => k("start", e),
+      preview: (e) => k("preview", e),
+      change: (e) => k("change", e),
+      announce: (e) => {
+        _.value = e;
       }
+    }, g = pt(
+      b,
+      (e) => N.value.has(e) ? [...N.value] : [e],
+      () => M.value
+    ), { own: E, over: Ie, ghost: ce, anchorForDisplay: Pe } = g, J = n(() => {
+      const e = E.value, a = e == null ? void 0 : e.result;
+      return l.livePreview && !(l.virtual && (e == null ? void 0 : e.drag.source) === "keyboard") && a && !("reason" in a) && a.target === b ? a.changes[0].next : B.value;
+    }), { visibleItems: Le, range: w, length: Ae, columns: ve, reveal: Me, syncPosition: fe } = kt(l, J, oe, A, S), He = n(() => {
+      var e;
+      return new Set(((e = E.value) == null ? void 0 : e.drag.keys) ?? []);
+    }), ye = n(() => {
+      var a;
+      const e = (a = Ie.value) == null ? void 0 : a.result;
+      return e ? "reason" in e ? e.reason === "noop" ? void 0 : "invalid" : "allowed" : void 0;
+    }), he = n(
+      () => ye.value === "allowed" ? Pe.value : void 0
+    ), Ne = n(() => ({
+      "--hys-sort-duration": `${Math.max(0, l.animationDuration)}ms`,
+      "--hys-sort-easing": l.animationEasing,
+      "--hys-sort-virtual-columns": ve.value
+    })), Ee = n(() => {
+      if (l.disabled) return "排序已禁用。";
+      if (!l.keyboard) return "拖动项目调整顺序。";
+      const e = K.value ? "左右方向键" : U.value ? "方向键" : "上下方向键";
+      return `按空格拾起或放置，用${e}移动，Escape 取消。也可按 Alt 加${e}直接排序。${l.group ? "拾起后按 Ctrl 加方向键切换列表。" : ""}`;
+    });
+    function me(e, a) {
+      var s;
+      if (l.disabled || !m.value.valid || ie.value.has(S(e)) || (typeof l.itemDisabled == "function" ? l.itemDisabled(e, a) : we.value.has(S(e))))
+        return !0;
+      const t = (s = l.canDrag) == null ? void 0 : s.call(l, e, a);
+      return t === !1 || typeof t == "string";
+    }
+    const Oe = n(
+      () => Le.value.map((e, a) => {
+        const t = S(e), s = m.value.keys.get(t) ?? a + w.value.start;
+        return {
+          item: e,
+          key: t,
+          index: s,
+          selected: N.value.has(t),
+          dragging: He.value.has(t),
+          disabled: me(e, s),
+          fixed: ie.value.get(t) ?? !1,
+          toggle: (u) => Ve(t, u),
+          move: (u) => g.relative(t, u, "button")
+        };
+      })
+    );
+    async function Q(e) {
+      var s;
+      const a = J.value === B.value ? m.value.keys.get(e) : J.value.findIndex((u) => S(u) === e);
+      if (a === void 0 || a < 0) return !1;
+      await Me(a), await tt();
+      const t = q(e);
+      return (s = t == null ? void 0 : t.scrollIntoView) == null || s.call(t, { block: "nearest", inline: "nearest" }), !!t;
     }
-    return E(y), (e, t) => (m(), D("div", N(p(A), {
+    async function be(e) {
+      if (!await Q(e)) return !1;
+      const a = q(e);
+      return a == null || a.focus({ preventScroll: !0 }), !!a;
+    }
+    function Re(e, a) {
+      const t = a.to === void 0 || a.to === b.id() ? b : vt().find(
+        (s) => {
+          var u, p;
+          return s.id() === a.to && ((u = s.root()) == null ? void 0 : u.ownerDocument) === ((p = D.value) == null ? void 0 : p.ownerDocument);
+        }
+      );
+      return t ? g.move(
+        gt(e),
+        {
+          ...dt(b, t, a.index),
+          operation: a.operation
+        },
+        "api"
+      ) : (de(yt("outside")), Promise.resolve(!1));
+    }
+    function je(e, a) {
+      if (a.disabled || !(e.ctrlKey || e.metaKey || e.shiftKey))
+        return;
+      const t = e.target;
+      t instanceof Element && t.closest("[data-sort-root]") === D.value && !t.closest(
+        "button,input,select,textarea,a[href],label,[contenteditable],[data-sort-ignore]"
+      ) && a.toggle(e);
+    }
+    function Ge(e) {
+      var a, t;
+      ((a = E.value) == null ? void 0 : a.drag.source) === "keyboard" && e.relatedTarget instanceof Node && !((t = D.value) != null && t.contains(e.relatedTarget)) && g.cancel();
+    }
+    function ge(e) {
+      return K.value ? { inlineSize: `${e}px` } : { blockSize: `${e}px` };
+    }
+    let z;
+    function pe() {
+      !z && D.value && (z = ft(D.value, b));
+    }
+    function ke() {
+      z == null || z(), z = void 0, g.detach();
+    }
+    return Ue(() => {
+      pe(), ht(b);
+    }), We(pe), qe(ke), Je(() => {
+      ke(), mt(b);
+    }), Se(m, () => g.dataChanged(), { flush: "post" }), Se(
+      () => l.disabled,
+      (e) => {
+        e && g.cancel();
+      }
+    ), Be({
+      move: Re,
+      select: ue,
+      scrollTo: Q,
+      focus: be,
+      undo: () => xe(b, "undo"),
+      redo: () => xe(b, "redo"),
+      reset: () => bt(b, $e),
+      cancel: () => g.cancel()
+    }), (e, a) => (r(), T("div", P({
       ref_key: "root",
-      ref: h,
-      class: ["hys-ui-pf-sortable", { "hys-ui-is-sorting": i.value }],
-      onDragleave: x,
-      onDrop: z
+      ref: D
+    }, o(te), {
+      "data-sort-root": "",
+      class: ["hys-sort", { "hys-sort-moving": !!o(E), "hys-sort-no-motion": !M.value }],
+      "data-drop-state": ye.value,
+      "aria-busy": x.value || void 0,
+      style: Ne.value,
+      onFocusout: Ge
     }), [
-      g(H, {
-        name: "hys-ui-sort-motion",
-        tag: "div",
-        class: "hys-ui-v4-sort",
-        role: "list",
-        "aria-label": "可排序列表"
-      }, {
-        default: K(() => [
-          (m(!0), D(L, null, R(u.modelValue, (a, l) => {
-            var s, o;
-            return m(), D("div", {
-              key: a.id,
-              class: U(["hys-ui-v4-sort-row", { "hys-ui-is-dragging": i.value === a.id, "hys-ui-is-drop-before": ((s = r.value) == null ? void 0 : s.id) === a.id && r.value.position === "before", "hys-ui-is-drop-after": ((o = r.value) == null ? void 0 : o.id) === a.id && r.value.position === "after" }]),
-              role: "listitem",
-              tabindex: "0",
-              "data-sort-id": a.id,
-              "aria-label": a.label + "，按 Alt 加上下方向键调整顺序",
-              onKeydown: (d) => _(d, l),
-              onDragover: (d) => S(d, a)
-            }, [
-              c("button", {
-                type: "button",
-                class: "hys-ui-pf-sort-handle",
-                draggable: !u.disabled,
-                disabled: u.disabled,
-                "aria-label": "拖动排序" + a.label,
-                title: "拖动排序，也可按 Alt 加上下方向键",
-                onDragstart: k((d) => I(d, a), ["stop"]),
-                onDragend: k(y, ["stop"])
-              }, [
-                g(p(M), {
-                  class: "hys-ui-pf-sort-grip",
-                  size: 16,
-                  "aria-hidden": "true"
-                })
-              ], 40, j),
-              c("span", J, [
-                $(e.$slots, "item", { item: a }, () => [
-                  G(w(a.label), 1)
-                ], !0)
+      V("div", {
+        ref_key: "viewport",
+        ref: oe,
+        class: R(["hys-sort-viewport", { "hys-sort-virtual": c.virtual }]),
+        style: Y({ maxBlockSize: o(Ae) }),
+        onScrollPassive: a[1] || (a[1] = //@ts-ignore
+        (...t) => o(fe) && o(fe)(...t))
+      }, [
+        (r(), d(v(i.value ? "table" : "div"), {
+          class: R(i.value ? "hys-sort-table" : void 0),
+          "aria-label": i.value ? c.ariaLabel : void 0
+        }, {
+          default: f(() => [
+            i.value ? $(e.$slots, "header", {}, void 0, !0, 0) : y("", !0),
+            (r(), d(v(i.value ? "tbody" : c.listTag), {
+              ref_key: "surface",
+              ref: A,
+              "data-sort-surface": "",
+              class: R(["hys-sort-list", {
+                "hys-sort-horizontal": K.value,
+                "hys-sort-grid": U.value
+              }]),
+              role: i.value ? void 0 : "list",
+              "aria-label": i.value ? void 0 : c.ariaLabel,
+              "aria-describedby": le,
+              "data-sort-columns": U.value && c.virtual ? o(ve) : void 0
+            }, {
+              default: f(() => [
+                Z(Qe, {
+                  name: "hys-sort-motion",
+                  css: !1,
+                  "move-class": M.value && !c.virtual ? c.moveClass : "hys-sort-static-move"
+                }, {
+                  default: f(() => [
+                    o(w).before ? (r(), d(v(H.value), {
+                      key: "before-spacer",
+                      class: "hys-sort-spacer",
+                      style: Y(ge(o(w).before)),
+                      "aria-hidden": "true"
+                    }, {
+                      default: f(() => [
+                        i.value ? (r(), T("td", {
+                          key: 0,
+                          colspan: F.value
+                        }, null, 8, Dt)) : y("", !0)
+                      ]),
+                      _: 1
+                    }, 8, ["style"])) : y("", !0),
+                    (r(!0), T(Ce, null, Xe(Oe.value, (t, s) => {
+                      var u, p;
+                      return r(), d(v(H.value), {
+                        key: m.value.valid ? "row:" + o(ee)(t.key) : "invalid:" + s,
+                        class: R(["hys-sort-row", {
+                          "hys-sort-picked": t.dragging,
+                          "hys-sort-selected": t.selected,
+                          "hys-sort-whole": o(ut)(l) && !t.disabled
+                        }]),
+                        role: i.value ? void 0 : "listitem",
+                        tabindex: c.keyboard ? 0 : void 0,
+                        "data-sort-id": t.key,
+                        "data-sort-key": o(ee)(t.key),
+                        "data-sort-index": o(w).start + s,
+                        "data-drop-position": ((u = he.value) == null ? void 0 : u.key) === t.key ? (p = he.value) == null ? void 0 : p.position : void 0,
+                        "aria-posinset": i.value ? void 0 : t.index + 1,
+                        "aria-setsize": i.value ? void 0 : B.value.length,
+                        "aria-label": C(t.item),
+                        "aria-disabled": t.disabled || void 0,
+                        onPointerdown: (h) => o(g).pointerDown(h, t.key, t.disabled),
+                        onKeydown: (h) => o(g).keyboard(h, t.key, t.disabled),
+                        onClick: (h) => je(h, t),
+                        onDragstart: a[0] || (a[0] = De(() => {
+                        }, ["prevent"]))
+                      }, {
+                        default: f(() => [
+                          re.value ? (r(), d(v(I.value), {
+                            key: 0,
+                            class: "hys-sort-grip-cell"
+                          }, {
+                            default: f(() => [
+                              c.selectable ? (r(), T("input", {
+                                key: 0,
+                                type: "checkbox",
+                                checked: t.selected,
+                                disabled: t.disabled || x.value,
+                                "aria-label": "选择" + C(t.item),
+                                onClick: De((h) => t.toggle(h), ["prevent"])
+                              }, null, 8, xt)) : y("", !0),
+                              ne.value ? (r(), T("button", {
+                                key: 1,
+                                type: "button",
+                                "data-sort-handle": "",
+                                class: "hys-sort-handle",
+                                disabled: t.disabled || x.value,
+                                "aria-label": "拖动排序" + C(t.item)
+                              }, [
+                                $(e.$slots, "handle", P({ ref_for: !0 }, t), () => [
+                                  Z(o(at), {
+                                    size: 16,
+                                    "aria-hidden": "true"
+                                  })
+                                ], !0)
+                              ], 8, Bt)) : y("", !0)
+                            ]),
+                            _: 2
+                          }, 1024)) : y("", !0),
+                          i.value && e.$slots.cells ? $(e.$slots, "cells", P({ ref_for: !0 }, t), void 0, !0, 1) : (r(), d(v(I.value), {
+                            key: 2,
+                            class: "hys-sort-content"
+                          }, {
+                            default: f(() => [
+                              $(e.$slots, "item", P({ ref_for: !0 }, t), () => [
+                                j(L(C(t.item)), 1)
+                              ], !0)
+                            ]),
+                            _: 2
+                          }, 1024)),
+                          c.showButtons ? (r(), d(v(I.value), {
+                            key: 3,
+                            class: "hys-sort-actions-cell"
+                          }, {
+                            default: f(() => [
+                              V("div", Kt, [
+                                V("button", {
+                                  type: "button",
+                                  disabled: t.disabled || x.value || t.index === 0,
+                                  "aria-label": (K.value ? "前移" : "上移") + C(t.item),
+                                  onClick: (h) => t.move(-1)
+                                }, [
+                                  (r(), d(v(K.value ? o(lt) : o(ot)), {
+                                    size: 15,
+                                    "aria-hidden": "true"
+                                  }))
+                                ], 8, Tt),
+                                V("button", {
+                                  type: "button",
+                                  disabled: t.disabled || x.value || t.index === B.value.length - 1,
+                                  "aria-label": (K.value ? "后移" : "下移") + C(t.item),
+                                  onClick: (h) => t.move(1)
+                                }, [
+                                  (r(), d(v(K.value ? o(st) : o(nt)), {
+                                    size: 15,
+                                    "aria-hidden": "true"
+                                  }))
+                                ], 8, $t)
+                              ])
+                            ]),
+                            _: 2
+                          }, 1024)) : y("", !0),
+                          t.dragging && e.$slots.placeholder ? (r(), d(v(I.value), {
+                            key: 4,
+                            class: "hys-sort-placeholder",
+                            "aria-hidden": "true"
+                          }, {
+                            default: f(() => [
+                              $(e.$slots, "placeholder", P({ ref_for: !0 }, t), void 0, !0)
+                            ]),
+                            _: 2
+                          }, 1024)) : y("", !0)
+                        ]),
+                        _: 2
+                      }, 1064, ["class", "role", "tabindex", "data-sort-id", "data-sort-key", "data-sort-index", "data-drop-position", "aria-posinset", "aria-setsize", "aria-label", "aria-disabled", "onPointerdown", "onKeydown", "onClick"]);
+                    }), 128)),
+                    o(w).after ? (r(), d(v(H.value), {
+                      key: "after-spacer",
+                      class: "hys-sort-spacer",
+                      style: Y(ge(o(w).after)),
+                      "aria-hidden": "true"
+                    }, {
+                      default: f(() => [
+                        i.value ? (r(), T("td", {
+                          key: 0,
+                          colspan: F.value
+                        }, null, 8, wt)) : y("", !0)
+                      ]),
+                      _: 1
+                    }, 8, ["style"])) : y("", !0)
+                  ]),
+                  _: 3
+                }, 8, ["move-class"]),
+                B.value.length ? y("", !0) : (r(), d(v(H.value), {
+                  key: 0,
+                  class: "hys-sort-empty"
+                }, {
+                  default: f(() => [
+                    (r(), d(v(I.value), {
+                      colspan: i.value ? F.value : void 0
+                    }, {
+                      default: f(() => [
+                        $(e.$slots, "empty", {}, () => [
+                          a[2] || (a[2] = j("暂无项目", -1))
+                        ], !0)
+                      ]),
+                      _: 3
+                    }, 8, ["colspan"]))
+                  ]),
+                  _: 3
+                }))
               ]),
-              c("div", Q, [
-                c("button", {
-                  type: "button",
-                  disabled: u.disabled || l === 0,
-                  "aria-label": "上移" + a.label,
-                  onClick: (d) => f(l, l - 1)
-                }, [
-                  g(p(O), {
-                    size: 15,
-                    "aria-hidden": "true"
-                  })
-                ], 8, W),
-                c("button", {
-                  type: "button",
-                  disabled: u.disabled || l === u.modelValue.length - 1,
-                  "aria-label": "下移" + a.label,
-                  onClick: (d) => f(l, l + 1)
-                }, [
-                  g(p(P), {
-                    size: 15,
-                    "aria-hidden": "true"
-                  })
-                ], 8, X)
-              ])
-            ], 42, Y);
-          }), 128))
-        ]),
-        _: 3
-      }),
-      c("span", Z, w(v.value), 1)
-    ], 16));
+              _: 3
+            }, 8, ["class", "role", "aria-label", "data-sort-columns"]))
+          ]),
+          _: 3
+        }, 8, ["class", "aria-label"]))
+      ], 38),
+      V("span", {
+        id: le,
+        class: "hys-sort-sr"
+      }, L(Ee.value), 1),
+      V("span", zt, L(_.value), 1),
+      o(ce) ? (r(), d(Ye, {
+        key: 0,
+        to: "body"
+      }, [
+        Z(St, {
+          track: o(ce),
+          appearance: o(te),
+          "ghost-class": c.ghostClass,
+          "ghost-style": c.ghostStyle,
+          motion: M.value
+        }, {
+          default: f((t) => [
+            $(e.$slots, "preview", Ze(et(t)), () => [
+              j(L(C(t.drag.items[0])), 1),
+              t.drag.items.length > 1 ? (r(), T(Ce, { key: 0 }, [
+                j(" 等 " + L(t.drag.items.length) + " 项", 1)
+              ], 64)) : y("", !0)
+            ], !0)
+          ]),
+          _: 3
+        }, 8, ["track", "appearance", "ghost-class", "ghost-style", "motion"])
+      ])) : y("", !0)
+    ], 16, Ct));
   }
 });
 export {
-  le as default
+  Rt as default
 };