8000 feat(useBreakpoints): add `active` getter, add breakpoints for Vuetif… · vueuse/vueuse@3ae45f0 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 3ae45f0

Browse files
altruslDoctor-wuantfu
authored
feat(useBreakpoints): add active getter, add breakpoints for Vuetify v3 (#3687)
Co-authored-by: Doctorwu <44631608+Doctor-wu@users.noreply.github.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
1 parent e262fe2 commit 3ae45f0

File tree

4 files changed

+60
-15
lines changed

4 files changed

+60
-15
lines changed

‎packages/core/useBreakpoints/breakpoints.ts

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,37 @@ export const breakpointsBootstrapV5 = {
2828
/**
2929
* Breakpoints from Vuetify V2
3030
*
31-
* @see https://vuetifyjs.com/en/features/breakpoints
31+
* @see https://v2.vuetifyjs.com/en/features/breakpoints/
3232
*/
33-
export const breakpointsVuetify = {
34-
xs: 600,
35-
sm: 960,
36-
md: 1264,
37-
lg: 1904,
33+
export const breakpointsVuetifyV2 = {
34+
xs: 0,
35+
sm: 600,
36+
md: 960,
37+
lg: 1264,
38+
xl: 1904,
39+
}
40+
41+
/**
42+
* Breakpoints from Vuetify V3
43+
*
44+
* @see https://vuetifyjs.com/en/styles/float/#overview
45+
*/
46+
export const breakpointsVuetifyV3 = {
47+
xs: 0,
48+
sm: 600,
49+
md: 960,
50+
lg: 1280,
51+
xl: 1920,
52+
xxl: 2560,
3853
}
3954

55+
/**
56+
* Alias to `breakpointsVuetifyV2`
57+
*
58+
* @deprecated explictly use `breakpointsVuetifyV2` or `breakpointsVuetifyV3` instead
59+
*/
60+
export const breakpointsVuetify = breakpointsVuetifyV2
61+
4062
/**
4163
* Breakpoints from Ant Design
4264
*
@@ -57,10 +79,11 @@ export const breakpointsAntDesign = {
5779
* @see https://quasar.dev/style/breakpoints
5880
*/
5981
export const breakpointsQuasar = {
60-
xs: 600,
61-
sm: 1024,
62-
md: 1440,
63-
lg: 1920,
82+
xs: 0,
83+
sm: 600,
84+
md: 1024,
85+
lg: 1440,
86+
xl: 1920,
6487
}
6588

6689
/**
@@ -97,7 +120,7 @@ export const breakpointsMasterCss = {
97120
/**
98121
* Breakpoints from PrimeFlex
99122
*
100-
* @see https://www.primefaces.org/primeflex/setup
123+
* @see https://primeflex.org/installation
101124
*/
102125
export const breakpointsPrimeFlex = {
103126
sm: 576,

‎packages/core/useBreakpoints/demo.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const reactiveStuff = ref<keyof typeof breakpointsTailwind>('sm')
1010
const isGreaterThanBreakpoint = breakpoints.greaterOrEqual(() => reactiveStuff.value)
1111
1212
const current = breakpoints.current()
13+
const active = breakpoints.active()
1314
const xs = breakpoints.smaller('sm')
1415
const xse = breakpoints.smallerOrEqual('sm')
1516
const sm = breakpoints.between('sm', 'md')
@@ -22,6 +23,7 @@ const xxl = breakpoints['2xl']
2223
<template>
2324
<div class="font-mono">
2425
<div> Current breakpoints: {{ current }} </div>
26+
<div> Active breakpoint: {{ active }} </div>
2527
<div> xs(&lt;{{ smWidth }}px): <BooleanDisplay :value="xs" /></div>
2628
<div> xs(&lt;={{ smWidth }}px): <BooleanDisplay :value="xse" /></div>
2729
<div> sm: <BooleanDisplay :value="sm" /></div>

‎packages/core/useBreakpoints/index.md

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,27 @@ const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
1919
const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg
2020
```
2121

22-
```js
22+
```vue
23+
<script setup lang="ts">
2324
import { useBreakpoints } from '@vueuse/core'
2425
2526
const breakpoints = useBreakpoints({
27+
mobile: 0, // optional
2628
tablet: 640,
2729
laptop: 1024,
2830
desktop: 1280,
2931
})
3032
33+
// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
34+
const activeBreakpoint = breakpoints.active()
35+
36+
// true or false
3137
const laptop = breakpoints.between('laptop', 'desktop')
38+
</script>
39+
40+
<template>
41+
<div :class="activeBreakpoint">
42+
...
43+
</div>
44+
</template>
3245
```

‎packages/core/useBreakpoints/index.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,11 @@ export function useBreakpoints<K extends string>(
7171
return shortcuts
7272
}, {} as Record<K, Ref<boolean>>)
7373

74+
function current() {
75+
const points = Object.keys(breakpoints).map(i => [i, greaterOrEqual(i as K)] as const)
76+
return computed(() => points.filter(([, v]) => v.value).map(([k]) => k))
77+
}
78+
7479
return Object.assign(shortcutMethods, {
7580
greaterOrEqual,
7681
smallerOrEqual,
@@ -98,9 +103,10 @@ export function useBreakpoints<K extends string>(
98103
isInBetween(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) {
99104
return match(`(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`)
100105
},
101-
current() {
102-
const points = Object.keys(breakpoints).map(i => [i, greaterOrEqual(i as K)] as const)
103-
return computed(() => points.filter(([, v]) => v.value).map(([k]) => k))
106+
current,
107+
active() {
108+
const bps = current()
109+
return computed(() => bps.value.length === 0 ? '' : bps.value.at(-1))
104110
},
105111
})
106112
}
@@ -117,4 +123,5 @@ export type UseBreakpointsReturn<K extends string = string> = {
117123
isSmallerOrEqual: (k: MaybeRefOrGetter<K>) => boolean
118124
isInBetween: (a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) => boolean
119125
current: () => ComputedRef<string[]>
126+
active: ComputedRef<string>
120127
} & Record<K, ComputedRef<boolean>>

0 commit comments

Comments
 (0)
0