style(checkbox-group): checkbox-group 组件 direction排列方向样式优化

Author: vaebe

packages/devui-vue/devui/checkbox/src/checkbox-group.scss

@@ -1,23 +1,24 @@
 @import '../../styles-var/devui-var.scss';
 
 .#{$devui-prefix}-checkbox__group {
- display: inline-block;
-}
-
-.#{$devui-prefix}-checkbox--list-inline {
- min-height: 28px;
- line-height: 28px;
- display: flex;
+ display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
- align-items: center;
- margin: -8px 0 0 0;
-
- & div:not(:last-child) {
- margin-right: 20px;
- }
+ align-items: flex-start;
 
  & > * {
  margin-top: 8px;
  }
+
+ &.is-row {
+ flex-direction: row;
+
+ & div:not(:last-child) {
+ margin-right: 20px;
+ }
+ }
+
+ &.is-column {
+ flex-direction: column;
+ }
 }

packages/devui-vue/devui/checkbox/src/checkbox-group.tsx

@@ -41,9 +41,18 @@ export default defineComponent({
  }
  };
 
+
  return (
- <div class={ns.e('group')}>
- <div class={{ [ns.m('list-inline')]: props.direction === 'row' }}>{getContent()}</div>
+ <div
+ class={[
+ ns.e('group'),
+ {
+ 'is-row': props.direction === 'row',
+ 'is-column': props.direction === 'column',
+ },
+ ]}
+ >
+ {getContent()}
  </div>
  );
  };