@deot/vc-components 1.0.43 → 1.0.45

package/dist/index.cjs

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const vue = require('vue');
+const $ = require('@deot/helper-dom');
 const Utils = require('@deot/helper-utils');
 const lodashEs = require('lodash-es');
 const vcHooks = require('@deot/vc-hooks');
-const $ = require('@deot/helper-dom');
 const helperResize = require('@deot/helper-resize');
 const vcShared = require('@deot/vc-shared');
 const helperWheel = require('@deot/helper-wheel');
@@ -34,8 +34,8 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
-const Utils__namespace = /*#__PURE__*/_interopNamespaceDefault(Utils);
 const $__namespace = /*#__PURE__*/_interopNamespaceDefault($);
+const Utils__namespace = /*#__PURE__*/_interopNamespaceDefault(Utils);
 const Load__namespace = /*#__PURE__*/_interopNamespaceDefault(Load);
 
 class VcError {
@@ -101,7 +101,7 @@ class Instance {
 }
 const VcInstance = new Instance();
 
-const props$1s = {
+const props$1t = {
   tag: {
     type: String,
     default: "div"
@@ -110,10 +110,10 @@ const props$1s = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$27 = 'vc-action-sheet';
+const COMPONENT_NAME$28 = 'vc-action-sheet';
 const ActionSheet = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$27,
-  props: props$1s,
+  name: COMPONENT_NAME$28,
+  props: props$1t,
   setup(props, {
     slots
   }) {
@@ -127,6 +127,184 @@ const ActionSheet = /* @__PURE__ */ vue.defineComponent({
 
 const MActionSheet = ActionSheet;
 
+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
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$27 = 'vc-affix';
+const SCROLLER_WHEEL_REG = /vc-scroller-wheel/;
+const Affix = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$27,
+  props: props$1s,
+  setup(props, {
+    slots,
+    expose
+  }) {
+    const scrollerInstance = vue.inject('vc-scroller', null);
+    const scroller = vue.shallowRef(); // 当前元素所在的滚动容器
+    const base = vue.shallowRef(); // 当前元素（props.tagret）的参考容器
+    const current = vue.shallowRef(); // 当前元素
+
+    const currentRect = vue.reactive({
+      top: 0,
+      bottom: 0,
+      width: 0,
+      height: 0
+    });
+    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 currentStyle = vue.computed(() => {
+      if (!isActive.value) return {};
+      return {
+        height: `${currentRect.height}px`,
+        width: `${currentRect.width}px`
+      };
+    });
+    const contentStyle = vue.computed(() => {
+      if (!isActive.value) return {};
+      const offset = `${props.offset}px`;
+      return {
+        height: `${currentRect.height}px`,
+        width: `${currentRect.width}px`,
+        top: props.placement === 'top' ? offset : '',
+        bottom: props.placement === 'bottom' ? offset : '',
+        zIndex: props.zIndex,
+        transform: transformY.value ? `translateY(${transformY.value}px)` : ''
+      };
+    });
+    const setCurrentRect = () => {
+      const rect = current.value.getBoundingClientRect();
+      Object.assign(currentRect, {
+        top: rect.top,
+        bottom: rect.bottom,
+        width: rect.width,
+        height: rect.height
+      });
+    };
+    const setAbsoluteStatus = () => {
+      const {
+        placement,
+        offset
+      } = props;
+      const currentHeightOffset = offset + currentRect.height;
+      const containerRect = scroller.value.getBoundingClientRect();
+      let transformOffsetY = 0;
+
+      // scroller-wheel滚动条偏移
+      if (scrollerInstance && isVcScrollerWheel.value) {
+        const maxMoveY = scrollerInstance.scrollHeight - scrollerInstance.clientHeight;
+        transformOffsetY = scrollerInstance.scrollTop >= maxMoveY ? maxMoveY : scrollerInstance.scrollTop;
+      }
+      if (placement === 'top') {
+        isActive.value = currentRect.top - containerRect.top <= props.offset;
+        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;
+      }
+    };
+    const setFixedStatus = () => {
+      const {
+        placement,
+        target,
+        offset
+      } = props;
+      const currentHeightOffset = offset + currentRect.height;
+      const containerRect = target && base.value.getBoundingClientRect();
+      if (placement === 'top') {
+        if (target) {
+          isActive.value = offset > currentRect.top && containerRect.bottom > 0;
+          transformY.value = Math.min(containerRect.bottom - currentHeightOffset, 0);
+        } else {
+          isActive.value = offset > currentRect.top;
+        }
+      } else {
+        if (target) {
+          isActive.value = windowHeight.value - offset < currentRect.bottom && windowHeight.value > containerRect.top;
+          transformY.value = -Math.min(windowHeight.value - containerRect.top - currentHeightOffset, 0);
+        } else {
+          isActive.value = windowHeight.value - offset < currentRect.bottom;
+        }
+      }
+    };
+    const refresh = () => {
+      setCurrentRect();
+      scroller.value instanceof Window || props.fixed ? setFixedStatus() : setAbsoluteStatus();
+    };
+    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
+      });
+      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);
+      }
+    });
+    expose({
+      refresh
+    });
+    return () => {
+      return vue.createVNode("div", {
+        "ref": current,
+        "class": "vc-affix",
+        "style": currentStyle.value
+      }, [vue.createVNode("div", {
+        "class": {
+          [`vc-affix__${props.fixed ? 'fixed' : 'absolute'}`]: isActive.value
+        },
+        "style": contentStyle.value
+      }, [slots?.default?.({
+        active: isActive.value
+      })])]);
+    };
+  }
+});
+
+const MAffix = Affix;
+
 const props$1r = {
   modelValue: {
     type: Boolean,
@@ -813,7 +991,7 @@ const COMPONENT_NAME$1$ = 'vc-alert';
 
 // [color, borderColor, backgroundColor], -> CSS
 const THEME_MAP = {
-  info: ['#2B72FD', '#91d5ff', '#e6f7ff'],
+  info: ['#456CF6', '#91d5ff', '#e6f7ff'],
   success: ['#52c41a', '#b7eb8f', '#f6ffed'],
   error: ['#ed4014', '#ffb08f', '#fbe9e9'],
   warning: ['#ffbf00', '#ffe58f', '#fffbe6']
@@ -9150,6 +9328,7 @@ const useScroller = (expose) => {
     refreshSize();
     refreshPosition(options);
   };
+  const listeners = [];
   const triggerScrollDelegate = (options) => {
     const delegates = {
       scrollLeft: (options && options.x) ?? scrollX.value,
@@ -9157,12 +9336,15 @@ const useScroller = (expose) => {
       clientWidth: wrapperW.value,
       clientHeight: wrapperH.value,
       scrollWidth: contentW.value,
-      scrollHeight: contentH.value
+      scrollHeight: contentH.value,
+      getBoundingClientRect: () => wrapper.value?.getBoundingClientRect()
     };
-    instance.emit("scroll", {
+    const e = {
       target: delegates,
       currentTarget: delegates
-    });
+    };
+    instance.emit("scroll", e);
+    listeners.forEach((listener) => listener(e));
   };
   const scrollTo = (options) => {
     refreshPosition(options);
@@ -9189,8 +9371,9 @@ const useScroller = (expose) => {
       helperResize.Resize.off(wrapper.value, refresh);
       helperResize.Resize.off(content.value, refresh);
     }
+    listeners.splice(0, listeners.length);
   });
-  expose({
+  const exposed = {
     wrapper,
     content,
     scrollTo,
@@ -9206,8 +9389,16 @@ const useScroller = (expose) => {
     },
     setScrollLeft: (value) => {
       scrollTo({ x: value });
+    },
+    on: (listener) => {
+      listeners.push(listener);
+    },
+    off: (listener) => {
+      listeners.splice(listeners.indexOf(listener), 1);
     }
-  });
+  };
+  expose(exposed);
+  vue.provide("vc-scroller", vue.reactive(exposed));
   return {
     bar,
     wrapper,
@@ -14864,7 +15055,7 @@ const props$n = {
   color: {
     type: [Object, String],
     default: () => ({
-      normal: "#2B72FD",
+      normal: "#456CF6",
       success: "#52c41a",
       error: "#f5222d"
     })
@@ -19812,6 +20003,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" });
   };
   const handleResize = () => {
     if (instance.isUnmounted) return;
@@ -20064,12 +20256,16 @@ const Tabs = /* @__PURE__ */ vue.defineComponent({
 
 const props$b = {
   value: {
-    type: [String, Number, Boolean]
+    type: [String, Number, Boolean],
+    default: void 0
   },
   label: {
     type: [String, Function],
     default: ""
   },
+  anchor: {
+    type: String
+  },
   /**
    * 服务端渲染时，lazy设置为false，可以把内容渲染出来;
    * 不能设置为!IS_SERVER, 会影响客服端激活，不一样会存在问题
@@ -20412,7 +20608,7 @@ const MTabs = /* @__PURE__ */ vue.defineComponent({
         "class": [{
           'is-fixed': isFixed
         }, 'vcm-tabs__bar']
-      }, [vue.createVNode("slot", {
+      }, [vue.createVNode(vue.resolveComponent("slot"), {
         "name": "prepend"
       }, null), slots.prepend?.(), props.showStep && tabs.scrollable.value && vue.createVNode("div", {
         "class": "vcm-tabs__step is-left",
@@ -20526,6 +20722,10 @@ const props$9 = {
     default: (props$) => {
       return props$.value;
     }
+  },
+  theme: {
+    type: String,
+    default: "dark"
   }
 };
 
@@ -20578,7 +20778,7 @@ const Text = /* @__PURE__ */ vue.defineComponent({
           // 确保不重复创建
           triggerEl: e.target,
           hover: true,
-          theme: 'dark',
+          theme: props.theme,
           placement: props.placement,
           portalClass: props.portalClass,
           portalStyle: [props.portalStyle || `width: ${e.target.clientWidth}px`, 'word-break: break-all'],
@@ -23540,6 +23740,7 @@ const UploadPicker = /* @__PURE__ */ vue.defineComponent({
 const MUploadPicker = UploadPicker;
 
 exports.ActionSheet = ActionSheet;
+exports.Affix = Affix;
 exports.Alert = Alert;
 exports.Artboard = Artboard;
 exports.Button = Button;
@@ -23584,6 +23785,7 @@ exports.InputSearch = InputSearch;
 exports.List = MList;
 exports.ListItem = MListItem;
 exports.MActionSheet = MActionSheet;
+exports.MAffix = MAffix;
 exports.MAlert = MAlert;
 exports.MArtboard = MArtboard;
 exports.MButton = MButton;