@teammodlr/ui-kit 2.3.10 → 2.3.14

package/src/components/tree/Tree.vue

@@ -1,138 +1,138 @@
-<template>
-    <div ref="selfElRef">
-        <VVirtualList
-            ref="virtualListInstRef"
-            :items="nodesRef"
-            itemResizable
-            :itemSize="20"
-        >
-            <template v-slot:default="{ item }">
-                <TreeNode :node="item"/>
-            </template>
-        </VVirtualList>
-    </div>
-</template>
-
-<script lang="ts">
-import {type VirtualListInst, VVirtualList} from 'vueuc'
-import {computed, defineComponent, provide, ref, toRef} from 'vue'
-import {createTreeMateOptions, treeProps} from "./props";
-import type {Key, TmNode, TreeOption} from "./types";
-import {
-    createTreeMate,
-} from 'treemate'
-import TreeNode from "./TreeNode.vue";
-import {treeInjectionKey} from "./types";
-import {call} from "../../call";
-import useMergedState from "../../composables/useMergedState";
-
-export default defineComponent({
-    components: {TreeNode, VVirtualList},
-    name: 'Tree',
-    props: treeProps,
-    emits: ['update:expandedKeys', 'dblclick'],
-    setup: function (props, {emit}) {
-        const selfElRef = ref<HTMLDivElement | null>(null);
-        const virtualListInstRef = ref<VirtualListInst | null>(null)
-
-        function getScrollContainer(): HTMLElement | null | undefined {
-            return virtualListInstRef.value?.listElRef
-        }
-
-        function getScrollContent(): HTMLElement | null | undefined {
-            return virtualListInstRef.value?.itemsElRef
-        }
-
-        const displayTreeMateRef = computed(() => {
-            return createTreeMate<TreeOption>(
-                props.data,
-                createTreeMateOptions(
-                    props.keyField,
-                    props.childrenField,
-                    'disabled',
-                    props.getChildren
-                )
-            )
-        });
-
-        const dataTreeMateRef = displayTreeMateRef;
-        const controlledExpandedKeysRef = toRef(props, 'expandedKeys')
-        const uncontrolledExpandedKeysRef = ref<Key[]>([])
-        const mergedExpandedKeysRef = useMergedState(
-            controlledExpandedKeysRef,
-            uncontrolledExpandedKeysRef
-        )
-        const nodesRef = computed(() => {
-            return displayTreeMateRef.value.getFlattenedNodes(mergedExpandedKeysRef.value);
-        });
-
-        provide(treeInjectionKey, {
-            mergedExpandedKeysRef,
-            indentRef: toRef(props, 'indent'),
-            expandOnClickRef: toRef(props, 'expandOnClick'),
-            nodePropsRef: toRef(props, 'nodeProps'),
-            labelFieldRef: toRef(props, 'labelField'),
-            keyFieldRef: toRef(props, 'keyField'),
-            childrenFieldRef: toRef(props, 'childrenField'),
-            handleDoubleClick,
-            handleToggleClick
-        });
-
-        // const { watchProps } = props;
-        //
-        // watchEffect(() => {
-        //     initUncontrolledExpandedKeys(undefined);
-        // })
-
-        function handleToggleClick(node: TmNode): void {
-
-            toggleExpand(node);
-        }
-
-        function handleDoubleClick(node: TreeOption): void {
-            emit('dblclick', node);
-        }
-
-        function toggleExpand(node: TmNode): void {
-            const {key} = node;
-            const {value: mergedExpandedKeys} = mergedExpandedKeysRef
-            const index = mergedExpandedKeys.findIndex(
-                (expandedNodeId) => expandedNodeId === key
-            )
-
-            if (~index) {
-                const expandedKeysAfterChange = Array.from(mergedExpandedKeys);
-                expandedKeysAfterChange.splice(index, 1);
-                doUpdateExpandedKeys(expandedKeysAfterChange);
-            } else {
-                const nodeToBeExpanded = displayTreeMateRef.value.getNode(key);
-                if (!nodeToBeExpanded || nodeToBeExpanded.isLeaf) {
-                    return;
-                }
-
-                let nextKeys: Key[] = mergedExpandedKeys.concat(key);
-
-                doUpdateExpandedKeys(nextKeys)
-            }
-        }
-
-        function getOptionsByKeys(keys: Key[]): Array<TreeOption | null> {
-            const {getNode} = dataTreeMateRef.value;
-            return keys.map((key) => getNode(key)?.rawNode || null);
-        }
-
-        function doUpdateExpandedKeys(
-            value: Key[],
-        ): void {
-            uncontrolledExpandedKeysRef.value = value;
-        }
-
-        return {
-            nodesRef,
-            displayTreeMateRef,
-            selfElRef
-        }
-    }
-})
-
-</script>
+<template>
+    <div ref="selfElRef">
+        <VVirtualList
+            ref="virtualListInstRef"
+            :items="nodesRef"
+            itemResizable
+            :itemSize="20"
+        >
+            <template v-slot:default="{ item }">
+                <TreeNode :node="item"/>
+            </template>
+        </VVirtualList>
+    </div>
+</template>
+
+<script lang="ts">
+import {type VirtualListInst, VVirtualList} from 'vueuc'
+import {computed, defineComponent, provide, ref, toRef} from 'vue'
+import {createTreeMateOptions, treeProps} from "./props";
+import type {Key, TmNode, TreeOption} from "./types";
+import {
+    createTreeMate,
+} from 'treemate'
+import TreeNode from "./TreeNode.vue";
+import {treeInjectionKey} from "./types";
+import {call} from "../../call";
+import useMergedState from "../../composables/useMergedState";
+
+export default defineComponent({
+    components: {TreeNode, VVirtualList},
+    name: 'Tree',
+    props: treeProps,
+    emits: ['update:expandedKeys', 'dblclick'],
+    setup: function (props, {emit}) {
+        const selfElRef = ref<HTMLDivElement | null>(null);
+        const virtualListInstRef = ref<VirtualListInst | null>(null)
+
+        function getScrollContainer(): HTMLElement | null | undefined {
+            return virtualListInstRef.value?.listElRef
+        }
+
+        function getScrollContent(): HTMLElement | null | undefined {
+            return virtualListInstRef.value?.itemsElRef
+        }
+
+        const displayTreeMateRef = computed(() => {
+            return createTreeMate<TreeOption>(
+                props.data,
+                createTreeMateOptions(
+                    props.keyField,
+                    props.childrenField,
+                    'disabled',
+                    props.getChildren
+                )
+            )
+        });
+
+        const dataTreeMateRef = displayTreeMateRef;
+        const controlledExpandedKeysRef = toRef(props, 'expandedKeys')
+        const uncontrolledExpandedKeysRef = ref<Key[]>([])
+        const mergedExpandedKeysRef = useMergedState(
+            controlledExpandedKeysRef,
+            uncontrolledExpandedKeysRef
+        )
+        const nodesRef = computed(() => {
+            return displayTreeMateRef.value.getFlattenedNodes(mergedExpandedKeysRef.value);
+        });
+
+        provide(treeInjectionKey, {
+            mergedExpandedKeysRef,
+            indentRef: toRef(props, 'indent'),
+            expandOnClickRef: toRef(props, 'expandOnClick'),
+            nodePropsRef: toRef(props, 'nodeProps'),
+            labelFieldRef: toRef(props, 'labelField'),
+            keyFieldRef: toRef(props, 'keyField'),
+            childrenFieldRef: toRef(props, 'childrenField'),
+            handleDoubleClick,
+            handleToggleClick
+        });
+
+        // const { watchProps } = props;
+        //
+        // watchEffect(() => {
+        //     initUncontrolledExpandedKeys(undefined);
+        // })
+
+        function handleToggleClick(node: TmNode): void {
+
+            toggleExpand(node);
+        }
+
+        function handleDoubleClick(node: TreeOption): void {
+            emit('dblclick', node);
+        }
+
+        function toggleExpand(node: TmNode): void {
+            const {key} = node;
+            const {value: mergedExpandedKeys} = mergedExpandedKeysRef
+            const index = mergedExpandedKeys.findIndex(
+                (expandedNodeId) => expandedNodeId === key
+            )
+
+            if (~index) {
+                const expandedKeysAfterChange = Array.from(mergedExpandedKeys);
+                expandedKeysAfterChange.splice(index, 1);
+                doUpdateExpandedKeys(expandedKeysAfterChange);
+            } else {
+                const nodeToBeExpanded = displayTreeMateRef.value.getNode(key);
+                if (!nodeToBeExpanded || nodeToBeExpanded.isLeaf) {
+                    return;
+                }
+
+                let nextKeys: Key[] = mergedExpandedKeys.concat(key);
+
+                doUpdateExpandedKeys(nextKeys)
+            }
+        }
+
+        function getOptionsByKeys(keys: Key[]): Array<TreeOption | null> {
+            const {getNode} = dataTreeMateRef.value;
+            return keys.map((key) => getNode(key)?.rawNode || null);
+        }
+
+        function doUpdateExpandedKeys(
+            value: Key[],
+        ): void {
+            uncontrolledExpandedKeysRef.value = value;
+        }
+
+        return {
+            nodesRef,
+            displayTreeMateRef,
+            selfElRef
+        }
+    }
+})
+
+</script>

package/src/components/tree/TreeNode.vue

@@ -1,109 +1,109 @@
-<template>
-  <div
-      @dblclick="doDoubleClick"
-      :class="style.nodeWrapper"
-
-  >
-    <div :class="style.node">
-      <template v-if="indentCount > 0">
-        <div v-for="i in indentCount" style="flex-grow: 0; flex-shrink: 0; height: 0;">
-          <div :key="i" style="width: 16px;"></div>
-        </div>
-      </template>
-      <TreeNodeToggle
-          :hide="node.isLeaf"
-          :node="node"
-          :expanded="expanded"
-          @click="handleToggleClick"
-      />
-
-      <div :class="style.nodeContent">
-        <div :class="style.nodeContentText">{{ labelField }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {ref, defineComponent, type PropType, inject, computed, unref} from "vue";
-import type {TmNode, TreeOption} from "./types";
-import {treeInjectionKey} from "./types";
-import TreeNodeToggle from "@/components/tree/TreeNodeToggle.vue";
-import * as style from "./style";
-
-export default defineComponent({
-  name: 'TreeNode',
-  components: {TreeNodeToggle},
-  props: {
-    node: {
-      type: Object as PropType<TmNode>,
-      required: true
-    }
-  },
-  setup(props) {
-    const NTree = inject(treeInjectionKey)!;
-    const {
-      nodePropsRef,
-      labelFieldRef,
-      keyFieldRef,
-      childrenFieldRef,
-      indentRef,
-      handleToggleClick: handleToggleClickTree,
-      handleDoubleClick
-    } = NTree;
-
-    const selfElRef = ref<HTMLDivElement | null>(null);
-
-    function _handleClick(e: MouseEvent): void {
-      const {value: expandOnClick} = NTree.expandOnClickRef;
-      const {node} = props
-      if (!expandOnClick && !node.isLeaf) {
-        handleToggleClick();
-      }
-    }
-
-    function handleToggleClick(): void {
-      const {node} = props;
-
-
-      if (!node.isLastChild && !node.shallowLoaded) {
-        return;
-      }
-
-      handleToggleClickTree(node)
-    }
-
-    function doDoubleClick(e: MouseEvent) {
-      let node = unref(props.node.rawNode);
-      let clone = Object.assign({}, node);
-      delete clone[childrenFieldRef.value];
-      handleDoubleClick(clone);
-    }
-
-    const indentCount = computed(() => {
-      return props.node.level;
-    })
-
-    function handleLineClick(e: MouseEvent) {
-      _handleClick(e);
-    }
-
-    const labelField = computed(() => {
-      return props.node.rawNode[labelFieldRef.value];
-    })
-
-    const expanded = computed(() => NTree.mergedExpandedKeysRef.value.includes(props.node.key));
-
-    return {
-      selfElRef,
-      handleLineClick,
-      indentCount,
-      labelField,
-      expanded: expanded,
-      handleToggleClick,
-      doDoubleClick,
-      style
-    }
-  }
-});
-</script>
+<template>
+  <div
+      @dblclick="doDoubleClick"
+      :class="style.nodeWrapper"
+
+  >
+    <div :class="style.node">
+      <template v-if="indentCount > 0">
+        <div v-for="i in indentCount" style="flex-grow: 0; flex-shrink: 0; height: 0;">
+          <div :key="i" style="width: 16px;"></div>
+        </div>
+      </template>
+      <TreeNodeToggle
+          :hide="node.isLeaf"
+          :node="node"
+          :expanded="expanded"
+          @click="handleToggleClick"
+      />
+
+      <div :class="style.nodeContent">
+        <div :class="style.nodeContentText">{{ labelField }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {ref, defineComponent, type PropType, inject, computed, unref} from "vue";
+import type {TmNode, TreeOption} from "./types";
+import {treeInjectionKey} from "./types";
+import TreeNodeToggle from "@/components/tree/TreeNodeToggle.vue";
+import * as style from "./style";
+
+export default defineComponent({
+  name: 'TreeNode',
+  components: {TreeNodeToggle},
+  props: {
+    node: {
+      type: Object as PropType<TmNode>,
+      required: true
+    }
+  },
+  setup(props) {
+    const NTree = inject(treeInjectionKey)!;
+    const {
+      nodePropsRef,
+      labelFieldRef,
+      keyFieldRef,
+      childrenFieldRef,
+      indentRef,
+      handleToggleClick: handleToggleClickTree,
+      handleDoubleClick
+    } = NTree;
+
+    const selfElRef = ref<HTMLDivElement | null>(null);
+
+    function _handleClick(e: MouseEvent): void {
+      const {value: expandOnClick} = NTree.expandOnClickRef;
+      const {node} = props
+      if (!expandOnClick && !node.isLeaf) {
+        handleToggleClick();
+      }
+    }
+
+    function handleToggleClick(): void {
+      const {node} = props;
+
+
+      if (!node.isLastChild && !node.shallowLoaded) {
+        return;
+      }
+
+      handleToggleClickTree(node)
+    }
+
+    function doDoubleClick(e: MouseEvent) {
+      let node = unref(props.node.rawNode);
+      let clone = Object.assign({}, node);
+      delete clone[childrenFieldRef.value];
+      handleDoubleClick(clone);
+    }
+
+    const indentCount = computed(() => {
+      return props.node.level;
+    })
+
+    function handleLineClick(e: MouseEvent) {
+      _handleClick(e);
+    }
+
+    const labelField = computed(() => {
+      return props.node.rawNode[labelFieldRef.value];
+    })
+
+    const expanded = computed(() => NTree.mergedExpandedKeysRef.value.includes(props.node.key));
+
+    return {
+      selfElRef,
+      handleLineClick,
+      indentCount,
+      labelField,
+      expanded: expanded,
+      handleToggleClick,
+      doDoubleClick,
+      style
+    }
+  }
+});
+</script>

package/src/components/tree/TreeNodeToggle.vue

@@ -1,48 +1,48 @@
-<template>
-  <div
-      @click="onClick"
-      :class="iconClass"
-  >
-    <template v-if="!hide">
-      <svg v-if="expanded" :class="style.icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-        <path d="M12 8l10 8l-10 8z"></path>
-      </svg>
-      <svg v-else :class="style.icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-        <path d="M12 8l10 8l-10 8z"></path>
-      </svg>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent, type PropType} from "vue";
-import type {TmNode} from "./types";
-import * as style from "./style";
-
-export default defineComponent({
-  name: "TreeNodeToggle",
-  props: {
-    expanded: Boolean,
-    selected: Boolean,
-    onClick: Function as PropType<(e: MouseEvent) => void>,
-    hide: Boolean,
-    node: {
-      type: Object as PropType<TmNode>,
-      required: true
-    }
-  },
-  setup(props) {
-
-    const iconClass = computed(() => {
-      return {
-        [style.toggle]: true,
-        [style.iconRotate["90"]]: props.expanded,
-      }
-    });
-    return {
-      style,
-      iconClass
-    }
-  }
-})
-</script>
+<template>
+  <div
+      @click="onClick"
+      :class="iconClass"
+  >
+    <template v-if="!hide">
+      <svg v-if="expanded" :class="style.icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+        <path d="M12 8l10 8l-10 8z"></path>
+      </svg>
+      <svg v-else :class="style.icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+        <path d="M12 8l10 8l-10 8z"></path>
+      </svg>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, type PropType} from "vue";
+import type {TmNode} from "./types";
+import * as style from "./style";
+
+export default defineComponent({
+  name: "TreeNodeToggle",
+  props: {
+    expanded: Boolean,
+    selected: Boolean,
+    onClick: Function as PropType<(e: MouseEvent) => void>,
+    hide: Boolean,
+    node: {
+      type: Object as PropType<TmNode>,
+      required: true
+    }
+  },
+  setup(props) {
+
+    const iconClass = computed(() => {
+      return {
+        [style.toggle]: true,
+        [style.iconRotate["90"]]: props.expanded,
+      }
+    });
+    return {
+      style,
+      iconClass
+    }
+  }
+})
+</script>