@ditari/bsui 5.0.1 → 5.0.3

package/src/components/table/table.tsx

@@ -1,491 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  ref,
-  watch
-} from "vue";
-import { type ExtractPropTypes, type PropType } from "vue";
-import { Flex, Pagination, Table, theme } from "ant-design-vue";
-import { type TablePaginationConfig } from "ant-design-vue";
-
-import { type PaginationProps } from "./interface";
-import { css } from "@emotion/css";
-import type { ColumnsType } from "ant-design-vue/es/table";
-import type {
-  SelectionSelectFn,
-  TableRowSelection
-} from "ant-design-vue/es/table/interface";
-import { merge } from "lodash";
-
-export type Key = string | number;
-export type SizeType = "small" | "middle" | "large" | undefined;
-
-// 定义分页
-interface Page {
-  total: number;
-  current: number;
-  pageSize: number;
-}
-
-// 定义表格配置接口，支持泛型
-interface Config<T = unknown> {
-  columns: ColumnsType<T>;
-  // 分页
-  pagination?: Page | undefined;
-  // 分页配置
-  paginationConfig?: PaginationProps;
-  changePagination?: (current: number, size: number) => void;
-  // 单击
-  click?: (record: Record<string, unknown>, index: number) => void;
-  // 双击
-  dbClick?: (record: Record<string, unknown>, index: number) => void;
-  // 选择框的默认属性配置
-  getCheckboxProps?: (record: unknown) => Record<string, unknown> | undefined; // 返回一个对象或者 undefined
-  // 点击行号激活的class
-  activeRowClass?: string;
-  // 复选框方式
-  selection?: string;
-  // 切换分页是否保留选中的ID
-  keepSelected?: boolean;
-}
-
-// 定义 Props 类型，支持泛型
-export const tableProps = <T = unknown,>() => ({
-  height: { type: Number, default: 0 },
-  data: { type: Array as PropType<T[]>, default: () => [] }, // 泛型约束
-  loading: { type: Boolean, default: false },
-  rowKey: { type: String, default: "id" },
-  bordered: { type: Boolean, default: false },
-  size: { type: String as PropType<SizeType>, default: "small" },
-  keys: { type: Array as PropType<Key[]>, default: () => [] },
-  config: { type: Object as PropType<Config<T>>, required: true }
-});
-
-export type TableProps = Partial<
-  ExtractPropTypes<ReturnType<typeof tableProps>>
->;
-
-// 分页组件默认配置
-const defaultPaginationProps: PaginationProps = {
-  defaultPageSize: 20,
-  disabled: false,
-  hideOnSinglePage: false,
-  pageSize: 20,
-  pageSizeOptions: ["20", "40", "60", "80", "99"],
-  responsive: false,
-  showLessItems: false,
-  showQuickJumper: true,
-  showSizeChanger: true, // 默认展示切换器
-  showTotal: total => `总共 ${total} 条数据`,
-  simple: false,
-  size: "default",
-  total: 0
-};
-
-// 表格默认配置
-const defaultConfig: Config = {
-  columns: [],
-  pagination: undefined,
-  paginationConfig: defaultPaginationProps,
-  activeRowClass: "",
-  selection: "N",
-  keepSelected: false
-};
-
-const paginationStyle = css`
-  display: flex;
-  justify-content: center;
-`;
-
-// 定义泛型组件
-const DTable = defineComponent({
-  name: "DTable",
-  props: tableProps(), // 初始泛型设置为 `unknown`
-  emits: ["update:keys"],
-  setup(props, { emit, slots }) {
-    const { useToken } = theme;
-    const { token } = useToken();
-    console.log(token);
-    // 保存选中的唯一id
-    const selectedRowKeys = ref<Key[]>(props.keys || []);
-    // 计算表格高度
-    //const height = computed(() => props.height);
-
-    const { columns, data, pagination } = useProps();
-    const { tableSlots } = useSlots();
-    const { paginationConfig, onPaginationChange } = usePagination();
-    const { tableRef, tableHeight, antTableBodyRef } = useHeight();
-    const rowSelection = useRowSelection();
-
-    onMounted(() => {});
-
-    /**
-     * props计算属性处理
-     */
-    function useProps() {
-      // 定义计算属性
-      const _config = computed(() => merge({}, defaultConfig, props.config));
-      const columns = computed(() => _config.value.columns);
-      const data = computed(() => props.data || []);
-      const pagination = computed(() => _config.value.pagination || false);
-
-      return {
-        columns,
-        data,
-        pagination
-      };
-    }
-
-    /**
-     * 插槽处理
-     */
-    function useSlots() {
-      console.log(slots);
-      // 定义插槽
-      const tableSlots = {
-        bodyCell: (params: unknown) => slots.bodyCell?.(params),
-        summary: () => slots.summary?.()
-      };
-
-      return {
-        tableSlots
-      };
-    }
-
-    function useHeight() {
-      const tableRef = ref();
-      const tableHeight = ref(0);
-      let headerHeight = 0,
-        tableEl: HTMLElement;
-
-      // 表格body对象
-      const antTableBodyRef = ref<HTMLElement>();
-
-      watch(
-        () => props.height,
-        val => {
-          if (val !== 0) {
-            nextTick(() => {
-              _tableBodyHeight(val);
-            });
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-
-      function _tableBodyHeight(height: number) {
-        tableEl = tableRef?.value?.$el;
-        //表头高度
-        headerHeight = useEleHeight(
-          tableEl.getElementsByClassName("ant-table-header")[0]
-        );
-        // 分页
-        const paginationEl = tableEl.getElementsByClassName(
-          "ant-pagination"
-        )[0] as HTMLElement | undefined;
-        let paginationHeight = 0;
-        if (paginationEl) {
-          paginationEl.style.marginBottom = "0";
-          paginationHeight = useEleHeight(paginationEl as never) ?? 0;
-        }
-
-        //总结行
-        let summaryHeight = 0;
-        const summaryEl = tableEl.getElementsByClassName(
-          "ant-table-summary"
-        )[0] as HTMLElement | undefined;
-        if (summaryEl) {
-          summaryHeight = useEleHeight(summaryEl as HTMLElement) ?? 0;
-        }
-
-        tableHeight.value =
-          height - paginationHeight - headerHeight - summaryHeight;
-
-        antTableBodyRef.value = tableEl.getElementsByClassName(
-          "ant-table-body"
-        )[0] as HTMLElement;
-
-        if (antTableBodyRef.value) {
-          // 设置body高度
-          antTableBodyRef.value.style.height = tableHeight.value + "px";
-          //TODO antTableBodyRef 滚动到底部的时候，需要去除底部边框，否则边框会重叠
-          //antTableBodyRef.value.style.borderBottom = "1px solid #f0f0f0";
-        }
-      }
-
-      return {
-        tableRef,
-        tableHeight,
-        antTableBodyRef
-      };
-    }
-
-    function usePagination() {
-      const { changePagination } = props.config!;
-      const paginationConfig = computed<TablePaginationConfig>(() => {
-        return {
-          position: ["bottomCenter"], // 符合类型的分页位置
-          total: 0, // 确保符合要求
-          ...defaultPaginationProps,
-          ...pagination.value
-        };
-      });
-
-      const onPaginationChange = (page: number, pageSize: number) => {
-        const { selection, keepSelected } = props.config!;
-        changePagination?.(page, pageSize);
-        // 切换分页的时候，表体滚动到顶部
-        antTableBodyRef.value!.scrollTop = 0;
-
-        // 如果当前为单选或未开启分页保留数据选中的数据都会被清除
-        // 清空历史选中数据
-        if (selection === "S" || !keepSelected) {
-          // 只有selectedRowKeys被清空时，这里才触发update；
-          // 不加判断，会出现执行update后，父组件监听的watch每次都会触发
-          if (selectedRowKeys.value.length > 0) {
-            selectedRowKeys.value = [];
-            emit("update:keys", selectedRowKeys.value);
-          }
-        }
-      };
-
-      return {
-        paginationConfig,
-        onPaginationChange
-      };
-    }
-
-    function useCustomRow() {
-      return (record: never, index: number) => {
-        // 用于存储 在某个事件内双击两次 则取消单击事件业务
-        let clickTimeout: number = 0;
-        const {
-          rowKey,
-          config: { click, dbClick, selection, getCheckboxProps } = {} as Config
-        } = props;
-
-        // 当前点击行的唯一ID，通过rowKey从record中取值
-        const id = record[rowKey];
-
-        /**
-         * 处理单击事件业务
-         * @param record 当前点击行数据
-         */
-        const onClick = () => {
-          // 获取getCheckboxProps方法，如果不等于undefined，则执行方法获取disabled的值
-          // 否则checkEnable为false
-          const checkEnable =
-            getCheckboxProps === undefined
-              ? false
-              : getCheckboxProps(record)?.disabled;
-
-          if (selection === "N" || checkEnable) {
-            // 1. 未开启复选框 则不处理数据选中操作
-            // 2. 如果当前点击的行 包含在禁用的数据项目里面 则不进行选中操作
-            // 3. checkEnable 用来判断复选框属性的值，如果当前的数据满足getCheckboxProps这个
-            //    方法返回的disabled为true就不执行
-            //    复选框选中的操作
-            return;
-          }
-          const haveState = selectedRowKeys.value.some(
-            (key: Key) => key === id
-          );
-          if (haveState) {
-            //如果 当前点击行的ID 已存在 那么直接过滤掉当前的id
-            selectedRowKeys.value = selectedRowKeys.value.filter(
-              (key: Key) => key !== id
-            );
-          } else {
-            if (selection === "S") {
-              //单选的时候 清空选中的数据 再赋值新的ID
-              selectedRowKeys.value = [];
-              selectedRowKeys.value.push(id);
-            } else {
-              //多选直接追加ID
-              selectedRowKeys.value.push(id);
-            }
-          }
-          emit("update:keys", selectedRowKeys.value);
-        };
-
-        function activeRowBackground(event: Event) {
-          const { activeRowClass } = props.config!;
-          if (!activeRowClass) return;
-          const curEl = event.target;
-          if (curEl instanceof HTMLElement) {
-            const parentElement = curEl.parentNode as HTMLElement;
-            if (
-              parentElement &&
-              parentElement.classList.contains(activeRowClass)
-            ) {
-              parentElement.classList.remove(activeRowClass);
-            } else {
-              parentElement?.classList.add(activeRowClass);
-            }
-          }
-        }
-
-        return {
-          onClick: (event: Event) => {
-            clearTimeout(clickTimeout);
-            clickTimeout = window.setTimeout(() => {
-              // 处理背景激活逻辑
-              activeRowBackground(event);
-              // 处理单击事件业务
-              onClick();
-              // 回传数据 自定义单击后的业务
-              click?.(record, index);
-            }, 200);
-          }, // 点击行
-          onDblclick: () => {
-            clearTimeout(clickTimeout);
-            //  回传数据 自定义单击后的业务
-            dbClick?.(record, index);
-          }
-        };
-      };
-    }
-
-    function useRowSelection() {
-      const rowSelection = ref<TableRowSelection<unknown> | undefined>(
-        undefined
-      );
-
-      const { rowKey, config: { getCheckboxProps, selection } = {} } = props;
-
-      const onSelect: SelectionSelectFn<unknown> = (record, selected) => {
-        const data = record as Record<string, never>;
-        if (selection === "S") {
-          selectedRowKeys.value = [];
-          selectedRowKeys.value = selected ? [data[rowKey]] : [];
-        } else {
-          selectedRowKeys.value = selected
-            ? selectedRowKeys.value.concat(data[rowKey])
-            : selectedRowKeys.value.filter((key: Key) => key !== data[rowKey]);
-        }
-        emit("update:keys", selectedRowKeys.value);
-      };
-
-      const onChange = (rowKeys: Key[], selectedRows: unknown[]) => {
-        // 显式转换 selectedRows 的类型为 Record<string, never>[]
-        const data = selectedRows as Record<string, never>[];
-        // 等于0 说明是取消全选，反之
-        const selected = data.length !== 0;
-        // 显式转换 _ids 的类型为 Key[]
-        const _ids: Key[] = props.data.map(
-          record => (record as Record<string, unknown>)[rowKey] as Key
-        );
-
-        // 更新 selectedRowKeys
-        //  selected 为true，说明是全选，那么rowKeys是权限后的数组ID，需要过滤掉selectedRowKeys里的不在id才进行添加，
-        //  否则会出现，比如一开始选择了两条数据，然后再进行全选的话 会多出两个重复ID
-        // selected 为false，说明是取消全选，那么需要从selectedRowKeys过滤掉 _ids的id
-        selectedRowKeys.value = selected
-          ? selectedRowKeys.value.concat(
-              rowKeys.filter((key: Key) => !selectedRowKeys.value.includes(key))
-            )
-          : selectedRowKeys.value.filter((key: Key) => !_ids.includes(key));
-
-        emit("update:keys", selectedRowKeys.value);
-      };
-
-      // 监听父组件手动改变keys 重新赋值给 表格选中变量selectedRowKeys
-      // 否则父组件 改变keys后当前selectedRowKeys还是原来的值
-      watch(
-        () => props.keys,
-        val => {
-          selectedRowKeys.value = val;
-        }
-      );
-
-      watch(
-        () => props.config?.selection,
-        val => {
-          if (val !== "N") {
-            rowSelection.value = {
-              selectedRowKeys: selectedRowKeys as never,
-              onSelect,
-              onChange,
-              fixed: true,
-              columnTitle: selection === "S" ? "选择" : null,
-              columnWidth: selection === "S" ? 60 : 40,
-              getCheckboxProps: getCheckboxProps as never
-            };
-          } else {
-            rowSelection.value = undefined;
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-
-      return rowSelection;
-    }
-
-    return () => (
-      <Flex vertical={true} ref={tableRef}>
-        <Table
-          loading={props.loading}
-          size={props.size}
-          bordered={props.bordered}
-          dataSource={data.value}
-          columns={columns.value}
-          rowSelection={rowSelection.value}
-          customRow={useCustomRow() as never}
-          pagination={false}
-          rowKey={props.rowKey}
-          v-slots={tableSlots}
-          scroll={{
-            y: tableHeight.value,
-            x: "100%",
-            scrollToFirstRowOnChange: true
-          }}
-        />
-        <div class={paginationStyle}>
-          {pagination && (
-            <Pagination
-              style={{ marginTop: "16px" }}
-              v-model:current={paginationConfig.value.current}
-              v-model:pageSize={paginationConfig.value.pageSize}
-              total={paginationConfig.value.total}
-              disabled={props.loading}
-              show-size-changer
-              size={"default"}
-              hide-on-single-page={paginationConfig.value.hideOnSinglePage}
-              show-quick-jumper={paginationConfig.value.showQuickJumper}
-              default-page-size={paginationConfig.value.defaultPageSize}
-              page-size-options={paginationConfig.value.pageSizeOptions}
-              show-total={paginationConfig.value.showTotal}
-              onChange={onPaginationChange}
-            ></Pagination>
-          )}
-        </div>
-      </Flex>
-    );
-  }
-});
-
-export const useEleHeight = (node: Element) => {
-  const list = [
-    "margin-top",
-    "margin-bottom",
-    "border-top",
-    "border-bottom",
-    "padding-top",
-    "padding-bottom",
-    "height"
-  ];
-  const style = getComputedStyle(node);
-  return list
-    .map(k => parseInt(style.getPropertyValue(k), 10))
-    .reduce((prev, cur) => {
-      return prev + cur;
-    });
-};
-
-export default DTable;

package/src/index.scss

@@ -1 +0,0 @@
-@use "./components/tab/style" as *;

package/src/index.ts

@@ -1,31 +0,0 @@
-import * as components from "./components";
-import type { App, DefineComponent, Plugin } from "vue";
-
-// import { version } from "../package.json";
-
-export * from "./components";
-
-console.log(components);
-// 定义组件类型，确保每个组件都可能具有 `install` 方法
-type ComponentWithInstall = DefineComponent<never, never, never> & {
-  install?: (app: App) => void;
-};
-
-export const install = (app: App) => {
-  Object.keys(components).forEach(key => {
-    const component = components[
-      key as keyof typeof components
-    ] as ComponentWithInstall;
-    // 类型断言，告诉 TypeScript component 可能是一个插件
-    const plugin = component as Plugin;
-    // 如果组件有 install 方法，则按插件安装
-    if (plugin.install) {
-      app.use(plugin);
-    }
-  });
-};
-
-export default {
-  // version,
-  install
-};

package/tsconfig.app.json

@@ -1,29 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.json",
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    /* Linting */
-    "strict": true,
-    "noEmit": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "baseUrl": "./",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    }
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/tsconfig.node.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ESNext",
-    "lib": [
-      "dom",
-      "ESNext"
-    ],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": [
-    "vite.config.ts"
-  ]
-}

package/vite.config.ts

@@ -1,43 +0,0 @@
-import vue from "@vitejs/plugin-vue";
-import pluginVueJsx from "@vitejs/plugin-vue-jsx";
-import { resolve } from "path";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  build: {
-    lib: {
-      // 设置库的名称和入口文件
-      name: "ui-library",
-      entry: resolve(__dirname, "./src/index.ts")
-    },
-    rollupOptions: {
-      // 输出配置
-      output: [
-        {
-          format: "esm", // ESM 格式
-          dir: resolve(__dirname, "./dist/esm"), // ESM 模块的输出目录
-          preserveModules: true, // 保持模块化
-          entryFileNames: `[name].js`, // 每个组件的输出文件名
-          chunkFileNames: `[name].js`,
-          preserveModulesRoot: "src" // 保持源文件目录结构
-        },
-        {
-          format: "cjs", // CommonJS 格式
-          dir: resolve(__dirname, "./dist/cjs"),
-          preserveModules: true,
-          entryFileNames: `[name].js`,
-          chunkFileNames: `[name].js`,
-          exports: "named",
-          preserveModulesRoot: "src" // 保持源文件目录结构
-        }
-      ],
-      external: ["vue", "lodash"] // 外部依赖，避免被打包到库中
-    }
-  },
-  resolve: {
-    alias: {
-      "@": resolve(__dirname, "./src")
-    }
-  },
-  plugins: [vue(), pluginVueJsx()]
-});