refactor(docs): 调整文档的实现

Author: caixw

apps/docs/src/components/demo/button/api.zh-Hans.json

@@ -832,13 +832,6 @@
 				"type": "string | undefined",
 				"reactive": true
 			},
-			{
-				"name": "display",
-				"summary": "按钮上的显示内容\n\n",
-				"type": "\"icon\" | \"text\" | \"all\" | undefined",
-				"def": "'all'\n\n",
-				"reactive": true
-			},
 			{
 				"name": "style",
 				"summary": "组件根元素的样式\n\n",

apps/docs/src/components/demo/button/print.tsx

@@ -7,7 +7,7 @@ import { PrintButton } from '@cmfx/components';
 import type { JSX } from 'solid-js';
 import { Portal } from 'solid-js/web';
 
-import { arraySelector, boolSelector, buttonKindSelector, paletteSelector } from '@docs/components/base';
+import { boolSelector, buttonKindSelector, paletteSelector } from '@docs/components/base';
 
 export default function (props: MountProps): JSX.Element {
 	let elem: HTMLDivElement;
@@ -16,7 +16,6 @@ export default function (props: MountProps): JSX.Element {
 	const [Disabled, disabled] = boolSelector('_d.demo.disabled');
 	const [Rounded, rounded] = boolSelector('_d.demo.rounded');
 	const [Palette, palette] = paletteSelector();
-	const [Display, display] = arraySelector('display', PrintButton.displays);
 
 	return (
 		<div ref={el => (elem = el)}>
@@ -25,7 +24,6 @@ export default function (props: MountProps): JSX.Element {
 				<Disabled />
 				<Rounded />
 				<Palette />
-				<Display />
 			</Portal>
 
 			<PrintButton.Root
@@ -34,7 +32,6 @@ export default function (props: MountProps): JSX.Element {
 				rounded={rounded()}
 				kind={kind()}
 				palette={palette()}
-				display={display()}
 			/>
 		</div>
 	);

apps/docs/src/components/demo/icon/api.zh-Hans.json

@@ -19,7 +19,7 @@
 				"name": "easing",
 				"summary": "缓动函数\n\n",
 				"remarks": "如果需要自定义缓动函数，可以通过使用\n`registerEasing`\n方法进行注册。\n\n",
-				"type": "\"circ-in\" | \"circ-out\" | \"circ-in-out\" | \"cubic-in\" | \"cubic-out\" | \"cubic-in-out\" | \"elastic-in\" | \"elastic-out\" | \"elastic-in-out\" | \"expo-in\" | \"expo-out\" | \"expo-in-out\" | \"linear\" | \"quad-in\" | \"quad-out\" | \"quad-in-out\" | \"quart-in\" | \"quart-out\" | \"quart-in-out\" | \"quint-in\" | \"quint-out\" | \"quint-in-out\" | \"sine-in\" | \"sine-out\" | \"sine-in-out\" | undefined"
+				"type": "string | undefined"
 			},
 			{
 				"name": "rotation",

apps/docs/src/components/demo/icon/iconset.tsx

@@ -26,9 +26,7 @@ export default function (props: MountProps): JSX.Element {
 			<Button.Root palette={palette()}>
 				<IconSet.Root
 					class="aspect-square w-8!"
-					ref={el => {
-						aref = el;
-					}}
+					ref={el => (aref = el)}
 					icons={{
 						face: <IconFace />,
 						close: <IconClose />,

apps/docs/src/components/demo/icon/text.tsx

@@ -2,32 +2,45 @@
 //
 // SPDX-License-Identifier: MIT
 
+import { joinClass, type MountProps } from '@cmfx/components';
+import type { JSX } from 'solid-js';
+import { Portal } from 'solid-js/web';
 import IconClose from '~icons/material-symbols/close';
 import IconFace from '~icons/material-symbols/face';
 import IconPerson from '~icons/material-symbols/person';
 
-export default function () {
+import { paletteSelector } from '@docs/components/base';
+
+export default function (props: MountProps): JSX.Element {
+	const [Palette, palette] = paletteSelector();
+
 	return (
 		<>
-			<IconFace class="rounded-full bg-palette-bg-low hover:text-palette-fg-high" />
-			<IconPerson class="border border-palette-fg-high" />
+			<Portal mount={props.mount}>
+				<Palette />
+			</Portal>
+
+			<div class={joinClass(palette())}>
+				<IconFace class="rounded-full bg-palette-bg-low hover:text-palette-fg-high" />
+				<IconPerson class="border border-palette-fg-high" />
 
-			<span class="flex w-full items-center border border-red-500 bg-palette-fg-high">
-				<IconFace />
-				与文字文字平行
-				<IconClose />
-			</span>
-			<span class="flex w-full items-center border border-red-500 text-8xl">
-				<IconFace />
-				与文字平行 6rem
-				<IconClose />
-			</span>
+				<span class="flex w-full items-center border border-red-500 bg-palette-fg-high">
+					<IconFace />
+					与文字文字平行
+					<IconClose />
+				</span>
+				<span class="flex w-full items-center border border-red-500 text-8xl">
+					<IconFace />
+					与文字平行 6rem
+					<IconClose />
+				</span>
 
-			<span class="flex h-12 w-full items-center border border-red-500">
-				<IconFace />
-				与文字文字平行
-				<IconFace />
-			</span>
+				<span class="flex h-12 w-full items-center border border-red-500 bg-palette-bg text-palette-fg">
+					<IconFace />
+					与文字文字平行
+					<IconFace />
+				</span>
+			</div>
 		</>
 	);
 }