update

GuYith · GuYith · commit 3aff9967105f · 2023-08-10T11:19:25.000+08:00
diff --git a/tdesign/desktop/.prettierrc.js b/tdesign/desktop/.prettierrc.js
@@ -5,8 +5,8 @@ module.exports = {
   tabWidth: 2,
   // 不使用缩进符，而使用空格
   useTabs: false,
-  // 行尾需要有分号
-  semi: true,
+  // 行尾不需要有分号
+  semi: false,
   // 使用单引号
   singleQuote: true,
   // 对象的 key 仅在必要时用引号
diff --git a/tdesign/desktop/src/button/index.tsx b/tdesign/desktop/src/button/index.tsx
@@ -1,22 +1,20 @@
-import { h, OmiProps, tag, WeElement, render } from 'omi'
-import css from './style'
-import { ButtonProps } from './types'
+import { h, OmiProps, tag, WeElement, render } from 'omi';
+import css from './style';
+import { ButtonProps } from './types';
 import clsx from 'clsx';
-import { TdClassNamePefix } from '../utils'
-
-@tag("t-button")
-export default class Button extends WeElement<ButtonProps>{
+import { TdClassNamePefix } from '../utils';
 
+@tag('t-button')
+export default class Button extends WeElement<ButtonProps> {
   static propTypes = {
     disabled: Boolean,
     loading: Boolean,
     block: Boolean,
-    ghost: Boolean
-  }
+    ghost: Boolean,
+  };
   static css = css as string;
 
   render(props: OmiProps<ButtonProps>) {
-
     const { disabled, loading, block, ghost } = props;
 
     const { href, icon } = props;
@@ -25,52 +23,54 @@ export default class Button extends WeElement<ButtonProps>{
 
     return (
       <button
-        className={
-          clsx(
-            TdClassNamePefix('button'),
-            TdClassNamePefix('button--theme-primary'),
-            TdClassNamePefix('button--variant-base'),
-            {
-              [TdClassNamePefix('size-full-width')]: block
-            },
-            {
-              [TdClassNamePefix('is-loading')]: loading
-            },
-            {
-              [TdClassNamePefix('is-disabled')]: disabled
-            },
-            {
-              [TdClassNamePefix('button--ghost')]: ghost
-            }
-          )
-        }
+        className={clsx(
+          TdClassNamePefix('button'),
+          TdClassNamePefix('button--theme-primary'),
+          TdClassNamePefix('button--variant-base'),
+          {
+            [TdClassNamePefix('size-full-width')]: block,
+          },
+          {
+            [TdClassNamePefix('is-loading')]: loading,
+          },
+          {
+            [TdClassNamePefix('is-disabled')]: disabled,
+          },
+          {
+            [TdClassNamePefix('button--ghost')]: ghost,
+          },
+        )}
       >
-        {
-          loading && (
-            <div
-              style="display:flex;"
-              class={clsx(
-                TdClassNamePefix('loading'),
-                TdClassNamePefix('loading--center'),
-                TdClassNamePefix('size-m'),
-                TdClassNamePefix('loading--inherit-color'),
-              )}>
-              <svg
-                className={
-                  clsx(
-                    TdClassNamePefix('loading__gradient'),
-                    TdClassNamePefix('icon-loading')
-                  )
-                } width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill="#FFF" d="M8 1.5C4.41038 1.5 1.5 4.41038 1.5 8C1.5 11.5896 4.41038 14.5 8 14.5V12.875C5.30761 12.875 3.125 10.6924 3.125 8C3.125 5.30761 5.30761 3.125 8 3.125C10.6924 3.125 12.875 5.30761 12.875 8H14.5C14.5 4.41038 11.5896 1.5 8 1.5Z" fill-opacity="0.9" />
-              </svg>
-            </div>
-          )
-        }
-        <span className='t-button__text'>
+        {loading && (
+          <div
+            style="display:flex;"
+            class={clsx(
+              TdClassNamePefix('loading'),
+              TdClassNamePefix('loading--center'),
+              TdClassNamePefix('size-m'),
+              TdClassNamePefix('loading--inherit-color'),
+            )}
+          >
+            <svg
+              className={clsx(TdClassNamePefix('loading__gradient'), TdClassNamePefix('icon-loading'))}
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill="#FFF"
+                d="M8 1.5C4.41038 1.5 1.5 4.41038 1.5 8C1.5 11.5896 4.41038 14.5 8 14.5V12.875C5.30761 12.875 3.125 10.6924 3.125 8C3.125 5.30761 5.30761 3.125 8 3.125C10.6924 3.125 12.875 5.30761 12.875 8H14.5C14.5 4.41038 11.5896 1.5 8 1.5Z"
+                fill-opacity="0.9"
+              />
+            </svg>
+          </div>
+        )}
+        <span className="t-button__text">
           <slot></slot>
         </span>
       </button>
-    )
+    );
   }
 }
diff --git a/tdesign/desktop/src/link/link.tsx b/tdesign/desktop/src/link/link.tsx
@@ -1,77 +1,20 @@
-import { h, tag, extractClass, WeElement } from 'omi'
-
+import { h, tag, extractClass, WeElement, OmiProps } from 'omi'
+import { LinkProps } from './type'
 import './style/index.js'
-import css from './style/index.ts'
-
-interface LinkProps {
-  /**
-   * 链接内容
-   */
-  content?: string | WeElement
-  /**
-   * 链接内容，同 content
-   */
-  default?: string | WeElement
-  /**
-   * 禁用链接
-   */
-  disabled?: boolean
-  /**
-   * 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法
-   * @default underline
-   */
-  hover?: 'color' | 'underline'
-  /**
-   * 跳转链接
-   * @default ''
-   */
-  href?: string
-  /**
-   * 前置图标: TODO: need to be unified with icon
-   */
-  prefixIcon?: WeElement
-  /**
-   * 尺寸
-   * @default medium
-   */
-  size?: 'small' | 'medium' | 'large'
-  /**
-   * 后置图标
-   */
-  suffixIcon?: WeElement
-  /**
-   * 跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同
-   * @default ''
-   */
-  target?: string
-  /**
-   * 组件风格，依次为默认色、品牌色、危险色、警告色、成功色
-   * @default default
-   */
-  theme?: 'default' | 'primary' | 'danger' | 'warning' | 'success'
-  /**
-   * 普通状态是否显示链接下划线
-   */
-  underline?: boolean
-  /**
-   * 点击事件，禁用状态不会触发点击事件
-   */
-  onClick?: (e: MouseEvent) => void
-}
+import css from './style/index'
 
 @tag('t-link')
 export default class Link extends WeElement<LinkProps> {
   static css = css as string
   static defaultProps = {
     underline: false,
     disabled: false,
-    size: 'medium'
+    size: 'medium',
   }
 
-  //TODO: enum type?
   static propTypes = {
-    content: WeElement, //String | WeElement
-    default: WeElement, //String | WeElement
+    content: Object,
+    default: Object,
     disabled: Boolean,
     hover: String,
     href: String,
@@ -81,7 +24,7 @@ export default class Link extends WeElement<LinkProps> {
     target: String,
     theme: String,
     underline: Boolean,
-    onClick: Function
+    onClick: Function, // need to test
   }
 
   handleClick(e: MouseEvent): void {
@@ -95,17 +38,12 @@ export default class Link extends WeElement<LinkProps> {
         TODO: remain size and status
         remain prefixContent and suffixContent
     **/
-    const linkClass = extractClass(
-      props,
-      `${classPrefix}-link`,
-      `${classPrefix}-link--theme-${props.theme}`,
-      {
-        // [commonSizeClassName[props.size]]: props.size !== 'medium',
-        // [commonStatusClassName.disabled]: props.disabled,
-        [`${classPrefix}-is-underline`]: props.underline,
-        [`${classPrefix}-link--hover-${props.hover}`]: !props.disabled
-      }
-    )
+    const linkClass = extractClass(props, `${classPrefix}-link`, `${classPrefix}-link--theme-${props.theme}`, {
+      // [commonSizeClassName[props.size]]: props.size !== 'medium',
+      // [commonStatusClassName.disabled]: props.disabled,
+      [`${classPrefix}-is-underline`]: props.underline,
+      [`${classPrefix}-link--hover-${props.hover}`]: !props.disabled,
+    })
 
     return (
       <h.f>
diff --git a/tdesign/desktop/src/link/theme.tsx b/tdesign/desktop/src/link/theme.tsx
@@ -21,5 +21,5 @@ export default class LinkTheme extends WeElement<Props> {
 }
 
 render(<link-theme></link-theme>, 'body', {
-  ignoreAttrs: true
+  ignoreAttrs: true,
 })
diff --git a/tdesign/desktop/src/link/type.ts b/tdesign/desktop/src/link/type.ts
@@ -1,56 +1,58 @@
-import { WeElement } from 'omi'
+/* eslint-disable */
+
+import { TNode, TElement, SizeEnum } from '../common';
+
 export interface LinkProps {
   /**
    * 链接内容
    */
-  content?: string | WeElement
+  content?: TNode;
   /**
    * 链接内容，同 content
    */
-  default?: string | WeElement
+  default?: TNode;
   /**
    * 禁用链接
    */
-  disabled?: boolean
+  disabled?: boolean;
   /**
    * 链接悬浮态样式，有 文本颜色变化、添加下划线等 2 种方法
    * @default underline
    */
-  hover?: 'color' | 'underline'
+  hover?: 'color' | 'underline';
   /**
    * 跳转链接
    * @default ''
    */
-  href?: string
+  href?: string;
   /**
    * 前置图标: TODO: need to be unified with icon
    */
-  prefixIcon?: WeElement
-  /**
-   * 尺寸
+  prefixIcon?: TElement;
+  /** 尺寸
    * @default medium
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: SizeEnum;
   /**
    * 后置图标
    */
-  suffixIcon?: WeElement
+  suffixIcon?: TElement;
   /**
    * 跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同
    * @default ''
    */
-  target?: string
+  target?: string;
   /**
    * 组件风格，依次为默认色、品牌色、危险色、警告色、成功色
    * @default default
    */
-  theme?: 'default' | 'primary' | 'danger' | 'warning' | 'success'
+  theme?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
   /**
    * 普通状态是否显示链接下划线
    */
-  underline?: boolean
+  underline?: boolean;
   /**
    * 点击事件，禁用状态不会触发点击事件
    */
-  onClick?: (e: MouseEvent) => void
+  onClick?: (e: MouseEvent) => void;
 }
diff --git a/tutorial/pass-complex-type-props-to-custom-elements.cn.md b/tutorial/pass-complex-type-props-to-custom-elements.cn.md
@@ -122,7 +122,7 @@ define('my-element', class extends WeElement {
     break
 ```
 
-这里可以看到，omi 内部还会对 josn 格式进行处理，防止 `JSON.parse` 出错。当然 eval 和 new Function 可以转化错误格式的 json 字符串，但是考虑到安全性，还是使用`JSON.parse` 。
+这里可以看到，omi 内部还会对 json 格式进行处理，防止 `JSON.parse` 出错。当然 eval 和 new Function 可以转化错误格式的 json 字符串，但是考虑到安全性，还是使用`JSON.parse` 。
 
 ## 实战
 

Original file line number	Diff line number	Diff line change
`@@ -21,5 +21,5 @@ export default class LinkTheme extends WeElement<Props> {`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`render(<link-theme></link-theme>, 'body', {`
`24`		`- ignoreAttrs: true`
	`24`	`+ ignoreAttrs: true,`
`25`	`25`	`})`