@koi-design/uxd-ui 14.0.2 → 14.0.4

package/lib/components/Rate/Rate.vue.d.ts

@@ -370,8 +370,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             color: {
-                type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-                default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                type: import("vue").PropType<"light" | "red">;
+                default: "light" | "red";
                 validator: (val: string) => boolean;
             };
         }>> & Readonly<{
@@ -383,41 +383,41 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             prefixCls: import("vue").ComputedRef<string>;
             arrowStyle: import("vue").ComputedRef<{
                 top: string;
+                right: string;
                 transform: string;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
                 bottom: string;
+                right: string;
                 transform: string;
                 top?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
+                top: string;
                 left: string;
                 transform: string;
-                top?: undefined;
-                bottom?: undefined;
                 right?: undefined;
+                bottom?: undefined;
             } | {
-                right: string;
+                bottom: string;
+                left: string;
                 transform: string;
                 top?: undefined;
-                bottom?: undefined;
-                left?: undefined;
+                right?: undefined;
             } | {
                 top?: undefined;
+                right?: undefined;
                 transform?: undefined;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             }>;
             onVisibleChange: (val: boolean) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'visible-change': (v: boolean) => boolean;
             'update:visible': (v: boolean) => boolean;
         }, import("vue").PublicProps, {
-            color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+            color: "light" | "red";
             offset: number[];
             visible: boolean;
             placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
@@ -671,8 +671,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             color: {
-                type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-                default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                type: import("vue").PropType<"light" | "red">;
+                default: "light" | "red";
                 validator: (val: string) => boolean;
             };
         }>> & Readonly<{
@@ -684,38 +684,38 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             prefixCls: import("vue").ComputedRef<string>;
             arrowStyle: import("vue").ComputedRef<{
                 top: string;
+                right: string;
                 transform: string;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
                 bottom: string;
+                right: string;
                 transform: string;
                 top?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
+                top: string;
                 left: string;
                 transform: string;
-                top?: undefined;
-                bottom?: undefined;
                 right?: undefined;
+                bottom?: undefined;
             } | {
-                right: string;
+                bottom: string;
+                left: string;
                 transform: string;
                 top?: undefined;
-                bottom?: undefined;
-                left?: undefined;
+                right?: undefined;
             } | {
                 top?: undefined;
+                right?: undefined;
                 transform?: undefined;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             }>;
             onVisibleChange: (val: boolean) => void;
         }, {}, {}, {}, {
-            color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+            color: "light" | "red";
             offset: number[];
             visible: boolean;
             placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
@@ -778,8 +778,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         color: {
-            type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-            default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+            type: import("vue").PropType<"light" | "red">;
+            default: "light" | "red";
             validator: (val: string) => boolean;
         };
     }>> & Readonly<{
@@ -791,41 +791,41 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         prefixCls: import("vue").ComputedRef<string>;
         arrowStyle: import("vue").ComputedRef<{
             top: string;
+            right: string;
             transform: string;
             bottom?: undefined;
             left?: undefined;
-            right?: undefined;
         } | {
             bottom: string;
+            right: string;
             transform: string;
             top?: undefined;
             left?: undefined;
-            right?: undefined;
         } | {
+            top: string;
             left: string;
             transform: string;
-            top?: undefined;
-            bottom?: undefined;
             right?: undefined;
+            bottom?: undefined;
         } | {
-            right: string;
+            bottom: string;
+            left: string;
             transform: string;
             top?: undefined;
-            bottom?: undefined;
-            left?: undefined;
+            right?: undefined;
         } | {
             top?: undefined;
+            right?: undefined;
             transform?: undefined;
             bottom?: undefined;
             left?: undefined;
-            right?: undefined;
         }>;
         onVisibleChange: (val: boolean) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'visible-change': (v: boolean) => boolean;
         'update:visible': (v: boolean) => boolean;
     }, string, {
-        color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+        color: "light" | "red";
         offset: number[];
         visible: boolean;
         placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";

package/lib/components/Rate/index.d.ts

@@ -334,8 +334,8 @@ export declare const URate: {
                     default: boolean;
                 };
                 color: {
-                    type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-                    default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                    type: import("vue").PropType<"light" | "red">;
+                    default: "light" | "red";
                     validator: (val: string) => boolean;
                 };
             }>> & Readonly<{
@@ -347,41 +347,41 @@ export declare const URate: {
                 prefixCls: import("vue").ComputedRef<string>;
                 arrowStyle: import("vue").ComputedRef<{
                     top: string;
+                    right: string;
                     transform: string;
                     bottom?: undefined;
                     left?: undefined;
-                    right?: undefined;
                 } | {
                     bottom: string;
+                    right: string;
                     transform: string;
                     top?: undefined;
                     left?: undefined;
-                    right?: undefined;
                 } | {
+                    top: string;
                     left: string;
                     transform: string;
-                    top?: undefined;
-                    bottom?: undefined;
                     right?: undefined;
+                    bottom?: undefined;
                 } | {
-                    right: string;
+                    bottom: string;
+                    left: string;
                     transform: string;
                     top?: undefined;
-                    bottom?: undefined;
-                    left?: undefined;
+                    right?: undefined;
                 } | {
                     top?: undefined;
+                    right?: undefined;
                     transform?: undefined;
                     bottom?: undefined;
                     left?: undefined;
-                    right?: undefined;
                 }>;
                 onVisibleChange: (val: boolean) => void;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                 'visible-change': (v: boolean) => boolean;
                 'update:visible': (v: boolean) => boolean;
             }, import("vue").PublicProps, {
-                color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                color: "light" | "red";
                 offset: number[];
                 visible: boolean;
                 placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
@@ -635,8 +635,8 @@ export declare const URate: {
                     default: boolean;
                 };
                 color: {
-                    type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-                    default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                    type: import("vue").PropType<"light" | "red">;
+                    default: "light" | "red";
                     validator: (val: string) => boolean;
                 };
             }>> & Readonly<{
@@ -648,38 +648,38 @@ export declare const URate: {
                 prefixCls: import("vue").ComputedRef<string>;
                 arrowStyle: import("vue").ComputedRef<{
                     top: string;
+                    right: string;
                     transform: string;
                     bottom?: undefined;
                     left?: undefined;
-                    right?: undefined;
                 } | {
                     bottom: string;
+                    right: string;
                     transform: string;
                     top?: undefined;
                     left?: undefined;
-                    right?: undefined;
                 } | {
+                    top: string;
                     left: string;
                     transform: string;
-                    top?: undefined;
-                    bottom?: undefined;
                     right?: undefined;
+                    bottom?: undefined;
                 } | {
-                    right: string;
+                    bottom: string;
+                    left: string;
                     transform: string;
                     top?: undefined;
-                    bottom?: undefined;
-                    left?: undefined;
+                    right?: undefined;
                 } | {
                     top?: undefined;
+                    right?: undefined;
                     transform?: undefined;
                     bottom?: undefined;
                     left?: undefined;
-                    right?: undefined;
                 }>;
                 onVisibleChange: (val: boolean) => void;
             }, {}, {}, {}, {
-                color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                color: "light" | "red";
                 offset: number[];
                 visible: boolean;
                 placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
@@ -742,8 +742,8 @@ export declare const URate: {
                 default: boolean;
             };
             color: {
-                type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-                default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                type: import("vue").PropType<"light" | "red">;
+                default: "light" | "red";
                 validator: (val: string) => boolean;
             };
         }>> & Readonly<{
@@ -755,41 +755,41 @@ export declare const URate: {
             prefixCls: import("vue").ComputedRef<string>;
             arrowStyle: import("vue").ComputedRef<{
                 top: string;
+                right: string;
                 transform: string;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
                 bottom: string;
+                right: string;
                 transform: string;
                 top?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
+                top: string;
                 left: string;
                 transform: string;
-                top?: undefined;
-                bottom?: undefined;
                 right?: undefined;
+                bottom?: undefined;
             } | {
-                right: string;
+                bottom: string;
+                left: string;
                 transform: string;
                 top?: undefined;
-                bottom?: undefined;
-                left?: undefined;
+                right?: undefined;
             } | {
                 top?: undefined;
+                right?: undefined;
                 transform?: undefined;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             }>;
             onVisibleChange: (val: boolean) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'visible-change': (v: boolean) => boolean;
             'update:visible': (v: boolean) => boolean;
         }, string, {
-            color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+            color: "light" | "red";
             offset: number[];
             visible: boolean;
             placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
@@ -1398,8 +1398,8 @@ export declare const URate: {
                 default: boolean;
             };
             color: {
-                type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-                default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                type: import("vue").PropType<"light" | "red">;
+                default: "light" | "red";
                 validator: (val: string) => boolean;
             };
         }>> & Readonly<{
@@ -1411,41 +1411,41 @@ export declare const URate: {
             prefixCls: import("vue").ComputedRef<string>;
             arrowStyle: import("vue").ComputedRef<{
                 top: string;
+                right: string;
                 transform: string;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
                 bottom: string;
+                right: string;
                 transform: string;
                 top?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
+                top: string;
                 left: string;
                 transform: string;
-                top?: undefined;
-                bottom?: undefined;
                 right?: undefined;
+                bottom?: undefined;
             } | {
-                right: string;
+                bottom: string;
+                left: string;
                 transform: string;
                 top?: undefined;
-                bottom?: undefined;
-                left?: undefined;
+                right?: undefined;
             } | {
                 top?: undefined;
+                right?: undefined;
                 transform?: undefined;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             }>;
             onVisibleChange: (val: boolean) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'visible-change': (v: boolean) => boolean;
             'update:visible': (v: boolean) => boolean;
         }, import("vue").PublicProps, {
-            color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+            color: "light" | "red";
             offset: number[];
             visible: boolean;
             placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
@@ -1699,8 +1699,8 @@ export declare const URate: {
                 default: boolean;
             };
             color: {
-                type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-                default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+                type: import("vue").PropType<"light" | "red">;
+                default: "light" | "red";
                 validator: (val: string) => boolean;
             };
         }>> & Readonly<{
@@ -1712,38 +1712,38 @@ export declare const URate: {
             prefixCls: import("vue").ComputedRef<string>;
             arrowStyle: import("vue").ComputedRef<{
                 top: string;
+                right: string;
                 transform: string;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
                 bottom: string;
+                right: string;
                 transform: string;
                 top?: undefined;
                 left?: undefined;
-                right?: undefined;
             } | {
+                top: string;
                 left: string;
                 transform: string;
-                top?: undefined;
-                bottom?: undefined;
                 right?: undefined;
+                bottom?: undefined;
             } | {
-                right: string;
+                bottom: string;
+                left: string;
                 transform: string;
                 top?: undefined;
-                bottom?: undefined;
-                left?: undefined;
+                right?: undefined;
             } | {
                 top?: undefined;
+                right?: undefined;
                 transform?: undefined;
                 bottom?: undefined;
                 left?: undefined;
-                right?: undefined;
             }>;
             onVisibleChange: (val: boolean) => void;
         }, {}, {}, {}, {
-            color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+            color: "light" | "red";
             offset: number[];
             visible: boolean;
             placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
@@ -1806,8 +1806,8 @@ export declare const URate: {
             default: boolean;
         };
         color: {
-            type: import("vue").PropType<"primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint">;
-            default: "primary" | "blue" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+            type: import("vue").PropType<"light" | "red">;
+            default: "light" | "red";
             validator: (val: string) => boolean;
         };
     }>> & Readonly<{
@@ -1819,41 +1819,41 @@ export declare const URate: {
         prefixCls: import("vue").ComputedRef<string>;
         arrowStyle: import("vue").ComputedRef<{
             top: string;
+            right: string;
             transform: string;
             bottom?: undefined;
             left?: undefined;
-            right?: undefined;
         } | {
             bottom: string;
+            right: string;
             transform: string;
             top?: undefined;
             left?: undefined;
-            right?: undefined;
         } | {
+            top: string;
             left: string;
             transform: string;
-            top?: undefined;
-            bottom?: undefined;
             right?: undefined;
+            bottom?: undefined;
         } | {
-            right: string;
+            bottom: string;
+            left: string;
             transform: string;
             top?: undefined;
-            bottom?: undefined;
-            left?: undefined;
+            right?: undefined;
         } | {
             top?: undefined;
+            right?: undefined;
             transform?: undefined;
             bottom?: undefined;
             left?: undefined;
-            right?: undefined;
         }>;
         onVisibleChange: (val: boolean) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'visible-change': (v: boolean) => boolean;
         'update:visible': (v: boolean) => boolean;
     }, string, {
-        color: "primary" | "blue" | "light" | "red" | "orange" | "green" | "iris" | "cyan" | "yellow" | "amber" | "purple" | "lime" | "sky" | "violet" | "pink" | "mint";
+        color: "light" | "red";
         offset: number[];
         visible: boolean;
         placement: "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";

package/lib/components/Slider/Slider.d.ts

@@ -49,15 +49,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: import("vue").PropType<"strong" | "surface">;
         default: string;
     };
-    color: {
-        type: import("vue").PropType<"blue" | "cyan" | "green" | "lime" | "orange" | "pink" | "purple" | "red" | "violet" | "yellow" | "primary" | "iris" | "amber" | "sky" | "mint">;
-        default: "blue" | "cyan" | "green" | "lime" | "orange" | "pink" | "purple" | "red" | "violet" | "yellow" | "primary" | "iris" | "amber" | "sky" | "mint";
-        validator: (val: "blue" | "cyan" | "green" | "lime" | "orange" | "pink" | "purple" | "red" | "violet" | "yellow" | "primary" | "iris" | "amber" | "sky" | "mint") => boolean;
-    };
-    size: {
-        type: import("vue").PropType<"small" | "default">;
-        default: string;
-    };
     direction: {
         type: import("vue").PropType<"ltr" | "rtl">;
     };
@@ -199,15 +190,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: import("vue").PropType<"strong" | "surface">;
         default: string;
     };
-    color: {
-        type: import("vue").PropType<"blue" | "cyan" | "green" | "lime" | "orange" | "pink" | "purple" | "red" | "violet" | "yellow" | "primary" | "iris" | "amber" | "sky" | "mint">;
-        default: "blue" | "cyan" | "green" | "lime" | "orange" | "pink" | "purple" | "red" | "violet" | "yellow" | "primary" | "iris" | "amber" | "sky" | "mint";
-        validator: (val: "blue" | "cyan" | "green" | "lime" | "orange" | "pink" | "purple" | "red" | "violet" | "yellow" | "primary" | "iris" | "amber" | "sky" | "mint") => boolean;
-    };
-    size: {
-        type: import("vue").PropType<"small" | "default">;
-        default: string;
-    };
     direction: {
         type: import("vue").PropType<"ltr" | "rtl">;
     };
@@ -217,9 +199,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onAfter-change"?: (v: import("./Slider.type").SliderValueType) => any;
 }>, {
     max: number;
-    color: "blue" | "cyan" | "green" | "lime" | "orange" | "pink" | "purple" | "red" | "violet" | "yellow" | "primary" | "iris" | "amber" | "sky" | "mint";
     disabled: boolean;
-    size: "small" | "default";
     vertical: boolean;
     range: boolean;
     min: number;

package/lib/components/Slider/Slider.js

@@ -394,13 +394,12 @@ var Slider = vue.defineComponent({
     })]);
     return vue.createVNode("div", {
       "ref": "sliderRef",
-      "class": [this.prefixCls, `${this.prefixCls}-variant-${this.variant}`, `${this.prefixCls}-size-${this.size}`, {
+      "class": [this.prefixCls, `${this.prefixCls}-variant-${this.variant}`, {
         [`${this.prefixCls}-with-marks`]: this.marks && Object.keys(this.marks).length,
         [`${this.prefixCls}-disabled`]: this.disabled,
         [`${this.prefixCls}-vertical`]: this.vertical,
         [`${this.prefixCls}-rtl`]: this.direction === "rtl" && !this.vertical
       }],
-      "data-color": this.color,
       "onMousedown": this.handleMouseDown,
       "onMouseup": this.handleMouseUp
     }, [vue.createVNode("div", {