@teammodlr/ui-kit 2.1.6 → 2.1.8

package/src/components/tree/TreeNodeToggle.vue

@@ -0,0 +1,48 @@
+<template>
+  <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 {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) {
+
+    const iconClass = computed(() => {
+      return {
+        [style.toggle]: true,
+        [style.iconRotate["90"]]: props.expanded,
+      }
+    });
+    return {
+      style,
+      iconClass
+    }
+  }
+})
+</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" style="height: 300px;"/>
 </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/style/Tree.css.ts

@@ -0,0 +1,70 @@
+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';

package/src/components/tree/types.ts

@@ -13,15 +13,24 @@ 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>,
+    childrenFieldRef: Ref<string>,
+    handleToggleClick: (node: TreeNode<TreeOption>) => void,
+    handleDoubleClick: (node: TreeOption) => void,
 }
 
 export const treeInjectionKey = createInjectionKey<TreeInjection>('tree')