@milaboratories/uikit 1.2.3

package/src/components/PlDropdownLine/pl-dropdown-line.scss

@@ -0,0 +1,144 @@
+@import "@/assets/mixins";
+
+.ui-line-dropdown {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    padding: 8px 0;
+    box-sizing: border-box;
+    position: relative;
+    outline: none;
+    max-width: 256px;
+
+    $this: &;
+
+    &:focus-within::after {
+        border-bottom: 2px solid var(--border-color-focus);
+        // box-shadow: 0 2px 2px 0px var(--border-color-focus-shadow);
+    }
+
+    &__prefix,
+    &__input {
+        text-transform: uppercase;
+    }
+
+    // &.active::after {
+    //     border-bottom: 2px solid var(--border-color-focus);
+    // }
+
+    &:hover::after {
+        border-bottom: 2px solid var(--border-color-focus);
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        border-bottom: 2px solid var(--color-div-grey);
+        width: 100%;
+    }
+
+    * {
+        color: var(--txt-01);
+        font-family: var(--font-family-base);
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 14px;
+        letter-spacing: 0.52px;
+    }
+
+    &__input::placeholder {
+        color: var(--txt-mask);
+    }
+
+    &__icon {
+        display: flex;
+        align-items: center;
+        min-width: 16px;
+        background-color: var(--control-mask-fill);
+        @include mask(url(@/assets/images/16_chevron-down.svg), 16px);
+    }
+
+    &__icon-clear {
+        @include mask(url(@/assets/images/16_clear.svg), 16px);
+        background-color: var(--color-ic-02);
+    }
+
+    &.open {
+        #{$this}__icon {
+            @include mask(url(@/assets/images/16_chevron-up.svg), 16px);
+        }
+    }
+
+    &.open::after {
+        border-bottom: 2px solid var(--border-color-focus);
+    }
+
+    &__icon-wrapper {
+        padding: 4px;
+        padding-left: 0;
+        padding-right: 2px;
+    }
+
+    &.disabled {
+        * {
+            color: var(--txt-mask);
+            cursor: not-allowed;
+        }
+
+        #{$this}__icon {
+            background-color: var(--color-div-grey) !important;
+        }
+    }
+
+    &.disabled::after {
+        border-bottom: 2px solid var(--color-div-grey) !important;
+    }
+
+    &.disabled:hover::after {
+        border-bottom: 2px solid var(--color-div-grey) !important;
+    }
+
+    &__no-item {
+        padding: 8px 12px;
+    }
+
+    &__no-item-title {
+        color: var(--txt-03) !important;
+        text-wrap: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    &__items {
+        position: absolute;
+        top: 110%;
+        z-index: 1;
+        border-radius: 6px;
+        padding: 12px 0;
+        border: 1px solid var(--color-div-grey);
+        width: 256px;
+        box-sizing: border-box;
+        max-height: 320px;
+        overflow-y: auto;
+        background-color: var(--bg-elevated-01);
+        @include scrollbar;
+        box-shadow: var(--shadow-m);
+    }
+
+    &__items-tabs {
+        display: flex;
+        position: absolute;
+        top: 110%;
+        z-index: 1;
+        background-color: var(--color-div-bw);
+        overflow-x: scroll;
+        max-width: 400px;
+        padding: 6px 12px 12px 12px;
+        border: 1px solid var(--color-div-grey);
+        border-radius: 6px;
+        @include scrollbar(false, true);
+        box-shadow: var(--shadow-m);
+    }
+}

package/src/components/PlDropdownLine/resizable-input.scss

@@ -0,0 +1,41 @@
+.resizable-input {
+    position: relative;
+    box-sizing: border-box;
+    padding: 0px 8px;
+    display: inline-block;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    &__size-span {
+        font-family: inherit;
+        white-space: pre;
+        display: inline-block;
+        font-size: inherit;
+        line-height: inherit;
+        box-sizing: border-box;
+        position: relative;
+        left: 0px;
+        opacity: 0;
+        min-width: 2px;
+        user-select: none;
+        vertical-align: top;
+    }
+
+    input {
+        border: none;
+        outline: none;
+        height: 100%;
+        text-overflow: ellipsis;
+        font-family: inherit;
+        background: none;
+        color: inherit;
+        top: 0;
+        left: 6px;
+        font-size: inherit;
+        line-height: inherit;
+        position: absolute;
+        box-sizing: border-box;
+        width: 100%;
+    }
+}

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -0,0 +1,289 @@
+<script lang="ts">
+/**
+ * A component for selecting multiple values from a list of options
+ */
+export default {
+  name: 'PlDropdownMulti',
+};
+</script>
+
+<script lang="ts" setup generic="M = unknown">
+import './pl-dropdown-multi.scss';
+import { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from 'vue';
+import { tap, tapIf } from '@/helpers/functions';
+import { PlTooltip } from '@/components/PlTooltip';
+import { PlChip } from '@/components/PlChip';
+import DoubleContour from '@/utils/DoubleContour.vue';
+import { useLabelNotch } from '@/utils/useLabelNotch';
+import type { ListOption } from '@/types';
+import { scrollIntoView } from '@/helpers/dom';
+import DropdownListItem from '@/components/DropdownListItem.vue';
+import { deepEqual, deepIncludes } from '@/helpers/objects';
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: M[]): void;
+}>();
+
+const emitModel = (v: M[]) => emit('update:modelValue', v);
+
+const slots = useSlots();
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The current selected values.
+     */
+    modelValue: M[];
+    /**
+     * The label text for the dropdown field (optional)
+     */
+    label?: string;
+    /**
+     * List of available options for the dropdown
+     */
+    options: Readonly<ListOption<M>[]>;
+    /**
+     * A helper text displayed below the dropdown when there are no errors (optional).
+     */
+    helper?: string;
+    /**
+     * Error message displayed below the dropdown (optional)
+     */
+    error?: string;
+    /**
+     * Placeholder text shown when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the dropdown component is marked as required.
+     */
+    required?: boolean;
+    /**
+     * If `true`, the dropdown component is disabled and cannot be interacted with.
+     */
+    disabled?: boolean;
+  }>(),
+  {
+    modelValue: () => [],
+    label: undefined,
+    helper: undefined,
+    error: undefined,
+    placeholder: '...',
+    required: false,
+    disabled: false,
+  },
+);
+
+const rootRef = ref<HTMLElement | undefined>();
+const list = ref<HTMLElement | undefined>();
+const input = ref<HTMLInputElement | undefined>();
+
+const data = reactive({
+  search: '',
+  activeOption: -1,
+  open: false,
+});
+
+const selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));
+
+const placeholderRef = computed(() => {
+  if (data.open && props.modelValue.length > 0) {
+    return props.placeholder;
+  }
+
+  return props.modelValue.length > 0 ? '' : props.placeholder;
+});
+
+const selectedOptionsRef = computed(() => {
+  return props.options.filter((opt) => deepIncludes(selectedValuesRef.value, opt.value));
+});
+
+const filteredOptionsRef = computed(() => {
+  const selectedValues = unref(selectedValuesRef);
+
+  return (
+    data.search
+      ? props.options.filter((opt) => {
+          const search = data.search.toLowerCase();
+
+          if (opt.text.toLowerCase().includes(search)) {
+            return true;
+          }
+
+          if (typeof opt.value === 'string') {
+            return opt.value.toLowerCase().includes(search);
+          }
+
+          return opt.value === data.search;
+        })
+      : [...props.options]
+  ).map((opt) => ({
+    ...opt,
+    selected: deepIncludes(selectedValues, opt.value),
+  }));
+});
+
+const tabindex = computed(() => (props.disabled ? undefined : '0'));
+
+const updateActiveOption = () => {
+  data.activeOption = tap(
+    filteredOptionsRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),
+    (v) => (v < 0 ? 0 : v),
+  );
+};
+
+const selectOption = (v: M) => {
+  const values = unref(selectedValuesRef);
+  emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);
+  data.search = '';
+  rootRef?.value?.focus();
+};
+
+const unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));
+
+const setFocusOnInput = () => input.value?.focus();
+
+const toggleModel = () => (data.open = !data.open);
+
+const onFocusOut = (event: FocusEvent) => {
+  if (!rootRef?.value?.contains(event.relatedTarget as Node | null)) {
+    data.search = '';
+    data.open = false;
+  }
+};
+
+const scrollIntoActive = () => {
+  const $list = list.value;
+
+  if (!$list) {
+    return;
+  }
+
+  tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {
+    scrollIntoView($list, opt);
+  });
+};
+
+const handleKeydown = (e: { code: string; preventDefault(): void }) => {
+  const { open, activeOption } = data;
+
+  if (!open) {
+    if (e.code === 'Enter') {
+      data.open = true;
+    }
+    return;
+  }
+
+  if (e.code === 'Escape') {
+    data.open = false;
+    rootRef.value?.focus();
+  }
+
+  const filteredOptions = unref(filteredOptionsRef);
+
+  const { length } = filteredOptions;
+
+  if (!length) {
+    return;
+  }
+
+  if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.code)) {
+    e.preventDefault();
+  }
+
+  if (e.code === 'Enter') {
+    selectOption(filteredOptions[activeOption].value);
+  }
+
+  const d = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;
+
+  data.activeOption = Math.abs(activeOption + d + length) % length;
+
+  requestAnimationFrame(scrollIntoActive);
+};
+
+useLabelNotch(rootRef);
+
+watch(
+  () => props.modelValue,
+  () => updateActiveOption(),
+  { immediate: true },
+);
+
+watchPostEffect(() => {
+  data.search;
+
+  if (data.open) {
+    scrollIntoActive();
+  }
+});
+</script>
+
+<template>
+  <div class="ui-multi-dropdown__envelope">
+    <div
+      ref="rootRef"
+      :tabindex="tabindex"
+      class="ui-multi-dropdown"
+      :class="{ open: data.open, error, disabled }"
+      @keydown="handleKeydown"
+      @focusout="onFocusOut"
+    >
+      <div class="ui-multi-dropdown__container">
+        <div class="ui-multi-dropdown__field">
+          <input
+            ref="input"
+            v-model="data.search"
+            type="text"
+            tabindex="-1"
+            :disabled="disabled"
+            :placeholder="placeholderRef"
+            spellcheck="false"
+            autocomplete="chrome-off"
+            @focus="data.open = true"
+          />
+          <div v-if="!data.open" class="chips-container" @click="setFocusOnInput">
+            <PlChip v-for="(opt, i) in selectedOptionsRef" :key="i" closeable small @click.stop="data.open = true" @close="unselectOption(opt.value)">
+              {{ opt.text || opt.value }}
+            </PlChip>
+          </div>
+          <div class="arrow" @click.stop="toggleModel" />
+          <div class="ui-multi-dropdown__append">
+            <slot name="append" />
+          </div>
+        </div>
+        <label v-if="label">
+          <i v-if="required" class="required-icon" />
+          <span>{{ label }}</span>
+          <PlTooltip v-if="slots.tooltip" class="info" position="top">
+            <template #tooltip>
+              <slot name="tooltip" />
+            </template>
+          </PlTooltip>
+        </label>
+        <div v-if="data.open" ref="list" class="ui-multi-dropdown__options">
+          <div class="ui-multi-dropdown__open-chips-conteiner">
+            <PlChip v-for="(opt, i) in selectedOptionsRef" :key="i" closeable small @close="unselectOption(opt.value)">
+              {{ opt.text || opt.value }}
+            </PlChip>
+          </div>
+          <DropdownListItem
+            v-for="(item, index) in filteredOptionsRef"
+            :key="index"
+            :option="item"
+            :text-item="'text'"
+            :is-selected="item.selected"
+            :is-hovered="data.activeOption == index"
+            size="medium"
+            use-checkbox
+            @click.stop="selectOption(item.value)"
+          />
+          <div v-if="!filteredOptionsRef.length" class="nothing-found">Nothing found</div>
+        </div>
+        <DoubleContour class="ui-multi-dropdown__contour" />
+      </div>
+    </div>
+    <div v-if="error" class="ui-multi-dropdown__error">{{ error }}</div>
+    <div v-else-if="helper" class="ui-multi-dropdown__helper">{{ helper }}</div>
+  </div>
+</template>

package/src/components/PlDropdownMulti/__tests__/PlDropdownMulti.spec.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import PlDropdown from '../PlDropdownMulti.vue';
+
+describe('PlDropdownMulti', () => {
+  it('modelValue', async () => {
+    const wrapper = mount(PlDropdown, {
+      props: {
+        modelValue: [1],
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        options: [
+          { text: 'Option 1', value: 1 },
+          { text: 'Option 2', value: 2 },
+        ],
+      },
+    });
+
+    await wrapper.find('input').trigger('focus');
+
+    expect(await wrapper.findAll('.dropdown-list-item').length).toBe(2);
+
+    await wrapper
+      .findAll('.dropdown-list-item')
+      .filter((node) => node.text().match(/Option 2/))
+      .at(0)
+      ?.trigger('click');
+
+    expect(wrapper.props('modelValue')).toEqual([1, 2]);
+
+    expect(await wrapper.findAll('.dropdown-list-item').length).toBe(2); // options are not closed after click
+  });
+});

package/src/components/PlDropdownMulti/index.ts

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