Release: Bug Fixes and Dependency Updates

.changeset/empty-dryers-rescue.md

@@ -0,0 +1,9 @@
+---
+'nuxt-js': minor
+'@chakra-ui/vue': minor
+'@chakra-ui/nuxt': minor
+'@chakra-ui/theme-vue': minor
+'chakra-ui-docs': minor
+---
+
+fix: Include all position values in CToast, fix: import in custom theme code snippet

package.json

@@ -100,7 +100,6 @@
  "@vue/cli-plugin-eslint": "^3.11.0",
  "@vue/cli-plugin-pwa": "^3.11.0",
  "@vue/cli-plugin-unit-jest": "^3.11.0",
- "@vue/devtools": "^5.3.3",
  "@vue/eslint-config-standard": "^4.0.0",
  "@vue/test-utils": "1.0.0-beta.29",
  "add": "^2.0.6",
@@ -126,7 +125,7 @@
  "copy-to-clipboard": "^3.3.1",
  "core-js": "^3.15.1",
  "cross-env": "^7.0.2",
- "defu": "^2.0.4",
+ "defu": "^6.0.0",
  "dotenv-defaults": "^1.1.1",
  "eslint": "^7.12.1",
  "eslint-config-prettier": "^6.10.0",
@@ -165,7 +164,7 @@
  "rollup-plugin-json": "^4.0.0",
  "rollup-plugin-jsx": "^1.0.3",
  "rollup-plugin-node-resolve": "^5.2.0",
- "rollup-plugin-scss": "^2.1.0",
+ "rollup-plugin-scss": "3",
  "rollup-plugin-terser": "^5.1.2",
  "rollup-plugin-vue": "^5.1.4",
  "sass-loader": "^8.0.2",
@@ -196,5 +195,8 @@
  "styled-system",
  "kittens ;)"
  ],
- "version": "0.0.0"
+ "version": "0.0.0",
+ "devDependencies": {
+ "sass": "^1.52.3"
+ }
 }

packages/chakra-ui-core/src/CToast/CToast.d.ts

@@ -1,5 +1,5 @@
 interface ChakraToastOptions {
- position?: 'bottom' | 'top' | 'right' | 'left'
+ position?: 'bottom' | 'top' | 'right' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  duration?: number
  render?: (options: { onClose?: VoidFunction, id: any }) => any
  title?: string

packages/chakra-ui-nuxt/lib/module.js

@@ -1,5 +1,5 @@
 const { resolve } = require('path')
-const defu = require('defu')
+const { defu } = require('defu')
 const { parsePackIcons, internalIcons, createServerDirective } = require('@chakra-ui/vue')
 const defaultTheme = require('@chakra-ui/theme-vue')
 const { ChakraLoaderPlugin } = require('chakra-loader')

packages/chakra-ui-nuxt/package.json

@@ -25,7 +25,8 @@
  "chakra-loader": "latest"
  },
  "peerDependencies": {
- "@nuxtjs/emotion": "^0.1.0"
+ "@nuxtjs/emotion": "^0.1.0",
+ "defu": ">=6.0.0"
  },
  "devDependencies": {
  "@babel/core": "^7.9.6",

website/pages/circularprogress.mdx

@@ -1,21 +1,20 @@
 import SEO from "../components/SEO";
 
-<SEO title="Circular Progress" description="Circular Progress is used to indicates the progress for determinate and indeterminate processes." />
-
-
-
+<SEO
+ title="Circular Progress"
+ description="Circular Progress is used to indicates the progress for determinate and indeterminate processes."
+/>
 
 # Circular Progress
+
 The Circular Progress component is used to indicates the progress for both determinate and indeterminate processes.
 
 - Determinate progress fills the circular track with color, as the indicator
  moves from 0 to 360 degrees.
 - Indeterminate progress grows and shrinks the indicator while moving along the
  circular track.
 
-
-See `CCircularProgress`'s <a target="_blank" href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CCircularProgress/accesibility.md">accessibility report</a>
-
+See `CCircularProgress`'s <a target="_blank" href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CCircularProgress/accessibility.md">accessibility report</a>
 
 <carbon-ad />
 
@@ -25,14 +24,12 @@ See `CCircularProgress`'s <a target="_blank" href="https://github.com/chakra-ui/
 import { CCircularProgress, CCircularProgressLabel } from "@chakra-ui/vue";
 ```
 
-
 ## Usage
 
 ```vue live=true
 <c-circular-progress :value="80" />
 ```
 
-
 ### Changing the size
 
 You can add `size` prop to the progress bar to add a custom size.
@@ -79,7 +76,7 @@ Setting the progress to indeterminate means you're not able to determine the
 `value` upfront, so won't need to pass the `value` prop.
 
 ```vue live=true
-<c-circular-progress is-indeterminate/>
+<c-circular-progress is-indeterminate />
 ```
 
 ### Accessibility
@@ -90,19 +87,20 @@ Setting the progress to indeterminate means you're not able to determine the
 
 ## Props
 
-| Name | Type  | Default | Description  |
-| --------------- | ----------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
-| size | `string`  | `48px` | The size of the circular progress in CSS units  |
-| max | `number`  | `100` | Maximum value defining 100% progress made (must be higher than 'min')  |
-| min | `number`  | `0` | Minimum value defining 'no progress' (must be lower than 'max')  |
-| value | `number`  | | Current progress (must be between min/max)  |
-| isIndeterminate | `boolean`  | | Puts the component into 'indeterminate' state; Ignores 'value' prop  |
-| thickness | `number`  | `0.2` | The thickness of progress indicator as a ratio of `size`. Must be between `0` and `1`  |
-| angle | `number`  | `0` | Angle to rotate progress indicator by  |
-| trackColor | `string`  | `gray` | The color name of the progress track. Use a color key in the theme object  |
-| color | `string`  | `blue` | The color of the progress indicator. Use a color key in the theme object  |
+| Name | Type | Default | Description |
+| --------------- | --------- | ------- | ------------------------------------------------------------------------------------- |
+| size | `string` | `48px` | The size of the circular progress in CSS units |
+| max | `number` | `100` | Maximum value defining 100% progress made (must be higher than 'min') |
+| min | `number` | `0` | Minimum value defining 'no progress' (must be lower than 'max') |
+| value | `number` | | Current progress (must be between min/max) |
+| isIndeterminate | `boolean` | | Puts the component into 'indeterminate' state; Ignores 'value' prop |
+| thickness | `number` | `0.2` | The thickness of progress indicator as a ratio of `size`. Must be between `0` and `1` |
+| angle | `number` | `0` | Angle to rotate progress indicator by |
+| trackColor | `string` | `gray` | The color name of the progress track. Use a color key in the theme object |
+| color | `string` | `blue` | The color of the progress indicator. Use a color key in the theme object |
 
 ## Slots
-| Name | Description |
-| ---------- | --------------------------------------------------------------------------------- |
-| default | Used for the `CCircularProgressLabel` to display the current progress percentage |
+
+| Name | Description |
+| ------- | -------------------------------------------------------------------------------- |
+| default | Used for the `CCircularProgressLabel` to display the current progress percentage |