@v1nt1248/3nclient-lib 0.2.32 → 0.2.34

package/src/components/ui3n-progress/ui3n-progress-linear.vue

@@ -1,29 +1,29 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { toNumber } from 'lodash';
-import type { Ui3nProgressLinearProps } from './types';
+  import { computed } from 'vue';
+  import { toNumber } from 'lodash';
+  import type { Ui3nProgressLinearProps } from './types';
 
-const thresholdHeight = 12;
-const thresholdValue = 5;
+  const thresholdHeight = 12;
+  const thresholdValue = 5;
 
-const props = withDefaults(
-  defineProps<Ui3nProgressLinearProps>(),
-  {
-    value: 0,
-    height: 2,
-    bgColor: 'var(--color-bg-control-primary-default)',
-    color: 'var(--color-bg-control-accent-default)',
-  },
-);
+  const props = withDefaults(
+    defineProps<Ui3nProgressLinearProps>(),
+    {
+      value: 0,
+      height: 2,
+      bgColor: 'var(--color-bg-control-primary-default)',
+      color: 'var(--color-bg-control-accent-default)',
+    },
+  );
 
-const isValueShown = computed(() => props.withText && !props.indeterminate);
-const innerHeight = computed(() => toNumber(props.height));
-const cssHeight = computed(() => `${innerHeight.value}px`);
-const innerValue = computed(() => toNumber(props.value));
-const displayValue = computed(() => props.indeterminate
-  ? `20%`
-  : `${Math.min(innerValue.value, 100)}%`,
-);
+  const isValueShown = computed(() => props.withText && !props.indeterminate);
+  const innerHeight = computed(() => toNumber(props.height));
+  const cssHeight = computed(() => `${innerHeight.value}px`);
+  const innerValue = computed(() => toNumber(props.value));
+  const displayValue = computed(() => props.indeterminate
+    ? `20%`
+    : `${Math.min(innerValue.value, 100)}%`,
+  );
 </script>
 
 <template>
@@ -36,7 +36,10 @@ const displayValue = computed(() => props.indeterminate
     </div>
 
     <div :class="$style.body">
-      <div :class="$style.value" :style="{ width: displayValue }">
+      <div
+        :class="$style.value"
+        :style="{ width: displayValue }"
+      >
         <div
           v-if="isValueShown && innerHeight >= thresholdHeight && innerValue >= thresholdValue"
           :class="$style.text"
@@ -49,63 +52,64 @@ const displayValue = computed(() => props.indeterminate
 </template>
 
 <style lang="scss" module>
-.ui3nProgressLinear {
-  --ui3n-progress-linear-height: v-bind(cssHeight);
-  --ui3n-progress-linear-bg: v-bind(bgColor);
-  --ui3n-progress-linear-color: v-bind(color);
+  .ui3nProgressLinear {
+    --ui3n-progress-linear-height: v-bind(cssHeight);
+    --ui3n-progress-linear-bg: v-bind(bgColor);
+    --ui3n-progress-linear-color: v-bind(color);
 
-  position: relative;
-  width: 100%;
-}
-
-.body {
-  position: relative;
-  width: 100%;
-  height: var(--ui3n-progress-linear-height);
-  border-radius: calc(var(--ui3n-progress-linear-height) - 2px);
-  background-color: var(--ui3n-progress-linear-bg);
-  overflow-x: hidden;
-}
+    position: relative;
+    width: 100%;
+  }
 
-.value {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  height: var(--ui3n-progress-linear-height);
-  border-radius: calc(var(--ui3n-progress-linear-height) - 2px);
-  background-color: var(--ui3n-progress-linear-color);
-}
+  .body {
+    position: relative;
+    width: 100%;
+    height: var(--ui3n-progress-linear-height);
+    border-radius: calc(var(--ui3n-progress-linear-height) - 2px);
+    background-color: var(--ui3n-progress-linear-bg);
+    overflow-x: hidden;
+  }
 
-.text {
-  font-size: calc(var(--ui3n-progress-linear-height) - 2px);
-  font-weight: 500;
-  line-height: var(--ui3n-progress-linear-height);
-  color: var(--ui3n-progress-linear-bg);
-}
+  .value {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    height: var(--ui3n-progress-linear-height);
+    border-radius: calc(var(--ui3n-progress-linear-height) - 2px);
+    background-color: var(--ui3n-progress-linear-color);
+  }
 
-.above {
-  position: relative;
-  width: 100%;
-  text-align: center;
-  font-size: var(--font-14);
-  line-height: var(--font-16);
-  color: var(--color-bg-control-accent-default);
-}
+  .text {
+    font-size: calc(var(--ui3n-progress-linear-height) - 2px);
+    font-weight: 500;
+    line-height: var(--ui3n-progress-linear-height);
+    color: var(--ui3n-progress-linear-bg);
+  }
 
-.indeterminate {
-  .value {
-    animation: 1s linear 0s infinite normal move;
+  .above {
+    position: relative;
+    width: 100%;
+    text-align: center;
+    font-size: var(--font-14);
+    line-height: var(--font-16);
+    color: var(--color-bg-control-accent-default);
   }
-}
 
-@keyframes move {
-  from {
-    left: -22%
+  .indeterminate {
+    .value {
+      animation: 1s linear 0s infinite normal move;
+    }
   }
-  to {
-    left: 122%
+
+  @keyframes move {
+    from {
+      left: -22%
+    }
+
+    to {
+      left: 122%
+    }
   }
-}
 </style>

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

@@ -1,124 +1,124 @@
 <script lang="ts" setup>
-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, Ui3nRadioSlots, Ui3nRadioValue } from './types';
-
-const props = withDefaults(defineProps<Ui3nRadioProps>(), {
-  modelValue: false,
-  checkedValue: true,
-  uncheckedValue: false,
-  size: '16',
-  color: 'var(--color-icon-control-accent-default)',
-  disabled: false,
-});
-const emits = defineEmits<Ui3nRadioEmits>();
-defineSlots<Ui3nRadioSlots>();
-
-const slots = useSlots();
-
-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 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(ev: Event) {
-  ev.preventDefault();
-
-  if (!groupName) {
-    val.value = isOn.value ? props.uncheckedValue : props.checkedValue;
-    emits('change', val.value);
-    emits('update:modelValue', val.value);
-    return;
-  }
+  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, Ui3nRadioSlots, Ui3nRadioValue } from './types';
+
+  const props = withDefaults(defineProps<Ui3nRadioProps>(), {
+    modelValue: false,
+    checkedValue: true,
+    uncheckedValue: false,
+    size: '16',
+    color: 'var(--color-icon-control-accent-default)',
+    disabled: false,
+  });
+  const emits = defineEmits<Ui3nRadioEmits>();
+  defineSlots<Ui3nRadioSlots>();
+
+  const slots = useSlots();
+
+  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 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(ev: Event) {
+    ev.preventDefault();
+
+    if (!groupName) {
+      val.value = isOn.value ? props.uncheckedValue : props.checkedValue;
+      emits('change', val.value);
+      emits('update:modelValue', val.value);
+      return;
+    }
 
-  if (isOn.value) {
-    return;
-  }
+    if (isOn.value) {
+      return;
+    }
 
-  val.value = props.checkedValue;
-  updateGroupValue!(val.value);
-
-  // if (groupName) {
-  //   isOn.value && updateGroupValue!(val.value);
-  // } else {
-  //   emits('change', val.value);
-  //   emits('update:modelValue', val.value);
-  // }
-}
-
-onBeforeMount(() => {
-  if (
-    // @ts-ignore
-    (slots.checkedIcon && !slots.uncheckedIcon) ||
-    // @ts-ignore
-    (!slots.checkedIcon && slots.uncheckedIcon)
-  ) {
-    throw Error('[Ui3nRadio] Both checkedIcon and uncheckedIcon slots must have values ​​defined.');
-  }
-});
+    val.value = props.checkedValue;
+    updateGroupValue!(val.value);
 
-onMounted(() => {
-  if (radioEl.value) {
-    radioEl.value.style.setProperty('--ui3n-radio-size', `${props.size}px`);
-    radioEl.value.style.setProperty('--ui3n-radio-color', props.color);
+    // if (groupName) {
+    //   isOn.value && updateGroupValue!(val.value);
+    // } else {
+    //   emits('change', val.value);
+    //   emits('update:modelValue', val.value);
+    // }
   }
-});
 
-watch(
-  () => props.modelValue,
-  newValue => {
-    if (newValue !== val.value) {
-      val.value = newValue;
+  onBeforeMount(() => {
+    if (
+      // @ts-ignore
+      (slots.checkedIcon && !slots.uncheckedIcon) ||
+      // @ts-ignore
+      (!slots.checkedIcon && slots.uncheckedIcon)
+    ) {
+      throw Error('[Ui3nRadio] Both checkedIcon and uncheckedIcon slots must have values ​​defined.');
     }
-  },
-);
+  });
 
-watch(
-  () => props.size,
-  newValue => {
+  onMounted(() => {
     if (radioEl.value) {
-      radioEl.value.style.setProperty('--ui3n-radio-size', `${newValue}px`);
+      radioEl.value.style.setProperty('--ui3n-radio-size', `${props.size}px`);
+      radioEl.value.style.setProperty('--ui3n-radio-color', props.color);
     }
-  },
-);
-
-watch(
-  () => props.color,
-  newValue => {
-    if (radioEl.value) {
-      radioEl.value.style.setProperty('--ui3n-radio-color', newValue);
-    }
-  },
-);
-
-watch(
-  () => groupValue?.value,
-  newVal => {
-    if (groupName) {
-      val.value = newVal === props.checkedValue ? props.checkedValue : props.uncheckedValue;
-    }
-  },
-);
+  });
+
+  watch(
+    () => props.modelValue,
+    newValue => {
+      if (newValue !== val.value) {
+        val.value = newValue;
+      }
+    },
+  );
+
+  watch(
+    () => props.size,
+    newValue => {
+      if (radioEl.value) {
+        radioEl.value.style.setProperty('--ui3n-radio-size', `${newValue}px`);
+      }
+    },
+  );
+
+  watch(
+    () => props.color,
+    newValue => {
+      if (radioEl.value) {
+        radioEl.value.style.setProperty('--ui3n-radio-color', newValue);
+      }
+    },
+  );
+
+  watch(
+    () => groupValue?.value,
+    newVal => {
+      if (groupName) {
+        val.value = newVal === props.checkedValue ? props.checkedValue : props.uncheckedValue;
+      }
+    },
+  );
 </script>
 
 <template>
@@ -178,74 +178,75 @@ watch(
 </template>
 
 <style lang="scss" module>
-@use '../../assets/styles/mixins' as mixins;
-
-.ui3nRadio {
-  --ui3n-radio-size: 16px;
-  --ui3n-radio-color: var(--color-icon-control-accent-default);
-  --ui3n-radio-text-size: 12px;
-  --ui3n-radio-text-color: var(--color-text-control-primary-default);
-  --ui3n-radio-text-weight: 500;
-
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  min-height: var(--spacing-vl);
-  gap: var(--spacing-s);
-
-  &.disabled {
-    --ui3n-radio-color: var(--color-icon-control-primary-disabled) !important;
-    pointer-events: none;
-    cursor: default;
-
-    .label {
-      opacity: 0.7;
+  @use '../../assets/styles/mixins' as mixins;
+
+  .ui3nRadio {
+    --ui3n-radio-size: 16px;
+    --ui3n-radio-color: var(--color-icon-control-accent-default);
+    --ui3n-radio-text-size: 12px;
+    --ui3n-radio-text-color: var(--color-text-control-primary-default);
+    --ui3n-radio-text-weight: 500;
+
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: var(--spacing-vl);
+    gap: var(--spacing-s);
+
+    &.disabled {
+      --ui3n-radio-color: var(--color-icon-control-primary-disabled) !important;
+
+      pointer-events: none;
+      cursor: default;
+
+      .label {
+        opacity: 0.7;
+      }
     }
   }
-}
-
-.noLabel {
-  gap: 0;
-}
-
-.body {
-  position: relative;
-  display: flex;
-  width: var(--ui3n-radio-size);
-  min-width: var(--ui3n-radio-size);
-  height: var(--ui3n-radio-size);
-  min-height: var(--ui3n-radio-size);
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-
-  &:hover {
+
+  .noLabel {
+    gap: 0;
+  }
+
+  .body {
+    position: relative;
+    display: flex;
+    width: var(--ui3n-radio-size);
+    min-width: var(--ui3n-radio-size);
+    height: var(--ui3n-radio-size);
+    min-height: var(--ui3n-radio-size);
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+
+    &:hover {
+      cursor: pointer;
+      background-color: hsl(from transparent h s calc(l - 10));
+      @include mixins.ripple(hsl(from transparent h s calc(l - 10)));
+    }
+  }
+
+  .label {
+    font-size: var(--ui3n-radio-text-size);
+    font-weight: var(--ui3n-radio-text-weight);
+    color: var(--ui3n-radio-text-color);
+    user-select: none;
+  }
+
+  .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;
-    background-color: hsl(from transparent h s calc(l - 10));
-    @include mixins.ripple(hsl(from transparent h s calc(l - 10)));
   }
-}
-
-.label {
-  font-size: var(--ui3n-radio-text-size);
-  font-weight: var(--ui3n-radio-text-weight);
-  color: var(--ui3n-radio-text-color);
-  user-select: none;
-}
-
-.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;
-}
+
+  .bodyDisabled,
+  .iconDisabled {
+    filter: grayscale(1);
+    opacity: 0.5;
+  }
 </style>

package/src/components/ui3n-step-line-bar/ui3n-step-line-bar.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { Ui3nStepLineBarProps } from './types';
-
-withDefaults(
-  defineProps<Ui3nStepLineBarProps>(),
-  {
-    current: 1,
-  },
-);
+  import type { Ui3nStepLineBarProps } from './types';
+
+  withDefaults(
+    defineProps<Ui3nStepLineBarProps>(),
+    {
+      current: 1,
+    },
+  );
 </script>
 
 <template>
@@ -16,47 +16,51 @@ withDefaults(
     </div>
 
     <div :class="$style.body">
-      <div v-for="step in steps" :class="[$style.step, step <= current && $style.active]" />
+      <div
+        v-for="step in steps"
+        :key="step"
+        :class="[$style.step, step <= current && $style.active]"
+      />
     </div>
   </div>
 </template>
 
 <style lang="scss" module>
-.ui3nStepLineBar {
-  --ui3n-step-line-bar-steps: v-bind(steps);
-
-  position: relative;
-  width: 100%;
-}
-
-.label {
-  position: relative;
-  width: 100%;
-  text-align: center;
-  font-size: var(--font-14);
-  font-weight: 500;
-  line-height: var(--font-20);
-  color: var(--color-text-block-accent-default);
-  margin-bottom: var(--spacing-m);
-}
-
-.body {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--spacing-s);
-}
-
-.step {
-  position: relative;
-  width: calc((100% - (calc(var(--ui3n-step-line-bar-steps) - 1) * var(--spacing-s))) / var(--ui3n-step-line-bar-steps));
-  height: var(--spacing-xs);
-  border-radius: var(--spacing-xs);
-  background-color: var(--color-bg-control-secondary-default);
-}
-
-.active {
-  background-color: var(--color-bg-control-accent-default);
-}
+  .ui3nStepLineBar {
+    --ui3n-step-line-bar-steps: v-bind(steps);
+
+    position: relative;
+    width: 100%;
+  }
+
+  .label {
+    position: relative;
+    width: 100%;
+    text-align: center;
+    font-size: var(--font-14);
+    font-weight: 500;
+    line-height: var(--font-20);
+    color: var(--color-text-block-accent-default);
+    margin-bottom: var(--spacing-m);
+  }
+
+  .body {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
+
+  .step {
+    position: relative;
+    width: calc((100% - (calc(var(--ui3n-step-line-bar-steps) - 1) * var(--spacing-s))) / var(--ui3n-step-line-bar-steps));
+    height: var(--spacing-xs);
+    border-radius: var(--spacing-xs);
+    background-color: var(--color-bg-control-secondary-default);
+  }
+
+  .active {
+    background-color: var(--color-bg-control-accent-default);
+  }
 </style>