xt-element-ui 2.0.0 → 2.0.2

package/docs/components/base/xt-progress.md

@@ -1,134 +1,134 @@
-## XtProgress 进度条组件
-
-进度条组件，用于展示任务完成进度。
-
-## 基本用法
-
-::: demo 基本用法
-```vue
-<template>
-  <XtProgress :percentage="60" />
-</template>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 可选值 | 说明 |
-|------|------|--------|--------|------|
-| `percentage` | Number | `0` | 0-100 | 进度百分比 |
-| `type` | String | `line` | `line`、`circle`、`dashboard` | 进度条类型 |
-| `strokeWidth` | Number | `6` | - | 进度条宽度 |
-| `color` | String / Array | `#1890ff` | - | 进度条颜色 |
-| `status` | String | - | `success`、`exception`、`normal` | 状态 |
-| `width` | Number | `126` | - | 环形进度条宽度 |
-| `textInside` | Boolean | `false` | - | 是否将进度百分比显示在进度条内 |
-| `showText` | Boolean | `true` | - | 是否显示进度百分比 |
-| `format` | Function | - | - | 自定义进度条文字内容 |
-
-## 示例
-
-### 不同类型的进度条
-
-::: demo 不同类型的进度条
-```vue
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px;">
-    <XtProgress :percentage="60" />
-    <XtProgress type="circle" :percentage="60" />
-    <XtProgress type="dashboard" :percentage="60" />
-  </div>
-</template>
-```
-:::
-
-### 不同状态
-
-::: demo 不同状态
-```vue
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px;">
-    <XtProgress :percentage="100" status="success" />
-    <XtProgress :percentage="60" status="normal" />
-    <XtProgress :percentage="60" status="exception" />
-  </div>
-</template>
-```
-:::
-
-### 自定义颜色
-
-::: demo 自定义颜色
-```vue
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px;">
-    <XtProgress :percentage="60" color="#52c41a" />
-    <XtProgress :percentage="60" color="#faad14" />
-    <XtProgress :percentage="60" color="#f5222d" />
-  </div>
-</template>
-```
-:::
-
-### 文字在进度条内
-
-::: demo 文字在进度条内
-```vue
-<template>
-  <XtProgress :percentage="60" :text-inside="true" :stroke-width="20" />
-</template>
-```
-:::
-
-### 自定义宽度
-
-::: demo 自定义宽度
-```vue
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px;">
-    <XtProgress :percentage="60" :stroke-width="3" />
-    <XtProgress :percentage="60" :stroke-width="6" />
-    <XtProgress :percentage="60" :stroke-width="12" />
-  </div>
-</template>
-```
-:::
-
-### 自定义文字格式
-
-::: demo 自定义文字格式
-```vue
-<template>
-  <XtProgress :percentage="60" :format="(percent) => `${percent}% 完成`" />
-</template>
-```
-:::
-
-### 环形进度条
-
-::: demo 环形进度条
-```vue
-<template>
-  <div style="display: flex; gap: 32px;">
-    <XtProgress type="circle" :percentage="60" />
-    <XtProgress type="circle" :percentage="60" :width="80" />
-    <XtProgress type="circle" :percentage="60" :width="150" />
-  </div>
-</template>
-```
-:::
-
-### 仪表盘
-
-::: demo 仪表盘
-```vue
-<template>
-  <XtProgress type="dashboard" :percentage="60" />
-</template>
-```
-:::
-
-## 注意事项
-
-- `percentage` 属性值应在 0-100 之间
+## XtProgress 进度条组件
+
+进度条组件，用于展示任务完成进度。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtProgress :percentage="60" />
+</template>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `percentage` | Number | `0` | 0-100 | 进度百分比 |
+| `type` | String | `line` | `line`、`circle`、`dashboard` | 进度条类型 |
+| `strokeWidth` | Number | `6` | - | 进度条宽度 |
+| `color` | String / Array | `#1890ff` | - | 进度条颜色 |
+| `status` | String | - | `success`、`exception`、`normal` | 状态 |
+| `width` | Number | `126` | - | 环形进度条宽度 |
+| `textInside` | Boolean | `false` | - | 是否将进度百分比显示在进度条内 |
+| `showText` | Boolean | `true` | - | 是否显示进度百分比 |
+| `format` | Function | - | - | 自定义进度条文字内容 |
+
+## 示例
+
+### 不同类型的进度条
+
+::: demo 不同类型的进度条
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <XtProgress :percentage="60" />
+    <XtProgress type="circle" :percentage="60" />
+    <XtProgress type="dashboard" :percentage="60" />
+  </div>
+</template>
+```
+:::
+
+### 不同状态
+
+::: demo 不同状态
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <XtProgress :percentage="100" status="success" />
+    <XtProgress :percentage="60" status="normal" />
+    <XtProgress :percentage="60" status="exception" />
+  </div>
+</template>
+```
+:::
+
+### 自定义颜色
+
+::: demo 自定义颜色
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <XtProgress :percentage="60" color="#52c41a" />
+    <XtProgress :percentage="60" color="#faad14" />
+    <XtProgress :percentage="60" color="#f5222d" />
+  </div>
+</template>
+```
+:::
+
+### 文字在进度条内
+
+::: demo 文字在进度条内
+```vue
+<template>
+  <XtProgress :percentage="60" :text-inside="true" :stroke-width="20" />
+</template>
+```
+:::
+
+### 自定义宽度
+
+::: demo 自定义宽度
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <XtProgress :percentage="60" :stroke-width="3" />
+    <XtProgress :percentage="60" :stroke-width="6" />
+    <XtProgress :percentage="60" :stroke-width="12" />
+  </div>
+</template>
+```
+:::
+
+### 自定义文字格式
+
+::: demo 自定义文字格式
+```vue
+<template>
+  <XtProgress :percentage="60" :format="(percent) => `${percent}% 完成`" />
+</template>
+```
+:::
+
+### 环形进度条
+
+::: demo 环形进度条
+```vue
+<template>
+  <div style="display: flex; gap: 32px;">
+    <XtProgress type="circle" :percentage="60" />
+    <XtProgress type="circle" :percentage="60" :width="80" />
+    <XtProgress type="circle" :percentage="60" :width="150" />
+  </div>
+</template>
+```
+:::
+
+### 仪表盘
+
+::: demo 仪表盘
+```vue
+<template>
+  <XtProgress type="dashboard" :percentage="60" />
+</template>
+```
+:::
+
+## 注意事项
+
+- `percentage` 属性值应在 0-100 之间
 - 环形进度条默认宽度为 126px，可以通过 `width` 属性调整

package/docs/components/base/xt-select-tree.md

@@ -1,141 +1,141 @@
-## XtSelectTree 下拉选择树组件
-
-下拉选择树组件，基于 ElementUI Tree 封装，支持单选、多选、懒加载等功能。
-
-## 基本用法
-
-::: demo 基本用法
-```vue
-<template>
-  <XtSelectTree v-model="selectedValue" :data="treeData" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selectedValue: '',
-      treeData: [
-        {
-          label: '一级菜单',
-          value: 1,
-          children: [
-            { label: '二级菜单1', value: 11 },
-            { label: '二级菜单2', value: 12 }
-          ]
-        },
-        { label: '二级菜单', value: 2 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `value` / `v-model` | String / Number / Array | - | 选中值，多选时为数组 |
-| `data` | Array | `[]` | 树数据 |
-| `props` | Object | `{ value: 'value', label: 'label', children: 'children' }` | 数据属性映射 |
-| `multiple` | Boolean | `false` | 是否多选 |
-| `filterable` | Boolean | `true` | 是否可搜索 |
-| `clearable` | Boolean | `false` | 是否可清空 |
-| `disabled` | Boolean | `false` | 是否禁用 |
-| `checkStrictly` | Boolean | `false` | 是否严格父子节点选择 |
-| `defaultExpandAll` | Boolean | `false` | 是否默认展开所有节点 |
-| `lazy` | Boolean | `false` | 是否懒加载 |
-| `load` | Function | - | 懒加载函数 |
-| `placement` | String | `bottom-start` | 弹出位置 |
-| `placeholder` | String | `请选择` | 占位提示 |
-
-## 示例
-
-### 多选模式
-
-::: demo 多选模式
-```vue
-<template>
-  <XtSelectTree v-model="selectedValues" :data="treeData" multiple />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selectedValues: [],
-      treeData: [
-        {
-          label: '部门A',
-          value: 1,
-          children: [
-            { label: '员工1', value: 11 },
-            { label: '员工2', value: 12 }
-          ]
-        },
-        { label: '部门B', value: 2 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 可搜索
-
-::: demo 可搜索
-```vue
-<template>
-  <XtSelectTree v-model="selectedValue" :data="treeData" filterable />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selectedValue: '',
-      treeData: [
-        { label: '张三', value: 1 },
-        { label: '李四', value: 2 },
-        { label: '王五', value: 3 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 可清空
-
-::: demo 可清空
-```vue
-<template>
-  <XtSelectTree v-model="selectedValue" :data="treeData" clearable />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selectedValue: '',
-      treeData: [
-        { label: '选项1', value: 1 },
-        { label: '选项2', value: 2 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 事件
-
-| 事件名 | 说明 | 参数 |
-|--------|------|------|
-| `change` | 选中值改变时触发 | `value`, `node` |
+## XtSelectTree 下拉选择树组件
+
+下拉选择树组件，基于 ElementUI Tree 封装，支持单选、多选、懒加载等功能。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtSelectTree v-model="selectedValue" :data="treeData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedValue: '',
+      treeData: [
+        {
+          label: '一级菜单',
+          value: 1,
+          children: [
+            { label: '二级菜单1', value: 11 },
+            { label: '二级菜单2', value: 12 }
+          ]
+        },
+        { label: '二级菜单', value: 2 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `value` / `v-model` | String / Number / Array | - | 选中值，多选时为数组 |
+| `data` | Array | `[]` | 树数据 |
+| `props` | Object | `{ value: 'value', label: 'label', children: 'children' }` | 数据属性映射 |
+| `multiple` | Boolean | `false` | 是否多选 |
+| `filterable` | Boolean | `true` | 是否可搜索 |
+| `clearable` | Boolean | `false` | 是否可清空 |
+| `disabled` | Boolean | `false` | 是否禁用 |
+| `checkStrictly` | Boolean | `false` | 是否严格父子节点选择 |
+| `defaultExpandAll` | Boolean | `false` | 是否默认展开所有节点 |
+| `lazy` | Boolean | `false` | 是否懒加载 |
+| `load` | Function | - | 懒加载函数 |
+| `placement` | String | `bottom-start` | 弹出位置 |
+| `placeholder` | String | `请选择` | 占位提示 |
+
+## 示例
+
+### 多选模式
+
+::: demo 多选模式
+```vue
+<template>
+  <XtSelectTree v-model="selectedValues" :data="treeData" multiple />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedValues: [],
+      treeData: [
+        {
+          label: '部门A',
+          value: 1,
+          children: [
+            { label: '员工1', value: 11 },
+            { label: '员工2', value: 12 }
+          ]
+        },
+        { label: '部门B', value: 2 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 可搜索
+
+::: demo 可搜索
+```vue
+<template>
+  <XtSelectTree v-model="selectedValue" :data="treeData" filterable />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedValue: '',
+      treeData: [
+        { label: '张三', value: 1 },
+        { label: '李四', value: 2 },
+        { label: '王五', value: 3 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 可清空
+
+::: demo 可清空
+```vue
+<template>
+  <XtSelectTree v-model="selectedValue" :data="treeData" clearable />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedValue: '',
+      treeData: [
+        { label: '选项1', value: 1 },
+        { label: '选项2', value: 2 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| `change` | 选中值改变时触发 | `value`, `node` |
 | `clear` | 清空时触发 | - |