@onereach/ui-components 5.3.1-beta.3187.0 → 5.3.1

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a07225f2.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-d2aa1a77.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

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

@@ -2,7 +2,7 @@ export { default as OrDatePickerV3 } from './OrDatePicker.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-a07225f2.js';
+import '../../OrDateTimePickerMonthSelect-d2aa1a77.js';
 import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a07225f2.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-d2aa1a77.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-e57095bf.js';
 import { DateTimePickerTimeFormat } from './props.js';

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

@@ -3,7 +3,7 @@ export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-a07225f2.js';
+import '../../OrDateTimePickerMonthSelect-d2aa1a77.js';
 import './hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrInputV3/OrInput.js

@@ -139,6 +139,9 @@ var script = defineComponent({
     });
     const maxLength = computed(() => controlAttributes.maxlength);
     const disclosed = ref(false);
+    const {
+      isMobile
+    } = useResponsive();
     // Methods
     function focus() {
       var _a;
@@ -148,10 +151,6 @@ var script = defineComponent({
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
-    // Helpers
-    const {
-      isMobile
-    } = useResponsive();
     return {
       root,
       control,
@@ -162,14 +161,14 @@ var script = defineComponent({
       currentLength,
       maxLength,
       disclosed,
+      isMobile,
       focus,
-      blur,
-      isMobile
+      blur
     };
   }
 });
 
-var css_248z = "input[data-v-60523ecc]{min-width:0;background:0 0;outline:0}input[type=number][data-v-60523ecc]::-webkit-inner-spin-button{display:none}input[type=search][data-v-60523ecc]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-fea72d76]{min-width:0;background:0 0;outline:0}input[type=number][data-v-fea72d76]::-webkit-inner-spin-button{display:none}input[type=search][data-v-fea72d76]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -429,7 +428,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-60523ecc";
+const __vue_scope_id__ = "data-v-fea72d76";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrInputV3/OrInput.vue.d.ts

@@ -22,9 +22,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
     disclosed: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     focus: () => void;
     blur: () => void;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: (StringConstructor | NumberConstructor)[];
@@ -169,9 +169,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
     disclosed: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     focus: () => void;
     blur: () => void;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number;
     type: "number" | "text" | "password" | "search";

package/dist/bundled/v2/components/OrPaginationV3/OrPagination.js

@@ -4,8 +4,8 @@ import __vue_component__$1 from '../OrButtonV3/OrButton.js';
 import __vue_component__$2 from '../OrIconV3/OrIcon.js';
 import __vue_component__$3 from '../OrMenuV3/OrMenu.js';
 import __vue_component__$4 from '../OrMenuItemV3/OrMenuItem.js';
-import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import useResponsive from '../../hooks/useResponsive/useResponsive.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
@@ -64,6 +64,10 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive();
     // Refs
     const root = ref();
     const limitButton = ref();
@@ -157,12 +161,9 @@ var script = defineComponent({
     function toPage(page) {
       currentPage.value = page;
     }
-    // Helpers
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive();
     return {
+      isDesktop,
+      isMobile,
       root,
       limitButton,
       limitButtonRoot,
@@ -181,9 +182,7 @@ var script = defineComponent({
       buttonGroup,
       toPreviousPage,
       toNextPage,
-      toPage,
-      isDesktop,
-      isMobile
+      toPage
     };
   }
 });

package/dist/bundled/v2/components/OrPaginationV3/OrPagination.vue.d.ts

@@ -1,6 +1,8 @@
 import { PropType } from 'vue-demi';
 import { PaginationModel } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     limitButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -28,8 +30,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toPreviousPage: () => void;
     toNextPage: () => void;
     toPage: (page: number) => void;
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<PaginationModel>;
@@ -63,6 +63,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     limitButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -90,8 +92,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toPreviousPage: () => void;
     toNextPage: () => void;
     toPage: (page: number) => void;
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     length: number;
     modelValue: PaginationModel;

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.js

@@ -66,9 +66,12 @@ var script = defineComponent({
   emits: ['update:state', 'open', 'close'],
   expose: ['root', 'state', 'isFlipped', 'isHidden', 'open', 'close', 'toggle'],
   setup(props, context) {
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive();
     // Refs
     const root = ref();
-    const containerRoot = ref();
     const bottomSheet = ref();
     const bottomSheetRoot = computed(() => {
       var _a;
@@ -86,11 +89,6 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isFlipped = ref(false);
     const isHidden = ref(false);
-    // Helpers
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive(containerRoot);
     // Effects
     watchPostEffect(() => {
       const rootElement = unref(root);
@@ -142,8 +140,9 @@ var script = defineComponent({
     });
     // #endregion
     return {
+      isDesktop,
+      isMobile,
       root,
-      containerRoot,
       bottomSheet,
       bottomSheetRoot,
       rootStyles,
@@ -151,8 +150,6 @@ var script = defineComponent({
       state,
       isFlipped,
       isHidden,
-      isDesktop,
-      isMobile,
       open,
       close,
       toggle
@@ -175,7 +172,6 @@ var __vue_render__ = function () {
       value: _vm.state === 'open',
       expression: "state === 'open'"
     }],
-    ref: "containerRoot",
     class: ['contents']
   }, [_vm.isDesktop && _vm.variant === 'auto' || _vm.variant === 'popover' ? [_c('div', _vm._b({
     ref: "root",

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.vue.d.ts

@@ -1,8 +1,9 @@
 import { PropType } from 'vue-demi';
 import { PopoverOffset, PopoverPlacement, PopoverVariant } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    containerRoot: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     bottomSheet: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -14,8 +15,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     isFlipped: import("@vue/composition-api").Ref<boolean>;
     isHidden: import("@vue/composition-api").Ref<boolean>;
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
     open: () => void;
     close: () => void;
     toggle: () => void;
@@ -118,8 +117,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    containerRoot: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     bottomSheet: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -131,8 +131,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     isFlipped: import("@vue/composition-api").Ref<boolean>;
     isHidden: import("@vue/composition-api").Ref<boolean>;
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
     open: () => void;
     close: () => void;
     toggle: () => void;

package/dist/bundled/v2/components/OrProgressV3/OrProgress.js

@@ -52,6 +52,9 @@ var script = defineComponent({
   },
   expose: ['root'],
   setup(props) {
+    const {
+      isMobile
+    } = useResponsive();
     // Refs
     const root = ref();
     // Slots
@@ -110,10 +113,6 @@ var script = defineComponent({
       return width.value ? width.value - 2 : '100%';
     });
     const strokeDashoffset = computed(() => props.loading ? undefined : (1 - localProgress.value) * strokeDasharray.value);
-    // Helpers
-    const {
-      isMobile
-    } = useResponsive();
     return {
       root,
       rootStyles,

package/dist/bundled/v2/components/OrSelectV3/OrSelect.vue.d.ts

@@ -43,8 +43,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     clearSearchControl: () => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     options: {
         type: PropType<SelectOption[]>;
@@ -254,8 +254,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     clearSearchControl: () => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number | object | string[] | object[] | number[];
     label: string;

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

@@ -232,7 +232,7 @@ import './OrCombinedInputV3/styles.js';
 import '../index-15e8c1f3.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-a07225f2.js';
+import '../OrDateTimePickerMonthSelect-d2aa1a77.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import './OrDatePickerV3/styles.js';

package/dist/bundled/v2/hooks/useResponsive/useResponsive.d.ts

@@ -1,6 +1,5 @@
-import { Ref } from 'vue-demi';
-declare function useResponsive(element?: Ref<Element | undefined>): {
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
+declare function useResponsive(): {
+    isMobile: import("@vue/composition-api").Ref<boolean>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
 };
 export default useResponsive;

package/dist/bundled/v2/hooks/useResponsive/useResponsive.js

@@ -1,55 +1,13 @@
 import { k as useMediaQuery } from '../../index-509d77a1.js';
-import { getCurrentInstance, ref, watch, onMounted, isVue3, computed } from 'vue-demi';
+import { ref } from 'vue-demi';
 import '../../index-ec92055d.js';
 
-var tailwindScreens = {
-  'sm': '640px',
-  'md': '768px',
-  'lg': '1024px',
-  'xl': '1280px',
-  '2xl': '1536px',
-};
-
-function useResponsive(element) {
-  const currentInstance = getCurrentInstance();
-  const currentRootElement = ref();
-  if (element) {
-    watch(element, value => {
-      currentRootElement.value = value;
-    });
-  } else {
-    onMounted(() => {
-      if (currentInstance) {
-        const element = currentInstance.vnode[isVue3 ? 'el' : 'elm'];
-        if (element instanceof Element) {
-          currentRootElement.value = element;
-        }
-      }
-    });
-  }
-  // State
-  const isDesktop = computed(() => {
-    return isForcedDesktop(currentRootElement.value) || desktopQuery.value;
-  });
-  const isMobile = computed(() => {
-    return !isDesktop.value;
-  });
-  const desktopQuery = useMediaQuery(`(min-width: ${tailwindScreens.md})`);
-  // Helpers
-  function isForcedDesktop(element) {
-    var _a, _b;
-    if (!element) {
-      return false;
-    }
-    const forcedScreens = (_a = element.getAttribute('force-screen')) === null || _a === void 0 ? void 0 : _a.split(/\s+/);
-    if (forcedScreens === null || forcedScreens === void 0 ? void 0 : forcedScreens.some(forcedScreen => ['md', 'lg', 'xl', '2xl'].includes(forcedScreen))) {
-      return true;
-    }
-    return isForcedDesktop((_b = element.parentElement) !== null && _b !== void 0 ? _b : undefined);
-  }
+function useResponsive() {
+  const isMobile = ref(useMediaQuery('(max-width: 767px)'));
+  const isDesktop = ref(useMediaQuery('(min-width: 768px)'));
   return {
-    isDesktop,
-    isMobile
+    isMobile,
+    isDesktop
   };
 }
 

package/dist/bundled/v2/hooks/useTheme.js

@@ -1,5 +1,10 @@
 var theme = {
 	screens: {
+		sm: "640px",
+		md: "768px",
+		lg: "1024px",
+		xl: "1280px",
+		"2xl": "1536px"
 	},
 	spacing: {
 		none: "0px",
@@ -2989,7 +2994,12 @@ var theme = {
 		min: "min-content",
 		max: "max-content",
 		fit: "fit-content",
-		prose: "65ch"
+		prose: "65ch",
+		"screen-sm": "640px",
+		"screen-md": "768px",
+		"screen-lg": "1024px",
+		"screen-xl": "1280px",
+		"screen-2xl": "1536px"
 	},
 	minHeight: {
 		"0": "0px",