@v1nt1248/3nclient-lib 0.1.19 → 0.1.21

package/dist/utils/common.d.ts

@@ -1,3 +1,11 @@
 export declare function getRandomId(numOfChars: number): string;
 export declare function getDeliveryErrors(progress: web3n.asmail.DeliveryProgress): Record<string, string>;
 export declare function transformFileToWeb3NFile(file: File): Promise<web3n.files.File | undefined>;
+/**
+ * функция округления с заданной точностью
+ * @param num {number} - округляемое число
+ * @param precision {number} - точность округления (количество знаков после запятой
+ * указывается со знаком "-")
+ * @return {number} - скорректированная округленная десятичная дробь
+ */
+export declare function round(num: number, precision: number): number;

package/dist/variables.css

@@ -109,6 +109,7 @@
 }
 
 .default-theme {
+  --global-default: var(--grey-5);
   --default-fill-default: var(--white-0);
   --default-fill-hover: var(--grey-10);
   --default-fill-focused: var(--white-0);
@@ -175,12 +176,12 @@
   --s-accent-fill-default: var(--white-0);
   --s-accent-fill-hover: var(--blue-10);
   --s-accent-fill-focused: var(--white-0);
-  --s-accent-fill-pressed: var(--blue-20);
+  --s-accent-fill-pressed: var(--blue-70);
   --s-accent-fill-disabled: var(--blue-0);
   --s-accent-content-default: var(--blue-50);
   --s-accent-content-hover: var(--blue-50);
   --s-accent-content-focused: var(--blue-50);
-  --s-accent-content-pressed: var(--blue-60);
+  --s-accent-content-pressed: var(--blue-50);
   --s-accent-content-disabled: var(--blue-20);
   --s-accent-content-selected: var(--blue-50);
   --s-accent-content-unselected: var(--blue-30);
@@ -252,16 +253,17 @@
 }
 
 .dark-theme {
+  --global-default: var(--blue-90);
   --default-fill-default: var(--blue-100);
   --default-fill-hover: var(--blue-85);
   --default-fill-focused: var(--blue-100);
   --default-fill-pressed: var(--grey-70);
   --default-fill-disabled: var(--blue-100);
-  --default-content-default: var(--grey-0);
-  --default-content-hover: var(--grey-0);
-  --default-content-focused: var(--grey-0);
-  --default-content-pressed: var(--grey-0);
-  --default-content-disabled: var(--grey-20);
+  --default-content-default: var(--blue-0);
+  --default-content-hover: var(--blue-0);
+  --default-content-focused: var(--blue-0);
+  --default-content-pressed: var(--blue-0);
+  --default-content-disabled: var(--blue-20);
   --default-hint-default: var(--grey-40);
   --default-hint-hover: var(--grey-40);
   --default-hint-focused: var(--grey-40);
@@ -273,21 +275,21 @@
   --default-outline-pressed: var(--blue-80);
   --default-outline-disabled: var(--blue-90);
   --default-outline-ghost: var(--white-inf);
-  --s-default-fill-default: var(--grey-80);
-  --s-default-fill-hover: var(--grey-70);
-  --s-default-fill-focused: var(--grey-100);
-  --s-default-fill-pressed: var(--grey-50);
-  --s-default-fill-disabled: var(--grey-80);
+  --s-default-fill-default: var(--blue-90);
+  --s-default-fill-hover: var(--blue-85);
+  --s-default-fill-focused: var(--blue-100);
+  --s-default-fill-pressed: var(--blue-70);
+  --s-default-fill-disabled: var(--blue-90);
   --s-default-content-default: var(--blue-0);
   --s-default-content-hover: var(--blue-0);
   --s-default-content-focused: var(--blue-0);
   --s-default-content-pressed: var(--blue-0);
   --s-default-content-disabled: var(--blue-20);
-  --s-default-outline-default: var(--grey-70);
-  --s-default-outline-hover: var(--grey-60);
-  --s-default-outline-focused: var(--grey-30);
-  --s-default-outline-pressed: var(--grey-60);
-  --s-default-outline-disabled: var(--grey-70);
+  --s-default-outline-default: var(--blue-85);
+  --s-default-outline-hover: var(--blue-80);
+  --s-default-outline-focused: var(--blue-50);
+  --s-default-outline-pressed: var(--blue-80);
+  --s-default-outline-disabled: var(--blue-85);
   --accent-fill-default: var(--blue-50);
   --accent-fill-hover: var(--blue-60);
   --accent-fill-focused: var(--blue-50);
@@ -318,12 +320,12 @@
   --s-accent-fill-default: var(--blue-100);
   --s-accent-fill-hover: var(--blue-70);
   --s-accent-fill-focused: var(--blue-100);
-  --s-accent-fill-pressed: var(--blue-60);
+  --s-accent-fill-pressed: var(--blue-85);
   --s-accent-fill-disabled: var(--blue-100);
   --s-accent-content-default: var(--blue-50);
   --s-accent-content-hover: var(--blue-50);
   --s-accent-content-focused: var(--blue-50);
-  --s-accent-content-pressed: var(--blue-60);
+  --s-accent-content-pressed: var(--blue-50);
   --s-accent-content-disabled: var(--blue-20);
   --s-accent-content-selected: var(--blue-50);
   --s-accent-content-unselected: var(--blue-30);
@@ -456,7 +458,7 @@
   --color-bg-table-header-disabled: var(--s-default-fill-disabled);
   --color-bg-table-header-selected: var(--s-accent-fill-hover);
   --color-bg-table-header-unselected: var(--s-accent-fill-hover);
-  --color-bg-chat-bubble-general-bg: var(--accent-content-pressed);
+  --color-bg-chat-bubble-general-bg: var(--global-default);
   --color-bg-chat-bubble-user-default: var(--s-accent-fill-hover);
   --color-bg-chat-bubble-user-quote: var(--s-accent-fill-hover);
   --color-bg-chat-bubble-user-selected: var(--accent-fill-pressed);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/index.ts

@@ -69,14 +69,14 @@ import type { Ui3nProgressCircularProps, Ui3nProgressLinearProps } from './ui3n-
 import Ui3nTooltip from './ui3n-tooltip/ui3n-tooltip.vue';
 import type { Ui3nTooltipEmits, Ui3nTooltipProps, Ui3nTooltipSlots, Ui3nTooltipPlacement } from './ui3n-tooltip/types';
 import Ui3nRadio from './ui3n-radio-group/ui3n-radio.vue';
-// import Ui3nRadioGroup from './ui3n-radio-group/ui3n-radio-group.vue';
+import Ui3nRadioGroup from './ui3n-radio-group/ui3n-radio-group.vue';
 import type {
   Ui3nRadioEmits,
   Ui3nRadioProps,
   Ui3nRadioSlots,
-  // Ui3nRadioGroupEmits,
+  Ui3nRadioGroupEmits,
   Ui3nRadioGroupProps,
-  // Ui3nRadioGroupSlots,
+  Ui3nRadioGroupSlots,
   Ui3nRadioValue,
 } from './ui3n-radio-group/types';
 
@@ -170,12 +170,12 @@ export {
   Ui3nTooltipSlots,
   Ui3nTooltipPlacement,
   Ui3nRadio,
-  // Ui3nRadioGroup,
+  Ui3nRadioGroup,
   Ui3nRadioValue,
   Ui3nRadioEmits,
   Ui3nRadioProps,
   Ui3nRadioSlots,
-  // Ui3nRadioGroupEmits,
+  Ui3nRadioGroupEmits,
   Ui3nRadioGroupProps,
-  // Ui3nRadioGroupSlots,
+  Ui3nRadioGroupSlots,
 };

package/src/components/types/index.ts

@@ -3,3 +3,5 @@ export type ExtractComponentProps<TComponent> = TComponent extends new () => {
 }
   ? P
   : never;
+
+export type Nullable<T> = T | null;

package/src/components/ui3n-radio-group/types.ts

@@ -23,16 +23,17 @@ export interface Ui3nRadioSlots {
 }
 
 export interface Ui3nRadioGroupProps {
+  name: string;
   modelValue?: Ui3nRadioValue;
   direction?: 'horizontal' | 'vertical';
   disabled?: boolean;
 }
-// 
-// export interface Ui3nRadioGroupEmits {
-//   (ev: 'change', value: Ui3nRadioValue): void;
-//   (ev: 'update:modelValue', value: Ui3nRadioValue): void;
-// }
-// 
-// export interface Ui3nRadioGroupSlots {
-//   default: () => VNode;
-// }
+
+export interface Ui3nRadioGroupEmits {
+  (ev: 'change', value: Ui3nRadioValue): void;
+  (ev: 'update:modelValue', value: Ui3nRadioValue): void;
+}
+
+export interface Ui3nRadioGroupSlots {
+  default: () => VNode;
+}

package/src/components/ui3n-radio-group/ui3n-radio-group.vue

@@ -1,42 +1,49 @@
-<script lang="ts" setup>
-import { onMounted, ref, SetupContext, useSlots } from 'vue';
-// import { isEmpty } from 'lodash';
+<script setup lang="ts">
+import { provide, ref, watch } from 'vue';
 import type {
-  // Ui3nRadioGroupEmits,
   Ui3nRadioGroupProps,
-  // Ui3nRadioGroupSlots,
-  // Ui3nRadioValue,
+  Ui3nRadioGroupEmits,
+  Ui3nRadioGroupSlots,
+  Ui3nRadioValue,
 } from './types';
 
-const props = withDefaults(
-  defineProps<Ui3nRadioGroupProps>(),
-  {
-    modelValue: false,
-    direction: 'horizontal',
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<Ui3nRadioGroupProps>(), {
+  modelValue: false,
+  direction: 'vertical',
+  disabled: false,
+});
+const emits = defineEmits<Ui3nRadioGroupEmits>();
+defineSlots<Ui3nRadioGroupSlots>();
 
-const slots: SetupContext['slots'] = useSlots();
-const contentSlot = ref();
-const children = ref([]);
+const groupValue = ref<Ui3nRadioValue>(props.modelValue);
 
-function onClick(ev: MouseEvent) {
-  console.log('EV: ', ev);
+function updateGroupValue(value: Ui3nRadioValue): void {
+  groupValue.value = value;
+  emits('update:modelValue', value);
+  emits('change', value);
 }
 
-onMounted(() => {
-  // @ts-ignore
-  children.value = slots.default();
-  console.log('CH: ', children.value);
+provide(`radio-group-${props.name}`, {
+  groupValue,
+  updateGroupValue,
 });
+
+watch(
+  () => props.modelValue,
+  (val: Ui3nRadioValue) => {
+    if (val !== groupValue.value) {
+      groupValue.value = val;
+    }
+  },
+);
 </script>
 
 <template>
   <div
-    ref="contentSlot"
-    :class="$style.radioGroup"
-    v-on="disabled ? {} : { click: onClick }"
+    :class="[
+      $style.radioGroup,
+      direction === 'horizontal' && $style.horizontal,
+    ]"
   >
     <slot />
   </div>
@@ -46,9 +53,14 @@ onMounted(() => {
 .radioGroup {
   position: relative;
   display: flex;
-  width: max-content;
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-s);
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 4px;
+
+  &.horizontal {
+    flex-direction: row;
+    column-gap: 8px;
+  }
 }
-</style>
+</style>

package/src/components/ui3n-radio-group/ui3n-radio.vue

@@ -2,12 +2,15 @@
 import {
   computed,
   getCurrentInstance,
+  inject,
   onBeforeMount,
   onMounted,
   ref,
   useSlots,
   watch,
 } from 'vue';
+import type { Ref } from 'vue';
+import type { Nullable } from '../types';
 import type {
   Ui3nRadioEmits,
   Ui3nRadioProps,
@@ -30,15 +33,40 @@ const emits = defineEmits<Ui3nRadioEmits>();
 defineSlots<Ui3nRadioSlots>();
 
 const slots = useSlots();
-const radioEl = ref<HTMLDivElement | null>(null);
-const val = ref<Ui3nRadioValue>(props.uncheckedValue || false);
+
 const instance = getCurrentInstance();
+const isComponentPartOfGroup = instance?.parent?.type.__name === 'Ui3nRadioGroup' || instance?.parent?.type.__name === 'ui3n-radio-group';
+const groupName = isComponentPartOfGroup ? instance?.parent?.props.name : '';
 
-const radioValue = computed(() => {
-  return val.value === props.checkedValue
-    ? 'checked'
-    : 'unchecked';
-});
+const radioEl = ref<HTMLDivElement | null>(null);
+
+const {
+  groupValue,
+  updateGroupValue,
+}: {
+  groupValue: Nullable<Ref<Ui3nRadioValue>>;
+  updateGroupValue: Nullable<(value: Ui3nRadioValue) => void>;
+} = groupName
+  ? inject(`radio-group-${groupName}`)!
+  : {
+      groupValue: null,
+      updateGroupValue: null,
+    };
+
+const val = ref<Ui3nRadioValue>(groupName ? groupValue!.value : props.modelValue);
+
+const isOn = computed(() => val.value === props.checkedValue);
+
+function change() {
+  val.value = isOn.value ? props.uncheckedValue : props.checkedValue;
+
+  if (groupName) {
+    isOn.value && updateGroupValue!(val.value);
+  } else {
+    emits('change', val.value);
+    emits('update:modelValue', val.value);
+  }
+};
 
 onBeforeMount(() => {
   if (
@@ -47,24 +75,6 @@ onBeforeMount(() => {
   ) {
     throw Error('[Ui3nRadio] Both checkedIcon and uncheckedIcon slots must have values ​​defined.');
   }
-
-  if (instance?.parent?.type.__name !== 'ui3n-radio-group') {
-    const checkedValueType = typeof props.checkedValue;
-    const uncheckedValueType = typeof props.uncheckedValue;
-    const valueType = typeof props.modelValue;
-    if (
-      checkedValueType !== uncheckedValueType
-      || checkedValueType !== valueType
-      || uncheckedValueType !== valueType
-    ) {
-      throw Error('[Ui3nRadio] types of "value", "checkedValue" and "uncheckedValue" are different');
-    }
-  } else {
-    const groupModelValue = instance?.parent.props.modelValue;
-    if (groupModelValue === props.checkedValue) {
-      val.value = groupModelValue as Ui3nRadioValue;
-    }
-  }
 });
 
 onMounted(() => {
@@ -76,8 +86,11 @@ onMounted(() => {
 
 watch(
   () => props.modelValue,
-  newValue => val.value = newValue,
-  { immediate: true },
+  newValue => {
+    if (newValue !== val.value) {
+      val.value = newValue;
+    }
+  },
 );
 
 watch(
@@ -98,17 +111,14 @@ watch(
   },
 );
 
-
-function change() {
-  val.value = radioValue.value !== 'unchecked'
-    ? props.uncheckedValue
-    : props.checkedValue;
-
-  emits('change', val.value);
-  emits('update:modelValue', val.value);
-};
-
-defineExpose({ change, radioEl });
+watch(
+  () => groupValue?.value,
+  newVal => {
+    if (groupName) {
+      val.value = newVal === props.checkedValue ? props.checkedValue : props.uncheckedValue;
+    }
+  },
+);
 </script>
 
 <template>
@@ -121,19 +131,19 @@ defineExpose({ change, radioEl });
     ]"
   >
     <div
-      :class="$style.body"
+      :class="[$style.body, disabled && $style.bodyDisabled]"
       @click="change"
     >
       <slot
-        v-if="radioValue === 'checked'
-        "name="checkedIcon"
+        v-if="isOn"
+        name="checkedIcon"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           :width="Number(size) - 4"
           :height="Number(size) - 4"
           viewBox="0 0 24 24"
-          :class="$style.icon"
+          :class="[$style.icon, disabled && $style.iconDisabled]"
         >
           <path
             fill="currentColor"
@@ -151,7 +161,7 @@ defineExpose({ change, radioEl });
           :width="Number(size) - 4"
           :height="Number(size) - 4"
           viewBox="0 0 24 24"
-          :class="$style.icon"
+          :class="[$style.icon, disabled && $style.iconDisabled]"
         >
           <path
             fill="currentColor"
@@ -227,7 +237,15 @@ defineExpose({ change, radioEl });
 .icon {
   color: var(--ui3n-radio-color);
   min-height: calc(var(--ui3n-radion-size) - 2px);
+  height: calc(var(--ui3n-radion-size) - 2px);
   min-width: calc(var(--ui3n-checkbox-size) - 2px);
+  width: calc(var(--ui3n-radion-size) - 2px);
   cursor: pointer;
 }
+
+.bodyDisabled,
+.iconDisabled {
+  filter: grayscale(1);
+  opacity: 0.5;
+}
 </style>