Skip to content

feat(Collapse): init Collapse #82

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

Merged
FliPPeDround merged 1 commit into from
Nov 4, 2022
Merged

feat(Collapse): init Collapse #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
'Carousel.story': typeof import('./src/components/Data/Carousel/carousel.story.vue')['default']
'Cascader.story': typeof import('./src/components/Form/cascader.story.vue')['default']
'Checkbox.story': typeof import('./src/components/Form/checkbox.story.vue')['default']
'Collapse.story': typeof import('./src/components/Data/Collapse/collapse.story.vue')['default']
'Color.story': typeof import('./src/components/Basic/Color/color.story.vue')['default']
'ColorPicker.story': typeof import('./src/components/Form/colorPicker.story.vue')['default']
'Container.story': typeof import('./src/components/Basic/Container/container.story.vue')['default']
Expand All @@ -43,6 +44,8 @@ declare module '@vue/runtime-core' {
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
ElCheckTag: typeof import('element-plus/es')['ElCheckTag']
ElCol: typeof import('element-plus/es')['ElCol']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
Expand Down
33 changes: 33 additions & 0 deletions src/components/Data/Collapse/collapse.story.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
## Collapse Attributes

| Name | Description | Type | Accepted Values | Default |
| --------------------- | ---------------------------------- | ---------------------------------------------------- | --------------- | ------- |
| model-value / v-model | currently active panel | string (accordion mode) / array (non-accordion mode) | — | — |
| accordion | whether to activate accordion mode | boolean | — | false |

## Collapse Events

| Name | Description | Parameters |
| ------ | ---------------------------------- | ------------------------------------------------------------------- |
| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |

## Collapse Slots

| Name | Description | Subtags |
| ---- | ------------------------- | ------------- |
| - | customize default content | Collapse Item |

## Collapse Item Attributes

| Name | Description | Type | Accepted Values | Default |
| -------- | ---------------------------------- | ------------- | --------------- | ------- |
| name | unique identification of the panel | string/number | — | — |
| title | title of the panel | string | — | — |
| disabled | disable the collapse item | boolean | — | — |

## Collapse Item Slot

| Name | Description |
| ----- | ------------------------------ |
| — | content of Collapse Item |
| title | content of Collapse Item title |
91 changes: 91 additions & 0 deletions src/components/Data/Collapse/collapse.story.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<script setup lang="ts">
import { isAttribute } from '@/utils'

const activeNames = ref(['1'])
const accordion = ref(false)
const firstCollapseItem = reactive({
title: 'Consistency',
disabled: false,
})
const secondCollapseItem = reactive({
title: 'Feedback',
disabled: false,
})
const source = computed(() => {
return `<script setup lang="ts">
const activeNames = ref(['1'])
<\/script>

<template>
<el-collapse v-model="activeNames">
<el-collapse-item
title="${firstCollapseItem.title}"
name="1"${
isAttribute(
firstCollapseItem.disabled,
' disabled',
)}
>
Consistent with real life: in line with the process and logic of real
life, and comply with languages and habits that the users are used to;
</el-collapse-item>
<el-collapse-item
title="${firstCollapseItem.title}"
name="2"${
isAttribute(
firstCollapseItem.disabled,
' disabled',
)}
>
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
</el-collapse-item>
</el-collapse>
</template>
`
})
</script>

<template>
<Story title="Data/Collapse" icon="mdi:collapse-all">
<Variant
title="Basic Usage"
:source="source"
>
<el-collapse
v-model="activeNames"
:accordion="accordion"
>
<el-collapse-item
:title="firstCollapseItem.title"
:disabled="firstCollapseItem.disabled"
name="1"
>
Consistent with real life: in line with the process and logic of real
life, and comply with languages and habits that the users are used to;
</el-collapse-item>
<el-collapse-item
:title="secondCollapseItem.title"
:disabled="secondCollapseItem.disabled"
name="2"
>
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
</el-collapse-item>
</el-collapse>
<template #controls>
<HstCheckbox v-model="accordion" title="Accordion" />
<el-divider border-style="dotted" content-position="left">
<span>First Collapse Item</span>
</el-divider>
<HstText v-model="firstCollapseItem.title" title="Title" />
<HstCheckbox v-model="firstCollapseItem.disabled" title="Disable" />
<el-divider border-style="dotted" content-position="left">
<span>Second Collapse Item</span>
</el-divider>
<HstText v-model="secondCollapseItem.title" title="Title" />
<HstCheckbox v-model="secondCollapseItem.disabled" title="Disable" />
</template>
</Variant>
</Story>
</template>