@v1nt1248/3nclient-lib 0.2.41 → 0.2.43

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.2.41",
+  "version": "0.2.43",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -98,7 +98,7 @@
     "tslib": "2.8.1",
     "typescript": "5.9.2",
     "typescript-eslint": "^8.40.0",
-    "vite": "7.1.4",
+    "vite": "7.1.5",
     "vite-plugin-css-injected-by-js": "3.5.2",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-vue-devtools": "^7.7.7",
@@ -107,7 +107,7 @@
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "3.0.6"
   },
-  "packageManager": "pnpm@10.15.0",
+  "packageManager": "pnpm@10.16.0",
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, useTemplateRef } from 'vue';
+import { computed, onMounted, useTemplateRef, watch } from 'vue';
 import type { Ui3nIconEmits, Ui3nIconProps } from './types';
 
 const props = withDefaults(
@@ -19,7 +19,6 @@ 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> = {};
   const transformData = [];
@@ -39,9 +38,19 @@ function onClick(ev: Event) {
 
 onMounted(() => {
   if (iconEl.value) {
-    iconEl.value.classList.add(iconClass.value);
+    iconEl.value.classList.add(`ui3n-icon__${props.icon}`);
   }
 });
+
+watch(
+  () => props.icon,
+  (val, oldVal) => {
+    if (val && val !== oldVal) {
+      iconEl.value?.classList.remove(`ui3n-icon__${oldVal}`);
+      iconEl.value?.classList.add(`ui3n-icon__${val}`);
+    }
+  }
+)
 </script>
 
 <template>

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

@@ -88,6 +88,25 @@
     : '200%',
   );
 
+  const label1Text = computed(() => {
+    if (props.range) {
+      const val = (innerValue.value as [number, number])[0];
+      return props.transformValueMethod
+        ? props.transformValueMethod(val)
+        : `${val}`;
+    }
+
+    return props.transformValueMethod ? props.transformValueMethod(innerValue.value as number) : `${innerValue.value}`;
+  });
+  const label2Text = computed(() => {
+    if (!props.range) {
+      return '';
+    }
+
+    const val = (innerValue.value as [number, number])[1];
+    return props.transformValueMethod ? props.transformValueMethod(val) :  `${val}`;
+  });
+
   function onMouseenter(pointer: 1 | 2) {
     if (props.labelVisible === 'normal') {
       showLabel.value[`${pointer}`] = true;
@@ -231,7 +250,7 @@
     >
       <ui3n-tooltip
         :model-value="showLabel['1']"
-        :content="range ? `${(innerValue as [number, number])[0]}` : `${innerValue}`"
+        :content="label1Text"
         trigger="manual"
         placement="top-start"
         position-strategy="absolute"
@@ -255,7 +274,7 @@
     >
       <ui3n-tooltip
         :model-value="showLabel['2']"
-        :content="`${(innerValue as [number, number])[1]}`"
+        :content="label2Text"
         trigger="manual"
         placement="top-start"
         position-strategy="absolute"
@@ -266,46 +285,6 @@
         <div :class="[$style.pointer, selectedPointer === 2 && $style.selected]" />
       </ui3n-tooltip>
     </div>
-
-    <!--    <ui3n-tooltip-->
-    <!--      :model-value="labelVisible === 'always'"-->
-    <!--      :content="range ? `${(innerValue as [number, number])[0]}` : `${innerValue}`"-->
-    <!--      :trigger="labelVisible === 'always' ? 'manual' : 'hover'"-->
-    <!--      placement="top-start"-->
-    <!--      position-strategy="fixed"-->
-    <!--      :color="labelColor"-->
-    <!--      :text-color="labelTextColor"-->
-    <!--      :disabled="labelVisible === 'never'"-->
-    <!--    >-->
-    <!--      <div-->
-    <!--        ref="pointerEl1"-->
-    <!--        :class="[$style.pointer, $style.pointer1, selectedPointer === 1 && $style.selected]"-->
-    <!--        @pointerdown="onPointerDown($event, 1)"-->
-    <!--        @click.stop.prevent-->
-    <!--        @dragstart="onDragstart"-->
-    <!--      />-->
-    <!--    </ui3n-tooltip>-->
-
-    <!--    <ui3n-tooltip-->
-    <!--      v-if="range"-->
-    <!--      :model-value="labelVisible === 'always'"-->
-    <!--      :content="`${(innerValue as [number, number])[1]}`"-->
-    <!--      :trigger="labelVisible === 'always' ? 'manual' : 'hover'"-->
-    <!--      placement="top-end"-->
-    <!--      position-strategy="absolute"-->
-    <!--      :color="labelColor"-->
-    <!--      :text-color="labelTextColor"-->
-    <!--      :disabled="labelVisible === 'never'"-->
-    <!--    >-->
-    <!--      <div-->
-    <!--        v-if="range"-->
-    <!--        ref="pointerEl2"-->
-    <!--        :class="[$style.pointer, $style.pointer2, selectedPointer === 2 && $style.selected]"-->
-    <!--        @pointerdown="onPointerDown($event, 2)"-->
-    <!--        @click.stop.prevent-->
-    <!--        @dragstart="onDragstart"-->
-    <!--      />-->
-    <!--    </ui3n-tooltip>-->
   </div>
 </template>