@onereach/ui-components 8.16.3-beta.3862.0 → 8.16.3

package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue

@@ -30,13 +30,13 @@
               ref="toolbarButtonRef"
               :selected="isActive[item]"
               :disabled="!isFocused"
-              :tooltip="{text: item, placement: 'top'}"
+              :tooltip="{content: item, placement: 'top'}"
               :icon="{icon: headingIcon, variant: 'inherit', size: 'm'}"
               @click="menuRef.open()"
             />
             <or-icon-button
               v-else-if="isVisible(item)"
-              :tooltip="{text: iconTooltipsEnum[item], placement: 'top'}"
+              :tooltip="{content: iconTooltipsEnum[item], placement: 'top'}"
               :selected="isActive[item]"
               :disabled="!isFocused"
               :icon="{icon: iconsEnum[item], variant: 'inherit', size: 'm'}"
@@ -74,14 +74,14 @@
     <or-popover
       v-if="moreButtonRef"
       ref="moreRef"
-      :trigger="moreButtonRef.root"
+      :trigger="moreButtonRef && moreButtonRef.root"
       placement="top-end"
     >
       <div class="flex p-sm gap-md bg-on-primary">
         <or-icon-button
           v-for="item in notVisibleTools"
           :key="item"
-          :tooltip="{text: iconTooltipsEnum[item], placement: 'top'}"
+          :tooltip="{content: iconTooltipsEnum[item], placement: 'top'}"
           :selected="isActive[item]"
           :icon="{icon: iconsEnum[item], variant: 'inherit', size: 'm'}"
           @click="handleToolbarClick(item)"
@@ -91,7 +91,7 @@
     <or-menu
       v-if="toolbarButtonRef"
       ref="menuRef"
-      :trigger="toolbarButtonRef[getIndexOfHeading].root"
+      :trigger="toolbarButtonRef[getIndexOfHeading] && toolbarButtonRef[getIndexOfHeading].root"
       placement="bottom-start"
       class="bg-on-primary"
     >

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

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

package/src/hooks/useProxyModelValue.ts

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