%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<v-collapse-wrapper
ref="collapseWrapper"
v-on:afterToggle="toggleExpanded"
:active="active || expanded"
:class="[
'searchwp-meta-box',
'postbox',
expanded ? '' : 'closed'
]">
<h2
:class="['searchwp-meta-box-heading', 'hndle', collapsible ? '' : 'searchwp-meta-box-heading-locked']"
v-collapse-toggle>
<button
v-if="collapsible"
@click.stop="triggerToggle"
type="button"
class="handlediv"
:aria-expanded="expanded"
>
<span class="screen-reader-text">Toggle panel: {{ label }}</span>
<span class="toggle-indicator" :aria-hidden="expanded"></span>
</button>
<span class="searchwp-meta-box-heading__label">
<slot name="heading"></slot>
</span>
</h2>
<div v-collapse-content>
<slot name="content"></slot>
</div>
</v-collapse-wrapper>
</template>
<script>
export default {
name: 'MetaBox',
props: {
label: String,
active: {
type: Boolean,
default: false
},
collapsible: {
type: Boolean,
default: false
}
},
computed: {
expanded: function() {
return this.collapsible ? this.active : true;
}
},
methods: {
toggleExpanded() {
if (this.collapsible) {
this.$emit('afterToggle', !this.expanded);
} else {
this.$refs.collapseWrapper.open();
}
},
triggerToggle() {
this.$refs.collapseWrapper.toggle();
}
}
}
</script>
<style lang="scss">
.searchwp-meta-box {
margin: 0;
&.closed .hndle {
border-bottom: 0;
}
&.postbox .handlediv {
height: auto;
float: none;
}
}
.wp-core-ui #poststuff .searchwp-meta-box-heading {
display: flex;
flex-direction: row-reverse;
.searchwp-meta-box-heading__label {
display: flex;
align-items: center;
flex: 1;
}
&.hndle.searchwp-meta-box-heading-locked {
cursor: default;
border-bottom: 1px solid #ccd0d4; // This was from <5.5. WordPress 5.5 changed borders.
.searchwp-meta-box-heading__label {
cursor: default;
}
}
}
</style>
Zerion Mini Shell 1.0