feat: add spell check (#864)

* feat: add spell check

* fix: spell check error

* feat: update common

.github/workflows/pr-spelling.template.yml

@@ -0,0 +1,14 @@
+# copy from tencent/tdesign
+name: pr-spell-check
+on: [pull_request]
+
+jobs:
+  run:
+    name: Spell Check with Typos
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Check spelling
+        uses: crate-ci/typos@master
+        with:
+          config: .github/workflows/typos-config.toml

.github/workflows/typos-config.toml

@@ -0,0 +1,3 @@
+[default.extend-words]
+actived = "actived"
+ba = "ba"

CHANGELOG.md

@@ -1250,7 +1250,7 @@ CSS 类名规范:
 ### 🚀 Features
 
 - Tree-shaking: 组件库增加 `sideEffects` 设置，支持业务系统打包时按需加载组件库
-- Notification: `title` 新增支持插槽及 render funtion
+- Notification: `title` 新增支持插槽及 render function
 - Upload: 新增图片预览功能
 - Button 组件新增动画
 - Menu: 组件重构，全新 UI，修复问题如下：

examples/calendar/demos/cell.vue

@@ -6,10 +6,10 @@
         <div class="slotWrapper">
           <div v-for="(item, index) in dataList" :key="index" class="item">
             <span :class="item.value"></span>
-            {{item.label}}
+            {{ item.label }}
           </div>
         </div>
-        <div class="shadow"/>
+        <div class="shadow" />
       </template>
     </div>
   </t-calendar>
@@ -21,16 +21,20 @@ import dayjs from 'dayjs';
 export default {
   data() {
     return {
-      dataList: [{
-        value: 'error',
-        label: '错误事件',
-      }, {
-        value: 'waring',
-        label: '警告事件',
-      }, {
-        value: 'success',
-        label: '正常事件',
-      }],
+      dataList: [
+        {
+          value: 'error',
+          label: '错误事件',
+        },
+        {
+          value: 'warning',
+          label: '警告事件',
+        },
+        {
+          value: 'success',
+          label: '正常事件',
+        },
+      ],
     };
   },
   methods: {
@@ -58,7 +62,7 @@ export default {
     width: 100%;
     height: 12px;
     bottom: 0;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
   }
   .number {
     font-weight: bold;
@@ -81,14 +85,14 @@ export default {
       margin-right: 4px;
     }
   }
-  .error  {
-    background: #E34D59;
+  .error {
+    background: #e34d59;
   }
-  .waring {
-    background: #ED7B2F;
+  .warning {
+    background: #ed7b2f;
   }
   .success {
-    background: #00A870;
+    background: #00a870;
   }
 
   .slotWrapper {

examples/calendar/demos/slot-props-api.vue

@@ -1,9 +1,5 @@
 <template>
-  <t-calendar
-    :head="renderHead"
-    :cell="renderCell"
-  >
-  </t-calendar>
+  <t-calendar :head="renderHead" :cell="renderCell"> </t-calendar>
 </template>
 
 <script lang="jsx">
@@ -20,20 +16,25 @@ export default {
       return <div>{title}</div>;
     },
     renderCell(h, params) {
-      const dataList = [{
-        value: 'error',
-        label: '错误事件',
-      }, {
-        value: 'waring',
-        label: '警告事件',
-      }, {
-        value: 'success',
-        label: '正常事件',
-      }];
-      return <div class="calendar-slot-props-api-demo">
-        {(params.mode === 'month'
-          ? dayjs(params.formattedDate).date() === 15
-          : dayjs(params.formattedDate).month() === 7) && (
+      const dataList = [
+        {
+          value: 'error',
+          label: '错误事件',
+        },
+        {
+          value: 'warning',
+          label: '警告事件',
+        },
+        {
+          value: 'success',
+          label: '正常事件',
+        },
+      ];
+      return (
+        <div class="calendar-slot-props-api-demo">
+          {(params.mode === 'month'
+            ? dayjs(params.formattedDate).date() === 15
+            : dayjs(params.formattedDate).month() === 7) && (
             <span>
               <div class="calendar-slot-props-api-demo-slot-wrapper">
                 {dataList.map((item) => (
@@ -45,11 +46,12 @@ export default {
               </div>
               <div class="shadow" />
             </span>
-        )}
-        <div class="number">
-          {params.mode === 'year' ? dayjs(params.formattedDate).month() : dayjs(params.formattedDate).date()}
+          )}
+          <div class="number">
+            {params.mode === 'year' ? dayjs(params.formattedDate).month() : dayjs(params.formattedDate).date()}
+          </div>
         </div>
-      </div>;
+      );
     },
   },
 };
@@ -91,7 +93,7 @@ export default {
   .error {
     background: #e34d59;
   }
-  .waring {
+  .warning {
     background: #ed7b2f;
   }
   .success {

examples/dialog/demos/attach.vue

@@ -84,7 +84,7 @@ export default Vue.extend({
 }
 .dialog-attach-wrap {
   position: relative;
-  height: 400px;
+  height: 240px;
   padding: 20px;
   border: 1px solid #ebedf0;
   border-radius: 2px;

examples/message/demos/plugin.vue

@@ -2,7 +2,7 @@
   <div>
     <!--
       - 组件实例，关闭某一条信息
-      - 组件实例：MessageInstance = this.$dialog(options)
+      - 组件实例：MessageInstance = this.$message(options)
       - 组件实例：MessageInstance = MessagePlugin(options)
       - 组件实例方法-关闭提示信息：MessageInstance.close()
     -->

script/test/generate-coverage.js

@@ -8,7 +8,7 @@ const parser = new DomParser();
 const result = {};
 fs.readFile(utils.resolveCwd('test/unit/coverage/index.html'), 'utf8', (err, html) => {
   if (err) {
-    console.log('please execute npm run test:coverage frist!', err);
+    console.log('please execute npm run test:coverage first!', err);
     return;
   }
   if (!err) {

site/src/components/base-usage.vue

@@ -77,10 +77,10 @@ const usageCode = computed(() => {
   const propsStrs = Object.keys(changedProps.value)
     .map((name) => `${stringifyProp(name, changedProps.value[name])}`)
     .filter(Boolean);
-  const tureCode = props.code.replace(/\s*v-bind="configProps"/g, () =>
+  const realCode = props.code.replace(/\s*v-bind="configProps"/g, () =>
     propsStrs.length ? `\n  ${propsStrs.join('\n  ')}` : '',
   );
-  usageRef.value.code = tureCode;
-  return tureCode;
+  usageRef.value.code = realCode;
+  return realCode;
 });
 </script>

src/form/form-item.tsx

@@ -40,11 +40,11 @@ export const enum VALIDATE_STATUS {
   FAIL = 'fail',
 }
 
-export interface FormItemContructor extends Vue {
+export interface FormItemConstructor extends Vue {
   form: FormInstance;
 }
 
-export default mixins(getConfigReceiverMixins<FormItemContructor, FormConfig>('form')).extend({
+export default mixins(getConfigReceiverMixins<FormItemConstructor, FormConfig>('form')).extend({
   name: 'TFormItem',
 
   props: { ...props },

src/table/enhanced-table.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
 
   setup(props: TdEnhancedTableProps, context: SetupContext) {
     const {
-      store, dataSource, formatTreeColum, ...treeInstanceFunctions
+      store, dataSource, formatTreeColumn, ...treeInstanceFunctions
     } = useTreeData(props, context);
 
     const treeDataMap = ref(store.value.treeDataMap);
@@ -46,7 +46,7 @@ export default defineComponent({
       const arr: PrimaryTableCol<TableRowData>[] = [];
       for (let i = 0, len = columns.length; i < len; i++) {
         let item = { ...columns[i] };
-        item = formatTreeColum(item);
+        item = formatTreeColumn(item);
         if (item.children?.length) {
           item.children = getColumns(item.children);
         }

src/table/hooks/useTreeData.tsx

@@ -104,7 +104,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
     return columns[treeNodeColumnIndex];
   }
 
-  function formatTreeColum(col: PrimaryTableCol): PrimaryTableCol {
+  function formatTreeColumn(col: PrimaryTableCol): PrimaryTableCol {
     if (!props.tree || !Object.keys(props.tree).length || col.colKey !== treeNodeCol.value.colKey) return col;
     const newCol = { ...treeNodeCol.value };
     newCol.cell = (h, p) => {
@@ -197,7 +197,7 @@ export default function useTreeData(props: TdEnhancedTableProps, context: SetupC
     getData,
     remove,
     appendTo,
-    formatTreeColum,
+    formatTreeColumn,
     toggleExpandData,
     // setExpandedLevel,
   };

src/table/tr.tsx

@@ -271,7 +271,7 @@ export default defineComponent({
     const {
       row, rowIndex, dataLength, rowAndColFixedPosition,
     } = this;
-    const columVNodeList = this.columns?.map((col, colIndex) => {
+    const columnVNodeList = this.columns?.map((col, colIndex) => {
       const cellSpans: RowspanColspan = {};
       const params = {
         row,
@@ -303,7 +303,7 @@ export default defineComponent({
         class={this.classes}
         on={this.getTrListeners(row, rowIndex)}
       >
-        {this.hasLazyLoadHolder ? [<td style={{ height: `${this.tRowHeight}px`, border: 'none' }} />] : columVNodeList}
+        {this.hasLazyLoadHolder ? [<td style={{ height: `${this.tRowHeight}px`, border: 'none' }} />] : columnVNodeList}
       </tr>
     );
   },

src/time-picker/interface.ts

@@ -16,14 +16,14 @@ export enum KeyboardDirection {
   left = 37,
   up = 38,
   right = 39,
-  down = 40
+  down = 40,
 }
 
 export enum EPickerCols {
   hour = 'hour',
   minute = 'minute',
   second = 'second',
-  meridiem = 'meridiem'
+  meridiem = 'meridiem',
 }
 
 export interface InputTime {
@@ -45,7 +45,6 @@ export interface TimePickerInstance extends Vue {
   setInputValue: TimePickerSetInputValue;
   dayjs2InputTime: TimePickerDayjs2InputTime;
   formatString: string;
-  formatedValue: string;
 }
 
 export interface PickerData {
@@ -87,7 +86,7 @@ export interface TimePickerPanelInstance extends Vue {
   panel: Instance;
   isFooterDisplay: boolean;
   localeMeridiems: Array<string>;
-  showNowTime: boolean
+  showNowTime: boolean;
 }
 
 export interface TimePickerPanelColInstance extends Vue {

test/ssr/__snapshots__/ssr.test.js.snap

@@ -1149,7 +1149,7 @@ exports[`ssr snapshot test renders ./examples/calendar/demos/cell.vue correctly
                 <div class="item"><span class="error"></span>
                   错误事件
                 </div>
-                <div class="item"><span class="waring"></span>
+                <div class="item"><span class="warning"></span>
                   警告事件
                 </div>
                 <div class="item"><span class="success"></span>
@@ -2106,7 +2106,7 @@ exports[`ssr snapshot test renders ./examples/calendar/demos/slot-props-api.vue
           </div>
           <div class="t-calendar__table-body-cell">
             <div class="calendar-slot-props-api-demo"><span><div class="calendar-slot-props-api-demo-slot-wrapper"><div class="item"><span class="error"></span>错误事件</div>
-            <div class="item"><span class="waring"></span>警告事件</div>
+            <div class="item"><span class="warning"></span>警告事件</div>
             <div class="item"><span class="success"></span>正常事件</div>
           </div>
           <div class="shadow"></div></span>

test/unit/calendar/__snapshots__/demo.test.js.snap

@@ -2789,7 +2789,7 @@ exports[`Calendar Calendar cellVue demo works fine 1`] = `
                   class="item"
                 >
                   <span
-                    class="waring"
+                    class="warning"
                   />
                   
           警告事件
@@ -8056,7 +8056,7 @@ exports[`Calendar Calendar slotPropsApiVue demo works fine 1`] = `
                     class="item"
                   >
                     <span
-                      class="waring"
+                      class="warning"
                     />
                     警告事件
                   </div>