Skip to content

Commit 5199766

Browse files
D-LiteD-Lite
authored
Collapse Component (#46)
* feat: collapse component documentation and change markdown link in new tab * refactor: change name casing collapse * refactor: change name casing collapse
1 parent 75ccf7b commit 5199766

File tree

4 files changed

+150
-5
lines changed

4 files changed

+150
-5
lines changed

‎components/content/examples/collapse/HeightCollapse.vue

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<CBox>
3+
<CButton mb="4" variant-color="blue" @click="show = !show">
4+
Show {{ show ? 'Less' : 'More' }}
5+
</CButton>
6+
<CCollapse :is-open="show" :starting-height="20">
7+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
8+
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
9+
type specimen book.
10+
</CCollapse>
11+
</CBox>
12+
</template>
13+
14+
15+
<script setup>
16+
import { ref } from 'vue';
17+
18+
const show = ref(false);
19+
</script>

‎components/content/examples/collapse/SimpleCollapse.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<CBox>
3+
<CButton mb="4" variant-color="blue" @click="show = !show">
4+
Toggle
5+
</CButton>
6+
<CCollapse :is-open="show">
7+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
8+
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
9+
type specimen book.
10+
</CCollapse>
11+
</CBox>
12+
</template>
13+
14+
<script setup>
15+
import { ref } from 'vue';
16+
17+
const show = ref(false);
18+
</script>

‎components/content/prose/ProseA.vue

+37-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,46 @@
1-
<template>
2-
<NuxtLink prefetch>
3-
<slot />
4-
</NuxtLink>
5-
</template>
1+
<script setup>
2+
const props = defineProps({
3+
href: {
4+
type: String,
5+
default: ''
6+
},
7+
blank: {
8+
type: Boolean,
9+
default: false
10+
}
11+
})
12+
function isHttpUrl(string) {
13+
let url;
14+
try {
15+
url = new URL(string);
16+
} catch (_) {
17+
return false;
18+
}
19+
return url.protocol === "http:" || url.protocol === "https:";
20+
}
21+
const isExternal = isHttpUrl(props.href)
22+
let bindProps = {
23+
to: props.href
24+
}
25+
if (isExternal || props.blank) {
26+
bindProps.target = '_blank'
27+
}
28+
</script>
629

730
<style scoped>
831
a {
932
color: var(--chakra-colors-green-600);
1033
}
34+
1135
a:hover {
1236
text-decoration: underline;
1337
}
1438
</style>
39+
40+
41+
<template>
42+
<NuxtLink v-bind="bindProps">
43+
<slot />
44+
</NuxtLink>
45+
</template>
46+

‎content/4.components/collapse.md

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: Collapse
3+
description: Collapse component
4+
version: 2.0+
5+
---
6+
# Collapse
7+
8+
The Collapse component is used to create regions of content that can expand/collapse with a basic animation. It helps to hide content that's not immediately relevant to the user.
9+
10+
This component leverages [animejs](https://animejs.com/){target="_blank"}, and composes the Box component.
11+
12+
## Import
13+
14+
```js
15+
import { CCollapse } from "@chakra-ui/vue-next";
16+
```
17+
18+
## Usage
19+
20+
::showcase
21+
:simple-collapse{width=full}
22+
::
23+
24+
25+
```html
26+
<CBox>
27+
<CButton mb="4" variant-color="blue" @click="show = !show">
28+
Toggle
29+
</CButton>
30+
<CCollapse :is-open="show">
31+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
32+
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
33+
type specimen book.
34+
</CCollapse>
35+
</CBox>
36+
```
37+
38+
## Change the Starting Height
39+
40+
::showcase
41+
:height-collapse{width=full}
42+
::
43+
44+
45+
```html
46+
<CBox>
47+
<CButton mb="4" variant-color="blue" @click="show = !show">
48+
Show {{ show ? 'Less' : 'More' }}
49+
</CButton>
50+
<CCollapse :is-open="show" :starting-height="20">
51+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
52+
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
53+
type specimen book.
54+
</CCollapse>
55+
</CBox>
56+
```
57+
58+
## Props
59+
60+
This component doesn't have any custom props.
61+
62+
| Name | Type | Description |
63+
|----------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------|
64+
| isOpen | `boolean` | If `true`, the content will be visible |
65+
| animateOpacity | `boolean` | If `true`, the opacity of the content will be animated |
66+
| duration | `number` | The animation duration as it expands |
67+
| startingHeight | `number` | he height you want the content in it's collapsed state. Set to `0` by default |
68+
| endingHeight | `number` | The height you want the content in it's expanded state. Set to `auto` by default |
69+
| easing | `string` | Add easing function for entering and leaving state. Accepts easing props from [animejs](https://animejs.com/documentation/#linearEasing){target="_blank"}. Set to `easeInOutSine` by default. |
70+
71+
## Events
72+
73+
| Name | Payload | Description |
74+
|----------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------|
75+
| `@start` | `Event` | The event to be called when the collapse animation starts. |
76+
| `@finish` | `Event` | The event to be called when the collapse animation ends. |

0 commit comments

Comments
 (0)