@onereach/ui-components 4.10.3 → 4.10.4-beta.2951.0

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-control/OrDateTimePickerDateControl.vue

@@ -23,7 +23,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
+import { computed, defineComponent, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
 import { useDatePlaceholder } from '../../hooks/useDatePlaceholder';
 import { DateTimePickerDateControl, DateTimePickerDateControlPlaceholder } from './styles';
 
@@ -76,13 +77,7 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const placeholder = useDatePlaceholder();
 

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-select/OrDateTimePickerDateSelect.vue

@@ -32,7 +32,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { FilterFunction } from '../../types';
 import { DateTimePickerDateSelect, DateTimePickerDateSelectButtonGroup, DateTimePickerDateSelectButtonGroupCurrentDateItem, DateTimePickerDateSelectButtonGroupDateItem, DateTimePickerDateSelectButtonGroupWeekdayItem } from './styles';
@@ -101,12 +102,8 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue ?? props.initialValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: toRef(props, 'initialValue'),
     });
 
     const dayOptions = computed(() => {

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-month-select/OrDateTimePickerMonthSelect.vue

@@ -66,7 +66,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
@@ -144,12 +145,8 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue ?? props.initialValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: toRef(props, 'initialValue'),
     });
 
     const yearOptions = computed(() => {

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-control/OrDateTimePickerTimeControl.vue

@@ -23,7 +23,8 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
 import { useTimePlaceholder } from '../../hooks/useTimePlaceholder';
 import { DateTimePickerTimeFormat } from '../../props';
 import { DateTimePickerTimeControl, DateTimePickerTimeControlPlaceholder } from './styles';
@@ -82,13 +83,7 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const placeholder = useTimePlaceholder(props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined);
 

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue

@@ -58,7 +58,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { DateTimePickerTimeFormat } from '../../props';
 import { FilterFunction } from '../../types';
@@ -130,12 +131,8 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue ?? props.initialValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: toRef(props, 'initialValue'),
     });
 
     const proxyTimeFormat = computed(() => {

package/src/components/or-expansion-panel-v3/OrExpansionPanel.vue

@@ -118,7 +118,7 @@ export default defineComponent({
     ]);
 
     // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
 
     return {
       root,

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

@@ -77,8 +77,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref, toRef, watch } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
 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';
@@ -181,16 +181,13 @@ export default defineComponent({
       ...useValidationAttributes(),
     });
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
 
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
+    watch(proxyModelValue, (value) => {
+      draftModelValue.value = value;
     });
 
-    const draftModelValue = ref<string | number>('');
-
     const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);
 
@@ -230,17 +227,12 @@ export default defineComponent({
 
     function reset(): void {
       if (draftModelValue.value !== proxyModelValue.value) {
-        draftModelValue.value = proxyModelValue.value ?? '';
+        draftModelValue.value = proxyModelValue.value;
       }
 
       activated.value = false;
     }
 
-    // Effects
-    watch(proxyModelValue, (value) => {
-      draftModelValue.value = value ?? '';
-    }, { immediate: true });
-
     return {
       root,
       control,

package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue

@@ -76,8 +76,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, ref, watch } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
+import { computed, defineComponent, reactive, ref, toRef, watch } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
 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';
@@ -168,16 +168,13 @@ export default defineComponent({
       ...useValidationAttributes(),
     });
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
 
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
+    watch(proxyModelValue, (value) => {
+      draftModelValue.value = value;
     });
 
-    const draftModelValue = ref<string>('');
-
     const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);
 
@@ -223,11 +220,6 @@ export default defineComponent({
       activated.value = false;
     }
 
-    // Effects
-    watch(proxyModelValue, (value) => {
-      draftModelValue.value = value ?? '';
-    }, { immediate: true });
-
     return {
       root,
       control,

package/src/components/or-input-v3/OrInput.vue

@@ -119,8 +119,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useResponsive, useValidationAttributes } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref, toRef } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, useResponsive, useValidationAttributes } from '../../hooks';
 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';
@@ -254,13 +254,7 @@ export default defineComponent({
       ...useValidationAttributes(),
     });
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);

package/src/components/or-menu-v3/OrMenu.vue

@@ -80,7 +80,7 @@ export default defineComponent({
     ]);
 
     // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
 
     // Handlers
     function onClick(event: Event): void {

package/src/components/or-modal-v3/OrModal.vue

@@ -85,7 +85,7 @@ export default defineComponent({
     ]);
 
     // State
-    const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context);
+    const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context.emit);
 
     return {
       root,

package/src/components/or-pagination-v3/OrPagination.vue

@@ -88,8 +88,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useResponsive } from '../../hooks';
+import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { useProxyModelValue, useResponsive } from '../../hooks';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
@@ -168,13 +168,7 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const currentLimit = computed<number>({
       get: () => proxyModelValue.value?.limit ?? props.pageSizeOptions[0],

package/src/components/or-popover-v3/OrPopover.vue

@@ -140,7 +140,7 @@ export default defineComponent({
     ]);
 
     // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
 
     const isFlipped = ref<boolean>(false);
     const isHidden = ref<boolean>(false);

package/src/components/or-radio-group-v3/OrRadioGroup.vue

@@ -21,9 +21,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue-demi';
-import { useVModel } from '@vueuse/core';
-import { OrFormGroupV3 as OrFormGroup, FormGroupDirection } from '../or-form-group-v3';
+import { defineComponent, PropType, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../hooks';
+import { FormGroupDirection, OrFormGroupV3 as OrFormGroup } from '../or-form-group-v3';
 import { OrRadioV3 as OrRadio } from '../or-radio-v3';
 
 export default defineComponent({
@@ -68,9 +68,8 @@ export default defineComponent({
     },
   },
 
-  setup(props, { emit }) {
-
-    const proxyModelValue = useVModel(props, 'modelValue', emit);
+  setup(props, context) {
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     return {
       proxyModelValue,

package/src/components/or-radio-v3/OrRadio.vue

@@ -34,8 +34,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useControlAttributes, useIdAttribute } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref, toRef } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue } from '../../hooks';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { RadioControl, RadioControlHandle, RadioRoot } from './styles';
 
@@ -119,13 +119,7 @@ export default defineComponent({
       ...useControlAttributes(),
     });
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     // Methods
     function focus(): void {

package/src/components/or-segmented-control-v3/OrSegmentedControl.vue

@@ -17,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../hooks';
 import OrSegmentedControlItem from './partials/or-segmented-control-item/OrSegmentedControlItem.vue';
 import { SegmentedControlSize } from './props';
 import { SegmentedControlRoot, SegmentedControlRootSizes } from './styles';
@@ -77,13 +78,7 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     return {
       root,

package/src/components/or-select-v3/OrSelect.vue

@@ -226,9 +226,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, watch } from 'vue-demi';
+import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
-import { useOverflow } from '../../hooks';
+import { useOverflow, useProxyModelValue } from '../../hooks';
 import { isEmptyValue } from '../../utils/isEmptyValue';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
@@ -411,13 +411,7 @@ export default defineComponent({
     // State
     const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value)

package/src/components/or-sort-header-v3/OrSortHeader.vue

@@ -17,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { useProxyModelValue } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { SortHeaderRoot } from './styles';
 import { SortHeaderModel } from './types';
@@ -68,13 +69,7 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const activated = computed(() => {
       return proxyModelValue.value?.column === props.value;

package/src/components/or-switch-v3/OrSwitch.vue

@@ -49,8 +49,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useControlAttributes, useIdAttribute } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref, toRef } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue } from '../../hooks';
 import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle, SwitchRoot } from './styles';
@@ -146,13 +146,7 @@ export default defineComponent({
       ...useControlAttributes(),
     });
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     // Methods
     function focus(): void {

package/src/components/or-tabs-v3/OrTabs.vue

@@ -46,7 +46,8 @@
 
 <script lang="ts">
 import { useResizeObserver } from '@vueuse/core';
-import { computed, defineComponent, nextTick, onMounted, PropType, reactive, ref, watch } from 'vue-demi';
+import { PropType, computed, defineComponent, nextTick, onMounted, reactive, ref, toRef, watch } from 'vue-demi';
+import { useProxyModelValue } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
@@ -124,13 +125,7 @@ export default defineComponent({
       hidden: [] as TabsItem[],
     });
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const activeTab = computed(() => props.items.find(({ value }) => value === proxyModelValue.value)!);
 

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -104,8 +104,8 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, reactive, ref } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
+import { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
 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';
@@ -226,14 +226,7 @@ export default defineComponent({
       ...useValidationAttributes(),
     });
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
-
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref<string>();
 
     const currentLength = computed(() => proxyModelValue.value?.length ?? 0);

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -77,8 +77,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, reactive, ref } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
+import { computed, defineComponent, PropType, reactive, ref, toRef } from 'vue-demi';
+import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
@@ -186,13 +186,7 @@ export default defineComponent({
       ...useValidationAttributes(),
     });
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);

package/src/components/or-time-picker-v3/OrTimePicker.vue

@@ -105,8 +105,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
+import { useProxyModelValue } from '../../hooks';
 import { useCurrentDate } from '../or-date-time-picker-v3/hooks/useCurrentDate';
 import OrDateTimePickerMobileControl from '../or-date-time-picker-v3/partials/or-date-time-picker-mobile-control/OrDateTimePickerMobileControl.vue';
 import OrDateTimePickerPopoverFooter from '../or-date-time-picker-v3/partials/or-date-time-picker-popover-footer/OrDateTimePickerPopoverFooter.vue';
@@ -253,19 +254,12 @@ export default defineComponent({
     // State
     const initialModelValue = useCurrentDate();
 
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const draftModelValue = ref<Date>();
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref(proxyModelValue.value);
 
     watch(proxyModelValue, (value) => {
       draftModelValue.value = value;
-    }, { immediate: true });
+    });
 
     const isInvalidDraftModelValue = computed(() => {
       if (draftModelValue.value) {

package/src/components/or-tooltip-v3/OrTooltip.vue

@@ -89,7 +89,7 @@ export default defineComponent({
     ]);
 
     // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context, { debounce: 250 });
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit, { debounce: 250 });
 
     return {
       root,

package/src/hooks/index.ts

@@ -1,9 +1,10 @@
-export { useControlAttributes } from './useControlAttributes';
-export { useElevation } from './useElevation';
-export { useIdAttribute } from './useIdAttribute';
-export { useOverflow } from './useOverflow';
-export { usePopoverState } from './usePopoverState';
-export { useResponsive } from './useResponsive';
-export { useTheme } from './useTheme';
+export * from './useControlAttributes';
+export * from './useElevation';
+export * from './useIdAttribute';
+export * from './useOverflow';
+export * from './usePopoverState';
+export * from './useProxyModelValue';
+export * from './useResponsive';
+export * from './useTheme';
 export { default as useToggle } from './useToggle';
-export { useValidationAttributes } from './useValidationAttributes';
+export * from './useValidationAttributes';