@a2simcode/ui 0.0.248 → 0.0.250

package/docs/components/button.md

@@ -1,117 +1,117 @@
-# Button 按钮
-
-常用的操作按钮。
-
-## 按钮类型
-
-使用 `type` 属性来定义按钮的样式。
-
-<Demo :source-code="buttonTypeCode">
-  <template #source>
-    <button-type />
-  </template>
-  <template #description>
-    按钮有六种类型：主要按钮、次要按钮（默认）、虚框按钮、文字按钮、链接按钮和线框按钮。
-  </template>
-</Demo>
-
-## 图标按钮
-
-使用 `icon` 属性或者 `icon` 插槽来设置按钮图标。
-
-<Demo :source-code="buttonBasicCode">
-  <template #source>
-    <button-basic />
-  </template>
-  <template #description>
-    可以通过 `icon` 属性设置图标,或者通过 `#icon` 插槽自定义图标内容。
-  </template>
-</Demo>
-
-## 加载状态
-
-使用 `loading` 属性来设置旋转的加载图标。
-
-<Demo :source-code="buttonLoadingCode">
-  <template #source>
-    <button-loading />
-  </template>
-  <template #description>
-    设置 `loading` 属性为 `true` 即可。也可以设置 `{ delay: number }` 来延迟显示加载状态。
-  </template>
-</Demo>
-
-## 按钮形状
-
-使用 `shape` 属性定义按钮形状。
-
-<Demo :source-code="buttonShapeCode">
-  <template #source>
-    <button-shape />
-  </template>
-  <template #description>
-    支持 `default`、`circle`、`round` 三种形状。
-  </template>
-</Demo>
-
-## 不同尺寸
-
-Button 组件提供三种尺寸。
-
-<Demo :source-code="buttonSizeCode">
-  <template #source>
-    <button-size />
-  </template>
-  <template #description>
-    使用 `size` 属性配置尺寸,可选值为 `large`、`default` 和 `small`。
-  </template>
-</Demo>
-
-## 禁用状态
-
-使用 `disabled` 属性来定义按钮是否被禁用。
-
-<Demo :source-code="buttonDisabledCode">
-  <template #source>
-    <button-disabled />
-  </template>
-  <template #description>
-    你可以使用 `disabled` 属性来定义按钮是否可用。
-  </template>
-</Demo>
-
-## 按钮状态
-
-使用 `status` 属性来设置按钮的状态，支持 `normal`（默认）、`success`、`warning`、`danger` 四种状态。
-
-<Demo :source-code="buttonStatusCode">
-  <template #source>
-    <button-status />
-  </template>
-  <template #description>
-    `status` 属性可以与任意 `type` 组合使用，不同组合呈现不同的视觉效果。`success` 表示成功、`warning` 表示警告、`danger` 表示危险操作。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="buttonApi" componentName="button" />
-
-<script setup>
-import ButtonType from '../examples/button/type.vue'
-import ButtonBasic from '../examples/button/basic.vue'
-import ButtonLoading from '../examples/button/loading.vue'
-import ButtonShape from '../examples/button/shape.vue'
-import ButtonSize from '../examples/button/size.vue'
-import ButtonDisabled from '../examples/button/disabled.vue'
-import ButtonStatus from '../examples/button/status.vue'
-import buttonApi from './meta/button'
-
-import buttonTypeCode from '../examples/button/type.vue?raw'
-import buttonBasicCode from '../examples/button/basic.vue?raw'
-import buttonLoadingCode from '../examples/button/loading.vue?raw'
-import buttonShapeCode from '../examples/button/shape.vue?raw'
-import buttonSizeCode from '../examples/button/size.vue?raw'
-import buttonDisabledCode from '../examples/button/disabled.vue?raw'
-import buttonStatusCode from '../examples/button/status.vue?raw'
-</script>
+# Button 按钮
+
+常用的操作按钮。
+
+## 按钮类型
+
+使用 `type` 属性来定义按钮的样式。
+
+<Demo :source-code="buttonTypeCode">
+  <template #source>
+    <button-type />
+  </template>
+  <template #description>
+    按钮有六种类型：主要按钮、次要按钮（默认）、虚框按钮、文字按钮、链接按钮和线框按钮。
+  </template>
+</Demo>
+
+## 图标按钮
+
+使用 `icon` 属性或者 `icon` 插槽来设置按钮图标。
+
+<Demo :source-code="buttonBasicCode">
+  <template #source>
+    <button-basic />
+  </template>
+  <template #description>
+    可以通过 `icon` 属性设置图标,或者通过 `#icon` 插槽自定义图标内容。
+  </template>
+</Demo>
+
+## 加载状态
+
+使用 `loading` 属性来设置旋转的加载图标。
+
+<Demo :source-code="buttonLoadingCode">
+  <template #source>
+    <button-loading />
+  </template>
+  <template #description>
+    设置 `loading` 属性为 `true` 即可。也可以设置 `{ delay: number }` 来延迟显示加载状态。
+  </template>
+</Demo>
+
+## 按钮形状
+
+使用 `shape` 属性定义按钮形状。
+
+<Demo :source-code="buttonShapeCode">
+  <template #source>
+    <button-shape />
+  </template>
+  <template #description>
+    支持 `default`、`circle`、`round` 三种形状。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+Button 组件提供三种尺寸。
+
+<Demo :source-code="buttonSizeCode">
+  <template #source>
+    <button-size />
+  </template>
+  <template #description>
+    使用 `size` 属性配置尺寸,可选值为 `large`、`default` 和 `small`。
+  </template>
+</Demo>
+
+## 禁用状态
+
+使用 `disabled` 属性来定义按钮是否被禁用。
+
+<Demo :source-code="buttonDisabledCode">
+  <template #source>
+    <button-disabled />
+  </template>
+  <template #description>
+    你可以使用 `disabled` 属性来定义按钮是否可用。
+  </template>
+</Demo>
+
+## 按钮状态
+
+使用 `status` 属性来设置按钮的状态，支持 `normal`（默认）、`success`、`warning`、`danger` 四种状态。
+
+<Demo :source-code="buttonStatusCode">
+  <template #source>
+    <button-status />
+  </template>
+  <template #description>
+    `status` 属性可以与任意 `type` 组合使用，不同组合呈现不同的视觉效果。`success` 表示成功、`warning` 表示警告、`danger` 表示危险操作。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="buttonApi" componentName="button" />
+
+<script setup>
+import ButtonType from '../examples/button/type.vue'
+import ButtonBasic from '../examples/button/basic.vue'
+import ButtonLoading from '../examples/button/loading.vue'
+import ButtonShape from '../examples/button/shape.vue'
+import ButtonSize from '../examples/button/size.vue'
+import ButtonDisabled from '../examples/button/disabled.vue'
+import ButtonStatus from '../examples/button/status.vue'
+import buttonApi from './meta/button'
+
+import buttonTypeCode from '../examples/button/type.vue?raw'
+import buttonBasicCode from '../examples/button/basic.vue?raw'
+import buttonLoadingCode from '../examples/button/loading.vue?raw'
+import buttonShapeCode from '../examples/button/shape.vue?raw'
+import buttonSizeCode from '../examples/button/size.vue?raw'
+import buttonDisabledCode from '../examples/button/disabled.vue?raw'
+import buttonStatusCode from '../examples/button/status.vue?raw'
+</script>

package/docs/components/buttons.md

@@ -1,119 +1,119 @@
-# Buttons 按钮组
-
-用于批量管理和展示按钮，支持分组、下拉菜单等功能。
-
-## 基础用法
-
-通过 `list` 属性传入按钮配置数组。
-
-<Demo :source-code="buttonsBasicCode">
-  <template #source>
-    <buttons-basic />
-  </template>
-  <template #description>
-    每个按钮项需要包含唯一的 `id` 标识，可配置 `label`、`click` 等属性，`type`、`icon` 等属性需配置在 `config` 对象中。
-  </template>
-</Demo>
-
-## 按钮分组
-
-通过设置 `groupId` 可以将按钮自动分组展示。
-
-<Demo :source-code="buttonsGroupCode">
-  <template #source>
-    <buttons-group />
-  </template>
-  <template #description>
-    相同 `groupId` 的按钮会紧凑显示在一起，不同组之间会有间距。
-  </template>
-</Demo>
-
-## 下拉菜单
-
-通过 `children` 属性可以创建带下拉菜单的按钮。
-
-<Demo :source-code="buttonsDropdownCode">
-  <template #source>
-    <buttons-dropdown />
-  </template>
-  <template #description>
-    配置 `children` 数组后，子按钮会以下拉形式展示，适合放置次要操作。
-  </template>
-</Demo>
-
-## 不同尺寸
-
-通过 `size` 属性设置按钮组内所有按钮的尺寸。
-
-<Demo :source-code="buttonsSizeCode">
-  <template #source>
-    <buttons-size />
-  </template>
-  <template #description>
-    支持 `large`、`default`、`small` 三种尺寸。
-  </template>
-</Demo>
-
-## 链接形式
-
-通过 `isLink` 属性可以将所有按钮以链接形式展示。
-
-<Demo :source-code="buttonsLinkCode">
-  <template #source>
-    <buttons-link />
-  </template>
-  <template #description>
-    设置 `isLink` 为 `true` 后，所有按钮都会以链接形式展示。
-  </template>
-</Demo>
-
-## 禁用状态
-
-通过按钮项的 `disabled` 属性可以禁用单个按钮。
-
-<Demo :source-code="buttonsDisabledCode">
-  <template #source>
-    <buttons-disabled />
-  </template>
-  <template #description>
-    禁用的按钮不会触发点击事件。
-  </template>
-</Demo>
-
-## 点击打开弹窗
-
-演示通过按钮点击事件打开弹窗。
-
-<Demo :source-code="buttonsPopupCode">
-  <template #source>
-    <buttons-popup />
-  </template>
-  <template #description>
-    在 `click` 事件回调中解构获取 `openLayer` 方法，通过它动态打开弹窗。
-  </template>
-</Demo>
-
-## API
-
-### Buttons 属性
-
-<ApiTable :data="buttonsApi" componentName="buttons" />
-
-<script setup>
-import ButtonsBasic from '../examples/buttons/basic.vue'
-import ButtonsGroup from '../examples/buttons/group.vue'
-import ButtonsDropdown from '../examples/buttons/dropdown.vue'
-import ButtonsSize from '../examples/buttons/size.vue'
-import ButtonsLink from '../examples/buttons/link.vue'
-import ButtonsDisabled from '../examples/buttons/disabled.vue'
-import ButtonsPopup from '../examples/buttons/popup.vue'
-import buttonsApi from './meta/buttons'
-
-import buttonsBasicCode from '../examples/buttons/basic.vue?raw'
-import buttonsGroupCode from '../examples/buttons/group.vue?raw'
-import buttonsDropdownCode from '../examples/buttons/dropdown.vue?raw'
-import buttonsSizeCode from '../examples/buttons/size.vue?raw'
-import buttonsLinkCode from '../examples/buttons/link.vue?raw'
-import buttonsDisabledCode from '../examples/buttons/disabled.vue?raw'
-import buttonsPopupCode from '../examples/buttons/popup.vue?raw'
-</script>
+# Buttons 按钮组
+
+用于批量管理和展示按钮，支持分组、下拉菜单等功能。
+
+## 基础用法
+
+通过 `list` 属性传入按钮配置数组。
+
+<Demo :source-code="buttonsBasicCode">
+  <template #source>
+    <buttons-basic />
+  </template>
+  <template #description>
+    每个按钮项需要包含唯一的 `id` 标识，可配置 `label`、`click` 等属性，`type`、`icon` 等属性需配置在 `config` 对象中。
+  </template>
+</Demo>
+
+## 按钮分组
+
+通过设置 `groupId` 可以将按钮自动分组展示。
+
+<Demo :source-code="buttonsGroupCode">
+  <template #source>
+    <buttons-group />
+  </template>
+  <template #description>
+    相同 `groupId` 的按钮会紧凑显示在一起，不同组之间会有间距。
+  </template>
+</Demo>
+
+## 下拉菜单
+
+通过 `children` 属性可以创建带下拉菜单的按钮。
+
+<Demo :source-code="buttonsDropdownCode">
+  <template #source>
+    <buttons-dropdown />
+  </template>
+  <template #description>
+    配置 `children` 数组后，子按钮会以下拉形式展示，适合放置次要操作。
+  </template>
+</Demo>
+
+## 不同尺寸
+
+通过 `size` 属性设置按钮组内所有按钮的尺寸。
+
+<Demo :source-code="buttonsSizeCode">
+  <template #source>
+    <buttons-size />
+  </template>
+  <template #description>
+    支持 `large`、`default`、`small` 三种尺寸。
+  </template>
+</Demo>
+
+## 链接形式
+
+通过 `isLink` 属性可以将所有按钮以链接形式展示。
+
+<Demo :source-code="buttonsLinkCode">
+  <template #source>
+    <buttons-link />
+  </template>
+  <template #description>
+    设置 `isLink` 为 `true` 后，所有按钮都会以链接形式展示。
+  </template>
+</Demo>
+
+## 禁用状态
+
+通过按钮项的 `disabled` 属性可以禁用单个按钮。
+
+<Demo :source-code="buttonsDisabledCode">
+  <template #source>
+    <buttons-disabled />
+  </template>
+  <template #description>
+    禁用的按钮不会触发点击事件。
+  </template>
+</Demo>
+
+## 点击打开弹窗
+
+演示通过按钮点击事件打开弹窗。
+
+<Demo :source-code="buttonsPopupCode">
+  <template #source>
+    <buttons-popup />
+  </template>
+  <template #description>
+    在 `click` 事件回调中解构获取 `openLayer` 方法，通过它动态打开弹窗。
+  </template>
+</Demo>
+
+## API
+
+### Buttons 属性
+
+<ApiTable :data="buttonsApi" componentName="buttons" />
+
+<script setup>
+import ButtonsBasic from '../examples/buttons/basic.vue'
+import ButtonsGroup from '../examples/buttons/group.vue'
+import ButtonsDropdown from '../examples/buttons/dropdown.vue'
+import ButtonsSize from '../examples/buttons/size.vue'
+import ButtonsLink from '../examples/buttons/link.vue'
+import ButtonsDisabled from '../examples/buttons/disabled.vue'
+import ButtonsPopup from '../examples/buttons/popup.vue'
+import buttonsApi from './meta/buttons'
+
+import buttonsBasicCode from '../examples/buttons/basic.vue?raw'
+import buttonsGroupCode from '../examples/buttons/group.vue?raw'
+import buttonsDropdownCode from '../examples/buttons/dropdown.vue?raw'
+import buttonsSizeCode from '../examples/buttons/size.vue?raw'
+import buttonsLinkCode from '../examples/buttons/link.vue?raw'
+import buttonsDisabledCode from '../examples/buttons/disabled.vue?raw'
+import buttonsPopupCode from '../examples/buttons/popup.vue?raw'
+</script>

package/docs/components/card-list.md

@@ -0,0 +1,38 @@
+# CardList 卡片列表
+
+用于将数据以卡片形式展示，内置图片预览、操作按钮、单选/多选与分页能力。
+
+## 基础使用
+
+<Demo :source-code="basicCode">
+  <template #source>
+    <card-list-basic />
+  </template>
+  <template #description>
+    通过 `dataSource` 传入数据，通过 `loadSrc` 获取图片地址，通过 `buttons` 配置卡片操作按钮。
+  </template>
+</Demo>
+
+## 选择与分页
+
+<Demo :source-code="selectionPaginationCode">
+  <template #source>
+    <card-list-selection-pagination />
+  </template>
+  <template #description>
+    开启 `isRadio` 或 `isMultiSelect` 后可以进行选择，组件对外暴露 `getSelections/clearSelection` 方法；开启 `isPage` 后使用分页并监听 `loadPageData` 加载数据。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="cardListApi" componentName="card-list" />
+
+<script setup>
+import CardListBasic from '../examples/card-list/basic.vue'
+import CardListSelectionPagination from '../examples/card-list/selection-pagination.vue'
+import cardListApi from './meta/card-list'
+
+import basicCode from '../examples/card-list/basic.vue?raw'
+import selectionPaginationCode from '../examples/card-list/selection-pagination.vue?raw'
+</script>