@v1nt1248/3nclient-lib 0.1.16 → 0.1.18

package/dist/variables.css

@@ -71,7 +71,7 @@
   --grey-0: #fcfcfd;
   --grey-5: #eff0f1;
   --grey-10: #e1e3e6;
-    --grey-15: #d4d6da;
+  --grey-15: #d4d6da;
   --grey-20: #c6cacf;
   --grey-30: #abb0b8;
   --grey-40: #9197a0;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -32,6 +32,7 @@
     "generate:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
     "copy:dts": "cp ./src/types.d.ts ./dist",
     "copy:css": "cp ./src/assets/styles/variables.css ./dist",
+    "copy:icons:css": "cp ./src/assets/styles/icons.css ./dist",
     "clean:dist": "rm -rf dist/",
     "build:components": "LIB_NAME=lib vite build",
     "build:plugins": "LIB_NAME=plugins vite build",
@@ -51,8 +52,6 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.4",
-    "@iconify-icons/ic": "1.2.13",
-    "@iconify/vue": "4.1.2",
     "dayjs": "1.11.12",
     "lodash": "4.17.21",
     "mitt": "3.0.1",
@@ -61,8 +60,8 @@
     "vuedraggable": "^4.1.0"
   },
   "peerDependencies": {
-    "pinia": "2.2.1",
-    "vue": "3.4.38"
+    "pinia": "2.2.2",
+    "vue": "3.5.5"
   },
   "devDependencies": {
     "@types/lodash": "4.17.5",
@@ -71,9 +70,9 @@
     "@typescript-eslint/eslint-plugin": "8.0.1",
     "@typescript-eslint/parser": "8.0.1",
     "@vitejs/plugin-vue": "5.1.2",
-    "@vue/compiler-core": "3.4.38",
+    "@vue/compiler-core": "3.5.5",
     "@vue/eslint-config-typescript": "13.0.0",
-    "@vue/runtime-core": "3.4.38",
+    "@vue/runtime-core": "3.5.5",
     "@vuedx/typescript-plugin-vue": "0.7.6",
     "eslint": "9.9.0",
     "eslint-config-prettier": "^9.1.0",
@@ -99,7 +98,7 @@
     "vite-plugin-dts": "4.0.2",
     "vite-plugin-vue-devtools": "^7.3.7",
     "vitepress": "1.3.2",
-    "vue": "3.4.38",
+    "vue": "3.5.5",
     "vue-tsc": "2.0.29"
   },
   "packageManager": "pnpm@9.7.0",

package/src/components/index.ts

@@ -1,3 +1,4 @@
+import '../assets/styles/icons.css';
 import Ui3nIcon from './ui3n-icon/ui3n-icon.vue';
 import type { Ui3nIconProps, Ui3nIconEmits } from './ui3n-icon/types';
 import Ui3nButton from './ui3n-button/ui3n-button.vue';

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

@@ -56,7 +56,7 @@ const hasLeftSlot = computed(() => !!slots.left);
       type="icon"
       size="small"
       color="transparent"
-      icon="close"
+      icon="round-close"
       icon-color="var(--color-icon-control-primary-default)"
       @click="emits('close')"
     />

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

@@ -137,7 +137,7 @@ const handleEvent = (event: Event, eventName: Ui3nDialogEvent) => {
         type="icon"
         size="small"
         color="transparent"
-        icon="close"
+        icon="round-close"
         icon-size="16"
         icon-color="var(--color-icon-control-primary-default)"
         @click="closeDialog({ ev: $event })"

package/src/components/ui3n-icon/types.ts

@@ -1,15 +1,12 @@
 export interface Ui3nIconProps {
   icon: string;
   title?: string;
-  inline?: boolean;
   width?: string | number;
   height?: string | number;
+  color?: string;
   horizontalFlip?: boolean;
   verticalFlip?: boolean;
-  flip?: string;
   rotate?: number;
-  color?: string;
-  onLoad?: Function;
 }
 
 export interface Ui3nIconEmits {

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

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { Icon } from '@iconify/vue';
 import type { Ui3nIconEmits, Ui3nIconProps } from './types';
 
 const props = withDefaults(
@@ -15,13 +14,23 @@ const props = withDefaults(
 );
 const emits = defineEmits<Ui3nIconEmits>();
 
-const iconName = computed(() => `ic:${props.icon}`);
-
-function onLoad(value: unknown) {
-  if (props.onLoad) {
-    props.onLoad(value);
+const iconClass = computed(() => `ui3n-icon__${props.icon}`);
+const iconStyle = computed(() => {
+  const value: Record<string, string> = {
+    width: `${props.width}px`,
+    height: `${props.height}px`,
+    color: props.color,
+  };
+  const transformData = [];
+  props.horizontalFlip && transformData.push('rotateY(180deg)');
+  props.verticalFlip && transformData.push('rotateX(180deg)');
+  props.rotate && transformData.push(`rotate(${props.rotate}deg)`);
+  if (transformData.length) {
+    value.transform = transformData.join(' ');
   }
-}
+
+  return value;
+});
 
 function onClick(ev: Event) {
   emits('click', ev);
@@ -29,24 +38,15 @@ function onClick(ev: Event) {
 </script>
 
 <template>
-  <icon
-    :class="$style.icon"
-    :icon="iconName"
+  <div
+    :class="['ui3n-icon', iconClass]"
     :title="title"
-    :inline="inline"
-    :width="width"
-    :height="height"
-    :horizontal-flip="horizontalFlip"
-    :vertical-flip="verticalFlip"
-    :flip="flip"
-    :rotate="rotate"
-    :color="color"
-    :on-load="onLoad"
+    :style="iconStyle"
     @click="onClick"
-  />
+  ></div>
 </template>
 
-<style lang="scss" module>
+<style lang="scss">
 .icon {
   min-width: v-bind(width);
   min-height: v-bind(height);

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

@@ -140,7 +140,7 @@ const validate = (text: string) => {
       type="icon"
       size="small"
       color="transparent"
-      icon="close"
+      icon="round-close"
       icon-size="16"
       icon-color="var(--color-icon-control-accent-default)"
       :class="$style.clearBtn"
@@ -149,7 +149,7 @@ const validate = (text: string) => {
 
     <ui3n-icon
       v-if="displayStateMode === 'success' && displayStateWithIcon && !isFocused"
-      icon="sharp-check-circle-outline"
+      icon="round-check-circle-outline"
       :width="16"
       :height="16"
       color="var(--success-content-default)"
@@ -179,6 +179,7 @@ const validate = (text: string) => {
 
   position: relative;
   width: 100%;
+  padding: 1px;
   border-radius: var(--spacing-xs);
 
   &:hover {

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

@@ -33,13 +33,13 @@ const stylesByTypes = {
     color: 'var(--info-content-default)',
     icon: 'round-info',
     iconColor: 'var(--info-fill-default)',
-    iconRotate: 90,
+    iconRotate: 180,
   },
   error: {
     color: 'var(--error-content-default)',
     icon: 'round-info',
     iconColor: 'var(--error-fill-default)',
-    iconRotate: 90,
+    iconRotate: 180,
   },
 };
 
@@ -81,7 +81,7 @@ const closeNotification = () => {
       type="icon"
       size="small"
       color="transparent"
-      icon="close"
+      icon="round-close"
       :icon-color="stylesByTypes[type].color"
       :class="$style.closeBtn"
       @click="closeNotification"

package/src/components/ui3n-table/ui3n-table-sort-icon.vue

@@ -12,8 +12,8 @@
 <template>
   <transition mode="out-in" name="fade">
     <ui3n-icon
-      :key="value === 'asc' ? 'baseline-arrow-downward' : 'baseline-arrow-upward'"
-      :icon="value === 'asc' ? 'baseline-arrow-downward' : 'baseline-arrow-upward'"
+      :key="value === 'asc' ? 'round-arrow-downward' : 'round-arrow-upward'"
+      :icon="value === 'asc' ? 'round-arrow-downward' : 'round-arrow-upward'"
       :width="iconSize"
       :height="iconSize"
       :color="iconColor"

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

@@ -22,11 +22,11 @@ const $style = useCssModule();
 const tabs = ref<HTMLDivElement | null>(null);
 const children = ref<HTMLCollection | null>(null);
 
-const activeColor = computed(() => props.activeColor);
-const inactiveColor = computed(() => props.inactiveColor);
-const indicatorColor = computed(() => props.indicatorColor);
-const indicatorSize = computed(() => `${props.indicatorSize}px`);
-const indicatorPosition = computed(() => props.indicatorPosition === 'reverse' ? '100%' : '0');
+const activeColorValue = computed(() => props.activeColor);
+const inactiveColorValue = computed(() => props.inactiveColor);
+const indicatorColorValue = computed(() => props.indicatorColor);
+const indicatorSizeValue = computed(() => `${props.indicatorSize}px`);
+const indicatorPositionValue = computed(() => props.indicatorPosition === 'reverse' ? '100%' : '0');
 
 watch(
   () => props.modelValue,
@@ -100,7 +100,7 @@ const onClick = (ev: MouseEvent) => {
   cursor: pointer;
   position: relative;
   user-select: none;
-  color: v-bind('inactiveColor');
+  color: v-bind(inactiveColorValue);
   @include ripple(var(--color-bg-control-secondary-default));
 
   &:hover {
@@ -112,8 +112,8 @@ const onClick = (ev: MouseEvent) => {
     content: '';
     left: 0;
     width: 100%;
-    bottom: v-bind('indicatorPosition');
-    height: v-bind('indicatorSize');
+    bottom: v-bind(indicatorPositionValue);
+    height: v-bind(indicatorSizeValue);
     background-color: transparent;
     transition: background-color 250ms ease-in-out;
   }
@@ -126,10 +126,10 @@ const onClick = (ev: MouseEvent) => {
 }
 
 .active {
-  color: v-bind('activeColor');
+  color: v-bind(activeColorValue);
 
   &::after {
-    background-color: v-bind('indicatorColor');
+    background-color: v-bind(indicatorColorValue);
     transition: background-color 250ms ease-in-out;
   }
 }
@@ -140,8 +140,8 @@ const onClick = (ev: MouseEvent) => {
 
   .item {
     &::after {
-      left: v-bind('indicatorPosition');
-      width: v-bind('indicatorSize');
+      left: v-bind(indicatorPositionValue);
+      width: v-bind(indicatorSizeValue);
       bottom: 0;
       height: 100%;
     }

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

@@ -101,6 +101,7 @@ const onInput = (ev: Event) => {
   position: relative;
   width: 100%;
   border-radius: var(--spacing-xs);
+  padding: 1px;
 }
 
 .label {