@deot/vc-components 1.0.43 → 1.0.45

package/dist/index.js

@@ -1,10 +1,10 @@
-import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, onMounted, onBeforeUnmount, inject, provide, nextTick, mergeProps, withModifiers, createApp, Fragment as Fragment$1, Teleport, onUnmounted, withDirectives, vShow, shallowRef, isVNode, onBeforeMount, createTextVNode, toRaw, onUpdated, useAttrs as useAttrs$1 } from 'vue';
+import { reactive, defineComponent, createVNode, inject, shallowRef, ref, computed, onMounted, onBeforeUnmount, watch, getCurrentInstance, TransitionGroup, Transition as Transition$1, h, provide, nextTick, mergeProps, withModifiers, createApp, Fragment as Fragment$1, Teleport, onUnmounted, withDirectives, vShow, isVNode, onBeforeMount, createTextVNode, toRaw, onUpdated, resolveComponent, useAttrs as useAttrs$1 } from 'vue';
+import * as $ from '@deot/helper-dom';
+import { getScroller, composedPath, scrollIntoView, prefixStyle, getStyle, removeClass, addClass, hasClass } from '@deot/helper-dom';
 import * as Utils from '@deot/helper-utils';
 import { raf, getUid, preZero, getPropByPath, throttle as throttle$1, hasOwn } from '@deot/helper-utils';
 import { debounce, cloneDeep, pick, isEqualWith, startCase, throttle, concat, max, merge, isEmpty as isEmpty$1, kebabCase, difference } from 'lodash-es';
 import { useAttrs, useScrollbar, getInstance } from '@deot/vc-hooks';
-import * as $ from '@deot/helper-dom';
-import { composedPath, scrollIntoView, prefixStyle, getStyle, removeClass, addClass, hasClass } from '@deot/helper-dom';
 import { Resize } from '@deot/helper-resize';
 import { Utils as Utils$1, IS_SERVER as IS_SERVER$1 } from '@deot/vc-shared';
 import { Wheel } from '@deot/helper-wheel';
@@ -79,7 +79,7 @@ class Instance {
 }
 const VcInstance = new Instance();
 
-const props$1s = {
+const props$1t = {
   tag: {
     type: String,
     default: "div"
@@ -88,10 +88,10 @@ const props$1s = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$27 = 'vc-action-sheet';
+const COMPONENT_NAME$28 = 'vc-action-sheet';
 const ActionSheet = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$27,
-  props: props$1s,
+  name: COMPONENT_NAME$28,
+  props: props$1t,
   setup(props, {
     slots
   }) {
@@ -105,6 +105,184 @@ const ActionSheet = /* @__PURE__ */ 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__ */ defineComponent({
+  name: COMPONENT_NAME$27,
+  props: props$1s,
+  setup(props, {
+    slots,
+    expose
+  }) {
+    const scrollerInstance = inject('vc-scroller', null);
+    const scroller = shallowRef(); // 当前元素所在的滚动容器
+    const base = shallowRef(); // 当前元素（props.tagret）的参考容器
+    const current = shallowRef(); // 当前元素
+
+    const currentRect = reactive({
+      top: 0,
+      bottom: 0,
+      width: 0,
+      height: 0
+    });
+    const isActive = ref(false);
+    const transformY = ref(0);
+    const windowHeight = ref(window.innerHeight);
+    const isVcScrollerWheel = computed(() => {
+      return SCROLLER_WHEEL_REG.test(scroller.value?.className || '');
+    });
+    const currentStyle = computed(() => {
+      if (!isActive.value) return {};
+      return {
+        height: `${currentRect.height}px`,
+        width: `${currentRect.width}px`
+      };
+    });
+    const contentStyle = 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();
+    };
+    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();
+    });
+    onBeforeUnmount(() => {
+      if (isVcScrollerWheel.value) {
+        scrollerInstance?.off(refresh);
+      } else {
+        scroller.value?.removeEventListener('scroll', refresh);
+      }
+    });
+    expose({
+      refresh
+    });
+    return () => {
+      return createVNode("div", {
+        "ref": current,
+        "class": "vc-affix",
+        "style": currentStyle.value
+      }, [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,
@@ -791,7 +969,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']
@@ -9128,6 +9306,7 @@ const useScroller = (expose) => {
     refreshSize();
     refreshPosition(options);
   };
+  const listeners = [];
   const triggerScrollDelegate = (options) => {
     const delegates = {
       scrollLeft: (options && options.x) ?? scrollX.value,
@@ -9135,12 +9314,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);
@@ -9167,8 +9349,9 @@ const useScroller = (expose) => {
       Resize.off(wrapper.value, refresh);
       Resize.off(content.value, refresh);
     }
+    listeners.splice(0, listeners.length);
   });
-  expose({
+  const exposed = {
     wrapper,
     content,
     scrollTo,
@@ -9184,8 +9367,16 @@ const useScroller = (expose) => {
     },
     setScrollLeft: (value) => {
       scrollTo({ x: value });
+    },
+    on: (listener) => {
+      listeners.push(listener);
+    },
+    off: (listener) => {
+      listeners.splice(listeners.indexOf(listener), 1);
     }
-  });
+  };
+  expose(exposed);
+  provide("vc-scroller", reactive(exposed));
   return {
     bar,
     wrapper,
@@ -14842,7 +15033,7 @@ const props$n = {
   color: {
     type: [Object, String],
     default: () => ({
-      normal: "#2B72FD",
+      normal: "#456CF6",
       success: "#52c41a",
       error: "#f5222d"
     })
@@ -19790,6 +19981,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;
@@ -20042,12 +20234,16 @@ const Tabs = /* @__PURE__ */ 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, 会影响客服端激活，不一样会存在问题
@@ -20390,7 +20586,7 @@ const MTabs = /* @__PURE__ */ defineComponent({
         "class": [{
           'is-fixed': isFixed
         }, 'vcm-tabs__bar']
-      }, [createVNode("slot", {
+      }, [createVNode(resolveComponent("slot"), {
         "name": "prepend"
       }, null), slots.prepend?.(), props.showStep && tabs.scrollable.value && createVNode("div", {
         "class": "vcm-tabs__step is-left",
@@ -20504,6 +20700,10 @@ const props$9 = {
     default: (props$) => {
       return props$.value;
     }
+  },
+  theme: {
+    type: String,
+    default: "dark"
   }
 };
 
@@ -20556,7 +20756,7 @@ const Text = /* @__PURE__ */ 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'],
@@ -23517,4 +23717,4 @@ const UploadPicker = /* @__PURE__ */ defineComponent({
 
 const MUploadPicker = UploadPicker;
 
-export { ActionSheet, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, CheckboxGroup, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, DrawerView, Dropdown, DropdownItem, DropdownMenu, Editor, EditorView, Expand$1 as Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image$1 as Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MCheckboxGroup, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDrawerView, MDropdown, MDropdownItem, MDropdownMenu, MEditor, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPagination, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRadioGroup, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTableColumn, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MTreeSelect, MUpload, MUploadPicker, Marquee, Message, MessageView, Modal, ModalView, Notice, NoticeView, Option$1 as Option, Pagination, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, RadioGroup, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, TableColumn, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, TreeSelect, Upload, UploadPicker, VcError, VcInstance };
+export { ActionSheet, Affix, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, CheckboxGroup, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, DrawerView, Dropdown, DropdownItem, DropdownMenu, Editor, EditorView, Expand$1 as Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image$1 as Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAffix, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MCheckboxGroup, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDrawerView, MDropdown, MDropdownItem, MDropdownMenu, MEditor, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPagination, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRadioGroup, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTableColumn, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MTreeSelect, MUpload, MUploadPicker, Marquee, Message, MessageView, Modal, ModalView, Notice, NoticeView, Option$1 as Option, Pagination, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, RadioGroup, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, TableColumn, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, TreeSelect, Upload, UploadPicker, VcError, VcInstance };