94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
<template>
|
|
<div class="k-block-fields-preview" @mousedown="preventSelect" :data-hidden="isHidden">
|
|
<k-fields-block-title
|
|
:content="content"
|
|
:fieldset="fieldset"
|
|
v-if="fieldset.label === null || fieldset.label"
|
|
@dblclick="toggle"
|
|
@toggle="toggle"
|
|
/>
|
|
<k-form
|
|
ref="form"
|
|
:autofocus="true"
|
|
:fields="fieldset.tabs.content.fields"
|
|
:value="$helper.clone(content)"
|
|
@input="$emit('update', $event)"
|
|
v-if="!isHidden"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
isHidden: JSON.parse(sessionStorage.getItem(`kirby.fieldsBlock.${this.$attrs.endpoints.field}.${this.$attrs.id}`))
|
|
}
|
|
},
|
|
methods: {
|
|
toggle () {
|
|
this.isHidden = !this.isHidden
|
|
sessionStorage.setItem(`kirby.fieldsBlock.${this.$attrs.endpoints.field}.${this.$attrs.id}`, this.isHidden)
|
|
},
|
|
preventSelect (event) {
|
|
if (event.detail > 1) {
|
|
if(!event.target.closest('.k-input')) {
|
|
event.preventDefault()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.k-block-fields-preview {
|
|
margin: -0.75rem;
|
|
overflow: hidden;
|
|
border-radius: var(--rounded);
|
|
}
|
|
|
|
.k-block-fields-preview .k-block-title {
|
|
padding: 0.75rem;
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.k-block-fields-preview:not([data-hidden="true"]) .k-block-title {
|
|
border-bottom: 1px solid rgba(0,0,0,.1);
|
|
}
|
|
|
|
.k-block-fields-preview .k-fields-block-toggle {
|
|
margin-left: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.k-block-fields-preview[data-hidden="true"] .k-fields-block-toggle {
|
|
transform: scaleY(-1);
|
|
}
|
|
|
|
.k-block-fields-preview .k-form {
|
|
padding: 1.25rem 1.5rem 1.5rem 1.5rem;
|
|
}
|
|
|
|
/**
|
|
* Reset `.k-layout-column .k-empty` overrides
|
|
*/
|
|
|
|
.k-block-fields-preview .k-empty {
|
|
position: static !important;
|
|
opacity: 1 !important;
|
|
align-items: stretch !important;
|
|
justify-content: flex-start !important;
|
|
color: #777 !important;
|
|
border: 1px dashed #ccc !important;
|
|
border-radius: 1px !important;
|
|
}
|
|
|
|
.k-block-fields-preview .k-empty[data-layout="cards"] {
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.k-block-fields-preview .k-empty[data-layout="list"] .k-icon {
|
|
border-right: 1px solid rgba(0,0,0,.05) !important;
|
|
}
|
|
</style> |