bkui-vue 2.0.2-beta.9 → 2.0.2-beta.91

package/lib/cascader/cascader.d.ts

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 import { INode } from './interface';
 /**
  * Cascader 组件
@@ -88,6 +89,154 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    popoverOptions: PropType<Partial<Readonly<import("vue").ExtractPropTypes<{
+        isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        always: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        width: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        height: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        maxWidth: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        maxHeight: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
+            default: string | number | (() => HTMLElement) | (() => JSX.Element);
+        };
+        renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+            default: "if" | "show";
+        };
+        target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
+        allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+            default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
+        };
+        theme: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+        trigger: import("vue-types").VueTypeValidableDef<"click" | "hover" | "manual"> & {
+            default: "click" | "hover" | "manual";
+        };
+        renderType: import("vue-types").VueTypeDef<"auto" | "shown"> & {
+            default: "auto" | "shown";
+        };
+        arrow: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        padding: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        offset: import("vue-types").VueTypeDef<number | {
+            mainAxis?: number;
+            crossAxis?: number;
+            alignmentAxis?: number;
+        }> & {
+            default: number | (() => {
+                mainAxis?: number;
+                crossAxis?: number;
+                alignmentAxis?: number;
+            });
+        };
+        boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+            default: string | (() => HTMLElement);
+        };
+        zIndex: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        disableTeleport: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        autoPlacement: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        autoVisibility: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        disableOutsideClick: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        disableTransform: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        reference: import("vue-types").VueTypeValidableDef<any>;
+        modifiers: import("vue-types").VueTypeValidableDef<unknown[]> & {
+            default: () => unknown[];
+        } & {
+            default: () => unknown[];
+        };
+        popoverDelay: import("vue-types").VueTypeDef<number | number[]> & {
+            default: number | (() => number[]);
+        };
+        extCls: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+        referenceCls: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+        hideIgnoreReference: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        componentEventDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        forceClickoutside: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+    }>>>>;
     extCls: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -108,6 +257,11 @@ declare const _default: import("vue").DefineComponent<{
     customTagsFillback: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
+    changeEmitsNodes: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     collapseTags: {
         type: BooleanConstructor;
         default: boolean;
@@ -123,6 +277,7 @@ declare const _default: import("vue").DefineComponent<{
     overflowTagIndex: import("vue").Ref<number>;
     isCollapse: import("vue").ComputedRef<boolean>;
     isFocus: import("vue").Ref<boolean>;
+    isAlways: import("vue").Ref<boolean>;
     store: import("vue").Ref<{
         data: {
             id: string;
@@ -308,6 +463,154 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    popoverOptions: PropType<Partial<Readonly<import("vue").ExtractPropTypes<{
+        isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        always: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        width: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        height: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        maxWidth: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        maxHeight: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
+            default: string | number | (() => HTMLElement) | (() => JSX.Element);
+        };
+        renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+            default: "if" | "show";
+        };
+        target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
+        allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+            default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
+        };
+        theme: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+        trigger: import("vue-types").VueTypeValidableDef<"click" | "hover" | "manual"> & {
+            default: "click" | "hover" | "manual";
+        };
+        renderType: import("vue-types").VueTypeDef<"auto" | "shown"> & {
+            default: "auto" | "shown";
+        };
+        arrow: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        padding: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        offset: import("vue-types").VueTypeDef<number | {
+            mainAxis?: number;
+            crossAxis?: number;
+            alignmentAxis?: number;
+        }> & {
+            default: number | (() => {
+                mainAxis?: number;
+                crossAxis?: number;
+                alignmentAxis?: number;
+            });
+        };
+        boundary: import("vue-types").VueTypeDef<string | HTMLElement> & {
+            default: string | (() => HTMLElement);
+        };
+        zIndex: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        disableTeleport: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        autoPlacement: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        autoVisibility: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        disableOutsideClick: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        disableTransform: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        reference: import("vue-types").VueTypeValidableDef<any>;
+        modifiers: import("vue-types").VueTypeValidableDef<unknown[]> & {
+            default: () => unknown[];
+        } & {
+            default: () => unknown[];
+        };
+        popoverDelay: import("vue-types").VueTypeDef<number | number[]> & {
+            default: number | (() => number[]);
+        };
+        extCls: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+        referenceCls: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+        hideIgnoreReference: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        componentEventDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        forceClickoutside: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+    }>>>>;
     extCls: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -328,6 +631,11 @@ declare const _default: import("vue").DefineComponent<{
     customTagsFillback: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
+    changeEmitsNodes: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     collapseTags: {
         type: BooleanConstructor;
         default: boolean;
@@ -367,6 +675,7 @@ declare const _default: import("vue").DefineComponent<{
     filterMethod: (...args: any[]) => any;
     customTextFillback: (...args: any[]) => any;
     customTagsFillback: (...args: any[]) => any;
+    changeEmitsNodes: boolean;
     floatMode: boolean;
 }, {}>;
 export default _default;

package/lib/cascader/cascader.less

@@ -110,12 +110,12 @@
     position: absolute;
     right: 2px;
     display: inline-flex;
+    align-items: center;
     height: 100%;
     font-size: 20px;
     color: #979ba5;
-    transform: rotate(180deg);
     transition: transform .3s cubic-bezier(.4,0,.2,1);
-    align-items: center;
+    transform: rotate(180deg);
   }
 
   .@{bk-prefix}-icon-clear-icon {
@@ -135,8 +135,8 @@
     position: static;
     display: block;
     max-width: 100%;
-    max-height: 120px;
     min-height: 30px;
+    max-height: 120px;
     padding: 0 24px 0 11px;
     overflow-x: hidden;
     text-overflow: ellipsis;
@@ -144,6 +144,8 @@
 
     .@{bk-prefix}-cascader-search-input {
       width: 100%;
+      min-width: 24px;
+      flex: 1;
       font-size: 12px;
       cursor: text;
       border: none;
@@ -163,18 +165,25 @@
     }
 
     .cascader-tag-list {
+      box-sizing: border-box;
       display: flex;
+      flex-flow: row wrap;
+      align-items: center;
       height: @component-size-base;
       min-height: 30px;
       padding-top: 5px;
-      overflow: hidden;
-      box-sizing: border-box;
-      flex-wrap: wrap;
+      // overflow: hidden; // remove this to allow wrap
+
+      .@{bk-prefix}-cascader-search-input {
+        height: 22px;
+        margin-bottom: 5px;
+        line-height: 22px;
+      }
 
       .tag-item {
         position: relative;
-        height: 22px;
         max-width: calc(100% - 50px);
+        height: 22px;
         padding-right: 18px;
         margin: 0 6px 5px 0;
         overflow: hidden;
@@ -196,91 +205,116 @@
           white-space: nowrap;
         }
       }
+
+      .@{bk-prefix}-tag {
+        margin-bottom: 5px;
+      }
     }
   }
 }
 
-.@{bk-prefix}-cascader-panel-wrapper {
-  display: inline-flex;
+.@{bk-prefix}-cascader-popover{
   border: 1px solid @cascader-panel-border-color;
   border-radius: 2px;
   box-shadow: 0px 2px 6px 0px rgba(0,0,0,.10);
-  .@{bk-prefix}-cascader-panel {
-    min-width: 160px;
-    padding: 4px 0;
-    background: @white-color;
-    border-right: 1px solid @cascader-panel-border-color;
-
-    &:last-child {
-      border-right: none;
-    }
-    .@{bk-prefix}-cascader-node {
-      position: relative;
-      display: flex;
-      padding: 0 16px;
-      overflow: hidden;
-      line-height: @component-size-base;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: pointer;
-      align-items: center;
-
-      &:hover {
-        background: @cascader-panel-hover;
-      }
-
-      &.is-selected,
-      &.is-checked {
-        color: @primary-color;
-        background: @cascader-panel-active;
+  .@{bk-prefix}-cascader-panel-wrapper {
+    display: inline-flex;
+    .@{bk-prefix}-cascader-panel {
+      min-width: 160px;
+      padding: 4px 0;
+      background: @white-color;
+      border-right: 1px solid @cascader-panel-border-color;
+  
+      &:last-child {
+        border-right: none;
       }
-
-      &.is-disabled {
-        color: @light-gray;
-        cursor: not-allowed;
-        background-color: @white-color;
-
-        .@{bk-prefix}-icon-angle-right {
+      .@{bk-prefix}-cascader-node {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        overflow: hidden;
+        line-height: @component-size-base;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+  
+        &:hover {
+          background: @cascader-panel-hover;
+        }
+  
+        &.is-selected,
+        &.is-checked {
+          color: @primary-color;
+          background: @cascader-panel-active;
+        }
+  
+        &.is-disabled {
           color: @light-gray;
+          cursor: not-allowed;
+          background-color: @white-color;
+  
+          .@{bk-prefix}-icon-angle-right {
+            color: @light-gray;
+          }
+        }
+  
+        .@{bk-prefix}-icon-angle-right {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          font-size: 20px;
+          color: @gray-color;
+          transform: translateY(-50%);
+        }
+  
+        .@{bk-prefix}-icon-spinner {
+          position: absolute;
+          top: 50%;
+          right: 5px;
+          font-size: 12px;
+          color: @gray-color;
+          transform: translateY(-50%);
         }
-      }
 
-      .@{bk-prefix}-icon-angle-right {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        font-size: 20px;
-        color: @gray-color;
-        transform: translateY(-50%);
-      }
+        // OverflowTitle wrapper constraint
+        .position-relative {
+          flex: 1;
+          min-width: 0; // Allow flex item to shrink below content size
+          overflow: hidden;
 
-      .@{bk-prefix}-icon-spinner {
-        position: absolute;
-        top: 50%;
-        right: 5px;
-        font-size: 12px;
-        color: @gray-color;
-        transform: translateY(-50%);
+          .text-ov {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        .@{bk-prefix}-cascader-node-name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
     }
-  }
-  .@{bk-prefix}-cascader-panel-empty-wrapper {
-    display: flex;
-    height: 100%;
-    color: #63656e;
-    align-items: center;
-    justify-content: center;
-  }
-  .@{bk-prefix}-cascader-search-empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 56px;
-    color: #63656e
+    .@{bk-prefix}-cascader-panel-empty-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: #63656e;
+    }
+    .@{bk-prefix}-cascader-search-empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 56px;
+      color: #63656e
+    }
   }
 }
 
 .@{bk-prefix}-cascader-popover-reference{
-  width: 100%;
   display: block !important;
+  width: 100%;
 }