@ironsource/shared-ui 2.1.12-rc.9 → 2.1.12-test.2

package/components/includeExclude/IncludeExcludeDragDrop.vue2.js

@@ -1,40 +1,41 @@
- import "../../IncludeExcludeDragDrop.vue_vue_type_style_index_0_scoped_bd6145ce_lang.css"; import { defineComponent as Re, computed as p, ref as c, watch as H, provide as Ae, openBlock as i, createBlock as O, unref as l, withCtx as h, createElementVNode as s, renderSlot as v, normalizeClass as N, createTextVNode as C, toDisplayString as le, createCommentVNode as f, createVNode as g, Transition as Pe, createElementBlock as u, mergeProps as w, Fragment as U, renderList as W, toRaw as S, isRef as Ee, nextTick as Fe } from "vue";
-import $e from "../popover/v3/Popover.vue.js";
-import G from "../button/v3/Button.vue.js";
+ import "../../IncludeExcludeDragDrop.vue_vue_type_style_index_0_scoped_5881f285_lang.css"; import { defineComponent as Be, computed as f, ref as d, watch as $, provide as Ie, openBlock as a, createBlock as O, unref as o, withCtx as g, createElementVNode as s, renderSlot as v, normalizeClass as z, createTextVNode as C, toDisplayString as Y, createCommentVNode as c, createVNode as p, Transition as Re, createElementBlock as u, mergeProps as w, Fragment as H, renderList as N, toRaw as S, isRef as Ae, nextTick as xe } from "vue";
+import Pe from "../popover/v3/Popover.vue.js";
+import U from "../button/v3/Button.vue.js";
 import "../button/v3/IconButton.vue.js";
 import "../button/v3/ScrollButton.vue.js";
-import ze from "../search/v3/Search.vue.js";
+import Ee from "../search/v3/Search.vue.js";
 import "../typography/Heading.vue.js";
-import te from "../typography/Text.vue.js";
-import He from "../checkbox/v3/Checkbox.vue.js";
-import b from "../skeleton/v3/Skeleton.vue.js";
-import Ne from "../emptyState/v3/EmptyState.vue.js";
-import { useToggle as Ue } from "../../composables/useToggle.js";
-import { IncludeExcludeContext as We } from "./IncludeExcludeContext.js";
-import { onClickOutside as Ge, useClamp as Ke, useVirtualList as ne } from "@vueuse/core";
-import Le from "vuedraggable";
-const qe = { class: "include-exclude-header" }, Me = { class: "include-exclude-header-left-section" }, je = { class: "include-exclude-header-right-section" }, Je = { class: "include-exclude-container-wrapper" }, Qe = {
+import Z from "../typography/Text.vue.js";
+import Fe from "../checkbox/v3/Checkbox.vue.js";
+import y from "../skeleton/v3/Skeleton.vue.js";
+import $e from "../emptyState/v3/EmptyState.vue.js";
+import { useToggle as ze } from "../../composables/useToggle.js";
+import { IncludeExcludeContext as He } from "./IncludeExcludeContext.js";
+import { onClickOutside as Ne, useVirtualList as ee } from "@vueuse/core";
+import { useClamp as Ue } from "@vueuse/math";
+import We from "vuedraggable";
+const Ge = { class: "include-exclude-header" }, Ke = { class: "include-exclude-header-left-section" }, Le = { class: "include-exclude-header-right-section" }, qe = { class: "include-exclude-container-wrapper" }, Me = {
   key: 0,
   class: "include-exclude-container"
-}, Xe = {
+}, je = {
   key: 1,
   class: "include-exclude-container"
-}, Ye = { class: "include-exclude-list-wrapper" }, Ze = {
+}, Je = { class: "include-exclude-list-wrapper" }, Qe = {
   key: 1,
   class: "loader-wrapper"
-}, _e = ["aria-selected", "aria-disabled", "onClick"], el = ["onClick"], ll = { key: 1 }, tl = { class: "loader-wrapper" }, nl = { class: "include-exclude-selected-wrapper" }, ol = {
+}, Xe = ["aria-selected", "aria-disabled", "onClick"], Ye = ["onClick"], Ze = { key: 1 }, el = { class: "loader-wrapper" }, ll = { class: "include-exclude-selected-wrapper" }, tl = {
   key: 0,
   class: "loader-wrapper"
-}, al = { class: "include-exclude-selected-header-left" }, sl = { class: "include-exclude-selected-header-right" }, il = { class: "drag-item" }, dl = { key: 1 }, rl = { class: "loader-wrapper" }, cl = { class: "include-exclude-footer" }, ul = { class: "include-exclude-footer-buttons" }, Vl = /* @__PURE__ */ Re({
+}, ol = { class: "include-exclude-selected-header-left" }, nl = { class: "include-exclude-selected-header-right" }, sl = { class: "drag-item" }, al = { key: 1 }, il = { class: "loader-wrapper" }, rl = { class: "include-exclude-footer" }, dl = { class: "include-exclude-footer-buttons" }, le = 50, te = 3, ul = 6, cl = 32, pl = 48, Il = /* @__PURE__ */ Be({
   __name: "IncludeExcludeDragDrop",
   props: {
     titleText: { default: "" },
     loading: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
-    modelValue: null,
+    modelValue: {},
     clearable: { type: Boolean },
     placement: { default: "bottom-start" },
-    options: null,
+    options: {},
     autoFocus: { type: Boolean, default: !0 },
     onSearch: { type: Function, default: () => !0 },
     searchPlaceholder: { default: "Search" },
@@ -46,217 +47,217 @@ const qe = { class: "include-exclude-header" }, Me = { class: "include-exclude-h
     distanceOffset: { default: 0 },
     skiddingOffset: { default: 0 },
     hasSubtitle: { type: Boolean, default: !1 },
-    keyField: null,
+    keyField: {},
     isDraggable: { type: Boolean, default: !1 },
     draggableArgs: { default: null }
   },
   emits: ["update:modelValue", "changeDragDrop", "clickOutside"],
-  setup(t, { emit: T }) {
-    const a = t, K = 50, L = 3, oe = 6, ae = 32, se = 48, ie = p(() => {
-      const e = a.placement?.includes("bottom") ? oe : 0;
-      return a.isOnTop ? -I.value?.getBoundingClientRect().height : e;
-    }), q = c(null), m = c(""), B = c(!1), I = c(null), de = c(null), re = c(null), R = c(null), A = c(null), ce = c(null), d = c(a.modelValue), M = (e) => new Promise((n) => setTimeout(n, e)), r = p({
+  setup(oe, { emit: ne }) {
+    const T = ne, se = f(() => {
+      const e = n.placement?.includes("bottom") ? ul : 0;
+      return n.isOnTop ? -B.value?.getBoundingClientRect().height : e;
+    }), n = oe, W = d(null), h = d(""), V = d(!1), B = d(null), ae = d(null), ie = d(null), I = d(null), R = d(null), re = d(null), i = d(n.modelValue), G = (e) => new Promise((l) => setTimeout(l, e)), r = f({
       get() {
-        return d.value;
+        return i.value;
       },
       set(e) {
         T("update:modelValue", e);
       }
-    }), P = () => {
-      r.value?.length !== a.options?.length && (B.value = !0), k(!1);
+    }), A = () => {
+      r.value?.length !== n.options?.length && (V.value = !0), m(!1);
     };
-    H(
-      () => a.modelValue,
+    $(
+      () => n.modelValue,
       () => {
-        d.value = a.modelValue;
+        i.value = n.modelValue;
       }
-    ), H(
-      () => d.value,
+    ), $(
+      () => i.value,
       () => {
-        T("update:modelValue", d.value);
+        T("update:modelValue", i.value);
       }
     );
-    const ue = p(() => d.value.filter(
-      (e) => a.onSearch(e, m.value)
-    )), E = p(() => y.value.filter(
+    const de = f(() => i.value.filter(
+      (e) => n.onSearch(e, h.value)
+    )), x = f(() => k.value.filter(
       (e) => !e?.groupOption
-    )), j = () => {
-      r.value?.length !== a.options?.length && (r.value = d.value), k(!1);
-    }, fe = () => {
-      k();
-    }, ge = () => {
-      d.value = [];
-    }, J = p(() => () => a.hasSubtitle ? se : ae), Q = p(
-      () => (e, n) => e.every(
-        (o) => n.some((V) => V[a.keyField] === o[a.keyField])
+    )), K = () => {
+      r.value?.length !== n.options?.length && (r.value = i.value), m(!1);
+    }, ue = () => {
+      m();
+    }, ce = () => {
+      i.value = [];
+    }, L = f(() => () => n.hasSubtitle ? pl : cl), q = f(
+      () => (e, l) => e.every(
+        (t) => l.some((D) => D[n.keyField] === t[n.keyField])
       )
-    ), X = p(() => {
-      if (!x.value)
+    ), M = f(() => {
+      if (!b.value)
         return !1;
-      const e = d.value, n = E.value || y.value;
-      return e === n ? !0 : e?.length !== n?.length ? !1 : Q.value(e, n) && Q.value(n, e);
-    }), Y = c(null), [x, pe] = Ue({
-      disabled: a.disabled,
-      initialValue: a.defaultOpen
-    }), he = (e = 300) => {
-      const n = r.value?.length === a.options?.length;
-      Fe(async () => {
-        n && (r.value = []), await M(e), _.resetInput();
+      const e = i.value, l = x.value || k.value;
+      return e === l ? !0 : e?.length !== l?.length ? !1 : q.value(e, l) && q.value(l, e);
+    }), j = d(null), [b, pe] = ze({
+      disabled: n.disabled,
+      initialValue: n.defaultOpen
+    }), fe = (e = 300) => {
+      const l = r.value?.length === n.options?.length;
+      xe(async () => {
+        l && (r.value = []), await G(e), Q.resetInput();
       });
     };
-    H(
-      () => [x.value, A?.value?.inputRef],
-      ([e, n]) => {
-        e && n && me();
+    $(
+      () => [b.value, R?.value?.inputRef],
+      ([e, l]) => {
+        e && l && ve();
       }
     );
-    const ve = () => {
-      a.autoFocus && A.value?.inputRef.focus();
-    }, me = async (e = 300) => {
-      await M(e), ve();
-    }, k = (e) => {
-      a.disabled || (e || he(), pe(e), z.value = []);
+    const ge = () => {
+      n.autoFocus && R.value?.inputRef.focus();
+    }, ve = async (e = 300) => {
+      await G(e), ge();
+    }, m = (e) => {
+      n.disabled || (e || fe(), pe(e), F.value = []);
     };
-    Ge(Y, () => {
-      x.value && (P(), T("clickOutside", d.value));
+    Ne(j, () => {
+      b.value && (A(), T("clickOutside", i.value));
     });
-    const ke = c([]), ye = p(() => y.value?.length - 1), Z = (e) => {
-      m.value = e;
-    }, F = Ke(0, 0, ye), $ = (e) => {
+    const he = d([]), me = f(() => k.value?.length - 1), J = (e) => {
+      h.value = e;
+    }, P = Ue(0, 0, me), E = (e) => {
       if (e?.groupOption)
         return;
-      R.value?.focus();
-      const n = d.value;
-      n.includes(e) ? d.value = n.filter(
-        (o) => o !== e
-      ) : d.value = [.../* @__PURE__ */ new Set([...n, e])];
-    }, be = (e) => {
-      $(e);
-    }, _ = {
-      toggle: k,
-      disabled: a.disabled,
-      options: ke,
-      clearable: a.clearable,
+      I.value?.focus();
+      const l = i.value;
+      l.includes(e) ? i.value = l.filter(
+        (t) => t !== e
+      ) : i.value = [.../* @__PURE__ */ new Set([...l, e])];
+    }, ke = (e) => {
+      E(e);
+    }, Q = {
+      toggle: m,
+      disabled: n.disabled,
+      options: he,
+      clearable: n.clearable,
       resetInput: () => {
-        Z(""), R.value && (R.value.value = ""), B.value && (d.value = a.modelValue, B.value = !1);
+        J(""), I.value && (I.value.value = ""), V.value && (i.value = n.modelValue, V.value = !1);
       },
-      search: Z,
-      select: $,
-      activeIndex: F,
+      search: J,
+      select: E,
+      activeIndex: P,
       selectedOption: r,
-      activeOption: ce,
-      listRef: q,
-      query: m,
-      open: x,
-      removeSelection: be
-    }, xe = () => {
-      d.value = d.value?.length !== E.value?.length ? E.value : [], setTimeout(() => {
-        Te(d.value.length);
+      activeOption: re,
+      listRef: W,
+      query: h,
+      open: b,
+      removeSelection: ke
+    }, ye = () => {
+      i.value = i.value?.length !== x.value?.length ? x.value : [], setTimeout(() => {
+        Se(i.value.length);
       }, 300);
     };
-    Ae(We, _);
-    const y = p(() => m.value?.length ? a.options?.filter((e) => a.onSearch(e, m.value)) : a.options), {
-      list: ee,
-      containerProps: Oe,
-      wrapperProps: Ce
-    } = ne(y, {
-      itemHeight: J.value,
-      overscan: K
+    Ie(He, Q);
+    const k = f(() => h.value?.length ? n.options?.filter((e) => n.onSearch(e, h.value)) : n.options), {
+      list: X,
+      containerProps: be,
+      wrapperProps: Oe
+    } = ee(k, {
+      itemHeight: L.value,
+      overscan: le
     }), {
-      list: D,
-      containerProps: we,
-      wrapperProps: Se,
-      scrollTo: Te
-    } = ne(ue, {
-      itemHeight: J.value,
-      overscan: K
-    }), De = (e) => {
+      list: _,
+      containerProps: Ce,
+      wrapperProps: we,
+      scrollTo: Se
+    } = ee(de, {
+      itemHeight: L.value,
+      overscan: le
+    }), Te = (e) => {
       if (["Enter", " ", "Space"].includes(e.key)) {
-        k();
+        m();
         return;
       }
       if (e.key === "ArrowUp") {
-        k(!1);
+        m(!1);
         return;
       }
-      e.key === "ArrowDown" && (k(!0), e.preventDefault());
-    }, z = c([]), Ve = (e) => z.value.includes(e?.[a.keyField]), Be = (e) => {
-      e.groupOption && (e.groupOption.isCollapse = !e?.groupOption.isCollapse), z.value = ee.value.filter((n) => n?.data?.groupOption?.isCollapse).flatMap((n) => n?.data?.groupOption?.childOptionsIds || []);
-    }, Ie = () => {
-      T("changeDragDrop", D.value);
+      e.key === "ArrowDown" && (m(!0), e.preventDefault());
+    }, F = d([]), _e = (e) => F.value.includes(e?.[n.keyField]), De = (e) => {
+      e.groupOption && (e.groupOption.isCollapse = !e?.groupOption.isCollapse), F.value = X.value.filter((l) => l?.data?.groupOption?.isCollapse).flatMap((l) => l?.data?.groupOption?.childOptionsIds || []);
+    }, Ve = () => {
+      T("changeDragDrop", _.value);
     };
-    return (e, n) => (i(), O(l($e), {
-      distance: l(ie) + t.distanceOffset,
-      skidding: t.skiddingOffset,
+    return (e, l) => (a(), O(o(Pe), {
+      distance: se.value + e.distanceOffset,
+      skidding: e.skiddingOffset,
       trigger: "managed",
-      open: l(x) || t.alwayesOpen,
-      placement: t.placement
+      open: o(b) || e.alwayesOpen,
+      placement: e.placement
     }, {
-      trigger: h(() => [
+      trigger: g(() => [
         s("div", {
           ref_key: "buttonRef",
-          ref: I,
+          ref: B,
           class: "include-exclude-trigger",
           tabindex: "0",
-          onClick: fe,
-          onKeydown: De
+          onClick: ue,
+          onKeydown: Te
         }, [
           v(e.$slots, "trigger", {}, () => [
             s("button", {
               ref_key: "buttonRef",
-              ref: I
+              ref: B
             }, "Default trigger", 512)
           ], !0)
         ], 544)
       ]),
-      content: h(() => [
+      content: g(() => [
         s("div", {
           ref_key: "popoverWrapperRef",
-          ref: Y,
-          class: N(["include-exclude-content", {
-            "include-exclude-content-draggable": t.isDraggable
+          ref: j,
+          class: z(["include-exclude-content", {
+            "include-exclude-content-draggable": e.isDraggable
           }])
         }, [
-          s("div", qe, [
-            s("div", Me, [
+          s("div", Ge, [
+            s("div", Ke, [
               v(e.$slots, "header-left-section", {}, () => [
-                t.titleText ? (i(), O(l(te), {
+                e.titleText ? (a(), O(o(Z), {
                   key: 0,
                   class: "include-exclude-header-left-section-title",
                   size: "md",
                   strong: ""
                 }, {
-                  default: h(() => [
-                    C(le(t.titleText), 1)
+                  default: g(() => [
+                    C(Y(e.titleText), 1)
                   ]),
                   _: 1
-                })) : f("", !0)
+                })) : c("", !0)
               ], !0)
             ]),
-            s("div", je, [
+            s("div", Le, [
               v(e.$slots, "header-right-section", {}, () => [
-                g(l(ze), {
+                p(o(Ee), {
                   ref_key: "searchRef",
-                  ref: A,
-                  modelValue: m.value,
-                  "onUpdate:modelValue": n[0] || (n[0] = (o) => m.value = o),
+                  ref: R,
+                  modelValue: h.value,
+                  "onUpdate:modelValue": l[0] || (l[0] = (t) => h.value = t),
                   class: "include-exclude-header-right-section-search-input",
                   variant: "transparent",
-                  placeholder: t.searchPlaceholder,
-                  disabled: t.loading
+                  placeholder: e.searchPlaceholder,
+                  disabled: e.loading
                 }, null, 8, ["modelValue", "placeholder", "disabled"])
               ], !0)
             ])
           ]),
-          s("div", Je, [
-            g(Pe, {
+          s("div", qe, [
+            p(Re, {
               name: "switch",
               mode: "out-in"
             }, {
-              default: h(() => [
-                !l(y)?.length && !t.loading ? (i(), u("div", Qe, [
+              default: g(() => [
+                !k.value?.length && !e.loading ? (a(), u("div", Me, [
                   v(e.$slots, "no-result", {}, () => [
-                    g(l(Ne), {
+                    p(o($e), {
                       size: "lg",
                       title: "No results found",
                       subtitle: "Try diffrent keyword",
@@ -264,154 +265,154 @@ const qe = { class: "include-exclude-header" }, Me = { class: "include-exclude-h
                       "icon-height": 72
                     })
                   ], !0)
-                ])) : (i(), u("div", Xe, [
-                  s("div", Ye, [
+                ])) : (a(), u("div", je, [
+                  s("div", Je, [
                     s("div", {
-                      class: N(["include-exclude-list-header", {
-                        "include-exclude-list-header-loading": t.loading,
-                        "include-exclude-list-header-loaded": !t.loading
+                      class: z(["include-exclude-list-header", {
+                        "include-exclude-list-header-loading": e.loading,
+                        "include-exclude-list-header-loaded": !e.loading
                       }])
                     }, [
-                      t.loading ? f("", !0) : (i(), O(l(He), {
+                      e.loading ? c("", !0) : (a(), O(o(Fe), {
                         key: 0,
                         size: "sm",
-                        "is-checked": l(X),
-                        "is-indeterminate": l(r)?.length > 0 && !l(X),
-                        disabled: !l(y)?.length,
+                        "is-checked": M.value,
+                        "is-indeterminate": r.value?.length > 0 && !M.value,
+                        disabled: !k.value?.length,
                         label: "Select all",
-                        onClick: xe
+                        onClick: ye
                       }, null, 8, ["is-checked", "is-indeterminate", "disabled"])),
-                      t.loading ? (i(), u("div", Ze, [
-                        g(l(b), {
+                      e.loading ? (a(), u("div", Qe, [
+                        p(o(y), {
                           class: "dot-skeleton",
                           round: ""
                         }),
-                        g(l(b), { round: "" })
-                      ])) : f("", !0)
+                        p(o(y), { round: "" })
+                      ])) : c("", !0)
                     ], 2),
-                    s("div", w({ class: "include-exclude-list" }, l(Oe), {
+                    s("div", w({ class: "include-exclude-list" }, o(be), {
                       class: {
-                        "include-exclude-list-draggable": t.isDraggable
+                        "include-exclude-list-draggable": e.isDraggable
                       }
                     }), [
-                      t.loading ? f("", !0) : (i(), u("ul", w({ key: 0 }, l(Ce), {
+                      e.loading ? c("", !0) : (a(), u("ul", w({ key: 0 }, o(Oe), {
                         ref_key: "listRef",
-                        ref: q,
+                        ref: W,
                         tabindex: "1"
                       }), [
-                        (i(!0), u(U, null, W(l(ee), ({ data: o, index: V }) => (i(), u("li", {
-                          key: V,
-                          "aria-selected": S(l(r)) === o,
-                          "aria-disabled": !!t.disabled,
-                          onClick: () => $(o)
+                        (a(!0), u(H, null, N(o(X), ({ data: t, index: D }) => (a(), u("li", {
+                          key: D,
+                          "aria-selected": S(r.value) === t,
+                          "aria-disabled": !!e.disabled,
+                          onClick: () => E(t)
                         }, [
-                          o.groupOption ? (i(), u("div", {
+                          t.groupOption ? (a(), u("div", {
                             key: 0,
                             class: "option-collapse",
-                            onClick: (fl) => Be(o)
+                            onClick: (fl) => De(t)
                           }, [
-                            v(e.$slots, "option-group", { option: o }, void 0, !0)
-                          ], 8, el)) : f("", !0),
-                          !o.groupOption && !Ve(o) ? v(e.$slots, "option", {
+                            v(e.$slots, "option-group", { option: t }, void 0, !0)
+                          ], 8, Ye)) : c("", !0),
+                          !t.groupOption && !_e(t) ? v(e.$slots, "option", {
                             key: 1,
                             showCheckbox: !0,
-                            option: o,
-                            selected: S(l(r)) === o,
-                            active: S(l(F)) === V
-                          }, void 0, !0) : f("", !0)
-                        ], 8, _e))), 128))
+                            option: t,
+                            selected: S(r.value) === t,
+                            active: S(o(P)) === D
+                          }, void 0, !0) : c("", !0)
+                        ], 8, Xe))), 128))
                       ], 16)),
-                      t.loading ? (i(), u("ul", ll, [
-                        (i(), u(U, null, W(L, (o) => s("li", {
-                          key: o,
+                      e.loading ? (a(), u("ul", Ze, [
+                        (a(), u(H, null, N(te, (t) => s("li", {
+                          key: t,
                           class: "include-exclude-list-item-skeleton"
                         }, [
-                          s("div", tl, [
-                            g(l(b), {
+                          s("div", el, [
+                            p(o(y), {
                               class: "dot-skeleton",
                               round: ""
                             }),
-                            g(l(b), { round: "" })
+                            p(o(y), { round: "" })
                           ])
                         ])), 64))
-                      ])) : f("", !0)
+                      ])) : c("", !0)
                     ], 16)
                   ]),
-                  s("div", nl, [
+                  s("div", ll, [
                     s("div", {
-                      class: N(["include-exclude-selected-header", {
-                        "include-exclude-list-selected-header-loading": t.loading,
-                        "include-exclude-list-header-loaded": !t.loading
+                      class: z(["include-exclude-selected-header", {
+                        "include-exclude-list-selected-header-loading": e.loading,
+                        "include-exclude-list-header-loaded": !e.loading
                       }])
                     }, [
-                      t.loading ? (i(), u("div", ol, [
-                        g(l(b), { round: "" })
-                      ])) : f("", !0),
-                      s("div", al, [
-                        t.loading ? f("", !0) : (i(), O(l(te), {
+                      e.loading ? (a(), u("div", tl, [
+                        p(o(y), { round: "" })
+                      ])) : c("", !0),
+                      s("div", ol, [
+                        e.loading ? c("", !0) : (a(), O(o(Z), {
                           key: 0,
                           class: "include-exclude-selected-header-left-selected",
                           size: "sm"
                         }, {
-                          default: h(() => [
-                            C(le(l(r)?.length) + " Selected", 1)
+                          default: g(() => [
+                            C(Y(r.value?.length) + " Selected", 1)
                           ]),
                           _: 1
                         }))
                       ]),
-                      s("div", sl, [
+                      s("div", nl, [
                         v(e.$slots, "selected-header-right", {}, () => [
-                          l(r)?.length && !t.loading && t.showClearAll ? (i(), O(l(G), {
+                          r.value?.length && !e.loading && e.showClearAll ? (a(), O(o(U), {
                             key: 0,
                             variant: "link",
                             theme: "third",
                             size: "md",
                             strong: !1,
-                            onClick: ge
+                            onClick: ce
                           }, {
-                            default: h(() => [
+                            default: g(() => l[2] || (l[2] = [
                               C("Clear all")
-                            ]),
+                            ])),
                             _: 1
-                          })) : f("", !0)
+                          })) : c("", !0)
                         ], !0)
                       ])
                     ], 2),
                     s("div", w({
                       class: ["include-exclude-selected-list", {
-                        "include-exclude-list-draggable": t.isDraggable
+                        "include-exclude-list-draggable": e.isDraggable
                       }]
-                    }, l(we)), [
-                      l(r)?.length && !t.loading && t.isDraggable ? (i(), u("ul", w({ key: 0 }, l(Se), {
+                    }, o(Ce)), [
+                      r.value?.length && !e.loading && e.isDraggable ? (a(), u("ul", w({ key: 0 }, o(we), {
                         ref: "SelectedlistRef",
                         tabindex: "2"
                       }), [
-                        g(l(Le), w({
-                          modelValue: l(D),
-                          "onUpdate:modelValue": n[1] || (n[1] = (o) => Ee(D) ? D.value = o : null)
-                        }, t.draggableArgs, { onChange: Ie }), {
-                          item: h(({ element: o }) => [
-                            s("div", il, [
+                        p(o(We), w({
+                          modelValue: o(_),
+                          "onUpdate:modelValue": l[1] || (l[1] = (t) => Ae(_) ? _.value = t : null)
+                        }, e.draggableArgs, { onChange: Ve }), {
+                          item: g(({ element: t }) => [
+                            s("div", sl, [
                               v(e.$slots, "selected_option_draggable", {
-                                option: o.data,
-                                selected: S(l(r)) === o.data,
-                                active: S(l(F)) === o.data.draggableItemKey
+                                option: t.data,
+                                selected: S(r.value) === t.data,
+                                active: S(o(P)) === t.data.draggableItemKey
                               }, void 0, !0)
                             ])
                           ]),
                           _: 3
                         }, 16, ["modelValue"])
-                      ], 16)) : f("", !0),
-                      t.loading ? (i(), u("ul", dl, [
-                        (i(), u(U, null, W(L, (o) => s("li", {
-                          key: o,
+                      ], 16)) : c("", !0),
+                      e.loading ? (a(), u("ul", al, [
+                        (a(), u(H, null, N(te, (t) => s("li", {
+                          key: t,
                           class: "include-exclude-list-item-skeleton"
                         }, [
-                          s("div", rl, [
-                            g(l(b), { round: "" })
+                          s("div", il, [
+                            p(o(y), { round: "" })
                           ])
                         ])), 64))
-                      ])) : f("", !0)
+                      ])) : c("", !0)
                     ], 16)
                   ])
                 ]))
@@ -420,36 +421,36 @@ const qe = { class: "include-exclude-header" }, Me = { class: "include-exclude-h
             })
           ]),
           v(e.$slots, "footer", {
-            handleApply: j,
-            handleCancel: P
+            handleApply: K,
+            handleCancel: A
           }, () => [
-            s("div", cl, [
-              s("div", ul, [
-                g(l(G), {
+            s("div", rl, [
+              s("div", dl, [
+                p(o(U), {
                   ref_key: "cancel",
-                  ref: re,
+                  ref: ie,
                   size: "sm",
                   variant: "border",
                   theme: "third",
                   text: "Cancel",
-                  onClick: P
+                  onClick: A
                 }, {
-                  default: h(() => [
+                  default: g(() => l[3] || (l[3] = [
                     C("Cancel")
-                  ]),
+                  ])),
                   _: 1
                 }, 512),
-                g(l(G), {
+                p(o(U), {
                   ref_key: "apply",
-                  ref: de,
+                  ref: ae,
                   size: "sm",
                   theme: "primary",
                   text: "Apply",
-                  onClick: j
+                  onClick: K
                 }, {
-                  default: h(() => [
+                  default: g(() => l[4] || (l[4] = [
                     C("Apply")
-                  ]),
+                  ])),
                   _: 1
                 }, 512)
               ])
@@ -462,5 +463,5 @@ const qe = { class: "include-exclude-header" }, Me = { class: "include-exclude-h
   }
 });
 export {
-  Vl as default
+  Il as default
 };