@deot/vc 1.0.27 → 1.0.28

package/dist/index.d.ts

@@ -7865,6 +7865,18 @@ export declare const Components: {
     type: StringConstructor;
     default: string;
     };
+    width: {
+    type: NumberConstructor;
+    default: number;
+    };
+    height: {
+    type: NumberConstructor;
+    default: number;
+    };
+    borderWidth: {
+    type: NumberConstructor;
+    default: number;
+    };
     }>, () => JSX_2.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click" | "change" | "update:modelValue")[], "click" | "change" | "update:modelValue", PublicProps, Readonly<ExtractPropTypes<    {
     modelValue: {
     type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
@@ -7893,6 +7905,18 @@ export declare const Components: {
     type: StringConstructor;
     default: string;
     };
+    width: {
+    type: NumberConstructor;
+    default: number;
+    };
+    height: {
+    type: NumberConstructor;
+    default: number;
+    };
+    borderWidth: {
+    type: NumberConstructor;
+    default: number;
+    };
     }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
@@ -7902,6 +7926,9 @@ export declare const Components: {
     disabled: boolean;
     checkedValue: string | number | boolean;
     uncheckedValue: string | number | boolean;
+    height: number;
+    width: number;
+    borderWidth: number;
     checkedText: string;
     uncheckedText: string;
     }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -7933,6 +7960,18 @@ export declare const Components: {
     type: StringConstructor;
     default: string;
     };
+    width: {
+    type: NumberConstructor;
+    default: number;
+    };
+    height: {
+    type: NumberConstructor;
+    default: number;
+    };
+    borderWidth: {
+    type: NumberConstructor;
+    default: number;
+    };
     }>, () => JSX_2.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click" | "change" | "update:modelValue")[], "click" | "change" | "update:modelValue", PublicProps, Readonly<ExtractPropTypes<    {
     modelValue: {
     type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
@@ -7961,6 +8000,18 @@ export declare const Components: {
     type: StringConstructor;
     default: string;
     };
+    width: {
+    type: NumberConstructor;
+    default: number;
+    };
+    height: {
+    type: NumberConstructor;
+    default: number;
+    };
+    borderWidth: {
+    type: NumberConstructor;
+    default: number;
+    };
     }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
@@ -7970,6 +8021,9 @@ export declare const Components: {
     disabled: boolean;
     checkedValue: string | number | boolean;
     uncheckedValue: string | number | boolean;
+    height: number;
+    width: number;
+    borderWidth: number;
     checkedText: string;
     uncheckedText: string;
     }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

package/dist/index.iife.js

@@ -34642,6 +34642,8 @@ var Vc = (function (exports, vue) {
         "is-validating": validateState.value === "validating",
         "is-inline": form.props.inline,
         "is-nest": isNest.value,
+        "is-alone": !props2.showMessage,
+        // 用于单独去除form-item的默认margin_bottom
         [`is-${labelPosition.value}`]: true
       };
     });
@@ -39032,6 +39034,18 @@ var Vc = (function (exports, vue) {
     uncheckedText: {
       type: String,
       default: ""
+    },
+    width: {
+      type: Number,
+      default: 36
+    },
+    height: {
+      type: Number,
+      default: 20
+    },
+    borderWidth: {
+      type: Number,
+      default: 1
     }
   };
   const useSwitch = (expose) => {
@@ -39110,28 +39124,65 @@ var Vc = (function (exports, vue) {
       expose
     }) {
       const {
+        checked,
         classes,
         currentValue,
         isLoading,
         handleToggle
       } = useSwitch(expose);
+      const size = vue.computed(() => {
+        return props2.height - props2.borderWidth * 4;
+      });
+      const lefts = vue.computed(() => {
+        return {
+          inner: checked.value ? props2.width - props2.borderWidth * 3 - size.value : props2.borderWidth,
+          loading: checked.value ? props2.height - props2.borderWidth * 2 : props2.borderWidth * 2
+        };
+      });
+      const contentOffset = vue.computed(() => {
+        return Math.max(props2.height / 2, size.value) + props2.borderWidth * 2;
+      });
       return () => {
-        return vue.createVNode("span", {
-          "class": [classes.value, "vc-switch"],
+        return vue.createVNode("div", {
+          "style": {
+            width: `${props2.width}px`
+          },
+          "class": [classes.value, "vc-switch"]
+        }, [vue.createVNode("span", {
+          "style": {
+            height: `${props2.height}px`,
+            borderWidth: `${props2.borderWidth}px`
+          },
+          "class": "vc-switch__wrapper",
           "onClick": handleToggle
         }, [vue.createVNode("input", {
           "name": props2.name,
           "value": currentValue.value,
           "type": "hidden"
         }, null), vue.createVNode("span", {
-          "class": "vc-switch__content"
+          "class": "vc-switch__content",
+          "style": {
+            left: `${checked.value ? props2.height / 4 : contentOffset.value}px`,
+            right: `${checked.value ? contentOffset.value : props2.height / 4}px`,
+            top: 0,
+            bottom: 0
+          }
         }, [currentValue.value === props2.checkedValue ? slots.checked ? slots.checked() : props2.checkedText : null, currentValue.value === props2.uncheckedValue ? slots.unchecked ? slots.unchecked() : props2.uncheckedText : null]), vue.createVNode("span", {
-          "class": "vc-switch__inner"
+          "class": "vc-switch__inner",
+          "style": {
+            width: `${size.value}px`,
+            height: `${size.value}px`,
+            left: `${lefts.value.inner}px`,
+            top: `${props2.borderWidth}px`
+          }
         }, null), isLoading.value && vue.createVNode(Spin, {
           "size": 14,
           "foreground": "#fff",
-          "class": "vc-switch__loading"
-        }, null)]);
+          "class": "vc-switch__loading",
+          "style": {
+            left: `${lefts.value.loading}px`
+          }
+        }, null)])]);
       };
     }
   });

package/dist/index.umd.cjs

@@ -34645,6 +34645,8 @@
         "is-validating": validateState.value === "validating",
         "is-inline": form.props.inline,
         "is-nest": isNest.value,
+        "is-alone": !props2.showMessage,
+        // 用于单独去除form-item的默认margin_bottom
         [`is-${labelPosition.value}`]: true
       };
     });
@@ -39035,6 +39037,18 @@
     uncheckedText: {
       type: String,
       default: ""
+    },
+    width: {
+      type: Number,
+      default: 36
+    },
+    height: {
+      type: Number,
+      default: 20
+    },
+    borderWidth: {
+      type: Number,
+      default: 1
     }
   };
   const useSwitch = (expose) => {
@@ -39113,28 +39127,65 @@
       expose
     }) {
       const {
+        checked,
         classes,
         currentValue,
         isLoading,
         handleToggle
       } = useSwitch(expose);
+      const size = vue.computed(() => {
+        return props2.height - props2.borderWidth * 4;
+      });
+      const lefts = vue.computed(() => {
+        return {
+          inner: checked.value ? props2.width - props2.borderWidth * 3 - size.value : props2.borderWidth,
+          loading: checked.value ? props2.height - props2.borderWidth * 2 : props2.borderWidth * 2
+        };
+      });
+      const contentOffset = vue.computed(() => {
+        return Math.max(props2.height / 2, size.value) + props2.borderWidth * 2;
+      });
       return () => {
-        return vue.createVNode("span", {
-          "class": [classes.value, "vc-switch"],
+        return vue.createVNode("div", {
+          "style": {
+            width: `${props2.width}px`
+          },
+          "class": [classes.value, "vc-switch"]
+        }, [vue.createVNode("span", {
+          "style": {
+            height: `${props2.height}px`,
+            borderWidth: `${props2.borderWidth}px`
+          },
+          "class": "vc-switch__wrapper",
           "onClick": handleToggle
         }, [vue.createVNode("input", {
           "name": props2.name,
           "value": currentValue.value,
           "type": "hidden"
         }, null), vue.createVNode("span", {
-          "class": "vc-switch__content"
+          "class": "vc-switch__content",
+          "style": {
+            left: `${checked.value ? props2.height / 4 : contentOffset.value}px`,
+            right: `${checked.value ? contentOffset.value : props2.height / 4}px`,
+            top: 0,
+            bottom: 0
+          }
         }, [currentValue.value === props2.checkedValue ? slots.checked ? slots.checked() : props2.checkedText : null, currentValue.value === props2.uncheckedValue ? slots.unchecked ? slots.unchecked() : props2.uncheckedText : null]), vue.createVNode("span", {
-          "class": "vc-switch__inner"
+          "class": "vc-switch__inner",
+          "style": {
+            width: `${size.value}px`,
+            height: `${size.value}px`,
+            left: `${lefts.value.inner}px`,
+            top: `${props2.borderWidth}px`
+          }
         }, null), isLoading.value && vue.createVNode(Spin, {
           "size": 14,
           "foreground": "#fff",
-          "class": "vc-switch__loading"
-        }, null)]);
+          "class": "vc-switch__loading",
+          "style": {
+            left: `${lefts.value.loading}px`
+          }
+        }, null)])]);
       };
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/vc",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/vc-components": "^1.0.27",
-    "@deot/vc-hooks": "^1.0.27",
-    "@deot/vc-shared": "^1.0.27"
+    "@deot/vc-components": "^1.0.28",
+    "@deot/vc-hooks": "^1.0.28",
+    "@deot/vc-shared": "^1.0.28"
   },
   "peerDependencies": {
     "vue": "*"