Merge pull request N00ts#5 from N00ts/multiple_treeviewes

multiple states for multiple treeviewes, also fixed focus issues

src/components/Tree.vue

@@ -7,7 +7,6 @@
     <TreeLevel 
       :depth="0"
       :parent-id="null"
-      @node-blur="blur"
       v-bind="$attrs"
     >
       <template #loading-slot="props">

src/components/TreeNode.vue

@@ -143,7 +143,7 @@ export default {
   emits: [
     ...Object.values(nodeEvents),
     ...Object.values(checkboxEvents),
-    ...Object.values(dragEvents)    
+    ...Object.values(dragEvents)
   ],
   props: {
     depth: {

src/setup/checkbox/auto.ts

@@ -1,13 +1,10 @@
 import { computed, Ref } from 'vue';
 import { INode } from '../../structure/INode';
-import { state } from '../store';
 import IUseCheck from '../../structure/IUseCheck';
 import isNil from "lodash-es/isNil";
 import { ensureState } from '../../misc/helpers';
 
-export default function auto(node: Ref<INode>): IUseCheck {
-    const nodes = state.nodes;
-
+export default function auto(node: Ref<INode>, nodes: Ref<{ [id: string]: INode }>): IUseCheck {
     const check = ((v: boolean) => {
         node.value.state.checked = v;
     });
@@ -33,7 +30,7 @@ export default function auto(node: Ref<INode>): IUseCheck {
 
         for (const c of children.value) {
             const cdn = nodes.value[c];
-            
+
             if (!isNil(cdn)) {
                 ensureState(cdn);
                 res.push(cdn.state);
@@ -52,7 +49,7 @@ export default function auto(node: Ref<INode>): IUseCheck {
     });
 
     const allChecked = computed(() => {
-        return states.value.every((x) => x.checked);    
+        return states.value.every((x) => x.checked);
     });
 
     const noneChecked = computed(() => {

src/setup/store.ts

@@ -3,44 +3,36 @@ import { IConfiguration } from '../structure/IConfiguration';
 import { toRefs, computed, ComputedRef, Ref, ref } from 'vue';
 import { ITreeProps } from '../structure/ITreeProps';
 import { IDragContext } from '../structure/IDragContext';
+import { uniqueId } from "lodash";
 
 export interface IState {
-    nodes: ComputedRef<{[id: string]: INode}>;
+    id: string;
+    nodes: ComputedRef<{ [id: string]: INode }>;
     config: ComputedRef<IConfiguration>;
     dragged: Ref<IDragContext>;
-    focused: Ref<string>;
+    focusable: Ref<string>;
+    focusFunc: Map<string, Function>,
 }
 
-function createState(): IState {
-    return {
-        nodes: null,
-        config: null,
-        dragged: ref(null),
-        focused: ref(null)
-    };
-}
-
-export let state: IState = null;
+export const states: Map<string, IState> = new Map();
 
-export function createStore(props: ITreeProps): void {
+export function createState(props: ITreeProps): string {
     const { nodes, config } = toRefs(props);
 
-    const computedNodes = computed(() => {
-        return nodes.value;
-    });
-
-    const computedConfig = computed(() => {
-        return config.value;
-    });
+    const state: IState = {
+        id: uniqueId(),
+        nodes: computed(() => nodes.value),
+        config: computed(() => config.value),
+        focusable: ref(null),
+        focusFunc: new Map<string, Function>(),
+        dragged: ref({
+            node: null,
+            element: null,
+            wrapper: null,
+            parentId: null
+        }),
+    };
+    states.set(state.id, state);
 
-    state = createState();
-    state.nodes = computedNodes;
-    state.config = computedConfig;
-    state.focused = ref(null);
-    state.dragged = ref({
-        node: null,
-        element: null,
-        wrapper: null,
-        parentId: null
-    });
+    return state.id;
 }

src/setup/useCheckBox.ts

@@ -10,14 +10,15 @@ import IUseCommon from '../structure/IUseCommon';
 export function useCheckBox(cmn: IUseCommon): {} {
     const node = cmn.node;
     const config = cmn.config;
+    const nodes = cmn.state.nodes;
 
     const mode = computed(() => {
         return config.value.checkMode === checkMode.auto ? checkMode.auto : checkMode.manual;
     });
 
     const factory = computed(() =>  {
         return mode.value === checkMode.auto ? 
-        auto(node) :
+        auto(node, nodes) :
         manual(node);
     });
 

src/setup/useCommon.ts

@@ -1,18 +1,18 @@
 import { INodeProps } from "../structure/INodeProps";
 import isNil from "lodash-es/isNil";
 import { computed, toRefs, ref, inject } from 'vue';
-import { state } from './store';
 import IUseCommon from '../structure/IUseCommon';
 import { defaultConfig } from '../misc/default';
 import { nodeEvents } from '../misc/nodeEvents';
 import { ensureState } from '../misc/helpers';
+import { IState } from './store';
 
 export default function useCommon(props: INodeProps): IUseCommon {
     const { node } = toRefs(props);
-
+    const state = inject<IState>("state");
     const config = state.config;
-
     const wrapper = ref<HTMLElement>(null);
+    const focused = ref(false);
 
     const root = {
         emit: inject<(event: string, ...args: any[]) => void>("emitter")
@@ -52,12 +52,14 @@ export default function useCommon(props: INodeProps): IUseCommon {
 
             if (!current.contains(related)) {
                 config.value.editing = null;
+                focused.value = false;
                 root.emit(nodeEvents.blur, e, node.value);
             }
         }
     });
 
     return {
+        state,
         node, 
         config,
         hasNode,
@@ -67,7 +69,8 @@ export default function useCommon(props: INodeProps): IUseCommon {
         wrapper,
         editable,
         editing,
+        focused,
         blur,
-        root
+        root,
     };
 }

src/setup/useDragAndDrop.ts

@@ -1,5 +1,4 @@
 import { INodeProps } from "../structure/INodeProps";
-import { state } from './store';
 import { computed, ref } from 'vue';
 import isNil from "lodash-es/isNil";
 import { INode } from '../structure/INode';
@@ -15,6 +14,7 @@ export enum DragPosition {
 
 export default function useDragAndDrop(cmn: IUseCommon, props: INodeProps): {} {
     const node = cmn.node;
+    const state = cmn.state;
     const parentId = ref(props.parentId);
     const config = cmn.config;
     const nodes = state.nodes;
@@ -32,7 +32,7 @@ export default function useDragAndDrop(cmn: IUseCommon, props: INodeProps): {} {
     });
 
     const isDragging = computed(() => {
-        return !isNil(dragged.value); 
+        return !isNil(dragged.value) && !isNil(dragged.value.node); 
     });
 
     const isSameNode = computed(() => {
@@ -45,7 +45,7 @@ export default function useDragAndDrop(cmn: IUseCommon, props: INodeProps): {} {
 
     const draggedParent = computed(() => {
         return !isDragging.value || !dragged.value.parentId ? null : getParent(dragged.value.parentId);
-    });
+    }); 
 
     const draggedLvl = computed(() => {
         return getLevel(draggedParent.value);

src/setup/useIcon.ts

@@ -1,11 +1,13 @@
-import { state } from './store';
-import { computed, toRefs } from 'vue';
+import { computed, inject, toRefs } from 'vue';
 import { defaultConfig, defaultSize } from '../misc/default';
 import isNil from 'lodash-es/isNil';
+import { IState } from './store';
 
 export default function useIcon(props: Record<string, unknown>): {} {
     const { isLeaf } = toRefs(props); 
-
+
+    const state = inject<IState>("state")
+
     const config = state.config;
 
     const openedIcon = computed(() => {

src/setup/useLevel.ts

@@ -1,11 +1,12 @@
-import { state } from "./store";
-import { computed, ref } from "vue";
+import { computed, inject, onBeforeUpdate, onMounted, onRenderTriggered, ref } from "vue";
 import isNil from "lodash-es/isNil";
 import toInteger from "lodash-es/toInteger";
 import { defaultConfig } from '../misc/default';
 import { INode } from "../structure/INode";
+import { IState } from "./store";
 
 export default function useLevel(props: {parentId: string; depth: number}): {} {
+    const state = inject<IState>("state")
     const config = state.config;
     const nodes = state.nodes;
     const depth = ref(props.depth);
@@ -74,6 +75,6 @@ export default function useLevel(props: {parentId: string; depth: number}): {} {
         id,
         level,
         padding,
-        style,
+        style
     };
 }