gi-component 0.0.5 → 0.0.7

package/package.json

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

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

@@ -10,6 +10,7 @@
             <template v-if="column.slotName">
               <slot :name="column.slotName" v-bind="scope"></slot>
             </template>
+            <template v-else-if="!column.type">{{ scope.row[column.prop] }}</template>
             <component :is="COMP_MAP[column.type] || column.type" v-else v-bind="getComponentBindProps(column)"
               v-model="scope.row[column.prop]" class="w-full" :disabled="isDisabled(scope)">
             </component>
@@ -38,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,
@@ -61,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>();
@@ -137,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

@@ -1,49 +1,22 @@
 <template>
-  <el-form
-    ref="formRef"
-    :class="getClass"
-    v-bind="formProps"
-    :model="props.modelValue"
-  >
-    <Grid
-      class="w-full"
-      :col-gap="12"
-      v-bind="props.gridProps"
-      :collapsed="collapsed"
-    >
+  <el-form ref="formRef" :class="getClass" v-bind="formProps" :model="props.modelValue">
+    <Grid class="w-full" :col-gap="12" v-bind="props.gridProps" :collapsed="collapsed">
       <template v-for="(item, index) in props.columns">
-        <GridItem
-          v-if="item.type === 'title'"
-          :key="`title${index}`"
-          :span="100"
-        >
+        <GridItem v-if="item.type === 'title'" :key="`title${index}`" :span="100">
           <el-form-item label-width="0">
-            <GiCard
-              :title="typeof item.label === 'string' ? item.label : ''"
-              :header-style="{ padding: 0 }"
-              :body-style="{ display: 'none' }"
-            ></GiCard>
+            <GiCard :title="typeof item.label === 'string' ? item.label : ''" :header-style="{ padding: 0 }"
+              :body-style="{ display: 'none' }"></GiCard>
           </el-form-item>
         </GridItem>
 
         <template v-else>
-          <GridItem
-            v-if="!isHide(item)"
-            :key="item.field + index"
-            v-bind="item.gridItemProps || props.gridItemProps"
-            :span="
-              item.span ||
+          <GridItem v-if="!isHide(item)" :key="item.field + index" v-bind="item.gridItemProps || props.gridItemProps"
+            :span="item.span ||
               item.gridItemProps?.span ||
               props?.gridItemProps?.span
-            "
-          >
-            <el-form-item
-              :key="item.field + index"
-              :prop="item.field"
-              :label="item.label"
-              :rules="getFormItemRules(item)"
-              v-bind="item.formItemProps"
-            >
+              ">
+            <el-form-item :key="item.field + index" :prop="item.field" :label="item.label"
+              :rules="getFormItemRules(item)" v-bind="item.formItemProps">
               <template v-if="item?.labelRender" #label>
                 <component :is="item.labelRender"></component>
               </template>
@@ -53,21 +26,10 @@
               <template v-else>
                 <div :class="b('form-item__content')">
                   <div :class="b('form-item__component')">
-                    <component
-                      :is="CompMap[item.type] || item.type"
-                      :disabled="isDisabled(item)"
-                      class="w-full"
-                      v-bind="getComponentBindProps(item)"
-                      :model-value="
-                        props.modelValue[item.fieldName || item.field]
-                      "
-                      @update:model-value="updateModelValue($event, item)"
-                    >
-                      <template
-                        v-for="(slotValue, slotKey) in item?.slots || {}"
-                        :key="slotKey"
-                        #[slotKey]="scope"
-                      >
+                    <component :is="CompMap[item.type] || item.type" :disabled="isDisabled(item)" class="w-full"
+                      v-bind="getComponentBindProps(item)" :model-value="props.modelValue[item.fieldName || item.field]
+                        " @update:model-value="updateModelValue($event, item)">
+                      <template v-for="(slotValue, slotKey) in item?.slots || {}" :key="slotKey" #[slotKey]="scope">
                         <template v-if="typeof slotValue === 'string'">
                           {{ slotValue }}
                         </template>
@@ -76,12 +38,7 @@
                         </template>
                       </template>
                     </component>
-                    <el-text
-                      v-if="item.tip"
-                      :class="b('form-item__tip')"
-                      type="info"
-                      size="small"
-                    >
+                    <el-text v-if="item.tip" :class="b('form-item__tip')" type="info" size="small">
                       {{ item.tip }}
                     </el-text>
                   </div>
@@ -90,7 +47,7 @@
                     <template v-if="typeof item.extra === 'string'">
                       <el-text type="info" size="small">{{
                         item.extra
-                      }}</el-text>
+                        }}</el-text>
                     </template>
                     <template v-else-if="item.extra">
                       <component :is="item.extra"></component>
@@ -103,25 +60,14 @@
         </template>
       </template>
 
-      <GridItem
-        v-if="props.search"
-        :suffix="props.search"
-        :span="props?.gridItemProps?.span"
-      >
+      <GridItem v-if="props.search" :suffix="props.search" :span="props?.gridItemProps?.span">
         <el-space :class="b('form__search-btns')">
           <el-button type="primary" @click="emit('search')">
             {{ searchText }}
           </el-button>
           <el-button @click="emit('reset')"> 重置 </el-button>
-          <el-button
-            v-if="!props.hideFoldBtn"
-            class="form__fold-btn"
-            type="primary"
-            :icon="collapsed ? ArrowDown : ArrowUp"
-            text
-            size="small"
-            @click="collapsed = !collapsed"
-          >
+          <el-button v-if="!props.hideFoldBtn" class="form__fold-btn" type="primary"
+            :icon="collapsed ? ArrowDown : ArrowUp" text size="small" @click="collapsed = !collapsed">
             {{ collapsed ? '展开' : '收起' }}
           </el-button>
         </el-space>
@@ -251,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(() => {
@@ -376,7 +321,7 @@ function isHide(item: FormColumnItem) {
 /** 禁用表单项 */
 function isDisabled(item: FormColumnItem) {
   if (item?.props?.disabled !== undefined) return item?.props?.disabled;
-  if (props.fc?.[item.field]?.edit === false) return true;
+  if (props.fc?.[item.field]?.disabled === true) return true;
   return false;
 }
 
@@ -417,6 +362,7 @@ defineExpose({ formRef });
 }
 
 :deep(.hide-label) {
+
   // 隐藏el-form-item__label才能完整占满插槽宽度
   .el-form-item__label {
     display: none;

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;
@@ -88,11 +95,11 @@ export interface FormColumnItem<F = any> {
 export interface FormProps extends Partial<ElFormProps> {
   modelValue: any;
   columns?: FormColumnItem[];
-  fc?: Record<string, { edit: boolean; hidden?: boolean; required?: boolean }>; // 表单控制
+  fc?: Record<string, { disabled?: boolean; hidden?: boolean; required?: boolean }>; // 表单控制
   gridProps?: GridProps; // grid默认配置
   gridItemProps?: GridItemProps; // grid-item默认配置
   search?: boolean;
   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/hooks/useTable.ts

@@ -1,6 +1,6 @@
 
 import { ElMessageBox } from 'element-plus'
-import { reactive, ref, type Ref } from 'vue'
+import { reactive, ref, getCurrentInstance, type Ref } from 'vue'
 
 interface Options<T, U> {
   onSuccess?: () => void
@@ -20,12 +20,18 @@ interface PageResult<T> {
   total: number
 }
 
-type Api<T> = (params: PaginationParams) => Promise<ApiResult<PageResult<T[]>>> | Promise<ApiResult<T[]>>
+export interface UseTablePaginationParams { page: number; size: number; }
 
-interface PaginationParams { page: number; size: number; }
-export function useTable<T extends U, U = T>(api: Api<T>, options: Options<T, U>) {
+export interface UseTableApi<T> {
+  (params: UseTablePaginationParams): Promise<ApiResult<PageResult<T[]>>> | Promise<ApiResult<T[]>>
+}
+
+export function useTable<T extends U, U = T>(api: UseTableApi<T>, options: Options<T, U>) {
   const { onSuccess, immediate = true, rowKey = 'id' } = options || {}
 
+  // const instance = getCurrentInstance();
+  // const globalConfig = instance?.appContext.config.globalProperties?.$config || {};
+
   const loading = ref(false)
   const tableData: Ref<U[]> = ref([])
 

package/packages/index.ts

@@ -63,8 +63,12 @@ function capitalizeWord(word: string) {
 // 全局默认配置
 export interface Config {
   prefix?: string; // 组件前缀
-  clearable?: boolean; // 输入框是否可清除
-  dictRequest?: () => Promise<any>; // 字典请求方法
+  /** 输入框是否可清除 */
+  clearable?: boolean;
+  /** 字典请求方法 */
+  dictRequest?: () => Promise<any>;
+  /** 格式化响应数据, 用于useTable */
+  // formatResponse?: (data: any) => any;
 }
 
 export default {

package/packages/styles/index.scss

@@ -5,8 +5,8 @@ body {
   --margin: 14px;
   --padding-x: 14px;
   --padding-x-small: 10px;
-  --padding-y: 10px;
-  --padding-y-small: 6px;
+  --padding-y: 12px;
+  --padding-y-small: 8px;
 }
 
 .gi-card-title {
@@ -170,6 +170,7 @@ body {
   .el-dialog__header {
     border-bottom: none;
   }
+
   .el-dialog__footer {
     border-top: 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>
+};