@sdata/web-vue 1.18.0 → 2.1.0

package/es/tour/types.d.ts

@@ -0,0 +1,143 @@
+import type { HTMLAttributes } from 'vue';
+import type { ButtonProps } from '../button/interface';
+export type TourAllowedButton = 'next' | 'previous' | 'close';
+export type TourSide = 'left' | 'right' | 'top' | 'bottom' | 'over';
+export type TourAlignment = 'start' | 'center' | 'end';
+export type TourButtonKind = 'previous' | 'next' | 'done' | 'close';
+export type TourButtonProps = Partial<Record<TourButtonKind, ButtonProps>>;
+export type TourPopoverDom = {
+    wrapper: HTMLElement | null;
+    arrow: HTMLElement | null;
+    title: HTMLElement | null;
+    description: HTMLElement | null;
+    footer: HTMLElement | null;
+    previousButton: HTMLElement | null;
+    nextButton: HTMLElement | null;
+    closeButton: HTMLElement | null;
+    footerButtons: HTMLElement | null;
+    progress: HTMLElement | null;
+};
+export type TourStepHookOptions = {
+    config: TourConfig;
+    state: TourState;
+    controller: TourController;
+};
+export type TourStepHook = (element: Element | undefined, step: TourStep | undefined, options: TourStepHookOptions) => void;
+export type TourPopoverRenderHook = (popover: TourPopoverDom, options: TourStepHookOptions) => void;
+export type TourOverlayClickBehavior = 'close' | 'nextStep' | TourStepHook;
+export type TourPopover = {
+    title?: string;
+    description?: string;
+    side?: TourSide;
+    align?: TourAlignment;
+    showButtons?: TourAllowedButton[];
+    disableButtons?: TourAllowedButton[];
+    showProgress?: boolean;
+    nextBtnText?: string;
+    prevBtnText?: string;
+    doneBtnText?: string;
+    progressText?: string;
+    popoverClass?: string;
+    onNextClick?: TourStepHook;
+    onPrevClick?: TourStepHook;
+    onCloseClick?: TourStepHook;
+    onPopoverRender?: TourPopoverRenderHook;
+    buttonProps?: TourButtonProps;
+    contentClass?: HTMLAttributes['class'];
+    contentStyle?: HTMLAttributes['style'];
+    titleProps?: HTMLAttributes;
+    descriptionProps?: HTMLAttributes;
+    footerProps?: HTMLAttributes;
+};
+export type TourStep = {
+    element?: string | Element | (() => Element | null | undefined) | null;
+    popover?: TourPopover;
+    disableActiveInteraction?: boolean;
+    onHighlightStarted?: TourStepHook;
+    onHighlighted?: TourStepHook;
+    onDeselected?: TourStepHook;
+};
+export type TourState = {
+    isInitialized?: boolean;
+    activeIndex?: number;
+    activeStep?: TourStep;
+    activeElement?: Element | null;
+    previousStep?: TourStep;
+    previousElement?: Element | null;
+    popover?: TourPopoverDom;
+};
+export type TourConfig = {
+    animate?: boolean;
+    allowClose?: boolean;
+    allowKeyboardControl?: boolean;
+    overlayClickBehavior?: TourOverlayClickBehavior;
+    overlayOpacity?: number;
+    overlayColor?: string;
+    smoothScroll?: boolean;
+    disableActiveInteraction?: boolean;
+    showProgress?: boolean;
+    stagePadding?: number;
+    stageRadius?: number;
+    popoverOffset?: number;
+    showButtons?: TourAllowedButton[];
+    disableButtons?: TourAllowedButton[];
+    prevBtnText?: string;
+    nextBtnText?: string;
+    doneBtnText?: string;
+    progressText?: string;
+    popoverClass?: string;
+    buttonProps?: TourButtonProps;
+    onHighlightStarted?: TourStepHook;
+    onHighlighted?: TourStepHook;
+    onDeselected?: TourStepHook;
+    onDestroyed?: TourStepHook;
+    onDestroyStarted?: TourStepHook;
+    onPopoverRender?: TourPopoverRenderHook;
+    onNextClick?: TourStepHook;
+    onPrevClick?: TourStepHook;
+    onCloseClick?: TourStepHook;
+};
+export type TourController = {
+    isActive: () => boolean;
+    refresh: () => void;
+    drive: (stepIndex?: number) => void;
+    setConfig: (config: TourConfig) => void;
+    setSteps: (steps: TourStep[]) => void;
+    getConfig: () => TourConfig;
+    getState: () => TourState;
+    getActiveIndex: () => number | undefined;
+    isFirstStep: () => boolean;
+    isLastStep: () => boolean;
+    getActiveStep: () => TourStep | undefined;
+    getActiveElement: () => Element | null;
+    getPreviousElement: () => Element | null;
+    getPreviousStep: () => TourStep | undefined;
+    moveNext: () => void;
+    movePrevious: () => void;
+    moveTo: (stepIndex: number) => void;
+    hasNextStep: () => boolean;
+    hasPreviousStep: () => boolean;
+    highlight: (step: TourStep) => void;
+    destroy: () => void;
+};
+export type TourExpose = {
+    drive: (stepIndex?: number) => Promise<void>;
+    moveNext: () => void;
+    movePrevious: () => void;
+    moveTo: (stepIndex: number) => void;
+    highlight: (step: TourStep) => void;
+    destroy: () => void;
+    refresh: () => void;
+    isActive: () => boolean;
+    getController: () => TourController | null;
+    getState: () => TourState | undefined;
+};
+export type TourBaseProps = {
+    visible?: boolean;
+    defaultVisible?: boolean;
+    current?: number;
+    defaultCurrent?: number;
+    steps?: TourStep[];
+    zIndex?: number;
+};
+export type TourProps = TourBaseProps & TourConfig;

package/es/transfer/index.d.ts

@@ -81,9 +81,9 @@ declare const Transfer: {
         select: (_selected: string[]) => true;
         search: (_value: string, _type: "target" | "source") => true;
     }, import("vue").PublicProps, {
+        disabled: boolean;
         data: import("./interface").TransferItem[];
         title: string[];
-        disabled: boolean;
         defaultValue: string[];
         modelValue: string[];
         simple: boolean;
@@ -139,11 +139,11 @@ declare const Transfer: {
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                 click: (_ev: MouseEvent) => true;
             }, import("vue").PublicProps, {
-                autofocus: boolean;
                 disabled: boolean;
+                autofocus: boolean;
                 loading: boolean;
                 long: boolean;
-                htmlType: "reset" | "submit" | "button";
+                htmlType: "button" | "reset" | "submit";
             }, true, {}, {}, {
                 IconLoading: {
                     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
@@ -316,11 +316,11 @@ declare const Transfer: {
                 mergedDisabled: import("vue").ComputedRef<boolean>;
                 handleClick: (ev: MouseEvent) => void;
             }, {}, {}, {}, {
-                autofocus: boolean;
                 disabled: boolean;
+                autofocus: boolean;
                 loading: boolean;
                 long: boolean;
-                htmlType: "reset" | "submit" | "button";
+                htmlType: "button" | "reset" | "submit";
             }>;
             __isFragment?: never;
             __isTeleport?: never;
@@ -370,11 +370,11 @@ declare const Transfer: {
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             click: (_ev: MouseEvent) => true;
         }, string, {
-            autofocus: boolean;
             disabled: boolean;
+            autofocus: boolean;
             loading: boolean;
             long: boolean;
-            htmlType: "reset" | "submit" | "button";
+            htmlType: "button" | "reset" | "submit";
         }, {}, string, {}, {
             IconLoading: {
                 new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
@@ -693,7 +693,7 @@ declare const Transfer: {
                             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, {
@@ -805,7 +805,7 @@ declare const Transfer: {
                         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 & {
@@ -896,7 +896,7 @@ declare const Transfer: {
                     default: boolean;
                 };
             }>> & Readonly<{}>, {
-                size: "small" | "mini" | "medium" | "large";
+                size: "medium" | "large" | "small" | "mini";
                 disabled: boolean;
             }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
             IconDelete: {
@@ -1141,13 +1141,13 @@ declare const Transfer: {
                     pageChange: (_page: number) => true;
                     pageSizeChange: (_pageSize: number) => true;
                 }, import("vue").PublicProps, {
-                    split: boolean;
-                    size: "small" | "medium" | "large";
+                    size: "medium" | "large" | "small";
                     scrollbar: boolean | import("..").ScrollbarProps;
+                    split: boolean;
                     loading: boolean;
+                    bottomOffset: number;
                     maxHeight: string | number;
                     bordered: boolean;
-                    bottomOffset: number;
                     hoverable: boolean;
                 }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
                     P: {};
@@ -1212,13 +1212,13 @@ declare const Transfer: {
                 }, {}, {}, {
                     scrollIntoView(options: import("../_components/virtual-list/interface").ScrollIntoViewOptions): void;
                 }, {
-                    split: boolean;
-                    size: "small" | "medium" | "large";
+                    size: "medium" | "large" | "small";
                     scrollbar: boolean | import("..").ScrollbarProps;
+                    split: boolean;
                     loading: boolean;
+                    bottomOffset: number;
                     maxHeight: string | number;
                     bordered: boolean;
-                    bottomOffset: number;
                     hoverable: boolean;
                 }>;
                 __isFragment?: never;
@@ -1285,13 +1285,13 @@ declare const Transfer: {
                 pageChange: (_page: number) => true;
                 pageSizeChange: (_pageSize: number) => true;
             }, string, {
-                split: boolean;
-                size: "small" | "medium" | "large";
+                size: "medium" | "large" | "small";
                 scrollbar: boolean | import("..").ScrollbarProps;
+                split: boolean;
                 loading: boolean;
+                bottomOffset: number;
                 maxHeight: string | number;
                 bordered: boolean;
-                bottomOffset: number;
                 hoverable: boolean;
             }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
                 Item: {
@@ -1433,7 +1433,8 @@ declare const Transfer: {
                 }>, {
                     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;
@@ -1578,7 +1579,8 @@ declare const Transfer: {
                 }>, {
                     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;
@@ -1718,7 +1720,8 @@ declare const Transfer: {
             }>, {
                 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;
@@ -2133,9 +2136,9 @@ declare const Transfer: {
         handleClick: (target: "target" | "source") => void;
         handleSearch: (value: string, type: "target" | "source") => void;
     }, {}, {}, {}, {
+        disabled: boolean;
         data: import("./interface").TransferItem[];
         title: string[];
-        disabled: boolean;
         defaultValue: string[];
         modelValue: string[];
         simple: boolean;
@@ -2227,9 +2230,9 @@ declare const Transfer: {
     select: (_selected: string[]) => true;
     search: (_value: string, _type: "target" | "source") => true;
 }, string, {
+    disabled: boolean;
     data: import("./interface").TransferItem[];
     title: string[];
-    disabled: boolean;
     defaultValue: string[];
     modelValue: string[];
     simple: boolean;
@@ -2285,11 +2288,11 @@ declare const Transfer: {
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             click: (_ev: MouseEvent) => true;
         }, import("vue").PublicProps, {
-            autofocus: boolean;
             disabled: boolean;
+            autofocus: boolean;
             loading: boolean;
             long: boolean;
-            htmlType: "reset" | "submit" | "button";
+            htmlType: "button" | "reset" | "submit";
         }, true, {}, {}, {
             IconLoading: {
                 new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
@@ -2462,11 +2465,11 @@ declare const Transfer: {
             mergedDisabled: import("vue").ComputedRef<boolean>;
             handleClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, {
-            autofocus: boolean;
             disabled: boolean;
+            autofocus: boolean;
             loading: boolean;
             long: boolean;
-            htmlType: "reset" | "submit" | "button";
+            htmlType: "button" | "reset" | "submit";
         }>;
         __isFragment?: never;
         __isTeleport?: never;
@@ -2516,11 +2519,11 @@ declare const Transfer: {
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         click: (_ev: MouseEvent) => true;
     }, string, {
-        autofocus: boolean;
         disabled: boolean;
+        autofocus: boolean;
         loading: boolean;
         long: boolean;
-        htmlType: "reset" | "submit" | "button";
+        htmlType: "button" | "reset" | "submit";
     }, {}, string, {}, {
         IconLoading: {
             new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
@@ -2839,7 +2842,7 @@ declare const Transfer: {
                         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, {
@@ -2951,7 +2954,7 @@ declare const Transfer: {
                     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 & {
@@ -3042,7 +3045,7 @@ declare const Transfer: {
                 default: boolean;
             };
         }>> & Readonly<{}>, {
-            size: "small" | "mini" | "medium" | "large";
+            size: "medium" | "large" | "small" | "mini";
             disabled: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         IconDelete: {
@@ -3287,13 +3290,13 @@ declare const Transfer: {
                 pageChange: (_page: number) => true;
                 pageSizeChange: (_pageSize: number) => true;
             }, import("vue").PublicProps, {
-                split: boolean;
-                size: "small" | "medium" | "large";
+                size: "medium" | "large" | "small";
                 scrollbar: boolean | import("..").ScrollbarProps;
+                split: boolean;
                 loading: boolean;
+                bottomOffset: number;
                 maxHeight: string | number;
                 bordered: boolean;
-                bottomOffset: number;
                 hoverable: boolean;
             }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
                 P: {};
@@ -3358,13 +3361,13 @@ declare const Transfer: {
             }, {}, {}, {
                 scrollIntoView(options: import("../_components/virtual-list/interface").ScrollIntoViewOptions): void;
             }, {
-                split: boolean;
-                size: "small" | "medium" | "large";
+                size: "medium" | "large" | "small";
                 scrollbar: boolean | import("..").ScrollbarProps;
+                split: boolean;
                 loading: boolean;
+                bottomOffset: number;
                 maxHeight: string | number;
                 bordered: boolean;
-                bottomOffset: number;
                 hoverable: boolean;
             }>;
             __isFragment?: never;
@@ -3431,13 +3434,13 @@ declare const Transfer: {
             pageChange: (_page: number) => true;
             pageSizeChange: (_pageSize: number) => true;
         }, string, {
-            split: boolean;
-            size: "small" | "medium" | "large";
+            size: "medium" | "large" | "small";
             scrollbar: boolean | import("..").ScrollbarProps;
+            split: boolean;
             loading: boolean;
+            bottomOffset: number;
             maxHeight: string | number;
             bordered: boolean;
-            bottomOffset: number;
             hoverable: boolean;
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
             Item: {
@@ -3579,7 +3582,8 @@ declare const Transfer: {
             }>, {
                 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;
@@ -3724,7 +3728,8 @@ declare const Transfer: {
             }>, {
                 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;
@@ -3864,7 +3869,8 @@ declare const Transfer: {
         }>, {
             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/transfer/style/index.css

@@ -25,8 +25,8 @@
   box-sizing: border-box;
   width: 200px;
   height: 224px;
-  border: 1px solid var(--color-neutral-3);
-  border-radius: var(--border-radius-small);
+  border: 1px solid var(--sd-color-neutral-3);
+  border-radius: var(--sd-border-radius-small);
 }
 .sd-transfer-view-search {
   padding: 8px 12px 4px 12px;
@@ -54,11 +54,11 @@
 }
 .sd-transfer-view-header {
   height: 40px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 500;
   font-size: 14px;
   line-height: 40px;
-  background-color: var(--color-fill-1);
+  background-color: var(--sd-color-fill-1);
 }
 .sd-transfer-view-header-title {
   display: flex;
@@ -84,16 +84,16 @@
   text-overflow: ellipsis;
 }
 .sd-transfer-view-header-clear-btn {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 12px;
   cursor: pointer;
 }
 .sd-transfer-view-header-clear-btn:hover::before {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
 }
 .sd-transfer-view-header-count {
   margin-right: 2px;
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
   font-weight: normal;
   font-size: 12px;
 }
@@ -146,7 +146,7 @@
   display: inline;
 }
 .sd-transfer-view .sd-checkbox .sd-icon-hover:hover::before {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
 }
 .sd-transfer-list-item {
   position: relative;
@@ -154,7 +154,7 @@
   align-items: center;
   height: 36px;
   padding: 0 10px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   line-height: 36px;
   list-style: none;
   background-color: transparent;
@@ -172,13 +172,13 @@
   text-overflow: ellipsis;
 }
 .sd-transfer-list-item-disabled {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
   background-color: transparent;
   cursor: not-allowed;
 }
 .sd-transfer-list-item:not(.sd-transfer-list-item-disabled):hover {
-  color: var(--color-text-1);
-  background-color: var(--color-fill-2);
+  color: var(--sd-color-text-1);
+  background-color: var(--sd-color-fill-2);
 }
 .sd-transfer-list-item .sd-checkbox {
   width: 100%;
@@ -188,12 +188,12 @@
 }
 .sd-transfer-list-item-remove-btn {
   margin-left: auto;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 12px;
   cursor: pointer;
 }
 .sd-transfer-list-item-remove-btn:hover::before {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
 }
 .sd-transfer-list-item-draggable::before {
   position: absolute;
@@ -206,15 +206,15 @@
 }
 .sd-transfer-list-item-gap-bottom::before {
   bottom: -2px;
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
 }
 .sd-transfer-list-item-gap-top::before {
   top: -2px;
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
 }
 .sd-transfer-list-item-dragging {
-  color: var(--color-text-4) !important;
-  background-color: var(--color-fill-1) !important;
+  color: var(--sd-color-text-4) !important;
+  background-color: var(--sd-color-fill-1) !important;
 }
 .sd-transfer-list-item-dragged {
   animation: sd-transfer-drag-item-blink 0.4s;
@@ -244,12 +244,12 @@
   border-bottom-left-radius: 0;
 }
 .sd-transfer-disabled .sd-transfer-view-header {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
 }
 
 @keyframes sd-transfer-drag-item-blink {
   0% {
-    background-color: var(--color-primary-light-1);
+    background-color: var(--sd-color-primary-light-1);
   }
   100% {
     background-color: transparent;

package/es/transfer/transfer-view.js

@@ -75,8 +75,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 					onSelect: (_ctx$transferCtx2 = _ctx.transferCtx) === null || _ctx$transferCtx2 === void 0 ? void 0 : _ctx$transferCtx2.onSelect
 				}, () => [createVNode(_component_list, {
 					class: normalizeClass(`${_ctx.prefixCls}-list`),
-					bordered: false,
-					scrollbar: false
+					bordered: false
 				}, {
 					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filteredData, (item) => {
 						return openBlock(), createBlock(_component_transfer_list_item, {
@@ -104,6 +103,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		}, null, 8, ["class"]))], 2)
 	], 2);
 }
-var transfer_view_default = /* @__PURE__ */ _plugin_vue_export_helper_default(transfer_view_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var transfer_view_default = /*#__PURE__*/ _plugin_vue_export_helper_default(transfer_view_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { transfer_view_default as default };