@v1nt1248/3nclient-lib 0.1.0 → 0.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -40,7 +40,8 @@
     "lodash": "4.17.21",
     "mitt": "3.0.1",
     "sanitize-html": "2.13.0",
-    "tslib": "2.6.3"
+    "tslib": "2.6.3",
+    "vuedraggable": "^4.1.0"
   },
   "peerDependencies": {
     "pinia": "2.1.7",
@@ -68,7 +69,7 @@
     "path": "0.12.7",
     "pinia": "2.1.7",
     "postcss-html": "1.7.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "sass": "1.77.5",
     "stylelint": "16.6.1",
     "stylelint-config-recommended-scss": "14.0.0",
@@ -83,7 +84,7 @@
     "vue": "3.4.27",
     "vue-tsc": "2.0.21"
   },
-  "packageManager": "pnpm@9.3.0",
+  "packageManager": "pnpm@9.5.0",
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [

package/src/components/index.ts

@@ -37,6 +37,12 @@ import Ui3nBreadcrumbs from './ui3n-breadcrumbs.vue';
 import type { Ui3nBreadcrumbsProps } from './ui3n-breadcrumbs.vue';
 import Ui3nSwitch from './ui3n-switch.vue';
 import type { Ui3nSwitchProps, Ui3nSwitchEmits, Ui3nSwitchSlots } from './ui3n-switch.vue';
+import Ui3nStepLineBar from './ui3n-step-line-bar.vue';
+import type { Ui3nStepLineBarProps } from './ui3n-step-line-bar.vue';
+import Ui3nProgressLinear from './ui3n-progress-linear.vue';
+import type { Ui3nProgressLinearProps } from './ui3n-progress-linear.vue';
+import Ui3nProgressCircular from './ui3n-progress-circular.vue';
+import type { Ui3nProgressCircularProps } from './ui3n-progress-circular.vue';
 
 export {
   Ui3nIcon,
@@ -103,4 +109,10 @@ export {
   Ui3nSwitchProps,
   Ui3nSwitchEmits,
   Ui3nSwitchSlots,
+  Ui3nStepLineBar,
+  Ui3nStepLineBarProps,
+  Ui3nProgressLinear,
+  Ui3nProgressLinearProps,
+  Ui3nProgressCircular,
+  Ui3nProgressCircularProps,
 }

package/src/components/ui3n-button.vue

@@ -5,6 +5,7 @@ import Ui3nIcon from './ui3n-icon.vue';
 export interface Ui3nButtonProps {
   type?: 'primary' | 'secondary' | 'tertiary' | 'icon' | 'custom';
   size?: 'regular' | 'small';
+  block?: boolean;
   textColor?: string;
   color?: string;
   elevation?: boolean;
@@ -71,6 +72,7 @@ onMounted(() => {
       $style.button,
       $style[size],
       $style[type],
+      block && type !== 'icon' && $style.block,
       icon && $style[`withIcon-${iconPosition}`],
       elevation && $style.elevation,
     ]"
@@ -143,6 +145,10 @@ onMounted(() => {
   }
 }
 
+.block {
+  width: 100%;
+}
+
 .primary {
   background: var(--color-bg-button-primary-default);
   color: var(--color-text-button-primary-default);

package/src/components/ui3n-input.vue

@@ -7,16 +7,21 @@ import Ui3nButton from './ui3n-button.vue';
 export interface Ui3nInputProps {
   modelValue: string;
   label?: string;
+  type?: 'text' | 'password';
   placeholder?: string;
   clearable?: boolean;
   autofocus?: boolean;
-  rules?: Array<(v: string) => any>;
-  disabled?: boolean;
   icon?: string;
   iconColor?: string;
+  rules?: Array<(v: string) => any>;
+  displayStateMode?: 'error' | 'success';
+  displayStateWithIcon?: boolean;
+  displayStateMessage?: string;
+  disabled?: boolean;
 }
 
 export interface Ui3nInputEmits {
+  (ev: 'init', value: HTMLInputElement): void;
   (ev: 'input', value: string): void;
   (ev: 'focus', value: Event): void;
   (ev: 'blur', value: Event): void;
@@ -39,7 +44,7 @@ const cssIconColor = computed(() => {
     return 'var(--color-icon-control-primary-disabled)';
   }
 
-  return props.iconColor || 'var(--color-icon-control-primary-default)'
+  return props.iconColor || 'var(--color-icon-control-primary-default)';
 });
 const isValid = computed(() => {
   if (!text.value) {
@@ -53,6 +58,8 @@ onMounted(() => {
   if (props.autofocus && inputElement.value) {
     inputElement.value.focus();
   }
+
+  emits('init', inputElement.value!);
 });
 
 watch(
@@ -124,7 +131,8 @@ const validate = (text: string) => {
       icon && $style.withIcon,
       clearable && text && $style.clearable,
       disabled && $style.disabled,
-      !!errorMessage && $style.error,
+      (!!errorMessage || (displayStateMode === 'error')) && $style.error,
+      displayStateMode === 'success' && $style.success,
     ]"
   >
     <label v-if="label" :class="$style.label">
@@ -133,6 +141,8 @@ const validate = (text: string) => {
 
     <input
       ref="inputElement"
+      autocomplete="off"
+      :type="type || 'text'"
       :value="text"
       :placeholder="placeholder"
       :disabled="disabled"
@@ -152,7 +162,7 @@ const validate = (text: string) => {
     />
 
     <ui3n-button
-      v-if="clearable && !!text"
+      v-if="clearable && !!text && !(displayStateMode === 'success' && displayStateWithIcon && !isFocused)"
       type="icon"
       size="small"
       color="transparent"
@@ -163,8 +173,24 @@ const validate = (text: string) => {
       @click="clearValue"
     />
 
-    <div v-if="errorMessage" :class="$style.errorText">
-      {{ errorMessage }}
+    <ui3n-icon
+      v-if="displayStateMode === 'success' && displayStateWithIcon && !isFocused"
+      icon="check-circle-outline"
+      :width="16"
+      :height="16"
+      color="var(--success-content-default)"
+      :class="$style.successIcon"
+    />
+
+    <div
+      v-if="errorMessage || displayStateMessage"
+      :class="[
+        $style.fieldMessage,
+        errorMessage || (displayStateMode === 'error' && !!displayStateMessage) && $style.errorMessage,
+        displayStateMode === 'success' && displayStateMessage && $style.successMessage,
+      ]"
+    >
+      {{ errorMessage || displayStateMessage }}
     </div>
   </div>
 </template>
@@ -208,7 +234,7 @@ const validate = (text: string) => {
   width: 100%;
   font-size: var(--font-12);
   line-height: var(--font-16);
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-control-primary-default);
   margin-bottom: var(--spacing-xs);
 }
@@ -262,12 +288,20 @@ const validate = (text: string) => {
   z-index: 1;
 }
 
-.errorText {
+.fieldMessage {
   font-style: italic;
   font-size: var(--font-10);
   font-weight: 400;
   line-height: 1.4;
-  color: var(--content-error-default);
+  margin-top: 2px;
+
+  &.errorMessage {
+    color: var(--error-content-default);
+  }
+
+  &.successMessage {
+    color: var(--success-content-default)
+  }
 }
 
 .clearable {
@@ -279,11 +313,27 @@ const validate = (text: string) => {
 }
 
 .error {
+  .label {
+    color: var(--error-content-default) !important;
+  }
+
   .field {
-    outline: 1px solid var(--content-error-default);
+    outline: 1px solid var(--error-content-default) !important;
   }
 }
 
+.success {
+  .label {
+    color: var(--success-content-default) !important;
+  }
+}
+
+.successIcon {
+  position: absolute;
+  right: var(--spacing-s);
+  bottom: var(--spacing-s);
+}
+
 .disabled {
   pointer-events: none;
   user-select: none;

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>

package/src/components/ui3n-table.vue

@@ -11,7 +11,6 @@ export interface Ui3nTableProps {
 
 export interface Ui3nTableEmits {
   (ev: 'go', name: string): void;
-
   (ev: 'action', value: { action: EntityAction, entity: ListingEntryTypeExtended }): void;
 }
 
@@ -268,11 +267,11 @@ const handleActions = (ev: MouseEvent, action: EntityAction, entity: ListingEntr
   color: var(--color-icon-control-accent-unselected);
 }
 
-.rowBookmark{
+.rowBookmark {
   left: 2px;
 }
 
-.rowRename{
+.rowRename {
   right: calc(var(--spacing-l) * 4);
 }
 
@@ -324,6 +323,6 @@ const handleActions = (ev: MouseEvent, action: EntityAction, entity: ListingEntr
   line-height: var(--font-20);
   color: var(--color-text-control-secondary-default);
   text-align: center;
-  padding: 56px 0 ;
+  padding: 56px 0;
 }
 </style>