@hoci/core 0.4.2 → 0.5.0

package/dist/index.cjs

@@ -19,7 +19,10 @@ const affixProps = shared.defineHookProps(
       type: Number,
       default: 0
     },
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
       type: String,
       default: "top"
     },
@@ -52,6 +55,7 @@ const useAffix = shared.defineHookComponent({
   props: affixProps,
   setup(props, { emit }) {
     const wrapperRef = vue.ref(null);
+    const wrapperRect = core.toReactive(core.useElementBounding(wrapperRef));
     const parentRef = vue.inject(AFFIX_TARGET_KEY, void 0);
     const targetRef = shared.useElement(props.target, parentRef);
     const isFixed = vue.ref(false);
@@ -71,27 +75,30 @@ const useAffix = shared.defineHookComponent({
       if (!wrapperRef.value || !containerRef.value) {
         return;
       }
-      const wrapperRect = wrapperRef.value.getBoundingClientRect();
+      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 newPlaceholderStyles = {
-        width: `${wrapperRef.value.offsetWidth}px`,
-        height: `${wrapperRef.value.offsetHeight}px`
-      };
       const offset = props.offset;
-      if (props.offsetType === "top") {
+      if (props.position === "top") {
         newIsFixed = wrapperRect.top - targetRect.top < offset && offset >= 0;
         newFixedStyles = newIsFixed ? {
           position: "fixed",
           zIndex: props.zIndex,
-          top: `${targetRect.top + (offset || 0)}px`
+          top: tslx.px(targetRect.top + offset)
         } : {};
       } else {
-        newIsFixed = targetRect.bottom - wrapperRect.bottom < (offset || 0);
+        newIsFixed = targetRect.bottom - wrapperRect.bottom < offset;
         newFixedStyles = newIsFixed ? {
           position: "fixed",
-          bottom: `${window.innerHeight - targetRect.bottom + (offset || 0)}px`
+          bottom: tslx.px(window.innerHeight - targetRect.bottom + offset)
         } : {};
       }
       if (newIsFixed !== isFixed.value) {
@@ -201,7 +208,7 @@ function useSelectionContext() {
 const useSelectionList = shared.defineHookComponent({
   props: selectionProps,
   emits: selectionEmits,
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const options = vue.reactive([]);
     function toArray(value) {
       if (!core.isDefined(value)) {
@@ -289,16 +296,25 @@ const useSelectionList = shared.defineHookComponent({
       isActive,
       init
     }));
-    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 = {
+      isActive,
+      changeActive,
+      renderItem
+    };
+    const render = () => {
+      return vue.renderSlot(slots, "default", slotData);
+    };
     return {
       options,
       actives,
       isActive,
       changeActive,
-      renderItem
+      renderItem,
+      render
     };
   }
 });
@@ -338,16 +354,19 @@ const useSelectionItem = shared.defineHookComponent({
       }
       context.changeActive(props.value);
     };
+    const label = vue.computed(() => {
+      let label2 = props.label ?? context.label;
+      if (label2 && typeof label2 == "function") {
+        label2 = label2(props.value);
+      }
+      return Array.isArray(label2) ? label2 : [label2];
+    });
     function render() {
       return vue.renderSlot(slots, "default", {
         active: context.isActive(props.value),
         activate
       }, () => {
-        let label = props.label ?? context.label;
-        if (label && typeof label == "function") {
-          label = label(props.value);
-        }
-        return Array.isArray(label) ? label : [label];
+        return label.value;
       });
     }
     let remove = () => {
@@ -387,7 +406,8 @@ const useSelectionItem = shared.defineHookComponent({
       isActive,
       isDisabled,
       className,
-      activateEvent
+      activateEvent,
+      label
     };
   }
 });
@@ -490,11 +510,12 @@ const useIcon = shared.defineHookComponent({
     const sharedConfig = shared.useSharedConfig("icon");
     const sizeStyle = vue.computed(() => {
       const s = props.size ?? sharedConfig.size;
-      const size = s ? tslx.unit_f(s, sharedConfig.sizeUnit) : void 0;
+      const unit = tslx.createUnitFormat(sharedConfig.sizeUnit ?? "px");
+      const size = s ? unit(s) : void 0;
       const w = props.width ?? size;
       const h = props.height ?? size;
-      const width = w ? tslx.unit_f(w, sharedConfig.sizeUnit) : void 0;
-      const height = h ? tslx.unit_f(h, sharedConfig.sizeUnit) : void 0;
+      const width = w ? unit(w) : void 0;
+      const height = h ? unit(h) : void 0;
       return {
         width,
         height

package/dist/index.d.cts

@@ -18,7 +18,10 @@ declare const affixProps: {
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
         type: PropType<"top" | "bottom">;
         default: string;
     };
@@ -62,7 +65,10 @@ declare const useAffix: _hoci_shared.HookComponent<{
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
         type: PropType<"top" | "bottom">;
         default: string;
     };
@@ -94,7 +100,10 @@ declare const useAffix: _hoci_shared.HookComponent<{
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
         type: PropType<"top" | "bottom">;
         default: string;
     };
@@ -116,7 +125,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
 }>, {
     fixedClass: string;
     offset: number;
-    offsetType: "top" | "bottom";
+    position: "top" | "bottom";
     zIndex: number;
 }>;
 declare function provideAffixTarget(target: MaybeRefOrGetter<Element | null | undefined>): void;
@@ -205,6 +214,9 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     isActive: (value: any) => boolean;
     changeActive: (value: any) => void;
     renderItem: () => ElementLike;
+    render: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>;
 }, ("change" | "load" | "unload" | "update:modelValue")[], {
     modelValue: {
         type: PropType<any>;
@@ -353,6 +365,7 @@ declare const useSelectionItem: _hoci_shared.HookComponent<{
     isDisabled: vue.ComputedRef<boolean>;
     className: vue.ComputedRef<string>;
     activateEvent: vue.ComputedRef<ActivateEvent>;
+    label: vue.ComputedRef<ElementLike[] | (string | JSX.Element | null | undefined)[]>;
 }, vue.EmitsOptions, {
     value: {
         type: PropType<any>;

package/dist/index.d.mts

@@ -18,7 +18,10 @@ declare const affixProps: {
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
         type: PropType<"top" | "bottom">;
         default: string;
     };
@@ -62,7 +65,10 @@ declare const useAffix: _hoci_shared.HookComponent<{
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
         type: PropType<"top" | "bottom">;
         default: string;
     };
@@ -94,7 +100,10 @@ declare const useAffix: _hoci_shared.HookComponent<{
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
         type: PropType<"top" | "bottom">;
         default: string;
     };
@@ -116,7 +125,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
 }>, {
     fixedClass: string;
     offset: number;
-    offsetType: "top" | "bottom";
+    position: "top" | "bottom";
     zIndex: number;
 }>;
 declare function provideAffixTarget(target: MaybeRefOrGetter<Element | null | undefined>): void;
@@ -205,6 +214,9 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     isActive: (value: any) => boolean;
     changeActive: (value: any) => void;
     renderItem: () => ElementLike;
+    render: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>;
 }, ("change" | "load" | "unload" | "update:modelValue")[], {
     modelValue: {
         type: PropType<any>;
@@ -353,6 +365,7 @@ declare const useSelectionItem: _hoci_shared.HookComponent<{
     isDisabled: vue.ComputedRef<boolean>;
     className: vue.ComputedRef<string>;
     activateEvent: vue.ComputedRef<ActivateEvent>;
+    label: vue.ComputedRef<ElementLike[] | (string | JSX.Element | null | undefined)[]>;
 }, vue.EmitsOptions, {
     value: {
         type: PropType<any>;

package/dist/index.d.ts

@@ -18,7 +18,10 @@ declare const affixProps: {
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
         type: PropType<"top" | "bottom">;
         default: string;
     };
@@ -62,7 +65,10 @@ declare const useAffix: _hoci_shared.HookComponent<{
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
         type: PropType<"top" | "bottom">;
         default: string;
     };
@@ -94,7 +100,10 @@ declare const useAffix: _hoci_shared.HookComponent<{
         type: NumberConstructor;
         default: number;
     };
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
         type: PropType<"top" | "bottom">;
         default: string;
     };
@@ -116,7 +125,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
 }>, {
     fixedClass: string;
     offset: number;
-    offsetType: "top" | "bottom";
+    position: "top" | "bottom";
     zIndex: number;
 }>;
 declare function provideAffixTarget(target: MaybeRefOrGetter<Element | null | undefined>): void;
@@ -205,6 +214,9 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     isActive: (value: any) => boolean;
     changeActive: (value: any) => void;
     renderItem: () => ElementLike;
+    render: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>;
 }, ("change" | "load" | "unload" | "update:modelValue")[], {
     modelValue: {
         type: PropType<any>;
@@ -353,6 +365,7 @@ declare const useSelectionItem: _hoci_shared.HookComponent<{
     isDisabled: vue.ComputedRef<boolean>;
     className: vue.ComputedRef<string>;
     activateEvent: vue.ComputedRef<ActivateEvent>;
+    label: vue.ComputedRef<ElementLike[] | (string | JSX.Element | null | undefined)[]>;
 }, vue.EmitsOptions, {
     value: {
         type: PropType<any>;

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { ref, inject, computed, watchPostEffect, provide, reactive, watch, renderSlot } from 'vue';
-import { useElementVisibility, useEventListener, syncRef, toReactive, isDefined, tryOnScopeDispose, useVModel } from '@vueuse/core';
+import { ref, inject, computed, watchPostEffect, provide, reactive, renderSlot, watch } from 'vue';
+import { toReactive, useElementBounding, useElementVisibility, useEventListener, syncRef, isDefined, tryOnScopeDispose, useVModel } from '@vueuse/core';
 import { defineHookProps, defineHookEmits, defineHookComponent, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType, useSharedConfig } from '@hoci/shared';
 export * from '@hoci/shared';
-import { cls, unit_f } from 'tslx';
+import { px, cls, createUnitFormat } from 'tslx';
 
 const affixProps = defineHookProps(
   {
@@ -18,7 +18,10 @@ const affixProps = defineHookProps(
       type: Number,
       default: 0
     },
-    offsetType: {
+    /**
+     * @zh 固定的相对方向
+     */
+    position: {
       type: String,
       default: "top"
     },
@@ -51,6 +54,7 @@ const useAffix = 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);
@@ -70,27 +74,30 @@ const useAffix = defineHookComponent({
       if (!wrapperRef.value || !containerRef.value) {
         return;
       }
-      const wrapperRect = wrapperRef.value.getBoundingClientRect();
+      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 newPlaceholderStyles = {
-        width: `${wrapperRef.value.offsetWidth}px`,
-        height: `${wrapperRef.value.offsetHeight}px`
-      };
       const offset = props.offset;
-      if (props.offsetType === "top") {
+      if (props.position === "top") {
         newIsFixed = wrapperRect.top - targetRect.top < offset && offset >= 0;
         newFixedStyles = newIsFixed ? {
           position: "fixed",
           zIndex: props.zIndex,
-          top: `${targetRect.top + (offset || 0)}px`
+          top: px(targetRect.top + offset)
         } : {};
       } else {
-        newIsFixed = targetRect.bottom - wrapperRect.bottom < (offset || 0);
+        newIsFixed = targetRect.bottom - wrapperRect.bottom < offset;
         newFixedStyles = newIsFixed ? {
           position: "fixed",
-          bottom: `${window.innerHeight - targetRect.bottom + (offset || 0)}px`
+          bottom: px(window.innerHeight - targetRect.bottom + offset)
         } : {};
       }
       if (newIsFixed !== isFixed.value) {
@@ -200,7 +207,7 @@ function useSelectionContext() {
 const useSelectionList = defineHookComponent({
   props: selectionProps,
   emits: selectionEmits,
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const options = reactive([]);
     function toArray(value) {
       if (!isDefined(value)) {
@@ -288,16 +295,25 @@ const useSelectionList = defineHookComponent({
       isActive,
       init
     }));
-    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 = {
+      isActive,
+      changeActive,
+      renderItem
+    };
+    const render = () => {
+      return renderSlot(slots, "default", slotData);
+    };
     return {
       options,
       actives,
       isActive,
       changeActive,
-      renderItem
+      renderItem,
+      render
     };
   }
 });
@@ -337,16 +353,19 @@ const useSelectionItem = defineHookComponent({
       }
       context.changeActive(props.value);
     };
+    const label = computed(() => {
+      let label2 = props.label ?? context.label;
+      if (label2 && typeof label2 == "function") {
+        label2 = label2(props.value);
+      }
+      return Array.isArray(label2) ? label2 : [label2];
+    });
     function render() {
       return renderSlot(slots, "default", {
         active: context.isActive(props.value),
         activate
       }, () => {
-        let label = props.label ?? context.label;
-        if (label && typeof label == "function") {
-          label = label(props.value);
-        }
-        return Array.isArray(label) ? label : [label];
+        return label.value;
       });
     }
     let remove = () => {
@@ -386,7 +405,8 @@ const useSelectionItem = defineHookComponent({
       isActive,
       isDisabled,
       className,
-      activateEvent
+      activateEvent,
+      label
     };
   }
 });
@@ -489,11 +509,12 @@ const useIcon = defineHookComponent({
     const sharedConfig = useSharedConfig("icon");
     const sizeStyle = computed(() => {
       const s = props.size ?? sharedConfig.size;
-      const size = s ? unit_f(s, sharedConfig.sizeUnit) : void 0;
+      const unit = createUnitFormat(sharedConfig.sizeUnit ?? "px");
+      const size = s ? unit(s) : void 0;
       const w = props.width ?? size;
       const h = props.height ?? size;
-      const width = w ? unit_f(w, sharedConfig.sizeUnit) : void 0;
-      const height = h ? unit_f(h, sharedConfig.sizeUnit) : void 0;
+      const width = w ? unit(w) : void 0;
+      const height = h ? unit(h) : void 0;
       return {
         width,
         height

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoci/core",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "",
   "author": "chizuki",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "@vueuse/core": "^10.5.0",
     "maybe-types": "^0.1.0",
     "tslx": "^0.1.1",
-    "@hoci/shared": "0.4.2"
+    "@hoci/shared": "0.5.0"
   },
   "scripts": {
     "build": "unbuild",