@ccn-ui-kit/tabs 0.1.2

package/dist/packages/directives/index.d.ts

@@ -0,0 +1,2 @@
+export * from './loading';
+export * from './permission';

package/dist/packages/directives/loading/index.d.ts

@@ -0,0 +1,11 @@
+import { Directive } from 'vue';
+
+/**
+ * v-loading 指令
+ * 用法：
+ *   v-loading="true"                布尔开关
+ *   v-loading="'加载中...'"          字符串作为提示文案
+ *   v-loading.fullscreen="true"     全屏遮罩
+ * 内部复用 Loading 组件渲染遮罩。
+ */
+export declare const vLoading: Directive<HTMLElement>;

package/dist/packages/directives/permission/index.d.ts

@@ -0,0 +1,3 @@
+import { Directive } from 'vue';
+
+export declare const vPermission: Directive;

package/dist/packages/ui-kit/index.d.ts

@@ -0,0 +1,34 @@
+import { App } from 'vue';
+
+export declare function install(app: App): void;
+declare const _default: {
+    install: typeof install;
+};
+export default _default;
+export * from '../components/button';
+export * from '../components/input';
+export * from '../components/badge';
+export * from '../components/breadcrumb';
+export * from '../components/date-picker';
+export * from '../components/descriptions';
+export * from '../components/divider';
+export * from '../components/dropdown';
+export * from '../components/icon';
+export * from '../components/link';
+export * from '../components/loading';
+export * from '../components/menu';
+export * from '../components/message';
+export * from '../components/modal';
+export * from '../components/notification';
+export * from '../components/pagination';
+export * from '../components/popconfirm';
+export * from '../components/form';
+export * from '../components/table';
+export * from '../components/tree';
+export * from '../components/tabs';
+export * from '../components/rich-editor';
+export * from '../components/select';
+export * from '../components/space';
+export * from '../components/steps';
+export * from '../components/upload';
+export * from '../directives';

package/dist/packages/utils/dom.d.ts

@@ -0,0 +1,5 @@
+export declare function addClass(el: HTMLElement, cls: string): void;
+export declare function removeClass(el: HTMLElement, cls: string): void;
+export declare function hasClass(el: HTMLElement, cls: string): boolean;
+export declare function getScrollTop(el?: Element | Window): number;
+export declare function isServer(): boolean;

package/dist/packages/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './dom';
+export * from './vue-helper';
+export * from './types';

package/dist/packages/utils/types.d.ts

@@ -0,0 +1,7 @@
+export type Size = 'large' | 'medium' | 'small';
+export type Type = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+export interface Pagination {
+    page: number;
+    pageSize: number;
+    total: number;
+}

package/dist/packages/utils/vue-helper.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+
+export type SFCWithInstall<T> = T & {
+    install: (app: App) => void;
+};
+/**
+ * 给组件挂载 install 方法，使其可通过 app.use() 注册
+ */
+export declare function withInstall<T>(component: T, name: string): SFCWithInstall<T>;

package/dist/play/main.d.ts

@@ -0,0 +1 @@
+

package/dist/play/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@ccn-ui-kit/tabs",
+  "version": "0.1.2",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/packages/components/tabs/index.d.ts",
+  "files": [
+    "dist",
+    "style"
+  ],
+  "sideEffects": [
+    "**/*.scss"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/packages/components/tabs/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style": "./style/index.scss",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  }
+}

package/style/index.scss

@@ -0,0 +1,147 @@
+// 页签：default（下划线）/ card / border-card 三种类型
+.ui-tabs {
+  --ui-tabs-border-color: #e4e7ed;
+  font-size: var(--ui-font-size-base);
+  color: #303133;
+  box-sizing: border-box;
+}
+
+.ui-tabs__nav-wrap {
+  border-bottom: 1px solid var(--ui-tabs-border-color);
+}
+
+.ui-tabs__nav {
+  display: flex;
+  align-items: flex-end;
+}
+
+.ui-tabs__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  margin-right: 4px;
+  padding: 12px 16px;
+  border: none;
+  background: none;
+  font: inherit;
+  font-size: var(--ui-font-size-base);
+  color: #606266;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  transition: color 0.2s;
+
+  // 底部激活条（card 类型会隐藏）
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    height: 2px;
+    background: var(--ui-color-primary);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  &:hover {
+    color: var(--ui-color-primary);
+  }
+
+  &.is-active {
+    color: var(--ui-color-primary);
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &.is-disabled {
+    color: #c0c4cc;
+    cursor: not-allowed;
+
+    &:hover {
+      color: #c0c4cc;
+    }
+  }
+}
+
+.ui-tabs__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 4px;
+  font-size: 14px;
+  line-height: 1;
+  color: #909399;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: #c0c4cc;
+    color: #fff;
+  }
+}
+
+.ui-tabs__content {
+  padding: 16px 0;
+}
+
+// card：页签带独立边框
+.ui-tabs--card {
+  .ui-tabs__item {
+    border: 1px solid var(--ui-tabs-border-color);
+    border-bottom: none;
+    margin-right: -1px;
+    border-radius: var(--ui-border-radius-base) var(--ui-border-radius-base) 0 0;
+    background: #fff;
+
+    &::after {
+      display: none;
+    }
+
+    &.is-active {
+      color: var(--ui-color-primary);
+      border-bottom: 1px solid #fff;
+    }
+  }
+}
+
+// border-card：整表带边框，激活页签白底顶起
+.ui-tabs--border-card {
+  border: 1px solid var(--ui-tabs-border-color);
+  border-radius: var(--ui-border-radius-base);
+  overflow: hidden;
+
+  .ui-tabs__nav-wrap {
+    background: #f5f7fa;
+    border-bottom: 1px solid var(--ui-tabs-border-color);
+  }
+
+  .ui-tabs__item {
+    margin-right: 0;
+    border-radius: 0;
+    border-left: 1px solid var(--ui-tabs-border-color);
+
+    &:first-child {
+      border-left: none;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    &.is-active {
+      background: #fff;
+      color: var(--ui-color-primary);
+    }
+  }
+
+  .ui-tabs__content {
+    padding: 16px;
+    background: #fff;
+  }
+}