vue-devui 1.3.3 → 1.3.4-alpha.1

package/vue-devui.es.js

@@ -35,7 +35,7 @@ var __publicField = (obj, key, value) => {
 };
 import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, isVNode, ref, reactive, createTextVNode, provide, onMounted, watch, Transition, withDirectives, vShow, nextTick, onUnmounted, unref, withModifiers, Comment as Comment$1, Text, h, cloneVNode, Teleport, onBeforeUnmount, render, resolveDirective, resolveDynamicComponent, toRef, shallowRef, onUpdated, onBeforeMount, readonly, toRaw, watchEffect, renderSlot, useSlots, createApp, shallowReactive, effect, TransitionGroup } from "vue";
 import { useRoute } from "vue-router";
-import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+import { offset, autoPlacement, arrow, shift, computePosition, flip } from "@floating-ui/dom";
 import { onClickOutside, useResizeObserver } from "@vueuse/core";
 const accordionProps = {
   data: {
@@ -5771,7 +5771,7 @@ var lodash = { exports: {} };
       var delay = baseRest(function(func, wait, args) {
         return baseDelay(func, toNumber(wait) || 0, args);
       });
-      function flip(func) {
+      function flip2(func) {
         return createWrap(func, WRAP_FLIP_FLAG);
       }
       function memoize(func, resolver) {
@@ -6895,7 +6895,7 @@ var lodash = { exports: {} };
       lodash2.flatten = flatten;
       lodash2.flattenDeep = flattenDeep;
       lodash2.flattenDepth = flattenDepth;
-      lodash2.flip = flip;
+      lodash2.flip = flip2;
       lodash2.flow = flow;
       lodash2.flowRight = flowRight;
       lodash2.fromPairs = fromPairs;
@@ -12089,8 +12089,7 @@ const commonProps$1 = {
     default: void 0
   },
   size: {
-    type: String,
-    default: "md"
+    type: String
   }
 };
 const checkboxProps = __spreadProps(__spreadValues({}, commonProps$1), {
@@ -12219,7 +12218,7 @@ function useCheckbox(props, ctx2) {
     $event.stopPropagation();
     canChange(!isChecked.value, props.label).then((res) => res && toggle());
   };
-  const size = computed(() => (formContext == null ? void 0 : formContext.size) || (checkboxGroupConf == null ? void 0 : checkboxGroupConf.size.value) || props.size);
+  const size = computed(() => props.size || (checkboxGroupConf == null ? void 0 : checkboxGroupConf.size.value) || (formContext == null ? void 0 : formContext.size) || "md");
   const border = computed(() => {
     var _a;
     return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.border.value) != null ? _a : props.border;
@@ -12241,6 +12240,7 @@ function useCheckbox(props, ctx2) {
   };
 }
 function useCheckboxGroup(props, ctx2) {
+  const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
   const valList = toRef(props, "modelValue");
   const defaultOpt = {
@@ -12284,6 +12284,7 @@ function useCheckboxGroup(props, ctx2) {
   watch(() => props.modelValue, () => {
     formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
   }, { deep: true });
+  const checkboxGroupSize = computed(() => props.size || (formContext == null ? void 0 : formContext.size) || "");
   provide(checkboxGroupInjectionKey, {
     disabled: toRef(props, "disabled"),
     isShowTitle: toRef(props, "isShowTitle"),
@@ -12294,7 +12295,7 @@ function useCheckboxGroup(props, ctx2) {
     toggleGroupVal,
     itemWidth: toRef(props, "itemWidth"),
     direction: toRef(props, "direction"),
-    size: toRef(props, "size"),
+    size: checkboxGroupSize,
     border: toRef(props, "border"),
     max: toRef(props, "max"),
     modelValue: toRef(props, "modelValue"),
@@ -12360,7 +12361,7 @@ var Checkbox = defineComponent({
         [ns2.m("no-animation")]: !mergedShowAnimation.value
       };
       const labelCls = {
-        [ns2.m(size.value)]: border.value,
+        [ns2.m(size.value)]: size.value,
         [ns2.m("bordered")]: border.value
       };
       const stopPropagation = ($event) => $event.stopPropagation();
@@ -14479,7 +14480,7 @@ const colorPickerPaletteProps = {
 };
 var colorPalette$1 = "";
 var colorPalette = defineComponent({
-  name: "ColorPallete",
+  name: "ColorPalette",
   props: colorPickerPaletteProps,
   emits: ["update:modelValue", "changeTextColor"],
   setup(props, ctx2) {
@@ -14487,7 +14488,7 @@ var colorPalette = defineComponent({
       transition: "all 0.3s ease"
     };
     const dotSizeInject = inject("provideData");
-    const clickTransfrom = ref(DEFAULT_TRANSITION);
+    const clickTransform = ref(DEFAULT_TRANSITION);
     const paletteElement = ref(null);
     const canvasElement = ref(null);
     const handlerElement = ref(null);
@@ -14505,7 +14506,7 @@ var colorPalette = defineComponent({
       return __spreadValues({
         top: cursorTop.value + "px",
         left: cursorLeft.value + "px"
-      }, clickTransfrom.value);
+      }, clickTransform.value);
     });
     function renderCanvas() {
       var _a;
@@ -14575,11 +14576,11 @@ var colorPalette = defineComponent({
       if (paletteInstance && paletteInstance.vnode.el && handlerElement.value) {
         DOMUtils.triggerDragEvent(paletteInstance.vnode.el, {
           drag: (event) => {
-            clickTransfrom.value = null;
+            clickTransform.value = null;
             handleDrag(event);
           },
           end: (event) => {
-            clickTransfrom.value = DEFAULT_TRANSITION;
+            clickTransform.value = DEFAULT_TRANSITION;
             handleDrag(event);
           }
         });
@@ -14636,7 +14637,7 @@ var colorHueSlider = defineComponent({
     };
     const barElement = ref(null);
     const cursorElement = ref(null);
-    const clickTransfrom = ref(DEFAULT_TRANSITION);
+    const clickTransform = ref(DEFAULT_TRANSITION);
     const getCursorLeft = () => {
       var _a;
       if (barElement.value && cursorElement.value) {
@@ -14654,7 +14655,7 @@ var colorHueSlider = defineComponent({
       return __spreadValues({
         left: left + "px",
         top: 0
-      }, clickTransfrom.value);
+      }, clickTransform.value);
     });
     const onMoveBar = (event) => {
       event.stopPropagation();
@@ -14682,11 +14683,11 @@ var colorHueSlider = defineComponent({
     onMounted(() => {
       const dragConfig = {
         drag: (event) => {
-          clickTransfrom.value = null;
+          clickTransform.value = null;
           onMoveBar(event);
         },
         end: (event) => {
-          clickTransfrom.value = DEFAULT_TRANSITION;
+          clickTransform.value = DEFAULT_TRANSITION;
           onMoveBar(event);
         }
       };
@@ -14741,7 +14742,7 @@ var colorAlphaSlider = defineComponent({
     const DEFAULT_TRANSITION = {
       transition: "all 0.3s ease"
     };
-    const clickTransfrom = ref(DEFAULT_TRANSITION);
+    const clickTransform = ref(DEFAULT_TRANSITION);
     const barElement = ref(null);
     const cursorElement = ref(null);
     const onMoveBar = (event) => {
@@ -14783,16 +14784,16 @@ var colorAlphaSlider = defineComponent({
       return __spreadValues({
         left: left + "px",
         top: 0
-      }, clickTransfrom.value);
+      }, clickTransform.value);
     });
     onMounted(() => {
       const dragConfig = {
         drag: (event) => {
-          clickTransfrom.value = null;
+          clickTransform.value = null;
           onMoveBar(event);
         },
         end: (event) => {
-          clickTransfrom.value = DEFAULT_TRANSITION;
+          clickTransform.value = DEFAULT_TRANSITION;
           onMoveBar(event);
         }
       };
@@ -14834,7 +14835,7 @@ const colorPickerEditProps = {
   }
 };
 var colorEdit$1 = "";
-const DEFAUTL_MODE = "rgb";
+const DEFAULT_MODE = "rgb";
 const MODE_SUPPORT = ["rgb", "hex", "hsl", "hsv"];
 const colorRules = {
   alpha: [{
@@ -14952,12 +14953,12 @@ var colorEdit = defineComponent({
     const isShowAlpha = inject("provideData");
     const modelValue = computed(() => {
       var _a;
-      return `${(_a = props.mode) != null ? _a : DEFAUTL_MODE}${isShowAlpha.showAlpha ? "a" : ""}`;
+      return `${(_a = props.mode) != null ? _a : DEFAULT_MODE}${isShowAlpha.showAlpha ? "a" : ""}`;
     });
     const colorValue = ref(props.color);
     const modelValueType = computed(() => {
       var _a;
-      return ((_a = props.mode) != null ? _a : DEFAUTL_MODE) === "hex" ? "string" : "number";
+      return ((_a = props.mode) != null ? _a : DEFAULT_MODE) === "hex" ? "string" : "number";
     });
     function getValidColor(color2) {
       const validator = new Schema(colorRules);
@@ -15176,7 +15177,7 @@ const colorPickerHistoryProps = {
 };
 var colorHistory$1 = "";
 const STORAGE_KEY = "STORAGE_COLOR_PICKER_HISTORY_KEY";
-const MAX_HISOTRY_COUNT = 8;
+const MAX_HISTORY_COUNT = 8;
 function useStore$1(v, {
   storage
 } = {}) {
@@ -15214,7 +15215,7 @@ var colorHistory = defineComponent({
       if (index2 >= 0) {
         history2.value.splice(index2, 1);
       }
-      history2.value = [alphaInject.showAlpha ? value.hexa : value.hex, ...history2.value].slice(0, MAX_HISOTRY_COUNT);
+      history2.value = [alphaInject.showAlpha ? value.hexa : value.hex, ...history2.value].slice(0, MAX_HISTORY_COUNT);
     }, 100);
     watch(props.color, (value) => {
       updateHistory(value);
@@ -15245,7 +15246,7 @@ var colorPanel = defineComponent({
     colorHistory
   },
   props: colorPickerProps,
-  emits: ["update:modelValue", "changeTextColor", "changeTiggerColor", "changePaletteColor", "changeTextModeType"],
+  emits: ["update:modelValue", "changeTextColor", "changeTriggerColor", "changePaletteColor", "changeTextModeType"],
   setup(props, {
     emit
   }) {
@@ -15326,7 +15327,7 @@ var ColorPicker = defineComponent({
     emit
   }) {
     var _a;
-    const DEFAUTL_MODE2 = "rgb";
+    const DEFAULT_MODE2 = "rgb";
     const provideData = {
       showAlpha: useReactive(() => props.showAlpha),
       swatches: useReactive(() => props.swatches),
@@ -15342,7 +15343,7 @@ var ColorPicker = defineComponent({
     const top = ref(0);
     const isChangeTextColor = ref(true);
     const showColorPicker = ref(false);
-    const formItemText = ref(`${(_a = props.mode) != null ? _a : DEFAUTL_MODE2}`);
+    const formItemText = ref(`${(_a = props.mode) != null ? _a : DEFAULT_MODE2}`);
     const mode = ref(unref(props.mode));
     function updateUserColor(color2) {
       initialColor.value = color2;
@@ -15359,15 +15360,7 @@ var ColorPicker = defineComponent({
       window.addEventListener("resize", resize2);
       window.addEventListener("click", isExhibition, true);
     });
-    const colorPickerPostion = computed(() => {
-      if (colorCubeRef.value) {
-        return {
-          transform: `translate(${left.value}px, ${top.value}px)`
-        };
-      }
-      return {};
-    });
-    const tiggerColor = computed(() => {
+    const triggerColor = computed(() => {
       const currentColor = initialColor.value.rgba;
       const trigger = __spreadProps(__spreadValues({}, currentColor), {
         a: props.showAlpha ? currentColor.a : 1
@@ -15392,12 +15385,26 @@ var ColorPicker = defineComponent({
       mode.value = type4;
       formItemText.value = type4;
     }
+    function handleWindowScroll() {
+      computePosition(colorCubeRef.value, pickerRef.value, {
+        middleware: [flip()]
+      }).then(({
+        y
+      }) => {
+        var _a2;
+        Object.assign((_a2 = pickerRef.value) == null ? void 0 : _a2.style, {
+          top: `${y}px`
+        });
+      });
+    }
+    const scroll = lodash.exports.throttle(handleWindowScroll, 200);
     watch(() => showColorPicker.value, (newValue) => {
-      var _a2;
-      const textPalette = (_a2 = colorCubeRef.value) == null ? void 0 : _a2.getBoundingClientRect();
+      if (!newValue) {
+        window.removeEventListener("scroll", scroll);
+      }
       newValue && nextTick(() => {
         if (pickerRef.value) {
-          pickerRef.value.style.transform = `translate(${(textPalette == null ? void 0 : textPalette.left) + "px"}, ${((textPalette == null ? void 0 : textPalette.top) || 0) + window.scrollY + ((textPalette == null ? void 0 : textPalette.height) || 0) + "px"})`;
+          window.addEventListener("scroll", scroll);
         }
       });
     });
@@ -15416,33 +15423,28 @@ var ColorPicker = defineComponent({
         "class": "devui-color-picker-container-wrap"
       }, [createVNode("div", {
         "class": "devui-color-picker-container-wrap-current-color",
-        "style": tiggerColor.value
+        "style": triggerColor.value
       }, null), createVNode("div", {
         "class": ["devui-color-picker-container-wrap-transparent", "devui-color-picker-container-wrap-current-color-transparent"]
       }, null), createVNode("div", {
         "class": "devui-color-picker-color-value"
       }, [createVNode("p", {
         "style": textColor.value
-      }, [formItemValue.value])])])]), createVNode(Teleport, {
-        "to": "body"
+      }, [formItemValue.value])])])]), createVNode(Transition, {
+        "name": "color-picker-transition"
       }, {
-        default: () => [createVNode(Transition, {
-          "name": "color-picker-transition"
-        }, {
-          default: () => [showColorPicker.value ? createVNode("div", {
-            "ref": pickerRef,
-            "style": colorPickerPostion.value,
-            "class": ["devui-color-picker-position"]
-          }, [createVNode(resolveComponent("color-panel"), {
-            "modelValue": initialColor.value,
-            "onUpdate:modelValue": ($event) => initialColor.value = $event,
-            "ref": containerRef,
-            "mode": mode.value,
-            "onChangeTextColor": changeTextColor,
-            "onChangePaletteColor": changePaletteColor,
-            "onChangeTextModeType": changeTextModeType
-          }, null)]) : null]
-        })]
+        default: () => [showColorPicker.value ? createVNode("div", {
+          "ref": pickerRef,
+          "class": ["devui-color-picker-position"]
+        }, [createVNode(resolveComponent("color-panel"), {
+          "modelValue": initialColor.value,
+          "onUpdate:modelValue": ($event) => initialColor.value = $event,
+          "ref": containerRef,
+          "mode": mode.value,
+          "onChangeTextColor": changeTextColor,
+          "onChangePaletteColor": changePaletteColor,
+          "onChangeTextModeType": changeTextModeType
+        }, null)]) : null]
       })]);
     };
   }
@@ -25201,13 +25203,13 @@ function useEvent(props, emit) {
     emit("update:modelValue", false);
   };
   const interrupt = () => {
-    if (timer) {
+    if (timer && props.duration) {
       clearTimeout(timer);
       timer = null;
     }
   };
   const removeReset = () => {
-    if (props.modelValue) {
+    if (props.modelValue && props.duration) {
       const remainTime = props.duration - (Date.now() - timestamp);
       timer = setTimeout(close2, remainTime);
     }
@@ -25359,7 +25361,7 @@ function useSelect$2(props, selectRef, ctx2, focus, blur, isSelectFocus, t) {
   const ns2 = useNamespace("select");
   const dropdownRef = ref();
   const selectDisabled = computed(() => (formContext == null ? void 0 : formContext.disabled) || props.disabled);
-  const selectSize = computed(() => (formContext == null ? void 0 : formContext.size) || props.size);
+  const selectSize = computed(() => props.size || (formContext == null ? void 0 : formContext.size) || "md");
   const isObjectOption = ref(false);
   const originRef = ref();
   const isOpen = ref(false);
@@ -25675,7 +25677,7 @@ const selectProps = {
   },
   size: {
     type: String,
-    default: "md"
+    default: ""
   },
   overview: {
     type: String,
@@ -27779,8 +27781,7 @@ const radioCommonProps = {
     default: false
   },
   size: {
-    type: String,
-    default: "md"
+    type: String
   }
 };
 const radioProps = __spreadProps(__spreadValues({}, radioCommonProps), {
@@ -27862,7 +27863,7 @@ function useRadio(props, ctx2) {
     return (radioGroupConf == null ? void 0 : radioGroupConf.border.value) || props.border;
   });
   const size = computed(() => {
-    return (formContext == null ? void 0 : formContext.size) || (radioGroupConf == null ? void 0 : radioGroupConf.size.value) || props.size;
+    return props.size || (radioGroupConf == null ? void 0 : radioGroupConf.size.value) || (formContext == null ? void 0 : formContext.size) || "md";
   });
   watch(() => props.modelValue, () => {
     formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
@@ -27877,6 +27878,7 @@ function useRadio(props, ctx2) {
   };
 }
 function useRadioGroup(props, ctx2) {
+  const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
   const emitChange = (radioValue) => {
     ctx2.emit("update:modelValue", radioValue);
@@ -27885,12 +27887,13 @@ function useRadioGroup(props, ctx2) {
   watch(() => props.modelValue, () => {
     formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
   });
+  const radioGroupSize = computed(() => props.size || (formContext == null ? void 0 : formContext.size) || "");
   provide(radioGroupInjectionKey, {
     modelValue: toRef(props, "modelValue"),
     name: toRef(props, "name"),
     disabled: toRef(props, "disabled"),
     border: toRef(props, "border"),
-    size: toRef(props, "size"),
+    size: radioGroupSize,
     beforeChange: props.beforeChange,
     emitChange,
     fill: toRef(props, "fill"),
@@ -27937,7 +27940,7 @@ var Radio = defineComponent({
         disabled: isDisabled.value,
         [ns2.b()]: true,
         [ns2.m("bordered")]: border.value,
-        [ns2.m(size.value)]: border.value
+        [ns2.m(size.value)]: size.value
       };
       return createVNode("div", {
         "class": radioCls
@@ -30962,8 +30965,7 @@ const switchProps = {
     default: false
   },
   size: {
-    type: String,
-    default: "md"
+    type: String
   },
   color: {
     type: String,
@@ -30993,7 +30995,7 @@ const switchProps = {
 function useSwitch(props, ctx2) {
   const formContext = inject(FORM_TOKEN, void 0);
   const switchDisabled = computed(() => (formContext == null ? void 0 : formContext.disabled) || props.disabled);
-  const switchSize = computed(() => (formContext == null ? void 0 : formContext.size) || props.size);
+  const switchSize = computed(() => props.size || (formContext == null ? void 0 : formContext.size) || "md");
   const canChange = () => {
     if (switchDisabled.value) {
       return Promise.resolve(false);
@@ -31038,24 +31040,29 @@ var Switch = defineComponent({
       switchSize
     } = useSwitch(props, ctx2);
     return () => {
-      const outerCls = {
+      const switchCls = {
         [ns2.b()]: true,
-        [ns2.m(switchSize.value)]: true,
+        [ns2.m(switchSize.value)]: true
+      };
+      const switchWrapperCls = {
+        [ns2.e("wrapper")]: true,
         [ns2.m("checked")]: checked.value,
         [ns2.m("disabled")]: switchDisabled.value
       };
-      const outerStyle = [`background: ${checked.value && !switchDisabled.value ? props.color : ""}`, `border-color: ${checked.value && !switchDisabled.value ? props.color : ""}`];
+      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");
-      return createVNode("span", {
-        "class": outerCls,
-        "style": outerStyle,
+      return createVNode("div", {
+        "class": switchCls
+      }, [createVNode("span", {
+        "class": switchWrapperCls,
+        "style": switchWrapperStyle,
         "onClick": toggle
       }, [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", null, null)])]);
     };
   }
 });
@@ -38725,7 +38732,7 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.3.3",
+  version: "1.3.4-alpha.1",
   install(app) {
     installs.forEach((p) => app.use(p));
   }