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

package/components/includeExclude/IncludeExcludeDragDrop.vue.js

@@ -1,610 +0,0 @@
-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';
-/* 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                                                                    *//* empty css                                                                               */import 'floating-vue';
-/* 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';
-import draggable from 'vuedraggable';
-/* empty css                                                                        */
-import "../../IncludeExcludeDragDrop.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: 1 };
-const _hoisted_19 = { class: "loader-wrapper" };
-const _hoisted_20 = { class: "include-exclude-footer" };
-const _hoisted_21 = { class: "include-exclude-footer-buttons" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "IncludeExcludeDragDrop",
-  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,
-    isDraggable: { type: Boolean, default: false },
-    draggableArgs: { default: null }
-  },
-  emits: ["update:modelValue", "changeDragDrop", "clickOutside"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const scrollPrerenderedItems = 50;
-    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;
-      }
-    );
-    watch(
-      () => selectedOptionRef.value,
-      () => {
-        emit("update:modelValue", selectedOptionRef.value);
-      }
-    );
-    const selectedOptionFiltered = computed(() => {
-      return selectedOptionRef.value.filter(
-        (x) => props.onSearch(x, query.value)
-      );
-    });
-    const filteredOptionsWithoutGroup = computed(() => {
-      return filteredOptions.value.filter(
-        (option) => !option?.groupOption
-      );
-    });
-    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);
-      expandCollapseIds.value = [];
-    };
-    onClickOutside(popoverWrapperRef, () => {
-      if (open.value) {
-        onCancel();
-        emit("clickOutside", selectedOptionRef.value);
-      }
-    });
-    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 : [];
-      setTimeout(() => {
-        scrollToEnd(selectedOptionRef.value.length);
-      }, 300);
-    };
-    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,
-      scrollTo: scrollToEnd
-    } = 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?.[props.keyField]);
-    };
-    const toggleCollapse = (option) => {
-      if (option.groupOption) {
-        option.groupOption.isCollapse = !option?.groupOption.isCollapse;
-      }
-      expandCollapseIds.value = virtualOptions.value.filter((item) => item?.data?.groupOption?.isCollapse).flatMap((item) => item?.data?.groupOption?.childOptionsIds || []);
-    };
-    const onChangeDragDrop = () => {
-      emit("changeDragDrop", virtualOptionsSelected.value);
-    };
-    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: normalizeClass(["include-exclude-content", {
-              "include-exclude-content-draggable": __props.isDraggable
-            }])
-          }, [
-            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), {
-                        class: {
-                          "include-exclude-list-draggable": __props.isDraggable
-                        }
-                      }), [
-                        !__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)
-                            }, [
-                              data.groupOption ? (openBlock(), createElementBlock("div", {
-                                key: 0,
-                                class: "option-collapse",
-                                onClick: ($event) => toggleCollapse(data)
-                              }, [
-                                renderSlot(_ctx.$slots, "option-group", { option: data }, void 0, true)
-                              ], 8, _hoisted_10)) : createCommentVNode("", true),
-                              !data.groupOption && !isCollapsed(data) ? renderSlot(_ctx.$slots, "option", {
-                                key: 1,
-                                showCheckbox: true,
-                                option: data,
-                                selected: toRaw(unref(selectedOption)) === data,
-                                active: toRaw(unref(activeIndex)) === index
-                              }, void 0, true) : createCommentVNode("", true)
-                            ], 8, _hoisted_9);
-                          }), 128))
-                        ], 16)) : createCommentVNode("", true),
-                        __props.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": __props.loading,
-                          "include-exclude-list-header-loaded": !__props.loading
-                        }])
-                      }, [
-                        __props.loading ? (openBlock(), createElementBlock("div", _hoisted_14, [
-                          createVNode(unref(Skeleton), { round: "" })
-                        ])) : createCommentVNode("", true),
-                        createElementVNode("div", _hoisted_15, [
-                          !__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_16, [
-                          renderSlot(_ctx.$slots, "selected-header-right", {}, () => [
-                            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)
-                          ], true)
-                        ])
-                      ], 2),
-                      createElementVNode("div", mergeProps({
-                        class: ["include-exclude-selected-list", {
-                          "include-exclude-list-draggable": __props.isDraggable
-                        }]
-                      }, unref(containerPropsSelected)), [
-                        unref(selectedOption)?.length && !__props.loading && __props.isDraggable ? (openBlock(), createElementBlock("ul", mergeProps({ key: 0 }, 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)
-                          }, __props.draggableArgs, { onChange: onChangeDragDrop }), {
-                            item: withCtx(({ element }) => [
-                              createElementVNode("div", _hoisted_17, [
-                                renderSlot(_ctx.$slots, "selected_option_draggable", {
-                                  option: element.data,
-                                  selected: toRaw(unref(selectedOption)) === element.data,
-                                  active: toRaw(unref(activeIndex)) === element.data.draggableItemKey
-                                }, void 0, true)
-                              ])
-                            ]),
-                            _: 3
-                          }, 16, ["modelValue"])
-                        ], 16)) : createCommentVNode("", true),
-                        __props.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 IncludeExcludeDragDrop = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-22459799"]]);
-
-export { IncludeExcludeDragDrop as default };