feat(ui): add input component

.yarnrc

@@ -2,4 +2,4 @@
 # yarn lockfile v1
 
 
-yarn-path ".yarn/releases/yarn-1.22.10.cjs"
+yarn-path ".yarn/releases/yarn-1.22.17.cjs"

packages/site/src/app/components/route/DemoBox.tsx

@@ -80,7 +80,7 @@ export function AppDemoBox(props: AppDemoBoxProps) {
  <div className="app-demo-box__title">
  {title}
  <DTooltip dTitle={t('Edit this demo on GitHub')}>
- <DIcon className="icon-button" style={{ marginLeft: 4 }} dSize={16}>
+ <DIcon className="icon-button" style={{ marginLeft: 4 }} viewBox="64 64 896 896" dSize={16}>
  <path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path>
  </DIcon>
  </DTooltip>
@@ -89,17 +89,17 @@ export function AppDemoBox(props: AppDemoBoxProps) {
  </div>
  <div className="app-demo-box__toolbar">
  <DTooltip dTitle={t('Open in CodeSandbox')}>
- <DIcon className="icon-button" dSize={18}>
+ <DIcon className="icon-button" viewBox="0 0 1024 1024" dSize={18}>
  <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z"></path>
  </DIcon>
  </DTooltip>
  <DTooltip dTitle={t('Open in Stackblitz')}>
- <DIcon className="icon-button" dSize={18}>
+ <DIcon className="icon-button" viewBox="64 64 896 896" dSize={18}>
  <path d="M848 359.3H627.7L825.8 109c4.1-5.3.4-13-6.3-13H436c-2.8 0-5.5 1.5-6.9 4L170 547.5c-3.1 5.3.7 12 6.9 12h174.4l-89.4 357.6c-1.9 7.8 7.5 13.3 13.3 7.7L853.5 373c5.2-4.9 1.7-13.7-5.5-13.7zM378.2 732.5l60.3-241H281.1l189.6-327.4h224.6L487 427.4h211L378.2 732.5z"></path>
  </DIcon>
  </DTooltip>
  <DTooltip dTitle={copyCode ? t('Copied!') : t('Copy code')} afterVisibleChange={afterCopyTrige}>
- <DIcon className="icon-button" dSize={18} onClick={handleCopyClick}>
+ <DIcon className="icon-button" viewBox="64 64 896 896" dSize={18} onClick={handleCopyClick}>
  {copyCode ? (
  <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path>
  ) : (
@@ -108,7 +108,7 @@ export function AppDemoBox(props: AppDemoBoxProps) {
  </DIcon>
  </DTooltip>
  <DTooltip dTitle={openCode ? t('Hide code') : t('Show code')}>
- <DIcon className="icon-button" dSize={18} onClick={handleOpenClick}>
+ <DIcon className="icon-button" viewBox="0 0 1024 1024" dSize={18} onClick={handleOpenClick}>
  {openCode ? (
  <path d="M1018.645 531.298c8.635-18.61 4.601-41.42-11.442-55.864l-205.108-184.68c-19.7-17.739-50.05-16.148-67.789 3.552-17.738 19.7-16.148 50.051 3.553 67.79l166.28 149.718-167.28 150.62c-19.7 17.738-21.291 48.088-3.553 67.789 17.739 19.7 48.089 21.291 67.79 3.553l205.107-184.68a47.805 47.805 0 0 0 12.442-17.798zM119.947 511.39l166.28-149.719c19.7-17.738 21.29-48.088 3.552-67.789-17.738-19.7-48.088-21.291-67.789-3.553L16.882 475.01C.84 489.456-3.194 512.264 5.44 530.874a47.805 47.805 0 0 0 12.442 17.798l205.108 184.68c19.7 17.739 50.05 16.148 67.79-3.552 17.738-19.7 16.147-50.051-3.553-67.79l-167.28-150.62zm529.545-377.146c24.911 9.066 37.755 36.61 28.688 61.522L436.03 861.068c-9.067 24.911-36.611 37.755-61.522 28.688-24.911-9.066-37.755-36.61-28.688-61.522l242.15-665.302c9.067-24.911 36.611-37.755 61.522-28.688z"></path>
  ) : (

packages/site/src/app/components/route/RouteArticle.tsx

@@ -113,7 +113,7 @@ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
  {title}
  {i18n.language !== 'en-US' && <span className="app-route-article__subtitle">{subtitle}</span>}
  <DTooltip dTitle={t('Edit this page on GitHub')}>
- <DIcon className="icon-button" style={{ marginLeft: 4 }} dSize={20}>
+ <DIcon className="icon-button" style={{ marginLeft: 4 }} viewBox="64 64 896 896" dSize={20}>
  <path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path>
  </DIcon>
  </DTooltip>
@@ -122,7 +122,7 @@ m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
  <h2 id="Examples">
  {t('Examples')}
  <DTooltip dTitle={t('Expand all code')}>
- <DIcon className="icon-button" style={{ marginLeft: 4 }} dSize={24}>
+ <DIcon className="icon-button" style={{ marginLeft: 4 }} viewBox="64 64 896 896" dSize={24}>
  <path d="M516 673c0 4.4 3.4 8 7.5 8h185c4.1 0 7.5-3.6 7.5-8v-48c0-4.4-3.4-8-7.5-8h-185c-4.1 0-7.5 3.6-7.5 8v48zm-194.9 6.1l192-161c3.8-3.2 3.8-9.1 0-12.3l-192-160.9A7.95 7.95 0 00308 351v62.7c0 2.4 1 4.6 2.9 6.1L420.7 512l-109.8 92.2a8.1 8.1 0 00-2.9 6.1V673c0 6.8 7.9 10.5 13.1 6.1zM880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path>
  </DIcon>
  </DTooltip>

packages/site/src/app/configs/icons.json

@@ -3,6 +3,7 @@
  "name": "search",
  "list": [
  {
+ "viewBox": "64 64 896 896",
  "paths": [
  "M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
  ]
@@ -13,6 +14,7 @@
  "name": "full-screen",
  "list": [
  {
+ "viewBox": "64 64 896 896",
  "paths": [
  "M855 160.1l-189.2 23.5c-6.6.8-9.3 8.8-4.7 13.5l54.7 54.7-153.5 153.5a8.03 8.03 0 000 11.3l45.1 45.1c3.1 3.1 8.2 3.1 11.3 0l153.6-153.6 54.7 54.7a7.94 7.94 0 0013.5-4.7L863.9 169a7.9 7.9 0 00-8.9-8.9zM416.6 562.3a8.03 8.03 0 00-11.3 0L251.8 715.9l-54.7-54.7a7.94 7.94 0 00-13.5 4.7L160.1 855c-.6 5.2 3.7 9.5 8.9 8.9l189.2-23.5c6.6-.8 9.3-8.8 4.7-13.5l-54.7-54.7 153.6-153.6c3.1-3.1 3.1-8.2 0-11.3l-45.2-45z"
  ]
@@ -23,6 +25,7 @@
  "name": "arrow-down",
  "list": [
  {
+ "viewBox": "64 64 896 896",
  "paths": [
  "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
  ]
@@ -33,6 +36,7 @@
  "name": "arrow-left",
  "list": [
  {
+ "viewBox": "64 64 896 896",
  "paths": [
  "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
  ]
@@ -43,6 +47,7 @@
  "name": "arrow-right",
  "list": [
  {
+ "viewBox": "64 64 896 896",
  "paths": [
  "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
  ]
@@ -53,6 +58,7 @@
  "name": "experiment",
  "list": [
  {
+ "viewBox": "64 64 896 896",
  "paths": [
  "M512 472a40 40 0 1080 0 40 40 0 10-80 0zm367 352.9L696.3 352V178H768v-68H256v68h71.7v174L145 824.9c-2.8 7.4-4.3 15.2-4.3 23.1 0 35.3 28.7 64 64 64h614.6c7.9 0 15.7-1.5 23.1-4.3 33-12.7 49.4-49.8 36.6-82.8zM395.7 364.7V180h232.6v184.7L719.2 600c-20.7-5.3-42.1-8-63.9-8-61.2 0-119.2 21.5-165.3 60a188.78 188.78 0 01-121.3 43.9c-32.7 0-64.1-8.3-91.8-23.7l118.8-307.5zM210.5 844l41.7-107.8c35.7 18.1 75.4 27.8 116.6 27.8 61.2 0 119.2-21.5 165.3-60 33.9-28.2 76.3-43.9 121.3-43.9 35 0 68.4 9.5 97.6 27.1L813.5 844h-603z"
  ]
@@ -63,6 +69,7 @@
  "name": "ellipsis",
  "list": [
  {
+ "viewBox": "64 64 896 896",
  "paths": [
  "M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
  ]
@@ -73,6 +80,7 @@
  "name": "appstore",
  "list": [
  {
+ "viewBox": "64 64 896 896",
  "paths": [
  "M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
  ]
@@ -83,10 +91,34 @@
  "name": "setting",
  "list": [
  {
+ "viewBox": "64 64 896 896",
  "paths": [
  "M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
  ]
  }
  ]
+ },
+ {
+ "name": "user",
+ "list": [
+ {
+ "viewBox": "64 64 896 896",
+ "paths": [
+ "M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+ ]
+ }
+ ]
+ },
+ {
+ "name": "info",
+ "list": [
+ {
+ "viewBox": "64 64 896 896",
+ "paths": [
+ "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z",
+ "M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+ ]
+ }
+ ]
  }
 ]

packages/ui/src/components/_header/Header.test.tsx

@@ -6,7 +6,7 @@ import { DHeader } from './Header';
 
 describe('DHeader', () => {
  const icon = (
- <DIcon>
+ <DIcon viewBox="64 64 896 896">
  <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
  </DIcon>
  );

packages/ui/src/components/_header/Header.tsx

@@ -35,7 +35,7 @@ export function DHeader(props: DHeaderProps) {
  dType="text"
  dIcon={
  isUndefined(dCloseIcon) ? (
- <DIcon>
+ <DIcon viewBox="64 64 896 896">
  <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
  </DIcon>
  ) : (

packages/ui/src/components/button/Button.tsx

@@ -59,14 +59,14 @@ export const DButton = React.forwardRef<DButtonRef, DButtonProps>((props, ref) =
  onClick?.(e);
 
  if (!dLoading && (type === 'primary' || type === 'secondary' || type === 'outline' || type === 'dashed')) {
- wave.next([e.currentTarget, `var(--${dPrefix}color-${color})`]);
+ wave(e.currentTarget, `var(--${dPrefix}color-${color})`);
  }
  },
  [color, dLoading, dPrefix, onClick, type, wave]
  );
 
  const loadingIcon = (
- <DIcon dSpin>
+ <DIcon viewBox="0 0 1024 1024" dSpin>
  <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
  </DIcon>
  );

packages/ui/src/components/button/README.zh-Hant.md

@@ -22,7 +22,7 @@ title: 按钮
 | dLoading | 设置按钮载入状态 | boolean | false |
 | dBlock | 将按钮宽度调整为其父宽度 | boolean | false |
 | dShape | 设置按钮形状 | 'circle' \| 'round' | - |
-| dSize | 设置按钮大小 | 'smaller' \| 'larger' | - |
+| dSize | 设置按钮尺寸 | 'smaller' \| 'larger' | - |
 | dIcon | 设置按钮的图标 | React.ReactNode | - |
 | dIconRight | 设置图标在右侧 | boolean | false |
 <!-- prettier-ignore-end -->
@@ -42,6 +42,6 @@ export type DButtonRef = HTMLButtonElement;
 | --- | --- | --- | --- | 
 | dType | 设置按钮组中按钮的形态 | 参考 DButtonProps['dType'] | 'secondary' |
 | dColor | 设置按钮组中按钮的颜色 | 参考 DButtonProps['dColor'] | 'primary' |
-| dSize | 设置按钮组中按钮的大小 | 参考 DButtonProps['dSize'] | - |
+| dSize | 设置按钮组中按钮的尺寸 | 参考 DButtonProps['dSize'] | - |
 | buttonGroupDisabled | 禁用按钮组中的按钮 | boolean | false |
 <!-- prettier-ignore-end -->

packages/ui/src/components/compose/README.zh-Hant.md

@@ -17,7 +17,7 @@ title: 组合
 <!-- prettier-ignore-start -->
 | 参数 | 说明 | 类型 | 默认值 | 
 | --- | --- | --- | --- | 
-| dSize | 设置子项大小 | 'smaller' \| 'larger' | - |
+| dSize | 设置子项尺寸 | 'smaller' \| 'larger' | - |
 | dDisabled | 是否禁用子项 | boolean | false |
 <!-- prettier-ignore-end -->
 

packages/ui/src/components/compose/demos/1.Basic.md

@@ -13,18 +13,15 @@ The simplest usage.
 最简单的用法。
 
 ```tsx
-import { DCompose, DButton, DIcon } from '@react-devui/ui';
+import { DCompose, DButton, DIcon, DInput } from '@react-devui/ui';
 
 export default function Demo() {
  const searchIcon = <DIcon dName="search"></DIcon>;
 
  return (
  <DCompose>
- <DButton dType="secondary" dShape="round">
- Round
- </DButton>
- <DButton dType="secondary">M</DButton>
- <DButton dType="primary" dIcon={searchIcon}></DButton>
+ <DInput placeholder="Search" />
+ <DButton dIcon={searchIcon}></DButton>
  </DCompose>
  );
 }

packages/ui/src/components/compose/demos/2.CustomItem.md

@@ -13,19 +13,24 @@ Provide any combinable items through `DComposeItem`.
 通过 `DComposeItem` 提供任意可组合的项。
 
 ```tsx
-import { DCompose, DComposeItem, DButton, DIcon } from '@react-devui/ui';
+import { DCompose, DComposeItem, DIcon, DInput } from '@react-devui/ui';
 
 export default function Demo() {
  const settingIcon = <DIcon dName="setting"></DIcon>;
 
  return (
- <DCompose>
- <DComposeItem>
- <span style={{ padding: '0 12px' }}>Item</span>
- </DComposeItem>
- <DButton dType="secondary">DButton</DButton>
- <DComposeItem dGray>{settingIcon}</DComposeItem>
- </DCompose>
+ <>
+ <DCompose>
+ <DInput placeholder="Setting" />
+ <DComposeItem>{settingIcon}</DComposeItem>
+ </DCompose>
+ <br />
+ <DCompose>
+ <DComposeItem dGray>http://</DComposeItem>
+ <DInput placeholder="URL" />
+ <DComposeItem dGray>.com</DComposeItem>
+ </DCompose>
+ </>
  );
 }
 ```

packages/ui/src/components/compose/demos/3.Size.md

@@ -13,12 +13,13 @@ Adjust the size of items by setting `dSize` to `larger` and `smaller`.
 通过设置 `dSize` 为 `larger` `smaller` 调整子项尺寸。
 
 ```tsx
-import { DCompose, DComposeItem, DButton, DIcon, DRadio, DRadioGroup } from '@react-devui/ui';
+import { DCompose, DComposeItem, DInput, DButton, DIcon, DRadio, DRadioGroup } from '@react-devui/ui';
 import { useImmer } from '@react-devui/ui/hooks';
 
 export default function Demo() {
  const [size, setSize] = useImmer(undefined);
  const settingIcon = <DIcon dName="setting"></DIcon>;
+ const searchIcon = <DIcon dName="search"></DIcon>;
 
  return (
  <>
@@ -31,11 +32,19 @@ export default function Demo() {
  </DRadioGroup>
  <br />
  <DCompose dSize={size}>
- <DComposeItem>
- <span style={{ padding: '0 12px' }}>Item</span>
- </DComposeItem>
- <DButton dType="secondary">DButton</DButton>
- <DComposeItem dGray>{settingIcon}</DComposeItem>
+ <DInput placeholder="Search" />
+ <DButton dIcon={searchIcon}></DButton>
+ </DCompose>
+ <br />
+ <DCompose dSize={size}>
+ <DInput placeholder="Setting" />
+ <DComposeItem>{settingIcon}</DComposeItem>
+ </DCompose>
+ <br />
+ <DCompose dSize={size}>
+ <DComposeItem dGray>http://</DComposeItem>
+ <DInput placeholder="URL" />
+ <DComposeItem dGray>.com</DComposeItem>
  </DCompose>
  </>
  );