feat: add examples of form controls

Author: codebender828

packages/c-form-control/examples/base-c-form-control.vue renamed to packages/c-form-control/examples/input-example.vue

@@ -1,5 +1,5 @@
 <template>
-  <c-form-control id="first-name" is-invalid is-required>
+  <c-form-control id="first-name" is-invalid is-required w="400px">
     <c-form-label> First name </c-form-label>
     <c-input placeholder="First Name" />
     <c-form-helper-text> Keep it very short and sweet! </c-form-helper-text>

packages/c-form-control/examples/select-example.vue

@@ -0,0 +1,40 @@
+<template>
+  <c-form-control id="first-name" is-invalid is-required w="400px">
+    <c-form-label> First name </c-form-label>
+    <c-select>
+      <option>Option 1</option>
+      <option>Option 2</option>
+      <option>Option 3</option>
+    </c-select>
+    <c-form-helper-text> Keep it very short and sweet! </c-form-helper-text>
+    <c-form-error-message>
+      <c-form-error-icon />
+      Your first name is invalid
+    </c-form-error-message>
+  </c-form-control>
+</template>
+
+<script lang="tsx" setup>
+import { h, defineComponent, computed, toRefs } from 'vue'
+import {
+  chakra,
+  useMultiStyleConfig,
+  omitThemingProps,
+} from '@chakra-ui/vue-system'
+import { useFormControl } from '@chakra-ui/c-form-control'
+import { vueThemingProps } from '@chakra-ui/vue-utils'
+
+const CSelect = defineComponent({
+  props: vueThemingProps,
+  setup(props, { slots }) {
+    const styles = useMultiStyleConfig('Select', props)
+    const _props = computed(() => toRefs(omitThemingProps(props)))
+    const inputProps = useFormControl(_props.value)
+    return () => (
+      <chakra.select __css={styles.value.field} {...inputProps.value}>
+        {slots}
+      </chakra.select>
+    )
+  },
+})
+</script>

packages/c-form-control/examples/standalone-formlabel.vue

@@ -0,0 +1,5 @@
+<template>
+  <c-form-label font-weight="bold" color="blue">
+    Not wrapped by FormControl
+  </c-form-label>
+</template>

packages/c-form-control/examples/styling-focus.vue

@@ -0,0 +1,30 @@
+<template>
+  <c-form-control id="first-name" w="400px">
+    <c-form-label :_focus="{ color: 'blue.600' }"> First name </c-form-label>
+    <c-input placeholder="First Name" />
+    <c-form-error-message> Your first name is invalid </c-form-error-message>
+  </c-form-control>
+</template>
+
+<script lang="tsx" setup>
+import { h, defineComponent, computed, toRefs } from 'vue'
+import {
+  chakra,
+  useMultiStyleConfig,
+  omitThemingProps,
+} from '@chakra-ui/vue-system'
+import { useFormControl } from '@chakra-ui/c-form-control'
+import { vueThemingProps } from '@chakra-ui/vue-utils'
+
+const CInput = defineComponent({
+  props: vueThemingProps,
+  setup(props) {
+    const styles = useMultiStyleConfig('Input', props)
+    const _props = computed(() => toRefs(omitThemingProps(props)))
+    const inputProps = useFormControl(_props.value)
+    return () => (
+      <chakra.input __css={styles.value.field} {...inputProps.value} />
+    )
+  },
+})
+</script>

packages/c-form-control/examples/textarea-example.vue

@@ -0,0 +1,32 @@
+<template>
+  <c-form-control id="first-name" is-invalid is-required w="400px">
+    <c-form-label> First name </c-form-label>
+    <c-textarea placeholder="First Name" />
+    <c-form-helper-text> Keep it very short and sweet! </c-form-helper-text>
+    <c-form-error-message>
+      <c-form-error-icon />
+      Your first name is invalid
+    </c-form-error-message>
+  </c-form-control>
+</template>
+
+<script lang="tsx" setup>
+import { h, defineComponent, computed, toRefs } from 'vue'
+import {
+  chakra,
+  useMultiStyleConfig,
+  omitThemingProps,
+} from '@chakra-ui/vue-system'
+import { useFormControl } from '@chakra-ui/c-form-control'
+import { vueThemingProps } from '@chakra-ui/vue-utils'
+
+const CTextarea = defineComponent({
+  props: vueThemingProps,
+  setup(props) {
+    const styles = useMultiStyleConfig('Textarea', props)
+    const _props = computed(() => toRefs(omitThemingProps(props)))
+    const inputProps = useFormControl(_props.value)
+    return () => <chakra.textarea __css={styles.value} {...inputProps.value} />
+  },
+})
+</script>

packages/c-form-control/src/c-form-label.tsx

@@ -30,11 +30,11 @@ export const CFormLabel = defineComponent({
           textAlign: 'start',
           ...styles.value
         }}
-        {...field.value.labelProps.value}
+        {...field?.value?.labelProps.value}
         {...attrs}
       >
         {slots?.default?.()}
-        {field.value?.isRequired?.value ? requiredIndicator.value : null}
+        {field?.value?.isRequired?.value ? requiredIndicator.value : null}
       </chakra.label>
     )
   }

packages/c-form-control/src/use-form-control.ts

@@ -144,7 +144,10 @@ export type CFormControlProviderContext = ComputedRef<Omit<
 const [
   FormControlProvider,
   useFormControlContext
-] = createContext<CFormControlProviderContext>()
+] = createContext<CFormControlProviderContext>({
+  strict: false,
+  name: 'FormControlContext'
+})
 
 export { FormControlProvider, useFormControlContext }
 

playground/src/App.vue

@@ -6,14 +6,16 @@
         <sidebar :stories="routes" />
       </chakra.div>
     </perfect-scrollbar>
-    <chakra.main w="full" pos="relative" border-left="1px solid" border-color="gray.200" padding="4">
-      <router-view v-slot="{ Component, route }">
-        <!-- <transition name="fade" mode="out-in"> -->
-          <component :is="Component" />
-        <!-- </transition> -->
-      </router-view>
+    <c-center w="full" pos="relative" border-left="1px solid" border-color="gray.200" padding="4">
+      <c-square box-size="600px">
+        <router-view v-slot="{ Component, route }">
+          <!-- <transition name="fade" mode="out-in"> -->
+            <component :is="Component" />
+          <!-- </transition> -->
+        </router-view>
+      </c-square>
       <c-icon-button color="inherit" pos="absolute" @click="toggleColorMode" top="10" right="10" :aria-label="`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`" :icon="colorMode === 'light' ? 'moon' : 'sun'" />
-    </chakra.main>
+    </c-center>
   </chakra.section>
 </template>