@deot/vc-components 1.0.47 → 1.0.49

package/dist/index.cjs

@@ -128,6 +128,10 @@ const ActionSheet = /* @__PURE__ */ vue.defineComponent({
 const MActionSheet = ActionSheet;
 
 const props$1s = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
   zIndex: {
     type: [Number, String],
     default: 1
@@ -155,16 +159,45 @@ const props$1s = {
   }
 };
 
+let scrollBarWidth;
+const getScrollBarWidth = () => {
+  if (scrollBarWidth !== void 0) return scrollBarWidth;
+  const outer = document.createElement("div");
+  outer.className = "vc-scrollbar__wrap";
+  outer.style.visibility = "hidden";
+  outer.style.width = "100px";
+  outer.style.position = "absolute";
+  outer.style.top = "-9999px";
+  document.body.appendChild(outer);
+  const widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = "scroll";
+  const inner = document.createElement("div");
+  inner.style.width = "100%";
+  outer.appendChild(inner);
+  const widthWithScroll = inner.offsetWidth;
+  outer.parentNode?.removeChild?.(outer);
+  scrollBarWidth = widthNoScroll - widthWithScroll;
+  return scrollBarWidth;
+};
+const SCROLLER_WHEEL_REG = /vc-scroller-wheel/;
+const getScroller = (el) => {
+  return $.getScroller(el, { className: SCROLLER_WHEEL_REG });
+};
+const isWheel = (el) => {
+  return SCROLLER_WHEEL_REG.test(el?.className || "");
+};
+
 /** @jsxImportSource vue */
 
 const COMPONENT_NAME$27 = 'vc-affix';
-const SCROLLER_WHEEL_REG = /vc-scroller-wheel/;
 const Affix = /* @__PURE__ */ vue.defineComponent({
   name: COMPONENT_NAME$27,
+  emits: ['update:modelValue'],
   props: props$1s,
   setup(props, {
     slots,
-    expose
+    expose,
+    emit
   }) {
     const scrollerInstance = vue.inject('vc-scroller', null);
     const scroller = vue.shallowRef(); // 当前元素所在的滚动容器
@@ -180,9 +213,7 @@ const Affix = /* @__PURE__ */ vue.defineComponent({
     const isActive = vue.ref(false);
     const transformY = vue.ref(0);
     const windowHeight = vue.ref(window.innerHeight);
-    const isVcScrollerWheel = vue.computed(() => {
-      return SCROLLER_WHEEL_REG.test(scroller.value?.className || '');
-    });
+    const isVcScrollerWheel = vue.computed(() => isWheel(scroller.value));
     const currentStyle = vue.computed(() => {
       if (!isActive.value) return {};
       return {
@@ -203,7 +234,8 @@ const Affix = /* @__PURE__ */ vue.defineComponent({
       };
     });
     const setCurrentRect = () => {
-      const rect = current.value.getBoundingClientRect();
+      const rect = current.value?.getBoundingClientRect?.();
+      if (!rect) return;
       Object.assign(currentRect, {
         top: rect.top,
         bottom: rect.bottom,
@@ -230,7 +262,7 @@ const Affix = /* @__PURE__ */ vue.defineComponent({
         transformY.value = Math.min(containerRect.bottom - currentHeightOffset, 0) + transformOffsetY;
       } else {
         isActive.value = currentRect.bottom - containerRect.top >= containerRect.height - props.offset;
-        transformY.value = Math.max(containerRect.height - containerRect.top - currentHeightOffset, 0) + transformOffsetY;
+        transformY.value = transformOffsetY;
       }
     };
     const setFixedStatus = () => {
@@ -257,36 +289,58 @@ const Affix = /* @__PURE__ */ vue.defineComponent({
         }
       }
     };
+    const offScroll = handler => {
+      if (isVcScrollerWheel.value) {
+        scrollerInstance?.off(handler);
+      } else {
+        scroller.value?.removeEventListener('scroll', handler);
+      }
+    };
+    const onScroll = (handler, options) => {
+      // nextTick目的在与onMounted后执行
+      vue.nextTick(() => {
+        if (isVcScrollerWheel.value) {
+          scrollerInstance?.on(handler);
+        } else {
+          scroller.value?.addEventListener('scroll', handler);
+        }
+        options?.first && handler();
+      });
+      return () => offScroll(handler);
+    };
     const refresh = () => {
+      if (props.disabled) return;
       setCurrentRect();
       scroller.value instanceof Window || props.fixed ? setFixedStatus() : setAbsoluteStatus();
+      emit('update:modelValue', isActive.value);
     };
     vue.onMounted(() => {
       if (typeof props.target === 'string') {
         base.value = document.querySelector(props.target) ?? void 0;
       }
       !base.value && (base.value = document.documentElement);
-      scroller.value = $.getScroller(current.value, {
-        className: SCROLLER_WHEEL_REG
+      scroller.value = getScroller(current.value);
+      onScroll(refresh, {
+        first: true
       });
-      if (isVcScrollerWheel.value) {
-        scrollerInstance?.on(refresh);
-      } else {
-        scroller.value?.addEventListener('scroll', refresh);
-      }
-      refresh();
-    });
-    vue.onBeforeUnmount(() => {
-      if (isVcScrollerWheel.value) {
-        scrollerInstance?.off(refresh);
-      } else {
-        scroller.value?.removeEventListener('scroll', refresh);
-      }
     });
+    vue.onBeforeUnmount(() => offScroll(refresh));
     expose({
-      refresh
+      refresh,
+      onScroll,
+      offScroll
+    });
+    vue.provide('vc-affix', {
+      props,
+      isActive,
+      refresh,
+      onScroll,
+      offScroll
     });
     return () => {
+      if (props.disabled) return slots?.default?.({
+        active: false
+      });
       return vue.createVNode("div", {
         "ref": current,
         "class": "vc-affix",
@@ -8863,27 +8917,6 @@ const props$T = {
   }
 };
 
-let scrollBarWidth;
-const getScrollBarWidth = () => {
-  if (scrollBarWidth !== void 0) return scrollBarWidth;
-  const outer = document.createElement("div");
-  outer.className = "vc-scrollbar__wrap";
-  outer.style.visibility = "hidden";
-  outer.style.width = "100px";
-  outer.style.position = "absolute";
-  outer.style.top = "-9999px";
-  document.body.appendChild(outer);
-  const widthNoScroll = outer.offsetWidth;
-  outer.style.overflow = "scroll";
-  const inner = document.createElement("div");
-  inner.style.width = "100%";
-  outer.appendChild(inner);
-  const widthWithScroll = inner.offsetWidth;
-  outer.parentNode?.removeChild?.(outer);
-  scrollBarWidth = widthNoScroll - widthWithScroll;
-  return scrollBarWidth;
-};
-
 const barKeys$1 = [
   "always",
   "thumbMinSize",
@@ -11455,7 +11488,14 @@ const props$L = {
   labelStyle: [Object, String],
   labelClass: [Object, String],
   errorStyle: [Object, String],
-  errorClass: [Object, String]
+  errorClass: [Object, String],
+  // 给nestFormItem统一注入
+  nestedContentStyle: [Object, String],
+  nestedContentClass: [Object, String],
+  nestedLabelStyle: [Object, String],
+  nestedLabelClass: [Object, String],
+  nestedErrorStyle: [Object, String],
+  nestedErrorClass: [Object, String]
 };
 
 const useForm = (expose, options = {}) => {
@@ -11675,31 +11715,32 @@ const useFormItem = (expose) => {
   });
   const classes = vue.computed(() => {
     return {
-      "is-require": isRequired.value && props.asterisk,
+      "is-required": isRequired.value && props.asterisk,
       "is-error": validateState.value === "error",
       "is-validating": validateState.value === "validating",
       "is-inline": form.props.inline,
-      "is-nest": isNest.value,
+      "is-nested": isNested.value,
       "is-alone": !props.showMessage,
       // 用于单独去除form-item的默认margin_bottom
       [`is-${labelPosition.value}`]: true
     };
   });
-  const isNest = vue.computed(() => {
+  const isNested = vue.computed(() => {
     return !!formItem.change;
   });
-  const isNestLast = vue.ref(false);
+  const isNestedLast = vue.ref(false);
   const hasLabel = vue.computed(() => {
     return !!props.label || slots.label;
   });
   const labelStyle = vue.computed(() => {
-    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : isNest.value ? 0 : form.props.labelWidth;
+    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : isNested.value ? 0 : form.props.labelWidth;
     return [
       {
         width: labelPosition.value !== "top" && labelWidth && labelWidth > 0 ? `${labelWidth}px` : "auto",
         textAlign: labelPosition.value === "top" ? "left" : labelPosition.value
       },
       form.props.labelStyle,
+      isNested.value && form.props.nestedLabelStyle,
       props.labelStyle
     ];
   });
@@ -11707,24 +11748,25 @@ const useFormItem = (expose) => {
     const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : form.props.labelWidth;
     return [
       {
-        marginLeft: !hasLabel.value && isNest.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
-        marginBottom: isNest.value && !isNestLast.value ? `20px` : 0
+        marginLeft: labelPosition.value === "top" || !hasLabel.value && isNested.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
+        marginBottom: isNested.value && !isNestedLast.value ? `20px` : 0
       },
       form.props.contentStyle,
+      isNested.value && form.props.nestedContentStyle,
       props.contentStyle
     ];
   });
   const errorStyle = vue.computed(() => {
-    return [form.props.errorStyle, props.errorStyle];
+    return [form.props.errorStyle, isNested.value && form.props.nestedErrorStyle, props.errorStyle];
   });
   const labelClass = vue.computed(() => {
-    return [form.props.labelClass, props.labelClass];
+    return [form.props.labelClass, isNested.value && form.props.nestedLabelClass, props.labelClass];
   });
   const contentClass = vue.computed(() => {
-    return [form.props.contentClass, props.contentClass];
+    return [form.props.contentClass, isNested.value && form.props.nestedContentClass, props.contentClass];
   });
   const errorClass = vue.computed(() => {
-    return [form.props.errorClass, props.errorClass];
+    return [form.props.errorClass, isNested.value && form.props.nestedErrorClass, props.errorClass];
   });
   const isStyleless = vue.computed(() => {
     return props.styleless || form.props.styleless;
@@ -11861,7 +11903,7 @@ const useFormItem = (expose) => {
   vue.watch(
     () => formItem.fields?.length,
     async (v) => {
-      if (!isNest.value || !v) return isNestLast.value = false;
+      if (!isNested.value || !v) return isNestedLast.value = false;
       const fields$ = [...vue.toRaw(formItem.fields)];
       const positions = await Promise.all(fields$.map((item) => item.exposed.getPosition()));
       const sortFields = fields$.toSorted((a, b) => {
@@ -11872,7 +11914,7 @@ const useFormItem = (expose) => {
         if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
         return aPosition.left - bPosition.left;
       });
-      isNestLast.value = sortFields[sortFields.length - 1] === instance;
+      isNestedLast.value = sortFields[sortFields.length - 1] === instance;
     }
   );
   expose({
@@ -11881,9 +11923,9 @@ const useFormItem = (expose) => {
     getPosition
   });
   return {
-    isNest,
+    isNested,
     isStyleless,
-    isNestLast,
+    isNestedLast,
     validateMessage,
     classes,
     labelStyle,
@@ -11910,7 +11952,7 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
     const it = useFormItem(expose);
     const {
       isStyleless,
-      isNest,
+      isNested,
       classes,
       labelStyle,
       contentStyle,
@@ -11921,39 +11963,35 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
       showError,
       validateMessage
     } = it;
-    const {
-      label,
-      labelFor
-    } = props;
     const errorColorClass = 'vc-form-item__error';
     return () => {
       if (isStyleless.value) return [slots.default?.(), slots.error?.({
         show: showError.value,
-        nest: isNest.value,
+        nested: isNested.value,
         message: validateMessage.value,
         class: [errorColorClass, ...errorClass.value],
         style: errorStyle.value
       })];
       return vue.createVNode("div", {
         "class": ['vc-form-item', classes.value]
-      }, [(label || slots.label) && vue.createVNode("div", {
+      }, [(props.label || slots.label) && vue.createVNode("div", {
         "style": labelStyle.value,
         "class": ['vc-form-item__label', ...labelClass.value],
-        "for": labelFor
-      }, [vue.createVNode("label", null, [label || slots.label?.()])]), vue.createVNode("div", {
+        "for": props.labelFor
+      }, [vue.createVNode("label", null, [props.label || slots.label?.()])]), vue.createVNode("div", {
         "class": "vc-form-item__wrapper"
       }, [vue.createVNode("div", {
         "class": ['vc-form-item__content', ...contentClass.value],
         "style": contentStyle.value
       }, [slots.default?.(), slots.error ? slots.error({
         show: showError.value,
-        nest: isNest.value,
+        nest: isNested.value,
         message: validateMessage.value,
         class: [errorColorClass, ...errorClass.value],
         style: errorStyle.value
       }) : vue.createVNode(TransitionFade, null, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": ['vc-form-item__tip', isNest.value ? 'is-nest' : '', errorColorClass, ...errorClass.value],
+          "class": ['vc-form-item__tip', isNested.value ? 'is-nested' : '', errorColorClass, ...errorClass.value],
           "style": [errorStyle.value]
         }, [validateMessage.value]), [[vue.vShow, showError.value]])]
       })])])]);
@@ -12024,41 +12062,36 @@ const MFormItem = /* @__PURE__ */ vue.defineComponent({
       labelClass,
       contentClass,
       errorClass,
-      isNest,
+      isNested,
       showError,
       validateMessage
     } = it;
-    const {
-      label,
-      labelFor,
-      showMessage
-    } = props;
     const errorColorClass = 'vcm-form-item__error';
     return () => {
       if (isStyleless.value) return [slots.default?.(), slots.error?.({
         show: showError.value,
-        nest: isNest.value,
+        nested: isNested.value,
         message: validateMessage.value,
         class: [errorColorClass, ...errorClass.value],
         style: errorStyle.value
       })];
       return vue.createVNode("div", {
         "style": {
-          paddingLeft: `${isNest.value ? 0 : props.indent}px`
+          paddingLeft: `${isNested.value ? 0 : props.indent}px`
         },
         "class": [classes.value, 'vcm-form-item']
       }, [vue.createVNode("div", {
         "class": "vcm-form-item__wrapper"
       }, [(props.label || slots.label) && vue.createVNode("label", {
-        "for": labelFor,
+        "for": props.labelFor,
         "style": labelStyle.value,
         "class": ['vcm-form-item__label', ...labelClass.value]
-      }, [label || slots.label?.()]), vue.createVNode("div", {
+      }, [props.label || slots.label?.()]), vue.createVNode("div", {
         "style": contentStyle.value,
         "class": ['vcm-form-item__content', ...contentClass.value]
-      }, [slots.default?.(), showMessage && showError.value && vue.createVNode("div", {
+      }, [slots.default?.(), props.showMessage && showError.value && vue.createVNode("div", {
         "class": [{
-          'is-nest': isNest.value
+          'is-nested': isNested.value
         }, errorColorClass, ...errorClass.value],
         "style": errorStyle.value
       }, [slots.error ? slots.error({
@@ -14347,13 +14380,13 @@ const Select = /* @__PURE__ */ vue.defineComponent({
             "readonly": true,
             "placeholder": its.value.attrs?.placeholder || '请选择'
           }, {
-            prepend: () => {
-              if (slots.prepend) return slots.prepend?.();
-              if (!props.label) return null;
-              return vue.createVNode("span", {
+            prepend: slots.prepend || props.label ? () => {
+              slots.prepend ? slots.prepend() : vue.createVNode("div", {
+                "class": "vc-select__prepend"
+              }, [vue.createVNode("span", {
                 "class": "vc-select__label"
-              }, [props.label]);
-            },
+              }, [props.label])]);
+            } : null,
             content: multiple.value && currentValue.value && currentValue.value.length > 0 ? () => {
               return vue.createVNode("div", {
                 "class": [classes.value, 'vc-select__tags']
@@ -19995,10 +20028,13 @@ const props$c = {
   barStyle: [Object, String],
   contentStyle: [Object, String],
   barClass: [Object, String],
-  contentClass: [Object, String]
+  contentClass: [Object, String],
+  affixable: Boolean,
+  affixOptions: Object
 };
 
 const useTabs = (options = {}) => {
+  const affix = vue.inject("vc-affix", null);
   const instance = vue.getCurrentInstance();
   const { props, emit } = instance;
   const tabsId = vue.ref(Utils.getUid("tabs"));
@@ -20040,10 +20076,56 @@ const useTabs = (options = {}) => {
       [`is-${props.theme}`]: !!props.theme
     };
   });
+  const hasAnchor = vue.computed(() => {
+    return list.value.some((item) => !!item.anchor);
+  });
   const refresh = () => {
     options?.refreshAfloat?.();
   };
-  const handleChange = (index) => {
+  let scrollToAnchorTimer;
+  const scrollToAnchor = (anchor) => {
+    if (!anchor) return;
+    const el = document.querySelector(anchor);
+    if (!el) return;
+    const scroller = getScroller(instance.vnode.el);
+    $.scrollIntoView(scroller, {
+      duration: 250,
+      from: scroller.scrollTop,
+      to: scroller.scrollTop + el.getBoundingClientRect().top - scroller.getBoundingClientRect().top - (!affix || affix.props.placement !== "bottom" ? instance.vnode.el.offsetHeight : 0) - (affix && affix.props.placement !== "bottom" ? affix.props.offset : 0)
+    });
+    scrollToAnchorTimer && clearTimeout(scrollToAnchorTimer);
+    scrollToAnchorTimer = setTimeout(() => scrollToAnchorTimer = null, 300);
+  };
+  const handleAffixScroll = () => {
+    if (!hasAnchor.value || scrollToAnchorTimer) return;
+    const scroller = getScroller(instance.vnode.el);
+    const scrollTop = scroller?.scrollTop;
+    if (typeof scrollTop !== "number") return;
+    for (let i = 0; i < list.value.length; i++) {
+      const nav = list.value[i];
+      const anchor = nav.anchor;
+      if (!anchor) continue;
+      const el = document.querySelector(anchor);
+      if (!el) continue;
+      const elTop = el.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+      const nextNav = list.value[i + 1];
+      let nextElTop;
+      if (nextNav && nextNav.anchor) {
+        const nextEl = document.querySelector(nextNav.anchor);
+        if (nextEl) {
+          nextElTop = nextEl.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+        }
+      }
+      const allowDistance = 2;
+      if (scrollTop >= elTop - allowDistance && (typeof nextElTop === "undefined" || scrollTop < nextElTop - allowDistance)) {
+        if (getTabIndex(currentValue.value) !== i) {
+          handleChange(i, false);
+        }
+        break;
+      }
+    }
+  };
+  const handleChange = (index, scrollTo = true) => {
     if (timer.value) return;
     timer.value = setTimeout(() => timer.value = null, 300);
     const nav = list.value[index];
@@ -20052,7 +20134,7 @@ const useTabs = (options = {}) => {
     emit("update:modelValue", currentValue.value);
     emit("change", currentValue.value);
     emit("click", currentValue.value);
-    nav.anchor && document.querySelector(nav.anchor)?.scrollIntoView?.({ behavior: "smooth" });
+    scrollTo && scrollToAnchor(nav.anchor);
   };
   const handleResize = () => {
     if (instance.isUnmounted) return;
@@ -20062,10 +20144,13 @@ const useTabs = (options = {}) => {
   vue.onMounted(() => {
     helperResize.Resize.on(options.wrapper.value, handleResize);
     options.scrollToActive && vue.nextTick(options.scrollToActive);
+    affix?.onScroll?.(handleAffixScroll);
   });
   vue.onBeforeUnmount(() => {
     helperResize.Resize.off(options.wrapper.value, handleResize);
     timer.value && clearTimeout(timer.value);
+    affix?.offScroll?.(handleAffixScroll);
+    scrollToAnchorTimer && clearTimeout(scrollToAnchorTimer);
   });
   const add = (item, setValue) => {
     if (!item) return;