bkui-vue 0.0.1-beta.2 → 0.0.1-beta.22

package/lib/popover/popover.css

@@ -1,39 +1,48 @@
 .bk-popover .bk-popover-reference {
   display: inline-block;
 }
-.bk-popover .bk-popover-content {
+.bk-popover .fade-in-enter-active,
+.bk-popover .fade-in-linear-leave-active {
+  transition: opacity 200ms linear;
+}
+.bk-popover .fade-in-enter,
+.bk-popover .fade-in-leave,
+.bk-popover .fade-in-leave-active {
+  opacity: 0;
+}
+.bk-popover-content {
   display: none;
-  padding: 4px 8px;
-  font-size: 13px;
-  font-weight: bold;
+  padding: 7px 14px;
+  font-size: 12px;
   color: #fff;
   background: #26323d;
   border-radius: 4px;
   box-sizing: border-box;
 }
-.bk-popover .bk-popover-content[data-theme='dark'] {
+.bk-popover-content[data-theme^='dark'] {
   color: #fff;
   background: #26323d;
 }
-.bk-popover .bk-popover-content[data-theme='light'] {
+.bk-popover-content[data-theme^='light'] {
   color: #26323d;
   background-color: #fff;
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-theme='light'][data-show] {
+.bk-popover-content[data-theme^='light'][data-show] {
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-show] {
+.bk-popover-content[data-show] {
   display: block;
 }
-.bk-popover .bk-popover-content .arrow {
+.bk-popover-content .arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: inherit;
   visibility: hidden;
 }
-.bk-popover .bk-popover-content .arrow::before {
+.bk-popover-content .arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -42,15 +51,15 @@
   visibility: visible;
   transform: rotate(45deg);
 }
-.bk-popover .bk-popover-content[data-popper-placement^='top'] > .arrow {
+.bk-popover-content[data-popper-placement^='top'] > .arrow {
   bottom: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='bottom'] > .arrow {
+.bk-popover-content[data-popper-placement^='bottom'] > .arrow {
   top: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='left'] > .arrow {
+.bk-popover-content[data-popper-placement^='left'] > .arrow {
   right: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='right'] > .arrow {
+.bk-popover-content[data-popper-placement^='right'] > .arrow {
   left: -4px;
 }

package/lib/popover/popover.d.ts

@@ -11,17 +11,23 @@ declare const _default: import("vue").DefineComponent<{
     content: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    transition: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     placement: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    theme: import("vue-types").VueTypeDef<string> & {
+    theme: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
+    };
+    handleFirstUpdate: {
+        type: import("vue").PropType<import("@bkui-vue/shared").OnFirstUpdateFnType>;
+        default: () => void;
     };
-    /**
-     * 触发方式
-     * 支持 click hover manual
-     * manual： 通过isShow控制显示、隐藏
-     */
     trigger: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -37,52 +43,75 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: () => unknown[];
     };
-    onFirstUpdate: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
-    };
-}, {
-    compStyle: import("vue").ComputedRef<{
-        width: any;
-        height: any;
-    }>;
-}, {
-    popoverInstance: any;
-    isPopInstance: boolean;
-}, {}, {
-    handleClose(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    isShow?: unknown;
-    width?: unknown;
-    height?: unknown;
-    content?: unknown;
-    placement?: unknown;
-    theme?: unknown;
-    trigger?: unknown;
-    arrow?: unknown;
-    modifiers?: unknown;
-    onFirstUpdate?: unknown;
-} & {
+    boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+    fixOnBoundary: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    content: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    transition: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    theme: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    handleFirstUpdate: {
+        type: import("vue").PropType<import("@bkui-vue/shared").OnFirstUpdateFnType>;
+        default: () => void;
+    };
+    trigger: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    arrow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    modifiers: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+    fixOnBoundary: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>>, {
     placement: string;
     modifiers: unknown[];
-    width: string | number;
-    height: string | number;
-    theme: string;
     content: string | number;
-    isShow: boolean;
-    trigger: string;
-    arrow: boolean;
-} & {
-    onFirstUpdate?: (...args: any[]) => any;
-}> & {}, {
-    placement: string;
-    modifiers: unknown[];
-    onFirstUpdate: (...args: any[]) => any;
     width: string | number;
     height: string | number;
     theme: string;
-    content: string | number;
-    isShow: boolean;
+    transition: string;
     trigger: string;
     arrow: boolean;
+    isShow: boolean;
+    handleFirstUpdate: import("@bkui-vue/shared").OnFirstUpdateFnType;
+    fixOnBoundary: boolean;
 }>;
 export default _default;

package/lib/popover/popover.less

@@ -5,67 +5,78 @@
     display: inline-block;
   }
 
-  .bk-popover-content {
-    display: none;
-    padding: 4px 8px;
-    font-size: 13px;
-    font-weight: bold;
+  .fade-in-enter-active,
+  .fade-in-linear-leave-active {
+    transition: opacity 200ms linear;
+  }
+
+  .fade-in-enter,
+  .fade-in-leave,
+  .fade-in-leave-active {
+    opacity: 0;
+  }
+}
+
+.bk-popover-content {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #26323d;
+  border-radius: 4px;
+  box-sizing: border-box;
+
+  &[data-theme^='dark'] {
     color: #fff;
     background: #26323d;
-    border-radius: 4px;
-    box-sizing: border-box;
+  }
 
-    &[data-theme='dark'] {
-      color: #fff;
-      background: #26323d;
-    }
+  &[data-theme^='light'] {
+    color: #26323d;
+    background-color: #fff;
+    box-shadow: 0 0 6px 0 #dcdee5;
 
-    &[data-theme='light'] {
-      color: #26323d;
-      background-color: #fff;
+    &[data-show] {
       box-shadow: 0 0 6px 0 #dcdee5;
-
-      &[data-show] {
-        box-shadow: 0 0 6px 0 #dcdee5;
-      }
     }
+  }
 
-    &[data-show] {
-      display: block;
-    }
+  &[data-show] {
+    display: block;
+  }
+
+  .arrow {
+    position: absolute;
+    z-index: -1;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+    visibility: hidden;
 
-    .arrow {
+    &::before {
       position: absolute;
       width: 8px;
       height: 8px;
       background: inherit;
-      visibility: hidden;
-
-      &::before {
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        background: inherit;
-        content: '';
-        visibility: visible;
-        transform: rotate(45deg);
-      }
+      content: '';
+      visibility: visible;
+      transform: rotate(45deg);
     }
+  }
 
-    &[data-popper-placement^='top'] > .arrow {
-      bottom: -4px;
-    }
+  &[data-popper-placement^='top'] > .arrow {
+    bottom: -4px;
+  }
 
-    &[data-popper-placement^='bottom'] > .arrow {
-      top: -4px;
-    }
+  &[data-popper-placement^='bottom'] > .arrow {
+    top: -4px;
+  }
 
-    &[data-popper-placement^='left'] > .arrow {
-      right: -4px;
-    }
+  &[data-popper-placement^='left'] > .arrow {
+    right: -4px;
+  }
 
-    &[data-popper-placement^='right'] > .arrow {
-      left: -4px;
-    }
+  &[data-popper-placement^='right'] > .arrow {
+    left: -4px;
   }
-}
+}

package/lib/popover/popover.variable.css

@@ -1,10 +1,12 @@
 :root {
   --bk-prefix: bk;
+  --popover-max-height: 216px;
   --primary-color: #3a84ff;
   --success-color: #2dcb56;
   --warning-color: #ff9c01;
   --danger-color: #ea3636;
   --default-color: #63656e;
+  --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
   --disable-color: #dcdee5;
@@ -58,43 +60,82 @@
   --link-success-disabled-color: #94f5a4;
   --link-warning-disabled-color: #ffd695;
   --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
 }
 .bk-popover .bk-popover-reference {
   display: inline-block;
 }
-.bk-popover .bk-popover-content {
+.bk-popover .fade-in-enter-active,
+.bk-popover .fade-in-linear-leave-active {
+  transition: opacity 200ms linear;
+}
+.bk-popover .fade-in-enter,
+.bk-popover .fade-in-leave,
+.bk-popover .fade-in-leave-active {
+  opacity: 0;
+}
+.bk-popover-content {
   display: none;
-  padding: 4px 8px;
-  font-size: 13px;
-  font-weight: bold;
+  padding: 7px 14px;
+  font-size: 12px;
   color: #fff;
   background: #26323d;
   border-radius: 4px;
   box-sizing: border-box;
 }
-.bk-popover .bk-popover-content[data-theme='dark'] {
+.bk-popover-content[data-theme^='dark'] {
   color: #fff;
   background: #26323d;
 }
-.bk-popover .bk-popover-content[data-theme='light'] {
+.bk-popover-content[data-theme^='light'] {
   color: #26323d;
   background-color: #fff;
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-theme='light'][data-show] {
+.bk-popover-content[data-theme^='light'][data-show] {
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-show] {
+.bk-popover-content[data-show] {
   display: block;
 }
-.bk-popover .bk-popover-content .arrow {
+.bk-popover-content .arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: inherit;
   visibility: hidden;
 }
-.bk-popover .bk-popover-content .arrow::before {
+.bk-popover-content .arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -103,15 +144,15 @@
   visibility: visible;
   transform: rotate(45deg);
 }
-.bk-popover .bk-popover-content[data-popper-placement^='top'] > .arrow {
+.bk-popover-content[data-popper-placement^='top'] > .arrow {
   bottom: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='bottom'] > .arrow {
+.bk-popover-content[data-popper-placement^='bottom'] > .arrow {
   top: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='left'] > .arrow {
+.bk-popover-content[data-popper-placement^='left'] > .arrow {
   right: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='right'] > .arrow {
+.bk-popover-content[data-popper-placement^='right'] > .arrow {
   left: -4px;
 }

package/lib/popover/props.d.ts

@@ -0,0 +1,77 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { OnFirstUpdateFnType } from '@bkui-vue/shared';
+export declare const PopoverProps: {
+    isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    content: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /**
+     * 动画展示方式
+     */
+    transition: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /**
+     * 展示位置
+     */
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    theme: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /**
+     * handleFirstUpdate
+     */
+    handleFirstUpdate: {
+        type: PropType<OnFirstUpdateFnType>;
+        default: () => void;
+    };
+    /**
+     * 触发方式
+     * 支持 click hover manual
+     * manual： 通过isShow控制显示、隐藏
+     */
+    trigger: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    arrow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    modifiers: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    /**
+     * 弹出内容绑定元素
+     */
+    boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+    /**
+     * 如果设置了boundary为指定DOM，此配置项生效
+     * 是否将弹出内容固定到目标元素位置
+     * 例如：boundary = document.body, fixOnBoundary = true，则弹出内容会一直固定到body
+     */
+    fixOnBoundary: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+};
+export declare type PopoverPropTypes = Readonly<ExtractPropTypes<typeof PopoverProps>>;

package/lib/preset.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+declare const _default: {
+    createInstall: (prefix?: string) => (app: App<any>) => void;
+    install: (app: App<any>) => void;
+    version: string;
+};
+export default _default;