@hoci/components 0.6.0 → 0.7.1

package/dist/index.cjs

@@ -1,28 +1,316 @@
 'use strict';
 
-const vue = require('vue');
-const core = require('@hoci/core');
-const core$1 = require('@vueuse/core');
 const shared = require('@hoci/shared');
+const vue = require('vue');
 const tslx = require('tslx');
+const core = require('@hoci/core');
 
-const HiAffix = vue.defineComponent({
-  name: "HiAffix",
-  props: {
-    ...core.affixProps,
-    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() : vue.unref(r);
+}
+function identity(arg) {
+  return arg;
+}
+
+function tryOnScopeDispose(fn) {
+  if (vue.getCurrentScope()) {
+    vue.onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+
+function isDefined(v) {
+  return vue.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 = vue.watch(left, (newValue) => right.value = transformLTR(newValue), { flush, deep, immediate });
+  }
+  if (direction === "both" || direction === "rtl") {
+    watchRight = vue.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 (vue.getCurrentInstance())
+    vue.onMounted(fn);
+  else if (sync)
+    fn();
+  else
+    vue.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 = vue.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 = vue.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 } = core.useAffix(props, context);
-    return () => vue.h(props.as, { ref: wrapperRef }, [
-      isFixed.value && vue.h("div", { style: placeholderStyle.value }),
-      vue.h("div", { class: className.value, style: fixedStyle.value }, vue.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 = vue.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 = vue.ref(0);
+  const bottom = vue.ref(0);
+  const left = vue.ref(0);
+  const right = vue.ref(0);
+  const top = vue.ref(0);
+  const width = vue.ref(0);
+  const x = vue.ref(0);
+  const y = vue.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);
+  vue.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 = vue.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;
+    }
+  };
+  vue.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 = shared.defineHookProps(
   {
@@ -73,8 +361,8 @@ function getTargetRect(target) {
 shared.defineHookComponent({
   props: affixProps,
   setup(props, { emit }) {
-    const wrapperRef = vue.ref();
-    const wrapperRect = shared.toReactive(core$1.useElementBounding(wrapperRef));
+    const wrapperRef = shared.elementRef();
+    const wrapperRect = shared.toReactive(useElementBounding(wrapperRef));
     const parentRef = vue.inject(AFFIX_TARGET_KEY, void 0);
     const targetRef = shared.useElement(props.target, parentRef);
     const isFixed = vue.ref(false);
@@ -83,7 +371,7 @@ shared.defineHookComponent({
     const className = vue.computed(() => {
       return isFixed.value ? props.fixedClass : "";
     });
-    const wrapperVisible = core$1.useElementVisibility(wrapperRef);
+    const wrapperVisible = useElementVisibility(wrapperRef);
     const containerRef = vue.computed(() => {
       if (!wrapperVisible.value) {
         return null;
@@ -130,11 +418,11 @@ shared.defineHookComponent({
         ...newIsFixed ? newPlaceholderStyles : {}
       };
     });
-    core$1.useEventListener(containerRef, "scroll", () => {
+    useEventListener(containerRef, "scroll", () => {
       emit("scroll");
       updatePosition();
     });
-    core$1.useEventListener(containerRef, "resize", updatePosition);
+    useEventListener(containerRef, "resize", updatePosition);
     vue.watchPostEffect(updatePosition);
     return {
       className,
@@ -154,7 +442,7 @@ function provideAffixTarget(target) {
 const HiAffixTarget = vue.defineComponent({
   name: "HiAffixTarget",
   setup(_, context) {
-    const targetRef = vue.ref();
+    const targetRef = shared.elementRef();
     provideAffixTarget(targetRef);
     return () => vue.h("div", {
       ref: targetRef,
@@ -163,19 +451,94 @@ const HiAffixTarget = vue.defineComponent({
   }
 });
 
-const HiSelection = vue.defineComponent({
-  name: "HiSelection",
+const HiAffix = vue.defineComponent({
+  name: "HiAffix",
   props: {
-    ...core.selectionProps,
+    ...core.affixProps,
     as: {
       type: String,
       default: "div"
     }
   },
-  emits: core.selectionEmits,
   setup(props, context) {
-    const { render } = core.useSelectionList(props, context);
-    return () => vue.h(props.as, {}, render());
+    const { className, wrapperRef, isFixed, placeholderStyle, fixedStyle } = core.useAffix(props, context);
+    return () => vue.h(props.as, { ref: wrapperRef }, [
+      isFixed.value && vue.h("div", { style: placeholderStyle.value }),
+      vue.h("div", { class: className.value, style: fixedStyle.value }, vue.renderSlot(context.slots, "default"))
+    ]);
+  }
+});
+
+const HiConfigProvider = vue.defineComponent({
+  props: {
+    ...core.configProviderProps,
+    as: {
+      type: String
+    }
+  },
+  setup(props, context) {
+    core.provideSharedConfig(props);
+    return () => {
+      const content = vue.renderSlot(context.slots, "default", void 0);
+      if (props.as) {
+        return vue.h(props.as, content);
+      }
+      return content;
+    };
+  }
+});
+
+const HiFileUpload = vue.defineComponent({
+  name: "HiFileUpload",
+  props: {
+    ...core.fileUploadProps,
+    accept: {
+      type: String,
+      default: "*/*"
+    },
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  emits: core.fileUploadEmits,
+  setup(props, context) {
+    const { slots } = context;
+    const { fileInputRef, files, openFileInput } = core.useFileUpload(props, context);
+    return () => {
+      return vue.h(props.as, {
+        onClick: openFileInput
+      }, [
+        vue.h("input", {
+          ref: fileInputRef,
+          type: "file",
+          accept: props.accept,
+          multiple: props.multiple,
+          style: { display: "none" }
+        }),
+        vue.renderSlot(slots, "default", {
+          files: files.value
+        })
+      ]);
+    };
+  }
+});
+
+const HiIcon = vue.defineComponent({
+  props: {
+    ...core.iconProps,
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(props, context) {
+    const { style } = core.useIcon(props, context);
+    return () => {
+      return vue.h(props.as, {
+        style: style.value
+      });
+    };
   }
 });
 
@@ -206,24 +569,64 @@ const HiItem = vue.defineComponent({
   }
 });
 
-const HiIcon = vue.defineComponent({
+const HiPopover = vue.defineComponent({
+  name: "HiPopover",
   props: {
-    ...core.iconProps,
+    ...core.popoverProps,
     as: {
       type: String,
       default: "div"
     }
   },
+  emits: core.popoverEmits,
   setup(props, context) {
-    const { style } = core.useIcon(props, context);
+    const { triggerRef, popupClass, events, popupRef, popupStyle } = core.usePopover(props, context);
     return () => {
+      let content = vue.h(
+        "div",
+        {
+          class: popupClass.value,
+          style: popupStyle.value,
+          ref: popupRef
+        },
+        vue.renderSlot(context.slots, "popup")
+      );
+      if (props.teleport) {
+        content = vue.h(
+          vue.Teleport,
+          {
+            to: props.teleport === true ? "body" : props.teleport
+          },
+          content
+        );
+      }
       return vue.h(props.as, {
-        style: style.value
-      });
+        ref: triggerRef,
+        ...events
+      }, [
+        vue.renderSlot(context.slots, "default"),
+        content
+      ]);
     };
   }
 });
 
+const HiSelection = vue.defineComponent({
+  name: "HiSelection",
+  props: {
+    ...core.selectionProps,
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  emits: core.selectionEmits,
+  setup(props, context) {
+    const { render } = core.useSelectionList(props, context);
+    return () => vue.h(props.as, {}, render());
+  }
+});
+
 const HiSwitch = vue.defineComponent({
   name: "HiSwitch",
   props: {
@@ -253,25 +656,6 @@ const HiSwitch = vue.defineComponent({
   }
 });
 
-const HiConfigProvider = vue.defineComponent({
-  props: {
-    ...core.configProviderProps,
-    as: {
-      type: String
-    }
-  },
-  setup(props, context) {
-    core.provideSharedConfig(props);
-    return () => {
-      const content = vue.renderSlot(context.slots, "default", void 0);
-      if (props.as) {
-        return vue.h(props.as, content);
-      }
-      return content;
-    };
-  }
-});
-
 const selectionProps = shared.defineHookProps({
   modelValue: {
     type: shared.valuePropType,
@@ -357,7 +741,7 @@ const useSelectionList = shared.defineHookComponent({
   setup(props, { emit, slots }) {
     const options = vue.reactive([]);
     function toArray(value) {
-      if (!core$1.isDefined(value)) {
+      if (!isDefined(value)) {
         return [];
       }
       if (props.multiple && Array.isArray(value)) {
@@ -384,7 +768,7 @@ const useSelectionList = shared.defineHookComponent({
         emit("update:modelValue", val);
       }
     });
-    core$1.syncRef(currentValue, modelValue, { immediate: true, deep: true });
+    syncRef(currentValue, modelValue, { immediate: true, deep: true });
     const emitChange = () => emit("change", currentValue.value);
     function isActive(value) {
       return actives.includes(value);
@@ -481,60 +865,6 @@ const useSelectionList = shared.defineHookComponent({
   }
 });
 
-const HiTabs = vue.defineComponent({
-  props: {
-    ...selectionProps,
-    headerClass: {
-      type: shared.classPropType
-    },
-    as: {
-      type: String,
-      default: "div"
-    },
-    headerAs: {
-      type: String,
-      default: "div"
-    },
-    contentAs: {
-      type: String,
-      default: "div"
-    },
-    contentClass: {
-      type: shared.classPropType
-    },
-    keepAlive: {
-      type: [Boolean, Object],
-      default: false
-    }
-  },
-  setup(props, context) {
-    const selection = useSelectionList(props, context);
-    return () => {
-      let component = selection.renderItem();
-      if (props.keepAlive) {
-        component = vue.h(vue.KeepAlive, {
-          ...typeof props.keepAlive === "object" ? props.keepAlive : {}
-        }, component);
-      }
-      if (context.slots.content) {
-        component = context.slots.content({
-          component
-        });
-      } else {
-        component = vue.h(props.contentAs, {
-          class: props.contentClass
-        }, component);
-      }
-      return vue.h(props.as, [
-        vue.h(props.headerAs, {
-          class: props.headerClass
-        }, vue.renderSlot(context.slots, "default")),
-        component
-      ]);
-    };
-  }
-});
-
 const itemProps = shared.defineHookProps({
   value: {
     type: shared.valuePropType,
@@ -601,7 +931,7 @@ const useSelectionItem = shared.defineHookComponent({
         },
         { immediate: true }
       );
-      core$1.tryOnScopeDispose(remove);
+      tryOnScopeDispose(remove);
     }
     const isActive = vue.computed(() => context.isActive(props.value));
     const isDisabled = vue.computed(() => props.disabled);
@@ -628,10 +958,12 @@ const useSelectionItem = shared.defineHookComponent({
 });
 
 const HiTabPane = vue.defineComponent({
+  name: "HiTabPane",
   props: {
     ...itemProps
   },
   emits: itemEmits,
+  inheritAttrs: true,
   setup(props, context) {
     const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
     return () => {
@@ -644,43 +976,57 @@ const HiTabPane = vue.defineComponent({
   }
 });
 
-const HiPopover = vue.defineComponent({
-  name: "HiPopover",
+const HiTabs = vue.defineComponent({
+  name: "HiTabs",
   props: {
-    ...core.popoverProps,
+    ...selectionProps,
+    headerClass: {
+      type: shared.classPropType
+    },
     as: {
       type: String,
       default: "div"
+    },
+    headerAs: {
+      type: String,
+      default: "div"
+    },
+    contentAs: {
+      type: String,
+      default: "div"
+    },
+    contentClass: {
+      type: shared.classPropType
+    },
+    keepAlive: {
+      type: [Boolean, Object],
+      default: false
     }
   },
-  emits: core.popoverEmits,
+  inheritAttrs: true,
   setup(props, context) {
-    const { triggerRef, popupClass, events, popupRef, popupStyle } = core.usePopover(props, context);
+    const selection = useSelectionList(props, context);
     return () => {
-      let content = vue.h(
-        "div",
-        {
-          class: popupClass.value,
-          style: popupStyle.value,
-          ref: popupRef
-        },
-        vue.renderSlot(context.slots, "popup")
-      );
-      if (props.teleport) {
-        content = vue.h(
-          vue.Teleport,
-          {
-            to: props.teleport === true ? "body" : props.teleport
-          },
-          content
-        );
+      let component = selection.renderItem();
+      if (props.keepAlive) {
+        component = vue.h(vue.KeepAlive, {
+          ...typeof props.keepAlive === "object" ? props.keepAlive : {}
+        }, component);
       }
-      return vue.h(props.as, {
-        ref: triggerRef,
-        ...events
-      }, [
-        vue.renderSlot(context.slots, "default"),
-        content
+      if (context.slots.content) {
+        component = context.slots.content({
+          component
+        });
+      } else {
+        component = vue.h(props.contentAs, {
+          class: props.contentClass
+        }, component);
+      }
+      return vue.h(props.as, [
+        vue.h(props.headerAs, {
+          class: props.headerClass
+        }, vue.renderSlot(context.slots, "default")),
+        component
       ]);
     };
   }
@@ -691,6 +1037,7 @@ const components = {
   HiAffix: HiAffix,
   HiAffixTarget: HiAffixTarget,
   HiConfigProvider: HiConfigProvider,
+  HiFileUpload: HiFileUpload,
   HiIcon: HiIcon,
   HiItem: HiItem,
   HiPopover: HiPopover,
@@ -709,6 +1056,7 @@ function install(app) {
 exports.HiAffix = HiAffix;
 exports.HiAffixTarget = HiAffixTarget;
 exports.HiConfigProvider = HiConfigProvider;
+exports.HiFileUpload = HiFileUpload;
 exports.HiIcon = HiIcon;
 exports.HiItem = HiItem;
 exports.HiPopover = HiPopover;