@zeedhi/vuetify 3.2.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/vuetify",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Zeedhi Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -42,7 +42,7 @@
     "@vitest/coverage-v8": "^2.1.3",
     "@zeedhi/common": "^3.0.0",
     "@zeedhi/core": "^3.0.0",
-    "@zeedhi/vue": "^3.2.0",
+    "@zeedhi/vue": "^3.3.0",
     "vue": "^3.0.0",
     "vue-router": "^4.2.2",
     "vuetify": "^3.11.0"
@@ -58,5 +58,5 @@
   "env": {
     "NODE_ENV": "production"
   },
-  "gitHead": "324909706bf7955d5275f878496732f3d14c68cd"
+  "gitHead": "3398ef763d8812e5b8feb5b8f06db1b377271fde"
 }

package/src/components/zd-component/ZdComponent.ts

@@ -235,7 +235,7 @@ export function useCreateInstance<T extends Component, G extends RootRef = RootR
 				explicitlyPassedProps[key] = props[key];
 			}
 		}
-		explicitlyPassedProps.instanceObj = undefined;
+		delete explicitlyPassedProps.instanceObject;
 
 		const events = getInstanceEvents([props.events, props.instanceObject.events]);
 
@@ -267,18 +267,20 @@ export function useCreateInstance<T extends Component, G extends RootRef = RootR
 	const instance = reactive(instanceObj);
 
 	// criar reatividades nas propriedades. (PropWatch)
-	Object.keys(props).forEach((key: string) => {
-		if (!(key in instance)) return;
-		if (typeof props[key] === 'function') return;
-		if (propsDefs[key] && propsDefs[key].watch === false) return;
-
-		watch(
-			() => props[key],
-			(value) => {
-				(instance as any)[key] = value;
-			}
-		);
-	});
+	if (!createdFromObject) {
+		Object.keys(props).forEach((key: string) => {
+			if (!(key in instance)) return;
+			if (typeof props[key] === 'function') return;
+			if (propsDefs[key]?.watch === false) return;
+
+			watch(
+				() => props[key],
+				value => {
+					(instance as any)[key] = value;
+				},
+			);
+		});
+	}
 
 	addChild({ instance, props });
 

package/src/components/zd-tabs/ZdTab.ts

@@ -1,6 +1,6 @@
-import { Tab } from '@zeedhi/common';
+import { Tab, Tabs } from '@zeedhi/common';
 import { Event } from '@zeedhi/core';
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { useDensity } from '../../composables';
 import { buildProps } from '../../utils';
 import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
@@ -15,9 +15,6 @@ export const ZdTabProps = buildProps({
 	tabTitle: {
 		type: [String],
 	},
-	tabName: {
-		type: [String],
-	},
 	color: {
 		type: [String],
 		default: 'primary',
@@ -70,6 +67,8 @@ const tabComponent = defineComponent({
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 
+    const isDragging = ref<boolean>(false);
+
 		const clickTab = (event: Event) => {
 			ctx.emit('click', event);
 		};
@@ -78,9 +77,43 @@ const tabComponent = defineComponent({
 			ctx.emit('keydown', event);
 		};
 
+		const sortable = computed(() => {
+			return (instance.parent as Tabs)?.sortable;
+		})
+
+    const handleDragStart = (event: DragEvent): void => {
+      if (!sortable.value) {
+        event.preventDefault();
+        return;
+      }
+
+			if (event.dataTransfer) {
+				event.dataTransfer.effectAllowed = 'move';
+
+				// Compatibilidade Firefox
+				event.dataTransfer.setData('text/plain', '');
+
+				const tabsInstance = instance.parent as Tabs;
+				const sourceIndex = tabsInstance.tabs.findIndex((tab) => tab.name === instance.name);
+
+				event.dataTransfer.setData(`application/x-zd-tabs-owner-${tabsInstance.name.toLowerCase()}`, '');
+				event.dataTransfer.setData('application/x-zd-tab-index', String(sourceIndex));
+			}
+
+      isDragging.value = true;
+
+      event.stopPropagation();
+    };
+
+    const handleDragEnd = (): void => {
+      isDragging.value = false;
+    };
+
 		return {
 			instance,
 			root,
+			density,
+			sortable,
 			click,
 			focus,
 			blur,
@@ -89,7 +122,8 @@ const tabComponent = defineComponent({
 			// methods
 			clickTab,
 			keydown,
-			density,
+			handleDragStart,
+			handleDragEnd,
 		};
 	},
 });

package/src/components/zd-tabs/ZdTab.vue

@@ -3,9 +3,11 @@
     :id="instance.name"
     ref="root"
     v-show="instance.isVisible"
-    :class="['zd-tabs-tab', instance.cssClass]"
+    :class="['zd-tabs-tab', instance.cssClass, {
+      'zd-tabs-tab-sortable': sortable,
+    }]"
     :style="$styleObject(instance.cssStyle)"
-    :name="instance.tabName"
+    :name="instance.tabTitle"
     :disabled="instance.disabled"
     :theme="instance.theme"
     :color="instance.color"
@@ -15,11 +17,14 @@
     :iconName="instance.iconName"
     :rounded="instance.rounded"
     :selected-class="'v-tab--selected '+instance.selectedClass"
-    :value="instance.value"
+    :value="instance.name || instance.value"
     :variant="instance.variant"
     :width="instance.width"
+    :draggable="sortable"
     @click="clickTab($event)"
     @keydown="keydown($event)"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd"
   >
     <span class="zd-tabs-tab-text">
       {{ $t(instance.tabTitle) }}
@@ -46,6 +51,14 @@
       line-height: 15px;
       margin-bottom: 1px;
     }
+
+    &-sortable::before {
+      content: "⋮";
+      position: absolute;
+      left: 1px;
+      width: 10px;
+      cursor: grab;
+    }
   }
 }
 </style>

package/src/components/zd-tabs/ZdTabItem.ts

@@ -4,8 +4,8 @@ import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
 
 export const ZdTabItemProps = buildProps({
 	...ZdComponentRenderProps,
-	index: {
-		type: [Number],
+	value: {
+		type: [String],
 	},
 	lazyLoad: {
 		type: [Boolean],

package/src/components/zd-tabs/ZdTabItem.vue

@@ -2,7 +2,7 @@
     <v-tabs-window-item
       class="zd-tabs-tab-item"
       v-show="isVisible"
-      :value="index"
+      :value="value"
       :transition="false"
       :reverse-transition="false"
     >

package/src/components/zd-tabs/ZdTabs.ts

@@ -1,5 +1,5 @@
 import { Tabs } from '@zeedhi/common';
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { useDensity } from '../../composables';
 import { HeightProps } from '../../propsMixins/heightProps';
 import { buildProps } from '../../utils';
@@ -45,6 +45,10 @@ export const ZdTabsProps = buildProps({
 	max: {
 		type: [Number, String],
 	},
+	sortable: {
+		type: [Boolean, String],
+		default: false,
+	},
 });
 
 /**
@@ -56,9 +60,13 @@ const tabsComponent = defineComponent({
 	setup(props, ctx) {
 		const { instance, root } = useCreateInstance<Tabs>(props, ctx, Tabs, ZdTabsProps);
 		const { density } = useDensity({ instance });
+    const rootElement = getRootElement(root);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 
+		const isDragOver = ref<boolean>(false);
+		const dragOverIndex = ref<number>(-1);
+
 		const change = () => {
 			const rootElement = getRootElement(root);
 			instance.change(new Event('change'), rootElement.value);
@@ -73,10 +81,93 @@ const tabsComponent = defineComponent({
 			const rootElement = getRootElement(root);
 			instance.beforeChange(event, index, rootElement.value);
 		};
+		
+		const isTabOK = (event: DragEvent): boolean => {
+			return !!event.dataTransfer?.types.includes(`application/x-zd-tabs-owner-${instance.name.toLowerCase()}`);
+		};
+
+		const getTabsBarRect = (): DOMRect | undefined => {
+			return rootElement.value?.querySelector('.v-tabs')?.getBoundingClientRect();
+		};
+
+		const handleDragOver = (event: DragEvent): void => {
+			event.preventDefault();
+
+			if (!isTabOK(event)) {
+				dragOverIndex.value = -1;
+				return;
+			}
+
+			const tabsRect = getTabsBarRect();
+			if (!tabsRect) return;
+
+			if (event.clientY < tabsRect.top - 10 || event.clientY > tabsRect.bottom + 10) {
+				dragOverIndex.value = -1;
+				return;
+			}
+
+			const tabs = rootElement.value!.querySelectorAll('.zd-tabs-tab');
+			let targetIndex = instance.tabs.length;
+
+			tabs.forEach((tabEl, index) => {
+				const rect = tabEl.getBoundingClientRect();
+
+				if (event.clientX < rect.left + rect.width / 2) {
+					targetIndex = Math.min(targetIndex, index);
+				}
+			});
+
+			dragOverIndex.value = targetIndex;
+			event.stopPropagation();
+		};
+
+		const handleDrop = (event: DragEvent): void => {
+			event.preventDefault();
+
+			if (!isTabOK(event) || dragOverIndex.value === -1) return;
+
+			event.stopPropagation();
+
+			const sourceIndex = Number(event.dataTransfer?.getData('application/x-zd-tab-index'));
+			instance.moveTab(sourceIndex, dragOverIndex.value);
+
+			isDragOver.value = false;
+			dragOverIndex.value = -1;
+		};
+
+		const handleDragEnter = (event: DragEvent): void => {
+			event.preventDefault();
+
+			if (!isTabOK(event)) {
+				isDragOver.value = false;
+				dragOverIndex.value = -1;
+				return;
+			}
+
+			isDragOver.value = true;
+		};
+
+		const handleDragLeave = (event: DragEvent): void => {
+			if (rootElement.value && event.relatedTarget && rootElement.value.contains(event.relatedTarget as Node)) return;
+
+			isDragOver.value = false;
+			dragOverIndex.value = -1;
+		};
+
+		const activeTabName = computed<string | undefined>({
+			get: () => instance.tabs[instance.activeTab]?.name,
+			set: (name) => {
+				const index = instance.tabs.findIndex((tab) => tab.name === name);
+				if (index !== -1) instance.activeTab = index;
+			},
+		});
 
 		return {
 			instance,
 			root,
+      dragOverIndex,
+			density,
+			activeTabName,
 			click,
 			focus,
 			blur,
@@ -85,7 +176,10 @@ const tabsComponent = defineComponent({
 			clickTab,
 			keydown,
 			change,
-			density,
+      handleDragOver,
+      handleDrop,
+      handleDragEnter,
+      handleDragLeave,
 		};
 	},
 });

package/src/components/zd-tabs/ZdTabs.vue

@@ -10,9 +10,13 @@
       maxHeight: instance.maxHeight,
       minHeight:instance.minHeight,
     }"
+    @dragenter="handleDragEnter"
+    @dragleave="handleDragLeave"
+    @dragover="handleDragOver"
+    @drop="handleDrop"
   >
     <v-tabs
-      v-model="instance.activeTab"
+      v-model="activeTabName"
       show-arrows
       @update:model-value="change"
       :theme="instance.theme"
@@ -24,31 +28,39 @@
       :grow="instance.grow"
       :max="instance.max"
     >
-      <zd-tab
-        v-for="(tab, index) in instance.tabs " :key="tab.name"
-        v-bind="{
-          ...tab,
-          name: tab.name,
-          tabName: tab.name,
-          dense: tab.dense || instance.dense,
-        }"
-        @click="clickTab($event, index)"
-        @keydown="keydown($event, index)"
-      >
-      </zd-tab>
+      <template v-for="(tab, index) in instance.tabs " :key="tab.name">
+        <span
+          v-if="dragOverIndex === index"
+          class="zd-tabs-sortable-drop-indicator"
+        />
+
+        <zd-tab
+          v-bind="{
+            ...tab,
+            name: tab.name,
+            dense: tab.dense || instance.dense,
+          }"
+          @click="clickTab($event, index)"
+          @keydown="keydown($event, index)"
+        />
+      </template>
+
+      <span
+        v-if="dragOverIndex === instance.tabs.length"
+        class="zd-tabs-sortable-drop-indicator"
+      />
     </v-tabs>
 
     <v-window
-      v-model="instance.activeTab"
+      :model-value="activeTabName"
     >
         <zd-tab-item
           v-for="(tab, index) in instance.tabs"
-          v-show="tab.isVisible && index === instance.activeTab"
+          v-show="tab.isVisible && tab.name === activeTabName"
           :key="tab.name"
-          :value="index"
+          :value="tab.name"
           :children ="tab.children"
           v-bind ="{
-            index: index,
             name: instance.name+'-tab-item-'+index,
             lazyLoad: tab.lazyLoad,
           }"
@@ -113,5 +125,22 @@
       height:100% !important;
     }
   }
+
+  &-sortable-drop-indicator {
+    display: inline-block;
+    position: relative;
+    height: 100%;
+    width: 0;
+    z-index: 1;
+
+    &::after {
+      content: '';
+      width: 3px;
+      background-color: var(--v-primary-base);
+      height: 100%;
+      position: absolute;
+      opacity: 0.75;
+    }    
+  }
 }
 </style>