Skip to content

Commit ec31529

Browse files
D-LiteD-Lite
authored
Input component (#50)
* docs(input): add input documentation * chore: code review fix * refactor: change name casing input * chore: input documentation review
1 parent 6aeccf1 commit ec31529

17 files changed

+461
-155
lines changed

‎components/content/examples/input/BasicInput.vue

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
<template>
2-
<c-input placeholder="Basic usage" />
2+
<CInput placeholder="Basic usage" />
33
</template>
4-
5-
<script setup>
6-
import { CInput } from '@chakra-ui/vue-next';
7-
</script>

‎components/content/examples/input/InputAddon.vue

+11-15
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
<template>
2-
<c-stack spacing="4" w="xl" align-items="center">
3-
<c-input-group>
4-
<c-input-left-addon>+234</c-input-left-addon>
5-
<c-input type="tel" rounded-left="0" placeholder="phone number" />
6-
</c-input-group>
2+
<CStack spacing="4" w="xl" align-items="center">
3+
<CInputGroup>
4+
<CInputLeftAddon>+234</CInputLeftAddon>
5+
<CInput type="tel" rounded-left="0" placeholder="phone number" />
6+
</CInputGroup>
77
<!-- If you add the size prop to `InputGroup`, it'll pass it to all its children. -->
88

9-
<c-input-group>
10-
<c-input-left-addon>https://</c-input-left-addon>
11-
<c-input rounded="0" placeholder="mysite" />
12-
<c-input-right-addon>.com</c-input-right-addon>
13-
</c-input-group>
14-
</c-stack>
9+
<CInputGroup>
10+
<CInputLeftAddon>https://</CInputLeftAddon>
11+
<CInput rounded="0" placeholder="mysite" />
12+
<CInputRightAddon>.com</CInputRightAddon>
13+
</CInputGroup>
14+
</CStack>
1515
</template>
16-
17-
<script setup>
18-
import { CInput, CStack, CInputGroup, CInputLeftAddon, CInputRightAddon } from '@chakra-ui/vue-next';
19-
</script>

‎components/content/examples/input/InputAppearance.vue

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
<template>
2-
<c-stack spacing="3" w="2xl" align-items="center">
3-
<c-input variant='outline' placeholder='Outline' />
4-
<c-input variant='filled' placeholder='Filled' />
5-
<c-input variant='flushed' placeholder='Flushed' />
6-
<c-input variant='unstyled' placeholder='Unstyled' />
7-
</c-stack>
2+
<CStack spacing="3" w="2xl" align-items="center">
3+
<CInput variant='outline' placeholder='Outline' />
4+
<CInput variant='filled' placeholder='Filled' />
5+
<CInput variant='flushed' placeholder='Flushed' />
6+
<CInput variant='unstyled' placeholder='Unstyled' />
7+
</CStack>
88
</template>
9-
10-
<script setup>
11-
import { CInput, CStack } from '@chakra-ui/vue-next';
12-
</script>

‎components/content/examples/input/InputDate.vue

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<template>
2-
<c-stack spacing="4" w="xl" align-items="center">
3-
<c-input type="datetime-local" placeholder="Select Date and Time" size="md" />
4-
</c-stack>
2+
<CStack spacing="4" w="xl" align-items="center">
3+
<CInput type="datetime-local" placeholder="Select Date and Time" size="md" />
4+
</CStack>
55
</template>
6-
7-
<script setup>
8-
import { CInput, CStack } from '@chakra-ui/vue-next';
9-
</script>

‎components/content/examples/input/InputElements.vue

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
2-
<c-stack spacing="4" w="xl" align-items="center">
3-
<c-input-group>
4-
<c-input-left-element><c-icon name="phone" color="gray.300" /></c-input-left-element>
5-
<c-input type="phone" placeholder="Phone number" />
6-
</c-input-group>
2+
<CStack spacing="4" w="xl" align-items="center">
3+
<CInputGroup>
4+
<CInputLeftElement>
5+
<CIcon name="phone" color="gray.300" />
6+
</CInputLeftElement>
7+
<CInput type="phone" placeholder="Phone number" />
8+
</CInputGroup>
79

8-
<c-input-group>
9-
<c-input-left-element color="gray.300" fontSize="1.2em">¥</c-input-left-element>
10-
<c-input placeholder="Enter amount" />
11-
<c-input-right-element><c-icon name="check" color="green.500" /></c-input-right-element>
12-
</c-input-group>
13-
</c-stack>
10+
<CInputGroup>
11+
<CInputLeftElement color="gray.300" fontSize="1.2em">¥</CInputLeftElement>
12+
<CInput placeholder="Enter amount" />
13+
<CInputRightElement>
14+
<CIcon name="check" color="green.500" />
15+
</CInputRightElement>
16+
</CInputGroup>
17+
</CStack>
1418
</template>
15-
16-
<script setup>
17-
import { CInput, CStack, CInputGroup, CInputLeftElement, CIcon, CInputRightElement } from '@chakra-ui/vue-next';
18-
</script>

‎components/content/examples/input/InputFocus.vue

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
<template>
2-
<c-stack spacing="4" w="xl" align-items="center">
3-
<c-input focus-border-color="lime" placeholder="Here is a sample placeholder" />
4-
<c-input focus-border-color="pink.400" placeholder="Here is a sample placeholder" />
5-
<c-input is-invalid error-border-color="red.300" placeholder="Here is a sample placeholder" />
6-
<c-input is-invalid error-border-color="crimson" placeholder="Here is a sample placeholder" />
7-
</c-stack>
2+
<CStack spacing="4" w="xl" align-items="center">
3+
<CInput focus-border-color="lime" placeholder="Here is a sample placeholder" />
4+
<CInput focus-border-color="pink.400" placeholder="Here is a sample placeholder" />
5+
<CInput is-invalid error-border-color="red.300" placeholder="Here is a sample placeholder" />
6+
<CInput is-invalid error-border-color="crimson" placeholder="Here is a sample placeholder" />
7+
</CStack>
88
</template>
9-
10-
<script setup>
11-
import { CInput, CStack } from '@chakra-ui/vue-next';
12-
</script>

‎components/content/examples/input/InputHtmlSize.vue

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
<template>
2-
<c-input html-size="4" width="auto" />
2+
<CInput html-size="4" width="auto" />
33
</template>
4-
5-
<script setup>
6-
import { CInput } from '@chakra-ui/vue-next';
7-
</script>

‎components/content/examples/input/InputPassword.vue

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
<template>
2-
<c-input-group size="md">
3-
<c-input pr="4.5rem" :type="show ? 'text' : 'password'" placeholder="Enter password" v-model="password" />
4-
<c-input-right-element width="4.5rem">
5-
<c-button h="1.75rem" size="sm" @click="show = !show">
2+
<CInputGroup size="md">
3+
<CInput pr="4.5rem" :type="show ? 'text' : 'password'" placeholder="Enter password" v-model="password" />
4+
<CInputRightElement width="4.5rem">
5+
<CButton h="1.75rem" size="sm" @click="show = !show">
66
{{ show ? 'Hide' : 'Show' }}
7-
</c-button>
8-
</c-input-right-element>
9-
</c-input-group>
7+
</CButton>
8+
</CInputRightElement>
9+
</CInputGroup>
1010
</template>
1111

1212
<script setup>
13-
import { CInput, CInputGroup, CInputRightElement } from '@chakra-ui/vue-next';
1413
const show = ref(false);
1514
const password = ref('kurama<3naruto');
1615
</script>

‎components/content/examples/input/InputPlaceholderStyle.vue

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
<template>
2-
<c-stack spacing="4" w="xl" align-items="center">
3-
<c-input placeholder='default placeholder' />
4-
<c-input placeholder='custom placeholder' :_placeholder="{ opacity: 1, color: 'gray.500' }" />
5-
<c-input color='teal' placeholder='custom placeholder' :_placeholder="{ color: 'inherit' }" />
6-
<c-input color='tomato' placeholder='custom placeholder' :_placeholder="{ opacity: 0.4, color: 'inherit' }" />
7-
</c-stack>
2+
<CStack spacing="4" w="xl" align-items="center">
3+
<CInput placeholder='default placeholder' />
4+
<CInput placeholder='custom placeholder' :_placeholder="{ opacity: 1, color: 'gray.500' }" />
5+
<CInput color='teal' placeholder='custom placeholder' :_placeholder="{ color: 'inherit' }" />
6+
<CInput color='tomato' placeholder='custom placeholder' :_placeholder="{ opacity: 0.4, color: 'inherit' }" />
7+
</CStack>
88
</template>
9-
10-
<script setup>
11-
import { CInput, CStack } from '@chakra-ui/vue-next';
12-
</script>

‎components/content/examples/input/SizeInput.vue

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
<template>
2-
<c-stack spacing="3" w="2xl" align-items="center">
3-
<c-input placeholder="extra small size" size="xs" />
4-
<c-input placeholder="small size" size="sm" />
5-
<c-input placeholder="medium size" size="md" />
6-
<c-input placeholder="large size" size="lg" />
7-
</c-stack>
2+
<CStack spacing="3" w="2xl" align-items="center">
3+
<CInput placeholder="extra small size" size="xs" />
4+
<CInput placeholder="small size" size="sm" />
5+
<CInput placeholder="medium size" size="md" />
6+
<CInput placeholder="large size" size="lg" />
7+
</CStack>
88
</template>
9-
10-
<script setup>
11-
import { CInput, CStack } from '@chakra-ui/vue-next';
12-
</script>

‎components/content/examples/tabs/ColoredTabs.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<CBox w="600px">
3+
<CTabs variant="solid-rounded" color-scheme="green">
4+
<CTabList v-model="selected">
5+
<CTab value='1'>One</CTab>
6+
<CTab value='2'>Two</CTab>
7+
<CTab value='3'>Three</CTab>
8+
</CTabList>
9+
10+
<CTabPanels v-model="selected">
11+
<CTabPanel value='1'>
12+
<p>Panel One</p>
13+
</CTabPanel>
14+
<CTabPanel value='2'>
15+
<p>Panel Two</p>
16+
</CTabPanel>
17+
<CTabPanel value='3'>
18+
<p>Panel Three</p>
19+
</CTabPanel>
20+
</CTabPanels>
21+
</CTabs>
22+
</CBox>
23+
</template>
24+
25+
<script setup>
26+
import { ref } from 'vue';
27+
import {
28+
CTabs,
29+
CTabList,
30+
CTabPanels,
31+
CTab,
32+
CTabPanel
33+
} from "@chakra-ui/vue-next";
34+
35+
const selected = ref(1);
36+
</script>

‎components/content/examples/tabs/FittedTabs.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<CBox w="600px">
3+
<CTabs is-fitted variant="solid-rounded">
4+
<CTabList v-model="selected">
5+
<CTab value='1'>One</CTab>
6+
<CTab value='2'>Two</CTab>
7+
<CTab value='3'>Three</CTab>
8+
</CTabList>
9+
10+
<CTabPanels v-model="selected">
11+
<CTabPanel value='1'>
12+
<p>Panel One</p>
13+
</CTabPanel>
14+
<CTabPanel value='2'>
15+
<p>Panel Two</p>
16+
</CTabPanel>
17+
<CTabPanel value='3'>
18+
<p>Panel Three</p>
19+
</CTabPanel>
20+
</CTabPanels>
21+
</CTabs>
22+
</CBox>
23+
</template>
24+
25+
<script setup>
26+
import { ref } from 'vue';
27+
import {
28+
CTabs,
29+
CTabList,
30+
CTabPanels,
31+
CTab,
32+
CTabPanel
33+
} from "@chakra-ui/vue-next";
34+
35+
const selected = ref(1);
36+
</script>

‎components/content/examples/tabs/SimpleTabs.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<CBox w="600px">
3+
<CTabs>
4+
<CTabList v-model="selected">
5+
<CTab value='1'>One</CTab>
6+
<CTab value='2'>Two</CTab>
7+
<CTab value='3'>Three</CTab>
8+
</CTabList>
9+
10+
<CTabPanels v-model="selected">
11+
<CTabPanel value='1'>
12+
<p>Panel One</p>
13+
</CTabPanel>
14+
<CTabPanel value='2'>
15+
<p>Panel Two</p>
16+
</CTabPanel>
17+
<CTabPanel value='3'>
18+
<p>Panel Three</p>
19+
</CTabPanel>
20+
</CTabPanels>
21+
</CTabs>
22+
</CBox>
23+
</template>
24+
25+
<script setup>
26+
import { ref } from 'vue';
27+
import {
28+
CTabs,
29+
CTabList,
30+
CTabPanels,
31+
CTab,
32+
CTabPanel
33+
} from "@chakra-ui/vue-next";
34+
35+
const selected = ref(1);
36+
</script>

‎components/content/examples/tabs/SizesTabs.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<CBox w="600px">
3+
<CTabs variant="solid-rounded" color-scheme="green" size="sm">
4+
<CTabList v-model="selected">
5+
<CTab value='1'>One</CTab>
6+
<CTab value='2'>Two</CTab>
7+
<CTab value='3'>Three</CTab>
8+
</CTabList>
9+
10+
<CTabPanels v-model="selected">
11+
<CTabPanel value='1'>
12+
<p>Panel One</p>
13+
</CTabPanel>
14+
<CTabPanel value='2'>
15+
<p>Panel Two</p>
16+
</CTabPanel>
17+
<CTabPanel value='3'>
18+
<p>Panel Three</p>
19+
</CTabPanel>
20+
</CTabPanels>
21+
</CTabs>
22+
</CBox>
23+
</template>
24+
25+
<script setup>
26+
import { ref } from 'vue';
27+
import {
28+
CTabs,
29+
CTabList,
30+
CTabPanels,
31+
CTab,
32+
CTabPanel
33+
} from "@chakra-ui/vue-next";
34+
35+
const selected = ref(1);
36+
</script>

‎components/content/examples/tabs/VariantTabs.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<CBox w="600px">
3+
<CTabs variant="enclosed-colored">
4+
<CTabList v-model="selected">
5+
<CTab value='1'>One</CTab>
6+
<CTab value='2'>Two</CTab>
7+
<CTab value='3'>Three</CTab>
8+
</CTabList>
9+
10+
<CTabPanels v-model="selected">
11+
<CTabPanel value='1'>
12+
<p>Panel One</p>
13+
</CTabPanel>
14+
<CTabPanel value='2'>
15+
<p>Panel Two</p>
16+
</CTabPanel>
17+
<CTabPanel value='3'>
18+
<p>Panel Three</p>
19+
</CTabPanel>
20+
</CTabPanels>
21+
</CTabs>
22+
</CBox>
23+
</template>
24+
25+
<script setup>
26+
import { ref } from 'vue';
27+
import {
28+
CTabs,
29+
CTabList,
30+
CTabPanels,
31+
CTab,
32+
CTabPanel
33+
} from "@chakra-ui/vue-next";
34+
35+
const selected = ref(1);
36+
</script>

0 commit comments

Comments
 (0)