es-plus-ui 1.0.0

package/dist/src/types/index.d.ts

@@ -0,0 +1,147 @@
+import { VNode, RenderFunction } from 'vue';
+import { FormProps, ButtonProps } from 'element-plus';
+
+export interface FormItemOption {
+    prop: string;
+    label: string;
+    formtype?: 'Input' | 'Select' | 'datePicker' | 'timePicker' | 'Slider' | 'ColorPicker' | 'Transfer' | 'Cascader' | 'Radio' | 'Checkbox' | 'Switch' | 'Rate' | 'Upload';
+    span?: number;
+    attrs?: Record<string, unknown>;
+    on?: Record<string, unknown>;
+    dataOptions?: Array<{
+        label: string;
+        value: unknown;
+    }>;
+    isHidden?: (model: Record<string, unknown>, item: FormItemOption, formProps: FormProps) => boolean;
+    render?: (h: RenderFunction, model: Record<string, unknown>, ctx: {
+        row: FormItemOption;
+        index: number;
+    }) => VNode | string;
+    apiParams?: ApiParams;
+    /** 是否在组件初始化时自动加载接口数据，默认 true；设为 false 时需手动调用 formItmeRequestInstance 加载 */
+    isInitRun?: boolean;
+    callOptionListFormat?: (data: unknown[]) => unknown[];
+    /** 自定义 HTTP 请求方法，用于覆盖全局请求配置 */
+    httpRequest?: (params: Record<string, unknown>) => Promise<unknown>;
+    /** 响应数据回调映射，crtn 用于将 API 响应转换为 dataOptions 格式 */
+    listenToCallBack?: Record<string, (params: unknown) => unknown>;
+    components?: Record<string, unknown>;
+    width?: number | string;
+    [key: string]: unknown;
+}
+export interface ApiParams {
+    url: string;
+    method?: string;
+    headers?: Record<string, string>;
+    model?: Record<string, unknown>;
+    options?: Record<string, unknown>;
+}
+export interface BtnConfig {
+    name: string;
+    key?: string;
+    type?: ButtonProps['type'];
+    size?: ButtonProps['size'];
+    icon?: string;
+    direction?: 'left' | 'right';
+    loading?: boolean;
+    disabled?: boolean | (() => boolean);
+    click?: (model: Record<string, unknown>, formRef: unknown, httpRequestInstance?: unknown) => void;
+    [key: string]: unknown;
+}
+export interface LayoutFormProps {
+    rowLayProps?: Record<string, unknown>;
+    fromLayProps?: {
+        isBtnHidden?: boolean;
+        minFoldRows?: number;
+        btnColSpan?: number;
+        labelBtnWidth?: string | number;
+    };
+    setOptions?: boolean;
+}
+export interface TableColumn {
+    prop?: string;
+    key?: string;
+    label?: string;
+    width?: number | string;
+    minWidth?: number | string;
+    align?: string;
+    fixed?: boolean | string;
+    formatter?: (row: Record<string, unknown>) => string;
+    render?: (h: RenderFunction, ctx: {
+        row: Record<string, unknown>;
+        value: unknown;
+        index: number;
+    }) => VNode | string;
+    scopedSlots?: {
+        customRender?: string;
+    };
+    groups?: TableColumn[];
+    ellipsis?: boolean;
+    hidCol?: boolean;
+    btns?: Array<{
+        name: string;
+        type?: string;
+        clickEvent?: (row: Record<string, unknown>) => void;
+    }>;
+    [key: string]: unknown;
+}
+export interface TableOptions {
+    multiSelect?: boolean;
+    expand?: boolean;
+    snIndex?: boolean;
+    loading?: boolean;
+    border?: boolean;
+    stripe?: boolean;
+    size?: 'large' | 'default' | 'small';
+    headerCellStyle?: Record<string, unknown>;
+    highlightCurrentRow?: boolean;
+    cachePageSelection?: boolean;
+    heightType?: 'auto' | 'height';
+    tabHeight?: number | string;
+    isInitRun?: boolean;
+    actionUrl?: string;
+    apiParams?: ApiParams;
+    httpRequest?: (params: Record<string, unknown>) => Promise<unknown>;
+    listenToCallBack?: Record<string, (params: unknown) => unknown>;
+    configTableOut?: Record<string, string>;
+    entryQuery?: Record<string, unknown>;
+    rowkey?: string;
+    [key: string]: unknown;
+}
+export interface PaginationConfig {
+    pageSize?: number;
+    current?: number;
+    total?: number;
+    pageSizes?: number[];
+    size?: 'large' | 'default' | 'small';
+    isSmall?: boolean;
+}
+export interface DialogOptions {
+    title?: string;
+    width?: string | number;
+    render?: (h: RenderFunction, instance: unknown, components: Record<string, unknown>) => VNode;
+    renderHeader?: (h: RenderFunction, instance: unknown) => VNode;
+    renderFooter?: (h: RenderFunction, instance: unknown) => VNode;
+    configBtn?: BtnConfig[];
+    onSubmit?: (close: () => void) => void;
+    onClosed?: () => void;
+    isDraggable?: boolean;
+    hiddenFullBtn?: boolean;
+    isHiddenFooter?: boolean;
+    maxHeight?: string | number;
+    appendTo?: string | HTMLElement;
+    fullscreen?: boolean;
+    [key: string]: unknown;
+}
+export interface EsFormInstance {
+    validate: () => Promise<boolean>;
+    resetFields: () => void;
+    clearValidate: () => void;
+}
+export interface EsTableInstance {
+    httpRequestInstance: (model?: Record<string, unknown>) => Promise<unknown>;
+    clearSelection: () => void;
+    toggleRowSelection: (row: Record<string, unknown>, selected?: boolean) => void;
+    clearAllSelection: () => void;
+    refresh: () => void;
+}

package/dist/src/utils/shared.d.ts

@@ -0,0 +1,17 @@
+export declare const isObject: (value: unknown) => value is Record<string, unknown>;
+export declare const isArray: (value: unknown) => value is unknown[];
+export declare const isFunction: (value: unknown) => value is Function;
+export declare const isString: (value: unknown) => value is string;
+export declare const isNumber: (value: unknown) => value is number;
+export declare const isEmpty: (value: unknown) => boolean;
+export declare const firstWordUpperCase: (str: string) => string;
+export declare const kebabToCamel: (str: string) => string;
+export declare const toPascalCase: (str: string) => string;
+export declare const findValueByKey: (obj: Record<string, unknown>, key: string, depth?: number) => unknown;
+export declare const wrapPromise: <T>(promise: Promise<T>) => Promise<{
+    status: "fulfilled";
+    value: T;
+} | {
+    status: "rejected";
+    reason: unknown;
+}>;

package/dist/src/utils/shared.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.btns[data-v-8e62c688]{padding:0 0 5px;display:flex;justify-content:space-between;align-items:center}.left-text[data-v-8e62c688]{color:#7d7d7d;font-size:14px}.btn-container_block[data-v-8e62c688]{display:flex;justify-content:space-between;align-items:center;flex:1}.btn-container_block .btn-left[data-v-8e62c688]{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.btn-container_block .btn-right[data-v-8e62c688]{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap}@media (max-width: 768px){.btns[data-v-8e62c688]{flex-direction:column;align-items:flex-start}.btn-container_block[data-v-8e62c688]{flex-direction:column;align-items:flex-start;gap:10px}.btn-container_block .btn-left[data-v-8e62c688],.btn-container_block .btn-right[data-v-8e62c688]{width:100%;justify-content:flex-start}}.el-dp_tables[data-v-a655f407],.el-dp_tables[data-v-a655f407] .el-table__body-wrapper{height:auto}.table_component[data-v-a655f407]{width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;overflow:hidden}.table_containers[data-v-a655f407]{flex:1;width:100%;height:100%;display:flex;justify-content:space-between;flex-direction:column;align-items:flex-start;position:relative}.pagination_page[data-v-a655f407]{width:100%;display:flex;justify-content:center;align-items:center}.btn-slot[data-v-a655f407]{width:100%}.btn-slot .headerBar[data-v-a655f407]{box-sizing:border-box;background-color:#fff;border-radius:6px}.btn-slot .headerBar[data-v-a655f407] .el-form-item--small .el-form-item__label{box-sizing:border-box}.tableContainer[data-v-a655f407]{border-radius:0;transition:all 1.5s;flex:1;width:100%;display:flex;justify-content:space-between;flex-direction:column;align-items:flex-start}.tableContainer .table_inner_containers[data-v-a655f407]{width:100%}.tableContainer[data-v-a655f407] .el-table__empty-block{width:100%!important;margin:32px 0;font-size:14px;line-height:1.5715}.tableContainer[data-v-a655f407] .el-table__empty-block .el-table__empty-text{width:auto!important}.tableContainer[data-v-a655f407] .el-table__empty-block .ant-empty-image{height:40px;margin-bottom:8px}.tableContainer[data-v-a655f407] .el-table__empty-block .ant-empty-image .ant-empty-img-simple-ellipse{fill:#f5f5f5}.tableContainer[data-v-a655f407] .el-table__empty-block .ant-empty-image .ant-empty-img-simple-g{stroke:#d9d9d9}.tableContainer[data-v-a655f407] .el-table__empty-block .ant-empty-image .ant-empty-img-simple-path{fill:#fafafa}.tableContainer[data-v-a655f407] .el-table__empty-block .ant-empty-description{line-height:1.5715;color:#00000040}.tableContainer[data-v-a655f407] .el-tag{height:20px;padding:0 7px;line-height:20px;background:#fafafa;border:none;border-radius:4px}.tableContainer[data-v-a655f407] .el-tag.el-tag--info{color:#000000d9}.tableContainer[data-v-a655f407] .el-tag.el-tag--success{color:#52c41a;background:#f6ffed;border-color:#b7eb8f}.es-form[data-v-767c4265] .el-form-item{margin-bottom:18px}.es-form[data-v-767c4265] .el-form-item__label{font-weight:500}.es-form .buttonOperate[data-v-767c4265]{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.es-form .leftRightBtn[data-v-767c4265]{display:flex;justify-content:space-between;align-items:center;width:100%}.es-form .leftRightBtn .btn-left[data-v-767c4265],.es-form .leftRightBtn .btn-right[data-v-767c4265]{display:flex;align-items:center}.es-form .btn-formItem[data-v-767c4265]{margin-bottom:0}.es-form .formItemCols[data-v-767c4265]{width:100%}.dp-dialog_wrapper[data-v-857351a8] .dialogAuto{margin:0!important}.dp-dialog_wrapper[data-v-857351a8] .el-overlay-dialog{display:flex;justify-content:center;align-items:center}.dp-dialog_wrapper[data-v-857351a8] .el-dialog{padding:10px}.dp-dialog_wrapper[data-v-857351a8] .el-dialog .el-dialog__footer{padding-top:0}.dp-dialog_wrapper[data-v-857351a8] .el-dialog .el-dialog__body{padding:10px 0}.dp-dialog_wrapper[data-v-857351a8] .el-dialog .el-dialog__header{border-bottom:1px solid #eee;display:flex;padding:0 0 10px;align-items:center;justify-content:space-between;margin:0}.dialog-title[data-v-857351a8]{line-height:24px;font-size:14px;color:#303133;font-weight:700}.btns[data-v-857351a8]{display:flex;align-items:center}.btns i[data-v-857351a8]{margin-right:8px;font-size:14px;cursor:pointer}.btns i[data-v-857351a8]:last-child{margin-right:0}.dialog_body_layouts[data-v-857351a8]{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(135,162,189,.1490196078) rgba(200,213,225,.2784313725)}[data-v-857351a8]::-webkit-scrollbar{width:14px;height:14px}[data-v-857351a8]::-webkit-scrollbar-button{width:0;height:0;display:none}[data-v-857351a8]::-webkit-scrollbar-corner{background-color:transparent}[data-v-857351a8]::-webkit-scrollbar-thumb{min-height:12px;border:4px solid transparent;background-clip:content-box;border-radius:7px;background-color:#c8d5e1}[data-v-857351a8]::-webkit-scrollbar-thumb:hover{background-color:#a8bbcf}[data-v-857351a8]::-webkit-scrollbar-thumb:active{background-color:#87a2bd}[data-v-857351a8]::-webkit-scrollbar-track{background-color:transparent}[data-v-857351a8]::-webkit-scrollbar-track-piece{background-color:transparent}.svg-icon[data-v-3a11db57]{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}.svg-external-icon[data-v-3a11db57]{background-color:currentColor;-webkit-mask-size:cover!important;mask-size:cover!important;display:inline-block}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "es-plus-ui",
+  "version": "1.0.0",
+  "description": "基于 Vue 3 和 Element Plus 的企业级中后台前端组件库",
+  "type": "module",
+  "main": "./dist/es-plus.umd.cjs",
+  "module": "./dist/es-plus.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/es-plus.js",
+      "require": "./dist/es-plus.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "echo 'Skipping build, already built'",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
+  },
+  "keywords": [
+    "vue3",
+    "vue",
+    "element-plus",
+    "component-library",
+    "form",
+    "table",
+    "dialog",
+    "es-plus",
+    "typescript",
+    "enterprise",
+    "config-driven",
+    "crud"
+  ],
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0",
+    "element-plus": "^2.2.0",
+    "@element-plus/icons-vue": "^2.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "happy-dom": "^14.0.0",
+    "sass": "^1.70.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vitest": "^1.2.0",
+    "vue": "^3.4.0",
+    "vue-tsc": "^1.8.0",
+    "element-plus": "^2.5.0"
+  }
+}