@onereach/ui-components 2.68.0-beta.2002.0 → 2.68.0-beta.2008.0

package/dist/bundled/v3/{OrModal-868160ef.js → OrModal-bbabef06.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrModal.vue_vue_type_script_lang-a1ed2ebb.js';
+import { s as script } from './OrModal.vue_vue_type_script_lang-a599dfe7.js';
 import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, renderSlot, toDisplayString, withDirectives, vShow, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/bundled/v3/OrModal.vue_vue_type_script_lang-a599dfe7.js

@@ -0,0 +1,128 @@
+import { openBlock, createElementBlock, normalizeClass, renderSlot, defineComponent, ref, watch, onBeforeUnmount } from 'vue';
+import _ from 'lodash';
+import { onClickOutside } from '@vueuse/core';
+import { u as useFocusTrap } from './useFocusTrap-d21726e3.js';
+import './OrIconButton-e637158e.js';
+import { s as script$1 } from './OrOverlay.vue_vue_type_script_lang-b9bf5e50.js';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-40547ab0.js';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["or-overlay", _ctx.states])
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-34f88318 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-34f88318 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-overlay[data-v-34f88318] {\n  display: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 25;\n}\n.or-overlay[data-v-34f88318]:not(.without-background) {\n  background-color: rgba(30, 35, 43, 0.8);\n}\n.or-overlay.active[data-v-34f88318] {\n  display: flex;\n}\n.or-overlay.page[data-v-34f88318] {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n}";
+styleInject(css_248z);
+
+script$1.render = render;
+script$1.__scopeId = "data-v-34f88318";
+script$1.__file = "src/components/or-overlay/OrOverlay.vue";
+
+var OrModalSizes;
+(function (OrModalSizes) {
+  OrModalSizes["tiny"] = "tiny";
+  OrModalSizes["small"] = "small";
+  OrModalSizes["medium"] = "medium";
+  OrModalSizes["large"] = "large";
+  OrModalSizes["fullScreen"] = "fullScreen";
+})(OrModalSizes || (OrModalSizes = {}));
+
+var script = defineComponent({
+  name: 'OrModal',
+  components: {
+    OrIconButton: script$2,
+    OrOverlay: script$1
+  },
+  props: {
+    titleText: {
+      type: String,
+      required: false,
+      default: null,
+      validator: _.isString
+    },
+    showClose: {
+      type: Boolean,
+      default: true,
+      validator: _.isBoolean
+    },
+    closeOnClickOutside: {
+      type: Boolean,
+      required: false,
+      default: false,
+      validator: _.isBoolean
+    },
+    size: {
+      type: String,
+      required: false,
+      default: OrModalSizes.small
+    },
+    isOpen: {
+      type: Boolean,
+      required: true,
+      validator: _.isBoolean
+    },
+    isWithoutOverlay: {
+      type: Boolean,
+      required: false,
+      default: false,
+      validator: _.isBoolean
+    },
+    trapFocus: {
+      type: Boolean,
+      default: true,
+      validator: _.isBoolean
+    }
+  },
+  emits: ['close'],
+  setup(props, {
+    emit
+  }) {
+    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}`;
+    }
+  }
+});
+
+export { OrModalSizes as O, script as s };

package/dist/bundled/v3/{OrRichTextEditor.vue_vue_type_script_lang-2e607f79.js → OrRichTextEditor.vue_vue_type_script_lang-f5d3e39b.js}

@@ -1,4 +1,5 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
+import { u as useFocusTrap } from './useFocusTrap-d21726e3.js';
 import require$$8 from 'node:punycode';
 import { k as keyName, b as base } from './index.es-3f39f316.js';
 import './OrIconButton-00ab6c2d.js';
@@ -36399,7 +36400,7 @@ var script = defineComponent({
     },
     description: {
       type: String,
-      default: 'Description'
+      default: ''
     },
     placeholder: {
       type: String,
@@ -36409,7 +36410,7 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    markdown: {
+    markdownFormat: {
       type: Boolean,
       default: true
     }
@@ -36429,6 +36430,11 @@ var script = defineComponent({
     const previousHeadingLevel = ref();
     const activeHeadingLevel = ref(0);
     const markdownOutput = ref('');
+    let trap = useFocusTrap(editorRef, {
+      immediate: true,
+      fallbackFocus: '.container',
+      allowOutsideClick: true
+    });
     const iconsEnum = ref({
       bold: 'format_bold',
       italic: 'format_italic',
@@ -36500,7 +36506,7 @@ var script = defineComponent({
           setActiveFormats();
           const html = editor.getHTML();
           const text = editor.getText();
-          if (props.markdown) {
+          if (props.markdownFormat) {
             markdownOutput.value = serialize(editor.schema, editor.getJSON());
             emit('update:modelValue', markdownOutput.value);
           } else {
@@ -36510,10 +36516,8 @@ var script = defineComponent({
         onCreate: ({
           editor
         }) => {
-          if (props.markdown) {
+          if (props.markdownFormat) {
             const deserialized = deserialize(editor.schema, props.modelValue);
-            // const deserialized = defaultMarkdownParser.parse(props.modelValue);
-            // editor.view.state.doc = deserialized as Node;
             editor.commands.setContent(deserialized);
           } else {
             editor.commands.setContent(props.modelValue);
@@ -36559,6 +36563,7 @@ var script = defineComponent({
     onBeforeUnmount(() => {
       editor === null || editor === void 0 ? void 0 : editor.destroy();
     });
+    trap.activate();
     // Computed
     const getIndexOfHeading = computed(() => {
       return props.toolbar.flat().indexOf('heading');
@@ -36660,7 +36665,6 @@ var script = defineComponent({
       return serializer.serialize(proseMirrorDocument);
     };
     const deserialize = (schema, content) => {
-      // const html = defaultMarkdownParser.parse(content);
       const html = marked.parse(content);
       if (!html) return null;
       const parser = new DOMParser();
@@ -36674,10 +36678,10 @@ var script = defineComponent({
     };
     //Effects
     watch(() => props.modelValue, value => {
-      if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdown) {
+      if (value !== (editor === null || editor === void 0 ? void 0 : editor.getHTML()) && !props.markdownFormat) {
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(value);
       }
-      if (props.markdown && value !== markdownOutput.value) {
+      if (props.markdownFormat && value !== markdownOutput.value) {
         editor === null || editor === void 0 ? void 0 : editor.commands.setContent(markdownOutput.value);
       }
     });

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

@@ -15,10 +15,10 @@ export { s as OrCheckbox } from '../OrCheckbox.vue_vue_type_script_lang-cd20521b
 export { s as OrCheckboxV3 } from '../OrCheckbox.vue_vue_type_script_lang-10d8b047.js';
 export { s as OrChip } from '../OrChip-5d502431.js';
 export { s as OrChips } from '../OrChips.vue_vue_type_script_lang-69917e34.js';
-export { s as OrCode, O as OrCodeLanguages } from '../OrCode.vue_vue_type_script_lang-6c5f94a6.js';
+export { s as OrCode, O as OrCodeLanguages } from '../OrCode.vue_vue_type_script_lang-5fe573eb.js';
 export { s as OrCollapse } from '../OrCollapse.vue_vue_type_script_lang-65cbb754.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker.vue_vue_type_script_lang-4141378d.js';
-export { s as OrConfirm } from '../OrConfirm.vue_vue_type_script_lang-0f16fc67.js';
+export { s as OrConfirm } from '../OrConfirm.vue_vue_type_script_lang-4451e782.js';
 export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm.vue_vue_type_script_lang-20ffe5df.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker.vue_vue_type_script_lang-7bfe5005.js';
 export { s as OrError } from '../OrError.vue_vue_type_script_lang-7c39e012.js';
@@ -51,7 +51,7 @@ export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3
 export { s as OrMenuItemV3 } from '../OrMenuItem.vue_vue_type_script_lang-ccb7e082.js';
 export { s as OrMenuV3 } from '../OrMenu.vue_vue_type_script_lang-bae45062.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover.vue_vue_type_script_lang-e200f5be.js';
-export { s as OrModal, O as OrModalSizes } from '../OrModal.vue_vue_type_script_lang-a1ed2ebb.js';
+export { s as OrModal, O as OrModalSizes } from '../OrModal.vue_vue_type_script_lang-a599dfe7.js';
 export { M as ModalSize, s as OrModalV3 } from '../OrModal.vue_vue_type_script_lang-f3f5a84b.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from '../OrNotification.vue_vue_type_script_lang-07163a83.js';
 export { N as NotificationVariant, s as OrNotificationV3 } from '../OrNotification.vue_vue_type_script_lang-83bfbfc4.js';
@@ -95,7 +95,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-4d43
 export { s as OrTooltip } from '../OrTooltip.vue_vue_type_script_lang-fa52d391.js';
 export { s as OrTooltipContent } from '../OrTooltipContent-b0dcb862.js';
 export { s as OrTooltipV3 } from '../OrTooltip.vue_vue_type_script_lang-a4168546.js';
-export { s as OrRichTextEditorV3 } from '../OrRichTextEditor.vue_vue_type_script_lang-2e607f79.js';
+export { s as OrRichTextEditorV3 } from '../OrRichTextEditor.vue_vue_type_script_lang-f5d3e39b.js';
 import 'vue';
 import 'lodash';
 import '../OrIcon-1cae8a64.js';
@@ -112,7 +112,7 @@ import '../OrLabel-2809e2db.js';
 import '../OrLabel-e412c532.js';
 import '../OrError-b43ebad8.js';
 import '../index.es-3f39f316.js';
-import '../OrModal-868160ef.js';
+import '../OrModal-bbabef06.js';
 import '../OrHint-c9114268.js';
 import '../px-to-rem-0b26b83e.js';
 import '../dom-d21d0a92.js';
@@ -130,6 +130,7 @@ import '../v4-cf8987a3.js';
 import '../OrPopover-93ef8c26.js';
 import '../useResponsive-9d397e2a.js';
 import '../useElevation-c8d5d3ba.js';
+import '../useFocusTrap-d21726e3.js';
 import '../OrMenuItem-94ffa853.js';
 import '../dropdown-open-293d2de2.js';
 import '../useOverflow-2468b718.js';

package/dist/bundled/v3/components/or-code/index.js

@@ -1,4 +1,4 @@
-export { s as OrCode, O as OrCodeLanguages } from '../../OrCode.vue_vue_type_script_lang-6c5f94a6.js';
+export { s as OrCode, O as OrCodeLanguages } from '../../OrCode.vue_vue_type_script_lang-5fe573eb.js';
 import '@vueuse/core';
 import '../../index.es-3f39f316.js';
 import 'lodash';
@@ -19,8 +19,9 @@ import '../../OrIcon.vue_vue_type_script_lang-7e3a17fe.js';
 import '../../px-to-rem-0b26b83e.js';
 import '../../OrLoader-ee97fef4.js';
 import '../../OrLoader.vue_vue_type_script_lang-1378ab8e.js';
-import '../../OrModal-868160ef.js';
-import '../../OrModal.vue_vue_type_script_lang-a1ed2ebb.js';
+import '../../OrModal-bbabef06.js';
+import '../../OrModal.vue_vue_type_script_lang-a599dfe7.js';
+import '../../useFocusTrap-d21726e3.js';
 import '../../OrOverlay.vue_vue_type_script_lang-b9bf5e50.js';
 import '../../OrError-b43ebad8.js';
 import '../../OrError.vue_vue_type_script_lang-7c39e012.js';

package/dist/bundled/v3/components/or-confirm/index.js

@@ -1,4 +1,4 @@
-export { s as OrConfirm } from '../../OrConfirm.vue_vue_type_script_lang-0f16fc67.js';
+export { s as OrConfirm } from '../../OrConfirm.vue_vue_type_script_lang-4451e782.js';
 import 'vue';
 import '@vueuse/core';
 import '../../index-01519e46.js';
@@ -18,8 +18,9 @@ import '../../OrTeleportVue3-012351e1.js';
 import '../../dom-d21d0a92.js';
 import '../../OrLoader-ee97fef4.js';
 import '../../OrLoader.vue_vue_type_script_lang-1378ab8e.js';
-import '../../OrModal-868160ef.js';
-import '../../OrModal.vue_vue_type_script_lang-a1ed2ebb.js';
+import '../../OrModal-bbabef06.js';
+import '../../OrModal.vue_vue_type_script_lang-a599dfe7.js';
+import '../../useFocusTrap-d21726e3.js';
 import '../../OrIconButton-e637158e.js';
 import '../../OrIconButton.vue_vue_type_script_lang-40547ab0.js';
 import '../../OrTooltip.vue_vue_type_script_lang-fa52d391.js';

package/dist/bundled/v3/components/or-modal/index.js

@@ -1,7 +1,8 @@
-export { s as OrModal, O as OrModalSizes } from '../../OrModal.vue_vue_type_script_lang-a1ed2ebb.js';
+export { s as OrModal, O as OrModalSizes } from '../../OrModal.vue_vue_type_script_lang-a599dfe7.js';
 import 'vue';
 import 'lodash';
 import '@vueuse/core';
+import '../../useFocusTrap-d21726e3.js';
 import '../../OrIconButton-e637158e.js';
 import '../../OrIconButton.vue_vue_type_script_lang-40547ab0.js';
 import '../../OrTooltip.vue_vue_type_script_lang-fa52d391.js';

package/dist/bundled/v3/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts

@@ -56,7 +56,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    markdown: {
+    markdownFormat: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -82,7 +82,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    markdown: {
+    markdownFormat: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -92,7 +92,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdown: boolean;
+    markdownFormat: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -135,7 +135,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdown: boolean;
+    markdownFormat: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -144,6 +144,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     description: string;
     placeholder: string;
     autofocus: boolean;
-    markdown: boolean;
+    markdownFormat: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v3/components/or-rich-text-editor-v3/index.js

@@ -1,5 +1,7 @@
-export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor.vue_vue_type_script_lang-2e607f79.js';
+export { s as OrRichTextEditorV3 } from '../../OrRichTextEditor.vue_vue_type_script_lang-f5d3e39b.js';
 import 'vue';
+import '../../useFocusTrap-d21726e3.js';
+import '@vueuse/core';
 import 'node:punycode';
 import '../../index.es-3f39f316.js';
 import '../../OrIconButton-00ab6c2d.js';
@@ -8,7 +10,6 @@ import '../../OrIcon-3a514933.js';
 import '../../OrIcon.vue_vue_type_script_lang-41a6a57a.js';
 import '../../useClassAttribute-00888f78.js';
 import '../../OrTooltip.vue_vue_type_script_lang-a4168546.js';
-import '@vueuse/core';
 import '../../OrPopover-93ef8c26.js';
 import '../../OrPopover.vue_vue_type_script_lang-e200f5be.js';
 import '../../floating-ui.dom.esm-83eba816.js';