diff --git a/.eslintrc.yml b/.eslintrc.yml index eefae8c9..7d9fb3ff 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -7,16 +7,16 @@ extends: - plugin:prettier/recommended - plugin:vue/essential - plugin:vue/vue3-essential - - '@vue/typescript' + - "@vue/typescript" parser: vue-eslint-parser parserOptions: - parser: '@typescript-eslint/parser' + parser: "@typescript-eslint/parser" ecmaVersion: 2020 sourceType: module plugins: - - '@typescript-eslint' + - "@typescript-eslint" rules: - '@typescript-eslint/member-delimiter-style': + "@typescript-eslint/member-delimiter-style": - error - multiline: delimiter: none @@ -24,4 +24,4 @@ rules: singleline: delimiter: comma requireLast: false - vue/no-multiple-template-root: 'off' + vue/no-multiple-template-root: "off" diff --git a/.size-limit.json b/.size-limit.json index 77d5dd2e..081285c7 100644 --- a/.size-limit.json +++ b/.size-limit.json @@ -1,7 +1,7 @@ [ { "path": "packages/core/dist/chakra-ui-vue-next.cjs.prod.js", - "limit": "85 KB", + "limit": "86 KB", "ignore": [ "vue", "@emotion/css" diff --git a/babel.config.js b/babel.config.js index 022fd87b..e5723e94 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,26 +1,26 @@ const BABEL_ENV = process.env.BABEL_ENV -const isCommonJS = BABEL_ENV !== undefined && BABEL_ENV === 'cjs' -const isESM = BABEL_ENV !== undefined && BABEL_ENV === 'esm' +const isCommonJS = BABEL_ENV !== undefined && BABEL_ENV === "cjs" +const isESM = BABEL_ENV !== undefined && BABEL_ENV === "esm" -const __TEST__ = process.env.NODE_ENV === 'test' +const __TEST__ = process.env.NODE_ENV === "test" const baseConfig = function (api) { api.cache(true) const presets = [ [ - '@babel/env', + "@babel/env", { loose: true, - modules: isCommonJS ? 'commonjs' : false, + modules: isCommonJS ? "commonjs" : false, targets: { esmodules: isESM ? true : undefined, }, }, ], - '@babel/preset-typescript', + "@babel/preset-typescript", ] - const plugins = ['@vue/babel-plugin-jsx'] + const plugins = ["@vue/babel-plugin-jsx"] return { presets, @@ -33,13 +33,13 @@ const testConfig = { test: { presets: [ [ - '@babel/preset-env', + "@babel/preset-env", { - targets: { node: 'current' }, + targets: { node: "current" }, }, ], ], - plugins: ['@vue/babel-plugin-jsx'], + plugins: ["@vue/babel-plugin-jsx"], }, }, } diff --git a/build/components.json b/build/components.json new file mode 100644 index 00000000..eef7f664 --- /dev/null +++ b/build/components.json @@ -0,0 +1,1413 @@ +{ + "CReset": {}, + "CAlert": { + "name": "CAlert", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "status": { + "type": [ + null + ], + "default": "info" + }, + "colorScheme": { + "type": [ + null + ] + }, + "styleConfig": { + "type": [ + null + ] + }, + "variant": { + "type": [ + null + ], + "default": "solid" + } + } + }, + "CAlertDescription": { + "name": "CAlertDescription" + }, + "CAlertIcon": { + "name": "CAlertIcon", + "props": { + "icon": { + "type": [ + null + ] + } + } + }, + "CAlertTitle": { + "name": "CAlertTitle" + }, + "CBreadcrumb": { + "name": "CBreadcrumb", + "props": { + "separator": { + "type": [ + null, + null, + null, + null + ], + "default": "/" + }, + "spacing": { + "type": [ + null, + null, + null + ], + "default": "0.5rem" + }, + "as": { + "type": [ + null, + null + ], + "default": "nav" + } + } + }, + "CBreadcrumbItem": { + "name": "CBreadcrumbItem", + "props": { + "separator": { + "type": [ + null, + null, + null, + null + ], + "default": "/" + }, + "spacing": { + "type": [ + null, + null, + null + ], + "default": "0.5rem" + }, + "as": { + "type": [ + null, + null + ], + "default": "nav" + } + } + }, + "CBreadcrumbLink": { + "name": "CBreadcrumbLink", + "props": {} + }, + "CBreadcrumbSeparator": { + "props": { + "spacing": { + "type": [ + null, + null, + null + ], + "default": "0.5rem" + } + }, + "name": "CBreadcrumbSeparator" + }, + "CButton": { + "name": "CButton", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "button" + }, + "iconSpacing": { + "type": [ + null, + null, + null + ], + "default": "0.5rem" + } + } + }, + "CButtonGroup": { + "name": "CButtonGroup", + "props": { + "spacing": { + "type": [ + null, + null, + null + ], + "default": 3 + } + } + }, + "CIconButton": { + "name": "CIconButton", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "button" + }, + "iconSpacing": { + "type": [ + null, + null, + null + ], + "default": "0.5rem" + }, + "ariaLabel": { + "required": true + } + } + }, + "CCloseButton": { + "props": { + "as": { + "type": [ + null, + null + ], + "default": "button" + }, + "isDisabled": { + "type": [ + null + ], + "default": false + }, + "size": [ + null + ], + "styleConfig": [ + null + ] + } + }, + "CCode": { + "props": { + "as": { + "type": [ + null, + null + ], + "default": "code" + } + } + }, + "CFlex": { + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "align": [ + null, + null, + null + ], + "justify": [ + null, + null, + null + ], + "wrap": [ + null, + null, + null + ], + "direction": { + "type": [ + null, + null, + null + ], + "default": "row" + }, + "basis": [ + null, + null, + null + ], + "grow": [ + null, + null, + null + ], + "shrink": [ + null, + null, + null + ] + } + }, + "CFocusLock": { + "name": "CFocusLock", + "emits": [ + "activate", + "deactivate" + ], + "props": { + "finalFocusRef": [ + null, + null, + null + ], + "initialFocusRef": [ + null, + null, + null + ], + "autoFocus": { + "default": true + }, + "escapeDeactivates": { + "default": false + }, + "clickOutsideDeactivates": { + "default": false + }, + "allowOutsideClick": { + "default": false + }, + "restoreFocus": { + "default": true + } + } + }, + "CFormControl": { + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + } + } + }, + "CFormErrorIcon": { + "name": "CFormErrorIcon", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "svg" + }, + "name": { + "type": [ + null + ] + }, + "size": { + "type": [ + null + ], + "default": "1em" + } + } + }, + "CFormErrorMessage": { + "name": "CFormErrorMessage", + "props": {} + }, + "CFormHelperText": { + "name": "" + }, + "CFormLabel": { + "name": "CFormLabel", + "props": {} + }, + "CRequiredIndicator": { + "name": "CRequiredIndicator" + }, + "CIcon": { + "props": { + "as": { + "type": [ + null, + null + ], + "default": "svg" + }, + "name": { + "type": [ + null + ] + }, + "size": { + "type": [ + null + ], + "default": "1em" + } + } + }, + "CInput": { + "name": "CInput", + "props": { + "focusBorderColor": [ + null, + null, + null + ], + "isFullWidth": [ + null, + null + ], + "errorBorderColor": [ + null, + null, + null + ] + }, + "emits": [ + "update:modelValue", + "input", + "change" + ], + "id": "CInput" + }, + "CInputAddon": { + "name": "CInputAddon", + "props": { + "placement": { + "default": "left" + } + } + }, + "CInputGroup": { + "name": "CInputGroup", + "props": {} + }, + "CInputLeftAddon": { + "name": "CInputLeftAddon", + "id": "CInputLeftAddon" + }, + "CInputLeftElement": { + "name": "CInputLeftElement", + "id": "CInputLeftElement" + }, + "CInputRightAddon": { + "name": "CInputRightAddon", + "id": "CInputRightAddon" + }, + "CInputRightElement": { + "name": "CInputRightElement", + "id": "CInputRightElement" + }, + "CAspectRatio": { + "name": "CAspectRatio", + "props": { + "ratio": { + "type": [ + null + ], + "default": 1.3333333333333333 + } + } + }, + "CBadge": { + "name": "CBadge", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + } + } + }, + "CBox": { + "name": "CBox", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + } + } + }, + "CCenter": { + "name": "CCenter", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + } + } + }, + "CCircle": { + "name": "CCircle" + }, + "CContainer": { + "name": "CContainer", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "centerContent": { + "type": [ + null + ] + } + } + }, + "CDivider": { + "name": "CDivider", + "props": { + "orientation": { + "type": [ + null + ], + "default": "horizontal" + } + } + }, + "CGrid": { + "name": "CGrid", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "templateColumns": [ + null, + null, + null, + null + ], + "gap": [ + null, + null, + null, + null + ], + "rowGap": [ + null, + null, + null, + null + ], + "columnGap": [ + null, + null, + null, + null + ], + "autoFlow": [ + null, + null, + null, + null + ], + "autoRows": [ + null, + null, + null, + null + ], + "autoColumns": [ + null, + null, + null, + null + ], + "templateRows": [ + null, + null, + null, + null + ], + "templateAreas": [ + null, + null, + null, + null + ], + "area": [ + null, + null, + null, + null + ], + "column": [ + null, + null, + null, + null + ], + "row": [ + null, + null, + null, + null + ] + } + }, + "CGridItem": { + "name": "CGridItem", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "colSpan": [ + null, + null, + null, + null + ], + "colStart": [ + null, + null, + null, + null + ], + "colEnd": [ + null, + null, + null, + null + ], + "rowStart": [ + null, + null, + null, + null + ], + "rowEnd": [ + null, + null, + null, + null + ], + "rowSpan": [ + null, + null, + null, + null + ] + } + }, + "CHStack": { + "name": "CHStack", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "align": [ + null, + null, + null + ], + "justify": [ + null, + null, + null + ], + "wrap": [ + null, + null, + null + ], + "spacing": { + "type": [ + null, + null, + null, + null + ], + "default": "0.5rem" + }, + "direction": [ + null, + null, + null + ], + "divider": [ + null, + null + ], + "shouldWrapChildren": [ + null + ], + "isInline": [ + null + ] + } + }, + "CHeading": { + "name": "CHeading", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "h2" + } + } + }, + "CKbd": { + "name": "CKbd", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "h2" + } + } + }, + "CLink": { + "name": "CLink", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "a" + } + } + }, + "CLinkBox": { + "name": "CLinkBox", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + } + } + }, + "CLinkOverlay": { + "name": "CLinkOverlay", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "a" + } + } + }, + "CList": { + "name": "CList", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "ul" + }, + "styleType": { + "type": [ + null, + null, + null + ], + "default": "none" + }, + "stylePosition": [ + null, + null, + null + ], + "spacing": [ + null, + null, + null, + null + ] + } + }, + "CListIcon": { + "name": "CListIcon" + }, + "CListItem": { + "name": "CListItem" + }, + "COrderedList": { + "name": "COrderedList" + }, + "CSimpleGrid": { + "name": "CSimpleGrid", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "ul" + }, + "minChildWidth": [ + null, + null, + null, + null + ], + "columns": [ + null, + null, + null, + null + ], + "spacing": [ + null, + null, + null, + null + ], + "spacingX": [ + null, + null, + null, + null + ], + "spacingY": [ + null, + null, + null, + null + ] + } + }, + "CSpacer": { + "name": "CSpacer" + }, + "CSquare": { + "name": "CSquare", + "props": { + "size": [ + null, + null, + null + ], + "centerContent": { + "type": [ + null + ], + "default": true + } + } + }, + "CStack": { + "name": "CStack", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "align": [ + null, + null, + null + ], + "justify": [ + null, + null, + null + ], + "wrap": [ + null, + null, + null + ], + "spacing": { + "type": [ + null, + null, + null, + null + ], + "default": "0.5rem" + }, + "direction": [ + null, + null, + null + ], + "divider": [ + null, + null + ], + "shouldWrapChildren": [ + null + ], + "isInline": [ + null + ] + } + }, + "CStackDivider": { + "name": "CStackDivider", + "inheritAttrs": false + }, + "CStackItem": { + "name": "CStackItem" + }, + "CText": { + "name": "CText", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "p" + }, + "align": [ + null, + null, + null, + null + ], + "decoration": [ + null, + null, + null, + null + ], + "casing": [ + null, + null, + null, + null + ] + } + }, + "CUnorderedList": { + "name": "CUnorderedList" + }, + "CVStack": { + "name": "CVStack", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "align": [ + null, + null, + null + ], + "justify": [ + null, + null, + null + ], + "wrap": [ + null, + null, + null + ], + "spacing": { + "type": [ + null, + null, + null, + null + ], + "default": "0.5rem" + }, + "direction": [ + null, + null, + null + ], + "divider": [ + null, + null + ], + "shouldWrapChildren": [ + null + ], + "isInline": [ + null + ] + } + }, + "CWrap": { + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "spacing": [ + null, + null, + null, + null + ], + "justify": [ + null, + null, + null, + null + ], + "align": [ + null, + null, + null, + null + ], + "direction": [ + null, + null, + null, + null + ], + "shouldWrapChildren": [ + null, + null, + null, + null + ] + } + }, + "CWrapItem": {}, + "CAlertDialog": { + "name": "CAlertDialog", + "props": { + "modelValue": { + "default": false + }, + "closeOnOverlayClick": { + "default": true + }, + "closeOnEsc": { + "default": true + }, + "useInert": { + "default": true + }, + "autoFocus": { + "default": true + }, + "trapFocus": { + "default": true + }, + "initialFocusRef": [ + null, + null, + null + ], + "finalFocusRef": [ + null, + null, + null + ], + "returnFocusOnClose": { + "default": true + }, + "blockScrollOnMount": { + "default": true + }, + "scrollBehaviour": { + "default": "outside" + }, + "motionPreset": { + "default": "scale" + }, + "onUpdate:modelValue": {}, + "label": { + "default": "modal" + }, + "leastDestructiveRef": [ + null, + null + ] + }, + "emits": [ + "update:modelValue", + "close", + "escape" + ] + }, + "CAlertDialogBody": { + "name": "CModalBody" + }, + "CAlertDialogCloseButton": { + "name": "CModalCloseButton", + "emits": [ + "click" + ] + }, + "CAlertDialogContent": { + "name": "CAlertDialogContent", + "inheritAttrs": false + }, + "CAlertDialogFooter": { + "name": "CModalFooter" + }, + "CAlertDialogHeader": { + "name": "CModalHeader" + }, + "CAlertDialogOverlay": { + "name": "CModalOverlay" + }, + "CDrawer": { + "name": "CDrawer", + "props": { + "modelValue": { + "default": false + }, + "closeOnOverlayClick": { + "default": true + }, + "closeOnEsc": { + "default": true + }, + "useInert": { + "default": true + }, + "autoFocus": { + "default": true + }, + "trapFocus": { + "default": true + }, + "initialFocusRef": [ + null, + null, + null + ], + "finalFocusRef": [ + null, + null, + null + ], + "returnFocusOnClose": { + "default": true + }, + "blockScrollOnMount": { + "default": true + }, + "scrollBehaviour": { + "default": "outside" + }, + "motionPreset": { + "default": "scale" + }, + "onUpdate:modelValue": {}, + "label": { + "default": "modal" + }, + "placement": { + "default": "right" + } + }, + "emits": [ + "update:modelValue", + "close", + "escape" + ] + }, + "CDrawerBody": { + "name": "CModalBody" + }, + "CDrawerCloseButton": { + "name": "CModalCloseButton", + "emits": [ + "click" + ] + }, + "CDrawerContent": { + "name": "CDrawerContent", + "inheritAttrs": false, + "emits": [ + "click", + "mousedown", + "keydown" + ] + }, + "CDrawerFooter": { + "name": "CModalFooter" + }, + "CDrawerHeader": { + "name": "CModalHeader" + }, + "CDrawerOverlay": { + "name": "CModalOverlay" + }, + "CModal": { + "name": "CModal", + "props": { + "modelValue": { + "default": false + }, + "closeOnOverlayClick": { + "default": true + }, + "closeOnEsc": { + "default": true + }, + "useInert": { + "default": true + }, + "autoFocus": { + "default": true + }, + "trapFocus": { + "default": true + }, + "initialFocusRef": [ + null, + null, + null + ], + "finalFocusRef": [ + null, + null, + null + ], + "returnFocusOnClose": { + "default": true + }, + "blockScrollOnMount": { + "default": true + }, + "scrollBehaviour": { + "default": "outside" + }, + "motionPreset": { + "default": "scale" + }, + "onUpdate:modelValue": {}, + "label": { + "default": "modal" + } + }, + "emits": [ + "update:modelValue", + "escape", + "closeModal" + ] + }, + "CModalBody": { + "name": "CModalBody" + }, + "CModalCloseButton": { + "name": "CModalCloseButton", + "emits": [ + "click" + ] + }, + "CModalContent": { + "name": "CModalContent", + "inheritAttrs": false, + "emits": [ + "click", + "mousedown", + "keydown" + ] + }, + "CModalFooter": { + "name": "CModalFooter" + }, + "CModalHeader": { + "name": "CModalHeader" + }, + "CModalOverlay": { + "name": "CModalOverlay" + }, + "CAnimatePresence": { + "name": "CAnimatePresence", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "type": { + "default": "fade" + } + }, + "emits": [ + "leave", + "beforeLeave" + ] + }, + "CCollapse": { + "name": "CCollapse", + "props": { + "isOpen": { + "default": true + }, + "animateOpacity": { + "default": true + }, + "startingHeight": { + "default": 0 + }, + "endingHeight": { + "type": [ + null, + null + ], + "default": "auto" + }, + "unmountOnExit": { + "default": true + } + }, + "emits": [ + "entered", + "left" + ] + }, + "CMotion": { + "name": "CMotion", + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "type": { + "default": "fade" + } + } + }, + "CPortal": { + "name": "CPortal", + "props": {} + }, + "CSpinner": { + "props": { + "as": { + "type": [ + null, + null + ], + "default": "div" + }, + "emptyColor": { + "default": "transparent" + }, + "thickness": { + "default": "2px" + }, + "speed": { + "default": "0.45s" + }, + "color": {}, + "label": {} + } + }, + "CScrollLock": { + "name": "CScrollLock", + "props": { + "enabled": { + "default": false + } + } + }, + "CVisuallyHidden": { + "name": "chakra-factory-span", + "inheritAttrs": false, + "props": { + "as": [ + null, + null + ], + "noOfLines": [ + null, + null, + null, + null + ], + "modelValue": [ + null, + null, + null, + null + ] + } + }, + "CVisuallyHiddenInput": { + "name": "chakra-factory-input", + "inheritAttrs": false, + "props": { + "as": [ + null, + null + ], + "noOfLines": [ + null, + null, + null, + null + ], + "modelValue": [ + null, + null + ] + } + } +} \ No newline at end of file diff --git a/components.d.ts b/components.d.ts index a75a8b86..3bb4e780 100644 --- a/components.d.ts +++ b/components.d.ts @@ -1,12 +1,12 @@ /** - * Typescript support for @@chakra-ui/vue-next1.0.0-alpha.9 auto-imported + * Typescript support for @@chakra-ui/vue-next1.0.0-alpha.10 auto-imported * components using `unplugin-vue-components,` * * @see: https://github.com/antfu/unplugin-vue-components/#typescript * * This is a generated file. Do not edit it's contents. * - * This file was generated on 2021-12-29T16:43:17.327Z + * This file was generated on 2022-01-31T09:57:50.931Z */ import { ChakraProps, chakra } from "@chakra-ui/vue-system" @@ -43,7 +43,7 @@ declare module "@vue/runtime-core" { /* Global component types for Volar auto-complete */ export interface GlobalComponents { - chakra: typeof import("@chakra-ui/vue-next")["chakra"] + // chakra: typeof import("@chakra-ui/vue-next")["chakra"] CAlert: typeof import("@chakra-ui/vue-next")["CAlert"] CAlertDescription: typeof import("@chakra-ui/vue-next")["CAlertDescription"] diff --git a/package.json b/package.json index 69b7de07..0d5e2710 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "prebuild": "yarn clean", "build": "yarn preconstruct build", "build:types": "ts-node scripts/generate-global-types.ts", - "postbuild": "yarn build:types && yarn size-limit", + "postbuild": "yarn build:types && yarn size", "start": "preconstruct watch", "csb:install": "yarn && yarn bootstrap", "bootstrap": "yarn run lerna bootstrap", @@ -36,13 +36,15 @@ "docs:dev:legacy": "vitepress dev docs", "docs:build:legacy": "vitepress build docs", "docs:serve:legacy": "vitepress serve docs", + "predocs:dev": "node ./scripts/dev.js", "docs:dev": "yarn pkg @chakra-ui/vue-docs dev", + "predocs:generate": "node ./scripts/dev.js", "docs:generate": "yarn pkg @chakra-ui/vue-docs generate", "docs:serve": "yarn pkg @chakra-ui/vue-docs serve", "pkg": "manypkg run", "pkgs:check": "manypkg check", "pkgs:fix": "manypkg fix", - "size": "size-limit", + "size": "echo `TODO: Analyze build sizes`", "analyze": "size-limit --why" }, "license": "MIT", @@ -52,8 +54,8 @@ "@babel/core": "^7.12.9", "@babel/preset-env": "^7.15.0", "@babel/preset-typescript": "^7.12.7", - "@chakra-ui/styled-system": "^1.10.0", - "@chakra-ui/utils": "^1.8.2", + "@chakra-ui/styled-system": "^1.16.0", + "@chakra-ui/utils": "^1.9.1", "@changesets/changelog-github": "^0.3.0", "@changesets/cli": "^2.14.1", "@commitlint/cli": "^11.0.0", @@ -65,8 +67,9 @@ "@emotion/css": "^11.1.3", "@emotion/server": "^11.0.0", "@manypkg/cli": "^0.17.0", + "@mdx-js/rollup": "^2.0.0-rc.2", "@popperjs/core": "^2.8.4", - "@preconstruct/cli": "^2.1.1", + "@preconstruct/cli": "^2.1.5", "@size-limit/file": "^5.0.3", "@size-limit/webpack": "^5.0.3", "@testing-library/jest-dom": "^5.14.1", @@ -86,11 +89,11 @@ "@typescript-eslint/eslint-plugin": "^2.34.0", "@typescript-eslint/parser": "4.0.1", "@vitejs/plugin-vue": "^1.10.2", - "@vitejs/plugin-vue-jsx": "^1.1.6", - "@vue/babel-plugin-jsx": "^1.0.3", - "@vue/compiler-sfc": "^3.1.4", + "@vitejs/plugin-vue-jsx": "^1.3.3", + "@vue/babel-plugin-jsx": "^1.1.1", + "@vue/compiler-sfc": "^3.2.29", "@vue/eslint-config-typescript": "^5.1.0", - "@vue/server-renderer": "^3.1.4", + "@vue/server-renderer": "^3.2.29", "@vue/test-utils": "^2.0.0-rc.6", "@vuedx/typecheck": "^0.4.1", "@vuedx/typescript-plugin-vue": "^0.4.1", @@ -153,12 +156,13 @@ "typescript": "^4.5.4", "unplugin-vue-components": "^0.14.0", "vite": "^2.7.4", - "vite-plugin-mdx-vue": "^1.1.3", - "vite-plugin-pages": "^0.18.2", - "vite-plugin-vue-layouts": "^0.3.1", + "vite-plugin-mdx-vue": "^1.6.0", + "vite-plugin-pages": "^0.20.1", + "vite-plugin-vue-layouts": "^0.5.0", "vite-ssg": "^0.17.2", "vitepress": "^0.20.9", - "vue": "^3.2.24", + "vitest": "^0.2.5", + "vue": "^3.2.29", "vue-jest": "^5.0.0-alpha.7", "vue-prism-editor": "^2.0.0-alpha.2", "vue-router": "^4.0.12", diff --git a/packages/c-accordion/package.json b/packages/c-accordion/package.json index ba8ceb48..6210c3e7 100644 --- a/packages/c-accordion/package.json +++ b/packages/c-accordion/package.json @@ -29,6 +29,6 @@ "access": "public" }, "devDependencies": { - "vue": "^3.2.24" + "vue": "^3.2.29" } } \ No newline at end of file diff --git a/packages/c-alert/package.json b/packages/c-alert/package.json index 00527e1e..be6c78fc 100644 --- a/packages/c-alert/package.json +++ b/packages/c-alert/package.json @@ -31,6 +31,6 @@ "access": "public" }, "devDependencies": { - "vue": "^3.2.24" + "vue": "^3.2.29" } } \ No newline at end of file diff --git a/packages/c-breadcrumb/package.json b/packages/c-breadcrumb/package.json index d54a8849..e3b16e94 100644 --- a/packages/c-breadcrumb/package.json +++ b/packages/c-breadcrumb/package.json @@ -28,8 +28,8 @@ "clean": "rimraf dist" }, "dependencies": { - "@chakra-ui/styled-system": "^1.10.0", - "@chakra-ui/utils": "^1.8.2", + "@chakra-ui/styled-system": "^1.16.0", + "@chakra-ui/utils": "^1.9.1", "@chakra-ui/vue-system": "0.1.0-alpha.8", "@chakra-ui/vue-utils": "0.1.0-alpha.8" }, @@ -37,6 +37,6 @@ "vue": "^3.1.4" }, "devDependencies": { - "vue": "^3.2.24" + "vue": "^3.2.29" } } \ No newline at end of file diff --git a/packages/c-breadcrumb/src/c-breadcrumb.tsx b/packages/c-breadcrumb/src/c-breadcrumb.tsx index 51725e58..f14ba1e2 100644 --- a/packages/c-breadcrumb/src/c-breadcrumb.tsx +++ b/packages/c-breadcrumb/src/c-breadcrumb.tsx @@ -8,7 +8,7 @@ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2 */ -import { defineComponent, PropType, computed, cloneVNode, h, VNode } from "vue" +import { defineComponent, PropType, computed, cloneVNode, h, VNode, DefineComponent } from "vue" import { chakra, HTMLChakraProps, @@ -57,7 +57,7 @@ export interface BreadcrumbProps * * @see Docs https://next.vue.chakra-ui.com/breadcrumb */ -export const CBreadcrumb = defineComponent( +export const CBreadcrumb: DefineComponent = defineComponent( (props: BreadcrumbProps, { attrs, slots }) => { const themingProps = computed(() => filterUndefined({ @@ -149,8 +149,11 @@ export interface BreadcrumbSeparatorProps extends HTMLChakraProps<"div"> { * The `CBreadcrumbSeparator` component is the separator for * each breacrumb item. */ -export const CBreadcrumbSeparator = defineComponent( - (props: BreadcrumbSeparatorProps, { attrs, slots }) => { +export const CBreadcrumbSeparator = defineComponent({ + props: { + spacing: CBreadcrumb.props.spacing, + }, + setup(props, { attrs, slots }) { const styles = useStyles() const separatorStyles = computed(() => ({ display: "flex", @@ -169,11 +172,7 @@ export const CBreadcrumbSeparator = defineComponent( ) } -) - -CBreadcrumbSeparator.props = { - spacing: CBreadcrumb.props.spacing, -} +}) // @ts-ignore "name" property is typically read-only for functional components CBreadcrumbSeparator.name = "CBreadcrumbSeparator" @@ -191,7 +190,7 @@ export interface BreadcrumbItemProps extends BreadcrumbItemOptions, ChakraProps {} -export const CBreadcrumbItem = defineComponent( +export const CBreadcrumbItem: DefineComponent = defineComponent( (props: BreadcrumbItemProps, { attrs, slots }) => { const styles = useStyles() const itemStyles = computed(() => ({ @@ -227,7 +226,6 @@ export const CBreadcrumbItem = defineComponent( {children} {!props.isLastChild && ( - // @ts-expect-error {() => props.separator} @@ -261,7 +259,7 @@ export interface BreadcrumbLinkProps extends ChakraProps { * It renders a `span` when it matches the current link. Otherwise, * it renders an anchor tag. */ -export const CBreadcrumbLink = defineComponent( +export const CBreadcrumbLink: DefineComponent = defineComponent( (props: BreadcrumbLinkProps, { attrs, slots }) => { const styles = useStyles() diff --git a/packages/c-button/package.json b/packages/c-button/package.json index 0ba5e560..ea36533e 100644 --- a/packages/c-button/package.json +++ b/packages/c-button/package.json @@ -22,7 +22,7 @@ "dependencies": { "@chakra-ui/c-icon": "1.0.0-alpha.8", "@chakra-ui/c-spinner": "1.0.0-alpha.8", - "@chakra-ui/utils": "^1.8.2", + "@chakra-ui/utils": "^1.9.1", "@chakra-ui/vue-system": "0.1.0-alpha.8", "@chakra-ui/vue-utils": "0.1.0-alpha.8" }, @@ -33,6 +33,6 @@ "access": "public" }, "devDependencies": { - "vue": "^3.2.24" + "vue": "^3.2.29" } } \ No newline at end of file diff --git a/packages/c-button/src/button-group.ts b/packages/c-button/src/button-group.ts index 99695bf6..1a630d2b 100644 --- a/packages/c-button/src/button-group.ts +++ b/packages/c-button/src/button-group.ts @@ -1,9 +1,6 @@ import { computed, ComputedRef, defineComponent, h, PropType } from "vue" -import { - SystemCSSProperties, - SystemStyleObject, -} from "@chakra-ui/styled-system" -import { chakra, ThemingProps } from "@chakra-ui/vue-system" +import { SystemProps, SystemStyleObject } from "@chakra-ui/styled-system" +import { chakra, ThemingProps, ComponentWithProps } from "@chakra-ui/vue-system" import { createContext, vueThemingProps } from "@chakra-ui/vue-utils" export interface ButtonGroupProps extends ThemingProps { @@ -21,7 +18,7 @@ export interface ButtonGroupProps extends ThemingProps { * @default '0.5rem' * @type SystemProps["marginRight"] */ - spacing?: SystemCSSProperties["marginRight"] + spacing?: SystemProps["marginRight"] } const props = { @@ -47,11 +44,12 @@ const [ButtonGroupProvider, useButtonGroup] = createContext( } ) -const CButtonGroup = defineComponent({ +const CButtonGroup: ComponentWithProps = defineComponent({ name: "CButtonGroup", props, setup(props, { attrs, slots }) { ButtonGroupProvider( + // @ts-ignore computed(() => ({ size: props.size, colorScheme: props.colorScheme, diff --git a/packages/c-button/src/button.utils.ts b/packages/c-button/src/button.utils.ts index ab751066..4214e051 100644 --- a/packages/c-button/src/button.utils.ts +++ b/packages/c-button/src/button.utils.ts @@ -1,4 +1,4 @@ -import { SystemCSSProperties } from "@chakra-ui/styled-system" +import { SystemProps } from "@chakra-ui/styled-system" import { vueThemingProps, BaseThemedComponentProps } from "@chakra-ui/vue-utils" import { PropType } from "vue" @@ -13,7 +13,7 @@ export interface ButtonProps extends BaseThemedComponentProps { type?: ButtonTypes leftIcon?: string rightIcon?: string - iconSpacing?: SystemCSSProperties["marginRight"] + iconSpacing?: SystemProps["marginRight"] } export const BUTTON_PROPS = { @@ -32,8 +32,6 @@ export const BUTTON_PROPS = { leftIcon: String as PropType, rightIcon: String as PropType, ...vueThemingProps, - - /** Not sure if the SystemCSSProperties is the right prop type for this */ iconSpacing: { type: [String, Number, Array] as PropType, default: "0.5rem", diff --git a/packages/c-close-button/package.json b/packages/c-close-button/package.json index 293195ce..b3e7ba1b 100644 --- a/packages/c-close-button/package.json +++ b/packages/c-close-button/package.json @@ -29,13 +29,13 @@ }, "dependencies": { "@chakra-ui/c-icon": "1.0.0-alpha.8", - "@chakra-ui/styled-system": "^1.10.0", - "@chakra-ui/utils": "^1.8.2", + "@chakra-ui/styled-system": "^1.16.0", + "@chakra-ui/utils": "^1.9.1", "@chakra-ui/vue-system": "0.1.0-alpha.8", "@chakra-ui/vue-utils": "0.1.0-alpha.8" }, "devDependencies": { - "vue": "^3.2.24" + "vue": "^3.2.29" }, "peerDependencies": { "vue": "^3.1.4" diff --git a/packages/c-close-button/tests/__snapshots__/c-close-button.test.ts.snap b/packages/c-close-button/tests/__snapshots__/c-close-button.test.ts.snap index d6228257..d0ca52be 100644 --- a/packages/c-close-button/tests/__snapshots__/c-close-button.test.ts.snap +++ b/packages/c-close-button/tests/__snapshots__/c-close-button.test.ts.snap @@ -4,7 +4,7 @@ exports[`should render properly 1`] = `