view-ui-plus-derive 0.1.0 → 0.1.3

package/README.md

@@ -1,6 +1,7 @@
 # view-ui-plus-derive
 
-基于vue 3.5+与view-ui-plus的组件&优化扩展等
+基于vue 3.5+与view-ui-plus的组件&优化扩展等，支持自定义组件名前缀  
+**示例均使用无前缀的默认组件名**
 
 ## 安装
 
@@ -44,6 +45,43 @@ import App from './App.vue'
 createApp(App).use(ViewUIPlus).use(iviewDerive).mount('#app')
 ```
 
+#### 自定义组件名前缀
+
+为免容易变得冗长，组件名及其样式class默认无前缀，若需要自定义，可传入prefix参数  
+该参数通过全局provide提供以便访问，对应的key为 `Symbol('vupdPrefix')` ，不会与其它全局provide冲突
+
+```js
+import { createApp } from 'vue'
+import ViewUIPlus from 'view-ui-plus'
+import 'view-ui-plus/dist/styles/viewuiplus.css'
+import iviewDerive from 'view-ui-plus-derive' // 包含所有组件与指令
+
+import App from './App.vue'
+
+createApp(App)
+  .use(ViewUIPlus)
+  // 所有组件名前缀将被设置为 My，使用时如 <MyCombi>，<MyBaseSwitch> ...
+  .use(iviewDerive, { prefix: 'My' })
+  .mount('#app')
+```
+
+**此时需要再修改组件共用的less变量以适配前缀**，无需前缀时建议直接引入`view-ui-plus-derive/style`中的css  
+`App.vue`
+
+```less
+<style lang="less">
+// 引入组件less则必须同时引入common.less，导入后并覆盖变量@vupd-prefix为需要的前缀名称
+@import 'view-ui-plus-derive/less/common.less';
+@vupd-prefix: 'my';
+
+// 导入所有组件样式
+@import 'view-ui-plus-derive/less/index.less';
+
+// 或者单独导入需要的组件样式
+@import 'view-ui-plus-derive/less/Combi.less';
+</style>
+```
+
 ### 按需引入
 
 ```js
@@ -1512,8 +1550,11 @@ action()
     v-model:loading="pageTable.loading"
     :columns="pageTable.columns"
     :method="getList"
-    data-key="ress"
+    page-key="current"
+    size-key="size"
+    data-key="list"
     total-key="total"
+    use-page-num
     :max-height="400"
     show-header
     border
@@ -1630,12 +1671,6 @@ pageMap: {
 // 处理接口返回列表数据的函数
 process: Function
 
-// 自动设置Table的maxHeight
-autoMaxHeight: {
-  type: Boolean,
-  default: true
-}
-
 // 是否本地分页
 isLocal: Boolean
 
@@ -1657,9 +1692,6 @@ bottomDis: {
   default: 80
 }
 
-// Table的maxHeight
-maxHeight: [Number, String]
-
 border: Boolean
 
 // v-model:selection获取勾选项
@@ -1697,6 +1729,27 @@ fullscreen: Boolean
 
 // 传至ToggleColumn组件的storeAt
 storeAt: String
+
+// 自动设置Table的maxHeight
+autoMaxHeight: {
+  type: Boolean,
+  default: true
+}
+
+// Table的maxHeight
+maxHeight: [Number, String]
+
+// Table的height
+height: [Number, String]
+
+// 自动设置Table的height
+autoHeight: Boolean
+
+// 最大化时自动计算哪种高度
+maximizeHeightType: {
+  type: String as PropType<'height' | 'maxHeight'>,
+  default: 'maxHeight'
+}
 ```
 
 **emits**  
@@ -1709,6 +1762,11 @@ storeAt: String
  */
 emit('load', res)
 
+/**
+ * 点击刷新图标触发，仅本地分页时生效
+ */
+emit('reload')
+
 /**
  * 勾选项变更后触发
  * @param selections 勾选项
@@ -1733,6 +1791,12 @@ emit('select', row, checked)
  * @param checked 切换的列
  */
 emit('change-col', checked)
+
+/**
+ * 切换最大化后触发
+ * @param maximized 是否最大化
+ */
+emit('maximize-change', maximized)
 ```
 
 **slots**

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import { OnCleanup } from '@vue/reactivity';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
+import { ShallowReactive } from 'vue';
 import { ShallowUnwrapRef } from 'vue';
 import { Slot } from 'vue';
 import { VNodeProps } from 'vue';
@@ -1432,6 +1433,7 @@ declare const _default: {
 export default _default;
 
 export declare function install(app: App, opt?: {
+    prefix?: string;
     i18n?: any;
     msg?: Obj;
     msgPrefix?: string;
@@ -1877,13 +1879,6 @@ border: BooleanConstructor;
 */
 process: FunctionConstructor;
 /**
-* 自动设置Table的maxHeight
-*/
-autoMaxHeight: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
 * 是否本地分页
 */
 isLocal: BooleanConstructor;
@@ -1900,17 +1895,13 @@ default: () => number[];
 autoRemain: BooleanConstructor;
 /**
 * 计算Table的maxHeight时，Table距离视口底部的距离
-* @default 80
+* @default 45
 */
 bottomDis: {
 type: (NumberConstructor | StringConstructor)[];
 default: number;
 };
 /**
-* Table的maxHeight
-*/
-maxHeight: (NumberConstructor | StringConstructor)[];
-/**
 * 勾选项
 */
 selection: ArrayConstructor;
@@ -1954,14 +1945,45 @@ fullscreen: BooleanConstructor;
 * 传至ToggleColumn组件的storeAt
 */
 storeAt: StringConstructor;
+/**
+* 隐藏分页
+*/
+hidePage: BooleanConstructor;
+/**
+* 自动设置Table的maxHeight
+*/
+autoMaxHeight: {
+type: BooleanConstructor;
+default: boolean;
+};
+/**
+* Table的maxHeight
+*/
+maxHeight: (NumberConstructor | StringConstructor)[];
+/**
+* Table的height
+*/
+height: (NumberConstructor | StringConstructor)[];
+/**
+* 自动设置Table的height
+*/
+autoHeight: BooleanConstructor;
+/**
+* 最大化时自动计算哪种高度
+*/
+maximizeHeightType: {
+type: PropType<"height" | "maxHeight">;
+default: string;
+};
 loading: {
 type: PropType<boolean>;
 };
 }>, {
 search: (stay?: boolean) => void;
-setMaxHeight: () => void;
+setMaxHeight: (isHeight?: boolean) => void;
 table: {
 data: Obj[];
+height: string | number | undefined;
 maxHeight: string | number | undefined;
 selectType: {
 align: string;
@@ -1970,6 +1992,11 @@ renderHeader: (h: any) => false | JSX.Element;
 render: (h: any, { row, index }: Obj) => any;
 };
 };
+sizer: ShallowReactive<    {
+curr: number;
+size: number;
+total: number;
+}>;
 getPage: () => {
 curr: number;
 total: number;
@@ -1984,6 +2011,7 @@ load: (res: any) => any;
 "selection-change": (val: Obj[]) => any;
 reload: () => any;
 "change-col": (val: Obj | Obj[]) => any;
+"maximize-change": (val: boolean) => any;
 }, string, PublicProps, Readonly<ExtractPropTypes<    {
 columns: {
 type: PropType<Obj[]>;
@@ -2051,13 +2079,6 @@ border: BooleanConstructor;
 */
 process: FunctionConstructor;
 /**
-* 自动设置Table的maxHeight
-*/
-autoMaxHeight: {
-type: BooleanConstructor;
-default: boolean;
-};
-/**
 * 是否本地分页
 */
 isLocal: BooleanConstructor;
@@ -2074,17 +2095,13 @@ default: () => number[];
 autoRemain: BooleanConstructor;
 /**
 * 计算Table的maxHeight时，Table距离视口底部的距离
-* @default 80
+* @default 45
 */
 bottomDis: {
 type: (NumberConstructor | StringConstructor)[];
 default: number;
 };
 /**
-* Table的maxHeight
-*/
-maxHeight: (NumberConstructor | StringConstructor)[];
-/**
 * 勾选项
 */
 selection: ArrayConstructor;
@@ -2128,6 +2145,36 @@ fullscreen: BooleanConstructor;
 * 传至ToggleColumn组件的storeAt
 */
 storeAt: StringConstructor;
+/**
+* 隐藏分页
+*/
+hidePage: BooleanConstructor;
+/**
+* 自动设置Table的maxHeight
+*/
+autoMaxHeight: {
+type: BooleanConstructor;
+default: boolean;
+};
+/**
+* Table的maxHeight
+*/
+maxHeight: (NumberConstructor | StringConstructor)[];
+/**
+* Table的height
+*/
+height: (NumberConstructor | StringConstructor)[];
+/**
+* 自动设置Table的height
+*/
+autoHeight: BooleanConstructor;
+/**
+* 最大化时自动计算哪种高度
+*/
+maximizeHeightType: {
+type: PropType<"height" | "maxHeight">;
+default: string;
+};
 loading: {
 type: PropType<boolean>;
 };
@@ -2141,6 +2188,7 @@ onLoad?: ((res: any) => any) | undefined;
 "onSelection-change"?: ((val: Obj[]) => any) | undefined;
 onReload?: (() => any) | undefined;
 "onChange-col"?: ((val: Obj | Obj[]) => any) | undefined;
+"onMaximize-change"?: ((val: boolean) => any) | undefined;
 }>, {
 transfer: boolean;
 modelValue: Obj[];
@@ -2153,13 +2201,17 @@ clickToCheck: boolean;
 pure: boolean;
 showHeader: boolean;
 fullscreen: boolean;
+hidePage: boolean;
+autoHeight: boolean;
 pageMap: Record<string, any>;
-autoMaxHeight: boolean;
 pageSizeOpts: number[];
 bottomDis: string | number;
+autoMaxHeight: boolean;
+maximizeHeightType: "height" | "maxHeight";
 }, {}, {}, {}, string, ComponentProvideOptions, true, {
 elRef: HTMLDivElement;
 tableRef: unknown;
+pageRef: unknown;
 }, HTMLDivElement>, Partial<Record<any, (_: any) => any>> & {
     title?(_: {}): any;
     headerAction?(_: {}): any;