@uzum-tech/ui 2.3.4 → 2.3.5

package/dist/index.js

@@ -47885,6 +47885,261 @@
     }
   });
 
+  function self$11(vars) {
+    const {
+      opacityDisabled,
+      elementsPrimary,
+      brandPrimary500,
+      fontBodyMedium,
+      fontBodySmall,
+      fontBodyLarge,
+      fontHeadingSmall,
+      fontTitleMedium,
+      fontHeadingLarge
+    } = vars;
+    return {
+      tertiaryColor: elementsPrimary,
+      primaryColor: brandPrimary500,
+      fontSize: fontBodyMedium,
+      sizeTiny: fontBodySmall,
+      sizeSmall: fontBodyLarge,
+      sizeMedium: fontTitleMedium,
+      sizeLarge: fontHeadingSmall,
+      sizeHuge: fontHeadingLarge,
+      opacitySpinning: opacityDisabled
+    };
+  }
+  const spinLight = {
+    name: "Spin",
+    common: derived,
+    self: self$11
+  };
+
+  const spinDark = {
+    name: "Spin",
+    common: derived$1,
+    self: self$11
+  };
+
+  var style$19 = c$1([c$1("@keyframes spin-rotate", `
+    from {
+      transform: rotate(0);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  `), cB("spin-container", {
+    position: "relative"
+  }, [cB("spin-body", `
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    `, [fadeInTransition()])]), cB("spin-body", `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  `), cB("spin", `
+    display: inline-flex;
+    height: var(--u-size);
+    width: var(--u-size);
+    font-size: var(--u-size);
+    color: var(--u-color);
+  `, [cM("rotate", `
+      animation: spin-rotate 2s linear infinite;
+    `)]), cB("spin-description", `
+    display: inline-block;
+    font-size: var(--u-font-size);
+    color: var(--u-text-color);
+    transition: color .3s var(--u-bezier);
+    margin-top: 8px;
+  `), cB("spin-content", `
+    opacity: 1;
+    transition: opacity .3s var(--u-bezier);
+    pointer-events: all;
+  `, [cM("spinning", `
+      user-select: none;
+      -webkit-user-select: none;
+      pointer-events: none;
+      opacity: var(--u-opacity-spinning);
+    `)])]);
+
+  const STROKE_WIDTH = {
+    tiny: 22,
+    small: 20,
+    medium: 18,
+    large: 16,
+    huge: 14
+  };
+  const spinProps = {
+    ...useTheme.props,
+    contentClass: String,
+    contentStyle: [Object, String],
+    description: String,
+    stroke: String,
+    size: {
+      type: [String, Number],
+      default: "medium"
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    strokeWidth: Number,
+    rotate: {
+      type: Boolean,
+      default: true
+    },
+    scale: Number,
+    radius: Number,
+    spinning: {
+      type: Boolean,
+      validator: () => {
+        return true;
+      },
+      default: void 0
+    },
+    color: {
+      type: [String],
+      default: "primary"
+    },
+    delay: Number
+  };
+  var _USpin = vue.defineComponent({
+    name: "Spin",
+    props: spinProps,
+    slots: Object,
+    setup(props) {
+      {
+        vue.watchEffect(() => {
+          if (props.spinning !== void 0) {
+            warnOnce(
+              "spin",
+              "`spinning` is deprecated, please use `show` instead."
+            );
+          }
+        });
+      }
+      const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+      const themeRef = useTheme(
+        "Spin",
+        "-spin",
+        style$19,
+        spinLight,
+        props,
+        mergedClsPrefixRef
+      );
+      const cssVarsRef = vue.computed(() => {
+        const { size: spinSize, color } = props;
+        const {
+          common: { cubicBezierEaseInOut },
+          self
+        } = themeRef.value;
+        const { opacitySpinning, tertiaryColor, primaryColor } = self;
+        const size = typeof spinSize === "number" ? pxfy(spinSize) : self[createKey("size", spinSize)];
+        return {
+          "--u-bezier": cubicBezierEaseInOut,
+          "--u-opacity-spinning": opacitySpinning,
+          "--u-size": size,
+          "--u-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color,
+          "--u-text-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color
+        };
+      });
+      const themeClassHandle = inlineThemeDisabled ? useThemeClass(
+        "spin",
+        vue.computed(() => {
+          const { size } = props;
+          return typeof size === "number" ? String(size) : size[0];
+        }),
+        cssVarsRef,
+        props
+      ) : void 0;
+      const compitableShow = useCompitable(props, ["spinning", "show"]);
+      const activeRef = vue.ref(false);
+      vue.watchEffect((onCleanup) => {
+        let timerId;
+        if (compitableShow.value) {
+          const { delay } = props;
+          if (delay) {
+            timerId = window.setTimeout(() => {
+              activeRef.value = true;
+            }, props.delay);
+            onCleanup(() => {
+              clearTimeout(timerId);
+            });
+            return;
+          }
+        }
+        activeRef.value = compitableShow.value;
+      });
+      return {
+        mergedClsPrefix: mergedClsPrefixRef,
+        active: activeRef,
+        mergedStrokeWidth: vue.computed(() => {
+          const { strokeWidth } = props;
+          if (strokeWidth !== void 0)
+            return strokeWidth;
+          const { size } = props;
+          return STROKE_WIDTH[typeof size === "number" ? "medium" : size];
+        }),
+        cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
+        themeClass: themeClassHandle?.themeClass,
+        onRender: themeClassHandle?.onRender
+      };
+    },
+    render() {
+      const { $slots, mergedClsPrefix, description } = this;
+      const rotate = $slots.icon && this.rotate;
+      const descriptionNode = (description || $slots.description) && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-spin-description` }, description || $slots.description?.());
+      const icon = $slots.icon ? /* @__PURE__ */ vue.h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ vue.h(
+        "div",
+        {
+          class: [
+            `${mergedClsPrefix}-spin`,
+            rotate && `${mergedClsPrefix}-spin--rotate`
+          ],
+          style: $slots.default ? "" : this.cssVars
+        },
+        $slots.icon()
+      ), descriptionNode) : /* @__PURE__ */ vue.h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ vue.h(
+        UBaseLoading,
+        {
+          clsPrefix: mergedClsPrefix,
+          style: $slots.default ? "" : this.cssVars,
+          stroke: this.stroke,
+          "stroke-width": this.mergedStrokeWidth,
+          radius: this.radius,
+          scale: this.scale,
+          class: `${mergedClsPrefix}-spin`
+        }
+      ), descriptionNode);
+      this.onRender?.();
+      return $slots.default ? /* @__PURE__ */ vue.h(
+        "div",
+        {
+          class: [`${mergedClsPrefix}-spin-container`, this.themeClass],
+          style: this.cssVars
+        },
+        /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [
+              `${mergedClsPrefix}-spin-content`,
+              this.active && `${mergedClsPrefix}-spin-content--spinning`,
+              this.contentClass
+            ],
+            style: this.contentStyle
+          },
+          $slots
+        ),
+        /* @__PURE__ */ vue.h(vue.Transition, { name: "fade-in-transition" }, {
+          default: () => this.active ? icon : null
+        })
+      ) : icon;
+    }
+  });
+
   const buttonGroupDark = {
     name: "ButtonGroup",
     common: derived$1
@@ -47929,7 +48184,7 @@
     self: self$1c
   };
 
-  function self$11(vars) {
+  function self$10(vars) {
     const {
       textPrimary,
       fontBodyMedium,
@@ -47957,12 +48212,12 @@
   const codeLight = {
     name: "Code",
     common: derived,
-    self: self$11
+    self: self$10
   };
 
-  function self$10(vars) {
+  function self$$(vars) {
     return {
-      ...self$11(vars),
+      ...self$10(vars),
       // extracted from hljs atom-one-dark.scss
       "mono-3": "#5c6370",
       "hue-1": "#56b6c2",
@@ -47978,10 +48233,10 @@
   const codeDark = {
     name: "Code",
     common: derived$1,
-    self: self$10
+    self: self$$
   };
 
-  function self$$(vars) {
+  function self$_(vars) {
     const {
       cubicBezierEaseInOut
     } = vars;
@@ -47992,13 +48247,13 @@
   const collapseTransitionLight = {
     name: "CollapseTransition",
     common: derived,
-    self: self$$
+    self: self$_
   };
 
   const collapseTransitionDark = {
     name: "CollapseTransition",
     common: derived$1,
-    self: self$$
+    self: self$_
   };
 
   var rtlStyle$g = cB("collapse-transition", [cM("rtl", `
@@ -48011,7 +48266,7 @@
     style: rtlStyle$g
   };
 
-  function self$_(vars) {
+  function self$Z(vars) {
     const {
       fontWeight,
       fontBodyLarge,
@@ -48051,13 +48306,13 @@
   const collapseLight = {
     name: "Collapse",
     common: derived,
-    self: self$_
+    self: self$Z
   };
 
   const collapseDark = {
     name: "Collapse",
     common: derived$1,
-    self: self$_
+    self: self$Z
   };
 
   var rtlStyle$f = cB("collapse", [cM("rtl", `
@@ -48080,7 +48335,7 @@
     style: rtlStyle$f
   };
 
-  function self$Z(vars) {
+  function self$Y(vars) {
     const {
       borderRadius,
       fontBodySmall,
@@ -48167,7 +48422,7 @@
     peers: {
       Popover: popoverLight
     },
-    self: self$Z
+    self: self$Y
   });
 
   const dropdownDark = {
@@ -48176,7 +48431,7 @@
     peers: {
       Popover: popoverDark
     },
-    self: self$Z
+    self: self$Y
   };
 
   const popselect = {
@@ -48188,7 +48443,7 @@
     }
   };
 
-  function self$Y(vars) {
+  function self$X(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -48203,10 +48458,10 @@
       Popover: popoverLight,
       InternalSelectMenu: internalSelectMenuLight
     },
-    self: self$Y
+    self: self$X
   });
 
-  function self$X(vars) {
+  function self$W(vars) {
     const {
       brandPrimary100,
       transparencySecondary,
@@ -48304,7 +48559,7 @@
       Input: inputLight,
       Popselect: popselectLight
     },
-    self: self$X
+    self: self$W
   });
 
   const paginationDark = {
@@ -48315,7 +48570,7 @@
       Input: inputDark,
       Popselect: popselect
     },
-    self: self$X
+    self: self$W
   };
 
   var rtlStyle$e = cB("pagination", [cM("rtl", `
@@ -48332,7 +48587,7 @@
     peers: [inputRtl]
   };
 
-  function self$W(vars) {
+  function self$V(vars) {
     const {
       heightTiny,
       heightSmall,
@@ -48424,13 +48679,13 @@
   const radioLight = {
     name: "Radio",
     common: derived,
-    self: self$W
+    self: self$V
   };
 
   const radioDark = {
     name: "Radio",
     common: derived$1,
-    self: self$W
+    self: self$V
   };
 
   var rtlStyle$d = c$1([cB("radio", [cM("rtl", `
@@ -48458,7 +48713,7 @@
     style: rtlStyle$d
   };
 
-  function self$V(vars) {
+  function self$U(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -48559,7 +48814,7 @@
       Ellipsis: ellipsisLight,
       Dropdown: dropdownLight
     },
-    self: self$V
+    self: self$U
   });
 
   const dataTableDark = {
@@ -48576,10 +48831,10 @@
       Ellipsis: ellipsisDark,
       Dropdown: dropdownDark
     },
-    self: self$V
+    self: self$U
   };
 
-  function self$U(vars) {
+  function self$T(vars) {
     const {
       opacityDisabled,
       borderRadius,
@@ -48621,7 +48876,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$U
+    self: self$T
   });
 
   const timePickerDark = {
@@ -48632,7 +48887,7 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$U
+    self: self$T
   };
 
   const itemWidth = "38px";
@@ -48678,7 +48933,7 @@
     calendarRightPaddingYearrange: "0"
   };
 
-  function self$T(vars) {
+  function self$S(vars) {
     const {
       iconMedium,
       fontWeightStrong,
@@ -48779,7 +49034,7 @@
       Scrollbar: scrollbarLight,
       Select: internalSelectionLight
     },
-    self: self$T
+    self: self$S
   });
 
   const datePickerDark = {
@@ -48792,10 +49047,10 @@
       Scrollbar: scrollbarDark,
       Select: internalSelectionDark
     },
-    self: self$T
+    self: self$S
   };
 
-  function self$S(vars) {
+  function self$R(vars) {
     const {
       borderRadius,
       lineHeightBodyLarge,
@@ -48845,13 +49100,13 @@
   const descriptionsLight = {
     name: "Descriptions",
     common: derived,
-    self: self$S
+    self: self$R
   };
 
   const descriptionsDark = {
     name: "Descriptions",
     common: derived$1,
-    self: self$S
+    self: self$R
   };
 
   var commonVars$5 = {
@@ -48865,7 +49120,7 @@
     closeBorderRadius: "100px"
   };
 
-  function self$R(vars) {
+  function self$Q(vars) {
     const {
       borderRadius,
       containerPrimary,
@@ -48922,7 +49177,7 @@
     peers: {
       Button: buttonLight
     },
-    self: self$R
+    self: self$Q
   });
 
   const dialogDark = {
@@ -48931,10 +49186,10 @@
     peers: {
       Button: buttonDark
     },
-    self: self$R
+    self: self$Q
   };
 
-  function self$Q(vars) {
+  function self$P(vars) {
     const {
       elementsQuaternary,
       textPrimary,
@@ -48954,13 +49209,13 @@
   const dividerLight = {
     name: "Divider",
     common: derived,
-    self: self$Q
+    self: self$P
   };
 
   const dividerDark = {
     name: "Divider",
     common: derived$1,
-    self: self$Q
+    self: self$P
   };
 
   var commonVars$4 = {
@@ -48976,7 +49231,7 @@
     contentBorderRadius: "24px"
   };
 
-  function self$P(vars) {
+  function self$O(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -49025,7 +49280,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$P
+    self: self$O
   });
 
   const drawerDark = {
@@ -49034,7 +49289,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$P
+    self: self$O
   };
 
   var rtlStyle$c = cB("drawer", [cM("rtl", `
@@ -49068,7 +49323,7 @@
     }
   };
 
-  function self$O() {
+  function self$N() {
     return commonVariables$1;
   }
   const dynamicInputLight = createTheme$1({
@@ -49078,7 +49333,7 @@
       Input: inputLight,
       Button: buttonLight
     },
-    self: self$O
+    self: self$N
   });
 
   var rtlStyle$b = cB("input-number", [cM("rtl", `
@@ -49119,12 +49374,12 @@
     }
   };
 
-  function self$N() {
+  function self$M() {
     return commonVars$3;
   }
   const spaceLight = {
     name: "Space",
-    self: self$N
+    self: self$M
   };
 
   var rtlStyle$9 = cB("space", [cM("rtl", `
@@ -49196,7 +49451,7 @@
     }
   };
 
-  function self$M(vars) {
+  function self$L(vars) {
     const {
       containerPrimary,
       elementsQuaternary,
@@ -49212,7 +49467,7 @@
   const themeLight$4 = {
     name: "FloatButtonGroup",
     common: derived,
-    self: self$M
+    self: self$L
   };
 
   const floatButtonDark = {
@@ -49247,7 +49502,7 @@
     }
   };
 
-  function self$L(vars) {
+  function self$K(vars) {
     const {
       containerPrimary,
       textPrimary,
@@ -49276,10 +49531,10 @@
   const themeLight$3 = {
     name: "FloatButton",
     common: derived,
-    self: self$L
+    self: self$K
   };
 
-  function self$K(vars) {
+  function self$J(vars) {
     const {
       heightSmall,
       heightMedium,
@@ -49334,16 +49589,16 @@
   const formLight = {
     name: "Form",
     common: derived,
-    self: self$K
+    self: self$J
   };
 
   const formItemDark = {
     name: "Form",
     common: derived$1,
-    self: self$K
+    self: self$J
   };
 
-  function self$J(vars) {
+  function self$I(vars) {
     const {
       brandPrimary500,
       staticGreen,
@@ -49380,16 +49635,16 @@
   const gradientTextLight = {
     name: "GradientText",
     common: derived,
-    self: self$J
+    self: self$I
   };
 
   const gradientTextDark = {
     name: "GradientText",
     common: derived$1,
-    self: self$J
+    self: self$I
   };
 
-  function self$I(vars) {
+  function self$H(vars) {
     const {
       textSecondary
     } = vars;
@@ -49404,7 +49659,7 @@
       Button: buttonLight,
       Input: inputLight
     },
-    self: self$I
+    self: self$H
   });
 
   const inputNumberDark = {
@@ -49414,10 +49669,10 @@
       Button: buttonDark,
       Input: inputDark
     },
-    self: self$I
+    self: self$H
   };
 
-  function self$H() {
+  function self$G() {
     return {
       inputWidthSmall: "44px",
       inputWidthMedium: "50px",
@@ -49433,7 +49688,7 @@
     peers: {
       Input: inputLight
     },
-    self: self$H
+    self: self$G
   });
 
   const inputOtpDark = {
@@ -49442,7 +49697,7 @@
     peers: {
       Input: inputDark
     },
-    self: self$H
+    self: self$G
   };
 
   var rtlStyle$8 = cB("input-otp", [cM("rtl", `
@@ -49454,7 +49709,7 @@
     style: rtlStyle$8
   };
 
-  function self$G(vars) {
+  function self$F(vars) {
     const {
       textPrimary,
       textQuaternary,
@@ -49500,7 +49755,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$G
+    self: self$F
   });
 
   const layoutDark = {
@@ -49509,7 +49764,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$G
+    self: self$F
   };
 
   const rowDark = {
@@ -49546,7 +49801,7 @@
     style: rtlStyle$7
   };
 
-  function self$F(vars) {
+  function self$E(vars) {
     const {
       brandPrimary500,
       staticRed
@@ -49560,16 +49815,16 @@
   const loadingBarLight = {
     name: "LoadingBar",
     common: derived,
-    self: self$F
+    self: self$E
   };
 
   const loadingBarDark = {
     name: "LoadingBar",
     common: derived$1,
-    self: self$F
+    self: self$E
   };
 
-  function self$E(vars) {
+  function self$D(vars) {
     const {
       fontBodyMedium,
       textPrimary,
@@ -49592,7 +49847,7 @@
       Scrollbar: scrollbarLight,
       Code: codeLight
     },
-    self: self$E
+    self: self$D
   });
 
   const logDark = {
@@ -49602,25 +49857,25 @@
       Scrollbar: scrollbarDark,
       Code: codeDark
     },
-    self: self$E
+    self: self$D
   };
 
-  function self$D() {
+  function self$C() {
     return {};
   }
   const marqueeLight = {
     name: "Marquee",
     common: derived,
-    self: self$D
+    self: self$C
   };
 
   const marqueeDark = {
     name: "Marquee",
     common: derived$1,
-    self: self$D
+    self: self$C
   };
 
-  function self$C(vars) {
+  function self$B(vars) {
     const {
       shadowDepth2
     } = vars;
@@ -49635,7 +49890,7 @@
       InternalSelectMenu: internalSelectMenuLight,
       Input: inputLight
     },
-    self: self$C
+    self: self$B
   });
 
   const listDark = {
@@ -49645,7 +49900,7 @@
       InternalSelectMenu: internalSelectMenuDark,
       Input: inputDark
     },
-    self: self$C
+    self: self$B
   };
 
   function createPartialInvertedVars(color, activeItemColor, activeTextColor, groupTextColor) {
@@ -49688,7 +49943,7 @@
       groupTextColorInverted: groupTextColor
     };
   }
-  function self$B(vars) {
+  function self$A(vars) {
     const {
       textSecondary,
       borderRadiusSmall,
@@ -49756,7 +50011,7 @@
       Tooltip: tooltipLight,
       Dropdown: dropdownLight
     },
-    self: self$B
+    self: self$A
   });
 
   const menuDark = {
@@ -49766,10 +50021,10 @@
       Tooltip: tooltipDark,
       Dropdown: dropdownDark
     },
-    self: self$B
+    self: self$A
   };
 
-  function self$A(vars) {
+  function self$z(vars) {
     const {
       transparencyModal,
       containerPrimary,
@@ -49793,7 +50048,7 @@
       Dialog: dialogLight,
       Card: cardLight
     },
-    self: self$A
+    self: self$z
   });
 
   const modalDark = {
@@ -49804,7 +50059,7 @@
       Dialog: dialogDark,
       Card: cardDark$1
     },
-    self: self$A
+    self: self$z
   };
 
   var commonVars$2 = {
@@ -49813,7 +50068,7 @@
     closeBorderRadius: "50px"
   };
 
-  function self$z(vars) {
+  function self$y(vars) {
     const {
       fontWeightStrong,
       lineHeightBodyMedium,
@@ -49946,7 +50201,7 @@
     peers: {
       Scrollbar: scrollbarLight
     },
-    self: self$z
+    self: self$y
   });
 
   const notificationDark = {
@@ -49955,7 +50210,7 @@
     peers: {
       Scrollbar: scrollbarDark
     },
-    self: self$z
+    self: self$y
   };
 
   var rtlStyle$6 = cB("notification", [cM("rtl", `
@@ -49985,7 +50240,7 @@
     style: rtlStyle$6
   };
 
-  function self$y(vars) {
+  function self$x(vars) {
     const {
       fontWeightStrong,
       fontTitleSmall,
@@ -50011,13 +50266,13 @@
   const pageHeaderLight = createTheme$1({
     name: "PageHeader",
     common: derived,
-    self: self$y
+    self: self$x
   });
 
   const pageHeaderDark = {
     name: "PageHeader",
     common: derived$1,
-    self: self$y
+    self: self$x
   };
 
   var rtlStyle$5 = cB("page-header-wrapper", [cM("rtl", [cB("page-header-header", `
@@ -50044,7 +50299,7 @@
     style: rtlStyle$5
   };
 
-  function self$x(vars) {
+  function self$w(vars) {
     const {
       fontBodyMedium,
       staticOrange
@@ -50062,7 +50317,7 @@
       Button: buttonLight,
       Popover: popoverLight
     },
-    self: self$x
+    self: self$w
   });
 
   const popconfirmDark = {
@@ -50072,10 +50327,10 @@
       Button: buttonDark,
       Popover: popoverDark
     },
-    self: self$x
+    self: self$w
   };
 
-  function self$w(vars) {
+  function self$v(vars) {
     const {
       elementsQuinary,
       brandSecondary600
@@ -50091,16 +50346,16 @@
   const themeLight$2 = {
     name: "Rate",
     common: derived,
-    self: self$w
+    self: self$v
   };
 
   const rateDark = {
     name: "Rate",
     common: derived$1,
-    self: self$w
+    self: self$v
   };
 
-  function self$v(vars) {
+  function self$u(vars) {
     const {
       fontHeadingSmall,
       fontHeadingMedium,
@@ -50149,16 +50404,16 @@
   const resultLight = {
     name: "Result",
     common: derived,
-    self: self$v
+    self: self$u
   };
 
   const resultDark = {
     name: "Result",
     common: derived$1,
-    self: self$v
+    self: self$u
   };
 
-  function self$u(vars) {
+  function self$t(vars) {
     const {
       borderRadius,
       opacityDisabled,
@@ -50205,48 +50460,12 @@
   const sliderLight = {
     name: "Slider",
     common: derived,
-    self: self$u
+    self: self$t
   };
 
   const sliderDark = {
     name: "Slider",
     common: derived$1,
-    self: self$u
-  };
-
-  function self$t(vars) {
-    const {
-      opacityDisabled,
-      elementsPrimary,
-      brandPrimary500,
-      fontBodyMedium,
-      fontBodySmall,
-      fontBodyLarge,
-      fontHeadingSmall,
-      fontTitleMedium,
-      fontHeadingLarge
-    } = vars;
-    return {
-      tertiaryColor: elementsPrimary,
-      primaryColor: brandPrimary500,
-      fontSize: fontBodyMedium,
-      sizeTiny: fontBodySmall,
-      sizeSmall: fontBodyLarge,
-      sizeMedium: fontTitleMedium,
-      sizeLarge: fontHeadingSmall,
-      sizeHuge: fontHeadingLarge,
-      opacitySpinning: opacityDisabled
-    };
-  }
-  const spinLight = {
-    name: "Spin",
-    common: derived,
-    self: self$t
-  };
-
-  const spinDark = {
-    name: "Spin",
-    common: derived$1,
     self: self$t
   };
 
@@ -51163,8 +51382,31 @@
     renderToolbar: Function
   };
   const imageContextKey = createInjectionKey("u-image");
+  const BLEEDING = 32;
+  const imagePreviewProps = {
+    ...imagePreviewSharedProps,
+    src: String,
+    show: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultShow: Boolean,
+    "onUpdate:show": [Function, Array],
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    spinProps: {
+      type: Object,
+      default: void 0
+    },
+    onUpdateShow: [Function, Array],
+    onNext: Function,
+    onPrev: Function,
+    onClose: [Function, Array]
+  };
 
-  var style$19 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
+  var style$18 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
     position: fixed;
     left: 0;
     right: 0;
@@ -51198,7 +51440,17 @@
       padding: 0 8px;
       font-size: 28px;
       cursor: pointer;
-    `), fadeInTransition()]), cB("image-preview-wrapper", `
+    `), fadeInTransition()]), cB("image-preview-loading", `
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  `), cB("image-preview-wrapper", `
     position: absolute;
     left: 0;
     right: 0;
@@ -51224,31 +51476,17 @@
       border-radius: inherit;
     `)])]);
 
-  const BLEEDING = 32;
-  const imagePreviewProps = {
-    ...imagePreviewSharedProps,
-    src: String,
-    show: {
-      type: Boolean,
-      default: void 0
-    },
-    defaultShow: Boolean,
-    "onUpdate:show": [Function, Array],
-    onUpdateShow: [Function, Array],
-    onNext: Function,
-    onPrev: Function,
-    onClose: [Function, Array]
-  };
   var _UImagePreview = vue.defineComponent({
     name: "ImagePreview",
     props: imagePreviewProps,
+    slots: Object,
     setup(props) {
       const { src } = vue.toRefs(props);
       const { mergedClsPrefixRef } = useConfig(props);
       const themeRef = useTheme(
         "Image",
         "-image",
-        style$19,
+        style$18,
         imageLight,
         props,
         mergedClsPrefixRef
@@ -51743,7 +51981,7 @@
                           class: `${clsPrefix}-image-preview-wrapper`,
                           ref: "previewWrapperRef"
                         },
-                        /* @__PURE__ */ vue.h(
+                        !this.loading ? /* @__PURE__ */ vue.h(
                           "img",
                           {
                             ...previewedImgProps,
@@ -51759,13 +51997,18 @@
                             ref: "previewRef",
                             onDragstart: this.handleDragStart
                           }
-                        )
+                        ) : null
                       ),
                       [[vue.vShow, this.mergedShow]]
                     );
                   }
                 }
-              )
+              ),
+              this.mergedShow && this.loading && /* @__PURE__ */ vue.h("div", { class: `${clsPrefix}-image-preview-loading` }, /* @__PURE__ */ vue.h(_USpin, { ...this.spinProps }, {
+                default: this.$slots["spin-default"],
+                icon: this.$slots["spin-icon"],
+                description: this.$slots["spin-description"]
+              }))
             ),
             [[zindexable, { enabled: this.mergedShow }]]
           );
@@ -52157,225 +52400,6 @@
     }
   });
 
-  var style$18 = c$1([c$1("@keyframes spin-rotate", `
-    from {
-      transform: rotate(0);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  `), cB("spin-container", {
-    position: "relative"
-  }, [cB("spin-body", `
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translateX(-50%) translateY(-50%);
-    `, [fadeInTransition()])]), cB("spin-body", `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-  `), cB("spin", `
-    display: inline-flex;
-    height: var(--u-size);
-    width: var(--u-size);
-    font-size: var(--u-size);
-    color: var(--u-color);
-  `, [cM("rotate", `
-      animation: spin-rotate 2s linear infinite;
-    `)]), cB("spin-description", `
-    display: inline-block;
-    font-size: var(--u-font-size);
-    color: var(--u-text-color);
-    transition: color .3s var(--u-bezier);
-    margin-top: 8px;
-  `), cB("spin-content", `
-    opacity: 1;
-    transition: opacity .3s var(--u-bezier);
-    pointer-events: all;
-  `, [cM("spinning", `
-      user-select: none;
-      -webkit-user-select: none;
-      pointer-events: none;
-      opacity: var(--u-opacity-spinning);
-    `)])]);
-
-  const STROKE_WIDTH = {
-    tiny: 22,
-    small: 20,
-    medium: 18,
-    large: 16,
-    huge: 14
-  };
-  const spinProps = {
-    ...useTheme.props,
-    contentClass: String,
-    contentStyle: [Object, String],
-    description: String,
-    stroke: String,
-    size: {
-      type: [String, Number],
-      default: "medium"
-    },
-    show: {
-      type: Boolean,
-      default: true
-    },
-    strokeWidth: Number,
-    rotate: {
-      type: Boolean,
-      default: true
-    },
-    scale: Number,
-    radius: Number,
-    spinning: {
-      type: Boolean,
-      validator: () => {
-        return true;
-      },
-      default: void 0
-    },
-    color: {
-      type: [String],
-      default: "primary"
-    },
-    delay: Number
-  };
-  var _USpin = vue.defineComponent({
-    name: "Spin",
-    props: spinProps,
-    slots: Object,
-    setup(props) {
-      {
-        vue.watchEffect(() => {
-          if (props.spinning !== void 0) {
-            warnOnce(
-              "spin",
-              "`spinning` is deprecated, please use `show` instead."
-            );
-          }
-        });
-      }
-      const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
-      const themeRef = useTheme(
-        "Spin",
-        "-spin",
-        style$18,
-        spinLight,
-        props,
-        mergedClsPrefixRef
-      );
-      const cssVarsRef = vue.computed(() => {
-        const { size: spinSize, color } = props;
-        const {
-          common: { cubicBezierEaseInOut },
-          self
-        } = themeRef.value;
-        const { opacitySpinning, tertiaryColor, primaryColor } = self;
-        const size = typeof spinSize === "number" ? pxfy(spinSize) : self[createKey("size", spinSize)];
-        return {
-          "--u-bezier": cubicBezierEaseInOut,
-          "--u-opacity-spinning": opacitySpinning,
-          "--u-size": size,
-          "--u-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color,
-          "--u-text-color": color === "tertiary" ? tertiaryColor : color === "primary" ? primaryColor : color
-        };
-      });
-      const themeClassHandle = inlineThemeDisabled ? useThemeClass(
-        "spin",
-        vue.computed(() => {
-          const { size } = props;
-          return typeof size === "number" ? String(size) : size[0];
-        }),
-        cssVarsRef,
-        props
-      ) : void 0;
-      const compitableShow = useCompitable(props, ["spinning", "show"]);
-      const activeRef = vue.ref(false);
-      vue.watchEffect((onCleanup) => {
-        let timerId;
-        if (compitableShow.value) {
-          const { delay } = props;
-          if (delay) {
-            timerId = window.setTimeout(() => {
-              activeRef.value = true;
-            }, props.delay);
-            onCleanup(() => {
-              clearTimeout(timerId);
-            });
-            return;
-          }
-        }
-        activeRef.value = compitableShow.value;
-      });
-      return {
-        mergedClsPrefix: mergedClsPrefixRef,
-        active: activeRef,
-        mergedStrokeWidth: vue.computed(() => {
-          const { strokeWidth } = props;
-          if (strokeWidth !== void 0)
-            return strokeWidth;
-          const { size } = props;
-          return STROKE_WIDTH[typeof size === "number" ? "medium" : size];
-        }),
-        cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
-        themeClass: themeClassHandle?.themeClass,
-        onRender: themeClassHandle?.onRender
-      };
-    },
-    render() {
-      const { $slots, mergedClsPrefix, description } = this;
-      const rotate = $slots.icon && this.rotate;
-      const descriptionNode = (description || $slots.description) && /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefix}-spin-description` }, description || $slots.description?.());
-      const icon = $slots.icon ? /* @__PURE__ */ vue.h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ vue.h(
-        "div",
-        {
-          class: [
-            `${mergedClsPrefix}-spin`,
-            rotate && `${mergedClsPrefix}-spin--rotate`
-          ],
-          style: $slots.default ? "" : this.cssVars
-        },
-        $slots.icon()
-      ), descriptionNode) : /* @__PURE__ */ vue.h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] }, /* @__PURE__ */ vue.h(
-        UBaseLoading,
-        {
-          clsPrefix: mergedClsPrefix,
-          style: $slots.default ? "" : this.cssVars,
-          stroke: this.stroke,
-          "stroke-width": this.mergedStrokeWidth,
-          radius: this.radius,
-          scale: this.scale,
-          class: `${mergedClsPrefix}-spin`
-        }
-      ), descriptionNode);
-      this.onRender?.();
-      return $slots.default ? /* @__PURE__ */ vue.h(
-        "div",
-        {
-          class: [`${mergedClsPrefix}-spin-container`, this.themeClass],
-          style: this.cssVars
-        },
-        /* @__PURE__ */ vue.h(
-          "div",
-          {
-            class: [
-              `${mergedClsPrefix}-spin-content`,
-              this.active && `${mergedClsPrefix}-spin-content--spinning`,
-              this.contentClass
-            ],
-            style: this.contentStyle
-          },
-          $slots
-        ),
-        /* @__PURE__ */ vue.h(vue.Transition, { name: "fade-in-transition" }, {
-          default: () => this.active ? icon : null
-        })
-      ) : icon;
-    }
-  });
-
   function useUploadActionsRender(options) {
     const {
       clsPrefix,
@@ -117680,7 +117704,7 @@ ${icon.label}`.toLowerCase()
     });
   }
 
-  var version = "2.3.4";
+  var version = "2.3.5";
 
   function create({
     componentPrefix = "U",