Skip to content

Commit

Permalink
feat(635): support isExpanded prop to allow expansion by default
Browse files Browse the repository at this point in the history
  • Loading branch information
carsoli committed Jul 25, 2022
1 parent 07d204d commit 35522cc
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 22 deletions.
34 changes: 19 additions & 15 deletions packages/documentation/pages/usage/components/drawer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@ It is best to place secondary functionality or information into the drawer, and

![Structure](~/assets/img/drawer_structure.png)

- **Drawer:** The size of drawer depends on information density.
- **Handle:** By clicking the handles, the drawer can be `Expanded` to display more information.
- **Background:** The background should be black `#000000` with `46%` opacity.

## Size

<div class="element-example">
Expand Down Expand Up @@ -54,6 +50,24 @@ It is best to place secondary functionality or information into the drawer, and
</KtDrawer>
</div>

## Expansion

<div class="element-example" >
<KtButton type="primary" class="mr-16px" @click="showDefaultExpanded=true" label="Show Expanded-by-default Drawer" />
<KtDrawer v-if="showDefaultExpanded" isExpanded @close="showDefaultExpanded=false">
<div slot="drawer-header">
<h2>Default Size Drawer</h2>
</div>
<div slot="drawer-body">
<p>This drawer is expanded by default.</p>
</div>
<div slot="drawer-footer">
<KtButton @click="showDefaultExpanded=false" class="w-100" label="Close Drawer" />
</div>
</KtDrawer>

</div>

There are different ways to customize the width of the drawer.

Each drawer has a default state and a wide state, the transition can be triggered by clicking on the arrow at the edge of the drawer.
Expand Down Expand Up @@ -125,17 +139,6 @@ When the `disallowCloseOutside` flag is set, it prevents the user from accidenta
</div>

</ShowCase>

## Usage

### Attributes

| Attribute | Description | Type | Accepted values | Default |
| :--------------------- | :----------------------------------------- | :-------- | :-------------- | :------ |
| `disallowCloseOutside` | closed drawer when click outside of drawer | `Boolean` | — | `true` |
| `defaultWidth` | width when drawer is closed | `String` | CSS width | — |
| `expandWidth` | width when drawer is expanded | `String` | CSS width | — |
| `isWide` | wide drawer | `Boolean` | — | `false` |
</template>

<script lang="ts">
Expand All @@ -155,6 +158,7 @@ export default defineComponent({
return {
component: KtDrawer,
customizeWidthDrawer: false,
showDefaultExpanded: false,
showDrawer: false,
showWideDrawer: false,
}
Expand Down
23 changes: 16 additions & 7 deletions packages/kotti-ui/source/kotti-drawer/KtDrawer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<slot name="drawer-footer" />
</div>
<div class="kt-drawer__handle" @click="onDrawerHandleClick">
<i v-if="isExpanded" class="yoco" v-text="Yoco.Icon.CHEVRON_RIGHT" />
<i v-if="_isExpanded" class="yoco" v-text="Yoco.Icon.CHEVRON_RIGHT" />
<i v-else class="yoco" v-text="Yoco.Icon.CHEVRON_LEFT" />
</div>
</div>
Expand All @@ -22,7 +22,7 @@

<script lang="ts">
import { Yoco } from '@3yourmind/yoco'
import { computed, defineComponent, ref } from '@vue/composition-api'
import { computed, defineComponent, ref, watch } from '@vue/composition-api'
import { makeProps } from '../make-props'
Expand All @@ -32,22 +32,31 @@ export default defineComponent<KottiDrawer.PropsInternal>({
name: 'KtDrawer',
props: makeProps(KottiDrawer.propsSchema),
setup(props, { emit }) {
const isExpanded = ref(false)
const _isExpanded = ref(false)
watch(
() => props.isExpanded,
(shouldExpand) => {
_isExpanded.value = shouldExpand
},
{ immediate: true },
)
return {
_isExpanded,
drawerClass: computed(() => ({
'kt-drawer__container': true,
'kt-drawer__container--is-expanded': isExpanded.value,
'kt-drawer__container--is-expanded': _isExpanded.value,
'kt-drawer__container--is-wide': props.isWide,
})),
drawerWidth: computed(() => {
return props.defaultWidth === null || props.expandWidth === null
? {}
: { width: isExpanded.value ? props.expandWidth : props.defaultWidth }
: {
width: _isExpanded.value ? props.expandWidth : props.defaultWidth,
}
}),
isExpanded,
onDrawerHandleClick: () => {
isExpanded.value = !isExpanded.value
_isExpanded.value = !_isExpanded.value
},
onOutsideDrawerClick: () => {
if (!props.disallowCloseOutside) {
Expand Down
1 change: 1 addition & 0 deletions packages/kotti-ui/source/kotti-drawer/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export namespace KottiDrawer {
defaultWidth: z.string().nullable().default(null),
disallowCloseOutside: z.boolean().default(false),
expandWidth: z.string().nullable().default(null),
isExpanded: z.boolean().default(false),
isWide: z.boolean().default(false),
})

Expand Down

0 comments on commit 35522cc

Please sign in to comment.