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

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

package/lib/date-picker/index.js

@@ -4260,7 +4260,6 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       emit = _ref.emit;
     var formItem = (0,shared_namespaceObject.useFormItem)();
     var isRange = props.type.includes('range');
-    var teleportTo = (0,external_vue_namespaceObject.ref)((0,shared_namespaceObject.getFullscreenRoot)());
     var emptyArray = isRange ? [null, null] : [null];
     var initialArr = isRange ? props.value || props.modelValue : [props.value || props.modelValue];
     var initialValue = isAllEmptyArr(initialArr) ? emptyArray : parseDate(props.value || props.modelValue, props.type, props.multiple, props.format);
@@ -4576,7 +4575,6 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       if (props.readonly) {
         return;
       }
-      teleportTo.value = (0,shared_namespaceObject.getFullscreenRoot)();
       state.isFocused = true;
       if (e && e.type === 'focus') {
         return;
@@ -4762,7 +4760,6 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       localReadonly: localReadonly,
       allowCrossDayProp: allowCrossDayProp,
       ownPickerProps: ownPickerProps,
-      teleportTo: teleportTo,
       pickerDropdownRef: pickerDropdownRef,
       inputRef: inputRef,
       triggerRef: triggerRef,
@@ -4830,6 +4827,9 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       confirm: this.$slots.confirm
     } : {};
     var slots = date_picker_objectSpread(date_picker_objectSpread({}, shortcutsSlot), confirmSlot);
+    var teleportTo = (0,external_vue_namespaceObject.computed)(function () {
+      return (0,shared_namespaceObject.getFullscreenRoot)();
+    });
     return (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
       "class": [this.resolveClassName('date-picker'), this.type === 'datetimerange' ? 'long' : '', this.longWidthCls]
     }, [(0,external_vue_namespaceObject.createVNode)("div", {
@@ -4838,7 +4838,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       "onMouseenter": this.handleInputMouseenter,
       "onMouseleave": this.handleInputMouseleave
     }, [(_this$$slots$trigger = (_this$$slots$trigger2 = (_this$$slots2 = this.$slots).trigger) === null || _this$$slots$trigger2 === void 0 ? void 0 : _this$$slots$trigger2.call(_this$$slots2, this.displayValue)) !== null && _this$$slots$trigger !== void 0 ? _this$$slots$trigger : defaultTrigger]), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Teleport, {
-      "to": this.teleportTo,
+      "to": teleportTo.value,
       "disabled": !this.appendToBody
     }, {
       "default": function _default() {
@@ -4963,7 +4963,6 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       emit = _ref.emit;
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
-    var teleportTo = (0,external_vue_namespaceObject.ref)((0,shared_namespaceObject.getFullscreenRoot)());
     var formItem = (0,shared_namespaceObject.useFormItem)();
     var isRange = props.type.includes('range');
     var emptyArray = isRange ? [null, null] : [null];
@@ -5276,7 +5275,6 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       if (props.readonly) {
         return;
       }
-      teleportTo.value = (0,shared_namespaceObject.getFullscreenRoot)();
       state.isFocused = true;
       if (e && e.type === 'focus') {
         return;
@@ -5464,7 +5462,6 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       inputRef: inputRef,
       triggerRef: triggerRef,
       pickerPanelRef: pickerPanelRef,
-      teleportTo: teleportTo,
       handleClose: handleClose,
       handleIconClick: handleIconClick,
       handleInputMouseenter: handleInputMouseenter,
@@ -5520,6 +5517,9 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
         return ((_this$$slots$shortcut = (_this$$slots = _this.$slots).shortcuts) === null || _this$$slots$shortcut === void 0 ? void 0 : _this$$slots$shortcut.call(_this$$slots)) || null;
       }
     } : {};
+    var teleportTo = (0,external_vue_namespaceObject.computed)(function () {
+      return (0,shared_namespaceObject.getFullscreenRoot)();
+    });
     return (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
       "class": [this.resolveClassName('date-picker'), this.type === 'datetimerange' ? 'long' : '', this.longWidthCls]
     }, [(0,external_vue_namespaceObject.createVNode)("div", {
@@ -5528,7 +5528,7 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       "onMouseenter": this.handleInputMouseenter,
       "onMouseleave": this.handleInputMouseleave
     }, [(_this$$slots$trigger = (_this$$slots$trigger2 = (_this$$slots2 = this.$slots).trigger) === null || _this$$slots$trigger2 === void 0 ? void 0 : _this$$slots$trigger2.call(_this$$slots2, this.displayValue)) !== null && _this$$slots$trigger !== void 0 ? _this$$slots$trigger : defaultTrigger]), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Teleport, {
-      "to": this.teleportTo,
+      "to": teleportTo.value,
       "disabled": !this.appendToBody
     }, {
       "default": function _default() {

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

@@ -165,7 +165,6 @@ declare const _default: import("vue").DefineComponent<{
     inputRef: import("vue").Ref<any>;
     triggerRef: import("vue").Ref<HTMLElement>;
     pickerPanelRef: import("vue").Ref<any>;
-    teleportTo: import("vue").Ref<any>;
     handleClose: (e?: Event) => boolean;
     handleIconClick: () => void;
     handleInputMouseenter: () => void;