@onereach/ui-components 2.68.0-beta.2082.0 → 2.68.0-beta.2083.0

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

@@ -1,29 +1,32 @@
+import __vue_component__$1 from '../OrToast/OrToast.js';
+import __vue_component__$2 from '../OrTeleportVue2/OrTeleportVue2.js';
+import { defineComponent, nextTick } from 'vue-demi';
 import { useToggle } from '@vueuse/core';
-import { defineComponent, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
-import { u as useToastEventBus, a as useQueue } from '../../useToastEventBus-422dae05.js';
-import { _ as __vue_component__$2, T as ToastContainer, a as ToastContainerPositions } from '../../OrToast-64917bd0.js';
-import { P as PositionsX, a as PositionsY, b as TransitionType } from '../../props-fb3f60a5.js';
-import __vue_component__$1 from '../OrTeleport.vue2/OrTeleport.vue2.js';
+import { u as useToastEventBus, a as useQueue } from '../../useToastEventBus-578adc7c.js';
+import { P as PositionsX, a as PositionsY, b as TransitionType } from '../../constants-25998e4c.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import { c as createInjector } from '../../browser-82dea9ed.js';
-import '../../OrIconButton-cf05263d.js';
-import '../../OrIcon-8dcb2a6e.js';
-import '../../useClassAttribute-47fdb016.js';
+import '../../OrProgress-4ee24824.js';
+import 'lodash';
+import '../OrIconButtonV2/OrIconButtonV2.js';
+import '../OrTooltipWrapperV2/OrTooltipWrapperV2.js';
 import '../OrTooltip/OrTooltip.js';
-import '../../OrPopover-f03a8230.js';
+import '../OrTooltipContent/OrTooltipContent.js';
+import '../../OrFloating-7a3e6fdd.js';
 import '../../floating-ui.dom.esm-83eba816.js';
-import '../OrBottomSheet/OrBottomSheet.js';
-import '../OrOverlay/OrOverlay.js';
-import '../../useElevation-31bfe1f6.js';
-import 'portal-vue';
-import '../../useResponsive-a02e95b7.js';
-import '../../OrLoader-7dd59764.js';
+import '../../dom-28f5f62a.js';
+import 'portal-vue/dist/portal-vue.esm.js';
+import '../../constants-b4c183aa.js';
+import '../../constants-c5d1139f.js';
+import '../../OrIcon-bb0cf737.js';
+import '../../px-to-rem-0b26b83e.js';
+import '../../OrLoader-003941a2.js';
 
 var script = defineComponent({
   name: 'OrToastContainer',
   components: {
-    OrTeleport: __vue_component__$1,
-    OrToast: __vue_component__$2
+    OrToast: __vue_component__$1,
+    OrTeleport: __vue_component__$2
   },
   props: {
     includeHeaderHeight: {
@@ -32,69 +35,92 @@ var script = defineComponent({
     },
     position: {
       type: Object,
-      default: {
-        positionX: PositionsX.Right,
-        positionY: PositionsY.Bottom
-      }
+      default: () => ({
+        positionX: PositionsX.right,
+        positionY: PositionsY.bottom
+      })
     },
     transition: {
       type: String,
-      default: TransitionType.Slide
+      default: TransitionType.slide
     }
   },
-  setup(props) {
+  setup() {
     const {
       on,
       off
     } = useToastEventBus();
     const {
-      queue: queueRef,
+      queue,
       addItem,
       removeItem,
       clearAll,
       getItem
     } = useQueue();
     const [isActive, toggle] = useToggle(false);
-    const classes = computed(() => {
-      var _a;
-      return ['or-toast-container', ...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
+    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
       }];
-    });
-    const transitionName = computed(() => {
+    },
+    transitionName() {
       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) {
+      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;
-        addItem(toastConfiguration);
-        (_a = toastConfiguration.timer) === null || _a === void 0 ? void 0 : _a.start(toastRemove.bind(null, toastConfiguration), toastConfiguration.toastBehaviour.duration);
+        this.addItem(toastConfiguration);
+        (_a = toastConfiguration.timer) === null || _a === void 0 ? void 0 : _a.start(this.toastRemove.bind(null, toastConfiguration), toastConfiguration.toastBehaviour.duration);
       };
-      if (!isActive.value) {
+      if (!this.isActive) {
         // before create toast we need change isActive props, to render or-teleport,
         // in other case first item will not be animated
-        toggle(true);
+        this.toggle(true);
         nextTick(caller);
       } else {
         caller();
       }
-    }
-    function toastUpdate(toast) {
-      const toastItem = getItem(item => {
+    },
+    toastUpdate(toast) {
+      const toastItem = this.getItem(item => {
         return item.hash === toast.hash;
       });
       if (toastItem) toastItem.value = toast;
-    }
-    function toastRemove(toast) {
-      removeItem(item => {
+    },
+    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);
@@ -103,55 +129,22 @@ var script = defineComponent({
         }
         return false;
       });
-    }
-    function onToastEnter(toast) {
+    },
+    onToastEnter(toast) {
       var _a;
       if (toast.toastBehaviour.pauseOnHover) (_a = toast.timer) === null || _a === void 0 ? void 0 : _a.pause();
-    }
-    function onToastLeave(toast) {
+    },
+    onToastLeave(toast) {
       var _a;
       if (toast.toastBehaviour.pauseOnHover) (_a = toast.timer) === null || _a === void 0 ? void 0 : _a.resume();
-    }
-    function onClick(toastBehaviour) {
+    },
+    onClick(toastBehaviour) {
       var _a;
       (_a = toastBehaviour.onToastClick) === null || _a === void 0 ? void 0 : _a.call(toastBehaviour);
+    },
+    onToastHidden() {
+      this.toggle(this.queue.length > 0);
     }
-    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);
-    });
-    return {
-      on,
-      off,
-      classes,
-      transitionName,
-      isActive,
-      toggle,
-      addItem,
-      removeItem,
-      clearAll,
-      getItem,
-      queue,
-      createToast,
-      toastUpdate,
-      toastRemove,
-      onToastEnter,
-      onToastLeave,
-      onClick,
-      onToastHidden
-    };
   }
 });
 
@@ -163,18 +156,18 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm.isActive ? _c('OrTeleport', [_c('div', {
+  return _vm.isActive ? _c('or-teleport', [_c('div', {
+    staticClass: "or-toast-container",
     class: _vm.classes
-  }, [_c('TransitionGroup', {
-    class: ['contents'],
+  }, [_c('transition-group', {
     attrs: {
       "name": _vm.transitionName
     },
     on: {
       "after-leave": _vm.onToastHidden
     }
-  }, _vm._l(_vm.queue, function (toastConfiguration) {
-    return _c('OrToast', _vm._b({
+  }, _vm._l(_vm.getQueue, function (toastConfiguration) {
+    return _c('div', {
       key: toastConfiguration.hash,
       on: {
         "click": function ($event) {
@@ -185,27 +178,30 @@ var __vue_render__ = function () {
         },
         "mouseleave": function ($event) {
           return _vm.onToastLeave(toastConfiguration);
-        },
+        }
+      }
+    }, [_c('or-toast', _vm._b({
+      on: {
         "close": function ($event) {
           return _vm.toastRemove(toastConfiguration);
         }
       }
-    }, 'OrToast', toastConfiguration.toastProps, false));
-  }), 1)], 1)]) : _vm._e();
+    }, 'or-toast', toastConfiguration.toastProps, false))], 1);
+  }), 0)], 1)]) : _vm._e();
 };
 var __vue_staticRenderFns__ = [];
 
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-13aec892_0", {
-    source: ".or-toast-container[data-v-13aec892]{z-index:26}.or-toast--transition-slide-enter-active[data-v-13aec892],.or-toast--transition-slide-leave-active[data-v-13aec892]{transition:transform .4s ease}.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-13aec892],.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-13aec892]{transform:translateX(999px)}.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-13aec892],.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-13aec892]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-13aec892],.or-toast--transition-fade-leave-active[data-v-13aec892]{transition:opacity .4s ease}.or-toast--transition-fade-enter-from[data-v-13aec892],.or-toast--transition-fade-leave-to[data-v-13aec892]{opacity:0}",
+  inject("data-v-bf11cbf6_0", {
+    source: "@keyframes spinAround-data-v-bf11cbf6{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-bf11cbf6{from{opacity:1}to{opacity:0}}.or-toast-container[data-v-bf11cbf6]{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-bf11cbf6]{display:flex;flex-direction:column;gap:var(--s-3);justify-content:center}.position[data-v-bf11cbf6]{align-items:center}.position--bottom[data-v-bf11cbf6]{top:initial;bottom:var(--s-6)}.position--top[data-v-bf11cbf6]{top:var(--s-6);bottom:initial}.position--top--with-header[data-v-bf11cbf6]{top:calc(var(--s-6) + 48px)}.position--right[data-v-bf11cbf6]{right:var(--s-6);left:initial}.position--left[data-v-bf11cbf6]{right:initial;left:var(--s-6)}.position--center[data-v-bf11cbf6]{right:var(--s-6);left:var(--s-6)}.or-toast--transition-slide-enter-active[data-v-bf11cbf6],.or-toast--transition-slide-leave-active[data-v-bf11cbf6]{transition:transform .4s ease}.or-toast--transition-slide-enter.or-toast--position-right[data-v-bf11cbf6],.or-toast--transition-slide-leave-active.or-toast--position-right[data-v-bf11cbf6]{transform:translateX(999px)}.or-toast--transition-slide-enter.or-toast--position-left[data-v-bf11cbf6],.or-toast--transition-slide-leave-active.or-toast--position-left[data-v-bf11cbf6]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-bf11cbf6],.or-toast--transition-fade-leave-active[data-v-bf11cbf6]{transition:opacity .4s ease}.or-toast--transition-fade-enter[data-v-bf11cbf6],.or-toast--transition-fade-leave-active[data-v-bf11cbf6]{opacity:0}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-const __vue_scope_id__ = "data-v-13aec892";
+const __vue_scope_id__ = "data-v-bf11cbf6";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

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

@@ -0,0 +1,222 @@
+import { useToggle } from '@vueuse/core';
+import { defineComponent, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
+import { u as useToastEventBus, a as useQueue } from '../../useToastEventBus-422dae05.js';
+import { _ as __vue_component__$2, T as ToastContainer, a as ToastContainerPositions } from '../../OrToast-64c8f602.js';
+import { P as PositionsX, a as PositionsY, b as TransitionType } from '../../props-fb3f60a5.js';
+import __vue_component__$1 from '../OrTeleport.vue2V3/OrTeleport.vue2V3.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import { c as createInjector } from '../../browser-82dea9ed.js';
+import '../../OrIconButton-6fd136ab.js';
+import '../../OrIcon-8dcb2a6e.js';
+import '../../useClassAttribute-47fdb016.js';
+import '../OrTooltipV3/OrTooltipV3.js';
+import '../../OrPopover-021897c6.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrBottomSheetV3/OrBottomSheetV3.js';
+import '../OrOverlayV3/OrOverlayV3.js';
+import '../../useElevation-31bfe1f6.js';
+import 'portal-vue';
+import '../../useResponsive-a02e95b7.js';
+import '../../OrLoader-7dd59764.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) {
+    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', ...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);
+    });
+    return {
+      on,
+      off,
+      classes,
+      transitionName,
+      isActive,
+      toggle,
+      addItem,
+      removeItem,
+      clearAll,
+      getItem,
+      queue,
+      createToast,
+      toastUpdate,
+      toastRemove,
+      onToastEnter,
+      onToastLeave,
+      onClick,
+      onToastHidden
+    };
+  }
+});
+
+/* 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('OrTeleport', [_c('div', {
+    class: _vm.classes
+  }, [_c('TransitionGroup', {
+    class: ['contents'],
+    attrs: {
+      "name": _vm.transitionName
+    },
+    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)]) : _vm._e();
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = function (inject) {
+  if (!inject) return;
+  inject("data-v-13aec892_0", {
+    source: ".or-toast-container[data-v-13aec892]{z-index:26}.or-toast--transition-slide-enter-active[data-v-13aec892],.or-toast--transition-slide-leave-active[data-v-13aec892]{transition:transform .4s ease}.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-13aec892],.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-13aec892]{transform:translateX(999px)}.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-13aec892],.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-13aec892]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-13aec892],.or-toast--transition-fade-leave-active[data-v-13aec892]{transition:opacity .4s ease}.or-toast--transition-fade-enter-from[data-v-13aec892],.or-toast--transition-fade-leave-to[data-v-13aec892]{opacity:0}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__ = "data-v-13aec892";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* 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, createInjector, undefined, undefined);
+
+export { __vue_component__ as default };

package/dist/bundled/v2/components/OrToastV3/OrToastV3.js

@@ -0,0 +1,19 @@
+export { _ as default } from '../../OrToast-64c8f602.js';
+import '../../normalize-component-6e8e3d80.js';
+import '../../browser-82dea9ed.js';
+import 'vue-demi';
+import '../../props-fb3f60a5.js';
+import '../../OrIconButton-6fd136ab.js';
+import '../../OrIcon-8dcb2a6e.js';
+import '../../useClassAttribute-47fdb016.js';
+import '../OrTooltipV3/OrTooltipV3.js';
+import '@vueuse/core';
+import '../../OrPopover-021897c6.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrBottomSheetV3/OrBottomSheetV3.js';
+import '../OrOverlayV3/OrOverlayV3.js';
+import '../OrTeleport.vue2V3/OrTeleport.vue2V3.js';
+import 'portal-vue';
+import '../../useElevation-31bfe1f6.js';
+import '../../useResponsive-a02e95b7.js';
+import '../../OrLoader-7dd59764.js';