@onereach/ui-components 8.16.3 → 8.16.4

package/dist/bundled/v2/components/OrSearchV3/OrSearch.js

@@ -1,10 +1,11 @@
-import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, toRef, watch } from 'vue-demi';
 import __vue_component__$1 from '../OrInputV3/OrInput.js';
+import { b as watchDebounced } from '../../index-1612099e.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../../hooks/useValidationAttributes.js';
-import { b as watchDebounced } from '../../index-1612099e.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
@@ -12,11 +13,14 @@ var script = defineComponent({
   components: {
     OrInput: __vue_component__$1
   },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
   props: {
     modelValue: {
       type: String,
-      default: '',
-      required: false
+      default: ''
     },
     size: {
       type: String,
@@ -35,27 +39,35 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur', 'clear'],
-  expose: ['root', 'focus', 'clear'],
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'search', 'clear'],
+  expose: ['root', 'focus', 'blur', 'clear'],
   setup(props, context) {
-    var _a;
     // Refs
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-search-v3']);
     // State
-    const localModelValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : '');
     const controlAttributes = reactive({
       id: useIdAttribute(),
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    // Events
-    watchDebounced(localModelValue, () => localModelValue.value.length > 0 && context.emit('search', localModelValue.value), {
-      debounce: props.debounce
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(props.modelValue);
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value;
+    });
+    watchDebounced(draftModelValue, value => {
+      if (value.length > 0) {
+        proxyModelValue.value = value;
+        context.emit('search', value);
+      }
+    }, {
+      debounce: toRef(props, 'debounce')
     });
-    watch(localModelValue, (val, beforeVal) => {
-      if (val.length === 0 && beforeVal.length > 0) {
+    watch(draftModelValue, (nextValue, prevValue) => {
+      if (nextValue.length === 0 && prevValue.length > 0) {
+        proxyModelValue.value = nextValue;
         context.emit('search', '');
         context.emit('clear');
       }
@@ -66,15 +78,22 @@ var script = defineComponent({
       (_a = root.value) === null || _a === void 0 ? void 0 : _a.focus(); // fixes error TS2349
     }
 
+    function blur() {
+      var _a;
+      (_a = root.value) === null || _a === void 0 ? void 0 : _a.blur(); // fixes error TS2349
+    }
+
     function clear() {
-      localModelValue.value = '';
+      draftModelValue.value = '';
     }
     return {
       root,
       rootStyles,
-      localModelValue,
       controlAttributes,
+      proxyModelValue,
+      draftModelValue,
       focus,
+      blur,
       clear
     };
   }
@@ -95,7 +114,6 @@ var __vue_render__ = function () {
       "type": 'search',
       "size": _vm.size,
       "placeholder": _vm.placeholder,
-      "debounce": _vm.debounce,
       "disable-default-styles": _vm.disableDefaultStyles
     },
     on: {
@@ -116,11 +134,11 @@ var __vue_render__ = function () {
       }
     },
     model: {
-      value: _vm.localModelValue,
+      value: _vm.draftModelValue,
       callback: function ($$v) {
-        _vm.localModelValue = typeof $$v === 'string' ? $$v.trim() : $$v;
+        _vm.draftModelValue = typeof $$v === 'string' ? $$v.trim() : $$v;
       },
-      expression: "localModelValue"
+      expression: "draftModelValue"
     }
   }, 'OrInput', _vm.controlAttributes, false));
 };

package/dist/bundled/v2/components/OrSearchV3/OrSearch.vue.d.ts

@@ -7,7 +7,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    localModelValue: import("@vue/composition-api").Ref<string>;
     controlAttributes: {
         required: boolean | undefined;
         minlength: number | undefined;
@@ -21,13 +20,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         'force-state': string | undefined;
         id: string | undefined;
     };
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string>;
+    draftModelValue: import("@vue/composition-api").Ref<string>;
     focus: () => void;
+    blur: () => void;
     clear: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     size: {
         type: PropType<"m" | "s">;
@@ -49,7 +50,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     size: {
         type: PropType<"m" | "s">;
@@ -82,7 +82,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    localModelValue: import("@vue/composition-api").Ref<string>;
     controlAttributes: {
         required: boolean | undefined;
         minlength: number | undefined;
@@ -96,7 +95,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         'force-state': string | undefined;
         id: string | undefined;
     };
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string>;
+    draftModelValue: import("@vue/composition-api").Ref<string>;
     focus: () => void;
+    blur: () => void;
     clear: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string;

package/dist/bundled/v3/components/OrCardCollectionV3/OrCardCollection.js

@@ -1 +1 @@
-export { s as default } from '../OrCardCollectionV3-6b1266a6.js';
+export { s as default } from '../OrCardCollectionV3-dfd98c34.js';

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

@@ -1 +1 @@
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollectionV3-6b1266a6.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollectionV3-dfd98c34.js';

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

@@ -1 +1 @@
-export { C as CardCollectionView, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollectionV3-6b1266a6.js';
+export { C as CardCollectionView, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollectionV3-dfd98c34.js';

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

@@ -1 +1 @@
-export { a as CardCollection, e as CardCollectionContent, f as CardCollectionContentViews, b as CardCollectionToolbar, c as CardCollectionToolbarPanel } from '../OrCardCollectionV3-6b1266a6.js';
+export { a as CardCollection, e as CardCollectionContent, f as CardCollectionContentViews, b as CardCollectionToolbar, c as CardCollectionToolbarPanel } from '../OrCardCollectionV3-dfd98c34.js';

package/dist/bundled/v3/components/OrSearchV3/OrSearch.vue.d.ts

@@ -4,7 +4,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     size: {
         type: PropType<"m" | "s">;
@@ -25,7 +24,6 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     root: import("vue-demi").Ref<any>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
-    localModelValue: import("vue-demi").Ref<string>;
     controlAttributes: {
         required: boolean | undefined;
         minlength: number | undefined;
@@ -39,13 +37,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         'force-state': string | undefined;
         id: string | undefined;
     };
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string>;
+    draftModelValue: import("vue-demi").Ref<string>;
     focus: () => void;
+    blur: () => void;
     clear: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("search" | "input" | "keydown" | "keyup" | "focus" | "blur" | "clear")[], "search" | "input" | "keydown" | "keyup" | "focus" | "blur" | "clear", 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, ("search" | "update:modelValue" | "input" | "keydown" | "keyup" | "focus" | "blur" | "clear")[], "search" | "update:modelValue" | "input" | "keydown" | "keyup" | "focus" | "blur" | "clear", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     size: {
         type: PropType<"m" | "s">;
@@ -65,6 +65,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     onSearch?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
     onKeydown?: ((...args: any[]) => any) | undefined;
     onKeyup?: ((...args: any[]) => any) | undefined;

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

@@ -1,23 +1,27 @@
 import { I as InputBoxSize } from '../OrInputBoxV3-ddd117f0.js';
 export { I as SearchSize } from '../OrInputBoxV3-ddd117f0.js';
 import { resolveComponent, openBlock, createBlock, mergeProps } from 'vue';
-import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
+import { defineComponent, ref, computed, reactive, toRef, watch } from 'vue-demi';
 import { s as script$1 } from '../OrInputV3-5ed9b5fd.js';
+import { m as watchDebounced } from '../OrBottomSheetV3-66815f6f.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../../hooks/useValidationAttributes.js';
-import { m as watchDebounced } from '../OrBottomSheetV3-66815f6f.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 
 var script = defineComponent({
   name: 'OrSearch',
   components: {
     OrInput: script$1
   },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
   props: {
     modelValue: {
       type: String,
-      default: '',
-      required: false
+      default: ''
     },
     size: {
       type: String,
@@ -36,27 +40,35 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur', 'clear'],
-  expose: ['root', 'focus', 'clear'],
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'search', 'clear'],
+  expose: ['root', 'focus', 'blur', 'clear'],
   setup(props, context) {
-    var _a;
     // Refs
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-search-v3']);
     // State
-    const localModelValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : '');
     const controlAttributes = reactive({
       id: useIdAttribute(),
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    // Events
-    watchDebounced(localModelValue, () => localModelValue.value.length > 0 && context.emit('search', localModelValue.value), {
-      debounce: props.debounce
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(props.modelValue);
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value;
     });
-    watch(localModelValue, (val, beforeVal) => {
-      if (val.length === 0 && beforeVal.length > 0) {
+    watchDebounced(draftModelValue, value => {
+      if (value.length > 0) {
+        proxyModelValue.value = value;
+        context.emit('search', value);
+      }
+    }, {
+      debounce: toRef(props, 'debounce')
+    });
+    watch(draftModelValue, (nextValue, prevValue) => {
+      if (nextValue.length === 0 && prevValue.length > 0) {
+        proxyModelValue.value = nextValue;
         context.emit('search', '');
         context.emit('clear');
       }
@@ -67,15 +79,22 @@ var script = defineComponent({
       (_a = root.value) === null || _a === void 0 ? void 0 : _a.focus(); // fixes error TS2349
     }
 
+    function blur() {
+      var _a;
+      (_a = root.value) === null || _a === void 0 ? void 0 : _a.blur(); // fixes error TS2349
+    }
+
     function clear() {
-      localModelValue.value = '';
+      draftModelValue.value = '';
     }
     return {
       root,
       rootStyles,
-      localModelValue,
       controlAttributes,
+      proxyModelValue,
+      draftModelValue,
       focus,
+      blur,
       clear
     };
   }
@@ -85,24 +104,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrInput = resolveComponent("OrInput");
   return openBlock(), createBlock(_component_OrInput, mergeProps({
     ref: "root",
-    modelValue: _ctx.localModelValue,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.localModelValue = $event),
+    modelValue: _ctx.draftModelValue,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event),
     modelModifiers: {
       trim: true
-    },
+    }
+  }, _ctx.controlAttributes, {
     class: _ctx.rootStyles,
     type: 'search',
     size: _ctx.size,
     placeholder: _ctx.placeholder,
-    debounce: _ctx.debounce,
-    "disable-default-styles": _ctx.disableDefaultStyles
-  }, _ctx.controlAttributes, {
+    "disable-default-styles": _ctx.disableDefaultStyles,
     onInput: _cache[1] || (_cache[1] = $event => _ctx.$emit('input', $event)),
     onKeydown: _cache[2] || (_cache[2] = $event => _ctx.$emit('keydown', $event)),
     onKeyup: _cache[3] || (_cache[3] = $event => _ctx.$emit('keyup', $event)),
     onFocus: _cache[4] || (_cache[4] = $event => _ctx.$emit('focus', $event)),
     onBlur: _cache[5] || (_cache[5] = $event => _ctx.$emit('blur', $event))
-  }), null, 16 /* FULL_PROPS */, ["modelValue", "class", "size", "placeholder", "debounce", "disable-default-styles"]);
+  }), null, 16 /* FULL_PROPS */, ["modelValue", "class", "size", "placeholder", "disable-default-styles"]);
 }
 
 script.render = render;

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

@@ -8,7 +8,7 @@ export { B as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, a as BUTTON_SIZE, b as BUTT
 export { default as OrIconButton, default as OrIconButtonV2 } from './OrIconButtonV2/OrIconButton.js';
 export { default as OrCard } from './OrCard/OrCard.js';
 export { CARD_COLLECTION_LAYOUT, OrCardCollection } from './OrCardCollection/index.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollectionV3-6b1266a6.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollectionV3-dfd98c34.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCardV3-f9908b34.js';
 export { default as OrCheckbox } from './OrCheckbox/OrCheckbox.js';
 export { default as OrCheckboxGroupV3 } from './OrCheckboxGroupV3/OrCheckboxGroup.js';

package/dist/bundled/v3/index.js

@@ -4,7 +4,7 @@ export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './components
 export { OrButton, OrButtonColors, OrButtonSizes, OrButtonViews } from './components/OrButton/index.js';
 export { s as OrButtonGroupV3 } from './components/OrButtonGroupV3-e35a1f1c.js';
 export { CARD_COLLECTION_LAYOUT, OrCardCollection } from './components/OrCardCollection/index.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './components/OrCardCollectionV3-6b1266a6.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './components/OrCardCollectionV3-dfd98c34.js';
 export { C as CardPadding, s as OrCardV3 } from './components/OrCardV3-f9908b34.js';
 export { default as OrCheckboxGroupV3 } from './components/OrCheckboxGroupV3/OrCheckboxGroup.js';
 export { s as OrChip, a as OrChips } from './components/OrChips-ba5bb85b.js';

package/dist/esm/v2/{OrCardCollection-e7c0c61d.js → OrCardCollection-f2870c25.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
 import { _ as __vue_component__$2 } from './OrIconButton-edff56d4.js';
-import { _ as __vue_component__$4 } from './OrSearch-de2423bc.js';
+import { _ as __vue_component__$4 } from './OrSearch-2910207c.js';
 import './OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 import { _ as __vue_component__$5 } from './OrLoader-784e2060.js';
 import { _ as __vue_component__$3 } from './OrSorting-65c84965.js';

package/dist/esm/v2/{OrSearch-de2423bc.js → OrSearch-2910207c.js}

@@ -1,12 +1,13 @@
-import { debouncedWatch } from '@vueuse/core';
-import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrInput-ac6484dd.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
+import { watchDebounced } from '@vueuse/core';
+import { defineComponent, ref, computed, reactive, toRef, watch } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import './dom-aecadd9a.js';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
+import { _ as __vue_component__$1 } from './OrInput-ac6484dd.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
@@ -14,11 +15,14 @@ var script = defineComponent({
   components: {
     OrInput: __vue_component__$1
   },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
   props: {
     modelValue: {
       type: String,
-      default: '',
-      required: false
+      default: ''
     },
     size: {
       type: String,
@@ -37,27 +41,35 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur', 'clear'],
-  expose: ['root', 'focus', 'clear'],
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'search', 'clear'],
+  expose: ['root', 'focus', 'blur', 'clear'],
   setup(props, context) {
-    var _a;
     // Refs
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-search-v3']);
     // State
-    const localModelValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : '');
     const controlAttributes = reactive({
       id: useIdAttribute(),
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    // Events
-    debouncedWatch(localModelValue, () => localModelValue.value.length > 0 && context.emit('search', localModelValue.value), {
-      debounce: props.debounce
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(props.modelValue);
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value;
     });
-    watch(localModelValue, (val, beforeVal) => {
-      if (val.length === 0 && beforeVal.length > 0) {
+    watchDebounced(draftModelValue, value => {
+      if (value.length > 0) {
+        proxyModelValue.value = value;
+        context.emit('search', value);
+      }
+    }, {
+      debounce: toRef(props, 'debounce')
+    });
+    watch(draftModelValue, (nextValue, prevValue) => {
+      if (nextValue.length === 0 && prevValue.length > 0) {
+        proxyModelValue.value = nextValue;
         context.emit('search', '');
         context.emit('clear');
       }
@@ -68,15 +80,22 @@ var script = defineComponent({
       (_a = root.value) === null || _a === void 0 ? void 0 : _a.focus(); // fixes error TS2349
     }
 
+    function blur() {
+      var _a;
+      (_a = root.value) === null || _a === void 0 ? void 0 : _a.blur(); // fixes error TS2349
+    }
+
     function clear() {
-      localModelValue.value = '';
+      draftModelValue.value = '';
     }
     return {
       root,
       rootStyles,
-      localModelValue,
       controlAttributes,
+      proxyModelValue,
+      draftModelValue,
       focus,
+      blur,
       clear
     };
   }
@@ -97,7 +116,6 @@ var __vue_render__ = function () {
       "type": 'search',
       "size": _vm.size,
       "placeholder": _vm.placeholder,
-      "debounce": _vm.debounce,
       "disable-default-styles": _vm.disableDefaultStyles
     },
     on: {
@@ -118,11 +136,11 @@ var __vue_render__ = function () {
       }
     },
     model: {
-      value: _vm.localModelValue,
+      value: _vm.draftModelValue,
       callback: function ($$v) {
-        _vm.localModelValue = typeof $$v === 'string' ? $$v.trim() : $$v;
+        _vm.draftModelValue = typeof $$v === 'string' ? $$v.trim() : $$v;
       },
-      expression: "localModelValue"
+      expression: "draftModelValue"
     }
   }, 'OrInput', _vm.controlAttributes, false));
 };

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

@@ -10,7 +10,7 @@ export { _ as OrIconButton, _ as OrIconButtonV2 } from '../OrIconButton-f6370222
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE } from '../OrIconButton.vue_rollup-plugin-vue_styles.0-02ba7b68.js';
 export { _ as OrCard } from '../OrCard-c44d9783.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from '../OrCardCollection-d7e546a0.js';
-export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-e7c0c61d.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-f2870c25.js';
 export { C as CardPadding, _ as OrCardV3 } from '../OrCard-54dce216.js';
 export { _ as OrCheckbox } from '../OrCheckbox-3337d903.js';
 export { _ as OrCheckboxGroupV3 } from '../OrCheckboxGroup-f8781127.js';
@@ -99,7 +99,7 @@ export { _ as OrRatingV3 } from '../OrRating-abf1b609.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-757f7dc1.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from '../OrRichTextEditor-7466a45d.js';
 export { _ as OrSearch } from '../OrSearch-ddf244e6.js';
-export { _ as OrSearchV3 } from '../OrSearch-de2423bc.js';
+export { _ as OrSearchV3 } from '../OrSearch-2910207c.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-00583234.js';
 export { _ as OrSelect } from '../OrSelect-d271f7a3.js';
 export { _ as OrSelectV3 } from '../OrSelect-30f5ce68.js';

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

@@ -1,4 +1,4 @@
-export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-e7c0c61d.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-f2870c25.js';
 import 'vue-demi';
 import '../../OrIconButton-edff56d4.js';
 import '../../OrIcon-3f99ef27.js';
@@ -20,11 +20,11 @@ import '../../OrOverlay-9aa5020f.js';
 import '../../OrTeleport.vue2-9eb0eaee.js';
 import 'portal-vue';
 import '../../useTheme-0ef25778.js';
-import '../../OrSearch-de2423bc.js';
-import '../../OrInput-ac6484dd.js';
+import '../../OrSearch-2910207c.js';
 import '../../useIdAttribute-859439f0.js';
 import '../../useProxyModelValue-940010d2.js';
 import '../../useValidationAttributes-d1abbe34.js';
+import '../../OrInput-ac6484dd.js';
 import '../../OrError-916e928e.js';
 import '../../OrHint-1220face.js';
 import '../../OrInputBox-140c344d.js';

package/dist/esm/v2/components/or-search-v3/OrSearch.vue.d.ts

@@ -7,7 +7,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    localModelValue: import("@vue/composition-api").Ref<string>;
     controlAttributes: {
         required: boolean | undefined;
         minlength: number | undefined;
@@ -21,13 +20,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         'force-state': string | undefined;
         id: string | undefined;
     };
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string>;
+    draftModelValue: import("@vue/composition-api").Ref<string>;
     focus: () => void;
+    blur: () => void;
     clear: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     size: {
         type: PropType<"m" | "s">;
@@ -49,7 +50,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     size: {
         type: PropType<"m" | "s">;
@@ -82,7 +82,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    localModelValue: import("@vue/composition-api").Ref<string>;
     controlAttributes: {
         required: boolean | undefined;
         minlength: number | undefined;
@@ -96,7 +95,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         'force-state': string | undefined;
         id: string | undefined;
     };
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string>;
+    draftModelValue: import("@vue/composition-api").Ref<string>;
     focus: () => void;
+    blur: () => void;
     clear: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string;

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

@@ -1,17 +1,17 @@
-export { _ as OrSearchV3 } from '../../OrSearch-de2423bc.js';
+export { _ as OrSearchV3 } from '../../OrSearch-2910207c.js';
 export { I as SearchSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 import '@vueuse/core';
 import 'vue-demi';
-import '../../OrInput-ac6484dd.js';
 import '../../useIdAttribute-859439f0.js';
 import '../../dom-aecadd9a.js';
 import 'lodash/isElement';
 import 'lodash/get';
 import '../../useProxyModelValue-940010d2.js';
-import '../../useResponsive-1baf3485.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import '../../useValidationAttributes-d1abbe34.js';
+import '../../OrInput-ac6484dd.js';
+import '../../useResponsive-1baf3485.js';
 import '../../OrError-916e928e.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../OrHint-1220face.js';

package/dist/esm/v2/index.js

@@ -10,7 +10,7 @@ export { _ as OrIconButton, _ as OrIconButtonV2 } from './OrIconButton-f6370222.
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE } from './OrIconButton.vue_rollup-plugin-vue_styles.0-02ba7b68.js';
 export { _ as OrCard } from './OrCard-c44d9783.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-d7e546a0.js';
-export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-e7c0c61d.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-f2870c25.js';
 export { C as CardPadding, _ as OrCardV3 } from './OrCard-54dce216.js';
 export { _ as OrCheckbox } from './OrCheckbox-3337d903.js';
 export { _ as OrCheckboxGroupV3 } from './OrCheckboxGroup-f8781127.js';
@@ -99,7 +99,7 @@ export { _ as OrRatingV3 } from './OrRating-abf1b609.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-757f7dc1.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from './OrRichTextEditor-7466a45d.js';
 export { _ as OrSearch } from './OrSearch-ddf244e6.js';
-export { _ as OrSearchV3 } from './OrSearch-de2423bc.js';
+export { _ as OrSearchV3 } from './OrSearch-2910207c.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-00583234.js';
 export { _ as OrSelect } from './OrSelect-d271f7a3.js';
 export { _ as OrSelectV3 } from './OrSelect-30f5ce68.js';

package/dist/esm/v3/{OrCardCollection-ce6c8201.js → OrCardCollection-fc6fd56c.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
 import { s as script$2 } from './OrIconButton-13fd3f96.js';
-import { s as script$4 } from './OrSearch-9c6f1e16.js';
+import { s as script$4 } from './OrSearch-fccacdba.js';
 import './OrInputBox-8c1a29dd.js';
 import { s as script$5 } from './OrLoader-b7d415dd.js';
 import { s as script$3 } from './OrSorting-15a719a1.js';

package/dist/esm/v3/{OrSearch-9c6f1e16.js → OrSearch-fccacdba.js}

@@ -1,12 +1,13 @@
-import { debouncedWatch } from '@vueuse/core';
-import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-2810a760.js';
-import { I as InputBoxSize } from './OrInputBox-8c1a29dd.js';
+import { watchDebounced } from '@vueuse/core';
+import { defineComponent, ref, computed, reactive, toRef, watch } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import './dom-aecadd9a.js';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
+import { s as script$1 } from './OrInput-2810a760.js';
+import { I as InputBoxSize } from './OrInputBox-8c1a29dd.js';
 import { resolveComponent, openBlock, createBlock, mergeProps } from 'vue';
 
 var script = defineComponent({
@@ -14,11 +15,14 @@ var script = defineComponent({
   components: {
     OrInput: script$1
   },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
   props: {
     modelValue: {
       type: String,
-      default: '',
-      required: false
+      default: ''
     },
     size: {
       type: String,
@@ -37,27 +41,35 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur', 'clear'],
-  expose: ['root', 'focus', 'clear'],
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'search', 'clear'],
+  expose: ['root', 'focus', 'blur', 'clear'],
   setup(props, context) {
-    var _a;
     // Refs
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-search-v3']);
     // State
-    const localModelValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : '');
     const controlAttributes = reactive({
       id: useIdAttribute(),
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    // Events
-    debouncedWatch(localModelValue, () => localModelValue.value.length > 0 && context.emit('search', localModelValue.value), {
-      debounce: props.debounce
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(props.modelValue);
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value;
+    });
+    watchDebounced(draftModelValue, value => {
+      if (value.length > 0) {
+        proxyModelValue.value = value;
+        context.emit('search', value);
+      }
+    }, {
+      debounce: toRef(props, 'debounce')
     });
-    watch(localModelValue, (val, beforeVal) => {
-      if (val.length === 0 && beforeVal.length > 0) {
+    watch(draftModelValue, (nextValue, prevValue) => {
+      if (nextValue.length === 0 && prevValue.length > 0) {
+        proxyModelValue.value = nextValue;
         context.emit('search', '');
         context.emit('clear');
       }
@@ -68,15 +80,22 @@ var script = defineComponent({
       (_a = root.value) === null || _a === void 0 ? void 0 : _a.focus(); // fixes error TS2349
     }
 
+    function blur() {
+      var _a;
+      (_a = root.value) === null || _a === void 0 ? void 0 : _a.blur(); // fixes error TS2349
+    }
+
     function clear() {
-      localModelValue.value = '';
+      draftModelValue.value = '';
     }
     return {
       root,
       rootStyles,
-      localModelValue,
       controlAttributes,
+      proxyModelValue,
+      draftModelValue,
       focus,
+      blur,
       clear
     };
   }
@@ -86,24 +105,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrInput = resolveComponent("OrInput");
   return openBlock(), createBlock(_component_OrInput, mergeProps({
     ref: "root",
-    modelValue: _ctx.localModelValue,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.localModelValue = $event),
+    modelValue: _ctx.draftModelValue,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event),
     modelModifiers: {
       trim: true
-    },
+    }
+  }, _ctx.controlAttributes, {
     class: _ctx.rootStyles,
     type: 'search',
     size: _ctx.size,
     placeholder: _ctx.placeholder,
-    debounce: _ctx.debounce,
-    "disable-default-styles": _ctx.disableDefaultStyles
-  }, _ctx.controlAttributes, {
+    "disable-default-styles": _ctx.disableDefaultStyles,
     onInput: _cache[1] || (_cache[1] = $event => _ctx.$emit('input', $event)),
     onKeydown: _cache[2] || (_cache[2] = $event => _ctx.$emit('keydown', $event)),
     onKeyup: _cache[3] || (_cache[3] = $event => _ctx.$emit('keyup', $event)),
     onFocus: _cache[4] || (_cache[4] = $event => _ctx.$emit('focus', $event)),
     onBlur: _cache[5] || (_cache[5] = $event => _ctx.$emit('blur', $event))
-  }), null, 16 /* FULL_PROPS */, ["modelValue", "class", "size", "placeholder", "debounce", "disable-default-styles"]);
+  }), null, 16 /* FULL_PROPS */, ["modelValue", "class", "size", "placeholder", "disable-default-styles"]);
 }
 
 script.render = render;

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

@@ -8,7 +8,7 @@ export { s as OrButtonV2 } from '../OrButton-f4098587.js';
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrIconButton, s as OrIconButtonV2 } from '../OrIconButton-4424a0dc.js';
 export { s as OrCard } from '../OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection-7fd78cc8.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-ce6c8201.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-fc6fd56c.js';
 export { C as CardPadding, s as OrCardV3 } from '../OrCard-d3320b27.js';
 export { s as OrCheckbox } from '../OrCheckbox-42ed332c.js';
 export { s as OrCheckboxGroupV3 } from '../OrCheckboxGroup-e12e94c8.js';
@@ -95,7 +95,7 @@ export { s as OrRatingV3 } from '../OrRating-ec9462c5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from '../OrResizeablePanel-525d396f.js';
 export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditor-d9182fa2.js';
 export { s as OrSearch } from '../OrSearch-aa57d4e8.js';
-export { s as OrSearchV3 } from '../OrSearch-9c6f1e16.js';
+export { s as OrSearchV3 } from '../OrSearch-fccacdba.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-adbf7f4e.js';
 export { s as OrSelect } from '../OrSelect-a366e668.js';
 export { s as OrSelectV3 } from '../OrSelect-a65c0b08.js';

package/dist/esm/v3/components/or-card-collection-v3/index.js

@@ -1,4 +1,4 @@
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-ce6c8201.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-fc6fd56c.js';
 import 'vue-demi';
 import '../../OrIconButton-13fd3f96.js';
 import '../../OrIcon-b2e2d0aa.js';
@@ -19,11 +19,11 @@ import '../../OrBottomSheet-e33d1de9.js';
 import '../../OrOverlay-d00d79f1.js';
 import '../../OrTeleport.vue3-bf77eed4.js';
 import '../../useTheme-0ef25778.js';
-import '../../OrSearch-9c6f1e16.js';
-import '../../OrInput-2810a760.js';
+import '../../OrSearch-fccacdba.js';
 import '../../useIdAttribute-859439f0.js';
 import '../../useProxyModelValue-940010d2.js';
 import '../../useValidationAttributes-d1abbe34.js';
+import '../../OrInput-2810a760.js';
 import '../../OrError-69bd7f6a.js';
 import '../../OrHint-55d3de35.js';
 import '../../OrInputBox-8c1a29dd.js';

package/dist/esm/v3/components/or-search-v3/OrSearch.vue.d.ts

@@ -4,7 +4,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     size: {
         type: PropType<"m" | "s">;
@@ -25,7 +24,6 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     root: import("vue-demi").Ref<any>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
-    localModelValue: import("vue-demi").Ref<string>;
     controlAttributes: {
         required: boolean | undefined;
         minlength: number | undefined;
@@ -39,13 +37,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         'force-state': string | undefined;
         id: string | undefined;
     };
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string>;
+    draftModelValue: import("vue-demi").Ref<string>;
     focus: () => void;
+    blur: () => void;
     clear: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("search" | "input" | "keydown" | "keyup" | "focus" | "blur" | "clear")[], "search" | "input" | "keydown" | "keyup" | "focus" | "blur" | "clear", 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, ("search" | "update:modelValue" | "input" | "keydown" | "keyup" | "focus" | "blur" | "clear")[], "search" | "update:modelValue" | "input" | "keydown" | "keyup" | "focus" | "blur" | "clear", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: string;
-        required: false;
     };
     size: {
         type: PropType<"m" | "s">;
@@ -65,6 +65,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     onSearch?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
     onKeydown?: ((...args: any[]) => any) | undefined;
     onKeyup?: ((...args: any[]) => any) | undefined;

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

@@ -1,17 +1,17 @@
-export { s as OrSearchV3 } from '../../OrSearch-9c6f1e16.js';
+export { s as OrSearchV3 } from '../../OrSearch-fccacdba.js';
 export { I as SearchSize } from '../../OrInputBox-8c1a29dd.js';
 import '@vueuse/core';
 import 'vue-demi';
-import '../../OrInput-2810a760.js';
 import '../../useIdAttribute-859439f0.js';
 import '../../dom-aecadd9a.js';
 import 'lodash/isElement';
 import 'lodash/get';
 import '../../useProxyModelValue-940010d2.js';
-import '../../useResponsive-1baf3485.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import '../../useValidationAttributes-d1abbe34.js';
+import '../../OrInput-2810a760.js';
+import '../../useResponsive-1baf3485.js';
 import '../../OrError-69bd7f6a.js';
 import 'vue';
 import '../../OrHint-55d3de35.js';

package/dist/esm/v3/index.js

@@ -8,7 +8,7 @@ export { s as OrButtonV2 } from './OrButton-f4098587.js';
 export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTTON_TYPE, I as ICON_BUTTON_TYPE, s as OrIconButton, s as OrIconButtonV2 } from './OrIconButton-4424a0dc.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-7fd78cc8.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-ce6c8201.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-fc6fd56c.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-d3320b27.js';
 export { s as OrCheckbox } from './OrCheckbox-42ed332c.js';
 export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-e12e94c8.js';
@@ -95,7 +95,7 @@ export { s as OrRatingV3 } from './OrRating-ec9462c5.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement, R as SidebarPadding } from './OrResizeablePanel-525d396f.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-d9182fa2.js';
 export { s as OrSearch } from './OrSearch-aa57d4e8.js';
-export { s as OrSearchV3 } from './OrSearch-9c6f1e16.js';
+export { s as OrSearchV3 } from './OrSearch-fccacdba.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-adbf7f4e.js';
 export { s as OrSelect } from './OrSelect-a366e668.js';
 export { s as OrSelectV3 } from './OrSelect-a65c0b08.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.16.3",
+  "version": "8.16.4",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -177,5 +177,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "33df1b7f5022fb9b193ed8523f7a5c076492909a"
+  "gitHead": "7302352c135f6dcd05f25ecb3c646017ce025ad9"
 }

package/src/components/or-search-v3/OrSearch.vue

@@ -1,14 +1,13 @@
 <template>
   <OrInput
     ref="root"
-    v-model.trim="localModelValue"
+    v-model.trim="draftModelValue"
+    v-bind="controlAttributes"
     :class="rootStyles"
     :type="'search'"
     :size="size"
     :placeholder="placeholder"
-    :debounce="debounce"
     :disable-default-styles="disableDefaultStyles"
-    v-bind="controlAttributes"
     @input="$emit('input', $event)"
     @keydown="$emit('keydown', $event)"
     @keyup="$emit('keyup', $event)"
@@ -18,11 +17,11 @@
 </template>
 
 <script lang="ts">
-import { debouncedWatch } from '@vueuse/core';
-import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue-demi';
+import { watchDebounced } from '@vueuse/core';
+import { PropType, computed, defineComponent, reactive, ref, toRef, watch } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
 import { OrInputV3 as OrInput } from '../or-input-v3';
 import { SearchSize } from './props';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
 
 export default defineComponent({
   name: 'OrSearch',
@@ -31,11 +30,15 @@ export default defineComponent({
     OrInput,
   },
 
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
   props: {
     modelValue: {
       type: String,
       default: '',
-      required: false,
     },
 
     size: {
@@ -60,18 +63,23 @@ export default defineComponent({
   },
 
   emits: [
-    'search',
+    'update:modelValue',
+
     'input',
     'keydown',
     'keyup',
     'focus',
     'blur',
+
+    'search',
     'clear',
   ],
 
   expose: [
     'root',
+
     'focus',
+    'blur',
     'clear',
   ],
 
@@ -85,22 +93,33 @@ export default defineComponent({
     ]);
 
     // State
-    const localModelValue = ref(props.modelValue ?? '');
     const controlAttributes = reactive({
       id: useIdAttribute(),
       ...useControlAttributes(),
       ...useValidationAttributes(),
     });
 
-    // Events
-    debouncedWatch(
-      localModelValue,
-      () => localModelValue.value.length > 0 && context.emit('search', localModelValue.value),
-      { debounce: props.debounce },
-    );
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(props.modelValue);
+
+    watch(proxyModelValue, (value) => {
+      draftModelValue.value = value;
+    });
+
+    watchDebounced(draftModelValue, (value) => {
+      if (value.length > 0) {
+        proxyModelValue.value = value;
+
+        context.emit('search', value);
+      }
+    }, {
+      debounce: toRef(props, 'debounce'),
+    });
+
+    watch(draftModelValue, (nextValue, prevValue) => {
+      if (nextValue.length === 0 && prevValue.length > 0) {
+        proxyModelValue.value = nextValue;
 
-    watch(localModelValue, (val, beforeVal) => {
-      if (val.length === 0 && beforeVal.length > 0) {
         context.emit('search', '');
         context.emit('clear');
       }
@@ -111,16 +130,24 @@ export default defineComponent({
       (root.value as { focus: () => void; } | undefined)?.focus(); // fixes error TS2349
     }
 
+    function blur(): void {
+      (root.value as { blur: () => void; } | undefined)?.blur(); // fixes error TS2349
+    }
+
     function clear(): void {
-      localModelValue.value = '';
+      draftModelValue.value = '';
     }
 
     return {
       root,
       rootStyles,
-      localModelValue,
+
       controlAttributes,
+      proxyModelValue,
+      draftModelValue,
+
       focus,
+      blur,
       clear,
     };
   },

package/src/hooks/useProxyModelValue.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, Ref, WritableComputedRef, computed } from 'vue-demi';
+import { Ref, WritableComputedRef, computed } from 'vue-demi';
 
 export type UseProxyModelValueEmit<T> = (event: 'update:modelValue', value: T) => void;