@onereach/ui-components 2.67.9 → 2.67.10

package/dist/bundled/v2/{OrSearch-f6d5fc65.js → OrSearch-9f797381.js}

@@ -2,7 +2,7 @@ import './index-fa6eb4ca.js';
 import { debouncedWatch } from '@vueuse/core';
 import { O as OrInput } from './OrInput-cdd93d29.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
-import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { a as InputBoxSize } from './OrInputBox-7069052f.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -34,7 +34,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur', 'clear'],
   expose: ['root', 'focus', 'clear'],
   setup(props, context) {
     // Refs
@@ -48,6 +48,11 @@ var script = defineComponent({
     debouncedWatch(localModelValue, () => context.emit('search', localModelValue.value), {
       debounce: props.debounce
     });
+    watch(localModelValue, (val, beforeVal) => {
+      if (val.length === 0 && beforeVal.length > 0) {
+        context.emit('clear');
+      }
+    });
     // Methods
     function focus() {
       var _a;

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

@@ -63,7 +63,7 @@ export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from '../OrP
 export { _ as OrRadio } from '../OrRadio-187d6fc7.js';
 export { _ as OrRadioGroup } from '../OrRadioGroup-aa9f0757.js';
 export { _ as OrRadioV3 } from '../OrRadio-8ec1d487.js';
-export { _ as OrSearchV3 } from '../OrSearch-f6d5fc65.js';
+export { _ as OrSearchV3 } from '../OrSearch-9f797381.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-65c87f9b.js';
 export { _ as OrSelect } from '../OrSelect-a23d4210.js';
 export { _ as OrSelectV3 } from '../OrSelect-6cef1b69.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSearchV3 } from '../../OrSearch-f6d5fc65.js';
+export { _ as OrSearchV3 } from '../../OrSearch-9f797381.js';
 export { a as SearchSize } from '../../OrInputBox-7069052f.js';
 import '../../index-fa6eb4ca.js';
 import 'vue';

package/dist/bundled/v2/index.js

@@ -68,7 +68,7 @@ export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrPr
 export { _ as OrRadio } from './OrRadio-187d6fc7.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-aa9f0757.js';
 export { _ as OrRadioV3 } from './OrRadio-8ec1d487.js';
-export { _ as OrSearchV3 } from './OrSearch-f6d5fc65.js';
+export { _ as OrSearchV3 } from './OrSearch-9f797381.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-65c87f9b.js';
 export { _ as OrSelect } from './OrSelect-a23d4210.js';
 export { _ as OrSelectV3 } from './OrSelect-6cef1b69.js';

package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-b254e34c.js → OrSearch.vue_vue_type_script_lang-b022defa.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, ref, computed, watch } from 'vue';
 import { debouncedWatch } from '@vueuse/core';
 import './OrInput-33571984.js';
 import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
@@ -33,7 +33,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur', 'clear'],
   expose: ['root', 'focus', 'clear'],
   setup(props, context) {
     // Refs
@@ -47,6 +47,11 @@ var script = defineComponent({
     debouncedWatch(localModelValue, () => context.emit('search', localModelValue.value), {
       debounce: props.debounce
     });
+    watch(localModelValue, (val, beforeVal) => {
+      if (val.length === 0 && beforeVal.length > 0) {
+        context.emit('clear');
+      }
+    });
     // Methods
     function focus() {
       var _a;

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

@@ -63,7 +63,7 @@ export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from '../OrP
 export { s as OrRadio } from '../OrRadio.vue_vue_type_script_lang-c956b54b.js';
 export { s as OrRadioGroup } from '../OrRadioGroup.vue_vue_type_script_lang-caea7bcb.js';
 export { s as OrRadioV3 } from '../OrRadio.vue_vue_type_script_lang-e64b14a1.js';
-export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-b254e34c.js';
+export { s as OrSearchV3 } from '../OrSearch.vue_vue_type_script_lang-b022defa.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl.vue_vue_type_script_lang-6068f70c.js';
 export { s as OrSelect } from '../OrSelect.vue_vue_type_script_lang-26c0a70a.js';
 export { s as OrSelectV3 } from '../OrSelect.vue_vue_type_script_lang-e6be732c.js';

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

@@ -1,4 +1,4 @@
-export { s as OrSearchV3 } from '../../OrSearch.vue_vue_type_script_lang-b254e34c.js';
+export { s as OrSearchV3 } from '../../OrSearch.vue_vue_type_script_lang-b022defa.js';
 export { a as SearchSize } from '../../OrInputBox.vue_vue_type_script_lang-760097b4.js';
 import 'vue';
 import '@vueuse/core';

package/dist/bundled/v3/index.js

@@ -83,8 +83,8 @@ import { s as script$r } from './OrRadioGroup.vue_vue_type_script_lang-caea7bcb.
 export { s as OrRadioGroup } from './OrRadioGroup.vue_vue_type_script_lang-caea7bcb.js';
 import { s as script$s } from './OrRadio.vue_vue_type_script_lang-e64b14a1.js';
 export { s as OrRadioV3 } from './OrRadio.vue_vue_type_script_lang-e64b14a1.js';
-import { s as script$t } from './OrSearch.vue_vue_type_script_lang-b254e34c.js';
-export { s as OrSearchV3 } from './OrSearch.vue_vue_type_script_lang-b254e34c.js';
+import { s as script$t } from './OrSearch.vue_vue_type_script_lang-b022defa.js';
+export { s as OrSearchV3 } from './OrSearch.vue_vue_type_script_lang-b022defa.js';
 import { s as script$u } from './OrSegmentedControl.vue_vue_type_script_lang-6068f70c.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl.vue_vue_type_script_lang-6068f70c.js';
 import { s as script$x } from './OrSidebar.vue_vue_type_script_lang-7c55ac0a.js';

package/dist/esm/v2/{OrSearch-42454def.js → OrSearch-abaffb95.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { debouncedWatch } from '@vueuse/core';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { _ as __vue_component__$1 } from './OrInput-6e7e582e.js';
@@ -33,7 +33,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur', 'clear'],
   expose: ['root', 'focus', 'clear'],
   setup(props, context) {
     // Refs
@@ -47,6 +47,11 @@ var script = defineComponent({
     debouncedWatch(localModelValue, () => context.emit('search', localModelValue.value), {
       debounce: props.debounce
     });
+    watch(localModelValue, (val, beforeVal) => {
+      if (val.length === 0 && beforeVal.length > 0) {
+        context.emit('clear');
+      }
+    });
     // Methods
     function focus() {
       var _a;

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

@@ -63,7 +63,7 @@ export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from '../OrP
 export { _ as OrRadio } from '../OrRadio-e4198532.js';
 export { _ as OrRadioGroup } from '../OrRadioGroup-d9d32cba.js';
 export { _ as OrRadioV3 } from '../OrRadio-19d01c00.js';
-export { _ as OrSearchV3 } from '../OrSearch-42454def.js';
+export { _ as OrSearchV3 } from '../OrSearch-abaffb95.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-0b4637ba.js';
 export { _ as OrSelect } from '../OrSelect-dae2b069.js';
 export { _ as OrSelectV3 } from '../OrSelect-439f27b9.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrSearchV3 } from '../../OrSearch-42454def.js';
+export { _ as OrSearchV3 } from '../../OrSearch-abaffb95.js';
 export { a as SearchSize } from '../../OrInputBox-208dceac.js';
 import 'vue-demi';
 import '@vueuse/core';

package/dist/esm/v2/index.js

@@ -63,7 +63,7 @@ export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrPr
 export { _ as OrRadio } from './OrRadio-e4198532.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-d9d32cba.js';
 export { _ as OrRadioV3 } from './OrRadio-19d01c00.js';
-export { _ as OrSearchV3 } from './OrSearch-42454def.js';
+export { _ as OrSearchV3 } from './OrSearch-abaffb95.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-0b4637ba.js';
 export { _ as OrSelect } from './OrSelect-dae2b069.js';
 export { _ as OrSelectV3 } from './OrSelect-439f27b9.js';

package/dist/esm/v3/{OrSearch-2912b7df.js → OrSearch-b56a418c.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { debouncedWatch } from '@vueuse/core';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { s as script$1 } from './OrInput-5672f47b.js';
@@ -33,7 +33,7 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['search', 'input', 'keydown', 'keyup', 'focus', 'blur', 'clear'],
   expose: ['root', 'focus', 'clear'],
   setup(props, context) {
     // Refs
@@ -47,6 +47,11 @@ var script = defineComponent({
     debouncedWatch(localModelValue, () => context.emit('search', localModelValue.value), {
       debounce: props.debounce
     });
+    watch(localModelValue, (val, beforeVal) => {
+      if (val.length === 0 && beforeVal.length > 0) {
+        context.emit('clear');
+      }
+    });
     // Methods
     function focus() {
       var _a;

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

@@ -58,7 +58,7 @@ export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from '../OrP
 export { s as OrRadio } from '../OrRadio-c3ab11f2.js';
 export { s as OrRadioGroup } from '../OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from '../OrRadio-0c1883f2.js';
-export { s as OrSearchV3 } from '../OrSearch-2912b7df.js';
+export { s as OrSearchV3 } from '../OrSearch-b56a418c.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-cdf00d49.js';
 export { s as OrSelect } from '../OrSelect-0821b907.js';
 export { s as OrSelectV3 } from '../OrSelect-ff8f8461.js';

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

@@ -1,4 +1,4 @@
-export { s as OrSearchV3 } from '../../OrSearch-2912b7df.js';
+export { s as OrSearchV3 } from '../../OrSearch-b56a418c.js';
 export { a as SearchSize } from '../../OrInputBox-634230b1.js';
 import 'vue-demi';
 import '@vueuse/core';

package/dist/esm/v3/index.js

@@ -58,7 +58,7 @@ export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrPr
 export { s as OrRadio } from './OrRadio-c3ab11f2.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioV3 } from './OrRadio-0c1883f2.js';
-export { s as OrSearchV3 } from './OrSearch-2912b7df.js';
+export { s as OrSearchV3 } from './OrSearch-b56a418c.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-cdf00d49.js';
 export { s as OrSelect } from './OrSelect-0821b907.js';
 export { s as OrSelectV3 } from './OrSelect-ff8f8461.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.67.9",
+  "version": "2.67.10",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -124,5 +124,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "643af554350030abee93e1c54d2cdd12c56d1cd6"
+  "gitHead": "da76e43453bbde55f414aca25f01e1cf653b1a70"
 }

package/src/components/or-search-v3/OrSearch.stories3.ts

@@ -68,6 +68,10 @@ export default {
     blur: {
       table: { disable: true },
     },
+
+    clear: {
+      table: { disable: true },
+    },
   },
 
   parameters: {
@@ -93,6 +97,7 @@ const Template: StoryFn<typeof OrSearch> = (args) => ({
       onKeyup: action('keyup'),
       onFocus: action('focus'),
       onBlur: action('blur'),
+      onClear: action('clear'),
     };
   },
 
@@ -106,6 +111,7 @@ const Template: StoryFn<typeof OrSearch> = (args) => ({
       @keyup="onKeyup"
       @focus="onFocus"
       @blur="onBlur"
+      @clear="onClear"
     />
   `,
 });

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

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, watch, defineComponent, PropType, ref } from 'vue-demi';
 import { debouncedWatch } from '@vueuse/core';
 import { useClassAttribute } from '../../hooks';
 import { OrInputV3 as OrInput } from '../or-input-v3';
@@ -68,6 +68,7 @@ export default defineComponent({
     'keyup',
     'focus',
     'blur',
+    'clear',
   ],
 
   expose: [
@@ -98,6 +99,12 @@ export default defineComponent({
       { debounce: props.debounce },
     );
 
+    watch(localModelValue, (val, beforeVal) => {
+      if (val.length === 0 && beforeVal.length > 0) {
+        context.emit('clear');
+      }
+    });
+
     // Methods
     function focus(): void {
       (root.value as { focus: () => void; } | undefined)?.focus(); // fixes error TS2349