@zeedhi/vuetify 3.1.0 → 3.3.0

package/dist/zd-vuetify.mjs

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { Icons, AlertService, Alert, Badge, Breadcrumbs, ButtonGroup, Button, Card, Carousel as Carousel$1, Form, Input, CheckboxMultiple, Checkbox, Chip, CodeViewer, Col, CollapseCard, Container, TextInput, NumberInput, AutoNumeric, Currency, DateInput, DateRange, DialogService, Divider, Dropdown, Footer, ChildNotFoundError, Frame, FramePage, Grid, GridEditable, Toggleable, Header, Icon as Icon$1, Image, Increment, IterableComponentRender, IterableColumnsButton, IterablePageInfo, Select, IterablePageSize, IterablePagination, Search, Layout, List, ListItem, ListGroup, Loading, LoadingService, Login, LoginButton, Main, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, ModalService, ModalCloseButton, Month, Password, Progress, Radio, Row, SelectMultiple, SvgMap, Switch, Table, Tab, Tabs, Tag, Text, Textarea, Time, Tooltip, TreeGrid, Tree, initTheme } from "@zeedhi/common";
 import { Config, Event as Event$1, Mask, Utils, DateHelper, I18n, InstanceNotFoundError, FormatterParserProvider, KeyMap, Metadata, dayjs, ViewService } from "@zeedhi/core";
-import { defineComponent, h, ref, computed, onMounted, onBeforeUnmount, watchEffect, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, withModifiers, renderSlot, createCommentVNode, toDisplayString, createTextVNode, createBlock, withCtx, withDirectives, vShow, unref, resolveDynamicComponent, mergeProps, createVNode, render, useTemplateRef, getCurrentInstance, reactive, watch, inject, provide, onBeforeMount, onUnmounted, nextTick, toHandlers, createSlots, shallowReactive, toRefs, onUpdated, useId, cloneVNode, withKeys, normalizeProps, guardReactiveProps, useSlots, resolveDirective, isMemoSame } from "vue";
+import { defineComponent, h, ref, computed, onMounted, onBeforeUnmount, watchEffect, resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, withDirectives, createCommentVNode, Fragment, renderList, createBlock, normalizeStyle, withModifiers, renderSlot, toDisplayString, createTextVNode, withCtx, vShow, unref, resolveDynamicComponent, mergeProps, createVNode, render, useTemplateRef, getCurrentInstance, reactive, watch, inject, provide, onBeforeMount, onUnmounted, nextTick, toHandlers, createSlots, shallowReactive, toRefs, useId, onUpdated, cloneVNode, withKeys, normalizeProps, guardReactiveProps, useSlots, resolveDirective, isMemoSame } from "vue";
 import { useTheme, useDisplay, createVuetify } from "vuetify";
 import * as components$1 from "vuetify/components";
 import * as directives from "vuetify/directives";
@@ -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) 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}`),
@@ -7256,6 +7259,10 @@ function useTextInput$1(instance, ctx, root2) {
       (_a = rootElement.value) == null ? void 0 : _a.getElementsByTagName("input")[0].blur();
     });
   };
+  const clearInput = () => {
+    inputScope.input();
+    inputScope.change();
+  };
   const getIconClickEvents = () => {
     const events = {};
     if (instance.events.appendIconClick) {
@@ -7290,6 +7297,7 @@ function useTextInput$1(instance, ctx, root2) {
     appendOuterIconClick,
     prependOuterIconClick,
     setBlur,
+    clearInput,
     getIconClickEvents
   };
 }
@@ -7636,6 +7644,7 @@ const dateInputComponent = defineComponent({
         instance.showDatePicker = false;
       }
       instance.validate();
+      instance.change();
     };
     const helperValuesOptionClick = (helper) => {
       const value = DateHelper.getValue(helper, instance.dateFormat);
@@ -8478,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"
 };
@@ -8532,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,
@@ -8541,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,
@@ -8951,90 +8960,109 @@ function useCellSelection({
   };
 }
 /**!
- * Sortable 1.15.7
+ * Sortable 1.15.6
  * @author	RubaXa   <trash@rubaxa.org>
  * @author	owenm    <owen23355@gmail.com>
  * @license MIT
  */
-function _defineProperty(e, r, t) {
-  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e[r] = t, e;
-}
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function(n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function ownKeys(e, r) {
-  var t = Object.keys(e);
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys.push.apply(keys, symbols);
   }
-  return t;
+  return keys;
 }
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function(key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
   }
-  return e;
+  return target;
 }
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o, r, i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function(obj2) {
+      return typeof obj2;
+    };
+  } else {
+    _typeof = function(obj2) {
+      return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
+    };
   }
-  return i;
+  return _typeof(obj);
 }
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
 }
-function _toPrimitive(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r);
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
 }
-function _toPropertyKey(t) {
-  var i = _toPrimitive(t, "string");
-  return "symbol" == typeof i ? i : i + "";
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
 }
-function _typeof(o) {
-  "@babel/helpers - typeof";
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
-    return typeof o2;
-  } : function(o2) {
-    return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
-  }, _typeof(o);
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
 }
-var version = "1.15.7";
+var version = "1.15.6";
 function userAgent(pattern) {
   if (typeof window !== "undefined" && window.navigator) {
     return !!/* @__PURE__ */ navigator.userAgent.match(pattern);
@@ -9075,7 +9103,7 @@ function matches(el, selector) {
   return false;
 }
 function getParentOrHost(el) {
-  return el.host && el !== document && el.host.nodeType && el.host !== el ? el.host : el.parentNode;
+  return el.host && el !== document && el.host.nodeType ? el.host : el.parentNode;
 }
 function closest(el, selector, ctx, includeCTX) {
   if (el) {
@@ -10560,11 +10588,8 @@ Sortable.prototype = /** @lends Sortable.prototype */
   _nulling: function _nulling() {
     pluginEvent2("nulling", this);
     rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null;
-    var el = this.el;
-    savedInputChecked.forEach(function(checkEl) {
-      if (el.contains(checkEl)) {
-        checkEl.checked = true;
-      }
+    savedInputChecked.forEach(function(el) {
+      el.checked = true;
     });
     savedInputChecked.length = lastDx = lastDy = 0;
   },
@@ -11445,12 +11470,16 @@ function useGridColumns({
   const setViewGetWidth = () => {
     instance.columns.forEach((column) => {
       column.setViewGetWidth(() => {
-        const index2 = instance.columns.filter((col) => col.isVisible).findIndex((col) => col.name === column.name);
         const el = rootEl2.value;
-        const colEl = el.querySelector(`
-          .zd-grid-table-header .zd-table-cell[index='${index2}']
-        `);
-        return (colEl == null ? void 0 : colEl.clientWidth) || 0;
+        if (!el) return 0;
+        const headerColumns = Array.from(el.querySelectorAll("table thead tr th[column-name]"));
+        const namedColumnEl = headerColumns.find((col) => col.getAttribute("column-name") === column.name);
+        if (namedColumnEl) {
+          return parseFloat(getComputedStyle(namedColumnEl).width) || namedColumnEl.clientWidth || 0;
+        }
+        const index2 = instance.columns.filter((col) => col.isVisible).findIndex((col) => col.name === column.name);
+        const indexedColumnEl = el.querySelector(`table thead tr th[index='${index2}']`);
+        return (indexedColumnEl == null ? void 0 : indexedColumnEl.clientWidth) || 0;
       });
     });
   };
@@ -12159,6 +12188,133 @@ function useGridInstance$1({
     shouldRender
   };
 }
+var FUNC_ERROR_TEXT = "Expected a function";
+var NAN = 0 / 0;
+var symbolTag = "[object Symbol]";
+var reTrim = /^\s+|\s+$/g;
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+var reIsBinary = /^0b[01]+$/i;
+var reIsOctal = /^0o[0-7]+$/i;
+var freeParseInt = parseInt;
+var freeGlobal = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+var root = freeGlobal || freeSelf || Function("return this")();
+var objectProto = Object.prototype;
+var objectToString = objectProto.toString;
+var nativeMax = Math.max, nativeMin = Math.min;
+var now = function() {
+  return root.Date.now();
+};
+function debounce(func, wait, options) {
+  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+  if (typeof func != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = "maxWait" in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  function invokeFunc(time) {
+    var args = lastArgs, thisArg = lastThis;
+    lastArgs = lastThis = void 0;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+  function leadingEdge(time) {
+    lastInvokeTime = time;
+    timerId = setTimeout(timerExpired, wait);
+    return leading ? invokeFunc(time) : result;
+  }
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, result2 = wait - timeSinceLastCall;
+    return maxing ? nativeMin(result2, maxWait - timeSinceLastInvoke) : result2;
+  }
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
+    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+  }
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+  function trailingEdge(time) {
+    timerId = void 0;
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = void 0;
+    return result;
+  }
+  function cancel() {
+    if (timerId !== void 0) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = void 0;
+  }
+  function flush() {
+    return timerId === void 0 ? result : trailingEdge(now());
+  }
+  function debounced() {
+    var time = now(), isInvoking = shouldInvoke(time);
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+    if (isInvoking) {
+      if (timerId === void 0) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === void 0) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+function isObject(value) {
+  var type = typeof value;
+  return !!value && (type == "object" || type == "function");
+}
+function isObjectLike(value) {
+  return !!value && typeof value == "object";
+}
+function isSymbol(value) {
+  return typeof value == "symbol" || isObjectLike(value) && objectToString.call(value) == symbolTag;
+}
+function toNumber(value) {
+  if (typeof value == "number") {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+    value = isObject(other) ? other + "" : other;
+  }
+  if (typeof value != "string") {
+    return value === 0 ? value : +value;
+  }
+  value = value.replace(reTrim, "");
+  var isBinary = reIsBinary.test(value);
+  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+}
+var lodash_debounce = debounce;
+const debounce$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_debounce);
 const ZdGridEditableProps$1 = buildProps({
   ...ZdGridProps$1,
   doubleClickEdit: {
@@ -12215,20 +12371,21 @@ function useGridEditableInstance$1({
     if (isEditing({ row, column })) return;
     const key = instance.getRowKey(row);
     editingCell.value = { key, column: column.name };
-    setTimeout(() => {
-      const key2 = instance.getRowKey(row);
-      try {
-        const component2 = instance.getComponent(String(key2), column.name);
-        component2 == null ? void 0 : component2.setFocus();
-        if (component2 instanceof Toggleable) {
-          component2.toggleValue();
-          component2.change();
-        }
-      } catch (e) {
-        if (!(e instanceof InstanceNotFoundError)) throw e;
-      }
-    });
+    checkToggleComponent(row, column);
   };
+  const checkToggleComponent = debounce$1((row, column) => {
+    const key = instance.getRowKey(row);
+    try {
+      const component2 = instance.getComponent(String(key), column.name);
+      component2 == null ? void 0 : component2.setFocus();
+      if (component2 instanceof Toggleable) {
+        component2.toggleValue();
+        component2.change();
+      }
+    } catch (e) {
+      if (!(e instanceof InstanceNotFoundError)) throw e;
+    }
+  });
   const viewEnterEdit = (key, columnName) => {
     editingCell.value = { key, column: columnName };
     const row = instance.findRow(key);
@@ -12334,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");
@@ -12455,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"
@@ -12632,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"
 };
@@ -12686,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"
@@ -13163,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");
@@ -13283,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"
@@ -14227,7 +14384,7 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["disabled", "isSelected", "cellSelection", "isCurrent"])) : createCommentVNode("", true),
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column, index2, ___, _cached) => {
         const _memo = [_ctx.row, column, _ctx.fixedLeft, _ctx.fixedRight, _ctx.cellSelection, _ctx.isCurrent({ row: _ctx.row, column })];
-        if (_cached && _cached.el && _cached.key === column.name && isMemoSame(_cached, _memo)) return _cached;
+        if (_cached && _cached.key === column.name && isMemoSame(_cached, _memo)) return _cached;
         const _item = (openBlock(), createBlock(_component_zd_grid_cell, {
           key: column.name,
           row: _ctx.row,
@@ -14275,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,
@@ -14283,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,
@@ -14387,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"
 };
@@ -14447,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,
@@ -14458,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,
@@ -14835,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 = {
@@ -14867,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,
@@ -14955,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"
 };
@@ -14971,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"),
@@ -15282,6 +15439,11 @@ function useSelect$1(instance, ctx, root2) {
     const rootElement = getRootElement(root2);
     instance.keydown(event, rootElement.value);
   };
+  const selectClear = () => {
+    if (!instance.autocomplete) {
+      textInputScope.input();
+    }
+  };
   const autoSelectFirst = computed(() => instance.autoSelection && items.value.length === 1);
   const menuClass = computed(() => {
     const align = instance.reverse ? "right" : instance.align;
@@ -15306,6 +15468,7 @@ function useSelect$1(instance, ctx, root2) {
     selectChange,
     selectInput,
     selectKeydown,
+    selectClear,
     hasItemBeforeSlot,
     hasItemAfterSlot,
     onLoadMoreIntersect,
@@ -15891,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"
 };
@@ -15926,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)
@@ -16001,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");
@@ -16023,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: "",
@@ -16040,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
@@ -16113,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,
@@ -16159,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, {
@@ -16384,133 +16547,6 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 const ZdMasterDetail = /* @__PURE__ */ _export_sfc(masterDetailComponent, [["render", _sfc_render$y]]);
-var FUNC_ERROR_TEXT = "Expected a function";
-var NAN = 0 / 0;
-var symbolTag = "[object Symbol]";
-var reTrim = /^\s+|\s+$/g;
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-var reIsBinary = /^0b[01]+$/i;
-var reIsOctal = /^0o[0-7]+$/i;
-var freeParseInt = parseInt;
-var freeGlobal = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-var freeSelf = typeof self == "object" && self && self.Object === Object && self;
-var root = freeGlobal || freeSelf || Function("return this")();
-var objectProto = Object.prototype;
-var objectToString = objectProto.toString;
-var nativeMax = Math.max, nativeMin = Math.min;
-var now = function() {
-  return root.Date.now();
-};
-function debounce(func, wait, options) {
-  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
-  if (typeof func != "function") {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject(options)) {
-    leading = !!options.leading;
-    maxing = "maxWait" in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = "trailing" in options ? !!options.trailing : trailing;
-  }
-  function invokeFunc(time) {
-    var args = lastArgs, thisArg = lastThis;
-    lastArgs = lastThis = void 0;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-  function leadingEdge(time) {
-    lastInvokeTime = time;
-    timerId = setTimeout(timerExpired, wait);
-    return leading ? invokeFunc(time) : result;
-  }
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, result2 = wait - timeSinceLastCall;
-    return maxing ? nativeMin(result2, maxWait - timeSinceLastInvoke) : result2;
-  }
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
-    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
-  }
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-  function trailingEdge(time) {
-    timerId = void 0;
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = void 0;
-    return result;
-  }
-  function cancel() {
-    if (timerId !== void 0) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = void 0;
-  }
-  function flush() {
-    return timerId === void 0 ? result : trailingEdge(now());
-  }
-  function debounced() {
-    var time = now(), isInvoking = shouldInvoke(time);
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-    if (isInvoking) {
-      if (timerId === void 0) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === void 0) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
-function isObject(value) {
-  var type = typeof value;
-  return !!value && (type == "object" || type == "function");
-}
-function isObjectLike(value) {
-  return !!value && typeof value == "object";
-}
-function isSymbol(value) {
-  return typeof value == "symbol" || isObjectLike(value) && objectToString.call(value) == symbolTag;
-}
-function toNumber(value) {
-  if (typeof value == "number") {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject(value)) {
-    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-    value = isObject(other) ? other + "" : other;
-  }
-  if (typeof value != "string") {
-    return value === 0 ? value : +value;
-  }
-  value = value.replace(reTrim, "");
-  var isBinary = reIsBinary.test(value);
-  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
-}
-var lodash_debounce = debounce;
-const debounce$1 = /* @__PURE__ */ getDefaultExportFromCjs(lodash_debounce);
 const ZdMenuProps$1 = buildProps({
   ...ZdComponentRenderProps,
   app: {
@@ -16780,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"
 };
@@ -16839,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({
@@ -17861,6 +17897,7 @@ defineComponent({
         instance.showDatePicker = false;
       }
       instance.validate();
+      instance.change();
     };
     const helperValuesOptionClick = (helper) => {
       const value = DateHelper.getValue(helper, instance.dateFormat);
@@ -18596,7 +18633,7 @@ const selectMultipleComponent = defineComponent({
     };
     const removeItem = (item) => {
       const rootValue = root2.value;
-      rootValue.select(item.value, false);
+      rootValue.select(item, false);
     };
     const selectChange = (value, event) => {
       const input = getRootElement(root2);
@@ -18606,6 +18643,19 @@ const selectMultipleComponent = defineComponent({
         input.value
       );
     };
+    const selectClear = () => {
+      const input = getRootElement(root2);
+      const hasSelectedValue = Array.isArray(instance.value) && instance.value.length > 0;
+      const hasSearchText = !!instance.search;
+      if (hasSelectedValue) {
+        instance.selectChange([], void 0, input.value);
+      }
+      if (hasSearchText) {
+        selectScope.selectInput("");
+      } else {
+        instance.search = "";
+      }
+    };
     let observer;
     onMounted(() => {
       const componentRef = getRootElement(root2);
@@ -18637,6 +18687,7 @@ const selectMultipleComponent = defineComponent({
       selectClick,
       selectBlur,
       selectChange,
+      selectClear,
       formattedDataDiscreteText,
       ajustSize,
       onLoadMoreIntersect,
@@ -18647,11 +18698,12 @@ 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"
 };
 function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_v_icon = resolveComponent("v-icon");
   const _component_v_checkbox_btn = resolveComponent("v-checkbox-btn");
   const _component_v_list_item_title = resolveComponent("v-list-item-title");
   const _component_v_list_item = resolveComponent("v-list-item");
@@ -18736,6 +18788,14 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
       onKeyup: _cache[19] || (_cache[19] = ($event) => _ctx.instance.keyup($event)),
       onKeydown: _cache[20] || (_cache[20] = ($event) => _ctx.instance.keydown($event))
     }, toHandlers(_ctx.getIconClickEvents())), createSlots({
+      clear: withCtx(({ props }) => [
+        createVNode(_component_v_icon, {
+          tabindex: props.tabindex,
+          onFocus: props.onFocus,
+          onBlur: props.onBlur,
+          onClick: _ctx.selectClear
+        }, null, 8, ["tabindex", "onFocus", "onBlur", "onClick"])
+      ]),
       item: withCtx(({ item, props }) => [
         createVNode(_component_v_list_item, mergeProps({
           class: "zd-select__menu-item zd-select-multiple__menu-item",
@@ -18786,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 }, [
@@ -19075,6 +19135,11 @@ function useSelect(instance, ctx, root2) {
     const rootElement = getRootElement(root2);
     instance.keydown(event, rootElement.value);
   };
+  const selectClear = () => {
+    if (!instance.autocomplete) {
+      textInputScope.input();
+    }
+  };
   const autoSelectFirst = computed(() => instance.autoSelection && items.value.length === 1);
   const menuClass = computed(() => {
     const align = instance.reverse ? "right" : instance.align;
@@ -19099,6 +19164,7 @@ function useSelect(instance, ctx, root2) {
     selectChange,
     selectInput,
     selectKeydown,
+    selectClear,
     hasItemBeforeSlot,
     hasItemAfterSlot,
     onLoadMoreIntersect,
@@ -19176,11 +19242,12 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.mouseenter($event)),
     onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.mouseleave($event)),
     onClick: _cache[4] || (_cache[4] = ($event) => _ctx.click($event)),
-    onBlur: _cache[6] || (_cache[6] = ($event) => _ctx.blur($event)),
-    onFocus: _cache[7] || (_cache[7] = ($event) => _ctx.focus($event)),
-    "onUpdate:search": _cache[8] || (_cache[8] = ($event) => _ctx.selectInput($event)),
-    onKeyup: _cache[9] || (_cache[9] = ($event) => _ctx.instance.keyup($event)),
-    onKeydown: _cache[10] || (_cache[10] = ($event) => _ctx.selectKeydown($event))
+    "onClick:clear": _cache[6] || (_cache[6] = ($event) => _ctx.selectClear()),
+    onBlur: _cache[7] || (_cache[7] = ($event) => _ctx.blur($event)),
+    onFocus: _cache[8] || (_cache[8] = ($event) => _ctx.focus($event)),
+    "onUpdate:search": _cache[9] || (_cache[9] = ($event) => _ctx.selectInput($event)),
+    onKeyup: _cache[10] || (_cache[10] = ($event) => _ctx.instance.keyup($event)),
+    onKeydown: _cache[11] || (_cache[11] = ($event) => _ctx.selectKeydown($event))
   }, toHandlers(_ctx.getIconClickEvents())), createSlots({
     item: withCtx(({ item, props }) => [
       createVNode(_component_v_list_item, mergeProps({
@@ -19475,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"
 };
@@ -19509,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",
@@ -19651,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",
@@ -19678,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, [
@@ -19702,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))
           ]);
@@ -19723,9 +19790,6 @@ const ZdTabProps$1 = buildProps({
   tabTitle: {
     type: [String]
   },
-  tabName: {
-    type: [String]
-  },
   color: {
     type: [String],
     default: "primary"
@@ -19772,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,
@@ -19789,7 +19879,8 @@ const tabComponent = defineComponent({
       // methods
       clickTab,
       keydown,
-      density
+      handleDragStart,
+      handleDragEnd
     };
   }
 });
@@ -19799,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,
@@ -19811,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]
@@ -19844,7 +19940,9 @@ 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
   }, {
     default: withCtx(() => [
       createVNode(_component_v_container, { fluid: "" }, {
@@ -19904,6 +20002,10 @@ const ZdTabsProps$1 = buildProps({
   },
   max: {
     type: [Number, String]
+  },
+  sortable: {
+    type: [Boolean, String],
+    default: false
   }
 });
 const tabsComponent = defineComponent({
@@ -19912,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,
@@ -19936,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");
@@ -19955,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": "",
@@ -19975,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]
   ]);
 }
@@ -20198,6 +20385,10 @@ function useTextInput(instance, ctx, root2) {
       (_a = rootElement.value) == null ? void 0 : _a.getElementsByTagName("input")[0].blur();
     });
   };
+  const clearInput = () => {
+    inputScope.input();
+    inputScope.change();
+  };
   const getIconClickEvents = () => {
     const events = {};
     if (instance.events.appendIconClick) {
@@ -20232,6 +20423,7 @@ function useTextInput(instance, ctx, root2) {
     appendOuterIconClick,
     prependOuterIconClick,
     setBlur,
+    clearInput,
     getIconClickEvents
   };
 }
@@ -20278,7 +20470,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _cache[7] || (_cache[7] = ($event) => _ctx.change()),
     onKeyup: _cache[8] || (_cache[8] = ($event) => _ctx.keyup($event)),
     onKeydown: _cache[9] || (_cache[9] = ($event) => _ctx.keydown($event)),
-    "onClick:clear": _cache[10] || (_cache[10] = ($event) => _ctx.change()),
+    "onClick:clear": _cache[10] || (_cache[10] = ($event) => _ctx.clearInput()),
     "hide-details": _ctx.instance.autoHintDetails ? "auto" : false,
     tabindex: _ctx.instance.tabStop ? "" : "-1"
   }, {
@@ -20495,7 +20687,8 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     onInput: _cache[5] || (_cache[5] = ($event) => _ctx.input()),
     onKeydown: _cache[6] || (_cache[6] = ($event) => _ctx.keydown($event)),
     onChange: _cache[7] || (_cache[7] = ($event) => _ctx.change($event)),
-    onBlur: _cache[8] || (_cache[8] = ($event) => _ctx.blur($event))
+    "onClick:clear": _cache[8] || (_cache[8] = ($event) => _ctx.clearInput()),
+    onBlur: _cache[9] || (_cache[9] = ($event) => _ctx.blur($event))
   }, {
     "append-inner-icon": !_ctx.instance.suffix ? _ctx.$getIcon(_ctx.instance.appendIcon) : "",
     "append-icon": _ctx.$getIcon(_ctx.instance.appendOuterIcon),
@@ -21413,7 +21606,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["disabled", "isSelected", "cellSelection", "isCurrent", "indeterminate"])) : createCommentVNode("", true),
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column, i, ___, _cached) => {
         const _memo = [_ctx.row, column, _ctx.fixedLeft, _ctx.fixedRight, _ctx.cellSelection, _ctx.isCurrent({ row: _ctx.row, column })];
-        if (_cached && _cached.el && _cached.key === column.name && isMemoSame(_cached, _memo)) return _cached;
+        if (_cached && _cached.key === column.name && isMemoSame(_cached, _memo)) return _cached;
         const _item = (openBlock(), createBlock(_component_zd_tree_grid_cell, {
           key: column.name,
           row: _ctx.row,
@@ -23526,9 +23719,6 @@ const ZdTabProps = buildProps({
   tabTitle: {
     type: [String]
   },
-  tabName: {
-    type: [String]
-  },
   color: {
     type: [String],
     default: "primary"
@@ -23575,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,
@@ -23592,14 +23808,15 @@ defineComponent({
       // methods
       clickTab,
       keydown,
-      density
+      handleDragStart,
+      handleDragEnd
     };
   }
 });
 const ZdTabItemProps = buildProps({
   ...ZdComponentRenderProps,
-  index: {
-    type: [Number]
+  value: {
+    type: [String]
   },
   lazyLoad: {
     type: [Boolean]
@@ -23647,6 +23864,10 @@ const ZdTabsProps = buildProps({
   },
   max: {
     type: [Number, String]
+  },
+  sortable: {
+    type: [Boolean, String],
+    default: false
   }
 });
 defineComponent({
@@ -23655,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,
@@ -23679,7 +23971,10 @@ defineComponent({
       clickTab,
       keydown,
       change,
-      density
+      handleDragOver,
+      handleDrop,
+      handleDragEnter,
+      handleDragLeave
     };
   }
 });
@@ -24423,7 +24718,7 @@ defineComponent({
     };
     const removeItem = (item) => {
       const rootValue = root2.value;
-      rootValue.select(item.value, false);
+      rootValue.select(item, false);
     };
     const selectChange = (value, event) => {
       const input = getRootElement(root2);
@@ -24433,6 +24728,19 @@ defineComponent({
         input.value
       );
     };
+    const selectClear = () => {
+      const input = getRootElement(root2);
+      const hasSelectedValue = Array.isArray(instance.value) && instance.value.length > 0;
+      const hasSearchText = !!instance.search;
+      if (hasSelectedValue) {
+        instance.selectChange([], void 0, input.value);
+      }
+      if (hasSearchText) {
+        selectScope.selectInput("");
+      } else {
+        instance.search = "";
+      }
+    };
     let observer;
     onMounted(() => {
       const componentRef = getRootElement(root2);
@@ -24464,6 +24772,7 @@ defineComponent({
       selectClick,
       selectBlur,
       selectChange,
+      selectClear,
       formattedDataDiscreteText,
       ajustSize,
       onLoadMoreIntersect,
@@ -24859,20 +25168,21 @@ function useGridEditableInstance({
     if (isEditing({ row, column })) return;
     const key = instance.getRowKey(row);
     editingCell.value = { key, column: column.name };
-    setTimeout(() => {
-      const key2 = instance.getRowKey(row);
-      try {
-        const component2 = instance.getComponent(String(key2), column.name);
-        component2 == null ? void 0 : component2.setFocus();
-        if (component2 instanceof Toggleable) {
-          component2.toggleValue();
-          component2.change();
-        }
-      } catch (e) {
-        if (!(e instanceof InstanceNotFoundError)) throw e;
-      }
-    });
+    checkToggleComponent(row, column);
   };
+  const checkToggleComponent = debounce$1((row, column) => {
+    const key = instance.getRowKey(row);
+    try {
+      const component2 = instance.getComponent(String(key), column.name);
+      component2 == null ? void 0 : component2.setFocus();
+      if (component2 instanceof Toggleable) {
+        component2.toggleValue();
+        component2.change();
+      }
+    } catch (e) {
+      if (!(e instanceof InstanceNotFoundError)) throw e;
+    }
+  });
   const viewEnterEdit = (key, columnName) => {
     editingCell.value = { key, column: columnName };
     const row = instance.findRow(key);