@vue-ui-kit/ant 1.0.0

package/src/packages/styles/index.scss

@@ -0,0 +1,184 @@
+@import 'variables';
+
+.p-pane {
+  background-color: var(--p-theme-bg);
+  padding: 16px;
+  border-radius: 4px;
+}
+
+//region patch for env without unocss/tailwind/windicss
+.w-full {
+  width: 100%;
+}
+
+.h-0 {
+  height: 0;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-4px {
+  gap: 4px;
+}
+
+.gap-8px {
+  gap: 8px;
+}
+
+.pt-8px {
+  padding-top: 8px;
+}
+
+.px-16px {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.mt-4px {
+  margin-top: 4px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+//endregion
+
+//region P family styles
+.p-theme-bg {
+  background-color: var(--p-theme-bg);
+}
+
+.p-wrapper {
+  .p-form-wrapper {
+    z-index: 4;
+  }
+
+  .p-toolbar-wrapper {
+    box-shadow: 0 8px #fff;
+    border-radius: 0.5em 0.5em 0 0;
+    margin-bottom: -0.5em;
+  }
+
+  .ant-form {
+    .ant-form-item {
+      margin-bottom: 0;
+
+      .ant-form-item-label {
+        display: flex;
+        align-items: start;
+        justify-content: flex-end;
+
+        & > label {
+          white-space: break-spaces;
+          align-items: flex-start;
+          height: fit-content;
+          padding-top: 0.36em;
+
+          &:after {
+            padding-left: 4px;
+            margin-inline-start: unset;
+          }
+        }
+      }
+    }
+
+    &.ant-form-vertical {
+      .ant-form-item {
+        .ant-form-item-label {
+          justify-content: flex-start;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+
+  .ant-table-sticky-scroll {
+    visibility: hidden;
+  }
+
+  .ant-table-header.ant-table-sticky-holder {
+    //overflow: unset !important;
+
+    &:before {
+      content: '';
+      width: 100%;
+      position: absolute;
+      height: 22px;
+      display: block;
+      backdrop-filter: blur(2px);
+      top: -16px;
+    }
+  }
+
+  .ant-table-wrapper .ant-table-pagination.ant-pagination {
+    margin: unset;
+    padding: 16px 0;
+  }
+
+  .p-inner-scroll {
+    & > .ant-table-wrapper {
+      height: 100%;
+
+      & > .ant-spin-nested-loading {
+        height: 100%;
+
+        & > .ant-spin-container {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+
+          & > .ant-table {
+            //flex: 1;
+            //height: 0;
+            //overflow: auto;
+            /*border-radius: unset; 修复模糊问题 according to https://stackoverflow.com/questions/49349337/chrome-text-blur-with-overflow-yscroll-and-fixed-height*/
+            border-radius: unset;
+          }
+        }
+      }
+    }
+  }
+}
+
+//endregion
+
+@each $align in right center {
+  /**/
+  .p-content-align-#{$align}.ant-form-item .ant-form-item-control-input-content {
+    display: flex;
+    @if $align == right {
+      justify-content: flex-end;
+    } @else {
+      justify-content: center;
+    }
+    align-items: center;
+    text-align: #{$align};
+  }
+}

package/src/packages/styles/variables.scss

@@ -0,0 +1,3 @@
+:root {
+  --p-theme-bg: #fff;
+}

package/src/packages/utils/AFormatters.ts

@@ -0,0 +1,64 @@
+import { isArray, isFunction, isString, toNumber } from 'lodash-es';
+import { valued } from '@/utils/is';
+import { CellFuncArg, ColumnProps } from '#/antProxy';
+
+const emptyStr = `-`;
+export const antFormatters = {
+  toString: ({ cellValue }) => (cellValue ? (cellValue.toString?.() ?? emptyStr) : emptyStr),
+  // 格式化选项
+  formatByOptions: ({ cellValue }, options: IOption[], separator = ',') => {
+    if (cellValue === undefined || cellValue === null) {
+      return emptyStr;
+    }
+    // 多选时逗号分隔
+    if (isArray(cellValue)) {
+      if (cellValue.length > 0) {
+        const finder = options.filter((item) => cellValue.includes(item.value));
+        return finder.length ? finder.map((item) => item.label).join(separator) : emptyStr;
+      } else {
+        return emptyStr;
+      }
+    }
+    // 单选时
+    const finder = options.find((item) => item.value === cellValue);
+    return finder ? finder.label : emptyStr;
+  },
+  // 格式化性别
+  formatSex: ({ cellValue }) => {
+    return valued(cellValue) ? (toNumber(cellValue) === 1 ? '男' : '女') : emptyStr;
+  },
+};
+export const renderAntFormat = <D = Recordable>(
+  formatter: string | [string, ...Array<any>] | ((arg: CellFuncArg<D>) => any),
+  {
+    record,
+    index,
+    column,
+    field,
+  }: { record: D; index: number; field?: string; column: ColumnProps<D> },
+) => {
+  if (isString(formatter) && antFormatters[formatter]) {
+    const func = antFormatters[formatter];
+    return func({ row: record, rowIndex: index, cellValue: field ? record[field] : null });
+  } else if (isArray(formatter) && antFormatters[formatter[0]] && formatter.length > 1) {
+    const func = antFormatters[formatter[0]];
+    return func(
+      { row: record, rowIndex: index, cellValue: field ? record[field] : null },
+      ...formatter.slice(1),
+    );
+  } else if (isFunction(formatter)) {
+    return formatter({
+      row: record,
+      rowIndex: index,
+      cellValue: field ? record[field] : null,
+      column,
+    });
+  } else {
+    return field ? record[field] : null;
+  }
+};
+export const addFormatter = (
+  formatter: Record<string, (a: CellFuncArg, ...args: any[]) => any>,
+) => {
+  Object.assign(antFormatters, formatter);
+};

package/src/packages/utils/core.ts

@@ -0,0 +1,52 @@
+import { ColumnProps, Responsive } from '#/antProxy';
+import { TableColumnGroupType, TableColumnType } from 'ant-design-vue';
+import { isArray, isNumber, omit, zipObject } from 'lodash-es';
+import { valued } from '@/utils/is';
+
+export const cleanCol = (col: ColumnProps): TableColumnType | TableColumnGroupType<Recordable> => {
+  return {
+    dataIndex: col.field,
+    key: col.field,
+    title: col.title,
+    ...omit(col, ['children', 'slots', 'cellRender', 'formatter']),
+    children: col.children?.map((subCol) => cleanCol(subCol)),
+  };
+};
+
+export const defaultItemResponsive: Responsive = { xs: 24, sm: 24, md: 12, lg: 8, xl: 8, xxl: 6 };
+export const defaultLabelCol: Responsive = { xs: 12, sm: 5, md: 6, lg: 6, xl: 5, xxl: 4 }; //defaultItemResponsive对应的labelCol 大概4字
+export const labelColDict: Record<number, Responsive> = {
+  1: { xs: 12, sm: 5, md: 6, lg: 6, xl: 5, xxl: 4 },
+  2: { xs: 12, sm: 5, md: 6, lg: 6, xl: 5, xxl: 4 },
+  3: { xs: 12, sm: 5, md: 6, lg: 6, xl: 5, xxl: 5 },
+  4: { xs: 12, sm: 4, md: 6, lg: 9, xl: 7, xxl: 6 },
+  5: { xs: 12, sm: 4, md: 6, lg: 9, xl: 7, xxl: 6 },
+  6: { xs: 12, sm: 6, md: 8, lg: 10, xl: 7, xxl: 8 },
+  7: { xs: 12, sm: 6, md: 8, lg: 10, xl: 9, xxl: 9 },
+  8: { xs: 12, sm: 6, md: 8, lg: 10, xl: 7, xxl: 9 },
+  9: { xs: 12, sm: 6, md: 8, lg: 10, xl: 9, xxl: 10 },
+};
+export const get24rest = (exist: number[]) => {
+  /*24为一行，获取最后一行余数，为0则是24*/
+  const total = exist.reduce((prev, cur) => prev + cur, 0);
+  const rest = (24 - total) % 24;
+  const firstRest = rest === 0 ? 24 : rest < 0 ? 24 + rest : rest;
+  /*当其依然为1时使其为24*/
+  return firstRest > 1 ? firstRest : 24;
+};
+const resKeys = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+export const getButtonResponsive = (itemResponsive: number | Responsive[]) => {
+  const existResponsive: Responsive[] = isArray(itemResponsive)
+    ? itemResponsive
+    : isNumber(itemResponsive)
+      ? Array.from({ length: itemResponsive }, () => defaultItemResponsive)
+      : [];
+  return zipObject(
+    resKeys,
+    resKeys.map((key) =>
+      existResponsive.every((e) => valued(e[key]))
+        ? get24rest(existResponsive.map((e) => e[key]!))
+        : 24,
+    ),
+  );
+};

package/src/packages/utils/is.ts

@@ -0,0 +1,2 @@
+export const noValue = (val: any) => val === null || val === undefined || val === '';
+export const valued = (val: any) => !noValue(val);

package/src/packages/utils/treeHelper.ts

@@ -0,0 +1,72 @@
+interface TreeConfig {
+  children?: string;
+}
+
+type TreeDefaultHandler<T> = (
+  arent: null | ITreeAble<T>,
+  parent: ITreeAble<T>[],
+  treeData: (
+    item: T | ITreeAble<T>,
+    index?: number,
+    treeData?: ITreeAble<T>[],
+    paths?: string[],
+    parent?: null | ITreeAble<T>,
+    nodes?: Array<T | ITreeAble<T>>,
+  ) => any,
+  iterate: any,
+  context: string[],
+  path: Array<T | ITreeAble<T>>,
+  node: string,
+  parseChildren: TreeConfig,
+) => any;
+
+const helperCreateTreeFunc = <T extends Recordable>(handle: TreeDefaultHandler<T>) => {
+  return function (
+    treeData: ITreeAble<T>[],
+    iterate: (item: T | ITreeAble<T>) => any,
+    options?: TreeConfig,
+    context?: any,
+  ) {
+    const opts = options || {};
+    const optChildren = opts.children || 'children';
+    return handle(null, treeData, iterate, context, [], [], optChildren, opts);
+  };
+};
+const eachTreeItem = <T extends Recordable>(
+  parent: null | ITreeAble<T>,
+  treeData: ITreeAble<T>[],
+  iterate: (
+    item: T | ITreeAble<T>,
+    index?: number,
+    treeData?: ITreeAble<T>[],
+    paths?: string[],
+    parent?: null | ITreeAble<T>,
+    nodes?: Array<T | ITreeAble<T>>,
+  ) => any,
+  context: any,
+  path: string[],
+  node: Array<T | ITreeAble<T>>,
+  parseChildren: string,
+  opts: TreeConfig,
+) => {
+  let paths: string[], nodes: Array<T | ITreeAble<T>>;
+  treeData.forEach((item, index) => {
+    paths = path.concat(['' + index]);
+    nodes = node.concat([item]);
+    iterate.call(context, item, index, treeData, paths, parent, nodes);
+    if (item && parseChildren) {
+      paths.push(parseChildren);
+      eachTreeItem(
+        item,
+        item[parseChildren] || [],
+        iterate,
+        context,
+        paths,
+        nodes,
+        parseChildren,
+        opts,
+      );
+    }
+  });
+};
+export const eachTree = helperCreateTreeFunc(eachTreeItem);