Skip to content

Commit 6f990a1

Browse files
codebender828codebender828
authored
Merge pull request chakra-ui#126 from chakra-ui/refactor/styled-vue
Refactor/styled vue
2 parents 8d46480 + 4c2898a commit 6f990a1

24 files changed

+1913
-47
lines changed

‎.changeset/twelve-poems-scream.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@chakra-ui/c-modal": minor
3+
"@chakra-ui/c-portal": minor
4+
"@chakra-ui/vue-next": minor
5+
"@chakra-ui/vue-styled": minor
6+
"@chakra-ui/vue-utils": minor
7+
"@chakra-ui/vue-a11y": minor
8+
"@chakra-ui/vue-auto-import": minor
9+
---
10+
11+
Create @chakra-ui/vue-styled package"

‎components.d.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/**
2-
* Typescript support for @@chakra-ui/vue-next1.0.0-alpha.10 auto-imported
2+
* Typescript support for @@chakra-ui/vue-next1.0.0-alpha.13 auto-imported
33
* components using `unplugin-vue-components,`
44
*
55
* @see: https://github.com/antfu/unplugin-vue-components/#typescript
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2022-01-31T09:57:50.931Z
9+
* This file was generated on 2022-02-15T20:12:51.041Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -37,13 +37,15 @@ type JsxComponentCustomProps = {
3737
innerHTML?: JsxNode
3838
}
3939

40+
declare var chakra: typeof import("@chakra-ui/vue-next")["chakra"]
41+
4042
declare module "@vue/runtime-core" {
4143
import { chakra } from "@chakra-ui/vue-next"
4244
export { chakra }
4345

4446
/* Global component types for Volar auto-complete */
4547
export interface GlobalComponents {
46-
// chakra: typeof import("@chakra-ui/vue-next")["chakra"]
48+
chakra: typeof import("@chakra-ui/vue-next")["chakra"]
4749

4850
CAlert: typeof import("@chakra-ui/vue-next")["CAlert"]
4951
CAlertDescription: typeof import("@chakra-ui/vue-next")["CAlertDescription"]

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"@cypress/vue": "^3.0.3",
6666
"@docusaurus/utils": "^2.0.0-beta.3",
6767
"@emotion/css": "^11.1.3",
68+
"@emotion/jest": "^11.7.1",
6869
"@emotion/server": "^11.0.0",
6970
"@manypkg/cli": "^0.17.0",
7071
"@mdx-js/rollup": "^2.0.0-rc.2",

‎packages/c-modal/src/c-modal.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -322,8 +322,8 @@ export const CModalContent: ComponentWithProps<
322322
})
323323

324324
// Scroll lock
325-
watchEffect((onInvalidate: VoidFunction) => {
326-
if (!blockScrollOnMount.value) return
325+
watchEffect((onInvalidate) => {
326+
if (!blockScrollOnMount!.value) return
327327
if (modelValue.value !== true) return
328328

329329
let overflow = document.documentElement.style.overflow

‎packages/c-modal/src/use-modal.ts

+2-36
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import {
22
computed,
33
getCurrentInstance,
4-
onBeforeMount,
5-
onBeforeUnmount,
64
ref,
75
Ref,
86
ToRefs,
9-
toRefs,
107
unref,
118
VNodeProps,
129
watch,
@@ -24,7 +21,7 @@ import {
2421
getSelector,
2522
TemplateRef,
2623
} from "@chakra-ui/vue-utils"
27-
import { hideOthers, Undo, useInertOthers } from "@chakra-ui/vue-a11y"
24+
import { useInertOthers } from "@chakra-ui/vue-a11y"
2825
import { focus, FocusableElement, isFunction } from "@chakra-ui/utils"
2926

3027
export interface UseModalOptions {
@@ -99,8 +96,7 @@ export function useModal(options: UseModalOptions) {
9996
initialFocusRef,
10097
finalFocusRef,
10198
useInert,
102-
blockScrollOnMount,
103-
} = toRefs(options)
99+
} = options
104100

105101
const instance = getCurrentInstance()
106102

@@ -301,33 +297,3 @@ export type UseModalReturn = Omit<
301297
ToRefs<ReturnType<typeof useModal>>,
302298
"dialogRef" | "overlayRef" | "closeModal"
303299
>
304-
305-
/**
306-
* Modal hook to polyfill `aria-modal`.
307-
*
308-
* It applies `aria-hidden` to elements behind the modal
309-
* to indicate that they're `inert`.
310-
*
311-
* @param ref ref of the node to be excluded from aria-hidden
312-
* @param shouldHide whether `aria-hidden` should be applied
313-
*/
314-
export function useAriaHidden(
315-
node: Ref<HTMLElement | undefined | null>,
316-
shouldHide: Ref<boolean>
317-
) {
318-
let undo: Undo | null = null
319-
320-
watchEffect(
321-
() => {
322-
// await nextTick()
323-
if (shouldHide.value && node.value) {
324-
undo = hideOthers(node.value)
325-
} else {
326-
undo?.()
327-
}
328-
},
329-
{
330-
flush: "post",
331-
}
332-
)
333-
}

‎packages/c-portal/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { default as CPortal } from "./portal"
2+
export * from "./portal"

‎packages/styled/README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
The purpose of this package is to provide a Vue.js compatible API for handling the Styled System Cache.
2+
3+
Flow:
4+
```ts
5+
// 1. Create cache
6+
// 2.
7+
8+
```

‎packages/styled/examples/component.vue

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<template>
2+
<div>
3+
<div>Hello world</div>
4+
<TextComponent class="babab"> I am a sample </TextComponent>
5+
<Heading1>Heading 1</Heading1>
6+
<H1 color="pink" flex="1" font-size="20px">H1</H1>
7+
<Thing>
8+
<div>
9+
hello
10+
<Header1>This will be green. <span>I will be red</span></Header1> world
11+
</div>
12+
</Thing>
13+
<Blue>Blue sentence</Blue>
14+
<HHEDING font-size="35px">Random sentence</HHEDING>
15+
<HEader12>Header 12</HEader12>
16+
<Input placeholder="hello world" />
17+
<DynamicPropThemedH1 :theme="{ blue: 'blue' }">
18+
Dynamic Prop Themed H1
19+
</DynamicPropThemedH1>
20+
<ExpressionH2 :scale="2" class="legacy__class">
21+
With Dynamic Functional expression
22+
</ExpressionH2>
23+
<Aside> Set me aside </Aside>
24+
</div>
25+
</template>
26+
27+
<script lang="tsx" setup>
28+
import { defineComponent, h } from "vue"
29+
import styled from "../src"
30+
31+
const TextComponent = styled.h1`
32+
color: red;
33+
font-size: 34px;
34+
@media (min-width: 420px) {
35+
color: blue;
36+
}
37+
`
38+
39+
const fontSize = "20px"
40+
const Heading1 = styled.h1({ fontSize })
41+
42+
const H1 = styled.h1(
43+
(props) => ({
44+
color: props.color,
45+
}),
46+
(props) => ({ flex: props.flex }),
47+
{ display: "flex" }
48+
)
49+
50+
const Header1 = styled.h1`
51+
font-size: ${fontSize};
52+
`
53+
54+
const HEader12 = styled(Header1)`
55+
color: purple;
56+
`
57+
58+
const Thing = styled.div`
59+
display: flex;
60+
color: green;
61+
& div {
62+
& span {
63+
color: red;
64+
}
65+
}
66+
`
67+
const Blue = styled("h2")`
68+
font-size: ${() => fontSize};
69+
`
70+
71+
const margin = (t, r, b, l) => {
72+
return (props) => ({
73+
marginTop: t,
74+
marginRight: r,
75+
marginBottom: b,
76+
marginLeft: l,
77+
})
78+
}
79+
80+
const HHEDING = styled.h1`
81+
background-color: hotpink;
82+
${(props) => props.prop && { fontSize: "3rem" }};
83+
${margin(0, "auto", 0, "auto")};
84+
color: green;
85+
`
86+
87+
const Input = styled("input")({
88+
"::placeholder": {
89+
backgroundColor: "green",
90+
},
91+
})
92+
93+
const DynamicPropThemedH1 = styled("h1")`
94+
text-decoration: ${"underline"};
95+
border-right: solid blue 54px;
96+
background: ${"white"};
97+
color: ${"black"};
98+
display: ${"block"};
99+
border-radius: ${"3px"};
100+
padding: ${"25px"};
101+
width: ${"500px"};
102+
z-index: ${100};
103+
font-size: ${"18px"};
104+
text-align: ${"center"};
105+
border-left: ${(p) => p.theme.blue};
106+
`
107+
108+
const fontSizeNo = 20
109+
const ExpressionH1 = styled("h1")`
110+
font-size: ${fontSizeNo + "px"};
111+
`
112+
113+
var Aside = styled.aside`
114+
padding: 3px;
115+
font-weight: bold;
116+
`
117+
const ExpressionH2 = styled(ExpressionH1)`
118+
font-size: ${({ scale }) => fontSizeNo * scale + "px"};
119+
`
120+
</script>

‎packages/styled/package.json

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "@chakra-ui/vue-styled",
3+
"version": "0.0.0-alpha.0",
4+
"main": "dist/chakra-ui-vue-styled.cjs.js",
5+
"module": "dist/chakra-ui-vue-styled.esm.js",
6+
"files": [
7+
"dist"
8+
],
9+
"exports": {
10+
".": {
11+
"require": "./dist/chakra-ui-vue-styled.cjs.js",
12+
"default": "./dist/chakra-ui-vue-styled.esm.js"
13+
}
14+
},
15+
"description": "Chakra UI Vue | Styled module",
16+
"repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
17+
"author": "Jonathan Bakebwa [email protected]",
18+
"license": "MIT",
19+
"scripts": {
20+
"clean": "rimraf dist"
21+
},
22+
"dependencies": {
23+
"@chakra-ui/vue-utils": "0.1.0-alpha.10",
24+
"@emotion/cache": "^11.7.1",
25+
"@emotion/css": "^11.7.1",
26+
"@emotion/serialize": "^1.0.2",
27+
"@emotion/utils": "^1.0.0",
28+
"@emotion/weak-memoize": "^0.2.5",
29+
"clsx": "^1.1.1",
30+
"lodash.camelcase": "^4.3.0"
31+
},
32+
"peerDependencies": {
33+
"vue": "^3.2.31"
34+
}
35+
}

‎packages/styled/src/cache.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import createCache from "@emotion/cache"
2+
import { EmotionCache } from "@emotion/utils"
3+
import { createContext, canUseDOM } from "@chakra-ui/vue-utils"
4+
5+
import {
6+
DefineComponent,
7+
h,
8+
Fragment,
9+
Component,
10+
VNode,
11+
SetupContext
12+
} from "vue"
13+
14+
const [EmotionCacheProvider, useEmotionCache] = createContext<EmotionCache>({
15+
strict: false,
16+
name: "EmotionCacheContext",
17+
})
18+
19+
export const defaultCache = createCache({
20+
key: 'chakra',
21+
})
22+
23+
export let __unusafe_useEmotionCache = useEmotionCache
24+
25+
let withEmotionCache = function withEmotionCache(
26+
fn: (cache: EmotionCache) => DefineComponent | Component | ((props?: unknown, ctx?: SetupContext) => VNode)
27+
) {
28+
return (p: unknown) => {
29+
const cache = useEmotionCache(defaultCache)
30+
return fn(cache)
31+
}
32+
}
33+
34+
if (canUseDOM()) {
35+
withEmotionCache = function withEmotionCache(
36+
fn: (cache: EmotionCache) => DefineComponent | Component | ((props?: unknown, ctx?: SetupContext) => VNode)
37+
) {
38+
return () => {
39+
const cache = useEmotionCache(defaultCache)
40+
if (!cache) {
41+
const cache = createCache({
42+
key: 'chakra',
43+
})
44+
EmotionCacheProvider(cache)
45+
return fn(cache)
46+
} else {
47+
return fn(cache)
48+
}
49+
}
50+
}
51+
}
52+
53+
export { withEmotionCache, EmotionCacheProvider }

‎packages/styled/src/index.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { createStyled } from "./styled"
2+
import { tags } from "./tags"
3+
4+
export * from "./cache"
5+
6+
// bind it to avoid mutating the original function
7+
const styled = createStyled.bind()
8+
9+
tags.forEach((tagName) => {
10+
// @ts-ignore
11+
styled[tagName] = styled(tagName)
12+
})
13+
14+
export default styled

0 commit comments

Comments
 (0)