gi-component 0.0.6 → 0.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",

package/packages/components/edit-table/src/edit-table.vue

@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<EditTableProps>(), {
 const attrs = useAttrs();
 const { b } = useBemClass();
 
-const COMP_MAP: Record<Exclude<EditTableColumnItemType, 'slot'>, any> = {
+const COMP_MAP: Record<EditTableColumnItemType, any> = {
   input: El.ElInput,
   textarea: El.ElInput,
   'input-number': El.ElInputNumber,
@@ -62,7 +62,8 @@ const COMP_MAP: Record<Exclude<EditTableColumnItemType, 'slot'>, any> = {
   transfer: El.ElTransfer,
   autocomplete: El.ElAutocomplete,
   upload: El.ElUpload,
-  'input-search': InputSearch
+  'input-search': InputSearch,
+  slot: undefined,
 };
 
 const formRef = ref<FormInstance | null>();
@@ -138,11 +139,10 @@ function getComponentBindProps(item: EditTableColumnItem) {
   const defaultProps: any = STATIC_PROPS.get(item.type || '') || {};
   defaultProps.placeholder = getPlaceholder(item);
   if (item.type === 'date-picker') {
-    defaultProps.valueFormat =
-      item?.componentProps?.type === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+    defaultProps.valueFormat = item?.componentProps?.type === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
   }
   // 合并默认配置和自定义配置
-  return { ...defaultProps, ...item.componentProps };
+  return { ...defaultProps, ...(item?.componentProps || {}) };
 }
 
 /** 表单项校验规则 */

package/packages/components/edit-table/src/type.ts

@@ -1,5 +1,6 @@
 import type * as El from 'element-plus';
 import type { InputSearchInstance } from '../../input-search'
+import type { MergeMultiple } from '../../../types/tool'
 
 export type EditTableColumnItemType =
   | 'input'
@@ -34,34 +35,34 @@ export interface EditTableColumnItem {
   width?: number | string;
   required?: boolean;
   rules?: El.FormItemRule[]; // 表单校验规则
-  componentProps?: ColumnItemProps;
+  componentProps?: EditTableColumnItemProps;
   columnProps?: El.TableColumnInstance['$props'];
   formItemProps?: El.FormItemProps;
   slotName?: string;
 }
 
-export type ColumnItemProps = El.InputProps &
-  El.InputNumberProps &
-  El.InputTagProps &
-  El.SelectProps &
-  El.SelectV2Props &
-  El.TreeInstance['$props'] &
-  El.CascaderProps &
-  El.SliderProps &
-  El.SwitchProps &
-  El.RateProps &
-  El.CheckboxGroupProps &
-  El.CheckboxProps &
-  El.RadioGroupProps &
-  El.RadioProps &
-  El.DatePickerProps &
-  El.TimePickerDefaultProps &
-  El.TimeSelectProps &
-  El.ColorPickerProps &
-  El.TransferProps &
-  El.AutocompleteProps &
-  El.UploadProps &
-  InputSearchInstance['$props']
+export type EditTableColumnItemProps = MergeMultiple<[El.InputProps,
+  El.InputNumberProps,
+  El.InputTagProps,
+  El.SelectProps,
+  El.SelectV2Props,
+  El.TreeInstance['$props'],
+  El.CascaderProps,
+  El.SliderProps,
+  El.SwitchProps,
+  El.RateProps,
+  El.CheckboxGroupProps,
+  El.CheckboxProps,
+  El.RadioGroupProps,
+  El.RadioProps,
+  El.DatePickerProps,
+  El.TimePickerDefaultProps,
+  El.TimeSelectProps,
+  El.ColorPickerProps,
+  El.TransferProps,
+  El.AutocompleteProps,
+  El.UploadProps,
+  InputSearchInstance['$props']]>
 
 export interface EditTableProps {
   rowKey?: string;

package/packages/components/form/src/form.vue

@@ -197,15 +197,14 @@ function getComponentBindProps(item: FormColumnItem) {
   const defaultProps: any = STATIC_PROPS.get(item.type) || {};
   defaultProps.placeholder = getPlaceholder(item);
   if (item.type === 'date-picker') {
-    defaultProps.valueFormat =
-      item?.props?.type === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+    defaultProps.valueFormat = item?.props?.type === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
   }
   // 如果配置了dictCode且存在对应的字典数据，设置options
   if (item.dictCode && dictData.value[item.dictCode]) {
     defaultProps.options = dictData.value[item.dictCode];
   }
   // 合并默认配置和自定义配置
-  return { ...defaultProps, ...item.props };
+  return { ...defaultProps, ...(item?.props || {}) };
 }
 
 const formProps = computed(() => {

package/packages/components/form/src/type.ts

@@ -3,6 +3,7 @@ import type { FormProps as ElFormProps } from 'element-plus';
 import type { VNode } from 'vue';
 import type { GridItemProps, GridProps } from '../../grid/src/interface';
 import type { InputSearchInstance } from '../../input-search';
+import type { MergeMultiple } from '../../../types/tool'
 
 export type FormColumnType =
   | 'input'
@@ -31,37 +32,45 @@ export type FormColumnType =
   | 'title'
   | 'slot';
 
-export type FormColumnProps = El.InputProps &
-  El.InputNumberProps &
-  El.InputTagProps &
-  El.SelectProps &
-  El.SelectV2Props &
-  El.TreeInstance['$props'] &
-  El.CascaderProps &
-  El.SliderProps &
-  El.SwitchProps &
-  El.RateProps &
-  El.CheckboxGroupProps &
-  El.CheckboxProps &
-  El.RadioGroupProps &
-  El.RadioProps &
-  El.DatePickerProps &
-  El.TimePickerDefaultProps &
-  El.TimeSelectProps &
-  El.ColorPickerProps &
-  El.TransferProps &
-  El.AutocompleteProps &
-  El.UploadProps &
-  InputSearchInstance['$props'];
+/**
+ * 表单列属性类型，根据组件类型使用对应的属性类型
+ */
+export type FormColumnProps = MergeMultiple<[El.InputProps,
+  El.InputNumberProps,
+  El.InputTagProps,
+  El.SelectProps,
+  El.SelectV2Props,
+  El.TreeInstance['$props'],
+  El.CascaderProps,
+  El.SliderProps,
+  El.SwitchProps,
+  El.RateProps,
+  El.CheckboxGroupProps,
+  El.CheckboxProps,
+  El.RadioGroupProps,
+  El.RadioProps,
+  El.DatePickerProps,
+  El.TimePickerDefaultProps,
+  El.TimeSelectProps,
+  El.ColorPickerProps,
+  El.TransferProps,
+  El.AutocompleteProps,
+  El.UploadProps,
+  InputSearchInstance['$props']]>;
 
 export type FormColumnItemHide<F> = boolean | ((form: F) => boolean);
 
-export type FormColumnSlots = El.InputInstance['$slots'] &
-  El.InputNumberInstance['$slots'] &
-  El.InputTagInstance['$slots'] &
-  El.AutocompleteInstance['$slots'] &
-  El.CascaderInstance['$slots'] &
-  El.DatePickerInstance['$slots'];
+/**
+ * 表单列插槽类型，根据组件类型使用对应的插槽类型
+ */
+export type FormColumnSlots = Partial<
+  El.InputInstance['$slots'] |
+  El.InputNumberInstance['$slots'] |
+  El.InputTagInstance['$slots'] |
+  El.AutocompleteInstance['$slots'] |
+  El.CascaderInstance['$slots'] |
+  El.DatePickerInstance['$slots']
+>;
 
 export interface FormColumnItem<F = any> {
   type: FormColumnType;
@@ -70,9 +79,7 @@ export interface FormColumnItem<F = any> {
   field: string;
   fieldName?: string;
   span?: number;
-  props?: FormColumnProps & {
-    options?: El.RadioProps & El.CheckboxProps & El.SelectProps;
-  };
+  props?: FormColumnProps;
   formItemProps?: El.FormItemProps;
   gridItemProps?: any;
   required?: boolean;
@@ -95,4 +102,4 @@ export interface FormProps extends Partial<ElFormProps> {
   searchText?: string;
   hideFoldBtn?: boolean;
   defaultCollapsed?: boolean | undefined;
-}
+}

package/packages/components/table/src/type.ts

@@ -1,9 +1,4 @@
-import type {
-  TableProps as ElTableProps,
-  PaginationProps,
-  TableColumnCtx,
-  TableColumnInstance,
-} from 'element-plus';
+import type { TableProps as ElTableProps, PaginationProps, TableColumnInstance } from 'element-plus';
 import type { ExtractPropTypes, VNode } from 'vue';
 
 type DefaultRow = Record<PropertyKey, any>
@@ -13,10 +8,7 @@ export interface TableColumnItem<T extends DefaultRow = DefaultRow> extends Omit
   render?: (scope: { $index: number; cellIndex: number; column: TableColumnItem<T>; row: T }) => VNode | VNode[] | string;
 }
 
-export interface TableProps
-  extends ExtractPropTypes<
-    ElTableProps<Record<string | number | symbol, any>>
-  > {
+export interface TableProps extends ExtractPropTypes<ElTableProps<Record<string | number | symbol, any>>> {
   columns?: TableColumnItem[];
   pagination?: Partial<PaginationProps>;
 }

package/packages/components/tabs/src/tabs.vue

@@ -2,19 +2,9 @@
   <div :class="getClass">
     <div :class="b('tabs__default')">
       <slot>
-        <el-tabs
-          v-model="model"
-          :type="props.type"
-          :stretch="props.stretch"
-          @tab-click="(p, e) => emits('tabClick', p, e)"
-          @tab-change="emits('tabChange', $event)"
-        >
-          <el-tab-pane
-            v-for="item in props.options"
-            :key="item.name"
-            :name="item.name"
-            :disabled="item?.disabled"
-          >
+        <el-tabs v-model="model" :type="props.type" :stretch="props.stretch"
+          @tab-click="(p, e) => emits('tabClick', p, e)" @tab-change="emits('tabChange', $event as any)">
+          <el-tab-pane v-for="item in props.options" :key="item.name" :name="item.name" :disabled="item?.disabled">
             <template #label>
               <slot name="label" :data="item">{{ item.label }}</slot>
             </template>
@@ -113,7 +103,7 @@ const getClass = computed(() => {
 }
 
 :deep(.el-tabs--card) {
-  > .el-tabs__header {
+  >.el-tabs__header {
     border-bottom: none;
   }
 }
@@ -121,11 +111,11 @@ const getClass = computed(() => {
 :deep(.el-tabs--border-card) {
   border-bottom: none;
 
-  > .el-tabs__content {
+  >.el-tabs__content {
     display: none;
   }
 
-  > .el-tabs__header {
+  >.el-tabs__header {
     border-bottom: none;
   }
 }

package/packages/types/tool.ts

@@ -0,0 +1,14 @@
+// 辅助类型：获取所有类型的键的联合
+type AllKeys<T> = T extends any ? keyof T : never;
+
+// 辅助类型：获取属性在所有类型中的联合类型
+type UnionType<T, K extends PropertyKey> = T extends any
+  ? K extends keyof T
+  ? T[K]
+  : never
+  : never;
+
+// 合并多个类型，同名属性转为联合类型
+export type MergeMultiple<T extends any[]> = {
+  [K in AllKeys<T[number]>]: UnionType<T[number], K>
+};