@ditari/bsui 5.0.1 → 5.0.2

package/src/components/layout/list.tsx

@@ -1,137 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  ref,
-  watch
-} from "vue";
-import { Card, Flex, Space } from "ant-design-vue";
-import { useElementSize } from "@vueuse/core";
-
-import { css } from "@emotion/css";
-
-const tableRootStyle = css`
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-`;
-
-const list = defineComponent({
-  name: "DList",
-  emits: ["update:value", "change"],
-  setup(_, { slots }) {
-    const { tableRef, height, tableVisible, playTableHeight } =
-      useTableHeight();
-
-    const { formRef } = useForm();
-    // 使用 computed 来动态计算样式
-    const maskDivStyle = computed(() => {
-      return css`
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1;
-        background: white;
-        display: ${tableVisible.value ? "block" : "none"};
-      `;
-    });
-
-    const tableWrapperStyle = css`
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      overflow: hidden;
-    `;
-
-    onMounted(() => {
-      playTableHeight();
-    });
-
-    function useTableHeight() {
-      const tableRef = ref();
-      const height = ref(0);
-      const tableVisible = ref(true);
-
-      function playTableHeight() {
-        tableVisible.value = true;
-        height.value = tableRef?.value?.$el.offsetHeight;
-        nextTick(() => {
-          setTimeout(() => {
-            tableVisible.value = false;
-          }, 10);
-        });
-      }
-
-      return {
-        tableRef,
-        height,
-        tableVisible,
-        playTableHeight
-      };
-    }
-
-    function useForm() {
-      const formRef = ref(null);
-      const { height: formHeight } = useElementSize(formRef);
-      watch(
-        () => formHeight.value,
-        () => {
-          nextTick(() => {
-            playTableHeight();
-          });
-        }
-      );
-
-      return {
-        formRef
-      };
-    }
-
-    return () => (
-      <Flex vertical={true} style={{ height: "100%" }}>
-        {slots.form && (
-          <Card
-            ref={formRef}
-            style={{ marginBottom: "20px" }}
-            bodyStyle={{ padding: "24px 24px 0 24px" }}
-            bordered={false}
-          >
-            {slots.form()}
-          </Card>
-        )}
-
-        <Flex flex={1} vertical={true}>
-          <Card
-            style={{ height: "100%" }}
-            bodyStyle={{ height: "100%" }}
-            bordered={false}
-          >
-            <Flex style={{ height: "100%" }} vertical={true}>
-              <Space style={{ marginBottom: "20px" }}>{slots.tools?.()}</Space>
-              <Flex
-                ref={tableRef}
-                flex={1}
-                style={{ height: "100%" }}
-                vertical={true}
-              >
-                <div class={tableRootStyle}>
-                  <div class={maskDivStyle.value}></div>
-                  <div class={tableWrapperStyle}>
-                    {slots.table?.({ height: height.value })}
-                  </div>
-                </div>
-              </Flex>
-            </Flex>
-          </Card>
-        </Flex>
-      </Flex>
-    );
-  }
-});
-
-export default list;

package/src/components/layout/show.tsx

@@ -1,13 +0,0 @@
-import { defineComponent } from "vue";
-import { Flex } from "ant-design-vue";
-
-const list = defineComponent({
-  name: "DShow",
-  emits: ["update:value", "change"],
-  setup(_, { emit }) {
-    emit("update:value", "ddd");
-    return () => <Flex vertical={true}>show</Flex>;
-  }
-});
-
-export default list;

package/src/components/readme.md

@@ -1,4 +0,0 @@
-# 导出学习记录
-
-- export * from ''; 无法导出export default；只能导出export {}
-- export { default as ... } 可以显式导出 default

package/src/components/tab/Tab.vue

@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import { computed, type ComputedRef, h, ref } from "vue";
-import { theme } from "ant-design-vue";
-
-import { CloseOutlined, SearchOutlined } from "@ant-design/icons-vue";
-import { css } from "@emotion/css";
-import type { GlobalToken } from "ant-design-vue/es/theme/interface";
-
-const { token, tabsNavStyle, tabHoverBgStyle, closeBtnStyle } = useStyle();
-const { activeKey } = useTabState();
-
-function useStyle() {
-  const { useToken } = theme;
-  const { token }: { token: ComputedRef<GlobalToken> } = useToken();
-
-  const tabsNavStyle = computed(() => {
-    return css`
-      background: ${token.value.colorPrimary};
-      padding-top: 10px;
-    `;
-  });
-
-  const tabHoverBgStyle = computed(() => {
-    return css`
-      &:before {
-        background: ${token.value.colorPrimaryBgHover};
-      }
-    `;
-  });
-
-  const closeBtnStyle = computed(() => {
-    return css`
-      &:hover {
-        background: ${token.value.colorPrimaryBorderHover};
-        border-radius: 50%;
-      }
-    `;
-  });
-
-  return {
-    token,
-    tabsNavStyle,
-    tabHoverBgStyle,
-    closeBtnStyle
-  };
-}
-
-function useTabState() {
-  const activeKey = ref();
-  return {
-    activeKey
-  };
-}
-</script>
-<template>
-  <div class="tabs-nav-wrapper" :class="tabsNavStyle">
-    <div class="d-tabs-nav">
-      <a-tabs size="small" v-model:activeKey="activeKey" type="card" hide-add>
-        <template #leftExtra>
-          <div style="padding: 0 10px">
-            <a-popover placement="bottomRight">
-              <template #content>
-                <a-input :bordered="false" placeholder="搜索标签页">
-                  <template #prefix>
-                    <SearchOutlined />
-                  </template>
-                  <template #suffix>
-                    <span :style="{ color: token.colorTextTertiary }"
-                      >Ctrl+Shift+S</span
-                    >
-                  </template>
-                </a-input>
-              </template>
-              <a-button
-                size="small"
-                shape="circle"
-                :icon="h(SearchOutlined)"
-                title="搜索标签页"
-              />
-            </a-popover>
-          </div>
-        </template>
-        <a-tab-pane
-          :key="item"
-          :closable="false"
-          v-for="item in 50"
-          :class="{ active: activeKey === item }"
-        >
-          <template #tab>
-            <div class="tab-hover-bg" :class="tabHoverBgStyle"></div>
-            <div class="tab-dividers"></div>
-            <div class="tab-item">{{ item }}</div>
-            <div class="tab-close">
-              <div class="close-btn" :class="closeBtnStyle">
-                <CloseOutlined />
-              </div>
-            </div>
-          </template>
-        </a-tab-pane>
-      </a-tabs>
-    </div>
-  </div>
-</template>
-
-<style lang="scss"></style>

package/src/components/tab/index.ts

@@ -1,9 +0,0 @@
-import type { App } from "vue";
-
-import Tab from "./Tab.vue";
-
-Tab.install = (app: App) => {
-  app.component("DTab", Tab);
-};
-
-export default Tab;

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

@@ -1,176 +0,0 @@
-@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

@@ -1,10 +0,0 @@
-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

@@ -1,59 +0,0 @@
-// 分页配置
-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
-}