xt-element-ui 1.4.0 → 2.0.0

package/docs/components/extend/ex-icon.md

@@ -1,189 +0,0 @@
-## ExIcon 图标
-
-统一图标组件，支持 ElementUI 字体图标（el-icon）、SVG Sprite 图标、内联 SVG，以及可扩展的自定义字体图标。
-
-## 基础用法：ElementUI 字体图标
-
-`name` 以 `el-icon-` 开头时，自动识别为 ElementUI 字体图标：
-
-::: demo ElementUI 字体图标示例
-```vue
-<template>
-  <div style="font-size: 24px">
-    <ex-icon name="el-icon-edit" style="margin-right: 16px" />
-    <ex-icon name="el-icon-delete" style="margin-right: 16px" />
-    <ex-icon name="el-icon-search" style="margin-right: 16px" />
-    <ex-icon name="el-icon-share" style="margin-right: 16px" />
-    <ex-icon name="el-icon-setting" />
-  </div>
-</template>
-```
-:::
-
-## SVG Sprite 图标
-
-`name` 以 `#` 或 `svg:` 开头时，自动识别为 SVG Sprite（通过 `<use>` 引用）。使用前请确保项目已通过 `svg-sprite-loader` 等方式注册了对应的 SVG 图标：
-
-::: demo SVG Sprite 图标示例
-```vue
-<template>
-  <div style="font-size: 24px; color: #1890ff">
-    <ex-icon name="#icon-user" style="margin-right: 16px" />
-    <ex-icon name="svg:icon-home" style="margin-right: 16px" />
-    <ex-icon name="#icon-star" />
-  </div>
-</template>
-```
-:::
-
-## 内联 SVG 图标
-
-`name` 传入完整的 `<svg>` 字符串时，将作为内联 SVG 渲染：
-
-::: demo 内联 SVG 示例
-```vue
-<template>
-  <ex-icon
-    :size="32"
-    color="#f56c6c"
-    :name="'<svg viewBox=&quot;0 0 1024 1024&quot;><path d=&quot;M512 938.666667L85.333333 512l170.666667-170.666667 256 256 256-256L938.666667 512 512 938.666667z&quot; fill=&quot;currentColor&quot;></path></svg>'"
-  />
-</template>
-```
-:::
-
-## 自定义字体图标（本地扩展）
-
-除 `el-icon-` 前缀外，其它自定义前缀会自动作为自定义字体图标渲染（需在项目中自行准备 @font-face 字体文件及对应 class）。例如使用 `my-icon-star`：
-
-```scss
-// 项目中准备好字体文件及 class
-@font-face {
-  font-family: 'my-icon';
-  src: url('./fonts/my-icon.ttf') format('truetype');
-}
-.my-icon {
-  font-family: 'my-icon' !important;
-}
-.my-icon-star::before {
-  content: '\e001';
-}
-```
-
-::: demo 自定义字体图标示例
-```vue
-<template>
-  <div style="font-size: 24px">
-    <ex-icon name="my-icon-star" style="margin-right: 16px" />
-    <ex-icon name="my-icon-heart" />
-  </div>
-</template>
-
-<script>
-export default {
-  created() {
-    // 注册自定义前缀，避免自动添加 ex-icon 前缀
-    ExIcon.registerPrefix('my-icon-')
-  }
-}
-</script>
-```
-:::
-
-未注册自定义前缀时，组件会自动为其添加 `ex-icon` 作为基础 class，方便与项目本地的 @font-face 配合：
-
-```scss
-.ex-icon {
-  font-family: 'ex-iconfont' !important;
-  font-size: 16px;
-  font-style: normal;
-}
-.ex-icon-star::before { content: '\e001'; }
-```
-
-## 尺寸与颜色
-
-通过 `size` 和 `color` 属性控制图标大小与颜色：
-
-::: demo 图标尺寸颜色示例
-```vue
-<template>
-  <div>
-    <ex-icon name="el-icon-star-on" :size="16" color="#909399" style="margin-right: 16px" />
-    <ex-icon name="el-icon-star-on" :size="24" color="#e6a23c" style="margin-right: 16px" />
-    <ex-icon name="el-icon-star-on" :size="32" color="#f56c6c" style="margin-right: 16px" />
-    <ex-icon name="el-icon-star-on" :size="48" color="#67c23a" style="margin-right: 16px" />
-    <ex-icon name="el-icon-star-on" size="2em" color="#409eff" />
-  </div>
-</template>
-```
-:::
-
-## 旋转动画
-
-设置 `spin` 让图标持续旋转（常用于加载状态）：
-
-::: demo 图标旋转示例
-```vue
-<template>
-  <div style="font-size: 24px">
-    <ex-icon name="el-icon-loading" spin style="margin-right: 16px" />
-    <ex-icon name="el-icon-refresh" spin />
-  </div>
-</template>
-```
-:::
-
-## 点击事件
-
-支持 `@click` 事件：
-
-::: demo 图标点击示例
-```vue
-<template>
-  <div style="font-size: 24px">
-    <ex-icon
-      name="el-icon-favorite"
-      color="#f56c6c"
-      @click="handleClick"
-      style="cursor: pointer"
-    />
-    <span style="margin-left: 8px; font-size: 14px">点击次数：{{ count }}</span>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return { count: 0 }
-  },
-  methods: {
-    handleClick() {
-      this.count++
-    }
-  }
-}
-</script>
-```
-:::
-
-## Attributes
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-|------|------|------|--------|--------|
-| name | 图标名称（支持 el-icon-xxx 自定义前缀） | string | — | '' |
-| size | 图标尺寸（数字单位 px，也可传入如 '2em' 的字符串） | string / number | — | '' |
-| color | 图标颜色（CSS color 值） | string | — | '' |
-| spin | 是否持续旋转 | boolean | — | false |
-
-## Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| click | 点击图标时触发 | event |
-
-## 静态方法
-
-| 方法名 | 说明 | 参数 |
-|--------|------|------|
-| ExIcon.registerPrefix(prefix) | 注册自定义字体图标前缀，注册后该前缀的图标不会自动添加 `ex-icon` 基础 class | prefix: string |

package/docs/components/extend/ex-line.md

@@ -1,71 +0,0 @@
-## ExLine - 折线图组件
-
-基于 ECharts 封装的折线图组件。
-
-## 基本用法
-
-::: demo 折线图基础示例
-```vue
-<template>
-  <ExChart type="line" :chartData="chartData" style="height: 400px;" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { name: '1月', value: 50 },
-        { name: '2月', value: 65 },
-        { name: '3月', value: 78 },
-        { name: '4月', value: 82 },
-        { name: '5月', value: 95 },
-        { name: '6月', value: 88 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 面积区域
-
-::: demo 显示面积区域
-```vue
-<template>
-  <ExChart type="line" :chartData="chartData" :isArea="true" style="height: 400px;" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { name: '1月', value: 2450 },
-        { name: '2月', value: 2800 },
-        { name: '3月', value: 3200 },
-        { name: '4月', value: 2950 },
-        { name: '5月', value: 3500 },
-        { name: '6月', value: 3800 },
-        { name: '7月', value: 4200 },
-        { name: '8月', value: 4500 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `chartData` | Array | [] | 图表数据 |
-| `theme` | String | '' | 主题名称 |
-| `size` | String | 'medium' | 尺寸 |
-| `isDark` | Boolean | false | 是否暗色模式 |
-| `isArea` | Boolean | false | 是否显示面积区域 |
-| `energyType` | String | '' | Y轴单位 |
-| `intervalvalue` | Number | 0 | 自定义间隔值 |

package/docs/components/extend/ex-multi.md

@@ -1,156 +0,0 @@
-## ExMulti - 组合图组件
-
-基于 ECharts 封装的组合图组件，支持多系列数据展示。
-
-## 基本用法
-
-::: demo 组合图基础示例
-```vue
-<template>
-  <ExChart type="multi" :chartData="chartData" style="height: 400px;" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-          {
-            label: "入户数",
-            unit: "户",
-            data: [
-              { label: "01月", value: 980 },
-              { label: "02月", value: 806 },
-              { label: "03月", value: 930 },
-              { label: "04月", value: 804 },
-              { label: "05月", value: 750 },
-              { label: "06月", value: 660 },
-              { label: "07月", value: 780 },
-              { label: "08月", value: 630 },
-              { label: "09月", value: 806 },
-              { label: "10月", value: 950 },
-              { label: "11月", value: 810 },
-              { label: "12月", value: 703 }
-            ]
-          },
-          {
-            label: "隐患数",
-            unit: "个",
-            data: [
-              { label: "01月", value: 200 },
-              { label: "02月", value: 120 },
-              { label: "03月", value: 110 },
-              { label: "04月", value: 109 },
-              { label: "05月", value: 108 },
-              { label: "06月", value: 150 },
-              { label: "07月", value: 126 },
-              { label: "08月", value: 130 },
-              { label: "09月", value: 108 },
-              { label: "10月", value: 109 },
-              { label: "11月", value: 140 },
-              { label: "12月", value: 106 }
-            ]
-          },
-          {
-            label: "整改数",
-            unit: "个",
-            data: [
-              { label: "01月", value: 25 },
-              { label: "02月", value: 19 },
-              { label: "03月", value: 34 },
-              { label: "04月", value: 12 },
-              { label: "05月", value: 16 },
-              { label: "06月", value: 20 },
-              { label: "07月", value: 19 },
-              { label: "08月", value: 18 },
-              { label: "09月", value: 14 },
-              { label: "10月", value: 12 },
-              { label: "11月", value: 11 },
-              { label: "12月", value: 16 }
-            ]
-          }
-        ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 三系列组合
-
-::: demo 三系列组合图示例
-```vue
-<template>
-  <ExChart type="multi" :chartData="chartData" style="height: 400px;" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        {
-          label: "收入",
-          data: [
-            { label: "Q1", value: 1200 },
-            { label: "Q2", value: 1500 },
-            { label: "Q3", value: 1800 },
-            { label: "Q4", value: 2200 }
-          ]
-        },
-        {
-          label: "支出",
-          data: [
-            { label: "Q1", value: 800 },
-            { label: "Q2", value: 950 },
-            { label: "Q3", value: 1100 },
-            { label: "Q4", value: 1250 }
-          ]
-        },
-        {
-          label: "利润",
-          data: [
-            { label: "Q1", value: 400 },
-            { label: "Q2", value: 550 },
-            { label: "Q3", value: 700 },
-            { label: "Q4", value: 950 }
-          ]
-        }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `chartData` | Array | [] | 图表数据，支持多个系列 |
-| `theme` | String | '' | 主题名称 |
-| `size` | String | 'medium' | 尺寸 |
-
-## 数据格式
-
-```javascript
-[
-  {
-    label: "系列名称1",
-    data: [
-      { label: "分类1", value: 数值 },
-      { label: "分类2", value: 数值 },
-      // ...
-    ]
-  },
-  {
-    label: "系列名称2",
-    data: [
-      { label: "分类1", value: 数值 },
-      // ...
-    ]
-  }
-]
-```

package/docs/components/extend/ex-pie.md

@@ -1,70 +0,0 @@
-## ExPie - 饼图组件
-
-基于 ECharts 封装的饼图组件。
-
-## 基本用法
-
-::: demo 饼图基础示例
-```vue
-<template>
-  <ExChart type="pie" :chartData="chartData" style="height: 400px;" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { name: '苹果', value: 35 },
-        { name: '香蕉', value: 25 },
-        { name: '橙子', value: 20 },
-        { name: '葡萄', value: 15 },
-        { name: '其他', value: 5 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 玫瑰图
-
-::: demo 玫瑰图示例
-```vue
-<template>
-  <ExChart type="pie" :chartData="chartData" roseType="area" style="height: 400px;" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { name: '手机端', value: 4520 },
-        { name: 'PC端', value: 3280 },
-        { name: '平板端', value: 1250 },
-        { name: '小程序', value: 2150 },
-        { name: 'H5页面', value: 1800 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `chartData` | Array | [] | 图表数据 |
-| `theme` | String | '' | 主题名称 |
-| `size` | String | 'medium' | 尺寸 |
-| `colors` | Array | [] | 自定义颜色数组 |
-| `unit` | String | '' | 数值单位 |
-| `showLegend` | Boolean | true | 是否显示图例 |
-| `showLabel` | Boolean | true | 是否显示标签 |
-| `chartMode` | String | 'dark' | 图表模式 |
-| `roseType` | String | '' | 玫瑰图类型 |
-| `totalLabel` | String | '总数' | 总数标签文本 |

package/docs/components/extend/ex-select-tree.md

@@ -1,210 +0,0 @@
-## ExSelectTree 树形下拉选择
-
-将 ElementUI 的 `el-tree` 与 `el-select` 结合，支持单选/多选、搜索过滤、树形层级展开等功能。
-
-## 基础用法
-
-最基础的单选用法：
-
-::: demo 树形选择基础示例
-```vue
-<template>
-  <ex-select-tree
-    v-model="value"
-    :data="treeData"
-    placeholder="请选择部门"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-      treeData: [
-        {
-          value: 1, label: '研发部',
-          children: [
-            { value: 11, label: '前端组' },
-            { value: 12, label: '后端组' }
-          ]
-        },
-        { value: 2, label: '市场部' },
-        { value: 3, label: '运营部' }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 多选模式
-
-设置 `multiple` 属性开启多选，选中项以英文逗号分隔显示：
-
-::: demo 树形选择多选示例
-```vue
-<template>
-  <ex-select-tree
-    v-model="value"
-    :data="treeData"
-    multiple
-    placeholder="请选择部门"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      value: [],
-      treeData: [
-        { value: 1, label: '研发部', children: [
-          { value: 11, label: '前端组' },
-          { value: 12, label: '后端组' }
-        ]},
-        { value: 2, label: '市场部' },
-        { value: 3, label: '运营部' }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 自定义节点字段
-
-通过 `props` 属性可自定义节点字段映射：
-
-::: demo 树形选择自定义字段
-```vue
-<template>
-  <ex-select-tree
-    v-model="value"
-    :data="treeData"
-    :props="{ value: 'id', label: 'name', children: 'sub' }"
-    placeholder="请选择"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      value: '',
-      treeData: [
-        { id: 1, name: '选项一', sub: [
-          { id: 11, name: '子选项一' },
-          { id: 12, name: '子选项二' }
-        ]},
-        { id: 2, name: '选项二' }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 仅叶子节点可选
-
-设置 `checkLeafOnly` 使多选模式下仅叶子节点会被纳入结果：
-
-::: demo 仅叶子可选
-```vue
-<template>
-  <ex-select-tree
-    v-model="value"
-    :data="treeData"
-    multiple
-    check-leaf-only
-    placeholder="请选择"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      value: [],
-      treeData: [
-        { value: 1, label: '总部', children: [
-          { value: 11, label: '上海' },
-          { value: 12, label: '北京' }
-        ]},
-        { value: 2, label: '分部', children: [
-          { value: 21, label: '广州' }
-        ]}
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 可清空与禁用
-
-支持 `clearable` 与 `disabled` 属性：
-
-::: demo 可清空与禁用示例
-```vue
-<template>
-  <div>
-    <ex-select-tree v-model="v1" :data="data" clearable placeholder="可清空" />
-    <ex-select-tree v-model="v2" :data="data" disabled placeholder="已禁用" style="margin-left: 20px" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      v1: '',
-      v2: '',
-      data: [
-        { value: 1, label: '选项一' },
-        { value: 2, label: '选项二' }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## Attributes
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-|------|------|------|--------|--------|
-| data | 树形数据 | array | — | [] |
-| props | 节点字段配置 | object | — | {value:'value', label:'label', children:'children', disabled:'disabled', isLeaf:'isLeaf'} |
-| multiple | 是否多选 | boolean | — | false |
-| clearable | 是否可清空 | boolean | — | false |
-| disabled | 是否禁用 | boolean | — | false |
-| filterable | 是否可搜索过滤 | boolean | — | true |
-| check-strictly | 是否父子节点不联动 | boolean | — | false |
-| check-leaf-only | 多选时是否仅返回叶子节点 | boolean | — | false |
-| include-half-checked | 多选时是否包含半选节点 | boolean | — | false |
-| default-expand-all | 是否默认展开所有节点 | boolean | — | false |
-| lazy | 是否懒加载子节点 | boolean | — | false |
-| load | 懒加载加载函数 | function | — | — |
-| placeholder | 占位符 | string | — | 请选择 |
-| size | 输入框尺寸 | string | medium/small/mini | — |
-| placement | 弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-start |
-| popover-width | 弹出层宽度（px） | number | — | — |
-| node-key | 节点唯一标识 | string | — | value |
-| highlight-current | 是否高亮当前选中节点 | boolean | — | true |
-| indent | 相邻级节点间的水平缩进（px） | number | — | — |
-| accordion | 是否每次只打开一个同级树节点 | boolean | — | false |
-
-## Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| change | 值改变时触发 | (value, node) |
-| clear | 清空时触发 | — |
-| focus | 获得焦点 | — |
-| blur | 失去焦点 | — |