@onereach/ui-components 4.10.4 → 4.10.5-beta.2961.0

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';

package/src/hooks/usePopoverState.ts

@@ -1,44 +1,45 @@
 import { debouncedRef } from '@vueuse/core';
-import { Ref, SetupContext, UnwrapRef, ref, watch } from 'vue-demi';
+import { Ref, ref, watch } from 'vue-demi';
 
-export interface PopoverState {
+export type UsePopoverStateEmit = (event: 'update:state' | 'open' | 'close', value?: 'open' | 'closed') => void;
+
+export type UsePopoverStateOptions = {
+  debounce?: number;
+};
+
+export type UsePopoverStateReturn = {
   state: Ref<'open' | 'closed'>;
 
   open: () => void;
   close: () => void;
   toggle: () => void;
-}
-
-export interface PopoverStateOptions {
-  debounce?: number;
-}
+};
 
-// TODO: Remove type `any` (https://github.com/microsoft/TypeScript/issues/27808)
 // TODO: Use `defineEmits` after migration to Vue 3
 export function usePopoverState(
   isOpen: Ref<boolean>,
-  context: SetupContext<('update:state' | 'open' | 'close' | any)[]>,
-  options?: PopoverStateOptions
-): PopoverState {
+  emit: UsePopoverStateEmit,
+  options: UsePopoverStateOptions = {}
+): UsePopoverStateReturn {
   // State
-  const state = ref<UnwrapRef<PopoverState['state']>>(isOpen.value ? 'open' : 'closed');
+  const state = ref(isOpen.value ? 'open' : 'closed') as UsePopoverStateReturn['state'];
 
   watch(isOpen, (value) => {
     state.value = value ? 'open' : 'closed';
   });
 
-  const debouncedState = options?.debounce ? debouncedRef(state, options.debounce) : state;
+  const debouncedState = options.debounce ? debouncedRef(state, options.debounce) : state;
 
   watch(debouncedState, (value) => {
-    context.emit('update:state', value);
+    emit('update:state', value);
 
     switch (value) {
       case 'open':
-        context.emit('open');
+        emit('open');
         break;
 
       case 'closed':
-        context.emit('close');
+        emit('close');
         break;
     }
   });

package/src/hooks/useProxyModelValue.ts

@@ -0,0 +1,50 @@
+import { Ref, WritableComputedRef, computed } from 'vue-demi';
+
+export type UseProxyModelValueEmit<T> = (event: 'update:modelValue', value: T) => void;
+
+export type UseProxyModelValueOptions<T> = {
+  defaultValue?: Ref<NonNullable<T>>;
+};
+
+export type UseProxyModelValueReturn<T> = WritableComputedRef<T>;
+
+export function useProxyModelValue<T>(
+  modelValue: Ref<T>,
+  emit: UseProxyModelValueEmit<T>
+): UseProxyModelValueReturn<T>;
+
+export function useProxyModelValue<T>(
+  modelValue: Ref<T>,
+  emit: UseProxyModelValueEmit<T>,
+  options: Required<Pick<UseProxyModelValueOptions<T>, 'defaultValue'>>
+): UseProxyModelValueReturn<NonNullable<T>>;
+
+export function useProxyModelValue<T>(
+  modelValue: Ref<T>,
+  emit: UseProxyModelValueEmit<T>,
+  options: UseProxyModelValueOptions<T> = {}
+): UseProxyModelValueReturn<T> {
+  const { defaultValue } = options;
+
+  if (defaultValue) {
+    return computed({
+      get: () => {
+        return modelValue.value ?? defaultValue.value;
+      },
+
+      set: (value) => {
+        emit('update:modelValue', value);
+      },
+    });
+  }
+
+  return computed({
+    get: () => {
+      return modelValue.value;
+    },
+
+    set: (value) => {
+      emit('update:modelValue', value);
+    },
+  });
+}

package/src/hooks/useTheme.ts

@@ -2,6 +2,8 @@ import defaultConfig from '@onereach/styles/tailwind.config';
 import { Config } from 'tailwindcss';
 import resolveConfig from 'tailwindcss/resolveConfig';
 
-export function useTheme(config: Config = defaultConfig): Config['theme'] {
-  return resolveConfig(config).theme;
+export type UseThemeReturn = Record<keyof NonNullable<Config['theme']>, Record<string, string>>;
+
+export function useTheme(config: Config = defaultConfig): UseThemeReturn {
+  return resolveConfig(config).theme as UseThemeReturn;
 }

package/dist/bundled/v3/{OrToastContainer.vue_vue_type_script_lang-d1a074fe.js → OrToastContainer.vue_vue_type_script_lang-7d44207e.js}

@@ -5,9 +5,9 @@ import script$2 from './components/OrToastV3/OrToast.js';
 import { P as PositionsX, a as PositionsY, T as TransitionType } from './props-7be029c7.js';
 import { ToastContainer, ToastContainerPositions } from './components/OrToastV3/styles.js';
 import './components/OrTeleportV3/OrTeleport.js';
-import { useElevation } from './hooks/useElevation.js';
 import { s as script$1 } from './OrTeleport.vue3.vue_vue_type_script_lang-a6ce162e.js';
 import { u as useToggle } from './index-f4d8e24c.js';
+import { useElevation } from './hooks/useElevation.js';
 
 var script = defineComponent({
   name: 'OrToastContainer',