@lx-frontend/wrap-element-ui 1.0.24 → 1.0.25

package/README.md

@@ -43,3 +43,14 @@ export default {
 `build:sb` 用于生成 stories 静态预览文件。
 
 `pnpm preview` 用于预览`build:sb`生成的静态文件。
+
+### 已知问题
+
+1. **Storybook Setup API 无法动态更新 Controls**
+   - 使用 Storybook 的 setup API 时，无法动态更新 controls 面板的内容。建议使用 Vue 2 老版本的 Options API 写法。
+
+2. **Options API 中 this 指向问题**
+   - 在 Storybook 中使用 Options API 写法时，无法正确获取 `this` 指向。建议尽量避免 hook 的嵌套导致 `this` 丢失问题。虽然可以通过传递 Vue 实例的方式来解决，但请尽量保持 demo 的简单性和可读性。
+
+3. **Storybook 卡死问题**
+   - 当 story 内容过多或嵌套层级过深时，可能会导致 Storybook 卡死。这通常是复杂组件的 story 出现逻辑问题时导致的，但 Storybook 无法抛出明确的错误信息。建议检查自己新增的逻辑，逻辑中的错误会导致原本嵌套很深的组件造成 Storybook 页面的卡死。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",

package/src/components/EditableTable/bizHooks/useColumnHeaderOperation.ts

@@ -5,7 +5,7 @@ import {
   IColumnConfig,
   IEmits,
   IFilterInput,
-  IFilterSolt,
+  IFilterSlot,
   IProps
 } from '../types';
 
@@ -106,7 +106,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
       ? _sortable.some(v => v.prop === sortProp.value)
       : sortProp.value === prop
 
-    return currentFilterActive || isUseSort|| summaryList.value.includes(prop);
+    return currentFilterActive || isUseSort || summaryList.value.includes(prop);
   }
 
   const handleHeaderPopoverShow = (column: IColumnConfig) => {
@@ -146,7 +146,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
 
     const processFilter = (filters: FilterListType) => {
       filters
-        .filter((item): item is Exclude<FilterItem, IFilterSolt> => item.type !== 'slot')
+        .filter((item): item is Exclude<FilterItem, IFilterSlot> => item.type !== 'slot')
         .forEach((item) => {
           if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
             const [start, end] = item.prop
@@ -184,7 +184,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     const inputFilters = (column.filters ?? []).filter(
       (item): item is IFilterInput => item.type === 'input'
     );
-    
+
     const hasValidatorError = inputFilters.some(
       (item) => item.validator
         && !item.validator((tempFilteredValue.value[item.prop] as string).trim())
@@ -248,9 +248,9 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     }
   }
 
-  function handleResetFilterValue (column: IColumnConfig) {
+  function handleResetFilterValue(column: IColumnConfig) {
     (column.filters || [])
-      .filter((item): item is Exclude<FilterItem, IFilterSolt> => item.type !== 'slot')
+      .filter((item): item is Exclude<FilterItem, IFilterSlot> => item.type !== 'slot')
       .forEach(
         (item) => {
           if (item.type === 'radio' || item.type === 'checkbox') {
@@ -296,7 +296,7 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
     // 设置搜索和过滤参数时，如果使用 showingColumns 遍历，会导致通过外部设置未显示的列的搜索和过滤参数丢失
     [props.colorFilterConfig, ...props.columnConfig].forEach(column => {
       (column?.filters ?? [])
-        .filter((item): item is Exclude<FilterItem, IFilterSolt> => item.type !== 'slot')
+        .filter((item): item is Exclude<FilterItem, IFilterSlot> => item.type !== 'slot')
         .forEach(
           (item) => {
             if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {

package/src/components/EditableTable/types/index.ts

@@ -7,8 +7,8 @@ export enum IEditType {
 }
 
 export interface ISortOption {
-	prop: string
-	label: string
+  prop: string
+  label: string
 }
 
 /** 筛选组件 - 输入框 */
@@ -71,13 +71,13 @@ export interface IFilterColorRadio {
   options: Array<IFilterSelectOptions & { color: string }>
 }
 
-export interface IFilterSolt {
+export interface IFilterSlot {
   type: 'slot',
   slotName: string,
   active: () => boolean
 }
 
-export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit | IFilterMonthDayPicker | IFilterColorRadio | IFilterSolt
+export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit | IFilterMonthDayPicker | IFilterColorRadio | IFilterSlot
 
 /** 筛选组件类型 */
 export type FilterListType = Array<FilterItem>
@@ -115,7 +115,7 @@ type IInputColumn = IColumnConfigRequired & {
 }
 
 type ISelectColumn = IColumnConfigRequired & {
-  options: { key: string; value: string | number; [key: string]: any }[];
+  options: { key: string; value: string | number;[key: string]: any }[];
 }
 
 type IDateOnlyColumn = IColumnConfigRequired

package/src/components/SearchForm/index.vue

@@ -3,16 +3,18 @@
     class="search-form"
     :inline="isInline"
     :label-width="width"
+    :label-position="labelPosition"
   >
     <el-form-item
       v-for="({
-        isEmpty = true, key, type, prop, label, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
-        clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date',
+        isEmpty = true, key, type, prop, label, labelWidth, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
+        clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date', rangeSeparator,
         doubleIsInline = true, maxlength = 255, pickerOptions, limit, required = false
       }) in config"
       :required="required"
       :key="label"
       :label="showLabel ? label : ''"
+      :label-width="labelWidth || width"
       style="margin-right: 10px"
     >
       <el-input
@@ -69,7 +71,7 @@
         format="yyyy-MM-dd"
         value-format="yyyy-MM-dd"
         :type="dateType"
-        range-separator="到"
+        :range-separator="rangeSeparator || '到'"
         :placeholder="dateType == 'date' ? placeholder || '选择日期' : '选择日期范围'"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
@@ -135,6 +137,10 @@ import { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../helpe
 export default {
   name: 'SearchForm',
   props: {
+    labelPosition: {
+      default: 'right',
+      type: String
+    },
     isShowSearchBtn: {
       default: true,
       type: Boolean

package/src/components/SearchForm/types/index.ts

@@ -3,6 +3,7 @@ import { DatePicker } from "element-ui/types/element-ui"
 type BaseOption = {
   label: string
   prop: string
+  labelWidth?: string
   clearable?: boolean
   placeholder?: string
   key?: string
@@ -39,6 +40,7 @@ type SelectOption = BaseOption & {
 type DatePickerOption = BaseOption & {
   type: 'datePicker'
   dateType?: string
+  rangeSeparator?: string
   datePickerOptions?: DatePicker['pickerOptions']
 }