@onereach/ui-components 8.17.0 → 8.17.1-beta.3881.0

package/dist/bundled/v2/components/OrCodeV3/OrCode.js

@@ -1,13 +1,13 @@
 import { defineComponent, ref, computed, reactive, toRef, watch, onMounted, onUnmounted } from 'vue-demi';
 import { b as basicSetup, i as indentWithTab } from '../../index-f1a845c3.js';
 import { C as Compartment, k as keymap, a as EditorState, E as EditorView } from '../../index-10711eb4.js';
-import { CodeLanguage } from './props.js';
 import { CodeControlRoot, CodeControl, Code, CodeModal } from './styles.js';
 import __vue_component__$2 from '../OrErrorV3/OrError.js';
 import __vue_component__$3 from '../OrHintV3/OrHint.js';
 import __vue_component__$4 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$5 from '../OrLabelV3/OrLabel.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+import { CodeLanguage } from './props.js';
 import __vue_component__$6 from '../OrModalV3/OrModal.js';
 import __vue_component__$7 from '../OrIconButtonV3/OrIconButton.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
@@ -218,7 +218,7 @@ var script = defineComponent({
       default: true
     }
   },
-  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'editorView', 'control', 'fullscreenControl', 'modal', 'focus', 'blur'],
   setup(props, context) {
     // Refs
@@ -273,6 +273,9 @@ var script = defineComponent({
     // #region Codemirror
     const theme = useTheme();
     const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+      input: event => {
+        context.emit('input', event);
+      },
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -287,6 +290,7 @@ var script = defineComponent({
       }
     }), EditorView.theme({
       '&': {
+        overflow: 'hidden',
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['background']
       },
@@ -302,7 +306,8 @@ var script = defineComponent({
       '.cm-gutters': {
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['primary-opacity-0-12'],
-        borderColor: theme.borderColor['outline']
+        borderColor: theme.borderColor['outline'],
+        backdropFilter: 'blur(2px)'
       },
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
@@ -378,8 +383,8 @@ var script = defineComponent({
       editorView.destroy();
     });
     return {
-      editorView,
       root,
+      editorView,
       control,
       fullscreenControl,
       modal,
@@ -438,8 +443,8 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrModal', {
     ref: "modal",
     attrs: {
-      "size": "l",
-      "additional-styles": _vm.modalStyles
+      "additional-styles": _vm.modalStyles,
+      "size": 'l'
     },
     scopedSlots: _vm._u([{
       key: "header",

package/dist/bundled/v2/components/OrCodeV3/OrCode.vue.d.ts

@@ -1,10 +1,10 @@
 import { PropType } from 'vue-demi';
-import { EditorView } from '@codemirror/view';
 import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import { CodeLanguage } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    editorView: EditorView;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    editorView: EditorView;
     control: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -136,8 +136,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
-    editorView: EditorView;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    editorView: EditorView;
     control: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {

package/dist/bundled/v3/components/OrCodeV3/OrCode.js

@@ -1 +1 @@
-export { s as default } from '../OrCodeV3-7ecb46ca.js';
+export { s as default } from '../OrCodeV3-628f8e28.js';

package/dist/bundled/v3/components/OrCodeV3/OrCode.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
-import { EditorView } from '@codemirror/view';
 import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import { CodeLanguage } from './props';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
@@ -44,8 +44,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }, {
-    editorView: EditorView;
     root: import("vue-demi").Ref<HTMLElement | undefined>;
+    editorView: EditorView;
     control: import("vue-demi").Ref<any>;
     fullscreenControl: import("vue-demi").Ref<any>;
     modal: import("vue-demi").Ref<any>;
@@ -69,7 +69,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     focus: () => void;
     blur: () => void;
     openFullscreen: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "input" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "input" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: undefined;
@@ -112,6 +112,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
     onKeydown?: ((...args: any[]) => any) | undefined;
     onKeyup?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;

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

@@ -1,2 +1,2 @@
-export { C as CodeLanguage, s as OrCodeV3 } from '../OrCodeV3-7ecb46ca.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../OrCodeV3-628f8e28.js';
 export { E as EditorState, a as EditorView, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from '../OrCode-46b1b8aa.js';

package/dist/bundled/v3/components/OrCodeV3/props.js

@@ -1 +1 @@
-export { C as CodeLanguage } from '../OrCodeV3-7ecb46ca.js';
+export { C as CodeLanguage } from '../OrCodeV3-628f8e28.js';

package/dist/bundled/v3/components/OrCodeV3/styles.js

@@ -1 +1 @@
-export { a as Code, c as CodeControl, b as CodeControlRoot, d as CodeModal } from '../OrCodeV3-7ecb46ca.js';
+export { a as Code, c as CodeControl, b as CodeControlRoot, d as CodeModal } from '../OrCodeV3-628f8e28.js';

package/dist/bundled/v3/components/{OrCodeV3-7ecb46ca.js → OrCodeV3-628f8e28.js}

@@ -13,16 +13,6 @@ import { useValidationAttributes } from '../hooks/useValidationAttributes.js';
 import { useProxyModelValue } from '../hooks/useProxyModelValue.js';
 import { useTheme } from '../hooks/useTheme.js';
 
-var CodeLanguage;
-(function (CodeLanguage) {
-  CodeLanguage["HTML"] = "html";
-  CodeLanguage["CSS"] = "css";
-  CodeLanguage["JS"] = "js";
-  CodeLanguage["TS"] = "ts";
-  CodeLanguage["JSON"] = "json";
-  CodeLanguage["MD"] = "md";
-})(CodeLanguage || (CodeLanguage = {}));
-
 const Code = [
 // Layout
 'layout-column',
@@ -171,6 +161,16 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 script$1.render = render$1;
 script$1.__file = "src/components/or-code-v3/partials/OrCodeControl.vue";
 
+var CodeLanguage;
+(function (CodeLanguage) {
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["JS"] = "js";
+  CodeLanguage["TS"] = "ts";
+  CodeLanguage["JSON"] = "json";
+  CodeLanguage["MD"] = "md";
+})(CodeLanguage || (CodeLanguage = {}));
+
 var script = defineComponent({
   components: {
     OrModal: script$6,
@@ -224,7 +224,7 @@ var script = defineComponent({
       default: true
     }
   },
-  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'editorView', 'control', 'fullscreenControl', 'modal', 'focus', 'blur'],
   setup(props, context) {
     // Refs
@@ -279,6 +279,9 @@ var script = defineComponent({
     // #region Codemirror
     const theme = useTheme();
     const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+      input: event => {
+        context.emit('input', event);
+      },
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -293,6 +296,7 @@ var script = defineComponent({
       }
     }), EditorView.theme({
       '&': {
+        overflow: 'hidden',
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['background']
       },
@@ -308,7 +312,8 @@ var script = defineComponent({
       '.cm-gutters': {
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['primary-opacity-0-12'],
-        borderColor: theme.borderColor['outline']
+        borderColor: theme.borderColor['outline'],
+        backdropFilter: 'blur(2px)'
       },
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
@@ -384,8 +389,8 @@ var script = defineComponent({
       editorView.destroy();
     });
     return {
-      editorView,
       root,
+      editorView,
       control,
       fullscreenControl,
       modal,
@@ -428,8 +433,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["control-id", "label", "hint", "error", "disabled", "readonly"]), createVNode(_component_OrModal, {
     ref: "modal",
-    size: "l",
-    "additional-styles": _ctx.modalStyles
+    "additional-styles": _ctx.modalStyles,
+    size: 'l'
   }, createSlots({
     header: withCtx(() => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)]),
 

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

@@ -16,7 +16,7 @@ export { s as OrCheckboxTreeV3 } from './OrCheckboxTreeV3-885148fa.js';
 export { s as OrCheckboxV3 } from './OrCheckboxV3-7d36a9a8.js';
 export { s as OrChip, a as OrChips } from './OrChips-ba5bb85b.js';
 export { E as EditorState, a as EditorView, q as OrCode, O as OrCodeLanguages, b as basicSetup, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from './OrCode-46b1b8aa.js';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCodeV3-7ecb46ca.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCodeV3-628f8e28.js';
 export { default as OrCollapse } from './OrCollapse/OrCollapse.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-2271c176.js';
 export { s as OrCombinedInputV3 } from './OrCombinedInputV3-795e8cf2.js';

package/dist/bundled/v3/index.js

@@ -9,7 +9,7 @@ export { C as CardPadding, s as OrCardV3 } from './components/OrCardV3-f9908b34.
 export { default as OrCheckboxGroupV3 } from './components/OrCheckboxGroupV3/OrCheckboxGroup.js';
 export { s as OrChip, a as OrChips } from './components/OrChips-ba5bb85b.js';
 export { E as EditorState, a as EditorView, q as OrCode, O as OrCodeLanguages, b as basicSetup, h as html, j as javascript, d as json, e as jsonParseLinter, c as lintGutter, l as linter } from './components/OrCode-46b1b8aa.js';
-export { C as CodeLanguage, s as OrCodeV3 } from './components/OrCodeV3-7ecb46ca.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './components/OrCodeV3-628f8e28.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 './components/OrColorPicker-2271c176.js';
 export { s as OrCombinedInputV3 } from './components/OrCombinedInputV3-795e8cf2.js';
 export { s as OrConfirm } from './components/OrConfirm-f95a3ce6.js';

package/dist/esm/v2/{OrCode-c37dabe7.js → OrCode-4c7bbbd2.js}

@@ -7,9 +7,9 @@ import '@onereach/styles/tailwind/plugins/core';
 import { u as useTheme } from './useTheme-0ef25778.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { basicSetup } from 'codemirror';
-import { keymap, EditorView } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
 import { Compartment, EditorState } from '@codemirror/state';
+import { keymap, EditorView } from '@codemirror/view';
 import { _ as __vue_component__$7 } from './OrIconButton-edff56d4.js';
 import { _ as __vue_component__$6 } from './OrModal-b191f8c8.js';
 import { _ as __vue_component__$2 } from './OrError-916e928e.js';
@@ -19,16 +19,6 @@ import './OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 import { _ as __vue_component__$5 } from './OrLabel-caf02dc4.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
-var CodeLanguage;
-(function (CodeLanguage) {
-  CodeLanguage["HTML"] = "html";
-  CodeLanguage["CSS"] = "css";
-  CodeLanguage["JS"] = "js";
-  CodeLanguage["TS"] = "ts";
-  CodeLanguage["JSON"] = "json";
-  CodeLanguage["MD"] = "md";
-})(CodeLanguage || (CodeLanguage = {}));
-
 const Code = [
 // Layout
 'layout-column',
@@ -204,6 +194,16 @@ const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
   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 CodeLanguage;
+(function (CodeLanguage) {
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["JS"] = "js";
+  CodeLanguage["TS"] = "ts";
+  CodeLanguage["JSON"] = "json";
+  CodeLanguage["MD"] = "md";
+})(CodeLanguage || (CodeLanguage = {}));
+
 var script = defineComponent({
   components: {
     OrModal: __vue_component__$6,
@@ -257,7 +257,7 @@ var script = defineComponent({
       default: true
     }
   },
-  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'editorView', 'control', 'fullscreenControl', 'modal', 'focus', 'blur'],
   setup(props, context) {
     // Refs
@@ -312,6 +312,9 @@ var script = defineComponent({
     // #region Codemirror
     const theme = useTheme();
     const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+      input: event => {
+        context.emit('input', event);
+      },
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -326,6 +329,7 @@ var script = defineComponent({
       }
     }), EditorView.theme({
       '&': {
+        overflow: 'hidden',
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['background']
       },
@@ -341,7 +345,8 @@ var script = defineComponent({
       '.cm-gutters': {
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['primary-opacity-0-12'],
-        borderColor: theme.borderColor['outline']
+        borderColor: theme.borderColor['outline'],
+        backdropFilter: 'blur(2px)'
       },
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
@@ -417,8 +422,8 @@ var script = defineComponent({
       editorView.destroy();
     });
     return {
-      editorView,
       root,
+      editorView,
       control,
       fullscreenControl,
       modal,
@@ -477,8 +482,8 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrModal', {
     ref: "modal",
     attrs: {
-      "size": "l",
-      "additional-styles": _vm.modalStyles
+      "additional-styles": _vm.modalStyles,
+      "size": 'l'
     },
     scopedSlots: _vm._u([{
       key: "header",

package/dist/esm/v2/components/index.js

@@ -24,7 +24,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, _ as OrCodeV3 } from '../OrCode-c37dabe7.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from '../OrCode-4c7bbbd2.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { _ as OrCollapse } from '../OrCollapse-9d22b072.js';

package/dist/esm/v2/components/or-code-v3/OrCode.vue.d.ts

@@ -1,10 +1,10 @@
 import { PropType } from 'vue-demi';
-import { EditorView } from '@codemirror/view';
 import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import { CodeLanguage } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    editorView: EditorView;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    editorView: EditorView;
     control: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -136,8 +136,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
-    editorView: EditorView;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    editorView: EditorView;
     control: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {

package/dist/esm/v2/components/or-code-v3/index.js

@@ -1,4 +1,4 @@
-export { C as CodeLanguage, _ as OrCodeV3 } from '../../OrCode-c37dabe7.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from '../../OrCode-4c7bbbd2.js';
 export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';

package/dist/esm/v2/components/or-tabs/OrTabs.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & {
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & {
     tabs: any;
     indicatorWidth: number;
     indicatorTransformX: number;
@@ -7,7 +7,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     changeActiveIndex(index: number): void;
     setIndicatorStyles({ clientWidth, offsetLeft }: HTMLElement): void;
     onSelect(el: HTMLElement, index: number): void;
-}, {}, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {} & {
+}, {}, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data>, {
     tabs: any;

package/dist/esm/v2/components/or-tabs-v3/OrTabs.vue.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from 'vue-demi';
 import { TabsVariant } from './props';
 import { TabsItem } from './types';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     overflowTab: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -61,7 +61,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<"default" | "fitted">;
         default: () => TabsVariant.Default;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: string | number;
     items: TabsItem[];
     variant: "default" | "fitted";

package/dist/esm/v2/components/or-tag/OrTag.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & import("@vue/composition-api").Data, {
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & import("@vue/composition-api").Data, {
     handleDeleteClick(event: MouseEvent): void;
 }, {
     rootClasses(): Record<string, boolean>;
@@ -44,7 +44,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: boolean;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     content: string;
     color: string;
     canDelete: boolean;

package/dist/esm/v2/components/or-tag-input-v3/OrTagInput.vue.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from 'vue-demi';
 import { TagsOverflow } from '../or-tags-v3';
 import { TagObject } from '../or-tags-v3/types';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     control: import("@vue/composition-api").Ref<HTMLInputElement | undefined>;
     inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
@@ -137,7 +137,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: string[];
     label: string;
     placeholder: string;

package/dist/esm/v2/components/or-tag-v3/OrTag.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { TagColor, TagVariant } from './props';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     custom: import("@vue/composition-api").ComputedRef<boolean>;
@@ -30,7 +30,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     variant: "tag" | "button" | "reset";
     color: string;
     disabled: boolean;

package/dist/esm/v2/components/or-tags-v3/OrTags.vue.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from 'vue-demi';
 import { TagsOverflow } from './props';
 import { Tag } from './types';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     container: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     localOverflow: import("@vue/composition-api").ComputedRef<TagsOverflow.Hidden | "wrap" | "hidden" | "scroll">;
@@ -64,7 +64,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     items: Tag[];
     overflow: "default" | "wrap" | "hidden" | "scroll";
     tagProps: Readonly<Partial<{

package/dist/esm/v2/index.js

@@ -24,7 +24,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-c37dabe7.js';
+export { C as CodeLanguage, _ as OrCodeV3 } from './OrCode-4c7bbbd2.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { _ as OrCollapse } from './OrCollapse-9d22b072.js';

package/dist/esm/v3/{OrCode-6f8164d5.js → OrCode-37d50c74.js}

@@ -7,9 +7,9 @@ import '@onereach/styles/tailwind/plugins/core';
 import { u as useTheme } from './useTheme-0ef25778.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { basicSetup } from 'codemirror';
-import { keymap, EditorView } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
 import { Compartment, EditorState } from '@codemirror/state';
+import { keymap, EditorView } from '@codemirror/view';
 import { s as script$7 } from './OrIconButton-13fd3f96.js';
 import { s as script$6 } from './OrModal-33100f1a.js';
 import { s as script$2 } from './OrError-69bd7f6a.js';
@@ -18,16 +18,6 @@ import { s as script$4 } from './OrInputBox-8c1a29dd.js';
 import { s as script$5 } from './OrLabel-40af976e.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString, createElementVNode, withDirectives, createBlock, createCommentVNode, vShow, withModifiers, createSlots } from 'vue';
 
-var CodeLanguage;
-(function (CodeLanguage) {
-  CodeLanguage["HTML"] = "html";
-  CodeLanguage["CSS"] = "css";
-  CodeLanguage["JS"] = "js";
-  CodeLanguage["TS"] = "ts";
-  CodeLanguage["JSON"] = "json";
-  CodeLanguage["MD"] = "md";
-})(CodeLanguage || (CodeLanguage = {}));
-
 const Code = [
 // Layout
 'layout-column',
@@ -176,6 +166,16 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 script$1.render = render$1;
 script$1.__file = "src/components/or-code-v3/partials/OrCodeControl.vue";
 
+var CodeLanguage;
+(function (CodeLanguage) {
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["JS"] = "js";
+  CodeLanguage["TS"] = "ts";
+  CodeLanguage["JSON"] = "json";
+  CodeLanguage["MD"] = "md";
+})(CodeLanguage || (CodeLanguage = {}));
+
 var script = defineComponent({
   components: {
     OrModal: script$6,
@@ -229,7 +229,7 @@ var script = defineComponent({
       default: true
     }
   },
-  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'editorView', 'control', 'fullscreenControl', 'modal', 'focus', 'blur'],
   setup(props, context) {
     // Refs
@@ -284,6 +284,9 @@ var script = defineComponent({
     // #region Codemirror
     const theme = useTheme();
     const defaultExtensions = [basicSetup, keymap.of([indentWithTab]), EditorState.readOnly.of(props.readonly), EditorView.editable.of(!props.disabled), EditorView.domEventHandlers({
+      input: event => {
+        context.emit('input', event);
+      },
       keydown: event => {
         context.emit('keydown', event);
       },
@@ -298,6 +301,7 @@ var script = defineComponent({
       }
     }), EditorView.theme({
       '&': {
+        overflow: 'hidden',
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['background']
       },
@@ -313,7 +317,8 @@ var script = defineComponent({
       '.cm-gutters': {
         color: theme.textColor['on-background'],
         backgroundColor: theme.backgroundColor['primary-opacity-0-12'],
-        borderColor: theme.borderColor['outline']
+        borderColor: theme.borderColor['outline'],
+        backdropFilter: 'blur(2px)'
       },
       '.cm-activeLineGutter, .cm-activeLine': {
         backgroundColor: theme.backgroundColor['primary-opacity-0-08']
@@ -389,8 +394,8 @@ var script = defineComponent({
       editorView.destroy();
     });
     return {
-      editorView,
       root,
+      editorView,
       control,
       fullscreenControl,
       modal,
@@ -433,8 +438,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["control-id", "label", "hint", "error", "disabled", "readonly"]), createVNode(_component_OrModal, {
     ref: "modal",
-    size: "l",
-    "additional-styles": _ctx.modalStyles
+    "additional-styles": _ctx.modalStyles,
+    size: 'l'
   }, createSlots({
     header: withCtx(() => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)]),
 

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

@@ -22,7 +22,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from '../OrCode-6f8164d5.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../OrCode-37d50c74.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from '../OrCollapse-d7c0afae.js';

package/dist/esm/v3/components/or-code-v3/OrCode.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
-import { EditorView } from '@codemirror/view';
 import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import { CodeLanguage } from './props';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
@@ -44,8 +44,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }, {
-    editorView: EditorView;
     root: import("vue-demi").Ref<HTMLElement | undefined>;
+    editorView: EditorView;
     control: import("vue-demi").Ref<any>;
     fullscreenControl: import("vue-demi").Ref<any>;
     modal: import("vue-demi").Ref<any>;
@@ -69,7 +69,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     focus: () => void;
     blur: () => void;
     openFullscreen: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "input" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "input" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: undefined;
@@ -112,6 +112,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
     onKeydown?: ((...args: any[]) => any) | undefined;
     onKeyup?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;

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

@@ -1,4 +1,4 @@
-export { C as CodeLanguage, s as OrCodeV3 } from '../../OrCode-6f8164d5.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../../OrCode-37d50c74.js';
 export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';

package/dist/esm/v3/index.js

@@ -22,7 +22,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-6f8164d5.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-37d50c74.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.17.0",
+  "version": "8.17.1-beta.3881.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -176,6 +176,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "5f3a231f61caf830f2a12a9c0f4d77674cd78053"
+  }
 }

package/src/components/or-code-v3/OrCode.vue

@@ -24,16 +24,16 @@
         </div>
       </template>
     </OrCodeControl>
+
     <OrModal
       ref="modal"
-      size="l"
       :additional-styles="modalStyles"
+      :size="'l'"
     >
-      <template
-        v-slot:header
-      >
+      <template v-slot:header>
         {{ label }}
       </template>
+
       <OrCodeControl
         ref="fullscreenControl"
         :control-id="controlAttributes.id"
@@ -46,6 +46,7 @@
           <slot name="addon" />
         </template>
       </OrCodeControl>
+
       <template
         v-if="$slots.modalFooter"
         v-slot:footer
@@ -63,17 +64,17 @@ import { useControlAttributes, useIdAttribute, useProxyModelValue, useTheme, use
 /* Codemirror core */
 import { basicSetup } from 'codemirror';
 
-import { EditorView, keymap } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
-import { EditorState, Extension, Compartment } from '@codemirror/state';
+import { Compartment, EditorState, Extension } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
 
 /* Components */
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrModalV3 as OrModal } from '../or-modal-v3';
 
+import OrCodeControl from './partials/OrCodeControl.vue';
 import { CodeLanguage } from './props';
 import { Code, CodeControl, CodeModal } from './styles';
-import OrCodeControl from './partials/OrCodeControl.vue';
 
 export default defineComponent({
   components: {
@@ -143,6 +144,7 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
+    'input',
     'keydown',
     'keyup',
     'focus',
@@ -151,6 +153,7 @@ export default defineComponent({
 
   expose: [
     'root',
+
     'editorView',
     'control',
     'fullscreenControl',
@@ -242,6 +245,10 @@ export default defineComponent({
       EditorView.editable.of(!props.disabled),
 
       EditorView.domEventHandlers({
+        input: (event) => {
+          context.emit('input', event);
+        },
+
         keydown: (event) => {
           context.emit('keydown', event);
         },
@@ -261,6 +268,8 @@ export default defineComponent({
 
       EditorView.theme({
         '&': {
+          overflow: 'hidden',
+
           color: theme.textColor['on-background'],
           backgroundColor: theme.backgroundColor['background'],
         },
@@ -280,6 +289,8 @@ export default defineComponent({
           color: theme.textColor['on-background'],
           backgroundColor: theme.backgroundColor['primary-opacity-0-12'],
           borderColor: theme.borderColor['outline'],
+
+          backdropFilter: 'blur(2px)',
         },
 
         '.cm-activeLineGutter, .cm-activeLine': {
@@ -290,6 +301,7 @@ export default defineComponent({
 
     const state = EditorState.create({
       doc: proxyModelValue.value,
+
       extensions: [
         ...defaultExtensions,
         languageExtensionCompartment.of([]),
@@ -299,6 +311,7 @@ export default defineComponent({
 
     const editorView = new EditorView({
       state,
+
       dispatch: (transaction) => {
         editorView.update([
           transaction,
@@ -323,6 +336,7 @@ export default defineComponent({
           to: editorView!.state.doc.length,
           insert: modelValue,
         },
+
         selection: selection.ranges.some((range) => range.to > modelValue.length) ? { anchor: modelValue.length } : selection,
       });
     });
@@ -363,8 +377,8 @@ export default defineComponent({
     });
 
     return {
-      editorView,
       root,
+      editorView,
       control,
       fullscreenControl,
       modal,

package/src/components/or-code-v3/partials/OrCodeControl.vue

@@ -50,6 +50,7 @@
     </div>
   </div>
 </template>
+
 <script lang="ts">
 import { computed, ref, defineComponent } from 'vue-demi';
 import { OrErrorV3 as OrError } from '../../or-error-v3';
@@ -101,7 +102,15 @@ export default defineComponent({
       default: undefined,
     },
   },
-  expose: ['root', 'control', 'focus', 'blur'],
+
+  expose: [
+    'root',
+    'control',
+
+    'focus',
+    'blur',
+  ],
+
   setup() {
     // Refs
     const root = ref<HTMLElement>();