style: code style update

Tencent · Jun 11, 2022 · ae4ef2f · ae4ef2f
1 parent 5ac6bff
commit ae4ef2f
Show file tree

Hide file tree

Showing 14 changed files with 152 additions and 152 deletions.
diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
@@ -25,7 +25,7 @@ export default defineComponent({
     // alert的dom引用
     const alertRef = ref<HTMLElement | null>(null);
     // description的dom引用
-    const description = ref<HTMLElement | null>(null);
+    const descriptionRef = ref<HTMLElement | null>(null);
     // desc高度
     const descHeight = ref(0);
     // 是否可见，关闭后置为false
@@ -86,19 +86,20 @@ export default defineComponent({
       }
       const contentLength = Array.isArray(messageContent) ? (messageContent as Array<SlotReturnValue>).length : 1;
       const hasCollapse = props.maxLine > 0 && props.maxLine < contentLength;
-      const height = (description.value?.children[0] as HTMLElement)?.offsetHeight;
+      const height = (descriptionRef.value?.children[0] as HTMLElement)?.offsetHeight;
       if (hasCollapse && collapsed.value) {
         // 折叠
         messageContent = (messageContent as Array<SlotReturnValue>).slice(0, props.maxLine as number);
-        height && (description.value.style.height = `${descHeight.value}px`);
+        height && (descriptionRef.value.style.height = `${descHeight.value}px`);
       } else if (hasCollapse) {
         // 展开
-        height && (description.value.style.height = `${height * (contentLength - props.maxLine) + descHeight.value}px`);
+        height &&
+          (descriptionRef.value.style.height = `${height * (contentLength - props.maxLine) + descHeight.value}px`);
       }
 
       // 如果需要折叠，则元素之间补<br/>；否则不补
       return (
-        <div class={`${COMPONENT_NAME.value}__description`} ref="description">
+        <div class={`${COMPONENT_NAME.value}__description`} ref={descriptionRef}>
           {hasCollapse
             ? (messageContent as Array<string | VNode>).map((content) => <div>{content}</div>)
             : messageContent}
@@ -137,7 +138,7 @@ export default defineComponent({
 
     onMounted(() => {
       on(alertRef.value, 'transitionend', handleCloseEnd);
-      descHeight.value = description.value.offsetHeight;
+      descHeight.value = descriptionRef.value.offsetHeight;
     });
     onBeforeUnmount(() => {
       off(alertRef.value, 'transitionend', handleCloseEnd);

diff --git a/src/color-picker/panel/alpha.tsx b/src/color-picker/panel/alpha.tsx
@@ -5,9 +5,6 @@ import { useBaseClassName } from '../hooks';
 
 export default defineComponent({
   name: 'AlphaSlider',
-  components: {
-    ColorSlider,
-  },
   inheritAttrs: false,
   props: {
     color: {
@@ -43,7 +40,7 @@ export default defineComponent({
   render() {
     const { baseClassName } = this;
     return (
-      <color-slider
+      <ColorSlider
         class={[`${baseClassName}__alpha`, `${baseClassName}--bg-alpha`]}
         color={this.color}
         value={this.color.alpha * 100}

diff --git a/src/color-picker/panel/format/inputs.tsx b/src/color-picker/panel/format/inputs.tsx
@@ -2,19 +2,12 @@ import { computed, defineComponent, PropType, reactive, watch } from 'vue';
 import throttle from 'lodash/throttle';
 import props from '../../props';
 import { Color } from '../../utils';
-import { Select as TSelect, Option as TOption } from '../../../select';
 import TInput from '../../../input';
 import TInputNumber from '../../../input-number';
 import { FORMAT_INPUT_CONFIG } from './config';
 
 export default defineComponent({
   name: 'FormatInputs',
-  components: {
-    TSelect,
-    TOption,
-    TInput,
-    TInputNumber,
-  },
   inheritAttrs: false,
   props: {
     ...props,
@@ -129,7 +122,7 @@ export default defineComponent({
               }}
             >
               {config.type === 'input' ? (
-                <t-input
+                <TInput
                   {...inputProps}
                   align="center"
                   disabled={this.disabled}
@@ -140,7 +133,7 @@ export default defineComponent({
                   onEnter={(v: string) => this.handleChange(config.key, v)}
                 />
               ) : (
-                <t-input-number
+                <TInputNumber
                   {...inputProps}
                   align="center"
                   disabled={this.disabled}

diff --git a/src/color-picker/panel/header.tsx b/src/color-picker/panel/header.tsx
@@ -8,11 +8,6 @@ import { useBaseClassName } from '../hooks';
 
 export default defineComponent({
   name: 'PanelHeader',
-  components: {
-    CloseIcon,
-    TRadioGroup,
-    TRadioButton,
-  },
   props: {
     ...props,
     mode: {
@@ -55,18 +50,18 @@ export default defineComponent({
           {this.colorModes?.length === 1 ? (
             COLOR_MODES[this.colorModes[0]]
           ) : (
-            <t-radio-group
+            <TRadioGroup
               variant="default-filled"
               size="small"
               v-model={this.modeValue}
               onChange={this.handleModeChange}
             >
               {Object.keys(COLOR_MODES).map((key) => (
-                <t-radio-button key={key} value={key}>
+                <TRadioButton key={key} value={key}>
                   {COLOR_MODES[key]}
-                </t-radio-button>
+                </TRadioButton>
               ))}
-            </t-radio-group>
+            </TRadioGroup>
           )}
         </div>
         {this.closeBtn ? (
@@ -75,7 +70,7 @@ export default defineComponent({
             class={[`${baseClassName}__icon`, `${baseClassName}__close`]}
             onClick={this.handleClosePopup}
           >
-            <close-icon />
+            <CloseIcon />
           </span>
         ) : null}
       </div>

diff --git a/src/color-picker/panel/hue.tsx b/src/color-picker/panel/hue.tsx
@@ -5,9 +5,7 @@ import baseProps from './base-props';
 
 export default defineComponent({
   name: 'HueSlider',
-  components: {
-    ColorSlider,
-  },
+
   inheritAttrs: false,
   props: {
     ...baseProps,
@@ -20,7 +18,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <color-slider
+      <ColorSlider
         className={`${this.baseClassName}__hue`}
         color={this.color}
         value={this.color.hue}

diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx
@@ -23,15 +23,6 @@ import useDefaultValue from '../../hooks/useDefaultValue';
 
 export default defineComponent({
   name: 'ColorPanel',
-  components: {
-    PanelHeader,
-    LinearGradient,
-    SaturationPanel,
-    HueSlider,
-    AlphaSlider,
-    FormatPanel,
-    SwatchesPanel,
-  },
   props: {
     ...props,
     togglePopup: {
@@ -297,18 +288,18 @@ export default defineComponent({
         <>
           <div class={`${baseClassName}__swatches-wrap`}>
             {showUsedColors ? (
-              <swatches-panel
+              <SwatchesPanel
                 {...baseProps}
                 title={t(global.recentColorTitle)}
                 editable
-                colors={this.recentlyUsedColors}
+                colors={this.recentlyUsedColors as string[]}
                 handleAddColor={this.addRecentlyUsedColor}
                 onSetColor={(color: string) => this.handleSetColor('used', color)}
                 onChange={this.handleRecentlyUsedColorsChange}
               />
             ) : null}
             {showSystemColors ? (
-              <swatches-panel
+              <SwatchesPanel
                 {...baseProps}
                 title={t(global.swatchColorTitle)}
                 colors={systemColors}
@@ -325,15 +316,15 @@ export default defineComponent({
         class={[`${baseClassName}__panel`, this.disabled ? statusClassNames.disabled : false]}
         onClick={(e) => e.stopPropagation()}
       >
-        <panel-header {...this.$props} mode={this.mode} onModeChange={this.handleModeChange} />
+        <PanelHeader {...this.$props} mode={this.mode} onModeChange={this.handleModeChange} />
         <div class={[`${baseClassName}__body`]}>
           {this.mode === 'linear-gradient' ? (
-            <linear-gradient {...baseProps} onChange={this.handleGradientChange} />
+            <LinearGradient {...baseProps} onChange={this.handleGradientChange} />
           ) : null}
-          <saturation-panel {...baseProps} onChange={this.handleSatAndValueChange} />
-          <hue-slider {...baseProps} onChange={this.handleHueChange} />
-          {this.enableAlpha ? <alpha-slider {...baseProps} onChange={this.handleAlphaChange} /> : null}
-          <format-panel
+          <SaturationPanel {...baseProps} onChange={this.handleSatAndValueChange} />
+          <HueSlider {...baseProps} onChange={this.handleHueChange} />
+          {this.enableAlpha ? <AlphaSlider {...baseProps} onChange={this.handleAlphaChange} /> : null}
+          <FormatPanel
             {...this.$props}
             color={this.color}
             format={this.formatModel}

diff --git a/src/color-picker/panel/linear-gradient.tsx b/src/color-picker/panel/linear-gradient.tsx
@@ -11,9 +11,7 @@ const DELETE_KEYS: string[] = ['delete', 'backspace'];
 
 export default defineComponent({
   name: 'LinearGradient',
-  components: {
-    TInputNumber,
-  },
+
   inheritAttrs: false,
   props: {
     ...baseProps,
@@ -263,7 +261,7 @@ export default defineComponent({
           </div>
         </div>
         <div class={`${baseClassName}__gradient-degree`} title={`${degree}deg`}>
-          <t-input-number
+          <TInputNumber
             theme="normal"
             min={0}
             max={360}

diff --git a/src/color-picker/trigger.tsx b/src/color-picker/trigger.tsx
@@ -1,16 +1,11 @@
 import { defineComponent, PropType, ref, watch } from 'vue';
-import { Input as TInput } from '../input';
-import { InputNumber as TInputNumber } from '../input-number';
+import TInput from '../input';
 import { Color } from './utils';
 import { TdColorPickerProps } from './type';
 import { useBaseClassName } from './hooks';
 
 export default defineComponent({
   name: 'DefaultTrigger',
-  components: {
-    TInput,
-    TInputNumber,
-  },
   inheritAttrs: false,
   props: {
     color: {
@@ -82,7 +77,7 @@ export default defineComponent({
     };
     return (
       <div class={`${baseClassName}__trigger--default`}>
-        <t-input
+        <TInput
           {...this.inputProps}
           v-slots={inputSlots}
           v-model={this.value}

diff --git a/src/date-picker/calendar-presets.tsx b/src/date-picker/calendar-presets.tsx
@@ -3,13 +3,9 @@ import { DatePickerConfig } from '../config-provider';
 import { CalendarPresetsProps, DateValue } from './interface';
 import { usePrefixClass } from '../hooks/useConfig';
 
-import { Button as TButton } from '../button';
-
 export default defineComponent({
   name: 'TCalendarPresets',
-  components: {
-    TButton,
-  },
+
   props: {
     global: {
       type: Object as PropType<DatePickerConfig>,

diff --git a/src/slider/hooks/useSliderMark.tsx b/src/slider/hooks/useSliderMark.tsx
@@ -4,6 +4,7 @@ import { SliderMarks } from '../type';
 import { TNode } from '../../common';
 import log from '../../_common/js/log/log';
 import { getStopStyle } from '../util/common';
+import TSliderMark from '../slider-mark';
 
 interface MarkItem {
   point: number;
@@ -79,8 +80,8 @@ export const useSliderMark = (config: Ref<useSliderMarkProps>) => {
           </div>
           <div class={`${name}__mark`}>
             {markList.value.map((item, key) => (
-              <t-slider-mark
-                mark={item.mark}
+              <TSliderMark
+                mark={item.mark as any}
                 point={item.point}
                 key={key}
                 style={getStopStyle(item.position, config.value.vertical)}

diff --git a/src/slider/slider.tsx b/src/slider/slider.tsx
@@ -11,8 +11,6 @@ import {
   toRefs,
 } from 'vue';
 import props from './props';
-import InputNumber from '../input-number/index';
-import TSliderMark from './slider-mark';
 import TSliderButton from './slider-button';
 import { SliderValue } from './type';
 // hooks
@@ -29,11 +27,6 @@ interface SliderButtonType {
 }
 export default defineComponent({
   name: 'TSlider',
-  components: {
-    TSliderMark,
-    TInputNumber: InputNumber,
-    TSliderButton,
-  },
   model: {
     prop: 'value',
     event: 'change',
@@ -394,7 +387,7 @@ export default defineComponent({
         >
           <div class={sliderRailClass.value} style={runwayStyle.value} onClick={onSliderClick} ref={sliderRef}>
             <div class={`${COMPONENT_NAME.value}__track`} style={barStyle.value} />
-            <t-slider-button
+            <TSliderButton
               vertical={vertical.value}
               value={firstValue.value}
               ref={firstButtonRef}
@@ -405,7 +398,7 @@ export default defineComponent({
               }}
             />
             {props.range && (
-              <t-slider-button
+              <TSliderButton
                 vertical={vertical.value}
                 value={secondValue.value}
                 ref={secondButtonRef}