feat: quark-filename-to-quarkd

2023-04-17 16:12:22 +08:00
parent 01aa467f70
commit 1b2ce701dd
511 changed files with 1082 additions and 1036 deletions
@@ -23,7 +23,7 @@
  },
  "overrides": [
    {
-      "files": ["packages/quark/**/*.tsx"],
+      "files": ["packages/quarkd/**/*.tsx"],
      "rules": {
        "@typescript-eslint/explicit-module-boundary-types": 0,
        "@typescript-eslint/no-explicit-any": 0,
@@ -6,7 +6,7 @@ on:
      - main # default branch
    paths:
      - '.github/workflows/**'
-      - 'packages/quark/src/**'
+      - 'packages/quarkd/src/**'

 jobs:
  copy:
@@ -15,6 +15,6 @@
  <body>
    <div id="app"></div>
    <script type="module" src="./example/src/sites/mobile-vue/main.ts"></script>
-    <script type="module" src="./packages/quark/src/index.ts"></script>
+    <script type="module" src="./packages/quarkd/src/index.ts"></script>
  </body>
 </html>
@@ -6,7 +6,7 @@ const pagesRouter: Array<RouteRecordRaw> = [];
 /** vite */
 // ps: 用 fast-glob 也可以
 const modulesPage = import.meta.glob(
-	`../../../../packages/quark/src/**/doc.zh-CN.md`
+	`../../../../packages/quarkd/src/**/doc.zh-CN.md`
 );
 for (const path in modulesPage) {
 	const name = (/src\/(.*)\/doc.zh-CN.md/.exec(path) as any[])[1];
@@ -19,7 +19,7 @@ for (const path in modulesPage) {

 const pagesEnRouter: Array<RouteRecordRaw> = [];
 const modulesEnPage = import.meta.glob(
-	"../../../../packages/quark/src/**/doc.en-US.md"
+	"../../../../packages/quarkd/src/**/doc.en-US.md"
 );
 for (const path in modulesEnPage) {
 	const name = (/src\/(.*)\/doc.en-US.md/.exec(path) as any[])[1];
@@ -32,7 +32,7 @@ for (const path in modulesEnPage) {

 /** react 中英文文档 */
 const modulesPageReact = (import.meta as any).glob(
-	"../../../../packages/quark/src/**/doc-react.zh-CN.md"
+	"../../../../packages/quarkd/src/**/doc-react.zh-CN.md"
 );
 for (const path in modulesPageReact) {
 	const name = (/src\/(.*)\/doc-react.zh-CN.md/.exec(path) as any[])[1];
@@ -43,7 +43,7 @@ for (const path in modulesPageReact) {
 }

 const modulesEnPageReact = (import.meta as any).glob(
-	"../../../../packages/quark/src/**/doc-react.en-US.md"
+	"../../../../packages/quarkd/src/**/doc-react.en-US.md"
 );
 for (const path in modulesEnPageReact) {
 	const name = (/src\/(.*)\/doc-react.en-US.md/.exec(path) as any[])[1];
@@ -26,7 +26,7 @@ const findComponentName = (name: string) => {

 /** vite */
 const modulesPage = import.meta.glob(
-	"../../../../packages/quark/src/**/demo.vue"
+	"../../../../packages/quarkd/src/**/demo.vue"
 );
 for (const path in modulesPage) {
 	const name = (/src\/(.*)\/demo.vue/.exec(path) as any[])[1];
@@ -15,7 +15,7 @@ const { resolve } = path;

 const plugins = [
 	// 监听 css 变化热更新
-	reloadOnChange(["../packages/quark/src/**/*.css"]),
+	reloadOnChange(["../packages/quarkd/src/**/*.css"]),
 	cssVariable({
 		variableMap,
 		prefix: "quark-",
@@ -77,7 +77,7 @@ export default defineConfig({
 			{ find: "@", replacement: resolve(__dirname, "./src") },
 			{
 				find: "@quarkd/quark",
-				replacement: resolve(__dirname, "../packages/quark"),
+				replacement: resolve(__dirname, "../packages/quarkd"),
 			},
 		],
 	},
@@ -29,7 +29,7 @@
    "release:patch": "node ./scripts/publish patch",
    "release:minor": "node ./scripts/publish minor",
    "release:major": "node ./scripts/publish major",
-    "test": "cd packages/quark && yarn run test"
+    "test": "cd packages/quarkd && yarn run test"
  },
  "devDependencies": {
    "@commitlint/cli": "^10.0.0",
@@ -1 +0,0 @@
-// 待补充
@@ -1 +0,0 @@
-//
@@ -1,126 +0,0 @@
-# Toast
-
-### Intro
-
-Black semi-transparent pop-up hint in the middle of the page, used for message notification, loading hint, operation result hint and other scenarios.
-
-### Install
-
-```tsx
-import { Toast } from "@quarkd/quark-react";
-```
-
-### Text
-
-```javascript
-Toast.text("Network failed, please try again later~");
-```
-### Text position
-use position property，can use `top`、`bottom`, `middle` is default
-
-```javascript
-Toast.text("网络失败，请稍后再试~", {
-  position: 'top'
-});
-```
-### Success
-
-```javascript
-Toast.success("Success");
-```
-
-### Fail
-
-```javascript
-Toast.error("Fail");
-```
-
-### Warning
-
-```javascript
-Toast.warning("Warning");
-```
-
-### Loading
-
-```javascript
-Toast.loading("Loading");
-```
-
-### Toast not disappear
-
-```javascript
-Toast.text(msg, {
-  duration: 0,
-});
-```
-
-### Close Manually
-
-Call the `hide` method.
-
-```js
-Toast.hide();
-// or use ths instance.
-const toast = Toast.loading("use in js module");
-toast.hide();
-```
-
-### Close Callback Function
-
-```tsx
-Toast.text("Network failed, please try again later~", {
-  close: () => alert("hello"),
-});
-```
-
-### Singleton
-
-Toast use singleton mode by default, if you need to pop multiple Toast at the same time, you can refer to the following example:
-
-```tsx
-Toast.allowMultiple();
-const toast1 = Toast.text("first Toast");
-const toast2 = Toast.success("second Toast");
-toast1.hide();
-toast2.hide();
-```
-
-## API
-
-### Props
-
-| Methods             | Description         | Attribute                 | Return value                                   |
-| ------------------- | ------------------- | ------------------------- | ---------------------------------------------- |
-| Toast.text          | Show text toast     | message ｜ `ToastOptions` | toast instance(message supports incoming HTML) |
-| Toast.success       | Show success toast  | message ｜ `ToastOptions` | toast instance                                 |
-| Toast.error         | Show fail toast     | message ｜ `ToastOptions` | toast instance                                 |
-| Toast.warning       | Show warning toast  | message ｜ `ToastOptions` | toast instance                                 |
-| Toast.hide          | Close toast         | -                         | void                                           |
-| Toast.loading       | Show loading toast  | message ｜ `ToastOptions` | toast instance                                 |
-| Toast.allowMultiple | open multiple toast | -                         | toast instance                                 |
-
-### ToastOptions 数据结构
-
-| Attribute | Description                                       | Type       | Default  |
-| --------- | ------------------------------------------------- | ---------- | -------- |
-| duration  | Toast duration(ms), won't disappear if value is 0 | `number`   | `2000ms` |
-| size      | Custom icon size                                  | `number`   | `40px`   |
-| zIndex    | Custom zIndex                                     | `number`   | `9999`   |
-| close     | Callback function after close                     | `() => void` | -        |
-| loadingIconDirection    | loading icon display direction, only valid when `type=loading` | `horizontal` or `vertical` | `vertical` |
-| position    | Position | `top` or `bottom` | `middle` |
-
-
-## CSS Variables
-
-| Name                   | Description   | Default Value |
-| ---------------------- | ------------- | ------------- |
-| `--toast-min-width`    | Minimum width | `120px`       |
-| `--toast-max-width`    | Maximum width | `240px`       |
-| `--toast-text-padding` | Padding       | `24px 16px`   |
-| `--toast-font-size`    | Font size     | `14px`        |
-| `--toast-color`        | Font color    | `#fff`        |
-| `--toast-loading-bottom` | bottom margin of loading icon | Vertical loading is `14px`; horizontal loading is `0` |
-| `--toast-loading-right` | right margin of loading icon | Vertical loading is `0`; horizontal loading is `8px` |
-| `--toast-position-top-distance` | the text of top distance | When position is `top`,the value is`20%`.when position is `botton`,the value is`80%` |
@@ -1,23 +1,21 @@
 # 更新日志
-### [1.0.53](https://github.com/hellof2e/quark-design/compare/v1.0.52...v1.0.53) (2023-04-13)

+### [1.0.53](https://github.com/hellof2e/quark-design/compare/v1.0.52...v1.0.53) (2023-04-13)

 ### 🎉 Features

-* **loading:** loading animate use js ([022b194](https://github.com/hellof2e/quark-design/commit/022b194969f63087b990c0dbab125f44557f311f))
-* update ([04c2b9a](https://github.com/hellof2e/quark-design/commit/04c2b9a6f4c1e5223a52e22397f977e91cb9471a))
-
+- **loading:** loading animate use js ([022b194](https://github.com/hellof2e/quark-design/commit/022b194969f63087b990c0dbab125f44557f311f))
+- update ([04c2b9a](https://github.com/hellof2e/quark-design/commit/04c2b9a6f4c1e5223a52e22397f977e91cb9471a))

 ### Documentation

-* **button:** revert incorrect change ([cb59de6](https://github.com/hellof2e/quark-design/commit/cb59de6a4a5938f7e568d3285041433d69e9004b))
-
+- **button:** revert incorrect change ([cb59de6](https://github.com/hellof2e/quark-design/commit/cb59de6a4a5938f7e568d3285041433d69e9004b))

 ### 🐞 Bug Fixes

-* 修复 toast hide loading 没有移除样式 ([8a63b2c](https://github.com/hellof2e/quark-design/commit/8a63b2c78c9f0cdf123078a183e79b8826e4ccbe))
-* readme ([61e382a](https://github.com/hellof2e/quark-design/commit/61e382a89e670beb6836393ade92a11ec3d71507))
-* uploader oversize not work ([91a3d86](https://github.com/hellof2e/quark-design/commit/91a3d86c697dc5a28e026020d4d4cf03c7ee132d))
+- 修复 toast hide loading 没有移除样式 ([8a63b2c](https://github.com/hellof2e/quark-design/commit/8a63b2c78c9f0cdf123078a183e79b8826e4ccbe))
+- readme ([61e382a](https://github.com/hellof2e/quark-design/commit/61e382a89e670beb6836393ade92a11ec3d71507))
+- uploader oversize not work ([91a3d86](https://github.com/hellof2e/quark-design/commit/91a3d86c697dc5a28e026020d4d4cf03c7ee132d))

 ### [1.0.52](https://github.com/hellof2e/quark-design/compare/v1.0.51...v1.0.52) (2023-04-06)

@@ -30,7 +30,8 @@
  </a>
 </p>

------
+---
+
 ## Documentation

 For full documentation, visit [quark-design.hellobike.com](https://quark-design.hellobike.com)
@@ -4,7 +4,6 @@

 When new content or pending information is available, a red dot, number or desc show on the top-right.

-
 ps: Since the minimum font size of the browser is 12px, there is a slight error in the height displayed in the demo.

 ### Install
@@ -111,15 +110,15 @@ The maximun can be added to a badge by setting `max` prop on the Badge, the defa

 The component provides the following [CSS variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties), which can be used to customize styles. Please refer to [ConfigProvider component](#/zh-CN/guide/theme).

-| Name                     | Description                     | Default                |
-| ------------------------ | ------------------------------- | ---------------------- |
-| `--badge-text-color`     | Badge text color                | `#FFFFFF`              |
-| `--badge-background`     | Badge background color          | `#F72626`              |
-| `--badge-padding-column` | Top and bottom padding of badge | `0`                  |
-| `--badge-padding-row`    | Left and right padding of badge | `normal: 4px` `big: 6px` |
+| Name                     | Description                     | Default                                  |
+| ------------------------ | ------------------------------- | ---------------------------------------- |
+| `--badge-text-color`     | Badge text color                | `#FFFFFF`                                |
+| `--badge-background`     | Badge background color          | `#F72626`                                |
+| `--badge-padding-column` | Top and bottom padding of badge | `0`                                      |
+| `--badge-padding-row`    | Left and right padding of badge | `normal: 4px` `big: 6px`                 |
 | `--badge-font-size`      | Badge font size                 | `normal: 10px` `label: 11px` `big: 12px` |
-| `--badge-font-weight`    | Badge font weight               | `500`                  |
+| `--badge-font-weight`    | Badge font weight               | `500`                                    |
 | `--badge-line-height`    | Badge font line height          | `normal: 14px` `label: 16px` `big: 20px` |
-| `--badge-dot-size`       | Badge dot size                  | `8px`                  |
-| `--badge-font-family`    | Badge font-family               | `system default style` |
-| `--badge-border-color`   | Badge border color              | `#FFFFFF`              |
+| `--badge-dot-size`       | Badge dot size                  | `8px`                                    |
+| `--badge-font-family`    | Badge font-family               | `system default style`                   |
+| `--badge-border-color`   | Badge border color              | `#FFFFFF`                                |
@@ -4,7 +4,7 @@

 出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息。

-ps：由于浏览器最小字体大小为12px，因此demo中展示高度略有误差。
+ps：由于浏览器最小字体大小为 12px，因此 demo 中展示高度略有误差。

 ### 安装使用

@@ -110,15 +110,15 @@ import { Badge } from "@quarkd/quark-react";

 组件提供了以下[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/guide/theme)。

-| 名称                     | 说明                 | 默认值     |
-| ------------------------ | -------------------- | ---------- |
-| `--badge-text-color`     | badge 文字颜色       | `#FFFFFF`  |
-| `--badge-background`     | badge 背景           | `#F72626`  |
-| `--badge-padding-column` | badge 竖直方向内边距 | `0`      |
-| `--badge-padding-row`    | badge 水平方向内边距 | `normal: 4px` `big: 6px` |
-| `--badge-font-size`      | badge 文字大小 | `normal: 10px` `label: 11px` `big: 12px` |
-| `--badge-font-weight`    | badge 文字粗细       | `500`      |
+| 名称                     | 说明                 | 默认值                                   |
+| ------------------------ | -------------------- | ---------------------------------------- |
+| `--badge-text-color`     | badge 文字颜色       | `#FFFFFF`                                |
+| `--badge-background`     | badge 背景           | `#F72626`                                |
+| `--badge-padding-column` | badge 竖直方向内边距 | `0`                                      |
+| `--badge-padding-row`    | badge 水平方向内边距 | `normal: 4px` `big: 6px`                 |
+| `--badge-font-size`      | badge 文字大小       | `normal: 10px` `label: 11px` `big: 12px` |
+| `--badge-font-weight`    | badge 文字粗细       | `500`                                    |
 | `--badge-line-height`    | badge 文字行高       | `normal: 14px` `label: 16px` `big: 20px` |
-| `--badge-dot-size`       | badge dot 模式大小   | `8px`      |
-| `--badge-font-family`    | badge font-family    | `跟随系统` |
-| `--badge-border-color`   | badge 边框颜色       | `#FFFFFF`  |
+| `--badge-dot-size`       | badge dot 模式大小   | `8px`                                    |
+| `--badge-font-family`    | badge font-family    | `跟随系统`                               |
+| `--badge-border-color`   | badge 边框颜色       | `#FFFFFF`                                |
@@ -1,6 +1,6 @@
 import { expect, fixture } from "@open-wc/testing";
 import "quarkd/lib/button";
-import sinon from 'sinon';
+import sinon from "sinon";

 const data = {
  slotText: "主要按钮",
@@ -70,17 +70,13 @@ describe("<quark-button>", async () => {
  });

  it("plain attribute", async () => {
-    el = await fixture(
-      `<quark-button>${data.slotText}</quark-button>`
-    );
+    el = await fixture(`<quark-button>${data.slotText}</quark-button>`);
    expect(el.plain).to.equal(false);
  });

  it("loading attribute default type", async () => {
-    el = await fixture(
-      `<quark-button loading>${data.slotText}</quark-button>`
-    );
-    const loading = el.shadowRoot.querySelector(".quark-button-load")
+    el = await fixture(`<quark-button loading>${data.slotText}</quark-button>`);
+    const loading = el.shadowRoot.querySelector(".quark-button-load");
    expect(loading.color).to.equal("#fff");
    expect(loading.type).to.equal("spinner");
    expect(loading.size).to.equal("20");
@@ -90,29 +86,29 @@ describe("<quark-button>", async () => {
    el = await fixture(
      `<quark-button loading loadtype="circular" loadingcolor="red" loadingsize="30">${data.slotText}</quark-button>`
    );
-    const loading = el.shadowRoot.querySelector(".quark-button-load")
+    const loading = el.shadowRoot.querySelector(".quark-button-load");
    expect(loading.color).to.equal("red");
    expect(loading.type).to.equal("circular");
    expect(loading.size).to.equal("30");
  });

-  it('should change loading state instantly by default', async() => {
-     el = await fixture(
+  it("should change loading state instantly by default", async () => {
+    el = await fixture(
      `<quark-button loading="false" id="btn">${data.slotText}</quark-button>`
    );
-    el.addEventListener('click', function handleClick() {
-      el.loading = true
-    })
+    el.addEventListener("click", function handleClick() {
+      el.loading = true;
+    });
    el.dispatchEvent(new Event("click"));
    expect(el.loading).to.equal(true);
  });

-  it('should not clickable when button is loading', async() => {
+  it("should not clickable when button is loading", async () => {
    const eventspy = sinon.spy();
    el = await fixture(
-    `<quark-button loading="true">${data.slotText}</quark-button>`
+      `<quark-button loading="true">${data.slotText}</quark-button>`
    );
    el.dispatchEvent(new Event("click"));
    expect(eventspy.called).to.equal(false);
  });
-});
+});
@@ -5,17 +5,21 @@
      tips="$ 100"
      content="This is content of Card"
    >
-      <div slot="desc" style="font-size: 14px; color: #999; padding-top: 14px">
+      <div
+        class="demo"
+        my-slot="desc"
+        style="font-size: 14px; color: #999; padding-top: 14px"
+      >
        footer content
      </div>
    </quark-card>

-    <quark-card
+    <!-- <quark-card
      title="This is title"
      tips="$ 100"
      content="This is loooooooong text content of Card"
      desc="footer content"
-    ></quark-card>
+    ></quark-card> -->
  </div>
 </template>

@@ -7,16 +7,30 @@ import style from "./style.css";
 })
 class QuarkCard extends QuarkElement {
  @property()
-  title = "";
+  title;

  @property()
-  content = "";
+  content;

  @property()
-  tips = "";
+  tips;

  @property()
-  desc = "";
+  desc;
+
+  componentDidMount(): void {
+    console.log(this.shadowRoot, 99);
+    // console.log(this.shadowRoot.querySelector("div[my-slot]"), 99);
+    // this
+  }
+
+  attributeChangedCallback(
+    name: string,
+    oldValue: string,
+    value: string
+  ): void {
+    console.log(name, oldValue, value, 111);
+  }

  render() {
    return (
@@ -42,11 +42,11 @@ const DATA = [
    ],
  },
  {
-    text: 'Beijing',
+    text: "Beijing",
    children: [
      {
-        text: '',
-        children: [{ text: '' }],
+        text: "",
+        children: [{ text: "" }],
      },
    ],
  },
@@ -40,7 +40,6 @@ const DATA = [
      },
    ],
  },
-  
 ];
 export default () => {
  const [open, setOpen] = useState(false);
@@ -114,11 +113,11 @@ const DATA = [
    ],
  },
  {
-    text: '北京',
+    text: "北京",
    children: [
      {
-        text: '',
-        children: [{ text: '' }],
+        text: "",
+        children: [{ text: "" }],
      },
    ],
  },
@@ -119,11 +119,11 @@ export default () => {

 ### Slots

-| Name             | Description                                  |
-| ---------------- | -------------------------------------- |
-| slot             | Custom right info                        |
-| slot name=title  | Custom title                             |
-| slot name=icon   | Custom left icon |
+| Name            | Description       |
+| --------------- | ----------------- |
+| slot            | Custom right info |
+| slot name=title | Custom title      |
+| slot name=icon  | Custom left icon  |

 ## CSS Variables

@@ -119,11 +119,11 @@ export default () => {

 ### Slots

-| 名称             | 说明                                   |
-| ---------------- | -------------------------------------- |
-| slot             | 自定义右侧信息                        |
-| slot name=title  | 自定义标题                             |
-| slot name=icon   | 自定义左侧icon |
+| 名称            | 说明            |
+| --------------- | --------------- |
+| slot            | 自定义右侧信息  |
+| slot name=title | 自定义标题      |
+| slot name=icon  | 自定义左侧 icon |

 ## 样式变量

@@ -85,11 +85,11 @@ The description on the right can be customized through Slot (the content of the

 ### Slots

-| Name             | Description                                  |
-| ---------------- | -------------------------------------- |
-| slot             | Custom right info                        |
-| slot name=title  | Custom title                             |
-| slot name=icon   | Custom left icon |
+| Name            | Description       |
+| --------------- | ----------------- |
+| slot            | Custom right info |
+| slot name=title | Custom title      |
+| slot name=icon  | Custom left icon  |

 ## CSS Variables

@@ -86,14 +86,13 @@ import "quarkd/lib/cell";
 | islink | 是否显示右侧箭头          | `boolean ` | `false` |
 | icon   | 左侧图标(支持传 url 链接) | `string `  | -       |

-
 ### Slots

-| 名称             | 说明                                   |
-| ---------------- | -------------------------------------- |
-| slot             | 自定义右侧信息                        |
-| slot name=title  | 自定义标题                             |
-| slot name=icon   | 自定义左侧icon |
+| 名称            | 说明            |
+| --------------- | --------------- |
+| slot            | 自定义右侧信息  |
+| slot name=title | 自定义标题      |
+| slot name=icon  | 自定义左侧 icon |

 ## 样式变量

@@ -1,5 +1,5 @@
-import { expect, fixture } from '@open-wc/testing';
-import 'quarkd/lib/cell';
+import { expect, fixture } from "@open-wc/testing";
+import "quarkd/lib/cell";

 const data = {
  title: "标题",
@@ -41,8 +41,8 @@ export default () => {
 Checkbox shape supports `round` and `square`, the default is `round`.

 ```html
-<Checkbox checked={true}>round(default)</Checkbox>
-<Checkbox checked={true} shape="square">square</Checkbox>
+<Checkbox checked="{true}">round(default)</Checkbox>
+<Checkbox checked="{true}" shape="square">square</Checkbox>
 ```

 ### Size
@@ -50,10 +50,10 @@ Checkbox shape supports `round` and `square`, the default is `round`.
 Checkbox size supports `normal` and `big`, the default is `normal`.

 ```html
-<Checkbox checked={true} shape="round" size="big"
+<Checkbox checked="{true}" shape="round" size="big"
  >default shape - big</Checkbox
 >
-<Checkbox checked={true} shape="square" size="big">square - big</Checkbox>
+<Checkbox checked="{true}" shape="square" size="big">square - big</Checkbox>
 ```

 ### Disabled
@@ -61,8 +61,8 @@ Checkbox size supports `normal` and `big`, the default is `normal`.
 To disable Checkbox, add `disabled` prop on the Checkbox.

 ```html
-<Checkbox checked={true} disabled>checked - disabled</Checkbox>
-<Checkbox checked={true} disabled>unchecked - disabled</Checkbox>
+<Checkbox checked="{true}" disabled>checked - disabled</Checkbox>
+<Checkbox checked="{true}" disabled>unchecked - disabled</Checkbox>
 ```

 ### Checkbox Group
@@ -97,7 +97,7 @@ export default () => {
 Custom checked color

 ```html
-<Checkbox checked={true}>Checkbox-Custom checked color</Checkbox>
+<Checkbox checked="{true}">Checkbox-Custom checked color</Checkbox>

 <!-- CSS -->
 Checkbox { --radio-background: linear-gradient(225deg, #ff918d 0%, #f54640
@@ -40,8 +40,8 @@ export default () => {
 复选框支持`round`、`square`两种形状，默认为 `round`。

 ```html
-<Checkbox checked={true}>圆形(默认)</Checkbox>
-<Checkbox checked={true} shape="square">方形</Checkbox>
+<Checkbox checked="{true}">圆形(默认)</Checkbox>
+<Checkbox checked="{true}" shape="square">方形</Checkbox>
 ```

 ### 复选框大小
@@ -49,8 +49,8 @@ export default () => {
 复选框大小支持 `normal`、`big` 两种，默认为 `normal`。

 ```html
-<Checkbox checked={true} shape="round" size="big">默认形状-大</Checkbox>
-<Checkbox checked={true} shape="square" size="big">方形-大</Checkbox>
+<Checkbox checked="{true}" shape="round" size="big">默认形状-大</Checkbox>
+<Checkbox checked="{true}" shape="square" size="big">方形-大</Checkbox>
 ```

 ### 复选框禁用状态
@@ -58,8 +58,8 @@ export default () => {
 复选框支持禁用

 ```html
-<Checkbox checked={true} disabled>已选-禁用</Checkbox>
-<Checkbox checked={true} disabled>未选-禁用</Checkbox>
+<Checkbox checked="{true}" disabled>已选-禁用</Checkbox>
+<Checkbox checked="{true}" disabled>未选-禁用</Checkbox>
 ```

 ### 复选框群组
@@ -94,7 +94,7 @@ export default () => {
 复选框选中颜色自定义

 ```html
-<Checkbox checked={true}>复选框-选中颜色自定义</Checkbox>
+<Checkbox checked="{true}">复选框-选中颜色自定义</Checkbox>

 <!-- CSS -->
 Checkbox { --radio-background: linear-gradient(225deg, #ff918d 0%, #f54640
@@ -105,19 +105,19 @@ Checkbox { --radio-background: linear-gradient(225deg, #ff918d 0%, #f54640

 ### Checkbox Props

-| 参数     | 说明                                | 类型                                  | 默认值   |
-| -------- | ----------------------------------- | ------------------------------------- | -------- |
-| shape    | 形状，可选值为 `round` `square`     | `string`                              | `round`  |
-| size     | 复选框大小，可选值为 `normal` `big` | `string`                              | `normal` |
-| disabled | 复选框禁用状态                      | `boolean`                             | `false`  |
-| checked  | 复选框勾选状态                      | `boolean`                             | `false`  |
+| 参数     | 说明                                | 类型                                         | 默认值   |
+| -------- | ----------------------------------- | -------------------------------------------- | -------- |
+| shape    | 形状，可选值为 `round` `square`     | `string`                                     | `round`  |
+| size     | 复选框大小，可选值为 `normal` `big` | `string`                                     | `normal` |
+| disabled | 复选框禁用状态                      | `boolean`                                    | `false`  |
+| checked  | 复选框勾选状态                      | `boolean`                                    | `false`  |
 | onChange | 复选框勾选状态变化时回调函数        | `(e: { detail: { value: string } }) => void` |

 ### Checkbox-group Props

-| 参数     | 说明                           | 类型                                      | 默认值 |
-| -------- | ------------------------------ | ----------------------------------------- | ------ |
-| value    | 指定选中的选项                 | `string`                                  | -      |
+| 参数     | 说明                           | 类型                                           | 默认值 |
+| -------- | ------------------------------ | ---------------------------------------------- | ------ |
+| value    | 指定选中的选项                 | `string`                                       | -      |
 | onChange | 复选框组勾选状态变化时回调函数 | `(e: { detail: { value: string[] } }) => void` |

 ## 样式变量
@@ -120,8 +120,8 @@ export default {

 ### quark-checkbox Event

-| 参数   | 说明                         | 类型                                  |
-| ------ | ---------------------------- | ------------------------------------- |
+| 参数   | 说明                         | 类型                                         |
+| ------ | ---------------------------- | -------------------------------------------- |
 | change | 复选框勾选状态变化时回调函数 | `(e: { detail: { value: string } }) => void` |

 ### quark-checkbox-group Props
@@ -132,8 +132,8 @@ export default {

 ### quark-checkbox-Group Event

-| 参数   | 说明                           | 类型                                      |
-| ------ | ------------------------------ | ----------------------------------------- |
+| 参数   | 说明                           | 类型                                           |
+| ------ | ------------------------------ | ---------------------------------------------- |
 | change | 复选框组勾选状态变化时回调函数 | `(e: { detail: { value: string[] } }) => void` |

 ## 样式变量
@@ -1,6 +1,6 @@
-import { expect, fixture, html } from '@open-wc/testing';
-import sinon from 'sinon';
-import 'quarkd/lib/checkbox';
+import { expect, fixture, html } from "@open-wc/testing";
+import sinon from "sinon";
+import "quarkd/lib/checkbox";
 const data = {
  disabled: "true",
  shape: "square",
@@ -14,7 +14,8 @@ import { Collapse } from "@quarkd/quark-react";

 ```html
 <Collapse title="title">
-  Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this.
+  Life is far more than spinning around and being busy to the limit. Human
+  experience is far broader and richer than this.
 </Collapse>
 ```

@@ -24,7 +25,8 @@ Control the open state of the accordion by setting the `open=true` property.

 ```html
 <Collapse title="title" open>
-  Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this.
+  Life is far more than spinning around and being busy to the limit. Human
+  experience is far broader and richer than this.
 </Collapse>
 ```

@@ -34,7 +36,8 @@ Set custom icons through `iconhide` property.

 ```html
 <Collapse title="title" iconhide>
-  Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this.
+  Life is far more than spinning around and being busy to the limit. Human
+  experience is far broader and richer than this.
 </Collapse>
 ```

@@ -47,11 +50,11 @@ Set custom title through `slot="title"`.
  <div slot="title">
    <span style="color: blueviolet">custom title</span>
  </div>
-  Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this.
+  Life is far more than spinning around and being busy to the limit. Human
+  experience is far broader and richer than this.
 </Collapse>
 ```

-
 ### Custom icon

 Set custom icon through `slot="icon"`.
@@ -59,28 +62,27 @@ Set custom icon through `slot="icon"`.
 ```html
 <Collapse title="title">
  <span slot="icon">🎉🎉🎉</span>
-  Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this.
+  Life is far more than spinning around and being busy to the limit. Human
+  experience is far broader and richer than this.
 </Collapse>
 ```

-
-
 ## API

 ### Props

-| Attribute    | Description                                                          | Type      | Default   |
-| ------------------ | ---------------- | ----------------------------------------- | --------- |
-| title              | title         | `string`                                  |           |
-| open               | open            | `Boolean`                                |   `false` |
+| Attribute | Description | Type      | Default |
+| --------- | ----------- | --------- | ------- |
+| title     | title       | `string`  |         |
+| open      | open        | `Boolean` | `false` |

 ## CSS Variables

 The component provides the following [CSS variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties), which can be used to customize styles. Please refer to [ConfigProvider component](#/zh-CN/guide/theme).

-| Name                     | Description                      | Default Value |
-| -------------------------- | ---------------- | --------------------------------- |
-| `--callapse-title-fontsize`   | Title font size     | `14px`                            |
-| `--callapse-title-color`      | Title color     | `#666`                            |
-| `--callapse-content-fontsize`   | Content font size     | `14px`                            |
-| `--callapse-content-color`      | Content color     | `#666`                            |
+| Name                          | Description       | Default Value |
+| ----------------------------- | ----------------- | ------------- |
+| `--callapse-title-fontsize`   | Title font size   | `14px`        |
+| `--callapse-title-color`      | Title color       | `#666`        |
+| `--callapse-content-fontsize` | Content font size | `14px`        |
+| `--callapse-content-color`    | Content color     | `#666`        |
@@ -28,7 +28,7 @@ import { Collapse } from "@quarkd/quark-react";
 </Collapse>
 ```

-### 无icon样式
+### 无 icon 样式

 通过 `iconhide` 属性来自定义标题。

@@ -51,9 +51,9 @@ import { Collapse } from "@quarkd/quark-react";
 </Collapse>
 ```

-### 自定义icon
+### 自定义 icon

-通过 `slot="icon"` 来自定义icon。
+通过 `slot="icon"` 来自定义 icon。

 ```html
 <Collapse title="标题">
@@ -62,23 +62,22 @@ import { Collapse } from "@quarkd/quark-react";
 </Collapse>
 ```

-
 ## API

 ### Props

-| 参数               | 说明             | 类型                                      | 默认值    |
-| ------------------ | ---------------- | ----------------------------------------- | --------- |
-| title              | 标题文字         | `string`                                  |           |
-| open               | 打开            | `Boolean`                                |   `false` |
+| 参数  | 说明     | 类型      | 默认值  |
+| ----- | -------- | --------- | ------- |
+| title | 标题文字 | `string`  |         |
+| open  | 打开     | `Boolean` | `false` |

 ## 样式变量

 组件提供了以下[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/guide/theme)。

-| 名称                       | 说明             | 默认值                            |
-| -------------------------- | ---------------- | --------------------------------- |
-| `--callapse-title-fontsize`   | 标题字体大小     | `14px`                            |
-| `--callapse-title-color`      | 标题字体颜色     | `#666`                            |
-| `--callapse-content-fontsize`   | 展开内容字体大小     | `14px`                            |
-| `--callapse-content-color`      | 展开内容字体颜色     | `#666`                            |
+| 名称                          | 说明             | 默认值 |
+| ----------------------------- | ---------------- | ------ |
+| `--callapse-title-fontsize`   | 标题字体大小     | `14px` |
+| `--callapse-title-color`      | 标题字体颜色     | `#666` |
+| `--callapse-content-fontsize` | 展开内容字体大小 | `14px` |
+| `--callapse-content-color`    | 展开内容字体颜色 | `#666` |
@@ -14,7 +14,8 @@ import "quarkd/lib/collapse";

 ```html
 <quark-collapse :title="title">
-  Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this.
+  Life is far more than spinning around and being busy to the limit. Human
+  experience is far broader and richer than this.
 </quark-collapse>
 ```

@@ -24,7 +25,8 @@ Control the open state of the accordion by setting the `open=true` property.

 ```html
 <quark-collapse :title="title" open>
-  Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this.
+  Life is far more than spinning around and being busy to the limit. Human
+  experience is far broader and richer than this.
 </quark-collapse>
 ```

@@ -34,19 +36,22 @@ Set custom icons through `iconhide` property.

 ```html
 <quark-collapse :title="title" iconhide>
-  Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this.
+  Life is far more than spinning around and being busy to the limit. Human
+  experience is far broader and richer than this.
 </quark-collapse>
 ```

 ### Custom title

 Set custom title through `slot="title"`.
+
 ```html
 <quark-collapse :title="title">
  <div slot="title">
    <span style="color: blueviolet">custom title</span>
  </div>
-  Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this.
+  Life is far more than spinning around and being busy to the limit. Human
+  experience is far broader and richer than this.
 </quark-collapse>
 ```

@@ -57,27 +62,27 @@ Set custom icon through `slot="icon"`.
 ```html
 <quark-collapse :title="title">
  <span slot="icon">🎉🎉🎉</span>
-  Life is far more than spinning around and being busy to the limit. Human experience is far broader and richer than this.
+  Life is far more than spinning around and being busy to the limit. Human
+  experience is far broader and richer than this.
 </quark-collapse>
 ```

-
 ## API

 ### Props

-| Attribute    | Description                                                          | Type      | Default   |
-| ------------------ | ---------------- | ----------------------------------------- | --------- |
-| title              | title         | `string`                                  |           |
-| open               | open            | `Boolean`                                |   `false` |
+| Attribute | Description | Type      | Default |
+| --------- | ----------- | --------- | ------- |
+| title     | title       | `string`  |         |
+| open      | open        | `Boolean` | `false` |

 ## CSS Variables

 The component provides the following [CSS variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties), which can be used to customize styles. Please refer to [ConfigProvider component](#/zh-CN/guide/theme).

-| Name                     | Description                      | Default Value |
-| -------------------------- | ---------------- | --------------------------------- |
-| `--callapse-title-fontsize`   | Title font size     | `14px`                            |
-| `--callapse-title-color`      | Title color     | `#666`                            |
-| `--callapse-content-fontsize`   | Content font size     | `14px`                            |
-| `--callapse-content-color`      | Content color     | `#666`                            |
+| Name                          | Description       | Default Value |
+| ----------------------------- | ----------------- | ------------- |
+| `--callapse-title-fontsize`   | Title font size   | `14px`        |
+| `--callapse-title-color`      | Title color       | `#666`        |
+| `--callapse-content-fontsize` | Content font size | `14px`        |
+| `--callapse-content-color`    | Content color     | `#666`        |
@@ -28,7 +28,7 @@ import "quarkd/lib/collapse";
 </quark-collapse>
 ```

-### 无icon样式
+### 无 icon 样式

 通过 `iconhide` 属性来自定义标题。

@@ -51,9 +51,9 @@ import "quarkd/lib/collapse";
 </quark-collapse>
 ```

-### 自定义icon
+### 自定义 icon

-通过 `slot="icon"` 来自定义icon。
+通过 `slot="icon"` 来自定义 icon。

 ```html
 <quark-collapse :title="title">
@@ -62,23 +62,22 @@ import "quarkd/lib/collapse";
 </quark-collapse>
 ```

-
 ## API

 ### Props

-| 参数               | 说明             | 类型                                      | 默认值    |
-| ------------------ | ---------------- | ----------------------------------------- | --------- |
-| title              | 标题文字         | `string`                                  |           |
-| open               | 打开            | `Boolean`                                |   `false` |
+| 参数  | 说明     | 类型      | 默认值  |
+| ----- | -------- | --------- | ------- |
+| title | 标题文字 | `string`  |         |
+| open  | 打开     | `Boolean` | `false` |

 ## 样式变量

 组件提供了以下[CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/guide/theme)。

-| 名称                       | 说明             | 默认值                            |
-| -------------------------- | ---------------- | --------------------------------- |
-| `--callapse-title-fontsize`   | 标题字体大小     | `14px`                            |
-| `--callapse-title-color`      | 标题字体颜色     | `#666`                            |
-| `--callapse-content-fontsize`   | 标题字体大小     | `14px`                            |
-| `--callapse-content-color`      | 标题字体颜色     | `#666`                            |
+| 名称                          | 说明         | 默认值 |
+| ----------------------------- | ------------ | ------ |
+| `--callapse-title-fontsize`   | 标题字体大小 | `14px` |
+| `--callapse-title-color`      | 标题字体颜色 | `#666` |
+| `--callapse-content-fontsize` | 标题字体大小 | `14px` |
+| `--callapse-content-color`    | 标题字体颜色 | `#666` |
--- a/Show More
+++ b/Show More