@ironsource/shared-ui 1.4.2-test.2 → 1.4.2-test.20

package/components/includeExclude/IncludeExcludeDragDrop.vue.js

@@ -0,0 +1,620 @@
+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: 2 };
+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 : [];
+    };
+    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?.[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"
+                        }), [
+                          (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),
+                        unref(selectedOption)?.length && !__props.loading && __props.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)
+                          }, __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-077c6c24"]]);
+
+export { IncludeExcludeDragDrop as default };