gi-component 0.0.2 → 0.0.3

package/package.json

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

package/packages/components/dialog/src/dialog.ts

@@ -3,7 +3,7 @@ import ElementPlus from 'element-plus';
 import { createApp, h, ref } from 'vue';
 import GiDialog from './dialog.vue';
 
-type DialogOptions = Partial<DialogInstance['$props']>;
+export type DialogOptions = Partial<DialogInstance['$props']>;
 
 export interface DialogReturnObject {
   close: () => void;

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

@@ -1,37 +1,25 @@
 <template>
-  <div>
-    <el-table v-bind="tableProps" :data="props.data as any[]">
-      <TableColumn
-        v-for="item in props.columns"
-        :key="item.prop || item.label"
-        :column="item"
-      >
+  <div :class="b('table')">
+    <el-table v-bind="tableProps" ref="tableRef" :data="props.data as any[]">
+      <TableColumn v-for="item in props.columns" :key="item.prop || item.label" :column="item">
         <!-- 将所有插槽传递给子组件 -->
-        <template
-          v-for="(_, slotName) in $slots"
-          :key="slotName"
-          #[slotName]="scope"
-        >
+        <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="scope">
           <slot :name="slotName" v-bind="scope" />
         </template>
       </TableColumn>
     </el-table>
 
     <el-row justify="end" :class="b('table-pagination')">
-      <el-pagination
-        v-bind="paginationProps"
-        v-model:current-page="paginationProps.currentPage"
-        v-model:page-size="paginationProps.pageSize"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+      <el-pagination v-bind="paginationProps" v-model:current-page="paginationProps.currentPage"
+        v-model:page-size="paginationProps.pageSize" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
     </el-row>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { TableProps } from './type';
-import { computed, useAttrs } from 'vue';
+import { computed, useAttrs, useTemplateRef } from 'vue';
 import { useBemClass } from '../../../hooks';
 import TableColumn from './TableColumn.vue';
 
@@ -42,6 +30,7 @@ const props = withDefaults(defineProps<TableProps>(), {
 
 const attrs = useAttrs();
 const { b } = useBemClass();
+const tableRef = useTemplateRef('tableRef');
 
 const tableProps = computed(() => {
   return {
@@ -70,6 +59,10 @@ function handleCurrentChange(page: number) {
   // @ts-ignore
   props.pagination.currentPage = page;
 }
+
+defineExpose({
+  tableRef
+})
 </script>
 
 <style lang="scss" scoped>
@@ -79,6 +72,17 @@ function handleCurrentChange(page: number) {
   flex: auto;
 }
 
+.#{a.$prefix}-table {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  :deep(.el-table) {
+    flex: 1;
+  }
+}
+
 .#{a.$prefix}-table-pagination {
   margin-top: 10px;
 }

package/packages/hooks/useTable.ts

@@ -0,0 +1,3 @@
+export function useTable() {
+
+}

package/packages/utils/createSelectDialog.ts

@@ -1,14 +1,12 @@
 import type { Component } from 'vue';
 import { ElMessage } from 'element-plus';
 import { h, ref } from 'vue';
-import { Dialog } from '../index';
+import { Dialog, type DialogOptions } from '../index';
 
-type CreateSelectDialogParams = {
-  title: string;
+interface CreateSelectDialogParams extends Omit<DialogOptions, 'content' | 'onOk' | 'onBeforeOk'> {
   component: Component;
   componentProps?: Record<string, any>;
   tip?: string;
-  bodyClass?: string;
 };
 
 interface DefOption {
@@ -35,6 +33,8 @@ export const createSelectDialog = <T, Q extends DefOption = DefOption>(
     const DialogTableRef = ref<any>();
 
     Dialog.open({
+      bodyClass: 'gi-p0',
+      ...{ ...params, component: undefined, componentProps: undefined, tip: undefined },
       title: params.title || options.title,
       content: () =>
         h(params.component, {
@@ -43,8 +43,7 @@ export const createSelectDialog = <T, Q extends DefOption = DefOption>(
           queryParams,
           ...params.componentProps
         }),
-      style: { maxWidth: '960px' },
-      bodyClass: params.bodyClass,
+      style: { maxWidth: '1000px', ...params.style },
       onBeforeOk: async () => {
         if (!DialogTableRef.value.getSelectedData) {
           ElMessage.error('组件必须暴露getSelectedData方法');