@hairy/vue-lib 1.47.0 → 1.49.0

package/dist/index.js

@@ -1,376 +0,0 @@
-// src/components/c-field.ts
-import { defineComponent, h } from "vue-demi";
-var Field = 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 ? h(props.is) : null;
-    };
-  }
-});
-
-// src/components/collapse-transition.ts
-import CssRender from "css-render";
-import { defineComponent as defineComponent2, h as h2, Transition } from "vue-demi";
-var { c } = CssRender();
-var CollapseTransition = defineComponent2({
-  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 () => h2(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/hooks/syncElementScroll/index.ts
-import { useEventListener } from "@vueuse/core";
-import debounce from "lodash/debounce";
-import throttle from "lodash/throttle";
-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?.scroll(options2);
-    offChangeLockScrollListener(opposite);
-  };
-  const syncFromTo = () => syncScroll("from");
-  const syncToFrom = () => syncScroll("to");
-  let toStopHandle;
-  let formStopHandle;
-  const stop = () => {
-    toStopHandle?.();
-    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/hooks/syncElementSize/index.ts
-import { unit } 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] = unit(fromSize[type].value);
-    };
-    return watch(sources, callback, { immediate: true, ...options });
-  };
-  const stop = () => {
-    widthStopHandle?.();
-    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/hooks/useChecked/index.ts
-import { computed, unref as unref2 } from "vue";
-function useChecked(target, checked = true, unchecked = false) {
-  return computed({
-    get: () => target.value === unref2(checked),
-    set: (_value) => {
-      target.value = _value ? unref2(checked) : unref2(unchecked);
-    }
-  });
-}
-
-// src/hooks/usePaginationServer/index.ts
-import { useAsyncState, useOffsetPagination } from "@vueuse/core";
-import debounce2 from "lodash/debounce";
-import { nextTick, reactive as reactive2, ref, watch as watch2 } from "vue";
-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/hooks/useSelectedMultiple/index.ts
-import { computed as computed2, unref as unref3 } from "vue";
-
-// src/hooks/utils/extendSelected.ts
-import { extendRef } from "@vueuse/core";
-import { ref as ref2, watch as watch3 } from "vue";
-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/hooks/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: () => !selected.value?.length && !unref3(array).some((item) => !item[fieldName]),
-    set: (value) => unref3(array).forEach((item, index) => {
-      if (!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/hooks/useSelectedSingle/index.ts
-import { computed as computed3, ref as ref3, unref as unref4, watch as watch4 } from "vue";
-function useSelectedSingle(array, options = {}) {
-  const fieldName = options.fieldName ?? "select";
-  const required = options.required ?? 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,
-  useChecked,
-  useSelectedMultiple,
-  useSelectedSingle,
-  useServerPagination
-};