@milaboratories/uikit 2.2.66 → 2.2.68

package/src/components/PlAutocomplete/pl-autocomplete.scss

@@ -0,0 +1,277 @@
+@use "@/assets/mixins" as *;
+
+.pl-autocomplete__options {
+  --option-hover-bg: var(--btn-sec-hover-grey);
+
+  z-index: var(--z-dropdown-options);
+  border: 1px solid var(--border-color-div-grey);
+  position: absolute;
+  background-color: var(--pl-dropdown-options-bg);
+  border-radius: 6px;
+  max-height: 244px;
+  box-shadow: 0px 4px 12px -2px rgba(15, 36, 77, 0.08), 0px 6px 24px -2px rgba(15, 36, 77, 0.08);
+
+  @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);
+    }
+  }
+}
+
+.pl-autocomplete {
+  $root: &;
+
+  --contour-color: var(--txt-01);
+  --contour-border-width: 1px;
+
+  --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);
+
+  &__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;
+  }
+
+  &__field {
+    position: relative;
+    border-radius: 6px;
+    overflow: hidden;
+    background: transparent;
+    padding-left: 11px;
+
+    min-height: var(--control-height);
+    line-height: var(--control-height);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+
+    .input-value {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 60px 0 11px; // @TODO padding-right based on controls width
+      pointer-events: none;
+      line-height: 20px;
+      color: var(--txt-01);
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
+      cursor: inherit;
+    }
+
+    input {
+      min-height: calc(var(--control-height) - 2px);
+      line-height: 20px;
+      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;
+    min-height: var(--control-height);
+    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-wrapper {
+    display: flex;
+    align-items: center;
+    min-height: var(--control-height);
+    padding-right: 11px;
+  }
+  .arrow-icon {
+    cursor: pointer;
+
+    // Default "arrow" icon (16x16) 
+    &.arrow-icon-default {
+      transition: transform .2s;
+      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 {
+      &.arrow-icon-default {
+        background-color: var(--control-mask-fill);
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  &: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;
+
+    .input-value {
+      color: var(--dis-01);
+    }
+  }
+}

package/src/components/PlDropdown/PlDropdown.vue

@@ -223,7 +223,12 @@ const clear = () => emit('update:modelValue', undefined);
 
 const setFocusOnInput = () => input.value?.focus();
 
-const toggleOpen = () => (data.open = !data.open);
+const toggleOpen = () => {
+  data.open = !data.open;
+  if (!data.open) {
+    data.search = '';
+  }
+};
 
 const onInputFocus = () => (data.open = true);
 
@@ -298,7 +303,7 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <div class="pl-dropdown__envelope">
+  <div class="pl-dropdown__envelope" @click="setFocusOnInput">
     <div
       ref="rootRef"
       :tabindex="tabindex"
@@ -321,7 +326,7 @@ watchPostEffect(() => {
             @focus="onInputFocus"
           />
 
-          <div v-if="!data.open" class="input-value" @click="setFocusOnInput">
+          <div v-if="!data.open" class="input-value">
             <LongText> {{ textValue }} </LongText>
           </div>
 
@@ -329,9 +334,11 @@ watchPostEffect(() => {
             <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 class="pl-dropdown__arrow-wrapper" @click.stop="toggleOpen">
+              <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" />
+              <div v-else-if="arrowIcon" class="arrow-icon" :class="[`icon-16 ${arrowIcon}`]" />
+              <div v-else class="arrow-icon arrow-icon-default" />
+            </div>
           </div>
         </div>
         <label v-if="label">

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

@@ -113,7 +113,7 @@
     border-radius: 6px;
     overflow: hidden;
     background: transparent;
-    padding: 0 11px;
+    padding-left: 11px;
 
     min-height: var(--control-height);
     line-height: var(--control-height);
@@ -199,11 +199,19 @@
     }
   }
 
+  &__arrow-wrapper {
+    display: flex;
+    align-items: center;
+    min-height: var(--control-height);
+    padding-right: 11px;
+  }
+
   .arrow-icon {
     cursor: pointer;
 
     // Default "arrow" icon (16x16) 
     &.arrow-icon-default {
+      transition: transform .2s;
       background-color: var(--control-mask-fill);
       @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
     }
@@ -225,8 +233,10 @@
     }
 
     .arrow-icon {
-      background-color: var(--control-mask-fill);
-      @include mask(url(@/assets/images/16_chevron-up.svg), 16px);
+      &.arrow-icon-default {
+        background-color: var(--control-mask-fill);
+        transform: rotate(-180deg);
+      }
     }
   }
 

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -164,7 +164,12 @@ const unselectOption = (d: M) => emitModel(unref(selectedValuesRef).filter((v) =
 
 const setFocusOnInput = () => input.value?.focus();
 
-const toggleModel = () => (data.open = !data.open);
+const toggleModel = () => {
+  data.open = !data.open;
+  if (!data.open) {
+    data.search = '';
+  }
+};
 
 const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
@@ -232,7 +237,7 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <div class="pl-dropdown-multi__envelope">
+  <div class="pl-dropdown-multi__envelope" @click="setFocusOnInput">
     <div
       ref="rootRef"
       :tabindex="tabindex"
@@ -254,15 +259,18 @@ watchPostEffect(() => {
             autocomplete="chrome-off"
             @focus="data.open = true"
           />
-          <div v-if="!data.open" class="chips-container" @click="setFocusOnInput">
+          <div v-if="!data.open" class="chips-container">
             <PlChip v-for="(opt, i) in selectedOptionsRef" :key="i" closeable small @click.stop="data.open = true" @close="unselectOption(opt.value)">
               {{ opt.label || opt.value }}
             </PlChip>
           </div>
-          <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
-          <div v-if="!isLoadingOptions" class="arrow" @click.stop="toggleModel" />
-          <div class="pl-dropdown-multi__append">
+
+          <div class="pl-dropdown-multi__controls">
+            <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
             <slot name="append" />
+            <div class="pl-dropdown-multi__arrow-wrapper" @click.stop="toggleModel">
+              <div class="arrow-icon arrow-icon-default" />
+            </div>
           </div>
         </div>
         <label v-if="label">

package/src/components/PlDropdownMulti/pl-dropdown-multi.scss

@@ -129,7 +129,7 @@
     border-radius: 6px;
     overflow: hidden;
     background: transparent;
-    padding: 0 11px;
+    padding-left: 11px;
 
     min-height: var(--control-height);
     line-height: 20px;
@@ -146,7 +146,7 @@
       bottom: 0;
       right: 30px;
       overflow: hidden;
-      padding: 0 11px;
+      padding: 0 60px 0 11px;
       line-height: 20px;
       color: var(--contour-color);
       display: flex;
@@ -186,43 +186,57 @@
     }
   }
 
-  &__helper {
-    @include field-helper();
-  }
-
-  &__error {
-    @include field-error();
-  }
-
-  &__append {
-    padding-right: 24px;
+  &__controls {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 4px;
+    gap: 6px;
+    margin-left: auto;
 
-    .icon {
+    .mask-16,
+    .mask-24 {
+      background-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
-    .mask {
+    .mask-loading {
+      animation: spin 2.5s linear infinite;
+      background-color: #07AD3E;
+    }
+  }
+
+  &__arrow-wrapper {
+    display: flex;
+    align-items: center;
+    min-height: var(--control-height);
+    padding-right: 11px;
+  }
+
+  .arrow-icon {
+    cursor: pointer;
+
+    // Default "arrow" icon (16x16) 
+    &.arrow-icon-default {
+      transition: transform .2s;
       background-color: var(--control-mask-fill);
-      cursor: pointer;
+      @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
     }
   }
 
-  .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);
+  &__helper {
+    @include field-helper();
+  }
+
+  &__error {
+    @include field-error();
   }
 
   &.open {
-    .arrow {
-      background-color: var(--control-mask-fill);
-      @include mask(url(@/assets/images/16_up.svg), 16px);
+    .arrow-icon {
+      &.arrow-icon-default {
+        background-color: var(--control-mask-fill);
+        transform: rotate(-180deg);
+      }
     }
   }
 

package/src/components/PlRadio/PlRadio.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts" generic="M">
+import { inject } from 'vue';
+import { radioGroupModelKey, radioGroupNameKey } from './keys';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation
+import type PlRadioGroup from './PlRadioGroup.vue';
+
+const standaloneModel = defineModel<M>();
+
+const { name: standaloneName, ...props } = defineProps<{
+  /** Used to group multiple radio controls. Will be ignored if this component is a descendant of a {@link PlRadioGroup}. */
+  name?: string;
+  /** Value that goes into `v-model`. */
+  value?: M;
+  /** Whether the radio control is disabled. */
+  disabled?: boolean;
+}>();
+
+defineSlots<{
+  /** Label of the radio control. */
+  default?(): unknown;
+}>();
+
+const name = inject(radioGroupNameKey, standaloneName);
+const model = inject<typeof standaloneModel>(radioGroupModelKey, standaloneModel);
+</script>
+
+<template>
+  <label :class="$style.container">
+    <input v-model="model" :class="$style.input" type="radio" :name v-bind="props" />
+    <span :class="$style.label"><slot /></span>
+  </label>
+</template>
+
+<style module>
+  .container {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px;
+    border-radius: 6px;
+    transition: all 200ms ease-in-out;
+    color: var(--txt-01);
+    user-select: none;
+    &:hover:not(:has(:disabled)) {
+      background: var(--btn-sec-hover-grey);
+    }
+    &:has(:disabled) {
+      color: var(--dis-01);
+    }
+  }
+
+  .input {
+    appearance: none;
+    position: relative;
+    block-size: 24px;
+    aspect-ratio: 1;
+    margin: 0;
+    border-radius: 50%;
+    outline: 2px solid transparent;
+    color: inherit;
+    transition: inherit;
+    &:focus {
+      outline-color: var(--border-color-focus);
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 2px;
+      border-radius: 50%;
+      border: 2px solid;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 7.5px;
+      border-radius: 50%;
+      background-color: currentColor;
+      scale: 0;
+      transition: inherit;
+    }
+    &:checked::after {
+      scale: 1;
+    }
+  }
+
+  .label {
+    padding-inline: 4px;
+    line-height: calc(20 / 14);
+    font-weight: 500;
+    text-box: trim-both cap alphabetic;
+  }
+</style>

package/src/components/PlRadio/PlRadioGroup.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts" generic="M">
+import { provide } from 'vue';
+import { radioGroupModelKey, radioGroupNameKey } from './keys';
+import PlRadio from './PlRadio.vue';
+
+type RadioGroupOption = {
+  label: string;
+  value: M;
+  disabled?: boolean;
+};
+
+const model = defineModel<M>();
+
+const props = defineProps<{
+  /** Name of the radio group. */
+  name?: string;
+  /**
+   * List of available options.
+   * Renders a list of {@link PlRadio} components before the {@link slots.default | default} slot.
+   */
+  options?: Readonly<RadioGroupOption[]>;
+  /** Function to get option's unique key. Use if default mechanism (key = index) is unstable. */
+  keyExtractor?: (value: M, index: number) => PropertyKey;
+}>();
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- used by the props documentation
+const slots = defineSlots<{
+  /**
+   * Can be anything, but usually an array of {@link PlRadio} components.
+   * If {@link props.options|options} are provided, they will be rendered before this slot.
+   */
+  default?(): unknown;
+  /** Label of the radio group. */
+  label?(): unknown;
+}>();
+
+const keyExtractor = props.keyExtractor ?? ((_, i) => i);
+
+provide(radioGroupNameKey, props.name);
+provide(radioGroupModelKey, model);
+</script>
+
+<template>
+  <fieldset :class="$style.container">
+    <legend :class="$style.label">
+      <slot name="label" />
+    </legend>
+    <PlRadio
+      v-for="(option, i) in options"
+      :key="keyExtractor(option.value, i)"
+      :value="option.value"
+      :disabled="option.disabled"
+    >
+      {{ option.label }}
+    </PlRadio>
+    <slot />
+  </fieldset>
+</template>
+
+<style module>
+  .container {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+  .label {
+    margin-block-end: 12px;
+    padding: 0;
+    color: var(--txt-01);
+    line-height: calc(20 / 14);
+    font-weight: 500;
+    text-box: trim-both cap alphabetic;
+  }
+</style>