@milaboratories/uikit 2.2.67 → 2.2.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.67",
+  "version": "2.2.69",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -34,9 +34,9 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
-    "@milaboratories/eslint-config": "^1.0.4",
     "@milaboratories/helpers": "^1.6.11",
-    "@platforma-sdk/model": "^1.29.2"
+    "@milaboratories/eslint-config": "^1.0.4",
+    "@platforma-sdk/model": "^1.29.16"
   },
   "scripts": {
     "dev": "vite",

package/src/assets/base.scss

@@ -47,7 +47,6 @@
 
   --btn-shape-shadow: inset 0px -3px 0px rgba(36, 34, 61, 0.12), inset 0px 3px 0px rgba(255, 255, 255, 0.4);
   --btn-group-shape-shadow: inset 0px -3px 0px rgba(36, 34, 61, 0.12), inset 0px 3px 0px rgba(255, 255, 255, 0.4);
-  --btn-sec-hover-grey: rgba(155, 171, 204, 0.16);
 
   --btn-switcher-bg: linear-gradient(180deg, #a1e69c 0%, #d0f5b0 100%);
   --btn-switcher-option-color: var(--txt-01);
@@ -109,7 +108,6 @@
 
   --btn-shape-shadow: none;
   --btn-group-shape-shadow: inset 0px -3px 0px rgba(13, 13, 15, 0.24), inset 0px 3px 0px rgba(255, 255, 255, 0.12);
-  --btn-sec-hover-grey: var(--color-sec-hover-white);
 
   --btn-switcher-bg: #5e5e70;
   --btn-switcher-option-color: var(--txt-03);

package/src/assets/variables.scss

@@ -1,6 +1,6 @@
 :root {
   --txt-00: #ffffff;
-  --txt-01: #110529;
+  --txt-01: light-dark(#110529, #ffffff);
   --txt-02: #231842;
   --txt-03: #9d9eae;
   --txt-mask: #cfd1db;
@@ -27,13 +27,13 @@
   --btn-primary-hover: #231842;
   --btn-primary-press: #080214;
   --btn-sec-hover-white: rgba(255, 255, 255, 0.5);
-  --btn-sec-hover-grey: rgba(155, 171, 204, 0.16);
+  --btn-sec-hover-grey: light-dark(rgba(155, 171, 204, 0.16), rgba(131, 131, 163, 0.16));
   --btn-sec-press-grey: rgba(155, 171, 204, 0.24);
   --btn-active-select: rgba(99, 224, 36, 0.24);
   --btn-switcher: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);
   //disable
   --dis-00: #ffffff;
-  --dis-01: #cfd1db;
+  --dis-01: light-dark(#cfd1db, #3d3d42);
   //background
   --bg-base-dark: #110529;
   --bg-base-light: #f7f8fa;

package/src/components/PlNotificationAlert/PlNotificationAlert.vue

@@ -27,7 +27,7 @@ function closeAlert() {
         <slot />
       </div>
       <div v-if="closable" class="pl-notification-alert__close">
-        <PlBtnGhost icon="close" @click="closeAlert" />
+        <PlBtnGhost icon="close" @click.stop="closeAlert" />
       </div>
     </div>
 

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>

package/src/components/PlRadio/__tests__/PlRadioGroup.spec.ts

@@ -0,0 +1,168 @@
+import { describe, it, expect } from 'vitest';
+import type { VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import PlRadio from '../PlRadio.vue';
+import PlRadioGroup from '../PlRadioGroup.vue';
+import { h } from 'vue';
+
+// --- Use objects as values ---
+const VALUE_1 = { id: 1, name: 'one' };
+const VALUE_2 = { id: 2, name: 'two' };
+const VALUE_3 = { id: 3, name: 'three' };
+const VALUE_A = { id: 'a', name: 'A' };
+const VALUE_B = { id: 'b', name: 'B' };
+const VALUE_4 = { id: 4, name: 'four' };
+
+const OPTIONS = [
+  { label: 'Option 1', value: VALUE_1 },
+  { label: 'Option 2', value: VALUE_2 },
+  { label: 'Option 3', value: VALUE_3, disabled: true },
+];
+// --- ---
+
+describe('PlRadioGroup', () => {
+  it('renders options correctly', () => {
+    const wrapper = mount(PlRadioGroup, {
+      props: {
+        options: OPTIONS,
+      },
+    });
+
+    // Simplify type casting for now, as InstanceType was problematic
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const radios = wrapper.findAllComponents(PlRadio) as unknown as VueWrapper<any>[];
+
+    expect(radios.length).toBe(OPTIONS.length);
+
+    radios.forEach((radioWrapper, index) => {
+      expect(radioWrapper.text()).toBe(OPTIONS[index].label);
+      // Use toEqual for object comparison
+      expect(radioWrapper.props('value')).toEqual(OPTIONS[index].value);
+      expect(radioWrapper.props('disabled') ?? false).toBe(OPTIONS[index].disabled ?? false);
+    });
+  });
+
+  it('handles v-model with options prop', async () => {
+    const wrapper = mount(PlRadioGroup, {
+      props: {
+        'modelValue': VALUE_1, // Initial value is an object
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        'options': OPTIONS,
+      },
+    });
+
+    const radioInputs = wrapper.findAll('input[type="radio"]');
+    expect(radioInputs.length).toBe(OPTIONS.length);
+
+    // Check initial state
+    expect((radioInputs[0].element as HTMLInputElement).checked).toBe(true);
+    expect((radioInputs[1].element as HTMLInputElement).checked).toBe(false);
+
+    // Click the second option
+    await radioInputs[1].setValue(true); // Use setValue for radio inputs
+
+    // Check updated state - use toEqual for objects
+    expect(wrapper.props('modelValue')).toEqual(VALUE_2);
+    expect((radioInputs[0].element as HTMLInputElement).checked).toBe(false);
+    expect((radioInputs[1].element as HTMLInputElement).checked).toBe(true);
+  });
+
+  // TODO: fix this test
+  it.skip('respects disabled options', async () => {
+    const wrapper = mount(PlRadioGroup, {
+      props: {
+        'modelValue': VALUE_1, // Initial value is an object
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        'options': OPTIONS,
+      },
+    });
+
+    const radioInputs = wrapper.findAll<HTMLInputElement>('input[type="radio"]');
+    expect((radioInputs[2].element as HTMLInputElement).disabled).toBe(true);
+
+    // Try clicking the disabled option
+    await radioInputs[2].setValue(true);
+
+    // Model value should not change - use toEqual
+    expect(wrapper.props('modelValue')).toEqual(VALUE_1);
+    expect((radioInputs[0].element).checked ?? false).toBe(true);
+    expect((radioInputs[2].element).checked ?? false).toBe(false);
+  });
+
+  it('assigns the name attribute correctly', () => {
+    const groupName = 'test-group';
+    const wrapper = mount(PlRadioGroup, {
+      props: {
+        name: groupName,
+        options: OPTIONS,
+      },
+    });
+
+    const radioInputs = wrapper.findAll('input[type="radio"]');
+    radioInputs.forEach((input) => {
+      expect(input.attributes('name')).toBe(groupName);
+    });
+  });
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(PlRadioGroup, {
+      props: {
+        'modelValue': VALUE_A, // Initial value is an object
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+      },
+      slots: {
+        default: () => [
+          // Use object values in slots
+          h(PlRadio, { value: VALUE_A }, { default: () => 'Slot Option A' }),
+          h(PlRadio, { value: VALUE_B }, { default: () => 'Slot Option B' }),
+        ],
+      },
+    });
+
+    const radios = wrapper.findAllComponents(PlRadio);
+    expect(radios.length).toBe(2);
+    expect(radios[0].text()).toBe('Slot Option A');
+    expect(radios[1].text()).toBe('Slot Option B');
+
+    const radioInputs = wrapper.findAll('input[type="radio"]');
+    expect((radioInputs[0].element as HTMLInputElement).checked).toBe(true);
+
+    await radioInputs[1].setValue(true);
+    // Use toEqual for object comparison
+    expect(wrapper.props('modelValue')).toEqual(VALUE_B);
+    expect((radioInputs[1].element as HTMLInputElement).checked).toBe(true);
+  });
+
+  it('renders label slot content', () => {
+    const labelText = 'My Radio Group Label';
+    const wrapper = mount(PlRadioGroup, {
+      slots: {
+        label: () => labelText,
+      },
+    });
+
+    const legend = wrapper.find('legend');
+    expect(legend.exists()).toBe(true);
+    expect(legend.text()).toBe(labelText);
+  });
+
+  it('combines options prop and default slot', () => {
+    const wrapper = mount(PlRadioGroup, {
+      props: {
+        options: OPTIONS,
+      },
+      slots: {
+        // Use object value in slot
+        default: () => h(PlRadio, { value: VALUE_4 }, { default: () => 'Slot Option 4' }),
+      },
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const radiosCombined = wrapper.findAllComponents(PlRadio) as unknown as VueWrapper<any>[];
+    expect(radiosCombined.length).toBe(OPTIONS.length + 1);
+    // Use toEqual for object comparison
+    expect(radiosCombined[0].props('value')).toEqual(OPTIONS[0].value);
+    expect(radiosCombined[OPTIONS.length].props('value')).toEqual(VALUE_4);
+    expect(radiosCombined[OPTIONS.length].text()).toBe('Slot Option 4');
+  });
+});

package/src/components/PlRadio/index.ts

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

package/src/components/PlRadio/keys.ts

@@ -0,0 +1,4 @@
+import { type InjectionKey, type ModelRef } from 'vue';
+
+export const radioGroupNameKey: InjectionKey<string | undefined> = Symbol();
+export const radioGroupModelKey: InjectionKey<ModelRef<unknown>> = Symbol();

package/src/index.ts

@@ -67,6 +67,8 @@ export * from './components/PlIcon24';
 export * from './components/PlChartStackedBar';
 export * from './components/PlChartHistogram';
 
+export * from './components/PlRadio';
+
 export * from './colors';
 
 // @TODO review (may be private)