@teammodlr/ui-kit 2.3.23 → 3.0.0-beta.4

package/src/components/tree/TreeNode.vue

@@ -1,109 +1,116 @@
 <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 :class="style.nodeWrapper">
+        <div
+            :class="style.node"
+            v-bind="resolvedNodeProps"
+            @dblclick="doDoubleClick"
+        >
+            <template v-if="level > 0">
+                <div v-for="i in level" :key="i" style="flex-grow: 0; flex-shrink: 0; height: 0;">
+                    <div :style="{ width: `${indent}px` }"></div>
+                </div>
+            </template>
+
+            <TreeNodeToggle
+                :hide="isLeaf"
+                :expanded="expanded"
+                :node="node"
+                @click="handleToggleClick"
+            />
+
+            <div :class="style.nodeContent" @click="handleContentClick">
+                <div :class="style.nodeContentText">{{ label }}</div>
+            </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 v-if="expanded && children.length">
+            <TreeNode
+                v-for="child in children"
+                :key="String(child[keyField])"
+                :node="child"
+                :level="level + 1"
+            />
+        </template>
     </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";
+import { computed, defineComponent, inject, type PropType } from 'vue';
+import TreeNodeToggle from './TreeNodeToggle.vue';
+import * as style from './style';
+import type { Key, TreeOption } from './types';
+import { treeInjectionKey } from './types';
 
 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
-    }
-  }
+    name: 'TreeNode',
+    components: { TreeNodeToggle },
+    props: {
+        node: {
+            type: Object as PropType<TreeOption>,
+            required: true,
+        },
+        level: {
+            type: Number,
+            default: 0,
+        },
+    },
+    setup(props) {
+        const injectedTree = inject(treeInjectionKey, null);
+
+        if (!injectedTree) {
+            throw new Error('TreeNode must be used within MTree.');
+        }
+
+        const tree = injectedTree;
+
+        const keyField = computed(() => tree.keyFieldRef.value);
+        const labelField = computed(() => tree.labelFieldRef.value);
+        const indent = computed(() => tree.indentRef.value);
+        const children = computed(() => tree.getChildren(props.node));
+        const isLeaf = computed(() => children.value.length === 0);
+        const nodeKey = computed(() => props.node[keyField.value] as Key | undefined);
+        const expanded = computed(() => {
+            const key = nodeKey.value;
+            return typeof key === 'undefined'
+                ? false
+                : tree.mergedExpandedKeysRef.value.includes(key);
+        });
+        const label = computed(() => {
+            return String(props.node[labelField.value] ?? '');
+        });
+        const resolvedNodeProps = computed(() => {
+            return tree.nodePropsRef.value?.(props.node) ?? {};
+        });
+
+        function handleToggleClick(event?: MouseEvent): void {
+            event?.stopPropagation();
+            tree.handleToggle(props.node);
+        }
+
+        function handleContentClick(): void {
+            if (tree.expandOnClickRef.value && !isLeaf.value) {
+                tree.handleToggle(props.node);
+            }
+        }
+
+        function doDoubleClick(): void {
+            tree.handleDoubleClick({ ...props.node });
+        }
+
+        return {
+            children,
+            expanded,
+            handleContentClick,
+            doDoubleClick,
+            handleToggleClick,
+            indent,
+            isLeaf,
+            keyField,
+            label,
+            level: props.level,
+            resolvedNodeProps,
+            style,
+        };
+    },
 });
 </script>

package/src/components/tree/types.ts

@@ -1,5 +1,4 @@
-import type { HTMLAttributes, Ref, InjectionKey } from 'vue';
-import type { TreeNode } from 'treemate';
+import type { HTMLAttributes, Ref } from 'vue';
 import { createInjectionKey } from '../../utils/injection';
 
 export type Key = string | number;
@@ -27,13 +26,14 @@ export interface TreeInjection {
     labelFieldRef: Ref<string>;
     keyFieldRef: Ref<string>;
     childrenFieldRef: Ref<string>;
-    handleToggleClick: (node: TreeNode<TreeOption>) => void;
+    getChildren: (node: TreeOption) => TreeOption[];
+    handleToggle: (node: TreeOption) => void;
     handleDoubleClick: (node: TreeOption) => void;
 }
 
 export const treeInjectionKey = createInjectionKey<TreeInjection>('tree');
 
-export type TmNode = TreeNode<TreeOption>;
+export type TmNode = TreeOption;
 
 export type OnUpdateCheckedKeys = (
     value: (string & number)[],

package/src/styles/transitions.css.ts

@@ -61,38 +61,58 @@ export const scale = {
     })
 };
 
-const MODAL_NAME = 'modal';
-const MODAL_DURATION = 0.5;
-globalKeyframes(MODAL_NAME, {
-    '0%': {
+const MODAL_ENTER_NAME = 'modal-enter';
+const MODAL_LEAVE_NAME = 'modal-leave';
+const MODAL_ENTER_DURATION = 0.24;
+const MODAL_LEAVE_DURATION = 0.18;
+
+globalKeyframes(MODAL_ENTER_NAME, {
+    from: {
         opacity: 0,
-        scale: 0.95,
-        // offset bottom
-        transformOrigin: 'bottom',
-        transform: `translateY(10%)`
+        transform: 'translateY(24px) scale(0.97)',
+        filter: 'blur(6px)'
     },
-    '100%': {
+    '60%': {
+        opacity: 1
+    },
+    to: {
         opacity: 1,
-        scale: 1,
-        transform: `translateY(0%)`
+        transform: 'translateY(0) scale(1)',
+        filter: 'blur(0)'
+    }
+});
+
+globalKeyframes(MODAL_LEAVE_NAME, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)',
+        filter: 'blur(0)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(16px) scale(0.985)',
+        filter: 'blur(2px)'
     }
 });
 
 export const modalScale = {
     enterActive: style({
-        animation: `${MODAL_DURATION}s ${MODAL_NAME} ${themeVars.transition.default}`,
-        willChange: 'transform, opacity'
+        animation: `${MODAL_ENTER_DURATION}s ${MODAL_ENTER_NAME} cubic-bezier(0.16, 1, 0.3, 1)`,
+        willChange: 'transform, opacity, filter'
     }),
 
     leaveActive: style({
-        animation: `${MODAL_DURATION}s ${MODAL_NAME} ${themeVars.transition.default}  reverse`
+        animation: `${MODAL_LEAVE_DURATION}s ${MODAL_LEAVE_NAME} cubic-bezier(0.4, 0, 1, 1)`,
+        willChange: 'transform, opacity, filter'
     }),
 
     enterFrom: style({
-        opacity: 0
+        opacity: 0,
+        transform: 'translateY(24px) scale(0.97)'
     }),
 
     leaveTo: style({
-        opacity: 0
+        opacity: 0,
+        transform: 'translateY(16px) scale(0.985)'
     })
 };