@ironsource/shared-ui 2.1.7-test.1 → 2.1.7-test.3

package/components/sortableList/SortableList.vue2.js

@@ -0,0 +1,120 @@
+ import "../../SortableList.vue_vue_type_style_index_0_scoped_21842d59_lang.css"; import { defineComponent as $, computed as p, ref as F, openBlock as c, createElementBlock as m, mergeProps as v, unref as t, createBlock as y, isRef as E, createCommentVNode as P, createVNode as w, withCtx as C, Fragment as x, renderList as B, renderSlot as D, createElementVNode as G } from "vue";
+import { VueDraggable as U } from "vue-draggable-plus";
+import R from "./SortableItem.vue.js";
+import M from "../search/v4/SearchV4.vue.js";
+import { useVModel as K } from "@vueuse/core";
+import { matchString as q } from "../../utils/search.js";
+import { useTestIdAttrs as Q } from "../../utils/testIds.js";
+import { SortableListTestIdModifiers as f } from "../../testids/index.js";
+import { DRAG_CURSOR_CSS_CLASS as H } from "./consts.js";
+const le = /* @__PURE__ */ $({
+  __name: "SortableList",
+  props: {
+    items: { default: () => [] },
+    displayValue: { type: Function, default: (d) => d.displayText || d.toString() },
+    openId: { default: null },
+    selectedId: { default: null },
+    selectedChildId: { default: null },
+    search: { default: null },
+    showSearch: { type: Boolean, default: !1 },
+    searchPlaceholder: { default: "Search" },
+    searchHandler: { type: Function, default: null },
+    testId: { default: "" }
+  },
+  emits: ["update:items", "update:openId", "update:selectedId", "update:selectedChildId", "update:search", "clearSearch"],
+  setup(d, { emit: s }) {
+    const r = d, o = K(r, "search", s), S = p(() => !!o.value?.trim()), L = p(() => S.value ? r.items.filter((l) => {
+      const a = l.children || [], e = o.value;
+      return r.searchHandler ? r.searchHandler(l, e) : q(l.displayText, e) || // match parent item
+      a.some((n) => q(n.displayText, e));
+    }) : r.items), u = p({
+      get() {
+        return L.value.filter((l) => !l.isLocked);
+      },
+      set(l) {
+        s("update:items", [...l, ...V.value]);
+      }
+    }), V = p(
+      () => L.value.filter((l) => l.isLocked)
+    ), I = F(!1), N = (l) => {
+      I.value = !0, setTimeout(() => l.target.classList.add(H), 50);
+    }, O = (l) => {
+      I.value = !1, l.target.classList.remove(H);
+    }, T = (l) => (S.value || l.id === r.openId) && !I.value, b = (l, a) => {
+      a ? s("update:openId", l.id) : s("update:openId", null);
+    }, i = (l) => l.id === r.selectedId, k = (l) => {
+      s("update:selectedId", l.id), s("update:selectedChildId", null);
+    }, A = (l, a) => {
+      s("update:selectedChildId", l.id), s("update:selectedId", a.id), s("update:openId", a.id);
+    }, g = Q(r.testId, f);
+    return (l, a) => (c(), m("div", v({ class: "sortable-list-container" }, t(g)[t(f).CONTAINER]), [
+      d.showSearch ? (c(), y(t(M), {
+        key: 0,
+        modelValue: t(o),
+        "onUpdate:modelValue": a[0] || (a[0] = (e) => E(o) ? o.value = e : null),
+        class: "list-search",
+        placeholder: d.searchPlaceholder,
+        "test-id": d.testId,
+        onOnClear: a[1] || (a[1] = (e) => s("clearSearch"))
+      }, null, 8, ["modelValue", "placeholder", "test-id"])) : P("", !0),
+      w(t(U), v({
+        modelValue: t(u),
+        "onUpdate:modelValue": a[2] || (a[2] = (e) => E(u) ? u.value = e : null),
+        class: "sortable-list",
+        filter: ".expand-icon",
+        animation: 150,
+        handle: ".draggable-handle",
+        disabled: t(S)
+      }, t(g)[t(f).DRAGGABLE_LIST], {
+        onStart: N,
+        onEnd: O
+      }), {
+        default: C(() => [
+          (c(!0), m(x, null, B(t(u), (e, n) => (c(), y(R, {
+            key: e.id,
+            item: e,
+            index: n,
+            "is-open": T(e),
+            "is-selected": i(e),
+            "selected-child-id": i(e) ? d.selectedChildId : null,
+            "display-value": d.displayValue,
+            "search-query": t(o),
+            "search-handler": d.searchHandler,
+            onToggle: (h) => b(e, h),
+            onSelect: (h) => k(e),
+            onSelectChild: (h) => A(h, e)
+          }, {
+            menu: C(() => [
+              D(l.$slots, "menu", { item: e }, void 0, !0)
+            ]),
+            _: 2
+          }, 1032, ["item", "index", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "search-handler", "onToggle", "onSelect", "onSelectChild"]))), 128))
+        ]),
+        _: 3
+      }, 16, ["modelValue", "disabled"]),
+      G("div", v({ class: "locked-list" }, t(g)[t(f).LOCKED_LIST]), [
+        (c(!0), m(x, null, B(t(V), (e) => (c(), y(R, {
+          key: e.id,
+          item: e,
+          "is-open": T(e),
+          "is-selected": i(e),
+          "selected-child-id": i(e) ? d.selectedChildId : null,
+          "display-value": d.displayValue,
+          "search-query": t(o),
+          "on-search": d.searchHandler,
+          onToggle: (n) => b(e, n),
+          onSelect: (n) => k(e),
+          onSelectChild: (n) => A(n, e)
+        }, {
+          menu: C(() => [
+            D(l.$slots, "menu", { item: e }, void 0, !0)
+          ]),
+          _: 2
+        }, 1032, ["item", "is-open", "is-selected", "selected-child-id", "display-value", "search-query", "on-search", "onToggle", "onSelect", "onSelectChild"]))), 128))
+      ], 16)
+    ], 16));
+  }
+});
+export {
+  le as default
+};

package/components/sortableList/composables/useHoverEffect.js

@@ -0,0 +1,19 @@
+import { computed as t } from "vue";
+const d = (e, r) => {
+  const s = t(() => e.value ? Array.from(e.value.parentElement?.children || []) : []);
+  return {
+    handleMouseover: (n) => {
+      s.value.forEach(
+        (o) => o.classList.remove(r)
+      ), s.value.some(
+        (o) => o.classList.contains("sortable-chosen")
+      ) || n.currentTarget.classList.add(r);
+    },
+    handleMouseout: () => {
+      e.value.classList.remove(r);
+    }
+  };
+};
+export {
+  d as useHoverEffect
+};

package/components/sortableList/consts.js

@@ -0,0 +1,4 @@
+const r = "force-grabbing-cursor";
+export {
+  r as DRAG_CURSOR_CSS_CLASS
+};

package/components/sortableList/index.js

@@ -0,0 +1,6 @@
+import t from "./SortableList.vue.js";
+const r = () => [t];
+export {
+  t as SortableList,
+  r as SortableListTypes
+};

package/components/textArea/v4/TextAreaV4.vue.d.ts

@@ -1,11 +1,12 @@
 import { TooltipPositions } from '@/components/tooltip/common/Tooltip.types';
-import { FeedbackVariant } from '@/components/shared/commonTypes';
+import { FeedbackVariant, MaxLengthCounterPositions } from '@/components/shared/commonTypes';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string;
     placeholder?: string;
     disabled?: boolean;
     label?: string;
     maxLength?: number;
+    maxLengthCounterPosition?: MaxLengthCounterPositions;
     mandatory?: boolean;
     hoverHelpText?: string;
     hoverHelpTextPlacement?: TooltipPositions;
@@ -21,6 +22,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled: boolean;
     label: string;
     maxLength: any;
+    maxLengthCounterPosition: string;
     mandatory: boolean;
     hoverHelpText: string;
     hoverHelpTextPlacement: string;
@@ -38,6 +40,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled?: boolean;
     label?: string;
     maxLength?: number;
+    maxLengthCounterPosition?: MaxLengthCounterPositions;
     mandatory?: boolean;
     hoverHelpText?: string;
     hoverHelpTextPlacement?: TooltipPositions;
@@ -53,6 +56,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled: boolean;
     label: string;
     maxLength: any;
+    maxLengthCounterPosition: string;
     mandatory: boolean;
     hoverHelpText: string;
     hoverHelpTextPlacement: string;
@@ -76,6 +80,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     maxLength: number;
     modelValue: string;
     placeholder: string;
+    maxLengthCounterPosition: MaxLengthCounterPositions;
     feedbackText: string;
     feedbackVariant: FeedbackVariant;
     showFeedbackTextIcon: boolean;

package/components/textArea/v4/TextAreaV4.vue.js

@@ -1,7 +1,7 @@
 import e from "./TextAreaV4.vue2.js";
 /* empty css                 */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_f3b2c01d_lang.css"; //*');
-const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-f3b2c01d"]]);
+// import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_4114ef89_lang.css"; //*');
+const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-4114ef89"]]);
 export {
-  c as default
+  p as default
 };

package/components/textArea/v4/TextAreaV4.vue2.js

@@ -1,13 +1,13 @@
- import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_f3b2c01d_lang.css"; import { defineComponent as s, computed as b, openBlock as t, createElementBlock as i, mergeProps as c, unref as a, createBlock as n, createCommentVNode as l, createElementVNode as g } from "vue";
+ import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_4114ef89_lang.css"; import { defineComponent as f, computed as b, openBlock as t, createElementBlock as r, mergeProps as c, unref as a, createBlock as d, createCommentVNode as l, createElementVNode as g } from "vue";
 import v from "../../shared/FieldLabel.vue.js";
 import k from "../../shared/FieldMaxLength.vue.js";
 import T from "../../shared/FieldHelpText.vue.js";
-import { TextAreaTestIdModifiers as u } from "../../../testids/index.js";
+import { TextAreaTestIdModifiers as i } from "../../../testids/index.js";
 import { useTestIdAttrs as V } from "../../../utils/testIds.js";
 const y = ["value", "placeholder", "disabled", "maxlength"], I = {
   key: 1,
   class: "footer"
-}, w = /* @__PURE__ */ s({
+}, w = /* @__PURE__ */ f({
   __name: "TextAreaV4",
   props: {
     modelValue: { default: "" },
@@ -15,6 +15,7 @@ const y = ["value", "placeholder", "disabled", "maxlength"], I = {
     disabled: { type: Boolean, default: !1 },
     label: { default: "" },
     maxLength: { default: null },
+    maxLengthCounterPosition: { default: "inside" },
     mandatory: { type: Boolean, default: !1 },
     hoverHelpText: { default: "" },
     hoverHelpTextPlacement: { default: "top" },
@@ -27,11 +28,15 @@ const y = ["value", "placeholder", "disabled", "maxlength"], I = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: h }) {
-    const o = e, m = (d) => {
-      h("update:modelValue", d.target.value);
-    }, x = b(() => (o.modelValue || "").length), r = V(o.testId, u);
-    return (d, f) => (t(), i("div", c({ class: "textarea-field" }, a(r)[a(u).WRAPPER]), [
-      e.label ? (t(), n(v, {
+    const u = e, m = (n) => {
+      h("update:modelValue", n.target.value);
+    }, x = b(() => (u.modelValue || "").length), o = V(u.testId, i);
+    return (n, s) => (t(), r("div", c({
+      class: ["textarea-field", {
+        "textarea-field--counter-inside": e.maxLength && e.maxLengthCounterPosition === "inside"
+      }]
+    }, a(o)[a(i).WRAPPER]), [
+      e.label ? (t(), d(v, {
         key: 0,
         class: "textarea-label",
         label: e.label,
@@ -51,17 +56,18 @@ const y = ["value", "placeholder", "disabled", "maxlength"], I = {
         placeholder: e.placeholder,
         disabled: e.disabled,
         maxlength: e.maxLength
-      }, a(r)[a(u).FIELD], { onInput: m }), null, 16, y),
-      e.feedbackText || e.maxLength ? (t(), i("div", I, [
-        e.feedbackText ? (t(), n(T, {
+      }, a(o)[a(i).FIELD], { onInput: m }), null, 16, y),
+      e.feedbackText || e.maxLength ? (t(), r("div", I, [
+        e.feedbackText ? (t(), d(T, {
           key: 0,
           text: e.feedbackText,
           variant: e.feedbackVariant,
           "show-icon": e.showFeedbackTextIcon,
           "test-id": e.testId
         }, null, 8, ["text", "variant", "show-icon", "test-id"])) : l("", !0),
-        e.maxLength ? (t(), n(k, {
+        e.maxLength ? (t(), d(k, {
           key: 1,
+          class: "max-length-counter",
           "current-length": a(x),
           "max-length": e.maxLength
         }, null, 8, ["current-length", "max-length"])) : l("", !0)

package/components/textArea/v4/index.d.ts

@@ -43,6 +43,10 @@ declare const TextAreaTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    maxLengthCounterPosition: {
+        type: import("vue").PropType<"inside" | "outside">;
+        default: string;
+    };
     feedbackText: {
         type: import("vue").PropType<string>;
         default: string;
@@ -102,6 +106,10 @@ declare const TextAreaTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    maxLengthCounterPosition: {
+        type: import("vue").PropType<"inside" | "outside">;
+        default: string;
+    };
     feedbackText: {
         type: import("vue").PropType<string>;
         default: string;
@@ -128,6 +136,7 @@ declare const TextAreaTypes: () => import("vue").DefineComponent<{
     maxLength: number;
     modelValue: string;
     placeholder: string;
+    maxLengthCounterPosition: "inside" | "outside";
     feedbackText: string;
     feedbackVariant: "success" | "warning" | "error";
     showFeedbackTextIcon: boolean;