@deot/vc 1.0.47 → 1.0.49

package/dist/index.umd.cjs

@@ -224,7 +224,7 @@
     return !!(overflow.match(/(scroll|auto)/) || className?.test(el.className));
   };
 
-  const getScroller = (el, options) => {
+  const getScroller$1 = (el, options) => {
     if (IS_SERVER$2 || !el) return null;
     let parent = el;
     while (parent) {
@@ -9153,6 +9153,10 @@
   });
   const MActionSheet = ActionSheet;
   const props$1s = {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
     zIndex: {
       type: [Number, String],
       default: 1
@@ -9179,14 +9183,42 @@
       type: String
     }
   };
-  const COMPONENT_NAME$27 = "vc-affix";
+  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 = (el2) => {
+    return getScroller$1(el2, { className: SCROLLER_WHEEL_REG });
+  };
+  const isWheel = (el2) => {
+    return SCROLLER_WHEEL_REG.test(el2?.className || "");
+  };
+  const COMPONENT_NAME$27 = "vc-affix";
   const Affix = /* @__PURE__ */ vue.defineComponent({
     name: COMPONENT_NAME$27,
+    emits: ["update:modelValue"],
     props: props$1s,
     setup(props2, {
       slots,
-      expose
+      expose,
+      emit
     }) {
       const scrollerInstance = vue.inject("vc-scroller", null);
       const scroller = vue.shallowRef();
@@ -9201,9 +9233,7 @@
       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 {
@@ -9224,7 +9254,8 @@
         };
       });
       const setCurrentRect = () => {
-        const rect = current.value.getBoundingClientRect();
+        const rect = current.value?.getBoundingClientRect?.();
+        if (!rect) return;
         Object.assign(currentRect, {
           top: rect.top,
           bottom: rect.bottom,
@@ -9249,7 +9280,7 @@
           transformY.value = Math.min(containerRect.bottom - currentHeightOffset, 0) + transformOffsetY;
         } else {
           isActive.value = currentRect.bottom - containerRect.top >= containerRect.height - props2.offset;
-          transformY.value = Math.max(containerRect.height - containerRect.top - currentHeightOffset, 0) + transformOffsetY;
+          transformY.value = transformOffsetY;
         }
       };
       const setFixedStatus = () => {
@@ -9276,36 +9307,57 @@
           }
         }
       };
+      const offScroll = (handler) => {
+        if (isVcScrollerWheel.value) {
+          scrollerInstance?.off(handler);
+        } else {
+          scroller.value?.removeEventListener("scroll", handler);
+        }
+      };
+      const onScroll = (handler, options) => {
+        vue.nextTick(() => {
+          if (isVcScrollerWheel.value) {
+            scrollerInstance?.on(handler);
+          } else {
+            scroller.value?.addEventListener("scroll", handler);
+          }
+          options?.first && handler();
+        });
+        return () => offScroll(handler);
+      };
       const refresh = () => {
+        if (props2.disabled) return;
         setCurrentRect();
         scroller.value instanceof Window || props2.fixed ? setFixedStatus() : setAbsoluteStatus();
+        emit("update:modelValue", isActive.value);
       };
       vue.onMounted(() => {
         if (typeof props2.target === "string") {
           base.value = document.querySelector(props2.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: props2,
+        isActive,
+        refresh,
+        onScroll,
+        offScroll
       });
       return () => {
+        if (props2.disabled) return slots?.default?.({
+          active: false
+        });
         return vue.createVNode("div", {
           "ref": current,
           "class": "vc-affix",
@@ -17456,26 +17508,6 @@
       default: () => [0, 0]
     }
   };
-  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",
@@ -19900,7 +19932,14 @@
     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 = {}) => {
     const instance = vue.getCurrentInstance();
@@ -20116,31 +20155,32 @@
     });
     const classes = vue.computed(() => {
       return {
-        "is-require": isRequired.value && props2.asterisk,
+        "is-required": isRequired.value && props2.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": !props2.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 !!props2.label || slots.label;
     });
     const labelStyle = vue.computed(() => {
-      const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.labelWidth : isNest.value ? 0 : form.props.labelWidth;
+      const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.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,
         props2.labelStyle
       ];
     });
@@ -20148,24 +20188,25 @@
       const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.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,
         props2.contentStyle
       ];
     });
     const errorStyle = vue.computed(() => {
-      return [form.props.errorStyle, props2.errorStyle];
+      return [form.props.errorStyle, isNested.value && form.props.nestedErrorStyle, props2.errorStyle];
     });
     const labelClass = vue.computed(() => {
-      return [form.props.labelClass, props2.labelClass];
+      return [form.props.labelClass, isNested.value && form.props.nestedLabelClass, props2.labelClass];
     });
     const contentClass = vue.computed(() => {
-      return [form.props.contentClass, props2.contentClass];
+      return [form.props.contentClass, isNested.value && form.props.nestedContentClass, props2.contentClass];
     });
     const errorClass = vue.computed(() => {
-      return [form.props.errorClass, props2.errorClass];
+      return [form.props.errorClass, isNested.value && form.props.nestedErrorClass, props2.errorClass];
     });
     const isStyleless = vue.computed(() => {
       return props2.styleless || form.props.styleless;
@@ -20302,7 +20343,7 @@
     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) => {
@@ -20313,7 +20354,7 @@
           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({
@@ -20322,9 +20363,9 @@
       getPosition
     });
     return {
-      isNest,
+      isNested,
       isStyleless,
-      isNestLast,
+      isNestedLast,
       validateMessage,
       classes,
       labelStyle,
@@ -20348,7 +20389,7 @@
       const it = useFormItem(expose);
       const {
         isStyleless,
-        isNest,
+        isNested,
         classes,
         labelStyle,
         contentStyle,
@@ -20359,39 +20400,35 @@
         showError,
         validateMessage
       } = it;
-      const {
-        label,
-        labelFor
-      } = props2;
       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", {
+        }, [(props2.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": props2.labelFor
+        }, [vue.createVNode("label", null, [props2.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]])]
         })])])]);
@@ -20456,41 +20493,36 @@
         labelClass,
         contentClass,
         errorClass,
-        isNest,
+        isNested,
         showError,
         validateMessage
       } = it;
-      const {
-        label,
-        labelFor,
-        showMessage
-      } = props2;
       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 : props2.indent}px`
+            paddingLeft: `${isNested.value ? 0 : props2.indent}px`
           },
           "class": [classes.value, "vcm-form-item"]
         }, [vue.createVNode("div", {
           "class": "vcm-form-item__wrapper"
         }, [(props2.label || slots.label) && vue.createVNode("label", {
-          "for": labelFor,
+          "for": props2.labelFor,
           "style": labelStyle.value,
           "class": ["vcm-form-item__label", ...labelClass.value]
-        }, [label || slots.label?.()]), vue.createVNode("div", {
+        }, [props2.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?.(), props2.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({
@@ -20630,7 +20662,7 @@
         } else if (typeof wrapper === "string") {
           scroller.value = document.querySelector(wrapper);
         } else {
-          scroller.value = getScroller(instance.vnode.el);
+          scroller.value = getScroller$1(instance.vnode.el);
         }
       };
       const initPlaceholder = () => {
@@ -22612,13 +22644,13 @@
               "readonly": true,
               "placeholder": its.value.attrs?.placeholder || "请选择"
             }, {
-              prepend: () => {
-                if (slots.prepend) return slots.prepend?.();
-                if (!props2.label) return null;
-                return vue.createVNode("span", {
+              prepend: slots.prepend || props2.label ? () => {
+                slots.prepend ? slots.prepend() : vue.createVNode("div", {
+                  "class": "vc-select__prepend"
+                }, [vue.createVNode("span", {
                   "class": "vc-select__label"
-                }, [props2.label]);
-              },
+                }, [props2.label])]);
+              } : null,
               content: multiple.value && currentValue.value && currentValue.value.length > 0 ? () => {
                 return vue.createVNode("div", {
                   "class": [classes.value, "vc-select__tags"]
@@ -27988,9 +28020,12 @@
     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: props2, emit } = instance;
     const tabsId = vue.ref(getUid("tabs"));
@@ -28032,10 +28067,56 @@
         [`is-${props2.theme}`]: !!props2.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 el2 = document.querySelector(anchor);
+      if (!el2) return;
+      const scroller = getScroller(instance.vnode.el);
+      scrollIntoView(scroller, {
+        duration: 250,
+        from: scroller.scrollTop,
+        to: scroller.scrollTop + el2.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 el2 = document.querySelector(anchor);
+        if (!el2) continue;
+        const elTop = el2.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];
@@ -28044,7 +28125,7 @@
       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;
@@ -28054,10 +28135,13 @@
     vue.onMounted(() => {
       Resize.on(options.wrapper.value, handleResize);
       options.scrollToActive && vue.nextTick(options.scrollToActive);
+      affix?.onScroll?.(handleAffixScroll);
     });
     vue.onBeforeUnmount(() => {
       Resize.off(options.wrapper.value, handleResize);
       timer.value && clearTimeout(timer.value);
+      affix?.offScroll?.(handleAffixScroll);
+      scrollToAnchorTimer && clearTimeout(scrollToAnchorTimer);
     });
     const add = (item, setValue) => {
       if (!item) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/vc",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/vc-components": "^1.0.47",
-    "@deot/vc-hooks": "^1.0.47",
-    "@deot/vc-shared": "^1.0.47"
+    "@deot/vc-components": "^1.0.49",
+    "@deot/vc-hooks": "^1.0.49",
+    "@deot/vc-shared": "^1.0.49"
   },
   "peerDependencies": {
     "vue": "*"