@talex-touch/tuffex 0.3.3 → 0.3.4

package/dist/es/input/src/TxInput.vue2.js

@@ -1,10 +1,16 @@
-import { defineComponent, computed, ref, createElementBlock, openBlock, normalizeClass, renderSlot, withDirectives, createCommentVNode, vModelText, vModelDynamic, createElementVNode } from 'vue';
+import { defineComponent, useAttrs, computed, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, withDirectives, createCommentVNode, mergeProps, vModelText, vModelDynamic, createElementVNode } from 'vue';
 
 const _hoisted_1 = ["placeholder", "disabled", "readonly", "rows"];
 const _hoisted_2 = ["type", "placeholder", "disabled", "readonly"];
+const _hoisted_3 = {
+  key: 2,
+  class: "tx-input__capslock",
+  title: "CapsLock is on"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
-    name: "TuffInput"
+    name: "TuffInput",
+    inheritAttrs: false
   },
   __name: "TxInput",
   props: {
@@ -14,33 +20,55 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
     clearable: { type: Boolean, default: false },
-    rows: { default: 3 }
+    rows: { default: 3 },
+    prefixIcon: { default: "" },
+    suffixIcon: { default: "" }
   },
   emits: ["update:modelValue", "input", "focus", "blur", "clear"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const attrs = useAttrs();
+    const inputAttrs = computed(() => {
+      const { class: _class, style: _style, ...rest } = attrs;
+      return rest;
+    });
+    const wrapperStyle = computed(() => attrs.style);
     const inputValue = computed({
-      get: () => props.modelValue,
+      get: () => props.modelValue ?? "",
       set: (val) => {
-        emit("update:modelValue", val);
-        emit("input", val);
+        const normalized = props.type === "number" ? val === "" ? "" : Number(val) : val;
+        emit("update:modelValue", normalized);
+        emit("input", normalized);
       }
     });
     const inputEl = ref(null);
+    const isFocused = ref(false);
+    const capsLockOn = ref(false);
     const showClear = computed(() => {
-      return props.clearable && inputValue.value && !props.disabled && !props.readonly;
+      return props.clearable && inputValue.value !== "" && inputValue.value !== null && inputValue.value !== void 0 && !props.disabled && !props.readonly;
+    });
+    const showCapsLock = computed(() => {
+      return props.type === "password" && capsLockOn.value && isFocused.value;
     });
     function handleClear() {
       inputValue.value = "";
       emit("clear");
     }
     function handleFocus(e) {
+      isFocused.value = true;
       emit("focus", e);
     }
     function handleBlur(e) {
+      isFocused.value = false;
+      capsLockOn.value = false;
       emit("blur", e);
     }
+    function handleKeydown(e) {
+      if (props.type === "password") {
+        capsLockOn.value = e.getModifierState("CapsLock");
+      }
+    }
     __expose({
       focus: () => inputEl.value?.focus?.(),
       blur: () => inputEl.value?.blur?.(),
@@ -55,12 +83,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           {
             "is-disabled": __props.disabled,
             "is-readonly": __props.readonly,
-            "is-textarea": __props.type === "textarea"
-          }
-        ]])
+            "is-textarea": __props.type === "textarea",
+            "is-focused": isFocused.value
+          },
+          unref(attrs).class
+        ]]),
+        style: normalizeStyle(wrapperStyle.value)
       }, [
-        renderSlot(_ctx.$slots, "prefix", {}, void 0, true),
-        __props.type === "textarea" ? withDirectives((openBlock(), createElementBlock("textarea", {
+        renderSlot(_ctx.$slots, "prefix", {}, () => [
+          __props.prefixIcon ? (openBlock(), createElementBlock("i", {
+            key: 0,
+            class: normalizeClass(["tx-input__icon tx-input__icon--prefix", __props.prefixIcon])
+          }, null, 2)) : createCommentVNode("", true)
+        ], true),
+        __props.type === "textarea" ? withDirectives((openBlock(), createElementBlock("textarea", mergeProps({
           key: 0,
           ref_key: "inputEl",
           ref: inputEl,
@@ -69,12 +105,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           disabled: __props.disabled,
           readonly: __props.readonly,
           rows: __props.rows,
-          class: "tx-input__inner tx-input__textarea",
+          class: "tx-input__inner tx-input__textarea"
+        }, inputAttrs.value, {
           onFocus: handleFocus,
-          onBlur: handleBlur
-        }, null, 40, _hoisted_1)), [
+          onBlur: handleBlur,
+          onKeydown: handleKeydown
+        }), null, 16, _hoisted_1)), [
           [vModelText, inputValue.value]
-        ]) : withDirectives((openBlock(), createElementBlock("input", {
+        ]) : withDirectives((openBlock(), createElementBlock("input", mergeProps({
           key: 1,
           ref_key: "inputEl",
           ref: inputEl,
@@ -83,17 +121,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           placeholder: __props.placeholder,
           disabled: __props.disabled,
           readonly: __props.readonly,
-          class: "tx-input__inner",
+          class: "tx-input__inner"
+        }, inputAttrs.value, {
           onFocus: handleFocus,
-          onBlur: handleBlur
-        }, null, 40, _hoisted_2)), [
+          onBlur: handleBlur,
+          onKeydown: handleKeydown
+        }), null, 16, _hoisted_2)), [
           [vModelDynamic, inputValue.value]
         ]),
+        showCapsLock.value ? (openBlock(), createElementBlock("span", _hoisted_3, [..._cache[2] || (_cache[2] = [
+          createElementVNode("svg", {
+            viewBox: "0 0 24 24",
+            width: "14",
+            height: "14"
+          }, [
+            createElementVNode("path", {
+              fill: "currentColor",
+              d: "M12 2L4 10h3v4h10v-4h3L12 2zm-5 14v2h10v-2H7z"
+            })
+          ], -1)
+        ])])) : createCommentVNode("", true),
         showClear.value ? (openBlock(), createElementBlock("span", {
-          key: 2,
+          key: 3,
           class: "tx-input__clear",
           onClick: handleClear
-        }, [..._cache[2] || (_cache[2] = [
+        }, [..._cache[3] || (_cache[3] = [
           createElementVNode("svg", {
             viewBox: "0 0 24 24",
             width: "16",
@@ -105,8 +157,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             })
           ], -1)
         ])])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
-      ], 2);
+        renderSlot(_ctx.$slots, "suffix", {}, () => [
+          __props.suffixIcon ? (openBlock(), createElementBlock("i", {
+            key: 0,
+            class: normalizeClass(["tx-input__icon tx-input__icon--suffix", __props.suffixIcon])
+          }, null, 2)) : createCommentVNode("", true)
+        ], true)
+      ], 6);
     };
   }
 });

package/dist/es/keyframe-stroke-text/index.d.ts

@@ -0,0 +1,146 @@
+import { KeyframeStrokeTextProps } from './src/types';
+import { default as TxKeyframeStrokeText } from './src/TxKeyframeStrokeText.vue';
+
+declare const KeyframeStrokeText: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        text: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        fontSize: {
+            type: import('vue').PropType<string | number>;
+            default: number;
+        };
+        durationMs: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        strokeWidth: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        fontFamily: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        fontWeight: {
+            type: import('vue').PropType<string | number>;
+            default: number;
+        };
+        strokeColor: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        fillColor: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        text: string;
+        fontSize: string | number;
+        durationMs: number;
+        strokeWidth: number;
+        fontFamily: string;
+        fontWeight: string | number;
+        strokeColor: string;
+        fillColor: string;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        text: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        fontSize: {
+            type: import('vue').PropType<string | number>;
+            default: number;
+        };
+        durationMs: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        strokeWidth: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
+        fontFamily: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        fontWeight: {
+            type: import('vue').PropType<string | number>;
+            default: number;
+        };
+        strokeColor: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        fillColor: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+        text: string;
+        fontSize: string | number;
+        durationMs: number;
+        strokeWidth: number;
+        fontFamily: string;
+        fontWeight: string | number;
+        strokeColor: string;
+        fillColor: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    text: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    fontSize: {
+        type: import('vue').PropType<string | number>;
+        default: number;
+    };
+    durationMs: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    strokeWidth: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
+    fontFamily: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    fontWeight: {
+        type: import('vue').PropType<string | number>;
+        default: number;
+    };
+    strokeColor: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    fillColor: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    text: string;
+    fontSize: string | number;
+    durationMs: number;
+    strokeWidth: number;
+    fontFamily: string;
+    fontWeight: string | number;
+    strokeColor: string;
+    fillColor: string;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & import('vue').Plugin;
+export { KeyframeStrokeText, TxKeyframeStrokeText };
+export type { KeyframeStrokeTextProps };
+export type TxKeyframeStrokeTextInstance = InstanceType<typeof TxKeyframeStrokeText>;
+export default KeyframeStrokeText;

package/dist/es/keyframe-stroke-text/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
+import TxKeyframeStrokeText from './src/TxKeyframeStrokeText.vue.js';
+
+const KeyframeStrokeText = withInstall(TxKeyframeStrokeText);
+
+export { KeyframeStrokeText, TxKeyframeStrokeText, KeyframeStrokeText as default };

package/dist/es/keyframe-stroke-text/src/TxKeyframeStrokeText.vue.d.ts

@@ -0,0 +1,48 @@
+import { KeyframeStrokeTextProps } from './types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<KeyframeStrokeTextProps>, {
+    text: string;
+    strokeColor: string;
+    fillColor: string;
+    durationMs: number;
+    strokeWidth: number;
+    fontSize: number;
+    fontWeight: number;
+    fontFamily: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<KeyframeStrokeTextProps>, {
+    text: string;
+    strokeColor: string;
+    fillColor: string;
+    durationMs: number;
+    strokeWidth: number;
+    fontSize: number;
+    fontWeight: number;
+    fontFamily: string;
+}>>> & Readonly<{}>, {
+    text: string;
+    fontSize: string | number;
+    durationMs: number;
+    strokeWidth: number;
+    fontFamily: string;
+    fontWeight: string | number;
+    strokeColor: string;
+    fillColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/es/keyframe-stroke-text/src/TxKeyframeStrokeText.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from './TxKeyframeStrokeText.vue2.js';
+/* empty css                          */
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
+
+const TxKeyframeStrokeText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-162886b6"]]);
+
+export { TxKeyframeStrokeText as default };

package/dist/es/keyframe-stroke-text/src/TxKeyframeStrokeText.vue2.js

@@ -0,0 +1,102 @@
+import { defineComponent, ref, computed, watch, nextTick, onMounted, createElementBlock, openBlock, normalizeStyle, createElementVNode, toDisplayString } from 'vue';
+
+const _hoisted_1 = ["viewBox", "aria-label"];
+const _hoisted_2 = ["x", "y"];
+const _hoisted_3 = ["x", "y"];
+const _hoisted_4 = ["x", "y"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "TxKeyframeStrokeText"
+  },
+  __name: "TxKeyframeStrokeText",
+  props: {
+    text: { default: "" },
+    strokeColor: { default: "#4C4CFF" },
+    fillColor: { default: "#111827" },
+    durationMs: { default: 1800 },
+    strokeWidth: { default: 2 },
+    fontSize: { default: 64 },
+    fontWeight: { default: 700 },
+    fontFamily: { default: "inherit" }
+  },
+  setup(__props) {
+    const props = __props;
+    const measureRef = ref();
+    const textLength = ref(100);
+    const viewBox = ref("0 0 100 100");
+    const textX = ref(0);
+    const textY = ref(0);
+    const renderedText = computed(() => props.text || " ");
+    function toCssUnit(value) {
+      return typeof value === "number" ? `${value}px` : value;
+    }
+    function syncMetrics() {
+      const el = measureRef.value;
+      if (!el)
+        return;
+      const bbox = el.getBBox();
+      const width = Math.max(1, bbox.width);
+      const height = Math.max(1, bbox.height);
+      const padding = Math.max(4, props.strokeWidth * 3);
+      textX.value = padding - bbox.x;
+      textY.value = padding - bbox.y;
+      viewBox.value = `0 0 ${width + padding * 2} ${height + padding * 2}`;
+      textLength.value = Math.max(1, el.getComputedTextLength());
+    }
+    const styleVars = computed(() => ({
+      "--tx-kf-stroke-color": props.strokeColor,
+      "--tx-kf-fill-color": props.fillColor,
+      "--tx-kf-duration": `${props.durationMs}ms`,
+      "--tx-kf-stroke-width": `${props.strokeWidth}`,
+      "--tx-kf-stroke-length": `${textLength.value}`,
+      "--tx-kf-font-size": toCssUnit(props.fontSize),
+      "--tx-kf-font-weight": String(props.fontWeight),
+      "--tx-kf-font-family": props.fontFamily
+    }));
+    watch(
+      () => [renderedText.value, props.fontSize, props.fontWeight, props.fontFamily, props.strokeWidth],
+      async () => {
+        await nextTick();
+        syncMetrics();
+      },
+      { immediate: true }
+    );
+    onMounted(() => {
+      if ("fonts" in document) {
+        void document.fonts.ready.then(() => {
+          syncMetrics();
+        });
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        class: "tx-keyframe-stroke-text",
+        style: normalizeStyle(styleVars.value),
+        viewBox: viewBox.value,
+        preserveAspectRatio: "xMinYMid meet",
+        role: "img",
+        "aria-label": __props.text || void 0
+      }, [
+        createElementVNode("text", {
+          ref_key: "measureRef",
+          ref: measureRef,
+          class: "tx-keyframe-stroke-text__measure",
+          x: textX.value,
+          y: textY.value
+        }, toDisplayString(renderedText.value), 9, _hoisted_2),
+        createElementVNode("text", {
+          class: "tx-keyframe-stroke-text__stroke",
+          x: textX.value,
+          y: textY.value
+        }, toDisplayString(renderedText.value), 9, _hoisted_3),
+        createElementVNode("text", {
+          class: "tx-keyframe-stroke-text__fill",
+          x: textX.value,
+          y: textY.value
+        }, toDisplayString(renderedText.value), 9, _hoisted_4)
+      ], 12, _hoisted_1);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/keyframe-stroke-text/src/types.d.ts

@@ -0,0 +1,10 @@
+export interface KeyframeStrokeTextProps {
+    text?: string;
+    strokeColor?: string;
+    fillColor?: string;
+    durationMs?: number;
+    strokeWidth?: number;
+    fontSize?: string | number;
+    fontWeight?: string | number;
+    fontFamily?: string;
+}

package/dist/es/layout-skeleton/index.js

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import TxLayoutSkeleton from './src/TxLayoutSkeleton.vue.js';
 
 const LayoutSkeleton = withInstall(TxLayoutSkeleton);

package/dist/es/loading-overlay/index.d.ts

@@ -17,14 +17,14 @@ declare const LoadingOverlay: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-        spinnerSize: {
-            type: import('vue').PropType<number>;
-            default: number;
-        };
         background: {
             type: import('vue').PropType<string>;
             default: string;
         };
+        spinnerSize: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
         fullscreen: {
             type: import('vue').PropType<boolean>;
             default: boolean;
@@ -32,8 +32,8 @@ declare const LoadingOverlay: {
     }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
         text: string;
         loading: boolean;
-        spinnerSize: number;
         background: string;
+        spinnerSize: number;
         fullscreen: boolean;
     }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
         P: {};
@@ -51,14 +51,14 @@ declare const LoadingOverlay: {
             type: import('vue').PropType<boolean>;
             default: boolean;
         };
-        spinnerSize: {
-            type: import('vue').PropType<number>;
-            default: number;
-        };
         background: {
             type: import('vue').PropType<string>;
             default: string;
         };
+        spinnerSize: {
+            type: import('vue').PropType<number>;
+            default: number;
+        };
         fullscreen: {
             type: import('vue').PropType<boolean>;
             default: boolean;
@@ -66,8 +66,8 @@ declare const LoadingOverlay: {
     }>> & Readonly<{}>, {}, {}, {}, {}, {
         text: string;
         loading: boolean;
-        spinnerSize: number;
         background: string;
+        spinnerSize: number;
         fullscreen: boolean;
     }>;
     __isFragment?: never;
@@ -82,14 +82,14 @@ declare const LoadingOverlay: {
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
-    spinnerSize: {
-        type: import('vue').PropType<number>;
-        default: number;
-    };
     background: {
         type: import('vue').PropType<string>;
         default: string;
     };
+    spinnerSize: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
     fullscreen: {
         type: import('vue').PropType<boolean>;
         default: boolean;
@@ -97,8 +97,8 @@ declare const LoadingOverlay: {
 }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
     text: string;
     loading: boolean;
-    spinnerSize: number;
     background: string;
+    spinnerSize: number;
     fullscreen: boolean;
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {

package/dist/es/loading-overlay/index.js

@@ -1,4 +1,4 @@
-import { withInstall } from '../utils/withInstall.js';
+import { withInstall } from '../packages/tuffex/packages/utils/withInstall.js';
 import _sfc_main from './src/TxLoadingOverlay.vue.js';
 /* empty css                          */
 

package/dist/es/loading-overlay/src/TxLoadingOverlay.vue.d.ts

@@ -18,8 +18,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }>>> & Readonly<{}>, {
     text: string;
     loading: boolean;
-    spinnerSize: number;
     background: string;
+    spinnerSize: number;
     fullscreen: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/dist/es/loading-overlay/src/TxLoadingOverlay.vue.js

@@ -1,5 +1,6 @@
-import { defineComponent, computed, createBlock, createElementBlock, openBlock, Teleport, createCommentVNode, normalizeStyle, createElementVNode, createVNode, unref, toDisplayString, renderSlot } from 'vue';
+import { defineComponent, ref, computed, watch, createBlock, createElementBlock, openBlock, Teleport, createCommentVNode, normalizeStyle, createElementVNode, createVNode, unref, toDisplayString, renderSlot } from 'vue';
 import '../../spinner/index.js';
+import { getZIndex, nextZIndex } from '../../packages/tuffex/packages/utils/z-index-manager.js';
 import _sfc_main$1 from '../../spinner/src/TxSpinner.vue.js';
 /* empty css                               */
 
@@ -31,11 +32,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const zIndex = ref(getZIndex());
     const overlayStyle = computed(() => {
       return {
         "--tx-loading-overlay-bg": props.background
       };
     });
+    watch(
+      () => props.loading && props.fullscreen,
+      (open) => {
+        if (open)
+          zIndex.value = nextZIndex();
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       return __props.fullscreen ? (openBlock(), createBlock(Teleport, {
         key: 0,
@@ -44,7 +54,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         __props.loading ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "tx-loading-overlay tx-loading-overlay--fullscreen",
-          style: normalizeStyle(overlayStyle.value)
+          style: normalizeStyle([overlayStyle.value, { zIndex: zIndex.value }])
         }, [
           createElementVNode("div", _hoisted_1, [
             createVNode(unref(_sfc_main$1), { size: __props.spinnerSize }, null, 8, ["size"]),