@wlydfe/pro-ui 0.2.0

package/es/components/page/src/index.vue.d.ts

@@ -0,0 +1,291 @@
+import type { PlusColumn, PageInfo, RecordType, Mutable, FieldValues } from '@wlydfe/pro-ui-types';
+import type { PlusSearchProps } from '@wlydfe/pro-ui-components/search';
+import type { PlusTableProps } from '@wlydfe/pro-ui-components/table';
+import type { Ref, Component } from 'vue';
+import type { CardProps } from 'element-plus';
+export interface PlusPageProps {
+    /**
+     * 配置
+     */
+    columns: PlusColumn[];
+    /**
+     *
+     * params参数中一定会有 pageSize 和  page ，这两个参数是 pro-ui 的规范
+     * @param params
+     */
+    request: (params: PageInfo & {
+        [index: string]: any;
+    }) => Promise<{
+        /** 数据 */
+        data: any;
+        /** 不传会使用 data 的长度，如果是分页一定要传*/
+        total: number;
+    }>;
+    /**
+     * PlusSearchProps
+     */
+    search?: false | Partial<PlusSearchProps>;
+    /**
+     * PlusTableProps
+     */
+    table?: Partial<PlusTableProps>;
+    /**
+     * request的 params 其他参数，默认会带pageSize，page和 PlusSearch组件中的值
+     */
+    params?: RecordType;
+    /**
+     * 对通过 request 获取的数据进行处理
+     * @param data
+     */
+    postData?: <T = any>(data: T[]) => T[];
+    /**
+     * 搜索之前进行一些修改
+     * @param params
+     */
+    beforeSearchSubmit?: <T = any>(params: T) => T;
+    /**
+     *  表格和搜索是否需要el-card 包裹 默认true
+     */
+    isCard?: boolean;
+    /**
+     * 搜索外层的el-card的props ，当isCard为true时生效
+     */
+    searchCardProps?: Partial<Mutable<CardProps>>;
+    /**
+     *   表格外层的el-card的props ，当isCard为true时生效
+     */
+    tableCardProps?: Partial<Mutable<CardProps>>;
+    defaultPageInfo?: PageInfo;
+    defaultPageSizeList?: number[];
+    pagination?: RecordType;
+    /**
+     * 组件渲染完成后是否立即调用getList
+     */
+    immediate?: boolean;
+}
+export interface PlusPageEmits {
+    /**
+     * 数据加载失败时触发
+     */
+    (e: 'requestError', error: any): void;
+    (e: 'search', data: FieldValues): void;
+    (e: 'reset', data: FieldValues): void;
+    (e: 'paginationChange', pageInfo: PageInfo): void;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    columns: {
+        type: ArrayConstructor;
+        required: true;
+        default: () => never[];
+    };
+    request: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    search: {
+        type: (ObjectConstructor | BooleanConstructor)[];
+        required: false;
+        default: () => {};
+    };
+    table: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    params: {
+        type: null;
+        required: false;
+        default: () => {};
+    };
+    postData: {
+        type: FunctionConstructor;
+        required: false;
+        default: undefined;
+    };
+    beforeSearchSubmit: {
+        type: FunctionConstructor;
+        required: false;
+        default: undefined;
+    };
+    isCard: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    searchCardProps: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    tableCardProps: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    defaultPageInfo: {
+        type: null;
+        required: false;
+        default: () => {
+            page: number;
+            pageSize: number;
+        };
+    };
+    defaultPageSizeList: {
+        type: ArrayConstructor;
+        required: false;
+        default: () => number[];
+    };
+    pagination: {
+        type: null;
+        required: false;
+        default: () => {};
+    };
+    immediate: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>, {
+    props: any;
+    emit: (event: "reset" | "search" | "requestError" | "paginationChange", ...args: any[]) => void;
+    PlusSearch: import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, import("vue").ComponentProvideOptions> | {
+        new (...args: any[]): any;
+        __isFragment?: undefined;
+        __isTeleport?: undefined;
+        __isSuspense?: undefined;
+    };
+    PlusTable: Component;
+    computedDefaultPageInfo: import("vue").ComputedRef<any>;
+    computedDefaultPageSizeList: import("vue").ComputedRef<any>;
+    tableData: Ref<any, any>;
+    pageInfo: Ref<{
+        page: number;
+        pageSize: number;
+    }, PageInfo | {
+        page: number;
+        pageSize: number;
+    }>;
+    total: Ref<number, number>;
+    loadingStatus: Ref<boolean, boolean>;
+    plusSearchInstance: Ref<any, any>;
+    plusTableInstance: Ref<any, any>;
+    values: Ref<any, any>;
+    slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+    cellSlots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+    headerSlots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+    fieldSlots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+    renderWrapper: () => {
+        search: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>;
+        table: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>;
+    };
+    getList: () => Promise<void>;
+    handlePaginationChange: (_pageInfo: PageInfo) => void;
+    handleSearch: (values: any) => void;
+    handleRest: (values: any) => void;
+    handleRefresh: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("reset" | "search" | "requestError" | "paginationChange")[], "reset" | "search" | "requestError" | "paginationChange", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: ArrayConstructor;
+        required: true;
+        default: () => never[];
+    };
+    request: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    search: {
+        type: (ObjectConstructor | BooleanConstructor)[];
+        required: false;
+        default: () => {};
+    };
+    table: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    params: {
+        type: null;
+        required: false;
+        default: () => {};
+    };
+    postData: {
+        type: FunctionConstructor;
+        required: false;
+        default: undefined;
+    };
+    beforeSearchSubmit: {
+        type: FunctionConstructor;
+        required: false;
+        default: undefined;
+    };
+    isCard: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    searchCardProps: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    tableCardProps: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    defaultPageInfo: {
+        type: null;
+        required: false;
+        default: () => {
+            page: number;
+            pageSize: number;
+        };
+    };
+    defaultPageSizeList: {
+        type: ArrayConstructor;
+        required: false;
+        default: () => number[];
+    };
+    pagination: {
+        type: null;
+        required: false;
+        default: () => {};
+    };
+    immediate: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onReset?: ((...args: any[]) => any) | undefined;
+    onSearch?: ((...args: any[]) => any) | undefined;
+    onRequestError?: ((...args: any[]) => any) | undefined;
+    onPaginationChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    immediate: boolean;
+    search: boolean | Record<string, any>;
+    columns: unknown[];
+    params: any;
+    table: Record<string, any>;
+    postData: Function;
+    beforeSearchSubmit: Function;
+    isCard: boolean;
+    searchCardProps: Record<string, any>;
+    tableCardProps: Record<string, any>;
+    defaultPageInfo: any;
+    defaultPageSizeList: unknown[];
+    pagination: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/page/src/index.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './index.vue2.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const Page = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "index.vue"]]);
+
+export { Page as default };

package/es/components/page/src/index.vue2.mjs

@@ -0,0 +1,275 @@
+import { defineComponent, computed, ref, useSlots, h, openBlock, createElementBlock, createBlock, resolveDynamicComponent, withCtx, createVNode, unref, mergeProps, createSlots, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, renderList } from 'vue';
+import { PlusSearch } from '../../search/index.mjs';
+import { PlusTable } from '../../table/index.mjs';
+import { ElCard } from 'element-plus';
+import '../../../hooks/index.mjs';
+import { filterSlots, getTableCellSlotName, getTableHeaderSlotName, getFieldSlotName } from '../../utils/index.mjs';
+import '../../../constants/index.mjs';
+import { DefaultPageInfo, DefaultPageSizeList } from '../../../constants/page.mjs';
+import { useTable } from '../../../hooks/useTable.mjs';
+
+const _hoisted_1 = { class: "plus-page" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PlusPage"
+  },
+  __name: "index",
+  props: {
+    columns: { default: () => [] },
+    request: {},
+    search: { type: [Boolean, Object], default: () => ({}) },
+    table: { default: () => ({}) },
+    params: { default: () => ({}) },
+    postData: { type: Function, default: void 0 },
+    beforeSearchSubmit: { type: Function, default: void 0 },
+    isCard: { type: Boolean, default: true },
+    searchCardProps: { default: () => ({}) },
+    tableCardProps: { default: () => ({}) },
+    defaultPageInfo: { default: () => ({ ...DefaultPageInfo }) },
+    defaultPageSizeList: { default: () => DefaultPageSizeList },
+    pagination: { default: () => ({}) },
+    immediate: { type: Boolean, default: true }
+  },
+  emits: ["requestError", "search", "reset", "paginationChange"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    var _a;
+    const props = __props;
+    const emit = __emit;
+    const PlusSearch$1 = PlusSearch;
+    const PlusTable$1 = PlusTable;
+    const computedDefaultPageInfo = computed(() => props.defaultPageInfo);
+    const computedDefaultPageSizeList = computed(() => props.defaultPageSizeList);
+    const { tableData, pageInfo, total, loadingStatus } = useTable(computedDefaultPageInfo);
+    const plusSearchInstance = ref();
+    const plusTableInstance = ref();
+    const values = ref({ ...(_a = props.search) == null ? void 0 : _a.defaultValues });
+    const slots = useSlots();
+    const cellSlots = filterSlots(slots, getTableCellSlotName());
+    const headerSlots = filterSlots(slots, getTableHeaderSlotName());
+    const fieldSlots = filterSlots(slots, getFieldSlotName());
+    const renderWrapper = () => {
+      if (props.isCard) {
+        return {
+          search: h(ElCard, props.searchCardProps),
+          table: h(ElCard, props.tableCardProps)
+        };
+      }
+      return { search: h("div"), table: h("div") };
+    };
+    const getList = async () => {
+      if (!props.request) return;
+      try {
+        loadingStatus.value = true;
+        const { data, total: dataTotal } = await props.request({
+          ...values.value,
+          ...pageInfo.value,
+          ...props.params
+        });
+        const list = props.postData && props.postData(data) || data;
+        tableData.value = list || [];
+        total.value = dataTotal || list.length;
+      } catch (error) {
+        emit("requestError", error);
+      }
+      loadingStatus.value = false;
+    };
+    if (props.immediate) {
+      getList();
+    }
+    const handlePaginationChange = (_pageInfo) => {
+      pageInfo.value = _pageInfo;
+      getList();
+      emit("paginationChange", _pageInfo);
+    };
+    const handleSearch = (values2) => {
+      const data = props.beforeSearchSubmit && props.beforeSearchSubmit(values2) || values2;
+      values2.value = data;
+      getList();
+      emit("search", values2.value);
+    };
+    const handleRest = (values2) => {
+      values2.value = { ...values2 };
+      pageInfo.value.page = 1;
+      getList();
+      emit("reset", values2.value);
+    };
+    const handleRefresh = () => {
+      getList();
+    };
+    __expose({
+      plusSearchInstance,
+      plusTableInstance,
+      getList,
+      handleRest
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.search ? (openBlock(), createBlock(resolveDynamicComponent(renderWrapper().search), { key: 0 }, {
+          default: withCtx(() => [
+            createVNode(unref(PlusSearch$1), mergeProps({
+              ref_key: "plusSearchInstance",
+              ref: plusSearchInstance
+            }, _ctx.search, {
+              modelValue: values.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => values.value = $event),
+              columns: _ctx.columns,
+              "search-loading": unref(loadingStatus),
+              onSearch: handleSearch,
+              onReset: handleRest
+            }), createSlots({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              _ctx.$slots["search-footer"] ? {
+                name: "footer",
+                fn: withCtx((data) => [
+                  renderSlot(_ctx.$slots, "search-footer", normalizeProps(guardReactiveProps(data)))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["modelValue", "columns", "search-loading"])
+          ]),
+          _: 3
+          /* FORWARDED */
+        })) : createCommentVNode("v-if", true),
+        (openBlock(), createBlock(resolveDynamicComponent(renderWrapper().table), { class: "plus-page__table_wrapper" }, {
+          default: withCtx(() => [
+            createVNode(unref(PlusTable$1), mergeProps({
+              ref_key: "plusTableInstance",
+              ref: plusTableInstance,
+              "title-bar": { refresh: true }
+            }, _ctx.table, {
+              "table-data": unref(tableData),
+              "loading-status": unref(loadingStatus),
+              columns: _ctx.columns,
+              pagination: {
+                ..._ctx.pagination,
+                total: unref(total),
+                modelValue: unref(pageInfo),
+                pageSizeList: computedDefaultPageSizeList.value
+              },
+              onPaginationChange: handlePaginationChange,
+              onRefresh: handleRefresh
+            }), createSlots({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              renderList(unref(headerSlots), (_, key) => {
+                return {
+                  name: key,
+                  fn: withCtx((data) => [
+                    renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
+                  ])
+                };
+              }),
+              renderList(unref(cellSlots), (_, key) => {
+                return {
+                  name: key,
+                  fn: withCtx((data) => [
+                    renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
+                  ])
+                };
+              }),
+              renderList(unref(fieldSlots), (_, key) => {
+                return {
+                  name: key,
+                  fn: withCtx((data) => [
+                    renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
+                  ])
+                };
+              }),
+              _ctx.$slots["table-title"] ? {
+                name: "title",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "table-title")
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots["table-toolbar"] ? {
+                name: "toolbar",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "table-toolbar")
+                ]),
+                key: "1"
+              } : void 0,
+              _ctx.$slots["table-expand"] ? {
+                name: "expand",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "table-expand")
+                ]),
+                key: "2"
+              } : void 0,
+              _ctx.$slots["table-append"] ? {
+                name: "append",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "table-append")
+                ]),
+                key: "3"
+              } : void 0,
+              _ctx.$slots["table-empty"] ? {
+                name: "empty",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "table-empty")
+                ]),
+                key: "4"
+              } : void 0,
+              _ctx.$slots["pagination-left"] ? {
+                name: "pagination-left",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "pagination-left")
+                ]),
+                key: "5"
+              } : void 0,
+              _ctx.$slots["pagination-right"] ? {
+                name: "pagination-right",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "pagination-right")
+                ]),
+                key: "6"
+              } : void 0,
+              _ctx.$slots["drag-sort-icon"] ? {
+                name: "drag-sort-icon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "drag-sort-icon")
+                ]),
+                key: "7"
+              } : void 0,
+              _ctx.$slots["column-settings-icon"] ? {
+                name: "column-settings-icon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "column-settings-icon")
+                ]),
+                key: "8"
+              } : void 0,
+              _ctx.$slots["density-icon"] ? {
+                name: "density-icon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "density-icon")
+                ]),
+                key: "9"
+              } : void 0,
+              _ctx.$slots["tooltip-icon"] ? {
+                name: "tooltip-icon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "tooltip-icon")
+                ]),
+                key: "10"
+              } : void 0,
+              _ctx.$slots["action-bar-more-icon"] ? {
+                name: "action-bar-more-icon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "action-bar-more-icon")
+                ]),
+                key: "11"
+              } : void 0
+            ]), 1040, ["table-data", "loading-status", "columns", "pagination"])
+          ]),
+          _: 3
+          /* FORWARDED */
+        }))
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/page/style/css.d.ts

@@ -0,0 +1,4 @@
+import 'element-plus/es/components/card/style/css';
+import '@wlydfe/pro-ui-components/search/style/css';
+import '@wlydfe/pro-ui-components/table/style/css';
+import '@wlydfe/pro-ui-theme-chalk/plus-page.css';

package/es/components/page/style/css.mjs

@@ -0,0 +1,4 @@
+import 'element-plus/es/components/card/style/css.mjs';
+import '../../search/style/css.mjs';
+import '../../table/style/css.mjs';
+import '@wlydfe/pro-ui-theme-chalk/plus-page.css';

package/es/components/page/style/index.d.ts

@@ -0,0 +1,4 @@
+import 'element-plus/es/components/card/style/index';
+import '@wlydfe/pro-ui-components/search/style/index';
+import '@wlydfe/pro-ui-components/table/style/index';
+import '@wlydfe/pro-ui-theme-chalk/src/page.scss';

package/es/components/page/style/index.mjs

@@ -0,0 +1,4 @@
+import 'element-plus/es/components/card/style/index.mjs';
+import '../../search/style/index.mjs';
+import '../../table/style/index.mjs';
+import '../../../theme-chalk/src/page.scss.mjs';