@element-plus/nightly 0.0.20250630 → 0.0.20250701

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Element Plus v0.0.20250630 */
+/*! Element Plus v0.0.20250701 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11536,26 +11536,8 @@
     });
   };
 
-  const formContextKey = Symbol("formContextKey");
-  const formItemContextKey = Symbol("formItemContextKey");
-
-  const useFormSize = (fallback, ignore = {}) => {
-    const emptyRef = vue.ref(void 0);
-    const size = ignore.prop ? emptyRef : useProp("size");
-    const globalConfig = ignore.global ? emptyRef : useGlobalSize();
-    const form = ignore.form ? { size: void 0 } : vue.inject(formContextKey, void 0);
-    const formItem = ignore.formItem ? { size: void 0 } : vue.inject(formItemContextKey, void 0);
-    return vue.computed(() => size.value || vue.unref(fallback) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || globalConfig.value || "");
-  };
-  const useFormDisabled = (fallback) => {
-    const disabled = useProp("disabled");
-    const form = vue.inject(formContextKey, void 0);
-    return vue.computed(() => disabled.value || vue.unref(fallback) || (form == null ? void 0 : form.disabled) || false);
-  };
-  const useSize$1 = useFormSize;
-  const useDisabled = useFormDisabled;
-
   function useFocusController(target, {
+    disabled,
     beforeFocus,
     afterFocus,
     beforeBlur,
@@ -11564,11 +11546,10 @@
     const instance = vue.getCurrentInstance();
     const { emit } = instance;
     const wrapperRef = vue.shallowRef();
-    const disabled = useFormDisabled();
     const isFocused = vue.ref(false);
     const handleFocus = (event) => {
       const cancelFocus = isFunction$1(beforeFocus) ? beforeFocus(event) : false;
-      if (cancelFocus || isFocused.value)
+      if (vue.unref(disabled) || isFocused.value || cancelFocus)
         return;
       isFocused.value = true;
       emit("focus", event);
@@ -11577,7 +11558,7 @@
     const handleBlur = (event) => {
       var _a;
       const cancelBlur = isFunction$1(beforeBlur) ? beforeBlur(event) : false;
-      if (cancelBlur || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)))
+      if (vue.unref(disabled) || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)) || cancelBlur)
         return;
       isFocused.value = false;
       emit("blur", event);
@@ -11585,11 +11566,11 @@
     };
     const handleClick = (event) => {
       var _a, _b;
-      if (((_a = wrapperRef.value) == null ? void 0 : _a.contains(document.activeElement)) && wrapperRef.value !== document.activeElement || isFocusable(event.target) || disabled.value)
+      if (vue.unref(disabled) || isFocusable(event.target) || ((_a = wrapperRef.value) == null ? void 0 : _a.contains(document.activeElement)) && wrapperRef.value !== document.activeElement)
         return;
       (_b = target.value) == null ? void 0 : _b.focus();
     };
-    vue.watch([wrapperRef, disabled], ([el, disabled2]) => {
+    vue.watch([wrapperRef, () => vue.unref(disabled)], ([el, disabled2]) => {
       if (!el)
         return;
       if (disabled2) {
@@ -11822,7 +11803,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "0.0.20250630";
+  const version$1 = "0.0.20250701";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -12168,6 +12149,25 @@
 
   const ElAlert = withInstall(Alert);
 
+  const formContextKey = Symbol("formContextKey");
+  const formItemContextKey = Symbol("formItemContextKey");
+
+  const useFormSize = (fallback, ignore = {}) => {
+    const emptyRef = vue.ref(void 0);
+    const size = ignore.prop ? emptyRef : useProp("size");
+    const globalConfig = ignore.global ? emptyRef : useGlobalSize();
+    const form = ignore.form ? { size: void 0 } : vue.inject(formContextKey, void 0);
+    const formItem = ignore.formItem ? { size: void 0 } : vue.inject(formItemContextKey, void 0);
+    return vue.computed(() => size.value || vue.unref(fallback) || (formItem == null ? void 0 : formItem.size) || (form == null ? void 0 : form.size) || globalConfig.value || "");
+  };
+  const useFormDisabled = (fallback) => {
+    const disabled = useProp("disabled");
+    const form = vue.inject(formContextKey, void 0);
+    return vue.computed(() => disabled.value || vue.unref(fallback) || (form == null ? void 0 : form.disabled) || false);
+  };
+  const useSize$1 = useFormSize;
+  const useDisabled = useFormDisabled;
+
   const useFormItem = () => {
     const form = vue.inject(formContextKey, void 0);
     const formItem = vue.inject(formItemContextKey, void 0);
@@ -14183,9 +14183,7 @@
       const textareaCalcStyle = vue.shallowRef(props.inputStyle);
       const _ref = vue.computed(() => input.value || textarea.value);
       const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(_ref, {
-        beforeFocus() {
-          return inputDisabled.value;
-        },
+        disabled: inputDisabled,
         afterBlur() {
           var _a;
           if (props.validateEvent) {
@@ -19360,12 +19358,15 @@
       "endChange"
     ],
     setup(__props, { expose, emit }) {
+      const props = __props;
       const attrs = useAttrs();
       const nsDate = useNamespace("date");
       const nsRange = useNamespace("range");
       const inputRef = vue.ref();
       const endInputRef = vue.ref();
-      const { wrapperRef, isFocused } = useFocusController(inputRef);
+      const { wrapperRef, isFocused } = useFocusController(inputRef, {
+        disabled: vue.computed(() => props.disabled)
+      });
       const handleClick = (evt) => {
         emit("click", evt);
       };
@@ -19480,9 +19481,13 @@
       const pickerActualVisible = vue.ref(false);
       const valueOnOpen = vue.ref(null);
       let hasJustTabExitedInput = false;
+      const pickerDisabled = vue.computed(() => {
+        return props.disabled || !!(form == null ? void 0 : form.disabled);
+      });
       const { isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
+        disabled: pickerDisabled,
         beforeFocus() {
-          return props.readonly || pickerDisabled.value;
+          return props.readonly;
         },
         afterFocus() {
           pickerVisible.value = true;
@@ -19594,9 +19599,6 @@
       const handleClose = () => {
         pickerVisible.value = false;
       };
-      const pickerDisabled = vue.computed(() => {
-        return props.disabled || (form == null ? void 0 : form.disabled);
-      });
       const parsedValue = vue.computed(() => {
         let dayOrDays;
         if (valueIsEmpty.value) {
@@ -26343,9 +26345,7 @@
       const triggerRef = vue.ref();
       const inputRef = vue.ref();
       const { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {
-        beforeFocus() {
-          return colorDisabled.value;
-        },
+        disabled: colorDisabled,
         beforeBlur(event) {
           var _a;
           return (_a = popper.value) == null ? void 0 : _a.isFocusInsideContent(event);
@@ -34317,9 +34317,7 @@
       (_a = inputRef.value) == null ? void 0 : _a.blur();
     };
     const { wrapperRef, isFocused } = useFocusController(inputRef, {
-      beforeFocus() {
-        return disabled.value;
-      },
+      disabled,
       afterBlur() {
         var _a;
         if (props.saveOnBlur) {
@@ -36150,6 +36148,13 @@
     const tagMenuRef = vue.ref();
     const collapseItemRef = vue.ref();
     const scrollbarRef = vue.ref();
+    const expanded = vue.ref(false);
+    const hoverOption = vue.ref();
+    const { form, formItem } = useFormItem();
+    const { inputId } = useFormItemInputId(props, {
+      formItemContext: formItem
+    });
+    const { valueOnClear, isEmptyValue } = useEmptyValues(props);
     const {
       isComposing,
       handleCompositionStart,
@@ -36158,10 +36163,9 @@
     } = useComposition({
       afterComposition: (e) => onInput(e)
     });
+    const selectDisabled = vue.computed(() => props.disabled || !!(form == null ? void 0 : form.disabled));
     const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
-      beforeFocus() {
-        return selectDisabled.value;
-      },
+      disabled: selectDisabled,
       afterFocus() {
         if (props.automaticDropdown && !expanded.value) {
           expanded.value = true;
@@ -36181,14 +36185,6 @@
         }
       }
     });
-    const expanded = vue.ref(false);
-    const hoverOption = vue.ref();
-    const { form, formItem } = useFormItem();
-    const { inputId } = useFormItemInputId(props, {
-      formItemContext: formItem
-    });
-    const { valueOnClear, isEmptyValue } = useEmptyValues(props);
-    const selectDisabled = vue.computed(() => props.disabled || (form == null ? void 0 : form.disabled));
     const hasModelValue = vue.computed(() => {
       return isArray$1(props.modelValue) ? props.modelValue.length > 0 : !isEmptyValue(props.modelValue);
     });
@@ -41562,10 +41558,9 @@
     } = useComposition({
       afterComposition: (e) => onInput(e)
     });
+    const selectDisabled = vue.computed(() => props.disabled || !!(elForm == null ? void 0 : elForm.disabled));
     const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
-      beforeFocus() {
-        return selectDisabled.value;
-      },
+      disabled: selectDisabled,
       afterFocus() {
         if (props.automaticDropdown && !expanded.value) {
           expanded.value = true;
@@ -41593,7 +41588,6 @@
     });
     const filteredOptions = vue.ref([]);
     const expanded = vue.ref(false);
-    const selectDisabled = vue.computed(() => props.disabled || (elForm == null ? void 0 : elForm.disabled));
     const needStatusIcon = vue.computed(() => {
       var _a;
       return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false;
@@ -45202,12 +45196,13 @@
       _currentRowKey.value = null;
     };
     const setCurrentRowByKey = (key) => {
+      var _a;
       const { data, rowKey } = watcherData;
       let _currentRow = null;
       if (rowKey.value) {
-        _currentRow = (vue.unref(data) || []).find((item) => getRowIdentity(item, rowKey.value) === key);
+        _currentRow = (_a = (vue.unref(data) || []).find((item) => getRowIdentity(item, rowKey.value) === key)) != null ? _a : null;
       }
-      currentRow.value = _currentRow;
+      currentRow.value = _currentRow != null ? _currentRow : null;
       instance.emit("current-change", currentRow.value, null);
     };
     const updateCurrentRow = (_currentRow) => {
@@ -45226,7 +45221,7 @@
       const rowKey = watcherData.rowKey.value;
       const data = watcherData.data.value || [];
       const oldCurrentRow = currentRow.value;
-      if (!data.includes(oldCurrentRow) && oldCurrentRow) {
+      if (oldCurrentRow && !data.includes(oldCurrentRow)) {
         if (rowKey) {
           const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
           setCurrentRowByKey(currentRowKey);
@@ -46131,22 +46126,22 @@
   function handleValue(value, propsKey, store) {
     let newVal = value;
     let storeKey = InitialStateMap[propsKey];
-    if (isObject$1(InitialStateMap[propsKey])) {
+    if (isObject$1(storeKey)) {
+      newVal = newVal || storeKey.default;
       storeKey = storeKey.key;
-      newVal = newVal || InitialStateMap[propsKey].default;
     }
     store.states[storeKey].value = newVal;
   }
-  function getArrKeysValue(props, keys) {
-    if (keys.includes(".")) {
-      const keyList = keys.split(".");
+  function getArrKeysValue(props, key) {
+    if (key.includes(".")) {
+      const keyList = key.split(".");
       let value = props;
-      keyList.forEach((key) => {
-        value = value[key];
+      keyList.forEach((k) => {
+        value = value[k];
       });
       return value;
     } else {
-      return props[keys];
+      return props[key];
     }
   }
 
@@ -46379,7 +46374,7 @@
       const { t } = useLocale();
       const ns = useNamespace("table-filter");
       const parent = instance == null ? void 0 : instance.parent;
-      if (!parent.filterPanels.value[props.column.id]) {
+      if (props.column && !parent.filterPanels.value[props.column.id]) {
         parent.filterPanels.value[props.column.id] = instance;
       }
       const tooltipVisible = vue.ref(false);
@@ -46388,7 +46383,7 @@
         return props.column && props.column.filters;
       });
       const filterClassName = vue.computed(() => {
-        if (props.column.filterClassName) {
+        if (props.column && props.column.filterClassName) {
           return `${ns.b()} ${props.column.filterClassName}`;
         }
         return ns.b();
@@ -46416,8 +46411,9 @@
           return [];
         },
         set(value) {
+          var _a;
           if (props.column) {
-            props.upDataColumn("filteredValue", value);
+            (_a = props.upDataColumn) == null ? void 0 : _a.call(props, "filteredValue", value);
           }
         }
       });
@@ -46459,15 +46455,17 @@
         hidden();
       };
       const confirmFilter = (filteredValue2) => {
-        props.store.commit("filterChange", {
+        var _a, _b;
+        (_a = props.store) == null ? void 0 : _a.commit("filterChange", {
           column: props.column,
           values: filteredValue2
         });
-        props.store.updateAllSelected();
+        (_b = props.store) == null ? void 0 : _b.updateAllSelected();
       };
       vue.watch(tooltipVisible, (value) => {
+        var _a;
         if (props.column) {
-          props.upDataColumn("filterOpened", value);
+          (_a = props.upDataColumn) == null ? void 0 : _a.call(props, "filterOpened", value);
         }
       }, {
         immediate: true
@@ -46600,9 +46598,12 @@
         }, [
           vue.createVNode(_component_el_icon, null, {
             default: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "filter-icon", {}, () => [
-                _ctx.column.filterOpened ? (vue.openBlock(), vue.createBlock(_component_arrow_up, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_arrow_down, { key: 1 }))
-              ])
+              vue.renderSlot(_ctx.$slots, "filter-icon", {}, () => {
+                var _a;
+                return [
+                  ((_a = _ctx.column) == null ? void 0 : _a.filterOpened) ? (vue.openBlock(), vue.createBlock(_component_arrow_up, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_arrow_down, { key: 1 }))
+                ];
+              })
             ]),
             _: 3
           })
@@ -48788,7 +48789,11 @@
   };
   const cellForced = {
     selection: {
-      renderHeader({ store, column }) {
+      renderHeader({
+        store,
+        column
+      }) {
+        var _a;
         function isDisabled() {
           return store.states.data.value && store.states.data.value.length === 0;
         }
@@ -48796,7 +48801,7 @@
           disabled: isDisabled(),
           size: store.states.tableSize.value,
           indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value,
-          "onUpdate:modelValue": store.toggleAllSelection,
+          "onUpdate:modelValue": (_a = store.toggleAllSelection) != null ? _a : void 0,
           modelValue: store.states.isAllSelected.value,
           ariaLabel: column.label
         });
@@ -48822,7 +48827,9 @@
       resizable: false
     },
     index: {
-      renderHeader({ column }) {
+      renderHeader({
+        column
+      }) {
         return column.label || "#";
       },
       renderCell({
@@ -48841,7 +48848,9 @@
       sortable: false
     },
     expand: {
-      renderHeader({ column }) {
+      renderHeader({
+        column
+      }) {
         return column.label || "";
       },
       renderCell({
@@ -51558,6 +51567,10 @@
     tabs: {
       type: definePropType(Array),
       default: () => mutable([])
+    },
+    tabRefs: {
+      type: definePropType(Object),
+      default: () => mutable({})
     }
   });
 
@@ -51570,7 +51583,6 @@
     props: tabBarProps,
     setup(__props, { expose }) {
       const props = __props;
-      const instance = vue.getCurrentInstance();
       const rootTabs = vue.inject(tabsRootContextKey);
       if (!rootTabs)
         throwError(COMPONENT_NAME$4, "<el-tabs><el-tab-bar /></el-tabs>");
@@ -51584,8 +51596,9 @@
         const sizeDir = sizeName === "width" ? "x" : "y";
         const position = sizeDir === "x" ? "left" : "top";
         props.tabs.every((tab) => {
-          var _a, _b;
-          const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`];
+          if (isUndefined(tab.paneName))
+            return false;
+          const $el = props.tabRefs[tab.paneName];
           if (!$el)
             return false;
           if (!tab.active) {
@@ -51608,20 +51621,11 @@
       const update = () => barStyle.value = getBarStyle();
       const saveObserver = [];
       const observerTabs = () => {
-        var _a;
         saveObserver.forEach((observer) => observer.stop());
         saveObserver.length = 0;
-        const list = (_a = instance.parent) == null ? void 0 : _a.refs;
-        if (!list)
-          return;
-        for (const key in list) {
-          if (key.startsWith("tab-")) {
-            const _el = list[key];
-            if (_el) {
-              saveObserver.push(useResizeObserver(_el, update));
-            }
-          }
-        }
+        Object.values(props.tabRefs).forEach((tab) => {
+          saveObserver.push(useResizeObserver(tab, update));
+        });
       };
       vue.watch(() => props.tabs, async () => {
         await vue.nextTick();
@@ -51689,6 +51693,7 @@
       const navScroll$ = vue.ref();
       const nav$ = vue.ref();
       const el$ = vue.ref();
+      const tabRefsMap = vue.ref({});
       const tabBarRef = vue.ref();
       const scrollable = vue.ref(false);
       const navOffset = vue.ref(0);
@@ -51727,7 +51732,7 @@
         if (!scrollable.value || !el$.value || !navScroll$.value || !nav)
           return;
         await vue.nextTick();
-        const activeTab = el$.value.querySelector(".is-active");
+        const activeTab = tabRefsMap.value[props.currentName];
         if (!activeTab)
           return;
         const navScroll = navScroll$.value;
@@ -51810,6 +51815,16 @@
           isFocus.value = true;
       };
       const removeFocus = () => isFocus.value = false;
+      const setRefs = (el, key) => {
+        tabRefsMap.value[key] = el;
+      };
+      const focusActiveTab = async () => {
+        await vue.nextTick();
+        const activeTab = tabRefsMap.value[props.currentName];
+        activeTab == null ? void 0 : activeTab.focus({
+          preventScroll: true
+        });
+      };
       vue.watch(visibility, (visibility2) => {
         if (visibility2 === "hidden") {
           focusable.value = false;
@@ -51830,6 +51845,7 @@
       expose({
         scrollToActiveTab,
         removeFocus,
+        focusActiveTab,
         tabListRef: nav$,
         tabBarRef
       });
@@ -51861,7 +51877,7 @@
           const tabLabelContent = ((_d = (_c = pane.slots).label) == null ? void 0 : _d.call(_c)) || pane.props.label;
           const tabindex = !disabled && pane.active ? 0 : -1;
           return vue.createVNode("div", {
-            "ref": `tab-${uid}`,
+            "ref": (el) => setRefs(el, tabName),
             "class": [ns.e("item"), ns.is(rootTabs.props.tabPosition), ns.is("active", pane.active), ns.is("disabled", disabled), ns.is("closable", closable), ns.is("focus", isFocus.value)],
             "id": `tab-${tabName}`,
             "key": `tab-${uid}`,
@@ -51896,7 +51912,8 @@
           "onKeydown": changeTab
         }, [...[!props.type ? vue.createVNode(TabBar, {
           "ref": tabBarRef,
-          "tabs": [...props.panes]
+          "tabs": [...props.panes],
+          "tabRefs": tabRefsMap.value
         }, null) : null, tabs]]) : null])]);
       };
     }
@@ -51955,7 +51972,7 @@
       const nav$ = vue.ref();
       const currentName = vue.ref((_a = props.modelValue) != null ? _a : "0");
       const setCurrentName = async (value, trigger = false) => {
-        var _a2, _b;
+        var _a2, _b, _c, _d;
         if (currentName.value === value || isUndefined(value))
           return;
         try {
@@ -51967,12 +51984,16 @@
             canLeave = true;
           }
           if (canLeave !== false) {
+            const isFocusInsidePane = (_a2 = panes.value.find((item) => item.paneName === currentName.value)) == null ? void 0 : _a2.isFocusInsidePane();
             currentName.value = value;
             if (trigger) {
               emit(UPDATE_MODEL_EVENT, value);
               emit("tabChange", value);
             }
-            (_b = (_a2 = nav$.value) == null ? void 0 : _a2.removeFocus) == null ? void 0 : _b.call(_a2);
+            (_c = (_b = nav$.value) == null ? void 0 : _b.removeFocus) == null ? void 0 : _c.call(_b);
+            if (isFocusInsidePane) {
+              (_d = nav$.value) == null ? void 0 : _d.focusActiveTab();
+            }
           }
         } catch (e) {
         }
@@ -52096,6 +52117,7 @@
       if (!tabsRoot)
         throwError(COMPONENT_NAME$2, "usage: <el-tabs><el-tab-pane /></el-tabs/>");
       const ns = useNamespace("tab-pane");
+      const paneRef = vue.ref();
       const index = vue.ref();
       const isClosable = vue.computed(() => props.closable || tabsRoot.props.closable);
       const active = computedEager(() => {
@@ -52108,6 +52130,10 @@
         return (_a = props.name) != null ? _a : index.value;
       });
       const shouldBeRender = computedEager(() => !props.lazy || loaded.value || active.value);
+      const isFocusInsidePane = () => {
+        var _a;
+        return (_a = paneRef.value) == null ? void 0 : _a.contains(document.activeElement);
+      };
       vue.watch(active, (val) => {
         if (val)
           loaded.value = true;
@@ -52119,7 +52145,8 @@
         paneName,
         active,
         index,
-        isClosable
+        isClosable,
+        isFocusInsidePane
       });
       tabsRoot.registerPane(pane);
       vue.onBeforeUnmount(() => {
@@ -52129,6 +52156,8 @@
         return vue.unref(shouldBeRender) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           id: `pane-${vue.unref(paneName)}`,
+          ref_key: "paneRef",
+          ref: paneRef,
           class: vue.normalizeClass(vue.unref(ns).b()),
           role: "tabpanel",
           "aria-hidden": !vue.unref(active),
@@ -59832,9 +59861,7 @@
         }
       };
       const { wrapperRef } = useFocusController(elInputRef, {
-        beforeFocus() {
-          return disabled.value;
-        },
+        disabled,
         afterFocus() {
           syncAfterCursorMove();
         },
@@ -61022,18 +61049,18 @@
   var Loading$1 = Loading;
 
   const INSTANCE_KEY = Symbol("ElLoading");
+  const getAttributeName = (name) => {
+    return `element-loading-${hyphenate(name)}`;
+  };
   const createInstance = (el, binding) => {
     var _a, _b, _c, _d;
     const vm = binding.instance;
     const getBindingProp = (key) => isObject$1(binding.value) ? binding.value[key] : void 0;
     const resolveExpression = (key) => {
       const data = isString$1(key) && (vm == null ? void 0 : vm[key]) || key;
-      if (data)
-        return vue.ref(data);
-      else
-        return data;
+      return vue.ref(data);
     };
-    const getProp = (name) => resolveExpression(getBindingProp(name) || el.getAttribute(`element-loading-${hyphenate(name)}`));
+    const getProp = (name) => resolveExpression(getBindingProp(name) || el.getAttribute(getAttributeName(name)));
     const fullscreen = (_a = getBindingProp("fullscreen")) != null ? _a : binding.modifiers.fullscreen;
     const options = {
       text: getProp("text"),
@@ -61054,7 +61081,7 @@
       instance
     };
   };
-  const updateOptions = (newOptions, originalOptions) => {
+  const updateOptions = (originalOptions, newOptions) => {
     for (const key of Object.keys(originalOptions)) {
       if (vue.isRef(originalOptions[key]))
         originalOptions[key].value = newOptions[key];
@@ -61068,15 +61095,22 @@
     },
     updated(el, binding) {
       const instance = el[INSTANCE_KEY];
-      if (binding.oldValue !== binding.value) {
-        if (binding.value && !binding.oldValue) {
-          createInstance(el, binding);
-        } else if (binding.value && binding.oldValue) {
-          if (isObject$1(binding.value))
-            updateOptions(binding.value, instance.options);
-        } else {
-          instance == null ? void 0 : instance.instance.close();
-        }
+      if (!binding.value) {
+        instance == null ? void 0 : instance.instance.close();
+        el[INSTANCE_KEY] = null;
+        return;
+      }
+      if (!instance)
+        createInstance(el, binding);
+      else {
+        updateOptions(instance.options, isObject$1(binding.value) ? binding.value : {
+          text: el.getAttribute(getAttributeName("text")),
+          svg: el.getAttribute(getAttributeName("svg")),
+          svgViewBox: el.getAttribute(getAttributeName("svgViewBox")),
+          spinner: el.getAttribute(getAttributeName("spinner")),
+          background: el.getAttribute(getAttributeName("background")),
+          customClass: el.getAttribute(getAttributeName("customClass"))
+        });
       }
     },
     unmounted(el) {