Skip to content

Commit

Permalink
feat(useBreakpoints): shortcuts (#905)
Browse files Browse the repository at this point in the history
Co-authored-by: Luca Ban <mesqueeb@gmail.com>
  • Loading branch information
antfu and mesqueeb committed Nov 6, 2021
1 parent 529acc4 commit 0bcf52a
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 4 deletions.
2 changes: 1 addition & 1 deletion packages/core/useBreakpoints/demo.vue
Expand Up @@ -8,7 +8,7 @@ const md = breakpoints.between('sm', 'md')
const lg = breakpoints.between('md', 'lg')
const xl = breakpoints.between('lg', 'xl')
const xxl = breakpoints.between('xl', '2xl')
const xxxl = breakpoints.greater('2xl')
const xxxl = breakpoints['2xl']
</script>

<template>
Expand Down
20 changes: 17 additions & 3 deletions packages/core/useBreakpoints/index.ts
@@ -1,3 +1,4 @@
import { Ref } from 'vue-demi'
import { increaseWithUnit } from '@vueuse/shared'
import { useMediaQuery } from '../useMediaQuery'
import { ConfigurableWindow, defaultWindow } from '../_configurable'
Expand Down Expand Up @@ -32,10 +33,22 @@ export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, op
return window.matchMedia(query).matches
}

const greater = (k: K) => {
return useMediaQuery(`(min-width: ${getValue(k)})`, options)
}

const shortcutMethods = Object.keys(breakpoints)
.reduce((shortcuts, k) => {
Object.defineProperty(shortcuts, k, {
get: () => greater(k as K),
enumerable: true,
configurable: true,
})
return shortcuts
}, {} as Record<K, Ref<boolean>>)

return {
greater(k: K) {
return useMediaQuery(`(min-width: ${getValue(k)})`, options)
},
greater,
smaller(k: K) {
return useMediaQuery(`(max-width: ${getValue(k, -0.1)})`, options)
},
Expand All @@ -51,6 +64,7 @@ export function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, op
isInBetween(a: K, b: K) {
return match(`(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`)
},
...shortcutMethods,
}
}

Expand Down

0 comments on commit 0bcf52a

Please sign in to comment.