@ironsource/shared-ui 1.4.2-test.3 → 1.4.2-test.5

package/src/components/includeExclude/IncludeExclude.vue.js

@@ -0,0 +1,625 @@
+import { defineComponent, computed, ref, watch, provide, openBlock, createBlock, unref, withCtx, createElementVNode, renderSlot, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, createVNode, Transition, createElementBlock, mergeProps, Fragment, renderList, toRaw, isRef, nextTick } from 'vue';
+import _sfc_main$1 from '../popover/Popover.vue.js';
+import Button from '../button/Button.vue.js';
+import '../button/IconButton.vue.js';
+import '../button/ScrollButton.vue.js';
+import Search from '../search/Search.vue.js';
+import '../typography/Heading.vue.js';
+import Text from '../typography/Text.vue.js';
+import Checkbox from '../checkbox/Checkbox.vue.js';
+import Icon from '../icon/Icon.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';
+import draggable from '../../../node_modules/vuedraggable/dist/vuedraggable.umd.vue.js';
+/* empty css                                                                */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////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 = ["onClick"];
+const _hoisted_11 = { key: 1 };
+const _hoisted_12 = { class: "loader-wrapper" };
+const _hoisted_13 = { class: "include-exclude-selected-wrapper" };
+const _hoisted_14 = {
+  key: 0,
+  class: "loader-wrapper"
+};
+const _hoisted_15 = { class: "include-exclude-selected-header-left" };
+const _hoisted_16 = { class: "include-exclude-selected-header-right" };
+const _hoisted_17 = { class: "drag-item" };
+const _hoisted_18 = { key: 2 };
+const _hoisted_19 = { class: "loader-wrapper" };
+const _hoisted_20 = { class: "include-exclude-footer" };
+const _hoisted_21 = { class: "include-exclude-footer-buttons" };
+const scrollPrerenderedItems = 10;
+const skeletonItems = 3;
+const boxDistanceBottom = 6;
+const OPTION_HEIGHT = 32;
+const OPTION_WITH_SUBTITLE_HEIGHT = 48;
+const _sfc_main = defineComponent({
+  __name: "IncludeExclude",
+  props: {
+    titleText: { default: "" },
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    modelValue: {},
+    clearable: { type: Boolean },
+    placement: { default: "bottom-start" },
+    options: {},
+    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: {},
+    isDraggable: { type: Boolean, default: false },
+    draggableArgs: { default: null }
+  },
+  emits: ["update:modelValue", "changeDragDrop"],
+  setup(__props, { emit }) {
+    const props = __props;
+    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 filteredOptionsWithoutGroup = computed(() => {
+      return filteredOptions.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 = filteredOptionsWithoutGroup.value || 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) => {
+      if (option?.groupOption) {
+        return;
+      }
+      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 = () => {
+      selectedOptionRef.value = selectedOptionRef.value?.length !== filteredOptionsWithoutGroup.value?.length ? filteredOptionsWithoutGroup.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();
+      }
+    };
+    const expandCollapseIds = ref([]);
+    const isCollapsed = (option) => {
+      return expandCollapseIds.value.includes(option?.name);
+    };
+    const toggleCollapse = (option) => {
+      if (option.groupOption) {
+        option.groupOption.isCollapse = !option?.groupOption.isCollapse;
+      }
+    };
+    const onChangeDragDrop = () => {
+      emit("changeDragDrop", virtualOptionsSelected.value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), {
+        distance: popoverDistance.value + _ctx.distanceOffset,
+        skidding: _ctx.skiddingOffset,
+        trigger: "managed",
+        open: unref(open) || _ctx.alwayesOpen,
+        placement: _ctx.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: normalizeClass(["include-exclude-content", {
+              "include-exclude-content-draggable": _ctx.isDraggable
+            }])
+          }, [
+            createElementVNode("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "header-left-section", {}, () => [
+                  _ctx.titleText ? (openBlock(), createBlock(unref(Text), {
+                    key: 0,
+                    class: "include-exclude-header-left-section-title",
+                    size: "md",
+                    strong: ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(_ctx.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: _ctx.searchPlaceholder,
+                    disabled: _ctx.loading
+                  }, null, 8, ["modelValue", "placeholder", "disabled"])
+                ], true)
+              ])
+            ]),
+            createElementVNode("div", _hoisted_4, [
+              createVNode(Transition, {
+                name: "switch",
+                mode: "out-in"
+              }, {
+                default: withCtx(() => [
+                  !filteredOptions.value?.length && !_ctx.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": _ctx.loading,
+                          "include-exclude-list-header-loaded": !_ctx.loading
+                        }])
+                      }, [
+                        !_ctx.loading ? (openBlock(), createBlock(unref(Checkbox), {
+                          key: 0,
+                          size: "sm",
+                          "is-checked": isAllFilteredSelected.value,
+                          "is-indeterminate": selectedOption.value?.length > 0 && !isAllFilteredSelected.value,
+                          disabled: !filteredOptions.value?.length,
+                          label: "Select all",
+                          onClick: toggleSelectAll
+                        }, null, 8, ["is-checked", "is-indeterminate", "disabled"])) : createCommentVNode("", true),
+                        _ctx.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), {
+                        class: {
+                          "include-exclude-list-draggable": _ctx.isDraggable
+                        }
+                      }), [
+                        !_ctx.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(selectedOption.value) === data,
+                              "aria-disabled": !!_ctx.disabled,
+                              onClick: () => onSelect(data)
+                            }, [
+                              data.groupOption ? (openBlock(), createElementBlock("div", {
+                                key: 0,
+                                class: "option-collapse",
+                                onClick: ($event) => toggleCollapse(data)
+                              }, [
+                                createVNode(unref(Text), {
+                                  strong: "",
+                                  "is-truncated": "",
+                                  size: "md"
+                                }, {
+                                  default: withCtx(() => [
+                                    createTextVNode(toDisplayString(data.titleText), 1)
+                                  ]),
+                                  _: 2
+                                }, 1024),
+                                createVNode(unref(Icon), {
+                                  "font-size": "sm",
+                                  name: data?.groupOption?.isCollapse ? "angle-up" : "angle-down"
+                                }, null, 8, ["name"])
+                              ], 8, _hoisted_10)) : createCommentVNode("", true),
+                              !data.groupOption && !isCollapsed(data) ? renderSlot(_ctx.$slots, "option", {
+                                key: 1,
+                                showCheckbox: true,
+                                option: data,
+                                selected: toRaw(selectedOption.value) === data,
+                                active: toRaw(unref(activeIndex)) === index
+                              }, void 0, true) : createCommentVNode("", true)
+                            ], 8, _hoisted_9);
+                          }), 128))
+                        ], 16)) : createCommentVNode("", true),
+                        _ctx.loading ? (openBlock(), createElementBlock("ul", _hoisted_11, [
+                          (openBlock(), createElementBlock(Fragment, null, renderList(skeletonItems, (n) => {
+                            return createElementVNode("li", {
+                              key: n,
+                              class: "include-exclude-list-item-skeleton"
+                            }, [
+                              createElementVNode("div", _hoisted_12, [
+                                createVNode(unref(Skeleton), {
+                                  class: "dot-skeleton",
+                                  round: ""
+                                }),
+                                createVNode(unref(Skeleton), { round: "" })
+                              ])
+                            ]);
+                          }), 64))
+                        ])) : createCommentVNode("", true)
+                      ], 16)
+                    ]),
+                    createElementVNode("div", _hoisted_13, [
+                      createElementVNode("div", {
+                        class: normalizeClass(["include-exclude-selected-header", {
+                          "include-exclude-list-selected-header-loading": _ctx.loading,
+                          "include-exclude-list-header-loaded": !_ctx.loading
+                        }])
+                      }, [
+                        _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_14, [
+                          createVNode(unref(Skeleton), { round: "" })
+                        ])) : createCommentVNode("", true),
+                        createElementVNode("div", _hoisted_15, [
+                          !_ctx.loading ? (openBlock(), createBlock(unref(Text), {
+                            key: 0,
+                            class: "include-exclude-selected-header-left-selected",
+                            size: "sm"
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(selectedOption.value?.length) + " Selected", 1)
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true)
+                        ]),
+                        createElementVNode("div", _hoisted_16, [
+                          renderSlot(_ctx.$slots, "selected-header-right", {}, () => [
+                            selectedOption.value?.length && !_ctx.loading && _ctx.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)
+                          ], true)
+                        ])
+                      ], 2),
+                      createElementVNode("div", mergeProps({
+                        class: ["include-exclude-selected-list", {
+                          "include-exclude-list-draggable": _ctx.isDraggable
+                        }]
+                      }, unref(containerPropsSelected)), [
+                        selectedOption.value?.length && !_ctx.loading && !_ctx.isDraggable ? (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(selectedOption.value) === data,
+                                active: toRaw(unref(activeIndex)) === index
+                              }, void 0, true)
+                            ]);
+                          }), 128))
+                        ], 16)) : createCommentVNode("", true),
+                        selectedOption.value?.length && !_ctx.loading && _ctx.isDraggable ? (openBlock(), createElementBlock("ul", mergeProps({ key: 1 }, unref(wrapperPropsSelected), {
+                          ref: "SelectedlistRef",
+                          tabindex: "2"
+                        }), [
+                          createVNode(unref(draggable), mergeProps({
+                            modelValue: unref(virtualOptionsSelected),
+                            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(virtualOptionsSelected) ? virtualOptionsSelected.value = $event : null)
+                          }, _ctx.draggableArgs, { onEnd: onChangeDragDrop }), {
+                            item: withCtx(({ element }) => [
+                              createElementVNode("div", _hoisted_17, [
+                                renderSlot(_ctx.$slots, "selected_option_draggable", {
+                                  option: element.data,
+                                  selected: toRaw(selectedOption.value) === element.data,
+                                  active: toRaw(unref(activeIndex)) === element.data.draggableItemKey
+                                }, void 0, true)
+                              ])
+                            ]),
+                            _: 3
+                          }, 16, ["modelValue"])
+                        ], 16)) : createCommentVNode("", true),
+                        _ctx.loading ? (openBlock(), createElementBlock("ul", _hoisted_18, [
+                          (openBlock(), createElementBlock(Fragment, null, renderList(skeletonItems, (n) => {
+                            return createElementVNode("li", {
+                              key: n,
+                              class: "include-exclude-list-item-skeleton"
+                            }, [
+                              createElementVNode("div", _hoisted_19, [
+                                createVNode(unref(Skeleton), { round: "" })
+                              ])
+                            ]);
+                          }), 64))
+                        ])) : createCommentVNode("", true)
+                      ], 16)
+                    ])
+                  ]))
+                ]),
+                _: 3
+              })
+            ]),
+            renderSlot(_ctx.$slots, "footer", {
+              handleApply: onApply,
+              handleCancel: onCancel
+            }, () => [
+              createElementVNode("div", _hoisted_20, [
+                createElementVNode("div", _hoisted_21, [
+                  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)
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["distance", "skidding", "open", "placement"]);
+    };
+  }
+});
+var IncludeExclude = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0db8ed02"]]);
+
+export { IncludeExclude as default };