@onereach/ui-components 17.4.0-beta.4895.0 → 17.4.0-beta.4897.0

package/dist/bundled/v2/{OrInlineInput-ceaf40fa.js → OrInlineInput-c43aa80f.js}

@@ -1,9 +1,10 @@
 import { defineComponent, reactive, ref, computed, toRef, watch, nextTick } from 'vue-demi';
 import { InlineInput, InlineInputControl, InlineInputAction, InlineInputActionSizes } from './components/OrInlineInputV3/styles.js';
 import __vue_component__$1 from './components/OrErrorV3/OrError.js';
-import __vue_component__$2 from './components/OrHintV3/OrHint.js';
-import __vue_component__$3 from './components/OrIconButtonV3/OrIconButton.js';
-import __vue_component__$4 from './components/OrInlineInputBoxV3/OrInlineInputBox.js';
+import __vue_component__$2 from './components/OrTextV3/OrText.js';
+import __vue_component__$3 from './components/OrHintV3/OrHint.js';
+import __vue_component__$4 from './components/OrIconButtonV3/OrIconButton.js';
+import __vue_component__$5 from './components/OrInlineInputBoxV3/OrInlineInputBox.js';
 import { InlineInputBoxSize } from './components/OrInlineInputBoxV3/props.js';
 import { useIdAttribute } from './hooks/useIdAttribute.js';
 import { useControlAttributes } from './hooks/useControlAttributes.js';
@@ -22,9 +23,10 @@ var script = defineComponent({
   name: 'OrInlineInput',
   components: {
     OrError: __vue_component__$1,
-    OrHint: __vue_component__$2,
-    OrIconButton: __vue_component__$3,
-    OrInlineInputBox: __vue_component__$4
+    OrText: __vue_component__$2,
+    OrHint: __vue_component__$3,
+    OrIconButton: __vue_component__$4,
+    OrInlineInputBox: __vue_component__$5
   },
   model: {
     prop: 'modelValue',
@@ -58,6 +60,10 @@ var script = defineComponent({
     saveOnBlur: {
       type: Boolean,
       default: false
+    },
+    sliceIndex: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'apply', 'reset'],
@@ -92,6 +98,12 @@ var script = defineComponent({
     function onFocus() {
       activated.value = true;
     }
+    function onTextClick() {
+      if (!activated.value) {
+        activated.value = true;
+      }
+      nextTick(() => focus());
+    }
     function onBlur() {
       if (props.saveOnBlur) {
         apply();
@@ -134,6 +146,7 @@ var script = defineComponent({
       maxLength,
       onFocus,
       onBlur,
+      onTextClick,
       apply,
       reset,
       focus,
@@ -142,7 +155,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-f607fecc]{min-width:0;background:0 0;outline:0}input[type=number][data-v-f607fecc]::-webkit-inner-spin-button{display:none}input[type=search][data-v-f607fecc]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-47b48fa6]{min-width:0;background:0 0;outline:0}input[type=number][data-v-47b48fa6]::-webkit-inner-spin-button{display:none}input[type=search][data-v-47b48fa6]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -163,7 +176,7 @@ var __vue_render__ = function () {
       "invalid": !!_vm.error,
       "activated": _vm.activated
     }
-  }, [_c('input', _vm._b({
+  }, [_vm.activated || !_vm.draft ? _c('input', _vm._b({
     directives: [{
       name: "model",
       rawName: "v-model.trim",
@@ -209,7 +222,16 @@ var __vue_render__ = function () {
         return _vm.$forceUpdate();
       }]
     }
-  }, 'input', _vm.attributes, false))]), _vm._v(" "), _vm.activated && !_vm.saveOnBlur ? [_c('div', {
+  }, 'input', _vm.attributes, false)) : _c('OrText', {
+    class: _vm.controlStyles,
+    attrs: {
+      "text": _vm.draft.toString(),
+      "slice-index": _vm.sliceIndex
+    },
+    on: {
+      "click": _vm.onTextClick
+    }
+  })], 1), _vm._v(" "), _vm.activated && !_vm.saveOnBlur ? [_c('div', {
     class: _vm.actionStyles
   }, [_c('OrIconButton', {
     attrs: {
@@ -270,7 +292,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-f607fecc";
+const __vue_scope_id__ = "data-v-47b48fa6";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrInlineInputV3/OrInlineInput.js

@@ -1,2 +1,2 @@
-export { _ as default } from '../../OrInlineInput-ceaf40fa.js';
+export { _ as default } from '../../OrInlineInput-c43aa80f.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrInlineInputV3/OrInlineInput.vue.d.ts

@@ -30,6 +30,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sliceIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, {
     attributes: {
         required: boolean | undefined;
@@ -56,6 +60,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxLength: import("vue-demi").ComputedRef<number | undefined>;
     onFocus: () => void;
     onBlur: () => void;
+    onTextClick: () => void;
     apply: () => void;
     reset: () => void;
     focus: () => void;
@@ -89,6 +94,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sliceIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
@@ -106,5 +115,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     hint: string;
     error: string | boolean;
     saveOnBlur: boolean;
+    sliceIndex: number;
 }>;
 export default _default;

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

@@ -1 +1 @@
-export { I as InlineInputType, _ as OrInlineInputV3 } from '../../OrInlineInput-ceaf40fa.js';
+export { I as InlineInputType, _ as OrInlineInputV3 } from '../../OrInlineInput-c43aa80f.js';

package/dist/bundled/v2/components/OrTextV3/OrText.js

@@ -29,8 +29,11 @@ var script = defineComponent({
       default: 0
     }
   },
+  emits: ['focus', 'click'],
   expose: ['root'],
-  setup(props) {
+  setup(props, {
+    emit
+  }) {
     // Refs
     const root = ref();
     // Styles
@@ -65,13 +68,22 @@ var script = defineComponent({
       }
       return restPart;
     });
+    // Methods
+    function onFocus(event) {
+      emit('focus', event);
+    }
+    function onClick(event) {
+      emit('click', event);
+    }
     return {
       root,
       rootStyles,
       mainTextStyles,
       restTextStyles,
       mainText,
-      restText
+      restText,
+      onFocus,
+      onClick
     };
   }
 });
@@ -86,7 +98,11 @@ var __vue_render__ = function () {
   var _c = _vm._self._c || _h;
   return _c('div', {
     ref: 'root',
-    class: _vm.rootStyles
+    class: _vm.rootStyles,
+    on: {
+      "focus": _vm.onFocus,
+      "click": _vm.onClick
+    }
   }, [_c('div', {
     class: _vm.mainTextStyles
   }, [_vm._v("\n    " + _vm._s(_vm.mainText) + "\n  ")]), _vm._v(" "), _c('div', {

package/dist/bundled/v2/components/OrTextV3/OrText.vue.d.ts

@@ -29,7 +29,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     restTextStyles: import("vue-demi").ComputedRef<string[]>;
     mainText: import("vue-demi").ComputedRef<string>;
     restText: import("vue-demi").ComputedRef<string>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    onFocus: (event: MouseEvent) => void;
+    onClick: (event: MouseEvent) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("focus" | "click")[], "focus" | "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     /**
      * Text to crop.
      */
@@ -48,7 +50,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
     sliceIndex: number;
 }>;
 export default _default;

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

@@ -94,7 +94,7 @@ export { default as OrIconV3 } from './OrIconV3/OrIcon.js';
 export { IconSize, IconVariant } from './OrIconV3/props.js';
 export { default as OrInlineInputBoxV3 } from './OrInlineInputBoxV3/OrInlineInputBox.js';
 export { InlineInputBoxSize } from './OrInlineInputBoxV3/props.js';
-export { I as InlineInputType, _ as OrInlineInputV3 } from '../OrInlineInput-ceaf40fa.js';
+export { I as InlineInputType, _ as OrInlineInputV3 } from '../OrInlineInput-c43aa80f.js';
 export { default as OrInlineTextEdit } from './OrInlineTextEdit/OrInlineTextEdit.js';
 export { InlineTextEditTrimmingTypes, InlineTextEditTypes } from './OrInlineTextEdit/constants.js';
 export { default as OrInlineTextareaV3 } from './OrInlineTextareaV3/OrInlineTextarea.js';

package/dist/bundled/v2/index.js

@@ -32,7 +32,7 @@ export { default as OrEmptyStateV3 } from './components/OrEmptyStateV3/OrEmptySt
 export { default as OrErrorTagV3 } from './components/OrErrorTagV3/OrErrorTag.js';
 export { default as OrFabV3 } from './components/OrFabV3/OrFab.js';
 export { default as OrFilterV3 } from './components/OrFilterV3/OrFilter.js';
-export { I as InlineInputType, _ as OrInlineInputV3 } from './OrInlineInput-ceaf40fa.js';
+export { I as InlineInputType, _ as OrInlineInputV3 } from './OrInlineInput-c43aa80f.js';
 export { default as OrInlineTextEdit } from './components/OrInlineTextEdit/OrInlineTextEdit.js';
 export { default as OrInlineTextareaV3 } from './components/OrInlineTextareaV3/OrInlineTextarea.js';
 export { default as OrLinkV3 } from './components/OrLinkV3/OrLink.js';
@@ -71,7 +71,6 @@ export { default as OrTab } from './components/OrTab/OrTab.js';
 export { default as OrTabs } from './components/OrTabs/OrTabs.js';
 export { default as OrTabsV3 } from './components/OrTabsV3/OrTabs.js';
 export { default as OrTag } from './components/OrTag/OrTag.js';
-export { default as OrTextV3 } from './components/OrTextV3/OrText.js';
 export { default as OrTextarea } from './components/OrTextarea/OrTextarea.js';
 export { default as OrTextareaV3 } from './components/OrTextareaV3/OrTextarea.js';
 export { default as OrTextbox } from './components/OrTextbox/OrTextbox.js';
@@ -203,6 +202,7 @@ export { default as OrTagsV3 } from './components/OrTagsV3/OrTags.js';
 export { TagsOverflow } from './components/OrTagsV3/props.js';
 export { default as OrTeleport } from './components/OrTeleport/OrTeleport.js';
 export { default as OrTeleportV3 } from './components/OrTeleportV3/OrTeleport.js';
+export { default as OrTextV3 } from './components/OrTextV3/OrText.js';
 export { TextboxTypes } from './components/OrTextbox/constants.js';
 export { default as OrToast } from './components/OrToast/OrToast.js';
 export { default as useQueue } from './components/OrToast/composable/useQueue.js';

package/dist/bundled/v3/components/OrInlineInputV3/OrInlineInput.js

@@ -1 +1 @@
-export { s as default } from '../OrInlineInputV3-51563d74.js';
+export { s as default } from '../OrInlineInputV3-31f5a991.js';

package/dist/bundled/v3/components/OrInlineInputV3/OrInlineInput.vue.d.ts

@@ -30,6 +30,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sliceIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, {
     attributes: {
         required: boolean | undefined;
@@ -56,6 +60,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxLength: import("vue-demi").ComputedRef<number | undefined>;
     onFocus: () => void;
     onBlur: () => void;
+    onTextClick: () => void;
     apply: () => void;
     reset: () => void;
     focus: () => void;
@@ -89,6 +94,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sliceIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
@@ -106,5 +115,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     hint: string;
     error: string | boolean;
     saveOnBlur: boolean;
+    sliceIndex: number;
 }>;
 export default _default;

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

@@ -1 +1 @@
-export { I as InlineInputType, s as OrInlineInputV3 } from '../OrInlineInputV3-51563d74.js';
+export { I as InlineInputType, s as OrInlineInputV3 } from '../OrInlineInputV3-31f5a991.js';

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

@@ -1,2 +1,2 @@
 import '../OrInlineInputBoxV3-71cfa047.js';
-export { a as InlineInput, c as InlineInputAction, d as InlineInputActionSizes, b as InlineInputControl } from '../OrInlineInputV3-51563d74.js';
+export { a as InlineInput, c as InlineInputAction, d as InlineInputActionSizes, b as InlineInputControl } from '../OrInlineInputV3-31f5a991.js';

package/dist/bundled/v3/components/{OrInlineInputV3-51563d74.js → OrInlineInputV3-31f5a991.js}

@@ -1,10 +1,11 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, withModifiers, createCommentVNode, createBlock, createSlots, renderSlot, createTextVNode, toDisplayString, vShow } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, createBlock, withModifiers, createCommentVNode, createSlots, renderSlot, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './OrAvatar-640daf7d.js';
 import { defineComponent, reactive, ref, computed, toRef, watch, nextTick } from 'vue-demi';
-import { I as InlineInputBoxSize, s as script$4 } from './OrInlineInputBoxV3-71cfa047.js';
+import { I as InlineInputBoxSize, s as script$5 } from './OrInlineInputBoxV3-71cfa047.js';
 import { s as script$1 } from './OrErrorV3-b04d76aa.js';
-import { s as script$2 } from './OrHintV3-c8ac5975.js';
-import { s as script$3 } from './OrIconButtonV3-8792db31.js';
+import { s as script$2 } from './OrTextV3-ca17d46d.js';
+import { s as script$3 } from './OrHintV3-c8ac5975.js';
+import { s as script$4 } from './OrIconButtonV3-8792db31.js';
 import { useIdAttribute } from '../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../hooks/useValidationAttributes.js';
@@ -51,9 +52,10 @@ var script = defineComponent({
   name: 'OrInlineInput',
   components: {
     OrError: script$1,
-    OrHint: script$2,
-    OrIconButton: script$3,
-    OrInlineInputBox: script$4
+    OrText: script$2,
+    OrHint: script$3,
+    OrIconButton: script$4,
+    OrInlineInputBox: script$5
   },
   model: {
     prop: 'modelValue',
@@ -87,6 +89,10 @@ var script = defineComponent({
     saveOnBlur: {
       type: Boolean,
       default: false
+    },
+    sliceIndex: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'apply', 'reset'],
@@ -121,6 +127,12 @@ var script = defineComponent({
     function onFocus() {
       activated.value = true;
     }
+    function onTextClick() {
+      if (!activated.value) {
+        activated.value = true;
+      }
+      nextTick(() => focus());
+    }
     function onBlur() {
       if (props.saveOnBlur) {
         apply();
@@ -163,6 +175,7 @@ var script = defineComponent({
       maxLength,
       onFocus,
       onBlur,
+      onTextClick,
       apply,
       reset,
       focus,
@@ -176,6 +189,7 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = ["type", "placeholder", "activated"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrText = resolveComponent("OrText");
   const _component_OrInlineInputBox = resolveComponent("OrInlineInputBox");
   const _component_OrIconButton = resolveComponent("OrIconButton");
   const _component_OrHint = resolveComponent("OrHint");
@@ -188,7 +202,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     invalid: !!_ctx.error,
     activated: _ctx.activated
   }, {
-    default: withCtx(() => [withDirectives(createElementVNode("input", mergeProps({
+    default: withCtx(() => [_ctx.activated || !_ctx.draft ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
+      key: 0,
       ref: 'control'
     }, _ctx.attributes, {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draft = $event),
@@ -207,9 +222,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         _ctx.$emit('blur', $event);
         _ctx.onBlur();
       })
-    }), null, 16 /* FULL_PROPS */, _hoisted_2), [[vModelDynamic, _ctx.draft, void 0, {
+    }), null, 16 /* FULL_PROPS */, _hoisted_2)), [[vModelDynamic, _ctx.draft, void 0, {
       trim: true
-    }]])]),
+    }]]) : (openBlock(), createBlock(_component_OrText, {
+      key: 1,
+      text: _ctx.draft.toString(),
+      "slice-index": _ctx.sliceIndex,
+      class: normalizeClass(_ctx.controlStyles),
+      onClick: _ctx.onTextClick
+    }, null, 8 /* PROPS */, ["text", "slice-index", "class", "onClick"]))]),
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["size", "invalid", "activated"]), _ctx.activated && !_ctx.saveOnBlur ? (openBlock(), createElementBlock("div", {
     key: 0,

package/dist/bundled/v3/components/OrTextV3/OrText.js

@@ -1 +1 @@
-export { s as default } from '../OrTextV3-f2e88ff5.js';
+export { s as default } from '../OrTextV3-ca17d46d.js';

package/dist/bundled/v3/components/OrTextV3/OrText.vue.d.ts

@@ -29,7 +29,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     restTextStyles: import("vue-demi").ComputedRef<string[]>;
     mainText: import("vue-demi").ComputedRef<string>;
     restText: import("vue-demi").ComputedRef<string>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    onFocus: (event: MouseEvent) => void;
+    onClick: (event: MouseEvent) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("focus" | "click")[], "focus" | "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     /**
      * Text to crop.
      */
@@ -48,7 +50,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
     sliceIndex: number;
 }>;
 export default _default;

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

@@ -1 +1 @@
-export { s as OrTextV3 } from '../OrTextV3-f2e88ff5.js';
+export { s as OrTextV3 } from '../OrTextV3-ca17d46d.js';

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

@@ -1 +1 @@
-export { M as MainText, R as RestText, T as TextRoot } from '../OrTextV3-f2e88ff5.js';
+export { M as MainText, R as RestText, T as TextRoot } from '../OrTextV3-ca17d46d.js';

package/dist/bundled/v3/components/{OrTextV3-f2e88ff5.js → OrTextV3-ca17d46d.js}

@@ -44,8 +44,11 @@ var script = defineComponent({
       default: 0
     }
   },
+  emits: ['focus', 'click'],
   expose: ['root'],
-  setup(props) {
+  setup(props, {
+    emit
+  }) {
     // Refs
     const root = ref();
     // Styles
@@ -80,13 +83,22 @@ var script = defineComponent({
       }
       return restPart;
     });
+    // Methods
+    function onFocus(event) {
+      emit('focus', event);
+    }
+    function onClick(event) {
+      emit('click', event);
+    }
     return {
       root,
       rootStyles,
       mainTextStyles,
       restTextStyles,
       mainText,
-      restText
+      restText,
+      onFocus,
+      onClick
     };
   }
 });
@@ -94,12 +106,14 @@ var script = defineComponent({
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
-    class: normalizeClass(_ctx.rootStyles)
+    class: normalizeClass(_ctx.rootStyles),
+    onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.mainTextStyles)
   }, toDisplayString(_ctx.mainText), 3 /* TEXT, CLASS */), createElementVNode("div", {
     class: normalizeClass(_ctx.restTextStyles)
-  }, toDisplayString(_ctx.restText), 3 /* TEXT, CLASS */)], 2 /* CLASS */);
+  }, toDisplayString(_ctx.restText), 3 /* TEXT, CLASS */)], 34 /* CLASS, NEED_HYDRATION */);
 }
 
 script.render = render;

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

@@ -51,7 +51,7 @@ export { OrIcon, OrIconColors, OrIconType } from './OrIcon/index.js';
 export { I as IconButtonColor, s as OrIconButtonV3 } from './OrIconButtonV3-8792db31.js';
 export { I as IconSize, a as IconVariant, s as OrIconV3 } from './OrIconV3-b5c97ea7.js';
 export { I as InlineInputBoxSize, s as OrInlineInputBoxV3 } from './OrInlineInputBoxV3-71cfa047.js';
-export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInputV3-51563d74.js';
+export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInputV3-31f5a991.js';
 export { InlineTextEditTrimmingTypes, InlineTextEditTypes, OrInlineTextEdit } from './OrInlineTextEdit/index.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextareaV3-f1c61121.js';
 export { default as OrInput } from './OrInput/OrInput.js';
@@ -116,7 +116,7 @@ export { s as OrTagV3, T as TagColor, a as TagVariant } from './OrTagV3-abe42237
 export { s as OrTagsV3, T as TagsOverflow } from './OrTagsV3-979aa458.js';
 export { s as OrTeleport } from './OrTeleport-5a34b07f.js';
 export { default as OrTeleportV3 } from './OrTeleportV3/OrTeleport.js';
-export { s as OrTextV3 } from './OrTextV3-f2e88ff5.js';
+export { s as OrTextV3 } from './OrTextV3-ca17d46d.js';
 export { default as OrTextarea } from './OrTextarea/OrTextarea.js';
 export { s as OrTextareaV3 } from './OrTextareaV3-d145ef2d.js';
 export { OrTextbox, TextboxTypes } from './OrTextbox/index.js';

package/dist/bundled/v3/index.js

@@ -28,7 +28,7 @@ export { E as EmptyStateSize, s as OrEmptyStateV3 } from './components/OrEmptySt
 export { s as OrErrorTagV3 } from './components/OrErrorTagV3-1b00b9d5.js';
 export { F as FabColor, s as OrFabV3 } from './components/OrFabV3-86cf1da1.js';
 export { s as OrFilterV3 } from './components/OrFilterV3-34e6b845.js';
-export { I as InlineInputType, s as OrInlineInputV3 } from './components/OrInlineInputV3-51563d74.js';
+export { I as InlineInputType, s as OrInlineInputV3 } from './components/OrInlineInputV3-31f5a991.js';
 export { InlineTextEditTrimmingTypes, InlineTextEditTypes, OrInlineTextEdit } from './components/OrInlineTextEdit/index.js';
 export { s as OrInlineTextareaV3 } from './components/OrInlineTextareaV3-f1c61121.js';
 export { L as LinkColor, s as OrLinkV3 } from './components/OrLinkV3-56763fd9.js';
@@ -61,7 +61,6 @@ export { default as OrTab } from './components/OrTab/OrTab.js';
 export { default as OrTabs } from './components/OrTabs/OrTabs.js';
 export { s as OrTabsV3, T as TabsVariant } from './components/OrTabsV3-b7ff2cef.js';
 export { default as OrTag } from './components/OrTag/OrTag.js';
-export { s as OrTextV3 } from './components/OrTextV3-f2e88ff5.js';
 export { default as OrTextarea } from './components/OrTextarea/OrTextarea.js';
 export { s as OrTextareaV3 } from './components/OrTextareaV3-d145ef2d.js';
 export { OrTextbox, TextboxTypes } from './components/OrTextbox/index.js';
@@ -126,6 +125,7 @@ export { s as OrTagV3, T as TagColor, a as TagVariant } from './components/OrTag
 export { s as OrTagsV3, T as TagsOverflow } from './components/OrTagsV3-979aa458.js';
 export { s as OrTeleport } from './components/OrTeleport-5a34b07f.js';
 export { default as OrTeleportV3 } from './components/OrTeleportV3/OrTeleport.js';
+export { s as OrTextV3 } from './components/OrTextV3-ca17d46d.js';
 export { s as OrTimePickerV3 } from './components/OrTimePickerV3-90b57473.js';
 export { OrTooltip, OrTooltipContent } from './components/OrTooltip/index.js';
 export { s as OrTooltipV3 } from './components/OrTooltipV3-39318e8a.js';

package/dist/esm/v2/{OrInlineInput-44ac1903.js → OrInlineInput-36e8dbba.js}

@@ -8,9 +8,10 @@ import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-257954f3.js';
 import { _ as __vue_component__$1 } from './OrError-b25d782d.js';
-import { _ as __vue_component__$2 } from './OrHint-2fe1157b.js';
-import { _ as __vue_component__$3 } from './OrIconButton-786f390f.js';
-import { I as InlineInputBoxSize, _ as __vue_component__$4 } from './OrInlineInputBox-5d5ae227.js';
+import { _ as __vue_component__$3 } from './OrHint-2fe1157b.js';
+import { _ as __vue_component__$4 } from './OrIconButton-786f390f.js';
+import { I as InlineInputBoxSize, _ as __vue_component__$5 } from './OrInlineInputBox-5d5ae227.js';
+import { _ as __vue_component__$2 } from './OrText-4dc3abff.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -55,9 +56,10 @@ var script = defineComponent({
   name: 'OrInlineInput',
   components: {
     OrError: __vue_component__$1,
-    OrHint: __vue_component__$2,
-    OrIconButton: __vue_component__$3,
-    OrInlineInputBox: __vue_component__$4
+    OrText: __vue_component__$2,
+    OrHint: __vue_component__$3,
+    OrIconButton: __vue_component__$4,
+    OrInlineInputBox: __vue_component__$5
   },
   model: {
     prop: 'modelValue',
@@ -91,6 +93,10 @@ var script = defineComponent({
     saveOnBlur: {
       type: Boolean,
       default: false
+    },
+    sliceIndex: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'apply', 'reset'],
@@ -125,6 +131,12 @@ var script = defineComponent({
     function onFocus() {
       activated.value = true;
     }
+    function onTextClick() {
+      if (!activated.value) {
+        activated.value = true;
+      }
+      nextTick(() => focus());
+    }
     function onBlur() {
       if (props.saveOnBlur) {
         apply();
@@ -167,6 +179,7 @@ var script = defineComponent({
       maxLength,
       onFocus,
       onBlur,
+      onTextClick,
       apply,
       reset,
       focus,
@@ -175,7 +188,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-f607fecc]{min-width:0;background:0 0;outline:0}input[type=number][data-v-f607fecc]::-webkit-inner-spin-button{display:none}input[type=search][data-v-f607fecc]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-47b48fa6]{min-width:0;background:0 0;outline:0}input[type=number][data-v-47b48fa6]::-webkit-inner-spin-button{display:none}input[type=search][data-v-47b48fa6]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -196,7 +209,7 @@ var __vue_render__ = function () {
       "invalid": !!_vm.error,
       "activated": _vm.activated
     }
-  }, [_c('input', _vm._b({
+  }, [_vm.activated || !_vm.draft ? _c('input', _vm._b({
     directives: [{
       name: "model",
       rawName: "v-model.trim",
@@ -242,7 +255,16 @@ var __vue_render__ = function () {
         return _vm.$forceUpdate();
       }]
     }
-  }, 'input', _vm.attributes, false))]), _vm._v(" "), _vm.activated && !_vm.saveOnBlur ? [_c('div', {
+  }, 'input', _vm.attributes, false)) : _c('OrText', {
+    class: _vm.controlStyles,
+    attrs: {
+      "text": _vm.draft.toString(),
+      "slice-index": _vm.sliceIndex
+    },
+    on: {
+      "click": _vm.onTextClick
+    }
+  })], 1), _vm._v(" "), _vm.activated && !_vm.saveOnBlur ? [_c('div', {
     class: _vm.actionStyles
   }, [_c('OrIconButton', {
     attrs: {
@@ -303,7 +325,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-f607fecc";
+const __vue_scope_id__ = "data-v-47b48fa6";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrText-cab6adea.js → OrText-4dc3abff.js}

@@ -44,8 +44,11 @@ var script = defineComponent({
       default: 0
     }
   },
+  emits: ['focus', 'click'],
   expose: ['root'],
-  setup(props) {
+  setup(props, {
+    emit
+  }) {
     // Refs
     const root = ref();
     // Styles
@@ -80,13 +83,22 @@ var script = defineComponent({
       }
       return restPart;
     });
+    // Methods
+    function onFocus(event) {
+      emit('focus', event);
+    }
+    function onClick(event) {
+      emit('click', event);
+    }
     return {
       root,
       rootStyles,
       mainTextStyles,
       restTextStyles,
       mainText,
-      restText
+      restText,
+      onFocus,
+      onClick
     };
   }
 });
@@ -101,7 +113,11 @@ var __vue_render__ = function () {
   var _c = _vm._self._c || _h;
   return _c('div', {
     ref: 'root',
-    class: _vm.rootStyles
+    class: _vm.rootStyles,
+    on: {
+      "focus": _vm.onFocus,
+      "click": _vm.onClick
+    }
   }, [_c('div', {
     class: _vm.mainTextStyles
   }, [_vm._v("\n    " + _vm._s(_vm.mainText) + "\n  ")]), _vm._v(" "), _c('div', {

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

@@ -67,7 +67,7 @@ export { _ as OrIcon, O as OrIconColors, a as OrIconType } from '../OrIcon-9ca8a
 export { I as IconButtonColor, _ as OrIconButtonV3 } from '../OrIconButton-786f390f.js';
 export { a as IconSize, I as IconVariant, _ as OrIconV3 } from '../OrIcon-0a14dafc.js';
 export { I as InlineInputBoxSize, _ as OrInlineInputBoxV3 } from '../OrInlineInputBox-5d5ae227.js';
-export { I as InlineInputType, _ as OrInlineInputV3 } from '../OrInlineInput-44ac1903.js';
+export { I as InlineInputType, _ as OrInlineInputV3 } from '../OrInlineInput-36e8dbba.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, _ as OrInlineTextEdit } from '../OrInlineTextEdit-39be2a6b.js';
 export { _ as OrInlineTextareaV3 } from '../OrInlineTextarea-b5a2d058.js';
 export { _ as OrInput } from '../OrInput-3999ffd3.js';
@@ -141,7 +141,7 @@ export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-4f64164e.
 export { _ as OrTagsV3, T as TagsOverflow } from '../OrTags-4b35fccf.js';
 export { _ as OrTeleport } from '../OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from '../OrTeleport.vue2-424c7f33.js';
-export { _ as OrTextV3 } from '../OrText-cab6adea.js';
+export { _ as OrTextV3 } from '../OrText-4dc3abff.js';
 export { _ as OrTextarea } from '../OrTextarea-62ad6213.js';
 export { _ as OrTextareaV3 } from '../OrTextarea-c5cadeb1.js';
 export { _ as OrTextbox, T as TextboxTypes } from '../OrTextbox-45f6d684.js';

package/dist/esm/v2/components/or-inline-input-v3/OrInlineInput.vue.d.ts

@@ -30,6 +30,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sliceIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, {
     attributes: {
         required: boolean | undefined;
@@ -56,6 +60,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxLength: import("vue-demi").ComputedRef<number | undefined>;
     onFocus: () => void;
     onBlur: () => void;
+    onTextClick: () => void;
     apply: () => void;
     reset: () => void;
     focus: () => void;
@@ -89,6 +94,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sliceIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
@@ -106,5 +115,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     hint: string;
     error: string | boolean;
     saveOnBlur: boolean;
+    sliceIndex: number;
 }>;
 export default _default;

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

@@ -1,4 +1,4 @@
-export { I as InlineInputType, _ as OrInlineInputV3 } from '../../OrInlineInput-44ac1903.js';
+export { I as InlineInputType, _ as OrInlineInputV3 } from '../../OrInlineInput-36e8dbba.js';
 import 'vue-demi';
 import '../../useIdAttribute-3a339b79.js';
 import '../../TimeFormat-a7f5565b.js';
@@ -30,4 +30,5 @@ import '../../useTheme-dc76b423.js';
 import '../../isPrevented-b1764210.js';
 import '../../isAncestor-2973d4f4.js';
 import '../../OrInlineInputBox-5d5ae227.js';
+import '../../OrText-4dc3abff.js';
 import '../../style-inject.es-4c6f2515.js';

package/dist/esm/v2/components/or-text-v3/OrText.vue.d.ts

@@ -29,7 +29,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     restTextStyles: import("vue-demi").ComputedRef<string[]>;
     mainText: import("vue-demi").ComputedRef<string>;
     restText: import("vue-demi").ComputedRef<string>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    onFocus: (event: MouseEvent) => void;
+    onClick: (event: MouseEvent) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("focus" | "click")[], "focus" | "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     /**
      * Text to crop.
      */
@@ -48,7 +50,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
     sliceIndex: number;
 }>;
 export default _default;

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

@@ -1,3 +1,3 @@
-export { _ as OrTextV3 } from '../../OrText-cab6adea.js';
+export { _ as OrTextV3 } from '../../OrText-4dc3abff.js';
 import 'vue-demi';
 import '../../normalize-component-6e8e3d80.js';

package/dist/esm/v2/index.js

@@ -67,7 +67,7 @@ export { _ as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-9ca8a3
 export { I as IconButtonColor, _ as OrIconButtonV3 } from './OrIconButton-786f390f.js';
 export { a as IconSize, I as IconVariant, _ as OrIconV3 } from './OrIcon-0a14dafc.js';
 export { I as InlineInputBoxSize, _ as OrInlineInputBoxV3 } from './OrInlineInputBox-5d5ae227.js';
-export { I as InlineInputType, _ as OrInlineInputV3 } from './OrInlineInput-44ac1903.js';
+export { I as InlineInputType, _ as OrInlineInputV3 } from './OrInlineInput-36e8dbba.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, _ as OrInlineTextEdit } from './OrInlineTextEdit-39be2a6b.js';
 export { _ as OrInlineTextareaV3 } from './OrInlineTextarea-b5a2d058.js';
 export { _ as OrInput } from './OrInput-3999ffd3.js';
@@ -141,7 +141,7 @@ export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-4f64164e.j
 export { _ as OrTagsV3, T as TagsOverflow } from './OrTags-4b35fccf.js';
 export { _ as OrTeleport } from './OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-424c7f33.js';
-export { _ as OrTextV3 } from './OrText-cab6adea.js';
+export { _ as OrTextV3 } from './OrText-4dc3abff.js';
 export { _ as OrTextarea } from './OrTextarea-62ad6213.js';
 export { _ as OrTextareaV3 } from './OrTextarea-c5cadeb1.js';
 export { _ as OrTextbox, T as TextboxTypes } from './OrTextbox-45f6d684.js';

package/dist/esm/v3/{OrInlineInput-e6f41721.js → OrInlineInput-89e9f620.js}

@@ -8,10 +8,11 @@ import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-257954f3.js';
 import { s as script$1 } from './OrError-331220bc.js';
-import { s as script$2 } from './OrHint-262c8217.js';
-import { s as script$3 } from './OrIconButton-7b74089e.js';
-import { I as InlineInputBoxSize, s as script$4 } from './OrInlineInputBox-5d0bb348.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, withModifiers, createCommentVNode, createBlock, createSlots, renderSlot, createTextVNode, toDisplayString, vShow } from 'vue';
+import { s as script$3 } from './OrHint-262c8217.js';
+import { s as script$4 } from './OrIconButton-7b74089e.js';
+import { I as InlineInputBoxSize, s as script$5 } from './OrInlineInputBox-5d0bb348.js';
+import { s as script$2 } from './OrText-f1dbba5f.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, createBlock, withModifiers, createCommentVNode, createSlots, renderSlot, createTextVNode, toDisplayString, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 const InlineInput = [
@@ -55,9 +56,10 @@ var script = defineComponent({
   name: 'OrInlineInput',
   components: {
     OrError: script$1,
-    OrHint: script$2,
-    OrIconButton: script$3,
-    OrInlineInputBox: script$4
+    OrText: script$2,
+    OrHint: script$3,
+    OrIconButton: script$4,
+    OrInlineInputBox: script$5
   },
   model: {
     prop: 'modelValue',
@@ -91,6 +93,10 @@ var script = defineComponent({
     saveOnBlur: {
       type: Boolean,
       default: false
+    },
+    sliceIndex: {
+      type: Number,
+      default: 0
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'apply', 'reset'],
@@ -125,6 +131,12 @@ var script = defineComponent({
     function onFocus() {
       activated.value = true;
     }
+    function onTextClick() {
+      if (!activated.value) {
+        activated.value = true;
+      }
+      nextTick(() => focus());
+    }
     function onBlur() {
       if (props.saveOnBlur) {
         apply();
@@ -167,6 +179,7 @@ var script = defineComponent({
       maxLength,
       onFocus,
       onBlur,
+      onTextClick,
       apply,
       reset,
       focus,
@@ -180,6 +193,7 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = ["type", "placeholder", "activated"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrText = resolveComponent("OrText");
   const _component_OrInlineInputBox = resolveComponent("OrInlineInputBox");
   const _component_OrIconButton = resolveComponent("OrIconButton");
   const _component_OrHint = resolveComponent("OrHint");
@@ -192,7 +206,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     invalid: !!_ctx.error,
     activated: _ctx.activated
   }, {
-    default: withCtx(() => [withDirectives(createElementVNode("input", mergeProps({
+    default: withCtx(() => [_ctx.activated || !_ctx.draft ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
+      key: 0,
       ref: 'control'
     }, _ctx.attributes, {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draft = $event),
@@ -211,9 +226,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         _ctx.$emit('blur', $event);
         _ctx.onBlur();
       })
-    }), null, 16 /* FULL_PROPS */, _hoisted_2), [[vModelDynamic, _ctx.draft, void 0, {
+    }), null, 16 /* FULL_PROPS */, _hoisted_2)), [[vModelDynamic, _ctx.draft, void 0, {
       trim: true
-    }]])]),
+    }]]) : (openBlock(), createBlock(_component_OrText, {
+      key: 1,
+      text: _ctx.draft.toString(),
+      "slice-index": _ctx.sliceIndex,
+      class: normalizeClass(_ctx.controlStyles),
+      onClick: _ctx.onTextClick
+    }, null, 8 /* PROPS */, ["text", "slice-index", "class", "onClick"]))]),
     _: 1 /* STABLE */
   }, 8 /* PROPS */, ["size", "invalid", "activated"]), _ctx.activated && !_ctx.saveOnBlur ? (openBlock(), createElementBlock("div", {
     key: 0,

package/dist/esm/v3/{OrText-ea114c19.js → OrText-f1dbba5f.js}

@@ -44,8 +44,11 @@ var script = defineComponent({
       default: 0
     }
   },
+  emits: ['focus', 'click'],
   expose: ['root'],
-  setup(props) {
+  setup(props, {
+    emit
+  }) {
     // Refs
     const root = ref();
     // Styles
@@ -80,13 +83,22 @@ var script = defineComponent({
       }
       return restPart;
     });
+    // Methods
+    function onFocus(event) {
+      emit('focus', event);
+    }
+    function onClick(event) {
+      emit('click', event);
+    }
     return {
       root,
       rootStyles,
       mainTextStyles,
       restTextStyles,
       mainText,
-      restText
+      restText,
+      onFocus,
+      onClick
     };
   }
 });
@@ -94,12 +106,14 @@ var script = defineComponent({
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
-    class: normalizeClass(_ctx.rootStyles)
+    class: normalizeClass(_ctx.rootStyles),
+    onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.mainTextStyles)
   }, toDisplayString(_ctx.mainText), 3 /* TEXT, CLASS */), createElementVNode("div", {
     class: normalizeClass(_ctx.restTextStyles)
-  }, toDisplayString(_ctx.restText), 3 /* TEXT, CLASS */)], 2 /* CLASS */);
+  }, toDisplayString(_ctx.restText), 3 /* TEXT, CLASS */)], 34 /* CLASS, NEED_HYDRATION */);
 }
 
 script.render = render;

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

@@ -65,7 +65,7 @@ export { s as OrIcon, O as OrIconColors, a as OrIconType } from '../OrIcon-22d7a
 export { I as IconButtonColor, s as OrIconButtonV3 } from '../OrIconButton-7b74089e.js';
 export { a as IconSize, I as IconVariant, s as OrIconV3 } from '../OrIcon-9aff520e.js';
 export { I as InlineInputBoxSize, s as OrInlineInputBoxV3 } from '../OrInlineInputBox-5d0bb348.js';
-export { I as InlineInputType, s as OrInlineInputV3 } from '../OrInlineInput-e6f41721.js';
+export { I as InlineInputType, s as OrInlineInputV3 } from '../OrInlineInput-89e9f620.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from '../OrInlineTextEdit-5c305893.js';
 export { s as OrInlineTextareaV3 } from '../OrInlineTextarea-9e13d859.js';
 export { s as OrInput } from '../OrInput-fb39bee1.js';
@@ -137,7 +137,7 @@ export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-6eea8803.
 export { s as OrTagsV3, T as TagsOverflow } from '../OrTags-660ca32e.js';
 export { s as OrTeleport } from '../OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3-8099178c.js';
-export { s as OrTextV3 } from '../OrText-ea114c19.js';
+export { s as OrTextV3 } from '../OrText-f1dbba5f.js';
 export { s as OrTextarea } from '../OrTextarea-b16e1a72.js';
 export { s as OrTextareaV3 } from '../OrTextarea-f5f71e8a.js';
 export { s as OrTextbox, T as TextboxTypes } from '../OrTextbox-20cc3bac.js';

package/dist/esm/v3/components/or-inline-input-v3/OrInlineInput.vue.d.ts

@@ -30,6 +30,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sliceIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }, {
     attributes: {
         required: boolean | undefined;
@@ -56,6 +60,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     maxLength: import("vue-demi").ComputedRef<number | undefined>;
     onFocus: () => void;
     onBlur: () => void;
+    onTextClick: () => void;
     apply: () => void;
     reset: () => void;
     focus: () => void;
@@ -89,6 +94,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    sliceIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
@@ -106,5 +115,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     hint: string;
     error: string | boolean;
     saveOnBlur: boolean;
+    sliceIndex: number;
 }>;
 export default _default;

package/dist/esm/v3/components/or-inline-input-v3/index.js

@@ -1,4 +1,4 @@
-export { I as InlineInputType, s as OrInlineInputV3 } from '../../OrInlineInput-e6f41721.js';
+export { I as InlineInputType, s as OrInlineInputV3 } from '../../OrInlineInput-89e9f620.js';
 import 'vue-demi';
 import '../../useIdAttribute-3a339b79.js';
 import '../../TimeFormat-a7f5565b.js';
@@ -29,4 +29,5 @@ import '../../useTheme-dc76b423.js';
 import '../../isPrevented-b1764210.js';
 import '../../isAncestor-2973d4f4.js';
 import '../../OrInlineInputBox-5d0bb348.js';
+import '../../OrText-f1dbba5f.js';
 import '../../style-inject.es-4c6f2515.js';

package/dist/esm/v3/components/or-text-v3/OrText.vue.d.ts

@@ -29,7 +29,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     restTextStyles: import("vue-demi").ComputedRef<string[]>;
     mainText: import("vue-demi").ComputedRef<string>;
     restText: import("vue-demi").ComputedRef<string>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    onFocus: (event: MouseEvent) => void;
+    onClick: (event: MouseEvent) => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("focus" | "click")[], "focus" | "click", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     /**
      * Text to crop.
      */
@@ -48,7 +50,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-}>>, {
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
     sliceIndex: number;
 }>;
 export default _default;

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

@@ -1,3 +1,3 @@
-export { s as OrTextV3 } from '../../OrText-ea114c19.js';
+export { s as OrTextV3 } from '../../OrText-f1dbba5f.js';
 import 'vue-demi';
 import 'vue';

package/dist/esm/v3/index.js

@@ -65,7 +65,7 @@ export { s as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-22d7ae
 export { I as IconButtonColor, s as OrIconButtonV3 } from './OrIconButton-7b74089e.js';
 export { a as IconSize, I as IconVariant, s as OrIconV3 } from './OrIcon-9aff520e.js';
 export { I as InlineInputBoxSize, s as OrInlineInputBoxV3 } from './OrInlineInputBox-5d0bb348.js';
-export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-e6f41721.js';
+export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-89e9f620.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-5c305893.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-9e13d859.js';
 export { s as OrInput } from './OrInput-fb39bee1.js';
@@ -137,7 +137,7 @@ export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-6eea8803.j
 export { s as OrTagsV3, T as TagsOverflow } from './OrTags-660ca32e.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
-export { s as OrTextV3 } from './OrText-ea114c19.js';
+export { s as OrTextV3 } from './OrText-f1dbba5f.js';
 export { s as OrTextarea } from './OrTextarea-b16e1a72.js';
 export { s as OrTextareaV3 } from './OrTextarea-f5f71e8a.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-20cc3bac.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "17.4.0-beta.4895.0",
+  "version": "17.4.0-beta.4897.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.5.3",
-    "@onereach/styles": "^17.3.0",
+    "@onereach/styles": "^17.3.1",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",

package/src/components/or-inline-input-v3/OrInlineInput.vue

@@ -10,6 +10,7 @@
         :activated="activated"
       >
         <input
+          v-if="activated || !draft"
           :ref="'control'"
           v-bind="attributes"
           v-model.trim="draft"
@@ -23,6 +24,13 @@
           @focus="$emit('focus', $event); onFocus()"
           @blur="$emit('blur', $event); onBlur()"
         >
+        <OrText
+          v-else
+          :text="draft.toString()"
+          :slice-index="sliceIndex"
+          :class="controlStyles"
+          @click="onTextClick"
+        />
       </OrInlineInputBox>
 
       <template v-if="activated && !saveOnBlur">
@@ -77,7 +85,8 @@ import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { InlineInputBoxSize, OrInlineInputBoxV3 as OrInlineInputBox } from '../or-inline-input-box-v3';
-import { InlineInput, InlineInputAction, InlineInputActionSizes, InlineInputControl } from './styles';
+import { OrTextV3 as OrText } from '../or-text-v3';
+import * as Styles from './styles';
 import { InlineInputModelValue, InlineInputType } from './types';
 
 export default defineComponent({
@@ -85,6 +94,7 @@ export default defineComponent({
 
   components: {
     OrError,
+    OrText,
     OrHint,
     OrIconButton,
     OrInlineInputBox,
@@ -130,6 +140,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    sliceIndex: {
+      type: Number,
+      default: 0,
+    },
   },
 
   emits: [
@@ -166,18 +181,18 @@ export default defineComponent({
 
     const rootStyles = computed(() => [
       'or-inline-input-v3',
-      ...InlineInput,
+      ...Styles.InlineInput,
     ]);
 
     const control = ref<HTMLInputElement>();
 
     const controlStyles = computed(() => [
-      ...InlineInputControl,
+      ...Styles.InlineInputControl,
     ]);
 
     const actionStyles = computed(() => [
-      ...InlineInputAction,
-      ...InlineInputActionSizes[props.size],
+      ...Styles.InlineInputAction,
+      ...Styles.InlineInputActionSizes[props.size],
     ]);
 
     // State
@@ -203,6 +218,13 @@ export default defineComponent({
       activated.value = true;
     }
 
+    function onTextClick(): void {
+      if (!activated.value) {
+        activated.value = true;
+      }
+      nextTick(() => focus());
+    }
+
     function onBlur(): void {
       if (props.saveOnBlur) {
         apply();
@@ -257,6 +279,7 @@ export default defineComponent({
 
       onFocus,
       onBlur,
+      onTextClick,
 
       apply,
       reset,

package/src/components/or-text-v3/OrText.vue

@@ -2,6 +2,8 @@
   <div
     :ref="'root'"
     :class="rootStyles"
+    @focus="onFocus"
+    @click="onClick"
   >
     <div :class="mainTextStyles">
       {{ mainText }}
@@ -47,11 +49,16 @@ export default defineComponent({
     },
   },
 
+  emits: [
+    'focus',
+    'click',
+  ],
+
   expose: [
     'root',
   ],
 
-  setup(props) {
+  setup(props, { emit }) {
     // Refs
     const root = ref<HTMLElement>();
 
@@ -106,6 +113,16 @@ export default defineComponent({
       return restPart;
     });
 
+    // Methods
+    function onFocus(event: MouseEvent): void {
+      emit('focus', event);
+    }
+
+    function onClick(event: MouseEvent): void {
+      emit('click', event);
+    }
+
+
     return {
       root,
       rootStyles,
@@ -113,6 +130,8 @@ export default defineComponent({
       restTextStyles,
       mainText,
       restText,
+      onFocus,
+      onClick,
     };
   },
 });