@webitel/ui-sdk 25.8.49 → 25.8.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.8.49",
+  "version": "25.8.51",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",

package/src/components/wt-checkbox/wt-checkbox.vue

@@ -1,13 +1,13 @@
 <template>
-  <div 
+  <div
     class="wt-checkbox"
   >
     <p-checkbox
       v-model="model"
-      :input-id="checkboxId"
+      :binary="isSingle"
       :disabled="disabled"
+      :input-id="checkboxId"
       :value="value"
-      :binary="isSingle"
     >
       <template #icon>
         <span class="wt-checkbox__checkmark">
@@ -18,10 +18,9 @@
         </span>
       </template>
     </p-checkbox>
-    <wt-label 
-      v-if="label"
-      :for="checkboxId"
+    <wt-label
       :disabled="disabled"
+      :for="checkboxId"
     >
       <!-- @slot Custom label markup -->
       <slot
@@ -29,6 +28,7 @@
         v-bind="{ label, isChecked, disabled }"
       >
         <div
+          v-if="label"
           class="wt-checkbox__label"
         >
           {{ label }}
@@ -38,7 +38,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { CheckboxProps } from 'primevue/checkbox';
 import { computed, defineModel, defineProps } from 'vue';
 
@@ -84,8 +84,8 @@ const iconColor = computed(() => {
 
 <style lang="scss" scoped>
 .wt-checkbox {
-  display: flex;
   position: relative;
+  display: flex;
   align-items: center;
   user-select: none;
 }
@@ -95,8 +95,8 @@ const iconColor = computed(() => {
 }
 
 .wt-checkbox__label {
-  transition: var(--transition);
-  cursor: pointer;
   margin-left: var(--checkbox-icon-margin);
+  cursor: pointer;
+  transition: var(--transition);
 }
 </style>

package/src/components/wt-tree-line/wt-tree-line.vue

@@ -18,7 +18,7 @@
       />
     </div>
     <div
-      :class="{ active: isSelected }"
+      :class="{ active: displayActiveState }"
       class="wt-tree-line__label-wrapper"
       @click="selectElement"
     >
@@ -26,7 +26,7 @@
         {{ label }}
       </p>
       <wt-icon
-        v-if="isSelected"
+        v-if="displayActiveState"
         icon="chat-message-status-sent"
       />
     </div>
@@ -42,6 +42,7 @@
         :item-label="itemLabel"
         :item-data="itemData"
         :nested-level="nestedLevel + 1"
+        :selected-parent="isSelected || selectedParent"
         :next-element="!!data[childrenProp][index + 1]"
         :nested-icons="displayIcons"
         :last-child="index === data[childrenProp].length - 1"
@@ -69,6 +70,7 @@ const props = withDefaults(
     childrenProp?: string;
     nestedLevel?: number;
     lastChild?: boolean;
+    selectedParent?: boolean;
     nestedIcons?: WtTreeNestedIcons[];
     nextElement?: boolean;
     multiple?: boolean;
@@ -82,6 +84,7 @@ const props = withDefaults(
     childrenProp: 'children',
     lastChild: false,
     nextElement: false,
+    selectedParent: false,
     multiple: false,
     searchedProp: 'searched',
   },
@@ -132,6 +135,15 @@ const isSelected = computed(() => {
   return deepEqual(props.modelValue, props.data);
 });
 
+const displayActiveState = computed(() => {
+  if (props.multiple) {
+    return isSelected.value;
+  }
+
+  return isSelected.value || props.selectedParent;
+});
+
+
 const setMultipleModelValue = () => {
   const value = props.itemData ? props.data[props.itemData] : props.data;
   let existingIndex;
@@ -162,11 +174,6 @@ const selectElement = () => {
     return;
   }
 
-  if (props.data[props.childrenProp]?.length) {
-    collapsed.value = !collapsed.value;
-    return;
-  }
-
   emit(
     'update:modelValue',
     props.itemData ? props.data[props.itemData] : props.data,

package/types/components/wt-tree-line/wt-tree-line.vue.d.ts

@@ -7,6 +7,7 @@ type __VLS_Props = {
     childrenProp?: string;
     nestedLevel?: number;
     lastChild?: boolean;
+    selectedParent?: boolean;
     nestedIcons?: WtTreeNestedIcons[];
     nextElement?: boolean;
     multiple?: boolean;
@@ -26,6 +27,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     lastChild: boolean;
     childrenProp: string;
     nestedLevel: number;
+    selectedParent: boolean;
     nextElement: boolean;
     searchedProp: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;