@hoci/components 0.5.7 → 0.5.8

package/dist/index.cjs

@@ -2,9 +2,9 @@
 
 const vue = require('vue');
 const core = require('@hoci/core');
-const tslx = require('tslx');
-const shared = require('@hoci/shared');
 const core$1 = require('@vueuse/core');
+const shared = require('@hoci/shared');
+const tslx = require('tslx');
 
 const HiAffix = vue.defineComponent({
   name: "HiAffix",
@@ -28,6 +28,145 @@ const HiAffix = vue.defineComponent({
   }
 });
 
+const affixProps = shared.defineHookProps(
+  {
+    fixedClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @zh 距离窗口顶部达到指定偏移量后触发
+     * @en Triggered when the specified offset is reached from the top of the window
+     */
+    offset: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
+      type: String,
+      default: "top"
+    },
+    /**
+     * @zh 滚动容器，默认是 `window`
+     * @en Scroll container, default is `window`
+     */
+    target: {
+      type: [String, Object, Function]
+    },
+    /**
+    * @zh z-index 值
+    * @en Z index value
+    */
+    zIndex: {
+      type: Number,
+      default: 998
+    }
+  }
+);
+shared.defineHookEmits(["scroll", "change"]);
+const AFFIX_TARGET_KEY = Symbol("AFFIX_TARGET_KEY");
+function getTargetRect(target) {
+  return shared.isWindow(target) ? {
+    top: 0,
+    bottom: window.innerHeight
+  } : target.getBoundingClientRect();
+}
+shared.defineHookComponent({
+  props: affixProps,
+  setup(props, { emit }) {
+    const wrapperRef = vue.ref(null);
+    const wrapperRect = shared.toReactive(core$1.useElementBounding(wrapperRef));
+    const parentRef = vue.inject(AFFIX_TARGET_KEY, void 0);
+    const targetRef = shared.useElement(props.target, parentRef);
+    const isFixed = vue.ref(false);
+    const placeholderStyle = vue.ref({});
+    const fixedStyle = vue.ref({});
+    const className = vue.computed(() => {
+      return isFixed.value ? props.fixedClass : "";
+    });
+    const wrapperVisible = core$1.useElementVisibility(wrapperRef);
+    const containerRef = vue.computed(() => {
+      if (!wrapperVisible.value) {
+        return null;
+      }
+      return targetRef.value ?? window;
+    });
+    const updatePosition = shared.throttleByRaf(async () => {
+      if (!wrapperRef.value || !containerRef.value) {
+        return;
+      }
+      const area = wrapperRect.width * wrapperRect.height;
+      if (area === 0) {
+        return;
+      }
+      const newPlaceholderStyles = {
+        width: tslx.px(wrapperRect.width),
+        height: tslx.px(wrapperRect.height)
+      };
+      const targetRect = getTargetRect(containerRef.value);
+      let newIsFixed = false;
+      let newFixedStyles = {};
+      const offset = props.offset;
+      if (props.position === "top") {
+        newIsFixed = wrapperRect.top - targetRect.top < offset && offset >= 0;
+        newFixedStyles = newIsFixed ? {
+          position: "fixed",
+          zIndex: props.zIndex,
+          top: tslx.px(targetRect.top + offset)
+        } : {};
+      } else {
+        newIsFixed = targetRect.bottom - wrapperRect.bottom < offset;
+        newFixedStyles = newIsFixed ? {
+          position: "fixed",
+          bottom: tslx.px(window.innerHeight - targetRect.bottom + offset)
+        } : {};
+      }
+      if (newIsFixed !== isFixed.value) {
+        isFixed.value = newIsFixed;
+        emit("change", newIsFixed);
+      }
+      placeholderStyle.value = newPlaceholderStyles;
+      fixedStyle.value = {
+        ...newFixedStyles,
+        ...newIsFixed ? newPlaceholderStyles : {}
+      };
+    });
+    core$1.useEventListener(containerRef, "scroll", () => {
+      emit("scroll");
+      updatePosition();
+    });
+    core$1.useEventListener(containerRef, "resize", updatePosition);
+    vue.watchPostEffect(updatePosition);
+    return {
+      className,
+      wrapperRef,
+      containerRef,
+      isFixed,
+      placeholderStyle,
+      fixedStyle,
+      updatePosition
+    };
+  }
+});
+function provideAffixTarget(target) {
+  vue.provide(AFFIX_TARGET_KEY, target);
+}
+
+const HiAffixTarget = vue.defineComponent({
+  name: "HiAffixTarget",
+  setup(_, context) {
+    const targetRef = vue.ref(null);
+    provideAffixTarget(targetRef);
+    return () => vue.h("div", {
+      ref: targetRef,
+      ...context.attrs
+    }, vue.renderSlot(context.slots, "default"));
+  }
+});
+
 const HiSelection = vue.defineComponent({
   name: "HiSelection",
   props: {
@@ -549,6 +688,7 @@ const HiPopover = vue.defineComponent({
 const components = {
   __proto__: null,
   HiAffix: HiAffix,
+  HiAffixTarget: HiAffixTarget,
   HiConfigProvider: HiConfigProvider,
   HiIcon: HiIcon,
   HiItem: HiItem,
@@ -566,6 +706,7 @@ const install = (app) => {
 };
 
 exports.HiAffix = HiAffix;
+exports.HiAffixTarget = HiAffixTarget;
 exports.HiConfigProvider = HiConfigProvider;
 exports.HiIcon = HiIcon;
 exports.HiItem = HiItem;

package/dist/index.d.cts

@@ -62,6 +62,10 @@ declare const HiAffix: vue.DefineComponent<{
     as: string;
 }, {}>;
 
+declare const HiAffixTarget: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
 declare const HiSelection: vue.DefineComponent<{
     as: {
         type: StringConstructor;
@@ -668,4 +672,4 @@ declare const HiPopover: vue.DefineComponent<{
 
 declare const install: (app: App) => void;
 
-export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
+export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };

package/dist/index.d.mts

@@ -62,6 +62,10 @@ declare const HiAffix: vue.DefineComponent<{
     as: string;
 }, {}>;
 
+declare const HiAffixTarget: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
 declare const HiSelection: vue.DefineComponent<{
     as: {
         type: StringConstructor;
@@ -668,4 +672,4 @@ declare const HiPopover: vue.DefineComponent<{
 
 declare const install: (app: App) => void;
 
-export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
+export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };

package/dist/index.d.ts

@@ -62,6 +62,10 @@ declare const HiAffix: vue.DefineComponent<{
     as: string;
 }, {}>;
 
+declare const HiAffixTarget: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
 declare const HiSelection: vue.DefineComponent<{
     as: {
         type: StringConstructor;
@@ -668,4 +672,4 @@ declare const HiPopover: vue.DefineComponent<{
 
 declare const install: (app: App) => void;
 
-export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
+export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };

package/dist/index.mjs

@@ -1,13 +1,13 @@
-import { defineComponent, h, renderSlot, reactive, computed, provide, inject, KeepAlive, watch, Teleport } from 'vue';
-import { affixProps, useAffix, selectionProps as selectionProps$1, selectionEmits as selectionEmits$1, useSelectionList as useSelectionList$1, itemProps as itemProps$1, itemEmits as itemEmits$1, useSelectionItem as useSelectionItem$1, iconProps, useIcon, switchProps, switchEmits, useSwitch, configProviderProps, provideSharedConfig, popoverProps, popoverEmits, usePopover } from '@hoci/core';
-import { capitalize, cls } from 'tslx';
-import { defineHookProps, valuePropType, classPropType, labelPropType, defineHookEmits, defineHookComponent, useSharedConfig, toReactive, getFirstChilld } from '@hoci/shared';
-import { syncRef, isDefined, tryOnScopeDispose } from '@vueuse/core';
+import { defineComponent, h, renderSlot, ref, inject, computed, watchPostEffect, provide, reactive, KeepAlive, watch, Teleport } from 'vue';
+import { affixProps as affixProps$1, useAffix, selectionProps as selectionProps$1, selectionEmits as selectionEmits$1, useSelectionList as useSelectionList$1, itemProps as itemProps$1, itemEmits as itemEmits$1, useSelectionItem as useSelectionItem$1, iconProps, useIcon, switchProps, switchEmits, useSwitch, configProviderProps, provideSharedConfig, popoverProps, popoverEmits, usePopover } from '@hoci/core';
+import { useElementBounding, useElementVisibility, useEventListener, syncRef, isDefined, tryOnScopeDispose } from '@vueuse/core';
+import { defineHookProps, defineHookEmits, defineHookComponent, toReactive, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType, useSharedConfig, getFirstChilld } from '@hoci/shared';
+import { px, capitalize, cls } from 'tslx';
 
 const HiAffix = defineComponent({
   name: "HiAffix",
   props: {
-    ...affixProps,
+    ...affixProps$1,
     as: {
       type: String,
       default: "div"
@@ -26,6 +26,145 @@ const HiAffix = defineComponent({
   }
 });
 
+const affixProps = defineHookProps(
+  {
+    fixedClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @zh 距离窗口顶部达到指定偏移量后触发
+     * @en Triggered when the specified offset is reached from the top of the window
+     */
+    offset: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
+      type: String,
+      default: "top"
+    },
+    /**
+     * @zh 滚动容器，默认是 `window`
+     * @en Scroll container, default is `window`
+     */
+    target: {
+      type: [String, Object, Function]
+    },
+    /**
+    * @zh z-index 值
+    * @en Z index value
+    */
+    zIndex: {
+      type: Number,
+      default: 998
+    }
+  }
+);
+defineHookEmits(["scroll", "change"]);
+const AFFIX_TARGET_KEY = Symbol("AFFIX_TARGET_KEY");
+function getTargetRect(target) {
+  return isWindow(target) ? {
+    top: 0,
+    bottom: window.innerHeight
+  } : target.getBoundingClientRect();
+}
+defineHookComponent({
+  props: affixProps,
+  setup(props, { emit }) {
+    const wrapperRef = ref(null);
+    const wrapperRect = toReactive(useElementBounding(wrapperRef));
+    const parentRef = inject(AFFIX_TARGET_KEY, void 0);
+    const targetRef = useElement(props.target, parentRef);
+    const isFixed = ref(false);
+    const placeholderStyle = ref({});
+    const fixedStyle = ref({});
+    const className = computed(() => {
+      return isFixed.value ? props.fixedClass : "";
+    });
+    const wrapperVisible = useElementVisibility(wrapperRef);
+    const containerRef = computed(() => {
+      if (!wrapperVisible.value) {
+        return null;
+      }
+      return targetRef.value ?? window;
+    });
+    const updatePosition = throttleByRaf(async () => {
+      if (!wrapperRef.value || !containerRef.value) {
+        return;
+      }
+      const area = wrapperRect.width * wrapperRect.height;
+      if (area === 0) {
+        return;
+      }
+      const newPlaceholderStyles = {
+        width: px(wrapperRect.width),
+        height: px(wrapperRect.height)
+      };
+      const targetRect = getTargetRect(containerRef.value);
+      let newIsFixed = false;
+      let newFixedStyles = {};
+      const offset = props.offset;
+      if (props.position === "top") {
+        newIsFixed = wrapperRect.top - targetRect.top < offset && offset >= 0;
+        newFixedStyles = newIsFixed ? {
+          position: "fixed",
+          zIndex: props.zIndex,
+          top: px(targetRect.top + offset)
+        } : {};
+      } else {
+        newIsFixed = targetRect.bottom - wrapperRect.bottom < offset;
+        newFixedStyles = newIsFixed ? {
+          position: "fixed",
+          bottom: px(window.innerHeight - targetRect.bottom + offset)
+        } : {};
+      }
+      if (newIsFixed !== isFixed.value) {
+        isFixed.value = newIsFixed;
+        emit("change", newIsFixed);
+      }
+      placeholderStyle.value = newPlaceholderStyles;
+      fixedStyle.value = {
+        ...newFixedStyles,
+        ...newIsFixed ? newPlaceholderStyles : {}
+      };
+    });
+    useEventListener(containerRef, "scroll", () => {
+      emit("scroll");
+      updatePosition();
+    });
+    useEventListener(containerRef, "resize", updatePosition);
+    watchPostEffect(updatePosition);
+    return {
+      className,
+      wrapperRef,
+      containerRef,
+      isFixed,
+      placeholderStyle,
+      fixedStyle,
+      updatePosition
+    };
+  }
+});
+function provideAffixTarget(target) {
+  provide(AFFIX_TARGET_KEY, target);
+}
+
+const HiAffixTarget = defineComponent({
+  name: "HiAffixTarget",
+  setup(_, context) {
+    const targetRef = ref(null);
+    provideAffixTarget(targetRef);
+    return () => h("div", {
+      ref: targetRef,
+      ...context.attrs
+    }, renderSlot(context.slots, "default"));
+  }
+});
+
 const HiSelection = defineComponent({
   name: "HiSelection",
   props: {
@@ -547,6 +686,7 @@ const HiPopover = defineComponent({
 const components = {
   __proto__: null,
   HiAffix: HiAffix,
+  HiAffixTarget: HiAffixTarget,
   HiConfigProvider: HiConfigProvider,
   HiIcon: HiIcon,
   HiItem: HiItem,
@@ -563,4 +703,4 @@ const install = (app) => {
   }
 };
 
-export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
+export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoci/components",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "",
   "author": "Chizuki <chizukicn@outlook.com>",
   "license": "MIT",
@@ -31,8 +31,8 @@
   "dependencies": {
     "maybe-types": "^0.2.0",
     "tslx": "^0.1.1",
-    "@hoci/core": "0.5.7",
-    "@hoci/shared": "0.5.7"
+    "@hoci/core": "0.5.8",
+    "@hoci/shared": "0.5.8"
   },
   "scripts": {
     "build": "unbuild",