@zeedhi/vuetify 1.133.0 → 1.134.0

package/dist/zd-vuetify.esm.js

@@ -58451,7 +58451,16 @@ let ZdSelectTree = class ZdSelectTree extends ZdTextInput$1 {
         return defaultLabel;
     }
     set treeValue(value) {
-        this.instance.selectValue = this.instance.clearNodeRow(value);
+        this.instance.selectValue = value ? this.instance.clearNodeRow(value) : null;
+        this.instance.validate();
+        if (!value) {
+            this.$nextTick(() => {
+                var _a, _b;
+                const instanceRef = this.$refs.instance;
+                (_a = instanceRef === null || instanceRef === void 0 ? void 0 : instanceRef.focusInput) === null || _a === void 0 ? void 0 : _a.call(instanceRef);
+                (_b = instanceRef === null || instanceRef === void 0 ? void 0 : instanceRef.openMenu) === null || _b === void 0 ? void 0 : _b.call(instanceRef);
+            });
+        }
     }
     get treeValue() {
         if (!this.instance.selectValue)
@@ -60385,6 +60394,8 @@ let ZdTabs = class ZdTabs extends ZdComponentRender$1 {
     constructor() {
         super(...arguments);
         this.instanceType = Tabs;
+        this.isDragOver = false;
+        this.dragOverIndex = -1;
     }
     change(event) {
         this.instance.change(event, this.$el);
@@ -60403,6 +60414,77 @@ let ZdTabs = class ZdTabs extends ZdComponentRender$1 {
             });
         });
     }
+    isTabOK(event) {
+        var _a;
+        return !!((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types.includes(`application/x-zd-tabs-owner-${this.instance.name.toLowerCase()}`));
+    }
+    getTabsBarRect() {
+        var _a;
+        return (_a = this.$el.querySelector('.v-tabs')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    }
+    handleDragOver(event) {
+        event.preventDefault();
+        if (!this.isTabOK(event)) {
+            this.dragOverIndex = -1;
+            return;
+        }
+        const tabsRect = this.getTabsBarRect();
+        if (!tabsRect)
+            return;
+        if (event.clientY < tabsRect.top - 10 || event.clientY > tabsRect.bottom + 10) {
+            this.dragOverIndex = -1;
+            return;
+        }
+        const tabs = this.$el.querySelectorAll('.zd-tabs-tab');
+        let targetIndex = this.instance.tabs.length;
+        tabs.forEach((tabEl, index) => {
+            const rect = tabEl.getBoundingClientRect();
+            if (event.clientX < rect.left + rect.width / 2) {
+                targetIndex = Math.min(targetIndex, index);
+            }
+        });
+        this.dragOverIndex = targetIndex;
+        event.stopPropagation();
+    }
+    handleDrop(event) {
+        var _a;
+        event.preventDefault();
+        if (!this.isTabOK(event) || this.dragOverIndex === -1)
+            return;
+        event.stopPropagation();
+        const sourceIndex = Number((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('application/x-zd-tab-index'));
+        this.instance.moveTab(sourceIndex, this.dragOverIndex);
+        this.$nextTick(() => {
+            const tabs = this.$refs.tabs;
+            tabs.callSlider();
+        });
+        this.isDragOver = false;
+        this.dragOverIndex = -1;
+    }
+    handleDragEnter(event) {
+        event.preventDefault();
+        if (!this.isTabOK(event)) {
+            this.isDragOver = false;
+            this.dragOverIndex = -1;
+            return;
+        }
+        this.isDragOver = true;
+    }
+    handleDragLeave(event) {
+        if (this.$el && event.relatedTarget && this.$el.contains(event.relatedTarget))
+            return;
+        this.isDragOver = false;
+        this.dragOverIndex = -1;
+    }
+    get activeTabName() {
+        var _a;
+        return (_a = this.instance.tabs[this.instance.activeTab]) === null || _a === void 0 ? void 0 : _a.name;
+    }
+    set activeTabName(name) {
+        const index = this.instance.tabs.findIndex((tab) => tab.name === name);
+        if (index !== -1)
+            this.instance.activeTab = index;
+    }
 };
 __decorate([
     PropWatch({ type: [Number, String], default: 0 }),
@@ -60428,6 +60510,10 @@ __decorate([
     PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Boolean)
 ], ZdTabs.prototype, "touchless", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Boolean)
+], ZdTabs.prototype, "sortable", void 0);
 __decorate([
     Prop({ type: Array, default: () => [] }),
     __metadata("design:type", Array)
@@ -60469,6 +60555,12 @@ var __vue_render__$c = function () {
         _vm.$styleObject(_vm.instance.cssStyle)
       ),
       attrs: { id: _vm.instance.name, name: _vm.instance.name },
+      on: {
+        dragenter: _vm.handleDragEnter,
+        dragleave: _vm.handleDragLeave,
+        dragover: _vm.handleDragOver,
+        drop: _vm.handleDrop,
+      },
     },
     [
       _c(
@@ -60486,21 +60578,25 @@ var __vue_render__$c = function () {
             },
           },
           model: {
-            value: _vm.instance.activeTab,
+            value: _vm.activeTabName,
             callback: function ($$v) {
-              _vm.$set(_vm.instance, "activeTab", $$v);
+              _vm.activeTabName = $$v;
             },
-            expression: "instance.activeTab",
+            expression: "activeTabName",
           },
         },
         [
           _vm._l(_vm.instance.tabs, function (tab, index) {
             return [
+              _vm.dragOverIndex === index
+                ? _c("span", { staticClass: "zd-tabs-sortable-drop-indicator" })
+                : _vm._e(),
+              _vm._v(" "),
               _c(
                 "zd-tab",
                 _vm._b(
                   {
-                    key: index,
+                    key: tab.name,
                     on: {
                       click: function ($event) {
                         return _vm.clickTab($event, index)
@@ -60516,12 +60612,13 @@ var __vue_render__$c = function () {
                     disabled: tab.disabled,
                     cssClass: tab.cssClass,
                     cssStyle: tab.cssStyle,
-                    tabName: tab.name,
+                    value: tab.name,
                     index: index,
                     isVisible: tab.isVisible,
                     tabTitle: tab.tabTitle,
                     dark: tab.dark,
                     light: tab.light,
+                    parent: _vm.instance,
                   },
                   false
                 )
@@ -60530,6 +60627,10 @@ var __vue_render__$c = function () {
           }),
           _vm._v(" "),
           _vm._t("tabs"),
+          _vm._v(" "),
+          _vm.dragOverIndex === _vm.instance.tabs.length
+            ? _c("span", { staticClass: "zd-tabs-sortable-drop-indicator" })
+            : _vm._e(),
         ],
         2
       ),
@@ -60543,11 +60644,11 @@ var __vue_render__$c = function () {
             touchless: _vm.instance.touchless,
           },
           model: {
-            value: _vm.instance.activeTab,
+            value: _vm.activeTabName,
             callback: function ($$v) {
-              _vm.$set(_vm.instance, "activeTab", $$v);
+              _vm.activeTabName = $$v;
             },
-            expression: "instance.activeTab",
+            expression: "activeTabName",
           },
         },
         [
@@ -60561,14 +60662,13 @@ var __vue_render__$c = function () {
                       {
                         name: "show",
                         rawName: "v-show",
-                        value:
-                          tab.isVisible && index === _vm.instance.activeTab,
+                        value: tab.isVisible && tab.name === _vm.activeTabName,
                         expression:
-                          "tab.isVisible && index === instance.activeTab",
+                          "tab.isVisible && tab.name === activeTabName",
                       },
                     ],
-                    key: index,
-                    attrs: { value: index, parent: tab },
+                    key: tab.name,
+                    attrs: { value: tab.name, parent: tab },
                   },
                   "zd-tab-item",
                   {
@@ -60597,11 +60697,11 @@ __vue_render__$c._withStripped = true;
   /* style */
   const __vue_inject_styles__$c = function (inject) {
     if (!inject) return
-    inject("data-v-0b3bcddc_0", { source: ".zd-tabs[data-v-0b3bcddc] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-0b3bcddc]  .v-tabs-bar,\n.zd-tabs[data-v-0b3bcddc]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-0b3bcddc]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-0b3bcddc]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-0b3bcddc]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-0b3bcddc]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-0b3bcddc]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-0b3bcddc]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-0b3bcddc]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-0b3bcddc]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-0b3bcddc]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-0b3bcddc]  .v-tabs-items {\n  flex-grow: 1;\n  overflow-y: auto;\n}\n.zd-tabs[data-v-0b3bcddc]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
+    inject("data-v-4384d0b6_0", { source: ".zd-tabs[data-v-4384d0b6] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-4384d0b6]  .v-tabs-bar,\n.zd-tabs[data-v-4384d0b6]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-4384d0b6]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-4384d0b6]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-4384d0b6]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-4384d0b6]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-4384d0b6]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-4384d0b6]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-4384d0b6]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-4384d0b6]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-4384d0b6]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-4384d0b6]  .v-tabs-items {\n  flex-grow: 1;\n  overflow-y: auto;\n}\n.zd-tabs[data-v-4384d0b6]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}\n.zd-tabs-sortable-drop-indicator[data-v-4384d0b6] {\n  display: inline-block;\n  position: relative;\n  height: 100%;\n  width: 0;\n  z-index: 1;\n}\n.zd-tabs-sortable-drop-indicator[data-v-4384d0b6]::after {\n  content: \"\";\n  width: 3px;\n  background-color: var(--v-primary-base);\n  height: 100%;\n  position: absolute;\n  opacity: 0.75;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$c = "data-v-0b3bcddc";
+  const __vue_scope_id__$c = "data-v-4384d0b6";
   /* module identifier */
   const __vue_module_identifier__$c = undefined;
   /* functional template */
@@ -60629,12 +60729,40 @@ __vue_render__$c._withStripped = true;
  * Tabs component
  */
 let ZdTab = class ZdTab extends ZdComponent$1 {
+    constructor() {
+        super(...arguments);
+        this.isDragging = false;
+    }
     clickTab(event) {
         this.$emit('click', event);
     }
     keydown(event) {
         this.$emit('keydown', event);
     }
+    get sortable() {
+        var _a;
+        return (_a = this.instance.parent) === null || _a === void 0 ? void 0 : _a.sortable;
+    }
+    handleDragStart(event) {
+        if (!this.sortable) {
+            event.preventDefault();
+            return;
+        }
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            // Compatibilidade Firefox
+            event.dataTransfer.setData('text/plain', '');
+            const tabsInstance = this.instance.parent;
+            const sourceIndex = tabsInstance.tabs.findIndex((tab) => tab.name === this.value);
+            event.dataTransfer.setData(`application/x-zd-tabs-owner-${tabsInstance.name.toLowerCase()}`, '');
+            event.dataTransfer.setData('application/x-zd-tab-index', String(sourceIndex));
+        }
+        this.isDragging = true;
+        event.stopPropagation();
+    }
+    handleDragEnd() {
+        this.isDragging = false;
+    }
 };
 __decorate([
     PropWatch({ type: Boolean, default: false }),
@@ -60647,11 +60775,11 @@ __decorate([
 __decorate([
     PropWatch({ type: String }),
     __metadata("design:type", String)
-], ZdTab.prototype, "tabTitle", void 0);
+], ZdTab.prototype, "value", void 0);
 __decorate([
     PropWatch({ type: String }),
     __metadata("design:type", String)
-], ZdTab.prototype, "tabName", void 0);
+], ZdTab.prototype, "tabTitle", void 0);
 ZdTab = __decorate([
     Component$1
 ], ZdTab);
@@ -60676,15 +60804,23 @@ var __vue_render__$b = function () {
           expression: "isVisible",
         },
       ],
-      key: _vm.index,
-      class: ["zd-tabs-tab", _vm.cssClass],
+      key: _vm.value,
+      class: [
+        "zd-tabs-tab",
+        _vm.cssClass,
+        {
+          "zd-tabs-tab-sortable": _vm.sortable,
+        },
+      ],
       style: _vm.cssStyle,
       attrs: {
         id: _vm.instance.name,
-        name: _vm.tabName,
+        name: _vm.instance.name,
+        href: "#" + _vm.value,
         disabled: _vm.disabled,
         dark: _vm.dark,
         light: _vm.light,
+        draggable: _vm.sortable,
       },
       on: {
         click: function ($event) {
@@ -60693,6 +60829,8 @@ var __vue_render__$b = function () {
         keydown: function ($event) {
           return _vm.keydown($event)
         },
+        dragstart: _vm.handleDragStart,
+        dragend: _vm.handleDragEnd,
       },
     },
     [
@@ -60708,11 +60846,11 @@ __vue_render__$b._withStripped = true;
   /* style */
   const __vue_inject_styles__$b = function (inject) {
     if (!inject) return
-    inject("data-v-c2f8df1e_0", { source: ".zd-tabs-tab[data-v-c2f8df1e], .zd-tabs-tab[data-v-c2f8df1e]:before {\n  border-radius: var(--border) var(--border) 0 0;\n}\n.zd-tabs-tab[data-v-c2f8df1e] {\n  height: auto;\n  min-width: calc(2 * var(--spacing-4));\n  align-items: flex-end;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n.zd-tabs-tab-text[data-v-c2f8df1e] {\n  text-transform: none;\n  font-size: var(--zd-font-body1-size);\n  line-height: 15px;\n  margin-bottom: 1px;\n}", map: undefined, media: undefined });
+    inject("data-v-02f9811a_0", { source: "@charset \"UTF-8\";\n.zd-tabs-tab[data-v-02f9811a], .zd-tabs-tab[data-v-02f9811a]:before {\n  border-radius: var(--border) var(--border) 0 0;\n}\n.zd-tabs-tab[data-v-02f9811a] {\n  height: auto;\n  min-width: calc(2 * var(--spacing-4));\n  align-items: flex-end;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n.zd-tabs-tab-text[data-v-02f9811a] {\n  text-transform: none;\n  font-size: var(--zd-font-body1-size);\n  line-height: 15px;\n  margin-bottom: 1px;\n}\n.zd-tabs-tab-sortable[data-v-02f9811a]::after {\n  content: \"⋮\";\n  position: absolute;\n  left: 1px;\n  width: 10px;\n  cursor: grab;\n  align-self: center;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$b = "data-v-c2f8df1e";
+  const __vue_scope_id__$b = "data-v-02f9811a";
   /* module identifier */
   const __vue_module_identifier__$b = undefined;
   /* functional template */
@@ -60742,9 +60880,9 @@ __vue_render__$b._withStripped = true;
 let ZdTabItem = class ZdTabItem extends ZdComponentRender$1 {
 };
 __decorate([
-    PropWatch({ type: Number }),
-    __metadata("design:type", Number)
-], ZdTabItem.prototype, "index", void 0);
+    PropWatch({ type: String }),
+    __metadata("design:type", String)
+], ZdTabItem.prototype, "value", void 0);
 __decorate([
     PropWatch({ type: Boolean }),
     __metadata("design:type", Boolean)
@@ -60773,12 +60911,12 @@ var __vue_render__$a = function () {
           expression: "isVisible",
         },
       ],
-      key: _vm.index,
+      key: _vm.value,
       staticClass: "zd-tabs-tab-item",
       style: _vm.instance.cssStyle,
       attrs: {
         eager: !_vm.lazyLoad,
-        value: _vm.index,
+        value: _vm.value,
         dark: _vm.dark,
         light: _vm.light,
       },
@@ -60814,11 +60952,11 @@ __vue_render__$a._withStripped = true;
   /* style */
   const __vue_inject_styles__$a = function (inject) {
     if (!inject) return
-    inject("data-v-30d72a92_0", { source: ".zd-tabs-tab-item[data-v-30d72a92] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-30d72a92] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-30d72a92] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-30d72a92] {\n  height: 100%;\n}", map: undefined, media: undefined });
+    inject("data-v-c3819be0_0", { source: ".zd-tabs-tab-item[data-v-c3819be0] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-c3819be0] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-c3819be0] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-c3819be0] {\n  height: 100%;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$a = "data-v-30d72a92";
+  const __vue_scope_id__$a = "data-v-c3819be0";
   /* module identifier */
   const __vue_module_identifier__$a = undefined;
   /* functional template */