bkui-vue 0.0.1-beta.205 → 0.0.1-beta.207

package/lib/search-select/search-select.variable.css

@@ -24,6 +24,7 @@
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
   --input-disabled-bg: #fafbfd;
   --input-disabled-border: var(--disable-color);
   --input-height-base: var(--component-size-base);
@@ -111,6 +112,11 @@
   --cascader-panel-hover: #f5f7fa;
   --cascader-panel-active: #e1ecff;
   --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
 }
 @keyframes loading-scale-animate {
   0% {
@@ -184,187 +190,36 @@
 .bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
   left: -4px;
 }
-.menu-list-mixin {
-  display: flex;
-  flex-direction: column;
-}
-.menu-item-mixin {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 32px;
-  padding: 0 12px;
-  flex: 0 0 32px;
-  outline: none;
-}
-.menu-item-mixin:hover {
-  cursor: pointer;
-  background-color: #f5f7fa;
-}
-.menu-disabled-mixin {
-  color: #c4c6cc;
-}
-.menu-disabled-mixin:hover {
-  cursor: not-allowed;
-  background-color: white;
-}
-.search-select-menu {
-  display: flex;
-  min-width: 160px;
-  font-size: 12px;
-  color: #63656e;
-  flex-direction: column;
-}
-.search-select-menu .menu-header {
-  display: flex;
-  flex-direction: column;
-  border-bottom: 1px solid #dcdee5;
-}
-.search-select-menu .menu-header-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 32px;
-  padding: 0 12px;
-  flex: 0 0 32px;
-  outline: none;
-}
-.search-select-menu .menu-header-item:hover {
-  cursor: pointer;
-  background-color: #f5f7fa;
-}
-.search-select-menu .menu-header-item.is-disabled {
-  color: #c4c6cc;
-}
-.search-select-menu .menu-header-item.is-disabled:hover {
-  cursor: not-allowed;
-  background-color: white;
-}
-.search-select-menu .menu-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  max-height: 240px;
-  overflow: auto;
-}
-.search-select-menu .menu-content .menu-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 32px;
-  padding: 0 12px;
-  flex: 0 0 32px;
-  outline: none;
-}
-.search-select-menu .menu-content .menu-item:hover {
-  cursor: pointer;
-  background-color: #f5f7fa;
-}
-.search-select-menu .menu-content .menu-item .is-keyword {
-  display: inline-flex;
-  color: #3a84ff;
-}
-.search-select-menu .menu-content .menu-item .is-selected {
-  display: flex;
-  width: 14px;
-  height: 14px;
-  margin-left: auto;
-  overflow: hidden;
-  font-size: 18px;
-  font-weight: bold;
-  color: #3a84ff;
-  align-items: center;
-  justify-content: center;
-}
-.search-select-menu .menu-content .menu-item.is-hover {
-  color: #3a84ff;
-  background-color: #f5f7fa;
-}
-.search-select-menu .menu-content .menu-item.is-hover .menu-name {
-  color: #3a84ff;
-}
-.search-select-menu .menu-content .menu-item.is-disabled {
-  color: #c4c6cc;
-}
-.search-select-menu .menu-content .menu-item.is-disabled:hover {
-  cursor: not-allowed;
-  background-color: white;
-}
-.search-select-menu .menu-content .menu-item.is-disabled .menu-name {
-  color: #c4c6cc;
-}
-.search-select-menu .menu-content .menu-item .menu-name {
-  display: flex;
-  max-width: 100px;
-  margin-right: 5px;
-  font-weight: bold;
-  color: #63656e;
-  align-items: center;
-}
-.search-select-menu .menu-footer {
-  display: flex;
-  width: 100%;
-  height: 32px;
-  border-top: 1px solid #dcdee5;
-  align-items: center;
-}
-.search-select-menu .menu-footer-btn {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-.search-select-menu .menu-footer-btn:first-child {
-  border-right: 1px solid #dcdee5;
-}
-.search-select-menu .menu-footer-btn:hover {
-  color: #3a84ff;
-  cursor: pointer;
-}
-.search-select-menu .menu-footer-btn.is-disabled {
-  color: #c4c6cc;
-}
-.search-select-menu .menu-footer-btn.is-disabled:hover {
-  cursor: not-allowed;
-  background-color: white;
-}
-.search-seleted-input {
+.bk-search-select {
   position: relative;
-  display: flex;
-  height: 100%;
-  min-width: 150px;
-  min-width: 40px;
-  padding: 0 10px;
-  margin-top: -4px;
-  color: #63656e;
-  border: none;
-  align-items: center;
-  offset: none;
+  z-index: 9;
+  height: var(--component-size-base);
+  overflow: inherit;
+}
+.bk-search-select .focus {
+  color: var(--search-select-focus-color);
+  background: #fff !important;
+  border-color: var(--search-select-focus-border-color) !important;
 }
-.search-seleted-input .div-input {
-  height: 30px;
+.bk-search-select .div-input {
+  height: var(--component-size-base);
   padding: 5px 0;
   line-height: 20px;
   word-break: break-all;
   flex: 1 1 auto;
-  outline: none;
 }
-.search-select-wrap {
-  position: relative;
-  z-index: 9;
-  height: 32px;
-  overflow: inherit;
+.bk-search-select .div-input:focus {
+  outline: none;
 }
-.search-select-wrap .bk-search-select {
+.bk-search-select-container {
   position: relative;
   display: flex;
-  min-height: 30px;
+  min-height: var(--component-size-base);
   overflow: hidden;
   font-size: 12px;
-  color: #63656e;
-  border: 1px solid #c4c6cc;
-  border-radius: 2px;
+  color: var(--search-select-font-color);
+  border: var(--border-width-base) var(--border-style-base) var(--border-style-color);
+  border-radius: var(--border-radius-base);
   outline: none;
   box-sizing: border-box;
   transition: border 0.2s linear;
@@ -373,19 +228,19 @@
   align-items: center;
   flex-wrap: wrap;
 }
-.search-select-wrap .bk-search-select.is-focus {
+.bk-search-select-container.is-focus {
   overflow: auto;
-  color: #3c96ff;
+  color: var(--search-select-focus-color);
   background: #fff !important;
-  border-color: #3c96ff !important;
+  border-color: var(--search-select-focus-border-color) !important;
 }
-.search-select-wrap .bk-search-select .search-prefix {
+.bk-search-select-container .search-prefix {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   height: 100%;
 }
-.search-select-wrap .bk-search-select .search-input {
+.bk-search-select-container .search-container {
   position: relative;
   display: flex;
   min-height: 26px;
@@ -398,37 +253,37 @@
   flex-wrap: wrap;
   align-items: center;
 }
-.search-select-wrap .bk-search-select .search-input-chip {
+.bk-search-select-container .search-container-selected {
   position: relative;
   display: inline-block;
   max-width: 99%;
   padding-left: 8px;
   margin: 0 0 4px 6px;
   line-height: 22px;
-  color: #63656e;
+  color: var(--search-select-font-color);
   background: #f0f1f5;
   border-radius: 2px;
   flex: 0 0 auto;
   align-self: center;
 }
-.search-select-wrap .bk-search-select .search-input-chip.hidden-chip {
+.bk-search-select-container .search-container-selected.hidden-selected {
   visibility: hidden;
 }
-.search-select-wrap .bk-search-select .search-input-chip.overflow-chip {
+.bk-search-select-container .search-container-selected.overflow-selected {
   padding-right: 8px;
 }
-.search-select-wrap .bk-search-select .search-input-chip:hover {
+.bk-search-select-container .search-container-selected:hover {
   background: #dcdee5;
 }
-.search-select-wrap .bk-search-select .search-input-chip:hover .chip-clear {
-  color: #63656e;
+.bk-search-select-container .search-container-selected:hover .selected-clear {
+  color: var(--search-select-font-color);
 }
-.search-select-wrap .bk-search-select .search-input-chip .chip-name {
+.bk-search-select-container .search-container-selected .selected-name {
   display: inline-block;
   margin-right: 20px;
   word-break: break-all;
 }
-.search-select-wrap .bk-search-select .search-input-chip .chip-clear {
+.bk-search-select-container .search-container-selected .selected-clear {
   position: absolute;
   top: 4px;
   right: 3px;
@@ -444,57 +299,60 @@
   align-items: center;
   justify-content: center;
 }
-.search-select-wrap .bk-search-select .search-input-input {
+.bk-search-select-container .search-container-input {
   position: relative;
   display: flex;
   height: 100%;
   min-width: 40px;
   padding: 0 10px;
   margin-top: -4px;
-  color: #63656e;
+  color: var(--search-select-font-color);
   border: none;
   flex: 1 1 auto;
   align-items: center;
 }
-.search-select-wrap .bk-search-select .search-input-input .div-input {
-  height: 30px;
-  padding: 5px 0;
-  line-height: 20px;
-  word-break: break-all;
-  flex: 1 1 auto;
-}
-.search-select-wrap .bk-search-select .search-input-input .div-input:focus {
-  outline: none;
-}
-.search-select-wrap .bk-search-select .search-input-input .input-before:before {
-  color: #c4c6cc;
+.bk-search-select-container .search-container-input .input-before:before {
+  color: var(--search-select-placeholder-color);
   content: attr(data-placeholder);
 }
-.search-select-wrap .bk-search-select .search-input-input .input-after:after {
+.bk-search-select-container .search-container-input .input-after:after {
   padding-left: 2px;
-  color: #c4c6cc;
+  color: var(--search-select-placeholder-color);
   content: attr(data-tips);
 }
-.search-select-wrap .bk-search-select .search-nextfix {
+.bk-search-select-container .search-container .selected-input {
+  position: relative;
   display: flex;
-  color: #c4c6cc;
+  height: 100%;
+  min-width: 40px;
+  padding: 0 10px;
+  margin-top: -4px;
+  color: var(--search-select-font-color);
+  border: none;
   align-items: center;
 }
-.search-select-wrap .bk-search-select .search-nextfix .search-clear {
+.bk-search-select-container .search-nextfix {
+  color: var(--light-gray);
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.bk-search-select-container .search-nextfix .search-clear {
   display: flex;
   width: 12px;
   height: 12px;
   margin-right: 6px;
   font-size: 12px;
-  color: #c4c6cc;
+  color: var(--light-gray);
   align-items: center;
   justify-content: center;
 }
-.search-select-wrap .bk-search-select .search-nextfix .search-clear:hover {
+.bk-search-select-container .search-nextfix .search-clear:hover {
   color: #979ba5;
   cursor: pointer;
 }
-.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon {
+.bk-search-select-container .search-nextfix .search-nextfix-icon {
   display: flex;
   margin-right: 8px;
   font-size: 16px;
@@ -502,29 +360,29 @@
   align-items: center;
   justify-content: center;
 }
-.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon.is-focus {
-  color: #3c96ff;
+.bk-search-select-container .search-nextfix .search-nextfix-icon.is-focus {
+  color: var(--search-select-focus-color);
   background: #fff !important;
-  border-color: #3c96ff !important;
+  border-color: var(--search-select-focus-border-color) !important;
 }
-.search-select-wrap .bk-search-select::-webkit-scrollbar {
+.bk-search-select-container::-webkit-scrollbar {
   width: 3px;
   height: 5px;
 }
-.search-select-wrap .bk-search-select::-webkit-scrollbar-thumb {
+.bk-search-select-container::-webkit-scrollbar-thumb {
   background: #e6e9ea;
   border-radius: 20px;
   box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
 }
-.search-select-wrap .bk-select-tips {
+.bk-search-select-tips {
   display: flex;
   margin-top: 5px;
   font-size: 12px;
   line-height: 16px;
-  color: #ea3636;
+  color: var(--search-select-message-color);
   align-items: center;
 }
-.search-select-wrap .bk-select-tips .select-tips {
+.bk-search-select-tips .select-tips {
   display: flex;
   width: 16px;
   height: 16px;
@@ -534,6 +392,151 @@
   align-items: center;
   justify-content: center;
 }
-.popover-content {
+.bk-search-select-menu {
+  display: flex;
+  min-width: 160px;
+  font-size: 12px;
+  color: var(--search-select-font-color);
+  flex-direction: column;
+}
+.bk-search-select-menu .menu-list-mixin {
+  display: flex;
+  flex-direction: column;
+}
+.bk-search-select-menu .menu-item-mixin {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  flex: 0 0 32px;
+  outline: none;
+}
+.bk-search-select-menu .menu-item-mixin:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-disabled-mixin {
+  color: var(--light-gray);
+}
+.bk-search-select-menu .menu-disabled-mixin:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-menu .menu-header {
+  display: flex;
+  flex-direction: column;
+  border-bottom: var(--border-width-base) var(--border-style-base) var(--border-style-color);
+}
+.bk-search-select-menu .menu-header-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  flex: 0 0 32px;
+  outline: none;
+}
+.bk-search-select-menu .menu-header-item:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-header-item.is-disabled {
+  color: var(--light-gray);
+}
+.bk-search-select-menu .menu-header-item.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-menu .menu-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-height: 240px;
+  overflow: auto;
+}
+.bk-search-select-menu .menu-content .menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  flex: 0 0 32px;
+  outline: none;
+}
+.bk-search-select-menu .menu-content .menu-item:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-content .menu-item .is-keyword {
+  display: inline-flex;
+  color: var(--primary-color);
+}
+.bk-search-select-menu .menu-content .menu-item .is-selected {
+  display: flex;
+  width: 14px;
+  height: 14px;
+  margin-left: auto;
+  overflow: hidden;
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--primary-color);
+  align-items: center;
+  justify-content: center;
+}
+.bk-search-select-menu .menu-content .menu-item.is-hover {
+  color: var(--primary-color);
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-content .menu-item.is-hover .menu-name {
+  color: var(--primary-color);
+}
+.bk-search-select-menu .menu-content .menu-item.is-disabled {
+  color: var(--light-gray);
+}
+.bk-search-select-menu .menu-content .menu-item.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-menu .menu-content .menu-item.is-disabled .menu-name {
+  color: var(--light-gray);
+}
+.bk-search-select-menu .menu-content .menu-item .menu-name {
+  display: flex;
+  max-width: 100px;
+  margin-right: 5px;
+  font-weight: bold;
+  color: var(--search-select-font-color);
+  align-items: center;
+}
+.bk-search-select-menu .menu-footer {
+  display: flex;
+  width: 100%;
+  height: 32px;
+  border-top: var(--border-width-base) var(--border-style-base) var(--border-style-color);
+  align-items: center;
+}
+.bk-search-select-menu .menu-footer-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.bk-search-select-menu .menu-footer-btn:first-child {
+  border-right: var(--border-width-base) var(--border-style-base) var(--border-style-color);
+}
+.bk-search-select-menu .menu-footer-btn:hover {
+  color: var(--primary-color);
+  cursor: pointer;
+}
+.bk-search-select-menu .menu-footer-btn.is-disabled {
+  color: var(--light-gray);
+}
+.bk-search-select-menu .menu-footer-btn.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-popover {
   margin: -7px -14px;
 }

package/lib/search-select/utils.d.ts

@@ -25,8 +25,8 @@ export declare const SEARCH_SLECT_PROVIDER_KEY: InjectionKey<ISearchSelectProvid
 export declare const useSearchSelectProvider: (data: ISearchSelectProvider) => void;
 export declare const useSearchSelectInject: () => ISearchSelectProvider;
 export declare enum SearchInputMode {
-    'DEFAULT' = 0,
-    'EDIT' = 1
+    'DEFAULT' = "default",
+    'EDIT' = "edit"
 }
 export interface ICommonItem {
     id: string;

package/lib/select/index.d.ts

@@ -5,8 +5,8 @@ declare const BkSelect: {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            showOnInit: boolean;
             disabled: boolean;
+            showOnInit: boolean;
             placeholder: string;
             list: unknown[];
             size: string;
@@ -217,7 +217,7 @@ declare const BkSelect: {
             onClear?: (...args: any[]) => any;
             onToggle?: (...args: any[]) => any;
             "onScroll-end"?: (...args: any[]) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "showOnInit" | "disabled" | "placeholder" | "list" | "size" | "multiple" | "loading" | "clearable" | "behavior" | "withValidate" | "showSelectedIcon" | "tagTheme" | "filterable" | "allowCreate" | "collapseTags" | "popoverMinWidth" | "idKey" | "remoteMethod" | "scrollHeight" | "popoverOptions" | "showSelectAll" | "multipleMode" | "autoHeight" | "noDataText" | "noMatchText" | "loadingText" | "searchPlaceholder" | "selectAllText" | "scrollLoading" | "customContent" | "displayKey" | "inputSearch" | "enableVirtualRender" | "allowEmptyValues">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "showOnInit" | "placeholder" | "list" | "size" | "multiple" | "loading" | "clearable" | "behavior" | "withValidate" | "showSelectedIcon" | "tagTheme" | "filterable" | "allowCreate" | "collapseTags" | "popoverMinWidth" | "idKey" | "remoteMethod" | "scrollHeight" | "popoverOptions" | "showSelectAll" | "multipleMode" | "autoHeight" | "noDataText" | "noMatchText" | "loadingText" | "searchPlaceholder" | "selectAllText" | "scrollLoading" | "customContent" | "displayKey" | "inputSearch" | "enableVirtualRender" | "allowEmptyValues">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -733,8 +733,8 @@ declare const BkSelect: {
             handleKeydown: (e: any) => void;
             handleSelectedAllOptionMouseEnter: () => void;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "blur" | "change" | "toggle" | "clear" | "update:modelValue" | "scroll-end")[], string, {
-            showOnInit: boolean;
             disabled: boolean;
+            showOnInit: boolean;
             placeholder: string;
             list: unknown[];
             size: string;
@@ -1796,8 +1796,8 @@ declare const BkSelect: {
     handleKeydown: (e: any) => void;
     handleSelectedAllOptionMouseEnter: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "blur" | "change" | "toggle" | "clear" | "update:modelValue" | "scroll-end")[], "focus" | "blur" | "change" | "toggle" | "clear" | "update:modelValue" | "scroll-end", {
-    showOnInit: boolean;
     disabled: boolean;
+    showOnInit: boolean;
     placeholder: string;
     list: unknown[];
     size: string;

package/lib/select/select.d.ts

@@ -669,8 +669,8 @@ declare const _default: import("vue").DefineComponent<{
     onToggle?: (...args: any[]) => any;
     "onScroll-end"?: (...args: any[]) => any;
 }, {
-    showOnInit: boolean;
     disabled: boolean;
+    showOnInit: boolean;
     placeholder: string;
     list: unknown[];
     size: string;

package/lib/select/select.variable.css

@@ -23,6 +23,7 @@
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
   --input-disabled-bg: #fafbfd;
   --input-disabled-border: var(--disable-color);
   --input-height-base: var(--component-size-base);
@@ -110,6 +111,11 @@
   --cascader-panel-hover: #f5f7fa;
   --cascader-panel-active: #e1ecff;
   --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
 }
 @keyframes loading-scale-animate {
   0% {

package/lib/sideslider/sideslider.variable.css

@@ -23,6 +23,7 @@
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
   --input-disabled-bg: #fafbfd;
   --input-disabled-border: var(--disable-color);
   --input-height-base: var(--component-size-base);
@@ -110,6 +111,11 @@
   --cascader-panel-hover: #f5f7fa;
   --cascader-panel-active: #e1ecff;
   --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
 }
 .bk-sideslider {
   position: fixed;

package/lib/slider/slider.variable.css

@@ -23,6 +23,7 @@
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
   --input-disabled-bg: #fafbfd;
   --input-disabled-border: var(--disable-color);
   --input-height-base: var(--component-size-base);
@@ -110,6 +111,11 @@
   --cascader-panel-hover: #f5f7fa;
   --cascader-panel-active: #e1ecff;
   --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
 }
 .bk-slider {
   display: flex;