【WIP】feat(ConfigProvider): new component

.github/workflows/typos-config.toml

@@ -10,9 +10,10 @@ loosing = "loosing"
 
 [files]
 extend-exclude = [
-  "CHANGELOG*.md", 
-  "changelog.json", 
+  "CHANGELOG*.md",
+  "changelog.json",
   "echarts.js",
+  "packages/components/locale/*",
   "packages/uniapp-components/npm/**/*",
   "packages/uniapp-pro-components/chat/npm/**/*",
   "packages/tdesign-uniapp/app/common/uni.css",

.gitignore

@@ -17,7 +17,7 @@ packages/tdesign-miniprogram/test/e2e
 packages/tdesign-miniprogram/test/unit
 packages/tdesign-miniprogram/test/unit-virtualHost
 
-# about uniapp 
+# about uniapp
 packages/tdesign-uniapp/example/src/_tdesign*
 packages/tdesign-uniapp/example/src/pages-more/
 packages/tdesign-uniapp/npm_dist/

packages/components/action-sheet/action-sheet.ts

@@ -4,15 +4,16 @@ import config from '../common/config';
 import { ActionSheetTheme, show } from './show';
 import props from './props';
 import useCustomNavbar from '../mixins/using-custom-navbar';
+import usingConfig from '../mixins/using-config';
 
 const { prefix } = config;
-const name = `${prefix}-action-sheet`;
+const componentName = 'action-sheet';
 
 @wxComponent()
 export default class ActionSheet extends SuperComponent {
   static show = show;
 
-  behaviors = [useCustomNavbar];
+  behaviors = [useCustomNavbar, usingConfig({ componentName })];
 
   externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
 
@@ -22,7 +23,7 @@ export default class ActionSheet extends SuperComponent {
 
   data = {
     prefix,
-    classPrefix: name,
+    classPrefix: `${prefix}-${componentName}`,
     gridThemeItems: [],
     currentSwiperIndex: 0,
     defaultPopUpProps: {},
@@ -40,6 +41,9 @@ export default class ActionSheet extends SuperComponent {
     items() {
       this.splitGridThemeActions();
     },
+    globalConfig() {
+      this.updateInitialData();
+    },
   };
 
   lifetimes = {
@@ -55,6 +59,10 @@ export default class ActionSheet extends SuperComponent {
     },
 
     memoInitialData() {
+      this.updateInitialData();
+    },
+
+    updateInitialData() {
       this.initialData = {
         ...this.properties,
         ...this.data,

packages/components/action-sheet/action-sheet.wxml

@@ -61,7 +61,7 @@
         bind:tap="onCancel"
         aria-role="button"
       >
-        {{ cancelText || '取消' }}
+        {{ cancelText || globalConfig.cancel }}
       </view>
     </view>
   </t-popup>

packages/components/calendar/calendar.ts

@@ -4,24 +4,23 @@ import props from './props';
 import TCalendar from '../common/shared/calendar/index';
 import { TdCalendarProps } from './type';
 import useCustomNavbar from '../mixins/using-custom-navbar';
+import usingConfig from '../mixins/using-config';
 import { getPrevMonth, getPrevYear, getNextMonth, getNextYear } from './utils';
 
 const { prefix } = config;
-const name = `${prefix}-calendar`;
-
-const defaultLocaleText = {
-  title: '请选择日期',
-  weekdays: ['日', '一', '二', '三', '四', '五', '六'],
-  monthTitle: '{year} 年 {month}',
-  months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
-  confirm: '确认',
-};
+const componentName = 'calendar';
 
 export interface CalendarProps extends TdCalendarProps {}
 
 @wxComponent()
 export default class Calendar extends SuperComponent {
-  behaviors = [useCustomNavbar];
+  behaviors = [
+    useCustomNavbar,
+    usingConfig({
+      componentName,
+      localeTextPropName: 'localeText',
+    }),
+  ];
 
   externalClasses = [`${prefix}-class`];
 
@@ -33,7 +32,7 @@ export default class Calendar extends SuperComponent {
 
   data = {
     prefix,
-    classPrefix: name,
+    classPrefix: `${prefix}-${componentName}`,
     months: [],
     scrollIntoView: '',
     innerConfirmBtn: {},
@@ -64,14 +63,8 @@ export default class Calendar extends SuperComponent {
     },
 
     ready() {
-      const realLocalText = { ...defaultLocaleText, ...this.properties.localeText };
       this.initialValue();
 
-      this.setData({
-        days: this.base.getDays(realLocalText.weekdays),
-        realLocalText,
-      });
-
       this.calcMonths();
       this.updateCurrentMonth();
 
@@ -82,6 +75,18 @@ export default class Calendar extends SuperComponent {
   };
 
   observers = {
+    localeText() {
+      this.updateLocale?.();
+    },
+
+    globalConfig() {
+      const { globalConfig } = this.data;
+      this.setData({
+        days: this.base.getDays(globalConfig.weekdays),
+        realLocalText: globalConfig,
+      });
+    },
+
     type(v) {
       this.base.type = v;
     },

packages/components/cascader/README.en-US.md

@@ -12,7 +12,7 @@ check-strictly | Boolean | false | \- | N
 close-btn | Boolean | true | \- | N
 keys | Object | - | Typescript: `CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/cascader/type.ts) | N
 options | Array | [] | Typescript: `Array<CascaderOption>` | N
-placeholder | String | 选择选项 | \- | N
+placeholder | String | - | \- | N
 sub-titles | Array | [] | Typescript: `Array<string>` | N
 theme | String | step | options: step/tab | N
 title | String | - | \- | N

packages/components/cascader/README.md

@@ -69,7 +69,7 @@ check-strictly | Boolean | false | 父子节点选中状态不再关联，可各
 close-btn | Boolean | true | 关闭按钮 | N
 keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/cascader/type.ts) | N
 options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
-placeholder | String | 选择选项 | 未选中时的提示文案 | N
+placeholder | String | - | 未选中时的提示文案。组件内置默认值为：'选择选项' | N
 sub-titles | Array | [] | 每级展示的次标题。TS 类型：`Array<string>` | N
 theme | String | step | 展示风格。可选项：step/tab | N
 title | String | - | 标题 | N

packages/components/cascader/cascader.ts

@@ -3,9 +3,10 @@ import config from '../common/config';
 import props from './props';
 import { TdCascaderProps } from './type';
 import { getRect } from '../common/utils';
+import usingConfig from '../mixins/using-config';
 
 const { prefix } = config;
-const name = `${prefix}-cascader`;
+const componentName = 'cascader';
 
 export interface CascaderProps extends TdCascaderProps {}
 
@@ -36,6 +37,8 @@ const defaultState = {
 
 @wxComponent()
 export default class Cascader extends SuperComponent {
+  behaviors = [usingConfig({ componentName })];
+
   externalClasses = [`${prefix}-class`];
 
   options: WechatMiniprogram.Component.ComponentOptions = {
@@ -58,7 +61,7 @@ export default class Cascader extends SuperComponent {
 
   data = {
     prefix,
-    name,
+    classPrefix: `${prefix}-${componentName}`,
     stepIndex: 0,
     selectedIndexes: [],
     selectedValue: [],
@@ -135,13 +138,14 @@ export default class Cascader extends SuperComponent {
     },
 
     async initOptionsHeight(steps: number) {
+      const { classPrefix } = this.data;
       const { theme, subTitles } = this.properties;
 
-      const { height } = await getRect(this, `.${name}__content`);
+      const { height } = await getRect(this, `.${classPrefix}__content`);
       this.state.contentHeight = height;
 
       if (theme === 'step') {
-        await Promise.all([getRect(this, `.${name}__steps`), getRect(this, `.${name}__step`)]).then(
+        await Promise.all([getRect(this, `.${classPrefix}__steps`), getRect(this, `.${classPrefix}__step`)]).then(
           ([stepsRect, stepRect]) => {
             this.state.stepsInitHeight = stepsRect.height - (steps - 1) * stepRect.height;
             this.state.stepHeight = stepRect.height;
@@ -150,7 +154,7 @@ export default class Cascader extends SuperComponent {
       }
 
       if (subTitles.length > 0) {
-        const { height } = await getRect(this, `.${name}__options-title`);
+        const { height } = await getRect(this, `.${classPrefix}__options-title`);
         this.state.subTitlesHeight = height;
       }
 
@@ -229,7 +233,7 @@ export default class Cascader extends SuperComponent {
       });
     },
     genItems() {
-      const { options, selectedIndexes, keys, placeholder } = this.data;
+      const { options, selectedIndexes, keys, placeholder, globalConfig } = this.data;
       const selectedValue = [];
       const steps = [];
       const items = [parseOptions(options, keys)];
@@ -251,7 +255,7 @@ export default class Cascader extends SuperComponent {
       }
 
       if (steps.length < items.length) {
-        steps.push(placeholder);
+        steps.push(placeholder || globalConfig.placeholder);
       }
 
       return {

packages/components/cascader/cascader.wxml

@@ -1,29 +1,37 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <t-popup class="class" visible="{{visible}}" placement="bottom" bind:visible-change="onVisibleChange">
-  <view style="{{_._style([style, customStyle])}}" class="{{name}}">
-    <view class="{{name}}__title">
+  <view style="{{_._style([style, customStyle])}}" class="{{classPrefix}}">
+    <view class="{{classPrefix}}__title">
       <slot name="title" />
-      {{title}}
+      {{title || globalConfig.title}}
     </view>
-    <view class="{{name}}__close-btn" bind:tap="onClose">
+    <view class="{{classPrefix}}__close-btn" bind:tap="onClose">
       <slot name="close-btn" />
       <t-icon wx:if="{{closeBtn}}" size="48rpx" name="close" />
     </view>
 
     <slot name="header" />
 
-    <view class="{{name}}__content">
+    <view class="{{classPrefix}}__content">
       <block wx:if="{{steps && steps.length}}">
-        <view wx:if="{{theme == 'step'}}" class="{{name}}__steps">
-          <view wx:for="{{steps}}" wx:key="index" class="{{name}}__step" bind:tap="onStepClick" data-index="{{index}}">
+        <view wx:if="{{theme == 'step'}}" class="{{classPrefix}}__steps">
+          <view
+            wx:for="{{steps}}"
+            wx:key="index"
+            class="{{classPrefix}}__step"
+            bind:tap="onStepClick"
+            data-index="{{index}}"
+          >
             <view
-              class="{{name}}__step-dot {{name}}__step-dot--{{item !== placeholder ? 'active' : ''}} {{name}}__step-dot--{{index === steps.length - 1 ? 'last' : ''}}"
+              class="{{classPrefix}}__step-dot {{classPrefix}}__step-dot--{{item !== placeholder ? 'active' : ''}} {{classPrefix}}__step-dot--{{index === steps.length - 1 ? 'last' : ''}}"
             ></view>
-            <view class="{{name}}__step-label {{name}}__step-label--{{index === stepIndex ? 'active' : ''}}">
+            <view
+              class="{{classPrefix}}__step-label {{classPrefix}}__step-label--{{index === stepIndex ? 'active' : ''}}"
+            >
               {{ item }}
             </view>
-            <t-icon name="chevron-right" size="44rpx" t-class="{{name}}__step-arrow" />
+            <t-icon name="chevron-right" size="44rpx" t-class="{{classPrefix}}__step-arrow" />
           </view>
         </view>
         <block wx:if="{{theme == 'tab'}}">
@@ -33,18 +41,18 @@
         </block>
       </block>
       <slot name="middle-content" />
-      <view wx:if="{{ subTitles && subTitles[stepIndex] }}" class="{{name}}__options-title"
+      <view wx:if="{{ subTitles && subTitles[stepIndex] }}" class="{{classPrefix}}__options-title"
         >{{subTitles[stepIndex]}}</view
       >
       <view
-        class="{{name}}__options-container"
+        class="{{classPrefix}}__options-container"
         style="width: {{items.length + 1}}00vw; transform: translateX(-{{stepIndex}}00vw)"
       >
         <scroll-view
           wx:for="{{items}}"
           wx:for-item="options"
           wx:key="index"
-          class="{{name}}__options"
+          class="{{classPrefix}}__options"
           scroll-y
           scroll-top="{{scrollTopList[index]}}"
           type="list"

packages/components/cascader/props.ts

@@ -25,10 +25,10 @@ const props: TdCascaderProps = {
     type: Array,
     value: [],
   },
-  /** 未选中时的提示文案 */
+  /** 未选中时的提示文案。组件内置默认值为：'选择选项' */
   placeholder: {
     type: String,
-    value: '选择选项',
+    value: '',
   },
   /** 每级展示的次标题 */
   subTitles: {

packages/components/cascader/type.ts

@@ -39,8 +39,8 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
     value?: Array<CascaderOption>;
   };
   /**
-   * 未选中时的提示文案
-   * @default 选择选项
+   * 未选中时的提示文案。组件内置默认值为：'选择选项'
+   * @default ''
    */
   placeholder?: {
     type: StringConstructor;

packages/components/common/utils.ts

@@ -262,6 +262,19 @@ export const setIcon = (iconName, icon, defaultIcon) => {
 
 export const toCamel = (str) => str.replace(/-(\w)/g, (match, m1) => m1.toUpperCase());
 
+/**
+ * 将 camelCase 转换为 kebab-case
+ * @param str 需要转换的字符串
+ * @returns kebab-case 格式的字符串
+ */
+export function toKebabCase(str: string): string {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+    .replace(/([0-9])([a-zA-Z])/g, '$1-$2')
+    .toLowerCase();
+}
+
 export const getCurrentPage = function <T>() {
   const pages = getCurrentPages();
   return pages[pages.length - 1] as T & WechatMiniprogram.Page.TrivialInstance;

packages/components/common/utils.wxs

@@ -110,7 +110,7 @@ function _style(styles) {
         return item != null && item !== '';
       })
       .map(function (item) {
-        return isArray(item) ? _style(item) : endsWith(item, ';');
+        return isString(item) ? endsWith(item, ';') : _style(item);
       })
       .join(' ');
   }