xt-element-ui 2.0.0 → 2.0.2

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

@@ -1,183 +1,183 @@
-## XtChart 图表容器组件
-
-基于 ECharts 封装的图表容器组件，通过 `type` 属性切换不同图表类型（柱状图、折线图、饼图、组合图）。
-
-## 基本用法
-
-::: demo 基本用法
-```vue
-<template>
-  <XtChart type="bar" :chart-data="chartData" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 65, label: "张三" },
-        { value: 78, label: "李四" },
-        { value: 95, label: "王五" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 可选值 | 说明 |
-|------|------|--------|--------|------|
-| `type` | String | `bar` | `bar`、`line`、`pie`、`multi` | 图表类型 |
-| `theme` | String | - | `dark`、`default` | 主题，自动检测父元素 `data-theme` |
-| `size` | String | `medium` | `small`、`medium`、`large` | 图表尺寸 |
-
-## 示例
-
-### 柱状图
-
-::: demo 柱状图
-```vue
-<template>
-  <XtChart type="bar" :chart-data="chartData" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 65, label: "张三" },
-        { value: 78, label: "李四" },
-        { value: 95, label: "王五" },
-        { value: 82, label: "赵六" },
-        { value: 70, label: "钱七" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 折线图
-
-::: demo 折线图
-```vue
-<template>
-  <XtChart type="line" :chart-data="chartData" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 65, label: "1月" },
-        { value: 78, label: "2月" },
-        { value: 95, label: "3月" },
-        { value: 82, label: "4月" },
-        { value: 70, label: "5月" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 饼图
-
-::: demo 饼图
-```vue
-<template>
-  <XtChart type="pie" :chart-data="chartData" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 30, label: "北京" },
-        { value: 25, label: "上海" },
-        { value: 20, label: "广州" },
-        { value: 25, label: "深圳" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 组合图
-
-::: demo 组合图
-```vue
-<template>
-  <XtChart type="multi" :chart-data="chartData" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        {
-          label: "销售额",
-          unit: "万元",
-          data: [
-            { label: "1月", value: 100 },
-            { label: "2月", value: 120 },
-            { label: "3月", value: 90 }
-          ]
-        },
-        {
-          label: "订单数",
-          unit: "单",
-          data: [
-            { label: "1月", value: 50 },
-            { label: "2月", value: 60 },
-            { label: "3月", value: 45 }
-          ]
-        }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 暗色主题
-
-::: demo 暗色主题
-```vue
-<template>
-  <XtChart type="bar" :chart-data="chartData" theme="dark" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 65, label: "张三" },
-        { value: 78, label: "李四" },
-        { value: 95, label: "王五" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 注意事项
-
-- `XtChart` 是一个容器组件，会根据 `type` 属性渲染对应的子组件（XtBar/XtLine/XtPie/XtMulti）
-- 所有子组件的 props 都可以通过 `XtChart` 透传
+## XtChart 图表容器组件
+
+基于 ECharts 封装的图表容器组件，通过 `type` 属性切换不同图表类型（柱状图、折线图、饼图、组合图）。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtChart type="bar" :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 78, label: "李四" },
+        { value: 95, label: "王五" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `type` | String | `bar` | `bar`、`line`、`pie`、`multi` | 图表类型 |
+| `theme` | String | - | `dark`、`default` | 主题，自动检测父元素 `data-theme` |
+| `size` | String | `medium` | `small`、`medium`、`large` | 图表尺寸 |
+
+## 示例
+
+### 柱状图
+
+::: demo 柱状图
+```vue
+<template>
+  <XtChart type="bar" :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 78, label: "李四" },
+        { value: 95, label: "王五" },
+        { value: 82, label: "赵六" },
+        { value: 70, label: "钱七" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 折线图
+
+::: demo 折线图
+```vue
+<template>
+  <XtChart type="line" :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "1月" },
+        { value: 78, label: "2月" },
+        { value: 95, label: "3月" },
+        { value: 82, label: "4月" },
+        { value: 70, label: "5月" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 饼图
+
+::: demo 饼图
+```vue
+<template>
+  <XtChart type="pie" :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 30, label: "北京" },
+        { value: 25, label: "上海" },
+        { value: 20, label: "广州" },
+        { value: 25, label: "深圳" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 组合图
+
+::: demo 组合图
+```vue
+<template>
+  <XtChart type="multi" :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        {
+          label: "销售额",
+          unit: "万元",
+          data: [
+            { label: "1月", value: 100 },
+            { label: "2月", value: 120 },
+            { label: "3月", value: 90 }
+          ]
+        },
+        {
+          label: "订单数",
+          unit: "单",
+          data: [
+            { label: "1月", value: 50 },
+            { label: "2月", value: 60 },
+            { label: "3月", value: 45 }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 暗色主题
+
+::: demo 暗色主题
+```vue
+<template>
+  <XtChart type="bar" :chart-data="chartData" theme="dark" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 78, label: "李四" },
+        { value: 95, label: "王五" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 注意事项
+
+- `XtChart` 是一个容器组件，会根据 `type` 属性渲染对应的子组件（XtBar/XtLine/XtPie/XtMulti）
+- 所有子组件的 props 都可以通过 `XtChart` 透传
 - 主题会自动检测父元素的 `data-theme` 属性，无需手动传递

package/docs/components/base/xt-date-picker.md

@@ -1,111 +1,111 @@
-## XtDatePicker 日期选择器组件
-
-日期选择器组件用于选择日期范围，支持多种日期类型（年月日、年月、年、季度等）。
-
-## 基本用法
-
-::: demo 基本用法
-```vue
-<template>
-  <XtDatePicker v-model="dateRange" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      dateRange: []
-    }
-  }
-}
-</script>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 可选值 | 说明 |
-|------|------|--------|--------|------|
-| `value` / `v-model` | Array | - | - | 日期范围，格式为 `[startDate, endDate]` |
-| `dateType` | String | `date` | `date`、`datetime`、`month`、`year`、`quarter`、`week` | 日期类型 |
-| `separator` | String | `至` | - | 分隔符文本 |
-| `disabled` | Boolean | `false` | - | 是否禁用 |
-| `width` | Number | `280` | - | 组件宽度（px） |
-
-## 示例
-
-### 不同日期类型
-
-::: demo 不同日期类型
-```vue
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px;">
-    <XtDatePicker v-model="dateRange" dateType="date" />
-    <XtDatePicker v-model="monthRange" dateType="month" />
-    <XtDatePicker v-model="yearRange" dateType="year" />
-    <XtDatePicker v-model="quarterRange" dateType="quarter" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      dateRange: [],
-      monthRange: [],
-      yearRange: [],
-      quarterRange: []
-    }
-  }
-}
-</script>
-```
-:::
-
-### 自定义分隔符
-
-::: demo 自定义分隔符
-```vue
-<template>
-  <XtDatePicker v-model="dateRange" separator="~" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      dateRange: []
-    }
-  }
-}
-</script>
-```
-:::
-
-### 禁用状态
-
-::: demo 禁用状态
-```vue
-<template>
-  <XtDatePicker v-model="dateRange" disabled />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      dateRange: []
-    }
-  }
-}
-</script>
-```
-:::
-
-## 事件
-
-| 事件名 | 说明 | 参数 |
-|--------|------|------|
-| `change` | 日期值改变时触发 | `[startDate, endDate]` |
-| `focus` | 输入框获得焦点时触发 | - |
+## XtDatePicker 日期选择器组件
+
+日期选择器组件用于选择日期范围，支持多种日期类型（年月日、年月、年、季度等）。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtDatePicker v-model="dateRange" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: []
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `value` / `v-model` | Array | - | - | 日期范围，格式为 `[startDate, endDate]` |
+| `dateType` | String | `date` | `date`、`datetime`、`month`、`year`、`quarter`、`week` | 日期类型 |
+| `separator` | String | `至` | - | 分隔符文本 |
+| `disabled` | Boolean | `false` | - | 是否禁用 |
+| `width` | Number | `280` | - | 组件宽度（px） |
+
+## 示例
+
+### 不同日期类型
+
+::: demo 不同日期类型
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <XtDatePicker v-model="dateRange" dateType="date" />
+    <XtDatePicker v-model="monthRange" dateType="month" />
+    <XtDatePicker v-model="yearRange" dateType="year" />
+    <XtDatePicker v-model="quarterRange" dateType="quarter" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: [],
+      monthRange: [],
+      yearRange: [],
+      quarterRange: []
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义分隔符
+
+::: demo 自定义分隔符
+```vue
+<template>
+  <XtDatePicker v-model="dateRange" separator="~" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: []
+    }
+  }
+}
+</script>
+```
+:::
+
+### 禁用状态
+
+::: demo 禁用状态
+```vue
+<template>
+  <XtDatePicker v-model="dateRange" disabled />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: []
+    }
+  }
+}
+</script>
+```
+:::
+
+## 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| `change` | 日期值改变时触发 | `[startDate, endDate]` |
+| `focus` | 输入框获得焦点时触发 | - |
 | `blur` | 输入框失去焦点时触发 | - |