@hoci/components 0.6.0 → 0.7.1

package/dist/index.mjs

@@ -1,26 +1,314 @@
-import { defineComponent, h, renderSlot, ref, inject, computed, watchPostEffect, provide, reactive, KeepAlive, watch, Teleport } from 'vue';
-import { affixProps as affixProps$1, useAffix, selectionProps as selectionProps$1, selectionEmits as selectionEmits$1, useSelectionList as useSelectionList$1, itemProps as itemProps$1, itemEmits as itemEmits$1, useSelectionItem as useSelectionItem$1, iconProps, useIcon, switchProps, switchEmits, useSwitch, configProviderProps, provideSharedConfig, popoverProps, popoverEmits, usePopover } from '@hoci/core';
-import { useElementBounding, useElementVisibility, useEventListener, syncRef, isDefined, tryOnScopeDispose } from '@vueuse/core';
-import { defineHookProps, defineHookEmits, defineHookComponent, toReactive, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType, useSharedConfig, getFirstChilld } from '@hoci/shared';
+import { defineHookProps, defineHookEmits, defineHookComponent, elementRef, toReactive, useElement, throttleByRaf, isWindow, valuePropType, labelPropType, classPropType, useSharedConfig, getFirstChilld } from '@hoci/shared';
+import { getCurrentInstance, onMounted, nextTick, getCurrentScope, onScopeDispose, watch, unref, ref, inject, computed, watchPostEffect, provide, defineComponent, h, renderSlot, Teleport, reactive, KeepAlive } from 'vue';
 import { px, capitalize, cls } from 'tslx';
+import { affixProps as affixProps$1, useAffix, configProviderProps, provideSharedConfig, fileUploadEmits, fileUploadProps, useFileUpload, iconProps, useIcon, itemEmits as itemEmits$1, itemProps as itemProps$1, useSelectionItem as useSelectionItem$1, popoverEmits, popoverProps, usePopover, selectionEmits as selectionEmits$1, selectionProps as selectionProps$1, useSelectionList as useSelectionList$1, switchEmits, switchProps, useSwitch } from '@hoci/core';
 
-const HiAffix = defineComponent({
-  name: "HiAffix",
-  props: {
-    ...affixProps$1,
-    as: {
-      type: String,
-      default: "div"
+var _a;
+const isClient = typeof window !== "undefined";
+const isString = (val) => typeof val === "string";
+const noop = () => {
+};
+isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+
+function resolveUnref(r) {
+  return typeof r === "function" ? r() : unref(r);
+}
+function identity(arg) {
+  return arg;
+}
+
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+
+function isDefined(v) {
+  return unref(v) != null;
+}
+
+function syncRef(left, right, options = {}) {
+  var _a, _b;
+  const {
+    flush = "sync",
+    deep = false,
+    immediate = true,
+    direction = "both",
+    transform = {}
+  } = options;
+  let watchLeft;
+  let watchRight;
+  const transformLTR = (_a = transform.ltr) != null ? _a : (v) => v;
+  const transformRTL = (_b = transform.rtl) != null ? _b : (v) => v;
+  if (direction === "both" || direction === "ltr") {
+    watchLeft = watch(left, (newValue) => right.value = transformLTR(newValue), { flush, deep, immediate });
+  }
+  if (direction === "both" || direction === "rtl") {
+    watchRight = watch(right, (newValue) => left.value = transformRTL(newValue), { flush, deep, immediate });
+  }
+  return () => {
+    watchLeft == null ? void 0 : watchLeft();
+    watchRight == null ? void 0 : watchRight();
+  };
+}
+
+function tryOnMounted(fn, sync = true) {
+  if (getCurrentInstance())
+    onMounted(fn);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}
+
+function unrefElement(elRef) {
+  var _a;
+  const plain = resolveUnref(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+
+const defaultWindow = isClient ? window : void 0;
+
+function useEventListener(...args) {
+  let target;
+  let events;
+  let listeners;
+  let options;
+  if (isString(args[0]) || Array.isArray(args[0])) {
+    [events, listeners, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, events, listeners, options] = args;
+  }
+  if (!target)
+    return noop;
+  if (!Array.isArray(events))
+    events = [events];
+  if (!Array.isArray(listeners))
+    listeners = [listeners];
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener) => {
+    el.addEventListener(event, listener, options);
+    return () => el.removeEventListener(event, listener, options);
+  };
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (!el)
+      return;
+    cleanups.push(...events.flatMap((event) => {
+      return listeners.map((listener) => register(el, event, listener));
+    }));
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+
+function useSupported(callback, sync = false) {
+  const isSupported = ref();
+  const update = () => isSupported.value = Boolean(callback());
+  update();
+  tryOnMounted(update, sync);
+  return isSupported;
+}
+
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+const globalKey = "__vueuse_ssr_handlers__";
+_global[globalKey] = _global[globalKey] || {};
+
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __objRest$2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
+        target[prop] = source[prop];
     }
-  },
-  setup(props, context) {
-    const { className, wrapperRef, isFixed, placeholderStyle, fixedStyle } = useAffix(props, context);
-    return () => h(props.as, { ref: wrapperRef }, [
-      isFixed.value && h("div", { style: placeholderStyle.value }),
-      h("div", { class: className.value, style: fixedStyle.value }, renderSlot(context.slots, "default"))
-    ]);
+  return target;
+};
+function useResizeObserver(target, callback, options = {}) {
+  const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]);
+  let observer;
+  const isSupported = useSupported(() => window && "ResizeObserver" in window);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (isSupported.value && window && el) {
+      observer = new ResizeObserver(callback);
+      observer.observe(el, observerOptions);
+    }
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+
+function useElementBounding(target, options = {}) {
+  const {
+    reset = true,
+    windowResize = true,
+    windowScroll = true,
+    immediate = true
+  } = options;
+  const height = ref(0);
+  const bottom = ref(0);
+  const left = ref(0);
+  const right = ref(0);
+  const top = ref(0);
+  const width = ref(0);
+  const x = ref(0);
+  const y = ref(0);
+  function update() {
+    const el = unrefElement(target);
+    if (!el) {
+      if (reset) {
+        height.value = 0;
+        bottom.value = 0;
+        left.value = 0;
+        right.value = 0;
+        top.value = 0;
+        width.value = 0;
+        x.value = 0;
+        y.value = 0;
+      }
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    height.value = rect.height;
+    bottom.value = rect.bottom;
+    left.value = rect.left;
+    right.value = rect.right;
+    top.value = rect.top;
+    width.value = rect.width;
+    x.value = rect.x;
+    y.value = rect.y;
   }
-});
+  useResizeObserver(target, update);
+  watch(() => unrefElement(target), (ele) => !ele && update());
+  if (windowScroll)
+    useEventListener("scroll", update, { capture: true, passive: true });
+  if (windowResize)
+    useEventListener("resize", update, { passive: true });
+  tryOnMounted(() => {
+    if (immediate)
+      update();
+  });
+  return {
+    height,
+    bottom,
+    left,
+    right,
+    top,
+    width,
+    x,
+    y,
+    update
+  };
+}
+
+function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
+  const elementIsVisible = ref(false);
+  const testBounding = () => {
+    if (!window)
+      return;
+    const document = window.document;
+    const el = unrefElement(element);
+    if (!el) {
+      elementIsVisible.value = false;
+    } else {
+      const rect = el.getBoundingClientRect();
+      elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+    }
+  };
+  watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
+  if (window) {
+    useEventListener(scrollTarget || window, "scroll", testBounding, {
+      capture: false,
+      passive: true
+    });
+  }
+  return elementIsVisible;
+}
+
+var SwipeDirection;
+(function(SwipeDirection2) {
+  SwipeDirection2["UP"] = "UP";
+  SwipeDirection2["RIGHT"] = "RIGHT";
+  SwipeDirection2["DOWN"] = "DOWN";
+  SwipeDirection2["LEFT"] = "LEFT";
+  SwipeDirection2["NONE"] = "NONE";
+})(SwipeDirection || (SwipeDirection = {}));
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const _TransitionPresets = {
+  easeInSine: [0.12, 0, 0.39, 0],
+  easeOutSine: [0.61, 1, 0.88, 1],
+  easeInOutSine: [0.37, 0, 0.63, 1],
+  easeInQuad: [0.11, 0, 0.5, 0],
+  easeOutQuad: [0.5, 1, 0.89, 1],
+  easeInOutQuad: [0.45, 0, 0.55, 1],
+  easeInCubic: [0.32, 0, 0.67, 0],
+  easeOutCubic: [0.33, 1, 0.68, 1],
+  easeInOutCubic: [0.65, 0, 0.35, 1],
+  easeInQuart: [0.5, 0, 0.75, 0],
+  easeOutQuart: [0.25, 1, 0.5, 1],
+  easeInOutQuart: [0.76, 0, 0.24, 1],
+  easeInQuint: [0.64, 0, 0.78, 0],
+  easeOutQuint: [0.22, 1, 0.36, 1],
+  easeInOutQuint: [0.83, 0, 0.17, 1],
+  easeInExpo: [0.7, 0, 0.84, 0],
+  easeOutExpo: [0.16, 1, 0.3, 1],
+  easeInOutExpo: [0.87, 0, 0.13, 1],
+  easeInCirc: [0.55, 0, 1, 0.45],
+  easeOutCirc: [0, 0.55, 0.45, 1],
+  easeInOutCirc: [0.85, 0, 0.15, 1],
+  easeInBack: [0.36, 0, 0.66, -0.56],
+  easeOutBack: [0.34, 1.56, 0.64, 1],
+  easeInOutBack: [0.68, -0.6, 0.32, 1.6]
+};
+__spreadValues({
+  linear: identity
+}, _TransitionPresets);
 
 const affixProps = defineHookProps(
   {
@@ -71,7 +359,7 @@ function getTargetRect(target) {
 defineHookComponent({
   props: affixProps,
   setup(props, { emit }) {
-    const wrapperRef = ref();
+    const wrapperRef = elementRef();
     const wrapperRect = toReactive(useElementBounding(wrapperRef));
     const parentRef = inject(AFFIX_TARGET_KEY, void 0);
     const targetRef = useElement(props.target, parentRef);
@@ -152,7 +440,7 @@ function provideAffixTarget(target) {
 const HiAffixTarget = defineComponent({
   name: "HiAffixTarget",
   setup(_, context) {
-    const targetRef = ref();
+    const targetRef = elementRef();
     provideAffixTarget(targetRef);
     return () => h("div", {
       ref: targetRef,
@@ -161,19 +449,94 @@ const HiAffixTarget = defineComponent({
   }
 });
 
-const HiSelection = defineComponent({
-  name: "HiSelection",
+const HiAffix = defineComponent({
+  name: "HiAffix",
   props: {
-    ...selectionProps$1,
+    ...affixProps$1,
     as: {
       type: String,
       default: "div"
     }
   },
-  emits: selectionEmits$1,
   setup(props, context) {
-    const { render } = useSelectionList$1(props, context);
-    return () => h(props.as, {}, render());
+    const { className, wrapperRef, isFixed, placeholderStyle, fixedStyle } = useAffix(props, context);
+    return () => h(props.as, { ref: wrapperRef }, [
+      isFixed.value && h("div", { style: placeholderStyle.value }),
+      h("div", { class: className.value, style: fixedStyle.value }, renderSlot(context.slots, "default"))
+    ]);
+  }
+});
+
+const HiConfigProvider = defineComponent({
+  props: {
+    ...configProviderProps,
+    as: {
+      type: String
+    }
+  },
+  setup(props, context) {
+    provideSharedConfig(props);
+    return () => {
+      const content = renderSlot(context.slots, "default", void 0);
+      if (props.as) {
+        return h(props.as, content);
+      }
+      return content;
+    };
+  }
+});
+
+const HiFileUpload = defineComponent({
+  name: "HiFileUpload",
+  props: {
+    ...fileUploadProps,
+    accept: {
+      type: String,
+      default: "*/*"
+    },
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  emits: fileUploadEmits,
+  setup(props, context) {
+    const { slots } = context;
+    const { fileInputRef, files, openFileInput } = useFileUpload(props, context);
+    return () => {
+      return h(props.as, {
+        onClick: openFileInput
+      }, [
+        h("input", {
+          ref: fileInputRef,
+          type: "file",
+          accept: props.accept,
+          multiple: props.multiple,
+          style: { display: "none" }
+        }),
+        renderSlot(slots, "default", {
+          files: files.value
+        })
+      ]);
+    };
+  }
+});
+
+const HiIcon = defineComponent({
+  props: {
+    ...iconProps,
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(props, context) {
+    const { style } = useIcon(props, context);
+    return () => {
+      return h(props.as, {
+        style: style.value
+      });
+    };
   }
 });
 
@@ -204,24 +567,64 @@ const HiItem = defineComponent({
   }
 });
 
-const HiIcon = defineComponent({
+const HiPopover = defineComponent({
+  name: "HiPopover",
   props: {
-    ...iconProps,
+    ...popoverProps,
     as: {
       type: String,
       default: "div"
     }
   },
+  emits: popoverEmits,
   setup(props, context) {
-    const { style } = useIcon(props, context);
+    const { triggerRef, popupClass, events, popupRef, popupStyle } = usePopover(props, context);
     return () => {
+      let content = h(
+        "div",
+        {
+          class: popupClass.value,
+          style: popupStyle.value,
+          ref: popupRef
+        },
+        renderSlot(context.slots, "popup")
+      );
+      if (props.teleport) {
+        content = h(
+          Teleport,
+          {
+            to: props.teleport === true ? "body" : props.teleport
+          },
+          content
+        );
+      }
       return h(props.as, {
-        style: style.value
-      });
+        ref: triggerRef,
+        ...events
+      }, [
+        renderSlot(context.slots, "default"),
+        content
+      ]);
     };
   }
 });
 
+const HiSelection = defineComponent({
+  name: "HiSelection",
+  props: {
+    ...selectionProps$1,
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  emits: selectionEmits$1,
+  setup(props, context) {
+    const { render } = useSelectionList$1(props, context);
+    return () => h(props.as, {}, render());
+  }
+});
+
 const HiSwitch = defineComponent({
   name: "HiSwitch",
   props: {
@@ -251,25 +654,6 @@ const HiSwitch = defineComponent({
   }
 });
 
-const HiConfigProvider = defineComponent({
-  props: {
-    ...configProviderProps,
-    as: {
-      type: String
-    }
-  },
-  setup(props, context) {
-    provideSharedConfig(props);
-    return () => {
-      const content = renderSlot(context.slots, "default", void 0);
-      if (props.as) {
-        return h(props.as, content);
-      }
-      return content;
-    };
-  }
-});
-
 const selectionProps = defineHookProps({
   modelValue: {
     type: valuePropType,
@@ -479,60 +863,6 @@ const useSelectionList = defineHookComponent({
   }
 });
 
-const HiTabs = defineComponent({
-  props: {
-    ...selectionProps,
-    headerClass: {
-      type: classPropType
-    },
-    as: {
-      type: String,
-      default: "div"
-    },
-    headerAs: {
-      type: String,
-      default: "div"
-    },
-    contentAs: {
-      type: String,
-      default: "div"
-    },
-    contentClass: {
-      type: classPropType
-    },
-    keepAlive: {
-      type: [Boolean, Object],
-      default: false
-    }
-  },
-  setup(props, context) {
-    const selection = useSelectionList(props, context);
-    return () => {
-      let component = selection.renderItem();
-      if (props.keepAlive) {
-        component = h(KeepAlive, {
-          ...typeof props.keepAlive === "object" ? props.keepAlive : {}
-        }, component);
-      }
-      if (context.slots.content) {
-        component = context.slots.content({
-          component
-        });
-      } else {
-        component = h(props.contentAs, {
-          class: props.contentClass
-        }, component);
-      }
-      return h(props.as, [
-        h(props.headerAs, {
-          class: props.headerClass
-        }, renderSlot(context.slots, "default")),
-        component
-      ]);
-    };
-  }
-});
-
 const itemProps = defineHookProps({
   value: {
     type: valuePropType,
@@ -626,10 +956,12 @@ const useSelectionItem = defineHookComponent({
 });
 
 const HiTabPane = defineComponent({
+  name: "HiTabPane",
   props: {
     ...itemProps
   },
   emits: itemEmits,
+  inheritAttrs: true,
   setup(props, context) {
     const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
     return () => {
@@ -642,43 +974,57 @@ const HiTabPane = defineComponent({
   }
 });
 
-const HiPopover = defineComponent({
-  name: "HiPopover",
+const HiTabs = defineComponent({
+  name: "HiTabs",
   props: {
-    ...popoverProps,
+    ...selectionProps,
+    headerClass: {
+      type: classPropType
+    },
     as: {
       type: String,
       default: "div"
+    },
+    headerAs: {
+      type: String,
+      default: "div"
+    },
+    contentAs: {
+      type: String,
+      default: "div"
+    },
+    contentClass: {
+      type: classPropType
+    },
+    keepAlive: {
+      type: [Boolean, Object],
+      default: false
     }
   },
-  emits: popoverEmits,
+  inheritAttrs: true,
   setup(props, context) {
-    const { triggerRef, popupClass, events, popupRef, popupStyle } = usePopover(props, context);
+    const selection = useSelectionList(props, context);
     return () => {
-      let content = h(
-        "div",
-        {
-          class: popupClass.value,
-          style: popupStyle.value,
-          ref: popupRef
-        },
-        renderSlot(context.slots, "popup")
-      );
-      if (props.teleport) {
-        content = h(
-          Teleport,
-          {
-            to: props.teleport === true ? "body" : props.teleport
-          },
-          content
-        );
+      let component = selection.renderItem();
+      if (props.keepAlive) {
+        component = h(KeepAlive, {
+          ...typeof props.keepAlive === "object" ? props.keepAlive : {}
+        }, component);
       }
-      return h(props.as, {
-        ref: triggerRef,
-        ...events
-      }, [
-        renderSlot(context.slots, "default"),
-        content
+      if (context.slots.content) {
+        component = context.slots.content({
+          component
+        });
+      } else {
+        component = h(props.contentAs, {
+          class: props.contentClass
+        }, component);
+      }
+      return h(props.as, [
+        h(props.headerAs, {
+          class: props.headerClass
+        }, renderSlot(context.slots, "default")),
+        component
       ]);
     };
   }
@@ -689,6 +1035,7 @@ const components = {
   HiAffix: HiAffix,
   HiAffixTarget: HiAffixTarget,
   HiConfigProvider: HiConfigProvider,
+  HiFileUpload: HiFileUpload,
   HiIcon: HiIcon,
   HiItem: HiItem,
   HiPopover: HiPopover,
@@ -704,4 +1051,4 @@ function install(app) {
   }
 }
 
-export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
+export { HiAffix, HiAffixTarget, HiConfigProvider, HiFileUpload, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };