feat: improve rendering

Author: codebender828

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2021-12-21T13:56:02.197Z
+ * This file was generated on 2021-12-21T17:13:01.320Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -63,6 +63,11 @@ declare module "@vue/runtime-core" {
     CRequiredIndicator: typeof import("@chakra-ui/vue-next")["CRequiredIndicator"]
     CInput: typeof import("@chakra-ui/vue-next")["CInput"]
     CInputAddon: typeof import("@chakra-ui/vue-next")["CInputAddon"]
+    CInputGroup: typeof import("@chakra-ui/vue-next")["CInputGroup"]
+    CInputLeftAddon: typeof import("@chakra-ui/vue-next")["CInputLeftAddon"]
+    CInputLeftElement: typeof import("@chakra-ui/vue-next")["CInputLeftElement"]
+    CInputRightAddon: typeof import("@chakra-ui/vue-next")["CInputRightAddon"]
+    CInputRightElement: typeof import("@chakra-ui/vue-next")["CInputRightElement"]
     CAspectRatio: typeof import("@chakra-ui/vue-next")["CAspectRatio"]
     CBadge: typeof import("@chakra-ui/vue-next")["CBadge"]
     CBox: typeof import("@chakra-ui/vue-next")["CBox"]

package.json

@@ -30,7 +30,7 @@
     "cy:open": "cypress open-ct",
     "cy:run": "cypress run-ct --quiet",
     "test:component": "yarn cy:run",
-    "test": "jest && yarn cy:run",
+    "test": "jest",
     "test:unit": "cross-env NODE_ENV=test jest --config jest.config.js",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "docs:dev:legacy": "vitepress dev docs",
@@ -95,7 +95,7 @@
     "@vuedx/typecheck": "^0.4.1",
     "@vuedx/typescript-plugin-vue": "^0.4.1",
     "@vueuse/core": "4.9.1",
-    "@vueuse/head": "^0.6.0",
+    "@vueuse/head": "^0.7.4",
     "@vueuse/integrations": "^4.8.1",
     "@vueuse/motion": "^1.5.4",
     "aria-hidden": "^1.1.2",
@@ -156,7 +156,7 @@
     "vite-plugin-mdx-vue": "^1.1.3",
     "vite-plugin-pages": "^0.18.2",
     "vite-plugin-vue-layouts": "^0.3.1",
-    "vite-ssg": "^0.11.4",
+    "vite-ssg": "^0.17.2",
     "vitepress": "^0.12.0",
     "vue": "^3.2.24",
     "vue-jest": "^5.0.0-alpha.7",

packages/c-input/src/c-input-addon.tsx

@@ -1,6 +1,6 @@
-import { defineComponent, h, PropType, computed } from 'vue'
+import { defineComponent, h, PropType, computed } from "vue"
 import { chakra, HTMLChakraProps, useStyles } from "@chakra-ui/vue-system"
-import { warn } from '@chakra-ui/utils'
+import { warn } from "@chakra-ui/utils"
 
 type Placement = "left" | "right"
 
@@ -27,7 +27,7 @@ const CStyledAddon = chakra("div", {
   },
 })
 
-export interface CInputAddonProps extends HTMLChakraProps<'div'> {
+export interface CInputAddonProps extends HTMLChakraProps<"div"> {
   placement?: Placement
 }
 
@@ -37,37 +37,38 @@ export interface CInputAddonProps extends HTMLChakraProps<'div'> {
  * Element to append or prepend to an input
  */
 export const CInputAddon = defineComponent({
-  name: 'CInputAddon',
+  name: "CInputAddon",
   props: {
     placement: {
       type: String as PropType<Placement>,
-      default: 'left'
+      default: "left",
     },
   },
   setup(props, { slots, attrs }) {
     try {
-    const placementStyles = computed(() => placements[props.placement])
+      const placementStyles = computed(() => placements[props.placement])
       const styles = useStyles()
       return () => (
         <CStyledAddon
           __css={{
-          ...styles.value.addon,
-          ...placementStyles.value
-        }}
-        {...attrs}
+            ...styles.value.addon,
+            ...placementStyles.value,
+          }}
+          {...attrs}
         >
           {slots}
         </CStyledAddon>
       )
     } catch (error: any) {
       warn({
         condition: !!error,
-        message: "`CInputAddon` can only be used inside the `CInputGroup` component.",
+        message:
+          "`CInputAddon` can only be used inside the `CInputGroup` component.",
       })
       console.error(error)
       return () => null
     }
-  }
+  },
 })
 
 /**
@@ -76,14 +77,14 @@ export const CInputAddon = defineComponent({
  * Element to prepend to the left of an input
  */
 export const CInputLeftAddon = defineComponent({
-  name: 'CInputLeftAddon',
+  name: "CInputLeftAddon",
   setup(_, { slots, attrs }) {
     return () => (
       <CInputAddon placement="left" __label="input__left-addon" {...attrs}>
         {slots}
       </CInputAddon>
     )
-  }
+  },
 })
 
 CInputLeftAddon.id = "CInputLeftAddon"
@@ -94,14 +95,14 @@ CInputLeftAddon.id = "CInputLeftAddon"
  * Element to append to the right of an input
  */
 export const CInputRightAddon = defineComponent({
-  name: 'CInputRightAddon',
+  name: "CInputRightAddon",
   setup(_, { slots, attrs }) {
     return () => (
       <CInputAddon placement="right" __label="input__right-addon" {...attrs}>
         {slots}
       </CInputAddon>
     )
-  }
+  },
 })
 
-CInputRightAddon.id = "CInputRightAddon"
+CInputRightAddon.id = "CInputRightAddon"

packages/c-input/src/c-input-element.tsx

@@ -1,5 +1,10 @@
-import { computed, h, defineComponent, PropType } from 'vue';
-import { chakra, HTMLChakraProps, SystemStyleObject, useStyles } from '@chakra-ui/vue-system';
+import { computed, h, defineComponent, PropType } from "vue"
+import {
+  chakra,
+  HTMLChakraProps,
+  SystemStyleObject,
+  useStyles,
+} from "@chakra-ui/vue-system"
 
 export interface CInputElementProps extends HTMLChakraProps<"div"> {
   placement?: "left" | "right"
@@ -20,9 +25,9 @@ const CInputElement = defineComponent({
   name: "CInputElement",
   props: {
     placement: {
-      type: String as PropType<CInputElementProps['placement']>,
-      default: 'left'
-    }
+      type: String as PropType<CInputElementProps["placement"]>,
+      default: "left",
+    },
   },
   setup(props, { attrs, slots }) {
     const styles = useStyles()
@@ -34,42 +39,48 @@ const CInputElement = defineComponent({
         [attr]: "0",
         width: input?.height || input.h,
         height: input?.height || input?.h,
-        fontSize: input?.fontSize
+        fontSize: input?.fontSize,
       }
     })
 
     return () => (
-      <CStyledElement __css={elementStyles.value} {...attrs}>{slots}</CStyledElement>
+      <CStyledElement __css={elementStyles.value} {...attrs}>
+        {slots}
+      </CStyledElement>
     )
-  }
+  },
 })
 
 // This is used in `c-input-group.tsx`
 CInputElement.id = "CInputElement"
 
 export const CInputLeftElement = defineComponent({
-  name: 'CInputLeftElement',
+  name: "CInputLeftElement",
   setup(_, { attrs, slots }) {
     return () => (
       <CInputElement placement="left" __label="input__left-element" {...attrs}>
         {slots}
       </CInputElement>
     )
-  }
+  },
 })
 
 // This is used in `c-input-group.tsx`
 CInputLeftElement.id = "CInputLeftElement"
 
 export const CInputRightElement = defineComponent({
-  name: 'CInputRightElement',
+  name: "CInputRightElement",
   setup(_, { attrs, slots }) {
     return () => (
-      <CInputElement placement="right" __label="input__right-element" {...attrs}>
+      <CInputElement
+        placement="right"
+        __label="input__right-element"
+        {...attrs}
+      >
         {slots}
       </CInputElement>
     )
-  }
+  },
 })
 
 // This is used in `c-input-group.tsx`

packages/c-input/src/c-input-group.tsx

@@ -1,26 +1,41 @@
-import { filterUndefined } from '@chakra-ui/utils';
-import { chakra, HTMLChakraProps, omitThemingProps, StylesProvider, ThemingProps, useMultiStyleConfig } from '@chakra-ui/vue-system';
-import { getValidChildren, vueThemingProps } from '@chakra-ui/vue-utils';
-import { computed, h, Fragment, defineComponent, mergeProps, VNode, cloneVNode } from 'vue';
+import { filterUndefined } from "@chakra-ui/utils"
+import {
+  chakra,
+  HTMLChakraProps,
+  omitThemingProps,
+  StylesProvider,
+  ThemingProps,
+  useMultiStyleConfig,
+} from "@chakra-ui/vue-system"
+import { getValidChildren, vueThemingProps } from "@chakra-ui/vue-utils"
+import {
+  computed,
+  h,
+  Fragment,
+  defineComponent,
+  mergeProps,
+  VNode,
+  cloneVNode,
+} from "vue"
 
 export interface CInputGroupProps
   extends HTMLChakraProps<"div">,
     ThemingProps<"Input"> {}
 
 export const CInputGroup = defineComponent({
-  name: 'CInputGroup',
+  name: "CInputGroup",
   props: {
-    ...vueThemingProps
+    ...vueThemingProps,
   },
   setup(props, { slots, attrs }) {
     const styleAttrs = computed(() => mergeProps(attrs, props))
-    const styles = useMultiStyleConfig('Input', styleAttrs.value);
+    const styles = useMultiStyleConfig("Input", styleAttrs.value)
     const input = computed(() => styles.value?.field)
     const unthemedProps = computed(() => omitThemingProps(styleAttrs.value))
 
     StylesProvider(styles)
 
-    return () =>  {
+    return () => {
       const groupStyles = {} as CInputGroupProps
       const validChildren = getValidChildren(slots)
       validChildren.forEach((vnode) => {
@@ -51,17 +66,18 @@ export const CInputGroup = defineComponent({
           variant: vnode.props?.size || props.variant,
         })
 
-
         // @ts-ignore
         return vnode.type?.name !== "CInput"
           ? cloneVNode(vnode, theming)
-          : cloneVNode(vnode, Object.assign(
-            theming,
-            groupStyles,
-            // vnode.props
-          ))
+          : cloneVNode(
+              vnode,
+              Object.assign(
+                theming,
+                groupStyles
+                // vnode.props
+              )
+            )
       })
-      
 
       return (
         <chakra.div
@@ -77,5 +93,5 @@ export const CInputGroup = defineComponent({
         </chakra.div>
       )
     }
-  }
-})
+  },
+})

packages/c-input/src/c-input.tsx

@@ -69,10 +69,6 @@ export interface CInputProps
 export const CInput = defineComponent({
   name: "CInput",
   props: {
-    as: {
-      type: [Object, String] as PropType<DOMElements>,
-      default: "input",
-    },
     modelValue: String as PropType<string>,
     ...formControlProps,
     focusBorderColor: SAO as PropType<CInputProps["focusBorderColor"]>,
@@ -81,8 +77,7 @@ export const CInput = defineComponent({
     ...vueThemingProps,
   },
   emits: ["update:modelValue", "input", "change"],
-  setup(_props, { slots, emit, attrs }) {
-    const { as, ...props } = _props
+  setup(props, { emit, attrs }) {
     const styles = useMultiStyleConfig("Input", props)
     const ownProps = computed(() =>
       toRefs(omitThemingProps(props as ThemingProps<"Input">))
@@ -109,4 +104,4 @@ export const CInput = defineComponent({
   },
 })
 
-CInput.id = "CInput"
+CInput.id = "CInput"

packages/c-input/src/index.tsx

@@ -1,4 +1,4 @@
 export * from "./c-input"
 export * from "./c-input-addon"
 export * from "./c-input-group"
-export * from "./c-input-element"
+export * from "./c-input-element"

packages/c-input/tests/c-input.test.tsx

@@ -1,4 +1,9 @@
-import { CInput, CInputGroup, CInputLeftElement, CInputRightElement } from "../src"
+import {
+  CInput,
+  CInputGroup,
+  CInputLeftElement,
+  CInputRightElement,
+} from "../src"
 import { Component, defineComponent, h } from "vue"
 import { render, screen, testA11y } from "../../test-utils/src"
 
@@ -56,5 +61,5 @@ describe("<CInput />", () => {
   it("Read-only input renders correctly", () => {
     render(() => <CInput isReadOnly />)
     expect(screen.getByRole("textbox")).toHaveAttribute("aria-readonly", "true")
-  })  
+  })
 })

packages/core/src/helpers/css-reset.ts

@@ -1,8 +1,7 @@
-import { injectGlobal } from "@chakra-ui/vue-system"
+import { injectGlobal, css } from "@chakra-ui/vue-system"
 import { cssResetStyles } from "@chakra-ui/c-reset"
 import { ThemeOverride } from "../extend-theme"
 import { get, runIfFn } from "@chakra-ui/utils"
-import { css } from "@chakra-ui/styled-system"
 import { ColorModeRef } from "@chakra-ui/c-color-mode"
 import { computed, ref, watch } from "vue"
 

packages/core/src/index.ts

@@ -2,7 +2,7 @@ import { computed, Plugin, ref, UnwrapRef } from "vue"
 import defaultTheme from "@chakra-ui/vue-theme"
 import type { ColorModeRef } from "@chakra-ui/c-color-mode"
 import { toCSSVar, WithCSSVar } from "@chakra-ui/styled-system"
-import { chakra, injectGlobal, css } from "@chakra-ui/vue-system"
+import { chakra, injectGlobal } from "@chakra-ui/vue-system"
 import internalIcons from "./icon.internals"
 import { extendTheme, ThemeOverride } from "./extend-theme"
 import { MergedIcons, parseIcons } from "./parse-icons"