chakra-ui · carwack · Oct 7, 2023 · Oct 7, 2023 · Oct 7, 2023 · Oct 7, 2023
diff --git a/.changeset/lemon-toes-end.md b/.changeset/lemon-toes-end.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/vue-layout": patch
+---
+
+fix(components): Add missing `as` prop on some layout components
diff --git a/@types/components.d.ts b/@types/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-05-20T11:19:16.919Z
+ * This file was generated on 2023-09-11T16:17:50.573Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"

diff --git a/components.d.ts b/components.d.ts
@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-05-20T11:19:16.919Z
+ * This file was generated on 2023-09-11T16:17:50.573Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"

diff --git a/packages/layout/examples/base-container.vue b/packages/layout/examples/base-container.vue
@@ -1,17 +1,16 @@
 <template>
-  <c-container>
+  <CContainer>
     There are many benefits to a joint design and development system. Not only
     does it bring benefits to the design team, but it also brings benefits to
     engineering teams. It makes sure that our experiences have a consistent look
     and feel, not just in our design specs, but in production
-  </c-container>
-  <c-v-stack my="4">
-    <c-container max-w="container.xl">Extra-Large Container</c-container>
-    <c-container max-w="container.lg">Large Container</c-container>
-    <c-container max-w="container.md">Medium Container</c-container>
-    <c-container max-w="container.sm">Small Container</c-container>
-  </c-v-stack>
+  </CContainer>
+  <CVStack my="4">
+    <CContainer max-w="container.xl">Extra-Large Container</CContainer>
+    <CContainer max-w="container.lg">Large Container</CContainer>
+    <CContainer max-w="container.md">Medium Container</CContainer>
+    <CContainer max-w="container.sm">Small Container</CContainer>
+  </CVStack>
+
+  <CContainer as="span"> As prop span </CContainer>
 </template>
-<script setup>
-import { CVStack } from "../src"
-</script>
diff --git a/packages/layout/examples/base-stack.vue b/packages/layout/examples/base-stack.vue
@@ -2,34 +2,43 @@
   <chakra.div py="4">
     <chakra.div py="4">
       <chakra.div>Stack Default</chakra.div>
-      <c-stack spacing="4" divider>
+      <CStack spacing="4" divider>
         <chakra.div w="40px" h="40px" bg="yellow.200"> 1 </chakra.div>
         <chakra.div w="40px" h="40px" bg="tomato"> 2 </chakra.div>
         <chakra.div w="40px" h="40px" bg="pink.100"> 3 </chakra.div>
-      </c-stack>
+      </CStack>
     </chakra.div>
 
     <chakra.div py="4">
       <chakra.div>Horizontal</chakra.div>
-      <c-h-stack spacing="10">
+      <CHStack spacing="10">
         <chakra.div w="40px" h="40px" bg="yellow.200"> 1 </chakra.div>
         <chakra.div w="40px" h="40px" bg="tomato"> 2 </chakra.div>
         <chakra.div w="40px" h="40px" bg="pink.100"> 3 </chakra.div>
-      </c-h-stack>
+      </CHStack>
     </chakra.div>
 
     <chakra.div py="4">
       <chakra.div>Vertical</chakra.div>
-      <c-v-stack spacing="2" align="stretch">
+      <CVStack spacing="2" align="stretch">
         <chakra.div h="40px" bg="yellow.200"> 1 </chakra.div>
         <chakra.div h="40px" bg="tomato"> 2 </chakra.div>
         <chakra.div h="40px" bg="pink.100"> 3 </chakra.div>
         <chakra.span></chakra.span>
-      </c-v-stack>
+      </CVStack>
+    </chakra.div>
+
+    <chakra.div py="4">
+      <chakra.div>As prop UL</chakra.div>
+      <CStack as="ul" spacing="2" align="stretch">
+        <chakra.li w="40px" h="40px" bg="yellow.200"> 1 </chakra.li>
+        <chakra.li w="40px" h="40px" bg="tomato"> 2 </chakra.li>
+        <chakra.li w="40px" h="40px" bg="pink.100"> 3 </chakra.li>
+      </CStack>
     </chakra.div>
   </chakra.div>
 </template>
-<script lang="ts" setup>
-import { CHStack, CVStack } from "../src"
+
+<script setup lang="ts">
 import { chakra } from "../../system/src"
 </script>
diff --git a/packages/layout/examples/base-text.vue b/packages/layout/examples/base-text.vue
@@ -1,27 +1,30 @@
 <template>
-  <c-stack spacing="{3}">
-    <c-text fontSize="6xl">(6xl) In love with React & Next</c-text>
-    <c-text fontSize="5xl">(5xl) In love with React & Next</c-text>
-    <c-text fontSize="4xl">(4xl) In love with React & Next</c-text>
-    <c-text fontSize="3xl">(3xl) In love with React & Next</c-text>
-    <c-text fontSize="2xl">(2xl) In love with React & Next</c-text>
-    <c-text fontSize="xl">(xl) In love with React & Next</c-text>
-    <c-text fontSize="lg">(lg) In love with React & Next</c-text>
-    <c-text fontSize="md">(md) In love with React & Next</c-text>
-    <c-text fontSize="sm">(sm) In love with React & Next</c-text>
-    <c-text fontSize="xs">(xs) In love with React & Next</c-text>
-  </c-stack>
-  <c-divider my="4" />
-  <c-text>truncated:</c-text>
-  <c-text maxW="sm" isTruncated>
+  <CStack spacing="{3}">
+    <CText fontSize="6xl">(6xl) In love with React & Next</CText>
+    <CText fontSize="5xl">(5xl) In love with React & Next</CText>
+    <CText fontSize="4xl">(4xl) In love with React & Next</CText>
+    <CText fontSize="3xl">(3xl) In love with React & Next</CText>
+    <CText fontSize="2xl">(2xl) In love with React & Next</CText>
+    <CText fontSize="xl">(xl) In love with React & Next</CText>
+    <CText fontSize="lg">(lg) In love with React & Next</CText>
+    <CText fontSize="md">(md) In love with React & Next</CText>
+    <CText fontSize="sm">(sm) In love with React & Next</CText>
+    <CText fontSize="xs">(xs) In love with React & Next</CText>
+  </CStack>
+  <CDivider my="4" />
+  <CText>truncated:</CText>
+  <CText maxW="sm" isTruncated>
     Lorem ipsum is placeholder text commonly used in the graphic, print, and
     publishing industries for previewing layouts and visual mockups.
-  </c-text>
-  <c-divider my="4" />
-  <c-text>line clamp:</c-text>
-  <c-text :noOfLines="[1, 2, 3]" maxW="sm">
+  </CText>
+  <CDivider my="4" />
+  <CText>line clamp:</CText>
+  <CText :noOfLines="[1, 2, 3]" maxW="sm">
     "The quick brown fox jumps over the lazy dog" is an English-language
     pangram—a sentence that contains all of the letters of the English alphabet.
     Owing to its existence, Chakra was created.
-  </c-text>
+  </CText>
+  <CDivider my="4" />
+  <CText>As prop:</CText>
+  <CText as="h1" fontSize="xl"> As prop H1 </CText>
 </template>
diff --git a/packages/layout/src/container.tsx b/packages/layout/src/container.tsx
@@ -12,7 +12,7 @@ import type * as CSS from "csstype"
 
 export interface ContainerProps
   extends HTMLChakraProps<"div">,
-  ThemingProps<"Container"> {
+    ThemingProps<"Container"> {
   /**
    * If `true`, container will center its children
    * regardless of their width.
@@ -54,6 +54,7 @@ export const CContainer = defineComponent({
     return () => (
       <chakra.div
         __label="container"
+        as={props.as}
         __css={{
           ...styles.value,
           ...(props.centerContent && {

diff --git a/packages/layout/src/kbd.tsx b/packages/layout/src/kbd.tsx
@@ -29,7 +29,7 @@ export const CKbd = defineComponent({
   props: {
     as: {
       type: [String, Object] as PropType<DOMElements>,
-      default: "h2",
+      default: "kbd",
     },
     ...vueThemingProps,
   },
@@ -47,6 +47,7 @@ export const CKbd = defineComponent({
     return () => (
       <chakra.kbd
         __label="kbd"
+        as={props.as}
         __css={{ fontFamily: "mono", ...styles.value }}
         {...attrs}
       >

diff --git a/packages/layout/src/link.tsx b/packages/layout/src/link.tsx
@@ -1,11 +1,7 @@
 import { vueThemingProps } from "@chakra-ui/vue-utils"
 import { HTMLChakraProps } from "@chakra-ui/vue-system"
 import { h, defineComponent, PropType, computed } from "vue"
-import {
-  chakra,
-  DOMElements,
-  useStyleConfig,
-} from "@chakra-ui/vue-system"
+import { chakra, DOMElements, useStyleConfig } from "@chakra-ui/vue-system"
 import { ThemingProps } from "@chakra-ui/styled-system"
 import { filterUndefined } from "@chakra-ui/utils"
 import type * as CSS from "csstype"

diff --git a/packages/layout/src/stack.tsx b/packages/layout/src/stack.tsx
@@ -180,6 +180,7 @@ export const CStack = defineComponent({
       return (
         <chakra.div
           __label={"stack"}
+          as={props.as}
           display={"flex"}
           alignItems={props.align}
           justifyContent={props.justify}

diff --git a/packages/layout/src/text.tsx b/packages/layout/src/text.tsx
@@ -68,6 +68,7 @@ export const CText = defineComponent({
     return () => {
       return (
         <chakra.p
+          as={props.as}
           __label="text"
           {...aliasedProps.value}
           __css={styles.value}