vueless 0.0.3 → 0.0.4

package/ui.form-select/index.vue

@@ -1,753 +0,0 @@
-<template>
-  <ULabel
-    ref="labelComponentRef"
-    :for="id"
-    :size="size"
-    :label="label"
-    :error="errorMessage"
-    :description="descriptionMessage"
-    :align="labelAlign"
-    :disabled="disabled"
-    :data-cy="dataCy"
-    v-bind="labelAttrs"
-  >
-    <div
-      ref="wrapperRef"
-      :tabindex="searchable ? -1 : 0"
-      role="combobox"
-      :aria-owns="'listbox-' + id"
-      v-bind="wrapperAttrs"
-      @focus="activate"
-      @blur="deactivate"
-      @keydown.self.down.prevent="dropdownListRef.pointerForward"
-      @keydown.self.up.prevent="dropdownListRef.pointerBackward"
-      @keydown.enter.tab.stop.self="dropdownListRef.addPointerElement"
-      @keyup.esc="deactivate"
-    >
-      <div
-        v-if="hasSlotContent($slots['after-caret']) && !(multiple && localValue.length)"
-        v-bind="afterCaretSlotAttrs"
-      >
-        <!-- @slot Use it to add something after caret. -->
-        <slot :scope-props="props" name="after-caret" />
-      </div>
-
-      <div
-        v-show="!multiple || (!isLocalValue && multiple)"
-        v-bind="caretToggleAttrs"
-        @mousedown.prevent.stop="toggle"
-      >
-        <UIcon
-          interactive
-          color="gray"
-          :size="size"
-          :name="config.iconToggleName"
-          v-bind="iconToggleAttrs"
-        />
-      </div>
-
-      <div
-        v-if="hasSlotContent($slots['before-caret']) && !(multiple && localValue.length)"
-        v-bind="beforeCaretSlotAttrs"
-      >
-        <!-- @slot Use it to add something after caret. -->
-        <slot :scope-props="props" name="before-caret" />
-      </div>
-
-      <div v-if="isLocalValue && !noClear && !disabled && !multiple" v-bind="caretClearAttrs">
-        <UIcon
-          interactive
-          color="gray"
-          :size="size"
-          :name="config.iconClearName"
-          v-bind="iconClearAttrs"
-          @mousedown="removeElement"
-        />
-      </div>
-
-      <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">
-        <div v-if="multiple" v-bind="selectedLabelsAttrs">
-          <span v-for="item in localValue" :key="item[valueKey]" v-bind="selectedLabelAttrs">
-            <!-- @slot Use it to add selected value label. -->
-            <slot
-              name="selected-label"
-              :selected-label="getOptionLabel(item)"
-              :value="item[valueKey]"
-              :raw-option="item"
-            >
-              {{ getOptionLabel(item) }}
-            </slot>
-
-            <!-- @slot Use it to add selected value label. -->
-            <slot :scope-props="props" name="selected-label-after" />
-
-            <div
-              v-if="!disabled"
-              v-bind="caretRemoveItemAttrs"
-              @mousedown.prevent.capture
-              @click.prevent.capture
-            >
-              <UIcon
-                interactive
-                color="gray"
-                :size="size"
-                :name="config.iconRemoveItemName"
-                v-bind="iconRemoveItemAttrs"
-                @mousedown="removeElement(item)"
-              />
-            </div>
-          </span>
-        </div>
-
-        <div v-bind="searchAttrs">
-          <span
-            v-if="hasSlotContent($slots['left'])"
-            ref="leftSlotWrapperRef"
-            v-bind="leftSlotAttrs"
-          >
-            <!-- @slot Use it to add some component before text. -->
-            <slot name="left" />
-          </span>
-
-          <input
-            v-show="searchable || !localValue || multiple || !isOpen"
-            :id="id"
-            ref="searchInputRef"
-            v-model="search"
-            :name="name"
-            type="text"
-            autocomplete="off"
-            :spellcheck="false"
-            :placeholder="inputPlaceholder"
-            :value="search"
-            :disabled="disabled"
-            :aria-controls="'listbox-' + id"
-            v-bind="searchInputAttrs"
-            @focus="activate"
-            @blur.prevent="deactivate"
-            @keyup.esc="deactivate"
-            @keydown.down.prevent="dropdownListRef.pointerForward"
-            @keydown.up.prevent="dropdownListRef.pointerBackward"
-            @keydown.enter.prevent.stop.self="dropdownListRef.addPointerElement"
-          />
-        </div>
-
-        <span
-          v-if="isSelectedValueLabelVisible"
-          v-bind="selectedLabelAttrs"
-          @mousedown.prevent="toggle"
-        >
-          <!-- @slot Use it to add selected value label. -->
-          <slot name="selected-label" :selected-label="selectedLabel" :value="localValue[valueKey]">
-            {{ selectedLabel }}
-          </slot>
-
-          <!-- @slot Use it to add selected value label. -->
-          <slot :scope-props="props" name="selected-label-after" />
-        </span>
-
-        <div
-          v-if="isLocalValue && !noClear && !disabled && multiple"
-          v-bind="caretClearTextAttrs"
-          @mousedown.prevent.capture="removeElement(localValue)"
-          @click.prevent.capture
-          v-text="i18n.clear"
-        />
-      </div>
-
-      <UDropdownList
-        v-show="isOpen"
-        ref="dropdownListRef"
-        v-model="dropdownValue"
-        :options="filteredOptions"
-        :disabled
-        :size
-        :max-height="optimizedHeight"
-        :option-height="optionHeight"
-        :value-key
-        :label-key
-        :add-option
-        tabindex="-1"
-        v-bind="dropdownListAttrs"
-        @focus="activate"
-        @addOption="onAddOption"
-        @mousedown.prevent.capture
-        @click.prevent.capture
-      >
-        <template #before-option="{ option }">
-          <!-- @slot Use it to add something before option. -->
-          <slot :option="option" name="before-option" />
-        </template>
-
-        <template #option="{ option, index }">
-          <slot name="option" :option="option" :index="index" />
-        </template>
-
-        <template #after-option="{ option }">
-          <!-- @slot Use it to add something after option. -->
-          <slot :option="option" name="after-option" />
-        </template>
-
-        <template #empty="{ emptyStyles }">
-          <span v-show="isEmpty" :class="emptyStyles" v-text="i18n.listIsEmpty" />
-          <span
-            v-show="options.length === 0 && !search && !isEmpty"
-            :class="emptyStyles"
-            v-text="i18n.noDataToShow"
-          />
-        </template>
-      </UDropdownList>
-    </div>
-  </ULabel>
-</template>
-
-<script setup>
-import { ref, computed, nextTick, watch, useSlots, onMounted } from "vue";
-import debounce from "lodash.debounce";
-
-import UIService, { getRandomId, isMac } from "vueless/service.ui";
-import I18nServiceDefault from "@vueless/services/i18n";
-
-import SelectService from "./services/select.service";
-import useAttrs from "./composables/attrs.composable";
-import defaultConfig from "./configs/default.config";
-import { USelect, DIRECTION, KEY_CODES } from "./constants";
-
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "USelect", inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Select value.
-   */
-  modelValue: {
-    type: [String, Number, Array],
-    default: "",
-  },
-
-  /**
-   * Select options.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Select label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Show label outside the select block.
-   */
-  labelOutside: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, USelect).default.labelOutside,
-  },
-
-  /**
-   * Select placeholder.
-   */
-  placeholder: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Select description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Select error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Select size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: UIService.get(defaultConfig, USelect).default.size,
-  },
-
-  /**
-   * Select open direction.
-   * @values auto, top, bottom
-   */
-  openDirection: {
-    type: String,
-    default: UIService.get(defaultConfig, USelect).default.openDirection,
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: UIService.get(defaultConfig, USelect).default.labelKey,
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: UIService.get(defaultConfig, USelect).default.valueKey,
-  },
-
-  /**
-   * Set a name of the property containing the group label.
-   */
-  // TODO: groupLabelKey ???
-  groupLabel: {
-    type: String,
-    default: "label",
-  },
-
-  /**
-   * Set a name of the property containing the group values.
-   */
-  // TODO: groupValueKey ???
-  groupValues: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * name attribute to match optional label element.
-   */
-  // TODO: what is it?
-  name: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Number of options displayed in the dropdown.
-   */
-  optionsLimit: {
-    type: Number,
-    default: UIService.get(defaultConfig, USelect).default.optionsLimit,
-  },
-
-  /**
-   * Sets maxHeight style value of the dropdown
-   */
-  // TODO: Should be in option amount not in pixels (option may have be different height)
-  maxHeight: {
-    type: Number,
-    default: UIService.get(defaultConfig, USelect).default.maxHeight,
-  },
-
-  // TODO: there is no desc
-  optionHeight: {
-    type: Number,
-    default: UIService.get(defaultConfig, USelect).default.optionHeight,
-  },
-
-  /**
-   * Allow clearing selected value.
-   */
-  noClear: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, USelect).default.noClear,
-  },
-
-  /**
-   * Allows multiple selection.
-   */
-  multiple: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, USelect).default.multiple,
-  },
-
-  /**
-   * Allows to search value in a list.
-   */
-  searchable: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, USelect).default.searchable,
-  },
-
-  /**
-   * Disable the select.
-   */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, USelect).default.disabled,
-  },
-
-  /**
-   * Show "Add new option" button in the list.
-   */
-  addOption: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, USelect).default.addOption,
-  },
-
-  /**
-   * Generates unique element id.
-   * @ignore
-   */
-  id: {
-    type: String,
-    default: () => getRandomId(),
-  },
-
-  /**
-   * Component ui config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-cy attribute for automated testing.
-   */
-  dataCy: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  "open",
-  "close",
-  "searchChange",
-  "remove",
-  "update:modelValue",
-  "select",
-  "addOption",
-  "change",
-]);
-
-const slots = useSlots();
-
-const { getTranslation } = new I18nServiceDefault();
-
-const isOpen = ref(false);
-const preferredOpenDirection = ref(DIRECTION.bottom);
-const search = ref("");
-const optimizedHeight = ref(props.maxHeight);
-
-const dropdownListRef = ref(null);
-const wrapperRef = ref(null);
-const searchInputRef = ref(null);
-const labelComponentRef = ref(null);
-const leftSlotWrapperRef = ref(null);
-const innerWrapperRef = ref(null);
-
-const i18n = computed(() => {
-  return {
-    clear: getTranslation("clear"),
-    listIsEmpty: getTranslation("listIsEmpty"),
-    noDataToShow: getTranslation("noDataToShow"),
-    addMore: getTranslation("addMore"),
-    add: getTranslation("add"),
-  };
-});
-
-const inputPlaceholder = computed(() => {
-  return props.multiple && localValue.value.length ? i18n.value.addMore : props.placeholder;
-});
-
-const dropdownValue = computed({
-  get: () => props.modelValue,
-  set: (newValue) => {
-    let value = newValue;
-
-    if (props.multiple) {
-      value = Array.isArray(props.modelValue) ? [...props.modelValue, newValue] : [newValue];
-    }
-
-    emit("update:modelValue", value);
-    deactivate();
-  },
-});
-
-const isSelectedValueLabelVisible = computed(() => {
-  return !props.multiple && isLocalValue.value && (!isOpen.value || !props.searchable);
-});
-
-const selectedLabel = computed(() => {
-  return isLocalValue.value ? getOptionLabel(localValue.value) : "";
-});
-
-const labelAlign = computed(() => {
-  return props.labelOutside ? "top" : "topInside";
-});
-
-const isTop = computed(() => {
-  if (props.openDirection === DIRECTION.top) return true;
-  if (props.openDirection === DIRECTION.bottom) return false;
-
-  return preferredOpenDirection.value === DIRECTION.top;
-});
-
-const filteredOptions = computed(() => {
-  const normalizedSearch = search.value.toLowerCase().trim();
-
-  let options = props.multiple
-    ? SelectService.removeSelectedValues(
-        props.options,
-        props.groupValues,
-        props.valueKey,
-        props.modelValue,
-      )
-    : [...props.options];
-
-  options = props.groupValues
-    ? filterAndFlat(options, normalizedSearch, props.labelKey)
-    : SelectService.filterOptions(options, normalizedSearch, props.labelKey);
-
-  return options.slice(0, props.optionsLimit);
-});
-
-const localValue = computed(() => {
-  if (!props.multiple) {
-    return SelectService.getCurrentOption(
-      props.modelValue,
-      props.options,
-      props.groupValues,
-      props.valueKey,
-    );
-  }
-
-  return props.modelValue
-    ? props.modelValue.map((item) =>
-        SelectService.getCurrentOption(item, props.options, props.groupValues, props.valueKey),
-      )
-    : [];
-});
-
-const isEmpty = computed(() => {
-  return (
-    (filteredOptions.value.length === 0 && search) ||
-    (props.multiple && localValue.value.length === props.options.length)
-  );
-});
-
-const isLocalValue = computed(() => {
-  if (props.multiple) return Boolean(localValue.value.length);
-
-  return typeof localValue.value !== "number"
-    ? Boolean(localValue.value)
-    : Boolean(String(localValue.value));
-});
-
-const errorMessage = computed(() => {
-  return !isOpen.value && props.error ? props.error : "";
-});
-
-const descriptionMessage = computed(() => {
-  return !isOpen.value && props.description ? props.description : "";
-});
-
-watch(search, () => onSearchChange);
-watch(
-  localValue,
-  () => {
-    setLabelPosition();
-    emit("change");
-  },
-  { deep: true },
-);
-
-if (props.addOption) {
-  document.addEventListener("keydown", onKeydownAddOption);
-}
-
-onMounted(() => setLabelPosition());
-
-const onSearchChange = debounce(async function (query) {
-  emit("searchChange", query);
-}, 300);
-
-function getOptionLabel(option) {
-  if (!option) return "";
-  if (option.$isLabel) return option.$groupLabel;
-
-  return option[props.labelKey] || "";
-}
-
-function onKeydownAddOption(event) {
-  if (!isOpen.value) return;
-
-  const isEnter = event.keyCode === KEY_CODES.enter;
-  const isCtrl = event.ctrlKey;
-  const isMeta = event.metaKey;
-
-  if (isMeta && isEnter && isMac) {
-    emit("addOption");
-  }
-
-  if (isEnter && isCtrl && !isMac) {
-    emit("addOption");
-  }
-}
-
-function onAddOption() {
-  emit("addOption");
-}
-
-function filterAndFlat(options, search, label) {
-  const filteredGroups = SelectService.filterGroups(
-    options,
-    search,
-    label,
-    props.groupValues,
-    props.groupLabel,
-  );
-
-  return SelectService.flattenOptions(filteredGroups, props.groupValues, props.groupLabel);
-}
-
-function toggle() {
-  isOpen.value ? deactivate() : activate();
-}
-
-function deactivate() {
-  if (!isOpen.value) return;
-
-  props.searchable && searchInputRef.value ? searchInputRef.value.blur() : wrapperRef.value?.blur();
-
-  search.value = "";
-  isOpen.value = false;
-
-  nextTick(() => emit("close", localValue.value, props.id));
-}
-
-function activate() {
-  if (props.isOpen || props.disabled) return;
-
-  adjustPosition();
-
-  isOpen.value = true;
-
-  if (props.searchable) {
-    search.value = "";
-
-    nextTick(() => searchInputRef.value && searchInputRef.value.focus());
-  }
-
-  if (wrapperRef.value !== undefined && !props.searchable) wrapperRef.value.focus();
-
-  emit("open", props.id);
-}
-
-function adjustPosition() {
-  if (typeof window === "undefined") return;
-
-  const spaceAbove = wrapperRef.value.getBoundingClientRect().top;
-  const spaceBelow = window.innerHeight - wrapperRef.value.getBoundingClientRect().bottom;
-  const hasEnoughSpaceBelow = spaceBelow > props.maxHeight;
-
-  if (hasEnoughSpaceBelow || spaceBelow > spaceAbove || props.openDirection === DIRECTION.bottom) {
-    preferredOpenDirection.value = DIRECTION.bottom;
-    // TODO: magic numbers
-    optimizedHeight.value = Math.min(spaceBelow - 40, props.maxHeight);
-  } else {
-    preferredOpenDirection.value = DIRECTION.top;
-    optimizedHeight.value = Math.min(spaceAbove - 40, props.maxHeight);
-  }
-}
-
-function removeElement(option, shouldClose = true) {
-  if (props.disabled) return;
-  if (option.$isDisabled) return;
-
-  if (props.noClear && !props.multiple) {
-    deactivate();
-
-    return;
-  }
-
-  let value = "";
-
-  if (props.multiple) {
-    value = !Array.isArray(option)
-      ? [...props.modelValue].filter((item) => item !== option[props.valueKey])
-      : [];
-  }
-
-  emit("update:modelValue", value);
-  emit("remove", option, props.id);
-
-  if (shouldClose) {
-    deactivate();
-  }
-}
-
-function setLabelPosition() {
-  if (props.labelOutside || !hasSlotContent(slots["left"])) return;
-
-  const leftSlotWidth = leftSlotWrapperRef.value.getBoundingClientRect().width;
-  const innerWrapperPaddingLeft = parseInt(
-    window.getComputedStyle(innerWrapperRef.value).paddingLeft,
-  );
-
-  if (props.multiple && localValue.value.length >= 1) {
-    labelComponentRef.value.labelElement.style.left = `${leftSlotWidth - innerWrapperPaddingLeft}px`;
-    leftSlotWrapperRef.value.classList.remove("group-[]/placement-inside:-mt-4");
-  } else {
-    labelComponentRef.value.labelElement.style.left = `${leftSlotWidth + innerWrapperPaddingLeft}px`;
-  }
-}
-
-const {
-  config,
-  hasSlotContent,
-  labelAttrs,
-  wrapperAttrs,
-  innerWrapperAttrs,
-  leftSlotAttrs,
-  beforeCaretSlotAttrs,
-  afterCaretSlotAttrs,
-  caretToggleAttrs,
-  iconToggleAttrs,
-  caretClearAttrs,
-  caretClearTextAttrs,
-  iconClearAttrs,
-  caretRemoveItemAttrs,
-  iconRemoveItemAttrs,
-  searchAttrs,
-  searchInputAttrs,
-  selectedLabelsAttrs,
-  selectedLabelAttrs,
-  dropdownListAttrs,
-} = useAttrs(props, { isTop, isOpen, selectedLabel });
-</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>