}
39 | */
40 | const splitProps = (props) => {
41 | const rootProps = {}
42 | const selectProps = {}
43 | for (const key in props) {
44 | const _key = camelize(key)
45 | if (rootOptions[_key]) {
46 | rootProps[_key] = props[key]
47 | } else {
48 | selectProps[_key] = props[key]
49 | }
50 | }
51 | return [rootProps, selectProps]
52 | }
53 |
54 | export default splitProps
55 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Hey! Welcome to @chakra-ui/vue Simple Grid
3 | *
4 | * SimpleGrid provides a friendly interface to create
5 | * responsive grid layouts with ease.
6 | *
7 | * @see Docs https://vue.chakra-ui.com/simplegrid
8 | * @see Source https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.js
9 | */
10 |
11 | import { CGrid } from '../CGrid'
12 | import { SNA } from '../config/props.types'
13 | import { createStyledAttrsMixin } from '../utils'
14 | import { countToColumns, widthToColumns } from './utils/grid.styles'
15 |
16 | /**
17 | * CSimpleGrid component
18 | *
19 | * The simple grid component provides basic grid functionalities.
20 | *
21 | * @extends CGrid
22 | * @see Docs https://vue.chakra-ui.com/select
23 | */
24 | const CSimpleGrid = {
25 | name: 'CSimpleGrid',
26 | mixins: [createStyledAttrsMixin('CSimpleGrid')],
27 | props: {
28 | columns: SNA,
29 | spacingX: SNA,
30 | spacingY: SNA,
31 | spacing: SNA,
32 | minChildWidth: SNA
33 | },
34 | computed: {
35 | templateColumns () {
36 | return this.minChildWidth
37 | ? widthToColumns(this.minChildWidth)
38 | : countToColumns(this.columns)
39 | }
40 | },
41 | render (h) {
42 | return h(CGrid, {
43 | class: this.className,
44 | props: {
45 | gap: this.spacing,
46 | columnGap: this.spacingX,
47 | rowGap: this.spacingY,
48 | templateColumns: this.templateColumns
49 | },
50 | attrs: this.computedAttrs
51 | }, this.$slots.default)
52 | }
53 | }
54 |
55 | export default CSimpleGrid
56 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CSimpleGrid/CSimpleGrid.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { CSimpleGrid, CBox } from '..'
3 |
4 | storiesOf('UI | Simple Grid component', module)
5 | .add('Basic Usage', () => ({
6 | components: { CSimpleGrid, CBox },
7 | template: `
8 |
9 |
10 |
17 |
18 | `
19 | }))
20 | .add('Responsive values', () => ({
21 | components: { CSimpleGrid, CBox },
22 | template: `
23 |
24 |
25 |
31 |
32 | `
33 | }))
34 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CSimpleGrid/index.js:
--------------------------------------------------------------------------------
1 | import CSimpleGrid from './CSimpleGrid'
2 | export default CSimpleGrid
3 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CSimpleGrid/utils/grid.styles.js:
--------------------------------------------------------------------------------
1 | /**
2 | * These helper functions are modified versions of the amazing work done by rebass library abd chakra-ui
3 | * https://github.com/rebassjs/rebass/blob/master/packages/layout/src/index.js
4 | */
5 |
6 | const px = n => (typeof n === 'number' ? n + 'px' : n)
7 |
8 | export const widthToColumns = (width) => {
9 | if (Array.isArray(width)) {
10 | return width.map(widthToColumns)
11 | }
12 |
13 | if (
14 | width !== null &&
15 | typeof width === 'object' &&
16 | Object.keys(width).length > 0
17 | ) {
18 | const acc = {}
19 | for (const key in width) {
20 | acc[key] = `repeat(auto-fit, minmax(${px(width[key])}, 1fr))`
21 | }
22 | return acc
23 | }
24 |
25 | if (width != null) {
26 | return `repeat(auto-fit, minmax(${px(width)}, 1fr))`
27 | }
28 |
29 | return null
30 | }
31 |
32 | export const countToColumns = (count) => {
33 | if (Array.isArray(count)) {
34 | return count.map(countToColumns)
35 | }
36 |
37 | if (
38 | count !== null &&
39 | typeof count === 'object' &&
40 | Object.keys(count).length > 0
41 | ) {
42 | const acc = {}
43 | for (const key in count) {
44 | acc[key] = `repeat(${count[key]}, 1fr)`
45 | }
46 | return acc
47 | }
48 |
49 | if (count != null) {
50 | return `repeat(${count}, 1fr)`
51 | }
52 |
53 | return null
54 | }
55 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CSkipNav/index.js:
--------------------------------------------------------------------------------
1 | export * from './CSkipNav'
2 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CSlider/CSlider.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { CBox, CSlider, CSliderTrack, CSliderFilledTrack, CSliderThumb, CIcon } from '..'
3 |
4 | storiesOf('UI | Slider', module)
5 | .add('Basic Usage', () => ({
6 | components: { CBox, CSlider, CSliderTrack, CSliderFilledTrack, CSliderThumb },
7 | template: `
8 |
9 |
10 |
14 |
15 | `
16 | }))
17 | .add('Customized Slider', () => ({
18 | components: { CBox, CIcon, CSlider, CSliderTrack, CSliderFilledTrack, CSliderThumb },
19 | template: `
20 |
21 |
22 |
25 |
27 |
28 |
29 | `
30 | }))
31 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CSlider/index.js:
--------------------------------------------------------------------------------
1 | import CSlider from './CSlider'
2 | export default CSlider
3 | export * from './CSlider'
4 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CSlider/utils/slider.utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Conforms a value to provided precision
3 | * @param {Value} value Value
4 | * @param {Number} step step
5 | * @returns {Number} Precise value
6 | */
7 | function makeValuePrecise (value, step) {
8 | const stepDecimalPart = step.toString().split('.')[1]
9 | const stepPrecision = stepDecimalPart ? stepDecimalPart.length : 0
10 | return Number(value.toFixed(stepPrecision))
11 | }
12 |
13 | /**
14 | * Rounds off a value to the nearest step
15 | * @param {Number} value Value
16 | * @param {Number} step step
17 | * @returns {Number} rounded value
18 | */
19 | export function roundValueToStep (value, step) {
20 | return makeValuePrecise(Math.round(value / step) * step, step)
21 | }
22 |
23 | /**
24 | * Clamps provided value within domain
25 | * @param {Number} val Value
26 | * @param {Number} min Minimum value
27 | * @param {Number} max Maximum value
28 | * @returns {Number} clamped value
29 | */
30 | export function clampValue (val, min, max) {
31 | if (val > max) {
32 | return max
33 | }
34 | if (val < min) {
35 | return min
36 | }
37 | return val
38 | }
39 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CSpinner/CSpinner.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { CSpinner, CStack } from '..'
3 |
4 | const components = { CSpinner, CStack }
5 |
6 | storiesOf('UI | Spinner', module)
7 | .add('Basic Usage', () => ({
8 | components,
9 | template: `
10 |
23 |
29 | `
30 | }))
31 | .add('With empty color area', () => ({
32 | components,
33 | template: `
34 |
9 |
10 | Collected Fees
11 | £0.00
12 | Feb 12 - Feb 28
13 |
14 |
15 | `
16 | }))
17 | .add('With indicators', () => ({
18 | components: { CStat, CStatGroup, CStatLabel, CStatNumber, CStatHelperText, CStatArrow },
19 | template: `
20 |
21 |
22 |
23 | Sent
24 | 345,670
25 |
26 |
29 |
30 |
31 |
32 | Clicked
33 | 45
34 |
35 |
38 |
39 |
40 |
41 | `
42 | }))
43 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CStat/index.js:
--------------------------------------------------------------------------------
1 | export * from './CStat'
2 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CStat/tests/CStat.test.js:
--------------------------------------------------------------------------------
1 | import { CStat, CStatLabel, CStatNumber, CStatHelperText, CStatArrow } from '..'
2 | import { render, screen } from '@/tests/test-utils'
3 |
4 | const renderComponent = (props) => {
5 | const base = {
6 | components: { CStat, CStatLabel, CStatNumber, CStatHelperText, CStatArrow },
7 | template: `
8 |
9 | Collected Fees
10 | £0.00
11 | Feb 12 - Feb 28
12 |
13 | `,
14 | ...props
15 | }
16 | return render(base)
17 | }
18 |
19 | it('should render correctly', () => {
20 | const { asFragment } = renderComponent()
21 | expect(asFragment()).toMatchSnapshot()
22 | })
23 |
24 | it('should render children in DOM', () => {
25 | renderComponent()
26 | expect(screen.getByText('Collected Fees')).toBeInTheDocument()
27 | })
28 |
29 | test('"CStatArrow" should display corresponding icon for "type" prop', () => {
30 | const types = ['increase', 'decrease']
31 | const withTypeFragment = (type) => {
32 | const { asFragment } = renderComponent({
33 | template: `
34 |
35 | Sent
36 | 345,670
37 |
38 |
41 |
42 | `
43 | })
44 | return asFragment
45 | }
46 | types.forEach(type => expect(withTypeFragment(type)()).toMatchSnapshot())
47 | })
48 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CSwitch/index.js:
--------------------------------------------------------------------------------
1 | import CSwitch from './CSwitch'
2 | export default CSwitch
3 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CTabs/index.js:
--------------------------------------------------------------------------------
1 | export * from './CTabs'
2 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CTag/index.js:
--------------------------------------------------------------------------------
1 | export * from './CTag'
2 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CText/CText.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Hey! Welcome to @chakra-ui/vue Text
3 | *
4 | * Text is the used to render text and paragraphs within an interface. It renders a tag by default.
5 | *
6 | * @see Docs https://vue.chakra-ui.com/text
7 | * @see Source https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CText/CText.js
8 | */
9 |
10 | import { createStyledAttrsMixin } from '../utils'
11 | import { useTruncated } from './utils/text.utils'
12 |
13 | /**
14 | * CText component
15 | *
16 | * the text element component
17 | *
18 | * @see Docs https://vue.chakra-ui.com/text
19 | */
20 | const CText = {
21 | name: 'CText',
22 | mixins: [createStyledAttrsMixin('CText')],
23 | props: {
24 | as: {
25 | type: [String, Array],
26 | default: 'p'
27 | },
28 | isTruncated: Boolean,
29 | fontFamily: {
30 | type: [String, Array],
31 | default: 'body'
32 | }
33 | },
34 | computed: {
35 | componentStyles () {
36 | return {
37 | fontFamily: this.as === 'kbd' ? 'mono' : this.fontFamily,
38 | ...this.isTruncated && useTruncated()
39 | }
40 | }
41 | },
42 | render (h) {
43 | return h(this.as, {
44 | class: this.className,
45 | attrs: this.computedAttrs
46 | }, this.$slots.default)
47 | }
48 | }
49 |
50 | export default CText
51 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CText/index.js:
--------------------------------------------------------------------------------
1 | import CText from './CText'
2 | export default CText
3 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CText/tests/CText.test.js:
--------------------------------------------------------------------------------
1 | import CText from '..'
2 | import { render, screen } from '@/tests/test-utils'
3 |
4 | const renderComponent = (props) => {
5 | const inlineAttrs = (props && props.inlineAttrs) || ''
6 | const base = {
7 | components: { CText },
8 | template: `Text Works `,
9 | ...props
10 | }
11 | return render(base)
12 | }
13 |
14 | it('should render correctly', () => {
15 | const { asFragment } = renderComponent()
16 |
17 | expect(asFragment()).toMatchSnapshot()
18 | })
19 |
20 | it('should change the style', () => {
21 | const inlineAttrs = 'd="flex"'
22 | const { asFragment } = renderComponent({ inlineAttrs })
23 |
24 | const text = screen.getByTestId('text')
25 |
26 | expect(asFragment()).toMatchSnapshot()
27 | expect(text).toHaveStyle('display: flex')
28 | })
29 |
30 | it.each`
31 | as
32 | ${'u'}
33 | ${'abbr'}
34 | ${'cite'}
35 | ${'del'}
36 | ${'em'}
37 | ${'ins'}
38 | ${'kbd'}
39 | ${'mark'}
40 | ${'s'}
41 | ${'sub'}
42 | ${'sup'}}
43 | `(
44 | 'should display text type as $as',
45 | ({ as }) => {
46 | const inlineAttrs = `as=${as}`
47 | renderComponent({ inlineAttrs })
48 | const text = screen.getByTestId('text')
49 | expect(text.tagName.toLowerCase()).toEqual(as)
50 | }
51 | )
52 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CText/tests/__snapshots__/CText.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`should change the style 1`] = `
4 |
5 | .emotion-0 {
6 | font-family: var(--chakra-fonts-body);
7 | display: -webkit-box;
8 | display: -webkit-flex;
9 | display: -ms-flexbox;
10 | display: flex;
11 | }
12 |
13 |
18 | Text Works
19 |
20 |
21 | `;
22 |
23 | exports[`should render correctly 1`] = `
24 |
25 | .emotion-0 {
26 | font-family: var(--chakra-fonts-body);
27 | }
28 |
29 |
34 | Text Works
35 |
36 |
37 | `;
38 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CText/utils/text.utils.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Returns truncation style props for text elements.
4 | * @todo Add line-clamp features for text.
5 | */
6 | export const useTruncated = () => ({
7 | overflow: 'hidden',
8 | textOverflow: 'ellipsis',
9 | whiteSpace: 'nowrap'
10 | })
11 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CTextarea/CTextarea.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 | import { action } from '@storybook/addon-actions'
3 | import { CBox, CTextarea } from '..'
4 |
5 | storiesOf('UI | Textarea', module)
6 | .add('Basic Usage', () => ({
7 | components: { CBox, CTextarea },
8 | template: `
9 |
10 |
21 | `,
22 | data () {
23 | return {
24 | textareaContent: 'Jonathan Bakebwa is awesome'
25 | }
26 | },
27 | methods: {
28 | action: action()
29 | }
30 | }))
31 | .add('Basic Usage with Event', () => ({
32 | components: { CBox, CTextarea },
33 | template: `
34 |
35 |
46 | `,
47 | data () {
48 | return {
49 | textareaContent: 'Jonathan Bakebwa is awesome'
50 | }
51 | },
52 | methods: {
53 | action: action(),
54 | handleChange (e) {
55 | this.textareaContent = 'You are beautiful :)'
56 | }
57 | }
58 | }))
59 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CTextarea/index.js:
--------------------------------------------------------------------------------
1 | import CTextarea from './CTextarea'
2 | export default CTextarea
3 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CTextarea/tests/CTextarea.test.js:
--------------------------------------------------------------------------------
1 | import { CTextarea } from '../..'
2 | import { render, screen, userEvent } from '@/tests/test-utils'
3 |
4 | const renderComponent = (props) => {
5 | const inlineAttrs = (props && props.inlineAttrs) || ''
6 | const base = {
7 | data: () => ({ text: 'hello' }),
8 | components: { CTextarea },
9 | template: `
9 | Hello World!
10 |
11 | @codebender828
12 |
13 | will be joining us today!
14 |
15 |
16 | `
17 | }))
18 | .add('With custom focusable element', () => ({
19 | components: { CReset, CTooltip, CButton },
20 | template: `
21 |
22 |
24 | Delete Account
25 |
26 |
27 | `
28 | }))
29 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CTooltip/index.js:
--------------------------------------------------------------------------------
1 | import CTooltip from './CTooltip'
2 | export default CTooltip
3 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CTooltip/tooltip.test.js:
--------------------------------------------------------------------------------
1 | describe('Tooltip tests', () => {
2 | it.todo('should display tooltip for test nodes')
3 | it.todo('should display tooltip for component children')
4 | it.todo('should announce tooltip value with screenreader for ally')
5 | it.todo('should place tooltip in corresponding placement')
6 | it.todo('should style tooltip accordingly')
7 | it.todo('should display tooltip with arrow')
8 | it.todo('should insert tooltip in portal')
9 | })
10 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CTransition/index.js:
--------------------------------------------------------------------------------
1 | export * from './Transition'
2 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CVisuallyHidden/CVisuallyHidden.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Hey! Welcome to @chakra-ui/vue VisuallyHidden
3 | *
4 | * This component is used to visually hide elements that have custom
5 | * appearance. For example, see the CControlBox.
6 | *
7 | * @see Source https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CVisuallyHidden/CVisuallyHidden.js
8 | */
9 |
10 | import { css } from '@emotion/css'
11 |
12 | /**
13 | * CVisuallyHidden component
14 | *
15 | * the visually hidden wrapper element
16 | */
17 | const CVisuallyHidden = {
18 | name: 'CVisuallyHidden',
19 | functional: true,
20 | props: {
21 | as: {
22 | type: String,
23 | default: 'div'
24 | }
25 | },
26 | render (h, { props, data, slots, listeners, ...rest }) {
27 | const { attrs, domProps, on } = data
28 | const className = css({
29 | border: '0px',
30 | clip: 'rect(0px, 0px, 0px, 0px)',
31 | height: `${(attrs && attrs.w) || '1px'}`,
32 | width: `${(attrs && attrs.h) || '1px'}`,
33 | margin: '-1px',
34 | padding: '0px',
35 | overflow: 'hidden',
36 | whiteSpace: 'nowrap',
37 | position: `${(attrs && attrs.pos) || 'absolute'}`
38 | })
39 |
40 | return h(props.as, {
41 | class: [className],
42 | attrs: {
43 | ...(attrs || {}),
44 | 'data-chakra-component': 'CVisuallyHidden'
45 | },
46 | domProps,
47 | on: {
48 | ...listeners,
49 | ...on
50 | }
51 | }, slots().default)
52 | }
53 | }
54 |
55 | export default CVisuallyHidden
56 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/CVisuallyHidden/index.js:
--------------------------------------------------------------------------------
1 | import CVisuallyHidden from './CVisuallyHidden'
2 | export default CVisuallyHidden
3 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/Css/Css.js:
--------------------------------------------------------------------------------
1 | import { css } from '@chakra-ui/styled-system'
2 |
3 | /**
4 | * Build a CSS factory function, to create CSS object by given a theme
5 | * @param {Object} styleProps Styles object
6 | * @returns {Function} (theme) => CSSStyleObject
7 | */
8 | const buildCssFn = styleProps => css(styleProps)
9 | export default buildCssFn
10 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/Css/index.js:
--------------------------------------------------------------------------------
1 | import Css from './Css'
2 | export default Css
3 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@babel/preset-env',
4 | 'env'
5 | ],
6 | env: {
7 | test: {
8 | plugins: [
9 | 'transform-es2015-modules-commonjs',
10 | 'transform-vue-jsx'
11 | ]
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/config/index.js:
--------------------------------------------------------------------------------
1 | // to keep rollup work
2 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/config/props.types.js:
--------------------------------------------------------------------------------
1 | export const StringArray = [String, Array]
2 | export const SNA = [Number, String, Array, Object]
3 | export const StringNumber = [String, Number]
4 | export const ObjectArray = [Object, Array]
5 | export const ObjectFunction = [Object, Function]
6 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/directives/chakra.stories.js:
--------------------------------------------------------------------------------
1 | import { storiesOf } from '@storybook/vue'
2 |
3 | storiesOf('Directives | Chakra', module)
4 | .add('Base usage - No arguments', () => ({
5 | template: `
6 |
7 |
Welcome to Chakra directive
8 |
14 |
21 |
Title
22 |
Text
23 |
24 |
30 |
39 |
Computed styles
40 |
41 |
47 |
51 | Button
52 |
53 |
54 | `
55 | }))
56 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/directives/index.js:
--------------------------------------------------------------------------------
1 | export { default as ClickOutsideDirective } from './clickoutside.directive'
2 | export * from './chakra.directive'
3 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/lib/index.js:
--------------------------------------------------------------------------------
1 | export { default as internalIcons } from './internal-icons'
2 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/utils/__snapshots__/color-mode-observer.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`colorModeObserver \`colorModeObserver\` should provide and observe values 1`] = `
4 | Object {
5 | "baseStyles": Object {
6 | "CButton": Object {
7 | "bg": "success",
8 | "borderRadius": "200px",
9 | "shadow": "inner",
10 | },
11 | },
12 | "colors": Object {
13 | "info": "#0000FF",
14 | },
15 | "shadows": Object {
16 | "inner": "inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)",
17 | "outline": "0 0 0 3px rgba(66, 153, 225, 0.6)",
18 | },
19 | }
20 | `;
21 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/utils/__snapshots__/styled-system.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`__get should return correct value for given path 1`] = `
4 | Object {
5 | "bg": "red.400",
6 | "color": "black",
7 | }
8 | `;
9 |
10 | exports[`__get should return correct value for given path 2`] = `"red.400"`;
11 |
12 | exports[`__get should return correct value for given path 3`] = `"black"`;
13 |
14 | exports[`__get should return correct value for given path 4`] = `"#ff0000"`;
15 |
16 | exports[`__get should return correct value for given path 5`] = `
17 | Object {
18 | "bg": "red.400",
19 | "color": "black",
20 | }
21 | `;
22 |
23 | exports[`__get should return correct value for given path 6`] = `"red.400"`;
24 |
25 | exports[`__get should return correct value for given path 7`] = `"black"`;
26 |
27 | exports[`__get should return correct value for given path 8`] = `"#ff0000"`;
28 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/utils/functions.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Chains function arguments passed.
3 | * @param {...Function} funcs Functions to be chained
4 | */
5 | export function createChainedFunction (...funcs) {
6 | return funcs.reduce(
7 | (acc, func) => {
8 | if (func == null) {
9 | return acc
10 | }
11 |
12 | return function chainedFunction (...args) {
13 | acc.apply(this, args)
14 | func.apply(this, args)
15 | }
16 | },
17 | () => {}
18 | )
19 | }
20 |
21 | /**
22 | * Computes a value if it's a function. Otherwise it returns the value
23 | * @param {Function|Any} value value to be computed
24 | * @param {Object|Any} props values to be passed as argument to function
25 | * @example
26 | *
27 | * const fn = (a, b) => a + b
28 | * const result = runIfFn(fn, 2,3)
29 | * console.log(result) // 5
30 | *
31 | * const obj = { m:3, p: 4 }
32 | * const withObj = runIfFn(obj, {m: 3})
33 | * console.log(withObj) // { m:3, p: 4 }
34 | */
35 | export const runIfFn = (value, ...props) => {
36 | if (typeof value === 'function') {
37 | return value(...props)
38 | }
39 | return value
40 | }
41 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/utils/generators.js:
--------------------------------------------------------------------------------
1 | export function useId (size = 3) {
2 | let uuid = ''
3 | const dictionary = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
4 | for (let i = 0; i < size; i++) {
5 | uuid += dictionary.charAt(Math.floor(Math.random() * dictionary.length))
6 | }
7 | return uuid
8 | }
9 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export { default as Logger } from './logger'
2 | export { valueToPercent } from './transform'
3 | export { pickProperty as forwardProps } from './object'
4 | export * from './object'
5 | export * from './color'
6 | export { parsePackIcons } from './icons'
7 | export * from './dom'
8 | export * from './vdom'
9 | export * from './strings'
10 | export * from './generators'
11 | export * from './validators'
12 | export * from './functions'
13 | export * from './components'
14 | export * from './color-mode-observer'
15 | export * from './styled-system'
16 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/utils/strings.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description Returns the substring after a certain character in a string.
3 | * @param {'String'} string
4 | * @param {'String'} char
5 | */
6 | export function getSubstringAfterChar (string, char) {
7 | return string.slice(string.indexOf(char) + 1)
8 | }
9 |
10 | /**
11 | * @description Returns the substring before a certain character in a string.
12 | * @param {'String'} string
13 | * @param {'String'} char
14 | */
15 | export function getSubstringBeforeChar (string, char) {
16 | return string.slice(0, string.indexOf(char))
17 | }
18 |
19 | /**
20 | * Transforms a string to Kebab case
21 | * @param {String} text String to transform to kebab case
22 | */
23 | export function kebabify (text) {
24 | return text &&
25 | text
26 | .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
27 | .map(x => x.toLowerCase())
28 | .join('-')
29 | }
30 |
31 | /**
32 | * Converts a kebab-case string into camel case
33 | * @param {String} string
34 | */
35 | export function camelize (string) {
36 | return string.replace(/[.-](\w|$)/g, function (_, x) {
37 | return x.toUpperCase()
38 | })
39 | }
40 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/utils/styled-system.js:
--------------------------------------------------------------------------------
1 | import { css } from '@chakra-ui/styled-system'
2 |
3 | /**
4 | * Existential getter function that can be used in any style declaration to get a value
5 | * from theme, with support for fallback values. This helps prevent errors from
6 | * throwing when a theme value is missing.
7 | * @param {Object} obj Theme property
8 | * @param {String} key Theme key
9 | * @param {String} def Definition if non-existent
10 | */
11 | export const __get = (obj, key, def) => {
12 | const keys = key && key.split ? key.split('.') : [key]
13 |
14 | return (
15 | keys.reduce((res, key) => res && res[key], obj) || def
16 | )
17 | }
18 |
19 | export const composeSystem = (props = {}, theme = {}) => css(props)(theme)
20 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/utils/transform.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Converts value to percentage
3 | * @param {Number} value Value
4 | * @param {Number} min Minimum value
5 | * @param {Number} max Maximum value
6 | * @returns {Number} Percentage value
7 | */
8 | export function valueToPercent (value, min, max) {
9 | return ((value - min) * 100) / (max - min)
10 | }
11 |
12 | /**
13 | * Converts percentage to value
14 | * @param {Number} percent Percentage Value
15 | * @param {Number} min Minimum value
16 | * @param {Number} max Maximum value
17 | * @returns {Number} Numerical value
18 | */
19 | export function percentToValue (percent, min, max) {
20 | return (max - min) * percent + min
21 | }
22 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/src/utils/validators.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Checks if a value is undefined
3 | * @param {*} v
4 | * @returns {Boolean}
5 | */
6 | export function isUndef (v) {
7 | return v === undefined || v === null
8 | }
9 |
10 | /**
11 | * Checks if a value is defined
12 | * @param {*} v
13 | * @returns {Boolean}
14 | */
15 | export function isDef (v) {
16 | return v !== undefined && v !== null
17 | }
18 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/types/chakra.d.ts:
--------------------------------------------------------------------------------
1 | import { PluginObject } from "vue"
2 | import { IconPack } from "@fortawesome/fontawesome-common-types"
3 | import { Theme } from "../../chakra-ui-theme/types"
4 |
5 | export type Icon = {
6 | path: string
7 | viewBox?: string
8 | attrs?: any
9 | }
10 |
11 | export type Options = {
12 | extendTheme: Theme
13 | icons: {
14 | extend: { [name: string]: Icon }
15 | iconPack: string
16 | iconSet: IconPack
17 | }
18 | }
19 |
20 | export type ChakraPlugin = PluginObject
21 |
22 | declare let chakra: ChakraPlugin
23 | export default chakra
24 |
--------------------------------------------------------------------------------
/packages/chakra-ui-core/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import Chakra, { Icon } from "./chakra"
2 | import { Theme } from "../../chakra-ui-theme/types"
3 | import useToast from "../src/CToast"
4 | import { ToastFactory } from '../src/CToast/CToast'
5 |
6 | type ChakraIcons = { [name: string]: Icon };
7 |
8 | declare module 'vue/types/vue' {
9 | export interface Vue {
10 | $toast: ToastFactory
11 | $chakra: {
12 | theme: Theme
13 | icons: ChakraIcons
14 | }
15 | }
16 | }
17 |
18 | declare module '../src/CColorModeProvider' {
19 | export interface Provides {
20 | $chakraColorMode: () => 'light' | 'dark'
21 | $toggleColorMode: () => void
22 | }
23 | }
24 |
25 | declare module '../src/CThemeProvider' {
26 | export interface Provides {
27 | $chakraTheme: Theme
28 | $chakraIcons: ChakraIcons
29 | $chakraColorMode: () => 'light'
30 | }
31 | }
32 |
33 | export { Provides as CColorModeProvides } from '../src/CColorModeProvider'
34 | export { Provides as CThemeProvides } from '../src/CThemeProvider'
35 |
36 | export const useToast: typeof useToast
37 | export const defaultTheme: Theme
38 | export * from './component'
39 | export { ChakraPlugin, Options } from './chakra'
40 | export default Chakra
41 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Kelvin Omereshone
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | [
4 | '@babel/preset-env',
5 | {
6 | targets: {
7 | esmodules: true
8 | }
9 | }
10 | ]
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/example/autoimport/layouts/default.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/example/autoimport/nuxt.config.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require('path')
2 | const theme = require('./utils/theme')
3 |
4 | module.exports = {
5 | rootDir: resolve(__dirname, '../..'),
6 | buildDir: resolve(__dirname, '.nuxt'),
7 | srcDir: __dirname,
8 | modules: [
9 | { handler: require('../../lib/module') },
10 | { handler: require('@nuxtjs/emotion') }
11 | ],
12 | chakra: {
13 | extendTheme: theme
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/example/autoimport/pages/directive.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 | Welcome to Chakra directive
12 |
13 |
14 |
23 |
Title
24 |
Text
25 |
26 |
27 |
38 |
Computed styles
39 |
40 |
41 |
54 | Button
55 |
56 |
57 |
59 |
60 |
65 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/example/autoimport/utils/theme.js:
--------------------------------------------------------------------------------
1 | const customTheme = {
2 | colors: {
3 | brand: {
4 | 50: '#daffff',
5 | 100: '#b1fbfb',
6 | 200: '#85f7f7',
7 | 300: '#58f3f3',
8 | 400: '#31f0f0',
9 | 500: '#1ed7d7',
10 | 600: '#0ca7a7',
11 | 700: '#007777',
12 | 800: '#004949',
13 | 900: '#001a1a'
14 | }
15 | }
16 | }
17 |
18 | module.exports = customTheme
19 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/example/base/layouts/default.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
9 |
10 |
11 |
12 |
13 |
31 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/example/base/nuxt.config.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require('path')
2 | const theme = require('./utils/theme')
3 |
4 | module.exports = {
5 | rootDir: resolve(__dirname, '../..'),
6 | buildDir: resolve(__dirname, '.nuxt'),
7 | srcDir: __dirname,
8 | modules: [
9 | { handler: require('../../lib/module') },
10 | { handler: require('@nuxtjs/emotion') }
11 | ],
12 | chakra: {
13 | config: {
14 | autoImport: false
15 | },
16 | extendTheme: theme
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/example/base/pages/directive.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 | Welcome to Chakra directive
12 |
13 |
14 |
23 |
Title
24 |
Text
25 |
26 |
27 |
38 |
Computed styles
39 |
40 |
41 |
54 | Button
55 |
56 |
57 |
59 |
60 |
65 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/example/base/utils/theme.js:
--------------------------------------------------------------------------------
1 | const customTheme = {
2 | colors: {
3 | brand: {
4 | 50: '#daffff',
5 | 100: '#b1fbfb',
6 | 200: '#85f7f7',
7 | 300: '#58f3f3',
8 | 400: '#31f0f0',
9 | 500: '#1ed7d7',
10 | 600: '#0ca7a7',
11 | 700: '#007777',
12 | 800: '#004949',
13 | 900: '#001a1a'
14 | }
15 | }
16 | }
17 |
18 | module.exports = customTheme
19 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | testEnvironment: 'node',
3 | collectCoverage: true,
4 | collectCoverageFrom: [
5 | 'lib/**/*.js',
6 | '!lib/plugin.js'
7 | ],
8 | moduleNameMapper: {
9 | '^~/(.*)$': '/lib/$1',
10 | '^~~$': '',
11 | '^@@$': '',
12 | '^@/(.*)$': '/lib/$1'
13 | },
14 | transform: {
15 | '^.+\\.js$': 'babel-jest'
16 | },
17 | testMatch: [
18 | '**/**/*.spec.(js|jsx|ts|tsx)'
19 | ],
20 | transformIgnorePatterns: ['node_modules/(?!(lodash-es|@chakra-ui/vue|@nuxtjs/emotion))']
21 | }
22 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@chakra-ui/nuxt",
3 | "version": "0.7.0",
4 | "description": "Chakra UI Module for Nuxt.js",
5 | "repository": "https://github.com/chakra-ui/chakra-ui-vue",
6 | "license": "MIT",
7 | "contributors": [
8 | {
9 | "name": "Kelvin Omereshone "
10 | }
11 | ],
12 | "files": ["lib"],
13 | "main": "lib/module.js",
14 | "types": "types/index.d.ts",
15 | "scripts": {
16 | "dev": "nuxt example/base",
17 | "lint": "eslint --ext .js,.vue .",
18 | "release": "yarn test && standard-version",
19 | "test": "jest"
20 | },
21 | "dependencies": {
22 | "@chakra-ui/theme-vue": "^0.6.0",
23 | "@chakra-ui/vue": "^0.13.0",
24 | "@emotion/css": "^11.0.0",
25 | "chakra-loader": "latest"
26 | },
27 | "peerDependencies": {
28 | "@nuxtjs/emotion": "0.1.0",
29 | "defu": ">=6.0.0"
30 | },
31 | "devDependencies": {
32 | "@babel/core": "^7.9.6",
33 | "@babel/preset-env": "^7.15.0",
34 | "@commitlint/cli": "^8.3.5",
35 | "@commitlint/config-conventional": "^8.3.4",
36 | "@nuxtjs/emotion": "^0.1.0",
37 | "@nuxtjs/eslint-config": "^3.0.0",
38 | "@nuxtjs/module-test-utils": "latest",
39 | "babel-eslint": "^10.1.0",
40 | "babel-jest": "^25.5.1",
41 | "core-js": "^3.15.1",
42 | "eslint": "^7.12.1",
43 | "husky": "^4.2.5",
44 | "jest": "^25.5.2",
45 | "nuxt": "^2.15.7",
46 | "standard-version": "^8.0.1"
47 | },
48 | "publishConfig": {
49 | "access": "public"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "@nuxtjs"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/test/auto-import.spec.js:
--------------------------------------------------------------------------------
1 | const { setup, loadConfig, get } = require('@nuxtjs/module-test-utils')
2 | const customTheme = require('../example/autoimport/utils/theme')
3 |
4 | describe('module', () => {
5 | let nuxt
6 |
7 | beforeAll(async () => {
8 | ({ nuxt } = await setup(loadConfig(__dirname, '../../example/autoimport')))
9 | }, 120000)
10 |
11 | afterAll(async () => {
12 | await nuxt.close()
13 | })
14 |
15 | test('renders app', async () => {
16 | const html = await get('/')
17 | expect(html).toContain('⚡️ Hello chakra-ui/vue')
18 | })
19 |
20 | test('renders ThemeProvider component', async () => {
21 | const html = await get('/')
22 | expect(html).toContain('data-chakra-component="CThemeProvider"')
23 | })
24 |
25 | test('should accept extended variables nuxt config', async () => {
26 | const html = await get('/')
27 | expect(html).toContain(`data-test-custom-theme-color="${customTheme.colors.brand[200]}`)
28 | })
29 | })
30 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/test/base.spec.js:
--------------------------------------------------------------------------------
1 | const { setup, loadConfig, get } = require('@nuxtjs/module-test-utils')
2 | const customTheme = require('../example/base/utils/theme')
3 |
4 | describe('module', () => {
5 | let nuxt
6 |
7 | beforeAll(async () => {
8 | ({ nuxt } = await setup(loadConfig(__dirname, '../../example/base')))
9 | }, 120000)
10 |
11 | afterAll(async () => {
12 | await nuxt.close()
13 | })
14 |
15 | test('renders app', async () => {
16 | const html = await get('/')
17 | expect(html).toContain('⚡️ Hello chakra-ui/vue')
18 | })
19 |
20 | test('renders ThemeProvider component', async () => {
21 | const html = await get('/')
22 | expect(html).toContain('data-chakra-component="CThemeProvider"')
23 | })
24 |
25 | test('should accept extended variables nuxt config', async () => {
26 | const html = await get('/')
27 | expect(html).toContain(`data-test-custom-theme-color="${customTheme.colors.brand[200]}`)
28 | })
29 | })
30 |
--------------------------------------------------------------------------------
/packages/chakra-ui-nuxt/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import Chakra, { Icon } from "./chakra"
2 | import { Theme } from "../../chakra-ui-theme/types"
3 | import useToast from "../src/CToast"
4 |
5 | declare module '@nuxt/types' {
6 | interface Context {
7 | $toast?: ReturnType
8 | $chakra: {
9 | theme: Theme
10 | icons: { [name: string]: Icon }
11 | }
12 | }
13 |
14 | interface NuxtAppOptions {
15 | $toast?: ReturnType
16 | $chakra: {
17 | theme: Theme
18 | icons: { [name: string]: Icon }
19 | }
20 | }
21 | }
22 |
23 | declare module 'vue/types/vue' {
24 | interface Vue {
25 | $toast: ReturnType
26 | $chakra: {
27 | theme: Theme
28 | icons: { [name: string]: Icon }
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@chakra-ui/theme-vue",
3 | "version": "0.6.0",
4 | "description": "Default theme for @chakra-ui/vue default theme object",
5 | "author": {
6 | "name": "Jonathan Bakebwa",
7 | "email": "codebender828@gmail.com",
8 | "url": "https://jbakebwa.dev"
9 | },
10 | "keywords": [
11 | "chakra",
12 | "ui",
13 | "vue",
14 | "theme"
15 | ],
16 | "homepage": "https://github.com/chakra-ui/chakra-ui-vue#readme",
17 | "license": "MIT",
18 | "main": "dist/index.js",
19 | "module": "src/index.js",
20 | "types": "types/index.d.ts",
21 | "files": [
22 | "dist",
23 | "src"
24 | ],
25 | "publishConfig": {
26 | "access": "public"
27 | },
28 | "repository": {
29 | "type": "git",
30 | "url": "git+https://github.com/chakra-ui/chakra-ui-vue.git"
31 | },
32 | "scripts": {
33 | "dev": "watch 'yarn build' src",
34 | "build": "yarn build:cjs && yarn build:esm",
35 | "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel src -d dist --copy-files",
36 | "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel src -d dist/esm --copy-files",
37 | "test": "echo \"Test: run test on theme\""
38 | },
39 | "babel": {
40 | "presets": [
41 | "@babel/preset-env"
42 | ],
43 | "exclude": [
44 | "node_modules"
45 | ]
46 | },
47 | "bugs": {
48 | "url": "https://github.com/chakra-ui/chakra-ui-vue/issues"
49 | },
50 | "gitHead": "cb7ffb7adeb926b99c75f195300d09780e8910e6"
51 | }
52 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/index.js:
--------------------------------------------------------------------------------
1 | import ChakraUITheme from './theme'
2 | export default ChakraUITheme
3 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/theme/borders.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description These border styles were adapted from [@chakra-ui](https://chakra-ui.com/)
3 | */
4 | const borders = {
5 | none: 0,
6 | '1px': '1px solid',
7 | '2px': '2px solid',
8 | '4px': '4px solid'
9 | }
10 |
11 | export const borderWidths = {
12 | sm: '1px',
13 | md: '2px',
14 | lg: '4px'
15 | }
16 |
17 | export default borders
18 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/theme/breakpoints.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description These breakpoint styles were adapted from [@chakra-ui](https://chakra-ui.com/)
3 | */
4 |
5 | const _breakpoints = {
6 | sm: '30em',
7 | md: '48em',
8 | lg: '62em',
9 | xl: '80em',
10 | '2xl': '96em'
11 | }
12 |
13 | export const createBreakpoints = (
14 | config = {}
15 | ) => {
16 | return { base: '0em', ...config }
17 | }
18 |
19 | const breakpoints = createBreakpoints(_breakpoints)
20 |
21 | export default breakpoints
22 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/theme/index.js:
--------------------------------------------------------------------------------
1 | import colors from './colors'
2 | import typography from './typography'
3 | import borders, { borderWidths } from './borders'
4 | import opacity from './opacity'
5 | import radii from './radii'
6 | import shadows from './shadows'
7 | import sizes, { baseSizes } from './sizes'
8 | import zIndices from './z-indices'
9 | import breakpoints from './breakpoints'
10 |
11 | const space = baseSizes
12 |
13 | const config = {
14 | useSystemColorMode: false,
15 | initialColorMode: 'light',
16 | cssVarPrefix: 'chakra'
17 | }
18 |
19 | const theme = {
20 | breakpoints,
21 | zIndices,
22 | radii,
23 | opacity,
24 | borders,
25 | colors,
26 | ...typography,
27 | borderWidths,
28 | sizes,
29 | shadows,
30 | space,
31 | config
32 | }
33 |
34 | export default theme
35 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/theme/opacity.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description These opacity styles was adapted from [@chakra-ui](https://chakra-ui.com/)
3 | */
4 | const opacity = {
5 | 0: '0',
6 | '20%': '0.2',
7 | '40%': '0.4',
8 | '60%': '0.6',
9 | '80%': '0.8',
10 | '100%': '1'
11 | }
12 |
13 | export default opacity
14 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/theme/radii.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description These radii styles was adapted from [@chakra-ui](https://chakra-ui.com/)
3 | */
4 | const radii = {
5 | none: '0',
6 | sm: '0.125rem',
7 | md: '0.25rem',
8 | lg: '0.5rem',
9 | full: '9999px'
10 | }
11 |
12 | export default radii
13 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/theme/shadows.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description These shadow styles was adapted from [@chakra-ui](https://chakra-ui.com/)
3 | */
4 | const shadows = {
5 | sm: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
6 | md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
7 | lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
8 | xl:
9 | '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
10 | '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
11 | outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
12 | inner: 'inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)',
13 | none: 'none'
14 | }
15 |
16 | export default shadows
17 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/theme/sizes.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description These sizes styles was adapted from [@chakra-ui](https://chakra-ui.com/)
3 | */
4 | export const baseSizes = {
5 | px: '1px',
6 | 0: '0',
7 | 1: '0.25rem',
8 | 2: '0.5rem',
9 | 3: '0.75rem',
10 | 4: '1rem',
11 | 5: '1.25rem',
12 | 6: '1.5rem',
13 | 8: '2rem',
14 | 10: '2.5rem',
15 | 12: '3rem',
16 | 16: '4rem',
17 | 20: '5rem',
18 | 24: '6rem',
19 | 32: '8rem',
20 | 40: '10rem',
21 | 48: '12rem',
22 | 56: '14rem',
23 | 64: '16rem'
24 | }
25 |
26 | const largeSizes = {
27 | full: '100%',
28 | '3xs': '14rem',
29 | '2xs': '16rem',
30 | xs: '20rem',
31 | sm: '24rem',
32 | md: '28rem',
33 | lg: '32rem',
34 | xl: '36rem',
35 | '2xl': '42rem',
36 | '3xl': '48rem',
37 | '4xl': '56rem',
38 | '5xl': '64rem',
39 | '6xl': '72rem'
40 | }
41 |
42 | const containers = {
43 | sm: '640px',
44 | md: '768px',
45 | lg: '1024px',
46 | xl: '1280px'
47 | }
48 |
49 | const sizes = {
50 | ...baseSizes,
51 | ...largeSizes,
52 | containers
53 | }
54 |
55 | export default sizes
56 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/theme/typography.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description This typography style was adapted from [@chakra-ui](https://chakra-ui.com/)
3 | */
4 | const typography = {
5 | letterSpacings: {
6 | tighter: '-0.05em',
7 | tight: '-0.025em',
8 | normal: '0',
9 | wide: '0.025em',
10 | wider: '0.05em',
11 | widest: '0.1em'
12 | },
13 | lineHeights: {
14 | normal: 'normal',
15 | none: '1',
16 | shorter: '1.25',
17 | short: '1.375',
18 | base: '1.5',
19 | tall: '1.625',
20 | taller: '2'
21 | },
22 | fontWeights: {
23 | hairline: 100,
24 | thin: 200,
25 | light: 300,
26 | normal: 400,
27 | medium: 500,
28 | semibold: 600,
29 | bold: 700,
30 | extrabold: 800,
31 | black: 900
32 | },
33 | fonts: {
34 | heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
35 | body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
36 | mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'
37 | },
38 | fontSizes: {
39 | xs: '0.75rem',
40 | sm: '0.875rem',
41 | md: '1rem',
42 | lg: '1.125rem',
43 | xl: '1.25rem',
44 | '2xl': '1.5rem',
45 | '3xl': '1.875rem',
46 | '4xl': '2.25rem',
47 | '5xl': '3rem',
48 | '6xl': '4rem'
49 | }
50 | }
51 |
52 | export default typography
53 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/theme/utils/colors.js:
--------------------------------------------------------------------------------
1 | // Here we shall have files functions that manipulate colors based on the theme on a per component basis
2 | /**
3 | * An example would be in the `Badge` component
4 | * ```js
5 | * import { addOpacity } from '@/lib/theme/utils'
6 | * let foo = addOpacity('green')
7 | * ```
8 | */
9 |
--------------------------------------------------------------------------------
/packages/chakra-ui-theme/src/theme/z-indices.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @description This typography style was adapted from [@chakra-ui](https://chakra-ui.com/)
3 | */
4 | const zIndices = {
5 | hide: -1,
6 | auto: 'auto',
7 | base: 0,
8 | docked: 10,
9 | dropdown: 1000,
10 | sticky: 1100,
11 | banner: 1200,
12 | overlay: 1300,
13 | modal: 1400,
14 | popover: 1500,
15 | skipLink: 1600,
16 | toast: 1700,
17 | tooltip: 1800
18 | }
19 |
20 | export default zIndices
21 |
--------------------------------------------------------------------------------
/tests/test-utils/index.js:
--------------------------------------------------------------------------------
1 | export * from './test-utils'
2 |
--------------------------------------------------------------------------------
/tests/test-utils/module-mock.js:
--------------------------------------------------------------------------------
1 | export default () => {}
2 |
--------------------------------------------------------------------------------
/tests/test-utils/style-mock.js:
--------------------------------------------------------------------------------
1 | module.exports = {}
2 |
--------------------------------------------------------------------------------
/website/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@vue/babel-preset-jsx"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/website/.eslintignore:
--------------------------------------------------------------------------------
1 | **/dist/*
2 | sw.js
3 |
4 | **/packages/chakra-ui-theme/*
--------------------------------------------------------------------------------
/website/.gitignore:
--------------------------------------------------------------------------------
1 | .now
--------------------------------------------------------------------------------
/website/.nowignore:
--------------------------------------------------------------------------------
1 | .nuxt
--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
1 | # chakra-ui-docs
2 |
3 | > Chakra UI Vue documentation site
4 |
5 | ## Build Setup
6 |
7 | ``` bash
8 | # install dependencies
9 | $ yarn install
10 |
11 | # serve with hot reload at localhost:3000
12 | $ yarn dev
13 |
14 | # build for production and launch server
15 | $ yarn build
16 | $ yarn start
17 |
18 | # generate static project
19 | $ yarn generate
20 | ```
21 |
22 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
23 |
--------------------------------------------------------------------------------
/website/assets/logo/chakra-ui-vue-blue.svg:
--------------------------------------------------------------------------------
1 | chakra-ui-vue-blue chakr a chakra-ui-vue-logo chakr a
2 |
6 |
7 | ❤️ Contribute to this page
8 |
9 |
10 | Caught a mistake or want to contribute to the documentation?
11 | Edit this page on GitHub!
12 |
13 |
14 |
15 |
16 |
17 |
39 |
--------------------------------------------------------------------------------
/website/components/Lorem.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero eaque optio, nam nulla praesentium eos perferendis iusto nesciunt ipsa harum!
4 |
5 |
6 |
7 |
12 |
--------------------------------------------------------------------------------
/website/components/MobileNav.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
23 |
54 |
--------------------------------------------------------------------------------
/website/components/Sidebar.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
15 |
16 |
17 |
29 |
--------------------------------------------------------------------------------
/website/components/code/code-group/code-tab.vue:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/website/components/code/index.js:
--------------------------------------------------------------------------------
1 | import CodeBlock from './code-block.vue'
2 | import LiveEditor from './live-editor/live-editor.vue'
3 | import CodeGroup from './code-group/code-group.vue'
4 | import CodeTab from './code-group/code-tab.vue'
5 | import { CopyTextMixin } from './mixins'
6 |
7 | const MDXCodeBlock = (props) => {
8 | const isReadOnly = !props.live
9 | const lang = props.className || props.lang || 'vue'
10 |
11 | return {
12 | name: 'CodeBlock',
13 | extend: CodeBlock,
14 | mixins: [CopyTextMixin],
15 | props: {
16 | ...CodeBlock.props,
17 | isReadOnly: {
18 | type: Boolean,
19 | default: isReadOnly
20 | },
21 | lang: {
22 | type: String,
23 | default: lang
24 | }
25 | },
26 | render: CodeBlock.render
27 | }
28 | }
29 |
30 | export {
31 | CodeBlock,
32 | CodeGroup,
33 | CodeTab,
34 | LiveEditor,
35 | MDXCodeBlock
36 | }
37 |
--------------------------------------------------------------------------------
/website/components/code/mixins.js:
--------------------------------------------------------------------------------
1 | import copy from 'copy-to-clipboard'
2 |
3 | export const CopyTextMixin = {
4 | data () {
5 | return {
6 | text: undefined,
7 | copyTimeout: null,
8 | copyButtonText: 'Copy'
9 | }
10 | },
11 | methods: {
12 | async copy () {
13 | // Copy text to clipboard
14 | await copy(this.text)
15 |
16 | // Handle timeouts for copy button text
17 | this.copyTimeout && clearTimeout(this.copyTimeout)
18 |
19 | this.copyButtonText = 'Copied!'
20 | this.copyTimeout = setTimeout(() => {
21 | this.copyButtonText = 'Copy'
22 | clearTimeout(this.copyTimeout)
23 | }, 1000)
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/website/components/code/utils.js:
--------------------------------------------------------------------------------
1 | export function getLanguage (string) {
2 | return string.slice(string.indexOf('-') + 1)
3 | }
4 |
5 | export function tryParseBoolean (value) {
6 | if (typeof value === 'boolean')
7 | return value
8 |
9 | if (typeof value === 'string')
10 | return value.toLocaleLowerCase() === 'true'
11 |
12 | if (typeof value === 'number')
13 | return !!value
14 |
15 | return null
16 | }
17 |
18 | export function hasValue (value) {
19 | return ![null, undefined].includes(value)
20 | }
21 |
--------------------------------------------------------------------------------
/website/components/components.js:
--------------------------------------------------------------------------------
1 | /**
2 | * NOTE:
3 | *
4 | * Dear maintainers,
5 | * Components listed in this file should be listed alphabetically. Thanks :)
6 | */
7 |
8 | const components = [
9 | 'Accordion',
10 | 'Alert',
11 | 'AlertDialog',
12 | 'AspectRatioBox',
13 | 'Avatar',
14 | 'Badge',
15 | 'Box',
16 | 'Breadcrumb',
17 | 'Button',
18 | 'Checkbox',
19 | 'CircularProgress',
20 | 'CloseButton',
21 | 'Code',
22 | 'Collapse',
23 | 'ControlBox',
24 | 'Divider',
25 | 'Drawer',
26 | 'Editable',
27 | 'Flex',
28 | 'FormControl',
29 | 'Grid',
30 | 'Heading',
31 | 'Icon',
32 | 'IconButton',
33 | 'Image',
34 | 'Input',
35 | 'Link',
36 | 'List',
37 | 'Menu',
38 | 'Modal',
39 | 'NumberInput',
40 | 'Popover',
41 | 'Progress',
42 | 'PseudoBox',
43 | 'Radio',
44 | 'SimpleGrid',
45 | 'Select',
46 | 'Slider',
47 | 'Spinner',
48 | 'Stat',
49 | 'Stack',
50 | 'Switch',
51 | 'Tabs',
52 | 'Tag',
53 | 'Text',
54 | 'Textarea',
55 | 'Toast',
56 | 'Tooltip'
57 | ]
58 | export default components
59 |
--------------------------------------------------------------------------------
/website/components/internal-icons.js:
--------------------------------------------------------------------------------
1 | export { default as icons } from '@chakra-ui/vue/src/lib/internal-icons'
2 |
--------------------------------------------------------------------------------
/website/components/nav-links.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/chakra-ui-vue/74618e9b619789d86303ea99f2a665792ea93007/website/components/nav-links.js
--------------------------------------------------------------------------------
/website/css/fonts/Inter-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/chakra-ui-vue/74618e9b619789d86303ea99f2a665792ea93007/website/css/fonts/Inter-Bold.woff2
--------------------------------------------------------------------------------
/website/css/fonts/Inter-Light.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/chakra-ui-vue/74618e9b619789d86303ea99f2a665792ea93007/website/css/fonts/Inter-Light.woff2
--------------------------------------------------------------------------------
/website/css/fonts/Inter-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chakra-ui/chakra-ui-vue/74618e9b619789d86303ea99f2a665792ea93007/website/css/fonts/Inter-Regular.woff2
--------------------------------------------------------------------------------
/website/css/fonts/fonts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Inter';
3 | font-style: normal;
4 | font-weight: 300;
5 | font-display: swap;
6 | src: url("Inter-Light.woff2?v=3.12") format("woff2");
7 | }
8 |
9 | @font-face {
10 | font-family: 'Inter';
11 | font-style: normal;
12 | font-weight: 400;
13 | font-display: swap;
14 | src: url("Inter-Regular.woff2?v=3.12") format("woff2");
15 |
16 | }
17 | @font-face {
18 | font-family: 'Inter';
19 | font-style: normal;
20 | font-weight: 700;
21 | font-display: swap;
22 | src: url("Inter-Bold.woff2?v=3.12") format("woff2");
23 | }
24 |
--------------------------------------------------------------------------------
/website/css/page.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | }
5 |
6 | a {
7 | color: #3caa79;
8 | }
9 |
10 | .prism-editor__code {
11 | padding-top: 16px;
12 | }
--------------------------------------------------------------------------------
/website/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "paths": {
5 | "~/*": ["./*"],
6 | "@/*": ["./*"],
7 | "~~/*": ["./*"],
8 | "@@/*": ["./*"]
9 | }
10 | },
11 | "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 |
--------------------------------------------------------------------------------
/website/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | This directory contains your Application Layouts.
6 |
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 |
--------------------------------------------------------------------------------
/website/layouts/home.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
14 |
17 |
19 |
20 |
21 |
22 |
23 |
24 |
39 |
--------------------------------------------------------------------------------
/website/modules/routes.js:
--------------------------------------------------------------------------------
1 | export default function (options = {}) {
2 | // Add 'mdx' to build extensions
3 | this.options.build.additionalExtensions = ['mdx']
4 |
5 | if (this.options.extensions) {
6 | // Add `mdx` to `extensions` option
7 | const extensions = this.options.extensions
8 | !extensions.includes('mdx') && extensions.push('mdx')
9 |
10 | // Add 'mdx' to `build.additionalExtensions`
11 | this.options.build.additionalExtensions = ['mdx']
12 |
13 | // Extend webpack config
14 | this.extendBuild((config) => {
15 | // Here we '.mdx' to webpack's `resolve.extensions` option.
16 | if (config.resolve.extensions) {
17 | config.resolve.extensions.push('.mdx')
18 | } else {
19 | config.resolve.extensions = ['.mdx']
20 | }
21 |
22 | // Use `@mdx-js/vue-loader` for `.mdx` files.
23 | config.module.rules.push({
24 | test: /\.mdx$/,
25 | use: [
26 | 'babel-loader',
27 | '@mdx-js/vue-loader'
28 | ]
29 | })
30 | })
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/website/now.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2
3 | }
4 |
5 |
--------------------------------------------------------------------------------
/website/pages/accessibility.mdx:
--------------------------------------------------------------------------------
1 | # Accessibility
2 |
3 | Chakra UI is built from the ground up with accessibility in mind. We do the
4 | heavy-lifting for you in order to allow you to focus on building your applications.
5 |
6 | All authored components are compliant with the WAI-ARIA standards for authored components.
7 |
8 | Hello world
26 | ```
27 |
28 | ### Colors
29 |
30 | You can change the color scheme of the component by passing the `variantColor`
31 | prop.
32 |
33 | ```vue live=true
34 |
35 | console.log(welcome)
36 | var chakra = 'awesome!'>
37 | npm install chakra
38 |
39 | ```
40 |
41 | ## Props
42 |
43 | | Name | Type | Default | Description |
44 | | -------------- | ----------------- | ------- | ------------------------------------- |
45 | | `variantColor` | `string` | | The color scheme to use for the code. |
46 |
47 | ## Slots
48 | | Name | Description |
49 | | ---------- | --------------------------------------------------------------------------------- |
50 | | default | Used for the `CCode` content |
51 |
--------------------------------------------------------------------------------
/website/pages/divider.mdx:
--------------------------------------------------------------------------------
1 | # Divider
2 |
3 | Dividers are used to display a thin horizontal or vertical line.
4 |
5 | Divider composes `CBox` so you can use all the style props and add responsive
6 | styles as well. It renders an `
31 | Part 1
32 | Part 2
34 |
35 | ```
36 |
37 | ### Changing the border-color
38 |
39 | To change the border color of the divider, as you can guess, pass the
40 | `borderColor` prop.
41 |
42 | ```vue live=true
43 |
44 | Part 1
45 | Part 2
47 |
48 | ```
49 |
50 | ## Props
51 |
52 | The `CDivider` composes the [Box](/box) component, so you can pass all `CBox` props.
53 |
54 | | Name | Type | Default | Description |
55 | | ------------- | ------------------------ | ------------ | --------------- |
56 | | `orientation` | `horizontal`, `vertical` | `horizontal` | The orientation |
57 |
--------------------------------------------------------------------------------
/website/pages/flex.mdx:
--------------------------------------------------------------------------------
1 | import SEO from "../components/SEO";
2 |
3 |
35 |
36 | Box 1
37 |
38 |
39 |
40 | Box 2
41 |
42 |
43 |
44 |
45 | Box 3
46 |
47 |
48 |
49 | ```
50 |
51 | ## Props
52 |
53 | > `CFlex` composes the `CBox` component with these extra props. So all Box props apply here. See Box component for list of props
54 |
--------------------------------------------------------------------------------
/website/pages/recipes.mdx:
--------------------------------------------------------------------------------
1 | # Recipes (WIP)
2 |
3 | > This recipes page is still a WIP!
4 |
5 | Check out our Chakra UI Vue [starter projects](/starters)
6 |
7 |
31 | Collected Fees
32 | $500.00
33 | Feb 12 - Feb 28
34 |
35 | ```
36 |
37 | ### Stat with Indicator
38 |
39 | ```vue live=true
40 |
41 |
42 | Sent
43 | 380,610
44 |
45 |
48 |
49 |
50 | Clicked
51 | 45
52 |
53 |
56 |
57 |
58 | ```
59 |
60 | ## Props
61 |
62 | - CStatLabel, CStatHelperText, CStatNumber composes [CText](/text) component
63 | - CStatArrow composes [CIcon](/icon) component
64 | - CStat, CStatGroup composes [CBox](/box) component
65 |
--------------------------------------------------------------------------------
/website/pages/storybook.mdx:
--------------------------------------------------------------------------------
1 | import SEO from '../components/SEO'
2 |
3 | chakra-ui-vue-logo-icon 
48 |