@v1nt1248/3nclient-lib 0.3.28 → 0.3.29

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

@@ -1,214 +1,229 @@
 <script lang="ts" setup>
-import { computed, onMounted, useCssModule } from 'vue';
-import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
-import Ui3nButton from '../ui3n-button/ui3n-button.vue';
-import type { Ui3nNotificationProps } from './types';
-
-const props = withDefaults(
-  defineProps<Ui3nNotificationProps>(),
-  {
+  import { computed, onMounted, onBeforeUnmount, useCssModule } from 'vue';
+  import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
+  import Ui3nButton from '../ui3n-button/ui3n-button.vue';
+  import type { Ui3nNotificationProps } from './types';
+
+  const props = withDefaults(defineProps<Ui3nNotificationProps>(), {
     type: 'info',
     position: 'center',
     duration: 0,
     withIcon: true,
-    onOpen: () => void (0),
-    onClose: () => void (0),
-  },
-);
-
-const stylesByTypes = {
-  success: {
-    color: 'var(--success-content-default)',
-    icon: 'round-check-circle',
-    iconColor: 'var(--success-fill-default)',
-    iconRotate: 0,
-  },
-  warning: {
-    color: 'var(--warning-content-default)',
-    icon: 'round-warning',
-    iconColor: 'var(--warning-fill-default)',
-    iconRotate: 0,
-  },
-  info: {
-    color: 'var(--info-content-default)',
-    icon: 'round-info',
-    iconColor: 'var(--info-fill-default)',
-    iconRotate: 180,
-  },
-  error: {
-    color: 'var(--error-content-default)',
-    icon: 'round-info',
-    iconColor: 'var(--error-fill-default)',
-    iconRotate: 180,
-  },
-};
-
-const $css = useCssModule();
-
-const mainCssClasses = computed(() => {
-  const val = [$css.ui3nNotification, $css[`${props.type}Type`], $css[`${props.position}Position`]];
-  props.withIcon && val.push($css.withIcon);
-
-  return val;
-});
-
-function closeNotification() {
-  props.onClose();
-}
-
-onMounted(() => {
-  if (props.duration > 500) {
-    setTimeout(() => {
-      props.onClose();
-    }, props.duration);
+    onOpen: () => void 0,
+    onClose: () => void 0,
+  });
+
+  const $style = useCssModule();
+
+  const stylesByTypes = {
+    success: {
+      color: 'var(--success-content-default)',
+      icon: 'round-check-circle',
+      iconColor: 'var(--success-fill-default)',
+      iconRotate: 0,
+    },
+    warning: {
+      color: 'var(--warning-content-default)',
+      icon: 'round-warning',
+      iconColor: 'var(--warning-fill-default)',
+      iconRotate: 0,
+    },
+    info: {
+      color: 'var(--info-content-default)',
+      icon: 'round-info',
+      iconColor: 'var(--info-fill-default)',
+      iconRotate: 180,
+    },
+    error: {
+      color: 'var(--error-content-default)',
+      icon: 'round-info',
+      iconColor: 'var(--error-fill-default)',
+      iconRotate: 180,
+    },
+  };
+
+  let timerId: ReturnType<typeof setTimeout> | null = null;
+
+  const mainCssClasses = computed(() => {
+    const val = [$style.ui3nNotification, $style[`${props.type}Type`], $style[`${props.position}Position`]];
+    props.withIcon && val.push($style.withIcon);
+
+    return val;
+  });
+
+  function closeNotification() {
+    props.onClose && props.onClose();
   }
-});
+
+  onMounted(() => {
+    props.onOpen && props.onOpen();
+
+    if (props.duration > 0) {
+      timerId = setTimeout(() => {
+        props.onClose();
+      }, props.duration);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+  });
 </script>
 
 <template>
-  <div
-    :id="id"
-    :class="mainCssClasses"
+  <component
+    :is="teleport ? 'Teleport' : 'div'"
+    :to="teleport"
   >
     <div
-      v-if="withIcon"
-      :class="$style.ui3nNotificationIcon"
+      :id="id"
+      :class="mainCssClasses"
     >
-      <ui3n-icon
-        :icon="stylesByTypes[type!].icon"
-        width="16"
-        height="16"
-        :rotate="stylesByTypes[type!].iconRotate"
-        :color="stylesByTypes[type!].iconColor"
+      <div
+        v-if="withIcon"
+        :class="$style.ui3nNotificationIcon"
+      >
+        <ui3n-icon
+          :icon="stylesByTypes[type!].icon"
+          size="16"
+          :rotate="stylesByTypes[type!].iconRotate"
+          :color="stylesByTypes[type!].iconColor"
+        />
+      </div>
+
+      <div :class="$style.ui3nNotificationContent">
+        {{ content }}
+      </div>
+
+      <ui3n-button
+        v-if="!duration"
+        type="icon"
+        size="small"
+        color="transparent"
+        icon="round-close"
+        :icon-color="stylesByTypes[type!].color"
+        icon-size="16"
+        :class="$style.closeBtn"
+        @click="closeNotification"
       />
     </div>
-
-
-    <div :class="$style.ui3nNotificationContent">
-      {{ content }}
-    </div>
-
-    <ui3n-button
-      v-if="!duration"
-      type="icon"
-      size="small"
-      color="transparent"
-      icon="round-close"
-      :icon-color="stylesByTypes[type!].color"
-      :class="$style.closeBtn"
-      @click="closeNotification"
-    />
-  </div>
+  </component>
 </template>
 
 <style lang="scss" module>
-.ui3nNotification {
-  --ui3n-notification-width: 380px;
-
-  display: flex;
-  position: relative;
-  z-index: 5000;
-  border-radius: var(--spacing-s);
-  outline: 1px solid var(--color-border-control-tritery-default);
-  padding: var(--spacing-m);
-  max-width: var(--ui3n-notification-width);
-  margin-bottom: var(--spacing-s);
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-s);
-}
-
-.withIcon {
-  justify-content: flex-start;
-}
-
-.ui3nNotificationIcon {
-  position: relative;
-  min-width: var(--spacing-l);
-  width: var(--spacing-l);
-  min-height: var(--spacing-l);
-  height: var(--spacing-l);
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.ui3nNotificationContent {
-  position: relative;
-  flex-grow: 2;
-  font-size: var(--font-12);
-  font-weight: 500;
-  line-height: var(--font-16);
-}
-
-.closeBtn {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-}
-
-.infoType {
-  background-color: var(--info-fill-default);
+  .ui3nNotification {
+    --ui3n-notification-width: 380px;
+    --ui3n-notification-font-size: 12px;
+    --ui3n-notification-border-radius: 4px;
+    --ui3n-notification-margin-bottom: 4px;
+    --ui3n-notification-icon-size: 32px;
+
+    display: flex;
+    position: relative;
+    z-index: 5000;
+    border-radius: var(--ui3n-notification-border-radius);
+    outline: 1px solid var(--color-border-control-tritery-default);
+    padding: var(--spacing-m);
+    max-width: var(--ui3n-notification-width);
+    margin-bottom: var(--ui3n-notification-margin-bottom);
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .withIcon {
+    justify-content: flex-start;
+  }
 
   .ui3nNotificationIcon {
-    background-color: var(--info-content-default);
+    position: relative;
+    min-width: var(--ui3n-notification-icon-size);
+    width: var(--ui3n-notification-icon-size);
+    min-height: var(--ui3n-notification-icon-size);
+    height: var(--ui3n-notification-icon-size);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .ui3nNotificationContent {
-    color: var(--info-content-default);
+    position: relative;
+    flex-grow: 2;
+    font-size: var(--ui3n-notification-font-size);
+    font-weight: 500;
+    line-height: 1.33;
   }
-}
 
-.successType {
-  background-color: var(--success-fill-default);
+  .closeBtn {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+  }
 
-  .ui3nNotificationIcon {
-    background-color: var(--success-content-default);
+  .infoType {
+    background-color: var(--info-fill-default);
+
+    .ui3nNotificationIcon {
+      background-color: var(--info-content-default);
+    }
+
+    .ui3nNotificationContent {
+      color: var(--info-content-default);
+    }
   }
 
-  .ui3nNotificationContent {
-    color: var(--success-content-default);
+  .successType {
+    background-color: var(--success-fill-default);
+
+    .ui3nNotificationIcon {
+      background-color: var(--success-content-default);
+    }
+
+    .ui3nNotificationContent {
+      color: var(--success-content-default);
+    }
   }
-}
 
-.warningType {
-  background-color: var(--warning-fill-default);
+  .warningType {
+    background-color: var(--warning-fill-default);
 
-  .ui3nNotificationIcon {
-    background-color: var(--warning-content-default);
+    .ui3nNotificationIcon {
+      background-color: var(--warning-content-default);
+    }
+
+    .ui3nNotificationContent {
+      color: var(--warning-content-default);
+    }
   }
 
-  .ui3nNotificationContent {
-    color: var(--warning-content-default);
+  .errorType {
+    background-color: var(--error-fill-default);
+
+    .ui3nNotificationIcon {
+      background-color: var(--error-content-default);
+    }
+
+    .ui3nNotificationContent {
+      color: var(--error-content-default);
+    }
   }
-}
 
-.errorType {
-  background-color: var(--error-fill-default);
+  .leftPosition {
+    margin-left: 0;
+    margin-right: auto;
+  }
 
-  .ui3nNotificationIcon {
-    background-color: var(--error-content-default);
+  .centerPosition {
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  .ui3nNotificationContent {
-    color: var(--error-content-default);
+  .rightPosition {
+    margin-left: auto;
+    margin-right: 0;
   }
-}
-
-.leftPosition {
-  margin-left: 0;
-  margin-right: auto;
-}
-
-.centerPosition {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.rightPosition {
-  margin-left: auto;
-  margin-right: 0;
-}
 </style>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, onBeforeMount, onBeforeUnmount, ref, useCssModule } from 'vue';
+  import { computed, onBeforeUnmount, ref, useCssModule, watch } from 'vue';
   import toNumber from 'lodash/toNumber';
   import type { Ui3nProgressCircularProps } from './types';
 
@@ -19,7 +19,6 @@
   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);
@@ -32,15 +31,24 @@
 
     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 timerId = ref<ReturnType<typeof setInterval> | null>(null);
   const indeterminateModeValue = ref(0);
+  const isInverse = ref(false);
+
+  const progressStyle = computed(() => ({
+    '--ui3n-progress-circular-size': `${innerSize.value}px`,
+    '--ui3n-progress-circular-width': `${innerWidth.value}px`,
+    '--ui3n-progress-circular-font-size': fontSize.value,
+    '--ui3n-progress-circular-bg': props.bgColor,
+    '--ui3n-progress-circular-color': props.color,
+  }));
 
   const strokeDasharray = computed(() => {
     const value = props.indeterminate ? indeterminateModeValue.value : innerValue.value;
@@ -50,42 +58,58 @@
   });
 
   function changeValueForIndeterminateMode() {
+    if (timerId.value) {
+      return;
+    }
+
     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);
-        }
+        isInverse.value = !isInverse.value;
       }
     }, 200);
   }
 
-  onBeforeMount(() => {
-    if (props.indeterminate) {
-      changeValueForIndeterminateMode();
+  function clearIndeterminateTimer() {
+    if (timerId.value) {
+      clearInterval(timerId.value);
+      timerId.value = null;
     }
-  });
+  }
+
+  watch(
+    () => props.indeterminate,
+    isIndeterminate => {
+      if (isIndeterminate) {
+        changeValueForIndeterminateMode();
+      } else {
+        clearIndeterminateTimer();
+        isInverse.value = false;
+        indeterminateModeValue.value = 0;
+      }
+    },
+    { immediate: true },
+  );
 
   onBeforeUnmount(() => {
-    clearInterval(timerId.value);
+    clearIndeterminateTimer();
   });
 </script>
 
 <template>
   <div
     ref="element"
-    :class="[$style.ui3nProgressCircular, indeterminate && $style.indeterminate]"
+    :style="progressStyle"
+    :class="[$style.ui3nProgressCircular, indeterminate && $style.indeterminate, isInverse && $style.inverse]"
   >
     <svg
       :height="innerSize"
       :width="innerSize"
       :class="$style.pie"
-      xmlns="http://www.w3.org/2000/svg"
     >
       <circle
         :class="$style.background"
@@ -114,12 +138,6 @@
 
 <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);

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

@@ -15,13 +15,22 @@
 
   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 progressStyle = computed(() => ({
+    '--ui3n-progress-linear-height': `${innerHeight.value}px`,
+    '--ui3n-progress-linear-bg': props.bgColor,
+    '--ui3n-progress-linear-color': props.color,
+    '--ui3n-progress-linear-font-size': `${Math.max(innerHeight.value - 2, 10)}px`,
+  }));
 </script>
 
 <template>
-  <div :class="[$style.ui3nProgressLinear, indeterminate && $style.indeterminate]">
+  <div
+    :style="progressStyle"
+    :class="[$style.ui3nProgressLinear, indeterminate && $style.indeterminate]"
+  >
     <div
       v-if="isValueShown && innerHeight < thresholdHeight"
       :class="[$style.text, $style.above]"
@@ -47,10 +56,6 @@
 
 <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);
-
     position: relative;
     width: 100%;
   }
@@ -73,10 +78,11 @@
     height: var(--ui3n-progress-linear-height);
     border-radius: calc(var(--ui3n-progress-linear-height) - 2px);
     background-color: var(--ui3n-progress-linear-color);
+    transition: width 0.2s ease-in-out;
   }
 
   .text {
-    font-size: calc(var(--ui3n-progress-linear-height) - 2px);
+    font-size: var(--ui3n-progress-linear-font-size);
     font-weight: 500;
     line-height: var(--ui3n-progress-linear-height);
     color: var(--ui3n-progress-linear-bg);
@@ -93,6 +99,7 @@
 
   .indeterminate {
     .value {
+      transition: none;
       animation: 1s linear 0s infinite normal move;
     }
   }

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

@@ -9,6 +9,14 @@ export type Ui3nRadioValue = boolean | string | number;
  * Radio component properties
  */
 export interface Ui3nRadioProps {
+  /**
+   * Root element id
+   */
+  id?: string;
+  /**
+   * HTML name attribute for form submission (used if radio is outside a group)
+   */
+  name?: string;
   /**
    * Current radio value
    */
@@ -50,6 +58,10 @@ export interface Ui3nRadioEmits {
   (ev: 'update:modelValue', value: Ui3nRadioValue): void;
 }
 
+export interface Ui3nRadioExpose {
+  clear: () => void;
+}
+
 /**
  * Radio component slots
  */
@@ -72,6 +84,10 @@ export interface Ui3nRadioSlots {
  * Radio group component properties
  */
 export interface Ui3nRadioGroupProps {
+  /**
+   * Root element id
+   */
+  id?: string;
   /**
    * Radio group name
    */
@@ -115,3 +131,7 @@ export interface Ui3nRadioGroupSlots {
    */
   default: () => VNode;
 }
+
+export interface Ui3nRadioGroupExpose {
+  clear: () => void;
+}