@aspire-ui/element-component-pro 1.0.3 → 1.0.4

package/dist/index.d.ts

@@ -2036,6 +2036,7 @@ declare const _default: {
             schema: {
                 field: string;
                 label: string;
+                labelWidth?: string | undefined;
                 component?: (import('./types').ProFormBuiltInComponent | import('./types').ProFormCustomComponent) | undefined;
                 componentProps?: (Record<string, unknown> | ((params: import('./types').RenderCallbackParams & {
                     formActionType?: import('./types').FormActionType;

package/dist/style.css

@@ -1 +1 @@
-.ecp-pro-table[data-v-c5638c20]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-c5638c20] .el-table{width:100%!important}.ecp-pro-table__header[data-v-c5638c20]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-c5638c20]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-c5638c20]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-c5638c20]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-c5638c20]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-c5638c20]{width:100%}.ecp-pro-table__pagination[data-v-c5638c20]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-c5638c20]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-1b2d6c42],.ecp-table-action__item[data-v-1b2d6c42]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-1b2d6c42]{margin-right:4px}.ecp-table-action__more[data-v-1b2d6c42]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-1b2d6c42]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__help-icon[data-v-0dcbe9b0]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-0dcbe9b0]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-0dcbe9b0]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-0dcbe9b0]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-4ee1cb87]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-4ee1cb87]{margin-bottom:16px}.ecp-pro-form_col[data-v-4ee1cb87]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-4ee1cb87]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-4ee1cb87]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-4ee1cb87]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}
+.ecp-pro-table[data-v-c5638c20]{padding:16px;background:#fff;width:100%;box-sizing:border-box}.ecp-pro-table[data-v-c5638c20] .el-table{width:100%!important}.ecp-pro-table__header[data-v-c5638c20]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ecp-pro-table__title-wrapper[data-v-c5638c20]{display:flex;align-items:center;gap:4px}.ecp-pro-table__title[data-v-c5638c20]{font-size:16px;font-weight:600}.ecp-pro-table__help[data-v-c5638c20]{color:#909399;cursor:help}.ecp-pro-table__toolbar[data-v-c5638c20]{display:flex;align-items:center;gap:8px}.ecp-pro-table__body[data-v-c5638c20]{width:100%}.ecp-pro-table__pagination[data-v-c5638c20]{margin-top:16px;display:flex;justify-content:flex-end}.ecp-pro-table__col-help[data-v-c5638c20]{margin-left:4px;color:#909399;cursor:help}.ecp-table-action[data-v-f319e73a],.ecp-table-action__item[data-v-f319e73a]{display:inline-flex;align-items:center;gap:4px}.ecp-table-action__icon[data-v-f319e73a]{margin-right:4px}.ecp-table-action__more[data-v-f319e73a]{display:inline-flex;align-items:center}.ecp-table-action__dropdown-item[data-v-f319e73a]{display:inline-flex;align-items:center;gap:4px}.ecp-tree-select[data-v-f30bba11]{position:relative;width:100%}.ecp-tree-select__filter-inner[data-v-f30bba11]{margin-bottom:8px}.ecp-tree-select__dropdown[data-v-f30bba11]{position:absolute;top:100%;left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid #dcdfe6;border-radius:4px;margin-top:4px;z-index:1000;padding:8px}.ecp-tree-select__loading[data-v-f30bba11]{padding:24px;text-align:center;color:#909399;font-size:14px}.ecp-pro-form-item__help-icon[data-v-2227d67d]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-2227d67d]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-2227d67d]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-2227d67d]:last-child{margin-bottom:0}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-4ee1cb87]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-4ee1cb87]{margin-bottom:16px}.ecp-pro-form_col[data-v-4ee1cb87]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-4ee1cb87]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-4ee1cb87]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-4ee1cb87]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}

package/dist/types/index.d.ts

@@ -85,6 +85,8 @@ export interface ProFormSchema {
     field: string;
     /** 标签 */
     label: string;
+    /** 单个表单项标签宽度，优先级高于 Form 的 labelWidth */
+    labelWidth?: string;
     /**
      * 组件类型：
      * - 内置：'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aspire-ui/element-component-pro",
-  "version": "1.0.03",
+  "version": "1.0.04",
   "description": "Element UI 二次封装组件库，基于 Vue 2.7 + TypeScript + setup 语法糖，实现 VbenAdmin 风格的 Pro 组件",
   "type": "module",
   "main": "./dist/element-component-pro.umd.js",

package/src/ProForm/ProFormItem.vue

@@ -5,6 +5,7 @@
     :prop="schema.field"
     :required="schema.required"
     :rules="effectiveRules"
+    :label-width="schema.labelWidth"
   >
     <template slot="label">
       <span>{{ schema.label }}</span>

package/src/ProTable/TableAction.vue

@@ -12,8 +12,8 @@
         :title="action.popConfirm.title"
         :confirm-button-text="action.popConfirm.okText || '确定'"
         :cancel-button-text="action.popConfirm.cancelText || '取消'"
-        @confirm="(e) => handlePopConfirm(action, 'confirm', e)"
-        @cancel="(e) => handlePopConfirm(action, 'cancel', e)"
+        @confirm="handlePopConfirmConfirm(action, $event)"
+        @cancel="handlePopConfirmCancel(action, $event)"
       >
         <span slot="reference">
           <component
@@ -25,7 +25,7 @@
               size="small"
               :disabled="action.disabled"
               v-bind="action.props"
-              @click="(e) => handleClick(action, e)"
+               @click="handleActionClick(action, $event)"
             >
               <i v-if="action.icon" :class="['ecp-table-action__icon', action.icon]" />
               <span>{{ action.label }}</span>
@@ -45,7 +45,7 @@
           size="small"
           :disabled="action.disabled"
           v-bind="action.props"
-          @click="(e) => handleClick(action, e)"
+          @click="handleActionClick(action, $event)"
         >
           <i v-if="action.icon" :class="['ecp-table-action__icon', action.icon]" />
           <span>{{ action.label }}</span>
@@ -133,6 +133,10 @@ const handleClick = (action: TableActionItem, e: MouseEvent) => {
   action.onClick?.(e)
 }
 
+const handleActionClick = (action: TableActionItem, e: MouseEvent) => {
+  handleClick(action, e)
+}
+
 const handlePopConfirm = (action: TableActionItem, type: 'confirm' | 'cancel', e: MouseEvent) => {
   if (props.stopButtonPropagation) {
     e.stopPropagation()
@@ -145,6 +149,14 @@ const handlePopConfirm = (action: TableActionItem, type: 'confirm' | 'cancel', e
   }
 }
 
+const handlePopConfirmConfirm = (action: TableActionItem, e: MouseEvent) => {
+  handlePopConfirm(action, 'confirm', e)
+}
+
+const handlePopConfirmCancel = (action: TableActionItem, e: MouseEvent) => {
+  handlePopConfirm(action, 'cancel', e)
+}
+
 const handleDropdownCommand = (index: number | string) => {
   const idx = Number(index)
   const action = visibleDropDownActions.value[idx]
@@ -190,4 +202,3 @@ const handleDropdownCommand = (index: number | string) => {
   gap: 4px;
 }
 </style>
-

package/src/types/index.ts

@@ -105,6 +105,8 @@ export interface ProFormSchema {
   field: string
   /** 标签 */
   label: string
+  /** 单个表单项标签宽度，优先级高于 Form 的 labelWidth */
+  labelWidth?: string
   /**
    * 组件类型：
    * - 内置：'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'