bkui-vue 0.0.1-beta.1 → 0.0.1-beta.13

package/lib/tab/tab.css

@@ -0,0 +1,147 @@
+.bk-tab {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+.bk-tab--top {
+  flex-direction: column;
+}
+.bk-tab--right {
+  flex-direction: row-reverse;
+}
+.bk-tab-header {
+  display: flex;
+  color: #63656e;
+}
+.bk-tab-header > div {
+  display: flex;
+  margin-bottom: -1px;
+  flex-wrap: nowrap;
+}
+.bk-tab--card .bk-tab-header > div,
+.bk-tab--border-card .bk-tab-header > div {
+  border-right: 1px solid #dcdee5;
+}
+.bk-tab--top .bk-tab-header-nav {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+.bk-tab--left .bk-tab-header-nav,
+.bk-tab--right .bk-tab-header-nav {
+  overflow-x: visible;
+  overflow-y: auto;
+}
+.bk-tab--card .bk-tab-header-nav,
+.bk-tab--border-card .bk-tab-header-nav {
+  border-left: 1px solid #dcdee5;
+}
+.bk-tab-header-nav::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab--left .bk-tab-header {
+  border-right: 1px solid #dcdee5;
+}
+.bk-tab--right .bk-tab-header {
+  border-left: 1px solid #dcdee5;
+}
+.bk-tab--left .bk-tab-header,
+.bk-tab--right .bk-tab-header {
+  flex-direction: column;
+}
+.bk-tab--left .bk-tab-header > div,
+.bk-tab--right .bk-tab-header > div {
+  flex-direction: column;
+}
+.bk-tab--card .bk-tab-header {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab--border-card .bk-tab-header {
+  background: #FAFBFD;
+  border: solid #dcdee5;
+  border-width: 1px 1px 1px 0;
+}
+.bk-tab--unborder-card .bk-tab-header {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab-header-item {
+  display: flex;
+  white-space: nowrap;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+.bk-tab-header-item:hover {
+  color: #3a84ff;
+}
+.bk-tab-header-item:hover .bk-tab-header-item-close {
+  display: block;
+  margin-left: 10px;
+  color: #ea3636;
+}
+.bk-tab--top .bk-tab-header-item {
+  padding: 0 20px;
+}
+.bk-tab--left .bk-tab-header-item,
+.bk-tab--right .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab--left .bk-tab-header-item {
+  text-align: right;
+}
+.bk-tab--card .bk-tab-header-item {
+  border-top: 1px solid #dcdee5;
+}
+.bk-tab--card .bk-tab-header-item,
+.bk-tab--border-card .bk-tab-header-item {
+  border-right: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab--card .bk-tab-header-item:last-of-type,
+.bk-tab--border-card .bk-tab-header-item:last-of-type {
+  border-right: none;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.bk-tab-header-item-close {
+  display: none;
+  color: #c4c6cc;
+}
+.bk-tab-header--active {
+  color: #3a84ff;
+}
+.bk-tab--card .bk-tab-header--active,
+.bk-tab--border-card .bk-tab-header--active {
+  border-bottom-color: white;
+}
+.bk-tab--unborder-card .bk-tab-header--active {
+  border-bottom: 2px solid #3a84ff;
+}
+.bk-tab--left .bk-tab-header--active {
+  border-right: 2px solid #3a84ff;
+}
+.bk-tab--right .bk-tab-header--active {
+  border-left: 2px solid #3a84ff;
+}
+.bk-tab-header--disabled {
+  color: #aaa;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.bk-tab-content {
+  flex: 1;
+  padding: 10px;
+}
+.bk-tab--border-card .bk-tab-content {
+  border: solid #dcdee5;
+  border-width: 0 1px 1px;
+}
+.bk-tab-panel {
+  height: 100%;
+}

package/lib/tab/tab.d.ts

@@ -0,0 +1,131 @@
+declare const _default: import("vue").DefineComponent<{
+    active: {
+        type: NumberConstructor | StringConstructor;
+    };
+    type: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    tabPosition: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    addable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    sortType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    labelHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    scrollStep: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    validateActive: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showHeader: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    changeOnHover: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    changeOnHoverDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+}, {
+    isMounted: import("vue").Ref<boolean>;
+    panels: import("vue").Ref<any[]>;
+}, unknown, {}, {
+    tabAdd(e: MouseEvent): void;
+    tabChange(name: string): void;
+    tabRemove(index: number, panel: any): void;
+    tabSort(dragTabIndex: number, dropTabIndex: number): void;
+    tabDrag(dragTabIndex: number, dragEvent: DragEvent): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "drag" | "add" | "add-panel" | "tab-change" | "close-panel" | "sort-change" | "on-drag-tab" | "remove" | "update:active" | "sort")[], "change" | "drag" | "sort" | "add" | "add-panel" | "tab-change" | "close-panel" | "sort-change" | "on-drag-tab" | "remove" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    active?: unknown;
+    type?: unknown;
+    tabPosition?: unknown;
+    closable?: unknown;
+    addable?: unknown;
+    sortable?: unknown;
+    sortType?: unknown;
+    labelHeight?: unknown;
+    scrollStep?: unknown;
+    extCls?: unknown;
+    validateActive?: unknown;
+    showHeader?: unknown;
+    changeOnHover?: unknown;
+    changeOnHoverDelay?: unknown;
+} & {
+    closable: boolean;
+    extCls: string;
+    showHeader: boolean;
+    type: string;
+    sortType: string;
+    addable: boolean;
+    sortable: boolean;
+    labelHeight: number;
+    scrollStep: number;
+    validateActive: boolean;
+    changeOnHover: boolean;
+    changeOnHoverDelay: number;
+    tabPosition: string;
+} & {
+    active?: string | number;
+}> & {
+    onDrag?: (...args: any[]) => any;
+    onChange?: (...args: any[]) => any;
+    onAdd?: (...args: any[]) => any;
+    "onAdd-panel"?: (...args: any[]) => any;
+    "onTab-change"?: (...args: any[]) => any;
+    "onClose-panel"?: (...args: any[]) => any;
+    "onSort-change"?: (...args: any[]) => any;
+    "onOn-drag-tab"?: (...args: any[]) => any;
+    onRemove?: (...args: any[]) => any;
+    "onUpdate:active"?: (...args: any[]) => any;
+    onSort?: (...args: any[]) => any;
+}, {
+    closable: boolean;
+    extCls: string;
+    showHeader: boolean;
+    type: string;
+    sortType: string;
+    addable: boolean;
+    sortable: boolean;
+    labelHeight: number;
+    scrollStep: number;
+    validateActive: boolean;
+    changeOnHover: boolean;
+    changeOnHoverDelay: number;
+    tabPosition: string;
+}>;
+export default _default;

package/lib/tab/tab.less

@@ -0,0 +1,221 @@
+@import '../styles/themes/themes.less';
+
+@tab-color: @default-color;
+@tab-border: @disable-color;
+@tab-active: @primary-color;
+@tab-header-bg: #FAFBFD;
+@tab-white: @white-color;
+@tab-gray: @light-gray;
+@tab-disable-color: #aaa;
+//.@{bk-prefix}-tab {
+@tab-prefix: bk-tab;
+//.@{tab-prefix} {
+.bk-tab {
+  position: relative;
+  display: flex;
+  width: 100%;
+
+  &--top {
+    flex-direction: column;
+  }
+
+  &--left {
+
+  }
+
+  &--right {
+    flex-direction: row-reverse;
+  }
+
+  &--card {
+
+  }
+
+  &--border-card {
+
+  }
+
+  &--unborder-card {
+
+  }
+
+  &-header {
+    display: flex;
+    color: @tab-color;
+
+    > div {
+      display: flex;
+      margin-bottom: -1px;
+      flex-wrap: nowrap;
+
+      .@{tab-prefix}--card &, .@{tab-prefix}--border-card & {
+        border-right: 1px solid @tab-border;
+      }
+    }
+
+    &-nav {
+      .@{tab-prefix}--top & {
+        overflow-x: auto;
+        overflow-y: visible;
+      }
+
+      .@{tab-prefix}--left &, .@{tab-prefix}--right & {
+        overflow-x: visible;
+        overflow-y: auto;
+      }
+
+      .@{tab-prefix}--card &, .@{tab-prefix}--border-card & {
+        border-left: 1px solid @tab-border;
+      }
+
+      //flex: 0 1 auto;
+      &::-webkit-scrollbar {
+        display: none;
+        width: 0;
+        height: 0;
+      }
+    }
+
+    &-operation {
+      //flex: 0 0 auto;
+      .@{tab-prefix}-header-item {
+        padding: 0 12px;
+      }
+    }
+
+
+    .@{tab-prefix}--left & {
+      border-right: 1px solid @tab-border;
+    }
+
+    .@{tab-prefix}--right & {
+      border-left: 1px solid @tab-border;
+    }
+
+    .@{tab-prefix}--left &, .@{tab-prefix}--right & {
+      flex-direction: column;
+
+      > div {
+        flex-direction: column;
+      }
+    }
+
+    .@{tab-prefix}--card & {
+      border-bottom: 1px solid @tab-border;
+    }
+
+    .@{tab-prefix}--border-card & {
+      background: @tab-header-bg;
+      border: solid @tab-border;
+      border-width: 1px 1px 1px 0;
+    }
+
+    .@{tab-prefix}--unborder-card & {
+      border-bottom: 1px solid @tab-border;
+    }
+
+    &-item {
+      display: flex;
+      white-space: nowrap;
+      cursor: pointer;
+      justify-content: center;
+      align-items: center;
+      //line-height: 42px;
+
+      &:hover {
+        color: @tab-active;
+
+        .@{tab-prefix}-header-item-close {
+          display: block;
+          margin-left: 10px;
+          color: @danger-color;
+        }
+      }
+
+      .@{tab-prefix}--top & {
+        padding: 0 20px;
+        //margin: -1px 0;
+      }
+
+      .@{tab-prefix}--left &, .@{tab-prefix}--right & {
+        //margin: 0 -1px;
+        padding: 0 12px;
+      }
+
+      .@{tab-prefix}--left & {
+        text-align: right;
+      }
+
+      .@{tab-prefix}--card & {
+        border-top: 1px solid @tab-border;
+      }
+
+      .@{tab-prefix}--card &, .@{tab-prefix}--border-card & {
+        border-right: 1px solid @tab-border;
+        border-bottom: 1px solid @tab-border;
+
+        &:last-of-type {
+          border-right: none;
+        }
+      }
+
+      .@{tab-prefix}-header-operation & {
+        padding-right: 12px;
+        padding-left: 12px;
+      }
+
+      &-close {
+        display: none;
+        color: @tab-gray;
+      }
+
+    }
+
+    &--active {
+      color: @tab-active;
+
+      .@{tab-prefix}--card &, .@{tab-prefix}--border-card & {
+        border-bottom-color: @tab-white;
+      }
+
+      .@{tab-prefix}--unborder-card & {
+        border-bottom: 2px solid @tab-active;
+      }
+
+      .@{tab-prefix}--left & {
+        border-right: 2px solid @tab-active;
+      }
+
+      .@{tab-prefix}--right & {
+        border-left: 2px solid @tab-active;
+      }
+
+    }
+
+    &--disabled {
+      //color: @disable-color;
+      color: @tab-disable-color;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+  }
+
+  &-content {
+    flex: 1;
+    padding: 10px;
+
+    .@{tab-prefix}--border-card & {
+      border: solid @tab-border;
+      border-width: 0 1px 1px;
+    }
+  }
+
+  &-panel {
+    height: 100%;
+  }
+
+
+}
+
+
+