@milaboratories/uikit 1.2.21 → 1.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "1.2.21",
+  "version": "1.2.22",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -31,8 +31,8 @@
     "vue-tsc": "^2.1.6",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@platforma-sdk/model": "^1.7.0",
-    "@milaboratories/helpers": "^1.6.5"
+    "@milaboratories/helpers": "^1.6.5",
+    "@platforma-sdk/model": "^1.7.0"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlBtnGroup/PlBtnGroup.vue

@@ -9,7 +9,7 @@ export default {
 
 <script lang="ts" setup generic="M = unknown">
 import './pl-btn-group.scss';
-import { useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 import { PlTooltip } from '@/components/PlTooltip';
 import InnerBorder from '@/utils/InnerBorder.vue';
 import type { SimpleOption } from '@/types';
@@ -25,7 +25,7 @@ const emit = defineEmits<{
 
 const emitModel = (v: M) => emit('update:modelValue', v);
 
-defineProps<{
+const props = defineProps<{
   /**
    * The current selected value.
    */
@@ -51,6 +51,13 @@ defineProps<{
    */
   error?: string;
 }>();
+
+const normalizedOptions = computed(() =>
+  props.options.map((it) => ({
+    label: 'label' in it ? it.label : it.text,
+    value: it.value,
+  })),
+);
 </script>
 
 <template>
@@ -65,7 +72,7 @@ defineProps<{
     </label>
     <InnerBorder class="ui-btn-group__container">
       <div
-        v-for="(opt, i) in options"
+        v-for="(opt, i) in normalizedOptions"
         :key="i"
         class="ui-btn-group__option"
         :tabindex="modelValue === opt.value || disabled ? undefined : 0"
@@ -73,7 +80,7 @@ defineProps<{
         @keydown.enter="emitModel(opt.value)"
         @click="emitModel(opt.value)"
       >
-        {{ opt.text }}
+        {{ opt.label }}
       </div>
     </InnerBorder>
     <div v-if="helper" class="ui-btn-group__helper">{{ helper }}</div>

package/src/components/PlCheckboxGroup/PlCheckboxGroup.vue

@@ -28,7 +28,7 @@ const props = defineProps<{
   /**
    * List of available options for the component
    */
-  options: SimpleOption<M>[];
+  options: Readonly<SimpleOption<M>[]>;
   /**
    * If `true`, the component is disabled and cannot be interacted with.
    */
@@ -48,9 +48,9 @@ const updateModel = (value: M) => {
 <template>
   <div class="ui-checkbox-group" :class="{ disabled }">
     <label v-if="label">{{ label }}</label>
-    <div v-for="(opt, i) in options" :key="i">
-      <PlCheckboxBase :disabled="disabled" :label="opt.text" :model-value="hasValue(opt.value)" @update:model-value="() => updateModel(opt.value)" />
-      <label @click.stop="() => updateModel(opt.value)">{{ opt.text }}</label>
+    <div v-for="(opt, i) in options.map((it) => ({ label: 'label' in it ? it.label : it.text, value: it.value }))" :key="i">
+      <PlCheckboxBase :disabled="disabled" :label="opt.label" :model-value="hasValue(opt.value)" @update:model-value="() => updateModel(opt.value)" />
+      <label @click.stop="() => updateModel(opt.value)">{{ opt.label }}</label>
     </div>
   </div>
 </template>

package/src/helpers/utils.ts

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

package/src/types.ts

@@ -20,8 +20,19 @@ export type ElementPosition = Omit<DOMRect, 'toJSON'> & {
   offsetX: number;
 };
 
-export type SimpleOption<T = unknown> = {
-  text: string;
+export type SimpleOption<T = unknown> =
+  | {
+      text: string;
+      value: T;
+    }
+  | {
+      label: string;
+      value: T;
+    };
+
+export type SimpleOptionNormalized<T = unknown> = {
+  label: string;
+  description?: string;
   value: T;
 };
 
@@ -37,6 +48,12 @@ export type ListOption<T = unknown> =
       value: T;
     };
 
+export type ListOptionNormalized<T = unknown> = {
+  label: string;
+  description?: string;
+  value: T;
+};
+
 export type { ModelRef };
 
 export type RefOption = {
@@ -44,12 +61,6 @@ export type RefOption = {
   readonly ref: ModelRef;
 };
 
-export type ListOptionNormalized<T = unknown> = {
-  label: string;
-  description?: string;
-  value: T;
-};
-
 export type ListOptionType<Type> = Type extends ListOption<infer X>[] ? X : never;
 
 export const maskIcons16 = [