@aoao-y33/ui 0.0.2 → 0.0.5

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

@@ -1,77 +0,0 @@
-<template>
-  <div class="flex flex-col w-full h-full gap-2 overflow-hidden p-4" v-loading="_loading">
-    <div class="w-full rounded-(--ax-normal-radius) p-4 pb-0 bg-(--ax-block-color)" v-if="slots.search">
-      <slot name="search"></slot>
-    </div>
-    <div class="w-full rounded-(--ax-normal-radius) p-4 bg-(--ax-block-color)" v-if="slots.tool">
-      <slot name="tool"></slot>
-    </div>
-    <div class="flex-1 rounded-(--ax-normal-radius) overflow-hidden gap-2 flex flex-col bg-(--ax-block-color) p-4">
-      <div class="flex-1 overflow-auto">
-        <ElTable v-bind="{...tableProps,...attrs}"
-                 :header-cell-class-name="'ax-table__header'+' '+headerCellClassName"
-                 :stripe="true"
-                 :showOverflowTooltip="showOverflowTooltip"
-                 :data="_data" height="100%" ref="tableRef">
-          <slot></slot>
-        </ElTable>
-      </div>
-      <div v-if="slots.footer" class="flex justify-end">
-        <slot name="footer"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {ElTable, vLoading, type TableInstance} from "element-plus";
-
-defineOptions({name: 'AxTable'})
-import type {AxTableProps} from "./props";
-import {useDefineProps, useFetch} from "@aoao-y33/hooks";
-import {computed, onMounted, provide, ref, useAttrs, useSlots} from "vue";
-
-const {
-  data = [],
-  showOverflowTooltip = true,
-  api = null,
-  apiConfig = {immediate: true},
-  ...props
-} = defineProps<AxTableProps>()
-const attrs = useAttrs();
-const slots = useSlots();
-const [result, requestApi] = useFetch(null, apiConfig);
-provide("requestApi", requestApi);
-const tableProps = useDefineProps(props)
-const tableRef = ref<TableInstance>();
-const _data = computed(() => {
-  if (result.value) {
-    if (slots.footer) {
-      return result.value?.data?.data || []
-    }
-    return result.value?.data || []
-  }
-  return data;
-})
-const _loading = computed(() => {
-  return requestApi.getConfig().loading || false;
-})
-const getElTable = () => {
-  return tableRef.value as TableInstance;
-}
-onMounted(() => {
-  if (api) {
-    requestApi.setApi(api);
-  }
-})
-defineExpose({
-  getElTable,
-  ...requestApi,
-})
-
-</script>
-<style scoped lang="scss">
-:deep(.ax-table__header) {
-  background: var(--el-fill-color-lighter) !important;
-}
-</style>

package/src/table/components/table-column/index.ts

@@ -1,6 +0,0 @@
-import tableColumn from './table-column.vue';
-
-export const AxTableColumn = tableColumn;
-export type AxTableColumnInstance = InstanceType<typeof tableColumn>;
-export default AxTableColumn;
-export * from './props';

package/src/table/components/table-column/props.ts

@@ -1,26 +0,0 @@
-import type {TableColumnCtx} from "element-plus";
-
-/**
- * AxTableColumns 表格列组件属性接口
- * 继承自 Element Plus TableColumnCtx，扩展了自定义列类型和组件配置功能
- * @template T - 表格行数据类型，必须是对象类型
- */
-export interface AxTableColumnsProps<T extends Record<string, any>= any> extends Partial<TableColumnCtx<T>>{
-    /**
-     * 列类型，决定该列的渲染方式
-     * @example
-     * - 'index': 索引列（显示行号）
-     * - 'selection': 选择列（复选框）
-     * - 'expand': 展开列（展开行内容）
-     * - 'custom': 自定义列（使用自定义组件渲染）
-     */
-    type?:string,
-
-    /**
-     * 自定义组件的属性配置
-     * 当列使用自定义组件渲染时，透传给该组件的属性
-     * @example
-     * componentProps: { color: 'red', size: 'large' }
-     */
-    componentProps?:Record<string, any>
-}

package/src/table/components/table-column/table-column.vue

@@ -1,31 +0,0 @@
-<template>
-  <ElTableColumn v-bind="columnProps" :type="type">
-    <template #default="rowData" v-if="Column">
-      <Column v-bind="componentProps" :rowData="rowData"/>
-    </template>
-  </ElTableColumn>
-</template>
-
-<script setup lang="ts">
-import {ElTableColumn} from "element-plus";
-import type {AxTableColumnsProps} from "./props";
-import {useDefineProps} from "@aoao-y33/hooks";
-import {computed} from "vue";
-import {tableColumnFields} from "@/table";
-
-const DEFAULT_TYPE = ['default', 'expand', 'selection', 'index'];
-defineOptions({name: 'AxTableColumn'});
-
-const {type = 'default', componentProps = {}, ...props} = defineProps<AxTableColumnsProps>()
-const columnProps = useDefineProps(props);
-const Column = computed(() => {
-  if (DEFAULT_TYPE.includes(type)) {
-    return null;
-  }
-  return tableColumnFields[type];
-})
-</script>
-
-<style scoped>
-
-</style>

package/src/table/components/table-page/index.ts

@@ -1,6 +0,0 @@
-import page from './table-page.vue';
-
-export const AxTablePage = page;
-export default AxTablePage;
-export type AxTablePageInstance = InstanceType<typeof page>;
-export * from './props';

package/src/table/components/table-page/props.ts

@@ -1,48 +0,0 @@
-import type {PaginationProps} from "element-plus";
-import type {EmitsToEventProps} from "@aoao-y33/utils";
-
-/**
- * AxTablePage 表格分页组件属性接口
- * 继承自 Element Plus PaginationProps，扩展了自定义参数名配置
- */
-export interface AxTablePageProps extends Partial<PaginationProps> {
-    /**
-     * 页码参数名
-     * 用于自定义发送给后端的页码字段名称
-     * @default 'pageNum' 或 'page'
-     * @example 'currentPage', 'pageIndex'
-     */
-    paramNo?: string,
-
-    /**
-     * 每页条数参数名
-     * 用于自定义发送给后端的每页显示数量字段名称
-     * @default 'pageSize' 或 'size'
-     * @example 'currentSize', 'limit'
-     */
-    paramSize?: string
-}
-
-/**
- * AxTablePage 表格分页组件事件发射接口
- */
-export interface AxTablePageEmits {
-    /**
-     * 页码变化事件
-     * @param data - 新的页码值
-     */
-    'change-page': [data: number]
-
-    /**
-     * 每页显示条数变化事件
-     * @param data - 新的每页条数值
-     */
-    'change-size': [data: number]
-}
-
-/**
- * AxTablePage 表格分页配置选项接口
- * 整合了分页属性和事件处理函数
- */
-export interface AxTablePageOptions extends AxTablePageProps, Partial<EmitsToEventProps<AxTablePageEmits>> {
-}

package/src/table/components/table-page/table-page.vue

@@ -1,51 +0,0 @@
-<template>
-  <ElPagination v-bind="pageProps"
-                v-model:current-page="pageParams[paramNo]"
-                v-model:page-size="pageParams[paramSize]"
-                :total="_total"></ElPagination>
-</template>
-
-<script setup lang="ts">
-import type {AxTablePageEmits, AxTablePageProps} from './props';
-import {ElPagination} from "element-plus";
-import {type FetchApi, useDefineProps} from "@aoao-y33/hooks";
-import {computed, inject, reactive, watch} from "vue";
-import {bus} from "@aoao-y33/utils";
-
-defineOptions({name: 'AxTablePage'})
-
-const {paramNo = 'no', paramSize = 'size', total = 0, ...props} = defineProps<AxTablePageProps>()
-const pageProps = useDefineProps(props, {
-  background: true,
-  layout: 'prev,pager,next,jumper,sizes,total',
-})
-const emits = defineEmits<AxTablePageEmits>()
-const pageParams = reactive({}) as Record<typeof paramNo | typeof paramSize, number>;
-pageParams[paramNo] = 1;
-pageParams[paramSize] = 20;
-const requestApi = inject('requestApi') as FetchApi<typeof pageParams & any, any>
-requestApi.setParams(pageParams)
-const _total = computed(() => {
-  return requestApi.get()?.data?.total || total
-})
-watch(() => pageParams[paramNo], (no: number) => {
-  emits("change-page", no);
-  requestApi.setParams(pageParams, true);
-})
-watch(() => pageParams[paramSize], (size: number) => {
-  emits("change-size", size);
-  if (pageParams[paramNo] === 1) {
-    requestApi.setParams(pageParams, true);
-  } else {
-    pageParams[paramNo] = 1;
-  }
-})
-bus.on("search", (data) => {
-  requestApi.setParams(data);
-  pageParams[paramNo] = 1;
-})
-</script>
-
-<style scoped>
-
-</style>

package/src/table/components/table-select/index.ts

@@ -1,6 +0,0 @@
-import tableSelect from './table-select.vue';
-
-export * from './props';
-export const AxTableSelect = tableSelect;
-export type AxTableSelectInstance = InstanceType<typeof tableSelect>;
-export default AxTableSelect;

package/src/table/components/table-select/props.ts

@@ -1,79 +0,0 @@
-import type {AxFormItemOptions, AxFormProps} from "@/form";
-import type {AxButtonOptions, AxButtonProps} from "@/button";
-import type {FieldsConfig} from "@aoao-y33/hooks";
-import type {EmitsToEventProps} from "@aoao-y33/utils";
-import type {Component} from "vue";
-
-/**
- * AxTableSelect 表格搜索组件属性接口
- * 继承自 AxFormProps，排除了 api 和 apiConfig（搜索组件不直接处理数据提交）
- * 用于配置表格上方的搜索表单区域
- */
-export interface AxTableSelectProps extends Omit<AxFormProps, 'api' | 'apiConfig'> {
-    /** 重置按钮的配置项，用于自定义重置按钮的外观和行为 */
-    resetButton?: AxButtonProps,
-
-    /**
-     * 是否启用折叠功能
-     * 当搜索字段较多时，可以折叠显示部分字段，提升界面简洁度
-     * @default false
-     */
-    isRest?: boolean
-}
-
-/**
- * AxTableSelect 表格搜索组件事件发射接口
- * @template T - 搜索条件数据类型
- */
-export interface AxTableSelectEmits<T extends Record<string, any> = any> {
-    /**
-     * 搜索事件，点击搜索按钮或触发搜索时发射
-     * @param data - 当前搜索表单的数据
-     */
-    search: [data: T]
-
-    /** 重置事件，点击重置按钮时发射，清空所有搜索条件 */
-    reset: []
-
-    /**
-     * 搜索条件变化事件，表单字段值改变时实时发射
-     * @param data - 变化后的搜索数据
-     */
-    change: [data: T]
-}
-
-/**
- * AxTableSelect 表格搜索配置选项接口
- * 整合了搜索表单属性、事件、字段配置、按钮配置和扩展插槽
- * @template T - 搜索条件数据类型
- */
-export interface AxTableSelectOptions<T extends Record<string, any> = any>
-    extends AxTableSelectProps, Partial<EmitsToEventProps<AxTableSelectEmits<T>>> {
-    /**
-     * 搜索字段配置映射表，用于定义搜索表单中的各个字段（输入框、下拉框、日期选择器等）
-     * @see FieldsConfig - 字段配置类型
-     * @see AxFormItemOptions - 表单项选项类型
-     */
-    fieldConfig?: FieldsConfig<AxFormItemOptions>
-
-    /**
-     * 按钮配置映射表，用于配置搜索区域的按钮（搜索、重置等）
-     * @see FieldsConfig - 字段配置类型
-     * @see AxButtonOptions - 按钮选项类型
-     */
-    buttonConfig?: FieldsConfig<AxButtonOptions>
-
-    /**
-     * 展开插槽组件，用于在搜索区域展开显示额外的内容或高级搜索选项
-     * @example
-     * expandSlot: AdvancedSearchComponent
-     */
-    expandSlot?: Component
-
-    /**
-     * 折叠阈值，控制超过多少个字段后自动启用折叠功能
-     * @default 3 或 4
-     * @example over: 2  // 超过2个字段时显示展开/折叠按钮
-     */
-    over?: number
-}

package/src/table/components/table-select/table-select.vue

@@ -1,70 +0,0 @@
-<template>
-  <AxForm v-bind="formProps"
-          ref="formRef"
-          :submit-button="_submitButton"
-          :inline="true" @submit="onSearch">
-    <slot></slot>
-    <slot name="expand"></slot>
-    <template #button v-if="isRest||slots.button">
-      <ax-button @click="onReset" v-bind="_resetButton" v-if="isRest"></ax-button>
-      <slot name="button"></slot>
-    </template>
-  </AxForm>
-</template>
-
-<script setup lang="ts">
-import type {AxTableSelectProps, AxTableSelectEmits} from "./props";
-import {type FetchApi, useDefineProps} from "@aoao-y33/hooks";
-import {AxForm, type AxFormInstance, useFormExpose} from "@/form";
-import {AxButton} from "@/button";
-import {inject, nextTick, onMounted, type Ref, ref, useSlots} from "vue";
-import {bus} from "@aoao-y33/utils";
-
-defineOptions({name: 'ax-table-select'})
-
-const {
-  resetButton = {},
-  isRest = true,
-  submitButton = {},
-  ...props
-} = defineProps<AxTableSelectProps>();
-const formProps = useDefineProps(props);
-const emits = defineEmits<AxTableSelectEmits>();
-const slots = useSlots();
-const _submitButton = useDefineProps(submitButton, {
-  text: "查询",
-  icon: "Search",
-});
-const _resetButton = useDefineProps(resetButton, {
-  text: "重置",
-  icon: "Refresh"
-});
-
-const formRef = ref<AxFormInstance>() as Ref<AxFormInstance>;
-const formApi = useFormExpose(formRef);
-const requestApi = inject("requestApi") as FetchApi<Record<string, any>, any>
-
-const onSearch = (data: any) => {
-  bus.emit("search", data);
-  nextTick(() => {
-    requestApi.load(data);
-  })
-  emits("search", data);
-}
-const onReset = () => {
-  formApi.resetValues();
-}
-
-onMounted(() => {
-  const defaultValue = formApi.getValues();
-  requestApi.setParams(defaultValue);
-})
-
-defineExpose({
-  ...formApi,
-})
-</script>
-
-<style scoped>
-
-</style>

package/src/table/hoc/index.ts

@@ -1,2 +0,0 @@
-export * from './useTable';
-export * from './useTableExpose';

package/src/table/hoc/useTable.ts

@@ -1,206 +0,0 @@
-import {
-    AxTable,
-    AxTableColumn,
-    useTableExpose,
-    type AxTableColumnsProps,
-    type AxTableOptions,
-    AxTablePage, AxTableSelect
-} from "@/table";
-import {useComponentPool, useState} from "@aoao-y33/hooks";
-import {omit} from "lodash";
-import {type Component, defineComponent, h, ref, shallowRef} from "vue";
-import {AxFormItem, type AxFormItemOptions, useFormExpose, useFormFetch} from "@/form";
-import {AxButton, type AxButtonOptions} from "@/button";
-
-/**
- * 表格 Hook，用于创建功能完整的高级表格组件
- *
- * 该 Hook 封装了表格的核心逻辑，包括：
- * - 表格数据展示和分页
- * - 搜索表单（支持动态字段配置）
- * - 工具栏按钮（新增、删除、导出等）
- * - 表格列配置（支持动态列）
- * - 折叠/展开搜索区域
- * - 数据请求和状态管理
- *
- * @param options - 表格初始配置选项
- * @returns [Table 组件, Table API] 元组
- *
- * @example
- * const [Table, tableApi] = useTable({
- *   api: getUserList,
- *   columnConfig: {
- *     username: { label: '用户名', prop: 'username' },
- *     email: { label: '邮箱', prop: 'email' }
- *   },
- *   searchConfig: {
- *     fieldConfig: {
- *       keyword: { label: '关键词', type: 'input' }
- *     },
- *     over: 2  // 超过2个字段显示折叠按钮
- *   },
- *   toolConfig: {
- *     add: { text: '新增', onClick: handleAdd }
- *   },
- *   pageConfig: { pageSize: 10 }
- * })
- *
- * // 在模板中使用
- * <Table />
- *
- * // 通过 API 操作表格
- * tableApi.requestApi.fetch()        // 刷新数据
- * tableApi.setTable({ data: [] })    // 更新表格属性
- * tableApi.toolsApi.addField(...)    // 动态添加工具栏按钮
- */
-export function useTable<T extends Record<string, any>, R extends Record<string, any> = any>(options: AxTableOptions<T, R> = {}) {
-    // 创建表格属性状态，排除各子模块的独立配置
-    const [props, setTable] = useState(omit(options, ['columnConfig', 'pageConfig', 'toolConfig', 'searchConfig']));
-
-    // 创建分页配置状态
-    const [pageConfig, setPage] = useState(options.pageConfig || null);
-
-    // 创建搜索表单属性状态，排除内部管理的配置项
-    const [selectConfig, setSearch] = useState(omit(options.searchConfig, ['buttonConfig', 'fieldConfig', 'expandSlot']));
-
-    // 使用 shallowRef 存储展开插槽组件，避免深层响应式开销
-    const expandSlot = shallowRef(options.searchConfig?.expandSlot);
-
-    // 创建表格列组件池，用于管理和渲染表格的各个列
-    const [Columns, columnsApi] = useComponentPool<AxTableColumnsProps>(AxTableColumn, options.columnConfig);
-
-    // 创建工具栏按钮组件池，用于管理和渲染表格上方的操作按钮
-    const [Tools, toolsApi] = useComponentPool<AxButtonOptions>(AxButton, options.toolConfig);
-
-    // 创建搜索表单字段组件池，用于管理和渲染搜索区域的表单项
-    const [SearchFields, fieldsApi] = useComponentPool<AxFormItemOptions>(AxFormItem, options.searchConfig?.fieldConfig);
-
-    // 创建搜索表单按钮组件池，用于管理和渲染搜索区域的按钮（搜索、重置）
-    const [SearchButtons, buttonsApi] = useComponentPool<AxButtonOptions>(AxButton, options.searchConfig?.buttonConfig);
-
-    // 创建表格引用，用于访问表格实例的方法
-    const tableRef = ref();
-
-    // 创建搜索表单引用，用于访问表单实例的方法
-    const searchRef = ref();
-
-    // 获取搜索表单暴露的 API（验证、重置、获取数据等方法）
-    const searchApi = useFormExpose<R>(searchRef);
-
-    // 获取表格数据请求 API（支持传入搜索条件作为请求参数）
-    const requestApi = useFormFetch<T, R>(tableRef);
-
-    // 获取表格暴露的 API（排序、筛选、选择等方法）
-    const tableApi = useTableExpose(tableRef);
-
-    /**
-     * 分页组件定义
-     * 渲染 AxTablePage 分页组件
-     */
-    const Page = defineComponent({
-        setup() {
-            return () => h(AxTablePage, {...pageConfig.value})
-        }
-    })
-
-    /**
-     * 默认展开/折叠按钮组件定义
-     * 如果提供了自定义展开插槽则使用自定义组件，否则显示默认的"展开/收起"文本按钮
-     */
-    const defaultExpand = defineComponent({
-        setup() {
-            if (expandSlot.value) {
-                console.log('xx')
-                return () => h(expandSlot.value);
-            }
-            return () => h('span',
-                {
-                    class: 'text-[14px] cursor-pointer text-(--el-color-primary) mr-2',
-                    onClick: () => {
-                        // 切换字段的展开/折叠状态
-                        fieldsApi.expand(!fieldsApi.configInfo().expand)
-                    }
-                },
-                !fieldsApi.configInfo().expand ? "展开" : "收起"
-            );
-        }
-    })
-
-    /**
-     * 搜索表单组件定义
-     * 整合搜索字段、按钮和展开/折叠功能
-     */
-    const Search = defineComponent({
-        setup() {
-            const slots: Record<string, Component> = {};
-
-            // 如果存在搜索字段配置，创建默认插槽
-            if (fieldsApi.getList().length) {
-                slots['default'] = () => h(SearchFields);
-            }
-
-            // 如果存在搜索按钮配置，创建按钮插槽
-            if (buttonsApi.getList().length) {
-                slots['button'] = () => h(SearchButtons);
-            }
-
-            // 如果配置了折叠阈值，启用展开/折叠功能
-            if (selectConfig.value.over != undefined) {
-                fieldsApi.config({over: selectConfig.value.over})
-                slots['expand'] = () => h(defaultExpand)
-            }
-
-            // 渲染 AxTableSelect 搜索组件
-            return () => h(AxTableSelect, {ref: searchRef, ...selectConfig.value}, slots)
-        }
-    })
-
-    /**
-     * 主表格组件定义
-     * 整合表格列、工具栏、分页和搜索区域
-     */
-    const Table = defineComponent({
-        setup() {
-            const slots: Record<string, any> = {};
-
-            // 如果存在列配置，创建默认插槽（表格列）
-            if (columnsApi.getList().length) {
-                slots['default'] = () => h(Columns);
-            }
-
-            // 如果存在工具栏配置，创建工具栏插槽
-            if (toolsApi.getList().length) {
-                slots['tool'] = () => h(Tools);
-            }
-
-            // 如果存在分页配置，创建底部插槽（分页组件）
-            if (pageConfig.value) {
-                slots['footer'] = () => h(Page);
-            }
-
-            // 如果存在搜索配置，创建搜索插槽
-            if (selectConfig.value) {
-                slots['search'] = () => h(Search);
-            }
-
-            // 渲染 AxTable 表格组件
-            return () => h(AxTable, {
-                ref: tableRef,
-                ...props.value
-            }, slots);
-        }
-    })
-
-    // 返回表格组件和完整的 API 集合
-    return [Table, {
-        setTable,      // 更新表格属性
-        setPage,       // 更新分页配置
-        setSearch,     // 更新搜索表单属性
-        toolsApi,      // 工具栏按钮管理 API
-        searchApi,     // 搜索表单 API
-        buttonsApi,    // 搜索按钮管理 API
-        fieldsApi,     // 搜索字段管理 API
-        ...requestApi, // 数据请求 API（fetch、submit 等）
-        ...tableApi    // 表格控制 API（排序、筛选、选择等）
-    }] as const;
-}

package/src/table/hoc/useTableExpose.ts

@@ -1,46 +0,0 @@
-import type {Ref} from "vue";
-import type {AxTableInstance} from "@/table";
-
-/**
- * TableApi 类型定义
- * 由 useTableExpose 函数返回的 API 对象类型
- */
-export type TableApi = ReturnType<typeof useTableExpose>
-
-/**
- * 表格暴露 API Hook，用于获取和控制表格实例的方法
- *
- * 该 Hook 提供了访问底层表格实例的能力，包括：
- * - 获取 Element Plus 原生 ElTable 实例
- * - 可调用 ElTable 的所有方法（如 clearSort、clearFilter、toggleRowSelection 等）
- *
- * @param table - 表格组件的 Ref 引用，指向 AxTableInstance 实例
- * @returns 包含表格控制方法的 API 对象
- *
- * @example
- * const tableRef = ref<AxTableInstance>();
- * const tableApi = useTableExpose(tableRef);
- *
- * // 获取原生 ElTable 实例
- * const elTable = tableApi.getElTable()
- *
- * // 调用 ElTable 的原生方法
- * elTable?.clearSort()              // 清除排序
- * elTable?.clearFilter()            // 清除筛选
- * elTable?.toggleAllSelection()     // 切换全选状态
- * elTable?.setCurrentRow(row)       // 设置当前行
- */
-export function useTableExpose(table: Ref<AxTableInstance>) {
-    /**
-     * getElTable
-     * 可用于访问 ElTable 的所有原生方法和属性
-     * @returns ElTable 实例
-     */
-    const getElTable = () => {
-        return table.value.getElTable();
-    }
-
-    return {
-        getElTable,
-    }
-}

package/src/table/index.ts

@@ -1,7 +0,0 @@
-export * from './components/fields';
-export * from './components/table';
-export * from './components/table-column';
-export * from './components/table-page';
-export * from './components/table-select';
-export * from './hoc';
-export * from './utils';