sprintify-ui 0.10.63 → 0.10.65

package/src/components/index.ts

@@ -1,222 +1,222 @@
-import BaseActionButtons from './BaseActionButtons.vue';
-import BaseActionItem from './BaseActionItem.vue';
-import BaseAddressForm from './BaseAddressForm.vue';
-import BaseAlert from './BaseAlert.vue';
-import BaseApp from './BaseApp.vue';
-import BaseAppDialogs from './BaseAppDialogs.vue';
-import BaseAppSnackbars from './BaseAppSnackbars.vue';
-import BaseAssign from './BaseAssign.vue';
-import BaseAutocomplete from './BaseAutocomplete.vue';
-import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
-import BaseAvatar from './BaseAvatar.vue';
-import BaseAvatarGroup from './BaseAvatarGroup.vue';
-import BaseBadge from './BaseBadge.vue';
-import BaseBelongsTo from './BaseBelongsTo.vue';
-import BaseBelongsToFetch from './BaseBelongsToFetch.vue';
-import BaseBoolean from './BaseBoolean.vue';
-import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
-import BaseButton from './BaseButton.vue';
-import BaseButtonGroup from './BaseButtonGroup.vue';
-import BaseCard from './BaseCard.vue';
-import BaseCardRow from './BaseCardRow.vue';
-import BaseCharacterCounter from './BaseCharacterCounter.vue';
-import BaseClipboard from './BaseClipboard.vue';
-import BaseCollapse from './BaseCollapse.vue';
-import BaseColor from './BaseColor.vue';
-import BaseContainer from './BaseContainer.vue';
-import BaseCounter from './BaseCounter.vue';
-import BaseCropper from './BaseCropper.vue';
-import BaseCropperModal from './BaseCropperModal.vue';
-import BaseDataIterator from './BaseDataIterator.vue';
-import BaseDataTable from './BaseDataTable.vue';
-import BaseDatePicker from './BaseDatePicker.vue';
-import BaseDateSelect from './BaseDateSelect.vue';
-import BaseDescriptionList from './BaseDescriptionList.vue';
-import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
-import BaseDialog from './BaseDialog.vue';
-import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
-import BaseDraggable from './BaseDraggable.vue';
-import BaseDropdown from './BaseDropdown.vue';
-import BaseDropdownAutocomplete from './BaseDropdownAutocomplete.vue';
-import BaseEmptyState from '@/svg/BaseEmptyState.vue';
-import BaseField from './BaseField.vue';
-import BaseFieldI18n from './BaseFieldI18n.vue';
-import BaseFilePicker from './BaseFilePicker.vue';
-import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
-import BaseFileUploader from './BaseFileUploader.vue';
-import BaseForm from './BaseForm.vue';
-import BaseGantt from './BaseGantt.vue';
-import BaseHasMany from './BaseHasMany.vue';
-import BaseHasManyFetch from './BaseHasManyFetch.vue';
-import BaseHeader from './BaseHeader.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseIconPicker from './BaseIconPicker.vue';
-import BaseInput from './BaseInput.vue';
-import BaseInputLabel from './BaseInputLabel.vue';
-import BaseInputPercent from './BaseInputPercent.vue';
-import BaseJsonReader from './BaseJsonReader.vue';
-import BaseLazy from './BaseLazy.vue';
-import BaseLoadingCover from './BaseLoadingCover.vue';
-import BaseMediaItem from './BaseMediaItem.vue';
-import BaseMediaLibrary from './BaseMediaLibrary.vue';
-import BaseMediaPreview from './BaseMediaPreview.vue';
-import BaseMenu from './BaseMenu.vue';
-import BaseMenuItem from './BaseMenuItem.vue';
-import BaseModalCenter from './BaseModalCenter.vue';
-import BaseModalSide from './BaseModalSide.vue';
-import BaseNavbar from './BaseNavbar.vue';
-import BaseNavbarItem from './BaseNavbarItem.vue';
-import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
-import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
-import BasePagination from './BasePagination.vue';
-import BasePanel from './BasePanel.vue';
-import BasePassword from './BasePassword.vue';
-import BaseProgressCircle from './BaseProgressCircle.vue';
-import BaseRadioGroup from './BaseRadioGroup.vue';
-import BaseReadMore from './BaseReadMore.vue';
-import BaseRichText from './BaseRichText.vue';
-import BaseSelect from './BaseSelect.vue';
-import BaseShortcut from './BaseShortcut.vue';
-import BaseSideNavigation from './BaseSideNavigation.vue';
-import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
-import BaseSkeleton from './BaseSkeleton.vue';
-import BaseStatistic from './BaseStatistic.vue';
-import BaseStepper from './BaseStepper.vue';
-import BaseStepperItem from './BaseStepperItem.vue';
-import BaseSwitch from './BaseSwitch.vue';
-import BaseSystemAlert from './BaseSystemAlert.vue';
-import BaseTable from './BaseTable.vue';
-import BaseTableBody from './BaseTableBody.vue';
-import BaseTableCell from './BaseTableCell.vue';
-import BaseTableHead from './BaseTableHead.vue';
-import BaseTableHeader from './BaseTableHeader.vue';
-import BaseTableRow from './BaseTableRow.vue';
-import BaseTabs from './BaseTabs.vue';
-import BaseTabItem from './BaseTabItem.vue';
-import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
-import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
-import BaseTableColumn from './BaseTableColumn.vue';
-import BaseTextarea from './BaseTextarea.vue';
-import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
-import BaseTimeline from './BaseTimeline.vue';
-import BaseTimelineItem from './BaseTimelineItem.vue';
-import BaseTimePicker from './BaseTimePicker.vue';
-import BaseTooltip from './BaseTooltip.vue';
-import BaseUniqueCode from './BaseUniqueCode.vue';
-
-import BaseLayoutStacked from './BaseLayoutStacked.vue';
-import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
-import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
-import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-
-export {
-  BaseActionButtons,
-  BaseActionItem,
-  BaseAddressForm,
-  BaseAlert,
-  BaseApp,
-  BaseAppDialogs,
-  BaseAppSnackbars,
-  BaseAssign,
-  BaseAutocomplete,
-  BaseAutocompleteFetch,
-  BaseAvatar,
-  BaseAvatarGroup,
-  BaseBadge,
-  BaseBelongsTo,
-  BaseBelongsToFetch,
-  BaseBoolean,
-  BaseBreadcrumbs,
-  BaseButton,
-  BaseButtonGroup,
-  BaseCard,
-  BaseCardRow,
-  BaseCharacterCounter,
-  BaseClipboard,
-  BaseCollapse,
-  BaseColor,
-  BaseContainer,
-  BaseCounter,
-  BaseCropper,
-  BaseCropperModal,
-  BaseDataIterator,
-  BaseDataTable,
-  BaseDatePicker,
-  BaseDateSelect,
-  BaseDraggable,
-  BaseDescriptionList,
-  BaseDescriptionListItem,
-  BaseDialog,
-  BaseDisplayRelativeTime,
-  BaseDropdown,
-  BaseDropdownAutocomplete,
-  BaseEmptyState,
-  BaseField,
-  BaseFieldI18n,
-  BaseFilePicker,
-  BaseFilePickerCrop,
-  BaseFileUploader,
-  BaseForm,
-  BaseGantt,
-  BaseHasMany,
-  BaseHasManyFetch,
-  BaseHeader,
-  BaseIcon,
-  BaseIconPicker,
-  BaseInput,
-  BaseInputLabel,
-  BaseInputPercent,
-  BaseJsonReader,
-  BaseLazy,
-  BaseLoadingCover,
-  BaseMediaItem,
-  BaseMediaLibrary,
-  BaseMediaPreview,
-  BaseMenu,
-  BaseMenuItem,
-  BaseModalCenter,
-  BaseModalSide,
-  BaseNavbar,
-  BaseNavbarItem,
-  BaseNavbarItemContent,
-  BaseNavbarSideItem,
-  BasePagination,
-  BasePanel,
-  BasePassword,
-  BaseProgressCircle,
-  BaseRadioGroup,
-  BaseReadMore,
-  BaseRichText,
-  BaseSelect,
-  BaseShortcut,
-  BaseSideNavigation,
-  BaseSideNavigationItem,
-  BaseSkeleton,
-  BaseStatistic,
-  BaseStepper,
-  BaseStepperItem,
-  BaseSwitch,
-  BaseSystemAlert,
-  BaseTable,
-  BaseTableBody,
-  BaseTableCell,
-  BaseTableHead,
-  BaseTableHeader,
-  BaseTableRow,
-  BaseTabs,
-  BaseTabItem,
-  BaseTagAutocomplete,
-  BaseTagAutocompleteFetch,
-  BaseTableColumn,
-  BaseTextarea,
-  BaseTextareaAutoresize,
-  BaseTimeline,
-  BaseTimelineItem,
-  BaseTimePicker,
-  BaseTooltip,
-  BaseUniqueCode,
-  BaseLayoutStacked,
-  BaseLayoutStackedConfigurable,
-  BaseLayoutSidebar,
-  BaseLayoutSidebarConfigurable,
-};
+import BaseActionButtons from './BaseActionButtons.vue';
+import BaseActionItem from './BaseActionItem.vue';
+import BaseAddressForm from './BaseAddressForm.vue';
+import BaseAlert from './BaseAlert.vue';
+import BaseApp from './BaseApp.vue';
+import BaseAppDialogs from './BaseAppDialogs.vue';
+import BaseAppSnackbars from './BaseAppSnackbars.vue';
+import BaseAssign from './BaseAssign.vue';
+import BaseAutocomplete from './BaseAutocomplete.vue';
+import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+import BaseAvatar from './BaseAvatar.vue';
+import BaseAvatarGroup from './BaseAvatarGroup.vue';
+import BaseBadge from './BaseBadge.vue';
+import BaseBelongsTo from './BaseBelongsTo.vue';
+import BaseBelongsToFetch from './BaseBelongsToFetch.vue';
+import BaseBoolean from './BaseBoolean.vue';
+import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
+import BaseButton from './BaseButton.vue';
+import BaseButtonGroup from './BaseButtonGroup.vue';
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseClipboard from './BaseClipboard.vue';
+import BaseCollapse from './BaseCollapse.vue';
+import BaseColor from './BaseColor.vue';
+import BaseContainer from './BaseContainer.vue';
+import BaseCounter from './BaseCounter.vue';
+import BaseCropper from './BaseCropper.vue';
+import BaseCropperModal from './BaseCropperModal.vue';
+import BaseDataIterator from './BaseDataIterator.vue';
+import BaseDataTable from './BaseDataTable.vue';
+import BaseDatePicker from './BaseDatePicker.vue';
+import BaseDateSelect from './BaseDateSelect.vue';
+import BaseDescriptionList from './BaseDescriptionList.vue';
+import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
+import BaseDialog from './BaseDialog.vue';
+import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
+import BaseDraggable from './BaseDraggable.vue';
+import BaseDropdown from './BaseDropdown.vue';
+import BaseDropdownAutocomplete from './BaseDropdownAutocomplete.vue';
+import BaseEmptyState from '@/svg/BaseEmptyState.vue';
+import BaseField from './BaseField.vue';
+import BaseFieldI18n from './BaseFieldI18n.vue';
+import BaseFilePicker from './BaseFilePicker.vue';
+import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
+import BaseFileUploader from './BaseFileUploader.vue';
+import BaseForm from './BaseForm.vue';
+import BaseGantt from './BaseGantt.vue';
+import BaseHasMany from './BaseHasMany.vue';
+import BaseHasManyFetch from './BaseHasManyFetch.vue';
+import BaseHeader from './BaseHeader.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseIconPicker from './BaseIconPicker.vue';
+import BaseInput from './BaseInput.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
+import BaseInputPercent from './BaseInputPercent.vue';
+import BaseJsonReader from './BaseJsonReader.vue';
+import BaseLazy from './BaseLazy.vue';
+import BaseLoadingCover from './BaseLoadingCover.vue';
+import BaseMediaItem from './BaseMediaItem.vue';
+import BaseMediaLibrary from './BaseMediaLibrary.vue';
+import BaseMediaPreview from './BaseMediaPreview.vue';
+import BaseMenu from './BaseMenu.vue';
+import BaseMenuItem from './BaseMenuItem.vue';
+import BaseModalCenter from './BaseModalCenter.vue';
+import BaseModalSide from './BaseModalSide.vue';
+import BaseNavbar from './BaseNavbar.vue';
+import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
+import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
+import BasePagination from './BasePagination.vue';
+import BasePanel from './BasePanel.vue';
+import BasePassword from './BasePassword.vue';
+import BaseProgressCircle from './BaseProgressCircle.vue';
+import BaseRadioGroup from './BaseRadioGroup.vue';
+import BaseReadMore from './BaseReadMore.vue';
+import BaseRichText from './BaseRichText.vue';
+import BaseSelect from './BaseSelect.vue';
+import BaseShortcut from './BaseShortcut.vue';
+import BaseSideNavigation from './BaseSideNavigation.vue';
+import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
+import BaseSkeleton from './BaseSkeleton.vue';
+import BaseStatistic from './BaseStatistic.vue';
+import BaseStepper from './BaseStepper.vue';
+import BaseStepperItem from './BaseStepperItem.vue';
+import BaseSwitch from './BaseSwitch.vue';
+import BaseSystemAlert from './BaseSystemAlert.vue';
+import BaseTable from './BaseTable.vue';
+import BaseTableBody from './BaseTableBody.vue';
+import BaseTableCell from './BaseTableCell.vue';
+import BaseTableHead from './BaseTableHead.vue';
+import BaseTableHeader from './BaseTableHeader.vue';
+import BaseTableRow from './BaseTableRow.vue';
+import BaseTabs from './BaseTabs.vue';
+import BaseTabItem from './BaseTabItem.vue';
+import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+import BaseTableColumn from './BaseTableColumn.vue';
+import BaseTextarea from './BaseTextarea.vue';
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+import BaseTimeline from './BaseTimeline.vue';
+import BaseTimelineItem from './BaseTimelineItem.vue';
+import BaseTimePicker from './BaseTimePicker.vue';
+import BaseTooltip from './BaseTooltip.vue';
+import BaseUniqueCode from './BaseUniqueCode.vue';
+
+import BaseLayoutStacked from './BaseLayoutStacked.vue';
+import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
+import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
+import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
+
+export {
+  BaseActionButtons,
+  BaseActionItem,
+  BaseAddressForm,
+  BaseAlert,
+  BaseApp,
+  BaseAppDialogs,
+  BaseAppSnackbars,
+  BaseAssign,
+  BaseAutocomplete,
+  BaseAutocompleteFetch,
+  BaseAvatar,
+  BaseAvatarGroup,
+  BaseBadge,
+  BaseBelongsTo,
+  BaseBelongsToFetch,
+  BaseBoolean,
+  BaseBreadcrumbs,
+  BaseButton,
+  BaseButtonGroup,
+  BaseCard,
+  BaseCardRow,
+  BaseCharacterCounter,
+  BaseClipboard,
+  BaseCollapse,
+  BaseColor,
+  BaseContainer,
+  BaseCounter,
+  BaseCropper,
+  BaseCropperModal,
+  BaseDataIterator,
+  BaseDataTable,
+  BaseDatePicker,
+  BaseDateSelect,
+  BaseDraggable,
+  BaseDescriptionList,
+  BaseDescriptionListItem,
+  BaseDialog,
+  BaseDisplayRelativeTime,
+  BaseDropdown,
+  BaseDropdownAutocomplete,
+  BaseEmptyState,
+  BaseField,
+  BaseFieldI18n,
+  BaseFilePicker,
+  BaseFilePickerCrop,
+  BaseFileUploader,
+  BaseForm,
+  BaseGantt,
+  BaseHasMany,
+  BaseHasManyFetch,
+  BaseHeader,
+  BaseIcon,
+  BaseIconPicker,
+  BaseInput,
+  BaseInputLabel,
+  BaseInputPercent,
+  BaseJsonReader,
+  BaseLazy,
+  BaseLoadingCover,
+  BaseMediaItem,
+  BaseMediaLibrary,
+  BaseMediaPreview,
+  BaseMenu,
+  BaseMenuItem,
+  BaseModalCenter,
+  BaseModalSide,
+  BaseNavbar,
+  BaseNavbarItem,
+  BaseNavbarItemContent,
+  BaseNavbarSideItem,
+  BasePagination,
+  BasePanel,
+  BasePassword,
+  BaseProgressCircle,
+  BaseRadioGroup,
+  BaseReadMore,
+  BaseRichText,
+  BaseSelect,
+  BaseShortcut,
+  BaseSideNavigation,
+  BaseSideNavigationItem,
+  BaseSkeleton,
+  BaseStatistic,
+  BaseStepper,
+  BaseStepperItem,
+  BaseSwitch,
+  BaseSystemAlert,
+  BaseTable,
+  BaseTableBody,
+  BaseTableCell,
+  BaseTableHead,
+  BaseTableHeader,
+  BaseTableRow,
+  BaseTabs,
+  BaseTabItem,
+  BaseTagAutocomplete,
+  BaseTagAutocompleteFetch,
+  BaseTableColumn,
+  BaseTextarea,
+  BaseTextareaAutoresize,
+  BaseTimeline,
+  BaseTimelineItem,
+  BaseTimePicker,
+  BaseTooltip,
+  BaseUniqueCode,
+  BaseLayoutStacked,
+  BaseLayoutStackedConfigurable,
+  BaseLayoutSidebar,
+  BaseLayoutSidebarConfigurable,
+};

package/src/composables/breakpoints.ts

@@ -1,94 +1,94 @@
-import type { Ref } from 'vue';
-import { increaseWithUnit } from '@vueuse/shared';
-import { useMediaQuery } from './mediaQuery';
-import defaultBreakpoints from '../../config/breakpoints.json';
-export * from './breakpoints';
-
-export type Breakpoints<K extends string = string> = Record<K, number | string>;
-
-export function useBreakpoints<K extends string>(breakpoints?: Breakpoints<K>) {
-  const breakpointsInternal = computed(() => {
-    if (breakpoints) return breakpoints;
-    return defaultBreakpoints as Breakpoints<K>;
-  });
-
-  function getValue(k: K, delta?: number) {
-    let v = breakpointsInternal.value[k];
-
-    if (delta != null) v = increaseWithUnit(v, delta);
-
-    if (typeof v === 'number') v = `${v}px`;
-
-    return v;
-  }
-
-  function match(query: string): boolean {
-    if (!window) return false;
-    return window.matchMedia(query).matches;
-  }
-
-  const greaterOrEqual = (k: K) => {
-    return useMediaQuery(`(min-width: ${getValue(k)})`);
-  };
-
-  const shortcutMethods = Object.keys(breakpointsInternal.value).reduce(
-    (shortcuts, k) => {
-      Object.defineProperty(shortcuts, k, {
-        get: () => greaterOrEqual(k as K),
-        enumerable: true,
-        configurable: true,
-      });
-      return shortcuts;
-    },
-    {} as Record<K, Ref<boolean>>
-  );
-
-  return {
-    greater(k: K) {
-      return useMediaQuery(`(min-width: ${getValue(k, 0.1)})`);
-    },
-    greaterOrEqual,
-    smaller(k: K) {
-      return useMediaQuery(`(max-width: ${getValue(k, -0.1)})`);
-    },
-    smallerOrEqual(k: K) {
-      return useMediaQuery(`(max-width: ${getValue(k)})`);
-    },
-    between(a: K, b: K) {
-      return useMediaQuery(
-        `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`
-      );
-    },
-    isGreater(k: K) {
-      return match(`(min-width: ${getValue(k, 0.1)})`);
-    },
-    isGreaterOrEqual(k: K) {
-      return match(`(min-width: ${getValue(k)})`);
-    },
-    isSmaller(k: K) {
-      return match(`(max-width: ${getValue(k, -0.1)})`);
-    },
-    isSmallerOrEqual(k: K) {
-      return match(`(max-width: ${getValue(k)})`);
-    },
-    isInBetween(a: K, b: K) {
-      return match(
-        `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`
-      );
-    },
-    ...shortcutMethods,
-  };
-}
-
-export type UseBreakpointsReturn<K extends string = string> = {
-  greater: (k: K) => Ref<boolean>;
-  greaterOrEqual: (k: K) => Ref<boolean>;
-  smaller(k: K): Ref<boolean>;
-  smallerOrEqual: (k: K) => Ref<boolean>;
-  between(a: K, b: K): Ref<boolean>;
-  isGreater(k: K): boolean;
-  isGreaterOrEqual(k: K): boolean;
-  isSmaller(k: K): boolean;
-  isSmallerOrEqual(k: K): boolean;
-  isInBetween(a: K, b: K): boolean;
-} & Record<K, Ref<boolean>>;
+import type { Ref } from 'vue';
+import { increaseWithUnit } from '@vueuse/shared';
+import { useMediaQuery } from './mediaQuery';
+import defaultBreakpoints from '../../config/breakpoints.json';
+export * from './breakpoints';
+
+export type Breakpoints<K extends string = string> = Record<K, number | string>;
+
+export function useBreakpoints<K extends string>(breakpoints?: Breakpoints<K>) {
+  const breakpointsInternal = computed(() => {
+    if (breakpoints) return breakpoints;
+    return defaultBreakpoints as Breakpoints<K>;
+  });
+
+  function getValue(k: K, delta?: number) {
+    let v = breakpointsInternal.value[k];
+
+    if (delta != null) v = increaseWithUnit(v, delta);
+
+    if (typeof v === 'number') v = `${v}px`;
+
+    return v;
+  }
+
+  function match(query: string): boolean {
+    if (!window) return false;
+    return window.matchMedia(query).matches;
+  }
+
+  const greaterOrEqual = (k: K) => {
+    return useMediaQuery(`(min-width: ${getValue(k)})`);
+  };
+
+  const shortcutMethods = Object.keys(breakpointsInternal.value).reduce(
+    (shortcuts, k) => {
+      Object.defineProperty(shortcuts, k, {
+        get: () => greaterOrEqual(k as K),
+        enumerable: true,
+        configurable: true,
+      });
+      return shortcuts;
+    },
+    {} as Record<K, Ref<boolean>>
+  );
+
+  return {
+    greater(k: K) {
+      return useMediaQuery(`(min-width: ${getValue(k, 0.1)})`);
+    },
+    greaterOrEqual,
+    smaller(k: K) {
+      return useMediaQuery(`(max-width: ${getValue(k, -0.1)})`);
+    },
+    smallerOrEqual(k: K) {
+      return useMediaQuery(`(max-width: ${getValue(k)})`);
+    },
+    between(a: K, b: K) {
+      return useMediaQuery(
+        `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`
+      );
+    },
+    isGreater(k: K) {
+      return match(`(min-width: ${getValue(k, 0.1)})`);
+    },
+    isGreaterOrEqual(k: K) {
+      return match(`(min-width: ${getValue(k)})`);
+    },
+    isSmaller(k: K) {
+      return match(`(max-width: ${getValue(k, -0.1)})`);
+    },
+    isSmallerOrEqual(k: K) {
+      return match(`(max-width: ${getValue(k)})`);
+    },
+    isInBetween(a: K, b: K) {
+      return match(
+        `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`
+      );
+    },
+    ...shortcutMethods,
+  };
+}
+
+export type UseBreakpointsReturn<K extends string = string> = {
+  greater: (k: K) => Ref<boolean>;
+  greaterOrEqual: (k: K) => Ref<boolean>;
+  smaller(k: K): Ref<boolean>;
+  smallerOrEqual: (k: K) => Ref<boolean>;
+  between(a: K, b: K): Ref<boolean>;
+  isGreater(k: K): boolean;
+  isGreaterOrEqual(k: K): boolean;
+  isSmaller(k: K): boolean;
+  isSmallerOrEqual(k: K): boolean;
+  isInBetween(a: K, b: K): boolean;
+} & Record<K, Ref<boolean>>;