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

Commit ee62a4b

Browse files
codebender828codebender828
authored
Merge pull request #18 from chakra-ui/refactor/dev-environment
Refactor/dev environment
2 parents 3917bd6 + ab33efc commit ee62a4b

28 files changed

+465
-194
lines changed

‎@types/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './jsx'

‎@types/jsx.d.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { CSSObject } from '@emotion/css'
2+
import { Theme } from '@chakra-ui/vue-theme'
3+
import { DOMElements } from '@chakra-ui/vue-system'
4+
import {
5+
ResponsiveValue,
6+
SystemProps,
7+
SystemStyleObject,
8+
} from '@chakra-ui/styled-system'
9+
import { VNodeChild } from 'vue'
10+
import { HTMLAttributes } from 'vue'
11+
12+
interface StyleResolverProps extends SystemProps {
13+
__css?: SystemStyleObject
14+
sx?: SystemStyleObject
15+
css?: CSSObject
16+
noOfLines?: ResponsiveValue<number>
17+
isTruncated?: boolean
18+
layerStyle?: string
19+
textStyle?: string
20+
apply?: ResponsiveValue<string>
21+
componentName?: String
22+
label?: string
23+
baseStyle?: SystemStyleObject
24+
/**
25+
* User provided styles from component/chakra API
26+
*/
27+
styles?: SystemStyleObject
28+
}
29+
interface ChakraPropsOptions extends StyleResolverProps {
30+
truncateStyle?: CSSObject
31+
theme?: Theme
32+
as?: DOMElements
33+
}
34+
35+
export type JSXNode = VNodeChild | JSX.Element
36+
export interface SlotDirective {
37+
[name: string]: () => JSXNode
38+
}
39+
40+
type JSXComponentCustomProps = {
41+
vModel?: unknown
42+
vModels?: unknown[]
43+
vCustom?: unknown[]
44+
vShow?: boolean
45+
vHtml?: JSXNode
46+
vSlots?: SlotDirective
47+
disabled?: boolean | string
48+
type?: string
49+
dataActive?: boolean | string
50+
dataLoading?: boolean | string
51+
} & Omit<HTMLAttributes, 'innerHTML'> & {
52+
innerHTML?: JSXNode
53+
} & Omit<HTMLAttributes, 'color'> & {
54+
color?: SystemProps['color']
55+
} & ChakraPropsOptions
56+
57+
declare global {
58+
export namespace JSX {
59+
export interface IntrinsicAttributes extends JSXComponentCustomProps {}
60+
}
61+
}

‎global.d.ts

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

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

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<template>
2-
<c-alert status="success" mb="3">
3-
<c-alert-title> Solid 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> Subtle 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> Left accent 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> Top accent alert </c-alert-title>
16-
<c-alert-description> Something just happened </c-alert-description>
17-
</c-alert>
2+
<div>
3+
<c-alert status="success" mb="3">
4+
<c-alert-title> Solid alert </c-alert-title>
5+
<c-alert-description> Something just happened </c-alert-description>
6+
</c-alert>
7+
<c-alert variant="subtle" status="success" mb="3">
8+
<c-alert-title> Subtle alert </c-alert-title>
9+
<c-alert-description> Something just happened </c-alert-description>
10+
</c-alert>
11+
<c-alert variant="left-accent" status="success" mb="3">
12+
<c-alert-title> Left accent alert </c-alert-title>
13+
<c-alert-description> Something just happened </c-alert-description>
14+
</c-alert>
15+
<c-alert variant="top-accent" status="success" mb="3">
16+
<c-alert-title> Top accent alert </c-alert-title>
17+
<c-alert-description> Something just happened </c-alert-description>
18+
</c-alert>
19+
</div>
1820
</template>

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

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
<template>
2-
<c-alert variant="left-accent" status="info" mb="3">
3-
<c-alert-icon mr="2" />
4-
<c-alert-title> Info alert </c-alert-title>
5-
<c-alert-description> Something just happened </c-alert-description>
6-
</c-alert>
7-
<c-alert variant="left-accent" status="warning" mb="3">
8-
<c-alert-icon mr="2" />
9-
<c-alert-title> Warning alert </c-alert-title>
10-
<c-alert-description> Something just happened </c-alert-description>
11-
</c-alert>
12-
<c-alert variant="left-accent" status="success" mb="3">
13-
<c-alert-icon mr="2" />
14-
<c-alert-title> Success alert </c-alert-title>
15-
<c-alert-description> Something just happened </c-alert-description>
16-
</c-alert>
17-
<c-alert variant="left-accent" status="error" mb="3">
18-
<c-alert-icon mr="2" />
19-
<c-alert-title> Error alert </c-alert-title>
20-
<c-alert-description> Something just happened </c-alert-description>
21-
</c-alert>
2+
<div>
3+
<c-alert variant="left-accent" status="info" mb="3">
4+
<c-alert-icon mr="2" />
5+
<c-alert-title> Info alert </c-alert-title>
6+
<c-alert-description> Something just happened </c-alert-description>
7+
</c-alert>
8+
<c-alert variant="left-accent" status="warning" mb="3">
9+
<c-alert-icon mr="2" />
10+
<c-alert-title> Warning alert </c-alert-title>
11+
<c-alert-description> Something just happened </c-alert-description>
12+
</c-alert>
13+
<c-alert variant="left-accent" status="success" mb="3">
14+
<c-alert-icon mr="2" />
15+
<c-alert-title> Success alert </c-alert-title>
16+
<c-alert-description> Something just happened </c-alert-description>
17+
</c-alert>
18+
<c-alert variant="left-accent" status="error" mb="3">
19+
<c-alert-icon mr="2" />
20+
<c-alert-title> Error alert </c-alert-title>
21+
<c-alert-description> Something just happened </c-alert-description>
22+
</c-alert>
23+
</div>
2224
</template>

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
2-
<c-alert status="info" mb="3"> Info alert </c-alert>
3-
<c-alert status="success" mb="3"> Success alert </c-alert>
4-
<c-alert status="warning" mb="3"> Warning alert </c-alert>
5-
<c-alert status="error" mb="3"> Error alert </c-alert>
2+
<div>
3+
<c-alert status="info" mb="3"> Info alert </c-alert>
4+
<c-alert status="success" mb="3"> Success alert </c-alert>
5+
<c-alert status="warning" mb="3"> Warning alert </c-alert>
6+
<c-alert status="error" mb="3"> Error alert </c-alert>
7+
</div>
68
</template>

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<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>
2+
<div>
3+
<c-alert status="info" mb="3">
4+
<c-alert-title> Info alert </c-alert-title>
5+
<c-alert-description> Something just happened </c-alert-description>
6+
</c-alert>
7+
</div>
68
</template>

‎packages/c-button/examples/with-button-icon.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div>
3+
<chakra.p mt="3" font-weight="bold">Left icon</chakra.p>
4+
<c-button mr="3" left-icon="email" color-scheme="blue">
5+
Base button
6+
</c-button>
7+
<chakra.p mt="3" font-weight="bold">Right icon</chakra.p>
8+
<c-button mr="3" right-icon="star" color-scheme="blue">
9+
Base button
10+
</c-button>
11+
</div>
12+
</template>

‎packages/c-button/examples/with-button-size.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
2-
<c-button mr="3" size="xs" color-scheme="teal"> Tiny button </c-button>
3-
<c-button mr="3" size="sm" color-scheme="teal"> Small button </c-button>
4-
<c-button mr="3" size="md" color-scheme="teal"> Medium button </c-button>
5-
<c-button mr="3" size="lg" color-scheme="teal"> Large button </c-button>
2+
<div>
3+
<c-button mr="3" size="xs" color-scheme="teal"> Tiny button </c-button>
4+
<c-button mr="3" size="sm" color-scheme="teal"> Small button </c-button>
5+
<c-button mr="3" size="md" color-scheme="teal"> Medium button </c-button>
6+
<c-button mr="3" size="lg" color-scheme="teal"> Large button </c-button>
7+
</div>
68
</template>

‎packages/c-button/examples/with-button-variants.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
2-
<c-button mr="3" variant="solid" color-scheme="teal"> Solid </c-button>
3-
<c-button mr="3" variant="outline" color-scheme="teal"> Outline </c-button>
4-
<c-button mr="3" variant="ghost" color-scheme="teal"> Ghost </c-button>
5-
<c-button mr="3" variant="link" color-scheme="teal"> Link </c-button>
2+
<div>
3+
<c-button mr="3" variant="solid" color-scheme="teal"> Solid </c-button>
4+
<c-button mr="3" variant="outline" color-scheme="teal"> Outline </c-button>
5+
<c-button mr="3" variant="ghost" color-scheme="teal"> Ghost </c-button>
6+
<c-button mr="3" variant="link" color-scheme="teal"> Link </c-button>
7+
</div>
68
</template>

0 commit comments

Comments
 (0)