@onereach/ui-components 5.1.1-beta.3159.0 → 5.1.1-beta.3163.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-f013aba1.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-f01c1d73.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-f013aba1.js';
+import '../../OrDateTimePickerMonthSelect-f01c1d73.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-f013aba1.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-f01c1d73.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-f013aba1.js';
+import '../../OrDateTimePickerMonthSelect-f01c1d73.js';
 import './hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -142,9 +142,6 @@ var script = defineComponent({
     });
     const maxLength = computed(() => controlAttributes.maxlength);
     const disclosed = ref(false);
-    const {
-      isMobile
-    } = useResponsive();
     // Methods
     function focus() {
       var _a;
@@ -154,6 +151,10 @@ var script = defineComponent({
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
+    // Helpers
+    const {
+      isMobile
+    } = useResponsive();
     return {
       root,
       control,
@@ -164,14 +165,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 */
@@ -431,7 +432,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';
@@ -67,10 +67,6 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive();
     // Refs
     const root = ref();
     const limitButton = ref();
@@ -164,9 +160,12 @@ var script = defineComponent({
     function toPage(page) {
       currentPage.value = page;
     }
-    return {
+    // Helpers
+    const {
       isDesktop,
-      isMobile,
+      isMobile
+    } = useResponsive();
+    return {
       root,
       limitButton,
       limitButtonRoot,
@@ -185,7 +184,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

@@ -69,10 +69,6 @@ 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 bottomSheet = ref();
@@ -92,6 +88,11 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isFlipped = ref(false);
     const isHidden = ref(false);
+    // Helpers
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive(root);
     // Effects
     watchPostEffect(() => {
       const rootElement = unref(root);
@@ -143,8 +144,6 @@ var script = defineComponent({
     });
     // #endregion
     return {
-      isDesktop,
-      isMobile,
       root,
       bottomSheet,
       bottomSheetRoot,
@@ -153,6 +152,8 @@ var script = defineComponent({
       state,
       isFlipped,
       isHidden,
+      isDesktop,
+      isMobile,
       open,
       close,
       toggle

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

@@ -1,8 +1,6 @@
 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>;
     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;
@@ -15,6 +13,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,8 +117,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>;
     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;
@@ -131,6 +129,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

@@ -53,9 +53,6 @@ var script = defineComponent({
   },
   expose: ['root'],
   setup(props) {
-    const {
-      isMobile
-    } = useResponsive();
     // Refs
     const root = ref();
     // Slots
@@ -114,6 +111,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.js

@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, ref, computed, toRefs, onMounted, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
 import { isEmptyValue } from '../../utils/isEmptyValue.js';
 import { Select, SelectControl, SelectSearchControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
 import __vue_component__$1 from '../OrCheckboxV3/OrCheckbox.js';
@@ -147,10 +147,6 @@ var script = defineComponent({
       type: Boolean,
       default: false
     },
-    enableClear: {
-      type: Boolean,
-      default: false
-    },
     searchFunction: {
       type: Function,
       default: async (searchText, options) => {
@@ -194,11 +190,6 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Props
-    const {
-      enableClear,
-      modelValue
-    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
@@ -212,13 +203,10 @@ var script = defineComponent({
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const isEmptyModelValue = computed(() => {
       return Array.isArray(proxyModelValue.value) ? proxyModelValue.value.length === 0 : isEmptyValue(proxyModelValue.value);
     });
-    const showClear = computed(() => {
-      return enableClear.value && !isEmptyModelValue.value;
-    });
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -326,7 +314,6 @@ var script = defineComponent({
       proxyModelValue,
       readonly,
       isEmptyModelValue,
-      showClear,
       selection,
       searchText,
       internalSearchOptions,
@@ -464,7 +451,7 @@ var __vue_render__ = function () {
     class: ['grow']
   })], _vm._v(" "), _c('div', {
     class: ['layout-inline-row', 'gap-sm']
-  }, [_vm.showClear ? [_c('OrIconButton', {
+  }, [_vm.popoverState === 'closed' && !_vm.isEmptyModelValue ? [_c('OrIconButton', {
     attrs: {
       "icon": 'close',
       "color": 'inherit',

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

@@ -29,7 +29,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
-    showClear: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
@@ -44,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[]>;
@@ -103,10 +102,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    enableClear: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -176,10 +171,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    enableClear: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     searchFunction: {
         type: PropType<SelectSearchFunction>;
         default: SelectSearchFunction;
@@ -207,7 +198,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
-    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
@@ -241,7 +231,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
-    showClear: import("@vue/composition-api").ComputedRef<boolean>;
     selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
@@ -256,8 +245,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;
@@ -273,7 +262,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
-    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
@@ -294,7 +282,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     disabled: boolean;
     disableDefaultStyles: boolean;
     enableSearch: boolean;
-    enableClear: boolean;
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;

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

@@ -235,7 +235,7 @@ import './OrCombinedInputV3/styles.js';
 import '../index-15e8c1f3.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-f013aba1.js';
+import '../OrDateTimePickerMonthSelect-f01c1d73.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

@@ -1927,6 +1927,20 @@ var require$$2 = {
 	SpacePatterns: SpacePatterns
 };
 
+module.exports = {
+  'sm': '640px',
+  'md': '768px',
+  'lg': '1024px',
+  'xl': '1280px',
+  '2xl': '1536px'
+};
+
+var tailwindScreens = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+var require$$3 = /*@__PURE__*/getDefaultExportFromNamespaceIfNotNamed(tailwindScreens);
+
 const plugin = plugin$1;
 
 const {
@@ -1950,17 +1964,13 @@ const {
   typeStyles: typographyTokens,
 } = require$$2;
 
+const screens = require$$3;
+
 var tailwind_config_preset = {
   darkMode: ['class', '[data-theme="dark"]'],
 
   theme: {
-    screens: {
-      'sm': '640px',
-      'md': '768px',
-      'lg': '1024px',
-      'xl': '1280px',
-      '2xl': '1536px',
-    },
+    screens: {},
 
     spacing: {
       ...parseSpacingTokens(spacingTokens),
@@ -2117,6 +2127,16 @@ var tailwind_config_preset = {
   plugins: [
     // Core
     plugin(({ addVariant, addUtilities }) => {
+      const breakpoints = Object.keys(screens);
+
+      breakpoints.forEach((breakpoint) => {
+        addVariant(breakpoint, [
+          `@media (min-width: ${screens[breakpoint]})`,
+          `[force-screen~="${breakpoint}"] &`,
+          `&[force-screen~="${breakpoint}"]`,
+        ]);
+      });
+
       addVariant('enabled', '&:not([disabled])');
       addVariant('disabled', '&[disabled]');
 
@@ -2245,7 +2265,21 @@ var tailwind_config_preset = {
             lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
 
             // Desktop
-            [`@media (min-width: ${theme('screens.md')})`]: {
+            [`@media (min-width: ${screens.md})`]: {
+              fontFamily: theme(`fontFamily.${value}`),
+              fontWeight: theme(`fontWeight.${value}`),
+              fontSize: fontSizeDesktop,
+              lineHeight: optionsDesktop?.lineHeight,
+            },
+
+            '[force-screen~="md"] &': {
+              fontFamily: theme(`fontFamily.${value}`),
+              fontWeight: theme(`fontWeight.${value}`),
+              fontSize: fontSizeDesktop,
+              lineHeight: optionsDesktop?.lineHeight,
+            },
+
+            '&[force-screen~="md"]': {
               fontFamily: theme(`fontFamily.${value}`),
               fontWeight: theme(`fontWeight.${value}`),
               fontSize: fontSizeDesktop,
@@ -2323,7 +2357,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
                 },
@@ -2365,7 +2399,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
                 },
@@ -2407,7 +2441,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
                 },
@@ -2449,7 +2483,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              [`@media (min-width: ${theme('screens.md')})`]: {
+              '@media (any-hover: hover)': {
                 '&:hover, &[force-state="hover"]': {
                   color: theme(`textColor.${token}-hover` + suffix),
                 },