feat(useBreakpoints): add more breakpoint presets

packages/core/useBreakpoints/breakpoints.ts

@@ -0,0 +1,64 @@
+/**
+ * Breakpoints from Tailwind V2
+ *
+ * @see {@link https://tailwindcss.com/docs/breakpoints}
+ */
+export const breakpointsTailwind = {
+  'sm': 640,
+  'md': 768,
+  'lg': 1024,
+  'xl': 1280,
+  '2xl': 1536,
+}
+
+/**
+ * Breakpoints from Bootstrap V5
+ *
+ * @see {@link https://getbootstrap.com/docs/5.0/layout/breakpoints}
+ */
+export const breakpointsBootstrapV5 = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1400,
+}
+
+/**
+ * Breakpoints from Vuetify V2
+ *
+ * @see {@link https://vuetifyjs.com/en/features/breakpoints}
+ */
+export const breakpointsVuetify = {
+  xs: 600,
+  sm: 960,
+  md: 1264,
+  lg: 1904,
+}
+
+/**
+ * Breakpoints from Ant Design
+ *
+ * @see {@link https://ant.design/components/layout/#breakpoint-width}
+ */
+export const breakpointsAntDesign = {
+  xs: 480,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600,
+}
+
+/**
+ * Sematic Breakpoints
+ */
+export const breakpointsSematic = {
+  mobileS: 320,
+  mobileM: 375,
+  mobileL: 425,
+  tablet: 768,
+  laptop: 1024,
+  laptopL: 1440,
+  desktop4K: 2560,
+}

packages/core/useBreakpoints/index.ts

@@ -1,22 +1,17 @@
 import { increaseWithUnit } from '@vueuse/shared'
 import { useMediaQuery } from '../useMediaQuery'
 import { ConfigurableWindow, defaultWindow } from '../_configurable'
+export * from './breakpoints'
 
-export const breakpointsTailwind = {
-  'sm': 640,
-  'md': 768,
-  'lg': 1024,
-  'xl': 1280,
-  '2xl': 1536,
-}
+export type Breakpoints<K extends string = string> = Record<K, number | string>
 
 /**
  * Reactively viewport breakpoints
  *
  * @see   {@link https://vueuse.org/useBreakpoints}
  * @param options
  */
-export function useBreakpoints<K extends string>(breakpoints: Record<K, number | string>, options: ConfigurableWindow = {}) {
+export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, options: ConfigurableWindow = {}) {
   function getValue(k: K, delta?: number) {
     let v = breakpoints[k]