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

Commit adc61a8

Browse files
codebender828codebender828
committed
feat(alert): add alert components and style providers
1 parent 0b9eb23 commit adc61a8

File tree

9 files changed

+130
-19
lines changed

9 files changed

+130
-19
lines changed

‎packages/c-alert/examples/base-alert.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</template>
44

55
<script lang="ts">
6-
import CAlert from '@chakra-ui/c-alert/src'
6+
import { CAlert } from '@chakra-ui/c-alert/src'
77
import { defineComponent } from 'vue'
88
99
export default defineComponent({

‎packages/c-alert/examples/with-accent.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<c-alert status="success" mb="3">
3+
<c-alert-title> Info alert </c-alert-title>
4+
<c-alert-description> Something just happened </c-alert-description>
5+
</c-alert>
6+
<c-alert variant="subtle" status="success" mb="3">
7+
<c-alert-title> Info alert </c-alert-title>
8+
<c-alert-description> Something just happened </c-alert-description>
9+
</c-alert>
10+
<c-alert variant="left-accent" status="success" mb="3">
11+
<c-alert-title> Info alert </c-alert-title>
12+
<c-alert-description> Something just happened </c-alert-description>
13+
</c-alert>
14+
<c-alert variant="top-accent" status="success" mb="3">
15+
<c-alert-title> Info alert </c-alert-title>
16+
<c-alert-description> Something just happened </c-alert-description>
17+
</c-alert>
18+
</template>
19+
20+
<script lang="ts">
21+
import { CAlert, CAlertTitle, CAlertDescription } from '@chakra-ui/c-alert/src'
22+
import { defineComponent } from 'vue'
23+
24+
export default defineComponent({
25+
name: 'WithAccentExample',
26+
components: { CAlert, CAlertTitle, CAlertDescription },
27+
})
28+
</script>

‎packages/c-alert/examples/with-status.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
</template>
77

88
<script lang="ts">
9-
import CAlert from '@chakra-ui/c-alert/src'
9+
import { CAlert } from '@chakra-ui/c-alert/src'
1010
import { defineComponent } from 'vue'
1111
1212
export default defineComponent({
13-
name: 'BaseAlertExample',
13+
name: 'WithStatusAlertExample',
1414
components: { CAlert },
1515
})
1616
</script>

‎packages/c-alert/examples/with-title.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<c-alert status="info" mb="3">
3+
<c-alert-title> Info alert </c-alert-title>
4+
<c-alert-description> Something just happened </c-alert-description>
5+
</c-alert>
6+
</template>
7+
8+
<script lang="ts">
9+
import { CAlert, CAlertTitle, CAlertDescription } from '@chakra-ui/c-alert/src'
10+
import { defineComponent } from 'vue'
11+
12+
export default defineComponent({
13+
name: 'WithTitleExample',
14+
components: { CAlert, CAlertTitle, CAlertDescription },
15+
})
16+
</script>

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

Lines changed: 55 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
ThemingProps,
77
useMultiStyleConfig,
88
provideComponentStyles,
9+
useComponentStyles,
910
} from '@chakra-ui/system-vue'
1011
import { DOMElements } from '@chakra-ui/system-vue'
1112
import { SystemStyleObject } from '@chakra-ui/styled-system'
@@ -32,7 +33,13 @@ interface AlertState {
3233
status: AlertStatus
3334
}
3435

35-
const CAlert = defineComponent({
36+
/**
37+
* CAlert component
38+
*
39+
* This is the container component for all Alert components.
40+
* It also provides state and context to it's compound components
41+
*/
42+
export const CAlert = defineComponent({
3643
name: 'CAlert',
3744
props: {
3845
as: {
@@ -72,7 +79,7 @@ const CAlert = defineComponent({
7279
...styles.value.container,
7380
}
7481

75-
provideComponentStyles('Alert', alertStyles)
82+
provideComponentStyles('Alert', styles.value)
7683
provide('$AlertState', { status: props.status } as AlertState)
7784

7885
return () =>
@@ -88,4 +95,49 @@ const CAlert = defineComponent({
8895
},
8996
})
9097

91-
export default CAlert
98+
/**
99+
* CAlertTitle component
100+
*
101+
* The title component for alerts
102+
*/
103+
export const CAlertTitle = defineComponent({
104+
name: 'CAlertTitle',
105+
setup(_, { attrs, slots }) {
106+
const styles = useComponentStyles('Alert')
107+
108+
return () =>
109+
h(
110+
chakra('div', 'alert__title'),
111+
{
112+
...styles.title,
113+
...attrs,
114+
},
115+
slots
116+
)
117+
},
118+
})
119+
120+
/**
121+
* CAlertDescription component
122+
*
123+
* The description component for alerts
124+
*/
125+
export const CAlertDescription = defineComponent({
126+
name: 'CAlertDescription',
127+
setup(_, { attrs, slots }) {
128+
const styles = useComponentStyles('Alert')
129+
130+
return () =>
131+
h(
132+
chakra('div', 'alert__description'),
133+
{
134+
...styles.description,
135+
...attrs,
136+
},
137+
slots
138+
)
139+
},
140+
})
141+
142+
// TODO: Add CAlertIcon component.
143+
// This should ne done after the icon component is created.

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
import Alert from './alert'
2-
export default Alert
1+
export * from './alert'

‎packages/system/src/composables/use-style-config.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,5 +94,7 @@ export const provideComponentStyles = (
9494

9595
/** Injects Chakra Multi-parted component styles from ancestor */
9696
export const useComponentStyles = (component: AllThemedComponents) => {
97-
return inject<SystemStyleObject>(`$chakra${component}Styles`)
97+
return inject<Record<string, SystemStyleObject> & SystemStyleObject & any>(
98+
`$chakra${component}Styles`
99+
)
98100
}

‎playground/src/.generated/imports.js

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
import Component_1 from "../components/Home.vue";
22
const Component_2 = () => import('@chakra-ui/c-alert/examples/base-alert.vue')
3-
const Component_3 = () => import('@chakra-ui/c-alert/examples/with-status.vue')
4-
const Component_4 = () => import('@chakra-ui/c-box/examples/base-box.vue')
5-
const Component_5 = () => import('@chakra-ui/c-box/examples/box-with-chakra-directive.vue')
6-
const Component_6 = () => import('@chakra-ui/c-button/examples/base-button.vue')
7-
import Component_7 from "../components/Home.vue";
3+
const Component_3 = () => import('@chakra-ui/c-alert/examples/with-accent.vue')
4+
const Component_4 = () => import('@chakra-ui/c-alert/examples/with-status.vue')
5+
const Component_5 = () => import('@chakra-ui/c-alert/examples/with-title.vue')
6+
const Component_6 = () => import('@chakra-ui/c-box/examples/base-box.vue')
7+
const Component_7 = () => import('@chakra-ui/c-box/examples/box-with-chakra-directive.vue')
8+
const Component_8 = () => import('@chakra-ui/c-button/examples/base-button.vue')
9+
import Component_9 from "../components/Home.vue";
810

911
export default {
10-
"../components/Home.vue": Component_7,
12+
"../components/Home.vue": Component_9,
1113
"@chakra-ui/c-alert/examples/base-alert.vue": Component_2,
12-
"@chakra-ui/c-alert/examples/with-status.vue": Component_3,
13-
"@chakra-ui/c-box/examples/base-box.vue": Component_4,
14-
"@chakra-ui/c-box/examples/box-with-chakra-directive.vue": Component_5,
15-
"@chakra-ui/c-button/examples/base-button.vue": Component_6
14+
"@chakra-ui/c-alert/examples/with-accent.vue": Component_3,
15+
"@chakra-ui/c-alert/examples/with-status.vue": Component_4,
16+
"@chakra-ui/c-alert/examples/with-title.vue": Component_5,
17+
"@chakra-ui/c-box/examples/base-box.vue": Component_6,
18+
"@chakra-ui/c-box/examples/box-with-chakra-directive.vue": Component_7,
19+
"@chakra-ui/c-button/examples/base-button.vue": Component_8
1620
}

‎playground/src/.generated/routes.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,20 @@
1313
"path": "/c-alert/base-alert",
1414
"component": "@chakra-ui/c-alert/examples/base-alert.vue"
1515
},
16+
{
17+
"name": "With accent",
18+
"path": "/c-alert/with-accent",
19+
"component": "@chakra-ui/c-alert/examples/with-accent.vue"
20+
},
1621
{
1722
"name": "With status",
1823
"path": "/c-alert/with-status",
1924
"component": "@chakra-ui/c-alert/examples/with-status.vue"
25+
},
26+
{
27+
"name": "With title",
28+
"path": "/c-alert/with-title",
29+
"component": "@chakra-ui/c-alert/examples/with-title.vue"
2030
}
2131
]
2232
},

0 commit comments

Comments
 (0)