@teammodlr/ui-kit 2.1.7 → 2.1.9

package/src/components/tree/Tree.vue

@@ -1,16 +1,16 @@
 <template>
-  <div style="height: 200px;" ref="selfElRef">
-    <VVirtualList
-        ref="virtualListInstRef"
-        :items="nodesRef"
-        itemResizable
-        :itemSize="20"
-    >
-      <template v-slot:default="{ item }">
-        <TreeNode :node="item"/>
-      </template>
-    </VVirtualList>
-  </div>
+    <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">
@@ -19,7 +19,7 @@ import {computed, defineComponent, provide, ref, toRef} from 'vue'
 import {createTreeMateOptions, treeProps} from "./props";
 import type {Key, TmNode, TreeOption} from "./types";
 import {
-  createTreeMate,
+    createTreeMate,
 } from 'treemate'
 import TreeNode from "./TreeNode.vue";
 import {treeInjectionKey} from "./types";
@@ -27,111 +27,112 @@ 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'),
-      handleDoubleClick,
-      handleToggleClick
-    });
-
-    // const { watchProps } = props;
-    //
-    // watchEffect(() => {
-    //     initUncontrolledExpandedKeys(undefined);
-    // })
-
-    function handleToggleClick(node: TmNode): void {
-
-      toggleExpand(node);
-    }
+    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 handleDoubleClick(node: TreeOption): void {
-      emit('dblclick', node);
-    }
+        function getScrollContent(): HTMLElement | null | undefined {
+            return virtualListInstRef.value?.itemsElRef
+        }
 
-    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;
+        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);
         }
 
-        let nextKeys: Key[] = mergedExpandedKeys.concat(key);
+        function handleDoubleClick(node: TreeOption): void {
+            emit('dblclick', node);
+        }
 
-        doUpdateExpandedKeys(nextKeys)
-      }
-    }
+        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 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;
-    }
+        function doUpdateExpandedKeys(
+            value: Key[],
+        ): void {
+            uncontrolledExpandedKeysRef.value = value;
+        }
 
-    return {
-      nodesRef,
-      displayTreeMateRef,
-      selfElRef
+        return {
+            nodesRef,
+            displayTreeMateRef,
+            selfElRef
+        }
     }
-  }
 })
 
 </script>

package/src/components/tree/TreeNode.vue

@@ -1,29 +1,35 @@
 <template>
   <div
-    @dblclick="doDoubleClick"
-      style="display: flex;"
+      @dblclick="doDoubleClick"
+      :class="style.nodeWrapper"
+
   >
-    <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 :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>
-    </template>
-    <TreeNodeToggle
-        :hide="node.isLeaf"
-        :node="node"
-        :expanded="expanded"
-        @click="handleToggleClick"
-    />
-    {{ labelField }}
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import {ref, defineComponent, type PropType, inject, computed} from "vue";
+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 type {TreeNode} from "treemate";
+import * as style from "./style";
 
 export default defineComponent({
   name: 'TreeNode',
@@ -40,6 +46,7 @@ export default defineComponent({
       nodePropsRef,
       labelFieldRef,
       keyFieldRef,
+      childrenFieldRef,
       indentRef,
       handleToggleClick: handleToggleClickTree,
       handleDoubleClick
@@ -67,14 +74,12 @@ export default defineComponent({
     }
 
     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);
+      let node = unref(props.node.rawNode);
+      let clone = Object.assign({}, node);
+      delete clone[childrenFieldRef.value];
+      handleDoubleClick(clone);
     }
+
     const indentCount = computed(() => {
       return props.node.level;
     })
@@ -96,7 +101,8 @@ export default defineComponent({
       labelField,
       expanded: expanded,
       handleToggleClick,
-      doDoubleClick
+      doDoubleClick,
+      style
     }
   }
 });

package/src/components/tree/TreeNodeToggle.vue

@@ -1,36 +1,48 @@
 <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>
+  <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 {defineComponent, type PropType} from "vue";
+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) {
-
-        return {
+  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>

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

@@ -1,5 +1,5 @@
 <template>
-    <MTree :data="data" label-field="name" key-field="id" @dblclick="dblclick"/>
+    <MTree :data="data" label-field="name" key-field="id" @dblclick="dblclick" style="height: 300px;"/>
 </template>
 <script lang="ts" setup>
 import {ref} from 'vue'

package/src/components/tree/examples/index.stories.ts

@@ -1,16 +1,12 @@
-import MTree from "../Tree.vue";
+import MTree from '../Tree.vue';
 
-import {
-    MTreeBasic
-} from "./index";
+import { MTreeBasic } from './index';
 
-import {
-    createStory,
-} from "../../../__storybook__";
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MTree,
-    title: "Components/Tree"
-}
+    title: 'Components/Tree'
+};
 
-export const Basic = createStory(MTreeBasic)
+export const Basic = createStory(MTreeBasic);

package/src/components/tree/props.ts

@@ -1,4 +1,4 @@
-import type {ExtractPublicPropTypes, PropType} from "vue";
+import type { ExtractPublicPropTypes, PropType } from 'vue';
 import type {
     TreeOptions,
     Key,
@@ -6,24 +6,24 @@ import type {
     OnUpdateIndeterminateKeys,
     onUpdateExpandedKeys,
     TreeNodeDoubleClick
-} from "./types";
-import type {TreeMateOptions} from "treemate";
-import type {MaybeArray} from "../../call";
+} from './types';
+import type { TreeMateOptions } from 'treemate';
+import type { MaybeArray } from '../../call';
 
 export const treeSharedProps = {
     expandedKeys: Array as PropType<Key[]>,
     defaultExpandAll: Boolean,
     keyField: {
         type: String,
-        default: 'key',
+        default: 'key'
     },
     labelField: {
         type: String,
-        default: 'label',
+        default: 'label'
     },
     childrenField: {
         type: String,
-        default: 'children',
+        default: 'children'
     },
     onDblClick: Function as PropType<TreeNodeDoubleClick>,
     onUpdateIndeterminateKeys: [Function, Array] as PropType<
@@ -40,7 +40,7 @@ export const treeSharedProps = {
     >
 } as const;
 
-export const treeProps= {
+export const treeProps = {
     data: {
         type: Array as PropType<TreeOptions>,
         default: () => []
@@ -64,32 +64,34 @@ export const treeProps= {
     virtualScroll: Boolean,
     nodeProps: Function as PropType<TreeNodeProps>,
     getChildren: Function as PropType<GetChildren>,
-    ...treeSharedProps,
+    ...treeSharedProps
 } as const;
 
 export type TreeProps = ExtractPublicPropTypes<typeof treeProps>;
-export type GetChildren = (option: any) => unknown
+export type GetChildren = (option: any) => unknown;
 
-export function createTreeMateOptions<T> (
+export function createTreeMateOptions<T>(
     keyField: string,
     childrenField: string,
     disabledField: string,
-    getChildren: GetChildren | undefined,
+    getChildren: GetChildren | undefined
 ): TreeMateOptions<T, T, T> {
-    const settledGetChildren: GetChildren = getChildren || ((node: T) => {
-        return (node as any)[childrenField]
-    });
+    const settledGetChildren: GetChildren =
+        getChildren ||
+        ((node: T) => {
+            return (node as any)[childrenField];
+        });
 
     return {
         getIsGroup() {
             return false;
         },
         getKey(node: T) {
-            return (node as any)[keyField]
+            return (node as any)[keyField];
         },
         getChildren: settledGetChildren,
         getDisabled(node: T) {
-            return !!((node as any)[disabledField]);
+            return !!(node as any)[disabledField];
         }
-    }
+    };
 }

package/src/components/tree/style/Tree.css.ts

@@ -0,0 +1,75 @@
+import {
+    createVar,
+    globalKeyframes,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const toggle = style({
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexShrink: 0,
+    height: `24px`,
+    width: `24px`,
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'bottom',
+    transition: `transform .15s ${themeVars.transition.default}`
+});
+export const icon = style({
+    position: 'relative',
+    height: `14px`,
+    width: `14px`,
+    display: 'flex',
+    fontSize: `14px`,
+    fill: 'currentColor',
+    color: themeVars.color.gray['600']
+});
+
+export const iconRotate = styleVariants({
+    90: {
+        transform: `rotate(90deg)`
+    }
+});
+
+export const nodeWrapper = style({
+    boxSizing: 'border-box',
+    padding: `${themeVars.space['0.5']} 0`
+});
+
+export const node = style({
+    transform: `translate3d(0, 0, 0)`,
+    position: 'relative',
+    display: 'flex',
+    borderRadius: themeVars.rounded.small,
+    transition: `background-color .3s ${themeVars.transition.default}`,
+    selectors: {
+        [`&:hover`]: {
+            backgroundColor: themeVars.color.gray['150']
+        }
+    }
+});
+
+export const nodeContent = style({
+    cursor: 'pointer',
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    minHeight: `24px`,
+    boxSizing: 'border-box',
+    verticalAlign: 'bottom',
+    padding: `0 ${themeVars.space['1']} 0 ${themeVars.space['1']}`,
+    borderRadius: themeVars.rounded.default,
+    lineHeight: 1.5,
+    userSelect: 'none',
+    flexGrow: 1
+});
+
+export const nodeContentText = style({
+    flexGrow: 1,
+    maxWidth: `100%`,
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.gray['700']
+});

package/src/components/tree/style/index.ts

@@ -0,0 +1 @@
+export * from './Tree.css';