@webitel/ui-sdk 25.8.59 → 25.8.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.8.59",
+  "version": "25.8.62",
   "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-tree-line/wt-tree-line.vue

@@ -48,6 +48,7 @@
         :last-child="index === data[childrenProp].length - 1"
         :multiple="multiple"
         :allow-parent="allowParent"
+        :root-data="rootData || data"
         @open-parent="onOpenParent"
         @update:model-value="emit('update:modelValue', $event)"
       />
@@ -64,8 +65,8 @@ import type { WtTreeNestedIcons } from './types/wt-tree-nested-icons.ts';
 
 const props = withDefaults(
   defineProps<{
-    modelValue: null | any;
-    data: any;
+    modelValue: null | unknown | unknown[];
+    data: unknown;
     itemLabel?: string | undefined;
     itemData?: string | undefined;
     childrenProp?: string;
@@ -80,6 +81,7 @@ const props = withDefaults(
      * 'It's a key in data object, which contains field what display searched elements. By this field, table will be opened to elements with this field value. '
      */
     searchedProp?: string;
+    rootData?: unknown;
   }>(),
   {
     nestedLevel: 0,
@@ -118,6 +120,10 @@ const displayIcons = computed(() => {
 });
 
 const isMultipleItemsSelected = () => {
+  if (!Array.isArray(props.modelValue)) {
+    return false;
+  }
+
   if (props.itemData) {
     return props.modelValue.includes(props.data[props.itemData]);
   }
@@ -147,6 +153,69 @@ const displayActiveState = computed(() => {
 });
 
 
+const toggleSelectionWithChildren = (node: unknown, select: boolean, result: unknown[]) => {
+  const value = props.itemData ? node[props.itemData] : node;
+
+  if (select) {
+    if (!result.some((item) => deepEqual(item, value))) {
+      result.push(value);
+    }
+  } else {
+    const index = result.findIndex((item) => deepEqual(item, value));
+    if (index !== -1) {
+      result.splice(index, 1);
+    }
+  }
+
+  if (node && Array.isArray(node[props.childrenProp]) && node[props.childrenProp].length) {
+    for (const child of node[props.childrenProp]) {
+      toggleSelectionWithChildren(child, select, result);
+    }
+  }
+};
+
+const deselectParents = (node: unknown, root: unknown, result: unknown[]) => {
+  const findAndDeselect = (current: unknown, parent: unknown | null): boolean => {
+    if (current === node) {
+      if (parent) {
+        const parentValue = props.itemData ? parent[props.itemData] : parent;
+        const index = result.findIndex((item) => deepEqual(item, parentValue));
+        if (index !== -1) {
+          result.splice(index, 1);
+        }
+      }
+      return true;
+    }
+
+    if (current && Array.isArray(current[props.childrenProp]) && current[props.childrenProp].length) {
+      for (const child of current[props.childrenProp]) {
+        if (findAndDeselect(child, current)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  };
+
+  findAndDeselect(root, null);
+};
+
+const setMultipleModelValueWithTree = () => {
+  const isAlreadySelected = isSelected.value;
+  const newArray = [...props.modelValue];
+
+  // Toggle current node + children
+  toggleSelectionWithChildren(props.data, !isAlreadySelected, newArray);
+
+  if (isAlreadySelected) {
+    // If deselecting, also deselect parents
+    deselectParents(props.data, props.rootData, newArray);
+  }
+
+  emit('update:modelValue', newArray);
+};
+
 const setMultipleModelValue = () => {
   const value = props.itemData ? props.data[props.itemData] : props.data;
   let existingIndex;
@@ -172,12 +241,16 @@ const setMultipleModelValue = () => {
 };
 
 const selectElement = () => {
-  if (props.multiple && !props.data.service) {
-    setMultipleModelValue();
+  if (props.multiple) {
+    if (props.data[props.childrenProp]?.length) {
+      setMultipleModelValueWithTree();
+    } else {
+      setMultipleModelValue();
+    }
     return;
   }
 
-  if (props.allowParent) {
+  if (props.allowParent && !props.data[props.childrenProp]) {
     return emit(
       'update:modelValue',
       props.itemData ? props.data[props.itemData] : props.data,
@@ -207,7 +280,7 @@ const onOpenParent = () => {
   openParent();
 };
 
-const hasSearchedElement = (data: Record<string, any>, nestedLevel = 0) => {
+const hasSearchedElement = (data: Record<string, unknown>, nestedLevel = 0) => {
   // Check if the object itself has searched
   if (data[props.searchedProp] && nestedLevel) {
     return true;

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

@@ -1,7 +1,7 @@
 import type { WtTreeNestedIcons } from './types/wt-tree-nested-icons.ts';
 type __VLS_Props = {
-    modelValue: null | any;
-    data: any;
+    modelValue: null | unknown | unknown[];
+    data: unknown;
     itemLabel?: string | undefined;
     itemData?: string | undefined;
     childrenProp?: string;
@@ -16,6 +16,7 @@ type __VLS_Props = {
      * 'It's a key in data object, which contains field what display searched elements. By this field, table will be opened to elements with this field value. '
      */
     searchedProp?: string;
+    rootData?: unknown;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: any) => any;