@v1nt1248/3nclient-lib 0.2.37 → 0.2.39

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.2.37",
+  "version": "0.2.39",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -53,7 +53,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/vue": "1.1.9",
-    "dayjs": "1.11.13",
+    "dayjs": "1.11.18",
     "lodash": "4.17.21",
     "mitt": "3.0.1",
     "sanitize-html": "2.17.0",
@@ -61,7 +61,7 @@
   },
   "peerDependencies": {
     "pinia": "3.0.3",
-    "vue": "3.5.20"
+    "vue": "3.5.21"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
@@ -72,9 +72,9 @@
     "@typescript-eslint/eslint-plugin": "8.40.0",
     "@typescript-eslint/parser": "8.40.0",
     "@vitejs/plugin-vue": "6.0.1",
-    "@vue/compiler-core": "3.5.20",
+    "@vue/compiler-core": "3.5.21",
     "@vue/eslint-config-typescript": "14.6.0",
-    "@vue/runtime-core": "3.5.20",
+    "@vue/runtime-core": "3.5.21",
     "@vuedx/typescript-plugin-vue": "0.7.6",
     "eslint": "9.34.0",
     "eslint-config-prettier": "10.1.8",
@@ -89,7 +89,7 @@
     "pinia": "3.0.3",
     "postcss-html": "1.8.0",
     "prettier": "^3.6.2",
-    "sass": "1.90.0",
+    "sass": "1.92.0",
     "stylelint": "16.23.1",
     "stylelint-config-recommended-scss": "16.0.0",
     "stylelint-config-recommended-vue": "1.6.1",
@@ -98,12 +98,12 @@
     "tslib": "2.8.1",
     "typescript": "5.9.2",
     "typescript-eslint": "^8.40.0",
-    "vite": "7.1.3",
+    "vite": "7.1.4",
     "vite-plugin-css-injected-by-js": "3.5.2",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-vue-devtools": "^7.7.7",
     "vitepress": "1.6.4",
-    "vue": "3.5.20",
+    "vue": "3.5.21",
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "3.0.6"
   },

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

@@ -1,6 +1,7 @@
 export interface Ui3nIconProps {
   icon: string;
   title?: string;
+  size?: string | number;
   width?: string | number;
   height?: string | number;
   color?: string;

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

@@ -1,26 +1,27 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, onMounted, useTemplateRef } from 'vue';
 import type { Ui3nIconEmits, Ui3nIconProps } from './types';
 
 const props = withDefaults(
   defineProps<Ui3nIconProps>(),
   {
     title: '',
-    width: 16,
-    height: 16,
     rotate: 0,
     color: 'var(--color-icon-control-primary-default)',
   },
 );
 const emits = defineEmits<Ui3nIconEmits>();
 
+const iconEl = useTemplateRef('icon');
+
+const widthVal = computed(() => props.size || props.width || 16);
+const heightVal = computed(() => props.size || props.height || 16);
+const widthCss = computed(() => `${widthVal.value}px`);
+const heightCss = computed(() => `${heightVal.value}px`);
+
 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 value: Record<string, string> = {};
   const transformData = [];
   props.horizontalFlip && transformData.push('rotateY(180deg)');
   props.verticalFlip && transformData.push('rotateX(180deg)');
@@ -35,22 +36,37 @@ const iconStyle = computed(() => {
 function onClick(ev: Event) {
   emits('click', ev);
 }
+
+onMounted(() => {
+  if (iconEl.value) {
+    iconEl.value.classList.add(iconClass.value);
+  }
+});
 </script>
 
 <template>
   <div
-    :class="['ui3n-icon', iconClass]"
+    ref="icon"
+    class="ui3n-icon"
+    :class="$style.icon"
     :title="title"
     :style="iconStyle"
     @click="onClick"
   />
 </template>
 
-<style lang="scss">
+<style lang="scss" module>
 .icon {
-  min-width: v-bind(width);
-  min-height: v-bind(height);
+  --ui3n-icon-color: v-bind(color);
+
+  min-width: v-bind(widthCss);
+  width: v-bind(widthCss);
+  max-width: v-bind(widthCss);
+  min-height: v-bind(heightCss);
+  height: v-bind(heightCss);
+  max-height: v-bind(heightCss);
   flex-grow: 0;
   flex-shrink: 0;
+  color: var(--ui3n-icon-color);
 }
 </style>