@ironsource/shared-ui 1.4.0-rc.10

package/components/dropdown/DropdownContext.d.ts

@@ -0,0 +1,40 @@
+import { InjectionKey, Ref } from 'vue';
+export declare enum Mode {
+    Multi = 0,
+    Single = 1
+}
+export declare enum Type {
+    Search = 0,
+    Dropdown = 1
+}
+export interface DropdownContextProps {
+    activeIndex: Ref<number>;
+    activeOption: Ref<unknown>;
+    clearSelection: () => void;
+    selectedOption: Ref<unknown>;
+    clearable: boolean;
+    listRef: Ref<HTMLUListElement>;
+    options: Ref<{
+        id: string;
+        disabled?: boolean;
+    }[]>;
+    mode: Mode;
+    type: Type;
+    open: Ref<boolean>;
+    disabled: boolean;
+    mandatory: boolean;
+    labelRef: Ref<HTMLLabelElement | null>;
+    size: 'sm' | 'lg';
+    search: (term: string) => void;
+    toggle: (value?: boolean) => void;
+    placeholder: string;
+    select?: (option: unknown) => void;
+    query: Ref<string>;
+    selectedValue: Ref<string>;
+    goToOption: (index: number) => void;
+    registerInput: (ref: Ref<HTMLInputElement | null>) => void;
+    registerOption: (id: string, disabled: boolean, hasSubtitle?: boolean) => void;
+    unRegisterOption: (id: string) => void;
+}
+export declare const DropdownContext: InjectionKey<DropdownContextProps>;
+export declare function useDropdownContext(component: string): DropdownContextProps;

package/components/dropdown/DropdownContext.vue.js

@@ -0,0 +1,29 @@
+import { inject } from 'vue';
+
+var Mode = /* @__PURE__ */ ((Mode2) => {
+  Mode2[Mode2["Multi"] = 0] = "Multi";
+  Mode2[Mode2["Single"] = 1] = "Single";
+  return Mode2;
+})(Mode || {});
+var Type = /* @__PURE__ */ ((Type2) => {
+  Type2[Type2["Search"] = 0] = "Search";
+  Type2[Type2["Dropdown"] = 1] = "Dropdown";
+  return Type2;
+})(Type || {});
+const DropdownContext = Symbol(
+  "DropdownContext"
+);
+function useDropdownContext(component) {
+  const context = inject(DropdownContext, null);
+  if (context === null) {
+    const err = new Error(
+      `<${component} /> is missing a parent <Dropdown /> component.`
+    );
+    if (Error.captureStackTrace)
+      Error.captureStackTrace(err, useDropdownContext);
+    throw err;
+  }
+  return context;
+}
+
+export { DropdownContext, Mode, Type, useDropdownContext };

package/components/dropdown/Label.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/dropdown/Label.vue.js

@@ -0,0 +1,41 @@
+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-4bba4499"]]);
+
+export { Label as default };

package/components/dropdown/Option.vue.d.ts

@@ -0,0 +1,53 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    option?: unknown;
+    subtitle?: string;
+    disabled?: boolean;
+    selectedProp?: boolean;
+    isIndeterminate?: boolean;
+    selectAllOption?: boolean;
+    active?: boolean;
+}>, {
+    subtitle: string;
+    disabled: boolean;
+    option: any;
+    isIndeterminate: boolean;
+    selectAllOption: boolean;
+    active: any;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    option?: unknown;
+    subtitle?: string;
+    disabled?: boolean;
+    selectedProp?: boolean;
+    isIndeterminate?: boolean;
+    selectAllOption?: boolean;
+    active?: boolean;
+}>, {
+    subtitle: string;
+    disabled: boolean;
+    option: any;
+    isIndeterminate: boolean;
+    selectAllOption: boolean;
+    active: any;
+}>>>, {
+    option: any;
+    disabled: boolean;
+    isIndeterminate: boolean;
+    subtitle: string;
+    selectAllOption: boolean;
+    active: boolean;
+}>;
+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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/dropdown/Option.vue.js

@@ -0,0 +1,133 @@
+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-0ea361f0"]]);
+
+export { Option as default };

package/components/dropdown/SearchInput.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/dropdown/SearchInput.vue.js

@@ -0,0 +1,119 @@
+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';
+import IconButton from '../button/IconButton.vue.js';
+/* empty css                                                             */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+
+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(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-35368fc5"]]);
+
+export { SearchInput as default };