@v1nt1248/3nclient-lib 0.2.33 → 0.2.35

package/src/components/ui3n-list/ui3n-list.vue

@@ -1,21 +1,27 @@
 <script lang="ts" setup generic="T extends { id?: string }">
-import type { Ui3nListEmits, Ui3nListProps, Ui3nListSlots } from './types';
+  import type { Ui3nListEmits, Ui3nListProps, Ui3nListSlots } from './types';
 
-withDefaults(defineProps<Ui3nListProps<T>>(), {
-  title: '',
-  sticky: true,
-  disabled: false,
-});
+  withDefaults(defineProps<Ui3nListProps<T>>(), {
+    title: '',
+    sticky: true,
+    disabled: false,
+  });
 
-const emits = defineEmits<Ui3nListEmits<T>>();
-defineSlots<Ui3nListSlots<T>>();
+  const emits = defineEmits<Ui3nListEmits<T>>();
+  defineSlots<Ui3nListSlots<T>>();
 </script>
 
 <template>
-  <div ref="listElement" :class="$style.ui3nList">
+  <div
+    ref="listElement"
+    :class="$style.ui3nList"
+  >
     <div :class="[$style.ui3nListTitle, sticky && $style.ui3nListTitleSticky]">
       <slot name="title">
-        <div v-if="title" :class="$style.ui3nListTitleContent">
+        <div
+          v-if="title"
+          :class="$style.ui3nListTitleContent"
+        >
           {{ title }}
         </div>
       </slot>
@@ -27,7 +33,11 @@ defineSlots<Ui3nListSlots<T>>();
         :key="item.id ?? index"
         :class="$style.item"
       >
-        <slot name="item" :item="item" :index="index">
+        <slot
+          name="item"
+          :item="item"
+          :index="index"
+        >
           <div
             :class="[$style.ui3nListItemContent, disabled && $style.ui3nListItemContentDisabled]"
             @click.stop="emits('select', { value: item, index })"
@@ -41,61 +51,61 @@ defineSlots<Ui3nListSlots<T>>();
 </template>
 
 <style lang="scss" module>
-.ui3nList {
-  --ui3n-list-item-height: 28px;
-  --ui3n-list-bg-color: var(--color-bg-block-primary-default);
+  .ui3nList {
+    --ui3n-list-item-height: 28px;
+    --ui3n-list-bg-color: var(--color-bg-block-primary-default);
 
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ui3n-list-bg-color);
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-}
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: var(--ui3n-list-bg-color);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
 
-.ui3nListTitle {
-  position: relative;
-  top: 0;
-  z-index: 1;
-}
+  .ui3nListTitle {
+    position: relative;
+    top: 0;
+    z-index: 1;
+  }
 
-.ui3nListTitleSticky {
-  position: sticky;
-}
+  .ui3nListTitleSticky {
+    position: sticky;
+  }
 
-.ui3nListContent {
-  position: relative;
-  flex-grow: 1;
-}
+  .ui3nListContent {
+    position: relative;
+    flex-grow: 1;
+  }
 
-.ui3nListTitleContent,
-.ui3nListItem {
-  position: relative;
-  width: 100%;
-  min-height: var(--ui3n-list-item-height);
-  padding: 4px 0;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
+  .ui3nListTitleContent,
+  .ui3nListItem {
+    position: relative;
+    width: 100%;
+    min-height: var(--ui3n-list-item-height);
+    padding: 4px 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
 
-.ui3nListTitleContent {
-  z-index: 1;
-  font-size: 16px;
-  font-weight: 600;
-  background-color: var(--ui3n-list-bg-color);
-}
+  .ui3nListTitleContent {
+    z-index: 1;
+    font-size: 16px;
+    font-weight: 600;
+    background-color: var(--ui3n-list-bg-color);
+  }
 
-.ui3nListItemContent {
-  font-size: 14px;
-  font-weight: 400;
-  cursor: pointer;
-}
+  .ui3nListItemContent {
+    font-size: 14px;
+    font-weight: 400;
+    cursor: pointer;
+  }
 
-.ui3nListItemContentDisabled {
-  pointer-events: none;
-  cursor: default;
-}
+  .ui3nListItemContentDisabled {
+    pointer-events: none;
+    cursor: default;
+  }
 </style>

package/src/components/ui3n-menu/ui3n-menu.vue

@@ -3,7 +3,7 @@
   import { autoUpdate, flip, useFloating, offset, shift } from '@floating-ui/vue';
   import { default as vClickOutside } from '../../directives/ui3n-click-outside';
   import type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots } from './types';
-  import { Nullable } from '@/components/types';
+  import { Nullable } from '@/types';
 
   const props = withDefaults(defineProps<Ui3nMenuProps>(), {
     positionStrategy: 'absolute',

package/src/components/ui3n-notification/ui3n-notification.vue

@@ -70,7 +70,10 @@ onMounted(() => {
     :id="id"
     :class="mainCssClasses"
   >
-    <div v-if="withIcon" :class="$style.ui3nNotificationIcon">
+    <div
+      v-if="withIcon"
+      :class="$style.ui3nNotificationIcon"
+    >
       <ui3n-icon
         :icon="stylesByTypes[type!].icon"
         width="16"

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

@@ -1,89 +1,109 @@
 <script lang="ts" setup>
-import { computed, onBeforeMount, onBeforeUnmount, ref, useCssModule } from 'vue';
-import { toNumber } from 'lodash';
-import type { Ui3nProgressCircularProps } from './types';
-
-const thresholdSize = 64;
-const indeterminateModeValues = [1, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 99];
-
-const props = withDefaults(
-  defineProps<Ui3nProgressCircularProps>(),
-  {
-    value: 0,
-    size: 64,
-    bgColor: 'var(--color-bg-control-primary-default)',
-    color: 'var(--color-bg-control-accent-default)',
-  },
-);
-
-const $style = useCssModule();
-
-const element = ref<HTMLDivElement>();
-const isValueShown = computed(() => props.withText && !props.indeterminate);
-
-const innerSize = computed(() => toNumber(props.size));
-const cssSize = computed(() => `${innerSize.value}px`);
-const innerWidth = computed(() => {
-  if (props.width) {
-    return toNumber(props.width);
-  }
-
-  const diff = innerSize.value - thresholdSize;
-  if (diff <= 0) {
-    return Math.round(innerSize.value / 10);
-  }
+  import { computed, onBeforeMount, onBeforeUnmount, ref, useCssModule } from 'vue';
+  import { toNumber } from 'lodash';
+  import type { Ui3nProgressCircularProps } from './types';
+
+  const thresholdSize = 64;
+  const indeterminateModeValues = [1, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 99];
+
+  const props = withDefaults(
+    defineProps<Ui3nProgressCircularProps>(),
+    {
+      value: 0,
+      size: 64,
+      bgColor: 'var(--color-bg-control-primary-default)',
+      color: 'var(--color-bg-control-accent-default)',
+    },
+  );
+
+  const $style = useCssModule();
+
+  const element = ref<HTMLDivElement>();
+  const isValueShown = computed(() => props.withText && !props.indeterminate);
+
+  const innerSize = computed(() => toNumber(props.size));
+  const cssSize = computed(() => `${innerSize.value}px`);
+  const innerWidth = computed(() => {
+    if (props.width) {
+      return toNumber(props.width);
+    }
 
-  return 6 + Math.round(diff / 20);
-});
-const cssWidth = computed(() => `${innerWidth.value}px`);
-const innerValue = computed(() => toNumber(props.value));
-const fontSize = computed(() => `${Math.floor((innerSize.value - 2 * innerWidth.value) / 3.2)}px`);
-
-const circleRadius = computed(() => Math.round(innerSize.value / 2) - Math.round(innerWidth.value / 2));
-const circumference = computed(() => Math.round(Math.PI * 2 * circleRadius.value));
-
-const timerId = ref();
-const indeterminateModeValue = ref(0);
-
-const strokeDasharray = computed(() => {
-  const value = props.indeterminate ? indeterminateModeValue.value : innerValue.value;
-  const dash = Math.round(circumference.value * value! / 100);
-  const gap = circumference.value - dash;
-  return `${dash} ${gap}`;
-});
-
-function changeValueForIndeterminateMode() {
-  const indeterminateModeValuesLength = indeterminateModeValues.length;
-  let index = 0;
-  timerId.value = setInterval(() => {
-    indeterminateModeValue.value = indeterminateModeValues[index % indeterminateModeValuesLength];
-    index += 1;
-    if ((index % indeterminateModeValuesLength) === 1) {
-      if (element.value?.classList.contains($style.inverse)) {
-        element.value?.classList.remove($style.inverse);
-      } else {
-        element.value?.classList.add($style.inverse);
-      }
+    const diff = innerSize.value - thresholdSize;
+    if (diff <= 0) {
+      return Math.round(innerSize.value / 10);
     }
-  }, 200);
-}
 
-onBeforeMount(() => {
-  if (props.indeterminate) {
-    changeValueForIndeterminateMode();
+    return 6 + Math.round(diff / 20);
+  });
+  const cssWidth = computed(() => `${innerWidth.value}px`);
+  const innerValue = computed(() => toNumber(props.value));
+  const fontSize = computed(() => `${Math.floor((innerSize.value - 2 * innerWidth.value) / 3.2)}px`);
+
+  const circleRadius = computed(() => Math.round(innerSize.value / 2) - Math.round(innerWidth.value / 2));
+  const circumference = computed(() => Math.round(Math.PI * 2 * circleRadius.value));
+
+  const timerId = ref();
+  const indeterminateModeValue = ref(0);
+
+  const strokeDasharray = computed(() => {
+    const value = props.indeterminate ? indeterminateModeValue.value : innerValue.value;
+    const dash = Math.round(circumference.value * value! / 100);
+    const gap = circumference.value - dash;
+    return `${dash} ${gap}`;
+  });
+
+  function changeValueForIndeterminateMode() {
+    const indeterminateModeValuesLength = indeterminateModeValues.length;
+    let index = 0;
+    timerId.value = setInterval(() => {
+      indeterminateModeValue.value = indeterminateModeValues[index % indeterminateModeValuesLength];
+      index += 1;
+      if ((index % indeterminateModeValuesLength) === 1) {
+        if (element.value?.classList.contains($style.inverse)) {
+          element.value?.classList.remove($style.inverse);
+        } else {
+          element.value?.classList.add($style.inverse);
+        }
+      }
+    }, 200);
   }
-});
 
-onBeforeUnmount(() => {
-  clearInterval(timerId.value);
-});
+  onBeforeMount(() => {
+    if (props.indeterminate) {
+      changeValueForIndeterminateMode();
+    }
+  });
+
+  onBeforeUnmount(() => {
+    clearInterval(timerId.value);
+  });
 </script>
 
 <template>
-  <div ref="element" :class="[$style.ui3nProgressCircular, indeterminate && $style.indeterminate]">
-    <svg :height="innerSize" :width="innerSize" :class="$style.pie" xmlns="http://www.w3.org/2000/svg">
-      <circle :class="$style.background" :r="circleRadius" cx="50%" cy="50%" />
-      <circle :class="$style.chart" :r="circleRadius" cx="50%" cy="50%" :stroke-dasharray="strokeDasharray" />
+  <div
+    ref="element"
+    :class="[$style.ui3nProgressCircular, indeterminate && $style.indeterminate]"
+  >
+    <svg
+      :height="innerSize"
+      :width="innerSize"
+      :class="$style.pie"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        :class="$style.background"
+        :r="circleRadius"
+        cx="50%"
+        cy="50%"
+      />
+
+      <circle
+        :class="$style.chart"
+        :r="circleRadius"
+        cx="50%"
+        cy="50%"
+        :stroke-dasharray="strokeDasharray"
+      />
     </svg>
 
     <div
@@ -96,84 +116,85 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" module>
-.ui3nProgressCircular {
-  --ui3n-progress-circular-size: v-bind(cssSize);
-  --ui3n-progress-circular-width: v-bind(cssWidth);
-  --ui3n-progress-circular-font-size: v-bind(fontSize);
-  --ui3n-progress-circular-bg: v-bind(bgColor);
-  --ui3n-progress-circular-color: v-bind(color);
-
-  position: relative;
-  min-width: var(--ui3n-progress-circular-size);
-  width: var(--ui3n-progress-circular-size);
-  min-height: var(--ui3n-progress-circular-size);
-  height: var(--ui3n-progress-circular-size);
-  border-radius: 50%;
-
-  &.inverse {
-    .background {
-      stroke: var(--ui3n-progress-circular-color) !important;
-    }
+  .ui3nProgressCircular {
+    --ui3n-progress-circular-size: v-bind(cssSize);
+    --ui3n-progress-circular-width: v-bind(cssWidth);
+    --ui3n-progress-circular-font-size: v-bind(fontSize);
+    --ui3n-progress-circular-bg: v-bind(bgColor);
+    --ui3n-progress-circular-color: v-bind(color);
+
+    position: relative;
+    min-width: var(--ui3n-progress-circular-size);
+    width: var(--ui3n-progress-circular-size);
+    min-height: var(--ui3n-progress-circular-size);
+    height: var(--ui3n-progress-circular-size);
+    border-radius: 50%;
+
+    &.inverse {
+      .background {
+        stroke: var(--ui3n-progress-circular-color) !important;
+      }
 
-    .chart {
-      stroke: var(--ui3n-progress-circular-bg) !important;
+      .chart {
+        stroke: var(--ui3n-progress-circular-bg) !important;
+      }
     }
-  }
 
-  &:not(.indeterminate) {
-    .chart {
-      transition: 0.2s ease-in-out all;
+    &:not(.indeterminate) {
+      .chart {
+        transition: 0.2s ease-in-out all;
+      }
     }
   }
-}
-
-.pie {
-  min-width: var(--ui3n-progress-circular-size);
-  width: var(--ui3n-progress-circular-size);
-  min-height: var(--ui3n-progress-circular-size);
-  height: var(--ui3n-progress-circular-size);
-  border-radius: 50%;
-  transform: rotate(-90deg);
-}
-
-.background {
-  fill: none;
-  stroke: var(--ui3n-progress-circular-bg);
-  stroke-width: var(--ui3n-progress-circular-width);
-}
-
-.chart {
-  fill: none;
-  stroke: var(--ui3n-progress-circular-color);
-  stroke-width: var(--ui3n-progress-circular-width);
-}
-
-.text {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--ui3n-progress-circular-font-size);
-  font-weight: 500;
-  color: var(--ui3n-progress-circular-color);
-}
-
-.indeterminate {
+
   .pie {
-    animation: 0.75s linear 0s infinite normal spin;
+    min-width: var(--ui3n-progress-circular-size);
+    width: var(--ui3n-progress-circular-size);
+    min-height: var(--ui3n-progress-circular-size);
+    height: var(--ui3n-progress-circular-size);
+    border-radius: 50%;
+    transform: rotate(-90deg);
   }
-}
 
-@keyframes spin {
-  0% {
-    transform: rotate(-90deg);
+  .background {
+    fill: none;
+    stroke: var(--ui3n-progress-circular-bg);
+    stroke-width: var(--ui3n-progress-circular-width);
+  }
+
+  .chart {
+    fill: none;
+    stroke: var(--ui3n-progress-circular-color);
+    stroke-width: var(--ui3n-progress-circular-width);
+  }
+
+  .text {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: var(--ui3n-progress-circular-font-size);
+    font-weight: 500;
+    color: var(--ui3n-progress-circular-color);
   }
-  100% {
-    transform: rotate(270deg);
+
+  .indeterminate {
+    .pie {
+      animation: 0.75s linear 0s infinite normal spin;
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(-90deg);
+    }
+
+    100% {
+      transform: rotate(270deg);
+    }
   }
-}
 </style>