vue-devui 1.6.5 → 1.6.7

package/vue-devui.es.js

@@ -1854,6 +1854,10 @@ const autoCompleteProps = {
   clearable: {
     type: Boolean,
     default: false
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 const DropdownPropsKey = Symbol("DropdownPropsKey");
@@ -9934,6 +9938,7 @@ function useAutoCompleteRender(props, ctx2, visible, isFocus, isDisabled, autoCo
   const inputWrapperClasses = computed(() => ({
     [inputNs.e("wrapper")]: true,
     [inputNs.em("wrapper", "error")]: isValidatorError.value,
+    [ns2.m("glow-style")]: props.showGlowStyle,
     [inputNs.em("wrapper", "feedback")]: Boolean(formItemContext == null ? void 0 : formItemContext.validateState) && (formItemContext == null ? void 0 : formItemContext.showFeedback),
     [ns2.m("disabled")]: isDisabled.value
   }));
@@ -10522,6 +10527,7 @@ var AutoComplete = defineComponent({
     const inputNs = useNamespace$1("auto-complete-input");
     const isDisabled = computed(() => (formContext == null ? void 0 : formContext.disabled) || disabled.value);
     const autoCompleteSize = computed(() => (formContext == null ? void 0 : formContext.size) || props.size);
+    const align = computed(() => position.value.some((item) => item.includes("start") || item.includes("end")) ? "start" : null);
     const {
       handleSearch,
       searchList,
@@ -10581,22 +10587,30 @@ var AutoComplete = defineComponent({
       valueParser
     });
     const origin = ref();
+    const currentPosition = ref("bottom");
     const prefixVisible = ctx2.slots.prefix || props.prefix;
     const suffixVisible = ctx2.slots.suffix || props.suffix || props.clearable;
     const showClearable = computed(() => props.clearable && !isDisabled.value);
+    const overlayStyles = computed(() => ({
+      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
+      zIndex: "var(--devui-z-index-dropdown, 1052)"
+    }));
+    const handlePositionChange = (pos) => {
+      currentPosition.value = pos.includes("top") || pos.includes("right-end") || pos.includes("left-end") ? "top" : "bottom";
+    };
     const renderBasicDropdown = () => {
       let _slot;
       return createVNode(Transition, {
-        "name": showAnimation ? "fade" : ""
+        "name": showAnimation ? ns2.m(`fade-${currentPosition.value}`) : ""
       }, {
         default: () => [createVNode(FlexibleOverlay, {
           "origin": origin.value,
           "position": position.value,
+          "align": align.value,
           "modelValue": visible.value,
           "onUpdate:modelValue": ($event) => visible.value = $event,
-          "style": {
-            zIndex: "var(--devui-z-index-dropdown, 1052)"
-          }
+          "onPositionChange": handlePositionChange,
+          "style": overlayStyles.value
         }, {
           default: () => [createVNode("div", {
             "class": ns2.e("menu"),
@@ -11819,19 +11833,36 @@ var DButton = defineComponent({
       classes,
       iconClass
     } = useButton(props, ctx2);
+    const isMouseDown = ref(false);
+    const showWave = ref(false);
+    const waveStyle = reactive({
+      top: "0px",
+      left: "0px"
+    });
+    const showClickWave = (e) => {
+      waveStyle.left = e.offsetX + "px";
+      waveStyle.top = e.offsetY + "px";
+      showWave.value = true;
+      setTimeout(() => {
+        showWave.value = false;
+      }, 300);
+    };
     const onClick = (e) => {
       if (loading2.value) {
         return;
       }
+      showClickWave(e);
       ctx2.emit("click", e);
     };
     return () => {
       var _a2, _b;
       return createVNode("button", {
-        "class": classes.value,
+        "class": [classes.value, isMouseDown.value ? "mousedown" : ""],
         "disabled": disabled.value,
         "onClick": onClick,
-        "type": nativeType.value
+        "type": nativeType.value,
+        "onMousedown": () => isMouseDown.value = true,
+        "onMouseup": () => isMouseDown.value = false
       }, [icon2.value && createVNode(DIcon, {
         "name": icon2.value,
         "size": "var(--devui-font-size, 12px)",
@@ -11845,7 +11876,10 @@ var DButton = defineComponent({
         "color": "#BBDEFB"
       }, null)]), [[vShow, loading2.value]]), createVNode("span", {
         "class": "button-content"
-      }, [(_b = (_a2 = ctx2.slots).default) == null ? void 0 : _b.call(_a2)])]);
+      }, [(_b = (_a2 = ctx2.slots).default) == null ? void 0 : _b.call(_a2)]), showWave.value && createVNode("div", {
+        "class": "water-wave",
+        "style": waveStyle
+      }, null)]);
     };
   }
 });
@@ -12326,6 +12360,10 @@ const cascaderProps = {
   },
   size: {
     type: String
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 const cascaderulProps = {
@@ -12544,6 +12582,10 @@ const commonProps$2 = {
   size: {
     type: String,
     default: "md"
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 const checkboxProps = __spreadProps(__spreadValues({}, commonProps$2), {
@@ -12799,7 +12841,10 @@ var Checkbox = defineComponent({
         active: mergedChecked.value,
         "half-checked": props.halfChecked,
         disabled: mergedDisabled.value,
-        unchecked: !mergedChecked.value
+        unchecked: !mergedChecked.value,
+        [ns2.m("glow-style")]: props.showGlowStyle,
+        [ns2.m(`checkbox-${size.value}`)]: border.value,
+        [ns2.m("checkbox-bordered")]: border.value
       };
       const labelTitle = mergedIsShowTitle.value ? props.title || props.label : "";
       const bgImgStyle = mergedColor.value && props.halfChecked || mergedColor.value ? `linear-gradient(${mergedColor.value}, ${mergedColor.value})` : "";
@@ -12816,7 +12861,7 @@ var Checkbox = defineComponent({
         [ns2.m("no-animation")]: !mergedShowAnimation.value
       };
       const labelCls = {
-        [ns2.m(size.value)]: size.value,
+        [ns2.m(size.value)]: border.value,
         [ns2.m("bordered")]: border.value
       };
       const stopPropagation = ($event) => $event.stopPropagation();
@@ -12828,7 +12873,11 @@ var Checkbox = defineComponent({
         "style": wrapperStyle.value
       }, [createVNode("div", {
         "class": checkboxCls
-      }, [createVNode("label", {
+      }, [props.showGlowStyle && mergedShowAnimation.value && createVNode("div", {
+        "class": ns2.e("glow-box")
+      }, [createVNode("span", {
+        "class": "glow-bg"
+      }, null)]), createVNode("label", {
         "title": labelTitle,
         "onClick": handleClick,
         "class": labelCls,
@@ -12850,18 +12899,20 @@ var Checkbox = defineComponent({
       }, [createVNode("span", {
         "class": ns2.e("halfchecked-bg")
       }, null), createVNode("svg", {
-        "viewBox": "0 0 16 16",
-        "version": "1.1",
-        "xmlns": "http://www.w3.org/2000/svg",
+        "viewBox": "0 0 14 14",
+        "width": "14",
+        "height": "14",
         "class": ns2.e("tick-wrap")
       }, [createVNode("g", {
         "stroke": "none",
         "stroke-width": "1",
         "fill": "none",
         "fill-rule": "evenodd"
-      }, [createVNode("polygon", {
-        "fill-rule": "nonzero",
-        "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
+      }, [createVNode("path", {
+        "d": "M 2.3 7.0 5.6 9.6 11.4 3.5",
+        "stroke": "#fff",
+        "stroke-width": "1.5",
+        "fill": "none",
         "class": polygonCls
       }, null)])])]), createVNode("span", {
         "class": ns2.e("label-text")
@@ -13499,6 +13550,10 @@ const inputProps = {
   autofocus: {
     type: Boolean,
     default: false
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 function SelectArrowIcon() {
@@ -13573,7 +13628,7 @@ function useInputRender$1(props, ctx2) {
   const ns2 = useNamespace("input");
   const slotNs = useNamespace("input-slot");
   const isFocus = ref(false);
-  const { error: error2, size, disabled } = toRefs(props);
+  const { error: error2, size, disabled, showGlowStyle } = toRefs(props);
   const slots = ctx2.slots;
   const inputDisabled = computed(() => disabled.value || (formContext == null ? void 0 : formContext.disabled));
   const inputSize = computed(() => (size == null ? void 0 : size.value) || (formContext == null ? void 0 : formContext.size) || "");
@@ -13584,6 +13639,7 @@ function useInputRender$1(props, ctx2) {
     [ns2.e("wrapper")]: true,
     [ns2.m("focus")]: isFocus.value,
     [ns2.m("disabled")]: inputDisabled.value,
+    [ns2.m("glow-style")]: showGlowStyle.value,
     [ns2.m("error")]: error2.value || isValidateError.value,
     [ns2.m("feedback")]: Boolean(formItemContext == null ? void 0 : formItemContext.validateState) && (formItemContext == null ? void 0 : formItemContext.showFeedback)
   }));
@@ -13818,6 +13874,14 @@ var Cascader = defineComponent({
       onBlur
     } = useCascader(props, ctx2);
     provide(POPPER_TRIGGER_TOKEN, origin);
+    const currentPosition = ref("bottom");
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
+      "z-index": "var(--devui-z-index-dropdown, 1052)"
+    }));
+    const handlePositionChange = (pos) => {
+      currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
+    };
     return () => createVNode("div", {
       "style": rootStyle.inputWidth
     }, [createVNode(PopperTrigger, null, {
@@ -13834,6 +13898,7 @@ var Cascader = defineComponent({
         "placeholder": props.placeholder,
         "modelValue": inputValue.value,
         "size": props.size,
+        "show-glow-style": props.showGlowStyle,
         "onInput": handleInput,
         "onFocus": onFocus,
         "onBlur": onBlur
@@ -13849,7 +13914,7 @@ var Cascader = defineComponent({
       "to": "body"
     }, {
       default: () => [createVNode(Transition, {
-        "name": "fade"
+        "name": ns2.m(`fade-${currentPosition.value}`)
       }, {
         default: () => [createVNode(FlexibleOverlay, {
           "origin": origin.value,
@@ -13858,9 +13923,8 @@ var Cascader = defineComponent({
           "onUpdate:modelValue": ($event) => menuShow.value = $event,
           "position": position.value,
           "align": "start",
-          "style": {
-            zIndex: "var(--devui-z-index-dropdown, 1052)"
-          }
+          "style": styles.value,
+          "onPositionChange": handlePositionChange
         }, {
           default: () => [createVNode("div", {
             "class": ns2.e("drop-menu-animation")
@@ -16132,6 +16196,10 @@ const inputNumberProps = {
   reg: {
     type: [RegExp, String],
     default: ""
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 const ns$g = useNamespace$1("input-number");
@@ -16186,6 +16254,7 @@ function useRender$1(props, ctx2) {
   const wrapClass = computed(() => [
     {
       [ns$f.b()]: true,
+      [ns$f.m("glow-style")]: props.showGlowStyle,
       [ns$f.m(inputNumberSize.value)]: true
     },
     customClass
@@ -24182,6 +24251,10 @@ const datePickerProCommonProps = {
   type: {
     type: String,
     default: "date"
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 const datePickerProProps = __spreadValues({
@@ -26248,6 +26321,10 @@ const timePickerProps = {
   readonly: {
     type: Boolean,
     default: false
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 function useTimeScroll() {
@@ -27254,6 +27331,9 @@ var DatePickerPro = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DDatePickerPro", app);
+    const {
+      showGlowStyle
+    } = toRefs(props);
     const ns2 = useNamespace$1("date-picker-pro");
     const {
       originRef,
@@ -27274,6 +27354,14 @@ var DatePickerPro = defineComponent({
       handlerClearTime
     } = usePickerPro(props, ctx2, t);
     const position = ref(["bottom-start", "top-start"]);
+    const currentPosition = ref("bottom");
+    const handlePositionChange = (pos) => {
+      currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
+      "z-index": "var(--devui-z-index-dropdown, 1052)"
+    }));
     return () => {
       var _a2, _b;
       const vSlots = {
@@ -27294,7 +27382,8 @@ var DatePickerPro = defineComponent({
         "onFocus": withModifiers(onFocus, ["stop"]),
         "size": pickerSize.value,
         "disabled": pickerDisabled.value,
-        "error": isValidateError.value
+        "error": isValidateError.value,
+        "show-glow-style": showGlowStyle.value
       }, {
         prefix: () => createVNode("span", {
           "class": ns2.e("single-picker-icon")
@@ -27307,7 +27396,7 @@ var DatePickerPro = defineComponent({
         "to": "body"
       }, {
         default: () => [createVNode(Transition, {
-          "name": "fade"
+          "name": ns2.m(`fade-${currentPosition.value}`)
         }, {
           default: () => [createVNode(FlexibleOverlay, {
             "modelValue": isPanelShow.value,
@@ -27316,9 +27405,8 @@ var DatePickerPro = defineComponent({
             "origin": originRef.value,
             "align": "start",
             "position": position.value,
-            "style": {
-              zIndex: "var(--devui-z-index-dropdown, 1052)"
-            }
+            "style": styles.value,
+            "onPositionChange": handlePositionChange
           }, {
             default: () => [createVNode(DatePickerProPanel, mergeProps(props, {
               "dateValue": dateValue.value,
@@ -27480,6 +27568,9 @@ var DRangeDatePickerPro = defineComponent({
   setup(props, ctx2) {
     const app = getCurrentInstance();
     const t = createI18nTranslate("DDatePickerPro", app);
+    const {
+      showGlowStyle
+    } = toRefs(props);
     const ns2 = useNamespace$1("range-date-picker-pro");
     const {
       originRef,
@@ -27504,6 +27595,14 @@ var DRangeDatePickerPro = defineComponent({
       onChangeRangeFocusType
     } = useRangePickerPro(props, ctx2);
     const position = ref(["bottom-start", "top-start"]);
+    const currentPosition = ref("bottom");
+    const handlePositionChange = (pos) => {
+      currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
+      "z-index": "var(--devui-z-index-dropdown, 1052)"
+    }));
     return () => {
       var _a2, _b;
       const vSlots = {
@@ -27513,7 +27612,7 @@ var DRangeDatePickerPro = defineComponent({
       return createVNode("div", {
         "class": [ns2.b(), props.showTime ? ns2.e("range-time-width") : ns2.e("range-width"), isPanelShow.value && ns2.m("open")]
       }, [createVNode("div", {
-        "class": [ns2.e("range-picker"), pickerDisabled.value && ns2.m("disabled"), isValidateError.value && ns2.m("error")],
+        "class": [ns2.e("range-picker"), pickerDisabled.value && ns2.m("disabled"), isValidateError.value && ns2.m("error"), showGlowStyle.value && ns2.m("glow-style")],
         "ref": originRef,
         "onMouseover": () => isMouseEnter.value = true,
         "onMouseout": () => isMouseEnter.value = false
@@ -27523,6 +27622,7 @@ var DRangeDatePickerPro = defineComponent({
         "ref": startInputRef,
         "modelValue": displayDateValue.value[0],
         "placeholder": placeholder.value[0] || t("startPlaceholder"),
+        "show-glow-style": false,
         "onFocus": withModifiers((e) => {
           onFocus("start");
           focusHandler(e);
@@ -27541,6 +27641,7 @@ var DRangeDatePickerPro = defineComponent({
         "ref": endInputRef,
         "modelValue": displayDateValue.value[1],
         "placeholder": placeholder.value[1] || t("endPlaceholder"),
+        "show-glow-style": false,
         "onFocus": withModifiers((e) => {
           onFocus("end");
           focusHandler(e);
@@ -27556,7 +27657,7 @@ var DRangeDatePickerPro = defineComponent({
         "to": "body"
       }, {
         default: () => [createVNode(Transition, {
-          "name": "fade"
+          "name": ns2.m(`fade-${currentPosition.value}`)
         }, {
           default: () => [createVNode(FlexibleOverlay, {
             "modelValue": isPanelShow.value,
@@ -27565,9 +27666,8 @@ var DRangeDatePickerPro = defineComponent({
             "origin": originRef.value,
             "align": "start",
             "position": position.value,
-            "style": {
-              zIndex: "var(--devui-z-index-dropdown, 1052)"
-            }
+            "style": styles.value,
+            "onPositionChange": handlePositionChange
           }, {
             default: () => [createVNode(DatePickerProPanel, mergeProps(props, {
               "dateValue": dateValue.value,
@@ -33552,6 +33652,10 @@ const editableSelectProps = {
   enableLazyLoad: {
     type: Boolean,
     default: false
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 const SELECT_KEY = Symbol("EditableSelect");
@@ -33899,7 +34003,8 @@ function useInputRender(props, states) {
   const inputWrapperClasses = computed(() => ({
     [ns2.e("wrapper")]: true,
     [ns2.em("wrapper", "focus")]: states.isFocus,
-    [ns2.em("wrapper", "disabled")]: props.disabled
+    [ns2.em("wrapper", "disabled")]: props.disabled,
+    [ns2.em("wrapper", "glow-style")]: props.showGlowStyle
   }));
   const inputInnerClasses = computed(() => ({
     [ns2.e("inner")]: true
@@ -34030,6 +34135,7 @@ var EditableSelect = defineComponent({
       position,
       placeholder
     } = toRefs(props);
+    const align = computed(() => position.value.some((item) => item.includes("start") || item.includes("end")) ? "start" : null);
     const {
       onInput,
       onMouseenter,
@@ -34078,9 +34184,17 @@ var EditableSelect = defineComponent({
       inputInnerClasses,
       inputSuffixClasses
     } = useInputRender(props, states);
+    const currentPosition = ref("bottom");
+    const handlePositionChange = (pos) => {
+      currentPosition.value = pos.includes("top") || pos.includes("right-end") || pos.includes("left-end") ? "top" : "bottom";
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
+      "z-index": "var(--devui-z-index-dropdown, 1052)"
+    }));
     const renderBasicDropdown = () => {
       return createVNode(Transition, {
-        "name": "fade"
+        "name": ns2.m(`fade-${currentPosition.value}`)
       }, {
         default: () => [createVNode(FlexibleOverlay, {
           "ref": overlayRef,
@@ -34088,9 +34202,9 @@ var EditableSelect = defineComponent({
           "onUpdate:modelValue": ($event) => states.visible = $event,
           "origin": originRef.value,
           "position": position.value,
-          "style": {
-            zIndex: "var(--devui-z-index-dropdown, 1052)"
-          }
+          "align": align.value,
+          "style": styles.value,
+          "onPositionChange": handlePositionChange
         }, {
           default: () => [createVNode(Dropdown, {
             "options": filteredOptions.value,
@@ -34142,13 +34256,9 @@ var EditableSelect = defineComponent({
       }, [withDirectives(createVNode("span", {
         "class": ns2.e("clear-icon"),
         "onClick": withModifiers(handleClear, ["stop"])
-      }, [createVNode(DIcon, {
-        "name": "icon-remove"
-      }, null)]), [[vShow, showClearable.value]]), withDirectives(createVNode("span", {
+      }, [createVNode(InputClearIcon, null, null)]), [[vShow, showClearable.value]]), withDirectives(createVNode("span", {
         "class": ns2.e("arrow-icon")
-      }, [createVNode(DIcon, {
-        "name": "select-arrow"
-      }, null)]), [[vShow, !showClearable.value]])])])]), renderDropdown()]);
+      }, [createVNode(SelectArrowIcon, null, null)]), [[vShow, !showClearable.value]])])])]), renderDropdown()]);
     };
   }
 });
@@ -39514,6 +39624,10 @@ const mentionProps = {
   trigger: {
     type: Array,
     default: ["@"]
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 const textareaProps = {
@@ -39552,6 +39666,10 @@ const textareaProps = {
   validateEvent: {
     type: Boolean,
     default: true
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 function useTextareaRender(props) {
@@ -39560,10 +39678,11 @@ function useTextareaRender(props) {
   const ns2 = useNamespace$1("textarea");
   const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
   const isFocus = ref(false);
-  const { error: error2, disabled } = toRefs(props);
+  const { error: error2, disabled, showGlowStyle } = toRefs(props);
   const textareaDisabled = computed(() => disabled.value || (formContext == null ? void 0 : formContext.disabled));
   const wrapClasses = computed(() => ({
     [ns2.b()]: true,
+    [ns2.m("glow-style")]: showGlowStyle.value,
     [ns2.m("focus")]: isFocus.value,
     [ns2.m("disabled")]: textareaDisabled.value,
     [ns2.m("error")]: error2.value || isValidateError.value,
@@ -39876,6 +39995,7 @@ var Mention = defineComponent({
       }, [createVNode(resolveComponent("d-textarea"), {
         "modelValue": textContext.value,
         "onUpdate:modelValue": ($event) => textContext.value = $event,
+        "show-glow-style": props.showGlowStyle,
         "onUpdate": handleUpdate,
         "onFocus": handleFocus
       }, null), showSuggestions.value ? loading2.value ? createVNode("div", {
@@ -42076,7 +42196,7 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
   };
   const getInjectOptions = (values) => {
     return values.map((value) => {
-      if (props.multiple && props.allowCreate) {
+      if (props.allowCreate) {
         const option2 = injectOptions.value.get(value);
         if (option2) {
           return option2;
@@ -42150,6 +42270,9 @@ function useSelect$2(props, selectRef, ctx2, focus, blur2, isSelectFocus, t) {
       }
       getMultipleSelected(checkedItems);
     } else {
+      if (item.create) {
+        filterQuery.value = "";
+      }
       ctx2.emit("update:modelValue", item.value);
       getSingleSelected(item);
       toggleChange(false);
@@ -42391,6 +42514,10 @@ const selectProps = {
   multipleLimit: {
     type: Number,
     default: 0
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 const optionProps = {
@@ -42538,7 +42665,8 @@ function useSelectContent() {
   const selectionCls = computed(() => {
     return className$1(ns2.e("selection"), {
       [ns2.e("clearable")]: mergeClearable.value,
-      [ns2.em("selection", "error")]: isValidateError.value
+      [ns2.em("selection", "error")]: isValidateError.value,
+      [ns2.em("selection", "glow-style")]: Boolean(select2 == null ? void 0 : select2.showGlowStyle)
     });
   });
   const inputCls = computed(() => {
@@ -44310,6 +44438,10 @@ const radioCommonProps = {
     type: Boolean,
     default: false
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
+  },
   size: {
     type: String
   }
@@ -44476,17 +44608,18 @@ var Radio = defineComponent({
       const radioCls = {
         [ns2.e("wrapper")]: true
       };
-      const labelCls = {
+      const labelCls = computed(() => ({
         active: isChecked.value,
         disabled: isDisabled.value,
         [ns2.b()]: true,
         [ns2.m("bordered")]: border.value,
-        [ns2.m(size.value)]: size.value
-      };
+        [ns2.m(size.value)]: border.value,
+        [ns2.m("glow-style")]: props.showGlowStyle
+      }));
       return createVNode("div", {
         "class": radioCls
       }, [createVNode("label", {
-        "class": labelCls
+        "class": labelCls.value
       }, [createVNode("input", {
         "type": "radio",
         "name": radioName.value,
@@ -44497,30 +44630,7 @@ var Radio = defineComponent({
         "checked": isChecked.value
       }, null), createVNode("span", {
         "class": ns2.e("material")
-      }, [createVNode("svg", {
-        "height": "100%",
-        "width": "100%",
-        "viewBox": "0 0 1024 1024",
-        "xmlns": "http://www.w3.org/2000/svg"
-      }, [createVNode("circle", {
-        "class": {
-          [ns2.e("material-outer")]: true,
-          disabled: isDisabled.value
-        },
-        "cx": "512",
-        "cy": "512",
-        "r": "486.5",
-        "stroke-width": "51"
-      }, null), createVNode("circle", {
-        "class": {
-          [ns2.e("material-inner")]: true,
-          disabled: isDisabled.value
-        },
-        "cx": "512",
-        "fill-rule": "nonzero",
-        "cy": "512",
-        "r": "320"
-      }, null)])]), createVNode("span", {
+      }, null), createVNode("span", {
         "class": ns2.e("label")
       }, [(_b = (_a2 = ctx2.slots).default) == null ? void 0 : _b.call(_a2)])])]);
     };
@@ -47431,6 +47541,8 @@ var Switch = defineComponent({
       switchDisabled,
       switchSize
     } = useSwitch(props, ctx2);
+    const AnimationNumberDurationSlow = 300;
+    const isMousedown = ref(false);
     return () => {
       const switchCls = {
         [ns2.b()]: true,
@@ -47444,17 +47556,29 @@ var Switch = defineComponent({
       const switchWrapperStyle = [`background: ${checked.value && !switchDisabled.value ? props.color : ""}`, `border-color: ${checked.value && !switchDisabled.value ? props.color : ""}`];
       const checkedContent = renderSlot(useSlots(), "checkedContent");
       const uncheckedContent = renderSlot(useSlots(), "uncheckedContent");
+      const onMousedown2 = () => {
+        isMousedown.value = true;
+      };
+      const onMouseup = () => {
+        setTimeout(() => {
+          isMousedown.value = false;
+        }, AnimationNumberDurationSlow / 2);
+      };
       return createVNode("div", {
         "class": switchCls
       }, [createVNode("span", {
         "class": switchWrapperCls,
         "style": switchWrapperStyle,
-        "onClick": toggle
+        "onClick": toggle,
+        "onMousedown": onMousedown2,
+        "onMouseup": onMouseup
       }, [createVNode("span", {
         "class": ns2.e("inner-wrapper")
       }, [createVNode("div", {
         "class": ns2.e("inner")
-      }, [checked.value ? checkedContent : uncheckedContent])]), createVNode("small", null, null)])]);
+      }, [checked.value ? checkedContent : uncheckedContent])]), createVNode("small", {
+        "class": isMousedown.value && !props.disabled && "mouseDown"
+      }, null)])]);
     };
   }
 });
@@ -50199,6 +50323,14 @@ var TimePicker = defineComponent({
     const activeSecond = ref("00");
     const format2 = props.format.toLowerCase();
     const position = ref(["bottom-start", "top-start"]);
+    const currentPosition = ref("bottom");
+    const handlePositionChange = (pos) => {
+      currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
+      "z-index": "var(--devui-z-index-dropdown, 1052)"
+    }));
     const {
       showPopup,
       trueTimeValue,
@@ -50240,6 +50372,7 @@ var TimePicker = defineComponent({
         "placeholder": props.placeholder,
         "disabled": props.disabled,
         "readonly": props.readonly,
+        "show-glow-style": props.showGlowStyle,
         "size": props.size,
         "onFocus": clickVerifyFun
       }, {
@@ -50260,7 +50393,7 @@ var TimePicker = defineComponent({
         "to": "body"
       }, {
         default: () => [createVNode(Transition, {
-          "name": "fade"
+          "name": ns2.m(`fade-${currentPosition.value}`)
         }, {
           default: () => {
             var _a2;
@@ -50271,9 +50404,8 @@ var TimePicker = defineComponent({
               "origin": (_a2 = inputDom.value) == null ? void 0 : _a2.$el,
               "position": position.value,
               "align": "start",
-              "style": {
-                zIndex: "var(--devui-z-index-dropdown, 1052)"
-              }
+              "style": styles.value,
+              "onPositionChange": handlePositionChange
             }, {
               default: () => [createVNode(TimePopup, {
                 "ref": timePopupDom,
@@ -54188,7 +54320,7 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.6.5",
+  version: "1.6.7",
   install(app) {
     installs.forEach((p) => app.use(p));
   }