@onereach/ui-components-vue2 16.2.0-beta.4827.0

package/dist/bundled/components/OrToast/composable/useToast.js

@@ -0,0 +1,80 @@
+import Timer from '../Timer.js';
+import useToastEventBus from './useToastEventBus.js';
+import { ToastType } from '../constants.js';
+
+function useToast(globalToastProps = {}) {
+  const {
+    emit
+  } = useToastEventBus();
+  function notify(props, behaviour = {}) {
+    const {
+      duration = 5000,
+      pauseOnHover = true,
+      onToastClose,
+      onToastClick
+    } = behaviour;
+    const propsData = {
+      ...props,
+      ...globalToastProps
+    };
+    const config = {
+      toastProps: propsData,
+      //generate ToastHash
+      hash: Math.random().toString(36).slice(2),
+      ...(Number.isInteger(duration) && {
+        timer: new Timer()
+      }),
+      toastBehaviour: {
+        duration,
+        pauseOnHover,
+        onToastClose,
+        onToastClick
+      }
+    };
+    emit('toastNotify', config);
+    return {
+      close: () => emit('toastClose', config),
+      update: data => emit('toastUpdate', {
+        ...config,
+        toastProps: {
+          ...config.toastProps,
+          ...data
+        }
+      })
+    };
+  }
+  function clearAll() {
+    emit('toastCloseAll');
+  }
+  function success(props, behaviour = {}) {
+    return notify({
+      ...props,
+      toastType: ToastType.success
+    }, behaviour);
+  }
+  function error(props, behaviour = {}) {
+    return notify({
+      ...props,
+      toastType: ToastType.error
+    }, behaviour);
+  }
+  function loading(props, behaviour = {}) {
+    return notify({
+      dismissible: false,
+      ...props,
+      toastType: ToastType.loading
+    }, {
+      ...behaviour,
+      duration: 0 // <- toast with type "loading" will not cloe automatically
+    });
+  }
+  return {
+    notify,
+    clearAll,
+    success,
+    error,
+    loading
+  };
+}
+
+export { useToast as default };

package/dist/bundled/components/OrToast/composable/useToastEventBus.js

@@ -0,0 +1,25 @@
+import { b as useEventBus } from '../../../index-af4affc5.js';
+import { c as createSharedComposable } from '../../../index-ced52754.js';
+
+const useToastEventBus = () => {
+  const busPull = {
+    toastNotify: useEventBus('toastNotify'),
+    toastClose: useEventBus('toastClose'),
+    toastCloseAll: useEventBus('toastCloseAll'),
+    toastUpdate: useEventBus('toastUpdate')
+  };
+  return {
+    on: (namedQueue, listener) => {
+      busPull[namedQueue].on(listener);
+    },
+    off: (namedQueue, listener) => {
+      busPull[namedQueue].off(listener);
+    },
+    emit: (namedQueue, data) => {
+      busPull[namedQueue].emit(data);
+    }
+  };
+};
+var useToastEventBus$1 = createSharedComposable(useToastEventBus);
+
+export { useToastEventBus$1 as default };

package/dist/bundled/components/OrToast/constants.js

@@ -0,0 +1,24 @@
+var PositionsX;
+(function (PositionsX) {
+  PositionsX["right"] = "right";
+  PositionsX["left"] = "left";
+  PositionsX["center"] = "center";
+})(PositionsX || (PositionsX = {}));
+var PositionsY;
+(function (PositionsY) {
+  PositionsY["top"] = "top";
+  PositionsY["bottom"] = "bottom";
+})(PositionsY || (PositionsY = {}));
+var TransitionType;
+(function (TransitionType) {
+  TransitionType["slide"] = "slide";
+  TransitionType["fade"] = "fade";
+})(TransitionType || (TransitionType = {}));
+var ToastType;
+(function (ToastType) {
+  ToastType["success"] = "success";
+  ToastType["error"] = "error";
+  ToastType["loading"] = "loading";
+})(ToastType || (ToastType = {}));
+
+export { PositionsX, PositionsY, ToastType, TransitionType };

package/dist/bundled/components/OrToast/index.js

@@ -0,0 +1,5 @@
+export { default as OrToast } from './OrToast.js';
+export { default as OrToastContainer } from '../OrToastContainer/OrToastContainer.js';
+export { PositionsX, PositionsY, ToastType, TransitionType } from './constants.js';
+export { default as useToast } from './composable/useToast.js';
+export { default as useQueue } from './composable/useQueue.js';

package/dist/bundled/components/OrToastContainer/OrToastContainer.js

@@ -0,0 +1,201 @@
+import __vue_component__$1 from '../OrToast/OrToast.js';
+import __vue_component__$2 from '../OrTeleport/OrTeleport.js';
+import { defineComponent, nextTick } from 'vue';
+import useQueue from '../OrToast/composable/useQueue.js';
+import useToastEventBus from '../OrToast/composable/useToastEventBus.js';
+import { PositionsX, PositionsY, TransitionType } from '../OrToast/constants.js';
+import { o as useToggle } from '../../index-ced52754.js';
+import { s as styleInject } from '../../style-inject.es-87955792.js';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+
+var script = defineComponent({
+  name: 'OrToastContainer',
+  components: {
+    OrToast: __vue_component__$1,
+    OrTeleport: __vue_component__$2
+  },
+  props: {
+    includeHeaderHeight: {
+      type: Boolean,
+      default: true
+    },
+    position: {
+      type: Object,
+      default: () => ({
+        positionX: PositionsX.right,
+        positionY: PositionsY.bottom
+      })
+    },
+    transition: {
+      type: String,
+      default: () => TransitionType.slide
+    }
+  },
+  setup() {
+    const {
+      on,
+      off
+    } = useToastEventBus();
+    const {
+      queue,
+      addItem,
+      removeItem,
+      clearAll,
+      getItem
+    } = useQueue();
+    const [isActive, toggle] = useToggle(false);
+    return {
+      on,
+      off,
+      isActive,
+      toggle,
+      queue,
+      addItem,
+      removeItem,
+      clearAll,
+      getItem
+    };
+  },
+  computed: {
+    getQueue() {
+      return this.queue.map(i => i.value);
+    },
+    classes() {
+      var _a, _b, _c;
+      return [`position--${(_a = this.position) === null || _a === void 0 ? void 0 : _a.positionX}`, `position--${(_b = this.position) === null || _b === void 0 ? void 0 : _b.positionY}`, {
+        'position--top--with-header': ((_c = this.position) === null || _c === void 0 ? void 0 : _c.positionY) === PositionsY.top && this.includeHeaderHeight
+      }];
+    },
+    transitionName() {
+      var _a;
+      return `or-toast--position-${(_a = this.position) === null || _a === void 0 ? void 0 : _a.positionX} or-toast--transition-${this.transition}`;
+    }
+  },
+  beforeMount() {
+    this.on('toastNotify', this.createToast);
+    this.on('toastClose', this.toastRemove);
+    this.on('toastUpdate', this.toastUpdate);
+    this.on('toastCloseAll', this.clearAll);
+  },
+  beforeDestroy() {
+    this.off('toastNotify', this.createToast);
+    this.off('toastClose', this.toastRemove);
+    this.off('toastUpdate', this.toastUpdate);
+    this.off('toastCloseAll', this.clearAll);
+  },
+  methods: {
+    createToast(toastConfiguration) {
+      const caller = () => {
+        var _a;
+        this.addItem(toastConfiguration);
+        (_a = toastConfiguration.timer) === null || _a === void 0 ? void 0 : _a.start(this.toastRemove.bind(null, toastConfiguration), toastConfiguration.toastBehaviour.duration);
+      };
+      if (!this.isActive) {
+        // before create toast we need change isActive props, to render or-teleport,
+        // in other case first item will not be animated
+        this.toggle(true);
+        nextTick(caller);
+      } else {
+        caller();
+      }
+    },
+    toastUpdate(toast) {
+      const toastItem = this.getItem(item => {
+        return item.hash === toast.hash;
+      });
+      if (toastItem) toastItem.value = toast;
+    },
+    toastRemove(toast) {
+      this.removeItem(item => {
+        var _a, _b, _c;
+        if (item.hash === toast.hash) {
+          (_b = (_a = item.toastBehaviour) === null || _a === void 0 ? void 0 : _a.onToastClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+          (_c = item.timer) === null || _c === void 0 ? void 0 : _c.stop();
+          return true;
+        }
+        return false;
+      });
+    },
+    onToastEnter(toast) {
+      var _a;
+      if (toast.toastBehaviour.pauseOnHover) (_a = toast.timer) === null || _a === void 0 ? void 0 : _a.pause();
+    },
+    onToastLeave(toast) {
+      var _a;
+      if (toast.toastBehaviour.pauseOnHover) (_a = toast.timer) === null || _a === void 0 ? void 0 : _a.resume();
+    },
+    onClick(toastBehaviour) {
+      var _a;
+      (_a = toastBehaviour.onToastClick) === null || _a === void 0 ? void 0 : _a.call(toastBehaviour);
+    },
+    onToastHidden() {
+      this.toggle(this.queue.length > 0);
+    }
+  }
+});
+
+var css_248z = "@keyframes spinAround-data-v-b11a9984{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-b11a9984{from{opacity:1}to{opacity:0}}.or-toast-container[data-v-b11a9984]{position:absolute;z-index:26;display:flex;flex-direction:column;gap:var(--s-3);justify-content:center;width:512px;max-width:calc(100% - var(--s-6));overflow:hidden}.or-toast-container span[data-v-b11a9984]{display:flex;flex-direction:column;gap:var(--s-3);justify-content:center}.position[data-v-b11a9984]{align-items:center}.position--bottom[data-v-b11a9984]{top:auto;top:initial;bottom:var(--s-6)}.position--top[data-v-b11a9984]{top:var(--s-6);bottom:auto;bottom:initial}.position--top--with-header[data-v-b11a9984]{top:calc(var(--s-6) + 48px)}.position--right[data-v-b11a9984]{right:var(--s-6);left:auto;left:initial}.position--left[data-v-b11a9984]{right:auto;right:initial;left:var(--s-6)}.position--center[data-v-b11a9984]{right:var(--s-6);left:var(--s-6)}.or-toast--transition-slide-enter-active[data-v-b11a9984],.or-toast--transition-slide-leave-active[data-v-b11a9984]{transition:transform .4s ease}.or-toast--transition-slide-enter.or-toast--position-right[data-v-b11a9984],.or-toast--transition-slide-leave-active.or-toast--position-right[data-v-b11a9984]{transform:translateX(999px)}.or-toast--transition-slide-enter.or-toast--position-left[data-v-b11a9984],.or-toast--transition-slide-leave-active.or-toast--position-left[data-v-b11a9984]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-b11a9984],.or-toast--transition-fade-leave-active[data-v-b11a9984]{transition:opacity .4s ease}.or-toast--transition-fade-enter[data-v-b11a9984],.or-toast--transition-fade-leave-active[data-v-b11a9984]{opacity:0}";
+styleInject(css_248z);
+
+/* script */
+const __vue_script__ = script;
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm.isActive ? _c('or-teleport', [_c('div', {
+    staticClass: "or-toast-container",
+    class: _vm.classes
+  }, [_c('transition-group', {
+    attrs: {
+      "name": _vm.transitionName
+    },
+    on: {
+      "after-leave": _vm.onToastHidden
+    }
+  }, _vm._l(_vm.getQueue, function (toastConfiguration) {
+    return _c('div', {
+      key: toastConfiguration.hash,
+      on: {
+        "click": function ($event) {
+          return _vm.onClick(toastConfiguration.toastBehaviour);
+        },
+        "mouseenter": function ($event) {
+          return _vm.onToastEnter(toastConfiguration);
+        },
+        "mouseleave": function ($event) {
+          return _vm.onToastLeave(toastConfiguration);
+        }
+      }
+    }, [_c('or-toast', _vm._b({
+      on: {
+        "close": function ($event) {
+          return _vm.toastRemove(toastConfiguration);
+        }
+      }
+    }, 'or-toast', toastConfiguration.toastProps, false))], 1);
+  }), 0)], 1)]) : _vm._e();
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-b11a9984";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as default };

package/dist/bundled/components/OrToastContainer/index.js

@@ -0,0 +1,4 @@
+export { default as OrToastContainer } from './OrToastContainer.js';
+export { PositionsX, PositionsY, ToastType, TransitionType } from '../OrToast/constants.js';
+export { default as useToast } from '../OrToast/composable/useToast.js';
+export { default as useQueue } from '../OrToast/composable/useQueue.js';

package/dist/bundled/components/OrToastContainerV3/OrToastContainer.js

@@ -0,0 +1,220 @@
+import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue';
+import useQueue from '../OrToastV3/composable/useQueue.js';
+import useToastEventBus from '../OrToastV3/composable/useToastEventBus.js';
+import __vue_component__$2 from '../OrToastV3/OrToast.js';
+import { P as PositionsX, a as PositionsY, b as TransitionType } from '../../props-b2f62ced.js';
+import { ToastContainer, ToastContainerPositions } from '../OrToastV3/styles.js';
+import __vue_component__$1 from '../OrTeleportV3/OrTeleport.js';
+import { o as useToggle } from '../../index-ced52754.js';
+import { useElevation } from '../../hooks/useElevation.js';
+import { s as styleInject } from '../../style-inject.es-87955792.js';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+
+var script = defineComponent({
+  name: 'OrToastContainer',
+  components: {
+    OrTeleport: __vue_component__$1,
+    OrToast: __vue_component__$2
+  },
+  props: {
+    includeHeaderHeight: {
+      type: Boolean,
+      default: true
+    },
+    position: {
+      type: Object,
+      default: {
+        positionX: PositionsX.Right,
+        positionY: PositionsY.Bottom
+      }
+    },
+    transition: {
+      type: String,
+      default: () => TransitionType.Slide
+    }
+  },
+  setup(props) {
+    // Refs
+    const root = ref();
+    const {
+      on,
+      off
+    } = useToastEventBus();
+    const {
+      queue: queueRef,
+      addItem,
+      removeItem,
+      clearAll,
+      getItem
+    } = useQueue();
+    const [isActive, toggle] = useToggle(false);
+    const classes = computed(() => {
+      var _a;
+      return ['or-toast-container-v3', ...ToastContainer, ...ToastContainerPositions[`${props.position.positionX}-${props.position.positionY}`], {
+        'position--top--with-header': ((_a = props.position) === null || _a === void 0 ? void 0 : _a.positionY) === PositionsY.Top && props.includeHeaderHeight
+      }];
+    });
+    const transitionName = computed(() => {
+      var _a;
+      return `or-toast--position-${(_a = props.position) === null || _a === void 0 ? void 0 : _a.positionX} or-toast--transition-${props.transition}`;
+    });
+    // State
+    const queue = computed(() => {
+      return queueRef.value.map(({
+        value
+      }) => value);
+    });
+    // Methods
+    function createToast(toastConfiguration) {
+      const caller = () => {
+        var _a;
+        addItem(toastConfiguration);
+        (_a = toastConfiguration.timer) === null || _a === void 0 ? void 0 : _a.start(toastRemove.bind(null, toastConfiguration), toastConfiguration.toastBehaviour.duration);
+      };
+      if (!isActive.value) {
+        // before create toast we need change isActive props, to render or-teleport,
+        // in other case first item will not be animated
+        toggle(true);
+        nextTick(caller);
+      } else {
+        caller();
+      }
+    }
+    function toastUpdate(toast) {
+      const toastItem = getItem(item => {
+        return item.hash === toast.hash;
+      });
+      if (toastItem) toastItem.value = toast;
+    }
+    function toastRemove(toast) {
+      removeItem(item => {
+        var _a, _b, _c;
+        if (item.hash === toast.hash) {
+          (_b = (_a = item.toastBehaviour) === null || _a === void 0 ? void 0 : _a.onToastClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+          (_c = item.timer) === null || _c === void 0 ? void 0 : _c.stop();
+          return true;
+        }
+        return false;
+      });
+    }
+    function onToastEnter(toast) {
+      var _a;
+      if (toast.toastBehaviour.pauseOnHover) (_a = toast.timer) === null || _a === void 0 ? void 0 : _a.pause();
+    }
+    function onToastLeave(toast) {
+      var _a;
+      if (toast.toastBehaviour.pauseOnHover) (_a = toast.timer) === null || _a === void 0 ? void 0 : _a.resume();
+    }
+    function onClick(toastBehaviour) {
+      var _a;
+      (_a = toastBehaviour.onToastClick) === null || _a === void 0 ? void 0 : _a.call(toastBehaviour);
+    }
+    function onToastHidden() {
+      toggle(queue.value.length > 0);
+    }
+    // Effects
+    onBeforeMount(() => {
+      on('toastNotify', createToast);
+      on('toastClose', toastRemove);
+      on('toastUpdate', toastUpdate);
+      on('toastCloseAll', clearAll);
+    });
+    onBeforeUnmount(() => {
+      off('toastNotify', createToast);
+      off('toastClose', toastRemove);
+      off('toastUpdate', toastUpdate);
+      off('toastCloseAll', clearAll);
+    });
+    useElevation(root, isActive);
+    return {
+      on,
+      off,
+      classes,
+      transitionName,
+      isActive,
+      toggle,
+      addItem,
+      removeItem,
+      clearAll,
+      getItem,
+      queue,
+      root,
+      createToast,
+      toastUpdate,
+      toastRemove,
+      onToastEnter,
+      onToastLeave,
+      onClick,
+      onToastHidden
+    };
+  }
+});
+
+var css_248z = ".or-toast--transition-slide-enter-active[data-v-2b7b5706],.or-toast--transition-slide-leave-active[data-v-2b7b5706]{transition:transform .4s ease}.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-2b7b5706],.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-2b7b5706]{transform:translateX(999px)}.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-2b7b5706],.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-2b7b5706]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-2b7b5706],.or-toast--transition-fade-leave-active[data-v-2b7b5706]{transition:opacity .4s ease}.or-toast--transition-fade-enter-from[data-v-2b7b5706],.or-toast--transition-fade-leave-to[data-v-2b7b5706]{opacity:0}";
+styleInject(css_248z);
+
+/* script */
+const __vue_script__ = script;
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('OrTeleport', {
+    attrs: {
+      "disabled": _vm.isActive
+    }
+  }, [_c('div', {
+    ref: 'root',
+    class: _vm.classes
+  }, [_c('TransitionGroup', {
+    staticClass: "contents",
+    attrs: {
+      "name": _vm.transitionName,
+      "tag": "div"
+    },
+    on: {
+      "after-leave": _vm.onToastHidden
+    }
+  }, _vm._l(_vm.queue, function (toastConfiguration) {
+    return _c('OrToast', _vm._b({
+      key: toastConfiguration.hash,
+      on: {
+        "click": function ($event) {
+          return _vm.onClick(toastConfiguration.toastBehaviour);
+        },
+        "mouseenter": function ($event) {
+          return _vm.onToastEnter(toastConfiguration);
+        },
+        "mouseleave": function ($event) {
+          return _vm.onToastLeave(toastConfiguration);
+        },
+        "close": function ($event) {
+          return _vm.toastRemove(toastConfiguration);
+        }
+      }
+    }, 'OrToast', toastConfiguration.toastProps, false));
+  }), 1)], 1)]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-2b7b5706";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as default };

package/dist/bundled/components/OrToastContainerV3/index.js

@@ -0,0 +1,5 @@
+export { default as OrToastContainerV3 } from './OrToastContainer.js';
+export { TypesV3 } from '../OrToastV3/index.js';
+export { p as PropsV3 } from '../../props-b2f62ced.js';
+export { default as useToastV3 } from '../OrToastV3/composable/useToast.js';
+export { default as useQueueV3 } from '../OrToastV3/composable/useQueue.js';