dld-vue-ui 0.0.7 → 0.1.0

package/README.md

@@ -1,20 +1,254 @@
-# Vue 3 + TypeScript + Vite
+# 组件说明
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## Splitpanes分割面板
 
-## Recommended IDE Setup
+### 属性
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+|属性名|说明|类型|默认值|
+|-----|----|-----|----|
+|`horizontal`|布局方向|`bool`|`false`|
+|`styles`|样式|`ISplitPaneStyle`|`{ width: '100%', height: '100%' }`|
 
-## Type Support For `.vue` Imports in TS
+### 定义的类型
 
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+```ts
+interface ISplitPaneStyle {
+  [name: string]: string | number,
+  width: string,
+  height: string
+}
+```
 
-1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
-2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+## Pane子面板
 
-You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
+### 属性
 
-## List方法
-仿.netcore的Linq
-内置Where、First、Add、Remove、Any、Exist等方法
+|属性名|说明|类型|默认值|
+|-----|----|-----|----|
+|`styles`|样式|`IPaneStyle`||
+
+### 定义的类型
+
+```ts
+interface IPaneStyle {
+  [name: string]: string | number
+}
+```
+
+## Layout布局
+
+### 属性
+
+|属性名|说明|类型|默认值|
+|-----|----|-----|----|
+|`asideWidth`|侧边栏的宽度|`number`|`220`|
+|`headerMaxHeight`|头部的最大高度|`number`|`60`|
+|`horizontal`|布局方向|`boolean`|`false`|
+
+### 插槽
+
+|属性名|说明|
+|-----|----|
+|`aside`|侧边栏|
+|`header`|头部|
+
+## UpLoadFile文件上传
+
+### 属性
+
+|属性名|说明|类型|默认值|
+|-----|----|-----|----|
+|`size`|组件大小|`small | default | large`|`default`|
+|`name`|上传按钮名称|`string`|上传文件|
+|`icon`|自`@element-plus/icons-vue`导入的图标|`Component`|`Upload`|
+|`type`|选择文件和上传文件的按钮类型|`ButtonType`|`success`|
+
+### 方法
+
+|方法名|说明|类型|默认值|
+|-----|----|-----|----|
+|`upload`|上传文件方法，返回选中的File|`Function`|`(file: File): void`|
+
+### 暴露变量
+
+|变量名|说明|类型|默认值|
+|-----|----|-----|----|
+|`Clear`|清空选中文件|`Function`||
+
+## TableForm表单表格
+
+### 属性
+
+|属性名|说明|类型|默认值|
+|-----|----|-----|----|
+|`maxHeight`|表格的最大高度|`string`|`550`|
+|`size`|表格的大小|`'large' | 'default' | 'small'`|`default`|
+|`tableData`|表格的数据|`Array<ITableData>`|`-`|
+|`tableColumn`|表格的列配置|`Array<ITableColumn>`|`-`|
+|`stripe`|是否为斑马纹|`boolean`|`true`|
+|`border`|是否带有纵向边框|`boolean`|`false`|
+|`highLight`|是否高亮当前行|`boolean`|`false`|
+|`type`|是否有索引、展开、多选框|`'selection' | 'index'  | 'expand'`|`-`|
+|`typeLabel`|索引、展开时的列名，`type == 'index'`和`type == 'expand'`时有效|`string`|`序号`|
+|`typeWidth`|索引、展开、多选框的宽度|`number`|`60`|
+|`typeIsFixed`|索引、展开、多选框是否固定在左侧|`typeIsFixed`|`false`|
+|`operate`|是否有操作列|`boolean`|`false`|
+|`operateLabel`|操作列列名|`string`|`''`|
+|`operateWidth`|操作列的宽度|`number`|`220`|
+|`operateIsFixed`|操作列是否固定在右侧|`boolean`|`false`|
+|`search`|是否显示搜索按钮|`boolean`|`false`|
+|`clear`|是否显示清空按钮|`boolean`|`false`|
+|`edit`|是否显示行内修改按钮|`boolean`|`false`|
+|`delete`|是否显示行内删除按钮|`boolean`|`false`|
+|`deleteTitle`|删除按钮的提示信息|`string`|`是否要删除当前行？`|
+
+### 表格的列配置属性(ITableColumn)
+
+|属性名|说明|类型|默认值|
+|-----|----|-----|----|
+|`prop`|列绑定的字段，必填|`string`|`-`|
+|`label`|列的名称，必填|`string`|`-`|
+|`width`|列宽|`number`|`180`|
+|`fixed`|是否固定|`'left' | 'right'`|`false`|
+|`align`|对齐方式|`'left' | 'center' | 'right'`|`left`|
+|`search`|是否支持搜索|`boolean`|`false`|
+|`disabled`|是否禁用搜索框，`search=true`时有效|`boolean`|`false`|
+|`size`|搜索框大小，`search=true`时有效|`'large' | 'default' | 'small'`|`default`|
+|`searchWidth`|搜索框的宽度，`search=true`时有效|`number`|`92%`|
+|`placeholder`|自定义搜索提示，多项用&&分割，`search=true`时有效|`string`|`请输入{label}或请选择{label}`|
+|`type`|搜索框类型，text=文本框、select=单选/多选框、number=数字框、date=日期框、time=时间框、datetime=日期时间框、daterange=日期范围选择框、timerange=时间范围选择框，datetimerange=日期时间范围选择框、switch=开关按钮，`search=true`时有效|`'text' | 'select' | 'number' | 'date' | 'datetime' | 'time' | 'daterange' | 'timerange' | 'datetimerange' | 'switch'`|`text`|
+|`options`|搜索框的下拉列表，`search=true&&type='select'`时有效|`IOptions`|`-`|
+|`multiple`|是否支持多选，`search=true&&type='select'`时有效|`boolean`|`false`|
+|`omit`|多选时省略，`search=true&&type='select'`时有效|`boolean`|`false`|
+|`closeText`|开关关闭文字，`search=true&&type='switch'`时有效|`string`|`-`|
+|`openText`|开关打开文字，`search=true&&type='switch'`时有效|`string`|`-`|
+|`max`|数字框的最大值，`search=true&&type='number'`时有效|`number`|`Infinity`|
+|`min`|数字框的最小值，`search=true&&type='number'`时有效|`number`|`-Infinity`|
+|`step`|数字框的跳动步数，`search=true&&type='number'`时有效|`number`|`1`|
+
+### 方法
+
+|方法名|说明|参数|
+|-----|----|-----|
+|`row-click`|行点击事件|`(e: 'row-click', item: ITableData): void;`|
+|`row-dblclick`|行双击事件|`(e: 'row-click', item: ITableData): void;`|
+|`selection-change`|选中行改变事件|`(e: 'row-click', item: ITableData[]): void;`|
+|`search`|搜索按钮点击事件|`(e: 'row-click', item: ITableData): void;`|
+|`clear`|清空按钮点击事件|`(e: 'row-click'): void;`|
+|`delete`|删除按钮点击事件|`(e: 'row-click', item: ITableData): void;`|
+|`edit`|修改按钮点击事件|`(e: 'row-click', item: ITableData): void;`|
+
+### 插槽
+
+|插槽名|说明|
+|-----|----|
+|`header`|表格上方的内容|
+|`expand`|展开的内容，`row`参数携带行数据|
+|`operate`|操作列头的自定义内容|
+|`row-operate`|操作列的自定义内容，`row`参数携带行数据|
+
+### 可导入的类型
+
+```ts
+export interface ITableColumn {
+  /**
+   * 列绑定的字段
+   */
+  prop: string,
+  /**
+   * 列的名称
+   */
+  label: string,
+  /**
+   * 列宽
+   */
+  width?: number,
+  /**
+   * 是否固定
+   */
+  fixed?: 'left' | 'right',
+  /**
+   * 对齐方式
+   */
+  align?: 'left' | 'center' | 'right',
+  /**
+   * 是否支持搜索
+   */
+  search?: boolean,
+  /**
+   * 禁用搜索框
+   */
+  disabled?: boolean,
+  /**
+   * 搜索框大小
+   */
+  size?: 'large' | 'default' | 'small',
+  /**
+   * 搜索框的宽度
+   */
+  searchWidth?: number,
+  /**
+   * 自定义搜索提示，多项用&&分割
+   */
+  placeholder?: string,
+  /**
+   * 搜索框类型
+   */
+  type?: 'text' | 'select' | 'number' | 'date' | 'datetime' | 'time' | 'daterange' | 'timerange' | 'datetimerange' | 'switch',
+  /**
+   * 搜索框的下拉列表，type='select'有效
+   */
+  options?: IOptions[],
+  /**
+   * 是否支持多选
+   */
+  multiple?: boolean,
+  /**
+   * 多选时省略
+   */
+  omit?: boolean,
+  /**
+   * 开关关闭文字
+   */
+  closeText?: string,
+  /**
+   * 开关打开文字
+   */
+  openText?: string,
+  /**
+   * 数字框的最大值
+   */
+  max?: number,
+  /**
+   * 数字框的最小值
+   */
+  min?: number,
+  /**
+   * 数字框步长
+   */
+  step?: number
+}
+/**
+ * 表单格式
+ */
+export interface ITableData {
+  [name: string]: unknown
+}
+/**
+ * 下拉框选项
+ */
+export interface IOptions {
+  /**
+   * 显示文本
+   */
+  label?: string,
+  /**
+   * 选择的值
+   */
+  value: string | number,
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+}
+```