@ironsource/shared-ui 2.0.0-rc.1 → 2.0.0-rc.2

package/components/dialog/Dialog.vue.js

@@ -1,208 +0,0 @@
-import { defineComponent, useCssVars, ref, computed, watch, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, unref, normalizeClass, createElementVNode, normalizeStyle, withKeys, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementBlock } from 'vue';
-import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component';
-import { useTimeoutFn } from '@vueuse/core';
-import Text from '../typography/Text.vue.js';
-import { NOOP } from '@vue/shared';
-import { Reason } from './Reason.vue.js';
-import { DialogTestIdModifiers } from '../../testids/index.vue.js';
-/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-import Icon from '../icon/Icon.vue.js';
-/* empty css                                                                   */import IconButton from '../button/v3/IconButton.vue.js';
-/* empty css                                                                               */import 'floating-vue';
-/* empty css                                                      *//* empty css                                                                         *//* empty css                                                        */
-import "../../Dialog.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = ["data-testid"];
-const _hoisted_2 = ["data-testid"];
-const _hoisted_3 = ["data-testid"];
-const _hoisted_4 = ["data-testid"];
-const _hoisted_5 = { class: "placeholder" };
-const _hoisted_6 = {
-  key: 1,
-  class: "footer"
-};
-const _hoisted_7 = ["data-testid"];
-const _hoisted_8 = ["data-testid"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Dialog",
-  props: {
-    appendToBody: { type: Boolean, default: true },
-    content: { default: null },
-    width: { default: "" },
-    closeDelay: { default: 0 },
-    openDelay: { default: 0 },
-    escapeToClose: { type: Boolean, default: true },
-    showBackdrop: { type: Boolean, default: true },
-    headerBorder: { type: Boolean, default: true },
-    closeOnClickOutside: { type: Boolean, default: false },
-    modelValue: { type: Boolean },
-    beforeClose: { type: Function, default: null },
-    title: { default: "" },
-    showCloseButton: { type: Boolean, default: true },
-    themeClass: { default: "" },
-    testId: { default: "" }
-  },
-  emits: ["update:modelValue", "open", "close"],
-  setup(__props, { emit }) {
-    const props = __props;
-    useCssVars((_ctx) => ({
-      "49d1a718": __props.width
-    }));
-    const visible = ref(false);
-    let openTimer = void 0;
-    let closeTimer = void 0;
-    const doClose = (reason) => {
-      visible.value = false;
-      emit("close", reason);
-      emit("update:modelValue", false);
-    };
-    const doOpen = () => {
-      visible.value = true;
-      emit("open");
-    };
-    const close = (reason) => {
-      openTimer?.();
-      closeTimer?.();
-      if (props.closeDelay && props.closeDelay > 0) {
-        ({ stop: closeTimer } = useTimeoutFn(
-          () => doClose(reason),
-          props.closeDelay
-        ));
-        return;
-      }
-      doClose(reason);
-    };
-    const open = () => {
-      closeTimer?.();
-      openTimer?.();
-      if (props.openDelay && props.openDelay > 0) {
-        ({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay));
-        return;
-      }
-      doOpen();
-    };
-    const inlineStyle = computed(() => props.width ? { width: props.width } : {});
-    watch(
-      () => props.modelValue,
-      (val) => {
-        if (val) {
-          open();
-          return;
-        }
-        if (visible.value) {
-          close(Reason.Other);
-        }
-      }
-    );
-    function handleClose(reason) {
-      function hide(shouldCancel) {
-        if (shouldCancel) {
-          return;
-        }
-        emit("close", reason);
-        visible.value = false;
-      }
-      if (props.beforeClose) {
-        props.beforeClose(hide);
-        return;
-      }
-      close(reason);
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(Teleport, {
-        to: "body",
-        disabled: !__props.appendToBody
-      }, [
-        createVNode(Transition, null, {
-          default: withCtx(() => [
-            visible.value ? (openBlock(), createBlock(unref(UseFocusTrap), {
-              key: 0,
-              class: normalizeClass(["container", __props.themeClass])
-            }, {
-              default: withCtx(() => [
-                createElementVNode("div", {
-                  class: "modal",
-                  style: normalizeStyle(unref(inlineStyle)),
-                  "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).WRAPPER}`,
-                  onKeydown: _cache[1] || (_cache[1] = withKeys(($event) => __props.escapeToClose ? handleClose(unref(Reason).Escape) : unref(NOOP)(), ["esc"]))
-                }, [
-                  createElementVNode("header", {
-                    class: normalizeClass(["header", { "header--bordered": __props.headerBorder }]),
-                    "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).HEADER}`
-                  }, [
-                    __props.headerBorder ? renderSlot(_ctx.$slots, "header", { key: 0 }, () => [
-                      createVNode(Text, { strong: "" }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(__props.title), 1)
-                        ]),
-                        _: 1
-                      })
-                    ], true) : createCommentVNode("", true),
-                    __props.showCloseButton ? (openBlock(), createBlock(unref(IconButton), {
-                      key: 1,
-                      class: "button close-button",
-                      size: "md",
-                      theme: "secondary",
-                      variant: "colorized",
-                      "icon-name": "close",
-                      "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).ACTION_CLOSE}`,
-                      onClick: _cache[0] || (_cache[0] = ($event) => handleClose(unref(Reason).CloseButton))
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(Icon, {
-                          "font-size": "md",
-                          name: "close"
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["data-testid"])) : createCommentVNode("", true)
-                  ], 10, _hoisted_2),
-                  !__props.headerBorder ? (openBlock(), createElementBlock("div", {
-                    key: 0,
-                    class: "header--secondary",
-                    "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).HEADER_SECONDARY}`
-                  }, [
-                    renderSlot(_ctx.$slots, "header", {}, () => [
-                      createVNode(Text, { strong: "" }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(__props.title), 1)
-                        ]),
-                        _: 1
-                      })
-                    ], true)
-                  ], 8, _hoisted_3)) : createCommentVNode("", true),
-                  createElementVNode("div", {
-                    class: normalizeClass(["content", { "content--bordered": __props.headerBorder }]),
-                    "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).CONTENT}`
-                  }, [
-                    renderSlot(_ctx.$slots, "default", {}, () => [
-                      createElementVNode("div", _hoisted_5, toDisplayString(__props.content), 1)
-                    ], true)
-                  ], 10, _hoisted_4),
-                  _ctx.$slots["footer"] ? (openBlock(), createElementBlock("footer", _hoisted_6, [
-                    createElementVNode("div", {
-                      class: "action-buttons",
-                      "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).ACTION_BUTTONS_WRAPPER}`
-                    }, [
-                      renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-                    ], 8, _hoisted_7)
-                  ])) : createCommentVNode("", true)
-                ], 44, _hoisted_1),
-                __props.showBackdrop ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: "backdrop",
-                  "data-testid": `${__props.testId}-${unref(DialogTestIdModifiers).BACKDROP}`,
-                  onClick: _cache[2] || (_cache[2] = ($event) => __props.closeOnClickOutside ? handleClose(unref(Reason).Backdrop) : unref(NOOP)())
-                }, null, 8, _hoisted_8)) : createCommentVNode("", true)
-              ]),
-              _: 3
-            }, 8, ["class"])) : createCommentVNode("", true)
-          ]),
-          _: 3
-        })
-      ], 8, ["disabled"]);
-    };
-  }
-});
-var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-544e927f"]]);
-
-export { Dialog as default };

package/components/dropdown/common/Label.vue.js

@@ -1,41 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, unref, normalizeClass, createVNode, withCtx, renderSlot, createBlock, createTextVNode, createCommentVNode } from 'vue';
-/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
-import Text from '../../typography/Text.vue.js';
-import { useDropdownContext } from './DropdownContext.vue.js';
-import { useId } from '../../../composables/useId.vue.js';
-/* empty css                                                       */
-import "../../../Label.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Label",
-  setup(__props) {
-    const id = `is-system-label-${useId().value}`;
-    const api = useDropdownContext("label");
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", {
-        id,
-        ref: unref(api).labelRef,
-        class: normalizeClass(["label", { "label--disabled": unref(api).disabled }])
-      }, [
-        createVNode(unref(Text), null, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ]),
-          _: 3
-        }),
-        unref(api).mandatory ? (openBlock(), createBlock(unref(Text), {
-          key: 0,
-          size: "lg",
-          class: "mandatory"
-        }, {
-          default: withCtx(() => [
-            createTextVNode("*")
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-var Label = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5151f81e"]]);
-
-export { Label as default };

package/components/dropdown/common/Option.vue.js

@@ -1,133 +0,0 @@
-import { defineComponent, ref, onMounted, onUnmounted, computed, toRaw, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createBlock, createCommentVNode, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, withModifiers } from 'vue';
-/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
-import Text from '../../typography/Text.vue.js';
-import { useDropdownContext, Mode } from './DropdownContext.vue.js';
-import { useId } from '../../../composables/useId.vue.js';
-import Checkbox from '../../checkbox/Checkbox.vue.js';
-import Icon from '../../icon/Icon.vue.js';
-import { NOOP } from '@vue/shared';
-/* empty css                                                        */
-import "../../../Option.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = {
-  key: 1,
-  class: "image"
-};
-const _hoisted_2 = {
-  key: 2,
-  class: "start-icon"
-};
-const _hoisted_3 = { class: "text-container" };
-const _hoisted_4 = { key: 0 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Option",
-  props: {
-    option: { default: null },
-    subtitle: { default: "" },
-    disabled: { type: Boolean, default: false },
-    selectedProp: { type: Boolean },
-    isIndeterminate: { type: Boolean, default: false },
-    selectAllOption: { type: Boolean, default: false },
-    active: { type: Boolean, default: null }
-  },
-  setup(__props) {
-    const props = __props;
-    const api = useDropdownContext("Option");
-    const id = useId().value;
-    const el = ref(null);
-    const onClick = (event) => {
-      if (!props.selectAllOption) {
-        api.select(props.option);
-      } else {
-        event.stopPropagation();
-      }
-    };
-    onMounted(() => api.registerOption(id, props.disabled, !!props.subtitle));
-    onUnmounted(() => {
-      api.unRegisterOption(id);
-    });
-    const isMulti = computed(() => api.mode === Mode.Multi);
-    const active = computed(() => {
-      if (props.active !== null)
-        return props.active;
-      return api.activeIndex.value !== null ? api.activeOption.value === props.option : false;
-    });
-    const selected = computed(() => {
-      if (props.selectedProp) {
-        return true;
-      }
-      if (api.mode === Mode.Multi && Array.isArray(api.selectedOption.value)) {
-        return toRaw(api.selectedOption.value.includes(props.option));
-      }
-      return toRaw(api.selectedOption.value) === toRaw(props.option);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "el",
-        ref: el,
-        class: normalizeClass(["item-container", {
-          "item-container--disabled": __props.disabled,
-          "item-container--active": unref(active),
-          "item-container--selected": unref(selected),
-          "item-container--multi": unref(isMulti)
-        }])
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(["item", {
-            "item--multi": unref(isMulti),
-            "item--with-icon": _ctx.$slots["icon-start"] || _ctx.$slots.image
-          }])
-        }, [
-          unref(isMulti) ? (openBlock(), createBlock(unref(Checkbox), {
-            key: 0,
-            id: unref(id).toString(),
-            tabindex: "-1",
-            class: "checkbox",
-            size: "sm",
-            "is-checked": unref(selected),
-            "is-indeterminate": __props.isIndeterminate && !__props.option,
-            onClick: _cache[0] || (_cache[0] = ($event) => __props.disabled ? unref(NOOP)() : onClick($event))
-          }, null, 8, ["id", "is-checked", "is-indeterminate"])) : createCommentVNode("", true),
-          _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            renderSlot(_ctx.$slots, "image", {}, void 0, true)
-          ])) : createCommentVNode("", true),
-          _ctx.$slots["icon-start"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
-            renderSlot(_ctx.$slots, "icon-start", {}, void 0, true)
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3, [
-            createVNode(unref(Text), { size: "sm" }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "default", {}, void 0, true)
-              ]),
-              _: 3
-            }),
-            __props.subtitle ? (openBlock(), createBlock(unref(Text), {
-              key: 0,
-              class: "subtitle",
-              size: "xs"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(__props.subtitle), 1)
-              ]),
-              _: 1
-            })) : createCommentVNode("", true)
-          ])
-        ], 2),
-        unref(api).clearable && unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          createElementVNode("button", {
-            class: "clear-button",
-            onClick: _cache[1] || (_cache[1] = withModifiers(($event) => unref(api).clearSelection(), ["prevent", "stop"]))
-          }, [
-            createVNode(unref(Icon), {
-              name: "close",
-              width: "8",
-              height: 8
-            })
-          ])
-        ])) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-var Option = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c60d0d70"]]);
-
-export { Option as default };

package/components/dropdown/common/SearchInput.vue.js

@@ -1,120 +0,0 @@
-import { defineComponent, useSlots, ref, onMounted, computed, watch, renderSlot, unref, createElementVNode, normalizeClass, openBlock, createElementBlock, createCommentVNode, createVNode, withCtx, createBlock } from 'vue';
-import { useDropdownContext, Mode } from './DropdownContext.vue.js';
-import Icon from '../../icon/Icon.vue.js';
-/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
-/* empty css                                                                     *//* empty css                                                                      */import IconButton from '../../button/v3/IconButton.vue.js';
-/* empty css                                                                                  */import 'floating-vue';
-/* empty css                                                         *//* empty css                                                                            *//* empty css                                                             */
-import "../../../SearchInput.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _hoisted_1 = {
-  key: 0,
-  class: "prefix"
-};
-const _hoisted_2 = ["disabled", "placeholder"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "SearchInput",
-  setup(__props) {
-    const api = useDropdownContext("searchInput");
-    const slots = useSlots();
-    const inputEl = ref(null);
-    const isFocused = ref();
-    onMounted(() => {
-      api.registerInput(inputEl);
-    });
-    const onChange = (event) => {
-      api.toggle(true);
-      api.search(event.target.value);
-    };
-    const showPrefix = computed(() => {
-      return !api.open.value && slots.prefix && !Array.isArray(api.selectedOption.value) && api.selectedOption.value;
-    });
-    const placeholder = computed(() => {
-      if (api.mode === Mode.Multi && Array.isArray(api.selectedOption.value) && api.selectedOption.value.length) {
-        return `${api.selectedOption.value.length} selected`;
-      }
-      if (api.open.value && api.selectedValue.value) {
-        return api.selectedValue.value;
-      }
-      return api.placeholder;
-    });
-    const showClear = computed(() => {
-      return api.query.value !== "" || api.selectedValue.value;
-    });
-    watch(api.open, (value) => {
-      if (value) {
-        inputEl.value.focus();
-      }
-      if (api.mode === Mode.Multi) {
-        return;
-      }
-      if (!value || !inputEl.value) {
-        return;
-      }
-      inputEl.value.value = "";
-    });
-    const rightIcon = computed(() => {
-      return showClear.value ? "cancel" : "search-bold";
-    });
-    const onClearClick = () => {
-      api.clearSelection();
-      inputEl.value.focus();
-    };
-    return (_ctx, _cache) => {
-      return renderSlot(_ctx.$slots, "default", {
-        inputRef: inputEl.value,
-        disabled: unref(api).disabled,
-        change: onChange,
-        placeholder: unref(placeholder)
-      }, () => [
-        createElementVNode("div", {
-          class: normalizeClass(["container", {
-            "container--open": unref(api).open.value,
-            "container--disabled": unref(api).disabled,
-            [`container--${unref(api).size}`]: true,
-            focused: isFocused.value
-          }])
-        }, [
-          unref(showPrefix) ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
-          ])) : createCommentVNode("", true),
-          createElementVNode("input", {
-            ref_key: "inputEl",
-            ref: inputEl,
-            disabled: unref(api).disabled,
-            class: normalizeClass(["input", { "input--disabled": unref(api).disabled }]),
-            placeholder: unref(placeholder),
-            onFocusin: _cache[0] || (_cache[0] = ($event) => isFocused.value = true),
-            onFocusout: _cache[1] || (_cache[1] = ($event) => isFocused.value = false),
-            onInput: onChange
-          }, null, 42, _hoisted_2),
-          createVNode(unref(IconButton), {
-            variant: "colorized",
-            size: "sm",
-            theme: "secondary",
-            class: normalizeClass(["search-right-icon", { "search-right-icon-clear": unref(showClear) }]),
-            disabled: unref(api).disabled
-          }, {
-            default: withCtx(() => [
-              !unref(api).open.value ? (openBlock(), createBlock(unref(Icon), {
-                key: 0,
-                "font-size": "sm",
-                class: "angle-down",
-                name: "angle-down"
-              })) : createCommentVNode("", true),
-              unref(api).open.value ? (openBlock(), createBlock(unref(Icon), {
-                key: 1,
-                "font-size": "sm",
-                name: unref(rightIcon),
-                onClick: onClearClick
-              }, null, 8, ["name"])) : createCommentVNode("", true)
-            ]),
-            _: 1
-          }, 8, ["disabled", "class"])
-        ], 2)
-      ], true);
-    };
-  }
-});
-var SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3f453145"]]);
-
-export { SearchInput as default };