@avakhula/ui 0.0.10

package/src/components/TreeSelect/Select.vue

@@ -0,0 +1,909 @@
+<template>
+  <div class="tree-select">
+    <ib-dropdown
+      :disabled="isLoading"
+      :is-resizable="isResizable"
+      :vertical="vertical"
+      ref="dropdown"
+    >
+      <template v-if="hasTrigger" v-slot:trigger>
+        <slot v-bind:selected-count="selectedKeys.length" name="trigger"></slot>
+      </template>
+
+      <template v-else v-slot:trigger="{ isOpened }">
+        <div
+          role="combobox"
+          tabindex="0"
+          class="tree-choice"
+          @click.prevent
+          :aria-label="ariaLabel"
+          :aria-expanded="isOpened"
+          :class="{
+            'tree-choice-opened': isOpened,
+            'has-clear-button': !showClearButton,
+          }"
+        >
+          <template v-if="htmlOptionTitle">
+            <span
+              :class="{ placeholder: !selectStatus }"
+              v-html="selectStatus || placeholder"
+            ></span>
+          </template>
+          <template v-else>
+            <span :class="{ placeholder: !selectStatus }">
+              {{ selectStatus || placeholder }}
+            </span>
+          </template>
+        </div>
+        <ib-icon-button
+          v-if="showClearButton"
+          kind="ghost"
+          class="button-clear"
+          @click.prevent="clearValue"
+          :help-text="clearButtonMessage"
+          v-show="Object.keys(selected).length"
+        >
+          <ib-icon name="close-outline"></ib-icon>
+        </ib-icon-button>
+
+        <ib-icon
+          :name="isOpened ? 'chevron-up-outline' : 'chevron-down-outline'"
+          :classes="'tree-select-caret'"
+        />
+      </template>
+
+      <template v-slot:body>
+        <div
+          class="tree-drop"
+          :class="{ 'not-tree-child': !hasTreeChildren }"
+          :style="{
+            width: 'auto',
+            position: 'absolute',
+            left: -size.left + 'px',
+            right: -size.right + 'px',
+          }"
+        >
+          <div
+            v-if="isResizable"
+            class="ib-dropdown-resizer ib-dropdown-resizer-left"
+            @mousedown="startResizing('left')"
+          ></div>
+          <div
+            v-if="isResizable"
+            class="ib-dropdown-resizer ib-dropdown-resizer-right"
+            @mousedown="startResizing('right')"
+          ></div>
+          <list
+            :class="{ 'has-hierarchy': hasHierarchy }"
+            v-if="Object.keys(actualBookmarkedOptions).length > 0"
+          >
+            <select-option
+              :key="'bookmark' + option.id"
+              v-for="option in actualBookmarkedOptions"
+              :option="option"
+              :parent-auto-check="false"
+              :is-multiple="isMultiple"
+              :is-bookmarkable="true"
+              :is-bookmarked="true"
+              @check="registerCheck"
+              @toggle-bookmark="toggleBookmark"
+              :uid="uid"
+              :only-end-nodes="onlyEndNodes"
+              :html-title="htmlOptionTitle"
+              :show-input="showInputs"
+            ></select-option>
+          </list>
+
+          <ib-input
+            class="tree-search"
+            v-if="showSearch"
+            :show-icon="true"
+            :value="filterString"
+            :placeholder="
+              searchPlaceholderText
+                ? searchPlaceholderText
+                : actualStrings.searchPlaceholder
+            "
+            @input="filter($event, actualOptions)"
+          ></ib-input>
+
+          <list
+            ref="list"
+            :class="{ 'tree-select-list': true, 'has-hierarchy': hasHierarchy }"
+          >
+            <div
+              v-if="!requiredDependencyNotFilled && !countVisibleChildren"
+              class="tree-select-empty"
+            >
+              {{ actualStrings.emptyTitle }}
+            </div>
+            <div v-show="requiredDependencyNotFilled" class="tree-select-empty">
+              {{ actualStrings.requiredDependencyNotFilled }}
+            </div>
+
+            <template
+              v-if="!isMultiple && !isRequired && actualOptions.length > 0"
+            >
+              <select-option
+                :option="{
+                  title: lang('none', 'select'),
+                  id: null,
+                  checked: isEmpty,
+                }"
+                :name="actualName"
+                :parent-auto-check="parentAutoCheck"
+                :is-multiple="isMultiple"
+                @check="registerCheck"
+                @toggle-bookmark="toggleBookmark"
+                :uid="uid"
+                :only-end-nodes="onlyEndNodes"
+                :show-input="showInputs"
+              ></select-option>
+            </template>
+
+            <template v-if="!requiredDependencyNotFilled">
+              <template
+                v-if="
+                  allOptions &&
+                  isMultiple &&
+                  countVisibleChildren &&
+                  !requiredDependencyNotFilled
+                "
+              >
+                <select-option
+                  :option="{
+                    title: actualStrings.selectAllOptions,
+                    id: '!all!',
+                    initiallyVisible: true,
+                    visible: true,
+                    isDisabled: visibleOptionsCount < optionsCount,
+                    checked: allOptionsIsChecked,
+                    isIndeterminate: Object.keys(selected).length
+                      ? true
+                      : false,
+                  }"
+                  :is-toggle="isToggle"
+                  :name="actualName"
+                  :parent-auto-check="false"
+                  :is-multiple="isMultiple"
+                  :is-bookmarkable="false"
+                  @check="manageAll"
+                  :uid="uid"
+                  :only-end-nodes="onlyEndNodes"
+                  :show-input="showInputs"
+                ></select-option>
+              </template>
+
+              <template v-for="option in actualOptions" :key="option.value">
+                <slot
+                  :option="option"
+                  :name="actualName"
+                  :parent-auto-check="parentAutoCheck"
+                  :is-multiple="isMultiple"
+                  :uid="uid"
+                  :only-end-nodes="onlyEndNodes"
+                  :html-title="htmlOptionTitle"
+                  :show-input="showInputs"
+                >
+                  <select-option
+                    v-show="option.visible"
+                    :option="option"
+                    :is-toggle="isToggle"
+                    :name="actualName"
+                    :parent-auto-check="parentAutoCheck"
+                    :is-multiple="isMultiple"
+                    :is-bookmarkable="isBookmarkable"
+                    @check="registerCheck"
+                    @toggle-bookmark="toggleBookmark"
+                    :uid="uid"
+                    :only-end-nodes="onlyEndNodes"
+                    :html-title="htmlOptionTitle"
+                    :show-input="showInputs"
+                  ></select-option>
+                </slot>
+              </template>
+            </template>
+          </list>
+        </div>
+      </template>
+    </ib-dropdown>
+  </div>
+</template>
+
+<script>
+import IbInput from "../Form/Input/Input.vue";
+import Option from "./Option.vue";
+import Mark from "mark.js/dist/mark.es6.min";
+import generateUID from "../../helpers/generateUID";
+import IbDropdown from "../Dropdown/Dropdown.vue";
+import IbIcon from "../Icon.vue";
+import IbIconButton from "../IconButton/IconButton.vue";
+import List from "../List.vue";
+
+export default {
+  name: "IbTreeSelect",
+  props: {
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    searchPlaceholderText: {
+      type: String,
+      default: "",
+    },
+    clearButtonMessage: {
+      type: String,
+      default: "",
+    },
+    showClearButton: {
+      type: Boolean,
+      default: true,
+    },
+    isResizable: {
+      type: Boolean,
+      default: false,
+    },
+    initialSize: {
+      left: 0,
+      right: 0,
+    },
+    ariaLabel: {
+      type: String,
+      default: "",
+    },
+    name: String,
+    id: {
+      type: String,
+      default() {
+        return generateUID();
+      },
+    },
+    options: {
+      default() {
+        return [];
+      },
+    },
+    value: {
+      type: [Number, String, Array],
+      default() {
+        return [];
+      },
+    },
+    maxSelectedNames: {
+      type: Number,
+      default: 2,
+    },
+    isMultiple: {
+      type: Boolean,
+      default: true,
+    },
+    parentAutoCheck: {
+      type: Boolean,
+      default: true,
+    },
+    strings: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    onlyEndNodes: {
+      type: Boolean,
+      default: false,
+    },
+    isRequired: {
+      type: Boolean,
+      default: true,
+    },
+    htmlOptionTitle: {
+      type: Boolean,
+      default: false,
+    },
+    isBookmarkable: {
+      type: Boolean,
+      default: false,
+    },
+    initBookmarks: {
+      type: Array,
+      default: () => [],
+    },
+    showInputs: {
+      type: Boolean,
+      default(props) {
+        return props.isMultiple;
+      },
+    },
+    dependency: {
+      type: String,
+    },
+    filterId: {
+      type: String,
+      default() {
+        return generateUID();
+      },
+    },
+    staticPlaceholder: {
+      type: Boolean,
+      default: false,
+    },
+    useSearch: {
+      type: Boolean,
+      default: false,
+    },
+    isWatching: {
+      type: Boolean,
+      default: false,
+    },
+    vertical: {
+      type: String,
+    },
+    emptyMessage: {
+      type: String,
+      default: "",
+    },
+    allOptions: {
+      type: Boolean,
+      default: true,
+    },
+    watchClearValue: {
+      type: Boolean,
+      default: false,
+    },
+    isToggle: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    value(value) {
+      if (
+        this.watchClearValue &&
+        (!value || (Array.isArray(value) && !value.length))
+      ) {
+        this.setPreparedValues(this.actualOptions).then(() => {
+          const values = Object.keys(this.selected);
+          this.$globalEvents.$emit("select-" + this.filterId + ":update", {
+            values,
+            filter: this.filterId,
+          });
+        });
+      }
+    },
+    options() {
+      let isOptionsEqual = true;
+
+      if (typeof this.options === "function") {
+        isOptionsEqual = false;
+      } else {
+        const result = [];
+
+        const options = this.options;
+        Array.prototype.forEach.call(options, (option) => {
+          if (option.id !== undefined) result.push(option.id);
+        });
+
+        isOptionsEqual =
+          JSON.stringify(result) === JSON.stringify(this.optionsIdsWatch);
+        this.optionsIdsWatch = result;
+      }
+
+      if ((this.isInitialized && !isOptionsEqual) || this.isWatching) {
+        this.setPreparedValues().then(() => {
+          const values = Object.keys(this.selected);
+          this.$globalEvents.$emit("select-" + this.filterId + ":update", {
+            values,
+            filter: this.filterId,
+          });
+        });
+      }
+    },
+    dependency(newVal, oldVal) {
+      this.$nextTick(() => {
+        this.registerDependency(oldVal);
+      });
+    },
+    initBookmarks() {
+      this.actualBookmarkedOptions = {};
+      this.setBookmarkedOptions(this.actualOptions);
+    },
+  },
+  mounted() {
+    this.marker = new Mark(this.$refs.list.$el);
+
+    this.registerDependency();
+
+    this.$globalEvents.$on("select:refresh", () => {
+      this.setPreparedValues();
+    });
+
+    document.addEventListener("mousemove", this.onResize);
+    document.addEventListener("mouseup", this.endResizing);
+  },
+  data() {
+    this.defaultFilter = (options) => {
+      this.marker.unmark();
+      const filterString = this.filterString.toLowerCase().trim();
+      this.countVisibleChildren = this.filterFunc.call(
+        this,
+        options,
+        filterString
+      );
+
+      if (filterString) {
+        this.marker.mark(filterString);
+      }
+    };
+
+    return {
+      size: {
+        left: (this.initialSize && this.initialSize.left) || 0,
+        right: (this.initialSize && this.initialSize.right) || 0,
+      },
+      resizingProp: null,
+      isInitialized: false,
+      optionsIdsWatch: [],
+      isLoading: false,
+      actualName: this.isMultiple ? this.name + "[]" : this.name,
+      filterString: "",
+      actualOptions: [],
+      actualBookmarkedOptions: {},
+      selected: [],
+      allOptionsIsChecked: true,
+      countVisibleChildren: 0,
+      hasTreeChildren: false,
+      uid: `f${(~~(Math.random() * 1e8)).toString(16)}`,
+      actualStrings: {
+        ...{
+          searchPlaceholder: "Search placeholder",
+          // this.lang(
+          //   this.searchPlaceholderText.length
+          //     ? this.searchPlaceholderText
+          //     : "search_placeholder",
+          //   LANG_COMPONENTS.COMPONENT_SELECT
+          // ),
+          emptyTitle: "Empty title",
+          // this.lang(
+          //   "empty_title",
+          //   LANG_COMPONENTS.COMPONENT_SELECT
+          // ),
+          selectAllOptions: "All Options",
+          // this.lang(
+          //   "all_options",
+          //   LANG_COMPONENTS.COMPONENT_SELECT
+          // ),
+          allSelected: "All selected",
+          //  this.lang(
+          // "all_selected",
+          // LANG_COMPONENTS.COMPONENT_SELECT
+          // ),
+          loading: "loading",
+          // this.lang("loading", LANG_COMPONENTS.COMPONENT_SELECT) + "...",
+          selectedCount: "Selected {selected} of {all} items",
+          // this.lang(
+          //   "selected_count",
+          //   LANG_COMPONENTS.COMPONENT_SELECT
+          // ),
+          buttonTitle: "Button title",
+          // this.buttonTitle ||
+          // this.lang("button_title", LANG_COMPONENTS.COMPONENT_SELECT),
+          requiredDependencyNotFilled: "Required dependency are not filled",
+          // // eslint-disable-next-line vue/no-computed-properties-in-data
+          // this.requiredDependencyNotFilled ||
+          // this.lang(
+          //   "required_dependency_are_not_filled",
+          //   LANG_COMPONENTS.COMPONENT_SELECT
+          // ),
+        },
+        ...this.strings,
+      },
+      dependencyValue: null,
+    };
+  },
+  methods: {
+    startResizing(prop) {
+      this.resizingProp = prop;
+    },
+    endResizing() {
+      if (this.resizingProp) {
+        this.resizingProp = null;
+        this.$emit("resize", this.size);
+      }
+    },
+    onResize(event) {
+      switch (this.resizingProp) {
+        case "left":
+          this.size.left = Math.max(this.size.left - event.movementX, 0);
+          break;
+        case "right":
+          this.size.right = Math.max(this.size.right + event.movementX, 0);
+          break;
+      }
+    },
+    registerDependency(oldDependency) {
+      if (this.dependency) {
+        this.$globalEvents.$on(
+          "select-" + this.dependency + ":update",
+          (dependencyValue) => {
+            this.clear();
+            this.dependencyValue = dependencyValue;
+
+            if (
+              this.dependencyValue &&
+              this.dependencyValue.values &&
+              (!Array.isArray(this.dependencyValue.values) ||
+                this.dependencyValue.values.length)
+            ) {
+              this.setPreparedValues();
+            }
+          }
+        );
+        this.isLoading = false;
+      } else {
+        this.$globalEvents.$off("select-" + oldDependency + ":update");
+        this.setPreparedValues().then(() => {
+          const values = Object.keys(this.selected);
+          this.$globalEvents.$emit("select-" + this.filterId + ":update", {
+            values,
+            filter: this.filterId,
+          });
+        });
+      }
+    },
+    filter(filterString, options) {
+      this.filterString = filterString;
+      this.$emit("search", { search: this.filterString });
+      this.defaultFilter(options);
+    },
+    setPreparedValues(options) {
+      return this.prepare(options || this.options).then(
+        ([options, selected]) => {
+          this.actualOptions = options;
+          this.allOptionsIsChecked = this.checkIfOptionsChecked(options);
+          this.countVisibleChildren = options.length;
+          this.isInitialized = true;
+          this.selected = selected;
+          this.setBookmarkedOptions(options);
+        }
+      );
+    },
+    clear() {
+      this.actualOptions = [];
+      this.allOptionsIsChecked = false;
+      this.countVisibleChildren = 0;
+      this.selected = [];
+    },
+    clearValue() {
+      this.clear();
+      this.setPreparedValues();
+    },
+    prepare(options) {
+      return new Promise((res) => {
+        const selected = {},
+          promises = [];
+
+        let chain = Promise.resolve();
+
+        if (typeof options === "function") {
+          this.isLoading = true;
+
+          if (this.dependency) {
+            options = options.bind(null, this.dependencyValue);
+          }
+
+          chain = chain.then(options);
+        } else {
+          chain = chain.then(() => options);
+        }
+
+        chain
+          .then((options) => {
+            this.isLoading = false;
+
+            options.forEach((option) => {
+              option.initiallyVisible =
+                typeof option.visible === "undefined" ? true : option.visible;
+              option.visible = option.initiallyVisible;
+              option.isDisabled = false;
+
+              option.checked = this.isMultiple
+                ? this.value !== null &&
+                  this.value.findIndex((el) => option.id == el) > -1
+                : this.value !== null && this.value == option.id;
+
+              if (option.checked) {
+                if (!this.onlyEndNodes || !option.children) {
+                  selected[option.id] = option;
+                }
+              }
+
+              if (option.children) {
+                this.hasTreeChildren = true; //here
+                option.isChildrenVisible = false;
+              }
+
+              promises.push(
+                new Promise((res) => {
+                  if (option.children) {
+                    this.prepare(option.children).then(
+                      ([preparedChildren, selectedChildren]) => {
+                        option.children = preparedChildren;
+                        Object.assign(selected, selectedChildren);
+                        res(option);
+                      }
+                    );
+                  } else {
+                    res(option);
+                  }
+                })
+              );
+            });
+
+            return Promise.all(promises).then((options) => {
+              res([options, selected]);
+            });
+          })
+          .catch((err) => {
+            this.isLoading = false;
+            throw err;
+          });
+      });
+    },
+    filterFunc(options, filterString) {
+      let visibleOptionsCount = 0;
+
+      options.forEach((option) => {
+        let isVisible =
+          option.initiallyVisible &&
+          option.title.toString().toLowerCase().includes(filterString) &&
+          !this.actualBookmarkedOptions[option.id];
+
+        if (option.children && option.children.length) {
+          let visibleChildrenCount = this.filterFunc(
+            option.children,
+            filterString
+          );
+          visibleOptionsCount += visibleChildrenCount;
+
+          if (visibleChildrenCount) {
+            option.isChildrenVisible =
+              !!filterString ||
+              Boolean(Object.keys(this.actualBookmarkedOptions).length);
+            option.isDisabled =
+              visibleChildrenCount < option.children.length &&
+              !this.isBookmarkable;
+          }
+
+          if (!isVisible) {
+            isVisible = !!visibleChildrenCount;
+          } else if (!visibleChildrenCount) {
+            isVisible = false;
+          }
+        }
+
+        option.visible = isVisible;
+
+        if (isVisible) {
+          visibleOptionsCount++;
+        }
+      });
+
+      return visibleOptionsCount;
+    },
+    submit() {
+      this.change();
+      const values = Object.keys(this.selected);
+      this.$globalEvents.$emit("select-" + this.filterId + ":submit", {
+        values,
+        filter: this.filterId,
+      });
+      this.$emit("submit");
+    },
+    change() {
+      const values = Object.keys(this.selected);
+      if (this.isMultiple) {
+        this.$emit("input", values);
+      } else {
+        this.$emit("input", values[0]);
+      }
+      this.$globalEvents.$emit("select-" + this.filterId + ":update", {
+        values,
+        filter: this.filterId,
+      });
+      this.$refs.dropdown.close();
+    },
+    checkIfOptionsChecked(options) {
+      return options.every((option) => option.checked);
+    },
+    registerCheck(option, isChecked, isDirectChild) {
+      if (isChecked) {
+        option.checked = true;
+        if (this.isMultiple) {
+          if (
+            !(this.onlyEndNodes && option.children && option.children.length)
+          ) {
+            this.selected[option.id] = option;
+            this.$emit("input", Object.keys(this.selected));
+          }
+        } else {
+          const selectedOptionKey = Object.keys(this.selected)[0];
+
+          if (selectedOptionKey) {
+            this.selected[selectedOptionKey].checked = false;
+          }
+
+          this.selected = { [option.id]: option };
+          this.change();
+        }
+      } else {
+        delete this.selected[option.id];
+        option.checked = false;
+        this.$emit("input", Object.keys(this.selected));
+      }
+
+      this.toggleDuplicateOptions(this.actualOptions, option.id, isChecked);
+      if (isDirectChild) {
+        this.allOptionsIsChecked = this.checkIfOptionsChecked(
+          this.actualOptions
+        );
+      }
+    },
+    toggleDuplicateOptions(options, optionId, checked) {
+      for (let opt of options) {
+        if (opt.id === optionId) {
+          opt.checked = checked;
+        }
+        if (opt.children) {
+          this.toggleDuplicateOptions(opt.children, optionId, checked);
+        }
+      }
+    },
+    manageAll() {
+      this.allOptionsIsChecked = !this.allOptionsIsChecked;
+      this.traverseTree(this.actualOptions, (option) => {
+        this.registerCheck(option, this.allOptionsIsChecked, false);
+      });
+    },
+    traverseTree(tree, callback) {
+      tree.forEach((option) => {
+        callback(option);
+
+        if (option.children && option.children.length) {
+          this.traverseTree(option.children, callback);
+        }
+      });
+    },
+    getArrayOptions(options) {
+      let allOptions = [];
+      for (let option of options) {
+        allOptions.push(option);
+        if (option.children) {
+          allOptions = allOptions.concat(this.getArrayOptions(option.children));
+        }
+      }
+      return allOptions;
+    },
+    toggleBookmark(option) {
+      if (this.actualBookmarkedOptions[option.id]) {
+        delete this.actualBookmarkedOptions[option.id];
+      } else {
+        this.actualBookmarkedOptions[option.id] = option;
+      }
+
+      this.$emit("toggle-bookmarked-option", option.id);
+      this.filter(this.filterString, this.actualOptions);
+    },
+    setBookmarkedOptions(options) {
+      options.forEach((option) => {
+        if (option.children && option.children.length) {
+          this.setBookmarkedOptions(option.children);
+        } else {
+          if (this.initBookmarks.includes(option.id)) {
+            this.actualBookmarkedOptions[option.id] = option;
+          }
+        }
+      });
+      this.filter(this.filterString, options);
+    },
+  },
+  computed: {
+    hasTrigger() {
+      return !!this.$slots.trigger;
+    },
+    hasHierarchy() {
+      return this.actualOptions.some((option) => {
+        return option.children;
+      });
+    },
+    selectedKeys() {
+      return Object.keys(this.selected).filter((elem) => {
+        if (!this.onlyEndNodes || !this.selected[elem].children) {
+          return true;
+        }
+      });
+    },
+    selectStatus() {
+      if (this.staticPlaceholder) {
+        return this.placeholder;
+      } else if (this.isLoading) {
+        return this.actualStrings.loading;
+      } else if (!this.selectedKeys.length) {
+        return this.emptyMessage;
+      } else if (this.selectedKeys.length < this.maxSelectedNames) {
+        return this.selectedKeys
+          .map((key) => this.selected[key].title)
+          .join(",");
+      } else if (this.selectedKeys.length < this.optionsCount) {
+        return this.actualStrings.selectedCount
+          .replace("{selected}", this.selectedKeys.length)
+          .replace("{all}", this.optionsCount);
+      } else {
+        return this.actualStrings.allSelected;
+      }
+    },
+    isEmpty() {
+      return Array.isArray(this.value) ? !this.value.length : !this.value;
+    },
+    requiredDependencyNotFilled() {
+      return (
+        this.dependency &&
+        (!this.dependencyValue ||
+          !this.dependencyValue.values ||
+          !this.dependencyValue.values.length)
+      );
+    },
+    showSearch() {
+      return this.useSearch || this.optionsCount > 10;
+    },
+    arrayOfOptions() {
+      return this.getArrayOptions(this.actualOptions);
+    },
+    optionsCount() {
+      let ids = [];
+      for (let option of this.arrayOfOptions) {
+        if (
+          (!this.onlyEndNodes || !option.children) &&
+          !ids.includes(option.id)
+        ) {
+          ids.push(option.id);
+        }
+      }
+      return ids.length;
+    },
+    visibleOptionsCount() {
+      let ids = [];
+
+      this.traverseTree(this.actualOptions, (option) => {
+        if (
+          (!this.onlyEndNodes || !option.children) &&
+          !ids.includes(option.id) &&
+          option.visible
+        ) {
+          ids.push(option.id);
+        }
+      });
+
+      return (
+        ids.length +
+        (this.isBookmarkable
+          ? Object.keys(this.actualBookmarkedOptions).length
+          : 0)
+      );
+    },
+  },
+  components: {
+    IbIconButton,
+    IbIcon,
+    IbDropdown,
+    IbInput,
+    List,
+    "select-option": Option,
+  },
+  beforeUnmount() {
+    document.removeEventListener("mousemove", this.onResize);
+    document.removeEventListener("mouseup", this.endResizing);
+  },
+};
+</script>
+<style lang="scss">
+@import "./scss/select.scss";
+</style>