@v1nt1248/3nclient-lib 0.0.42 → 0.1.1

package/src/components/ui3n-notification.vue

@@ -1,133 +1,202 @@
-ui<script lang="ts" setup>
-  import { computed  } from 'vue'
-  import Ui3nIcon from './ui3n-icon.vue'
-  import Ui3nButton from './ui3n-button.vue'
-  import type { Ui3nNotificationProps } from '../constants'
-
-  const props = defineProps<Ui3nNotificationProps>()
-  const params = computed(() => {
-    const {
-      id,
-      type = 'info',
-      content,
-      icon,
-      iconSize = '16',
-      iconColor = 'var(--black-30, #b3b3b3)',
-      position = 'center',
-      duration = 0,
-      onOpen = () => void(0),
-      onClose = () => void(0),
-    } = props
-    return { id, type, content, icon, iconSize, iconColor, position, duration, onOpen, onClose }
-  })
-
-  const closeNotification = () => {
-    params.value.onClose()
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import Ui3nIcon from './ui3n-icon.vue';
+import Ui3nButton from './ui3n-button.vue';
+import type { Ui3nNotificationProps } from '../constants';
+
+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: 'warning',
+    iconColor: 'var(--success-fill-default)',
+    iconRotate: 0,
+  },
+  warning: {
+    color: 'var(--warning-content-default)',
+    icon: 'warning',
+    iconColor: 'var(--warning-fill-default)',
+    iconRotate: 0,
+  },
+  info: {
+    color: 'var(--info-content-default)',
+    icon: 'info',
+    iconColor: 'var(--info-fill-default)',
+    iconRotate: 90,
+  },
+  error: {
+    color: 'var(--error-content-default)',
+    icon: 'info',
+    iconColor: 'var(--error-fill-default)',
+    iconRotate: 90,
+  },
+};
+
+onMounted(() => {
+  if (props.duration > 500) {
+    setTimeout(() => {
+      props.onClose();
+    }, props.duration);
   }
+});
+
+const closeNotification = () => {
+  props.onClose();
+};
 </script>
 
 <template>
   <div
-    :id="params.id"
-    :class="[
-      'ui3n-notification',
-      `ui3n-notification--${params.type}`,
-      `ui3n-notification--${params.position}`,
-      {
-        'ui3n-notification--with-icon': params.icon,
-      },
-    ]"
+    :id="id"
+    :class="[$style.notification, $style[`${type}Type`], $style[`${position}Position`], withIcon && $style.withIcon]"
   >
-    <ui3n-icon
-      v-if="params.icon"
-      :icon="params.icon"
-      :width="params.iconSize"
-      :height="params.iconSize"
-      :color="params.iconColor"
-    />
+    <div v-if="withIcon" :class="$style.icon">
+      <ui3n-icon
+        :icon="stylesByTypes[type].icon"
+        width="16"
+        height="16"
+        :rotate="stylesByTypes[type].iconRotate"
+        :color="stylesByTypes[type].iconColor"
+      />
+    </div>
 
-    <div class="ui3n-notification__content">
-      {{ params.content }}
+
+    <div :class="$style.content">
+      {{ content }}
     </div>
 
     <ui3n-button
       v-if="!props.duration"
-      round
+      type="icon"
+      size="small"
       color="transparent"
       icon="close"
-      icon-size="12"
-      icon-color="var(--system-white, #fff)"
-      class="ui3n-notification__close"
+      :icon-color="stylesByTypes[type].color"
+      :class="$style.closeBtn"
       @click="closeNotification"
     />
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .ui3n-notification {
-    display: flex;
-    position: relative;
-    z-index: 5000;
-    border-radius: var(--half-size, 4px);
-    padding: var(--base-size, 8px);
-    max-width: 400px;
-    margin-bottom: var(--base-size);
-
-    &--with-icon {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-
-      .ui3n-notification__content {
-        padding-left: var(--base-size, 8px);
-      }
-    }
-
-    &__content {
-      position: relative;
-      flex-grow: 2;
-      font-size: var(--font-13, 13px);
-      font-weight: 400;
-      line-height: 1.5;
-      color: var(--system-white, #fff);
-    }
-
-    &__close {
-      position: absolute;
-      z-index: 1;
-      top: 0;
-      right: 0;
-    }
-
-    &--success {
-      background-color: rgb(16, 196, 143);
-    }
-
-    &--warning {
-      background-color: rgb(255, 136,0);
-    }
-
-    &--info {
-      background-color: rgb(16, 175, 239);
-    }
-
-    &--error {
-      background-color: rgb(239, 83, 80);
-    }
-
-    &--left {
-      margin-left: 0;
-      margin-right: auto;
-    }
-
-    &--center {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    &--right {
-      margin-left: auto;
-      margin-right: 0;
-    }
+<style lang="scss" module>
+.notification {
+  --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;
+}
+
+.icon {
+  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;
+}
+
+.content {
+  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);
+
+  .icon {
+    background-color: var(--info-content-default);
+  }
+
+  .content {
+    color: var(--info-content-default);
+  }
+}
+
+.successType {
+  background-color: var(--success-fill-default);
+
+  .icon {
+    background-color: var(--success-content-default);
+  }
+
+  .content {
+    color: var(--success-content-default);
+  }
+}
+
+.warningType {
+  background-color: var(--warning-fill-default);
+
+  .icon {
+    background-color: var(--warning-content-default);
+  }
+
+  .content {
+    color: var(--warning-content-default);
+  }
+}
+
+.errorType {
+  background-color: var(--error-fill-default);
+
+  .icon {
+    background-color: var(--error-content-default);
+  }
+
+  .content {
+    color: var(--error-content-default);
   }
+}
+
+.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-circular.vue

@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import { computed, onBeforeMount, onBeforeUnmount, ref, useCssModule } from 'vue';
+import { toNumber } from 'lodash';
+
+export interface Ui3nProgressCircularProps {
+  value?: number | string;
+  size?: number | string;
+  width?: number | string;
+  withText?: boolean;
+  bgColor?: string;
+  color?: string;
+  indeterminate?: boolean;
+}
+
+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);
+  }
+
+  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);
+}
+
+onBeforeMount(() => {
+  if (props.indeterminate) {
+    changeValueForIndeterminateMode();
+  }
+});
+
+onBeforeUnmount(() => {
+  clearInterval(timerId.value);
+});
+</script>
+
+<template>
+  <div ref="element" :class="[$style.progress, 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
+      v-if="isValueShown"
+      :class="$style.text"
+    >
+      {{ innerValue }}%
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.progress {
+  --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;
+    }
+  }
+
+  &: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;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(-90deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+</style>

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

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { toNumber } from 'lodash';
+
+export interface Ui3nProgressLinearProps {
+  value?: number | string;
+  height?: number | string;
+  withText?: boolean;
+  bgColor?: string;
+  color?: string;
+  indeterminate?: boolean;
+}
+
+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 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>
+  <div :class="[$style.progress, indeterminate && $style.indeterminate]">
+    <div
+      v-if="isValueShown && innerHeight < thresholdHeight"
+      :class="[$style.text, $style.above]"
+    >
+      {{ displayValue }}
+    </div>
+
+    <div :class="$style.body">
+      <div :class="$style.value" :style="{ width: displayValue }">
+        <div
+          v-if="isValueShown && innerHeight >= thresholdHeight && innerValue >= thresholdValue"
+          :class="$style.text"
+        >
+          {{ displayValue }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.progress {
+  --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;
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.indeterminate {
+  .value {
+    animation: 1s linear 0s infinite normal move;
+  }
+}
+
+@keyframes move {
+  from {
+    left: -22%
+  }
+  to {
+    left: 122%
+  }
+}
+</style>

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

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+export interface Ui3nStepLineBarProps {
+  label: string;
+  current: number;
+  steps: number;
+}
+
+withDefaults(
+  defineProps<Ui3nStepLineBarProps>(),
+  {
+    current: 1,
+  },
+);
+</script>
+
+<template>
+  <div :class="$style.stepLineBar">
+    <div :class="$style.label">
+      {{ label }}
+    </div>
+
+    <div :class="$style.body">
+      <div v-for="step in steps" :class="[$style.step, step <= current && $style.active]" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.stepLineBar {
+  --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>