@milaboratories/uikit 2.2.95 → 2.2.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.95",
+  "version": "2.2.96",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -19,8 +19,8 @@
     "sortablejs": "^1.15.6",
     "vue": "^3.5.13",
     "d3": "^7.9.0",
-    "@milaboratories/helpers": "^1.6.15",
-    "@platforma-sdk/model": "^1.37.11"
+    "@platforma-sdk/model": "^1.37.14",
+    "@milaboratories/helpers": "^1.6.16"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",

package/src/components/PlAccordion/PlAccordionSection.vue

@@ -4,15 +4,15 @@ import { PlMaskIcon16 } from '../PlMaskIcon16';
 import { PlSectionSeparator } from '../PlSectionSeparator';
 import ExpandTransition from './ExpandTransition.vue';
 import type { Ref } from 'vue';
-import { computed, inject } from 'vue';
+import { computed, inject, toRef } from 'vue';
 
-const $m = inject<Ref<string>>('pl-accordion-model');
+const $m = inject<Ref<string>>('pl-accordion-model', () => toRef(''), true);
 
 const $p = inject<
   Ref<{
     multiple?: boolean;
   }>
->('pl-accordion-props');
+>('pl-accordion-props', () => toRef({ multiple: false }), true);
 
 const model = defineModel<boolean>();
 

package/src/components/PlAutocomplete/PlAutocomplete.vue

@@ -9,7 +9,7 @@ export default {
 
 <script lang="ts" setup generic="M = unknown">
 import './pl-autocomplete.scss';
-import { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';
+import { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';
 import { tap } from '../../helpers/functions';
 import { PlTooltip } from '../PlTooltip';
 import DoubleContour from '../../utils/DoubleContour.vue';

package/src/components/PlDropdown/OptionList.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import DropdownListItem from '../DropdownListItem.vue';
+import { DropdownOverlay } from '../../utils/DropdownOverlay';
+import TextLabel from '../../utils/TextLabel.vue';
+import { computed, useTemplateRef } from 'vue';
+import type { LOption } from './types';
+
+const props = defineProps<{
+  rootRef: HTMLElement;
+  groups: Map<string, LOption[]>;
+  rest: LOption[];
+  optionSize: 'small' | 'medium';
+  selectOption: (v: unknown) => void;
+}>();
+
+const overlay = useTemplateRef('overlay');
+
+const listRef = computed(() => overlay.value?.listRef);
+
+const hasGroups = computed(() => props.groups.size > 0);
+
+const optionsLength = computed(() => {
+  let totalGroupItems = 0;
+  for (const items of props.groups.values()) {
+    totalGroupItems += items.length;
+  }
+  return totalGroupItems + props.rest.length;
+});
+
+const scrollIntoActive = () => {
+  overlay.value?.scrollIntoActive();
+};
+
+defineExpose({
+  scrollIntoActive,
+  listRef,
+});
+</script>
+
+<template>
+  <DropdownOverlay ref="overlay" :root="rootRef" class="pl-dropdown__options" tabindex="-1" :gap="3">
+    <div v-for="[group, items] in groups.entries()" :key="group" :class="{ 'group-container': hasGroups }">
+      <TextLabel>{{ group }}</TextLabel>
+      <div>
+        <DropdownListItem
+          v-for="(item, index) in items"
+          :key="index"
+          :option="item"
+          :is-selected="item.isSelected"
+          :is-hovered="item.isActive"
+          :size="optionSize"
+          @click.stop="selectOption(item.value)"
+        />
+      </div>
+    </div>
+    <div v-if="rest.length" :class="{ 'group-container': hasGroups }">
+      <TextLabel />
+      <div>
+        <DropdownListItem
+          v-for="(item, index) in rest"
+          :key="index" :option="item"
+          :is-selected="item.isSelected"
+          :is-hovered="item.isActive"
+          :size="optionSize"
+          @click.stop="selectOption(item.value)"
+        />
+      </div>
+    </div>
+    <div v-if="!optionsLength" class="nothing-found">Nothing found</div>
+  </DropdownOverlay>
+</template>

package/src/components/PlDropdown/PlDropdown.vue

@@ -9,21 +9,22 @@ export default {
 
 <script lang="ts" setup generic="M = unknown">
 import './pl-dropdown.scss';
-import { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';
+import { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';
 import { tap } from '../../helpers/functions';
 import { PlTooltip } from '../PlTooltip';
 import DoubleContour from '../../utils/DoubleContour.vue';
 import { useLabelNotch } from '../../utils/useLabelNotch';
 import type { ListOption, ListOptionNormalized } from '../../types';
 import { deepEqual } from '../../helpers/objects';
-import DropdownListItem from '../DropdownListItem.vue';
 import LongText from '../LongText.vue';
 import { normalizeListOptions } from '../../helpers/utils';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
-import { DropdownOverlay } from '../../utils/DropdownOverlay';
 import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
 import { getErrorMessage } from '../../helpers/error.ts';
+import OptionList from './OptionList.vue';
+import { useGroupBy } from './useGroupBy';
+import type { LOption } from './types';
 
 const emit = defineEmits<{
   /**
@@ -110,7 +111,7 @@ const slots = defineSlots<{
 const rootRef = ref<HTMLElement | undefined>();
 const input = ref<HTMLInputElement | undefined>();
 
-const overlayRef = useTemplateRef('overlay');
+const optionListRef = useTemplateRef<InstanceType<typeof OptionList>>('optionListRef');
 
 const data = reactive({
   search: '',
@@ -121,7 +122,7 @@ const data = reactive({
 
 const findActiveIndex = () =>
   tap(
-    filteredRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),
+    orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),
     (v) => (v < 0 ? 0 : v),
   );
 
@@ -159,7 +160,7 @@ const computedError = computed(() => {
   return undefined;
 });
 
-const optionsRef = computed(() =>
+const optionsRef = computed<LOption<M>[]>(() =>
   normalizeListOptions(props.options ?? []).map((opt, index) => ({
     ...opt,
     index,
@@ -214,6 +215,8 @@ const filteredRef = computed(() => {
   return options;
 });
 
+const { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, 'group');
+
 const tabindex = computed(() => (isDisabled.value ? undefined : '0'));
 
 const selectOption = (v: M | undefined) => {
@@ -223,6 +226,10 @@ const selectOption = (v: M | undefined) => {
   rootRef?.value?.focus();
 };
 
+const selectOptionWrapper = (v: unknown) => {
+  selectOption(v as M | undefined);
+};
+
 const clear = () => emit('update:modelValue', undefined);
 
 const setFocusOnInput = () => input.value?.focus();
@@ -239,7 +246,7 @@ const onInputFocus = () => (data.open = true);
 const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
 
-  if (!rootRef.value?.contains(relatedTarget) && !overlayRef.value?.listRef?.contains(relatedTarget)) {
+  if (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {
     data.search = '';
     data.open = false;
   }
@@ -266,25 +273,25 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
     rootRef.value?.focus();
   }
 
-  const filtered = unref(filteredRef);
+  const ordered = orderedRef.value;
 
-  const { length } = filtered;
+  const { length } = ordered;
 
   if (!length) {
     return;
   }
 
   if (e.code === 'Enter') {
-    selectOption(filtered.find((it) => it.index === activeIndex)?.value);
+    selectOption(ordered.find((it) => it.index === activeIndex)?.value);
   }
 
-  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;
+  const localIndex = ordered.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;
+  data.activeIndex = ordered[newIndex].index ?? -1;
 };
 
 useLabelNotch(rootRef);
@@ -301,7 +308,7 @@ watchPostEffect(() => {
   data.search; // to watch
 
   if (data.activeIndex >= 0 && data.open) {
-    overlayRef.value?.scrollIntoActive();
+    optionListRef.value?.scrollIntoActive();
   }
 });
 </script>
@@ -354,18 +361,15 @@ watchPostEffect(() => {
             </template>
           </PlTooltip>
         </label>
-        <DropdownOverlay v-if="data.open" ref="overlay" :root="rootRef" class="pl-dropdown__options" tabindex="-1" :gap="3">
-          <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>
-        </DropdownOverlay>
+        <OptionList
+          v-if="data.open"
+          ref="optionListRef"
+          :root-ref="rootRef!"
+          :groups="groupsRef"
+          :rest="restRef"
+          :option-size="optionSize"
+          :select-option="selectOptionWrapper"
+        />
         <DoubleContour class="pl-dropdown__contour" />
       </div>
     </div>

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

@@ -22,6 +22,10 @@
     font-style: italic;
   }
 
+  .group-container {
+    padding: 4px 0;
+  }
+
   .option {
     position: relative;
     padding: 0 30px 0 10px;

package/src/components/PlDropdown/types.ts

@@ -0,0 +1,3 @@
+import type { ListOptionNormalized } from '../../types';
+
+export type LOption<M = unknown> = ListOptionNormalized<M> & { isSelected: boolean; isActive: boolean; index: number };

package/src/components/PlDropdown/useGroupBy.ts

@@ -0,0 +1,63 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+function groupBy<T, K extends keyof T>(
+  list: T[],
+  groupBy: K,
+): {
+    grouped: Map<NonNullable<T[K]>, T[]>;
+    rest: T[];
+    ordered: T[];
+  } {
+  const grouped: Map<NonNullable<T[K]>, T[]> = new Map();
+
+  if (!list) {
+    return {
+      grouped,
+      rest: [],
+      ordered: [],
+    };
+  }
+
+  // Group items by the specified key
+  for (const item of list) {
+    const key = item[groupBy];
+    if (key === undefined) continue;
+    if (key === null) continue;
+    if (!grouped.has(key)) grouped.set(key, []);
+    grouped.get(key)?.push(item);
+  }
+
+  // Items without a group key
+  const rest = list.filter((item: T) => {
+    const key = item[groupBy];
+    return key === undefined || key === null;
+  });
+
+  const ordered = [...Array.from(grouped.values()).flat(), ...rest];
+
+  return {
+    grouped,
+    rest,
+    ordered,
+  };
+}
+
+export function useGroupBy<T, K extends keyof T>(
+  list: Ref<T[]>,
+  byKey: K,
+) {
+  const result = computed(() => groupBy(list.value, byKey));
+
+  const orderedRef = computed(() => result.value.ordered);
+
+  const groupsRef = computed(() => result.value.grouped);
+
+  const restRef = computed(() => result.value.rest);
+
+  return {
+    orderedRef,
+    groupsRef,
+    restRef,
+  };
+}

package/src/components/PlDropdownRef/PlDropdownRef.vue

@@ -88,6 +88,7 @@ const options = computed(() =>
   props.options?.map((opt) => ({
     label: opt.label,
     value: opt.ref,
+    group: opt.group,
   })),
 );
 

package/src/helpers/utils.ts

@@ -131,5 +131,6 @@ export function normalizeListOptions<V = unknown>(options: Readonly<ListOption<V
     label: 'label' in it ? it.label : it.text,
     value: it.value,
     description: it.description,
+    group: it.group,
   }));
 }

package/src/types.ts

@@ -32,31 +32,21 @@ export type SimpleOption<T = unknown> =
     value: T;
   };
 
-export type SimpleOptionNormalized<T = unknown> = {
-  label: string;
-  description?: string;
-  value: T;
-};
+export type ListOptionNormalized<T = unknown> = ListOptionBase<T>;
 
+// @TODO: remove `text` support
 export type ListOption<T = unknown> =
-  | {
+  | Omit<ListOptionBase<T>, 'label'> & {
     text: string;
-    description?: string;
-    value: T;
   }
-  | {
-    label: string;
-    description?: string;
-    value: T;
-  };
-
-export type ListOptionNormalized<T = unknown> = ListOptionBase<T>;
+  | ListOptionBase<T>;
 
 export type { ModelRef };
 
 export type RefOption = {
   readonly label: string;
   readonly ref: ModelRef;
+  readonly group?: string;
 };
 
 export type ListOptionType<Type> = Type extends ListOption<infer X>[] ? X : never;

package/src/utils/TextLabel.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="$style.textLabel">
+    <div :class="$style.label">
+      <div :class="$style.labelText">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.textLabel {
+  padding: 0px 12px;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--txt-03);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.labelText {
+  display: inline-block;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label::after {
+  display: block;
+  flex: 1;
+  content: '';
+  height: 1px;
+  background-color: var(--border-color-div-grey);
+  width: 100%;
+}
+</style>