Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: Casing showcase examples #39 #40

Open
wants to merge 22 commits into
base: main
Choose a base branch
from
Open

refactor: Casing showcase examples #39 #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c8f9911
fix: change casing for props and components
carwack Jun 10, 2023
c683f9f
refactor: change name casing responsive styles
carwack Jun 11, 2023
66065e3
refactor: change name casing accordion
carwack Jun 11, 2023
5839c4e
refactor: change name casing alert
carwack Jun 11, 2023
843d124
refactor: change name casing avatar
carwack Jun 11, 2023
71e81e7
refactor: change name casing breadcrumb
carwack Jun 11, 2023
ecf07f4
refactor: change name casing button
carwack Jun 11, 2023
418df18
refactor: change name casing checkbox
carwack Jun 11, 2023
6f692e4
refactor: change name casing closebutton
carwack Jun 11, 2023
8f37abc
refactor: change name casing input
carwack Jun 11, 2023
7b63b0e
refactor: change name casing tag
carwack Jun 11, 2023
83622f6
fix: fix Cbox typo
carwack Jul 7, 2023
4116af8
refactor: change name casing accordion examples
carwack Jul 7, 2023
abc348c
refactor: change name casing examples alert
carwack Jul 8, 2023
db79841
refactor: change name casing avatar examples
carwack Jul 8, 2023
8adf3bf
refactor: change name casing breadcrumb examples
carwack Jul 8, 2023
4e15ad1
refactor: change name casing tag
carwack Jul 8, 2023
3272aab
refactor: change name casing checkbox examples
carwack Jul 8, 2023
aa91d4e
refactor: change name casing close button examples
carwack Jul 8, 2023
da40d6d
refactor: change name casing icon examples
carwack Jul 8, 2023
1fcec23
refactor: change name casing input examples
carwack Jul 8, 2023
969b341
refactor: change script position to above template
carwack Jul 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 17 additions & 13 deletions components/content/examples/accordion/ExpandedStyle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
<template>
<c-accordion>
<c-accordion-item>
<c-accordion-button :_expanded="{ bg: 'purple', color: 'white' }">
<c-v-stack align="flex-start" w="full">
Watercraft
</c-v-stack>
<c-accordion-icon element="c-accordion-item" />
</c-accordion-button>
<c-accordion-panel> Sample accordion content </c-accordion-panel>
</c-accordion-item>
</c-accordion>
</template>

<script setup>
import {
CAccordion,
CAccordionIcon,
CAccordionItem,
CAccordionButton,
CAccordionPanel,
CVStack
} from "@chakra-ui/vue-next"
</script>

<template>
<CAccordion>
<CAccordionItem>
<CAccordionButton :_expanded="{ bg: 'purple', color: 'white' }">
<CVStack align="flex-start" w="full">
Watercraft
</CVStack>
<CAccordionIcon element="c-accordion-item" />
</CAccordionButton>
<CAccordionPanel> Sample accordion content </CAccordionPanel>
</CAccordionItem>
</CAccordion>
</template>

66 changes: 34 additions & 32 deletions components/content/examples/accordion/SimpleAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,42 @@
<template>
<c-accordion>
<c-accordion-item>
<c-accordion-button>
<c-v-stack align="flex-start" w="full">
Watercraft
</c-v-stack>
<c-accordion-icon element="c-accordion-item" />
</c-accordion-button>
<c-accordion-panel> Sample accordion content </c-accordion-panel>
</c-accordion-item>
<c-accordion-item>
<c-accordion-button>
<c-v-stack align="flex-start" w="full">
Automobiles
</c-v-stack>
<c-accordion-icon />
</c-accordion-button>
<c-accordion-panel> Sample accordion content </c-accordion-panel>
</c-accordion-item>
<c-accordion-item>
<c-accordion-button>
<c-v-stack align="flex-start" w="full">
Aircrafts
</c-v-stack>
<c-accordion-icon />
</c-accordion-button>
<c-accordion-panel> Sample accordion content </c-accordion-panel>
</c-accordion-item>
</c-accordion>
</template>

<script setup>
import {
CAccordion,
CAccordionIcon,
CAccordionItem,
CAccordionButton,
CAccordionPanel,
CVStack
} from "@chakra-ui/vue-next"
</script>

<template>
<CAccordion>
<CAccordionItem>
<CAccordionButton>
<CVStack align="flex-start" w="full">
Watercraft
</CVStack>
<CAccordionIcon element="c-accordion-item" />
</CAccordionButton>
<CAccordionPanel> Sample accordion content </CAccordionPanel>
</CAccordionItem>
<CAccordionItem>
<CAccordionButton>
<CVStack align="flex-start" w="full">
Automobiles
</CVStack>
<CAccordionIcon />
</CAccordionButton>
<CAccordionPanel> Sample accordion content </CAccordionPanel>
</CAccordionItem>
<CAccordionItem>
<CAccordionButton>
<CVStack align="flex-start" w="full">
Aircrafts
</CVStack>
<CAccordionIcon />
</CAccordionButton>
<CAccordionPanel> Sample accordion content </CAccordionPanel>
</CAccordionItem>
</CAccordion>
</template>
39 changes: 20 additions & 19 deletions components/content/examples/alert/AccentAlert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
<script setup>
import { CAlert, CAlertDescription, CAlertIcon } from '@chakra-ui/vue-next';
</script>

<template>
<c-alert variant="solid" status="success">
<c-alert-icon mr="2" />
<c-alert-description> Submitted Successfully! </c-alert-description>
</c-alert>
<CAlert variant="solid" status="success">
<CAlertIcon mr="2" />
<CAlertDescription> Submitted Successfully! </CAlertDescription>
</CAlert>

<c-alert variant="subtle" status="success" mb="3">
<c-alert-icon mr="2" />
<c-alert-description> Submitted Successfully! </c-alert-description>
</c-alert>
<CAlert variant="subtle" status="success" mb="3">
<CAlertIcon mr="2" />
<CAlertDescription> Submitted Successfully! </CAlertDescription>
</CAlert>

<c-alert variant="left-accent" status="success" mb="3">
<c-alert-icon mr="2" />
<c-alert-description> Submitted Successfully! </c-alert-description>
</c-alert>
<CAlert variant="left-accent" status="success" mb="3">
<CAlertIcon mr="2" />
<CAlertDescription> Submitted Successfully! </CAlertDescription>
</CAlert>

<c-alert variant="top-accent" status="success" mb="3">
<c-alert-icon mr="2" />
<c-alert-description> Submitted Successfully! </c-alert-description>
</c-alert>
<CAlert variant="top-accent" status="success" mb="3">
<CAlertIcon mr="2" />
<CAlertDescription> Submitted Successfully! </CAlertDescription>
</CAlert>
</template>
<script setup>
import { CAlert, CAlertDescription } from '@chakra-ui/vue-next';
</script>
15 changes: 8 additions & 7 deletions components/content/examples/alert/Alert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
<template>
<c-alert status="success">
<c-alert-icon />
<c-alert-title>Updated Successfully</c-alert-title>
<c-alert-description>Click to view your profile</c-alert-description>
</c-alert>
</template>
<script setup>
import {
CAlert,
Expand All @@ -13,3 +6,11 @@ import {
CAlertDescription
} from '@chakra-ui/vue-next';
</script>

<template>
<CAlert status="success">
<CAlertIcon />
<CAlertTitle>Updated Successfully</CAlertTitle>
<CAlertDescription>Click to view your profile</CAlertDescription>
</CAlert>
</template>
20 changes: 11 additions & 9 deletions components/content/examples/alert/BaseAlert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@

<script setup>
import { CAlert, CAlertDescription, CAlertTitle } from '@chakra-ui/vue-next';
</script>

<template>
<c-alert
<CAlert
flex-direction="column"
text-align="left"
justify-content="start"
align-items="start"
>
<c-alert-title font-size="md">Updated Successfully</c-alert-title>
<c-alert-description font-size="sm"
>Click to view your profile</c-alert-description
>
</c-alert>
<CAlertTitle font-size="md">Updated Successfully</CAlertTitle>
<CAlertDescription font-size="sm">
Click to view your profile
</CAlertDescription>
</CAlert>
</template>
<script setup>
import { CAlert, CAlertDescription, CAlertTitle } from '@chakra-ui/vue-next';
</script>
37 changes: 19 additions & 18 deletions components/content/examples/alert/Composition.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
<script setup>
import {
CAlert,
CAlertTitle,
CAlertDescription,
CAlertIcon
} from '@chakra-ui/vue-next';
</script>

<template>
<c-alert
<CAlert
variant="subtle"
status="success"
flex-direction="column"
Expand All @@ -9,22 +18,14 @@
justify-content="center"
w="full"
>
<c-alert-icon box-size="40px" />
<c-alert-title mt="4" mb="1" font-size="lg"
>Application Submitted!</c-alert-title
>
<c-alert-description max-width="sm" mt="auto" font-weight="normal"
>Our team will review your application. If you are found a fit for this
<CAlertIcon box-size="40px" />
<CAlertTitle mt="4" mb="1" font-size="lg">
Application Submitted!
</CAlertTitle>
<CAlertDescription max-width="sm" mt="auto" font-weight="normal">
Our team will review your application. If you are found a fit for this
role, someone will be in touch with you. Please do well to stay in touch
with our Jobs page</c-alert-description
>
</c-alert>
with our Jobs page
</CAlertDescription>
</CAlert>
</template>
<script setup>
import {
CAlert,
CAlertTitle,
CAlertDescription,
CAlertIcon
} from '@chakra-ui/vue-next';
</script>
58 changes: 29 additions & 29 deletions components/content/examples/alert/CompositionExample2.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,31 @@
<script setup>
import {
CButtonGroup,
CButton,
CAlert,
CAlertIcon,
CAlertTitle,
CAlertDescription
} from '@chakra-ui/vue-next';
import { ref } from 'vue';

const showAlert = ref(true);
</script>

<template>
<c-button
<CButton
v-if="!showAlert"
@click="showAlert = true"
border="1px solid rgba(47, 43, 67, 0.1)"
border-radius="2xl"
mr="3"
variant="outline"
box-shadow="0px 1px 3px rgba(47, 43, 67, 0.1), inset 0px -1px 0px rgba(47, 43, 67, 0.1)"
bg="transparent"
@click="showAlert = true"
>
Show Alert
</c-button>
<c-alert
</CButton>
<CAlert
v-if="showAlert"
status="warning"
variant="subtle"
Expand All @@ -20,33 +34,19 @@
justify-content="center"
text-align="center"
>
<c-alert-icon />
<c-alert-title mt="4" mb="1" font-size="lg"
>Before Submitting</c-alert-title
<CAlertIcon />
<CAlertTitle mt="4" mb="1" font-size="lg"
>Before Submitting</CAlertTitle
>
<c-alert-description max-width="sm" mt="auto" font-weight="normal">
<CAlertDescription max-width="sm" mt="auto" font-weight="normal">
Kindly note that this decision cannot be reversed, once you submit, your
results are uploaded to the database.
</c-alert-description>
<c-button-group variant="outline" mt="4">
<c-button color-scheme="blue" @click="showAlert = false"
>Proceed</c-button
</CAlertDescription>
<CButtonGroup variant="outline" mt="4">
<CButton color-scheme="blue" @click="showAlert = false"
>Proceed</CButton
>
<c-button @click="showAlert = false">Cancel</c-button>
</c-button-group>
</c-alert>
<CButton @click="showAlert = false">Cancel</CButton>
</CButtonGroup>
</CAlert>
</template>

<script setup>
import {
CButtonGroup,
CButton,
CAlert,
CAlertIcon,
CAlertTitle,
CAlertDescription
} from '@chakra-ui/vue-next';
import { ref } from 'vue';

const showAlert = ref(true);
</script>
41 changes: 21 additions & 20 deletions components/content/examples/alert/IconAlert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
<script setup>
import { CAlert, CAlertIcon } from '@chakra-ui/vue-next';
</script>

<template>
<c-alert variant="left-accent" status="info" mb="3">
<c-alert-icon mr="2" />
<c-alert-description> Please, update your KYC. </c-alert-description>
</c-alert>
<CAlert variant="left-accent" status="info" mb="3">
<CAlertIcon mr="2" />
<CAlertDescription> Please, update your KYC. </CAlertDescription>
</CAlert>

<c-alert variant="left-accent" status="warning" mb="3">
<c-alert-icon mr="2" />
<c-alert-description> Incorrect Password </c-alert-description>
</c-alert>
<CAlert variant="left-accent" status="warning" mb="3">
<CAlertIcon mr="2" />
<CAlertDescription> Incorrect Password </CAlertDescription>
</CAlert>

<c-alert variant="left-accent" status="success" mb="3">
<c-alert-icon mr="2" />
<c-alert-description>
<CAlert variant="left-accent" status="success" mb="3">
<CAlertIcon mr="2" />
<CAlertDescription>
Congratulations!. You scored above 75%
</c-alert-description>
</c-alert>
</CAlertDescription>
</CAlert>

<c-alert variant="left-accent" status="error" mb="3">
<c-alert-icon mr="2" />
<c-alert-description> Access revoked!</c-alert-description>
</c-alert>
<CAlert variant="left-accent" status="error" mb="3">
<CAlertIcon mr="2" />
<CAlertDescription> Access revoked!</CAlertDescription>
</CAlert>
</template>
<script setup>
import { CAlert, CAlertIcon } from '@chakra-ui/vue-next';
</script>
Loading