refactor(Form): 参考Rem规范重构代码样式

packages/devui-vue/devui/form/src/components/form-control/form-control-types.ts

@@ -0,0 +1,19 @@
+import type { PropType, ExtractPropTypes, ComputedRef } from 'vue';
+
+export const formControlProps = {
+  feedbackStatus: {
+    type: String as PropType<'success' | 'error' | 'pending' | ''>,
+    default: '',
+  },
+  extraInfo: {
+    type: String,
+    default: '',
+  },
+};
+
+export type FormControlProps = ExtractPropTypes<typeof formControlProps>;
+
+export interface UseFormControl {
+  controlClasses: ComputedRef<Record<string, boolean>>;
+  controlContainerClasses: ComputedRef<Record<string, boolean>>;
+}

packages/devui-vue/devui/form/src/components/form-control/form-control.scss

@@ -1,15 +1,20 @@
-.devui-form-control {
+.devui-form__control {
+  flex: 1 1 auto;
   position: relative;
   width: 100%;
 
+  &--horizontal {
+    margin-left: 16px;
+  }
+
   .devui-star {
     color: red;
   }
 
-  .devui-form-control-container {
+  .devui-form__control-container {
     position: relative;
 
-    .devui-feedback-status {
+    .devui-form__control-feedback {
       position: absolute;
       top: 50%;
       right: 0;
@@ -22,46 +27,22 @@
       visibility: visible;
       pointer-events: none;
     }
-
-    .devui-radio {
-      &:not(:last-child) {
-        margin-bottom: 20px;
-      }
-    }
   }
 
-  .devui-form-control-container-horizontal {
+  .devui-form__control-container--horizontal {
     display: flex;
     width: 100%;
 
-    .devui-radio {
-      &:not(:last-child) {
-        margin-bottom: 0;
-        margin-right: 20px;
-      }
-    }
-
-    .devui-checkbox-group > div:first-child {
-      display: flex;
-      align-items: center;
-    }
-
-    .devui-checkbox-column-margin {
-      &:not(:last-child) {
-        margin-right: 20px;
-      }
-    }
-
     .devui-validate-tip {
       margin: 0;
     }
   }
 
-  .devui-control-content-wrapper {
+  .devui-form__control-content {
     width: 100%;
   }
 
-  .devui-has-feedback {
+  .devui-form__control-container--has-feedback {
     display: flex;
     align-items: center;
 
@@ -70,7 +51,7 @@
     }
   }
 
-  .devui-feedback-error {
+  .devui-form__control-container--feedback-error {
     border: 1px solid #f66f6a;
     border-radius: 2px;
 
@@ -92,7 +73,7 @@
     }
   }
 
-  .devui-form-control-extra-info {
+  .devui-form__control-extra {
     font-size: 12px;
     color: #8a8e99;
     min-height: 20px;

packages/devui-vue/devui/form/src/components/form-control/form-control.tsx

@@ -1,12 +1,15 @@
-import { defineComponent, inject, ref, computed, reactive, onMounted, Teleport } from 'vue';
+import { defineComponent, ref, computed, onMounted, Teleport } from 'vue';
+import type { SetupContext } from 'vue';
 import { uniqueId } from 'lodash';
-import { IForm, formControlProps, formInjectionKey } from '../../form-types';
+import { formControlProps, FormControlProps } from './form-control-types';
 import { ShowPopoverErrorMessageEventData } from '../../directives/d-validate-rules';
 import clickoutsideDirective from '../../../../shared/devui-directive/clickoutside';
 import { EventBus, getElOffset } from '../../utils';
 import Icon from '../../../../icon/src/icon';
 import Popover from '../../../../popover/src/popover';
+import { useNamespace } from '../../../../shared/hooks/use-namespace';
 import './form-control.scss';
+import { useFormControl } from './use-form-control';
 
 type positionType = 'top' | 'right' | 'bottom' | 'left';
 
@@ -16,16 +19,15 @@ export default defineComponent({
     clickoutside: clickoutsideDirective,
   },
   props: formControlProps,
-  setup(props, ctx) {
+  setup(props: FormControlProps, ctx: SetupContext) {
     const formControl = ref();
-    const dForm = reactive(inject(formInjectionKey, {} as IForm));
-    const labelData = reactive(dForm.labelData);
-    const isHorizontal = labelData.layout === 'horizontal';
     const uid = uniqueId('dfc-');
     const showPopover = ref(false);
     const updateOn = ref('change');
     const tipMessage = ref('');
     const popPosition = ref<positionType>('bottom');
+    const ns = useNamespace('form');
+    const { controlClasses, controlContainerClasses } = useFormControl(props);
     let rectInfo: Partial<DOMRect> = {
       width: 0,
       height: 0,
@@ -74,50 +76,44 @@ export default defineComponent({
       }
     };
 
-    return () => {
-      const { feedbackStatus, extraInfo } = props;
-      return (
-        <div class="devui-form-control" ref={formControl} data-uid={uid} v-clickoutside={handleClickOutside}>
-          {showPopover.value && (
-            <Teleport to="body">
-              <div
-                style={{
-                  position: 'absolute',
-                  left: popoverLeftPosition + 'px',
-                  top: popoverTopPosition + 'px',
-                  width: rectInfo.width + 'px',
-                  height: rectInfo.height + 'px',
-                }}>
-                <Popover
-                  controlled={updateOn.value !== 'change'}
-                  visible={showPopover.value}
-                  content={tipMessage.value}
-                  popType={'error'}
-                  position={popPosition.value}
-                />
-              </div>
-            </Teleport>
-          )}
-          <div
-            class={`devui-form-control-container${isHorizontal ? ' devui-form-control-container-horizontal' : ''}${
-              feedbackStatus ? ' devui-has-feedback' : ''
-            }${feedbackStatus === 'error' ? ' devui-feedback-error' : ''}`}>
-            <div class="devui-control-content-wrapper" id={uid}>
-              {ctx.slots.default?.()}
+    return () => (
+      <div class={controlClasses.value} ref={formControl} data-uid={uid} v-clickoutside={handleClickOutside}>
+        {showPopover.value && (
+          <Teleport to="body">
+            <div
+              style={{
+                position: 'absolute',
+                left: popoverLeftPosition + 'px',
+                top: popoverTopPosition + 'px',
+                width: rectInfo.width + 'px',
+                height: rectInfo.height + 'px',
+              }}>
+              <Popover
+                controlled={updateOn.value !== 'change'}
+                visible={showPopover.value}
+                content={tipMessage.value}
+                popType={'error'}
+                position={popPosition.value}
+              />
             </div>
-            {(feedbackStatus || ctx.slots.suffixTemplate?.()) && (
-              <span class="devui-feedback-status">
-                {ctx.slots.suffixTemplate?.() ? (
-                  ctx.slots.suffixTemplate?.()
-                ) : (
-                  <Icon name={iconData.value.name} color={iconData.value.color}></Icon>
-                )}
-              </span>
-            )}
+          </Teleport>
+        )}
+        <div class={controlContainerClasses.value}>
+          <div class={ns.e('control-content')} id={uid}>
+            {ctx.slots.default?.()}
           </div>
-          {extraInfo && <div class="devui-form-control-extra-info">{extraInfo}</div>}
+          {(props.feedbackStatus || ctx.slots.suffixTemplate?.()) && (
+            <span class={ns.e('control-feedback')}>
+              {ctx.slots.suffixTemplate?.() ? (
+                ctx.slots.suffixTemplate?.()
+              ) : (
+                <Icon name={iconData.value.name} color={iconData.value.color}></Icon>
+              )}
+            </span>
+          )}
         </div>
-      );
-    };
+        {props.extraInfo && <div class={ns.e('control-extra')}>{props.extraInfo}</div>}
+      </div>
+    );
   },
 });

packages/devui-vue/devui/form/src/components/form-control/use-form-control.ts

@@ -0,0 +1,25 @@
+import { computed, reactive, inject, toRefs } from 'vue';
+import { FORM_TOKEN, IForm } from '../../form-types';
+import { FormControlProps, UseFormControl } from './form-control-types';
+import { useNamespace } from '../../../../shared/hooks/use-namespace';
+
+export function useFormControl(props: FormControlProps): UseFormControl {
+  const Form = reactive(inject(FORM_TOKEN) as IForm);
+  const labelData = reactive(Form.labelData);
+  const ns = useNamespace('form');
+  const { feedbackStatus } = toRefs(props);
+
+  const controlClasses = computed(() => ({
+    [`${ns.e('control')}`]: true,
+    [`${ns.em('control', 'horizontal')}`]: labelData.layout === 'horizontal',
+  }));
+
+  const controlContainerClasses = computed(() => ({
+    [`${ns.e('control-container')}`]: true,
+    [`${ns.em('control-container', 'horizontal')}`]: labelData.layout === 'horizontal',
+    [`${ns.em('control-container', 'has-feedback')}`]: Boolean(feedbackStatus.value),
+    [`${ns.em('control-container', 'feedback-error')}`]: Boolean(feedbackStatus.value === 'error'),
+  }));
+
+  return { controlClasses, controlContainerClasses };
+}

packages/devui-vue/devui/form/src/components/form-item/form-item-types.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef, ExtractPropTypes } from 'vue';
+
+export const formItemProps = {
+  field: {
+    type: String,
+    default: '',
+  },
+  dHasFeedback: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type FormItemProps = ExtractPropTypes<typeof formItemProps>;
+
+export interface UseFormItem {
+  itemClasses: ComputedRef<Record<string, boolean>>;
+}

packages/devui-vue/devui/form/src/components/form-item/form-item.scss

@@ -1,32 +1,11 @@
-.devui-form-item {
+.devui-form__item--horizontal {
   display: flex;
-  // align-items: center;
+  align-items: center;
   margin-bottom: 20px;
 }
 
-.devui-form-item-vertical {
-  flex-direction: column;
-}
-
-.devui-form-item-columns {
+.devui-form__item--vertical {
+  display: flex;
   flex-direction: column;
-  display: inline-block !important;
-}
-// .u-1-3 {
-//   width: 33.3%;
-// }
-.devui-column-item {
   margin-bottom: 20px;
 }
-
-.devui-validate-tip {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  color: #f66f6a;
-}
-
-.devui-validate-tip-horizontal {
-  margin-left: 10px;
-}