@zeedhi/vuetify 1.133.0 → 1.134.0

package/dist/zd-vuetify.umd.js

@@ -58450,7 +58450,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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)
@@ -60384,6 +60393,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       constructor() {
           super(...arguments);
           this.instanceType = common.Tabs;
+          this.isDragOver = false;
+          this.dragOverIndex = -1;
       }
       change(event) {
           this.instance.change(event, this.$el);
@@ -60402,6 +60413,77 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               });
           });
       }
+      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 }),
@@ -60427,6 +60509,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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([
       vuePropertyDecorator.Prop({ type: Array, default: () => [] }),
       __metadata("design:type", Array)
@@ -60468,6 +60554,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           _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(
@@ -60485,21 +60577,25 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               },
             },
             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)
@@ -60515,12 +60611,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                       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
                   )
@@ -60529,6 +60626,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             }),
             _vm._v(" "),
             _vm._t("tabs"),
+            _vm._v(" "),
+            _vm.dragOverIndex === _vm.instance.tabs.length
+              ? _c("span", { staticClass: "zd-tabs-sortable-drop-indicator" })
+              : _vm._e(),
           ],
           2
         ),
@@ -60542,11 +60643,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               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",
             },
           },
           [
@@ -60560,14 +60661,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                         {
                           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",
                     {
@@ -60596,11 +60696,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -60628,12 +60728,40 @@ If you're seeing "$attrs is readonly", it's caused by this`);
    * 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 }),
@@ -60646,11 +60774,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   __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([
       vuePropertyDecorator.Component
   ], ZdTab);
@@ -60675,15 +60803,23 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             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) {
@@ -60692,6 +60828,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           keydown: function ($event) {
             return _vm.keydown($event)
           },
+          dragstart: _vm.handleDragStart,
+          dragend: _vm.handleDragEnd,
         },
       },
       [
@@ -60707,11 +60845,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -60741,9 +60879,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   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)
@@ -60772,12 +60910,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             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,
         },
@@ -60813,11 +60951,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/vuetify",
-  "version": "1.133.0",
+  "version": "1.134.0",
   "description": "Zeedhi Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -51,5 +51,5 @@
     "@types/prismjs": "1.26.*",
     "@types/sortablejs": "1.15.*"
   },
-  "gitHead": "5242cfba6da1d50e921400e93d0d2f60af44c4d4"
+  "gitHead": "d3d3ba379784ff47b13effeedb0bd79a1802a306"
 }

package/types/components/zd-tabs/ZdTab.d.ts

@@ -5,8 +5,12 @@ import ZdComponent from '../zd-component/ZdComponent';
 export default class ZdTab extends ZdComponent {
     disabled?: boolean;
     index?: number;
+    value?: string;
     tabTitle?: string;
-    tabName?: string;
     clickTab(event: Event): void;
     keydown(event: Event): void;
+    isDragging: boolean;
+    get sortable(): boolean | undefined;
+    handleDragStart(event: DragEvent): void;
+    handleDragEnd(): void;
 }

package/types/components/zd-tabs/ZdTabItem.d.ts

@@ -3,6 +3,6 @@ import ZdComponentRender from '../zd-component/ZdComponentRender';
  * Tabs component
  */
 export default class ZdTabItem extends ZdComponentRender {
-    index?: number;
+    value?: string;
     lazyLoad?: boolean;
 }

package/types/components/zd-tabs/ZdTabs.d.ts

@@ -10,11 +10,22 @@ export default class ZdTabs extends ZdComponentRender {
     maxHeight?: number | string;
     fillHeight?: boolean | string;
     touchless?: boolean;
+    sortable?: boolean;
     tabs: ITab[];
     instance: Tabs;
     instanceType: typeof Tabs;
+    isDragOver: boolean;
+    dragOverIndex: number;
     change(event: Event): void;
     keydown(event: Event, index: number): void;
     clickTab(event: Event, index: number): void;
     mounted(): void;
+    isTabOK(event: DragEvent): boolean;
+    private getTabsBarRect;
+    handleDragOver(event: DragEvent): void;
+    handleDrop(event: DragEvent): void;
+    handleDragEnter(event: DragEvent): void;
+    handleDragLeave(event: DragEvent): void;
+    get activeTabName(): string;
+    set activeTabName(name: string);
 }