@v1nt1248/3nclient-lib 0.1.0 → 0.1.2

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.2",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -36,54 +36,56 @@
   "dependencies": {
     "@iconify-icons/ic": "1.2.13",
     "@iconify/vue": "4.1.2",
-    "dayjs": "1.11.11",
+    "dayjs": "1.11.12",
     "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",
-    "vue": "3.4.27"
+    "pinia": "2.2.1",
+    "vue": "3.4.37"
   },
   "devDependencies": {
     "@types/lodash": "4.17.5",
     "@types/node": "20.14.2",
     "@types/sanitize-html": "2.11.0",
-    "@typescript-eslint/eslint-plugin": "7.13.0",
-    "@typescript-eslint/parser": "7.13.0",
-    "@vitejs/plugin-vue": "5.0.5",
-    "@vue/compiler-core": "3.4.27",
+    "@typescript-eslint/eslint-plugin": "8.0.1",
+    "@typescript-eslint/parser": "8.0.1",
+    "@vitejs/plugin-vue": "5.1.2",
+    "@vue/compiler-core": "3.4.37",
     "@vue/eslint-config-typescript": "13.0.0",
-    "@vue/runtime-core": "3.4.27",
+    "@vue/runtime-core": "3.4.37",
     "@vuedx/typescript-plugin-vue": "0.7.6",
-    "eslint": "9.4.0",
+    "eslint": "9.9.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "6.2.0",
-    "eslint-plugin-vue": "9.26.0",
-    "jackspeak": "3.4.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "7.1.0",
+    "eslint-plugin-vue": "9.27.0",
+    "jackspeak": "4.0.1",
     "path": "0.12.7",
-    "pinia": "2.1.7",
+    "pinia": "2.2.1",
     "postcss-html": "1.7.0",
-    "prettier": "^3.3.2",
-    "sass": "1.77.5",
-    "stylelint": "16.6.1",
-    "stylelint-config-recommended-scss": "14.0.0",
+    "prettier": "^3.3.3",
+    "sass": "1.77.8",
+    "stylelint": "16.8.1",
+    "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-config-recommended-vue": "1.5.0",
-    "stylelint-config-standard": "36.0.0",
-    "stylelint-scss": "6.3.1",
-    "typescript": "5.4.5",
-    "vite": "5.2.13",
+    "stylelint-config-standard": "36.0.1",
+    "stylelint-scss": "6.5.0",
+    "typescript": "5.5.4",
+    "vite": "5.4.0",
     "vite-plugin-css-injected-by-js": "3.5.1",
-    "vite-plugin-dts": "3.9.1",
-    "vitepress": "1.2.3",
-    "vue": "3.4.27",
-    "vue-tsc": "2.0.21"
+    "vite-plugin-dts": "4.0.2",
+    "vite-plugin-vue-devtools": "^7.3.7",
+    "vitepress": "1.3.2",
+    "vue": "3.4.37",
+    "vue-tsc": "2.0.29"
   },
-  "packageManager": "pnpm@9.3.0",
+  "packageManager": "pnpm@9.7.0",
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [

package/src/components/index.ts

@@ -17,10 +17,29 @@ import type { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots } from './
 import Ui3nNotification from './ui3n-notification.vue';
 import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue';
 import type { Ui3nTableSortIconProps } from './ui3n-table-sort-icon.vue';
-import Ui3nTable from './ui3n-table.vue';
-import type { Ui3nTableProps, Ui3nTableEmits } from './ui3n-table.vue';
+import Ui3nTable from './ui3n-table/ui3n-table.vue';
+import type {
+  Ui3nTableSort,
+  Ui3nTableConfig,
+  Ui3nTableHeadProps,
+  Ui3nTableBodyProps,
+  Ui3nTableGroupActionsSlot,
+  Ui3nTableHeaderCellSlot,
+  Ui3nTableBodyRowSlotScope,
+  Ui3nTableBodyRowSlot,
+  Ui3nTableBodyRowCellSlotScope,
+  Ui3nTableBodyRowCellSlot,
+  Ui3nTableSlots,
+  Ui3nTableProps,
+  Ui3nTableEmits,
+} from './ui3n-table/types';
 import Ui3nDialog from './ui3n-dialog.vue';
-import type { Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogProps, Ui3nDialogEvent } from './ui3n-dialog.vue';
+import type {
+  Ui3nDialogComponentProps,
+  Ui3nDialogComponentEmits,
+  Ui3nDialogProps,
+  Ui3nDialogEvent,
+} from './ui3n-dialog.vue';
 import Ui3nMenu from './ui3n-menu.vue';
 import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots } from './ui3n-menu.vue';
 import Ui3nList from './ui3n-list.vue';
@@ -37,6 +56,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,
@@ -69,6 +94,17 @@ export {
   Ui3nTableSortIcon,
   Ui3nTableSortIconProps,
   Ui3nTable,
+  Ui3nTableSort,
+  Ui3nTableConfig,
+  Ui3nTableHeadProps,
+  Ui3nTableBodyProps,
+  Ui3nTableGroupActionsSlot,
+  Ui3nTableHeaderCellSlot,
+  Ui3nTableBodyRowSlotScope,
+  Ui3nTableBodyRowSlot,
+  Ui3nTableBodyRowCellSlotScope,
+  Ui3nTableBodyRowCellSlot,
+  Ui3nTableSlots,
   Ui3nTableProps,
   Ui3nTableEmits,
   Ui3nDialog,
@@ -103,4 +139,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-checkbox.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, watch, onBeforeMount, ref, useSlots } from 'vue';
 
-type Ui3nCheckboxValue = boolean | string | number;
+export type Ui3nCheckboxValue = boolean | string | number;
 
 export interface Ui3nCheckboxProps {
   modelValue: Ui3nCheckboxValue;

package/src/components/ui3n-dialog.vue

@@ -36,10 +36,15 @@ export interface Ui3nDialogComponentProps {
 
 export interface Ui3nDialogComponentEmits {
   (ev: 'open', value?: any): void;
+
   (ev: 'before-close', value?: any): void;
+
   (ev: 'close', value?: any): void;
+
   (ev: 'confirm', value?: any): void;
+
   (ev: 'cancel', value?: any): void;
+
   (ev: 'click-overlay', value?: any): void;
 }
 
@@ -52,7 +57,7 @@ const data = ref(null);
 const isValid = ref(true);
 const dialogElement = ref<HTMLDivElement | null>(null);
 
-const dialogProps = computed<Ui3nDialogProps>(() => ({
+const dialogProps = computed<Required<Omit<Ui3nDialogProps, 'onClose' | 'onConfirm' | 'onCancel'>>>(() => ({
   teleport: props.dialogProps?.teleport ?? 'body',
   title: props.dialogProps?.title ?? '',
   width: props.dialogProps?.width ?? 380,

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>