@teammodlr/ui-kit 2.1.7 → 2.1.8

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/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

@@ -28,6 +28,7 @@ export interface TreeInjection {
     nodePropsRef: Ref<TreeNodeProps | undefined>,
     labelFieldRef: Ref<string>,
     keyFieldRef: Ref<string>,
+    childrenFieldRef: Ref<string>,
     handleToggleClick: (node: TreeNode<TreeOption>) => void,
     handleDoubleClick: (node: TreeOption) => void,
 }