@hairy/vue-lib 1.3.16

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2019-PRESENT Hairyf<https://github.com/hairyf>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+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/dist/index.cjs

@@ -0,0 +1,426 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CollapseTransition: () => CollapseTransition,
+  Field: () => Field,
+  ehr: () => ehr,
+  propertyToRef: () => propertyToRef,
+  syncElementSize: () => syncElementSize,
+  syncElementSyncScroll: () => syncElementSyncScroll,
+  useCheckedState: () => useCheckedState,
+  useSelectedMultiple: () => useSelectedMultiple,
+  useSelectedSingle: () => useSelectedSingle,
+  useServerPagination: () => useServerPagination
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/CollapseTransition.ts
+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",
+  setup(_, { slots }) {
+    const on = {
+      onBeforeEnter(el) {
+        el.classList.add("collapse-transition");
+        if (!el.dataset)
+          el.dataset = {};
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+        el.style.height = "0";
+        el.style.paddingTop = "0";
+        el.style.paddingBottom = "0";
+      },
+      onEnter(el) {
+        el.dataset.oldOverflow = el.style.overflow;
+        if (el.scrollHeight !== 0) {
+          el.style.height = `${el.scrollHeight}px`;
+          el.style.paddingTop = el.dataset.oldPaddingTop || "0";
+          el.style.paddingBottom = el.dataset.oldPaddingBottom || "0";
+        } else {
+          el.style.height = "";
+          el.style.paddingTop = el.dataset.oldPaddingTop || "0";
+          el.style.paddingBottom = el.dataset.oldPaddingBottom || "0";
+        }
+        el.style.overflow = "hidden";
+      },
+      onAfterEnter(el) {
+        el.classList.remove("collapse-transition");
+        el.style.height = "";
+        el.style.overflow = el.dataset.oldOverflow || "0";
+      },
+      onBeforeLeave(el) {
+        if (!el.dataset)
+          el.dataset = {};
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+        el.dataset.oldOverflow = el.style.overflow;
+        el.style.height = `${el.scrollHeight}px`;
+        el.style.overflow = "hidden";
+      },
+      onLeave(el) {
+        if (el.scrollHeight !== 0) {
+          el.classList.add("collapse-transition");
+          el.style.transitionProperty = "height";
+          el.style.height = "0";
+          el.style.paddingTop = "0";
+          el.style.paddingBottom = "0";
+        }
+      },
+      onAfterLeave(el) {
+        el.classList.remove("collapse-transition");
+        el.style.height = "";
+        el.style.overflow = el.dataset.oldOverflow || "0";
+        el.style.paddingTop = el.dataset.oldPaddingTop || "0";
+        el.style.paddingBottom = el.dataset.oldPaddingBottom || "0";
+      }
+    };
+    style.mount();
+    return () => (0, import_vue_demi.h)(import_vue_demi.Transition, on, slots);
+  }
+});
+var style = c(".collapse-transition", {
+  transition: "0.2s height ease-in-out, 0.2s padding-top ease-in-out,0.2s padding-bottom ease-in-out"
+});
+
+// src/components/Field.ts
+var import_vue_demi2 = require("vue-demi");
+var Field = (0, import_vue_demi2.defineComponent)({
+  name: "Field",
+  props: {
+    is: {
+      type: [String, Number, Object],
+      default: ""
+    }
+  },
+  setup(props) {
+    return () => {
+      if (typeof props.is === "string" || typeof props.is === "number")
+        return props.is;
+      return props.is ? (0, import_vue_demi2.h)(props.is) : null;
+    };
+  }
+});
+
+// src/composition/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_vue = require("vue");
+function syncElementSyncScroll(fromTarget, toTarget, options = {}) {
+  const { left = true, top = true, wait, immediate = true } = options;
+  const debounceScrollLocks = (0, import_vue.reactive)({ from: false, to: false });
+  const onChangeLockScrollListener = (0, import_debounce.default)(
+    (type) => {
+      debounceScrollLocks[type] = true;
+    },
+    20,
+    { leading: true, trailing: false }
+  );
+  const offChangeLockScrollListener = (0, import_debounce.default)(
+    (type) => {
+      debounceScrollLocks[type] = false;
+    },
+    20,
+    { leading: false, trailing: true }
+  );
+  const syncScroll = (type) => {
+    const positive = type;
+    const opposite = type === "from" ? "to" : "from";
+    const elements = (0, import_vue.reactive)({
+      from: fromTarget,
+      to: toTarget
+    });
+    if (debounceScrollLocks[type])
+      return;
+    onChangeLockScrollListener(opposite);
+    const aElement = elements[positive];
+    const bElement = elements[opposite];
+    const options2 = {};
+    if (left)
+      options2.left = aElement.scrollLeft;
+    if (top)
+      options2.top = aElement.scrollTop;
+    if (!aElement || !bElement)
+      return;
+    bElement == null ? void 0 : bElement.scroll(options2);
+    offChangeLockScrollListener(opposite);
+  };
+  const syncFromTo = () => syncScroll("from");
+  const syncToFrom = () => syncScroll("to");
+  let toStopHandle;
+  let formStopHandle;
+  const stop = () => {
+    toStopHandle == null ? void 0 : toStopHandle();
+    formStopHandle == null ? void 0 : formStopHandle();
+  };
+  const start = () => {
+    toStopHandle = (0, import_core.useEventListener)(fromTarget, "scroll", (0, import_throttle.default)(syncFromTo, wait));
+    formStopHandle = (0, import_core.useEventListener)(toTarget, "scroll", (0, import_throttle.default)(syncToFrom, wait));
+  };
+  if (immediate)
+    start();
+  return { stop, start, syncFromTo, syncToFrom };
+}
+
+// src/composition/syncElementSize/index.ts
+var import_utils = require("@hairy/utils");
+var import_core2 = require("@vueuse/core");
+var import_vue2 = require("vue");
+function syncElementSize(fromTarget, toTarget, options = {}) {
+  const { width: isOnWidth = true, height: isOnHeight = false } = options;
+  const defaultSize = { width: "", height: "" };
+  const fromSize = (0, import_core2.useElementSize)(fromTarget);
+  let widthStopHandle;
+  let heightStopHandle;
+  const sync = (type) => {
+    const sources = [fromSize[type], toTarget];
+    const callback = () => {
+      const element = (0, import_core2.unrefElement)(toTarget);
+      if (!element)
+        return void 0;
+      element.style[type] = (0, import_utils.formatUnit)(fromSize[type].value);
+    };
+    return (0, import_vue2.watch)(sources, callback, { immediate: true, ...options });
+  };
+  const stop = () => {
+    widthStopHandle == null ? void 0 : widthStopHandle();
+    heightStopHandle == null ? void 0 : heightStopHandle();
+    const element = (0, import_core2.unrefElement)(toTarget);
+    element.style.width = defaultSize.width;
+    element.style.height = defaultSize.height;
+  };
+  const start = () => {
+    if (isOnWidth)
+      widthStopHandle = sync("width");
+    if (isOnHeight)
+      heightStopHandle = sync("height");
+  };
+  (0, import_vue2.watch)(
+    () => (0, import_vue2.unref)(toTarget),
+    () => {
+      const element = (0, import_core2.unrefElement)(toTarget);
+      defaultSize.width = element.style.width;
+      defaultSize.height = element.style.height;
+    }
+  );
+  start();
+  return { start, stop };
+}
+
+// src/composition/useCheckedState/index.ts
+var import_vue3 = require("vue");
+function useCheckedState(target, checked = true, unchecked = false) {
+  return (0, import_vue3.computed)({
+    get: () => target.value === (0, import_vue3.unref)(checked),
+    set: (_value) => {
+      target.value = _value ? (0, import_vue3.unref)(checked) : (0, import_vue3.unref)(unchecked);
+    }
+  });
+}
+
+// src/composition/usePaginationServer/index.ts
+var import_core3 = require("@vueuse/core");
+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 });
+  const resolveOptions = (0, import_vue4.reactive)({
+    currentPage: pagination.currentPage,
+    currentPageSize: pagination.currentPageSize,
+    total
+  });
+  const paginationRef = (0, import_vue4.reactive)({
+    currentPage: pagination.currentPage,
+    currentPageSize: pagination.currentPageSize,
+    pageCount: pagination.pageCount,
+    isFirstPage: pagination.isFirstPage,
+    isLastPage: pagination.isLastPage,
+    total
+  });
+  const state = (0, import_vue4.ref)([]);
+  const {
+    execute: _execute,
+    isLoading: loading,
+    error
+  } = (0, import_core3.useAsyncState)(async () => {
+    const resolved = await options.resolve(resolveOptions);
+    return resolved;
+  }, []);
+  const execute = (0, import_debounce2.default)(async () => {
+    state.value = await _execute();
+  }, 100);
+  (0, import_vue4.nextTick)(() => {
+    (0, import_vue4.watch)([pagination.currentPageSize, ...options.sources || []], execute, { immediate: true, ...options });
+    (0, import_vue4.watch)(pagination.currentPage, (newValue, oldValue) => newValue !== oldValue && execute());
+  });
+  return {
+    state,
+    loading,
+    error,
+    execute,
+    pagination: paginationRef,
+    next: pagination.next,
+    prev: pagination.prev
+  };
+}
+
+// src/composition/useSelectedMultiple/index.ts
+var import_vue6 = require("vue");
+
+// src/composition/utils/extendSelected.ts
+var import_vue5 = require("vue");
+var import_core4 = require("@vueuse/core");
+function extendSelected(array, fieldName) {
+  (0, import_vue5.watch)(
+    array,
+    (items) => {
+      for (const item of items) {
+        if (typeof item[fieldName] === "undefined")
+          (0, import_core4.extendRef)(item, { [fieldName]: (0, import_vue5.ref)(false) });
+      }
+    },
+    { immediate: true, flush: "sync" }
+  );
+}
+
+// src/composition/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]);
+    },
+    set: (value) => (0, import_vue6.unref)(array).forEach((item, index) => {
+      if (!(disabled == null ? void 0 : disabled(item, index)))
+        item[fieldName] = value;
+    })
+  });
+  const isSelected = (0, import_vue6.computed)(() => !!(0, import_vue6.unref)(array).some((item) => item[fieldName]));
+  const isIndeterminate = (0, import_vue6.computed)(() => {
+    const selectCount = selected.value.length;
+    return selectCount > 0 && selectCount < (0, import_vue6.unref)(array).length;
+  });
+  return { selected, isSelectedAll, isSelected, isIndeterminate };
+}
+
+// src/composition/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;
+  extendSelected(array, fieldName);
+  const SELECTED_SINGLE_KEY = "selected_single_key";
+  const isLocked = (0, import_vue7.ref)(false);
+  const isSelected = (0, import_vue7.computed)(() => !!(0, import_vue7.unref)(array).some((item) => item.select));
+  if (required) {
+    const recover = (bool) => {
+      const index = required === true ? 0 : required;
+      if (!bool && (0, import_vue7.unref)(array).length > 0)
+        (0, import_vue7.unref)(array)[index][fieldName] = true;
+    };
+    (0, import_vue7.watch)(isSelected, recover, { flush: "sync", immediate: true });
+  }
+  const itemChange = (neglect) => {
+    if (isLocked.value)
+      return;
+    isLocked.value = true;
+    const _array = (0, import_vue7.unref)(array);
+    const _value = !_array[neglect][fieldName];
+    if (required && !_value)
+      _array[neglect][fieldName] = true;
+    _array.forEach((target, index) => {
+      if (neglect === index)
+        return void 0;
+      if (!target[fieldName])
+        return void 0;
+      target[fieldName] = false;
+    });
+    isLocked.value = false;
+  };
+  const targetEffect = (target, index) => {
+    if (!target[SELECTED_SINGLE_KEY]) {
+      return (0, import_vue7.watch)(
+        () => target[fieldName],
+        () => itemChange(index),
+        { flush: "sync" }
+      );
+    }
+    Object.defineProperty(target, SELECTED_SINGLE_KEY, { value: true });
+  };
+  (0, import_vue7.watch)(
+    array,
+    () => {
+      (0, import_vue7.unref)(array).forEach(targetEffect);
+    },
+    { immediate: true, flush: "sync" }
+  );
+  const selected = (0, import_vue7.computed)(() => (0, import_vue7.unref)(array).find((v) => v[fieldName]));
+  return { selected, isSelected };
+}
+
+// src/utils/index.ts
+var import_vue_demi3 = require("vue-demi");
+function ehr(component, tag) {
+  const container = document.createElement(tag || "dev");
+  (0, import_vue_demi3.render)((0, import_vue_demi3.h)(component), container);
+  return container;
+}
+function propertyToRef(data, prop) {
+  return (0, import_vue_demi3.computed)({
+    get() {
+      return data[prop];
+    },
+    set(v) {
+      data[prop] = v;
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CollapseTransition,
+  Field,
+  ehr,
+  propertyToRef,
+  syncElementSize,
+  syncElementSyncScroll,
+  useCheckedState,
+  useSelectedMultiple,
+  useSelectedSingle,
+  useServerPagination
+});

package/dist/index.d.ts

@@ -0,0 +1,181 @@
+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 { 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>;
+
+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 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
+ */
+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 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>>;
+}
+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>;
+}
+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>;
+}
+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]>;
+
+export { CheckedState, CollapseTransition, Field, SelectedMultipleArray, SelectedMultipleOptions, SelectedMultipleResult, SelectedSingleArray, SelectedSingleOptions, SelectedSingleResult, SyncElementSizeOptions, SyncElementSizeReturn, UseServerPagination, UseServerPaginationOptions, UseServerPaginationResolve, UseServerPaginationReturn, ehr, propertyToRef, syncElementSize, syncElementSyncScroll, useCheckedState, useSelectedMultiple, useSelectedSingle, useServerPagination };

package/dist/index.mjs

@@ -0,0 +1,380 @@
+// src/components/CollapseTransition.ts
+import { Transition, defineComponent, h } from "vue-demi";
+import CssRender from "css-render";
+var { c } = CssRender();
+var CollapseTransition = defineComponent({
+  name: "CollapseTransition",
+  setup(_, { slots }) {
+    const on = {
+      onBeforeEnter(el) {
+        el.classList.add("collapse-transition");
+        if (!el.dataset)
+          el.dataset = {};
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+        el.style.height = "0";
+        el.style.paddingTop = "0";
+        el.style.paddingBottom = "0";
+      },
+      onEnter(el) {
+        el.dataset.oldOverflow = el.style.overflow;
+        if (el.scrollHeight !== 0) {
+          el.style.height = `${el.scrollHeight}px`;
+          el.style.paddingTop = el.dataset.oldPaddingTop || "0";
+          el.style.paddingBottom = el.dataset.oldPaddingBottom || "0";
+        } else {
+          el.style.height = "";
+          el.style.paddingTop = el.dataset.oldPaddingTop || "0";
+          el.style.paddingBottom = el.dataset.oldPaddingBottom || "0";
+        }
+        el.style.overflow = "hidden";
+      },
+      onAfterEnter(el) {
+        el.classList.remove("collapse-transition");
+        el.style.height = "";
+        el.style.overflow = el.dataset.oldOverflow || "0";
+      },
+      onBeforeLeave(el) {
+        if (!el.dataset)
+          el.dataset = {};
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+        el.dataset.oldOverflow = el.style.overflow;
+        el.style.height = `${el.scrollHeight}px`;
+        el.style.overflow = "hidden";
+      },
+      onLeave(el) {
+        if (el.scrollHeight !== 0) {
+          el.classList.add("collapse-transition");
+          el.style.transitionProperty = "height";
+          el.style.height = "0";
+          el.style.paddingTop = "0";
+          el.style.paddingBottom = "0";
+        }
+      },
+      onAfterLeave(el) {
+        el.classList.remove("collapse-transition");
+        el.style.height = "";
+        el.style.overflow = el.dataset.oldOverflow || "0";
+        el.style.paddingTop = el.dataset.oldPaddingTop || "0";
+        el.style.paddingBottom = el.dataset.oldPaddingBottom || "0";
+      }
+    };
+    style.mount();
+    return () => h(Transition, on, slots);
+  }
+});
+var style = c(".collapse-transition", {
+  transition: "0.2s height ease-in-out, 0.2s padding-top ease-in-out,0.2s padding-bottom ease-in-out"
+});
+
+// src/components/Field.ts
+import { defineComponent as defineComponent2, h as h2 } from "vue-demi";
+var Field = defineComponent2({
+  name: "Field",
+  props: {
+    is: {
+      type: [String, Number, Object],
+      default: ""
+    }
+  },
+  setup(props) {
+    return () => {
+      if (typeof props.is === "string" || typeof props.is === "number")
+        return props.is;
+      return props.is ? h2(props.is) : null;
+    };
+  }
+});
+
+// src/composition/syncElementScroll/index.ts
+import { useEventListener } from "@vueuse/core";
+import throttle from "lodash/throttle";
+import debounce from "lodash/debounce";
+import { reactive } from "vue";
+function syncElementSyncScroll(fromTarget, toTarget, options = {}) {
+  const { left = true, top = true, wait, immediate = true } = options;
+  const debounceScrollLocks = reactive({ from: false, to: false });
+  const onChangeLockScrollListener = debounce(
+    (type) => {
+      debounceScrollLocks[type] = true;
+    },
+    20,
+    { leading: true, trailing: false }
+  );
+  const offChangeLockScrollListener = debounce(
+    (type) => {
+      debounceScrollLocks[type] = false;
+    },
+    20,
+    { leading: false, trailing: true }
+  );
+  const syncScroll = (type) => {
+    const positive = type;
+    const opposite = type === "from" ? "to" : "from";
+    const elements = reactive({
+      from: fromTarget,
+      to: toTarget
+    });
+    if (debounceScrollLocks[type])
+      return;
+    onChangeLockScrollListener(opposite);
+    const aElement = elements[positive];
+    const bElement = elements[opposite];
+    const options2 = {};
+    if (left)
+      options2.left = aElement.scrollLeft;
+    if (top)
+      options2.top = aElement.scrollTop;
+    if (!aElement || !bElement)
+      return;
+    bElement == null ? void 0 : bElement.scroll(options2);
+    offChangeLockScrollListener(opposite);
+  };
+  const syncFromTo = () => syncScroll("from");
+  const syncToFrom = () => syncScroll("to");
+  let toStopHandle;
+  let formStopHandle;
+  const stop = () => {
+    toStopHandle == null ? void 0 : toStopHandle();
+    formStopHandle == null ? void 0 : formStopHandle();
+  };
+  const start = () => {
+    toStopHandle = useEventListener(fromTarget, "scroll", throttle(syncFromTo, wait));
+    formStopHandle = useEventListener(toTarget, "scroll", throttle(syncToFrom, wait));
+  };
+  if (immediate)
+    start();
+  return { stop, start, syncFromTo, syncToFrom };
+}
+
+// src/composition/syncElementSize/index.ts
+import { formatUnit } from "@hairy/utils";
+import { unrefElement, useElementSize } from "@vueuse/core";
+import { unref, watch } from "vue";
+function syncElementSize(fromTarget, toTarget, options = {}) {
+  const { width: isOnWidth = true, height: isOnHeight = false } = options;
+  const defaultSize = { width: "", height: "" };
+  const fromSize = useElementSize(fromTarget);
+  let widthStopHandle;
+  let heightStopHandle;
+  const sync = (type) => {
+    const sources = [fromSize[type], toTarget];
+    const callback = () => {
+      const element = unrefElement(toTarget);
+      if (!element)
+        return void 0;
+      element.style[type] = formatUnit(fromSize[type].value);
+    };
+    return watch(sources, callback, { immediate: true, ...options });
+  };
+  const stop = () => {
+    widthStopHandle == null ? void 0 : widthStopHandle();
+    heightStopHandle == null ? void 0 : heightStopHandle();
+    const element = unrefElement(toTarget);
+    element.style.width = defaultSize.width;
+    element.style.height = defaultSize.height;
+  };
+  const start = () => {
+    if (isOnWidth)
+      widthStopHandle = sync("width");
+    if (isOnHeight)
+      heightStopHandle = sync("height");
+  };
+  watch(
+    () => unref(toTarget),
+    () => {
+      const element = unrefElement(toTarget);
+      defaultSize.width = element.style.width;
+      defaultSize.height = element.style.height;
+    }
+  );
+  start();
+  return { start, stop };
+}
+
+// src/composition/useCheckedState/index.ts
+import { computed, unref as unref2 } from "vue";
+function useCheckedState(target, checked = true, unchecked = false) {
+  return computed({
+    get: () => target.value === unref2(checked),
+    set: (_value) => {
+      target.value = _value ? unref2(checked) : unref2(unchecked);
+    }
+  });
+}
+
+// src/composition/usePaginationServer/index.ts
+import { useAsyncState, useOffsetPagination } from "@vueuse/core";
+import { nextTick, reactive as reactive2, ref, watch as watch2 } from "vue";
+import debounce2 from "lodash/debounce";
+function useServerPagination(options) {
+  const total = ref(Infinity);
+  const pagination = useOffsetPagination({ total, ...options });
+  const resolveOptions = reactive2({
+    currentPage: pagination.currentPage,
+    currentPageSize: pagination.currentPageSize,
+    total
+  });
+  const paginationRef = reactive2({
+    currentPage: pagination.currentPage,
+    currentPageSize: pagination.currentPageSize,
+    pageCount: pagination.pageCount,
+    isFirstPage: pagination.isFirstPage,
+    isLastPage: pagination.isLastPage,
+    total
+  });
+  const state = ref([]);
+  const {
+    execute: _execute,
+    isLoading: loading,
+    error
+  } = useAsyncState(async () => {
+    const resolved = await options.resolve(resolveOptions);
+    return resolved;
+  }, []);
+  const execute = debounce2(async () => {
+    state.value = await _execute();
+  }, 100);
+  nextTick(() => {
+    watch2([pagination.currentPageSize, ...options.sources || []], execute, { immediate: true, ...options });
+    watch2(pagination.currentPage, (newValue, oldValue) => newValue !== oldValue && execute());
+  });
+  return {
+    state,
+    loading,
+    error,
+    execute,
+    pagination: paginationRef,
+    next: pagination.next,
+    prev: pagination.prev
+  };
+}
+
+// src/composition/useSelectedMultiple/index.ts
+import { computed as computed2, unref as unref3 } from "vue";
+
+// src/composition/utils/extendSelected.ts
+import { ref as ref2, watch as watch3 } from "vue";
+import { extendRef } from "@vueuse/core";
+function extendSelected(array, fieldName) {
+  watch3(
+    array,
+    (items) => {
+      for (const item of items) {
+        if (typeof item[fieldName] === "undefined")
+          extendRef(item, { [fieldName]: ref2(false) });
+      }
+    },
+    { immediate: true, flush: "sync" }
+  );
+}
+
+// src/composition/useSelectedMultiple/index.ts
+function useSelectedMultiple(array, options = {}) {
+  const { fieldName = "select", disabled } = options;
+  extendSelected(array, fieldName);
+  const selected = computed2(() => unref3(array).filter((item) => item[fieldName]));
+  const isSelectedAll = computed2({
+    get: () => {
+      var _a;
+      return !((_a = selected.value) == null ? void 0 : _a.length) && !unref3(array).some((item) => !item[fieldName]);
+    },
+    set: (value) => unref3(array).forEach((item, index) => {
+      if (!(disabled == null ? void 0 : disabled(item, index)))
+        item[fieldName] = value;
+    })
+  });
+  const isSelected = computed2(() => !!unref3(array).some((item) => item[fieldName]));
+  const isIndeterminate = computed2(() => {
+    const selectCount = selected.value.length;
+    return selectCount > 0 && selectCount < unref3(array).length;
+  });
+  return { selected, isSelectedAll, isSelected, isIndeterminate };
+}
+
+// src/composition/useSelectedSingle/index.ts
+import { computed as computed3, ref as ref3, unref as unref4, watch as watch4 } from "vue";
+function useSelectedSingle(array, options = {}) {
+  var _a, _b;
+  const fieldName = (_a = options.fieldName) != null ? _a : "select";
+  const required = (_b = options.required) != null ? _b : false;
+  extendSelected(array, fieldName);
+  const SELECTED_SINGLE_KEY = "selected_single_key";
+  const isLocked = ref3(false);
+  const isSelected = computed3(() => !!unref4(array).some((item) => item.select));
+  if (required) {
+    const recover = (bool) => {
+      const index = required === true ? 0 : required;
+      if (!bool && unref4(array).length > 0)
+        unref4(array)[index][fieldName] = true;
+    };
+    watch4(isSelected, recover, { flush: "sync", immediate: true });
+  }
+  const itemChange = (neglect) => {
+    if (isLocked.value)
+      return;
+    isLocked.value = true;
+    const _array = unref4(array);
+    const _value = !_array[neglect][fieldName];
+    if (required && !_value)
+      _array[neglect][fieldName] = true;
+    _array.forEach((target, index) => {
+      if (neglect === index)
+        return void 0;
+      if (!target[fieldName])
+        return void 0;
+      target[fieldName] = false;
+    });
+    isLocked.value = false;
+  };
+  const targetEffect = (target, index) => {
+    if (!target[SELECTED_SINGLE_KEY]) {
+      return watch4(
+        () => target[fieldName],
+        () => itemChange(index),
+        { flush: "sync" }
+      );
+    }
+    Object.defineProperty(target, SELECTED_SINGLE_KEY, { value: true });
+  };
+  watch4(
+    array,
+    () => {
+      unref4(array).forEach(targetEffect);
+    },
+    { immediate: true, flush: "sync" }
+  );
+  const selected = computed3(() => unref4(array).find((v) => v[fieldName]));
+  return { selected, isSelected };
+}
+
+// src/utils/index.ts
+import { computed as computed4, h as h3, render } from "vue-demi";
+function ehr(component, tag) {
+  const container = document.createElement(tag || "dev");
+  render(h3(component), container);
+  return container;
+}
+function propertyToRef(data, prop) {
+  return computed4({
+    get() {
+      return data[prop];
+    },
+    set(v) {
+      data[prop] = v;
+    }
+  });
+}
+export {
+  CollapseTransition,
+  Field,
+  ehr,
+  propertyToRef,
+  syncElementSize,
+  syncElementSyncScroll,
+  useCheckedState,
+  useSelectedMultiple,
+  useSelectedSingle,
+  useServerPagination
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@hairy/vue-lib",
+  "version": "1.3.16",
+  "license": "MIT",
+  "main": "./dist/index.cjs",
+  "publishConfig": {
+    "jsdelivr": "./dist/index.iife.min.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@vueuse/core": "^8.5.0",
+    "css-render": "^0.15.12",
+    "lodash": "^4",
+    "vue": "^3",
+    "vue-demi": "^0.14.5",
+    "@hairy/utils": "0.7.3"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4"
+  },
+  "scripts": {
+    "build": "ptsup src/index.ts --dts"
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/index.iife.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./*"
+  }
+}