@milaboratories/uikit 2.1.2 → 2.2.0

package/src/components/PlDropdownLegacy/PlDropdownLegacy.vue

@@ -0,0 +1,372 @@
+<script lang="ts">
+/**
+ * A component for selecting one value from a list of options
+ */
+export default {
+  name: 'PlDropdown',
+};
+</script>
+
+<script lang="ts" setup generic="M = unknown">
+import './pl-dropdown-legacy.scss';
+import { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from 'vue';
+import { tap, tapIf } from '@/helpers/functions';
+import { PlTooltip } from '@/components/PlTooltip';
+import DoubleContour from '@/utils/DoubleContour.vue';
+import { useLabelNotch } from '@/utils/useLabelNotch';
+import type { ListOption, ListOptionNormalized } from '@/types';
+import { scrollIntoView } from '@/helpers/dom';
+import { deepEqual } from '@/helpers/objects';
+import DropdownListItem from '@/components/DropdownListItem.vue';
+import LongText from '@/components/LongText.vue';
+import { PlIcon16 } from '../PlIcon16';
+import { PlMaskIcon24 } from '../PlMaskIcon24';
+import { normalizeListOptions } from '@/helpers/utils';
+
+const emit = defineEmits<{
+  /**
+   * Emitted when the model value is updated.
+   */
+  (e: 'update:modelValue', value: M | undefined): void;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The current selected value of the dropdown.
+     */
+    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;
+    /**
+     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).
+     */
+    loadingOptionsHelper?: string;
+    /**
+     * Error message displayed below the dropdown (optional)
+     */
+    error?: string;
+    /**
+     * Placeholder text shown when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Enables a button to clear the selected value (default: false)
+     */
+    clearable?: boolean;
+    /**
+     * 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;
+    /**
+     * Custom icon (16px) class for the dropdown arrow (optional)
+     */
+    arrowIcon?: string;
+    /**
+     * Custom icon (24px) class for the dropdown arrow (optional)
+     */
+    arrowIconLarge?: string;
+    /**
+     * Option list item size
+     */
+    optionSize?: 'small' | 'medium';
+  }>(),
+  {
+    label: '',
+    helper: undefined,
+    loadingOptionsHelper: undefined,
+    error: undefined,
+    placeholder: '...',
+    clearable: false,
+    required: false,
+    disabled: false,
+    arrowIcon: undefined,
+    arrowIconLarge: undefined,
+    optionSize: 'small',
+    options: undefined,
+  },
+);
+
+const slots = useSlots();
+
+const root = ref<HTMLElement | undefined>();
+const list = ref<HTMLElement | undefined>();
+const input = ref<HTMLInputElement | undefined>();
+
+const data = reactive({
+  search: '',
+  activeIndex: -1,
+  open: false,
+});
+
+const findActiveIndex = () =>
+  tap(
+    filteredRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),
+    (v) => (v < 0 ? 0 : v),
+  );
+
+const updateActive = () => (data.activeIndex = findActiveIndex());
+
+const isLoadingOptions = computed(() => {
+  return props.options === undefined;
+});
+
+const isDisabled = computed(() => {
+  if (isLoadingOptions.value) {
+    return true;
+  }
+
+  return props.disabled;
+});
+
+const selectedIndex = computed(() => {
+  return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));
+});
+
+const computedError = computed(() => {
+  if (isLoadingOptions.value) {
+    return undefined;
+  }
+
+  if (props.error) {
+    return props.error;
+  }
+
+  if (props.modelValue !== undefined && selectedIndex.value === -1) {
+    return 'The selected value is not one of the options';
+  }
+
+  return undefined;
+});
+
+const optionsRef = computed(() =>
+  normalizeListOptions(props.options ?? []).map((opt, index) => ({
+    ...opt,
+    index,
+    isSelected: index === selectedIndex.value,
+    isActive: index === data.activeIndex,
+  })),
+);
+
+const textValue = computed(() => {
+  const options = unref(optionsRef);
+
+  const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));
+
+  return item?.label || props.modelValue; // @todo show inner value?
+});
+
+const computedPlaceholder = computed(() => {
+  if (!data.open && props.modelValue) {
+    return '';
+  }
+
+  return props.modelValue ? String(textValue.value) : props.placeholder;
+});
+
+const hasValue = computed(() => {
+  return props.modelValue !== undefined && props.modelValue !== null;
+});
+
+const filteredRef = computed(() => {
+  const options = optionsRef.value;
+
+  if (data.search) {
+    return options.filter((o: ListOptionNormalized) => {
+      const search = data.search.toLowerCase();
+
+      if (o.label.toLowerCase().includes(search)) {
+        return true;
+      }
+
+      if (o.description && o.description.toLowerCase().includes(search)) {
+        return true;
+      }
+
+      if (typeof o.value === 'string') {
+        return o.value.toLowerCase().includes(search);
+      }
+
+      return o.value === data.search;
+    });
+  }
+
+  return options;
+});
+
+const tabindex = computed(() => (isDisabled.value ? undefined : '0'));
+
+const selectOption = (v: M | undefined) => {
+  emit('update:modelValue', v);
+  data.search = '';
+  data.open = false;
+  root?.value?.focus();
+};
+
+const clear = () => emit('update:modelValue', undefined);
+
+const setFocusOnInput = () => input.value?.focus();
+
+const toggleOpen = () => (data.open = !data.open);
+
+const onInputFocus = () => (data.open = true);
+
+const onFocusOut = (event: FocusEvent) => {
+  if (!root?.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 }) => {
+  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {
+    return;
+  } else {
+    e.preventDefault();
+  }
+
+  const { open, activeIndex } = data;
+
+  if (!open) {
+    if (e.code === 'Enter') {
+      data.open = true;
+    }
+    return;
+  }
+
+  if (e.code === 'Escape') {
+    data.open = false;
+    root.value?.focus();
+  }
+
+  const filtered = unref(filteredRef);
+
+  const { length } = filtered;
+
+  if (!length) {
+    return;
+  }
+
+  if (e.code === 'Enter') {
+    selectOption(filtered.find((it) => it.index === activeIndex)?.value);
+  }
+
+  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;
+
+  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;
+
+  const newIndex = Math.abs(localIndex + delta + length) % length;
+
+  data.activeIndex = filteredRef.value[newIndex].index ?? -1;
+};
+
+useLabelNotch(root);
+
+watch(() => props.modelValue, updateActive, { immediate: true });
+
+watch(
+  () => data.open,
+  (open) => (open ? input.value?.focus() : ''),
+);
+
+watchPostEffect(() => {
+  data.search; // to watch
+
+  if (data.activeIndex >= 0 && data.open) {
+    scrollIntoActive();
+  }
+});
+</script>
+
+<template>
+  <div class="ui-dropdown__envelope">
+    <div
+      ref="root"
+      :tabindex="tabindex"
+      class="ui-dropdown"
+      :class="{ open: data.open, error, disabled: isDisabled }"
+      @keydown="handleKeydown"
+      @focusout="onFocusOut"
+    >
+      <div class="ui-dropdown__container">
+        <div class="ui-dropdown__field">
+          <input
+            ref="input"
+            v-model="data.search"
+            type="text"
+            tabindex="-1"
+            :disabled="isDisabled"
+            :placeholder="computedPlaceholder"
+            spellcheck="false"
+            autocomplete="chrome-off"
+            @focus="onInputFocus"
+          />
+
+          <div v-if="!data.open" @click="setFocusOnInput">
+            <LongText class="input-value"> {{ textValue }} </LongText>
+          </div>
+
+          <div class="ui-dropdown__controls">
+            <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
+            <PlIcon16 v-if="clearable && hasValue" name="delete-clear" @click.stop="clear" />
+            <slot name="append" />
+            <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" @click.stop="toggleOpen" />
+            <div v-else-if="arrowIcon" class="arrow-icon" :class="[`icon-16 ${arrowIcon}`]" @click.stop="toggleOpen" />
+            <div v-else class="arrow-icon arrow-icon-default" @click.stop="toggleOpen" />
+          </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-dropdown__options">
+          <DropdownListItem
+            v-for="(item, index) in filteredRef"
+            :key="index"
+            :option="item"
+            :is-selected="item.isSelected"
+            :is-hovered="item.isActive"
+            :size="optionSize"
+            @click.stop="selectOption(item.value)"
+          />
+          <div v-if="!filteredRef.length" class="nothing-found">Nothing found</div>
+        </div>
+        <DoubleContour class="ui-dropdown__contour" />
+      </div>
+    </div>
+    <div v-if="computedError" class="ui-dropdown__error">{{ computedError }}</div>
+    <div v-else-if="isLoadingOptions && loadingOptionsHelper" class="ui-dropdown__helper">{{ loadingOptionsHelper }}</div>
+    <div v-else-if="helper" class="ui-dropdown__helper">{{ helper }}</div>
+  </div>
+</template>

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

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import PlDropdown from '../PlDropdownLegacy.vue';
+
+describe('PlDropdown', () => {
+  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')).toBe(2);
+
+    expect(wrapper.findAll('.dropdown-list-item').length).toBe(0); // options are closed after click
+  });
+});

package/src/components/PlDropdownLegacy/index.ts

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

package/src/components/PlDropdownLegacy/pl-dropdown-legacy.scss

@@ -0,0 +1,260 @@
+@import "@/assets/mixins";
+
+.pl-dropdown-legacy {
+  $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);
+
+  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);
+
+  [data-theme='dark'] & {
+    --options-bg: #1b1b1f;
+  }
+
+  &__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;
+    border-top: 1px solid var(--color-div-black);
+
+    @include scrollbar;
+
+    .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;
+        right: 10px;
+        @include abs-center-y();
+      }
+
+      >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 60px 0 11px; // @TODO padding-right based on controls width
+      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);
+      }
+    }
+  }
+
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
+  }
+
+  &__controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+
+    .icon-delete-clear {
+      cursor: pointer;
+    }
+
+    .mask-16,
+    .mask-24 {
+      background-color: var(--control-mask-fill);
+      cursor: pointer;
+    }
+
+    .mask-loading {
+      animation: spin 2.5s linear infinite;
+      background-color: #07AD3E;
+    }
+  }
+
+  .arrow-icon {
+    cursor: pointer;
+
+    // Default "arrow" icon (16x16) 
+    &.arrow-icon-default {
+      background-color: var(--control-mask-fill);
+      @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
+    }
+  }
+
+  &.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-icon {
+      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;
+    pointer-events: none;
+    user-select: none;
+  }
+}