@ironsource/shared-ui 2.0.0-rc.5 → 2.0.0-rc.7

package/components/button/v4/index.js

@@ -1,6 +1,8 @@
-import t from "./ButtonV4.vue.js";
-const n = () => [t];
+import o from "./ButtonV4.vue.js";
+import t from "./IconButtonV4.vue.js";
+const m = () => [o, t];
 export {
-  t as Button,
-  n as ButtonTypes
+  o as Button,
+  m as ButtonTypes,
+  t as IconButton
 };

package/components/checkbox/common/Checkbox.common.d.ts

@@ -0,0 +1,11 @@
+export declare const checkboxCommon: (props: any, emit: any) => {
+    id: string;
+    checkbox: any;
+    isFocusVisible: import("vue").Ref<boolean>;
+    handleFocus: (event: any) => void;
+    handleBlur: (event: any) => void;
+    indeterminate: import("vue").ComputedRef<any>;
+    checked: import("vue").ComputedRef<any>;
+    unchecked: import("vue").ComputedRef<boolean>;
+    updateValue: (e: Event) => void;
+};

package/components/checkbox/common/Checkbox.common.js

@@ -0,0 +1,32 @@
+import { ref as i, computed as t } from "vue";
+import { useId as b } from "../../../composables/useId.js";
+import V from "../../../composables/useIsFocusVisible.js";
+const I = (c, n) => {
+  const l = i(null), a = `checkbox-${b().value}`, {
+    isFocusVisibleRef: o,
+    onFocus: d,
+    onBlur: r
+  } = V(), s = i(!1), h = (e) => {
+    d(e), o.value === !0 && (s.value = !0);
+  }, m = (e) => {
+    r(e), o.value === !1 && (s.value = !1);
+  }, f = t(
+    () => !c.isChecked && c.isIndeterminate
+  ), u = t(() => c.isChecked), k = t(() => !u.value && !c.isIndeterminate);
+  return {
+    id: a,
+    checkbox: l,
+    isFocusVisible: s,
+    handleFocus: h,
+    handleBlur: m,
+    indeterminate: f,
+    checked: u,
+    unchecked: k,
+    updateValue: (e) => {
+      n("update:isChecked", e.target.checked);
+    }
+  };
+};
+export {
+  I as checkboxCommon
+};

package/components/checkbox/v3/Checkbox.vue.js

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

package/components/checkbox/v3/Checkbox.vue2.js

@@ -0,0 +1,99 @@
+ import "../../../Checkbox.vue_vue_type_style_index_0_scoped_58dedb90_lang.css"; import { defineComponent as z, openBlock as i, createElementBlock as B, unref as e, normalizeClass as E, createElementVNode as r, mergeProps as V, createVNode as S, withCtx as p, createBlock as s, createCommentVNode as c, renderSlot as F, createTextVNode as N, toDisplayString as g, pushScopeId as D, popScopeId as L } from "vue";
+import "../../typography/Heading.vue.js";
+import P from "../../typography/Text.vue.js";
+import T from "../../icon/v3/Icon.vue.js";
+import v from "./icons/unchecked.vue.js";
+import w from "./icons/checked.vue.js";
+import A from "./icons/indeterminate.vue.js";
+import { CheckboxTestIdModifiers as a } from "../../../testids/index.js";
+import { checkboxCommon as R } from "../common/Checkbox.common.js";
+const H = (t) => (D("data-v-58dedb90"), t = t(), L(), t), K = ["for", "data-testid"], M = { class: "checkboxes" }, U = ["id", "disabled", "checked", ".indeterminate", "data-testid"], W = /* @__PURE__ */ H(() => /* @__PURE__ */ r("span", { class: "checkbox__inner" }, null, -1)), _ = /* @__PURE__ */ z({
+  __name: "Checkbox",
+  props: {
+    isChecked: { type: Boolean },
+    isIndeterminate: { type: Boolean },
+    disabled: { type: Boolean },
+    size: { default: "md" },
+    label: { default: "" },
+    testId: { default: "" }
+  },
+  emits: ["update:isChecked", "click"],
+  setup(t, { emit: u }) {
+    const x = t;
+    function I() {
+      console.log("side-effect");
+    }
+    I();
+    const {
+      id: m,
+      checkbox: C,
+      isFocusVisible: $,
+      handleFocus: k,
+      handleBlur: f,
+      indeterminate: n,
+      checked: b,
+      unchecked: y,
+      updateValue: h
+    } = R(x, u);
+    return (l, d) => (i(), B("label", {
+      for: e(m),
+      class: E([[t.size, { "focus-visible": e($), disabled: t.disabled }], "checkbox"]),
+      "data-testid": `${t.testId}-${e(a).WRAPPER}`
+    }, [
+      r("span", M, [
+        r("input", V(l.$attrs, {
+          id: e(m),
+          ref: e(C),
+          disabled: t.disabled,
+          checked: e(b),
+          class: "input",
+          ".indeterminate": e(n),
+          type: "checkbox",
+          "data-testid": `${t.testId}-${e(a).FIELD}`,
+          onBlur: d[0] || (d[0] = //@ts-ignore
+          (...o) => e(f) && e(f)(...o)),
+          onFocus: d[1] || (d[1] = //@ts-ignore
+          (...o) => e(k) && e(k)(...o)),
+          onClick: d[2] || (d[2] = (o) => u("click", o)),
+          onInput: d[3] || (d[3] = //@ts-ignore
+          (...o) => e(h) && e(h)(...o))
+        }), null, 16, U),
+        W,
+        S(e(T), { "font-size": t.size }, {
+          default: p(() => [
+            e(b) ? (i(), s(w, {
+              key: 0,
+              class: "checkbox-icon checked",
+              "data-testid": `${t.testId}-${e(a).CHECKED}`
+            }, null, 8, ["data-testid"])) : c("", !0),
+            e(n) ? (i(), s(A, {
+              key: 1,
+              class: "checkbox-icon indeterminate"
+            })) : c("", !0),
+            e(y) && !e(n) ? (i(), s(v, {
+              key: 2,
+              class: "checkbox-icon unchecked"
+            })) : c("", !0)
+          ]),
+          _: 1
+        }, 8, ["font-size"])
+      ]),
+      t.label || l.$slots.default ? (i(), s(e(P), {
+        key: 0,
+        size: t.size,
+        class: "checkbox-text",
+        "data-testid": `${t.testId}-${e(a).LABEL}`
+      }, {
+        default: p(() => [
+          F(l.$slots, "default", {}, () => [
+            N(g(t.label), 1)
+          ], !0)
+        ]),
+        _: 3
+      }, 8, ["size", "data-testid"])) : c("", !0)
+    ], 10, K));
+  }
+});
+export {
+  _ as default
+};

package/components/checkbox/{icons → v3/icons}/checked.vue.js

@@ -1,5 +1,5 @@
 import { openBlock as t, createElementBlock as o, createElementVNode as e } from "vue";
-import n from "../../../_virtual/_plugin-vue_export-helper.js";
+import n from "../../../../_virtual/_plugin-vue_export-helper.js";
 const l = {}, r = {
   viewBox: "0 0 16 16",
   fill: "none",

package/components/checkbox/{icons → v3/icons}/indeterminate.vue.js

@@ -1,5 +1,5 @@
 import { openBlock as t, createElementBlock as o, createElementVNode as e } from "vue";
-import n from "../../../_virtual/_plugin-vue_export-helper.js";
+import n from "../../../../_virtual/_plugin-vue_export-helper.js";
 const r = {}, c = {
   viewBox: "0 0 16 16",
   fill: "none",

package/components/checkbox/{icons → v3/icons}/unchecked.vue.js

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as t, createElementVNode as o } from "vue";
-import r from "../../../_virtual/_plugin-vue_export-helper.js";
+import r from "../../../../_virtual/_plugin-vue_export-helper.js";
 const c = {}, n = {
   viewBox: "0 0 16 16",
   fill: "none",

package/components/checkbox/v4/CheckboxV4.vue.d.ts

@@ -0,0 +1,53 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    isChecked: boolean;
+    isIndeterminate?: boolean;
+    disabled?: boolean;
+    label?: string;
+    testId?: string;
+}>, {
+    label: string;
+    testId: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:isChecked": (value: boolean) => void;
+    click: (event: MouseEvent) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    isChecked: boolean;
+    isIndeterminate?: boolean;
+    disabled?: boolean;
+    label?: string;
+    testId?: string;
+}>, {
+    label: string;
+    testId: string;
+}>>> & {
+    onClick?: (event: MouseEvent) => any;
+    "onUpdate:isChecked"?: (value: boolean) => any;
+}, {
+    label: string;
+    testId: string;
+}>, {
+    default?(_: {}): 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/checkbox/v4/CheckboxV4.vue.js

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

package/components/checkbox/v4/CheckboxV4.vue2.js

@@ -0,0 +1,107 @@
+ import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_ee3e6d82_lang.css"; import { defineComponent as D, openBlock as o, createElementBlock as p, mergeProps as r, unref as e, createElementVNode as m, Fragment as x, createBlock as n, createCommentVNode as s, withCtx as V, renderSlot as F, createTextVNode as g, toDisplayString as A, pushScopeId as T, popScopeId as v } from "vue";
+import L from "../../typography/v4/Typography.vue.js";
+import N from "./icons/UncheckedState.vue.js";
+import P from "./icons/CheckedState.vue.js";
+import $ from "./icons/IndeterminateState.vue.js";
+import w from "./icons/UncheckedDisabledState.vue.js";
+import H from "./icons/CheckedDisabledState.vue.js";
+import K from "./icons/IndeterminateDisabledState.vue.js";
+import { CheckboxTestIdModifiers as i } from "../../../testids/index.js";
+import { checkboxCommon as R } from "../common/Checkbox.common.js";
+import { useTestIdAttrs as U } from "../../../utils/testIds.js";
+const M = (t) => (T("data-v-ee3e6d82"), t = t(), v(), t), W = ["for"], j = { class: "checkboxes" }, q = ["id", "disabled", "checked", ".indeterminate"], z = /* @__PURE__ */ M(() => /* @__PURE__ */ m("span", { class: "checkbox__inner" }, null, -1)), G = { class: "states" }, de = /* @__PURE__ */ D({
+  __name: "CheckboxV4",
+  props: {
+    isChecked: { type: Boolean },
+    isIndeterminate: { type: Boolean },
+    disabled: { type: Boolean },
+    label: { default: "" },
+    testId: { default: "" }
+  },
+  emits: ["update:isChecked", "click"],
+  setup(t, { emit: b }) {
+    const h = t, {
+      id: f,
+      checkbox: B,
+      isFocusVisible: E,
+      handleFocus: y,
+      handleBlur: C,
+      indeterminate: a,
+      checked: u,
+      unchecked: I,
+      updateValue: S
+    } = R(h, b), l = U(h.testId, i);
+    return (k, d) => (o(), p("label", r({
+      for: e(f),
+      class: [{
+        "focus-visible": e(E),
+        disabled: t.disabled
+      }, "checkbox"]
+    }, e(l)[e(i).WRAPPER]), [
+      m("span", j, [
+        m("input", r({ ...k.$attrs, ...e(l)[e(i).FIELD] }, {
+          id: e(f),
+          ref: e(B),
+          disabled: t.disabled,
+          checked: e(u),
+          class: "input",
+          ".indeterminate": e(a),
+          type: "checkbox",
+          onBlur: d[0] || (d[0] = //@ts-ignore
+          (...c) => e(C) && e(C)(...c)),
+          onFocus: d[1] || (d[1] = //@ts-ignore
+          (...c) => e(y) && e(y)(...c)),
+          onClick: d[2] || (d[2] = (c) => b("click", c)),
+          onInput: d[3] || (d[3] = //@ts-ignore
+          (...c) => e(S) && e(S)(...c))
+        }), null, 16, q),
+        z,
+        m("span", G, [
+          t.disabled ? s("", !0) : (o(), p(x, { key: 0 }, [
+            e(u) ? (o(), n(P, r({
+              key: 0,
+              class: "icon checked"
+            }, e(l)[e(i).CHECKED]), null, 16)) : s("", !0),
+            e(a) ? (o(), n($, {
+              key: 1,
+              class: "icon indeterminate"
+            })) : s("", !0),
+            e(I) && !e(a) ? (o(), n(N, {
+              key: 2,
+              class: "icon unchecked"
+            })) : s("", !0)
+          ], 64)),
+          t.disabled ? (o(), p(x, { key: 1 }, [
+            e(u) ? (o(), n(H, r({
+              key: 0,
+              class: "icon checked"
+            }, e(l)[e(i).CHECKED]), null, 16)) : s("", !0),
+            e(a) ? (o(), n(K, {
+              key: 1,
+              class: "icon indeterminate"
+            })) : s("", !0),
+            e(I) && !e(a) ? (o(), n(w, {
+              key: 2,
+              class: "icon unchecked"
+            })) : s("", !0)
+          ], 64)) : s("", !0)
+        ])
+      ]),
+      t.label || k.$slots.default ? (o(), n(e(L), r({
+        key: 0,
+        variant: "body2",
+        class: "checkbox-label"
+      }, e(l)[e(i).LABEL]), {
+        default: V(() => [
+          F(k.$slots, "default", {}, () => [
+            g(A(t.label), 1)
+          ], !0)
+        ]),
+        _: 3
+      }, 16)) : s("", !0)
+    ], 16, W));
+  }
+});
+export {
+  de as default
+};

package/components/checkbox/v4/icons/CheckedDisabledState.vue.js

@@ -0,0 +1,38 @@
+import { openBlock as e, createElementBlock as o, createElementVNode as t } from "vue";
+import r from "../../../../_virtual/_plugin-vue_export-helper.js";
+const n = {}, s = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 16",
+  fill: "none"
+}, c = /* @__PURE__ */ t("rect", {
+  width: "16",
+  height: "16",
+  rx: "4",
+  fill: "#CEE7FE"
+}, null, -1), i = /* @__PURE__ */ t("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "15",
+  height: "15",
+  rx: "3.5",
+  stroke: "#0091FF",
+  "stroke-opacity": "0.5"
+}, null, -1), l = /* @__PURE__ */ t("path", {
+  d: "M12.125 5.375L6.875 10.625L4.25 8",
+  stroke: "#0091FF",
+  "stroke-opacity": "0.5",
+  "stroke-width": "1.5",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, null, -1), _ = [
+  c,
+  i,
+  l
+];
+function d(h, a) {
+  return e(), o("svg", s, _);
+}
+const f = /* @__PURE__ */ r(n, [["render", d]]);
+export {
+  f as default
+};

package/components/checkbox/v4/icons/CheckedState.vue.js

@@ -0,0 +1,38 @@
+import { openBlock as e, createElementBlock as o, createElementVNode as t } from "vue";
+import n from "../../../../_virtual/_plugin-vue_export-helper.js";
+const r = {}, s = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 16",
+  fill: "none"
+}, c = /* @__PURE__ */ t("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "15",
+  height: "15",
+  rx: "3.5",
+  fill: "#0091FF"
+}, null, -1), i = /* @__PURE__ */ t("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "15",
+  height: "15",
+  rx: "3.5",
+  stroke: "#0880EA"
+}, null, -1), l = /* @__PURE__ */ t("path", {
+  d: "M12.125 5.375L6.875 10.625L4.25 8",
+  stroke: "white",
+  "stroke-width": "1.5",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, null, -1), _ = [
+  c,
+  i,
+  l
+];
+function h(d, a) {
+  return e(), o("svg", s, _);
+}
+const x = /* @__PURE__ */ n(r, [["render", h]]);
+export {
+  x as default
+};

package/components/checkbox/v4/icons/IndeterminateDisabledState.vue.js

@@ -0,0 +1,40 @@
+import { openBlock as e, createElementBlock as o, createElementVNode as t } from "vue";
+import n from "../../../../_virtual/_plugin-vue_export-helper.js";
+const r = {}, s = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 16",
+  fill: "none"
+}, c = /* @__PURE__ */ t("rect", {
+  width: "16",
+  height: "16",
+  rx: "4",
+  fill: "#CEE7FE"
+}, null, -1), i = /* @__PURE__ */ t("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "15",
+  height: "15",
+  rx: "3.5",
+  stroke: "#0091FF",
+  "stroke-opacity": "0.5"
+}, null, -1), l = /* @__PURE__ */ t("line", {
+  x1: "4.75",
+  y1: "8.25",
+  x2: "11.25",
+  y2: "8.25",
+  stroke: "#0091FF",
+  "stroke-opacity": "0.5",
+  "stroke-width": "1.5",
+  "stroke-linecap": "round"
+}, null, -1), _ = [
+  c,
+  i,
+  l
+];
+function d(h, a) {
+  return e(), o("svg", s, _);
+}
+const m = /* @__PURE__ */ n(r, [["render", d]]);
+export {
+  m as default
+};

package/components/checkbox/v4/icons/IndeterminateState.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/components/checkbox/v4/icons/IndeterminateState.vue.js

@@ -0,0 +1,40 @@
+import { openBlock as e, createElementBlock as o, createElementVNode as t } from "vue";
+import n from "../../../../_virtual/_plugin-vue_export-helper.js";
+const r = {}, s = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 16",
+  fill: "none"
+}, c = /* @__PURE__ */ t("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "15",
+  height: "15",
+  rx: "3.5",
+  fill: "#0091FF"
+}, null, -1), i = /* @__PURE__ */ t("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "15",
+  height: "15",
+  rx: "3.5",
+  stroke: "#0880EA"
+}, null, -1), l = /* @__PURE__ */ t("line", {
+  x1: "4.75",
+  y1: "8.25",
+  x2: "11.25",
+  y2: "8.25",
+  stroke: "white",
+  "stroke-width": "1.5",
+  "stroke-linecap": "round"
+}, null, -1), _ = [
+  c,
+  i,
+  l
+];
+function h(d, x) {
+  return e(), o("svg", s, _);
+}
+const m = /* @__PURE__ */ n(r, [["render", h]]);
+export {
+  m as default
+};

package/components/checkbox/v4/icons/UncheckedDisabledState.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/components/checkbox/v4/icons/UncheckedDisabledState.vue.js

@@ -0,0 +1,31 @@
+import { openBlock as t, createElementBlock as o, createElementVNode as e } from "vue";
+import c from "../../../../_virtual/_plugin-vue_export-helper.js";
+const n = {}, r = {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, s = /* @__PURE__ */ e("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "15",
+  height: "15",
+  rx: "3.5",
+  fill: "#EBEBEB"
+}, null, -1), i = /* @__PURE__ */ e("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "15",
+  height: "15",
+  rx: "3.5",
+  stroke: "#EBEBEB"
+}, null, -1), _ = [
+  s,
+  i
+];
+function l(h, d) {
+  return t(), o("svg", r, _);
+}
+const B = /* @__PURE__ */ c(n, [["render", l]]);
+export {
+  B as default
+};

package/components/checkbox/v4/icons/UncheckedState.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/components/checkbox/v4/icons/UncheckedState.vue.js

@@ -0,0 +1,31 @@
+import { openBlock as t, createElementBlock as o, createElementVNode as e } from "vue";
+import c from "../../../../_virtual/_plugin-vue_export-helper.js";
+const n = {}, r = {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, s = /* @__PURE__ */ e("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "15",
+  height: "15",
+  rx: "3.5",
+  fill: "#EBEBEB"
+}, null, -1), _ = /* @__PURE__ */ e("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "15",
+  height: "15",
+  rx: "3.5",
+  stroke: "#BBBBBB"
+}, null, -1), i = [
+  s,
+  _
+];
+function l(h, B) {
+  return t(), o("svg", r, i);
+}
+const x = /* @__PURE__ */ c(n, [["render", l]]);
+export {
+  x as default
+};