@milaboratories/uikit 1.2.3

package/src/components/PlDropdown/pl-dropdown.scss

@@ -0,0 +1,268 @@
+@import "@/assets/mixins";
+
+.ui-dropdown {
+  $root: &;
+
+  --contour-color: var(--txt-01);
+  --contour-border-width: 1px;
+  --options-bg: #fff;
+  --option-hover-bg: var(--btn-sec-hover-grey);
+
+  --label-offset-left-x: 8px;
+  --label-offset-right-x: 8px;
+  --label-color: var(--txt-01);
+
+  [data-theme='dark'] & {
+    --options-bg: #1b1b1f;
+  }
+
+  position: relative;
+  outline: none;
+  min-height: var(--control-height);
+  border-radius: 6px;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weigh-base);
+
+  &__envelope {
+    font-family: var(--control-font-family);
+    min-width: 160px;
+  }
+
+  label {
+    @include outlined-control-label();
+  }
+
+  &__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 6px;
+    min-height: var(--control-height);
+    color: var(--txt-01);
+  }
+
+  &__contour {
+    border-radius: var(--border-radius-control);
+    border: var(--contour-border-width) solid var(--contour-color);
+    box-shadow: var(--contour-box-shadow);
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  &__options {
+    position: relative;
+    background-color: var(--options-bg);
+    border-radius: 0 0 6px 6px;
+    max-height: 244px;
+    @include scrollbar;
+    border-top: 1px solid var(--color-div-black);
+
+    .nothing-found {
+      padding: 0 10px;
+      height: var(--control-height);
+      line-height: var(--control-height);
+      background-color: #fff;
+      opacity: 0.5;
+      font-style: italic;
+    }
+
+    .option {
+      position: relative;
+      padding: 0 30px 0 10px;
+      height: var(--control-height);
+      line-height: var(--control-height);
+      cursor: pointer;
+      user-select: none;
+
+      .checkmark {
+        position: absolute;
+        display: none;
+        @include abs-center-y();
+        right: 10px;
+      }
+
+      > span {
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        max-width: 100%;
+        text-overflow: ellipsis;
+      }
+
+      &.selected {
+        background-color: var(--color-active-select);
+        .checkmark {
+          display: block;
+        }
+      }
+
+      &.active:not(.selected) {
+        background-color: var(--option-hover-bg);
+      }
+
+      &:hover {
+        background-color: var(--option-hover-bg);
+      }
+    }
+  }
+
+  &__field {
+    position: relative;
+    border-radius: 6px;
+    overflow: hidden;
+    background: transparent;
+    padding: 0 11px;
+
+    min-height: var(--control-height);
+    line-height: var(--control-height);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .input-value {
+      outline: 1px solid red;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      padding: 0 48px 0 11px;
+      pointer-events: none;
+      line-height: var(--control-height);
+      color: var(--contour-color);
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
+    }
+
+    input {
+      min-height: calc(var(--control-height) - 2px);
+      line-height: calc(var(--control-height) - 2px);
+      font-family: inherit;
+      font-size: inherit;
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      width: calc(100% - 40px);
+      color: var(--txt-01);
+      caret-color: var(--border-color-focus);
+
+      &:focus {
+        outline: none;
+      }
+
+      &:placeholder-shown {
+        text-overflow: ellipsis;
+      }
+
+      &::placeholder {
+        color: var(--color-placeholder);
+      }
+    }
+
+    &:hover {
+      .clear {
+        display: block;
+      }
+    }
+  }
+
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
+  }
+
+  &__append {
+    padding-right: 24px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    .icon {
+      cursor: pointer;
+    }
+    .mask {
+      background-color: var(--control-mask-fill);
+      cursor: pointer;
+    }
+  }
+
+  .arrow {
+    position: absolute;
+    @include abs-center-y;
+    right: 12px;
+    background-color: var(--control-mask-fill);
+    @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
+  }
+
+  .arrow-altered {
+    position: absolute;
+    @include abs-center-y;
+    right: 12px;
+  }
+
+  .clear {
+    display: none;
+    position: absolute;
+    @include abs-center-y;
+    right: 36px;
+    z-index: 1;
+    @include icon(url('@/assets/images/16_clear.svg'), 16px); // @todo mask-image
+    cursor: pointer;
+  }
+
+  &.open,
+  &:focus-within {
+    z-index: 1;
+    --label-color: var(--txt-focus);
+  }
+
+  &.open {
+    #{$root}__container {
+      z-index: 1000;
+    }
+
+    #{$root}__field {
+      border-radius: 6px 6px 0 0;
+    }
+
+    .arrow {
+      background-color: var(--control-mask-fill);
+      @include mask(url(@/assets/images/16_chevron-up.svg), 16px);
+    }
+  }
+
+  &:hover {
+    --contour-color: var(--control-hover-color);
+  }
+
+  &:focus-within:not(.error) {
+    --label-color: var(--txt-focus);
+    --contour-color: var(--border-color-focus);
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow);
+  }
+
+  &:focus-within.error {
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--color-error-shadow);
+  }
+
+  &.error {
+    --contour-color: var(--txt-error);
+    --label-color: var(--txt-error);
+  }
+
+  &.disabled {
+    --contour-color: var(--color-dis-01);
+    --control-mask-fill: var(--color-dis-01);
+    --label-color: var(--color-dis-01);
+    cursor: not-allowed;
+  }
+}

package/src/components/PlDropdownLine/PlDropdownLine.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import './pl-dropdown-line.scss';
+import type { StyleValue } from 'vue';
+import { computed, nextTick, reactive, ref, toRef, watch } from 'vue';
+import { deepEqual } from '@/helpers/objects';
+import { useClickOutside } from '@/composition/useClickOutside';
+import { useFilteredList } from '@/composition/useFilteredList';
+import ResizableInput from './ResizableInput.vue';
+import { tapIf, tap } from '@/helpers/functions';
+import { scrollIntoView } from '@/helpers/dom';
+import DropdownListItem from '@/components/DropdownListItem.vue';
+import TabItem from '@/components/TabItem.vue';
+import type { ListOption } from '@/types';
+
+const emit = defineEmits(['update:modelValue']); // at the top always
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: unknown;
+    disabled?: boolean;
+    prefix?: string;
+    options: ListOption[]; // @todo extend with size field
+    placeholder?: string;
+    mode?: 'list' | 'tabs';
+    tabsContainerStyles?: StyleValue;
+    clearable?: boolean;
+  }>(),
+  {
+    mode: 'list',
+    placeholder: 'Select..',
+    prefix: '',
+    tabsContainerStyles: undefined,
+    clearable: false,
+  },
+);
+
+const data = reactive({
+  isOpen: false,
+  activeOption: -1,
+});
+
+const container = ref<HTMLElement>();
+
+const list = ref<HTMLElement>();
+
+const classes = computed(() => {
+  const classesResult = [];
+  if (data.isOpen) {
+    classesResult.push('open');
+  }
+  if (props.disabled) {
+    classesResult.push('disabled');
+  }
+  return classesResult.join(' ');
+});
+
+const searchPhrase = ref<string>('');
+
+const options = useFilteredList(toRef(props, 'options'), searchPhrase);
+
+const canShowClearBtn = computed<boolean>(() => !!(props.clearable && data.isOpen && props.modelValue && modelText.value));
+
+const modelText = computed<string>(() => {
+  if (props.modelValue) {
+    const index = getIndexForModelInItems();
+    if (index !== -1) {
+      const item = props.options[index];
+      if (typeof item['text'] === 'object') {
+        return item['text']['title'];
+      } else {
+        return item['text'];
+      }
+    }
+  }
+  return '';
+});
+
+const inputModel = ref(modelText.value);
+
+const placeholderVal = computed(() => {
+  if (data.isOpen) {
+    if (searchPhrase.value && searchPhrase.value.length >= modelText.value.length - 1) {
+      return searchPhrase.value;
+    }
+  }
+
+  return modelText.value || '...';
+});
+
+useClickOutside(container, () => {
+  if (props.mode === 'list') {
+    data.isOpen = false;
+  }
+});
+
+watch(
+  () => inputModel.value,
+  (val) => {
+    if (modelText.value !== val) {
+      searchPhrase.value = val;
+    } else {
+      searchPhrase.value = '';
+    }
+  },
+);
+
+watch(
+  () => data.isOpen,
+  (value: boolean) => {
+    if (value && container.value) {
+      container.value.querySelector('input')?.focus();
+      nextTick(() => scrollIntoActive());
+    }
+  },
+);
+
+watch(
+  () => props.modelValue,
+  () => updateSelected(),
+  { immediate: true },
+);
+
+function getIndexForModelInItems(): number | -1 {
+  return props.options.findIndex((o: ListOption) => {
+    return deepEqual(o.value, props.modelValue);
+  });
+}
+
+function updateSelected() {
+  data.activeOption = tap(
+    options.value.findIndex((o: ListOption) => {
+      return deepEqual(o.value, props.modelValue);
+    }),
+    (v) => (v < 0 ? 0 : v),
+  );
+  inputModel.value = modelText.value;
+}
+
+function resetSearchPhrase() {
+  searchPhrase.value = '';
+}
+
+function toggleList(): void {
+  if (props.disabled) {
+    data.isOpen = false;
+  } else {
+    nextTick(() => {
+      data.isOpen = !data.isOpen;
+    });
+  }
+}
+
+function closePopupIfNeeded() {
+  if (props.mode === 'list') {
+    data.isOpen = false;
+  }
+}
+
+function selectItem(item?: ListOption): void {
+  if (item) {
+    emit('update:modelValue', item.value);
+    closePopupIfNeeded();
+    resetSearchPhrase();
+  }
+}
+
+function isItemSelected(item: ListOption): boolean {
+  return deepEqual(item.value, props.modelValue);
+}
+
+function onBlur(event: Event) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (!container?.value?.contains((event as any).relatedTarget)) {
+    data.isOpen = false;
+    searchPhrase.value = '';
+  }
+}
+
+function handleKeydown(e: { code: string; preventDefault(): void }) {
+  const { activeOption } = data;
+
+  if (!data.isOpen && e.code === 'Enter') {
+    data.isOpen = true;
+    return;
+  }
+
+  const { length } = options.value;
+
+  if (!length) {
+    return;
+  }
+
+  if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {
+    e.preventDefault();
+  }
+
+  if (e.code === 'Enter') {
+    selectItem(options.value[activeOption]);
+  }
+
+  const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;
+
+  data.activeOption = Math.abs(activeOption + d + length) % length;
+
+  requestAnimationFrame(scrollIntoActive);
+}
+
+function scrollIntoActive() {
+  const $list = list.value;
+  if (!$list) {
+    return;
+  }
+  tapIf($list.querySelector('.hovered-item'), (el: Element) => {
+    if (props.mode === 'list') {
+      scrollIntoView($list, el as HTMLElement);
+    } else {
+      el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    }
+  });
+}
+
+function clearModel() {
+  emit('update:modelValue', undefined);
+}
+</script>
+
+<template>
+  <!-- {{ inputModel }} -->
+  <div
+    ref="container"
+    tabindex="0"
+    :class="classes"
+    class="ui-line-dropdown uc-pointer"
+    @keydown="handleKeydown"
+    @focusout="onBlur"
+    @click="toggleList"
+  >
+    <div class="ui-line-dropdown__prefix">{{ props?.prefix }}</div>
+
+    <ResizableInput v-model="inputModel" :placeholder="placeholderVal" :disabled="props.disabled" class="ui-line-dropdown__input" />
+
+    <div class="ui-line-dropdown__icon-wrapper">
+      <div v-show="!canShowClearBtn" class="ui-line-dropdown__icon" />
+      <div v-show="canShowClearBtn" class="ui-line-dropdown__icon-clear" @click="clearModel" />
+    </div>
+    <div v-if="props.mode === 'list'" v-show="data.isOpen" ref="list" class="ui-line-dropdown__items">
+      <template v-for="(item, index) in options" :key="index">
+        <slot
+          name="item"
+          :item="item"
+          :text-item="'text'"
+          :is-selected="isItemSelected(item)"
+          :is-hovered="data.activeOption == index"
+          @click.stop="selectItem(item)"
+        >
+          <DropdownListItem
+            :option="item"
+            :text-item="'text'"
+            :is-selected="isItemSelected(item)"
+            :is-hovered="data.activeOption == index"
+            size="medium"
+            @click.stop="selectItem(item)"
+          />
+        </slot>
+      </template>
+
+      <div v-if="options.length === 0" class="ui-line-dropdown__no-item">
+        <div class="ui-line-dropdown__no-item-title text-s">Didn't find anything that matched</div>
+      </div>
+    </div>
+    <div v-if="props.mode === 'tabs'" v-show="data.isOpen" ref="list" :style="props.tabsContainerStyles" class="ui-line-dropdown__items-tabs">
+      <template v-for="(item, index) in options" :key="index">
+        <slot name="item" :item="item" :is-selected="isItemSelected(item)" :is-hovered="data.activeOption == index" @click.stop="selectItem(item)">
+          <TabItem :item="item" :is-selected="isItemSelected(item)" :is-hovered="data.activeOption == index" @click.stop="selectItem(item)" />
+        </slot>
+      </template>
+      <div v-if="options.length === 0" class="ui-line-dropdown__no-item">
+        <div class="ui-line-dropdown__no-item-title text-s">Didn't find anything that matched</div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/PlDropdownLine/ResizableInput.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import './resizable-input.scss';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  modelValue?: string;
+  placeholder?: string;
+  value?: string;
+  disabled?: boolean;
+  maxWidth?: string;
+  width?: string;
+}>();
+
+const emit = defineEmits(['input', 'update:modelValue']);
+
+const text = computed(() => {
+  if (props.placeholder) {
+    return props.placeholder;
+  }
+  return (props.modelValue || props.value)?.replace('"', '');
+});
+
+const styles = computed(() => {
+  const stl: Record<string, string> = {};
+  if (props.width) {
+    stl['width'] = props.width;
+  }
+  if (props.maxWidth) {
+    stl['maxWidth'] = props.maxWidth;
+  }
+  return stl;
+});
+
+function handleInput(event: Event) {
+  const value = (event.target as HTMLInputElement).value;
+  emit('update:modelValue', value);
+}
+</script>
+
+<template>
+  <div class="resizable-input">
+    <span :style="styles" class="resizable-input__size-span">{{ text }}</span>
+    <input v-bind="$attrs" :placeholder="placeholder" :value="props.modelValue" :disabled="props.disabled" :style="styles" @input="handleInput" />
+  </div>
+</template>

package/src/components/PlDropdownLine/index.ts

@@ -0,0 +1 @@
+export { default as PlDropdownLine } from './PlDropdownLine.vue';