@teammodlr/ui-kit 2.3.22 → 3.0.0-beta.2

package/src/components/tooltip/style/Tooltip.css.ts

@@ -15,6 +15,122 @@ export const container = style({
     zIndex: 50
 });
 
+const fadeOutAnimation = 'fade-out-animation';
+globalKeyframes(fadeOutAnimation, {
+    from: {
+        opacity: 1
+    },
+    to: {
+        opacity: 0
+    }
+});
+
+const slideFadeOutTopAnimation = 'tooltip-slide-fade-out-top';
+globalKeyframes(slideFadeOutTopAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.97)'
+    }
+});
+
+const slideFadeOutBottomAnimation = 'tooltip-slide-fade-out-bottom';
+globalKeyframes(slideFadeOutBottomAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.97)'
+    }
+});
+
+const slideFadeOutLeftAnimation = 'tooltip-slide-fade-out-left';
+globalKeyframes(slideFadeOutLeftAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.97)'
+    }
+});
+
+const slideFadeOutRightAnimation = 'tooltip-slide-fade-out-right';
+globalKeyframes(slideFadeOutRightAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(-6px) scale(0.97)'
+    }
+});
+
+const fadeInAnimation = 'fade-in-animation';
+globalKeyframes(fadeInAnimation, {
+    '0%': {
+        opacity: 0
+    },
+    '100%': {
+        opacity: 1
+    }
+});
+
+const slideFadeTopAnimation = 'tooltip-slide-fade-top';
+globalKeyframes(slideFadeTopAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.97)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const slideFadeBottomAnimation = 'tooltip-slide-fade-bottom';
+globalKeyframes(slideFadeBottomAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.97)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const slideFadeLeftAnimation = 'tooltip-slide-fade-left';
+globalKeyframes(slideFadeLeftAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.97)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
+const slideFadeRightAnimation = 'tooltip-slide-fade-right';
+globalKeyframes(slideFadeRightAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(-6px) scale(0.97)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
 export const tooltip = style({
     vars: {
         [vars.backgroundColor]: themeVars.color.gray[900],
@@ -22,7 +138,6 @@ export const tooltip = style({
     },
     zIndex: 50,
     transition: 'opacity 0.3s, ease',
-    position: 'fixed',
     fontSize: '13px',
     fontWeight: 'normal',
     color: vars.color,
@@ -33,18 +148,42 @@ export const tooltip = style({
     width: 'max-content',
     maxWidth: '300px',
     boxSizing: 'border-box',
+    transformOrigin: 'var(--reka-tooltip-content-transform-origin)',
+    willChange: 'transform, opacity',
     selectors: {
-        '&[data-popper-placement^="top"]': {
-            margin: `${themeVars.space[1]} 0 ${themeVars.space[3]} 0`
+        '&[data-state="delayed-open"]': {
+            animationDuration: '0.16s',
+            animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            animationFillMode: 'both'
+        },
+        '&[data-state="closed"]': {
+            animationDuration: '0.12s',
+            animationTimingFunction: 'ease-out',
+            animationFillMode: 'both'
+        },
+        '&[data-state="closed"][data-side="top"]': {
+            animationName: slideFadeOutTopAnimation
+        },
+        '&[data-state="closed"][data-side="bottom"]': {
+            animationName: slideFadeOutBottomAnimation
         },
-        '&[data-popper-placement^="bottom"]': {
-            margin: `${themeVars.space[3]} 0 ${themeVars.space[1]} 0`
+        '&[data-state="closed"][data-side="left"]': {
+            animationName: slideFadeOutLeftAnimation
         },
-        '&[data-popper-placement^="left"]': {
-            margin: `0 ${themeVars.space[3]} 0 ${themeVars.space[1]}`
+        '&[data-state="closed"][data-side="right"]': {
+            animationName: slideFadeOutRightAnimation
         },
-        '&[data-popper-placement^="right"]': {
-            margin: `0 ${themeVars.space[1]} 0 ${themeVars.space[3]}`
+        '&[data-state="delayed-open"][data-side="top"]': {
+            animationName: slideFadeTopAnimation
+        },
+        '&[data-state="delayed-open"][data-side="bottom"]': {
+            animationName: slideFadeBottomAnimation
+        },
+        '&[data-state="delayed-open"][data-side="left"]': {
+            animationName: slideFadeLeftAnimation
+        },
+        '&[data-state="delayed-open"][data-side="right"]': {
+            animationName: slideFadeRightAnimation
         }
     }
 });
@@ -56,26 +195,6 @@ export const reverse = style({
     }
 });
 
-const fadeOutAnimation = 'fade-out-animation';
-globalKeyframes(fadeOutAnimation, {
-    from: {
-        opacity: 1
-    },
-    to: {
-        opacity: 0
-    }
-});
-
-const fadeInAnimation = 'fade-in-animation';
-globalKeyframes(fadeInAnimation, {
-    '0%': {
-        opacity: 0
-    },
-    '100%': {
-        opacity: 1
-    }
-});
-
 export const fadeEnter = style({
     animationName: fadeInAnimation,
     animationDuration: '0.125s',

package/src/components/tree/Tree.vue

@@ -1,138 +1,176 @@
 <template>
     <div ref="selfElRef">
-        <VVirtualList
-            ref="virtualListInstRef"
-            :items="nodesRef"
-            itemResizable
-            :itemSize="20"
-        >
-            <template v-slot:default="{ item }">
-                <TreeNode :node="item"/>
-            </template>
-        </VVirtualList>
+        <TreeNode
+            v-for="node in normalizedData"
+            :key="String(node[keyField])"
+            :node="node"
+            :level="0"
+        />
     </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";
+import { computed, defineComponent, provide, ref, toRef, watch } from 'vue';
+import { call } from '../../call';
+import useMergedState from '../../composables/useMergedState';
+import { treeProps } from './props';
+import TreeNode from './TreeNode.vue';
+import type { Key, TreeOption } from './types';
+import { treeInjectionKey } from './types';
 
 export default defineComponent({
-    components: {TreeNode, VVirtualList},
+    components: { TreeNode },
     name: 'Tree',
     props: treeProps,
     emits: ['update:expandedKeys', 'dblclick'],
-    setup: function (props, {emit}) {
+    setup(props, { emit }) {
         const selfElRef = ref<HTMLDivElement | null>(null);
-        const virtualListInstRef = ref<VirtualListInst | null>(null)
+        const controlledExpandedKeysRef = toRef(props, 'expandedKeys');
+        const uncontrolledExpandedKeysRef = ref<Key[]>([]);
 
-        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);
-        // })
+        const normalizedData = computed<TreeOption[]>(() => props.data ?? []);
 
-        function handleToggleClick(node: TmNode): void {
+        function getChildren(node: TreeOption): TreeOption[] {
+            const resolvedChildren = props.getChildren
+                ? props.getChildren(node)
+                : node[props.childrenField];
 
-            toggleExpand(node);
+            return Array.isArray(resolvedChildren)
+                ? (resolvedChildren as TreeOption[])
+                : [];
         }
 
-        function handleDoubleClick(node: TreeOption): void {
-            emit('dblclick', node);
-        }
+        function collectNonLeafKeys(nodes: TreeOption[]): Key[] {
+            const keys: Key[] = [];
 
-        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;
-                }
+            function walk(list: TreeOption[]) {
+                list.forEach(node => {
+                    const children = getChildren(node);
+                    const key = node[props.keyField] as Key | undefined;
 
-                let nextKeys: Key[] = mergedExpandedKeys.concat(key);
-
-                doUpdateExpandedKeys(nextKeys)
+                    if (children.length && typeof key !== 'undefined') {
+                        keys.push(key);
+                        walk(children);
+                    }
+                });
             }
+
+            walk(nodes);
+            return keys;
         }
 
+        watch(
+            () => [props.defaultExpandAll, normalizedData.value, props.keyField, props.childrenField],
+            () => {
+                if (
+                    controlledExpandedKeysRef.value === undefined &&
+                    props.defaultExpandAll
+                ) {
+                    uncontrolledExpandedKeysRef.value = collectNonLeafKeys(normalizedData.value);
+                }
+            },
+            { immediate: true, deep: true }
+        );
+
         function getOptionsByKeys(keys: Key[]): Array<TreeOption | null> {
-            const {getNode} = dataTreeMateRef.value;
-            return keys.map((key) => getNode(key)?.rawNode || null);
+            const optionMap = new Map<Key, TreeOption>();
+
+            function walk(list: TreeOption[]) {
+                list.forEach(node => {
+                    const key = node[props.keyField] as Key | undefined;
+                    if (typeof key !== 'undefined') {
+                        optionMap.set(key, node);
+                    }
+
+                    const children = getChildren(node);
+                    if (children.length) {
+                        walk(children);
+                    }
+                });
+            }
+
+            walk(normalizedData.value);
+            return keys.map(key => optionMap.get(key) ?? null);
         }
 
         function doUpdateExpandedKeys(
             value: Key[],
+            node: TreeOption | null,
+            action: 'expand' | 'collapse' | 'filter'
         ): void {
             uncontrolledExpandedKeysRef.value = value;
+            emit('update:expandedKeys', value);
+
+            const options = getOptionsByKeys(value);
+            const meta = node
+                ? { node, action: action as 'expand' | 'collapse' }
+                : { node: null, action: 'filter' as const };
+
+            if (props['onUpdate:expandedKeys']) {
+                call(props['onUpdate:expandedKeys'] as any, value, options, meta);
+            }
+
+            if (props.onUpdateExpandedKeys) {
+                call(props.onUpdateExpandedKeys as any, value, options, meta);
+            }
         }
 
-        return {
-            nodesRef,
-            displayTreeMateRef,
-            selfElRef
+        function handleToggle(node: TreeOption): void {
+            const key = node[props.keyField] as Key | undefined;
+            if (typeof key === 'undefined') {
+                return;
+            }
+
+            const children = getChildren(node);
+            if (!children.length) {
+                return;
+            }
+
+            const expandedKeys = mergedExpandedKeysRef.value;
+            const isExpanded = expandedKeys.includes(key);
+
+            if (isExpanded) {
+                doUpdateExpandedKeys(
+                    expandedKeys.filter(expandedKey => expandedKey !== key),
+                    node,
+                    'collapse'
+                );
+            } else {
+                doUpdateExpandedKeys([...expandedKeys, key], node, 'expand');
+            }
+        }
+
+        function handleDoubleClick(node: TreeOption): void {
+            emit('dblclick', node);
+
+            if (props.onDblClick) {
+                call(props.onDblClick as any, { option: node });
+            }
         }
-    }
-})
 
+        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'),
+            getChildren,
+            handleDoubleClick,
+            handleToggle,
+        });
+
+        return {
+            keyField: props.keyField,
+            normalizedData,
+            selfElRef,
+        };
+    },
+});
 </script>