vue-devui 1.0.0 → 1.0.1

package/textarea/style.css

@@ -1 +1 @@
-.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 4px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-popover__icon-wrap{width:16px;height:16px;margin-right:8px}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover__content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;color:var(--devui-text, #252b3a)}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-container .devui-form__feedback-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle{fill:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle{fill:var(--devui-success, #50d4ab)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg{animation:loading-keyframes 1s infinite linear}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path{fill:var(--devui-brand, #5e7ce0)}.devui-form__control .devui-form__control-content{width:100%}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info{line-height:1}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;line-height:1.5;font-size:var(--devui-font-size, 14px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 14px);color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form-operation .star{color:red}.devui-textarea{width:100%;box-sizing:border-box;padding:4px 8px;color:var(--devui-text, #252b3a);vertical-align:middle;outline:none;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:var(--devui-border-radius, 4px);background:var(--devui-form-control-bg, #ffffff);transition:border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-textarea:not(.devui-textarea--error):not(.devui-textarea--disabled):not(.devui-textarea--focus):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-textarea--focus:not(.devui-textarea--error){border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-textarea--disabled{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5);color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-textarea--disabled:hover{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-textarea--disabled .devui-textarea__inner{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-textarea--error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}.devui-textarea__show-count{text-align:right;color:inherit;white-space:nowrap;pointer-events:none;font-size:var(--devui-font-size, 14px)}.devui-textarea--feedback{padding-right:28px}
+.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-popover__icon-wrap{width:16px;height:16px;margin-right:8px}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover__content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;color:var(--devui-text, #252b3a)}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-container .devui-form__feedback-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle{fill:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle{fill:var(--devui-success, #50d4ab)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg{animation:loading-keyframes 1s infinite linear}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path{fill:var(--devui-brand, #5e7ce0)}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info{line-height:1}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;line-height:1.5;font-size:var(--devui-font-size, 14px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 14px);color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form-operation .star{color:red}.devui-textarea{width:100%;box-sizing:border-box;padding:4px 8px;color:var(--devui-text, #252b3a);vertical-align:middle;outline:none;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:var(--devui-border-radius, 2px);background:var(--devui-form-control-bg, #ffffff);transition:border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-textarea:not(.devui-textarea--error):not(.devui-textarea--disabled):not(.devui-textarea--focus):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-textarea--focus:not(.devui-textarea--error){border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-textarea--disabled{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5);color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-textarea--disabled:hover{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-textarea--disabled .devui-textarea__inner{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-textarea--error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}.devui-textarea__show-count{text-align:right;color:inherit;white-space:nowrap;pointer-events:none;font-size:var(--devui-font-size, 14px)}.devui-textarea--feedback{padding-right:28px}

package/time-picker/index.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, ref, reactive, onMounted, onBeforeUnmount, onUnmounted, Fragment, h, render, inject, withDirectives, resolveDirective, provide, toRef, getCurrentInstance, watch, isVNode, Transition, unref, nextTick, Comment, Text, cloneVNode, Teleport, withModifiers, createTextVNode, shallowRef } from "vue";
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, ref, reactive, onMounted, onBeforeUnmount, onUnmounted, Fragment, h, render, inject, withDirectives, resolveDirective, provide, toRef, getCurrentInstance, watch, withModifiers, isVNode, Transition, unref, nextTick, Comment, Text, cloneVNode, Teleport, createTextVNode, shallowRef } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const timePickerProps = {
@@ -259,7 +259,8 @@ var Icon = defineComponent({
     const wrapClassed = computed(() => ({
       [ns2.e("container")]: true,
       [ns2.m("disabled")]: disabled.value,
-      [ns2.m("operable")]: operable.value
+      [ns2.m("operable")]: operable.value,
+      [ns2.m("no-slots")]: !Object.keys(ctx.slots).length
     }));
     const onClick = (e) => {
       if (disabled.value) {
@@ -291,7 +292,6 @@ defineComponent({
 });
 function useTimePicker(hh, mm, ss, format2, props) {
   const showPopup = ref(false);
-  const devuiTimePicker = ref();
   const inputDom = ref();
   const overlayRef = ref();
   const timePopupDom = ref();
@@ -311,9 +311,9 @@ function useTimePicker(hh, mm, ss, format2, props) {
     } else if (format2 === "mm:hh:ss") {
       trueValue = `${timeArr[1]}:${timeArr[0]}:${timeArr[2]}`;
     } else if (format2 === "hh:mm") {
-      trueValue = `${timeArr[0]}:${timeArr[1]}:${ss.value}`;
+      trueValue = `${timeArr[0]}:${timeArr[1]}`;
     } else if (format2 === "mm:ss") {
-      trueValue = `${hh.value}:${timeArr[0]}:${timeArr[1]}`;
+      trueValue = `${timeArr[0]}:${timeArr[1]}`;
     }
     return trueValue;
   };
@@ -361,16 +361,15 @@ function useTimePicker(hh, mm, ss, format2, props) {
     }
     showPopup.value = true;
   };
-  const clickVerifyFun = (e) => {
-    e.stopPropagation();
+  const clickVerifyFun = () => {
     if (props.disabled || props.readonly) {
       return;
     }
     mouseInputFun();
   };
-  onClickOutside(devuiTimePicker, () => {
+  onClickOutside(overlayRef, () => {
     showPopup.value = false;
-  });
+  }, { ignore: [inputDom] });
   const clearAll = (e) => {
     e.stopPropagation();
     if (props.minTime !== "00:00:00") {
@@ -415,7 +414,6 @@ function useTimePicker(hh, mm, ss, format2, props) {
   return {
     showPopup,
     trueTimeValue,
-    devuiTimePicker,
     timePickerValue,
     inputDom,
     timePopupDom,
@@ -674,6 +672,36 @@ const usePopupLine = (hourListRef, minuteListRef, secondListRef, minTime, maxTim
     resetScrollTop
   };
 };
+const popupLineProps = {
+  hourList: {
+    type: Array,
+    default: () => []
+  },
+  minuteList: {
+    type: Array,
+    default: () => []
+  },
+  secondList: {
+    type: Array,
+    default: () => []
+  },
+  format: {
+    type: String,
+    default: "hh:mm:ss"
+  },
+  minTime: {
+    type: String,
+    default: "00:00:00"
+  },
+  maxTime: {
+    type: String,
+    default: "23:59:59"
+  },
+  itemHeight: {
+    type: Number,
+    default: 32
+  }
+};
 function useTimeScroll() {
   const scrollBoxDom = ref(null);
   const scrollContentDom = ref(null);
@@ -825,41 +853,9 @@ var TimeScroll = defineComponent({
   }
 });
 var index$2 = "";
-var TimeList = defineComponent({
+var PopupLine = defineComponent({
   name: "DTimeList",
-  components: {
-    TimeScroll
-  },
-  props: {
-    hourList: {
-      type: Array,
-      default: () => []
-    },
-    minuteList: {
-      type: Array,
-      default: () => []
-    },
-    secondList: {
-      type: Array,
-      default: () => []
-    },
-    format: {
-      type: String,
-      default: "hh:mm:ss"
-    },
-    minTime: {
-      type: String,
-      default: "00:00:00"
-    },
-    maxTime: {
-      type: String,
-      default: "23:59:59"
-    },
-    itemHeight: {
-      type: Number,
-      default: 32
-    }
-  },
+  props: popupLineProps,
   emits: ["change"],
   setup(props, ctx) {
     const ns2 = useNamespace("time-list");
@@ -874,14 +870,12 @@ var TimeList = defineComponent({
       resetTimeValue(time);
     };
     const TimeLi = (timeArr) => {
-      return timeArr.map((item, index2) => {
-        return createVNode("li", {
-          "class": `time-li ${item.flag}Id-${index2} ${item.isActive ? "active-li" : ""} ${item.isDisabled ? "disabled-li" : ""}`,
-          "onClick": (e) => {
-            activeTimeFun(e, item, index2);
-          }
-        }, [createVNode("span", null, [item.time])]);
-      });
+      return timeArr.map((item, index2) => createVNode("li", {
+        "class": `time-li ${item.flag}Id-${index2} ${item.isActive ? "active-li" : ""} ${item.isDisabled ? "disabled-li" : ""}`,
+        "onClick": (e) => {
+          activeTimeFun(e, item, index2);
+        }
+      }, [createVNode("span", null, [item.time])]));
     };
     const TimeUl = (timeList) => {
       return createVNode("div", {
@@ -911,12 +905,10 @@ var TimeList = defineComponent({
       setOuterTime,
       getNewTime
     });
-    return () => {
-      return createVNode("div", {
-        "class": ns2.b(),
-        "ref": timeListDom
-      }, [formatTimeUl()]);
-    };
+    return () => createVNode("div", {
+      "class": ns2.b(),
+      "ref": timeListDom
+    }, [formatTimeUl()]);
   }
 });
 class View {
@@ -951,7 +943,7 @@ class LoadingOptions {
 }
 var loading = "";
 var Loading = defineComponent({
-  name: "DLoading",
+  name: "Loading",
   inheritAttrs: false,
   props: loadingProps,
   setup(props) {
@@ -1104,12 +1096,12 @@ const handleProps = (el, vprops) => {
   const props = __spreadValues(__spreadValues({}, new LoadingOptions()), vprops);
   const loadingTemplateRef = props.loadingTemplateRef;
   const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
-  el.style.position = props.positionType;
+  el.style.position = props.positionType || "relative";
   el.options = props;
   el.instance = loadingInstance;
   el.mask = (_a = loadingInstance == null ? void 0 : loadingInstance.proxy) == null ? void 0 : _a.$el;
 };
-const loadingDirective = {
+const LoadingDirective = {
   mounted: function(el, binding, vnode) {
     handleProps(el, vnode.props);
     removeAttribute(el);
@@ -6611,7 +6603,7 @@ var button = "";
 var Button = defineComponent({
   name: "DButton",
   directives: {
-    dLoading: loadingDirective
+    Loading: LoadingDirective
   },
   props: buttonProps,
   emits: ["click"],
@@ -6644,7 +6636,7 @@ var Button = defineComponent({
         "class": iconClass.value
       }, null), createVNode("span", {
         "class": "button-content"
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("dLoading"), loading2.value]]);
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("loading"), loading2.value]]);
     };
   }
 });
@@ -6666,7 +6658,40 @@ defineComponent({
     };
   }
 });
-var index$1 = "";
+const timePopupProps = {
+  showPopup: {
+    type: Boolean,
+    default: false
+  },
+  popupTop: {
+    type: Number,
+    default: -100
+  },
+  popupLeft: {
+    type: Number,
+    default: -100
+  },
+  popupWidth: {
+    type: Number,
+    default: 300
+  },
+  popupFormat: {
+    type: String,
+    default: "hh:mm:ss"
+  },
+  minTime: {
+    type: String,
+    default: "00:00:00"
+  },
+  maxTime: {
+    type: String,
+    default: "23:59:59"
+  },
+  bindData: {
+    type: String,
+    default: "00:00:00"
+  }
+};
 function deepAssign(...objects) {
   const isObject2 = (obj) => obj && typeof obj === "object";
   return objects.reduce((prev, from) => {
@@ -6687,7 +6712,8 @@ function deepAssign(...objects) {
 var zhCN = {
   pagination: {
     totalItemText: "\u6240\u6709\u6761\u76EE",
-    goToText: "\u8DF3\u81F3"
+    goToText: "\u8DF3\u81F3",
+    perPage: "\u6761/\u9875"
   },
   accordion: {
     loading: "\u52A0\u8F7D\u4E2D",
@@ -6835,49 +6861,13 @@ function createI18nTranslate(name, app, newPrefix) {
     return message;
   };
 }
+var index$1 = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 var TimePopup = defineComponent({
   name: "DTimePopup",
-  components: {
-    TimeList,
-    Button
-  },
-  props: {
-    showPopup: {
-      type: Boolean,
-      default: false
-    },
-    popupTop: {
-      type: Number,
-      default: -100
-    },
-    popupLeft: {
-      type: Number,
-      default: -100
-    },
-    popupWidth: {
-      type: Number,
-      default: 300
-    },
-    popupFormat: {
-      type: String,
-      default: "hh:mm:ss"
-    },
-    minTime: {
-      type: String,
-      default: "00:00:00"
-    },
-    maxTime: {
-      type: String,
-      default: "23:59:59"
-    },
-    bindData: {
-      type: String,
-      default: "00:00:00"
-    }
-  },
+  props: timePopupProps,
   emits: ["submitData", "change"],
   setup(props, ctx) {
     const app = getCurrentInstance();
@@ -6905,8 +6895,7 @@ var TimePopup = defineComponent({
     const changeData = (value) => {
       ctx.emit("change", value);
     };
-    const subDataFun = (e) => {
-      e.stopPropagation();
+    const subDataFun = () => {
       ctx.emit("submitData");
     };
     ctx.expose({
@@ -6915,13 +6904,13 @@ var TimePopup = defineComponent({
     return () => {
       var _a, _b;
       let _slot;
-      return createVNode(Fragment, null, [createVNode("div", {
+      return createVNode("div", {
         "ref": popupDome,
         "class": ns2.b(),
         "style": {
           width: props.popupWidth + "px"
         }
-      }, [createVNode(TimeList, {
+      }, [createVNode(PopupLine, {
         "ref": timeListDom,
         "hourList": hourList,
         "minuteList": minuteList,
@@ -6935,14 +6924,14 @@ var TimePopup = defineComponent({
       }, [createVNode("div", {
         "class": "popup-slots"
       }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), createVNode("div", {
-        "onClick": subDataFun
+        "onClick": withModifiers(subDataFun, ["stop"])
       }, [createVNode(Button, {
         "variant": "solid",
         "color": "secondary",
         "size": "sm"
       }, _isSlot(_slot = t("ok")) ? _slot : {
         default: () => [_slot]
-      })])])])]);
+      })])])]);
     };
   }
 });
@@ -7300,6 +7289,10 @@ const flexibleOverlayProps = {
   isArrowCenter: {
     type: Boolean,
     default: true
+  },
+  clickEventBubble: {
+    type: Boolean,
+    default: false
   }
 };
 function getScrollParent(element) {
@@ -7414,6 +7407,9 @@ const FlexibleOverlay = defineComponent({
     expose
   }) {
     const ns2 = useNamespace("flexible-overlay");
+    const {
+      clickEventBubble
+    } = toRefs(props);
     const {
       arrowRef,
       overlayRef,
@@ -7427,7 +7423,10 @@ const FlexibleOverlay = defineComponent({
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
         "class": ns2.b()
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+      }, attrs, {
+        "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
+        "onPointerup": withModifiers(() => ({}), ["stop"])
+      }), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
         "ref": arrowRef,
         "class": ns2.e("arrow")
       }, null)]);
@@ -7545,7 +7544,7 @@ const TransformOriginMap = {
 function usePopover(props, visible, placement, origin, popoverRef) {
   const { trigger, isOpen } = toRefs(props);
   const overlayStyles = computed(() => ({
-    zIndex: 1060,
+    zIndex: "var(--devui-z-index-pop-up, 1060)",
     transformOrigin: TransformOriginMap[placement.value]
   }));
   const onDocumentClick = (e) => {
@@ -7788,8 +7787,6 @@ var Popover = defineComponent({
           "style": overlayStyles.value
         }, attrs, {
           "onPositionChange": handlePositionChange,
-          "onClick": withModifiers(() => ({}), ["stop"]),
-          "onPointerup": withModifiers(() => ({}), ["stop"]),
           "onMouseenter": onMouseenter,
           "onMouseleave": onMouseleave
         }), {
@@ -7988,9 +7985,7 @@ var FormControl = defineComponent({
     }, {
       default: () => {
         var _a, _b;
-        return [createVNode("div", {
-          "class": ns2.e("control-content")
-        }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), createTextVNode(",")];
+        return [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)];
       }
     }), showFeedback.value && createVNode("span", {
       "class": [ns2.e("feedback-icon"), ns2.em("feedback-icon", feedbackStatus.value)]
@@ -9418,7 +9413,7 @@ var DInput = defineComponent({
         "class": ns2.em("password", "icon"),
         "name": passwordVisible.value ? "preview" : "preview-forbidden",
         "onClick": clickPasswordIcon
-      }, null), showClearable.value && createVNode(Icon, {
+      }, null), showClearable.value && modelValue.value.length > 0 && createVNode(Icon, {
         "size": inputSize.value,
         "class": ns2.em("clear", "icon"),
         "name": "close",
@@ -9448,7 +9443,6 @@ var TimePicker = defineComponent({
     const {
       showPopup,
       trueTimeValue,
-      devuiTimePicker,
       inputDom,
       overlayRef,
       showClearIcon,
@@ -9465,9 +9459,7 @@ var TimePicker = defineComponent({
       showPopup.value = false;
       ctx.emit("change", trueTimeValue.value);
     };
-    onMounted(() => {
-      isOutOpen();
-    });
+    onMounted(isOutOpen);
     watch(trueTimeValue, (newValue) => {
       ctx.emit("update:modelValue", trueTimeValue.value);
       if (newValue !== props.minTime && newValue !== "00:00") {
@@ -9482,17 +9474,15 @@ var TimePicker = defineComponent({
     });
     return () => {
       return createVNode("div", {
-        "class": ns2.b(),
-        "ref": devuiTimePicker
-      }, [createVNode("div", {
-        "ref": inputDom
+        "class": ns2.b()
       }, [createVNode(DInput, {
         "modelValue": vModeValue.value,
+        "ref": inputDom,
         "placeholder": props.placeholder,
         "disabled": props.disabled,
         "readonly": props.readonly,
         "size": props.size,
-        "onFocus": clickVerifyFun
+        "onFocus": withModifiers(clickVerifyFun, ["stop"])
       }, {
         suffix: () => createVNode("span", {
           "class": "time-input-icon"
@@ -9506,33 +9496,43 @@ var TimePicker = defineComponent({
           "size": "small",
           "name": "time"
         }, null)])
-      })]), createVNode(Transition, {
-        "name": "fade"
+      }), createVNode(Teleport, {
+        "to": "body"
       }, {
-        default: () => [createVNode(FlexibleOverlay, {
-          "modelValue": showPopup.value,
-          "onUpdate:modelValue": ($event) => showPopup.value = $event,
-          "ref": overlayRef,
-          "origin": inputDom.value,
-          "position": position.value,
-          "align": "start"
+        default: () => [createVNode(Transition, {
+          "name": "fade"
         }, {
-          default: () => [createVNode(TimePopup, {
-            "ref": timePopupDom,
-            "showPopup": showPopup.value,
-            "popupWidth": props.timePickerWidth,
-            "popupFormat": props.format.toLowerCase(),
-            "minTime": props.minTime,
-            "maxTime": props.maxTime,
-            "bindData": firsthandActiveTime.value,
-            "onSubmitData": selectedTimeChange,
-            "onChange": changeTimeData
-          }, {
-            default: () => {
-              var _a, _b;
-              return [(_b = (_a = ctx.slots).customViewTemplate) == null ? void 0 : _b.call(_a)];
-            }
-          })]
+          default: () => {
+            var _a;
+            return [createVNode(FlexibleOverlay, {
+              "modelValue": showPopup.value,
+              "onUpdate:modelValue": ($event) => showPopup.value = $event,
+              "ref": overlayRef,
+              "origin": (_a = inputDom.value) == null ? void 0 : _a.$el,
+              "position": position.value,
+              "align": "start",
+              "style": {
+                zIndex: "var(--devui-z-index-dropdown, 1052)"
+              }
+            }, {
+              default: () => [createVNode(TimePopup, {
+                "ref": timePopupDom,
+                "showPopup": showPopup.value,
+                "popupWidth": props.timePickerWidth,
+                "popupFormat": props.format.toLowerCase(),
+                "minTime": props.minTime,
+                "maxTime": props.maxTime,
+                "bindData": firsthandActiveTime.value,
+                "onSubmitData": selectedTimeChange,
+                "onChange": changeTimeData
+              }, {
+                default: () => {
+                  var _a2, _b;
+                  return [(_b = (_a2 = ctx.slots).customViewTemplate) == null ? void 0 : _b.call(_a2)];
+                }
+              })]
+            })];
+          }
         })]
       })]);
     };