@onereach/ui-components 4.11.0-beta.2932.0 → 4.11.0

package/dist/bundled/v2/{OrDateTimePickerMonthSelect-2c1b5116.js → OrDateTimePickerMonthSelect-88a629fe.js}

@@ -1,5 +1,6 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import { useDatePlaceholder } from './components/OrDateTimePickerV3/hooks/useDatePlaceholder.js';
+import { useProxyModelValue } from './hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import __vue_component__$3 from './components/OrButtonV3/OrButton.js';
 import __vue_component__$4 from './components/OrIconV3/OrIcon.js';
@@ -50,12 +51,7 @@ var script$2 = defineComponent({
     const rootStyles = computed(() => ['or-date-time-picker-date-control-v3', ...DateTimePickerDateControl]);
     const placeholderStyles = computed(() => [...DateTimePickerDateControlPlaceholder]);
     // 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();
     // Methods
     function formatModelValue(value) {
@@ -146,7 +142,7 @@ const DateTimePickerDateSelectButtonGroupWeekdayItem = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 const DateTimePickerDateSelectButtonGroupDateItem = [
 // Box
-'min-w-fit',
+'!min-w-fit',
 // Spacing
 '!px-sm', '!py-sm',
 // Typography
@@ -190,14 +186,8 @@ var script$1 = defineComponent({
     const buttonGroupDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupDateItem]);
     const buttonGroupCurrentDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupCurrentDateItem]);
     // State
-    const proxyModelValue = computed({
-      get: () => {
-        var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.initialValue;
-      },
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: toRef(props, 'initialValue')
     });
     const dayOptions = computed(() => {
       const monthStartDate = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), 1, proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
@@ -375,14 +365,8 @@ var script = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     // State
-    const proxyModelValue = computed({
-      get: () => {
-        var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.initialValue;
-      },
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: toRef(props, 'initialValue')
     });
     const yearOptions = computed(() => {
       return Array.from({

package/dist/bundled/v2/{OrDateTimePickerTimeSelect-c52ee823.js → OrDateTimePickerTimeSelect-8851268e.js}

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useTimePlaceholder } from './components/OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import { DateTimePickerTimeFormat } from './components/OrDateTimePickerV3/props.js';
+import { useProxyModelValue } from './hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import __vue_component__$2 from './components/OrButtonV3/OrButton.js';
 
@@ -51,12 +52,7 @@ var script$1 = defineComponent({
     const rootStyles = computed(() => ['or-date-time-picker-time-control-v3', ...DateTimePickerTimeControl]);
     const placeholderStyles = computed(() => [...DateTimePickerTimeControlPlaceholder]);
     // 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);
     // Methods
     function formatModelValue(value) {
@@ -186,14 +182,8 @@ var script = defineComponent({
     const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
     const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
     // State
-    const proxyModelValue = computed({
-      get: () => {
-        var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.initialValue;
-      },
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: toRef(props, 'initialValue')
     });
     const proxyTimeFormat = computed(() => {
       if (props.format === DateTimePickerTimeFormat.Auto) {

package/dist/bundled/v2/components/OrBottomSheetV3/OrBottomSheet.js

@@ -1,4 +1,4 @@
-import { g as usePointerSwipe, o as onClickOutside, S as SwipeDirection } from '../../index-c92e2839.js';
+import { g as usePointerSwipe, o as onClickOutside, S as SwipeDirection } from '../../index-760079e7.js';
 import { defineComponent, ref, computed, toRef, watch, unref } from 'vue-demi';
 import { BottomSheetVariant } from './props.js';
 import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader } from './styles.js';
@@ -43,7 +43,7 @@ var script = defineComponent({
       open,
       close,
       toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
+    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const fullscreen = ref(false);
     watch(state, value => {
       if (value === 'closed') {

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

@@ -1,6 +1,6 @@
 export { default as OrBottomSheetV3 } from './OrBottomSheet.js';
 export { BottomSheetVariant } from './props.js';
-import '../../index-c92e2839.js';
+import '../../index-760079e7.js';
 import '../../index-ec92055d.js';
 import 'vue-demi';
 import './styles.js';

package/dist/bundled/v2/components/OrButtonV3/OrButton.js

@@ -3,7 +3,7 @@ import { ButtonType, ButtonVariant, ButtonColor } from './props.js';
 import { ButtonRoot, ButtonRootVariants, ButtonRootColors } from './styles.js';
 import __vue_component__$1 from '../OrLoaderV3/OrLoader.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-import '../../index-c92e2839.js';
+import '../../index-760079e7.js';
 import '../../index-ec92055d.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';

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

@@ -3,7 +3,7 @@ export { ButtonColor, ButtonType, ButtonVariant } from './props.js';
 import 'vue-demi';
 import './styles.js';
 import '../OrLoaderV3/OrLoader.js';
-import '../../index-c92e2839.js';
+import '../../index-760079e7.js';
 import '../../index-ec92055d.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';

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

@@ -15,7 +15,7 @@ import '../OrTooltipV3/OrTooltip.js';
 import '../OrTooltipV3/styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
-import '../../index-c92e2839.js';
+import '../../index-760079e7.js';
 import '../../index-ec92055d.js';
 import '../OrPopoverV3/props.js';
 import '../OrPopoverV3/styles.js';
@@ -54,6 +54,7 @@ import '../OrLabelV3/styles.js';
 import '../../hooks/useIdAttribute.js';
 import '../../hooks/useControlAttributes.js';
 import '../../hooks/useValidationAttributes.js';
+import '../../hooks/useProxyModelValue.js';
 import '../../style-inject.es-4c6f2515.js';
 
 var script$1 = defineComponent({

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

@@ -13,7 +13,7 @@ import '../OrTooltipV3/OrTooltip.js';
 import '../OrTooltipV3/styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
-import '../../index-c92e2839.js';
+import '../../index-760079e7.js';
 import '../../index-ec92055d.js';
 import '../OrPopoverV3/props.js';
 import '../OrPopoverV3/styles.js';
@@ -55,4 +55,5 @@ import '../OrLabelV3/styles.js';
 import '../../hooks/useIdAttribute.js';
 import '../../hooks/useControlAttributes.js';
 import '../../hooks/useValidationAttributes.js';
+import '../../hooks/useProxyModelValue.js';
 import '../../style-inject.es-4c6f2515.js';

package/dist/bundled/v2/components/OrCheckboxGroupV3/OrCheckboxGroup.js

@@ -1,12 +1,11 @@
-import { defineComponent } from 'vue-demi';
-import { u as useVModel } from '../../index-c92e2839.js';
+import { defineComponent, toRef } from 'vue-demi';
 import __vue_component__$1 from '../OrCheckboxTreeV3/OrCheckboxTree.js';
 import __vue_component__$2 from '../OrFormGroupV3/OrFormGroup.js';
 import { FormGroupDirection } from '../OrFormGroupV3/props.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-import '../../index-ec92055d.js';
-import '../OrCheckboxTreeV3/styles.js';
 import '../../utils/functions/flattenDeep.js';
+import '../OrCheckboxTreeV3/styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/props.js';
 import '../OrIconV3/styles.js';
@@ -23,6 +22,8 @@ import '../OrButtonV3/OrButton.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
 import '../OrLoaderV3/OrLoader.js';
+import '../../index-760079e7.js';
+import '../../index-ec92055d.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../OrFormGroupV3/styles.js';
@@ -71,11 +72,8 @@ var script = defineComponent({
       default: false
     }
   },
-  setup(props, _ref) {
-    let {
-      emit
-    } = _ref;
-    const proxyModelValue = useVModel(props, 'modelValue', emit);
+  setup(props, context) {
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     return {
       proxyModelValue
     };

package/dist/bundled/v2/components/OrCheckboxGroupV3/OrCheckboxGroup.vue.d.ts

@@ -1,8 +1,8 @@
 import { PropType } from 'vue-demi';
-import { FormGroupDirection } from '../or-form-group-v3';
 import { CheckboxTreeNode } from '../or-checkbox-tree-v3';
+import { FormGroupDirection } from '../or-form-group-v3';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    proxyModelValue: import("@vue/composition-api").Ref<string[]> | import("@vue/composition-api").WritableComputedRef<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string[]>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<string[]>;
@@ -70,7 +70,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     options: CheckboxTreeNode[];
     disabled: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
-    proxyModelValue: import("@vue/composition-api").Ref<string[]> | import("@vue/composition-api").WritableComputedRef<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string[]>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
     modelValue: string[];
     label: string;

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

@@ -1,10 +1,8 @@
 export { default as OrCheckboxGroupV3 } from './OrCheckboxGroup.js';
 import 'vue-demi';
-import '../../index-c92e2839.js';
-import '../../index-ec92055d.js';
 import '../OrCheckboxTreeV3/OrCheckboxTree.js';
-import '../OrCheckboxTreeV3/styles.js';
 import '../../utils/functions/flattenDeep.js';
+import '../OrCheckboxTreeV3/styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/props.js';
 import '../OrIconV3/styles.js';
@@ -17,11 +15,14 @@ import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
 import '../../hooks/useIdAttribute.js';
 import '../../hooks/useControlAttributes.js';
+import '../../hooks/useProxyModelValue.js';
 import '../../style-inject.es-4c6f2515.js';
 import '../OrButtonV3/OrButton.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
 import '../OrLoaderV3/OrLoader.js';
+import '../../index-760079e7.js';
+import '../../index-ec92055d.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../OrFormGroupV3/OrFormGroup.js';

package/dist/bundled/v2/components/OrCheckboxTreeV3/OrCheckboxTree.js

@@ -1,11 +1,11 @@
-import { defineComponent, computed, watch } from 'vue-demi';
-import { u as useVModel } from '../../index-c92e2839.js';
-import { CheckboxTreeRoot, CheckboxTreeRootParent } from './styles.js';
+import { defineComponent, computed, toRef, watch } from 'vue-demi';
 import flattenDeep from '../../utils/functions/flattenDeep.js';
+import { CheckboxTreeRoot, CheckboxTreeRootParent } from './styles.js';
 import __vue_component__$1 from '../OrIconV3/OrIcon.js';
 import __vue_component__$2 from '../OrCheckboxV3/OrCheckbox.js';
 import __vue_component__$3 from '../OrButtonV3/OrButton.js';
 import { u as useToggle } from '../../index-ec92055d.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrIconV3/props.js';
 import '../OrIconV3/styles.js';
@@ -20,6 +20,7 @@ import '../../style-inject.es-4c6f2515.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
 import '../OrLoaderV3/OrLoader.js';
+import '../../index-760079e7.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 
@@ -57,10 +58,7 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue'],
-  setup(props, _ref) {
-    let {
-      emit
-    } = _ref;
+  setup(props, context) {
     // State
     const hasChildren = computed(() => props.item.children && props.item.children.length > 0);
     const childrenValues = computed(() => {
@@ -75,7 +73,7 @@ var script = defineComponent({
       };
       return flattenDeep(getChildValues(props.item.children));
     });
-    const proxyModelValue = useVModel(props, 'modelValue', emit);
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const isAnyChildrenSelected = computed(() => {
       var _a;
       return (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.some(value => {

package/dist/bundled/v2/components/OrCheckboxTreeV3/OrCheckboxTree.vue.d.ts

@@ -4,7 +4,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     parentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     hasChildren: import("@vue/composition-api").ComputedRef<boolean | undefined>;
-    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string[]> | import("@vue/composition-api").Ref<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string[]>;
     isOpen: import("@vue/composition-api").Ref<boolean>;
     setIsOpen: (value?: boolean | undefined) => boolean;
     isIntermediate: import("@vue/composition-api").ComputedRef<boolean>;
@@ -66,7 +66,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     parentStyles: import("@vue/composition-api").ComputedRef<string[]>;
     hasChildren: import("@vue/composition-api").ComputedRef<boolean | undefined>;
-    proxyModelValue: import("@vue/composition-api").WritableComputedRef<string[]> | import("@vue/composition-api").Ref<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string[]>;
     isOpen: import("@vue/composition-api").Ref<boolean>;
     setIsOpen: (value?: boolean | undefined) => boolean;
     isIntermediate: import("@vue/composition-api").ComputedRef<boolean>;

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

@@ -1,9 +1,7 @@
 export { default as OrCheckboxTreeV3 } from './OrCheckboxTree.js';
 import 'vue-demi';
-import '../../index-c92e2839.js';
-import '../../index-ec92055d.js';
-import './styles.js';
 import '../../utils/functions/flattenDeep.js';
+import './styles.js';
 import '../OrIconV3/OrIcon.js';
 import '../OrIconV3/props.js';
 import '../OrIconV3/styles.js';
@@ -16,10 +14,13 @@ import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
 import '../../hooks/useIdAttribute.js';
 import '../../hooks/useControlAttributes.js';
+import '../../hooks/useProxyModelValue.js';
 import '../../style-inject.es-4c6f2515.js';
 import '../OrButtonV3/OrButton.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
 import '../OrLoaderV3/OrLoader.js';
+import '../../index-760079e7.js';
+import '../../index-ec92055d.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';

package/dist/bundled/v2/components/OrCheckboxV3/OrCheckbox.js

@@ -1,14 +1,13 @@
-import { defineComponent, ref, computed, reactive } from 'vue-demi';
-import { u as useVModel } from '../../index-c92e2839.js';
+import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
 import { isEmptyValue } from '../../utils/isEmptyValue.js';
 import { CheckboxRoot, CheckboxControl, CheckboxControlHandle } from './styles.js';
 import __vue_component__$1 from '../OrLabelV3/OrLabel.js';
 import { LabelVariant } from '../OrLabelV3/props.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-import '../../index-ec92055d.js';
 import '../OrLabelV3/styles.js';
 
 var script = defineComponent({
@@ -52,10 +51,7 @@ var script = defineComponent({
   },
   emits: ['update:modelValue', 'click', 'focus', 'blur'],
   expose: ['root', 'focus', 'blur'],
-  setup(props, _ref) {
-    let {
-      emit
-    } = _ref;
+  setup(props, context) {
     // Refs
     const root = ref();
     const control = ref();
@@ -67,7 +63,7 @@ var script = defineComponent({
       id: useIdAttribute(),
       ...useControlAttributes()
     });
-    const proxyModelValue = useVModel(props, 'modelValue', emit);
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const isChecked = computed(() => {
       if (Array.isArray(proxyModelValue.value)) {
         return !isEmptyValue(props.value) && proxyModelValue.value.includes(props.value);
@@ -108,7 +104,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-35085ade]{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:0}";
+var css_248z = "input[data-v-253d17d5]{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:0}";
 styleInject(css_248z);
 
 /* script */
@@ -169,7 +165,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-35085ade";
+const __vue_scope_id__ = "data-v-253d17d5";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

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

@@ -1,7 +1,5 @@
 export { default as OrCheckboxV3 } from './OrCheckbox.js';
 import 'vue-demi';
-import '../../index-c92e2839.js';
-import '../../index-ec92055d.js';
 import '../../utils/isEmptyValue.js';
 import './styles.js';
 import '../OrLabelV3/OrLabel.js';
@@ -10,4 +8,5 @@ import '../OrLabelV3/styles.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../hooks/useIdAttribute.js';
 import '../../hooks/useControlAttributes.js';
+import '../../hooks/useProxyModelValue.js';
 import '../../style-inject.es-4c6f2515.js';