@onereach/ui-components 5.3.1 → 5.4.0

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-d2aa1a77.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a07225f2.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-d2aa1a77.js';
+import '../../OrDateTimePickerMonthSelect-a07225f2.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-d2aa1a77.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-a07225f2.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-d2aa1a77.js';
+import '../../OrDateTimePickerMonthSelect-a07225f2.js';
 import './hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -139,9 +139,6 @@ var script = defineComponent({
     });
     const maxLength = computed(() => controlAttributes.maxlength);
     const disclosed = ref(false);
-    const {
-      isMobile
-    } = useResponsive();
     // Methods
     function focus() {
       var _a;
@@ -151,6 +148,10 @@ var script = defineComponent({
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
+    // Helpers
+    const {
+      isMobile
+    } = useResponsive();
     return {
       root,
       control,
@@ -161,14 +162,14 @@ var script = defineComponent({
       currentLength,
       maxLength,
       disclosed,
-      isMobile,
       focus,
-      blur
+      blur,
+      isMobile
     };
   }
 });
 
-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}";
+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}";
 styleInject(css_248z);
 
 /* script */
@@ -428,7 +429,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-fea72d76";
+const __vue_scope_id__ = "data-v-60523ecc";
 /* 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 useResponsive from '../../hooks/useResponsive/useResponsive.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
+import useResponsive from '../../hooks/useResponsive/useResponsive.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/props.js';
 import '../OrButtonV3/styles.js';
@@ -64,10 +64,6 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive();
     // Refs
     const root = ref();
     const limitButton = ref();
@@ -161,9 +157,12 @@ var script = defineComponent({
     function toPage(page) {
       currentPage.value = page;
     }
-    return {
+    // Helpers
+    const {
       isDesktop,
-      isMobile,
+      isMobile
+    } = useResponsive();
+    return {
       root,
       limitButton,
       limitButtonRoot,
@@ -182,7 +181,9 @@ var script = defineComponent({
       buttonGroup,
       toPreviousPage,
       toNextPage,
-      toPage
+      toPage,
+      isDesktop,
+      isMobile
     };
   }
 });

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

@@ -1,8 +1,6 @@
 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;
@@ -30,6 +28,8 @@ 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,8 +63,6 @@ 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;
@@ -92,6 +90,8 @@ 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,12 +66,9 @@ 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;
@@ -89,6 +86,11 @@ 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);
@@ -140,9 +142,8 @@ var script = defineComponent({
     });
     // #endregion
     return {
-      isDesktop,
-      isMobile,
       root,
+      containerRoot,
       bottomSheet,
       bottomSheetRoot,
       rootStyles,
@@ -150,6 +151,8 @@ var script = defineComponent({
       state,
       isFlipped,
       isHidden,
+      isDesktop,
+      isMobile,
       open,
       close,
       toggle
@@ -172,6 +175,7 @@ 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,9 +1,8 @@
 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[], {} & {}, {
@@ -15,6 +14,8 @@ 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;
@@ -117,9 +118,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>;
+    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,6 +131,8 @@ 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,9 +52,6 @@ var script = defineComponent({
   },
   expose: ['root'],
   setup(props) {
-    const {
-      isMobile
-    } = useResponsive();
     // Refs
     const root = ref();
     // Slots
@@ -113,6 +110,10 @@ 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").Ref<boolean>;
-    isMobile: import("@vue/composition-api").Ref<boolean>;
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<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").Ref<boolean>;
-    isMobile: import("@vue/composition-api").Ref<boolean>;
+    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").ComputedRef<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-d2aa1a77.js';
+import '../OrDateTimePickerMonthSelect-a07225f2.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import './OrDatePickerV3/styles.js';

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

@@ -1,5 +1,6 @@
-declare function useResponsive(): {
-    isMobile: import("@vue/composition-api").Ref<boolean>;
-    isDesktop: import("@vue/composition-api").Ref<boolean>;
+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>;
 };
 export default useResponsive;

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

@@ -1,13 +1,55 @@
 import { k as useMediaQuery } from '../../index-509d77a1.js';
-import { ref } from 'vue-demi';
+import { getCurrentInstance, ref, watch, onMounted, isVue3, computed } from 'vue-demi';
 import '../../index-ec92055d.js';
 
-function useResponsive() {
-  const isMobile = ref(useMediaQuery('(max-width: 767px)'));
-  const isDesktop = ref(useMediaQuery('(min-width: 768px)'));
+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);
+  }
   return {
-    isMobile,
-    isDesktop
+    isDesktop,
+    isMobile
   };
 }
 

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

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