bkui-vue 0.0.1-beta.25 → 0.0.1-beta.26

package/lib/resize-layout/resize-layout.less

@@ -0,0 +1,233 @@
+@import '../styles/themes/themes.less';
+
+.@{bk-prefix}-resize-layout {
+  display: flex;
+
+  &-border {
+    border: 1px solid #dcdee5;
+  }
+
+  &-collapsed {
+    & > .bk-resize-layout-aside {
+      .bk-resize-layout-aside-content {
+        overflow: hidden;
+      }
+
+      .bk-resize-collapse:before {
+        display: inline-block;
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &-left {
+    flex-direction: row;
+
+    & > .bk-resize-layout-aside {
+      border-right: 1px solid #dcdee5;
+
+      &:after {
+        top: 50%;
+        right: 1px;
+        transform: translate3d(0, -50%, 0);
+      }
+
+      .bk-resize-trigger {
+        top: 0;
+        left: 100%;
+        width: 5px;
+        height: 100%;
+        cursor: col-resize;
+
+        &:hover {
+          @mixin linear-gradient left;
+        }
+      }
+
+      .bk-resize-collapse {
+        top: 50%;
+        left: 100%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  &-right {
+    flex-direction: row-reverse;
+
+    & > .bk-resize-layout-aside {
+      border-left: 1px solid #dcdee5;
+
+      &:after {
+        top: 50%;
+        left: 1px;
+        transform: translate3d(0, -50%, 0);
+      }
+
+      .bk-resize-trigger {
+        top: 0;
+        right: 100%;
+        width: 5px;
+        height: 100%;
+        cursor: col-resize;
+
+        &:hover {
+          @mixin linear-gradient right;
+        }
+      }
+
+      .bk-resize-collapse {
+        top: 50%;
+        right: 100%;
+        transform: translateY(-50%) rotate(180deg);
+      }
+    }
+  }
+
+  &-top {
+    flex-direction: column;
+
+    & > .bk-resize-layout-aside {
+      border-bottom: 1px solid #dcdee5;
+
+      &:after {
+        bottom: 1px;
+        left: 50%;
+        transform: translate3d(-50%, 0, 0) rotate(90deg);
+      }
+
+      .bk-resize-trigger {
+        top: 100%;
+        left: 0;
+        width: 100%;
+        height: 5px;
+        cursor: row-resize;
+
+        &:hover {
+          @mixin linear-gradient top;
+        }
+      }
+
+      .bk-resize-collapse {
+        top: 100%;
+        left: 50%;
+        margin-top: 8px;
+        transform: translate3d(-50%, -50%, 0) rotate(90deg);
+      }
+    }
+  }
+
+  &-bottom {
+    flex-direction: column-reverse;
+
+    & > .bk-resize-layout-aside {
+      border-top: 1px solid #dcdee5;
+
+      &:after {
+        top: 1px;
+        left: 50%;
+        transform: translate3d(-50%, 0, 0) rotate(90deg);
+      }
+
+      .bk-resize-trigger {
+        bottom: 100%;
+        left: 0;
+        width: 100%;
+        height: 5px;
+        cursor: row-resize;
+
+        &:hover {
+          @mixin linear-gradient bottom;
+        }
+      }
+
+      .bk-resize-collapse {
+        bottom: 100%;
+        left: 50%;
+        margin-bottom: 8px;
+        transform: translate3d(50%, 50%, 0) rotate(-90deg);
+      }
+    }
+  }
+
+  & > .bk-resize-layout-aside {
+    position: relative;
+
+    &:after {
+      position: absolute;
+      width: 2px;
+      height: 2px;
+      color: #c4c6cc;
+      background: currentColor;
+      content: '';
+      box-shadow: 0 4px 0 0 currentColor, 0 8px 0 0 currentColor, 0 -4px 0 0 currentColor, 0 -8px 0 0 currentColor;
+    }
+
+    .bk-resize-layout-aside-content {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .bk-resize-trigger {
+      position: absolute;
+      z-index: 3;
+      background-color: transparent;
+    }
+
+    .bk-resize-proxy {
+      position: absolute;
+      z-index: 9999;
+      pointer-events: none;
+      visibility: hidden;
+
+      &.left,
+      &.right {
+        top: 0;
+        height: 100%;
+        border-left: 1px dashed #3a84ff;
+      }
+
+      &.top,
+      &.bottom {
+        left: 0;
+        width: 100%;
+        border-top: 1px dashed #3a84ff;
+      }
+    }
+
+    .bk-resize-collapse {
+      position: absolute;
+      z-index: 2;
+      width: 16px;
+      height: 50px;
+      font-size: 20px;
+      line-height: 50px;
+      color: #fff;
+      text-align: center;
+      text-indent: -2px;
+      cursor: pointer;
+      background: #dcdee5;
+      border-radius: 0px 12px 12px 0px;
+
+      &:hover {
+        background: #3a84ff;
+      }
+    }
+  }
+
+  & > .bk-resize-layout-main {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .bk-resize-mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 9999;
+    display: none;
+  }
+}

package/lib/resize-layout/resize-layout.variable.css

@@ -0,0 +1,282 @@
+: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;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 38px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 10px;
+  --input-block-color: #f4f6fa;
+  --input-icon-size: var(--font-size-large);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --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-resize-layout {
+  display: flex;
+}
+.bk-resize-layout-border {
+  border: 1px solid #dcdee5;
+}
+.bk-resize-layout-collapsed > .bk-resize-layout-aside .bk-resize-layout-aside-content {
+  overflow: hidden;
+}
+.bk-resize-layout-collapsed > .bk-resize-layout-aside .bk-resize-collapse:before {
+  display: inline-block;
+  transform: rotate(180deg);
+}
+.bk-resize-layout-left {
+  flex-direction: row;
+}
+.bk-resize-layout-left > .bk-resize-layout-aside {
+  border-right: 1px solid #dcdee5;
+}
+.bk-resize-layout-left > .bk-resize-layout-aside:after {
+  top: 50%;
+  right: 1px;
+  transform: translate3d(0, -50%, 0);
+}
+.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-trigger {
+  top: 0;
+  left: 100%;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+}
+.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-trigger:hover {
+  @mixin linear-gradient left;
+}
+.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-collapse {
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+}
+.bk-resize-layout-right {
+  flex-direction: row-reverse;
+}
+.bk-resize-layout-right > .bk-resize-layout-aside {
+  border-left: 1px solid #dcdee5;
+}
+.bk-resize-layout-right > .bk-resize-layout-aside:after {
+  top: 50%;
+  left: 1px;
+  transform: translate3d(0, -50%, 0);
+}
+.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-trigger {
+  top: 0;
+  right: 100%;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+}
+.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-trigger:hover {
+  @mixin linear-gradient right;
+}
+.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-collapse {
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%) rotate(180deg);
+}
+.bk-resize-layout-top {
+  flex-direction: column;
+}
+.bk-resize-layout-top > .bk-resize-layout-aside {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-resize-layout-top > .bk-resize-layout-aside:after {
+  bottom: 1px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0) rotate(90deg);
+}
+.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-trigger {
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  cursor: row-resize;
+}
+.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-trigger:hover {
+  @mixin linear-gradient top;
+}
+.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-collapse {
+  top: 100%;
+  left: 50%;
+  margin-top: 8px;
+  transform: translate3d(-50%, -50%, 0) rotate(90deg);
+}
+.bk-resize-layout-bottom {
+  flex-direction: column-reverse;
+}
+.bk-resize-layout-bottom > .bk-resize-layout-aside {
+  border-top: 1px solid #dcdee5;
+}
+.bk-resize-layout-bottom > .bk-resize-layout-aside:after {
+  top: 1px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0) rotate(90deg);
+}
+.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-trigger {
+  bottom: 100%;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  cursor: row-resize;
+}
+.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-trigger:hover {
+  @mixin linear-gradient bottom;
+}
+.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-collapse {
+  bottom: 100%;
+  left: 50%;
+  margin-bottom: 8px;
+  transform: translate3d(50%, 50%, 0) rotate(-90deg);
+}
+.bk-resize-layout > .bk-resize-layout-aside {
+  position: relative;
+}
+.bk-resize-layout > .bk-resize-layout-aside:after {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  color: #c4c6cc;
+  background: currentColor;
+  content: '';
+  box-shadow: 0 4px 0 0 currentColor, 0 8px 0 0 currentColor, 0 -4px 0 0 currentColor, 0 -8px 0 0 currentColor;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-layout-aside-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-trigger {
+  position: absolute;
+  z-index: 3;
+  background-color: transparent;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy {
+  position: absolute;
+  z-index: 9999;
+  pointer-events: none;
+  visibility: hidden;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.left,
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.right {
+  top: 0;
+  height: 100%;
+  border-left: 1px dashed #3a84ff;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.top,
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.bottom {
+  left: 0;
+  width: 100%;
+  border-top: 1px dashed #3a84ff;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-collapse {
+  position: absolute;
+  z-index: 2;
+  width: 16px;
+  height: 50px;
+  font-size: 20px;
+  line-height: 50px;
+  color: #fff;
+  text-align: center;
+  text-indent: -2px;
+  cursor: pointer;
+  background: #dcdee5;
+  border-radius: 0px 12px 12px 0px;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-collapse:hover {
+  background: #3a84ff;
+}
+.bk-resize-layout > .bk-resize-layout-main {
+  flex: 1;
+  overflow: hidden;
+}
+.bk-resize-layout .bk-resize-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  display: none;
+}

package/lib/select/common.d.ts

@@ -1,37 +1,33 @@
-import { InjectionKey } from 'vue';
-import Option from './option';
-export declare type OptionInstanceType = InstanceType<typeof Option>;
-export interface ISelectContext {
-    props: {
-        multiple?: boolean;
-    };
-    selectedOptions: Set<any>;
-    searchKey: string;
-    isRemoteSearch: boolean;
-    register(option: OptionInstanceType): any;
-    unregister(option: OptionInstanceType): any;
-    handleOptionSelected(option: OptionInstanceType): void;
-}
+import { InjectionKey, Ref } from 'vue';
+import { OnFirstUpdateFnType } from '@bkui-vue/shared';
+import { IOptionGroupContext, IPopoverConfig, ISelectContext } from './type';
 export declare const selectKey: InjectionKey<ISelectContext>;
-export interface IOptionGroupContext {
-    disabled: boolean;
-    groupCollapse: boolean;
-}
 export declare const optionGroupKey: InjectionKey<IOptionGroupContext>;
-export interface ISelectState {
-    currentPlaceholder: string;
-    options: Set<OptionInstanceType>;
-    selectedOptions: Set<OptionInstanceType>;
-    currentSelectedLabel: string;
-}
 export declare function useFocus(): {
-    isFocus: import("vue").Ref<boolean>;
+    isFocus: Ref<boolean>;
     handleFocus: () => void;
     handleBlur: () => void;
 };
 export declare function useHover(): {
-    isHover: import("vue").Ref<boolean>;
+    isHover: Ref<boolean>;
     setHover: () => void;
     cancelHover: () => void;
 };
-export default function useDebouncedRef<T>(value: any, delay?: number): import("vue").Ref<T>;
+export declare function useRegistry<T>(data: Ref<Set<T>>): {
+    register: (item: T) => Set<T>;
+    unregister: (item: T) => boolean;
+};
+export declare function useDebouncedRef<T>(value: any, delay?: number): Ref<T>;
+export declare function usePopover(config: IPopoverConfig): {
+    isPopoverShow: Ref<boolean>;
+    popperWidth: Ref<string | number>;
+    togglePopover: () => void;
+    onPopoverFirstUpdate: OnFirstUpdateFnType;
+    hidePopover: () => void;
+    showPopover: () => void;
+};
+export declare function useRemoteSearch(method: Function): {
+    searchKey: Ref<string>;
+    searchLoading: Ref<boolean>;
+};
+export declare function toLowerCase(value?: string): string;