Merge pull request #277 from chakra-ui/feat/use-breakpoint-value

feat: add use-breakpoint hook

Author: codebender828

@types/components.d.ts

@@ -1,12 +1,12 @@
 /**
- * Typescript support for @chakra-ui/vue-next2.1.0-beta.2 auto-imported
+ * Typescript support for @chakra-ui/vue-next2.1.0-beta.3 auto-imported
  * components using `unplugin-vue-components,`
  *
  * @see: https://github.com/antfu/unplugin-vue-components/#typescript
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-25T17:54:59.918Z
+ * This file was generated on 2023-02-26T13:58:05.623Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"

components.d.ts

@@ -1,12 +1,12 @@
 /**
- * Typescript support for @chakra-ui/vue-next2.1.0-beta.2 auto-imported
+ * Typescript support for @chakra-ui/vue-next2.1.0-beta.3 auto-imported
  * components using `unplugin-vue-components,`
  *
  * @see: https://github.com/antfu/unplugin-vue-components/#typescript
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-25T17:54:59.918Z
+ * This file was generated on 2023-02-26T13:58:05.623Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"

packages/c-media-query/package.json

@@ -32,7 +32,8 @@
   "dependencies": {
     "@chakra-ui/vue-composables": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
-    "@chakra-ui/vue-utils": "workspace:*"
+    "@chakra-ui/vue-utils": "workspace:*",
+    "@chakra-ui/utils": "2.0.14"
   },
   "devDependencies": {
     "vue": "3.2.47"

packages/c-media-query/src/index.tsx

@@ -2,8 +2,12 @@ export { CHide } from "./c-hide"
 export { CShow } from "./c-show"
 export { CVisibility } from "./c-visibility"
 export { useQuery } from "./use-query"
+export { useBreakpointValue } from "./use-breakpoint-value"
+export { useBreakpoint } from "./use-breakpoint"
+export { getClosestValue } from "./media.utils"
 
 export type { CHideProps } from "./c-hide"
 export type { CShowProps } from "./c-show"
 export type { CVisbilityProps } from "./c-visibility"
 export type { UseQueryProps } from "./use-query"
+export type { UseBreakpointOptions } from "./use-breakpoint"

packages/c-media-query/src/media.utils.ts

@@ -0,0 +1,37 @@
+import { breakpoints as defaultBreakpoints } from "@chakra-ui/utils"
+
+/**
+ * Returns the closest value to the given breakpoint from
+ * the given set of breakpoints
+ */
+export function getClosestValue<T = any>(
+  values: Record<string, T>,
+  breakpoint: string,
+  breakpoints = defaultBreakpoints
+) {
+  let index = Object.keys(values).indexOf(breakpoint)
+
+  if (index !== -1) {
+    return values[breakpoint]
+  }
+
+  let stopIndex = breakpoints.indexOf(breakpoint)
+
+  while (stopIndex >= 0) {
+    const key = breakpoints[stopIndex]
+
+    if (values.hasOwnProperty(key)) {
+      index = stopIndex
+      break
+    }
+
+    stopIndex -= 1
+  }
+
+  if (index !== -1) {
+    const key = breakpoints[index]
+    return values[key]
+  }
+
+  return undefined
+}

packages/c-media-query/src/use-breakpoint-value.ts

@@ -0,0 +1,27 @@
+import { arrayToObjectNotation, isObject } from "@chakra-ui/utils"
+import { useTheme } from "@chakra-ui/vue-system"
+import { getClosestValue } from "./media.utils"
+import { useBreakpoint, UseBreakpointOptions } from "./use-breakpoint"
+
+export function useBreakpointValue<T = any>(
+  values: Partial<Record<string, T>> | T[],
+  arg?: UseBreakpointOptions | string
+): T | undefined {
+  const opts = isObject(arg) ? arg : { fallback: arg ?? "base" }
+  const breakpoint = useBreakpoint(opts)
+  const theme = useTheme()
+
+  if (!breakpoint) return
+
+  const breakpoints: string[] = Array.from(theme.__breakpoints?.keys || [])
+
+  const obj = Array.isArray(values)
+    ? Object.fromEntries<any>(
+        Object.entries(arrayToObjectNotation(values, breakpoints)).map(
+          ([key, value]) => [key, value]
+        )
+      )
+    : values
+
+  return getClosestValue(obj, breakpoint, breakpoints)
+}

packages/c-media-query/src/use-breakpoint.ts

@@ -0,0 +1,39 @@
+import { unref } from "vue"
+import { isObject } from "@chakra-ui/utils"
+import { useTheme } from "@chakra-ui/vue-system"
+import { useMediaQuery } from "@vueuse/core"
+
+export type UseBreakpointOptions = {
+  fallback?: string
+}
+
+/**
+ * Composable used to get the current responsive media breakpoint
+ */
+export function useBreakpoint(arg?: string | UseBreakpointOptions) {
+  const opts = isObject(arg) ? arg : { fallback: arg ?? "base" }
+  const theme = useTheme()
+
+  // Explicitly creating the type due to the typing of
+  // `theme.__breakpoints` not being deep enough to recognize it's properties
+  type BreakpointsObjectType = {
+    query: string
+    breakpoint: string
+  }
+
+  const breakpoints: BreakpointsObjectType[] = theme.__breakpoints!.details.map(
+    ({ minMaxQuery, breakpoint }: any) => ({
+      breakpoint,
+      query: minMaxQuery.replace("@media screen and ", ""),
+    })
+  )
+  const values = breakpoints.map((bp) => {
+    const bpQuery = useMediaQuery(bp.query)
+
+    return bpQuery
+  })
+
+  const index = unref(values).findIndex((value) => value.value == true)
+
+  return breakpoints[index]?.breakpoint ?? opts.fallback
+}

packages/c-media-query/tests/media.utils.test.ts

@@ -0,0 +1,47 @@
+/// <reference types="jest" />
+
+import { getClosestValue } from "../src/media.utils"
+
+describe("`getClosestValue` function", () => {
+  test("should get the closest responsive value", () => {
+    expect(getClosestValue({ base: "40px", md: "500px" }, "xl")).toBe("500px")
+    expect(getClosestValue({ base: "40px", md: "500px" }, "sm")).toBe("40px")
+    expect(getClosestValue({ base: "40px" }, "lg")).toBe("40px")
+    expect(getClosestValue({ sm: "40px", md: "500px" }, "sm")).toBe("40px")
+    expect(getClosestValue({ sm: "40px", md: "500px" }, "base")).toBe(undefined)
+    expect(getClosestValue({}, "")).toBe(undefined)
+  })
+
+  test("should get the closest responsive value even if values contains nullable value", () => {
+    expect(getClosestValue({ base: "40px", md: undefined }, "xl")).toBe(
+      undefined
+    )
+    expect(getClosestValue({ base: "40px", md: null }, "xl")).toBe(null)
+    expect(getClosestValue({ sm: "40px", md: undefined }, "xl")).toBe(undefined)
+    expect(getClosestValue({ sm: "40px", md: null }, "xl")).toBe(null)
+  })
+
+  test("should get the closest responsive value with custom breakpoints", () => {
+    const customBreakPoints = ["base", "sm", "md", "custom", "xl"]
+    expect(
+      getClosestValue(
+        { base: "40px", md: "500px", custom: "600px" },
+        "xl",
+        customBreakPoints
+      )
+    ).toBe("600px")
+    expect(
+      getClosestValue({ base: "40px", md: "500px" }, "sm", customBreakPoints)
+    ).toBe("40px")
+    expect(getClosestValue({ base: "40px" }, "custom", customBreakPoints)).toBe(
+      "40px"
+    )
+    expect(
+      getClosestValue({ sm: "40px", md: "500px" }, "sm", customBreakPoints)
+    ).toBe("40px")
+    expect(
+      getClosestValue({ sm: "40px", md: "500px" }, "base", customBreakPoints)
+    ).toBe(undefined)
+    expect(getClosestValue({}, "")).toBe(undefined)
+  })
+})

packages/c-motion/examples/with-collapse.vue

@@ -31,6 +31,7 @@
 </template>
 
 <script lang="ts" setup>
+import { chakra } from "../../vue"
 import { useToggle } from "@vueuse/core"
 import { CCollapse } from "../src"
 

packages/c-motion/src/c-collapse.tsx

@@ -10,7 +10,6 @@ import {
   watch,
   withDirectives,
   onMounted,
-  watchEffect,
 } from "vue"
 import { TransitionEasings, TransitionVariants } from "./motion-utils"
 import { warn } from "@chakra-ui/utils"