gi-component 0.0.25 → 0.0.27

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

@@ -1,84 +1,84 @@
-import type * as El from 'element-plus'
-import type { FormProps as ElFormProps } from 'element-plus'
-import type { VNode } from 'vue'
-import type { MergeMultiple } from '../../../types/tool'
-import type { GridItemProps, GridProps } from '../../grid/src/interface'
-import type { InputSearchInstance } from '../../input-search'
-
-export type FormColumnType
-  = | 'input'
-  | 'textarea'
-  | 'input-number'
-  | 'input-tag'
-  | 'input-search'
-  | 'select'
-  | 'select-v2'
-  | 'tree-select'
-  | 'cascader'
-  | 'slider'
-  | 'switch'
-  | 'rate'
-  | 'checkbox-group'
-  | 'checkbox'
-  | 'radio-group'
-  | 'radio'
-  | 'date-picker'
-  | 'time-picker'
-  | 'time-select'
-  | 'color-picker'
-  | 'transfer'
-  | 'autocomplete'
-  | 'upload'
-  | 'title'
-  | 'slot'
-
-/**
- * 表单列属性类型，根据组件类型使用对应的属性类型
- */
-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 = 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
-  label?: string
-  labelRender?: () => VNode
-  field: string
-  fieldName?: string
-  span?: number | GridItemProps['span']
-  props?: FormColumnProps
-  formItemProps?: El.FormItemProps
-  gridItemProps?: any
-  required?: boolean
-  rules?: El.FormItemRule[]
-  hide?: FormColumnItemHide<F> // 是否隐藏
-  tip?: string
-  dictCode?: string // 字典编码
-  slotName?: string
-  slots?: FormColumnSlots
-  extra?: string | (() => VNode) // 右侧额外内容
-}
-
-export interface FormProps extends Partial<ElFormProps> {
-  modelValue: any
-  columns?: FormColumnItem[]
-  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
-}
+import type * as El from 'element-plus'
+import type { FormProps as ElFormProps } from 'element-plus'
+import type { VNode } from 'vue'
+import type { MergeMultiple } from '../../../types/tool'
+import type { GridItemProps, GridProps } from '../../grid/src/interface'
+import type { InputSearchInstance } from '../../input-search'
+
+export type FormColumnType
+  = | 'input'
+  | 'textarea'
+  | 'input-number'
+  | 'input-tag'
+  | 'input-search'
+  | 'select'
+  | 'select-v2'
+  | 'tree-select'
+  | 'cascader'
+  | 'slider'
+  | 'switch'
+  | 'rate'
+  | 'checkbox-group'
+  | 'checkbox'
+  | 'radio-group'
+  | 'radio'
+  | 'date-picker'
+  | 'time-picker'
+  | 'time-select'
+  | 'color-picker'
+  | 'transfer'
+  | 'autocomplete'
+  | 'upload'
+  | 'title'
+  | 'slot'
+
+/**
+ * 表单列属性类型，根据组件类型使用对应的属性类型
+ */
+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 = 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
+  label?: string
+  labelRender?: () => VNode
+  field: string
+  fieldName?: string
+  span?: number | GridItemProps['span']
+  props?: FormColumnProps
+  formItemProps?: El.FormItemProps
+  gridItemProps?: any
+  required?: boolean
+  rules?: El.FormItemRule[]
+  hide?: FormColumnItemHide<F> // 是否隐藏
+  tip?: string
+  dictCode?: string // 字典编码
+  slotName?: string
+  slots?: FormColumnSlots
+  extra?: string | (() => VNode) // 右侧额外内容
+}
+
+export interface FormProps extends Partial<ElFormProps> {
+  modelValue: any
+  columns?: FormColumnItem[]
+  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/table.vue

@@ -16,21 +16,28 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { TableProps } from './type'
+<script lang="ts" setup generic="T extends DefaultRow">
+import type { DefaultRow, TableProps, TableSlotScope } from './type'
 import { ElPagination, ElRow, ElTable } from 'element-plus'
 import { computed, useAttrs, useTemplateRef } from 'vue'
 import { useBemClass } from '../../../hooks'
 import TableColumn from './TableColumn.vue'
 
-const props = withDefaults(defineProps<TableProps>(), {
+const props = withDefaults(defineProps<TableProps<T>>(), {
   fit: true,
   showHeader: true,
   selectOnIndeterminate: true,
+  data: () => [],
   columns: () => [],
   pagination: () => ({})
 })
 
+defineSlots<{
+  append: () => void
+  empty: () => void
+  [propsName: string]: (props: TableSlotScope<T>) => void
+}>()
+
 const attrs = useAttrs()
 const { b } = useBemClass()
 const tableRef = useTemplateRef('tableRef')

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

@@ -1,14 +1,24 @@
 import type { TableProps as ElTableProps, PaginationProps, TableColumnInstance } from 'element-plus'
 import type { ExtractPropTypes, VNode } from 'vue'
 
-type DefaultRow = Record<PropertyKey, any>
-export interface TableColumnItem<T extends DefaultRow = DefaultRow> extends Omit<TableColumnInstance['$props'], never> {
+export type DefaultRow = Record<PropertyKey, any>
+
+export interface TableColumnItem<T extends DefaultRow = any> extends Omit<TableColumnInstance['$props'], never> {
   slotName?: string
   children?: TableColumnItem[]
-  render?: (scope: { $index: number, cellIndex: number, column: TableColumnItem<T>, row: T }) => VNode | VNode[] | string
+  render?: (scope: TableSlotScope<T>) => VNode | VNode[] | string
+}
+
+export type TableSlotScope<T extends DefaultRow = any> = {
+  $index: number
+  cellIndex: number
+  column: TableColumnInstance['$props']
+  row: T
+  expanded: boolean
 }
 
-export interface TableProps extends ExtractPropTypes<ElTableProps<Record<string | number | symbol, any>>> {
+export interface TableProps<T extends DefaultRow = any> extends ExtractPropTypes<ElTableProps<Record<string | number | symbol, any>>> {
+  data?: T[]
   columns?: TableColumnItem[]
   pagination?: Partial<PaginationProps> | boolean
 }

package/packages/styles/index.scss

@@ -2,8 +2,10 @@
 @use './el.scss';
 
 body {
+  // 主要作用于页面
   --padding: 14px;
   --margin: 14px;
+  // 主要作用于内置组件（不建议使用）
   --padding-x: 14px;
   --padding-x-small: 10px;
   --padding-y: 12px;
@@ -144,4 +146,8 @@ body {
 
 .gi-flex-column {
   flex-direction: column;
+}
+
+.gi-tool {
+  gap: 8px;
 }

package/packages/utils/createSelectDialog.ts

@@ -1,48 +1,55 @@
 import type { Component } from 'vue'
 import type { DialogOptions } from '../index'
 import { ElMessage } from 'element-plus'
-import { h, ref } from 'vue'
+import { h, ref } from 'vue'
 import { Dialog } from '../index'
 
+// 创建选择弹窗的参数
 interface CreateSelectDialogParams extends Omit<DialogOptions, 'content' | 'onOk' | 'onBeforeOk'> {
-  component: Component
-  componentProps?: Record<string, any>
-  tip?: string
+  component: Component // 内容组件
+  componentProps?: Record<string, any> // 内容组件属性
+  tip?: string // 提示信息
 };
 
-interface DefOption {
-  queryParams: Record<string, any>
+// 默认选项
+interface DefaultOption {
+  queryParams?: Record<string, any>
+  componentProps?: Record<string, any>
 }
 
-type DialogOption<T, Q extends DefOption = DefOption> = {
-  title?: string
-  multiple?: boolean
-  queryParams?: Q['queryParams']
-  onOk?: (data: T) => void
-  onBeforeOk?: (data: T) => Promise<boolean>
+// 打开选择弹窗的选项
+type DialogOption<T, Q extends DefaultOption = DefaultOption> = {
+  title?: string // 标题
+  multiple?: boolean // 是否多选
+  queryParams?: (Q extends { queryParams: infer P } ? P : DefaultOption['queryParams']) // 查询参数
+  componentProps?: (Q extends { componentProps: infer P } ? P : DefaultOption['componentProps']) // 组件属性
+  onOk?: (data: T) => void // 确定回调
+  onBeforeOk?: (data: T) => Promise<boolean> // 确定前的回调
 }
 
 /**
  * 创建选择弹窗
  * @description component组件必须暴露一个getSelectedData方法
  */
-export const createSelectDialog = <T, Q extends DefOption = DefOption>(
+export const createSelectDialog = <T, Q extends DefaultOption = DefaultOption>(
   params: CreateSelectDialogParams
 ) => {
   return function (options: DialogOption<T, Q>) {
-    const { multiple = false, onOk, onBeforeOk, queryParams } = options
+    const { multiple = false, onOk, onBeforeOk, queryParams, componentProps } = options
     const DialogTableRef = ref<any>()
+    const { component, componentProps: componentPropsFromParams, tip, ...restParams } = params
 
     Dialog.open({
       bodyClass: 'gi-p0',
-      ...{ ...params, component: undefined, componentProps: undefined, tip: undefined },
+      ...restParams,
       title: params.title || options.title,
       content: () =>
         h(params.component, {
           ref: (e: any) => (DialogTableRef.value = e),
           multiple,
           queryParams,
-          ...params.componentProps
+          ...params.componentProps,
+          ...componentProps
         }),
       style: { maxWidth: '1000px', ...params.style },
       onBeforeOk: async () => {