@teammodlr/ui-kit 2.1.6 → 2.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/tree/Tree.vue

@@ -30,13 +30,16 @@ export default defineComponent({
   components: {TreeNode, VVirtualList},
   name: 'Tree',
   props: treeProps,
-  setup: function (props) {
+  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 {
+
+    function getScrollContainer(): HTMLElement | null | undefined {
       return virtualListInstRef.value?.listElRef
     }
-    function getScrollContent (): HTMLElement | null | undefined {
+
+    function getScrollContent(): HTMLElement | null | undefined {
       return virtualListInstRef.value?.itemsElRef
     }
 
@@ -64,10 +67,14 @@ export default defineComponent({
     });
 
     provide(treeInjectionKey, {
+      mergedExpandedKeysRef,
       indentRef: toRef(props, 'indent'),
       expandOnClickRef: toRef(props, 'expandOnClick'),
       nodePropsRef: toRef(props, 'nodeProps'),
-      handleSwitcherClick
+      labelFieldRef: toRef(props, 'labelField'),
+      keyFieldRef: toRef(props, 'keyField'),
+      handleDoubleClick,
+      handleToggleClick
     });
 
     // const { watchProps } = props;
@@ -76,11 +83,15 @@ export default defineComponent({
     //     initUncontrolledExpandedKeys(undefined);
     // })
 
-    function handleSwitcherClick(node: TmNode): void {
-      console.log('i')
+    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

package/src/components/tree/TreeNode.vue

@@ -1,71 +1,103 @@
 <template>
-    <div
-        @click="handleLineClick"
-        style="display: flex;"
-    >
-        <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>
-        {{node.rawNode.label}}
-    </div>
+  <div
+    @dblclick="doDoubleClick"
+      style="display: flex;"
+  >
+    <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"
+    />
+    {{ labelField }}
+  </div>
 </template>
 
 <script lang="ts">
 import {ref, defineComponent, type PropType, inject, computed} from "vue";
-import type {TmNode} from "./types";
+import type {TmNode, TreeOption} from "./types";
 import {treeInjectionKey} from "./types";
+import TreeNodeToggle from "@/components/tree/TreeNodeToggle.vue";
+import type {TreeNode} from "treemate";
 
 export default defineComponent({
-    name: 'TreeNode',
-    props: {
-        node: {
-            type: Object as PropType<TmNode>,
-            required: true
-        }
-    },
-    setup(props) {
-        const NTree = inject(treeInjectionKey)!;
-        const {
-            nodePropsRef,
-            indentRef,
-            handleSwitcherClick: handleSwitcherClickTree
-        } = NTree;
+  name: 'TreeNode',
+  components: {TreeNodeToggle},
+  props: {
+    node: {
+      type: Object as PropType<TmNode>,
+      required: true
+    }
+  },
+  setup(props) {
+    const NTree = inject(treeInjectionKey)!;
+    const {
+      nodePropsRef,
+      labelFieldRef,
+      keyFieldRef,
+      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();
+      }
+    }
 
-        const selfElRef = ref<HTMLDivElement | null>(null);
+    function handleToggleClick(): void {
+      const {node} = props;
 
-        function _handleClick (e: MouseEvent): void {
-            const { value: expandOnClick } = NTree.expandOnClickRef;
-            const { node } = props
-            if (!expandOnClick && !node.isLeaf) {
-                handleSwitcherClick();
-            }
-        }
 
-        function handleSwitcherClick(): void {
-            const { node } = props;
+      if (!node.isLastChild && !node.shallowLoaded) {
+        return;
+      }
 
-            if (!node.isLastChild && !node.shallowLoaded) {
-                return;
-            }
+      handleToggleClickTree(node)
+    }
+
+    function doDoubleClick(e: MouseEvent) {
+      // get only id and name from node
+      let node = props.node;
+      let nodeData = {
+        [keyFieldRef.value]: node.rawNode[keyFieldRef.value],
+        [labelFieldRef.value]: node.rawNode[labelFieldRef.value]
+      } as TreeOption;
+      handleDoubleClick(nodeData);
+    }
+    const indentCount = computed(() => {
+      return props.node.level;
+    })
 
-            handleSwitcherClickTree(node)
-        }
+    function handleLineClick(e: MouseEvent) {
+      _handleClick(e);
+    }
 
-        const indentCount = computed(() => {
-            return props.node.level;
-        })
+    const labelField = computed(() => {
+      return props.node.rawNode[labelFieldRef.value];
+    })
 
-        function handleLineClick (e: MouseEvent) {
-            _handleClick(e);
-        }
+    const expanded = computed(() => NTree.mergedExpandedKeysRef.value.includes(props.node.key));
 
-        return {
-            selfElRef,
-            handleLineClick,
-            indentCount
-        }
+    return {
+      selfElRef,
+      handleLineClick,
+      indentCount,
+      labelField,
+      expanded: expanded,
+      handleToggleClick,
+      doDoubleClick
     }
+  }
 });
 </script>

package/src/components/tree/TreeNodeToggle.vue

@@ -0,0 +1,36 @@
+<template>
+    <div
+        @click="onClick"
+        style="width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; vertical-align: bottom;"
+    >
+        <template v-if="!hide">
+            <svg v-if="expanded" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, type PropType} from "vue";
+import type {TmNode} from "./types";
+
+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) {
+
+        return {
+
+        }
+    }
+})
+</script>

package/src/components/tree/examples/basic.vue

@@ -1,33 +1,13 @@
 <template>
-    <MTree :data="data"/>
+    <MTree :data="data" label-field="name" key-field="id" @dblclick="dblclick"/>
 </template>
 <script lang="ts" setup>
 import {ref} from 'vue'
-import type {TreeOption} from "../types";
+import type {TmNode} from "../../../../lib/components/tree/types";
 
-function createData (level = 4, baseKey = ''): TreeOption[] | undefined {
-    if (!level) return undefined
+const data = ref([{"children":[{"children":[{"name":"Advertising & Marketing","weight":1,"type":"N","childrenCount":0,"id":"b5511a25-f9d4-402f-9f49-7bb9cff0bd97"},{"children":[],"name":"Finance","weight":1,"type":"N","childrenCount":0,"id":"b21ac382-ae7d-4cb0-b504-10a7ef6eac55"},{"children":[],"name":"Information Technology","weight":1,"type":"N","childrenCount":0,"id":"af71b879-0ea0-4cf6-8b70-4e764f08210b"},{"children":[],"name":"Legal","weight":1,"type":"N","childrenCount":0,"id":"c7d58cb8-d70c-4f70-99fb-7e8fdbb44b80"},{"children":[],"name":"Management","weight":1,"type":"N","childrenCount":0,"id":"2fef19d7-c744-4c36-9066-b077d1641f58"}],"name":"Cost Centers","weight":1,"type":"N","childrenCount":5,"id":"9bb9a4e9-749e-468a-9d39-d98625d8f3a1"},{"children":[{"children":[{"children":[{"children":[],"name":"Brisbane 01","weight":1,"type":"N","childrenCount":0,"id":"3beab845-9660-4cc3-8943-deb5672a72d1"},{"children":[],"name":"Brisbane 02","weight":1,"type":"N","childrenCount":0,"id":"812c3874-2103-4e35-b129-861811e9e582"},{"children":[],"name":"Brisbane 03","weight":1,"type":"N","childrenCount":0,"id":"df622e95-b7d9-41f5-9bd3-473bd0305b02"},{"children":[],"name":"Brisbane 04","weight":1,"type":"N","childrenCount":0,"id":"926b904c-4392-4bbb-b824-acaa1f62bb00"}],"name":"Queensland","weight":1,"type":"N","childrenCount":4,"id":"09661d2c-a90f-4c18-991b-d69500ffbdd5"},{"children":[{"children":[],"name":"Melbourne 01","weight":1,"type":"N","childrenCount":0,"id":"9ac3ce45-1bef-43dc-a3ac-227b1759b720"},{"children":[],"name":"Melbourne 02","weight":1,"type":"N","childrenCount":0,"id":"c66ec03a-431a-43e6-94aa-6b72dae73f98"},{"children":[],"name":"Melbourne 03","weight":1,"type":"N","childrenCount":0,"id":"3177b5e0-1b6e-4c7e-90bd-8e55b85880a4"},{"children":[],"name":"Melbourne 04","weight":1,"type":"N","childrenCount":0,"id":"88a1dd59-1b17-47fe-9a66-710cdff04a4f"},{"children":[],"name":"Melbourne 05","weight":1,"type":"N","childrenCount":0,"id":"400ac864-de9d-4afe-802e-880e41bb227c"}],"name":"Victoria","weight":1,"type":"N","childrenCount":5,"id":"063612b1-2cf3-47a6-a4c3-8fb552146d07"},{"children":[{"children":[],"name":"Sydney 01","weight":1,"type":"N","childrenCount":0,"id":"fed2081a-edf5-4823-bdc8-2860dd6e8a5d"},{"children":[],"name":"Sydney 02","weight":1,"type":"N","childrenCount":0,"id":"1b80744b-f2d3-4bbf-b4e5-63d9318d9538"},{"children":[],"name":"Sydney 03","weight":1,"type":"N","childrenCount":0,"id":"3aa2f7f7-8299-4ac9-95d8-d98f97cddda3"},{"children":[],"name":"Sydney 04","weight":1,"type":"N","childrenCount":0,"id":"657b512c-e77e-495a-bb75-bee4c8cd8ee0"},{"children":[],"name":"Sydney 05","weight":1,"type":"N","childrenCount":0,"id":"da5efcc4-3e88-4b5c-a0c5-7c096c5b83c5"},{"children":[],"name":"Sydney 06","weight":1,"type":"N","childrenCount":0,"id":"10fcae0f-3614-4e44-ace4-0c0423f19952"}],"name":"New South Wales","weight":1,"type":"N","childrenCount":6,"id":"3bdf2a0f-41ef-411c-9749-84301dd8088f"},{"children":[{"children":[],"name":"Perth 01","weight":1,"type":"N","childrenCount":0,"id":"0880d1ac-c7d3-4059-b0a8-25bed41496c7"},{"children":[],"name":"Perth 02","weight":1,"type":"N","childrenCount":0,"id":"0998eb28-769d-4a11-a609-10043a7d482f"}],"name":"Western Australia","weight":1,"type":"N","childrenCount":2,"id":"1b8c1791-fc09-4d2e-b681-cd58f027f2fe"},{"children":[{"children":[],"name":"Darwin 01","weight":1,"type":"N","childrenCount":0,"id":"068e40e2-6fde-4d65-a11c-357f694af697"},{"children":[],"name":"Darwin 02","weight":1,"type":"N","childrenCount":0,"id":"1411b083-7c4e-4810-b92e-372f521f2e7c"},{"children":[],"name":"Darwin 03","weight":1,"type":"N","childrenCount":0,"id":"4684a7ea-aabe-47d2-81fc-00d68196d3f6"},{"children":[],"name":"Darwin 04","weight":1,"type":"N","childrenCount":0,"id":"3fdd5254-639f-4efb-bd40-5c0dc5c1c314"}],"name":"Northern Territory","weight":1,"type":"N","childrenCount":4,"id":"c2ca2fa5-07ce-4529-8745-94567d785736"}],"name":"Australia","weight":1,"type":"N","childrenCount":5,"id":"70a043fc-e70c-4a30-8fbb-7784123c85a5"},{"children":[{"children":[],"name":"Auckland 01","weight":1,"type":"N","childrenCount":0,"id":"6293f121-f50e-42b4-a996-15263c45c3ee"},{"children":[],"name":"Auckland 02","weight":1,"type":"N","childrenCount":0,"id":"2cd3eda8-ab87-46da-8300-27261ee91d68"},{"children":[],"name":"Auckland 03","weight":1,"type":"N","childrenCount":0,"id":"88e6c0ae-e891-4faf-9b62-4270207fea91"},{"children":[],"name":"Wellington 01","weight":1,"type":"N","childrenCount":0,"id":"13ecbd3f-0b53-4a96-8627-07886173c8a6"},{"children":[],"name":"Wellington 02","weight":1,"type":"N","childrenCount":0,"id":"767b982c-ac81-44aa-90a3-b2f276919779"}],"name":"New Zealand","weight":1,"type":"N","childrenCount":5,"id":"c987df16-0757-4d04-97ec-386a423aef8d"},{"children":[],"name":"Online","weight":1,"type":"N","childrenCount":0,"id":"367a3afb-cc66-42d7-a022-f7f92683d768"}],"name":"Profit Centers","weight":1,"type":"N","childrenCount":3,"id":"782c9acf-dfdb-4e60-ace9-0f420aeecae6"}],"name":"All Departments","type":"N","childrenCount":2,"id":"a4b0784f-3d57-4a4d-a849-9700b27e6a6f"}]);
 
-    const result: TreeOption[] = [];
-    for (let index = 0; index < (20 - level); index++) {
-        const key = '' + baseKey + level + index;
-        result.push({
-            label: createLabel(level),
-            key,
-            children: createData(level - 1, key)
-        });
-    }
-
-    return result;
-}
-
-function createLabel (level: number): string {
-    if (level === 4) return 'Out of Tao, One is born'
-    if (level === 3) return 'Out of One, Two'
-    if (level === 2) return 'Out of Two, Three'
-    if (level === 1) return 'Out of Three, the created universe'
-    return ''
+function dblclick(node: TmNode) {
+    console.log(node);
 }
-
-const data = ref(createData());
 </script>

package/src/components/tree/props.ts

@@ -1,5 +1,12 @@
 import type {ExtractPublicPropTypes, PropType} from "vue";
-import type {TreeOptions, Key, TreeNodeProps, OnUpdateIndeterminateKeys, onUpdateExpandedKeys} from "./types";
+import type {
+    TreeOptions,
+    Key,
+    TreeNodeProps,
+    OnUpdateIndeterminateKeys,
+    onUpdateExpandedKeys,
+    TreeNodeDoubleClick
+} from "./types";
 import type {TreeMateOptions} from "treemate";
 import type {MaybeArray} from "../../call";
 
@@ -18,6 +25,7 @@ export const treeSharedProps = {
         type: String,
         default: 'children',
     },
+    onDblClick: Function as PropType<TreeNodeDoubleClick>,
     onUpdateIndeterminateKeys: [Function, Array] as PropType<
         MaybeArray<OnUpdateIndeterminateKeys>
     >,

package/src/components/tree/types.ts

@@ -13,15 +13,23 @@ export interface TreeOptionBase {
 export type TreeOption = TreeOptionBase & Record<string, unknown>;
 export type TreeOptions = TreeOption[];
 
-export type TreeNodeProps = (info: {
+export type TreeNodeProps = (
+    node: TreeOption,
+) => HTMLAttributes & Record<string, unknown>;
+
+export type TreeNodeDoubleClick = (info: {
     option: TreeOption,
-}) => HTMLAttributes & Record<string, unknown>;
+}) => void;
 
 export interface TreeInjection {
+    mergedExpandedKeysRef: Ref<Key[]>,
     indentRef: Ref<number>,
     expandOnClickRef: Ref<boolean>,
     nodePropsRef: Ref<TreeNodeProps | undefined>,
-    handleSwitcherClick: (node: TreeNode<TreeOption>) => void
+    labelFieldRef: Ref<string>,
+    keyFieldRef: Ref<string>,
+    handleToggleClick: (node: TreeNode<TreeOption>) => void,
+    handleDoubleClick: (node: TreeOption) => void,
 }
 
 export const treeInjectionKey = createInjectionKey<TreeInjection>('tree')