@onereach/ui-components 4.7.0-beta.2811.0 → 4.8.0-beta.2836.0

package/dist/esm/v3/{OrSearch-5576cf14.js → OrSearch-7bf5009e.js}

@@ -1,6 +1,6 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-a9aeef6e.js';
+import { s as script$1 } from './OrInput-14b88801.js';
 import { I as InputBoxSize } from './OrInputBox-32814878.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 

package/dist/esm/v3/{OrSelect-0b3ebce9.js → OrSelect-b7d87ded.js}

@@ -2,17 +2,19 @@ import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch }
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 import { u as useOverflow } from './useOverflow-c856b7b7.js';
 import '@vueuse/core';
-import { s as script$1, i as isEmptyValue } from './OrCheckbox-7093e9c2.js';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
+import { s as script$1, i as isEmptyValue } from './OrCheckbox-2194e473.js';
 import { s as script$2 } from './OrError-c01d0c29.js';
 import { s as script$3 } from './OrExpansionPanel-c016d8fa.js';
 import { s as script$4 } from './OrHint-06ab89d7.js';
 import { s as script$5 } from './OrIcon-62793572.js';
 import { s as script$7, I as InputBoxSize } from './OrInputBox-32814878.js';
-import { s as script$6 } from './OrInput-a9aeef6e.js';
+import { s as script$6 } from './OrInput-14b88801.js';
 import { s as script$8 } from './OrLabel-4da56db0.js';
 import { s as script$9 } from './OrMenuItem-dbee450f.js';
-import { s as script$a } from './OrPopover-ebd57053.js';
-import { s as script$b } from './OrTag-4ac45254.js';
+import { s as script$a } from './OrPopover-8ea2062a.js';
+import { s as script$b } from './OrTag-51d8f47d.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, createVNode, withModifiers, vShow } from 'vue';
 
 const SelectRoot = [

package/dist/esm/v3/{OrSidebar-303ef558.js → OrSidebar-84533704.js}

@@ -1,6 +1,6 @@
 import { useDraggable, useElementBounding } from '@vueuse/core';
 import { defineComponent, ref, computed, useSlots, watch } from 'vue-demi';
-import { O as OrSidebarPlacement, s as script$1 } from './OrSidebarCollapseButton-d7f004df.js';
+import { O as OrSidebarPlacement, s as script$1 } from './OrSidebarCollapseButton-88a165e8.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, normalizeStyle, createBlock, withDirectives, vShow } from 'vue';
 
 const SidebarRoot = [

package/dist/esm/v3/{OrSidebarCollapseButton-d7f004df.js → OrSidebarCollapseButton-88a165e8.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$1 } from './OrIconButton-e34a20eb.js';
+import { s as script$1 } from './OrIconButton-c6d15a51.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode } from 'vue';
 
 var OrSidebarPlacement;

package/dist/esm/v3/{OrSwitch-594f5a63.js → OrSwitch-ed9868db.js}

@@ -1,6 +1,8 @@
 import { defineComponent, ref, computed, reactive } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
 import { s as script$1, L as LabelVariant } from './OrLabel-4da56db0.js';
 import { s as script$2 } from './OrLoader-b79022da.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, mergeProps, vModelCheckbox, createVNode, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';

package/dist/esm/v3/{OrTabs-b6c8077c.js → OrTabs-ffb69679.js}

@@ -2,8 +2,8 @@ import { useResizeObserver } from '@vueuse/core';
 import { defineComponent, ref, computed, reactive, watch, nextTick, onMounted } from 'vue-demi';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { s as script$3 } from './OrMenuItem-dbee450f.js';
-import { s as script$2 } from './OrMenu-f590d761.js';
-import './OrPopover-ebd57053.js';
+import { s as script$2 } from './OrMenu-b90e6784.js';
+import './OrPopover-8ea2062a.js';
 import { s as script$4 } from './OrTab-f7e51ffb.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
 

package/dist/esm/v3/{OrTag-4ac45254.js → OrTag-51d8f47d.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watchPostEffect, unref } from 'vue-demi';
-import { s as script$1 } from './OrIconButton-e34a20eb.js';
+import { s as script$1 } from './OrIconButton-c6d15a51.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, withModifiers, createCommentVNode } from 'vue';
 
 var TagVariant;

package/dist/esm/v3/{OrTags-de9f065e.js → OrTags-3ae4a908.js}

@@ -1,9 +1,11 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { u as useOverflow } from './useOverflow-c856b7b7.js';
 import '@vueuse/core';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
 import { s as script$1 } from './OrButton-c2b6aa9e.js';
-import { s as script$2 } from './OrPopover-ebd57053.js';
-import { s as script$3 } from './OrTag-4ac45254.js';
+import { s as script$2 } from './OrPopover-8ea2062a.js';
+import { s as script$3 } from './OrTag-51d8f47d.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, mergeProps, withCtx, createTextVNode, toDisplayString, createVNode, withModifiers, createCommentVNode } from 'vue';
 
 const Tags = [

package/dist/esm/v3/{OrTextarea-93cf7da7.js → OrTextarea-0f9a2a27.js}

@@ -1,6 +1,8 @@
 import { defineComponent, ref, computed, reactive } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-c01d0c29.js';
 import { s as script$2 } from './OrHint-06ab89d7.js';

package/dist/esm/v3/{OrTextbox-56714f51.js → OrTextbox-8d2903db.js}

@@ -1,5 +1,7 @@
 import { defineComponent, ref, computed, getCurrentInstance } from 'vue-demi';
 import '@vueuse/core';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
 import { u as useToggle } from './useToggle-c04fc920.js';
 import { p as pxToRem } from './px-to-rem-0b26b83e.js';
 import { s as setStyle, r as requestAF, d as getCS, a as reflow, c as cancelAF } from './dom-f1d55b67.js';

package/dist/esm/v3/{OrTimePicker-0fe72767.js → OrTimePicker-16a88b67.js}

@@ -4,11 +4,11 @@ import { s as script$1, a as script$2, b as script$3, u as useCurrentDate } from
 import { s as script$4, a as script$5 } from './OrDateTimePickerTimeSelect-14503fde.js';
 import { s as script$6 } from './OrError-c01d0c29.js';
 import { s as script$7 } from './OrHint-06ab89d7.js';
-import { s as script$9 } from './OrIconButton-e34a20eb.js';
+import { s as script$9 } from './OrIconButton-c6d15a51.js';
 import { s as script$8 } from './OrIcon-62793572.js';
 import { s as script$a, I as InputBoxSize } from './OrInputBox-32814878.js';
 import { s as script$b } from './OrLabel-4da56db0.js';
-import { s as script$c } from './OrPopover-ebd57053.js';
+import { s as script$c } from './OrPopover-8ea2062a.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 
 const TimePicker = [

package/dist/esm/v3/{OrTooltip-edb28095.js → OrTooltip-9a63f445.js}

@@ -1,7 +1,9 @@
 import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import '@vueuse/core';
 import { u as usePopoverState } from './usePopoverState-8a95a300.js';
-import { s as script$1, P as PopoverPlacement } from './OrPopover-ebd57053.js';
+import '@onereach/styles/tailwind.config';
+import 'tailwindcss/resolveConfig';
+import { s as script$1, P as PopoverPlacement } from './OrPopover-8ea2062a.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, withCtx, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
 
 const TooltipRoot = [

package/dist/esm/v3/codemirrorView-be2c7423.js

@@ -0,0 +1,353 @@
+import { TextSelection, Selection } from 'prosemirror-state';
+import { exitCode } from 'prosemirror-commands';
+import { EditorState } from '@codemirror/state';
+import { EditorView, highlightActiveLine, highlightActiveLineGutter, lineNumbers, keymap } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+const chalky = 'var(--c-warning-darken-20)',
+  coral = 'var(--c-error)',
+  cyan = '#56b6c2',
+  invalid = 'var(--c-white)',
+  ivory = 'var(--c-neutral-6)',
+  stone = 'var(--c-neutral-5)',
+  // Brightened compared to original to increase contrast
+  malibu = '#61afef',
+  sage = 'var(--c-success)',
+  whiskey = 'var(--c-warning-darken-5)',
+  violet = '#c678dd',
+  darkBackground = 'var(--c-neutral-1)',
+  highlightBackground = 'var(--c-neutral-2)',
+  background = 'var(--c-neutral-1)',
+  tooltipBackground = 'var(--c-neutral-2)',
+  selection = 'var(--c-neutral-3)',
+  cursor = 'var(--c-primary)';
+/// The editor theme styles for One Dark.
+const orCodeTheme = EditorView.theme({
+  '&': {
+    color: ivory,
+    backgroundColor: background
+  },
+  '.cm-content': {
+    caretColor: cursor
+  },
+  '.cm-button': {
+    background: highlightBackground,
+    color: 'var(--c-neutral-6)',
+    border: 0,
+    borderRadius: 'var(--s-2)'
+  },
+  '.cm-panel.cm-search input[type=checkbox]': {
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  },
+  '.cm-cursor, .cm-dropCursor': {
+    borderLeftColor: cursor
+  },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    backgroundColor: selection
+  },
+  '.cm-panels': {
+    backgroundColor: darkBackground,
+    color: ivory
+  },
+  '.cm-panels.cm-panels-top': {
+    borderBottom: '2px solid var(--c-neutral-2)'
+  },
+  '.cm-panels.cm-panels-bottom': {
+    borderTop: '2px solid var(--c-neutral-2)'
+  },
+  '.cm-searchMatch': {
+    backgroundColor: 'var(--c-neutral-1)',
+    outline: '1px solid var(--c-neutral-2)'
+  },
+  '.cm-searchMatch.cm-searchMatch-selected': {
+    backgroundColor: '#6199ff2f'
+  },
+  '.cm-activeLine': {
+    backgroundColor: '#6699ff0b'
+  },
+  '.cm-selectionMatch': {
+    backgroundColor: '#aafe661a'
+  },
+  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+    backgroundColor: '#bad0f847'
+  },
+  '.cm-gutters': {
+    backgroundColor: background,
+    color: stone,
+    border: 'none'
+  },
+  '.cm-activeLineGutter': {
+    backgroundColor: highlightBackground
+  },
+  '.cm-foldPlaceholder': {
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: '#ddd'
+  },
+  '.cm-tooltip': {
+    border: 'none',
+    backgroundColor: tooltipBackground
+  },
+  '.cm-tooltip .cm-tooltip-arrow:before': {
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent'
+  },
+  '.cm-tooltip .cm-tooltip-arrow:after': {
+    borderTopColor: tooltipBackground,
+    borderBottomColor: tooltipBackground
+  },
+  '.cm-tooltip-autocomplete': {
+    '& > ul > li[aria-selected]': {
+      backgroundColor: highlightBackground,
+      color: ivory
+    }
+  },
+  '.cm-textfield': {
+    outline: 'none',
+    background: background,
+    color: 'var(--c-neutral-6)',
+    backgroundColor: 'var(--c-neutral-1)',
+    border: '1px solid var(--c-neutral-2)',
+    borderRadius: 'var(--s-2)'
+  }
+}, {
+  dark: true
+});
+/// The highlighting style for code in the One Dark theme.
+const orCodeHighlightStyle = HighlightStyle.define([{
+  tag: tags.keyword,
+  color: violet
+}, {
+  tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+  color: coral
+}, {
+  tag: [tags.function(tags.variableName), tags.labelName],
+  color: malibu
+}, {
+  tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)],
+  color: whiskey
+}, {
+  tag: [tags.definition(tags.name), tags.separator],
+  color: ivory
+}, {
+  tag: [tags.typeName, tags.className, tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace],
+  color: chalky
+}, {
+  tag: [tags.operator, tags.operatorKeyword, tags.url, tags.escape, tags.regexp, tags.link, tags.special(tags.string)],
+  color: cyan
+}, {
+  tag: [tags.meta, tags.comment],
+  color: stone
+}, {
+  tag: tags.strong,
+  fontWeight: 'bold'
+}, {
+  tag: tags.emphasis,
+  fontStyle: 'italic'
+}, {
+  tag: tags.strikethrough,
+  textDecoration: 'line-through'
+}, {
+  tag: tags.link,
+  color: stone,
+  textDecoration: 'underline'
+}, {
+  tag: tags.heading,
+  fontWeight: 'bold',
+  color: coral
+}, {
+  tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
+  color: whiskey
+}, {
+  tag: [tags.processingInstruction, tags.string, tags.inserted],
+  color: sage
+}, {
+  tag: tags.invalid,
+  color: invalid
+}]);
+/// Extension to enable the One Dark theme (both the editor theme and
+/// the highlight style).
+const theme = [orCodeTheme, syntaxHighlighting(orCodeHighlightStyle)];
+
+const computeChange = (oldVal, newVal) => {
+  if (oldVal === newVal) {
+    return null;
+  }
+  let start = 0;
+  let oldEnd = oldVal.length;
+  let newEnd = newVal.length;
+  while (start < oldEnd && oldVal.charCodeAt(start) === newVal.charCodeAt(start)) {
+    start += 1;
+  }
+  while (oldEnd > start && newEnd > start && oldVal.charCodeAt(oldEnd - 1) === newVal.charCodeAt(newEnd - 1)) {
+    oldEnd -= 1;
+    newEnd -= 1;
+  }
+  return {
+    from: start,
+    to: oldEnd,
+    text: newVal.slice(start, newEnd)
+  };
+};
+class CodeMirrorView {
+  constructor(options) {
+    var _a;
+    this.updating = false;
+    // Store for later
+    this.node = options.node;
+    this.view = options.view;
+    const cmExtensions = ((_a = options.cmOptions) === null || _a === void 0 ? void 0 : _a.extensions) || [];
+    this.name = 'codeBlock', this.getPos = options.getPos;
+    const changeFilter = EditorState.changeFilter.of(tr => {
+      if (!tr.docChanged && !this.updating) {
+        this.forwardSelection();
+      }
+      return true;
+    });
+    // Create a CodeMirror instancew
+    this.cm = new EditorView({
+      dispatch: this.dispatch.bind(this)
+    });
+    // The editor's outer node is our DOM representation
+    this.dom = this.cm.dom;
+    const cmState = EditorState.create({
+      doc: this.node.textContent,
+      extensions: [theme, changeFilter, highlightActiveLine(), highlightActiveLineGutter(), lineNumbers(), keymap.of([{
+        key: 'ArrowUp',
+        run: this.mayBeEscape('line', -1)
+      }, {
+        key: 'ArrowLeft',
+        run: this.mayBeEscape('char', -1)
+      }, {
+        key: 'ArrowDown',
+        run: this.mayBeEscape('line', 1)
+      }, {
+        key: 'ArrowRight',
+        run: this.mayBeEscape('char', 1)
+      }, {
+        key: 'Ctrl-Enter',
+        run: () => {
+          if (exitCode(this.view.state, this.view.dispatch)) {
+            this.view.focus();
+            return true;
+          }
+          return false;
+        }
+      }]), cmExtensions]
+    });
+    this.cm.setState(cmState);
+  }
+  forwardSelection() {
+    if (!this.cm.hasFocus) {
+      return;
+    }
+    const {
+      state
+    } = this.view;
+    const selection = this.asProseMirrorSelection(state.doc);
+    if (!selection.eq(state.selection)) {
+      this.view.dispatch(state.tr.setSelection(selection));
+    }
+  }
+  asProseMirrorSelection(doc) {
+    const offset = this.getPos() + 1;
+    const {
+      anchor,
+      head
+    } = this.cm.state.selection.main;
+    return TextSelection.create(doc, anchor + offset, head + offset);
+  }
+  dispatch(cmTr) {
+    this.cm.setState(cmTr.state);
+    if (cmTr.docChanged && !this.updating) {
+      const start = this.getPos() + 1;
+      const cmValue = cmTr.state.doc.toString();
+      const change = computeChange(this.node.textContent, cmValue);
+      if (!change) {
+        return;
+      }
+      const content = change.text ? this.view.state.schema.text(change.text) : null;
+      const tr = this.view.state.tr.replaceWith(change.from + start, change.to + start, content);
+      this.view.dispatch(tr);
+      this.forwardSelection();
+    }
+  }
+  mayBeEscape(unit, dir) {
+    return view => {
+      const {
+        state
+      } = view;
+      const {
+        selection
+      } = state;
+      const offsetToPos = () => {
+        const offset = selection.main.from;
+        const line = state.doc.lineAt(offset);
+        return {
+          line: line.number,
+          ch: offset - line.from
+        };
+      };
+      const pos = offsetToPos();
+      const hasSelection = state.selection.ranges.some(r => !r.empty);
+      const firstLine = 1;
+      const lastLine = state.doc.lineAt(state.doc.length).number;
+      if (hasSelection || pos.line !== (dir < 0 ? firstLine : lastLine) || unit === 'char' && pos.ch !== (dir < 0 ? 0 : state.doc.line(pos.line).length)) {
+        return false;
+      }
+      const targetPos = this.getPos() + (dir < 0 ? 0 : this.node.nodeSize);
+      const pmSelection = Selection.near(this.view.state.doc.resolve(targetPos), dir);
+      this.view.dispatch(this.view.state.tr.setSelection(pmSelection).scrollIntoView());
+      this.view.focus();
+      return true;
+    };
+  }
+  update(node) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    this.node = node;
+    const change = computeChange(this.cm.state.doc.toString(), node.textContent);
+    if (change) {
+      this.updating = true;
+      this.cm.dispatch({
+        changes: {
+          from: change.from,
+          to: change.to,
+          insert: change.text
+        }
+      });
+      this.updating = false;
+    }
+    return true;
+  }
+  setSelection(anchor, head) {
+    this.focus();
+    this.updating = true;
+    this.cm.dispatch({
+      selection: {
+        anchor,
+        head
+      }
+    });
+    this.updating = false;
+  }
+  focus() {
+    this.cm.focus();
+    this.forwardSelection();
+  }
+  selectNode() {
+    this.focus();
+  }
+  stopEvent() {
+    return true;
+  }
+  destroy() {
+    this.cm.destroy();
+  }
+}
+
+export { CodeMirrorView as C };

package/dist/esm/v3/components/index.d.ts

@@ -103,3 +103,4 @@ export * from './or-toast';
 export * from './or-toast-v3';
 export * from './or-tooltip';
 export * from './or-tooltip-v3';
+export * from './or-rich-text-editor-v3';