Merge branch 'main' into docs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoci/monorepo",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "private": true,
   "packageManager": "[email protected]",
   "description": "hook ui .",

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoci/components",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "",
   "author": "chizuki",
   "license": "MIT",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoci/core",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "",
   "author": "chizuki",
   "license": "MIT",

packages/core/src/affix/index.ts

@@ -1,6 +1,6 @@
 import { computed, inject, provide, ref, watchPostEffect } from "vue";
 import type { InjectionKey, MaybeRefOrGetter, PropType, Ref } from "vue";
-import { useElementVisibility, useEventListener } from "@vueuse/core";
+import { toReactive, useElementBounding, useElementVisibility, useEventListener } from "@vueuse/core";
 import type { CSSProperties } from "tslx";
 import { defineHookComponent, defineHookEmits, defineHookProps, isWindow, throttleByRaf, useElement } from "@hoci/shared";
 
@@ -63,6 +63,8 @@ export const useAffix = defineHookComponent({
   setup(props, { emit }) {
     const wrapperRef = ref<HTMLElement | null>(null);
 
+    const wrapperRect = toReactive(useElementBounding(wrapperRef));
+
     const parentRef = inject(AFFIX_TARGET_KEY, undefined);
 
     const targetRef = useElement(props.target, parentRef);
@@ -88,14 +90,12 @@ export const useAffix = defineHookComponent({
       if (!wrapperRef.value || !containerRef.value) {
         return;
       }
-
-      const wrapperRect = wrapperRef.value.getBoundingClientRect();
       const targetRect = getTargetRect(containerRef.value);
       let newIsFixed = false;
       let newFixedStyles = {};
       const newPlaceholderStyles: CSSProperties = {
-        width: `${wrapperRef.value.offsetWidth}px`,
-        height: `${wrapperRef.value.offsetHeight}px`
+        width: `${wrapperRect.width}px`,
+        height: `${wrapperRect.height}px`
       };
 
       const offset = props.offset;

packages/core/src/selection/component.ts

@@ -1,5 +1,4 @@
-import { defineComponent, h, renderSlot } from "vue";
-import type { HiSelectionSlotData } from "@hoci/core";
+import { defineComponent, h } from "vue";
 import { selectionEmits, selectionProps, useSelectionList } from "@hoci/core";
 
 export const HiSelection = defineComponent({
@@ -13,15 +12,8 @@ export const HiSelection = defineComponent({
   },
   emits: selectionEmits,
   setup(props, context) {
-    const { isActive, changeActive, renderItem } = useSelectionList(props, context);
-    const { slots } = context;
+    const { render } = useSelectionList(props, context);
 
-    const slotData: HiSelectionSlotData = {
-      isActive,
-      changeActive,
-      renderItem
-    };
-
-    return () => h(props.as, {}, renderSlot(slots, "default", slotData));
+    return () => h(props.as, {}, render());
   }
 });

packages/core/src/selection/index.ts

@@ -4,7 +4,8 @@ import {
   computed,
   inject,
   provide,
-  reactive
+  reactive,
+  renderSlot
 } from "vue";
 import {
   classPropType,
@@ -127,7 +128,7 @@ export function useSelectionContext() {
 export const useSelectionList = defineHookComponent({
   props: selectionProps,
   emits: selectionEmits,
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const options = reactive<Option[]>([]);
 
     function toArray(value?: any | any[]): any[] {
@@ -231,19 +232,30 @@ export const useSelectionList = defineHookComponent({
     }));
 
 
-    function renderItem() {
+    const renderItem = () => {
       const children = options
         .filter((e) => actives.includes(e.value))
         .map((e) => e.render());
       return props.multiple ? children : children[0];
-    }
+    };
+
+    const slotData: HiSelectionSlotData = {
+      isActive,
+      changeActive,
+      renderItem
+    };
+
+    const render = () => {
+      return renderSlot(slots, "default", slotData);
+    };
 
     return {
       options,
       actives,
       isActive,
       changeActive,
-      renderItem
+      renderItem,
+      render
     };
   }
 });

packages/hoci/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoci",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "",
   "author": "chizuki",
   "license": "MIT",

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoci/shared",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "",
   "author": "chizuki",
   "license": "MIT",