@deot/vc-components 1.0.47 → 1.0.49

package/dist/index.umd.cjs

@@ -92,6 +92,38 @@
 
 	const MActionSheet = ActionSheet;
 
+	const props$1s = {
+	  modelValue: {
+	    type: Boolean,
+	    default: false
+	  },
+	  zIndex: {
+	    type: [Number, String],
+	    default: 1
+	  },
+	  // TODO: left/right
+	  placement: {
+	    type: String,
+	    default: "top"
+	  },
+	  disabled: {
+	    type: Boolean,
+	    default: false
+	  },
+	  fixed: {
+	    type: Boolean,
+	    default: true
+	  },
+	  offset: {
+	    type: Number,
+	    default: 0
+	  },
+	  // -> 固钉始终保持在容器内， 超过范围则隐藏(请注意容器避免出现滚动条) 仅fixed为true有效
+	  target: {
+	    type: String
+	  }
+	};
+
 	const IS_SERVER$3 = typeof window === "undefined";
 
 	const hasClass = (el, cls) => {
@@ -189,7 +221,7 @@
 	  return !!(overflow.match(/(scroll|auto)/) || className?.test(el.className));
 	};
 
-	const getScroller = (el, options) => {
+	const getScroller$1 = (el, options) => {
 	  if (IS_SERVER$3 || !el) return null;
 	  let parent = el;
 	  while (parent) {
@@ -308,44 +340,45 @@
 	  return target;
 	};
 
-	const props$1s = {
-	  zIndex: {
-	    type: [Number, String],
-	    default: 1
-	  },
-	  // TODO: left/right
-	  placement: {
-	    type: String,
-	    default: "top"
-	  },
-	  disabled: {
-	    type: Boolean,
-	    default: false
-	  },
-	  fixed: {
-	    type: Boolean,
-	    default: true
-	  },
-	  offset: {
-	    type: Number,
-	    default: 0
-	  },
-	  // -> 固钉始终保持在容器内， 超过范围则隐藏(请注意容器避免出现滚动条) 仅fixed为true有效
-	  target: {
-	    type: String
-	  }
+	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$1(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(); // 当前元素所在的滚动容器
@@ -361,9 +394,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 {
@@ -384,7 +415,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,
@@ -411,7 +443,7 @@
 	        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 = () => {
@@ -438,36 +470,58 @@
 	        }
 	      }
 	    };
+	    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",
@@ -14394,27 +14448,6 @@
 	  }
 	};
 
-	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",
@@ -19869,7 +19902,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 = {}) => {
@@ -20221,31 +20261,32 @@
 	  });
 	  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
 	    ];
 	  });
@@ -20253,24 +20294,25 @@
 	    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;
@@ -20407,7 +20449,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) => {
@@ -20418,7 +20460,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({
@@ -20427,9 +20469,9 @@
 	    getPosition
 	  });
 	  return {
-	    isNest,
+	    isNested,
 	    isStyleless,
-	    isNestLast,
+	    isNestedLast,
 	    validateMessage,
 	    classes,
 	    labelStyle,
@@ -20456,7 +20498,7 @@
 	    const it = useFormItem(expose);
 	    const {
 	      isStyleless,
-	      isNest,
+	      isNested,
 	      classes,
 	      labelStyle,
 	      contentStyle,
@@ -20467,39 +20509,35 @@
 	      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]])]
 	      })])])]);
@@ -20570,41 +20608,36 @@
 	      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({
@@ -21131,7 +21164,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 = () => {
@@ -23267,13 +23300,13 @@
 	            "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']
@@ -29029,10 +29062,13 @@
 	  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(getUid("tabs"));
@@ -29074,10 +29110,56 @@
 	      [`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];
@@ -29086,7 +29168,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;
@@ -29096,10 +29178,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-components",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",