bkui-vue 0.0.1-beta.4 → 0.0.1-beta.400

package/lib/tab/tab-nav.d.ts

@@ -0,0 +1,169 @@
+declare const _default: import("vue").DefineComponent<{
+    tabAdd: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    tabChange: {
+        type: FunctionConstructor;
+        default: (name: string) => string;
+    };
+    tabRemove: {
+        type: FunctionConstructor;
+        default: (name: string) => string;
+    };
+    tabSort: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    tabDrag: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    active: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    panels: {
+        type: import("vue").PropType<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[]>;
+        default: () => any[];
+    };
+    tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+        default: "top" | "right" | "left";
+    };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    sortable: BooleanConstructor;
+    sortType: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+        default: "replace" | "insert";
+    };
+    labelHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    scrollStep: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    validateActive: 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;
+    };
+}, {
+    navs: import("vue").ComputedRef<any[]>;
+    dragenterIndex: import("vue").Ref<number>;
+    dragStartIndex: import("vue").Ref<number>;
+    draggingEle: import("vue").Ref<string>;
+    guid: string;
+    /**
+     * @description  判断拖动的元素是否是在同一个tab。
+     *               使用guid，相比 el1.parentNode === el2.parentNode 判断，性能要高
+     * @param e {event}  触发的元素
+     * @return {boolean}
+     */
+    handleTabAdd(e: any): void;
+    dragstart(index: number, $event: DragEvent): void;
+    dragenter(index: any): void;
+    dragend(): void;
+    drop(index: any, sortType: any): boolean;
+    handleTabChange(name: string): void;
+    handleTabRemove(index: number, panel: any): void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tabAdd: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    tabChange: {
+        type: FunctionConstructor;
+        default: (name: string) => string;
+    };
+    tabRemove: {
+        type: FunctionConstructor;
+        default: (name: string) => string;
+    };
+    tabSort: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    tabDrag: {
+        type: FunctionConstructor;
+        default: () => any;
+    };
+    active: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    panels: {
+        type: import("vue").PropType<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[]>;
+        default: () => any[];
+    };
+    tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+        default: "top" | "right" | "left";
+    };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    sortable: BooleanConstructor;
+    sortType: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+        default: "replace" | "insert";
+    };
+    labelHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    scrollStep: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    validateActive: 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;
+    };
+}>>, {
+    active: string | number;
+    closable: boolean;
+    sortType: "replace" | "insert";
+    tabAdd: Function;
+    tabChange: Function;
+    tabRemove: Function;
+    tabSort: Function;
+    tabDrag: Function;
+    panels: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[];
+    tabPosition: "top" | "right" | "left";
+    addable: boolean;
+    sortable: boolean;
+    labelHeight: number;
+    scrollStep: number;
+    validateActive: boolean;
+    changeOnHover: boolean;
+    changeOnHoverDelay: number;
+}>;
+export default _default;

package/lib/tab/tab-panel.d.ts

@@ -0,0 +1,68 @@
+declare const _default: import("vue").DefineComponent<{
+    name: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    label: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    visible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    renderDirective: import("vue-types").VueTypeDef<"if" | "show">;
+    panel: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    label: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    visible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    renderDirective: import("vue-types").VueTypeDef<"if" | "show">;
+    panel: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    });
+}>>, {
+    label: string | ((...args: any[]) => any);
+    name: string | number;
+    disabled: boolean;
+    visible: boolean;
+    closable: boolean;
+    panel: string | ((...args: any[]) => any);
+    sortable: boolean;
+}>;
+export default _default;

package/lib/tab/tab.css

@@ -0,0 +1,223 @@
+.bk-tab {
+  position: relative;
+  display: flex;
+}
+.bk-tab--top {
+  flex-direction: column;
+}
+.bk-tab--right {
+  flex-direction: row-reverse;
+}
+.bk-tab-header {
+  position: relative;
+  display: flex;
+  color: #63656e;
+}
+.bk-tab--card-tab .bk-tab-header,
+.bk-tab--vertical-tab .bk-tab-header {
+  background: #F0F1F5;
+}
+.bk-tab--card-tab .bk-tab-header {
+  border-radius: 4px 4px 0;
+}
+.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,
+.bk-tab--vertical-card .bk-tab-header > div {
+  border-right: 1px solid #dcdee5;
+}
+.bk-tab-header-navs {
+  flex: 1;
+}
+.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,
+.bk-tab--vertical-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-next,
+.bk-tab-header-prev {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  width: 15px;
+  background: #fff;
+  content: '';
+}
+.bk-tab-header-prev {
+  left: 1px;
+}
+.bk-tab-header-next {
+  right: 1px;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab-header-setting {
+  justify-self: flex-end;
+  margin-left: auto;
+}
+.bk-tab--left .bk-tab-header {
+  border-right: 1px solid #dcdee5;
+}
+.bk-tab--right .bk-tab-header {
+  border-left: 1px solid #dcdee5;
+}
+.bk-tab--vertical-tab .bk-tab-header {
+  border: 0;
+}
+.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,
+.bk-tab--vertical-card .bk-tab-header {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab--border-card .bk-tab-header {
+  border: solid #dcdee5;
+  border-width: 1px 1px 1px 0;
+}
+.bk-tab--border-card .bk-tab-header {
+  background: #FAFBFD;
+}
+.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: 5px;
+  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,
+.bk-tab--vertical-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,
+.bk-tab--vertical-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,
+.bk-tab--vertical-card .bk-tab-header-item:last-of-type {
+  border-right: none;
+}
+.bk-tab--card-tab .bk-tab-header-item {
+  position: relative;
+}
+.bk-tab--card-tab .bk-tab-header-item:not(:first-of-type):before,
+.bk-tab--card-tab .bk-tab-header-item:last-of-type:after {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  display: block;
+  width: 1px;
+  height: 16px;
+  margin-top: -8px;
+  background: #c4c6cc;
+  content: '';
+}
+.bk-tab--card-tab .bk-tab-header-item:last-of-type:after {
+  right: 0;
+  left: initial;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.bk-tab-header-item-close {
+  display: none;
+  font-size: 16px;
+  color: #c4c6cc;
+}
+.bk-tab-header--active {
+  color: #3a84ff;
+}
+.bk-tab--card .bk-tab-header--active,
+.bk-tab--border-card .bk-tab-header--active,
+.bk-tab--vertical-card .bk-tab-header--active {
+  background: white;
+  border-bottom-color: white;
+}
+.bk-tab--unborder-card .bk-tab-header--active {
+  border-bottom: 2px solid #3a84ff;
+}
+.bk-tab--card-tab .bk-tab-header--active,
+.bk-tab--vertical-tab .bk-tab-header--active {
+  background: #fff;
+}
+.bk-tab--card-tab .bk-tab-header--active {
+  border-radius: 4px 4px 0 0;
+}
+.bk-tab--card-tab .bk-tab-header--active:after,
+.bk-tab--card-tab .bk-tab-header--active:before,
+.bk-tab--card-tab .bk-tab-header--active + .bk-tab-header-item:before {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+.bk-tab--left:not(.bk-tab--vertical-tab) .bk-tab-header--active {
+  border-right: 2px solid #3a84ff;
+}
+.bk-tab--right:not(.bk-tab--vertical-tab) .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,
+.bk-tab--vertical-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,139 @@
+declare const _default: import("vue").DefineComponent<{
+    active: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab";
+    };
+    tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+        default: "top" | "right" | "left";
+    };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    sortable: BooleanConstructor;
+    sortType: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+        default: "replace" | "insert";
+    };
+    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[]>;
+    tabAdd(e: MouseEvent): void;
+    tabChange(name: string): void;
+    tabRemove(index: number, panel: any): void;
+    tabSort(dragTabIndex: number, dropTabIndex: number, sortType: string): boolean;
+    tabDrag(dragTabIndex: number, dragEvent: DragEvent): void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "drag" | "add" | "remove" | "add-panel" | "tab-change" | "remove-panel" | "sort-change" | "on-drag-tab" | "update:active" | "sort")[], "change" | "drag" | "sort" | "add" | "remove" | "add-panel" | "tab-change" | "remove-panel" | "sort-change" | "on-drag-tab" | "update:active", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    type: import("vue-types").VueTypeDef<"card" | "border-card" | "unborder-card" | "card-tab"> & {
+        default: "card" | "border-card" | "unborder-card" | "card-tab";
+    };
+    tabPosition: import("vue-types").VueTypeDef<"top" | "right" | "left"> & {
+        default: "top" | "right" | "left";
+    };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    sortable: BooleanConstructor;
+    sortType: import("vue-types").VueTypeDef<"replace" | "insert"> & {
+        default: "replace" | "insert";
+    };
+    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;
+    };
+}>> & {
+    onDrag?: (...args: any[]) => any;
+    onChange?: (...args: any[]) => any;
+    onRemove?: (...args: any[]) => any;
+    onAdd?: (...args: any[]) => any;
+    "onAdd-panel"?: (...args: any[]) => any;
+    "onTab-change"?: (...args: any[]) => any;
+    "onRemove-panel"?: (...args: any[]) => any;
+    "onSort-change"?: (...args: any[]) => any;
+    "onOn-drag-tab"?: (...args: any[]) => any;
+    "onUpdate:active"?: (...args: any[]) => any;
+    onSort?: (...args: any[]) => any;
+}, {
+    type: "card" | "border-card" | "unborder-card" | "card-tab";
+    active: string | number;
+    extCls: string;
+    closable: boolean;
+    showHeader: boolean;
+    sortType: "replace" | "insert";
+    tabPosition: "top" | "right" | "left";
+    addable: boolean;
+    sortable: boolean;
+    labelHeight: number;
+    scrollStep: number;
+    validateActive: boolean;
+    changeOnHover: boolean;
+    changeOnHoverDelay: number;
+}>;
+export default _default;