@zeedhi/vuetify 3.2.0 → 3.3.0

package/dist/zd-vuetify.mjs

@@ -1316,7 +1316,7 @@ function useCreateInstance(props, ctx, ObjectClass, propsDefs = {}, checkParentT
         explicitlyPassedProps[key] = props[key];
       }
     }
-    explicitlyPassedProps.instanceObj = void 0;
+    delete explicitlyPassedProps.instanceObject;
     const events = getInstanceEvents([props.events, props.instanceObject.events]);
     const factoredEvents = Event$1.factory(events);
     instanceObj = Object.assign(props.instanceObject, ctx.attrs, explicitlyPassedProps, {
@@ -1340,17 +1340,20 @@ function useCreateInstance(props, ctx, ObjectClass, propsDefs = {}, checkParentT
     });
   }
   const instance = reactive(instanceObj);
-  Object.keys(props).forEach((key) => {
-    if (!(key in instance)) return;
-    if (typeof props[key] === "function") return;
-    if (propsDefs[key] && propsDefs[key].watch === false) return;
-    watch(
-      () => props[key],
-      (value) => {
-        instance[key] = value;
-      }
-    );
-  });
+  if (!createdFromObject) {
+    Object.keys(props).forEach((key) => {
+      var _a;
+      if (!(key in instance)) return;
+      if (typeof props[key] === "function") return;
+      if (((_a = propsDefs[key]) == null ? void 0 : _a.watch) === false) return;
+      watch(
+        () => props[key],
+        (value) => {
+          instance[key] = value;
+        }
+      );
+    });
+  }
   addChild({ instance, props });
   if (!createdFromObject) instance.onCreated();
   useComponentLifeCycles(instance, createdFromObject, root2);
@@ -1514,7 +1517,7 @@ const alertComponent = defineComponent({
   }
 });
 const _hoisted_1$F = { class: "zd-alert-wrapper" };
-const _hoisted_2$l = ["innerHTML"];
+const _hoisted_2$m = ["innerHTML"];
 function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_btn = resolveComponent("v-btn");
   const _component_v_snackbar = resolveComponent("v-snackbar");
@@ -1555,7 +1558,7 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
         default: withCtx(() => [
           createElementVNode("span", {
             innerHTML: _ctx.$sanitize(_ctx.$t(alert.text))
-          }, null, 8, _hoisted_2$l),
+          }, null, 8, _hoisted_2$m),
           (openBlock(true), createElementBlock(Fragment, null, renderList(alert.buttonsSlot, (btn, buttonIndex) => {
             return openBlock(), createBlock(resolveDynamicComponent(btn.component), mergeProps({
               class: "zd-alert-buttons",
@@ -4165,8 +4168,8 @@ const carouselComponent = defineComponent({
   }
 });
 const _hoisted_1$C = ["id"];
-const _hoisted_2$k = { class: "prev-button" };
-const _hoisted_3$9 = { class: "next-button" };
+const _hoisted_2$l = { class: "prev-button" };
+const _hoisted_3$a = { class: "next-button" };
 const _hoisted_4$5 = {
   key: 2,
   class: "progress-bar"
@@ -4230,7 +4233,7 @@ function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
       addons: withCtx(() => [
         createVNode(_component_Navigation, null, {
           prev: withCtx(() => [
-            withDirectives(createElementVNode("div", _hoisted_2$k, [
+            withDirectives(createElementVNode("div", _hoisted_2$l, [
               renderSlot(_ctx.$slots, "prevButton", {}, () => [
                 (openBlock(), createBlock(resolveDynamicComponent(_ctx.instance.prevButton.component), normalizeProps(guardReactiveProps(_ctx.instance.prevButton)), null, 16))
               ])
@@ -4239,7 +4242,7 @@ function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           ]),
           next: withCtx(() => [
-            withDirectives(createElementVNode("div", _hoisted_3$9, [
+            withDirectives(createElementVNode("div", _hoisted_3$a, [
               renderSlot(_ctx.$slots, "nextButton", {}, () => [
                 (openBlock(), createBlock(resolveDynamicComponent(_ctx.instance.nextButton.component), normalizeProps(guardReactiveProps(_ctx.instance.nextButton)), null, 16))
               ])
@@ -4505,7 +4508,7 @@ const _sfc_main$u = defineComponent({
   }
 });
 const _hoisted_1$B = ["id"];
-const _hoisted_2$j = { class: "zd-checkbox-label" };
+const _hoisted_2$k = { class: "zd-checkbox-label" };
 function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
   var _a;
   const _component_v_checkbox = resolveComponent("v-checkbox");
@@ -4520,7 +4523,7 @@ function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
       }
     ])
   }, [
-    createElementVNode("div", _hoisted_2$j, toDisplayString(_ctx.$t(_ctx.instance.label)), 1),
+    createElementVNode("div", _hoisted_2$k, toDisplayString(_ctx.$t(_ctx.instance.label)), 1),
     createElementVNode("div", {
       class: normalizeClass({
         "zd-checkbox-horizontal": !_ctx.instance.vertical,
@@ -6580,12 +6583,12 @@ const codeViewerComponent = defineComponent({
   }
 });
 const _hoisted_1$z = ["id"];
-const _hoisted_2$i = {
+const _hoisted_2$j = {
   key: 0,
   class: "zd-code-viewer-line-numbers",
   "aria-hidden": "true"
 };
-const _hoisted_3$8 = { class: "zd-code-viewer-code" };
+const _hoisted_3$9 = { class: "zd-code-viewer-code" };
 const _hoisted_4$4 = ["innerHTML"];
 const _hoisted_5$4 = { class: "zd-code-viewer-clipboard-button" };
 function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
@@ -6615,7 +6618,7 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("div", {
       class: normalizeClass(["zd-code-viewer-container", { "line-numbers": _ctx.instance.showLineNumbers }])
     }, [
-      _ctx.instance.showLineNumbers ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
+      _ctx.instance.showLineNumbers ? (openBlock(), createElementBlock("div", _hoisted_2$j, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.lineNumbersCount, (line) => {
           return openBlock(), createElementBlock("div", {
             class: "zd-code-viewer-line-number token comment",
@@ -6623,7 +6626,7 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
           }, toDisplayString(line), 1);
         }), 128))
       ])) : createCommentVNode("", true),
-      createElementVNode("div", _hoisted_3$8, [
+      createElementVNode("div", _hoisted_3$9, [
         createElementVNode("pre", {
           innerHTML: _ctx.$sanitize(_ctx.instance.getHighlightedCode()),
           class: normalizeClass(`language-${_ctx.instance.language}`),
@@ -8484,12 +8487,12 @@ const _hoisted_1$y = {
   key: 0,
   class: "zd-footer-slot-left"
 };
-const _hoisted_2$h = {
+const _hoisted_2$i = {
   key: 1,
   class: "zd-footer-slot-center",
   ref: "centerSlot"
 };
-const _hoisted_3$7 = {
+const _hoisted_3$8 = {
   key: 2,
   class: "zd-footer-slot-right"
 };
@@ -8538,7 +8541,7 @@ function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
             }), 128)) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "leftSlot")
           ])) : createCommentVNode("", true),
-          _ctx.instance.centerSlot.length || !!_ctx.$slots.centerSlot ? (openBlock(), createElementBlock("span", _hoisted_2$h, [
+          _ctx.instance.centerSlot.length || !!_ctx.$slots.centerSlot ? (openBlock(), createElementBlock("span", _hoisted_2$i, [
             !_ctx.$slots.centerSlot ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.instance.centerSlot, (child) => {
               return openBlock(), createBlock(resolveDynamicComponent(child.component), mergeProps({ ref_for: true }, child, {
                 key: child.name,
@@ -8547,7 +8550,7 @@ function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
             }), 128)) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "centerSlot")
           ], 512)) : createCommentVNode("", true),
-          _ctx.instance.rightSlot.length || !!_ctx.$slots.rightSlot ? (openBlock(), createElementBlock("span", _hoisted_3$7, [
+          _ctx.instance.rightSlot.length || !!_ctx.$slots.rightSlot ? (openBlock(), createElementBlock("span", _hoisted_3$8, [
             !_ctx.$slots.rightSlot ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.instance.rightSlot, (child) => {
               return openBlock(), createBlock(resolveDynamicComponent(child.component), mergeProps({ ref_for: true }, child, {
                 key: child.name,
@@ -12488,7 +12491,7 @@ const gridEditableComponent = defineComponent({
   }
 });
 const _hoisted_1$w = ["colspan"];
-const _hoisted_2$g = ["colspan"];
+const _hoisted_2$h = ["colspan"];
 function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_grid_toolbar = resolveComponent("zd-grid-toolbar");
   const _component_zd_grid_header_row = resolveComponent("zd-grid-header-row");
@@ -12609,7 +12612,7 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("td", {
             colspan: headers.length,
             style: normalizeStyle(`padding-top:${_ctx.scrollData.endHeight}px`)
-          }, null, 12, _hoisted_2$g)
+          }, null, 12, _hoisted_2$h)
         ])
       ]),
       key: "1"
@@ -12786,13 +12789,13 @@ const _sfc_main$s = defineComponent({
   }
 });
 const _hoisted_1$v = ["tabindex"];
-const _hoisted_2$f = {
+const _hoisted_2$g = {
   key: 0,
   class: /* @__PURE__ */ normalizeClass([
     "zd-grid-editable__cell-content"
   ])
 };
-const _hoisted_3$6 = {
+const _hoisted_3$7 = {
   key: 1,
   class: "zd-grid__edit-icon"
 };
@@ -12840,13 +12843,13 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
     onDblclick: _cache[6] || (_cache[6] = (...args) => _ctx.dblclick && _ctx.dblclick(...args))
   }, [
     renderSlot(_ctx.$slots, "prepend"),
-    _ctx.column.type !== "action" ? (openBlock(), createElementBlock("span", _hoisted_2$f, [
+    _ctx.column.type !== "action" ? (openBlock(), createElementBlock("span", _hoisted_2$g, [
       _ctx.column.loading ? (openBlock(), createBlock(_component_v_skeleton_loader, {
         key: 0,
         loading: "",
         type: "text"
       })) : createCommentVNode("", true),
-      _ctx.editable && _ctx.edited ? (openBlock(), createElementBlock("span", _hoisted_3$6, [
+      _ctx.editable && _ctx.edited ? (openBlock(), createElementBlock("span", _hoisted_3$7, [
         _ctx.valid ? (openBlock(), createBlock(_component_v_icon, {
           key: 0,
           color: "primary"
@@ -13317,7 +13320,7 @@ function useGridInstance({
   };
 }
 const _hoisted_1$u = ["colspan"];
-const _hoisted_2$e = ["colspan"];
+const _hoisted_2$f = ["colspan"];
 function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_grid_toolbar = resolveComponent("zd-grid-toolbar");
   const _component_zd_grid_header_row = resolveComponent("zd-grid-header-row");
@@ -13437,7 +13440,7 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("td", {
             colspan: headers.length,
             style: normalizeStyle(`padding-top:${_ctx.scrollData.endHeight}px`)
-          }, null, 12, _hoisted_2$e)
+          }, null, 12, _hoisted_2$f)
         ])
       ]),
       key: "1"
@@ -14429,7 +14432,7 @@ const _sfc_main$f = defineComponent({
   }
 });
 const _hoisted_1$m = ["id"];
-const _hoisted_2$d = { class: "zd-grid__toolbar-content" };
+const _hoisted_2$e = { class: "zd-grid__toolbar-content" };
 function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.instance.toolbarSlot.length || _ctx.hasDefaultSlot ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -14437,7 +14440,7 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "header",
     class: "zd-grid__toolbar"
   }, [
-    createElementVNode("div", _hoisted_2$d, [
+    createElementVNode("div", _hoisted_2$e, [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.toolbarSlot, (child) => {
         return openBlock(), createBlock(resolveDynamicComponent(child.component), mergeProps({
           key: child.name,
@@ -14541,12 +14544,12 @@ const _hoisted_1$l = {
   key: 0,
   class: "zd-header-slot-left"
 };
-const _hoisted_2$c = {
+const _hoisted_2$d = {
   key: 1,
   class: "zd-header-slot-center",
   ref: "centerSlot"
 };
-const _hoisted_3$5 = {
+const _hoisted_3$6 = {
   key: 2,
   class: "zd-header-slot-right"
 };
@@ -14601,7 +14604,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
             }), 128)) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "leftSlot")
           ])) : createCommentVNode("", true),
-          _ctx.instance.centerSlot.length || !!_ctx.$slots.centerSlot ? (openBlock(), createElementBlock("span", _hoisted_2$c, [
+          _ctx.instance.centerSlot.length || !!_ctx.$slots.centerSlot ? (openBlock(), createElementBlock("span", _hoisted_2$d, [
             !_ctx.$slots.centerSlot ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.instance.centerSlot, (child, index2) => {
               return openBlock(), createElementBlock("span", {
                 key: child.name,
@@ -14612,7 +14615,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
             }), 128)) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "centerSlot")
           ], 512)) : createCommentVNode("", true),
-          _ctx.instance.rightSlot.length || !!_ctx.$slots.rightSlot ? (openBlock(), createElementBlock("span", _hoisted_3$5, [
+          _ctx.instance.rightSlot.length || !!_ctx.$slots.rightSlot ? (openBlock(), createElementBlock("span", _hoisted_3$6, [
             !_ctx.$slots.rightSlot ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.instance.rightSlot, (child, index2) => {
               return openBlock(), createElementBlock("span", {
                 key: child.name,
@@ -14989,11 +14992,11 @@ const iterableComponentRender = defineComponent({
   }
 });
 const _hoisted_1$j = ["id"];
-const _hoisted_2$b = {
+const _hoisted_2$c = {
   key: 0,
   class: "zd-iterable-toolbar"
 };
-const _hoisted_3$4 = { class: "zd-iterable-toolbar-slot" };
+const _hoisted_3$5 = { class: "zd-iterable-toolbar-slot" };
 const _hoisted_4$2 = { class: "zd-iterable-content" };
 const _hoisted_5$2 = { class: "zd-display-flex zd-flex-wrap" };
 const _hoisted_6$2 = {
@@ -15021,8 +15024,8 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
       ..._ctx.$styleObject(_ctx.instance.cssStyle)
     })
   }, [
-    _ctx.instance.toolbarSlot.length || !!_ctx.$slots.toolbarSlot ? (openBlock(), createElementBlock("div", _hoisted_2$b, [
-      createElementVNode("div", _hoisted_3$4, [
+    _ctx.instance.toolbarSlot.length || !!_ctx.$slots.toolbarSlot ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
+      createElementVNode("div", _hoisted_3$5, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.toolbarSlot, (child) => {
           return openBlock(), createBlock(resolveDynamicComponent(child.component), mergeProps({
             key: child.name,
@@ -15109,7 +15112,7 @@ const _sfc_main$d = defineComponent({
   }
 });
 const _hoisted_1$i = ["id"];
-const _hoisted_2$a = {
+const _hoisted_2$b = {
   key: 1,
   class: "error--text"
 };
@@ -15125,7 +15128,7 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
           parent: _ctx.instance
         }, { ref_for: true }, child), null, 16, ["parent"]);
       }), 128)) : createCommentVNode("", true),
-      _ctx.instance.errorSlot.length === 0 && !_ctx.hasErrorSlot ? (openBlock(), createElementBlock("span", _hoisted_2$a, toDisplayString(_ctx.$t(_ctx.instance.datasource.error)), 1)) : createCommentVNode("", true)
+      _ctx.instance.errorSlot.length === 0 && !_ctx.hasErrorSlot ? (openBlock(), createElementBlock("span", _hoisted_2$b, toDisplayString(_ctx.$t(_ctx.instance.datasource.error)), 1)) : createCommentVNode("", true)
     ], 64)) : !_ctx.instance.datasource.data.length ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
       _ctx.instance.datasource.search ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
         renderSlot(_ctx.$slots, "noResultSlot"),
@@ -16051,7 +16054,7 @@ const _hoisted_1$g = {
   key: 0,
   class: "v-list-item__icon"
 };
-const _hoisted_2$9 = {
+const _hoisted_2$a = {
   key: 0,
   class: "v-list-item__icon"
 };
@@ -16086,7 +16089,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
       ])) : createCommentVNode("", true)
     ]),
     append: withCtx(() => [
-      _ctx.instance.rightField || _ctx.instance.appendIcon ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
+      _ctx.instance.rightField || _ctx.instance.appendIcon ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
         _ctx.instance.rightField ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.instance.rightField.component), mergeProps({ key: 0 }, _ctx.instance.rightField, { parent: _ctx.instance }), null, 16, ["parent"])) : _ctx.instance.appendIcon ? (openBlock(), createBlock(_component_v_icon, { key: 1 }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(_ctx.$getIcon(_ctx.instance.appendIcon)), 1)
@@ -16161,11 +16164,11 @@ const _hoisted_1$f = {
   ref: "root",
   class: "test"
 };
-const _hoisted_2$8 = {
+const _hoisted_2$9 = {
   key: 0,
   class: "center-div"
 };
-const _hoisted_3$3 = ["innerHTML"];
+const _hoisted_3$4 = ["innerHTML"];
 function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_progress_circular = resolveComponent("v-progress-circular");
   const _component_v_img = resolveComponent("v-img");
@@ -16183,7 +16186,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
       theme: _ctx.loading.theme
     }, {
       default: withCtx(() => [
-        _ctx.loading.isVisible ? (openBlock(), createElementBlock("div", _hoisted_2$8, [
+        _ctx.loading.isVisible ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
           !_ctx.image ? (openBlock(), createBlock(_component_v_progress_circular, {
             key: 0,
             indeterminate: "",
@@ -16200,7 +16203,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
             innerHTML: _ctx.$sanitize(_ctx.$t(_ctx.loading.text)),
             class: "zd-loading__text",
             style: normalizeStyle("color: " + _ctx.textColor + ";")
-          }, null, 12, _hoisted_3$3)
+          }, null, 12, _hoisted_3$4)
         ])) : createCommentVNode("", true)
       ]),
       _: 1
@@ -16273,8 +16276,8 @@ const loginComponent = defineComponent({
   }
 });
 const _hoisted_1$e = ["id", "name"];
-const _hoisted_2$7 = { class: "zd-login-toolbar" };
-const _hoisted_3$2 = ["src"];
+const _hoisted_2$8 = { class: "zd-login-toolbar" };
+const _hoisted_3$3 = ["src"];
 const _hoisted_4$1 = { class: "zd-login-message" };
 const _hoisted_5$1 = {
   key: 0,
@@ -16319,11 +16322,11 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
         light: _ctx.instance.light
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_2$7, [
+          createElementVNode("div", _hoisted_2$8, [
             createElementVNode("img", {
               class: "zd-login-logo",
               src: _ctx.instance.logo
-            }, null, 8, _hoisted_3$2),
+            }, null, 8, _hoisted_3$3),
             createElementVNode("div", _hoisted_4$1, toDisplayString(_ctx.$t(_ctx.instance.logoMessage)), 1)
           ]),
           createVNode(_component_v_form, null, {
@@ -16813,7 +16816,7 @@ const menuComponent = defineComponent({
   }
 });
 const _hoisted_1$c = ["id"];
-const _hoisted_2$6 = {
+const _hoisted_2$7 = {
   key: 0,
   class: "zd-menu-top-slot"
 };
@@ -16872,7 +16875,7 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
           theme: _ctx.menuTheme
         }, {
           default: withCtx(() => [
-            _ctx.instance.topSlot.length || _ctx.instance.showSearch || !!_ctx.$slots.topSlot ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2$6, [
+            _ctx.instance.topSlot.length || _ctx.instance.showSearch || !!_ctx.$slots.topSlot ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2$7, [
               _ctx.instance.showSearch ? (openBlock(), createBlock(_component_zd_text_input, normalizeProps(mergeProps({ key: 0 }, _ctx.searchInputProps)), null, 16)) : createCommentVNode("", true),
               !_ctx.$slots.topSlot ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.instance.topSlot, (item, i) => {
                 return openBlock(), createBlock(resolveDynamicComponent(item.component), mergeProps({
@@ -18695,7 +18698,7 @@ const selectMultipleComponent = defineComponent({
   }
 });
 const _hoisted_1$a = { class: "chip-text" };
-const _hoisted_2$5 = {
+const _hoisted_2$6 = {
   key: 1,
   class: "more-items grey--text caption"
 };
@@ -18843,7 +18846,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           _: 2
         }, 1032, ["size", "disabled", "density", "onClick:close"])) : createCommentVNode("", true),
-        _ctx.isMoreVisible(index2) ? (openBlock(), createElementBlock("span", _hoisted_2$5, toDisplayString(_ctx.moreItemsText), 1)) : createCommentVNode("", true)
+        _ctx.isMoreVisible(index2) ? (openBlock(), createElementBlock("span", _hoisted_2$6, toDisplayString(_ctx.moreItemsText), 1)) : createCommentVNode("", true)
       ]),
       "append-item": withCtx(() => [
         _ctx.instance.itemAfterSlot.length || _ctx.hasItemAfterSlot ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -19539,7 +19542,7 @@ const _sfc_main$5 = defineComponent({
   }
 });
 const _hoisted_1$9 = ["id", "name"];
-const _hoisted_2$4 = {
+const _hoisted_2$5 = {
   class: "zd-svg-map__container",
   ref: "container"
 };
@@ -19573,7 +19576,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     onMouseenter: _cache[1] || (_cache[1] = ($event) => _ctx.mouseenter($event)),
     onMouseleave: _cache[2] || (_cache[2] = ($event) => _ctx.mouseleave($event))
   }, [
-    createElementVNode("div", _hoisted_2$4, null, 512),
+    createElementVNode("div", _hoisted_2$5, null, 512),
     _ctx.instance.tooltipData && _ctx.tooltipContent ? withDirectives((openBlock(), createBlock(_component_v_card, {
       key: 0,
       class: "zd-svg-map__tooltip",
@@ -19715,8 +19718,8 @@ const tableComponent = defineComponent({
   }
 });
 const _hoisted_1$8 = ["id"];
-const _hoisted_2$3 = { key: 1 };
-const _hoisted_3$1 = ["innerHTML"];
+const _hoisted_2$4 = { key: 1 };
+const _hoisted_3$2 = ["innerHTML"];
 function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: "root",
@@ -19742,7 +19745,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         class: normalizeClass(["zd-table-caption", `text-${_ctx.instance.caption.align}`])
       }, toDisplayString(_ctx.$t(_ctx.instance.caption.label)), 3)) : createCommentVNode("", true),
-      _ctx.instance.showTableHead ? (openBlock(), createElementBlock("thead", _hoisted_2$3, [
+      _ctx.instance.showTableHead ? (openBlock(), createElementBlock("thead", _hoisted_2$4, [
         createElementVNode("tr", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.columns, (column, index2) => {
             return openBlock(), createElementBlock(Fragment, null, [
@@ -19766,7 +19769,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
                   key: index2,
                   class: normalizeClass([`text-${column.align}`]),
                   style: normalizeStyle(`min-width: ${column.minWidth}; max-width: ${column.maxWidth};`)
-                }, null, 14, _hoisted_3$1)) : createCommentVNode("", true)
+                }, null, 14, _hoisted_3$2)) : createCommentVNode("", true)
               ], 64);
             }), 256))
           ]);
@@ -19787,9 +19790,6 @@ const ZdTabProps$1 = buildProps({
   tabTitle: {
     type: [String]
   },
-  tabName: {
-    type: [String]
-  },
   color: {
     type: [String],
     default: "primary"
@@ -19836,15 +19836,41 @@ const tabComponent = defineComponent({
     const { instance, root: root2 } = useCreateInstance(props, ctx, Tab, ZdTabProps$1);
     const { density } = useDensity({ instance });
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
+    const isDragging = ref(false);
     const clickTab = (event) => {
       ctx.emit("click", event);
     };
     const keydown = (event) => {
       ctx.emit("keydown", event);
     };
+    const sortable = computed(() => {
+      var _a;
+      return (_a = instance.parent) == null ? void 0 : _a.sortable;
+    });
+    const handleDragStart = (event) => {
+      if (!sortable.value) {
+        event.preventDefault();
+        return;
+      }
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", "");
+        const tabsInstance = instance.parent;
+        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 = () => {
+      isDragging.value = false;
+    };
     return {
       instance,
       root: root2,
+      density,
+      sortable,
       click,
       focus,
       blur,
@@ -19853,7 +19879,8 @@ const tabComponent = defineComponent({
       // methods
       clickTab,
       keydown,
-      density
+      handleDragStart,
+      handleDragEnd
     };
   }
 });
@@ -19863,9 +19890,11 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createBlock(_component_v_tab, {
     id: _ctx.instance.name,
     ref: "root",
-    class: normalizeClass(["zd-tabs-tab", _ctx.instance.cssClass]),
+    class: normalizeClass(["zd-tabs-tab", _ctx.instance.cssClass, {
+      "zd-tabs-tab-sortable": _ctx.sortable
+    }]),
     style: normalizeStyle(_ctx.$styleObject(_ctx.instance.cssStyle)),
-    name: _ctx.instance.tabName,
+    name: _ctx.instance.tabTitle,
     disabled: _ctx.instance.disabled,
     theme: _ctx.instance.theme,
     color: _ctx.instance.color,
@@ -19875,25 +19904,28 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     iconName: _ctx.instance.iconName,
     rounded: _ctx.instance.rounded,
     "selected-class": "v-tab--selected " + _ctx.instance.selectedClass,
-    value: _ctx.instance.value,
+    value: _ctx.instance.name || _ctx.instance.value,
     variant: _ctx.instance.variant,
     width: _ctx.instance.width,
+    draggable: _ctx.sortable,
     onClick: _cache[0] || (_cache[0] = ($event) => _ctx.clickTab($event)),
-    onKeydown: _cache[1] || (_cache[1] = ($event) => _ctx.keydown($event))
+    onKeydown: _cache[1] || (_cache[1] = ($event) => _ctx.keydown($event)),
+    onDragstart: _ctx.handleDragStart,
+    onDragend: _ctx.handleDragEnd
   }, {
     default: withCtx(() => [
       createElementVNode("span", _hoisted_1$7, toDisplayString(_ctx.$t(_ctx.instance.tabTitle)), 1)
     ]),
     _: 1
-  }, 8, ["id", "class", "style", "name", "disabled", "theme", "color", "density", "direction", "fixed", "iconName", "rounded", "selected-class", "value", "variant", "width"])), [
+  }, 8, ["id", "class", "style", "name", "disabled", "theme", "color", "density", "direction", "fixed", "iconName", "rounded", "selected-class", "value", "variant", "width", "draggable", "onDragstart", "onDragend"])), [
     [vShow, _ctx.instance.isVisible]
   ]);
 }
 const ZdTab = /* @__PURE__ */ _export_sfc(tabComponent, [["render", _sfc_render$e]]);
 const ZdTabItemProps$1 = buildProps({
   ...ZdComponentRenderProps,
-  index: {
-    type: [Number]
+  value: {
+    type: [String]
   },
   lazyLoad: {
     type: [Boolean]
@@ -19908,7 +19940,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_tabs_window_item = resolveComponent("v-tabs-window-item");
   return withDirectives((openBlock(), createBlock(_component_v_tabs_window_item, {
     class: "zd-tabs-tab-item",
-    value: _ctx.index,
+    value: _ctx.value,
     transition: false,
     "reverse-transition": false
   }, {
@@ -19970,6 +20002,10 @@ const ZdTabsProps$1 = buildProps({
   },
   max: {
     type: [Number, String]
+  },
+  sortable: {
+    type: [Boolean, String],
+    default: false
   }
 });
 const tabsComponent = defineComponent({
@@ -19978,22 +20014,93 @@ const tabsComponent = defineComponent({
   setup(props, ctx) {
     const { instance, root: root2 } = useCreateInstance(props, ctx, Tabs, ZdTabsProps$1);
     const { density } = useDensity({ instance });
+    const rootElement = getRootElement(root2);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
+    const isDragOver = ref(false);
+    const dragOverIndex = ref(-1);
     const change = () => {
-      const rootElement = getRootElement(root2);
-      instance.change(new Event("change"), rootElement.value);
+      const rootElement2 = getRootElement(root2);
+      instance.change(new Event("change"), rootElement2.value);
     };
     const keydown = (event, index2) => {
-      const rootElement = getRootElement(root2);
-      instance.beforeChange(event, index2, rootElement.value);
+      const rootElement2 = getRootElement(root2);
+      instance.beforeChange(event, index2, rootElement2.value);
     };
     const clickTab = (event, index2) => {
-      const rootElement = getRootElement(root2);
-      instance.beforeChange(event, index2, rootElement.value);
+      const rootElement2 = getRootElement(root2);
+      instance.beforeChange(event, index2, rootElement2.value);
+    };
+    const isTabOK = (event) => {
+      var _a;
+      return !!((_a = event.dataTransfer) == null ? void 0 : _a.types.includes(`application/x-zd-tabs-owner-${instance.name.toLowerCase()}`));
+    };
+    const getTabsBarRect = () => {
+      var _a, _b;
+      return (_b = (_a = rootElement.value) == null ? void 0 : _a.querySelector(".v-tabs")) == null ? void 0 : _b.getBoundingClientRect();
+    };
+    const handleDragOver = (event) => {
+      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, index2) => {
+        const rect = tabEl.getBoundingClientRect();
+        if (event.clientX < rect.left + rect.width / 2) {
+          targetIndex = Math.min(targetIndex, index2);
+        }
+      });
+      dragOverIndex.value = targetIndex;
+      event.stopPropagation();
+    };
+    const handleDrop = (event) => {
+      var _a;
+      event.preventDefault();
+      if (!isTabOK(event) || dragOverIndex.value === -1) return;
+      event.stopPropagation();
+      const sourceIndex = Number((_a = event.dataTransfer) == null ? void 0 : _a.getData("application/x-zd-tab-index"));
+      instance.moveTab(sourceIndex, dragOverIndex.value);
+      isDragOver.value = false;
+      dragOverIndex.value = -1;
+    };
+    const handleDragEnter = (event) => {
+      event.preventDefault();
+      if (!isTabOK(event)) {
+        isDragOver.value = false;
+        dragOverIndex.value = -1;
+        return;
+      }
+      isDragOver.value = true;
     };
+    const handleDragLeave = (event) => {
+      if (rootElement.value && event.relatedTarget && rootElement.value.contains(event.relatedTarget)) return;
+      isDragOver.value = false;
+      dragOverIndex.value = -1;
+    };
+    const activeTabName = computed({
+      get: () => {
+        var _a;
+        return (_a = instance.tabs[instance.activeTab]) == null ? void 0 : _a.name;
+      },
+      set: (name) => {
+        const index2 = instance.tabs.findIndex((tab) => tab.name === name);
+        if (index2 !== -1) instance.activeTab = index2;
+      }
+    });
     return {
       instance,
       root: root2,
+      dragOverIndex,
+      density,
+      activeTabName,
       click,
       focus,
       blur,
@@ -20002,11 +20109,22 @@ const tabsComponent = defineComponent({
       clickTab,
       keydown,
       change,
-      density
+      handleDragOver,
+      handleDrop,
+      handleDragEnter,
+      handleDragLeave
     };
   }
 });
 const _hoisted_1$6 = ["id", "name"];
+const _hoisted_2$3 = {
+  key: 0,
+  class: "zd-tabs-sortable-drop-indicator"
+};
+const _hoisted_3$1 = {
+  key: 0,
+  class: "zd-tabs-sortable-drop-indicator"
+};
 function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_tab = resolveComponent("zd-tab");
   const _component_v_tabs = resolveComponent("v-tabs");
@@ -20021,12 +20139,16 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
       height: _ctx.instance.height,
       maxHeight: _ctx.instance.maxHeight,
       minHeight: _ctx.instance.minHeight
-    })
+    }),
+    onDragenter: _cache[1] || (_cache[1] = (...args) => _ctx.handleDragEnter && _ctx.handleDragEnter(...args)),
+    onDragleave: _cache[2] || (_cache[2] = (...args) => _ctx.handleDragLeave && _ctx.handleDragLeave(...args)),
+    onDragover: _cache[3] || (_cache[3] = (...args) => _ctx.handleDragOver && _ctx.handleDragOver(...args)),
+    onDrop: _cache[4] || (_cache[4] = (...args) => _ctx.handleDrop && _ctx.handleDrop(...args))
   }, [
     createVNode(_component_v_tabs, {
-      modelValue: _ctx.instance.activeTab,
+      modelValue: _ctx.activeTabName,
       "onUpdate:modelValue": [
-        _cache[0] || (_cache[0] = ($event) => _ctx.instance.activeTab = $event),
+        _cache[0] || (_cache[0] = ($event) => _ctx.activeTabName = $event),
         _ctx.change
       ],
       "show-arrows": "",
@@ -20041,44 +20163,43 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     }, {
       default: withCtx(() => [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.tabs, (tab, index2) => {
-          return openBlock(), createBlock(_component_zd_tab, mergeProps({
+          return openBlock(), createElementBlock(Fragment, {
             key: tab.name
-          }, { ref_for: true }, {
-            ...tab,
-            name: tab.name,
-            tabName: tab.name,
-            dense: tab.dense || _ctx.instance.dense
-          }, {
-            onClick: ($event) => _ctx.clickTab($event, index2),
-            onKeydown: ($event) => _ctx.keydown($event, index2)
-          }), null, 16, ["onClick", "onKeydown"]);
-        }), 128))
+          }, [
+            _ctx.dragOverIndex === index2 ? (openBlock(), createElementBlock("span", _hoisted_2$3)) : createCommentVNode("", true),
+            createVNode(_component_zd_tab, mergeProps({ ref_for: true }, {
+              ...tab,
+              name: tab.name,
+              dense: tab.dense || _ctx.instance.dense
+            }, {
+              onClick: ($event) => _ctx.clickTab($event, index2),
+              onKeydown: ($event) => _ctx.keydown($event, index2)
+            }), null, 16, ["onClick", "onKeydown"])
+          ], 64);
+        }), 128)),
+        _ctx.dragOverIndex === _ctx.instance.tabs.length ? (openBlock(), createElementBlock("span", _hoisted_3$1)) : createCommentVNode("", true)
       ]),
       _: 1
     }, 8, ["modelValue", "onUpdate:modelValue", "theme", "color", "bg-color", "density", "direction", "disabled", "grow", "max"]),
-    createVNode(_component_v_window, {
-      modelValue: _ctx.instance.activeTab,
-      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.instance.activeTab = $event)
-    }, {
+    createVNode(_component_v_window, { "model-value": _ctx.activeTabName }, {
       default: withCtx(() => [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.tabs, (tab, index2) => {
           return withDirectives((openBlock(), createBlock(_component_zd_tab_item, mergeProps({
             key: tab.name,
-            value: index2,
+            value: tab.name,
             children: tab.children
           }, { ref_for: true }, {
-            index: index2,
             name: _ctx.instance.name + "-tab-item-" + index2,
             lazyLoad: tab.lazyLoad
           }), null, 16, ["value", "children"])), [
-            [vShow, tab.isVisible && index2 === _ctx.instance.activeTab]
+            [vShow, tab.isVisible && tab.name === _ctx.activeTabName]
           ]);
         }), 128)),
         renderSlot(_ctx.$slots, "tabItems")
       ]),
       _: 3
-    }, 8, ["modelValue"])
-  ], 14, _hoisted_1$6)), [
+    }, 8, ["model-value"])
+  ], 46, _hoisted_1$6)), [
     [vShow, _ctx.instance.isVisible]
   ]);
 }
@@ -23598,9 +23719,6 @@ const ZdTabProps = buildProps({
   tabTitle: {
     type: [String]
   },
-  tabName: {
-    type: [String]
-  },
   color: {
     type: [String],
     default: "primary"
@@ -23647,15 +23765,41 @@ defineComponent({
     const { instance, root: root2 } = useCreateInstance(props, ctx, Tab, ZdTabProps);
     const { density } = useDensity({ instance });
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
+    const isDragging = ref(false);
     const clickTab = (event) => {
       ctx.emit("click", event);
     };
     const keydown = (event) => {
       ctx.emit("keydown", event);
     };
+    const sortable = computed(() => {
+      var _a;
+      return (_a = instance.parent) == null ? void 0 : _a.sortable;
+    });
+    const handleDragStart = (event) => {
+      if (!sortable.value) {
+        event.preventDefault();
+        return;
+      }
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", "");
+        const tabsInstance = instance.parent;
+        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 = () => {
+      isDragging.value = false;
+    };
     return {
       instance,
       root: root2,
+      density,
+      sortable,
       click,
       focus,
       blur,
@@ -23664,14 +23808,15 @@ defineComponent({
       // methods
       clickTab,
       keydown,
-      density
+      handleDragStart,
+      handleDragEnd
     };
   }
 });
 const ZdTabItemProps = buildProps({
   ...ZdComponentRenderProps,
-  index: {
-    type: [Number]
+  value: {
+    type: [String]
   },
   lazyLoad: {
     type: [Boolean]
@@ -23719,6 +23864,10 @@ const ZdTabsProps = buildProps({
   },
   max: {
     type: [Number, String]
+  },
+  sortable: {
+    type: [Boolean, String],
+    default: false
   }
 });
 defineComponent({
@@ -23727,22 +23876,93 @@ defineComponent({
   setup(props, ctx) {
     const { instance, root: root2 } = useCreateInstance(props, ctx, Tabs, ZdTabsProps);
     const { density } = useDensity({ instance });
+    const rootElement = getRootElement(root2);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
+    const isDragOver = ref(false);
+    const dragOverIndex = ref(-1);
     const change = () => {
-      const rootElement = getRootElement(root2);
-      instance.change(new Event("change"), rootElement.value);
+      const rootElement2 = getRootElement(root2);
+      instance.change(new Event("change"), rootElement2.value);
     };
     const keydown = (event, index2) => {
-      const rootElement = getRootElement(root2);
-      instance.beforeChange(event, index2, rootElement.value);
+      const rootElement2 = getRootElement(root2);
+      instance.beforeChange(event, index2, rootElement2.value);
     };
     const clickTab = (event, index2) => {
-      const rootElement = getRootElement(root2);
-      instance.beforeChange(event, index2, rootElement.value);
+      const rootElement2 = getRootElement(root2);
+      instance.beforeChange(event, index2, rootElement2.value);
+    };
+    const isTabOK = (event) => {
+      var _a;
+      return !!((_a = event.dataTransfer) == null ? void 0 : _a.types.includes(`application/x-zd-tabs-owner-${instance.name.toLowerCase()}`));
+    };
+    const getTabsBarRect = () => {
+      var _a, _b;
+      return (_b = (_a = rootElement.value) == null ? void 0 : _a.querySelector(".v-tabs")) == null ? void 0 : _b.getBoundingClientRect();
+    };
+    const handleDragOver = (event) => {
+      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, index2) => {
+        const rect = tabEl.getBoundingClientRect();
+        if (event.clientX < rect.left + rect.width / 2) {
+          targetIndex = Math.min(targetIndex, index2);
+        }
+      });
+      dragOverIndex.value = targetIndex;
+      event.stopPropagation();
+    };
+    const handleDrop = (event) => {
+      var _a;
+      event.preventDefault();
+      if (!isTabOK(event) || dragOverIndex.value === -1) return;
+      event.stopPropagation();
+      const sourceIndex = Number((_a = event.dataTransfer) == null ? void 0 : _a.getData("application/x-zd-tab-index"));
+      instance.moveTab(sourceIndex, dragOverIndex.value);
+      isDragOver.value = false;
+      dragOverIndex.value = -1;
+    };
+    const handleDragEnter = (event) => {
+      event.preventDefault();
+      if (!isTabOK(event)) {
+        isDragOver.value = false;
+        dragOverIndex.value = -1;
+        return;
+      }
+      isDragOver.value = true;
+    };
+    const handleDragLeave = (event) => {
+      if (rootElement.value && event.relatedTarget && rootElement.value.contains(event.relatedTarget)) return;
+      isDragOver.value = false;
+      dragOverIndex.value = -1;
     };
+    const activeTabName = computed({
+      get: () => {
+        var _a;
+        return (_a = instance.tabs[instance.activeTab]) == null ? void 0 : _a.name;
+      },
+      set: (name) => {
+        const index2 = instance.tabs.findIndex((tab) => tab.name === name);
+        if (index2 !== -1) instance.activeTab = index2;
+      }
+    });
     return {
       instance,
       root: root2,
+      dragOverIndex,
+      density,
+      activeTabName,
       click,
       focus,
       blur,
@@ -23751,7 +23971,10 @@ defineComponent({
       clickTab,
       keydown,
       change,
-      density
+      handleDragOver,
+      handleDrop,
+      handleDragEnter,
+      handleDragLeave
     };
   }
 });