You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

88 lines
2.5 KiB

3 years ago
<app-sidebar>
3 years ago
<div class={ getCssClasses() }>
3 years ago
<div class="sidebar__inner">
<!-- header -->
<div class="bar">
<div class="bar__main">
<slot name="title" />
</div>
<div class="bar__end">
<button class="button button--transparent" type="button" onclick={ (event) => { handleClose(event) } }>
3 years ago
<svg class="icon fill-danger fill-text-hover" aria-hidden="true">
3 years ago
<use xlink:href="/symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<!-- body -->
<div class="sidebar__body">
3 years ago
<slot name="form" />
3 years ago
<app-loading loading={ props.loading }></app-loading>
3 years ago
</div>
<!-- footer -->
<div class="sidebar__footer">
3 years ago
<button class="button m-bottom-0" type="submit" form="{ props.formId }" disabled={ props.loading }>
3 years ago
Save
<svg class="icon fill-success p-left-3" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-check"></use>
</svg>
</button>
3 years ago
<button class="button m-bottom-0" type="submit" form="{ props.formId }" disabled={ props.loading } close>
3 years ago
Save and Close
<svg class="icon fill-success p-left-3" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-arrow-right"></use>
</svg>
</button>
</div>
</div>
</div>
<script>
3 years ago
import * as riot from 'riot'
import AppLoading from './loading.riot'
riot.register('app-loading', AppLoading)
3 years ago
/**
*
*
*
*/
export default {
3 years ago
/**
*
*
*/
handleClose()
3 years ago
{
3 years ago
this.props.close()
3 years ago
},
/**
*
*
*/
3 years ago
getCssClasses()
3 years ago
{
3 years ago
const classes = [
3 years ago
'sidebar'
]
3 years ago
if (this.props.open === true) {
3 years ago
classes.push('sidebar--open')
}
return classes.join(' ')
}
}
</script>
</app-sidebar>