@zeedhi/vuetify 3.0.0 → 3.0.2

package/src/components/zd-tree/ZdTree.ts

@@ -46,7 +46,7 @@ export const ZdTreeProps = buildProps({
 		default: true,
 	},
 	afterTitleSlot: {
-		type: Object as PropType<ITreeConditionComponent>,
+		type: [String, Object] as PropType<ITreeConditionComponent>,
 		default: () => [],
 	},
 	toolbarSlot: {
@@ -164,34 +164,100 @@ export default defineComponent({
 			});
 		};
 
-		const setAfterTitleMargin = () => {
-			nextTick(() => {
-				const els = Array.from((proxy?.$el as HTMLElement).querySelectorAll<HTMLElement>('.zd-tree-after-title'));
-				const maxOffset = els.reduce((acc, el) => {
-					const sib = el.previousElementSibling as HTMLElement;
-					if (!sib) return acc;
-					const offset =
-						sib.offsetLeft +
-						sib.offsetWidth +
-						parseInt(sib.style.marginLeft || '0') +
-						parseInt(sib.style.marginRight || '0');
-					return Math.max(acc, offset);
-				}, 0);
-				els.forEach((el) => {
-					el.style.left = `${maxOffset}px`;
-				});
+		const refsMap = ref<{ [key: string]: HTMLElement | null }>({});
+
+		function getAfterTitleEls(rootEl: HTMLElement) {
+			return Array.from(rootEl.querySelectorAll<HTMLElement>('.zd-tree-after-title'));
+		}
+
+		function getMaxOffset(els: HTMLElement[]) {
+			const siblings = els.map((el) =>
+				el.previousElementSibling instanceof HTMLElement ? el.previousElementSibling : null,
+			);
+			return siblings.reduce((result, el) => {
+				if (!el) return result;
+				const style = getComputedStyle(el);
+				const offset =
+					el.offsetLeft + el.offsetWidth + parseFloat(style.marginLeft || '0') + parseFloat(style.marginRight || '0');
+				return offset > result ? offset : result;
+			}, 0);
+		}
+
+		function setAfterTitleMargin(rootEl: HTMLElement | null) {
+			if (!rootEl) return;
+			const els = getAfterTitleEls(rootEl);
+			const maxOffset = getMaxOffset(els);
+			els.forEach((el) => {
+				el.style.left = `${maxOffset}px`;
 			});
-		};
+		}
+
+		function addObserver(node: ITreeNode<IDictionary>) {
+			if (!node.pathStr) return;
+			const ref = refsMap.value[node.pathStr];
+			const el = ref as HTMLElement;
+
+			const observer = new ResizeObserver(() => {
+				const root = treeRef.value?.$el || treeRef.value;
+				if (root) setAfterTitleMargin(root);
+			});
+			if (el.parentElement) {
+				observer.observe(el.parentElement);
+			}
+		}
 
 		onMounted(() => {
-			instance.setTree(treeRef.value!);
-			setAfterTitleMargin();
+			instance.setTree(treeRef.value as any);
 			nodeChange();
-			if (instance.fillHeight) {
-				setFillHeight(proxy?.$el as HTMLElement);
-			}
+
+			const rootEl = (treeRef.value?.$el || treeRef.value) as HTMLElement;
+			if (!rootEl) return;
+
+			const observeAfterTitleSlots = () => {
+				const afterTitleEls = rootEl.querySelectorAll<HTMLElement>('.zd-tree-after-title');
+				afterTitleEls.forEach((el) => {
+					if (!el.parentElement) return;
+					if (!(el as any)._hasObserver) {
+						const resizeObserver = new ResizeObserver(() => setAfterTitleMargin(rootEl));
+						resizeObserver.observe(el.parentElement);
+						(el as any)._hasObserver = true;
+					}
+				});
+			};
+
+			setAfterTitleMargin(rootEl);
+			observeAfterTitleSlots();
+
+			if (instance.fillHeight) setFillHeight(rootEl);
+
+			const mutationObserver = new MutationObserver(() => {
+				setAfterTitleMargin(rootEl);
+				observeAfterTitleSlots();
+			});
+			mutationObserver.observe(rootEl, { childList: true, subtree: true });
 		});
 
+		watch(
+			() => instance.nodes,
+			() => {
+				nextTick(() => {
+					const rootEl = (treeRef.value?.$el || treeRef.value) as HTMLElement;
+					if (!rootEl) return;
+
+					setAfterTitleMargin(rootEl);
+
+					// registra ResizeObserver nos novos afterTitleSlots
+					const afterTitleEls = rootEl.querySelectorAll<HTMLElement>('.zd-tree-after-title');
+					afterTitleEls.forEach((el) => {
+						if (!el.parentElement) return;
+						const observer = new ResizeObserver(() => setAfterTitleMargin(rootEl));
+						observer.observe(el.parentElement);
+					});
+				});
+			},
+			{ deep: true },
+		);
+
 		watch(
 			() => instance.datasource?.data?.length,
 			() => {
@@ -237,14 +303,32 @@ export default defineComponent({
 			instance.nodeCheck(node, event, proxy?.$el as HTMLElement);
 		};
 
-		// Adiciona método para expandir/colapsar nó
 		const toggleNode = (node: any) => {
 			if (treeRef.value && typeof treeRef.value.toggleNode === 'function') {
 				treeRef.value.toggleNode(node);
 			} else {
 				node.isExpanded = !node.isExpanded;
 			}
+			updateAfterTitlePositions();
 		};
+		function updateAfterTitlePositions() {
+			nextTick(() => {
+				const rootEl = (treeRef.value?.$el || treeRef.value) as HTMLElement;
+				if (!rootEl) return;
+
+				setAfterTitleMargin(rootEl);
+
+				const afterTitleEls = rootEl.querySelectorAll<HTMLElement>('.zd-tree-after-title');
+				afterTitleEls.forEach((el) => {
+					if (!el.parentElement) return;
+					if (!(el as any)._hasObserver) {
+						const observer = new ResizeObserver(() => setAfterTitleMargin(rootEl));
+						observer.observe(el.parentElement);
+						(el as any)._hasObserver = true;
+					}
+				});
+			});
+		}
 
 		return {
 			root,
@@ -259,6 +343,7 @@ export default defineComponent({
 			instanceNode,
 			nodeCheck,
 			toggleNode,
+			addObserver,
 		};
 	},
 });

package/src/components/zd-tree/ZdTree.vue

@@ -2,7 +2,10 @@
   <div
     :id="instance.name"
     v-show="instance.isVisible"
-    :class="[instance.cssClass, 'zd-tree', theme]"
+    :class="[
+      instance.cssClass, 'zd-tree', 
+      theme,
+      ]"
     :style="[
       cssColorVars,
       ...$styleObject(instance.cssStyle),
@@ -27,7 +30,9 @@
       <slot name="toolbarSlot"></slot>
     </div>
 
-    <div class="zd-tree-container">
+    <div 
+      class="zd-tree-container"
+      >
       <sl-vue-tree
         :model-value="instance.nodes"
         ref="treeRef"
@@ -59,7 +64,6 @@
         </template>
 
         <template #title="{ node, gap }">
-          <div style="display: flex; align-items: center;">
             <span v-if="!node.children || node.children.length === 0" class="align"></span>
             <span v-html="gap" />
             <zd-tree-checkbox
@@ -72,31 +76,37 @@
             <template v-if="!$slots.titleSlot">
               <span
                 v-if="!instance.titleSlot || instance.titleSlot.length === 0"
-                :class="['item-title', { 'has-children': node.children.length }]"
+                :class="[
+                  'item-title', 
+                  { 'has-children': node.children.length }
+                  ]"
               >
                 {{ node.title }}
               </span>
-              <span v-else class="zd-display-inline-flex">
+              <span v-else class='zd-display-inline-flex'>
                 <component
-                  v-for="(comp, index) in instance.getSlotComponent(instance.titleSlot || [], node)"
+                  v-for="(comp, index) in instance.getSlotComponent(instance.titleSlot, node)"
+                  :class="[
+                    'item-title', 
+                    { 'has-children': node.children.length }
+                  ]"
                   :key="index"
                   :is="comp.component"
-                  :class="['item-title', { 'has-children': node.children.length }]"
                   v-bind="comp"
                 />
               </span>
             </template>
-            <slot name="titleSlot" :node="node" />
+            <slot name="titleSlot" v-bind:node="node"/>
             <zd-tree-after-title
               :ref="node.pathStr"
               :afterTitleSlot="instance.getSlotComponent(instance.afterTitleSlot || [], node)[0]"
-            >
-              <slot name="afterTitleSlot" :node="node" />
+              @hook:mounted="addObserver(node)"
+              >
+              <slot name="afterTitleSlot" v-bind:node="node"/>
             </zd-tree-after-title>
-          </div>
         </template>
 
-        <template #draginfo>
+        <template v-slot:draginfo>
           {{ selectedNodesTitle }}
         </template>
       </sl-vue-tree>
@@ -109,109 +119,38 @@
 <style lang="scss">
 @import 'sl-vue-tree-next/sl-vue-tree-next-minimal.css';
 
-.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {
-  height: 30px;
-  line-height: 30px;
-}
-
-.sl-vue-tree-node-item,
-.sl-vue-tree-node-list {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-}
-
 .zd-tree {
   color: var(--zd-font-color);
   font-size: var(--zd-font-body1-size);
-  font-weight: normal;
   overflow: auto;
 
   &-toolbar {
     display: flex;
+    margin-bottom: 1rem;
   }
 
-  &.theme--light .sl-vue-tree-title {
-    color: var(--zd-font-color);
-  }
-
-  &.theme--light .sl-vue-tree-node-item:hover {
-    background: #eee;
-  }
-
-  &.theme--dark .sl-vue-tree-title {
-    color: #fff;
-  }
-
-  &.theme--dark .sl-vue-tree-node-item:hover {
-    background: #616161;
-  }
-
-  .sl-vue-tree-title {
-    display: flex;
-  }
-
-  .sl-vue-tree-nodes-list {
+  .sl-vue-tree-next-nodes-list {
     list-style: none;
     padding-left: 0;
     margin: 0;
 
-    .sl-vue-tree-node {
-      padding-top: 3px;
-      padding-left: 1rem;
+    .sl-vue-tree-next-node {
       cursor: pointer;
       user-select: none;
 
-      .sl-vue-tree-node-item {
-        display: flex !important;
-        align-items: center !important;
-        height: 30px;
-        line-height: 30px;
-        padding: 0 0.5rem;
-        border-radius: 4px;
-        transition: background-color 0.2s;
-
-        &:hover {
-          background-color: #eee;
-        }
-
-        .item-icon {
-          margin-right: 0.5rem;
-        }
-
-        .item-title.has-children {
-          font-weight: 700;
-        }
-
-        .zd-tree-checkbox {
-          margin-right: 0.5rem;
-          display: flex !important;
-          align-items: center;
-          padding: 0 3px 3px 0;
-        }
-
-        .v-input--selection-controls__ripple,
-        .v-label {
-          display: none !important;
-        }
-      }
-
-      &.sl-vue-tree-selected > .sl-vue-tree-node-item {
-        background-color: var(--current-row-color);
-        color: var(--zd-font-color);
-
+      &.sl-vue-tree-next-selected > .sl-vue-tree-next-node-item {
         &:hover {
           background: var(--current-row-hover-color) !important;
         }
 
-        .sl-vue-tree-toggle .v-icon {
+        .sl-vue-tree-next-toggle .v-icon {
           color: var(--zd-font-color);
         }
       }
 
-      .sl-vue-tree-toggle {
-        display: flex !important;
-        align-items: center !important;
+      .sl-vue-tree-next-toggle {
+        display: flex;
+        align-items: center;
         margin-right: 4px;
 
         span .v-icon {
@@ -220,9 +159,28 @@
         }
       }
     }
+  }
+
+  .sl-vue-tree-next-gap {
+    display: inline-block;
+    width: 25px;
+    min-width: 25px;
+    flex-shrink: 0;
+  }
+
+  .sl-vue-tree-next-title {
+    display: flex;
+    align-items: center;
+  }
 
-    .sl-vue-tree-gap {
-      width: 16px;
+  .sl-vue-tree-next-toggle {
+    display: flex;
+    align-items: center;
+    margin-right: 0;
+
+    .v-icon,
+    i {
+      color: #3b3b3b !important;
     }
   }
 
@@ -230,68 +188,15 @@
     background-color: var(--current-row-color);
     color: var(--zd-font-color);
   }
-}
-
-.item-title {
-  padding: 5px;
-}
-
-.item-title.has-children {
-  font-weight: 700;
-}
-
-.sl-vue-tree-drag-info {
-  position: absolute;
-  background-color: rgba(0, 0, 0, 0.5);
-  opacity: 0.5;
-  margin-left: 20px;
-  margin-bottom: 20px;
-  padding: 5px 10px;
-}
 
-.theme--light.v-icon {
-  color: rgba(143, 127, 127, 0.54);
-}
-.sl-vue-tree-next-gap {
-  display: inline-block;
-  width: 25px; // ajusta conforme tamanho do teu ícone
-  flex-shrink: 0;
-}
-
-.sl-vue-tree-gap {
-  display: inline-block;
-  flex-shrink: 0;
-}
-.sl-vue-tree-next-title {
-  display: flex;
-  align-items: center;
-}
-
-.sl-vue-tree-next-toggle {
-  display: flex;
-  align-items: center;
-  margin-right: 0px; 
-}
-
-.sl-vue-tree-next-toggle .v-icon,
-.sl-vue-tree-next-toggle i {
-  color: #3b3b3b !important;
-}
+  .align {
+    display: inline-block;
+    width: 32px;
+    min-width: 25px;
+    flex-shrink: 0;
+  }
 
-.zd-tree-after-title {
-  display: flex;
-  align-items: center;
-  margin-left: 0.5rem;
-  position: static;
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-}
-.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {
-    margin: 0px 1px 0px 1px;
-    padding-bottom: 1.4px;
-}
-.v-icon.v-icon {
+  .v-icon {
     align-items: center;
     display: inline-flex;
     font-feature-settings: "liga";
@@ -301,35 +206,34 @@
     line-height: 1;
     position: relative;
     text-indent: 0;
-    transition: .3s cubic-bezier(.25,.8,.5,1), visibility 0s;
+    transition: .3s cubic-bezier(.25, .8, .5, 1), visibility 0s;
     vertical-align: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
     user-select: none;
-}
-.v-checkbox.v-input {
-    height: 30px;
-}
-
+  }
 
+  .v-checkbox.v-input {
+    height: 30px;
+    min-height: 30px;
+    max-height: 30px;
+  }
 
-.sl-vue-tree-gap, .sl-vue-tree-next-gap {
-  display: inline-block;
-  width: 25px !important;
-  min-width: 25px !important;
-  flex-shrink: 0;
-}
+  .sl-vue-tree-next-node-item,
+  .zd-tree-node-row {
+    max-height: 30px;
+    min-height: 30px;
+    height: 30px;
+    box-sizing: border-box;
+    align-items: center;
+    display: flex;
+  }
 
-.zd-tree .sl-vue-tree-nodes-list > .sl-vue-tree-node > .sl-vue-tree-node-item {
-  padding-left: 25px !important;
-}
-.align {
-  display: inline-block;
-  width: 25px;
-  min-width: 25px;
-  flex-shrink: 0;
-}
-.zd-text p {
-     padding: 6px;
+  .zd-tree-node-row {
+    display: flex;
+    align-items: center;
+    position: relative; 
+  }
+    .item-title.has-children {
+    font-weight: 700;
+  }
 }
 </style>

package/src/components/zd-tree/ZdTreeAfterTitle.ts

@@ -1,4 +1,6 @@
 import type { ITreeConditionComponent } from '@zeedhi/common';
+import { type ITreeNode } from '@zeedhi/common';
+import type { IDictionary } from '@zeedhi/core';
 import { type PropType, defineComponent } from 'vue';
 import { buildProps } from '../../utils/buildProps';
 
@@ -7,7 +9,7 @@ export const ZdTreeAfterTitleProps = buildProps({
 		type: Object as PropType<ITreeConditionComponent>,
 	},
 	node: {
-		type: Object,
+		type: Object as PropType<ITreeNode<IDictionary>>,
 	},
 });
 

package/src/components/zd-tree/ZdTreeAfterTitle.vue

@@ -1,9 +1,9 @@
 <template>
   <span
-    v-if="afterTitleSlot && afterTitleSlot.text"
     class="zd-tree-after-title"
   >
     <component
+      v-if="afterTitleSlot && afterTitleSlot.text"
       class="zd-display-inline-block"
       :is="afterTitleSlot.component"
       v-bind="afterTitleSlot"
@@ -15,11 +15,19 @@
 <script lang="ts" src="./ZdTreeAfterTitle.ts"></script>
 
 <style>
-@import 'sl-vue-tree-next/sl-vue-tree-next-minimal.css';
 .zd-tree-after-title {
-  display: inline-flex;
-  align-items: center;
-  position: static;
+  height: 30px;
+  min-height: 30px;
+  max-height: 30px;
+  gap: 2px;
+  position: absolute;
+}
+.after-slot-color {
+    background: #ccc;
+    margin-left: 10px;
+    padding: 6px 6px;
+    font-weight: normal;
+    font-size: 12px;
+    color: white;
 }
-
 </style>

package/src/components/zd-tree/ZdTreeCheckbox.vue

@@ -16,8 +16,6 @@
 <script lang="ts" src="./ZdTreeCheckbox.ts" />
 
 <style lang="scss" >
-@import 'sl-vue-tree-next/sl-vue-tree-next-minimal.css';
-
 .zd-tree-checkbox {
   display: flex !important;
   align-items: center;

package/src/composables/useTableLayout.ts

@@ -10,7 +10,7 @@ import {
 } from '@zeedhi/common';
 import { IDictionary, Utils } from '@zeedhi/core';
 import cloneDeep from 'lodash.clonedeep';
-import { NotProvidedError } from 'packages/vuetify/src/errors/not-provided';
+import { NotProvidedError } from '../errors/not-provided';
 import { ComputedRef, UnwrapNestedRefs, computed, inject, nextTick, provide } from 'vue';
 
 export type DefaultLayout = {