@onereach/ui-components 8.4.0-beta.3653.0 → 8.4.0

package/dist/bundled/v2/components/OrMenuV3/OrMenu.js

@@ -1,2 +1,131 @@
-export { _ as default } from '../OrMenuV3-f642c1e3.js';
-import '../OrAvatar-56c993c9.js';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { Menu } from './styles.js';
+import __vue_component__$1 from '../OrPopoverV3/OrPopover.js';
+import { PopoverPlacement } from '../OrPopoverV3/props.js';
+import { usePopoverState } from '../../hooks/usePopoverState.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  components: {
+    OrPopover: __vue_component__$1
+  },
+  inheritAttrs: false,
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
+    trigger: {
+      type: [Object, HTMLElement],
+      default: undefined
+    },
+    placement: {
+      type: String,
+      default: PopoverPlacement.Bottom
+    },
+    offset: {
+      type: [Number, Object, Function],
+      default: undefined
+    },
+    // TODO: Remove after migration to Vue 3
+    additionalStyles: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['update:state', 'open', 'close'],
+  expose: ['root', 'state', 'open', 'close', 'toggle'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-menu-v3', ...Menu]);
+    const popoverStyles = computed(() => ['or-menu-popover-v3']);
+    // State
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
+    // Handlers
+    function onClick(event) {
+      const path = event.composedPath();
+      if (path.some(_ref => {
+        let {
+          classList
+        } = _ref;
+        return classList === null || classList === void 0 ? void 0 : classList.contains('or-menu-item-v3');
+      })) {
+        close();
+      }
+    }
+    return {
+      root,
+      rootStyles,
+      popoverStyles,
+      state,
+      open,
+      close,
+      toggle,
+      onClick
+    };
+  }
+});
+
+/* 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('OrPopover', {
+    class: _vm.popoverStyles,
+    attrs: {
+      "custom-styles": _vm.popoverStyles,
+      "is-open": _vm.state === 'open',
+      "variant": 'auto',
+      "trigger": _vm.trigger,
+      "placement": _vm.placement,
+      "offset": _vm.offset
+    },
+    on: {
+      "update:state": function ($event) {
+        _vm.state = $event;
+      }
+    }
+  }, [_c('div', _vm._b({
+    ref: "root",
+    class: [_vm.rootStyles].concat(_vm.additionalStyles),
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.onClick($event);
+      }
+    }
+  }, 'div', _vm.$attrs, false), [_vm._t("default")], 2)]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* 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/OrMenuV3/index.js

@@ -1,2 +1,2 @@
-export { _ as OrMenuV3 } from '../OrMenuV3-f642c1e3.js';
-export { P as MenuPlacement } from '../OrPopoverV3-e3e14417.js';
+export { default as OrMenuV3 } from './OrMenu.js';
+export { PopoverPlacement as MenuPlacement } from '../OrPopoverV3/props.js';

package/dist/bundled/v2/components/OrMenuV3/props.js

@@ -1 +1 @@
-export { P as MenuPlacement } from '../OrPopoverV3-e3e14417.js';
+export { PopoverPlacement as MenuPlacement } from '../OrPopoverV3/props.js';

package/dist/bundled/v2/components/OrMenuV3/styles.js

@@ -1 +1,7 @@
-export { M as Menu } from '../OrMenuV3-f642c1e3.js';
+const Menu = [
+// Layout
+'overflow-y-auto',
+// Box
+'min-w-[160px]', 'md:max-w-[256px]', 'max-h-[340px]'];
+
+export { Menu };

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

@@ -1,2 +1,183 @@
-export { _ as default } from '../OrModal-daa83157.js';
-import '../OrAvatar-56c993c9.js';
+import { defineComponent, ref, watch, onBeforeUnmount } from 'vue-demi';
+import { OrModalSizes } from './constants.js';
+import { o as onClickOutside } from '../../index-c1efbf6a.js';
+import { u as useFocusTrap } from '../../useFocusTrap-f810e0ea.js';
+import __vue_component__$1 from '../OrIconButtonV2/OrIconButton.js';
+import __vue_component__$2 from '../OrOverlay/OrOverlay.js';
+import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  name: 'OrModal',
+  components: {
+    OrIconButton: __vue_component__$1,
+    OrOverlay: __vue_component__$2
+  },
+  props: {
+    titleText: {
+      type: String,
+      required: false,
+      default: null
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickOutside: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    size: {
+      type: String,
+      required: false,
+      default: OrModalSizes.small
+    },
+    isOpen: {
+      type: Boolean,
+      required: true
+    },
+    isWithoutOverlay: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    trapFocus: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['close'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const overlay = ref();
+    let container = ref(null);
+    let trap = useFocusTrap(container, {
+      immediate: props.trapFocus,
+      fallbackFocus: '.container',
+      allowOutsideClick: true
+    });
+    const handleClose = () => emit('close');
+    onClickOutside(container, evt => {
+      if (!evt.composedPath().includes(overlay.value.$el)) return;
+      if (props.closeOnClickOutside) handleClose();
+    });
+    const toggleFocusTrap = isNeedToTrap => {
+      if (isNeedToTrap && props.isOpen) {
+        trap.activate();
+      } else {
+        trap === null || trap === void 0 ? void 0 : trap.deactivate();
+      }
+    };
+    watch(() => props.trapFocus, toggleFocusTrap, {
+      immediate: true
+    });
+    watch(() => props.isOpen, isOpen => {
+      toggleFocusTrap(false);
+      if (isOpen) {
+        container = ref(null);
+      } else {
+        trap === null || trap === void 0 ? void 0 : trap.deactivate();
+      }
+    });
+    onBeforeUnmount(() => {
+      trap === null || trap === void 0 ? void 0 : trap.deactivate();
+    });
+    return {
+      container,
+      overlay,
+      handleClose
+    };
+  },
+  computed: {
+    sizeClass() {
+      return `is-${this.size}`;
+    }
+  }
+});
+
+var css_248z = "@keyframes spinAround-data-v-6ff25606{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-6ff25606{from{opacity:1}to{opacity:0}}.or-modal[data-v-6ff25606]{position:fixed;top:0;left:0;z-index:50;width:100%;height:100%}.or-modal .or-overlay[data-v-6ff25606]{align-items:center;justify-content:center}.or-modal .container[data-v-6ff25606]{position:absolute;display:flex;flex-flow:column;max-width:100%;max-height:80%;background-color:var(--c-neutral-0);border-radius:var(--s-2);outline:0}.or-modal .container.is-without-overlay[data-v-6ff25606]{box-shadow:0 .125rem .5rem 0 rgba(0,0,0,.1)}.or-modal .container.is-fullScreen[data-v-6ff25606]{width:calc(100% - var(--s-7));height:calc(100% - var(--s-7));max-height:calc(100% - var(--s-7));margin:0 auto}.or-modal .container.is-tiny[data-v-6ff25606]{width:320px}.or-modal .container.is-small[data-v-6ff25606]{width:480px}.or-modal .container.is-medium[data-v-6ff25606]{width:700px}.or-modal .container.is-large[data-v-6ff25606]{width:1049px}.or-modal .container .header[data-v-6ff25606]{display:flex;justify-content:space-between;padding:24px 24px 20px 24px;border-radius:var(--s-2) var(--s-2) 0 0}.or-modal .container .header .title[data-v-6ff25606]{font-size:1.125rem;font-weight:700}.or-modal .container .content[data-v-6ff25606]{flex-grow:1;padding:0 24px 24px 24px;overflow:auto}.or-modal .container .footer[data-v-6ff25606]{padding:16px 24px 24px 24px;border-radius:0 0 var(--s-2) var(--s-2);box-shadow:0 -3px 4px 0 rgba(0,0,0,.08)}";
+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.isOpen ? _c('div', {
+    staticClass: "or-modal"
+  }, [_c('or-overlay', {
+    ref: "overlay",
+    attrs: {
+      "is-active": "",
+      "is-without-background": _vm.isWithoutOverlay
+    }
+  }, [_c('div', {
+    ref: "container",
+    class: [_vm.sizeClass, 'container', {
+      'is-without-overlay': _vm.isWithoutOverlay
+    }]
+  }, [_vm._t("header", function () {
+    return [_c('div', {
+      staticClass: "header"
+    }, [_vm._t("title", function () {
+      return [_c('div', {
+        staticClass: "title"
+      }, [_vm._v("\n              " + _vm._s(_vm.titleText) + "\n            ")])];
+    }), _vm._v(" "), _c('or-icon-button', {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: _vm.showClose,
+        expression: "showClose"
+      }],
+      attrs: {
+        "icon": "close",
+        "icon-color": "neutral-6"
+      },
+      on: {
+        "click": _vm.handleClose
+      }
+    })], 2)];
+  }), _vm._v(" "), _vm._t("content", function () {
+    return [_c('div', {
+      staticClass: "content"
+    }, [_vm._t("default")], 2)];
+  }), _vm._v(" "), _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.$slots.footer,
+      expression: "$slots.footer"
+    }],
+    staticClass: "footer"
+  }, [_vm._t("footer", null, {
+    "close": _vm.handleClose
+  })], 2)], 2)])], 1) : _vm._e();
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-6ff25606";
+/* 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/OrModal/constants.js

@@ -1 +1,10 @@
-export { O as OrModalSizes } from '../OrModal-daa83157.js';
+var OrModalSizes;
+(function (OrModalSizes) {
+  OrModalSizes["tiny"] = "tiny";
+  OrModalSizes["small"] = "small";
+  OrModalSizes["medium"] = "medium";
+  OrModalSizes["large"] = "large";
+  OrModalSizes["fullScreen"] = "fullScreen";
+})(OrModalSizes || (OrModalSizes = {}));
+
+export { OrModalSizes };

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

@@ -1 +1,2 @@
-export { _ as OrModal, O as OrModalSizes } from '../OrModal-daa83157.js';
+export { default as OrModal } from './OrModal.js';
+export { OrModalSizes } from './constants.js';

package/dist/bundled/v2/components/OrModalV3/OrModal.js

@@ -1,2 +1,287 @@
-export { _ as default } from '../OrModalV3-fa3bcbc9.js';
-import '../OrAvatar-56c993c9.js';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import __vue_component__$4 from '../OrIconButtonV3/OrIconButton.js';
+import { ModalSize } from './props.js';
+import { Modal, ModalSizes } from './styles.js';
+import __vue_component__$5 from '../OrOverlayV3/OrOverlay.js';
+import { usePopoverState } from '../../hooks/usePopoverState.js';
+
+const ModalContent = [
+// Overflow
+'overflow-auto',
+// Spacing
+'px-md md:px-lg'];
+
+var script$3 = defineComponent({
+  name: 'OrModalContent',
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-modal-content', ...ModalContent]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__$3 = script$3;
+
+/* template */
+var __vue_render__$3 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$3 = [];
+
+/* style */
+const __vue_inject_styles__$3 = undefined;
+/* scoped */
+const __vue_scope_id__$3 = undefined;
+/* module identifier */
+const __vue_module_identifier__$3 = undefined;
+/* functional template */
+const __vue_is_functional_template__$3 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$3 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$3,
+  staticRenderFns: __vue_staticRenderFns__$3
+}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined);
+var OrModalContent = __vue_component__$3;
+
+const ModalFooter = [
+// Spacing
+'px-md md:px-lg'];
+
+var script$2 = defineComponent({
+  name: 'OrModalFooter',
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-modal-footer', ...ModalFooter]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__$2 = script$2;
+
+/* template */
+var __vue_render__$2 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$2 = [];
+
+/* style */
+const __vue_inject_styles__$2 = undefined;
+/* scoped */
+const __vue_scope_id__$2 = undefined;
+/* module identifier */
+const __vue_module_identifier__$2 = undefined;
+/* functional template */
+const __vue_is_functional_template__$2 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$2 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$2,
+  staticRenderFns: __vue_staticRenderFns__$2
+}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined);
+var OrModalFooter = __vue_component__$2;
+
+const ModalHeader = [
+// Layout
+'layout-row',
+// Spacing
+'px-md md:px-lg',
+// Typography
+'typography-headline-2'];
+
+var script$1 = defineComponent({
+  name: 'OrModalHeader',
+  components: {
+    OrIconButton: __vue_component__$4
+  },
+  emits: ['close'],
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-modal-header', ...ModalHeader]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_c('div', {
+    class: ['grow']
+  }, [_vm._t("default")], 2), _vm._v(" "), _c('OrIconButton', {
+    attrs: {
+      "icon": 'close',
+      "size": 'l'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.$emit('close');
+      }
+    }
+  })], 1);
+};
+var __vue_staticRenderFns__$1 = [];
+
+/* style */
+const __vue_inject_styles__$1 = undefined;
+/* scoped */
+const __vue_scope_id__$1 = undefined;
+/* module identifier */
+const __vue_module_identifier__$1 = undefined;
+/* functional template */
+const __vue_is_functional_template__$1 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1,
+  staticRenderFns: __vue_staticRenderFns__$1
+}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
+var OrModalHeader = __vue_component__$1;
+
+var script = defineComponent({
+  name: 'OrModal',
+  components: {
+    OrModalContent,
+    OrModalFooter,
+    OrModalHeader,
+    OrOverlay: __vue_component__$5
+  },
+  inheritAttrs: false,
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: ModalSize.M
+    },
+    // TODO: Remove after migration to Vue 3
+    additionalStyles: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['update:state', 'open', 'close'],
+  expose: ['root', 'state', 'open', 'close'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-modal-v3', ...Modal, ...ModalSizes[props.size], ...props.additionalStyles]);
+    // State
+    const {
+      state,
+      open,
+      close
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
+    return {
+      root,
+      rootStyles,
+      state,
+      open,
+      close
+    };
+  }
+});
+
+/* 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.state === 'open' ? _c('OrOverlay', {
+    attrs: {
+      "fullscreen": true
+    }
+  }, [_c('div', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_c('OrModalHeader', {
+    on: {
+      "close": function ($event) {
+        return _vm.close();
+      }
+    }
+  }, [_vm._t("header")], 2), _vm._v(" "), _c('OrModalContent', {
+    class: ['grow']
+  }, [_vm._t("default")], 2), _vm._v(" "), _vm.$slots.footer ? _c('OrModalFooter', [_vm._t("footer")], 2) : _vm._e()], 1)]) : _vm._e();
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* 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/OrModalV3/index.js

@@ -1 +1,2 @@
-export { M as ModalSize, _ as OrModalV3 } from '../OrModalV3-fa3bcbc9.js';
+export { default as OrModalV3 } from './OrModal.js';
+export { ModalSize } from './props.js';

package/dist/bundled/v2/components/OrModalV3/props.js

@@ -1 +1,8 @@
-export { M as ModalSize } from '../OrModalV3-fa3bcbc9.js';
+var ModalSize;
+(function (ModalSize) {
+  ModalSize["L"] = "l";
+  ModalSize["M"] = "m";
+  ModalSize["S"] = "s";
+})(ModalSize || (ModalSize = {}));
+
+export { ModalSize };

package/dist/bundled/v2/components/OrModalV3/styles.js

@@ -1 +1,30 @@
-export { a as Modal, b as ModalSizes } from '../OrModalV3-fa3bcbc9.js';
+import { ModalSize } from './props.js';
+
+const Modal = [
+// Layout
+'layout-column',
+// Box
+'w-full', 'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
+// Spacing
+'py-md md:py-lg', 'gap-md md:gap-lg',
+// Shape
+'md:rounded-md',
+// Elevation
+'shadow-modal', 'dark:shadow-modal-dark',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const ModalSizes = {
+  [ModalSize.L]: [
+  // Box
+  'md:w-[1050px]'],
+  [ModalSize.M]: [
+  // Box
+  'md:w-[700px]'],
+  [ModalSize.S]: [
+  // Box
+  'md:w-[480px]']
+};
+
+export { Modal, ModalSizes };