@milaboratories/uikit 2.2.42 → 2.2.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.42",
+  "version": "2.2.43",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -32,8 +32,8 @@
     "vue-tsc": "^2.1.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@platforma-sdk/model": "^1.21.0",
     "@milaboratories/helpers": "^1.6.11",
+    "@platforma-sdk/model": "^1.21.10",
     "@milaboratories/eslint-config": "^1.0.1"
   },
   "scripts": {

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -20,6 +20,7 @@ import DropdownListItem from '@/components/DropdownListItem.vue';
 import { deepEqual, deepIncludes } from '@/helpers/objects';
 import { normalizeListOptions } from '@/helpers/utils';
 import DropdownOverlay from '@/utils/DropdownOverlay/DropdownOverlay.vue';
+import { PlMaskIcon24 } from '../PlMaskIcon24';
 
 const emit = defineEmits<{
   (e: 'update:modelValue', v: M[]): void;
@@ -42,7 +43,7 @@ const props = withDefaults(
     /**
      * List of available options for the dropdown
      */
-    options: Readonly<ListOption<M>[]>;
+    options?: Readonly<ListOption<M>[]>;
     /**
      * A helper text displayed below the dropdown when there are no errors (optional).
      */
@@ -98,13 +99,13 @@ const placeholderRef = computed(() => {
 });
 
 const selectedOptionsRef = computed(() => {
-  return normalizeListOptions(props.options).filter((opt) => deepIncludes(selectedValuesRef.value, opt.value));
+  return normalizeListOptions(props.options ?? []).filter((opt) => deepIncludes(selectedValuesRef.value, opt.value));
 });
 
 const filteredOptionsRef = computed(() => {
   const selectedValues = unref(selectedValuesRef);
 
-  const options = normalizeListOptions(props.options);
+  const options = normalizeListOptions(props.options ?? []);
 
   return (
     data.search
@@ -128,7 +129,19 @@ const filteredOptionsRef = computed(() => {
   }));
 });
 
-const tabindex = computed(() => (props.disabled ? undefined : '0'));
+const isLoadingOptions = computed(() => {
+  return props.options === undefined;
+});
+
+const isDisabled = computed(() => {
+  if (isLoadingOptions.value) {
+    return true;
+  }
+
+  return props.disabled;
+});
+
+const tabindex = computed(() => (isDisabled.value ? undefined : '0'));
 
 const updateActiveOption = () => {
   data.activeOption = tap(
@@ -223,7 +236,7 @@ watchPostEffect(() => {
       ref="rootRef"
       :tabindex="tabindex"
       class="pl-dropdown-multi"
-      :class="{ open: data.open, error, disabled }"
+      :class="{ open: data.open, error, disabled: isDisabled }"
       @keydown="handleKeydown"
       @focusout="onFocusOut"
     >
@@ -234,7 +247,7 @@ watchPostEffect(() => {
             v-model="data.search"
             type="text"
             tabindex="-1"
-            :disabled="disabled"
+            :disabled="isDisabled"
             :placeholder="placeholderRef"
             spellcheck="false"
             autocomplete="chrome-off"
@@ -245,7 +258,8 @@ watchPostEffect(() => {
               {{ opt.label || opt.value }}
             </PlChip>
           </div>
-          <div class="arrow" @click.stop="toggleModel" />
+          <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
+          <div v-if="!isLoadingOptions" class="arrow" @click.stop="toggleModel" />
           <div class="pl-dropdown-multi__append">
             <slot name="append" />
           </div>

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

@@ -289,6 +289,11 @@
     --label-color: var(--color-dis-01);
     cursor: not-allowed;
     pointer-events: none;
+
+    .mask-loading {
+      animation: spin 2.5s linear infinite;
+      background-color: #07AD3E;
+    }
   }
 
   &__open-chips-container {

package/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { ModelRef, RefOption } from '@/types';
+import PlDropdownMulti from '../PlDropdownMulti/PlDropdownMulti.vue';
+import { computed } from 'vue';
+
+defineEmits<{
+  /**
+   * Emitted when the model value is updated.
+   */
+  (e: 'update:modelValue', value: ModelRef[] | undefined): void;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The current selected values.
+     */
+    modelValue: ModelRef[] | undefined;
+    /**
+     * The label text for the dropdown field (optional)
+     */
+    label?: string;
+    /**
+     * List of available options for the dropdown
+     */
+    options?: Readonly<RefOption[]>;
+    /**
+     * 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 options = computed(() =>
+  props.options?.map((opt) => ({
+    label: opt.label,
+    value: opt.ref,
+  })),
+);
+</script>
+
+<template>
+  <PlDropdownMulti
+    v-bind="props"
+    :options="options"
+    @update:model-value="$emit('update:modelValue', $event)"
+  />
+</template>

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

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import PlDropdown from '../PlDropdownMultiRef.vue';
+import { delay } from '@milaboratories/helpers';
+
+describe('PlDropdownMultiRef', () => {
+  it('modelValue', async () => {
+    const wrapper = mount(PlDropdown, {
+      props: {
+        'modelValue': [
+          {
+            __isRef: true as const,
+            blockId: '2',
+            name: 'Block 2 Ref',
+          },
+        ],
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        'options': [
+          {
+            label: 'Block 1 label Ref',
+            ref: {
+              __isRef: true as const,
+              blockId: '1',
+              name: 'Block 1 Ref',
+            },
+          },
+          {
+            label: 'Block 2 label Ref',
+            ref: {
+              __isRef: true as const,
+              blockId: '2',
+              name: 'Block 2 Ref',
+            },
+          },
+        ],
+      },
+    });
+
+    await wrapper.find('input').trigger('focus');
+
+    const getOptions = () => [...document.body.querySelectorAll('.dropdown-list-item')] as HTMLElement[];
+
+    const options = getOptions();
+
+    console.log('options', options);
+
+    expect(options.length).toBe(2);
+
+    console.log(wrapper.props('modelValue'), 'mv');
+    options[0].click();
+
+    await delay(20);
+
+    expect(wrapper.props('modelValue')).toEqual([
+      {
+        __isRef: true,
+        blockId: '2',
+        name: 'Block 2 Ref',
+      },
+      {
+        __isRef: true,
+        blockId: '1',
+        name: 'Block 1 Ref',
+      },
+    ]);
+
+    expect(getOptions().length).toBe(2); // options are not closed after click
+  });
+});

package/src/components/PlDropdownMultiRef/index.ts

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

package/src/index.ts

@@ -38,6 +38,7 @@ export * from './components/PlTooltip';
 export * from './components/PlProgressBar';
 export * from './components/PlNumberField';
 export * from './components/PlDropdownMulti';
+export * from './components/PlDropdownMultiRef';
 export * from './components/PlCheckbox';
 export * from './components/PlCheckboxGroup';
 export * from './components/PlChip';