@hairy/vue-lib 1.3.16 → 1.5.0

package/{LICENSE → LICENSE.md}

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-PRESENT Hairyf<https://github.com/hairyf>
+Copyright (c) 2025-PRESENT Hairyf <https://github.com/antfu>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,5 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
-

package/README.md

@@ -0,0 +1,36 @@
+# @hairy/vue-lib
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![bundle][bundle-src]][bundle-href]
+[![JSDocs][jsdocs-src]][jsdocs-href]
+[![License][license-src]][license-href]
+
+## Install
+
+```
+ni @hairy/vue-lib
+```
+
+## CDN
+
+```html
+<script src="https://unpkg.com/@hairy/vue-lib"></script>
+```
+
+## License
+
+[MIT](./LICENSE) License © [Hairyf](https://github.com/hairyf)
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@hairy/vue-lib?style=flat&colorA=080f12&colorB=1fa669
+[npm-version-href]: https://npmjs.com/package/@hairy/vue-lib
+[npm-downloads-src]: https://img.shields.io/npm/dm/@hairy/vue-lib?style=flat&colorA=080f12&colorB=1fa669
+[npm-downloads-href]: https://npmjs.com/package/@hairy/vue-lib
+[bundle-src]: https://img.shields.io/bundlephobia/minzip/@hairy/vue-lib?style=flat&colorA=080f12&colorB=1fa669&label=minzip
+[bundle-href]: https://bundlephobia.com/result?p=@hairy/vue-lib
+[license-src]: https://img.shields.io/github/license/hairyf/hairylib.svg?style=flat&colorA=080f12&colorB=1fa669
+[license-href]: https://github.com/hairyf/hairylib/blob/main/LICENSE
+[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
+[jsdocs-href]: https://www.jsdocs.io/package/@hairy/vue-lib

package/dist/index.cjs

@@ -28,24 +28,24 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   CollapseTransition: () => CollapseTransition,
   Field: () => Field,
   ehr: () => ehr,
   propertyToRef: () => propertyToRef,
   syncElementSize: () => syncElementSize,
   syncElementSyncScroll: () => syncElementSyncScroll,
-  useCheckedState: () => useCheckedState,
+  useChecked: () => useChecked,
   useSelectedMultiple: () => useSelectedMultiple,
   useSelectedSingle: () => useSelectedSingle,
   useServerPagination: () => useServerPagination
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/components/CollapseTransition.ts
+var import_css_render = __toESM(require("css-render"), 1);
 var import_vue_demi = require("vue-demi");
-var import_css_render = __toESM(require("css-render"));
 var { c } = (0, import_css_render.default)();
 var CollapseTransition = (0, import_vue_demi.defineComponent)({
   name: "CollapseTransition",
@@ -132,10 +132,10 @@ var Field = (0, import_vue_demi2.defineComponent)({
   }
 });
 
-// src/composition/syncElementScroll/index.ts
+// src/hooks/syncElementScroll/index.ts
 var import_core = require("@vueuse/core");
-var import_throttle = __toESM(require("lodash/throttle"));
-var import_debounce = __toESM(require("lodash/debounce"));
+var import_debounce = __toESM(require("lodash/debounce"), 1);
+var import_throttle = __toESM(require("lodash/throttle"), 1);
 var import_vue = require("vue");
 function syncElementSyncScroll(fromTarget, toTarget, options = {}) {
   const { left = true, top = true, wait, immediate = true } = options;
@@ -173,7 +173,7 @@ function syncElementSyncScroll(fromTarget, toTarget, options = {}) {
       options2.top = aElement.scrollTop;
     if (!aElement || !bElement)
       return;
-    bElement == null ? void 0 : bElement.scroll(options2);
+    bElement?.scroll(options2);
     offChangeLockScrollListener(opposite);
   };
   const syncFromTo = () => syncScroll("from");
@@ -181,8 +181,8 @@ function syncElementSyncScroll(fromTarget, toTarget, options = {}) {
   let toStopHandle;
   let formStopHandle;
   const stop = () => {
-    toStopHandle == null ? void 0 : toStopHandle();
-    formStopHandle == null ? void 0 : formStopHandle();
+    toStopHandle?.();
+    formStopHandle?.();
   };
   const start = () => {
     toStopHandle = (0, import_core.useEventListener)(fromTarget, "scroll", (0, import_throttle.default)(syncFromTo, wait));
@@ -193,7 +193,7 @@ function syncElementSyncScroll(fromTarget, toTarget, options = {}) {
   return { stop, start, syncFromTo, syncToFrom };
 }
 
-// src/composition/syncElementSize/index.ts
+// src/hooks/syncElementSize/index.ts
 var import_utils = require("@hairy/utils");
 var import_core2 = require("@vueuse/core");
 var import_vue2 = require("vue");
@@ -214,8 +214,8 @@ function syncElementSize(fromTarget, toTarget, options = {}) {
     return (0, import_vue2.watch)(sources, callback, { immediate: true, ...options });
   };
   const stop = () => {
-    widthStopHandle == null ? void 0 : widthStopHandle();
-    heightStopHandle == null ? void 0 : heightStopHandle();
+    widthStopHandle?.();
+    heightStopHandle?.();
     const element = (0, import_core2.unrefElement)(toTarget);
     element.style.width = defaultSize.width;
     element.style.height = defaultSize.height;
@@ -238,9 +238,9 @@ function syncElementSize(fromTarget, toTarget, options = {}) {
   return { start, stop };
 }
 
-// src/composition/useCheckedState/index.ts
+// src/hooks/useChecked/index.ts
 var import_vue3 = require("vue");
-function useCheckedState(target, checked = true, unchecked = false) {
+function useChecked(target, checked = true, unchecked = false) {
   return (0, import_vue3.computed)({
     get: () => target.value === (0, import_vue3.unref)(checked),
     set: (_value) => {
@@ -249,10 +249,10 @@ function useCheckedState(target, checked = true, unchecked = false) {
   });
 }
 
-// src/composition/usePaginationServer/index.ts
+// src/hooks/usePaginationServer/index.ts
 var import_core3 = require("@vueuse/core");
+var import_debounce2 = __toESM(require("lodash/debounce"), 1);
 var import_vue4 = require("vue");
-var import_debounce2 = __toESM(require("lodash/debounce"));
 function useServerPagination(options) {
   const total = (0, import_vue4.ref)(Infinity);
   const pagination = (0, import_core3.useOffsetPagination)({ total, ...options });
@@ -296,12 +296,12 @@ function useServerPagination(options) {
   };
 }
 
-// src/composition/useSelectedMultiple/index.ts
+// src/hooks/useSelectedMultiple/index.ts
 var import_vue6 = require("vue");
 
-// src/composition/utils/extendSelected.ts
-var import_vue5 = require("vue");
+// src/hooks/utils/extendSelected.ts
 var import_core4 = require("@vueuse/core");
+var import_vue5 = require("vue");
 function extendSelected(array, fieldName) {
   (0, import_vue5.watch)(
     array,
@@ -315,18 +315,15 @@ function extendSelected(array, fieldName) {
   );
 }
 
-// src/composition/useSelectedMultiple/index.ts
+// src/hooks/useSelectedMultiple/index.ts
 function useSelectedMultiple(array, options = {}) {
   const { fieldName = "select", disabled } = options;
   extendSelected(array, fieldName);
   const selected = (0, import_vue6.computed)(() => (0, import_vue6.unref)(array).filter((item) => item[fieldName]));
   const isSelectedAll = (0, import_vue6.computed)({
-    get: () => {
-      var _a;
-      return !((_a = selected.value) == null ? void 0 : _a.length) && !(0, import_vue6.unref)(array).some((item) => !item[fieldName]);
-    },
+    get: () => !selected.value?.length && !(0, import_vue6.unref)(array).some((item) => !item[fieldName]),
     set: (value) => (0, import_vue6.unref)(array).forEach((item, index) => {
-      if (!(disabled == null ? void 0 : disabled(item, index)))
+      if (!disabled?.(item, index))
         item[fieldName] = value;
     })
   });
@@ -338,12 +335,11 @@ function useSelectedMultiple(array, options = {}) {
   return { selected, isSelectedAll, isSelected, isIndeterminate };
 }
 
-// src/composition/useSelectedSingle/index.ts
+// src/hooks/useSelectedSingle/index.ts
 var import_vue7 = require("vue");
 function useSelectedSingle(array, options = {}) {
-  var _a, _b;
-  const fieldName = (_a = options.fieldName) != null ? _a : "select";
-  const required = (_b = options.required) != null ? _b : false;
+  const fieldName = options.fieldName ?? "select";
+  const required = options.required ?? false;
   extendSelected(array, fieldName);
   const SELECTED_SINGLE_KEY = "selected_single_key";
   const isLocked = (0, import_vue7.ref)(false);
@@ -419,7 +415,7 @@ function propertyToRef(data, prop) {
   propertyToRef,
   syncElementSize,
   syncElementSyncScroll,
-  useCheckedState,
+  useChecked,
   useSelectedMultiple,
   useSelectedSingle,
   useServerPagination

package/dist/index.d.ts

@@ -1,181 +1,175 @@
-import * as vue_demi from 'vue-demi';
 import { DefineComponent, PropType, VNode, Component, FunctionalComponent } from 'vue-demi';
-import { MaybeRef, MaybeElementRef, UseOffsetPaginationReturn, UseOffsetPaginationOptions } from '@vueuse/core';
 import * as vue from 'vue';
 import { WatchOptions, Ref, UnwrapRef, ComputedRef } from 'vue';
+import { MaybeRef, MaybeElementRef, UseOffsetPaginationReturn, UseOffsetPaginationOptions } from '@vueuse/core';
+import { Noop } from '@hairy/utils';
 import { DebouncedFunc } from 'lodash';
 
 declare const CollapseTransition: DefineComponent;
 
-declare const Field: vue_demi.DefineComponent<vue_demi.ExtractPropTypes<{
-    is: {
-        type: PropType<string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-            [key: string]: any;
-        }> | Component<any, any, any, vue_demi.ComputedOptions, vue_demi.MethodOptions, {}, any>>;
-        default: string;
-    };
-}>, () => string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-    [key: string]: any;
-}> | null, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{
-    is: {
-        type: PropType<string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-            [key: string]: any;
-        }> | Component<any, any, any, vue_demi.ComputedOptions, vue_demi.MethodOptions, {}, any>>;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    is: string | number | VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
-        [key: string]: any;
-    }> | Component<any, any, any, vue_demi.ComputedOptions, vue_demi.MethodOptions, {}, any>;
-}, {}, {}, {}, string, vue_demi.ComponentProvideOptions, true, {}, any>;
+declare const Field: vue.DefineComponent<vue.ExtractPropTypes<{
+    is: {
+        type: PropType<string | number | VNode | Component>;
+        default: string;
+    };
+}>, () => string | number | VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    is: {
+        type: PropType<string | number | VNode | Component>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    is: string | number | VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }> | Component;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-interface SyncElementSyncScrollOptions {
-    left?: boolean;
-    top?: boolean;
-    wait?: number;
-    immediate?: boolean;
-}
-/**
- * 同步两个具有相同滚动条的DOM的滚动
- * @param fromTarget DOM-A
- * @param toTarget DOM-B
- * @param options
- * @todo 优化 useEventListener 复用
- * @todo 使用 wait 可能存在 BUG
- */
-declare function syncElementSyncScroll(fromTarget: MaybeRef<EventTarget | null | undefined>, toTarget: MaybeRef<EventTarget | null | undefined>, options?: SyncElementSyncScrollOptions): {
-    stop: () => void;
-    start: () => void;
-    syncFromTo: () => void;
-    syncToFrom: () => void;
+interface SyncElementSyncScrollOptions {
+    left?: boolean;
+    top?: boolean;
+    wait?: number;
+    immediate?: boolean;
+}
+/**
+ * Synchronize scrolling between two DOM with the same scrollbar
+ * @param fromTarget DOM-A
+ * @param toTarget DOM-B
+ * @param options
+ * @todo optimizes the reuse of useEventListener
+ * @todo may have bugs when using wait
+ */
+declare function syncElementSyncScroll(fromTarget: MaybeRef<EventTarget | null | undefined>, toTarget: MaybeRef<EventTarget | null | undefined>, options?: SyncElementSyncScrollOptions): {
+    stop: () => void;
+    start: () => void;
+    syncFromTo: () => void;
+    syncToFrom: () => void;
 };
 
-interface SyncElementSizeOptions extends WatchOptions {
-    /** 是否开启宽度 @default true */
-    width?: boolean;
-    /** 是否开启高度 @default true */
-    height?: boolean;
-}
-interface SyncElementSizeReturn {
-    start?: Function;
-    stop?: Function;
-}
-/**
- * 同步 from DOM 的宽或高到指定的 to DOM
- * @param fromTarget 宽高来源元素
- * @param toTarget 宽高设置元素
- * @param options
- */
+interface SyncElementSizeOptions extends WatchOptions {
+    /** Is the width enabled @default true */
+    width?: boolean;
+    /** Is the height enabled @default true */
+    height?: boolean;
+}
+interface SyncElementSizeReturn {
+    start?: Noop;
+    stop?: Noop;
+}
+/**
+ * Synchronize the width or height of from DOM to the specified to DOM
+ * @param fromTarget width and height source element
+ * @param toTarget width and height setting elements
+ * @param options
+ */
 declare function syncElementSize(fromTarget: MaybeElementRef, toTarget: MaybeElementRef, options?: SyncElementSizeOptions): SyncElementSizeReturn;
 
-type CheckedState = string | boolean | number | symbol;
-/**
- * 获取 checked 的状态，自定义设置 checked | unchecked 的值
- * @param target
- * @param checked
- * @param unchecked
- * @returns
- */
-declare function useCheckedState(target: Ref<any>, checked?: MaybeRef<CheckedState>, unchecked?: MaybeRef<CheckedState>): vue.WritableComputedRef<boolean, boolean>;
+type CheckedState = string | boolean | number | symbol;
+/**
+ * Get the status of checked and customize the value of checked | unchecked
+ * @param target
+ * @param checked
+ * @param unchecked
+ */
+declare function useChecked(target: Ref<any>, checked?: MaybeRef<CheckedState>, unchecked?: MaybeRef<CheckedState>): vue.WritableComputedRef<boolean, boolean>;
 
-type UseServerPaginationResolve = UnwrapRef<Pick<UseOffsetPaginationReturn, 'currentPage' | 'currentPageSize'> & {
-    total: number;
-}>;
-type UseServerPagination = UnwrapRef<Omit<UseOffsetPaginationReturn, 'next' | 'prev'> & {
-    total: Ref<number>;
-}>;
-interface UseServerPaginationOptions<T> extends UseOffsetPaginationOptions, WatchOptions {
-    resolve: (pagination: UseServerPaginationResolve) => T | Promise<T>;
-    /** 监听源, 当源数据改变触发 reset, 默认监听 pagination */
-    sources?: any[];
-}
-interface UseServerPaginationReturn<T> {
-    state: Ref<T>;
-    loading: Ref<boolean>;
-    error: Ref<any>;
-    pagination: UseServerPagination;
-    next: () => void;
-    prev: () => void;
-    execute: DebouncedFunc<() => Promise<void>>;
-}
+type UseServerPaginationResolve = UnwrapRef<Pick<UseOffsetPaginationReturn, 'currentPage' | 'currentPageSize'> & {
+    total: number;
+}>;
+type UseServerPagination = UnwrapRef<Omit<UseOffsetPaginationReturn, 'next' | 'prev'> & {
+    total: Ref<number>;
+}>;
+interface UseServerPaginationOptions<T> extends UseOffsetPaginationOptions, WatchOptions {
+    resolve: (pagination: UseServerPaginationResolve) => T | Promise<T>;
+    /** Monitor the source, trigger reset when the source data changes, default to monitoring page generation */
+    sources?: any[];
+}
+interface UseServerPaginationReturn<T> {
+    state: Ref<T>;
+    loading: Ref<boolean>;
+    error: Ref<any>;
+    pagination: UseServerPagination;
+    next: () => void;
+    prev: () => void;
+    execute: DebouncedFunc<() => Promise<void>>;
+}
 declare function useServerPagination<T extends any[]>(options: UseServerPaginationOptions<T>): UseServerPaginationReturn<T>;
 
-type SelectedMultipleArray = MaybeRef<{
-    [key: string]: any;
-}[]>;
-interface SelectedMultipleOptions<T extends SelectedMultipleArray> {
-    /**
-     * 选择字段
-     *
-     * @default 'select'
-     */
-    fieldName?: string;
-    /**
-     * 处理禁用, 在 isSelectAll 更改时生效
-     */
-    disabled?: (item: UnwrapRef<T>[number], index: number) => boolean | void;
-}
-interface SelectedMultipleResult<T extends SelectedMultipleArray> {
-    /**
-     * 当前选中的所有项
-     */
-    selected: ComputedRef<UnwrapRef<T>>;
-    /**
-     * 当前是否全选, 更改后将影响列表的选择
-     */
-    isSelectedAll: Ref<boolean>;
-    /**
-     * 是否选择
-     */
-    isSelected: ComputedRef<boolean>;
-    /**
-     * 选中，但没有完全选完（一般用于 checkbox 组件）
-     */
-    isIndeterminate: ComputedRef<boolean>;
-}
+type SelectedMultipleArray = MaybeRef<{
+    [key: string]: any;
+}[]>;
+interface SelectedMultipleOptions<T extends SelectedMultipleArray> {
+    /**
+     * Select Field
+     *
+     * @default 'select'
+     */
+    fieldName?: string;
+    /**
+     * Processing disabled, takes effect when isSelectAll is changed
+     */
+    disabled?: (item: UnwrapRef<T>[number], index: number) => boolean | void;
+}
+interface SelectedMultipleResult<T extends SelectedMultipleArray> {
+    /**
+     * All currently selected items
+     */
+    selected: ComputedRef<UnwrapRef<T>>;
+    /**
+     * Is it currently all selected, Changing it will affect the selection of the list
+     */
+    isSelectedAll: Ref<boolean>;
+    /**
+     * Whether to choose
+     */
+    isSelected: ComputedRef<boolean>;
+    /**
+     * Selected, but not fully selected (usually used for checkbox components)
+     */
+    isIndeterminate: ComputedRef<boolean>;
+}
 declare function useSelectedMultiple<T extends SelectedMultipleArray>(array: T, options?: SelectedMultipleOptions<T>): SelectedMultipleResult<T>;
 
-type SelectedSingleArray = MaybeRef<{
-    [key: string]: any;
-}[]>;
-interface SelectedSingleOptions {
-    /**
-     * 选择字段
-     *
-     * @default 'select'
-     */
-    fieldName?: string;
-    /**
-     * 是否必选, 必选项是哪项
-     * @default false
-     *
-     */
-    required?: true | number;
-}
-interface SelectedSingleResult<T extends SelectedSingleArray> {
-    /**
-     * 当前选中项
-     */
-    selected: ComputedRef<UnwrapRef<T>[number] | undefined>;
-    /**
-     * 是否已经选择
-     */
-    isSelected: ComputedRef<boolean>;
-}
+type SelectedSingleArray = MaybeRef<{
+    [key: string]: any;
+}[]>;
+interface SelectedSingleOptions {
+    /**
+     * Select Field
+     *
+     * @default 'select'
+     */
+    fieldName?: string;
+    /**
+     * Is it mandatory, What is the mandatory option
+     * @default false
+     *
+     */
+    required?: true | number;
+}
+interface SelectedSingleResult<T extends SelectedSingleArray> {
+    /**
+     * 当前选中项
+     */
+    selected: ComputedRef<UnwrapRef<T>[number] | undefined>;
+    /**
+     * 是否已经选择
+     */
+    isSelected: ComputedRef<boolean>;
+}
 declare function useSelectedSingle<T extends SelectedSingleArray>(array: T, options?: SelectedSingleOptions): SelectedSingleResult<T>;
 
-/**
- * 直接渲染传入的组件（function component）
- * @param component
- * @param tag 渲染的容器（默认 div）
- */
-declare function ehr<K extends keyof HTMLElementTagNameMap = 'div'>(component: FunctionalComponent, tag?: K): HTMLElementTagNameMap[K];
-/**
- * 将对象的属性转换为 ref
- * @param data
- * @param prop
- * @returns
- */
-declare function propertyToRef<T>(data: T, prop: keyof T): vue_demi.WritableComputedRef<T[keyof T], T[keyof T]>;
+/**
+ * Directly render the incoming function components
+ * @param component
+ * @param tag Rendering container (default div)
+ */
+declare function ehr<K extends keyof HTMLElementTagNameMap = 'div'>(component: FunctionalComponent, tag?: K): HTMLElementTagNameMap[K];
+/**
+ * Convert the properties of an object to ref
+ * @param data
+ * @param prop
+ */
+declare function propertyToRef<T>(data: T, prop: keyof T): vue.WritableComputedRef<T[keyof T], T[keyof T]>;
 
-export { CheckedState, CollapseTransition, Field, SelectedMultipleArray, SelectedMultipleOptions, SelectedMultipleResult, SelectedSingleArray, SelectedSingleOptions, SelectedSingleResult, SyncElementSizeOptions, SyncElementSizeReturn, UseServerPagination, UseServerPaginationOptions, UseServerPaginationResolve, UseServerPaginationReturn, ehr, propertyToRef, syncElementSize, syncElementSyncScroll, useCheckedState, useSelectedMultiple, useSelectedSingle, useServerPagination };
+export { type CheckedState, CollapseTransition, Field, type SelectedMultipleArray, type SelectedMultipleOptions, type SelectedMultipleResult, type SelectedSingleArray, type SelectedSingleOptions, type SelectedSingleResult, type SyncElementSizeOptions, type SyncElementSizeReturn, type UseServerPagination, type UseServerPaginationOptions, type UseServerPaginationResolve, type UseServerPaginationReturn, ehr, propertyToRef, syncElementSize, syncElementSyncScroll, useChecked, useSelectedMultiple, useSelectedSingle, useServerPagination };