bkui-vue 1.0.3-beta.26 → 1.0.3-beta.28

package/lib/date-picker/date-picker.variable.css

@@ -12,13 +12,13 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-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;
-  --border-color: #dcdee5;
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
@@ -111,7 +111,7 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656e;
+  --table-body-font-color: #63656E;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;
@@ -127,24 +127,24 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-:where(.bk-date-picker) {
+.bk-date-picker {
   display: inline-block;
   width: 261px;
   line-height: normal;
 }
-:where(.bk-date-picker).long {
+.bk-date-picker.long {
   width: 342px;
 }
-:where(.bk-date-picker).medium-width {
+.bk-date-picker.medium-width {
   width: 362px;
 }
-:where(.bk-date-picker).large-width {
+.bk-date-picker.large-width {
   width: 402px;
 }
-:where(.bk-date-picker-rel) {
+.bk-date-picker-rel {
   position: relative;
 }
-:where(.bk-date-picker-rel) .bk-date-picker-editor {
+.bk-date-picker-rel .bk-date-picker-editor {
   display: block;
   width: 100%;
   height: 32px;
@@ -158,40 +158,40 @@
   outline: none;
   box-sizing: border-box;
 }
-:where(.bk-date-picker-rel) .bk-date-picker-editor.only-bottom-border {
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border {
   border-color: transparent transparent var(--light-gray) transparent;
 }
-:where(.bk-date-picker-rel) .bk-date-picker-editor.only-bottom-border:focus {
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border:focus {
   border-color: transparent transparent var(--primary-color) transparent;
   box-shadow: none;
 }
-:where(.bk-date-picker-rel) .bk-date-picker-editor.only-bottom-border[disabled],
-:where(.bk-date-picker-rel) .bk-date-picker-editor.only-bottom-border.readonly {
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border[disabled],
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border.readonly {
   border-color: transparent transparent var(--disable-color) transparent;
 }
-:where(.bk-date-picker-rel) .bk-date-picker-editor:focus {
+.bk-date-picker-rel .bk-date-picker-editor:focus {
   border: 1px solid var(--primary-color);
 }
-:where(.bk-date-picker-rel) .bk-date-picker-editor::placeholder {
+.bk-date-picker-rel .bk-date-picker-editor::placeholder {
   color: var(--light-gray);
 }
-:where(.bk-date-picker-rel) .bk-date-picker-editor[disabled] {
+.bk-date-picker-rel .bk-date-picker-editor[disabled] {
   color: var(--light-gray);
   cursor: not-allowed;
   background-color: var(--date-picker-disabled-bg);
   border-color: var(--light-gray);
 }
-:where(.bk-date-picker-rel) .bk-date-picker-editor.readonly {
+.bk-date-picker-rel .bk-date-picker-editor.readonly {
   background-color: var(--date-picker-disabled-bg);
   border-color: var(--light-gray);
 }
-:where(.bk-date-picker-rel) .bk-date-picker-editor.medium-font {
+.bk-date-picker-rel .bk-date-picker-editor.medium-font {
   font-size: 14px;
 }
-:where(.bk-date-picker-rel) .bk-date-picker-editor.large-font {
+.bk-date-picker-rel .bk-date-picker-editor.large-font {
   font-size: 16px;
 }
-:where(.bk-date-picker-rel) .clear-action {
+.bk-date-picker-rel .clear-action {
   position: absolute;
   top: 50%;
   right: 10px;
@@ -201,10 +201,10 @@
   cursor: pointer;
   transform: translateY(-50%);
 }
-:where(.bk-date-picker-rel) .clear-action:hover {
+.bk-date-picker-rel .clear-action:hover {
   color: var(--gray-color);
 }
-:where(.bk-date-picker-rel) .icon-wrapper {
+.bk-date-picker-rel .icon-wrapper {
   position: absolute;
   top: 0;
   left: 0;
@@ -215,16 +215,16 @@
   cursor: pointer;
   background-color: transparent;
 }
-:where(.bk-date-picker-rel) .icon-wrapper.disabled {
+.bk-date-picker-rel .icon-wrapper.disabled {
   cursor: not-allowed;
 }
-:where(.bk-date-picker-rel) .icon-wrapper i.icon-clock {
+.bk-date-picker-rel .icon-wrapper i.icon-clock {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
-:where(.bk-date-picker-rel) .icon-wrapper .picker-icon {
+.bk-date-picker-rel .icon-wrapper .picker-icon {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -232,7 +232,7 @@
   height: 18px;
   transform: translate(-50%, -50%);
 }
-:where(.bk-date-picker-dropdown) {
+.bk-date-picker-dropdown {
   position: absolute;
   z-index: 900;
   padding: 5px 0 0 0;
@@ -243,28 +243,28 @@
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
 }
-:where(.bk-date-picker) .bk-select-dropdown {
+.bk-date-picker .bk-select-dropdown {
   max-height: none;
   padding: 0;
   overflow: visible;
 }
-:where(.bk-date-picker-footer-wrapper) {
+.bk-date-picker-footer-wrapper {
   clear: both;
   font-size: 14px;
   color: #979ba5;
   background-color: #fafbfd;
   border-top: 1px solid #dcdee5;
 }
-:where(.bk-date-picker-top-wrapper) {
+.bk-date-picker-top-wrapper {
   margin-top: -5px;
   clear: both;
   font-size: 14px;
   color: #979ba5;
 }
-:where(.bk-picker-panel-body-wrapper).bk-picker-panel-with-sidebar {
+.bk-picker-panel-body-wrapper.bk-picker-panel-with-sidebar {
   padding-right: 140px;
 }
-:where(.bk-picker-panel-sidebar) {
+.bk-picker-panel-sidebar {
   position: absolute;
   top: 0;
   right: 0;
@@ -277,7 +277,7 @@
   background-color: #fafbfd;
   border-left: 1px solid #dcdee5;
 }
-:where(.bk-picker-panel-sidebar) .bk-picker-panel-shortcut {
+.bk-picker-panel-sidebar .bk-picker-panel-shortcut {
   /* &:nth-of-type(1) {
           padding-top: 18px;
       }
@@ -290,31 +290,31 @@
   white-space: nowrap;
   cursor: pointer;
 }
-:where(.bk-picker-panel-sidebar) .bk-picker-panel-shortcut:hover {
+.bk-picker-panel-sidebar .bk-picker-panel-shortcut:hover {
   background-color: #e1ecff;
 }
-:where(.bk-picker-panel-sidebar) .bk-picker-panel-shortcuts {
+.bk-picker-panel-sidebar .bk-picker-panel-shortcuts {
   height: 100%;
   overflow: auto;
 }
-:where(.bk-picker-panel-sidebar) .bk-picker-panel-shortcuts > div {
+.bk-picker-panel-sidebar .bk-picker-panel-shortcuts > div {
   height: 32px;
   padding-left: 30px;
   line-height: 32px;
   color: #63656e;
   cursor: pointer;
 }
-:where(.bk-picker-panel-sidebar) .bk-picker-panel-shortcuts > div:hover {
+.bk-picker-panel-sidebar .bk-picker-panel-shortcuts > div:hover {
   background-color: #f5f7fa;
 }
-:where(.bk-picker-panel-sidebar) .bk-picker-panel-shortcuts .shortcuts-item-active {
+.bk-picker-panel-sidebar .bk-picker-panel-shortcuts .shortcuts-item-active {
   color: #3a84ff;
   background-color: #e1ecff;
 }
-:where(.bk-picker-panel-body) {
+.bk-picker-panel-body {
   float: left;
 }
-:where(.bk-picker-confirm) {
+.bk-picker-confirm {
   display: flex;
   height: 42px;
   padding: 0 20px;
@@ -326,29 +326,29 @@
   border-top: 1px solid #dcdee5;
   justify-content: flex-end;
 }
-:where(.bk-picker-confirm) a {
+.bk-picker-confirm a {
   color: #979ba5;
 }
-:where(.bk-picker-confirm) a.confirm {
+.bk-picker-confirm a.confirm {
   margin-left: 10px;
   color: #3a84ff;
 }
-:where(.bk-picker-confirm) a[disabled] {
+.bk-picker-confirm a[disabled] {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-:where(.bk-picker-confirm) .bk-picker-confirm-time {
+.bk-picker-confirm .bk-picker-confirm-time {
   height: 100%;
   margin-right: auto;
   color: #979ba5;
 }
-:where(.bk-picker-confirm) .bk-picker-confirm-time.is-disabled {
+.bk-picker-confirm .bk-picker-confirm-time.is-disabled {
   color: #c4c6cc;
 }
-:where(.bk-picker-confirm) .bk-picker-confirm-action {
+.bk-picker-confirm .bk-picker-confirm-action {
   flex: 1;
 }
-:where(.bk-date-picker-header) {
+.bk-date-picker-header {
   height: 46px;
   font-size: 14px;
   font-weight: 700;
@@ -357,35 +357,35 @@
   text-align: center;
   border-bottom: 1px solid #dcdee5;
 }
-:where(.bk-date-picker-header) .bk-date-picker-header-label {
+.bk-date-picker-header .bk-date-picker-header-label {
   cursor: pointer;
 }
-:where(.bk-date-picker-header) .bk-date-picker-header-label:hover {
+.bk-date-picker-header .bk-date-picker-header-label:hover {
   color: #3a84ff;
 }
-:where(.bk-date-picker-header) .up-to-now {
+.bk-date-picker-header .up-to-now {
   margin-left: 3px;
   font-weight: 400;
   cursor: pointer;
 }
-:where(.bk-date-picker-header) .up-to-now.disabled {
+.bk-date-picker-header .up-to-now.disabled {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-:where(.bk-date-picker-cells) {
+.bk-date-picker-cells {
   margin: 9px;
   font-size: 12px;
   color: #63656e;
   white-space: normal;
 }
-:where(.bk-date-picker-cells) span {
+.bk-date-picker-cells span {
   display: inline-block;
   width: 34px;
   height: 32px;
   line-height: 32px;
   text-align: center;
 }
-:where(.bk-date-picker-cells) span em {
+.bk-date-picker-cells span em {
   display: inline-block;
   width: 34px;
   height: 32px;
@@ -393,10 +393,10 @@
   line-height: 32px;
   cursor: pointer;
 }
-:where(.bk-date-picker-cells) .bk-date-picker-cells-header {
+.bk-date-picker-cells .bk-date-picker-cells-header {
   text-align: center;
 }
-:where(.bk-date-picker-cells) .bk-date-picker-cells-header span {
+.bk-date-picker-cells .bk-date-picker-cells-header span {
   width: 28px;
   height: 26px;
   margin: 3px;
@@ -405,20 +405,20 @@
   text-align: center;
   cursor: default;
 }
-:where(.bk-date-picker-cells-cell:hover) em {
+.bk-date-picker-cells-cell:hover em {
   /* background-color: #e1ecff; */
   background-color: #f0f1f5;
 }
-:where(.bk-date-picker-cells-focused) em {
+.bk-date-picker-cells-focused em {
   color: #3a84ff;
   box-shadow: 0 0 0 1px #a3c5fd inset;
 }
-:where(.bk-date-picker-cells-cell-prev-month) em,
-:where(.bk-date-picker-cells-cell-next-month) em {
+.bk-date-picker-cells-cell-prev-month em,
+.bk-date-picker-cells-cell-next-month em {
   color: #c4c6cc;
 }
-:where(.bk-date-picker-cells-cell-prev-month:hover) em,
-:where(.bk-date-picker-cells-cell-next-month:hover) em {
+.bk-date-picker-cells-cell-prev-month:hover em,
+.bk-date-picker-cells-cell-next-month:hover em {
   background: transparent;
 }
 span.bk-date-picker-cells-cell-week-label,
@@ -440,15 +440,15 @@ span.bk-date-picker-cells-cell-disabled,
 span.bk-date-picker-cells-cell-disabled:hover {
   background-color: #f0f1f5;
 }
-:where(.bk-date-picker-cells-cell-today) em {
+.bk-date-picker-cells-cell-today em {
   position: relative;
   color: #3a84ff;
   box-shadow: 0 0 0 1px #a3c5fd inset;
 }
-:where(.bk-date-picker-cells-cell-range) {
+.bk-date-picker-cells-cell-range {
   position: relative;
 }
-:where(.bk-date-picker-cells-cell-range):before {
+.bk-date-picker-cells-cell-range:before {
   position: absolute;
   top: 0;
   right: 0;
@@ -460,12 +460,12 @@ span.bk-date-picker-cells-cell-disabled:hover {
   border-radius: 0;
   content: '';
 }
-:where(.bk-date-picker-cells-cell-range) em {
+.bk-date-picker-cells-cell-range em {
   position: relative;
   z-index: 1;
 }
-:where(.bk-date-picker-cells-cell-selected) em,
-:where(.bk-date-picker-cells-cell-selected:hover) em {
+.bk-date-picker-cells-cell-selected em,
+.bk-date-picker-cells-cell-selected:hover em {
   color: #fff;
   background-color: #3a84ff;
   box-shadow: 0 0 0 1px #3a84ff inset;
@@ -474,19 +474,19 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
   color: #f7f7f7;
   background: #c4c6cc;
 }
-:where(.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected) em:after {
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:after {
   background: #fff;
 }
-:where(.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected) em,
-:where(.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected) em:hover {
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em,
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:hover {
   box-shadow: 0 0 0 1px #3a84ff inset;
 }
-:where(.bk-date-picker-cells-year),
-:where(.bk-date-picker-cells-month) {
+.bk-date-picker-cells-year,
+.bk-date-picker-cells-month {
   margin-top: 7px;
 }
-:where(.bk-date-picker-cells-year) span,
-:where(.bk-date-picker-cells-month) span {
+.bk-date-picker-cells-year span,
+.bk-date-picker-cells-month span {
   width: 36px;
   height: 32px;
   margin: 10px 12px;
@@ -494,14 +494,14 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
   text-align: center;
   border-radius: 3px;
 }
-:where(.bk-date-picker-cells-year) span em,
-:where(.bk-date-picker-cells-month) span em {
+.bk-date-picker-cells-year span em,
+.bk-date-picker-cells-month span em {
   width: 36px;
   height: 32px;
   line-height: 32px;
   text-align: center;
 }
-:where(.bk-picker-panel-icon-btn) {
+.bk-picker-panel-icon-btn {
   display: inline-block;
   width: 20px;
   height: 46px;
@@ -511,56 +511,56 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
   cursor: pointer;
   transition: color 0.2s ease-in-out;
 }
-:where(.bk-picker-panel-icon-btn:hover) {
+.bk-picker-panel-icon-btn:hover {
   color: #2d8cf0;
 }
-:where(.bk-picker-panel-icon-btn) i {
+.bk-picker-panel-icon-btn i {
   font-size: 20px;
 }
-:where(.bk-date-picker-prev-btn) {
+.bk-date-picker-prev-btn {
   float: left;
 }
-:where(.bk-date-picker-prev-btn-arrow-double) {
+.bk-date-picker-prev-btn-arrow-double {
   margin-left: 10px;
 }
-:where(.bk-date-picker-prev-btn-arrow-double) i:after {
+.bk-date-picker-prev-btn-arrow-double i:after {
   margin-left: -8px;
 }
-:where(.bk-date-picker-next-btn) {
+.bk-date-picker-next-btn {
   float: right;
 }
-:where(.bk-date-picker-next-btn-arrow-double) {
+.bk-date-picker-next-btn-arrow-double {
   margin-right: 10px;
 }
-:where(.bk-date-picker-next-btn-arrow-double) i:after {
+.bk-date-picker-next-btn-arrow-double i:after {
   margin-left: -8px;
 }
-:where(.bk-date-picker-with-range) .bk-picker-panel-body {
+.bk-date-picker-with-range .bk-picker-panel-body {
   min-width: 532px;
 }
-:where(.bk-date-picker-with-range) .bk-picker-panel-content {
+.bk-date-picker-with-range .bk-picker-panel-content {
   float: left;
 }
-:where(.bk-date-picker-with-range) .bk-picker-cells-show-week-numbers {
+.bk-date-picker-with-range .bk-picker-cells-show-week-numbers {
   min-width: 492px;
 }
-:where(.bk-date-picker-transfer) {
+.bk-date-picker-transfer {
   z-index: 1060;
   max-height: none;
 }
-:where(.bk-fade-down-transition-enter-from),
-:where(.bk-fade-down-transition-leave-to) {
+.bk-fade-down-transition-enter-from,
+.bk-fade-down-transition-leave-to {
   opacity: 0;
   transform: translateY(-20px);
 }
-:where(.bk-fade-down-transition-enter-to),
-:where(.bk-fade-down-transition-leave-from) {
+.bk-fade-down-transition-enter-to,
+.bk-fade-down-transition-leave-from {
   opacity: 1;
   transform: translateY(0);
 }
-:where(.bk-fade-down-transition-enter-active) {
+.bk-fade-down-transition-enter-active {
   transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
 }
-:where(.bk-fade-down-transition-leave-active) {
+.bk-fade-down-transition-leave-active {
   transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
 }

package/lib/date-picker/index.d.ts

@@ -142,6 +142,7 @@ declare const BkDatePicker: {
         localReadonly: import("vue").ComputedRef<boolean>;
         allowCrossDayProp: import("vue").ComputedRef<boolean>;
         ownPickerProps: import("vue").ComputedRef<Record<string, any>>;
+        teleportTo: import("vue").Ref<any>;
         pickerDropdownRef: import("vue").Ref<any>;
         inputRef: import("vue").Ref<any>;
         triggerRef: import("vue").Ref<HTMLElement>;
@@ -491,6 +492,7 @@ declare const BkDatePicker: {
         localReadonly: import("vue").ComputedRef<boolean>;
         allowCrossDayProp: import("vue").ComputedRef<boolean>;
         ownPickerProps: import("vue").ComputedRef<Record<string, any>>;
+        teleportTo: import("vue").Ref<any>;
         pickerDropdownRef: import("vue").Ref<any>;
         inputRef: import("vue").Ref<any>;
         triggerRef: import("vue").Ref<HTMLElement>;
@@ -703,6 +705,7 @@ declare const BkDatePicker: {
     localReadonly: import("vue").ComputedRef<boolean>;
     allowCrossDayProp: import("vue").ComputedRef<boolean>;
     ownPickerProps: import("vue").ComputedRef<Record<string, any>>;
+    teleportTo: import("vue").Ref<any>;
     pickerDropdownRef: import("vue").Ref<any>;
     inputRef: import("vue").Ref<any>;
     triggerRef: import("vue").Ref<HTMLElement>;