@ironsource/shared-ui 2.1.12-rc.48 → 2.1.12-rc.49

package/components/sortableList/SortableList.vue2.js

@@ -1,21 +1,22 @@
- import "../../SortableList.vue_vue_type_style_index_0_scoped_84dc8525_lang.css"; import { defineComponent as z, useCssVars as G, useSlots as U, computed as f, ref as K, openBlock as s, createElementBlock as i, mergeProps as V, unref as l, normalizeClass as Q, renderSlot as y, createCommentVNode as h, createBlock as S, isRef as $, withCtx as I, Fragment as x, renderList as B, createSlots as w, createElementVNode as j, createVNode as E, createTextVNode as J, toDisplayString as W } from "vue";
-import { VueDraggable as X } from "vue-draggable-plus";
-import N from "./SortableItem.vue.js";
-import Y from "../search/v4/SearchV4.vue.js";
-import Z from "../typography/v4/Typography.vue.js";
-import _ from "../skeleton/v4/SkeletonV4.vue.js";
-import { useVModel as ee } from "@vueuse/core";
-import { matchString as q } from "../../utils/search.js";
-import { useTestIdAttrs as te } from "../../utils/testIds.js";
-import { SortableListTestIdModifiers as p } from "../../testids/index.js";
-import { DRAG_CURSOR_CSS_CLASS as O } from "./consts.js";
-const le = {
+ import "../../SortableList.vue_vue_type_style_index_0_scoped_9aec4e9b_lang.css"; import { defineComponent as M, useCssVars as P, useSlots as z, computed as g, openBlock as s, createElementBlock as u, mergeProps as T, unref as t, normalizeClass as U, renderSlot as f, createCommentVNode as c, createBlock as S, isRef as x, withCtx as p, Fragment as D, renderList as H, createSlots as R, createVNode as w, createTextVNode as K, toDisplayString as Q } from "vue";
+import { VueDraggable as j } from "vue-draggable-plus";
+import $ from "./SortableItem.vue.js";
+import J from "./LoaderBars.vue.js";
+import W from "../search/v4/SearchV4.vue.js";
+import X from "../typography/v4/Typography.vue.js";
+import { useVModel as Y } from "@vueuse/core";
+import { matchString as N } from "../../utils/search.js";
+import { useTestIdAttrs as Z } from "../../utils/testIds.js";
+import { SortableListTestIdModifiers as I } from "../../testids/index.js";
+import { useDraggableHelpers as _ } from "./composables/useDraggableHelpers.js";
+import { DRAGGABLE_HANDLE_SELECTOR as ee, DRAGGABLE_AREA_SELECTOR as le } from "./consts.js";
+const te = {
   key: 1,
   class: "sortable-list-container"
-}, ae = { class: "loader-bars" }, de = {
+}, ae = {
   key: 3,
   class: "empty-state-title"
-}, me = /* @__PURE__ */ z({
+}, me = /* @__PURE__ */ M({
   __name: "SortableList",
   props: {
     items: { default: () => [] },
@@ -38,147 +39,136 @@ const le = {
     testId: { default: "" }
   },
   emits: ["sortableItemDragged", "update:items", "update:openId", "update:selectedId", "update:selectedChildId", "update:search", "clearSearch"],
-  setup(a, { emit: r }) {
-    const o = a;
-    G((t) => ({
-      dbaa7dcc: a.zIndexBase
+  setup(a, { emit: n }) {
+    const r = a;
+    P((l) => ({
+      "0d58eb02": a.zIndexBase
     }));
-    const m = U(), u = ee(o, "search", r), b = f(() => !!u.value?.trim()), k = f(() => b.value ? o.items.filter((t) => {
-      const d = t.children || [], e = u.value;
-      return o.searchHandler ? o.searchHandler(t, e) : q(t.displayText, e) || // match parent item
-      d.some((n) => q(n.displayText, e));
-    }) : o.items), g = f({
+    const y = z(), i = Y(r, "search", n), b = g(() => !!i.value?.trim()), C = g(() => b.value ? r.items.filter((l) => {
+      const d = l.children || [], e = i.value;
+      return r.searchHandler ? r.searchHandler(l, e) : N(l.displayText, e) || // match parent item
+      d.some((o) => N(o.displayText, e));
+    }) : r.items), h = g({
       get() {
-        return k.value.filter((t) => !t.isLocked);
+        return C.value.filter((l) => !l.isLocked);
       },
-      set(t) {
-        r("update:items", [...t, ...C.value]);
+      set(l) {
+        n("update:items", [...l, ...k.value]);
       }
-    }), C = f(
-      () => k.value.filter((t) => t.isLocked)
-    ), F = f(
-      () => o.draggableArea === "handle" ? ".draggable-handle" : ".handle-area"
-    ), L = K(!1), M = (t) => {
-      L.value = !0, setTimeout(() => t.target.classList.add(O), 50);
-    }, P = (t) => {
-      const { target: d, item: e, newIndex: n } = t;
-      L.value = !1, d.classList.remove(O);
-      const c = e.attributes["data-id"]?.value;
-      r("sortableItemDragged", { id: c, newIndex: n });
-    }, A = (t) => (b.value || t.id === o.openId) && !L.value, D = (t, d) => {
-      d ? r("update:openId", t.id) : r("update:openId", null);
-    }, v = (t) => t.id === o.selectedId, H = (t) => {
-      r("update:selectedId", t.id), r("update:selectedChildId", null);
-    }, R = (t, d) => {
-      r("update:selectedChildId", t.id), r("update:selectedId", d.id), r("update:openId", d.id);
-    }, T = te(o.testId, p);
-    return (t, d) => (s(), i("div", V({ class: "sortable-list-and-header-container" }, l(T)[l(p).CONTAINER]), [
-      l(m).header || a.showSearch ? (s(), i("div", {
+    }), k = g(
+      () => C.value.filter((l) => l.isLocked)
+    ), G = g(
+      () => r.draggableArea === "handle" ? ee : le
+    ), { onDragStart: O, onDragEnd: q, draggingInProgress: F } = _(n), A = (l) => (b.value || l.id === r.openId) && !F.value, E = (l, d) => {
+      d ? n("update:openId", l.id) : n("update:openId", null);
+    }, m = (l) => l.id === r.selectedId, V = (l) => {
+      n("update:selectedId", l.id), n("update:selectedChildId", null);
+    }, B = (l, d) => {
+      n("update:selectedChildId", l.id), n("update:selectedId", d.id), n("update:openId", d.id);
+    }, L = Z(r.testId, I);
+    return (l, d) => (s(), u("div", T({ class: "sortable-list-and-header-container" }, t(L)[t(I).CONTAINER]), [
+      t(y).header || a.showSearch ? (s(), u("div", {
         key: 0,
-        class: Q(["header-container", { sticky: a.isSticky }])
+        class: U(["header-container", { sticky: a.isSticky }])
       }, [
-        l(m).header ? y(t.$slots, "header", { key: 0 }, void 0, !0) : h("", !0),
-        a.showSearch ? (s(), S(l(Y), {
+        t(y).header ? f(l.$slots, "header", { key: 0 }, void 0, !0) : c("", !0),
+        a.showSearch ? (s(), S(t(W), {
           key: 1,
-          modelValue: l(u),
-          "onUpdate:modelValue": d[0] || (d[0] = (e) => $(u) ? u.value = e : null),
+          modelValue: t(i),
+          "onUpdate:modelValue": d[0] || (d[0] = (e) => x(i) ? i.value = e : null),
           placeholder: a.searchPlaceholder,
           "test-id": a.testId,
-          onOnClear: d[1] || (d[1] = (e) => r("clearSearch"))
-        }, null, 8, ["modelValue", "placeholder", "test-id"])) : h("", !0)
-      ], 2)) : h("", !0),
-      a.isLoading ? y(t.$slots, "loader", { key: 2 }, () => [
-        j("div", ae, [
-          (s(!0), i(x, null, B(a.loadingRowCount, (e) => (s(), i("div", { key: e }, [
-            E(l(_), {
-              round: "",
-              class: "loader-bar"
-            })
-          ]))), 128))
-        ])
-      ], !0) : (s(), i("div", le, [
-        l(g).length ? (s(), S(l(X), V({
+          onOnClear: d[1] || (d[1] = (e) => n("clearSearch"))
+        }, null, 8, ["modelValue", "placeholder", "test-id"])) : c("", !0)
+      ], 2)) : c("", !0),
+      a.isLoading ? f(l.$slots, "loader", { key: 2 }, () => [
+        w(J, {
+          "loading-row-count": a.loadingRowCount,
+          variant: a.variant
+        }, null, 8, ["loading-row-count", "variant"])
+      ], !0) : (s(), u("div", te, [
+        t(h).length ? (s(), S(t(j), T({
           key: 0,
-          modelValue: l(g),
-          "onUpdate:modelValue": d[2] || (d[2] = (e) => $(g) ? g.value = e : null),
+          modelValue: t(h),
+          "onUpdate:modelValue": d[2] || (d[2] = (e) => x(h) ? h.value = e : null),
           class: "sortable-list",
           filter: ".expand-icon",
           animation: 150,
-          handle: l(F),
-          disabled: l(b)
-        }, l(T)[l(p).DRAGGABLE_LIST], {
-          onStart: M,
-          onEnd: P
+          handle: t(G),
+          disabled: t(b)
+        }, t(L)[t(I).DRAGGABLE_LIST], {
+          onStart: t(O),
+          onEnd: t(q)
         }), {
-          default: I(() => [
-            (s(!0), i(x, null, B(l(g), (e, n) => (s(), S(N, {
+          default: p(() => [
+            (s(!0), u(D, null, H(t(h), (e, o) => (s(), S($, {
               key: e.id,
               "data-id": e.id,
               item: e,
-              index: n,
+              index: o,
               "is-open": A(e),
-              "is-selected": v(e),
+              "is-selected": m(e),
               "is-disabled": !!e.isDisabled,
-              "selected-child-id": v(e) ? a.selectedChildId : null,
+              "selected-child-id": m(e) ? a.selectedChildId : null,
               "display-value": a.displayValue,
-              "search-query": l(u),
+              "search-query": t(i),
               "search-handler": a.searchHandler,
               variant: a.variant,
               "draggable-area": a.draggableArea,
-              onToggle: (c) => D(e, c),
-              onSelect: (c) => H(e),
-              onSelectChild: (c) => R(c, e)
-            }, w({ _: 2 }, [
-              l(m).menu ? {
+              onToggle: (v) => E(e, v),
+              onSelect: (v) => V(e),
+              onSelectChild: (v) => B(v, e)
+            }, R({ _: 2 }, [
+              t(y).menu ? {
                 name: "menu",
-                fn: I(() => [
-                  y(t.$slots, "menu", { item: e }, void 0, !0)
+                fn: p(() => [
+                  f(l.$slots, "menu", { item: e }, void 0, !0)
                 ]),
                 key: "0"
               } : void 0
             ]), 1032, ["data-id", "item", "index", "is-open", "is-selected", "is-disabled", "selected-child-id", "display-value", "search-query", "search-handler", "variant", "draggable-area", "onToggle", "onSelect", "onSelectChild"]))), 128))
           ]),
           _: 3
-        }, 16, ["modelValue", "handle", "disabled"])) : h("", !0),
-        l(C).length ? (s(), i("div", V({
+        }, 16, ["modelValue", "handle", "disabled", "onStart", "onEnd"])) : c("", !0),
+        t(k).length ? (s(), u("div", T({
           key: 1,
           class: "locked-list"
-        }, l(T)[l(p).LOCKED_LIST]), [
-          (s(!0), i(x, null, B(l(C), (e) => (s(), S(N, {
+        }, t(L)[t(I).LOCKED_LIST]), [
+          (s(!0), u(D, null, H(t(k), (e) => (s(), S($, {
             key: e.id,
             item: e,
             "is-open": A(e),
-            "is-selected": v(e),
-            "selected-child-id": v(e) ? a.selectedChildId : null,
+            "is-selected": m(e),
+            "selected-child-id": m(e) ? a.selectedChildId : null,
             "display-value": a.displayValue,
-            "search-query": l(u),
+            "search-query": t(i),
             "on-search": a.searchHandler,
             "child-list-max-height": a.childListMaxHeight,
             variant: a.variant,
-            onToggle: (n) => D(e, n),
-            onSelect: (n) => H(e),
-            onSelectChild: (n) => R(n, e)
-          }, w({ _: 2 }, [
-            l(m).menu ? {
+            onToggle: (o) => E(e, o),
+            onSelect: (o) => V(e),
+            onSelectChild: (o) => B(o, e)
+          }, R({ _: 2 }, [
+            t(y).menu ? {
               name: "menu",
-              fn: I(() => [
-                y(t.$slots, "menu", { item: e }, void 0, !0)
+              fn: p(() => [
+                f(l.$slots, "menu", { item: e }, void 0, !0)
               ]),
               key: "0"
             } : void 0
           ]), 1032, ["item", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "on-search", "child-list-max-height", "variant", "onToggle", "onSelect", "onSelectChild"]))), 128))
-        ], 16)) : h("", !0)
+        ], 16)) : c("", !0)
       ])),
-      !l(k).length && !a.isLoading ? (s(), i("div", de, [
-        y(t.$slots, "empty-state", {}, () => [
-          E(l(Z), { variant: "body2" }, {
-            default: I(() => [
-              J(W(a.emptyStateTitle), 1)
+      !t(C).length && !a.isLoading ? (s(), u("div", ae, [
+        f(l.$slots, "empty-state", {}, () => [
+          w(t(X), { variant: "body2" }, {
+            default: p(() => [
+              K(Q(a.emptyStateTitle), 1)
             ]),
             _: 1
           })
         ], !0)
-      ])) : h("", !0)
+      ])) : c("", !0)
     ], 16));
   }
 });

package/components/sortableList/SortableSelectableList.vue.d.ts

@@ -0,0 +1,107 @@
+import { SortableListItem } from '@/components/sortableList/SortableList.types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    items: SortableListItem[];
+    displayValue?: (item: SortableListItem) => string;
+    openId?: string | number;
+    selectedChildPerItem?: Record<string | number, string | number>;
+    variant?: "default" | "compact";
+    draggableArea?: "handle" | "full";
+    isLoading?: boolean;
+    loadingRowCount?: number;
+    alwaysVisibleCount?: number;
+    zIndexBase?: number;
+    testId?: string;
+}>, {
+    items: () => any[];
+    displayValue: (item: SortableListItem) => string;
+    openId: any;
+    selectedChildPerItem: () => {};
+    alwaysVisibleCount: any;
+    variant: string;
+    draggableArea: string;
+    isLoading: boolean;
+    loadingRowCount: number;
+    zIndexBase: number;
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sortableItemDragged: (event: {
+        id: string;
+        newIndex: number;
+    }) => void;
+    "update:items": (items: SortableListItem[]) => void;
+    "update:openId": (id: string | number) => void;
+    "update:selectedChildPerItem": (value: Record<string | number, string | number>) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    items: SortableListItem[];
+    displayValue?: (item: SortableListItem) => string;
+    openId?: string | number;
+    selectedChildPerItem?: Record<string | number, string | number>;
+    variant?: "default" | "compact";
+    draggableArea?: "handle" | "full";
+    isLoading?: boolean;
+    loadingRowCount?: number;
+    alwaysVisibleCount?: number;
+    zIndexBase?: number;
+    testId?: string;
+}>, {
+    items: () => any[];
+    displayValue: (item: SortableListItem) => string;
+    openId: any;
+    selectedChildPerItem: () => {};
+    alwaysVisibleCount: any;
+    variant: string;
+    draggableArea: string;
+    isLoading: boolean;
+    loadingRowCount: number;
+    zIndexBase: number;
+    testId: string;
+}>>> & {
+    onSortableItemDragged?: (event: {
+        id: string;
+        newIndex: number;
+    }) => any;
+    "onUpdate:items"?: (items: SortableListItem[]) => any;
+    "onUpdate:openId"?: (id: string | number) => any;
+    "onUpdate:selectedChildPerItem"?: (value: Record<string | number, string | number>) => any;
+}, {
+    testId: string;
+    variant: "default" | "compact";
+    isLoading: boolean;
+    displayValue: (item: SortableListItem) => string;
+    items: SortableListItem[];
+    draggableArea: "handle" | "full";
+    loadingRowCount: number;
+    openId: string | number;
+    selectedChildPerItem: Record<string | number, string | number>;
+    alwaysVisibleCount: number;
+    zIndexBase: number;
+}>, {
+    header?(_: {}): any;
+    menu?(_: {
+        item: SortableListItem;
+    }): any;
+    loader?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/sortableList/SortableSelectableList.vue.js

@@ -0,0 +1,7 @@
+import e from "./SortableSelectableList.vue2.js";
+/* empty css                             */import o from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../SortableSelectableList.vue_vue_type_style_index_0_scoped_40b0a4de_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-40b0a4de"]]);
+export {
+  a as default
+};

package/components/sortableList/SortableSelectableList.vue2.js

@@ -0,0 +1,128 @@
+ import "../../SortableSelectableList.vue_vue_type_style_index_0_scoped_40b0a4de_lang.css"; import { defineComponent as x, useCssVars as G, useSlots as N, ref as O, computed as u, watch as H, openBlock as s, createElementBlock as g, mergeProps as w, unref as l, renderSlot as b, createCommentVNode as c, createBlock as C, isRef as S, withCtx as V, Fragment as $, renderList as z, createSlots as F, createVNode as M } from "vue";
+import { VueDraggable as U } from "vue-draggable-plus";
+import j from "./SortableItem.vue.js";
+import { useTestIdAttrs as q } from "../../utils/testIds.js";
+import { SortableListTestIdModifiers as I } from "../../testids/index.js";
+import { useDraggableHelpers as J } from "./composables/useDraggableHelpers.js";
+import K from "./LoaderBars.vue.js";
+import Q from "../columnConfigurator/ShowMoreLink.vue.js";
+import { DRAGGABLE_HANDLE_SELECTOR as W, DRAGGABLE_AREA_SELECTOR as X } from "./consts.js";
+const Y = {
+  key: 0,
+  class: "header-container"
+}, Z = {
+  key: 1,
+  class: "sortable-list-container"
+}, re = /* @__PURE__ */ x({
+  __name: "SortableSelectableList",
+  props: {
+    items: { default: () => [] },
+    displayValue: { type: Function, default: (n) => n.displayText || n.toString() },
+    openId: { default: null },
+    selectedChildPerItem: { default: () => ({}) },
+    variant: { default: "default" },
+    draggableArea: { default: "handle" },
+    isLoading: { type: Boolean, default: !1 },
+    loadingRowCount: { default: 3 },
+    alwaysVisibleCount: { default: null },
+    zIndexBase: { default: 100 },
+    testId: { default: "" }
+  },
+  emits: ["sortableItemDragged", "update:items", "update:openId", "update:selectedChildPerItem"],
+  setup(n, { emit: o }) {
+    const t = n;
+    G((e) => ({
+      "3cf7ee9d": n.zIndexBase
+    }));
+    const f = N(), L = (e) => {
+      if (!e.children)
+        return t.displayValue(e);
+      const d = t.selectedChildPerItem[e.id] ?? null, a = e.children.find((h) => h.id === d);
+      return a ? t.displayValue(a) : t.displayValue(e);
+    }, i = O(!1), m = u({
+      get: () => !i.value,
+      set: (e) => i.value = !e
+    }), y = u(() => {
+      const e = t.alwaysVisibleCount ?? 0;
+      return t.items?.length > e;
+    });
+    H(y, (e, d) => {
+      d === !0 && e === !1 && (i.value = !1);
+    });
+    const r = u({
+      get() {
+        return i.value && t.alwaysVisibleCount ? t.items.slice(0, t.alwaysVisibleCount) : t.items;
+      },
+      set(e) {
+        o("update:items", [...e, ...A.value]);
+      }
+    }), A = u(() => i.value ? t.alwaysVisibleCount ? t.items.slice(t.alwaysVisibleCount) : [] : []), E = u(
+      () => t.draggableArea === "handle" ? W : X
+    ), { onDragStart: k, onDragEnd: B, draggingInProgress: T } = J(o), D = (e) => e.id === t.openId && !T.value, R = (e, d) => {
+      d ? o("update:openId", e.id) : o("update:openId", null);
+    }, P = (e, d) => {
+      o("update:selectedChildPerItem", {
+        ...t.selectedChildPerItem,
+        [d.id]: e.id
+      }), o("update:openId", d.id);
+    }, v = q(t.testId, I);
+    return (e, d) => (s(), g("div", w({ class: "sortable-selectable-list" }, l(v)[l(I).CONTAINER]), [
+      l(f).header ? (s(), g("div", Y, [
+        l(f).header ? b(e.$slots, "header", { key: 0 }, void 0, !0) : c("", !0)
+      ])) : c("", !0),
+      l(r).length && !n.isLoading ? (s(), g("div", Z, [
+        l(r).length ? (s(), C(l(U), w({
+          key: 0,
+          modelValue: l(r),
+          "onUpdate:modelValue": d[0] || (d[0] = (a) => S(r) ? r.value = a : null),
+          class: "sortable-list",
+          filter: ".expand-icon",
+          animation: 150,
+          handle: l(E)
+        }, l(v)[l(I).DRAGGABLE_LIST], {
+          onStart: l(k),
+          onEnd: l(B)
+        }), {
+          default: V(() => [
+            (s(!0), g($, null, z(l(r), (a, h) => (s(), C(j, {
+              key: a.id,
+              "data-id": a.id,
+              item: a,
+              index: h,
+              "is-open": D(a),
+              "is-disabled": !!a.isDisabled,
+              "selected-child-id": n.selectedChildPerItem[a.id] ?? null,
+              "display-value": L,
+              variant: n.variant,
+              "draggable-area": n.draggableArea,
+              onToggle: (p) => R(a, p),
+              onSelectChild: (p) => P(p, a)
+            }, F({ _: 2 }, [
+              l(f).menu ? {
+                name: "menu",
+                fn: V(() => [
+                  b(e.$slots, "menu", { item: a }, void 0, !0)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["data-id", "item", "index", "is-open", "is-disabled", "selected-child-id", "variant", "draggable-area", "onToggle", "onSelectChild"]))), 128))
+          ]),
+          _: 3
+        }, 16, ["modelValue", "handle", "onStart", "onEnd"])) : c("", !0),
+        l(y) ? (s(), C(Q, {
+          key: 1,
+          "all-shown": l(m),
+          "onUpdate:all-shown": d[1] || (d[1] = (a) => S(m) ? m.value = a : null)
+        }, null, 8, ["all-shown"])) : c("", !0)
+      ])) : n.isLoading ? b(e.$slots, "loader", { key: 2 }, () => [
+        M(K, {
+          "loading-row-count": n.loadingRowCount,
+          variant: n.variant
+        }, null, 8, ["loading-row-count", "variant"])
+      ], !0) : c("", !0)
+    ], 16));
+  }
+});
+export {
+  re as default
+};

package/components/sortableList/composables/useDraggableHelpers.d.ts

@@ -0,0 +1,5 @@
+export declare const useDraggableHelpers: (emit: any) => {
+    onDragStart: (e: any) => void;
+    onDragEnd: (e: any) => void;
+    draggingInProgress: import("vue").Ref<boolean>;
+};

package/components/sortableList/composables/useDraggableHelpers.js

@@ -0,0 +1,20 @@
+import { ref as d } from "vue";
+import { DRAG_CURSOR_CSS_CLASS as r } from "../consts.js";
+const u = (a) => {
+  const t = d(!1);
+  return {
+    onDragStart: (e) => {
+      t.value = !0, setTimeout(() => e.target.classList.add(r), 50);
+    },
+    onDragEnd: (e) => {
+      const { target: s, item: o, newIndex: n } = e;
+      t.value = !1, s.classList.remove(r);
+      const g = o.attributes["data-id"]?.value;
+      a("sortableItemDragged", { id: g, newIndex: n });
+    },
+    draggingInProgress: t
+  };
+};
+export {
+  u as useDraggableHelpers
+};

package/components/sortableList/consts.d.ts

@@ -1 +1,3 @@
 export declare const DRAG_CURSOR_CSS_CLASS = "force-grabbing-cursor";
+export declare const DRAGGABLE_HANDLE_SELECTOR = ".draggable-handle";
+export declare const DRAGGABLE_AREA_SELECTOR = ".handle-area";

package/components/sortableList/consts.js

@@ -1,4 +1,6 @@
-const r = "force-grabbing-cursor";
+const A = "force-grabbing-cursor", E = ".draggable-handle", R = ".handle-area";
 export {
-  r as DRAG_CURSOR_CSS_CLASS
+  R as DRAGGABLE_AREA_SELECTOR,
+  E as DRAGGABLE_HANDLE_SELECTOR,
+  A as DRAG_CURSOR_CSS_CLASS
 };