Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 509b5c6

Browse files
codebender828codebender828
authored
Merge pull request #74 from chakra-ui/develop
chore: release candidate for `@chakra-ui/[email protected]` 🎉
2 parents db88d6f + c2d1e3e commit 509b5c6

File tree

165 files changed

+5747
-1082
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

165 files changed

+5747
-1082
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎.changeset/rare-ads-impress.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
'@chakra-ui/c-accordion': minor
3+
'@chakra-ui/c-alert': minor
4+
'@chakra-ui/c-button': minor
5+
'@chakra-ui/c-code': minor
6+
'@chakra-ui/c-flex': minor
7+
'@chakra-ui/c-focus-lock': minor
8+
'@chakra-ui/c-icon': minor
9+
'@chakra-ui/c-modal': minor
10+
'@chakra-ui/c-motion': minor
11+
'@chakra-ui/c-popper': minor
12+
'@chakra-ui/c-portal': minor
13+
'@chakra-ui/c-reset': minor
14+
'@chakra-ui/c-scroll-lock': minor
15+
'@chakra-ui/c-spinner': minor
16+
'@chakra-ui/c-visually-hidden': minor
17+
'@chakra-ui/vue-next': minor
18+
'@chakra-ui/vue-layout': minor
19+
'@chakra-ui/vue-theme': minor
20+
'@chakra-ui/vue-theme-tools': minor
21+
'@chakra-ui/vue-utils': minor
22+
'@chakra-ui/vue-a11y': minor
23+
'@chakra-ui/vue-composables': minor
24+
'@chakra-ui/vue-auto-import': minor
25+
'@chakra-ui/vue-docs': minor
26+
---
27+
28+
- Adds Modal component
29+
- Adds FocusLock composable, directive and component
30+
- Adds ScrollLock composable, directive and component
31+
- Improves TSX support

‎.eslintignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ dist
44
# At the time of writing this, I could not find any helpful
55
# documentation for adding ESLint for Vue 3 projects running on Vite.
66
# For this reason, we ignore the playground directory.
7-
playground
7+
playground
8+
snapshots.js

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ lerna-debug.log*
1616
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
1717

1818
# Runtime data
19-
pids
19+
pids
2020
*.pid
2121
*.seed
2222
*.pid.lock

‎CONTRIBUTING.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,16 @@ git clone https://github.com/<your_github_username>/chakra-ui-vue-next.git
1818
cd chakra-ui
1919
```
2020

21-
3. Setup all the dependencies and packages by running `yarn bootstrap`. This
21+
3. Build components
22+
```bash
23+
yarn build
24+
```
25+
26+
4. Setup all the dependencies and packages by running `yarn bootstrap`. This
2227
command will install dependencies and bootstrap the repo using `lerna`
28+
```bash
29+
yarn bootstrap
30+
```
2331

2432
> If you run into any issues during this step, kindly reach out to the Chakra UI
2533
> Vue team here:[https://discord.gg/cMpMfvxa](https://discord.gg/cMpMfvxa)

‎_templates/generator/component/component.ts.ejs.t

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
---
22
to: packages/<%=h.changeCase.paramCase(name)%>/src/<%=h.changeCase.paramCase(name)%>.ts
33
---
4+
/**
5+
* Hey! Welcome to @chakra-ui/vue-next <%= h.changeCase.pascalCase(name) %>
6+
*
7+
* <%=h.changeCase.sentence(description)%>
8+
*
9+
* @see Docs https://next.vue.chakra-ui.com/<%=h.changeCase.paramCase(name)%>
10+
* @see Source https://github.com/chakra-ui/chakra-ui-vue-next/blob/master/packages/<%=h.changeCase.paramCase(name)%>/src/<%=h.changeCase.paramCase(name)%>/<%=h.changeCase.paramCase(name)%>.ts
11+
* @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
12+
*/
413

514
import { h, defineComponent, PropType } from 'vue'
615
import { chakra, DOMElements } from '@chakra-ui/vue-system'

‎babel.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ const testConfig = {
3535
[
3636
'@babel/preset-env',
3737
{
38-
targets: { node: true },
38+
targets: { node: 'current' },
3939
},
4040
],
4141
],
42-
plugins: ['@vue/babel-plugin-jsx'],
42+
plugins: ['@vue/babel-plugin-jsx', '@babel/plugin-transform-runtime'],
4343
},
4444
},
4545
}

‎cypress.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"componentFolder": "packages/",
3+
"pluginsFile": "./tests/plugins.js",
4+
"testFiles": "**/*.cy.*",
5+
"supportFile": "./tests/support.tsx",
6+
"ignoreTestFiles": "**/*.snap",
7+
"video": false,
8+
"fixturesFolder": false,
9+
"reporter": "spec"
10+
}

‎docs/.vitepress/config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ function getSetupSidebar() {
6565
{
6666
text: 'Composables',
6767
children: [
68-
{ text: 'usePopper', link: '/composables/use-popper' }
68+
{ text: 'usePopper', link: '/composables/use-popper' },
69+
{ text: 'useFocusLock', link: '/composables/use-focus-lock' }
6970
]
7071
}
7172
]

‎docs/composables/use-focus-lock.md

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# useFocusLock
2+
3+
The **`useFocusLock`** hook is an internal hook for Chakra UI Vue used to encapsulate `focus-trap` into an extendable composable hook.
4+
5+
This allows us to compose the behaviour required for focus trapping accessible dialogs and modals into a single hook and can be extended as a component
6+
7+
## Import
8+
9+
```bash
10+
import { useFocusLock } from "@chakra-ui/c-focus-lock"
11+
```
12+
13+
This composable accepts options to modify the positioning fo the popover as well as the modifiers of the popper. It returns an object of properties that can be used to bind the template refs to the popper instance
14+
15+
## Usage
16+
17+
```vue
18+
<template>
19+
<chakra.div
20+
:ref="lock"
21+
p="4"
22+
border="4px dashed"
23+
rounded="lg"
24+
border-color="gray.400"
25+
d="inline-block"
26+
>
27+
<chakra.p mb="2">Inside focus trap</chakra.p>
28+
<c-button @click="options.enabled = true" color-scheme="teal">
29+
Enable focus lock
30+
</c-button>
31+
<c-button :ref="initialFocus" color-scheme="yellow" mx="2"
32+
>Button 2</c-button
33+
>
34+
<c-button color-scheme="blue">Button 3</c-button>
35+
</chakra.div>
36+
</template>
37+
38+
<script lang="ts">
39+
import { useFocusLock, FocusLockOptions } from '@chakra-ui/c-focus-lock'
40+
import { defineComponent, reactive } from 'vue'
41+
42+
export default defineComponent({
43+
setup() {
44+
const options: FocusLockOptions = reactive({
45+
enabled: true,
46+
onActivate: () => {
47+
console.log('focus lock ENABLED')
48+
},
49+
onDeactivate: () => {
50+
console.log('focus lock DEACTIVATED')
51+
},
52+
})
53+
54+
const { lock, initialFocus } = useFocusLock(options)
55+
56+
return {
57+
lock,
58+
options,
59+
initialFocus,
60+
}
61+
},
62+
})
63+
</script>
64+
65+
66+
```
67+
68+
## Props
69+
These are the options for the `usePopper` composable. These properties are similar to the options listed in the [@popperjs/core](https://popper.js.org/docs/v2/) documentation.
70+
```ts
71+
export interface FocusLockOptions {
72+
/**
73+
* Determines whether the focus lock is active or inactive
74+
* @default true
75+
*/
76+
enabled: boolean
77+
/**
78+
* Invoked handler when focus-lock is activated
79+
*/
80+
onActivate?: () => void
81+
/**
82+
* Invoked handler when focus-lock is deactivated
83+
*/
84+
onDeactivate?: () => void
85+
/**
86+
* Invoked handler when focus-lock is activated.
87+
*
88+
* By default, an error will be thrown if the focus lock
89+
* contains no elements in its tab order. With this
90+
* option you can specify a fallback element to
91+
* programmatically receive focus if no other
92+
* tabbable elements are found.
93+
*/
94+
fallbackFocus?: FocusTarget
95+
/**
96+
* Determines whether focus lock is activated when user clicks outside.
97+
* @default true
98+
*/
99+
clickOutsideDeactivates?: boolean | ((e: MouseEvent) => boolean)
100+
persistentFocus?: boolean | ((e: MouseEvent) => boolean)
101+
/**
102+
* Determines whether to return focus to the previously focused element
103+
* before the focus-trap was activated, after the focus trap has been deactivated.
104+
*/
105+
returnFocus?: boolean
106+
preventScroll?: boolean
107+
escapeDeactivates?: boolean
108+
delayInitialFocus?: boolean
109+
}
110+
```

‎docs/guides/component-guide.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ we advice to follow to deliver on the quality expectations.
9494

9595
### General
9696

97-
- Ensure you check the `@chakra-ui/vue-hooks`, and `@chakra-ui/vue-utils` package to be
97+
- Ensure you check the `@chakra-ui/vue-composables`, and `@chakra-ui/vue-utils` package to be
9898
sure we don't already have the hook you're looking to create.
9999
- Leverage existing code, hook, or utils as much as possible.
100100
- Separate component logic from UI by writing hooks, and then writing the

‎index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!--
2+
This file is required for Vite to run at the root of the project.
3+
It's very difficult to avoid this.
4+
One option is to move the playground/index.html up here instead.
5+
-->
6+
<!DOCTYPE html>
7+
<html lang="en">
8+
<head>
9+
<meta charset="utf-8" />
10+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
11+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
12+
<title>Cypress's Test Playground</title>
13+
</head>
14+
<body></body>
15+
</html>
16+

‎package.json

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,13 @@
1919
"scaffold": "hygen generator",
2020
"release": "yarn changeset publish",
2121
"build": "lerna run build --no-private --stream",
22-
"dev": "NODE_ENV=development vite serve playground --config ./vite.config.ts",
22+
"dev": "NODE_ENV=development vite serve playground --config ./vite.config.ts --open",
2323
"playground:build": "yarn install && yarn build && yarn bootstrap && NODE_ENV=production vite build playground --config ./vite.config.ts",
24-
"test": "cross-env NODE_ENV=test jest --config jest.config.js",
24+
"cy:open": "cypress open-ct",
25+
"cy:run": "cypress run-ct --quiet",
26+
"test:component": "yarn cy:run",
27+
"test": "jest && yarn cy:run",
28+
"test:unit": "cross-env NODE_ENV=test jest --config jest.config.js",
2529
"lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
2630
"docs:dev:legacy": "vitepress dev docs",
2731
"docs:build:legacy": "vitepress build docs",
@@ -50,6 +54,7 @@
5054
"@testing-library/jest-dom": "^5.11.9",
5155
"@testing-library/user-event": "^12.6.2",
5256
"@testing-library/vue": "^6.3.4",
57+
"@types/body-scroll-lock": "^2.6.1",
5358
"@types/jest": "^26.0.20",
5459
"@types/jest-axe": "^3.5.1",
5560
"@types/lodash.camelcase": "^4.3.6",
@@ -65,9 +70,13 @@
6570
"@vue/eslint-config-typescript": "^5.1.0",
6671
"@vuedx/typecheck": "^0.4.1",
6772
"@vuedx/typescript-plugin-vue": "^0.4.1",
68-
"@vueuse/motion": "^1.4.4",
73+
"@vueuse/core": "4.9.1",
74+
"@vueuse/integrations": "^4.8.1",
75+
"@vueuse/motion": "^1.5.4",
76+
"aria-hidden": "^1.1.2",
6977
"axe-core": "^4.1.2",
7078
"babel-jest": "^26.6.3",
79+
"body-scroll-lock": "^3.1.5",
7180
"change-case": "^4.1.1",
7281
"chokidar": "^3.5.1",
7382
"concurrently": "^5.3.0",
@@ -76,6 +85,7 @@
7685
"css-get-unit": "^1.0.1",
7786
"csstype": "^3.0.5",
7887
"dequal": "^2.0.2",
88+
"dom-focus-lock": "^1.0.4",
7989
"esbuild-jest": "^0.4.0",
8090
"eslint": "^7.0.0",
8191
"eslint-config-prettier": "^6.12.0",
@@ -87,6 +97,7 @@
8797
"eslint-plugin-standard": "^4.0.1",
8898
"eslint-plugin-vue": "^7.0.0",
8999
"feather-icons-paths": "^1.0.8",
100+
"focus-trap": "^6.3.0",
90101
"fs-extra": "^9.0.1",
91102
"husky": "^4.3.8",
92103
"hygen": "^6.0.4",
@@ -107,14 +118,25 @@
107118
"ts-jest": "^26.5.0",
108119
"ts-node": "^9.0.0",
109120
"typescript": "^4.1.3",
110-
"vite": "2.1.5",
121+
"vite": "2.2.4",
111122
"vite-plugin-components": "^0.8.3",
112123
"vite-plugin-pages": "^0.9.2",
113124
"vitepress": "^0.12.0",
114-
"vue": ">=3.0.5",
125+
"vue": "^3.0.11",
115126
"vue-jest": "^5.0.0-alpha.7",
116127
"vue-prism-editor": "^2.0.0-alpha.2",
117128
"vue-router": "^4.0.6",
118129
"vue3-perfect-scrollbar": "^1.5.5"
130+
},
131+
"devDependencies": {
132+
"@babel/plugin-transform-runtime": "^7.13.15",
133+
"@cypress/snapshot": "^2.1.7",
134+
"@cypress/vite-dev-server": "^1.2.6",
135+
"@cypress/vue": "^3",
136+
"@vue/test-utils": "^2.0.0-rc.6",
137+
"cypress": "^7.2.0",
138+
"cypress-commands": "^1.1.0",
139+
"cypress-plugin-tab": "^1.0.5",
140+
"local-cypress": "^1.2.1"
119141
}
120142
}

‎packages/c-accordion/tests/c-accordion.cy.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import CAccordion from '../src'
2+
import { h } from 'vue'
3+
4+
it('should render properly', () => {
5+
cy.mount(<CAccordion></CAccordion>)
6+
})

‎packages/c-accordion/tests/c-accordion.test.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎packages/c-accordion/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"extends": "../../tsconfig.json",
33
"include": ["src"]
4-
}
4+
}

‎packages/c-alert/examples/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export * as BaseAlert from './base-alert.vue'
2+
export * as WithAccent from './with-accent.vue'
3+
export * as WithIcon from './with-icon.vue'
4+
export * as WithStatus from './with-status.vue'
5+
export * as WithTitle from './with-title.vue'

0 commit comments

Comments
 (0)