@ironsource/shared-ui 1.4.0-rc.10

package/components/includeExclude/IncludeExclude.vue.d.ts

@@ -0,0 +1,109 @@
+import { Placement } from 'floating-vue';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    titleText?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    modelValue: unknown | unknown[] | Record<string, unknown>;
+    clearable?: boolean;
+    placement?: Placement;
+    options: unknown[];
+    autoFocus?: boolean;
+    onSearch?: (option: any, term: string) => boolean;
+    searchPlaceholder?: string;
+    isOnTop?: boolean;
+    alwayesOpen?: boolean;
+    defaultOpen?: boolean;
+    showClearAll?: boolean;
+    distance?: number;
+    distanceOffset?: number;
+    skiddingOffset?: number;
+    hasSubtitle?: boolean;
+    keyField: string;
+}>, {
+    titleText: string;
+    loading: boolean;
+    disabled: boolean;
+    autoFocus: boolean;
+    onSearch: () => true;
+    searchPlaceholder: string;
+    placement: string;
+    isOnTop: boolean;
+    defaultOpen: boolean;
+    showClearAll: boolean;
+    alwayesOpen: boolean;
+    distance: number;
+    distanceOffset: number;
+    skiddingOffset: number;
+    hasSubtitle: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    titleText?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    modelValue: unknown | unknown[] | Record<string, unknown>;
+    clearable?: boolean;
+    placement?: Placement;
+    options: unknown[];
+    autoFocus?: boolean;
+    onSearch?: (option: any, term: string) => boolean;
+    searchPlaceholder?: string;
+    isOnTop?: boolean;
+    alwayesOpen?: boolean;
+    defaultOpen?: boolean;
+    showClearAll?: boolean;
+    distance?: number;
+    distanceOffset?: number;
+    skiddingOffset?: number;
+    hasSubtitle?: boolean;
+    keyField: string;
+}>, {
+    titleText: string;
+    loading: boolean;
+    disabled: boolean;
+    autoFocus: boolean;
+    onSearch: () => true;
+    searchPlaceholder: string;
+    placement: string;
+    isOnTop: boolean;
+    defaultOpen: boolean;
+    showClearAll: boolean;
+    alwayesOpen: boolean;
+    distance: number;
+    distanceOffset: number;
+    skiddingOffset: number;
+    hasSubtitle: boolean;
+}>>> & {
+    "onUpdate:modelValue"?: (value: unknown) => any;
+}, {
+    loading: boolean;
+    placement: Placement;
+    disabled: boolean;
+    searchPlaceholder: string;
+    isOnTop: boolean;
+    distance: number;
+    autoFocus: boolean;
+    defaultOpen: boolean;
+    onSearch: (option: any, term: string) => boolean;
+    hasSubtitle: boolean;
+    titleText: string;
+    showClearAll: boolean;
+    alwayesOpen: boolean;
+    distanceOffset: number;
+    skiddingOffset: number;
+}>;
+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/includeExclude/IncludeExclude.vue.js

@@ -0,0 +1,547 @@
+import { defineComponent, computed, ref, watch, provide, openBlock, createBlock, unref, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, Transition, createElementBlock, normalizeClass, mergeProps, Fragment, renderList, toRaw, nextTick } from 'vue';
+import _sfc_main$1 from '../popover/Popover.vue.js';
+import Button from '../button/Button.vue.js';
+/* empty css                                                            */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+/* empty css                                                                     */import Text from '../typography/Text.vue.js';
+/* empty css                                                                    *//* empty css                                                                    */import 'floating-vue';
+/* empty css                                                                               *//* empty css                                                      *//* empty css                                                                      */import Search from '../search/Search.vue.js';
+import Checkbox from '../checkbox/Checkbox.vue.js';
+import Skeleton from '../skeleton/Skeleton.vue.js';
+import EmptyState from '../emptyState/EmptyState.vue.js';
+import { useToggle } from '../../composables/useToggle.vue.js';
+import { IncludeExcludeContext } from './IncludeExcludeContext.vue.js';
+import { onClickOutside, useClamp, useVirtualList } from '@vueuse/core';
+/* empty css                                                                */
+import "../../IncludeExclude.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = { class: "include-exclude-header" };
+const _hoisted_2 = { class: "include-exclude-header-left-section" };
+const _hoisted_3 = { class: "include-exclude-header-right-section" };
+const _hoisted_4 = { class: "include-exclude-container-wrapper" };
+const _hoisted_5 = {
+  key: 0,
+  class: "include-exclude-container"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "include-exclude-container"
+};
+const _hoisted_7 = { class: "include-exclude-list-wrapper" };
+const _hoisted_8 = {
+  key: 1,
+  class: "loader-wrapper"
+};
+const _hoisted_9 = ["aria-selected", "aria-disabled", "onClick"];
+const _hoisted_10 = { key: 1 };
+const _hoisted_11 = { class: "loader-wrapper" };
+const _hoisted_12 = { class: "include-exclude-selected-wrapper" };
+const _hoisted_13 = {
+  key: 0,
+  class: "loader-wrapper"
+};
+const _hoisted_14 = { class: "include-exclude-selected-header-left" };
+const _hoisted_15 = { class: "include-exclude-selected-header-right" };
+const _hoisted_16 = { key: 1 };
+const _hoisted_17 = { class: "loader-wrapper" };
+const _hoisted_18 = { class: "include-exclude-footer" };
+const _hoisted_19 = { class: "include-exclude-footer-buttons" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "IncludeExclude",
+  props: {
+    titleText: { default: "" },
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    modelValue: null,
+    clearable: { type: Boolean },
+    placement: { default: "bottom-start" },
+    options: null,
+    autoFocus: { type: Boolean, default: true },
+    onSearch: { type: Function, default: () => true },
+    searchPlaceholder: { default: "Search" },
+    isOnTop: { type: Boolean, default: false },
+    alwayesOpen: { type: Boolean, default: false },
+    defaultOpen: { type: Boolean, default: false },
+    showClearAll: { type: Boolean, default: true },
+    distance: { default: 0 },
+    distanceOffset: { default: 0 },
+    skiddingOffset: { default: 0 },
+    hasSubtitle: { type: Boolean, default: false },
+    keyField: null
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const scrollPrerenderedItems = 10;
+    const skeletonItems = 3;
+    const boxDistanceBottom = 6;
+    const OPTION_HEIGHT = 32;
+    const OPTION_WITH_SUBTITLE_HEIGHT = 48;
+    const popoverDistance = computed(() => {
+      const notTopDistance = props.placement?.includes("bottom") ? boxDistanceBottom : 0;
+      return props.isOnTop ? -buttonRef.value?.getBoundingClientRect().height : notTopDistance;
+    });
+    const listRef = ref(null);
+    const query = ref("");
+    const shouldResetAfterCancel = ref(false);
+    const buttonRef = ref(null);
+    const apply = ref(null);
+    const cancel = ref(null);
+    const inputRef = ref(null);
+    const searchRef = ref(null);
+    const activeOption = ref(null);
+    const selectedOptionRef = ref(props.modelValue);
+    const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
+    const selectedOption = computed({
+      get() {
+        return selectedOptionRef.value;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      }
+    });
+    const onCancel = () => {
+      if (selectedOption.value?.length !== props.options?.length) {
+        shouldResetAfterCancel.value = true;
+      }
+      toggleMenu(false);
+    };
+    watch(
+      () => props.modelValue,
+      () => {
+        selectedOptionRef.value = props.modelValue;
+      }
+    );
+    const selectedOptionFiltered = computed(() => {
+      return selectedOptionRef.value.filter(
+        (x) => props.onSearch(x, query.value)
+      );
+    });
+    const onApply = () => {
+      if (selectedOption.value?.length !== props.options?.length) {
+        selectedOption.value = selectedOptionRef.value;
+      }
+      toggleMenu(false);
+    };
+    const triggerAction = () => {
+      toggleMenu();
+    };
+    const clearSelections = () => {
+      selectedOptionRef.value = [];
+    };
+    const optionHeight = computed(() => {
+      return () => props.hasSubtitle ? OPTION_WITH_SUBTITLE_HEIGHT : OPTION_HEIGHT;
+    });
+    const isIn = computed(
+      () => (arr1, arr2) => arr1.every(
+        (val) => arr2.some((val2) => val2[props.keyField] === val[props.keyField])
+      )
+    );
+    const isAllFilteredSelected = computed(() => {
+      if (!open.value) {
+        return false;
+      }
+      const selected = selectedOptionRef.value;
+      const filtered = filteredOptions.value;
+      if (selected === filtered) {
+        return true;
+      }
+      if (selected?.length !== filtered?.length) {
+        return false;
+      }
+      return isIn.value(selected, filtered) && isIn.value(filtered, selected);
+    });
+    const popoverWrapperRef = ref(null);
+    const [open, toggle] = useToggle({
+      disabled: props.disabled,
+      initialValue: props.defaultOpen
+    });
+    const afterClose = (delay = 300) => {
+      const isAllOptionsSelected = selectedOption.value?.length === props.options?.length;
+      nextTick(async () => {
+        if (isAllOptionsSelected) {
+          selectedOption.value = [];
+        }
+        await sleep(delay);
+        api.resetInput();
+      });
+    };
+    watch(
+      () => [open.value, searchRef?.value?.inputRef],
+      ([isOpen, searchInput]) => {
+        if (isOpen && searchInput) {
+          afterOpen();
+        }
+      }
+    );
+    const focusOnSearch = () => {
+      if (!props.autoFocus) {
+        return;
+      }
+      searchRef.value?.inputRef.focus();
+    };
+    const afterOpen = async (delay = 300) => {
+      await sleep(delay);
+      focusOnSearch();
+    };
+    const toggleMenu = (value) => {
+      if (props.disabled) {
+        return;
+      }
+      if (!value) {
+        afterClose();
+      }
+      toggle(value);
+    };
+    onClickOutside(popoverWrapperRef, () => {
+      if (open.value) {
+        onCancel();
+      }
+    });
+    const optionsIds = ref([]);
+    const maxClamped = computed(() => {
+      return filteredOptions.value?.length - 1;
+    });
+    const queryChanged = (value) => {
+      query.value = value;
+    };
+    const activeIndex = useClamp(0, 0, maxClamped);
+    const onSelect = (option) => {
+      inputRef.value?.focus();
+      const rawSelectedOption = selectedOptionRef.value;
+      if (rawSelectedOption.includes(option)) {
+        selectedOptionRef.value = rawSelectedOption.filter(
+          (item) => item !== option
+        );
+      } else {
+        selectedOptionRef.value = [.../* @__PURE__ */ new Set([...rawSelectedOption, option])];
+      }
+    };
+    const removeSelection = (option) => {
+      onSelect(option);
+    };
+    const api = {
+      toggle: toggleMenu,
+      disabled: props.disabled,
+      options: optionsIds,
+      clearable: props.clearable,
+      resetInput: () => {
+        queryChanged("");
+        if (inputRef.value) {
+          inputRef.value.value = "";
+        }
+        if (shouldResetAfterCancel.value) {
+          selectedOptionRef.value = props.modelValue;
+          shouldResetAfterCancel.value = false;
+        }
+      },
+      search: queryChanged,
+      select: onSelect,
+      activeIndex,
+      selectedOption,
+      activeOption,
+      listRef,
+      query,
+      open,
+      removeSelection
+    };
+    const toggleSelectAll = () => {
+      if (selectedOptionRef.value?.length !== filteredOptions.value?.length) {
+        selectedOptionRef.value = filteredOptions.value;
+      } else {
+        selectedOptionRef.value = [];
+      }
+    };
+    provide(IncludeExcludeContext, api);
+    const filteredOptions = computed(() => {
+      if (!query.value?.length) {
+        return props.options;
+      }
+      return props.options?.filter((option) => props.onSearch(option, query.value));
+    });
+    const {
+      list: virtualOptions,
+      containerProps,
+      wrapperProps
+    } = useVirtualList(filteredOptions, {
+      itemHeight: optionHeight.value,
+      overscan: scrollPrerenderedItems
+    });
+    const {
+      list: virtualOptionsSelected,
+      containerProps: containerPropsSelected,
+      wrapperProps: wrapperPropsSelected
+    } = useVirtualList(selectedOptionFiltered, {
+      itemHeight: optionHeight.value,
+      overscan: scrollPrerenderedItems
+    });
+    const onButtonKeydown = (event) => {
+      if (["Enter", " ", "Space"].includes(event.key)) {
+        toggleMenu();
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        toggleMenu(false);
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        toggleMenu(true);
+        event.preventDefault();
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), {
+        distance: unref(popoverDistance) + __props.distanceOffset,
+        skidding: __props.skiddingOffset,
+        trigger: "managed",
+        open: unref(open) || __props.alwayesOpen,
+        placement: __props.placement
+      }, {
+        trigger: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "buttonRef",
+            ref: buttonRef,
+            class: "include-exclude-trigger",
+            tabindex: "0",
+            onClick: triggerAction,
+            onKeydown: onButtonKeydown
+          }, [
+            renderSlot(_ctx.$slots, "trigger", {}, () => [
+              createElementVNode("button", {
+                ref_key: "buttonRef",
+                ref: buttonRef
+              }, "Default trigger", 512)
+            ], true)
+          ], 544)
+        ]),
+        content: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "popoverWrapperRef",
+            ref: popoverWrapperRef,
+            class: "include-exclude-content"
+          }, [
+            createElementVNode("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "header-left-section", {}, () => [
+                  __props.titleText ? (openBlock(), createBlock(unref(Text), {
+                    key: 0,
+                    class: "include-exclude-header-left-section-title",
+                    size: "md",
+                    strong: ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(__props.titleText), 1)
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true)
+                ], true)
+              ]),
+              createElementVNode("div", _hoisted_3, [
+                renderSlot(_ctx.$slots, "header-right-section", {}, () => [
+                  createVNode(unref(Search), {
+                    ref_key: "searchRef",
+                    ref: searchRef,
+                    modelValue: query.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+                    class: "include-exclude-header-right-section-search-input",
+                    variant: "transparent",
+                    placeholder: __props.searchPlaceholder,
+                    disabled: __props.loading
+                  }, null, 8, ["modelValue", "placeholder", "disabled"])
+                ], true)
+              ])
+            ]),
+            createElementVNode("div", _hoisted_4, [
+              createVNode(Transition, {
+                name: "switch",
+                mode: "out-in"
+              }, {
+                default: withCtx(() => [
+                  !unref(filteredOptions)?.length && !__props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                    renderSlot(_ctx.$slots, "no-result", {}, () => [
+                      createVNode(unref(EmptyState), {
+                        size: "lg",
+                        title: "No results found",
+                        subtitle: "Try diffrent keyword",
+                        "icon-width": 72,
+                        "icon-height": 72
+                      })
+                    ], true)
+                  ])) : (openBlock(), createElementBlock("div", _hoisted_6, [
+                    createElementVNode("div", _hoisted_7, [
+                      createElementVNode("div", {
+                        class: normalizeClass(["include-exclude-list-header", {
+                          "include-exclude-list-header-loading": __props.loading,
+                          "include-exclude-list-header-loaded": !__props.loading
+                        }])
+                      }, [
+                        !__props.loading ? (openBlock(), createBlock(unref(Checkbox), {
+                          key: 0,
+                          size: "sm",
+                          "is-checked": unref(isAllFilteredSelected),
+                          "is-indeterminate": unref(selectedOption)?.length > 0 && !unref(isAllFilteredSelected),
+                          disabled: !unref(filteredOptions)?.length,
+                          label: "Select all",
+                          onClick: toggleSelectAll
+                        }, null, 8, ["is-checked", "is-indeterminate", "disabled"])) : createCommentVNode("", true),
+                        __props.loading ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                          createVNode(unref(Skeleton), {
+                            class: "dot-skeleton",
+                            round: ""
+                          }),
+                          createVNode(unref(Skeleton), { round: "" })
+                        ])) : createCommentVNode("", true)
+                      ], 2),
+                      createElementVNode("div", mergeProps({ class: "include-exclude-list" }, unref(containerProps)), [
+                        !__props.loading ? (openBlock(), createElementBlock("ul", mergeProps({ key: 0 }, unref(wrapperProps), {
+                          ref_key: "listRef",
+                          ref: listRef,
+                          tabindex: "1"
+                        }), [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualOptions), ({ data, index }) => {
+                            return openBlock(), createElementBlock("li", {
+                              key: index,
+                              "aria-selected": toRaw(unref(selectedOption)) === data,
+                              "aria-disabled": !!__props.disabled,
+                              onClick: () => onSelect(data)
+                            }, [
+                              renderSlot(_ctx.$slots, "option", {
+                                showCheckbox: true,
+                                option: data,
+                                selected: toRaw(unref(selectedOption)) === data,
+                                active: toRaw(unref(activeIndex)) === index
+                              }, void 0, true)
+                            ], 8, _hoisted_9);
+                          }), 128))
+                        ], 16)) : createCommentVNode("", true),
+                        __props.loading ? (openBlock(), createElementBlock("ul", _hoisted_10, [
+                          (openBlock(), createElementBlock(Fragment, null, renderList(skeletonItems, (n) => {
+                            return createElementVNode("li", {
+                              key: n,
+                              class: "include-exclude-list-item-skeleton"
+                            }, [
+                              createElementVNode("div", _hoisted_11, [
+                                createVNode(unref(Skeleton), {
+                                  class: "dot-skeleton",
+                                  round: ""
+                                }),
+                                createVNode(unref(Skeleton), { round: "" })
+                              ])
+                            ]);
+                          }), 64))
+                        ])) : createCommentVNode("", true)
+                      ], 16)
+                    ]),
+                    createElementVNode("div", _hoisted_12, [
+                      createElementVNode("div", {
+                        class: normalizeClass(["include-exclude-selected-header", {
+                          "include-exclude-list-selected-header-loading": __props.loading,
+                          "include-exclude-list-header-loaded": !__props.loading
+                        }])
+                      }, [
+                        __props.loading ? (openBlock(), createElementBlock("div", _hoisted_13, [
+                          createVNode(unref(Skeleton), { round: "" })
+                        ])) : createCommentVNode("", true),
+                        createElementVNode("div", _hoisted_14, [
+                          !__props.loading ? (openBlock(), createBlock(unref(Text), {
+                            key: 0,
+                            class: "include-exclude-selected-header-left-selected",
+                            size: "sm"
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(unref(selectedOption)?.length) + " Selected", 1)
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true)
+                        ]),
+                        createElementVNode("div", _hoisted_15, [
+                          unref(selectedOption)?.length && !__props.loading && __props.showClearAll ? (openBlock(), createBlock(unref(Button), {
+                            key: 0,
+                            variant: "link",
+                            theme: "third",
+                            size: "md",
+                            strong: false,
+                            onClick: clearSelections
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode("Clear all")
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true)
+                        ])
+                      ], 2),
+                      createElementVNode("div", mergeProps({ class: "include-exclude-selected-list" }, unref(containerPropsSelected)), [
+                        unref(selectedOption)?.length && !__props.loading ? (openBlock(), createElementBlock("ul", mergeProps({ key: 0 }, unref(wrapperPropsSelected), {
+                          ref: "SelectedlistRef",
+                          tabindex: "2"
+                        }), [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualOptionsSelected), ({ data, index }) => {
+                            return openBlock(), createElementBlock("li", { key: index }, [
+                              renderSlot(_ctx.$slots, "selected_option", {
+                                option: data,
+                                selected: toRaw(unref(selectedOption)) === data,
+                                active: toRaw(unref(activeIndex)) === index
+                              }, void 0, true)
+                            ]);
+                          }), 128))
+                        ], 16)) : createCommentVNode("", true),
+                        __props.loading ? (openBlock(), createElementBlock("ul", _hoisted_16, [
+                          (openBlock(), createElementBlock(Fragment, null, renderList(skeletonItems, (n) => {
+                            return createElementVNode("li", {
+                              key: n,
+                              class: "include-exclude-list-item-skeleton"
+                            }, [
+                              createElementVNode("div", _hoisted_17, [
+                                createVNode(unref(Skeleton), { round: "" })
+                              ])
+                            ]);
+                          }), 64))
+                        ])) : createCommentVNode("", true)
+                      ], 16)
+                    ])
+                  ]))
+                ]),
+                _: 3
+              })
+            ]),
+            renderSlot(_ctx.$slots, "footer", {}, () => [
+              createElementVNode("div", _hoisted_18, [
+                createElementVNode("div", _hoisted_19, [
+                  createVNode(unref(Button), {
+                    ref_key: "cancel",
+                    ref: cancel,
+                    size: "sm",
+                    variant: "border",
+                    theme: "third",
+                    text: "Cancel",
+                    onClick: onCancel
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("Cancel")
+                    ]),
+                    _: 1
+                  }, 512),
+                  createVNode(unref(Button), {
+                    ref_key: "apply",
+                    ref: apply,
+                    size: "sm",
+                    theme: "primary",
+                    text: "Apply",
+                    onClick: onApply
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("Apply")
+                    ]),
+                    _: 1
+                  }, 512)
+                ])
+              ])
+            ], true)
+          ], 512)
+        ]),
+        _: 3
+      }, 8, ["distance", "skidding", "open", "placement"]);
+    };
+  }
+});
+var IncludeExclude = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e1a15028"]]);
+
+export { IncludeExclude as default };