@sdata/web-vue 1.19.0 → 2.1.0

package/es/qr-code/style/index.scss

@@ -0,0 +1,111 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/qr-code/style/token.scss' as *;
+
+$qr-code-prefix-cls: string.unquote('#{theme.$prefix}-qr-code');
+
+.#{$qr-code-prefix-cls} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: $qr-code-padding;
+  overflow: hidden;
+  background-color: $qr-code-color-bg;
+  border: theme.$border-1 theme.$border-solid $qr-code-color-border;
+  border-radius: $qr-code-border-radius;
+
+  &-borderless {
+    padding: 0;
+    border-color: transparent;
+  }
+
+  &-canvas,
+  &-svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-svg {
+    line-height: 0;
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: $qr-code-icon-padding;
+    background-color: $qr-code-color-bg;
+    border-radius: $qr-code-border-radius;
+    transform: translate(-50%, -50%);
+
+    img {
+      display: block;
+    }
+  }
+
+  &-cover {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background: $qr-code-color-mask-bg;
+  }
+
+  &-status {
+    display: inline-flex;
+    flex-direction: column;
+    gap: $qr-code-status-gap;
+    align-items: center;
+    color: $qr-code-color-text;
+    font-size: $qr-code-font-size;
+    line-height: theme.$line-height-base;
+  }
+
+  &-expired,
+  &-scanned {
+    margin: 0;
+    font-weight: $qr-code-font-weight;
+  }
+
+  &-expired {
+    color: $qr-code-color-expired;
+  }
+
+  &-scanned {
+    color: $qr-code-color-scanned;
+  }
+
+  &-refresh-btn {
+    padding: 0;
+    color: $qr-code-color-refresh;
+    font-size: $qr-code-font-size-secondary;
+    line-height: theme.$line-height-base;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  &-refresh-btn:hover {
+    color: theme.$color-primary-7;
+  }
+
+  &-refresh-btn:focus-visible {
+    outline: theme.$border-1 theme.$border-solid theme.$color-primary-6;
+    outline-offset: theme.$spacing-2;
+  }
+}

package/es/qr-code/style/token.scss

@@ -0,0 +1,36 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$qr-code-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));
+
+$qr-code-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$qr-code-color-mask-bg: rgb(255 255 255 / 88%);
+
+$qr-code-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$qr-code-color-text-secondary: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$qr-code-color-refresh: $color-primary-6;
+
+$qr-code-color-scanned: $color-success-6;
+
+$qr-code-color-expired: $color-danger-6;
+
+$qr-code-border-radius: global.$radius-medium;
+
+$qr-code-padding: global.$spacing-5;
+
+$qr-code-icon-padding: global.$spacing-3;
+
+$qr-code-status-gap: global.$spacing-4;
+
+$qr-code-font-size: global.$font-size-body-3;
+
+$qr-code-font-size-secondary: global.$font-size-body-2;
+
+$qr-code-font-weight: global.$font-weight-500;

package/es/qr-code/types.d.ts

@@ -0,0 +1,19 @@
+import type { SpinProps } from '../spin';
+export type QrCodeType = 'canvas' | 'svg';
+export type QrCodeErrorLevel = 'L' | 'M' | 'Q' | 'H';
+export type QrCodeStatusType = 'active' | 'expired' | 'loading' | 'scanned';
+export type QrCodeInactiveStatus = Exclude<QrCodeStatusType, 'active'>;
+export type QrCodeIconSize = number | {
+    width: number;
+    height: number;
+};
+export type QrCodeValue = string | string[];
+export type QrCodeStatusRenderInfo = {
+    status: QrCodeInactiveStatus;
+    onRefresh: () => void;
+};
+export type QrCodeStatusProps = {
+    prefixCls: string;
+    status: QrCodeInactiveStatus;
+    spinProps?: SpinProps;
+};

package/es/radio/index.d.ts

@@ -39,8 +39,8 @@ declare const Radio: {
         change: (_value: string | number | boolean, _ev: Event) => true;
     }, import("vue").PublicProps, {
         type: "button" | "radio";
-        value: string | number | boolean;
         disabled: boolean;
+        value: string | number | boolean;
         modelValue: string | number | boolean;
         defaultChecked: boolean;
         uninjectGroupContext: boolean;
@@ -72,7 +72,7 @@ declare const Radio: {
                 default: boolean;
             };
         }>> & Readonly<{}>, {
-            size: "small" | "mini" | "medium" | "large";
+            size: "medium" | "large" | "small" | "mini";
             disabled: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     } & import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -112,8 +112,8 @@ declare const Radio: {
         "onUpdate:modelValue"?: ((_value: string | number | boolean) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         type: "button" | "radio";
-        value: string | number | boolean;
         disabled: boolean;
+        value: string | number | boolean;
         modelValue: string | number | boolean;
         defaultChecked: boolean;
         uninjectGroupContext: boolean;
@@ -154,8 +154,8 @@ declare const Radio: {
     change: (_value: string | number | boolean, _ev: Event) => true;
 }, string, {
     type: "button" | "radio";
-    value: string | number | boolean;
     disabled: boolean;
+    value: string | number | boolean;
     modelValue: string | number | boolean;
     defaultChecked: boolean;
     uninjectGroupContext: boolean;
@@ -187,7 +187,7 @@ declare const Radio: {
             default: boolean;
         };
     }>> & Readonly<{}>, {
-        size: "small" | "mini" | "medium" | "large";
+        size: "medium" | "large" | "small" | "mini";
         disabled: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 } & import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {

package/es/radio/radio.d.ts

@@ -58,8 +58,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: ((_value: string | number | boolean) => any) | undefined;
 }>, {
     type: "button" | "radio";
-    value: string | number | boolean;
     disabled: boolean;
+    value: string | number | boolean;
     modelValue: string | number | boolean;
     defaultChecked: boolean;
     uninjectGroupContext: boolean;
@@ -91,7 +91,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
     }>> & Readonly<{}>, {
-        size: "small" | "mini" | "medium" | "large";
+        size: "medium" | "large" | "small" | "mini";
         disabled: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/radio/style/index.css

@@ -26,7 +26,7 @@
 }
 .sd-radio > input[type=radio]:focus + .sd-radio-icon-hover::before,
 .sd-radio-button > input[type=radio]:focus + .sd-radio-icon-hover::before {
-  background-color: var(--color-neutral-2);
+  background-color: var(--sd-color-neutral-2);
 }
 
 .sd-icon-hover.sd-radio-icon-hover::before {
@@ -45,7 +45,7 @@
 }
 .sd-radio-label {
   margin-left: 8px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-radio-icon {
   position: relative;
@@ -54,8 +54,8 @@
   width: 14px;
   height: 14px;
   line-height: 14px;
-  border: 2px solid var(--color-neutral-3);
-  border-radius: var(--border-radius-circle);
+  border: 2px solid var(--sd-color-neutral-3);
+  border-radius: var(--sd-border-radius-circle);
 }
 .sd-radio-icon::after {
   position: absolute;
@@ -65,25 +65,25 @@
   box-sizing: border-box;
   width: 10px;
   height: 10px;
-  background-color: var(--color-bg-2);
-  border-radius: var(--border-radius-circle);
+  background-color: var(--sd-color-bg-2);
+  border-radius: var(--sd-border-radius-circle);
   transform: scale(1);
   transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
   content: "";
 }
 .sd-radio:hover .sd-radio-icon {
-  border-color: var(--color-neutral-3);
+  border-color: var(--sd-color-neutral-3);
 }
 .sd-radio-checked .sd-radio-icon {
-  background-color: rgb(var(--primary-6));
-  border-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
+  border-color: rgb(var(--sd-primary-6));
 }
 .sd-radio-checked .sd-radio-icon::after {
-  background-color: var(--color-white);
+  background-color: var(--sd-color-white);
   transform: scale(0.4);
 }
 .sd-radio-checked:hover .sd-radio-icon {
-  border-color: rgb(var(--primary-6));
+  border-color: rgb(var(--sd-primary-6));
 }
 .sd-radio-disabled {
   cursor: not-allowed;
@@ -92,29 +92,29 @@
   cursor: not-allowed;
 }
 .sd-radio-disabled .sd-radio-label {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
 }
 .sd-radio-disabled .sd-radio-icon {
-  border-color: var(--color-neutral-3);
+  border-color: var(--sd-color-neutral-3);
 }
 .sd-radio-disabled .sd-radio-icon::after {
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
 }
 .sd-radio-disabled:hover .sd-radio-icon {
-  border-color: var(--color-neutral-3);
+  border-color: var(--sd-color-neutral-3);
 }
 .sd-radio-checked.sd-radio-disabled .sd-radio-icon, .sd-radio-checked.sd-radio-disabled:hover .sd-radio-icon {
-  background-color: var(--color-primary-light-3);
+  background-color: var(--sd-color-primary-light-3);
   border-color: transparent;
 }
 .sd-radio-checked.sd-radio-disabled .sd-radio-icon::after {
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
 }
 .sd-radio-checked.sd-radio-disabled .sd-radio-label {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
 }
 .sd-radio:hover .sd-radio-icon-hover::before {
-  background-color: var(--color-neutral-2);
+  background-color: var(--sd-color-neutral-2);
 }
 
 .sd-radio-group {
@@ -128,19 +128,19 @@
   display: inline-flex;
   padding: 1.5px;
   line-height: 26px;
-  background-color: var(--color-fill-2);
-  border-radius: var(--border-radius-small);
+  background-color: var(--sd-color-fill-2);
+  border-radius: var(--sd-border-radius-small);
 }
 
 .sd-radio-button {
   position: relative;
   display: inline-block;
   margin: 1.5px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 14px;
   line-height: 26px;
   background-color: transparent;
-  border-radius: var(--border-radius-small);
+  border-radius: var(--sd-border-radius-small);
   cursor: pointer;
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
 }
@@ -156,7 +156,7 @@
   display: block;
   width: 1px;
   height: 14px;
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
   transform: translateY(-50%);
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
   content: "";
@@ -165,21 +165,21 @@
   opacity: 0;
 }
 .sd-radio-button:hover {
-  color: var(--color-text-1);
-  background-color: var(--color-bg-5);
+  color: var(--sd-color-text-1);
+  background-color: var(--sd-color-bg-5);
 }
 .sd-radio-button.sd-radio-checked {
-  color: rgb(var(--primary-6));
-  background-color: var(--color-bg-5);
+  color: rgb(var(--sd-primary-6));
+  background-color: var(--sd-color-bg-5);
 }
 .sd-radio-button.sd-radio-disabled {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
   background-color: transparent;
   cursor: not-allowed;
 }
 .sd-radio-button.sd-radio-disabled.sd-radio-checked {
-  color: var(--color-primary-light-3);
-  background-color: var(--color-bg-5);
+  color: var(--sd-color-primary-light-3);
+  background-color: var(--sd-color-bg-5);
 }
 
 .sd-radio-group-size-small {
@@ -215,8 +215,8 @@
 
 :where(body, [sd-theme])[sd-theme=dark] .sd-radio-button.sd-radio-checked,
 :where(body, [sd-theme])[sd-theme=dark] .sd-radio-button:not(.sd-radio-disabled):hover {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
 }
 :where(body, [sd-theme])[sd-theme=dark] .sd-radio-button::after {
-  background-color: var(--color-bg-3);
+  background-color: var(--sd-color-bg-3);
 }

package/es/rate/index.d.ts

@@ -47,8 +47,8 @@ declare const Rate: {
         change: (_value: number) => true;
         hoverChange: (_value: number) => true;
     }, import("vue").PublicProps, {
-        readonly: boolean;
         disabled: boolean;
+        readonly: boolean;
         defaultValue: number;
         modelValue: number;
         allowClear: boolean;
@@ -103,8 +103,8 @@ declare const Rate: {
         "onUpdate:modelValue"?: ((_value: number) => any) | undefined;
         onHoverChange?: ((_value: number) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
-        readonly: boolean;
         disabled: boolean;
+        readonly: boolean;
         defaultValue: number;
         modelValue: number;
         allowClear: boolean;
@@ -160,8 +160,8 @@ declare const Rate: {
     change: (_value: number) => true;
     hoverChange: (_value: number) => true;
 }, string, {
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     defaultValue: number;
     modelValue: number;
     allowClear: boolean;

package/es/rate/rate.d.ts

@@ -80,8 +80,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: ((_value: number) => any) | undefined;
     onHoverChange?: ((_value: number) => any) | undefined;
 }>, {
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     defaultValue: number;
     modelValue: number;
     allowClear: boolean;

package/es/rate/style/index.css

@@ -31,7 +31,7 @@
 }
 .sd-rate-character {
   position: relative;
-  color: var(--color-fill-3);
+  color: var(--sd-color-fill-3);
   transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-rate-character:not(:last-child) {
@@ -56,10 +56,10 @@
   animation: sd-rate-scale 0.4s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-rate-character-full .sd-rate-character-right {
-  color: rgb(var(--gold-6));
+  color: rgb(var(--sd-gold-6));
 }
 .sd-rate-character-half .sd-rate-character-left {
-  color: rgb(var(--gold-6));
+  color: rgb(var(--sd-gold-6));
   opacity: 1;
 }
 .sd-rate-character-disabled {

package/es/resize-box/index.d.ts

@@ -40,7 +40,7 @@ declare const ResizeBox: {
         wrapperRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
         onMoveStart: (direction: import("./resize-box.vue").DirectionType, e: MouseEvent) => void;
         isHorizontal: (direction: import("./resize-box.vue").DirectionType) => boolean;
-        allowDirections: import("vue").ComputedRef<("top" | "bottom" | "left" | "right")[]>;
+        allowDirections: import("vue").ComputedRef<("left" | "right" | "bottom" | "top")[]>;
         onTiggerResize: (direction: import("./resize-box.vue").DirectionType, entry: ResizeObserverEntry) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:width': (_width: number) => true;
@@ -53,7 +53,7 @@ declare const ResizeBox: {
         movingEnd: (_ev: MouseEvent) => true;
     }, import("vue").PublicProps, {
         component: string;
-        directions: ("top" | "bottom" | "left" | "right")[];
+        directions: ("left" | "right" | "bottom" | "top")[];
     }, true, {}, {}, {
         ResizeTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             prefixCls: {
@@ -377,11 +377,11 @@ declare const ResizeBox: {
         wrapperRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
         onMoveStart: (direction: import("./resize-box.vue").DirectionType, e: MouseEvent) => void;
         isHorizontal: (direction: import("./resize-box.vue").DirectionType) => boolean;
-        allowDirections: import("vue").ComputedRef<("top" | "bottom" | "left" | "right")[]>;
+        allowDirections: import("vue").ComputedRef<("left" | "right" | "bottom" | "top")[]>;
         onTiggerResize: (direction: import("./resize-box.vue").DirectionType, entry: ResizeObserverEntry) => void;
     }, {}, {}, {}, {
         component: string;
-        directions: ("top" | "bottom" | "left" | "right")[];
+        directions: ("left" | "right" | "bottom" | "top")[];
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -424,7 +424,7 @@ declare const ResizeBox: {
     wrapperRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
     onMoveStart: (direction: import("./resize-box.vue").DirectionType, e: MouseEvent) => void;
     isHorizontal: (direction: import("./resize-box.vue").DirectionType) => boolean;
-    allowDirections: import("vue").ComputedRef<("top" | "bottom" | "left" | "right")[]>;
+    allowDirections: import("vue").ComputedRef<("left" | "right" | "bottom" | "top")[]>;
     onTiggerResize: (direction: import("./resize-box.vue").DirectionType, entry: ResizeObserverEntry) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:width': (_width: number) => true;
@@ -437,7 +437,7 @@ declare const ResizeBox: {
     movingEnd: (_ev: MouseEvent) => true;
 }, string, {
     component: string;
-    directions: ("top" | "bottom" | "left" | "right")[];
+    directions: ("left" | "right" | "bottom" | "top")[];
 }, {}, string, {}, {
     ResizeTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         prefixCls: {

package/es/resize-box/resize-box.js

@@ -41,6 +41,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		_: 3
 	}, 16, ["class", "style"]);
 }
-var resize_box_default = /* @__PURE__ */ _plugin_vue_export_helper_default(resize_box_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var resize_box_default = /*#__PURE__*/ _plugin_vue_export_helper_default(resize_box_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { resize_box_default as default };

package/es/resize-box/resize-box.vue.d.ts

@@ -32,7 +32,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     wrapperRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
     onMoveStart: (direction: DirectionType, e: MouseEvent) => void;
     isHorizontal: typeof isHorizontal;
-    allowDirections: import("vue").ComputedRef<("top" | "bottom" | "left" | "right")[]>;
+    allowDirections: import("vue").ComputedRef<("left" | "right" | "bottom" | "top")[]>;
     onTiggerResize: (direction: DirectionType, entry: ResizeObserverEntry) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:width': (_width: number) => true;
@@ -69,7 +69,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onMovingEnd?: ((_ev: MouseEvent) => any) | undefined;
 }>, {
     component: string;
-    directions: ("top" | "bottom" | "left" | "right")[];
+    directions: ("left" | "right" | "bottom" | "top")[];
 }, {}, {
     ResizeTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         prefixCls: {

package/es/resize-box/resize-box.vue_vue_type_script_lang.js

@@ -1,4 +1,4 @@
-import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNumber } from "../_utils/is.js";
 import { off, on } from "../_utils/dom.js";

package/es/resize-box/style/index.css

@@ -41,10 +41,10 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-size: 12px;
   line-height: 1;
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
 }
 .sd-resizebox-trigger-icon {
   display: inline-block;

package/es/result/result.js

@@ -33,6 +33,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true)
 	], 2);
 }
-var result_default = /* @__PURE__ */ _plugin_vue_export_helper_default(result_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var result_default = /*#__PURE__*/ _plugin_vue_export_helper_default(result_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { result_default as default };

package/es/result/style/index.css

@@ -49,14 +49,14 @@
   line-height: 92px;
 }
 .sd-result-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 500;
   font-size: 14px;
   line-height: 1.5715;
   text-align: center;
 }
 .sd-result-subtitle {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 14px;
   line-height: 1.5715;
   text-align: center;

package/es/scrollbar/index.d.ts

@@ -52,7 +52,8 @@ declare const Scrollbar: {
     }>, {
         prefixCls: string;
         cls: import("vue").ComputedRef<(string | Record<string, any> | unknown[] | undefined)[]>;
-        outerStyle: import("vue").ComputedRef<import("vue").StyleValue>;
+        outerStyle: import("vue").ComputedRef<(import("vue").StyleValue | Record<string, string>)[]>;
+        outerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         containerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         mergedOptions: import("vue").ComputedRef<{
             paddingAbsolute: boolean | undefined;
@@ -197,7 +198,8 @@ declare const Scrollbar: {
     }>, {
         prefixCls: string;
         cls: import("vue").ComputedRef<(string | Record<string, any> | unknown[] | undefined)[]>;
-        outerStyle: import("vue").ComputedRef<import("vue").StyleValue>;
+        outerStyle: import("vue").ComputedRef<(import("vue").StyleValue | Record<string, string>)[]>;
+        outerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         containerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         mergedOptions: import("vue").ComputedRef<{
             paddingAbsolute: boolean | undefined;
@@ -337,7 +339,8 @@ declare const Scrollbar: {
 }>, {
     prefixCls: string;
     cls: import("vue").ComputedRef<(string | Record<string, any> | unknown[] | undefined)[]>;
-    outerStyle: import("vue").ComputedRef<import("vue").StyleValue>;
+    outerStyle: import("vue").ComputedRef<(import("vue").StyleValue | Record<string, string>)[]>;
+    outerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     containerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     mergedOptions: import("vue").ComputedRef<{
         paddingAbsolute: boolean | undefined;

package/es/scrollbar/scrollbar.js

@@ -4,6 +4,7 @@ import { createElementBlock, createElementVNode, mergeProps, normalizeClass, nor
 //#region components/scrollbar/scrollbar.vue
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", {
+		ref: "outerRef",
 		class: normalizeClass(_ctx.cls),
 		style: normalizeStyle(_ctx.outerStyle)
 	}, [createElementVNode("div", mergeProps({
@@ -11,6 +12,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		class: `${_ctx.prefixCls}-container`
 	}, _ctx.$attrs), [renderSlot(_ctx.$slots, "default")], 16)], 6);
 }
-var scrollbar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(scrollbar_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var scrollbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(scrollbar_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { scrollbar_default as default };

package/es/scrollbar/scrollbar.vue.d.ts

@@ -50,7 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     prefixCls: string;
     cls: import("vue").ComputedRef<(string | Record<string, any> | unknown[] | undefined)[]>;
-    outerStyle: import("vue").ComputedRef<StyleValue>;
+    outerStyle: import("vue").ComputedRef<(StyleValue | Record<string, string>)[]>;
+    outerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     containerRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     mergedOptions: import("vue").ComputedRef<{
         paddingAbsolute: boolean | undefined;