Merge pull request #203 from TylerAPfledderer/feat/c-visibility

Create Media Query components and `useQuery` composable

Author: codebender828

packages/c-media-query/README.md

@@ -0,0 +1,11 @@
+# @chakra-ui/media-query
+
+Media query components and composables
+
+## Installation
+
+```sh
+yarn add @chakra-ui/media-query
+# or
+npm i @chakra-ui/media-query
+```

packages/c-media-query/examples/show-hide.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <c-show above="sm">
+      <div>Hey! I'll show above sm (480px)</div>
+    </c-show>
+    <c-hide below="md">
+      <div>Hello!! I'll hide below md (768px)</div>
+    </c-hide>
+    <c-hide breakpoint="(max-width: 400px)">
+      <div>Hello!! I'll be hidden at or below 400px</div>
+    </c-hide>
+    <c-show breakpoint="(max-width: 400px)">
+      <div>Hello!! I'll be shown at or below 400px</div>
+    </c-show>
+  </div>
+</template>
+<script setup lang="ts">
+import { CShow, CHide } from "../src/index"
+</script>

packages/c-media-query/index.tsx

@@ -0,0 +1 @@
+export * from './src'

packages/c-media-query/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@chakra-ui/c-media-query",
+  "description": "Chakra UI Vue | Media query components and composables",
+  "version": "0.0.0-alpha.0",
+  "main": "dist/chakra-ui-c-media-query.cjs.js",
+  "module": "dist/chakra-ui-c-media-query.esm.js",
+  "author": "Jonathan Bakebwa <[email protected]>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/chakra-ui-c-media-query.cjs.js",
+      "default": "./dist/chakra-ui-c-media-query.esm.js"
+    }
+  },
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next/tree/master/packages/c-media-query",
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@chakra-ui/vue-system": "0.1.0-alpha.10",
+    "@chakra-ui/vue-utils": "0.1.0-alpha.10",
+    "@vueuse/core": "4.9.1"
+  },
+  "devDependencies": {
+    "vue": "^3.2.37"
+  },
+  "peerDependencies": {
+    "vue": "^3.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1,33 @@
+import { h, defineComponent, PropType, unref } from "vue"
+import { getValidChildren } from "@chakra-ui/vue-utils"
+import { CVisibility } from "./c-visibility"
+import { useQuery } from "./use-query"
+import { ComponentWithProps } from "@chakra-ui/vue-system"
+import { CShowProps } from "./c-show"
+
+export interface CHideProps extends CShowProps {}
+
+/**
+ * Wrapper component to hide child elements based on breakpoint value
+ */
+export const CHide: ComponentWithProps<CHideProps> = defineComponent({
+  props: {
+    breakpoint: {
+      type: String as PropType<CHideProps["breakpoint"]>,
+    },
+    above: {
+      type: String as PropType<CHideProps["above"]>,
+    },
+    below: {
+      type: String as PropType<CHideProps["below"]>,
+    },
+  },
+  setup(props, { slots }) {
+    const query = useQuery(props)
+    return () => (
+      <CVisibility breakpoint={query.value} hide>
+        {() => getValidChildren(slots)}
+      </CVisibility>
+    )
+  },
+})

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

@@ -0,0 +1,50 @@
+import { h, defineComponent, PropType, unref } from "vue"
+import { getValidChildren } from "@chakra-ui/vue-utils"
+import { CVisibility } from "./c-visibility"
+import { useQuery } from "./use-query"
+import { ComponentWithProps } from "@chakra-ui/vue-system"
+
+export interface CShowProps {
+  /**
+   * A custom css media query that determines when the `slots` are rendered.
+   * Will render `slots` if that query resolves to `true`.
+   */
+  breakpoint?: string
+  /**
+   * A value from the `breakpoints` section in the theme. Will render `slots`
+   * from that breakpoint and below. Default breakpoint values: `sm`, `md`, `lg`, `xl`, `2xl`.
+   */
+  below?: string
+  /**
+   * A value from the `breakpoints` section in the theme. Will render `slots`
+   * from that breakpoint and above. Default breakpoint values: `sm`, `md`, `lg`, `xl`, `2xl`.
+   */
+  above?: string
+}
+
+/**
+ * Wrapper component to show child elements based on breakpoint value
+ */
+export const CShow: ComponentWithProps<CShowProps> = defineComponent({
+  props: {
+    breakpoint: {
+      type: String as PropType<CShowProps["breakpoint"]>,
+    },
+    above: {
+      type: String as PropType<CShowProps["above"]>,
+    },
+    below: {
+      type: String as PropType<CShowProps["below"]>,
+    },
+  },
+  setup(props, { slots }) {
+    const query = useQuery(props)
+    return () => {
+      return (
+        <CVisibility breakpoint={query.value}>
+          {() => getValidChildren(slots)}
+        </CVisibility>
+      )
+    }
+  },
+})

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

@@ -0,0 +1,30 @@
+import { computed, defineComponent, PropType } from "vue"
+import { useMediaQuery } from "@vueuse/core"
+import { ComponentWithProps } from "@chakra-ui/vue-system"
+
+export interface CVisbilityProps {
+  /**
+   * Test
+   */
+  breakpoint: string
+  hide?: boolean
+}
+
+export const CVisibility: ComponentWithProps<CVisbilityProps> = defineComponent(
+  {
+    props: {
+      breakpoint: {
+        type: String as PropType<CVisbilityProps["breakpoint"]>,
+        required: true,
+      },
+      hide: Boolean as PropType<CVisbilityProps["hide"]>,
+    },
+    setup(props, { slots }) {
+      const show = useMediaQuery(props.breakpoint)
+
+      const isVisible = computed(() => (props.hide ? !show.value : show.value))
+
+      return () => (isVisible.value ? slots.default!() : null)
+    },
+  }
+)

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

@@ -0,0 +1,4 @@
+export * from "./c-show"
+export * from "./c-hide"
+export * from "./c-visibility"
+export * from "./use-query"

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

@@ -0,0 +1,33 @@
+import { useTheme } from "@chakra-ui/vue-system"
+import { computed } from "vue"
+
+const getBreakpoint = (theme: Record<string, any>, value: any) => {
+  return theme?.breakpoints?.[value] ?? value
+}
+
+export interface UseQueryProps {
+  breakpoint?: string
+  below?: string
+  above?: string
+}
+
+/**
+ * Returns a media query value based on theme breakpoint or given query string.
+ */
+export function useQuery(props: UseQueryProps) {
+  const { breakpoint = "", below, above } = props
+
+  const theme = useTheme()
+  const bpBelow = getBreakpoint(theme, below)
+  const bpAbove = getBreakpoint(theme, above)
+
+  const query = computed(() => {
+    if (bpAbove) return `(min-width: ${bpAbove})`
+
+    if (bpBelow) return `(max-width: ${bpBelow})`
+
+    return breakpoint
+  })
+
+  return query
+}

packages/c-media-query/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "./index.tsx", "./index.ts"]
+}