@v1nt1248/3nclient-lib 0.2.38 → 0.2.40

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.2.38",
+  "version": "0.2.40",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

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>