vueless 0.0.2 → 0.0.4

package/ui.form-select-multi/index.vue

@@ -1,882 +0,0 @@
-<template>
-  <div class="mono-multiselect-block">
-    <div :id="wrapperId" class="mono-multiselect-wrapper" :class="multiselectClass">
-      <label class="mono-multiselect-label" :class="labelClasses" :for="id">
-        {{ label }}
-      </label>
-
-      <Multiselect
-        :id="id"
-        ref="multiselect"
-        v-model="selectValue"
-        class="mono-multiselect"
-        :options="withInternalSearch ? options : asyncOptions"
-        :options-limit="optionsLimit"
-        :multiple="true"
-        :label="itemLabel"
-        :track-by="valueKey"
-        :open-direction="openDirection"
-        select-label=""
-        deselect-label=""
-        selected-label=""
-        hide-selected
-        :group-label="groupLabel"
-        :group-values="groupValues"
-        :disabled="disabled"
-        :placeholder="placeholderState"
-        :allow-empty="allowEmpty"
-        :internal-search="withInternalSearch"
-        :loading="isLoading"
-        :taggable="true"
-        :tag-position="tagPosition"
-        :data-cy="dataCy"
-        tag-placeholder=""
-        :searchable="searchable"
-        :option-height="optionHeight"
-        @open="onOpen"
-        @close="onClose"
-        @searchChange="onSearchChange"
-      >
-        <template #selection="{ values }">
-          <div class="tags">
-            <div v-for="(tag, index) in values" :key="index" class="tags-wrapper">
-              <div
-                class="tags-title"
-                :data-cy="`${dataCy}-item-${index}`"
-                :class="hideInactiveElement(tag)"
-              >
-                <!-- @slot Use it to add tag title. -->
-                <slot name="tag-title" :tag="tag">
-                  {{ tag[itemLabel] }}
-                </slot>
-              </div>
-
-              <UIcon
-                v-if="!disabled"
-                size="sm"
-                name="close"
-                interactive
-                color="gray"
-                :data-cy="`${dataCy}-close`"
-                @click="onClickRemoveValue(index)"
-              />
-            </div>
-          </div>
-        </template>
-
-        <template #noResult>
-          {{ i18n.listIsEmpty }}
-        </template>
-
-        <template #noOptions>
-          {{ i18n.noDataToShow }}
-        </template>
-
-        <template #afterList>
-          <li v-if="isSelectedAllOptions" class="multiselect__element">
-            <span class="multiselect__option">
-              {{ i18n.listIsEmpty }}
-            </span>
-          </li>
-
-          <div v-if="addOption" class="mono-multiselect-add-wrapper" @click="onClickAddOption">
-            <div class="mono-multiselect-add-title">
-              {{ i18n.add }}
-              <span class="mono-multiselect-add-title-command">{{ addOptionKeyCombination }}</span>
-            </div>
-
-            <UButton ref="addOptionButton" class="mono-multiselect-add-button">
-              <UIcon name="add" class="mono-multiselect-add-icon" color="white" pill size="2xs" />
-            </UButton>
-          </div>
-        </template>
-
-        <template #caret="{ toggle }">
-          <div
-            v-show="!selectValue.length"
-            class="mono-multiselect-angle"
-            @mousedown.prevent.stop="toggle"
-          >
-            <UIcon
-              color="gray"
-              name="expand_more"
-              class="icon"
-              interactive
-              :data-cy="`${dataCy}-caret`"
-            />
-          </div>
-
-          <div v-if="selectValue.length" class="mono-multiselect-clear" @click="onClickClearAll">
-            <div class="mono-multiselect-clear-text">
-              {{ i18n.clear }}
-            </div>
-          </div>
-        </template>
-
-        <template #option="props">
-          <!-- @slot Use it to add option. -->
-          <slot :scope-props="props" name="option" />
-
-          <div v-if="groupValues && !hasSlotContent($slots['option'])">
-            <div v-if="props.option.$groupLabel">
-              {{ props.option.$groupLabel }}
-            </div>
-
-            <div
-              v-else-if="props.option.isSubGroup"
-              class="group-label"
-              :style="leftMarginForSubCategory(props.option.level)"
-            >
-              {{ props.option[itemLabel] }}
-            </div>
-
-            <div v-else :style="leftMarginForSubCategory(props.option.level)" class="select-label">
-              <!-- @slot Use it to add something before option. -->
-              <slot :option="props.option" name="beforeOption"></slot>
-              {{ props.option[itemLabel] }}
-            </div>
-          </div>
-          <div v-else class="select-label">
-            <!-- @slot Use it to add something before option. -->
-            <slot :option="props.option" name="beforeOption"></slot>
-            {{ props.option[itemLabel] }}
-          </div>
-        </template>
-      </Multiselect>
-
-      <div v-if="hasSlotContent($slots['after-caret'])" class="after-caret">
-        <!-- @slot Use it to add something after caret. -->
-        <slot name="after-caret" />
-      </div>
-    </div>
-
-    <template v-if="description">
-      <div class="description">
-        {{ description }}
-      </div>
-    </template>
-
-    <p
-      v-if="error && !modelValue.length"
-      class="error-message"
-      :data-cy="`${dataCy}-error-message`"
-    >
-      {{ error }}
-    </p>
-  </div>
-</template>
-
-<script>
-import { getRandomId, isMac, PX_IN_REM } from "vueless/service.ui";
-import I18nServiceDefault from "vueless/service.i18n";
-import debounce from "lodash.debounce";
-import { useUI } from "vueless/composable.ui";
-
-import Multiselect from "vue-multiselect";
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-
-const OPTIONS_LIMIT = 50;
-
-export default {
-  name: "UMultiselect",
-
-  components: {
-    Multiselect,
-    UButton,
-    UIcon,
-  },
-
-  props: {
-    /**
-     * Generates unique element id.
-     * @ignore
-     */
-    id: {
-      type: String,
-      default: () => getRandomId(),
-    },
-
-    /**
-     * Set component select value.
-     */
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Set options for component.
-     */
-    options: {
-      type: Array,
-      default: () => [],
-    },
-
-    /**
-     * Set component label.
-     */
-    label: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Label from option Object, that will be visible in the dropdown.
-     */
-    itemLabel: {
-      type: String,
-      default: "label",
-    },
-
-    /**
-     * Set input placeholder.
-     */
-    placeholder: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Set error message.
-     */
-    error: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Make component inactive.
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Allows removing all selected values. Otherwise, one must be left selected.
-     */
-    allowEmpty: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Allow internal search.
-     */
-    withInternalSearch: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Set limits the options displayed in the dropdown to the first X options.
-     */
-    optionsLimit: {
-      type: Number,
-      default: OPTIONS_LIMIT,
-    },
-
-    /**
-     * Set track value key.
-     */
-    valueKey: {
-      type: String,
-      default: "id",
-    },
-
-    /**
-     * Fixed opening direction (instead of auto). Options are "above"/"top" or "below"/"bottom".
-     * @values auto, top, bottom
-     */
-    openDirection: {
-      type: String,
-      default: "auto",
-    },
-
-    /**
-     * Set description for component.
-     */
-    description: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * By default new tags will appear above the search results. Changing to 'bottom' will revert this behaviour and will proritize the search results.
-     * @values top, bottom
-     */
-    tagPosition: {
-      type: String,
-      default: "top",
-    },
-
-    /**
-     * Allow return full value properties.
-     */
-    returnFullValue: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set the name of the property containing the group label.
-     */
-    groupLabel: {
-      type: String,
-      default: "label",
-    },
-
-    /**
-     * Set the name of the property containing the group values.
-     */
-    groupValues: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Show add new option button to the list.
-     */
-    addOption: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Allow search value in a list.
-     */
-    searchable: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:modelValue", "open", "addOption", "searchChange"],
-
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
-    const { hasSlotContent } = useUI();
-
-    return { getTranslation, hasSlotContent };
-  },
-
-  data: () => ({
-    isLoading: false,
-    asyncValue: "",
-    asyncOptions: [],
-    isOpen: null,
-    isFocused: false,
-    optionHeight: 0,
-  }),
-
-  computed: {
-    wrapperId() {
-      return `wrapper${this.id}`;
-    },
-
-    selectValue: {
-      get() {
-        return this.modelValue
-          .map((item) => {
-            if (this.groupValues) {
-              const options = this.options.find((option) => {
-                return option[this.groupValues].find((value) => {
-                  return value[this.valueKey] === item;
-                });
-              });
-
-              return options[this.groupValues].find((value) => {
-                return value[this.valueKey] === item;
-              });
-            }
-
-            const value = item?.[this.valueKey] || item;
-
-            return this.options.find((option) => option[this.valueKey] === value);
-          })
-          .filter((value) => value);
-      },
-
-      set(value) {
-        let newValue = value;
-
-        if (!this.returnFullValue) newValue = value.map((item) => item[this.valueKey]);
-
-        this.$emit("update:modelValue", newValue);
-      },
-    },
-
-    multiselectClass() {
-      return {
-        error: this.error && !this.modelValue.length,
-        "mono-multiselect-wrapper-disabled": this.disabled,
-        "group-select": this.groupValues,
-      };
-    },
-
-    addOptionKeyCombination() {
-      return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
-    },
-
-    i18n() {
-      return {
-        clear: this.getTranslation("clear"),
-        listIsEmpty: this.getTranslation("listIsEmpty"),
-        noDataToShow: this.getTranslation("noDataToShow"),
-        addMore: this.getTranslation("addMore"),
-        add: this.getTranslation("add"),
-      };
-    },
-
-    isSelectedAllOptions() {
-      return this.options.length && this.options.length === this.selectValue.length;
-    },
-
-    labelClasses() {
-      return {
-        "label-color": this.isOpen,
-        "error-label": this.error && !this.modelValue.length,
-      };
-    },
-
-    placeholderState() {
-      return this.selectValue.length ? this.i18n.addMore : this.placeholder;
-    },
-
-    multiselectContentWrapper() {
-      return document.querySelector(`#${this.wrapperId} .multiselect__content-wrapper`);
-    },
-  },
-
-  watch: {
-    resetAsync() {
-      this.asyncValue = "";
-      this.asyncOptions = [];
-    },
-
-    isOpen: {
-      handler: "onChangeOpenState",
-      deep: true,
-    },
-  },
-
-  created() {
-    if (this.addOption) {
-      document.addEventListener("keydown", this.onKeydownAddOption);
-    }
-  },
-
-  mounted() {
-    if (this.addOption) {
-      this.$nextTick(() => {
-        this.multiselectContentWrapper.addEventListener("scroll", this.setAddOptionButtonPosition, {
-          passive: true,
-        });
-      });
-    }
-  },
-
-  beforeUnmount() {
-    if (this.addOption) {
-      document.removeEventListener("keydown", this.onKeydownAddOption);
-
-      this.multiselectContentWrapper.removeEventListener("scroll", this.setAddOptionButtonPosition);
-    }
-  },
-
-  methods: {
-    setAddOptionButtonPosition() {
-      const scrollBottomPosition = -this.multiselectContentWrapper.scrollTop;
-      const defaultButtonPosition = 9;
-      const addOptionPosition = (scrollBottomPosition + defaultButtonPosition) / PX_IN_REM;
-
-      this.$refs.addOptionButton.$el.style.bottom = `${addOptionPosition}rem`;
-    },
-
-    onKeydownAddOption(event) {
-      if (!this.isFocused) return;
-
-      const isEnter = event.keyCode === 13;
-      const isCtrl = event.ctrlKey;
-      const isMeta = event.metaKey;
-
-      if (isMeta && isEnter && isMac) {
-        this.$emit("addOption");
-      }
-
-      if (isEnter && isCtrl && !isMac) {
-        this.$emit("addOption");
-      }
-    },
-
-    onClickAddOption() {
-      this.$emit("addOption");
-    },
-
-    onOpen() {
-      this.$emit("open");
-      this.isOpen = true;
-      this.isFocused = true;
-    },
-
-    onClose() {
-      this.isOpen = false;
-
-      setTimeout(() => {
-        this.isFocused = false;
-      }, 100);
-    },
-
-    onClickRemoveValue(index) {
-      const intermediateValue = [...this.selectValue];
-
-      intermediateValue.splice(index, 1);
-
-      this.selectValue = intermediateValue;
-    },
-
-    onClickClearAll() {
-      this.selectValue = [];
-    },
-
-    onSearchChange: debounce(async function (query) {
-      this.$emit("searchChange", query);
-    }, 300),
-
-    onChangeOpenState() {
-      this.$nextTick(() => {
-        this.optionHeight =
-          this.$refs.multiselect.$refs.list.firstChild.firstElementChild.clientHeight;
-      });
-    },
-
-    hideInactiveElement(tag) {
-      const selectedId = this.options.find((option) => option.id === tag.id);
-
-      if (!selectedId) return;
-
-      return selectedId.isHidden ? "cross-out-option" : "";
-    },
-
-    leftMarginForSubCategory(level) {
-      const baseMargin = 1;
-
-      if (level > 1) {
-        return `margin-left: ${baseMargin * (level - 1)}rem`;
-      }
-    },
-  },
-};
-</script>
-
-<i18n>
-en:
-  listIsEmpty: "List is empty."
-  noDataToShow: "No data to show."
-  clear: "clear"
-  addMore: "Add more..."
-  add: Add
-ru:
-  listIsEmpty: "Список пуст."
-  noDataToShow: "Нет данных."
-  clear: "очистить"
-  addMore: "Добавить ещё..."
-  add: Добавить
-ua:
-  listIsEmpty: "Список порожній."
-  noDataToShow: "Дані відсутні."
-  clear: "очистити"
-  addMore: "Додати ще..."
-  add: Додати
-</i18n>
-
-<style lang="postcss" scoped>
-.mono-multiselect {
-  &-block {
-    @apply relative w-full;
-  }
-
-  &-wrapper {
-    @apply flex w-full items-center;
-    @apply rounded-lg border border-gray-300 bg-white;
-
-    &-disabled {
-      @apply border-gray-100 bg-gray-100;
-
-      &:hover {
-        @apply border-gray-100;
-      }
-
-      &:focus-within {
-        @apply border-gray-100 ring-0;
-      }
-    }
-
-    &:hover {
-      @apply border-gray-400;
-      @apply transition duration-100 ease-in-out;
-    }
-
-    &:focus-within {
-      @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
-    }
-
-    :deep(.multiselect) {
-      @apply flex flex-row-reverse justify-between;
-      @apply static min-h-full w-full overflow-hidden text-left;
-      @apply pt-6;
-    }
-
-    :deep(.multiselect__tags) {
-      @apply rounded-none border-0 bg-transparent;
-      @apply mb-px pb-3 pl-4 pr-4 pt-1;
-      @apply min-h-full w-full;
-    }
-
-    :deep(.multiselect__input) {
-      @apply text-base font-normal text-gray-900;
-      @apply !relative block !w-full align-top;
-      @apply mb-0 !pb-0 !pl-0 !pr-10 !pt-px;
-      @apply rounded-none border-none bg-white;
-
-      &:focus {
-        @apply shadow-none outline-none ring-0;
-      }
-
-      &::placeholder {
-        @apply font-normal text-gray-400;
-      }
-    }
-
-    :deep(.multiselect__placeholder) {
-      @apply hidden;
-    }
-
-    :deep(.multiselect--disabled) {
-      @apply rounded-lg bg-transparent;
-      @apply opacity-100;
-      @apply pointer-events-none;
-    }
-
-    :deep(.multiselect__content-wrapper) {
-      @apply my-2;
-      @apply rounded-lg border border-gray-300 shadow;
-      @apply absolute right-0 top-full;
-      @apply z-50 block max-h-60 w-full overflow-auto;
-      @apply bg-white;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    :deep(.multiselect__content) {
-      @apply inline-block list-none align-top;
-      @apply m-0 min-w-full p-0;
-    }
-
-    :deep(.multiselect--above) {
-      .multiselect__content-wrapper {
-        @apply !bottom-full top-auto;
-      }
-    }
-
-    :deep(.multiselect__element) {
-      @apply block;
-    }
-
-    :deep(.multiselect__option) {
-      @apply whitespace-nowrap text-base font-normal normal-case text-gray-900 no-underline;
-      @apply relative block cursor-pointer align-middle;
-      @apply px-3 py-2;
-
-      &:hover {
-        @apply bg-gray-100;
-      }
-
-      &:active {
-        @apply bg-gray-200 font-medium;
-      }
-
-      &:disabled {
-        @apply text-gray-500;
-      }
-    }
-
-    :deep(.multiselect__option--selected) {
-      @apply bg-gray-200 font-medium;
-
-      &:hover {
-        @apply bg-gray-200 font-medium;
-      }
-    }
-
-    :deep(.multiselect__option--highlight) {
-      @apply bg-gray-100;
-    }
-
-    :deep(.multiselect--disabled) {
-      .multiselect__input {
-        @apply !bg-gray-100;
-      }
-
-      .multiselect__single {
-        @apply font-normal text-gray-900;
-        @apply mb-px p-0;
-        @apply relative inline-block w-full align-top;
-        @apply border-none bg-gray-100;
-      }
-    }
-  }
-
-  &-angle {
-    @apply -mt-[0.188rem] mr-4 scale-125;
-    @apply cursor-pointer;
-  }
-
-  &--active .icon {
-    @apply rotate-180 transform transition-all duration-300;
-  }
-
-  &-clear {
-    @apply absolute bottom-3.5  pr-4;
-    @apply z-10 cursor-pointer;
-
-    &-text {
-      @apply transition-all duration-100 ease-in-out;
-      @apply text-sm font-normal text-gray-400;
-
-      &:hover {
-        @apply text-gray-500;
-      }
-    }
-
-    &:active {
-      @apply text-gray-700;
-    }
-  }
-
-  .tags {
-    &-wrapper {
-      @apply flex items-center justify-between;
-      @apply border border-l-0 border-r-0 border-t-0 border-gray-100;
-      @apply py-3;
-
-      &:last-child {
-        @apply mb-2.5;
-      }
-    }
-
-    &-title {
-      @apply text-base font-normal text-gray-900;
-      @apply overflow-hidden text-ellipsis whitespace-nowrap;
-    }
-  }
-}
-
-.select-label {
-  @apply flex;
-}
-
-.icon {
-  @apply transition-all duration-300;
-}
-
-.mono-multiselect-label {
-  @apply absolute left-4 top-2.5 block;
-  @apply text-sm font-normal text-gray-500;
-  @apply z-10;
-
-  &-color {
-    @apply text-sm font-normal text-gray-500;
-    z-index: 9999;
-  }
-}
-
-.description {
-  @apply text-xs font-normal text-gray-500/[85];
-  @apply pl-4 pt-2;
-}
-
-.error {
-  @apply border-red-300;
-
-  &:hover {
-    @apply border-red-400;
-  }
-
-  &:focus-within {
-    @apply border-red-500 ring-4 ring-red-100;
-  }
-
-  &-label {
-    @apply text-red-500;
-  }
-
-  &-message {
-    @apply text-xs font-normal text-red-500;
-    @apply mt-2 pl-4;
-  }
-}
-
-.after-caret {
-  @apply pr-4;
-}
-
-.group-select:deep(.multiselect__option--group) {
-  @apply !bg-transparent;
-  @apply !text-xs !font-medium uppercase !text-gray-500/[85] pb-1 mt-4;
-}
-
-.group-label {
-  @apply text-xs font-medium uppercase text-gray-500/[85];
-}
-
-.mono-multiselect-add {
-  &-wrapper {
-    @apply flex items-center justify-between;
-    @apply cursor-pointer;
-    @apply p-3;
-
-    &:hover {
-      @apply bg-gray-100;
-    }
-
-    &:active {
-      @apply bg-gray-200 font-medium;
-    }
-  }
-
-  &-title {
-    @apply text-base font-medium text-gray-900;
-
-    &-command {
-      @apply text-gray-500;
-    }
-  }
-
-  &-button {
-    @apply absolute bottom-[0.5625rem] right-3;
-    @apply rounded-full p-0;
-  }
-
-  &-icon {
-    @apply bg-transparent;
-    @apply p-0;
-
-    &:deep(svg) {
-      @apply !m-1;
-    }
-  }
-}
-
-.cross-out-option {
-  @apply line-through;
-}
-</style>