Feature/color picker

src/config-provider/config-provider.tsx

@@ -1,12 +1,9 @@
 import { defineComponent, PropType, provide } from 'vue';
 import { GlobalConfigProvider } from './type';
 import { renderTNodeJSX } from '../utils/render-tnode';
-import { prefix } from '../config';
-
-const name = `${prefix}-config-provider`;
 
 export default defineComponent({
-  name,
+  name: 'TConfigProvider',
 
   props: {
     globalConfig: Object as PropType<GlobalConfigProvider>,

src/config-provider/config-receiver.ts

@@ -1,7 +1,6 @@
 import { defineComponent } from 'vue';
 import defaultConfig from './zh_CN_config';
 import { GlobalConfigProvider } from './type';
-import { prefix } from '../config';
 
 export type ValueOf<T> = T[keyof T];
 
@@ -14,11 +13,9 @@ export interface Placement {
   [propName: string]: string | number;
 }
 
-const name = `${prefix}-locale-receiver`;
-
 export default function getConfigReceiverMixins<C extends ComponentConfigType>(componentName: string) {
   return defineComponent({
-    name,
+    name: 'TLocalReceiver',
     inject: {
       globalConfig: {
         default: undefined,

src/dialog/dialog.tsx

@@ -1,6 +1,5 @@
 import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, Transition, watch } from 'vue';
 import { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon } from 'tdesign-icons-vue-next';
-import { prefix } from '../config';
 import TButton from '../button';
 import { DialogCloseContext, TdDialogProps } from './type';
 import props from './props';
@@ -86,6 +85,7 @@ export default defineComponent({
   setup(props: TdDialogProps, context) {
     const COMPONENT_NAME = usePrefixClass('dialog');
     const LOCK_CLASS = usePrefixClass('dialog--lock');
+    const classPrefix = usePrefixClass();
     const renderContent = useContent();
     const renderTNodeJSX = useTNodeJSX();
     const dialogEle = ref<HTMLElement | null>(null);
@@ -106,7 +106,10 @@ export default defineComponent({
     const isModal = computed(() => props.mode === 'modal');
     // 是否非模态对话框
     const isModeless = computed(() => props.mode === 'modeless');
-    const maskClass = computed(() => [`${COMPONENT_NAME.value}__mask`, !props.showOverlay && `${prefix}-is-hidden`]);
+    const maskClass = computed(() => [
+      `${COMPONENT_NAME.value}__mask`,
+      !props.showOverlay && `${classPrefix.value}-is-hidden`,
+    ]);
     const dialogClass = computed(() => {
       const dialogClass = [
         `${COMPONENT_NAME.value}`,
@@ -242,14 +245,14 @@ export default defineComponent({
           {getCancelBtn({
             cancelBtn: props.cancelBtn,
             globalCancel: global.value.cancel,
-            className: `${prefix}-dialog__cancel`,
+            className: `${COMPONENT_NAME.value}__cancel`,
           })}
           {getConfirmBtn({
             theme: props.theme,
             confirmBtn: props.confirmBtn,
             globalConfirm: global.value.confirm,
             globalConfirmBtnTheme: global.value.confirmBtnTheme,
-            className: `${prefix}-dialog__confirm`,
+            className: `${COMPONENT_NAME.value}__confirm`,
           })}
         </div>
       );

src/drawer/drawer.tsx

@@ -3,7 +3,6 @@ import { CloseIcon } from 'tdesign-icons-vue-next';
 import { useConfig, usePrefixClass } from '../config-provider';
 import { addClass, removeClass } from '../utils/dom';
 import { ClassName, Styles } from '../common';
-import { prefix } from '../config';
 import { Button as TButton } from '../button';
 import props from './props';
 import { FooterButton, DrawerCloseContext } from './type';
@@ -13,8 +12,6 @@ import { useAction } from '../dialog/hooks';
 
 type FooterButtonType = 'confirm' | 'cancel';
 
-const lockClass = `${prefix}-drawer--lock`;
-
 export default defineComponent({
   name: 'TDrawer',
 
@@ -32,6 +29,9 @@ export default defineComponent({
   setup(props, context) {
     const { global } = useConfig('drawer');
     const COMPONENT_NAME = usePrefixClass('drawer');
+
+    const LOCK_CLASS = usePrefixClass('drawer--lock');
+
     const confirmBtnAction = (e: MouseEvent) => {
       props.onConfirm?.({ e });
     };
@@ -166,9 +166,9 @@ export default defineComponent({
       () => props.visible,
       (value: boolean) => {
         if (value && !props.showInAttachedElement) {
-          props.preventScrollThrough && addClass(document.body, lockClass);
+          props.preventScrollThrough && addClass(document.body, LOCK_CLASS.value);
         } else {
-          props.preventScrollThrough && removeClass(document.body, lockClass);
+          props.preventScrollThrough && removeClass(document.body, LOCK_CLASS.value);
         }
       },
       { immediate: true },

src/dropdown/dropdown.tsx

@@ -1,5 +1,4 @@
 import { defineComponent, VNode } from 'vue';
-import { prefix } from '../config';
 import Popup from '../popup/index';
 import DropdownMenu from './dropdown-menu';
 import { DropdownOption, TdDropdownProps } from './type';

src/form/const.ts

@@ -1,29 +1,5 @@
-import { prefix } from '../config';
-
-export const FORM_ITEM_CLASS_PREFIX = 't-form-item__';
-
-const form = `${prefix}-form`;
-const input = `${prefix}-input`;
-const is = `${prefix}-is`;
-
-export const CLASS_NAMES = {
-  form,
-  label: `${form}__label`,
-  labelTop: `${form}__label--top`,
-  inline: `${form}-inline`,
-  formItem: `${form}__item`,
-  formItemWithHelp: `${form}__item-with-help`,
-  formItemWithExtra: `${form}__item-with-extra`,
-  controls: `${form}__controls`,
-  controlsContent: `${form}__controls-content`,
-  status: `${form}__status`,
-  help: `${form}__help`,
-  extra: `${input}__extra`,
-  success: `${is}-success`,
-  successBorder: `${form}--success-border`,
-  error: `${is}-error`,
-  warning: `${is}-warning`,
-};
+import { computed } from 'vue';
+import { usePrefixClass } from '../config-provider';
 
 // 允许 Form 统一控制的表单
 export const FORM_CONTROL_COMPONENTS = [
@@ -45,3 +21,32 @@ export const FORM_CONTROL_COMPONENTS = [
   'TTransfer',
   'TSlider',
 ];
+
+export const useCLASSNAMES = () => {
+  const classPrefix = usePrefixClass();
+
+  return computed(() => {
+    const form = `${classPrefix.value}-form`;
+    const input = `${classPrefix.value}-input`;
+    const is = `${classPrefix.value}-is`;
+
+    return {
+      form,
+      label: `${form}__label`,
+      labelTop: `${form}__label--top`,
+      inline: `${form}-inline`,
+      formItem: `${form}__item`,
+      formItemWithHelp: `${form}__item-with-help`,
+      formItemWithExtra: `${form}__item-with-extra`,
+      controls: `${form}__controls`,
+      controlsContent: `${form}__controls-content`,
+      status: `${form}__status`,
+      help: `${form}__help`,
+      extra: `${input}__extra`,
+      success: `${is}-success`,
+      successBorder: `${form}--success-border`,
+      error: `${is}-error`,
+      warning: `${is}-warning`,
+    };
+  });
+};

src/form/form-item.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, VNode, nextTick, h, ComponentPublicInstance, Slot } from 'vue';
+import { defineComponent, VNode, nextTick, h, Slot } from 'vue';
 import { CheckCircleFilledIcon, ErrorCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next';
 import cloneDeep from 'lodash/cloneDeep';
 import lodashGet from 'lodash/get';
@@ -17,7 +17,7 @@ import {
   FormErrorMessage,
 } from './type';
 import props from './form-item-props';
-import { CLASS_NAMES, FORM_ITEM_CLASS_PREFIX } from './const';
+import { useCLASSNAMES } from './const';
 import Form, { FormItemInstance } from './form';
 import { ClassName, TNodeReturnValue, Styles } from '../common';
 import mixins from '../utils/mixins';
@@ -47,8 +47,12 @@ export default defineComponent({
   props: { ...props },
   setup() {
     const FROM_LABEL = usePrefixClass('form__label');
+    const CLASS_NAMES = useCLASSNAMES();
+    const FORM_ITEM_CLASS_PREFIX = usePrefixClass('form-item__');
     return {
+      CLASS_NAMES,
       FROM_LABEL,
+      FORM_ITEM_CLASS_PREFIX,
     };
   },
 
@@ -69,11 +73,11 @@ export default defineComponent({
   computed: {
     classes(): ClassName {
       return [
-        CLASS_NAMES.formItem,
-        FORM_ITEM_CLASS_PREFIX + this.name,
+        this.CLASS_NAMES.formItem,
+        this.FORM_ITEM_CLASS_PREFIX + this.name,
         {
-          [CLASS_NAMES.formItemWithHelp]: this.help,
-          [CLASS_NAMES.formItemWithExtra]: this.renderTipsInfo(),
+          [this.CLASS_NAMES.formItemWithHelp]: this.help,
+          [this.CLASS_NAMES.formItemWithExtra]: this.renderTipsInfo(),
         },
       ];
     },
@@ -84,7 +88,7 @@ export default defineComponent({
       const labelWidth = isNil(this.labelWidth) ? parent?.labelWidth : this.labelWidth;
 
       return [
-        CLASS_NAMES.label,
+        this.CLASS_NAMES.label,
         {
           [`${FROM_LABEL}--required`]: this.needRequiredMark,
           [`${FROM_LABEL}--colon`]: this.hasColon,
@@ -98,11 +102,13 @@ export default defineComponent({
       const parent = this.form as FormInstance;
       if (!parent.showErrorMessage) return '';
       if (this.verifyStatus === ValidateStatus.SUCCESS) {
-        return this.successBorder ? [CLASS_NAMES.success, CLASS_NAMES.successBorder].join(' ') : CLASS_NAMES.success;
+        return this.successBorder
+          ? [this.CLASS_NAMES.success, this.CLASS_NAMES.successBorder].join(' ')
+          : this.CLASS_NAMES.success;
       }
       if (!this.errorList.length) return;
       const type = this.errorList[0].type || 'error';
-      return type === 'error' ? CLASS_NAMES.error : CLASS_NAMES.warning;
+      return type === 'error' ? this.CLASS_NAMES.error : this.CLASS_NAMES.warning;
     },
 
     disabled(): boolean {
@@ -111,7 +117,7 @@ export default defineComponent({
 
     contentClasses() {
       const getErrorClass: string = this.errorClasses;
-      return [CLASS_NAMES.controls, getErrorClass];
+      return [this.CLASS_NAMES.controls, getErrorClass];
     },
     contentStyle(): Styles {
       const parent = this.form;
@@ -247,20 +253,20 @@ export default defineComponent({
       const parent = this.form;
       let helpVNode: VNode;
       if (this.help) {
-        helpVNode = <div class={CLASS_NAMES.help}>{this.help}</div>;
+        helpVNode = <div class={this.CLASS_NAMES.help}>{this.help}</div>;
       }
       const list = this.errorList;
       if (parent.showErrorMessage && list && list[0] && list[0].message) {
-        return <p class={CLASS_NAMES.extra}>{list[0].message}</p>;
+        return <p class={this.CLASS_NAMES.extra}>{list[0].message}</p>;
       }
       if (this.successList.length) {
-        return <p class={CLASS_NAMES.extra}>{this.successList[0].message}</p>;
+        return <p class={this.CLASS_NAMES.extra}>{this.successList[0].message}</p>;
       }
       return helpVNode;
     },
     getDefaultIcon(): TNodeReturnValue {
       const resultIcon = (Icon: IconConstructor) => (
-        <span class={CLASS_NAMES.status}>
+        <span class={this.CLASS_NAMES.status}>
           <Icon />
         </span>
       );
@@ -284,7 +290,9 @@ export default defineComponent({
       slotStatusIcon: Slot,
       props?: TdFormItemProps,
     ): TNodeReturnValue {
-      const resultIcon = (otherContent?: TNodeReturnValue) => <span class={CLASS_NAMES.status}>{otherContent}</span>;
+      const resultIcon = (otherContent?: TNodeReturnValue) => (
+        <span class={this.CLASS_NAMES.status}>{otherContent}</span>
+      );
       if (statusIcon === true) {
         return this.getDefaultIcon();
       }
@@ -353,7 +361,7 @@ export default defineComponent({
       <div class={this.classes}>
         {this.getLabel()}
         <div class={this.contentClasses} style={this.contentStyle}>
-          <div class={CLASS_NAMES.controlsContent}>
+          <div class={this.CLASS_NAMES.controlsContent}>
             {this.$slots.default ? this.$slots.default() : null}
             {this.getSuffixIcon()}
           </div>

src/form/form.tsx

@@ -4,7 +4,7 @@ import isBoolean from 'lodash/isBoolean';
 import isArray from 'lodash/isArray';
 import { FormValidateResult, TdFormProps, FormValidateParams, ValidateResultList } from './type';
 import props from './props';
-import { FORM_ITEM_CLASS_PREFIX, CLASS_NAMES, FORM_CONTROL_COMPONENTS } from './const';
+import { useCLASSNAMES, FORM_CONTROL_COMPONENTS } from './const';
 import FormItem from './form-item';
 import { FormResetEvent, FormSubmitEvent, ClassName } from '../common';
 import { emitEvent } from '../utils/event';
@@ -35,8 +35,13 @@ export default defineComponent({
     provide<FormDisabledProvider>('formDisabled', {
       disabled,
     });
+    const CLASS_NAMES = useCLASSNAMES();
+    const FORM_ITEM_CLASS_PREFIX = usePrefixClass('form-item__');
+
     return {
+      CLASS_NAMES,
       COMPONENT_NAME,
+      FORM_ITEM_CLASS_PREFIX,
     };
   },
 
@@ -49,7 +54,7 @@ export default defineComponent({
   computed: {
     formClass(): ClassName {
       return [
-        CLASS_NAMES.form,
+        this.CLASS_NAMES.form,
         {
           [`${this.COMPONENT_NAME}-inline`]: this.layout === 'inline',
         },
@@ -69,7 +74,7 @@ export default defineComponent({
       if (isBoolean(result)) return '';
       const [firstKey] = Object.keys(result);
       if (this.scrollToFirstError) {
-        this.scrollTo(`.${FORM_ITEM_CLASS_PREFIX + firstKey}`);
+        this.scrollTo(`.${this.FORM_ITEM_CLASS_PREFIX + firstKey}`);
       }
       const resArr = result[firstKey] as ValidateResultList;
       if (!isArray(resArr)) return '';

src/menu/menu-group.tsx

@@ -1,5 +1,4 @@
 import { defineComponent } from 'vue';
-import { prefix } from '../config';
 import props from './menu-group-props';
 import { renderTNodeJSX } from '../utils/render-tnode';
 import { usePrefixClass } from '../config-provider';