fix(button): simplify class names

ecaps1038 · Mar 22, 2024 · 9ad8b2e · 9ad8b2e
1 parent dcd884e
commit 9ad8b2e
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 159 deletions.
diff --git a/packages/yike-design-ui/components/button/src/button.vue b/packages/yike-design-ui/components/button/src/button.vue
@@ -1,47 +1,43 @@
 <template>
   <button
-    :class="[
-      bem([type, status, shape, size], {
-        loading: loading,
-        long: long,
-        disabled: disabled,
-      }),
-    ]"
+    :class="[bem([type, status, shape, size], { loading, long, disabled })]"
     :disabled="disabled || loading"
   >
-    <yk-spinner v-if="loading" :size="getSize(size)" />
-    <span v-if="$slots.icon" :class="icon">
+    <yk-spinner v-if="loading" :size="iconSize" />
+    <span v-if="$slots.icon" :class="iconClassName">
       <slot name="icon" />
     </span>
     <slot></slot>
   </button>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { getSize } from './utils'
-import { createCssScope } from '../../utils'
 import YkSpinner from '../../spinner'
+import { computed } from 'vue'
 import { ButtonProps } from './button'
+import { createCssScope } from '../../utils'
 import '../style'
 
-defineOptions({
-  name: 'YkButton',
-})
+defineOptions({ name: 'YkButton' })
 
 const bem = createCssScope('button')
-const props = withDefaults(defineProps<ButtonProps>(), {
-  type: 'primary',
-  size: 'l',
-  shape: 'default',
-  long: false,
-  loading: false,
-  disabled: false,
+// prettier-ignore
+const props = withDefaults(
+  defineProps<ButtonProps>(), 
+  {
+    long: false,
+    loading: false,
+    disabled: false,
+  }
+)
+
+const iconSize = computed(() => {
+  const sizeMap = { s: 12, m: 14, l: 14, xl: 16 }
+  return sizeMap[props.size!]
 })
 
-const icon = computed(() => {
-  return {
-    'yk-button__icon': props.shape != 'circle' && props.shape != 'square',
-  }
+const iconClassName = computed(() => {
+  if (props.shape === 'circle' || props.shape === 'square') return
+  return 'yk-button__icon'
 })
 </script>
diff --git a/packages/yike-design-ui/components/button/src/utils.ts b/packages/yike-design-ui/components/button/src/utils.ts
diff --git a/packages/yike-design-ui/components/button/style/css.ts b/packages/yike-design-ui/components/button/style/css.ts
diff --git a/packages/yike-design-ui/components/button/style/index.less b/packages/yike-design-ui/components/button/style/index.less
@@ -1,149 +1,133 @@
 @import '../../styles/mixin.less';
 @import './variables.less';
-@import '../../spinner/style/index.less';
-/* stylelint-disable */
-.yk-button--loading {
-  opacity: 0.7 !important;
-  .yk-spinner {
-    margin-right: 4px;
-  }
-
-  circle {
-    stroke: #fff !important;
-  }
-}
 
 .yk-button {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 6px 16px;
+  border: 1px solid;
   white-space: nowrap;
-  // 默认按钮状态
-  color: @btn-primary-color-text;
-  color: @btn-primary-color-text;
-  background-color: @btn-primary-color-bg;
   outline: none;
   transition: all @animatb;
   box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
   cursor: pointer;
   user-select: none;
-  circle {
-    stroke: @btn-primary-color-text !important;
-  }
+
+  .btn-type();
+  .btn-size();
 
   &__icon {
     margin-right: @space-ss;
   }
 
-  .btn-type(@type) {
-    .normal() {
-      color: ~'@{btn-@{type}-color-text}';
-      circle {
-        stroke: ~'@{btn-@{type}-color-text}' !important;
-      }
-      background-color: ~'@{btn-@{type}-color-bg}';
-      border-color: ~'@{btn-@{type}-color-border}';
-      &:not(:disabled):hover {
-        background-color: ~'@{btn-@{type}-color-hover}';
-      }
-      &:not(:disabled):active {
-        background-color: ~'@{btn-@{type}-color-active}';
-      }
-    }
-    &--@{type} {
-      .normal();
-    }
-  }
+  &--loading {
+    opacity: 0.7 !important;
 
-  .btn-status(@type: primary, @status: primary) {
-    .normal() {
-      color: ~'@{btn-@{type}-color-text_@{status}}';
-      circle {
-        stroke: ~'@{btn-@{type}-color-text_@{status}}' !important;
-      }
-      background-color: ~'@{btn-@{type}-color-bg_@{status}}';
-      border-color: ~'@{btn-@{type}-color-border_@{status}}';
-      &:not(:disabled):hover {
-        background-color: ~'@{btn-@{type}-color-hover_@{status}}';
-      }
-      &:not(:disabled):active {
-        background-color: ~'@{btn-@{type}-color-active_@{status}}';
-      }
+    .yk-spinner {
+      margin-right: 4px;
     }
-    &.yk-button--@{type}.yk-button--@{status} {
-      .normal();
+
+    circle {
+      stroke: #fff !important;
     }
   }
 
-  .btn-type(primary);
-  .btn-type(secondary);
-  .btn-type(outline);
-
-  .btn-status(primary);
-  .btn-status(primary, success);
-  .btn-status(primary, warning);
-  .btn-status(primary, danger);
-
-  .btn-status(secondary);
-  .btn-status(secondary, success);
-  .btn-status(secondary, warning);
-  .btn-status(secondary, danger);
-
-  .btn-status(outline);
-  .btn-status(outline, success);
-  .btn-status(outline, warning);
-  .btn-status(outline, danger);
-
-  // 尺寸 size
-  &--s {
-    padding: 0px @space-s;
-    min-width: 24px;
-    height: 24px;
-    font-size: @size-ss;
-    border-radius: @radius-s;
-  }
-  &--m {
-    padding: 0px @space-l;
-    min-width: 32px;
-    height: 32px;
-    border-radius: @radius-s;
-  }
-  &--l {
-    padding: 0px @space-l;
-    min-width: 36px;
-    height: 36px;
-    border-radius: @radius-m;
-  }
-  &--xl {
-    padding: 0px @space-xl;
-    min-width: 48px;
-    height: 48px;
-    font-size: @size-m;
-    border-radius: @radius-m;
-  }
+  .genTypeAndStatus();
+  .gen-size();
+
   &--long {
     display: block;
     width: 100%;
   }
 
-  // 圆角样式
   &--round {
     border-radius: @radius-r;
   }
   &--circle {
     padding: 0;
     border-radius: @radius-r;
   }
-
   &--square {
     padding: 0;
   }
 
-  // 禁用
   &--disabled {
     .disabled();
   }
 }
+
+.genTypeAndStatus() {
+  @typeList: secondary, outline;
+
+  each(@typeList, {
+    &--@{value} {
+      .btn-type(@value);
+    }
+    .gen-status(@value);
+  });
+}
+
+.gen-status(@type) {
+  @statusList: primary, success, warning, danger;
+
+  each(@statusList, {
+    &--@{type}.yk-button--@{value} {
+      .btn-status(@type, @value);
+    }
+    &--@{value} {
+      .btn-status(primary, @value);
+    }
+  });
+}
+
+.gen-size() {
+  @sizeList: s, m, xl;
+
+  each(@sizeList, {
+    &--@{value} {
+      .btn-size(@value);
+    }
+  });
+}
+
+.btn-type(@type: primary) {
+  color: ~'@{btn-@{type}-color-text}';
+  background-color: ~'@{btn-@{type}-color-bg}';
+  border-color: ~'@{btn-@{type}-color-border}';
+
+  &:not(:disabled):hover {
+    background-color: ~'@{btn-@{type}-color-hover}';
+  }
+  &:not(:disabled):active {
+    background-color: ~'@{btn-@{type}-color-active}';
+  }
+
+  circle {
+    stroke: ~'@{btn-@{type}-color-text}' !important;
+  }
+}
+
+.btn-status(@type, @status: primary) {
+  color: ~'@{btn-@{type}-color-text_@{status}}';
+  background-color: ~'@{btn-@{type}-color-bg_@{status}}';
+  border-color: ~'@{btn-@{type}-color-border_@{status}}';
+
+  &:not(:disabled):hover {
+    background-color: ~'@{btn-@{type}-color-hover_@{status}}';
+  }
+  &:not(:disabled):active {
+    background-color: ~'@{btn-@{type}-color-active_@{status}}';
+  }
+
+  circle {
+    stroke: ~'@{btn-@{type}-color-text_@{status}}' !important;
+  }
+}
+
+.btn-size(@size: l) {
+  padding: ~'@{btn-size-padding_@{size}}';
+  min-width: ~'@{btn-size-minWidth_@{size}}';
+  height: ~'@{btn-size-height_@{size}}';
+  font-size: ~'@{btn-size-fontSize_@{size}}';
+  border-radius: ~'@{btn-size-borderRadius_@{size}}';
+}
diff --git a/packages/yike-design-ui/components/button/style/index.ts b/packages/yike-design-ui/components/button/style/index.ts
@@ -1 +1,2 @@
 import './index.less';
+import '../../spinner/style';