@ditari/bsui 1.1.47 → 5.0.1

package/src/components/tab/style/index.scss

@@ -0,0 +1,176 @@
+@mixin tab-dividers {
+  .tab-dividers {
+    &::before {
+      opacity: 0;
+    }
+  }
+}
+
+.d-tabs-nav {
+  .ant-tabs-nav {
+    margin-bottom: 0 !important;
+
+    &:before {
+      border-bottom-width: 0;
+    }
+  }
+
+  .ant-tabs-nav-operations {
+    display: none !important;
+  }
+
+  .ant-tabs-nav-list {
+    .ant-tabs-tab {
+      position: relative;
+      // 要隐藏动画，否则切换激活的时候背景色有延迟
+      transition: none !important;
+      border: 0;
+
+      &:first-child {
+        margin-left: 20px;
+
+        .tab-dividers {
+          &::before {
+            opacity: 0;
+          }
+        }
+      }
+
+      &:nth-last-child(2) {
+        margin-right: 20px;
+      }
+
+      &:before,
+      &:after {
+        position: absolute;
+        bottom: -1px;
+        content: "";
+        width: 30px;
+        height: 30px;
+        border-radius: 100%;
+        box-shadow: 0 0 0 40px transparent;
+      }
+
+      &:before {
+        left: -30px;
+        clip-path: inset(50% -10px 0 50%);
+      }
+
+      &:after {
+        right: -30px;
+        clip-path: inset(50% 50% 0 -10px);
+      }
+
+      &.ant-tabs-tab-active {
+        // 如果当前标签被激活，那么隐藏分割线
+        @include tab-dividers;
+        border-radius: 10px 10px 0 0 !important;
+
+        &:before,
+        &:after {
+          z-index: 10;
+          box-shadow: 0 0 0 30px #fff;
+        }
+      }
+
+      &:hover {
+        &:not(.ant-tabs-tab-active) {
+          .tab-hover-bg {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: -1;
+
+            &:before {
+              content: "";
+              width: 100%;
+              height: 25px;
+              border-radius: 6px;
+            }
+          }
+
+          @include tab-dividers;
+
+          & + .ant-tabs-tab {
+            @include tab-dividers;
+          }
+        }
+      }
+
+      &:not(.ant-tabs-tab-active) {
+        .close-btn {
+          color: white;
+        }
+
+        .tab-item {
+          color: #fff;
+        }
+      }
+    }
+
+    // 由于 + 是相邻兄弟选择器， 将紧跟在ant-tabs-tab-active后的ant-tabs-tab也隐藏分割线
+    .ant-tabs-tab-active + .ant-tabs-tab {
+      @include tab-dividers;
+    }
+
+    .ant-tabs-tab-btn {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .tab-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .close-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      z-index: 20;
+    }
+
+    .anticon {
+      margin: 0;
+    }
+  }
+
+  .tab-item {
+    padding-right: 30px;
+  }
+
+  .tab-dividers {
+    position: absolute;
+    z-index: 0;
+    height: 14px;
+    left: -2px;
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 1px;
+      bottom: 0;
+      width: 2px;
+      opacity: 1;
+      background-color: #fff;
+      border-radius: 10px;
+      transition: opacity 0.2s ease,
+      background-color 0.3s;
+    }
+  }
+}

package/src/components/table/index.ts

@@ -0,0 +1,10 @@
+import Table from "./table";
+import type { App } from "vue";
+
+export * from "./table";
+
+Table.install = (app: App) => {
+  app.component(Table.name!, Table);
+};
+
+export default Table;

package/src/components/table/interface.ts

@@ -0,0 +1,59 @@
+// 分页配置
+export interface PaginationProps {
+  /** 默认的每页条数 */
+  defaultPageSize?: number; // default: 10
+
+  /** 禁用分页 */
+  disabled?: boolean; // default: false
+
+  /** 只有一页时是否隐藏分页器 */
+  hideOnSinglePage?: boolean; // default: false
+
+  /**
+   * 用于自定义页码的结构，可用于优化 SEO
+   * @param page 当前页码
+   * @param type 页码类型 ('page' | 'prev' | 'next')
+   * @param originalElement 默认的节点
+   * @returns 自定义的 VNode
+   */
+  itemRender?: (opt: {
+    page: number;
+    type: "page" | "prev" | "next" | "jump-prev" | "jump-next";
+    originalElement: unknown;
+  }) => unknown;
+
+  /** 每页条数（支持 v-model） */
+  pageSize?: number;
+
+  /** 指定每页可以显示的条数 */
+  pageSizeOptions?: (string | number)[]; // default: ['10', '20', '50', '100']
+
+  /** 当 size 未指定时，根据屏幕宽度自动调整尺寸 */
+  responsive?: boolean; // default: false
+
+  /** 是否显示较少页面内容 */
+  showLessItems?: boolean; // default: false
+
+  /** 是否可以快速跳转至某页 */
+  showQuickJumper?: boolean; // default: false
+
+  /** 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true */
+  showSizeChanger?: boolean;
+
+  /**
+   * 用于显示数据总量和当前数据顺序
+   * @param total 数据总数
+   * @param range 当前数据范围
+   * @returns 显示的文本内容
+   */
+  showTotal?: (total: number, range: [number, number]) => string;
+
+  /** 当添加该属性时，显示为简单分页 */
+  simple?: boolean; // default: false
+
+  /** 当为「small」时，是小尺寸分页 */
+  size?: "default" | "small";
+
+  /** 数据总数 */
+  total?: number; // default: 0
+}