🚀 [button] button use core hook and lib version bg use svg mask

Author: higuaifan

core/assets/style/var.css

@@ -1,6 +1,6 @@
 @import "./var/Wuxing.css";
 
-:root{
+:root {
   --m-color-text: #2B333E;
   --m-color-text-disabled: #74787A;
   --m-color-text-dark: #0F1423;
@@ -18,6 +18,18 @@
   --m-color-blue: #1661AB;
   --m-color-green: #223E36;
 
-
   --m-color-disabled: #DBDADD;
 }
+
+/* size */
+:root {
+  --m-size-small: 5px;
+  --m-size-default: 10px;
+  --m-size-large: 15px;
+}
+
+:root {
+  --m-cursor-auto: auto;
+  --m-cursor-pointer: pointer;
+  --m-cursor-disabled: not-allowed;
+}

core/components/base/button/button.css

@@ -1,19 +1,18 @@
 :root {
-/*  --m-button-width: 180px;
-  --m-button-height: 80px;
-  --m-button-line-height: 24px;*/
+  --m-button-size: var(--m-size-default);
+  --m-button-height: calc(var(--m-button-size) * 3.2);
+  --m-button-width: calc(var(--m-button-size) * 3.2);
+  --m-button-color: white;
 }
 
 .m-button {
-  padding: 0 15px;
   outline: unset;
   height: var(--m-button-height, 32px);
-  /*line-height: var(--m-button-line-height, 32px);*/
   min-width: var(--m-button-width, 32px);
   border: 5px double transparent;
   border-radius: 2px;
-  color: white;
   text-align: center;
+  color: var(--m-button-color);
   cursor: var(--m-cursor-pointer);
 
   &:disabled, &:disabled:hover {
@@ -24,11 +23,54 @@
       pointer-events: none;
     }
   }
+
+  &.m-button-default {
+    background-color: var(--m-color-songlan);
+    &:hover{
+      background-color: var(--m-color-qingluan);
+    }
+  }
+
+  &.m-button-error {
+    background-color: var(--m-color-error);
+    &:hover{
+      background-color: var(--m-color-daran);
+    }
+  }
+
+  &.m-button-confirm {
+    background-color: var(--m-color-success);
+    &:hover{
+      background-color: var(--m-color-zhengqing);
+    }
+  }
+
+  &.m-button-primary {
+    background-color: var(--m-color-blue);
+    &:hover{
+      background-color: #4994C4;
+    }
+  }
+
+  &.m-button-warning {
+    background-color: var(--m-color-jin-yang);
+    &:hover{
+      background-color: var(--m-color-zhizi);
+    }
+  }
+
+  &.m-button-disabled {
+    background-color: var(--m-color-jin-yin);
+    &:hover{
+      background-color: var(--m-color-jin-yin);
+    }
+  }
+
 }
 
 a.m-button {
   text-decoration: unset;
-  height: 22px;
-  padding: unset;
+  padding: 1px 6px;
+  height: var(--m-button-height, 32px);
 }
 

headless/components/base/button/button.css

@@ -1,31 +1 @@
 @import "@shuimo-design/ui-core/components/base/button/button.css";
-
-
-.m-button {
-
-  &.m-button-default {
-    background-color: var(--m-color-divider);
-  }
-
-  &.m-button-error {
-    background-color: var(--m-color-error);
-  }
-
-  &.m-button-confirm {
-    background-color: var(--m-color-success);
-  }
-
-  &.m-button-primary {
-    background-color: var(--m-color-blue);
-  }
-
-  &.m-button-warning {
-    background-color: var(--m-color-warn);
-  }
-
-  &.m-button-disabled {
-    background-color: var(--m-color-disabled);
-  }
-
-
-}

headless/utils/install/importComponents.ts

@@ -13,7 +13,7 @@ import { Component } from 'vue';
 import MAvatar from '../../components/base/avatar/MAvatar.tsx';
 import MInput from '../../components/base/input/MInput';
 import MButton from '../../components/base/button/MButton.tsx';
-import MSelect from '../../components/base/select/MSelect.tsx';
+// import MSelect from '../../components/base/select/MSelect.tsx';
 import MCheckbox from '../../components/base/checkbox/MCheckbox.tsx';
 import MSwitch from '../../components/base/switch/MSwitch.tsx';
 // [other]
@@ -25,13 +25,16 @@ import MPopover from '../../components/message/popover/MPopover';
 
 export const components: Record<string, Component> = {
   MAvatar,
+  MButton,
+
 
   MRicePaper,
 };
 
 
 export {
   MAvatar,
+  MButton,
 
   MRicePaper,
 };

lib/assets/style/global.css

@@ -1,3 +1,5 @@
+@import "@shuimo-design/ui-core/assets/style/global.css";
+
 @import "cursor.css";
 @import "model.css";
 @import "var.css";

lib/assets/style/var.css

@@ -1,26 +1,6 @@
 @import "./var/Wuxing.css";
 
 :root {
-  --m-color-text: #2B333E;
-  --m-color-text-disabled: #74787A;
-  --m-color-text-dark: #0F1423;
-  --m-color-divider: #0F142333;
-  --m-color-success: #4A9992;
-  --m-color-error: #861717;
-  --m-color-background: #0F142320;
-  --m-color-green2: #1A3B32;
-  --m-color-pink: #CC163A;
-  --m-color-warn: #E8B004;
-
-  --m-color-main: #861717;
-  --m-color-border: #5E616D;
-  --m-color-orange: #FCA104;
-  --m-color-blue: #1661AB;
-  --m-color-green: #223E36;
-
-
-  --m-color-disabled: #DBDADD;
-
   --m-cursor-auto: url(../../public/cursor/auto.webp), auto;
   --m-cursor-pointer: url(../../public/cursor/pointer.webp), auto;
   --m-cursor-disabled: url(../../public/cursor/disabled.webp), auto;

lib/components/base/button/MButton.tsx

@@ -2,7 +2,7 @@
  * @description 按钮组件
  * @author 阿怪
  * @date 2021/8/10 4:59 下午
- * @version v3.0.0
+ * @version v4.0.0
  *
  * 公司的业务千篇一律，复杂的代码好几百行。
  * v1.0.1 新增slot文本形式
@@ -11,20 +11,18 @@
  * v2.0.0 升级交互
  * v2.1.0 使用border方式实现边框模块
  * v3.0.0 props从core导出
+ * v4.0.0 use core-ui hook and **background use svg mask!!** <- huge improvement
  */
 import { defineComponent, h } from 'vue';
-import { props } from './api.ts';
-import { ButtonProps } from './index';
+import { ButtonCore } from '@shuimo-design/ui-core';
+import { ButtonProps } from '@shuimo-design/ui-core/components/base/button/props';
 import './button.css';
 
-export default defineComponent((props: ButtonProps, { slots }) => {
+const { props, useButton } = ButtonCore;
+export default defineComponent((props: ButtonProps, ctx) => {
   return () => {
-    const domType = props.link ? 'a' : 'button';
-    const slot = slots.default?.() ?? props.text;
-    return h(domType, {
-      class: ['m-button', { 'm-button-disabled': props.disabled }, `m-button-${props.type}`],
-      disabled: props.disabled,
-    }, slot);
+    const { domType, slot, domProps } = useButton(props, ctx);
+    return h(domType, domProps, slot);
   };
 }, {
   name: 'MButton',