@onereach/ui-components 2.77.0-beta.2448.0 → 2.77.0-beta.2460.0

package/dist/bundled/v2/components/OrToast/OrToastContainer.vue.d.ts

@@ -0,0 +1,93 @@
+import { PropType } from 'vue-demi';
+import { Position, ToastBehaviour, ToastConfiguration } from '../types';
+import { PositionsX, PositionsY, TransitionType } from '../constants';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    on: (namedQueue: import("../composable/useToastEventBus").ToastEventsBusEvents, listener: import("@vueuse/core").EventBusListener<ToastConfiguration, any>) => void;
+    off: (namedQueue: import("../composable/useToastEventBus").ToastEventsBusEvents, listener: import("@vueuse/core").EventBusListener<ToastConfiguration, any>) => void;
+    isActive: import("@vue/composition-api").Ref<boolean>;
+    toggle: (value?: boolean | undefined) => boolean;
+    queue: import("@vue/composition-api").Ref<import("@vue/composition-api").Ref<ToastConfiguration>[]>;
+    addItem: (item: ToastConfiguration) => void;
+    removeItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => void;
+    clearAll: () => void;
+    getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
+}> & import("@vue/composition-api").Data, {
+    createToast(toastConfiguration: ToastConfiguration): void;
+    toastUpdate(toast: ToastConfiguration): void;
+    toastRemove(toast: ToastConfiguration): void;
+    onToastEnter(toast: ToastConfiguration): void;
+    onToastLeave(toast: ToastConfiguration): void;
+    onClick(toastBehaviour: ToastBehaviour): void;
+    onToastHidden(): void;
+}, {
+    getQueue(): ToastConfiguration[];
+    classes(): (Record<string, boolean> | string)[];
+    transitionName(): string;
+}, {
+    includeHeaderHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: PropType<Position>;
+        default: () => {
+            positionX: PositionsX;
+            positionY: PositionsY;
+        };
+    };
+    transition: {
+        type: PropType<TransitionType>;
+        default: TransitionType;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    includeHeaderHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: PropType<Position>;
+        default: () => {
+            positionX: PositionsX;
+            positionY: PositionsY;
+        };
+    };
+    transition: {
+        type: PropType<TransitionType>;
+        default: TransitionType;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    includeHeaderHeight: boolean;
+    position: Position;
+    transition: TransitionType;
+} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+    on: (namedQueue: import("../composable/useToastEventBus").ToastEventsBusEvents, listener: import("@vueuse/core").EventBusListener<ToastConfiguration, any>) => void;
+    off: (namedQueue: import("../composable/useToastEventBus").ToastEventsBusEvents, listener: import("@vueuse/core").EventBusListener<ToastConfiguration, any>) => void;
+    isActive: import("@vue/composition-api").Ref<boolean>;
+    toggle: (value?: boolean | undefined) => boolean;
+    queue: import("@vue/composition-api").Ref<import("@vue/composition-api").Ref<ToastConfiguration>[]>;
+    addItem: (item: ToastConfiguration) => void;
+    removeItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => void;
+    clearAll: () => void;
+    getItem: (condition: (i: ToastConfiguration, index: number, queue: import("@vue/composition-api").Ref<ToastConfiguration>[]) => boolean) => import("@vue/composition-api").Ref<ToastConfiguration>;
+}>, import("@vue/composition-api").Data, {
+    getQueue(): ToastConfiguration[];
+    classes(): (Record<string, boolean> | string)[];
+    transitionName(): string;
+}, {
+    createToast(toastConfiguration: ToastConfiguration): void;
+    toastUpdate(toast: ToastConfiguration): void;
+    toastRemove(toast: ToastConfiguration): void;
+    onToastEnter(toast: ToastConfiguration): void;
+    onToastLeave(toast: ToastConfiguration): void;
+    onClick(toastBehaviour: ToastBehaviour): void;
+    onToastHidden(): void;
+}, {}, {}, {}, {
+    includeHeaderHeight: boolean;
+    position: Position;
+    transition: TransitionType;
+} & {}, {
+    includeHeaderHeight: boolean;
+    position: Position;
+    transition: TransitionType;
+}, true>);
+export default _default;

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

@@ -0,0 +1,7 @@
+export { default as useToast } from './useToast.js';
+export { default as useQueue } from './useQueue.js';
+import '../Timer.js';
+import '@vueuse/core';
+import './useToastEventBus.js';
+import '../constants.js';
+import 'vue-demi';

package/dist/bundled/{v3/components/OrToast → v2/components/OrToast/composable}/useToast.js

@@ -1,6 +1,6 @@
-import Timer from './Timer.js';
+import Timer from '../Timer.js';
 import useToastEventBus from './useToastEventBus.js';
-import { ToastType } from './constants.js';
+import { ToastType } from '../constants.js';
 import '@vueuse/core';
 
 function useToast(globalToastProps = {}) {

package/dist/bundled/v2/components/OrToast/index.d.ts

@@ -1,5 +1,5 @@
-export { default as OrToast } from './OrToast.vue';
-export { default as OrToastContainer } from './or-toast-container/OrToastContainer.vue';
-export * from './composable';
-export * from './types';
-export * from './constants';
+export { default as useToast } from './useToast';
+export { default as useQueue } from './useQueue';
+
+export * from '../types';
+export * from '../constants';

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

@@ -1,7 +1,30 @@
-export { default as useToast } from './useToast.js';
-export { default as useQueue } from './useQueue.js';
-import './Timer.js';
-import '@vueuse/core';
-import './useToastEventBus.js';
-import './constants.js';
+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';
 import 'vue-demi';
+import '../OrProgress/OrProgress.js';
+import 'lodash';
+import '../OrProgress/constants.js';
+import '../../style-inject.es-4c6f2515.js';
+import '../../normalize-component-6e8e3d80.js';
+import '../OrIconButtonV2/OrIconButton.js';
+import '../OrTooltip/OrTooltip.js';
+import '../OrTooltipContent/OrTooltipContent.js';
+import '../OrFloating/OrFloating.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrTeleport/OrTeleport.js';
+import 'portal-vue/dist/portal-vue.esm.js';
+import '../OrTeleport/constants.js';
+import '../OrFloating/constants.js';
+import '../../utils/functions/dom.js';
+import '../OrButtonV2/constants.js';
+import '../OrIcon/OrIcon.js';
+import '../OrIcon/constants.js';
+import '../../utils/functions/px-to-rem.js';
+import '../OrLoader/OrLoader.js';
+import '../OrLoader/constants.js';
+import '@vueuse/core';
+import './composable/useToastEventBus.js';
+import './Timer.js';

package/dist/bundled/v2/components/OrToast/useQueue.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue-demi';
+export default function useQueue<T>(initialValue?: Array<T>): {
+    queue: Ref<Ref<T>[]>;
+    addItem: (item: T) => void;
+    removeItem: (condition: (i: T, index: number, queue: Ref<T>[]) => boolean) => void;
+    clearAll: () => void;
+    getItem: (condition: (i: T, index: number, queue: Ref<T>[]) => boolean) => Ref<T>;
+};

package/dist/bundled/v2/components/OrToast/useToast.d.ts

@@ -0,0 +1,13 @@
+import { ToastBehaviour, ToastProps } from '../types';
+interface UseToastNotifyReturns {
+    close: () => void;
+    update: (data: ToastProps) => void;
+}
+export default function useToast(globalToastProps?: ToastProps): {
+    notify: (props: ToastProps, behaviour?: ToastBehaviour) => UseToastNotifyReturns;
+    clearAll: () => void;
+    success: (props: ToastProps, behaviour?: ToastBehaviour) => UseToastNotifyReturns;
+    error: (props: ToastProps, behaviour?: ToastBehaviour) => UseToastNotifyReturns;
+    loading: (props: ToastProps, behaviour?: ToastBehaviour) => UseToastNotifyReturns;
+};
+export {};

package/dist/bundled/v2/components/OrToast/useToastEventBus.d.ts

@@ -0,0 +1,9 @@
+import { EventBusListener } from '@vueuse/core';
+import { ToastConfiguration } from '../types';
+export type ToastEventsBusEvents = 'toastNotify' | 'toastClose' | 'toastCloseAll' | 'toastUpdate';
+declare const _default: () => {
+    on: (namedQueue: ToastEventsBusEvents, listener: EventBusListener<ToastConfiguration, any>) => void;
+    off: (namedQueue: ToastEventsBusEvents, listener: EventBusListener<ToastConfiguration, any>) => void;
+    emit: (namedQueue: ToastEventsBusEvents, data?: ToastConfiguration | undefined) => void;
+};
+export default _default;

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

@@ -2,15 +2,15 @@ import __vue_component__$1 from '../OrToast/OrToast.js';
 import __vue_component__$2 from '../OrTeleport/OrTeleport.js';
 import { defineComponent, nextTick } from 'vue-demi';
 import { useToggle } from '@vueuse/core';
-import useQueue from '../OrToast/useQueue.js';
-import useToastEventBus from '../OrToast/useToastEventBus.js';
+import useQueue from '../OrToast/composable/useQueue.js';
+import useToastEventBus from '../OrToast/composable/useToastEventBus.js';
 import { PositionsX, PositionsY, TransitionType } from '../OrToast/constants.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrProgress/OrProgress.js';
 import 'lodash';
 import '../OrProgress/constants.js';
-import '../OrIconButton/OrIconButton.js';
+import '../OrIconButtonV2/OrIconButton.js';
 import '../OrTooltip/OrTooltip.js';
 import '../OrTooltipContent/OrTooltipContent.js';
 import '../OrFloating/OrFloating.js';

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

@@ -1,7 +1,7 @@
 export { default as OrToastContainer } from './OrToastContainer.js';
 export { PositionsX, PositionsY, ToastType, TransitionType } from '../OrToast/constants.js';
-export { default as useToast } from '../OrToast/useToast.js';
-export { default as useQueue } from '../OrToast/useQueue.js';
+export { default as useToast } from '../OrToast/composable/useToast.js';
+export { default as useQueue } from '../OrToast/composable/useQueue.js';
 import '../OrToast/OrToast.js';
 import 'vue-demi';
 import '../OrProgress/OrProgress.js';
@@ -9,7 +9,7 @@ import 'lodash';
 import '../OrProgress/constants.js';
 import '../../style-inject.es-4c6f2515.js';
 import '../../normalize-component-6e8e3d80.js';
-import '../OrIconButton/OrIconButton.js';
+import '../OrIconButtonV2/OrIconButton.js';
 import '../OrTooltip/OrTooltip.js';
 import '../OrTooltipContent/OrTooltipContent.js';
 import '../OrFloating/OrFloating.js';
@@ -26,5 +26,5 @@ import '../../utils/functions/px-to-rem.js';
 import '../OrLoader/OrLoader.js';
 import '../OrLoader/constants.js';
 import '@vueuse/core';
-import '../OrToast/useToastEventBus.js';
+import '../OrToast/composable/useToastEventBus.js';
 import '../OrToast/Timer.js';

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

@@ -0,0 +1,232 @@
+import { useToggle } from '@vueuse/core';
+import { defineComponent, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
+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, T as TransitionType } from '../../props-7be029c7.js';
+import { ToastContainer, ToastContainerPositions } from '../OrToastV3/styles.js';
+import __vue_component__$1 from '../OrTeleportV3/OrTeleport.js';
+import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import '../OrIconButtonV3/OrIconButton.js';
+import '../OrIconButtonV3/props.js';
+import '../OrIconV3/props.js';
+import '../OrIconButtonV3/styles.js';
+import '../OrIconV3/OrIcon.js';
+import '../OrIconV3/styles.js';
+import '../OrTooltipV3/OrTooltip.js';
+import '../OrTooltipV3/styles.js';
+import '../OrPopoverV3/OrPopover.js';
+import '../../floating-ui.dom.esm-83eba816.js';
+import '../OrPopoverV3/props.js';
+import '../OrPopoverV3/styles.js';
+import '../OrBottomSheetV3/OrBottomSheet.js';
+import '../OrBottomSheetV3/styles.js';
+import '../OrOverlayV3/OrOverlay.js';
+import '../OrOverlayV3/styles.js';
+import '../../hooks/useElevation.js';
+import '../../utils/isVisible.js';
+import '../../hooks/useResponsive/useResponsive.js';
+import '../OrLoaderV3/OrLoader.js';
+import '../OrLoaderV3/props.js';
+import '../OrLoaderV3/styles.js';
+import 'portal-vue';
+
+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
+    };
+  }
+});
+
+var css_248z = ".or-toast-container[data-v-521acbe2]{z-index:26}.or-toast--transition-slide-enter-active[data-v-521acbe2],.or-toast--transition-slide-leave-active[data-v-521acbe2]{transition:transform .4s ease}.or-toast--transition-slide-enter-from.or-toast--position-right[data-v-521acbe2],.or-toast--transition-slide-leave-to.or-toast--position-right[data-v-521acbe2]{transform:translateX(999px)}.or-toast--transition-slide-enter-from.or-toast--position-left[data-v-521acbe2],.or-toast--transition-slide-leave-to.or-toast--position-left[data-v-521acbe2]{transform:translateX(-999px)}.or-toast--transition-fade-enter-active[data-v-521acbe2],.or-toast--transition-fade-leave-active[data-v-521acbe2]{transition:opacity .4s ease}.or-toast--transition-fade-enter-from[data-v-521acbe2],.or-toast--transition-fade-leave-to[data-v-521acbe2]{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('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__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-521acbe2";
+/* 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/v2/components/OrToastContainerV3/index.js

@@ -1,35 +1,36 @@
-export { _ as OrToastContainerV3 } from '../../OrToastContainer-38cc76b5.js';
+export { default as OrToastContainerV3 } from './OrToastContainer.js';
 export { t as TypesV3 } from '../../types-668300dd.js';
-export { p as PropsV3 } from '../../props-fb3f60a5.js';
-export { default as useToastV3 } from '../OrToastV3/useToast.js';
-export { default as useQueueV3 } from '../OrToastV3/useQueue.js';
+export { p as PropsV3 } from '../../props-7be029c7.js';
+export { default as useToastV3 } from '../OrToastV3/composable/useToast.js';
+export { default as useQueueV3 } from '../OrToastV3/composable/useQueue.js';
 import '@vueuse/core';
 import 'vue-demi';
-import '../OrToastV3/useToastEventBus.js';
+import '../OrToastV3/composable/useToastEventBus.js';
+import '../OrToastV3/OrToast.js';
 import '../OrToastV3/styles.js';
-import '../../OrIconButton-3c5bac86.js';
+import '../OrIconButtonV3/OrIconButton.js';
 import '../OrIconButtonV3/props.js';
 import '../OrIconV3/props.js';
 import '../OrIconButtonV3/styles.js';
-import '../../OrIcon-7582c4d1.js';
+import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/styles.js';
 import '../../normalize-component-6e8e3d80.js';
-import '../../OrTooltip-6c689e3b.js';
+import '../OrTooltipV3/OrTooltip.js';
 import '../OrTooltipV3/styles.js';
-import '../OrPopover/OrPopover.js';
+import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
 import '../OrPopoverV3/props.js';
 import '../OrPopoverV3/styles.js';
-import '../OrBottomSheet/OrBottomSheet.js';
+import '../OrBottomSheetV3/OrBottomSheet.js';
 import '../OrBottomSheetV3/styles.js';
-import '../../OrOverlay-831c4cf3.js';
+import '../OrOverlayV3/OrOverlay.js';
 import '../OrOverlayV3/styles.js';
-import '../../OrTeleport.vue2-259d6f25.js';
+import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
 import '../../hooks/useResponsive/useResponsive.js';
-import '../../OrLoader-f011afff.js';
+import '../OrLoaderV3/OrLoader.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../../style-inject.es-4c6f2515.js';