mirror of
https://github.com/aelve/guide.git
synced 2024-12-25 22:02:58 +03:00
edeb06aa09
* Added basic item desciption edit without handling of conflicts * improved MarkdownEditor props and loading * Added helpful global css class * Edit category item sections * got rid of useless wrapper component * deleted css rule for headings in category item body * normalizing url when category item link on edit * updated api of item summary * item and traits move * fixed category item info update * config restored * config restored
84 lines
1.5 KiB
Vue
84 lines
1.5 KiB
Vue
<template>
|
|
<div class="category-item-section">
|
|
<h3 class="title font-weight-bold mb-1">
|
|
{{title}}
|
|
<category-item-btn
|
|
small
|
|
:title="editBtnTitle"
|
|
:icon="editBtnIcon"
|
|
@click="toggleEdit"
|
|
/>
|
|
</h3>
|
|
|
|
<slot v-if="!isEdit"/>
|
|
|
|
<markdown-editor
|
|
v-else
|
|
class="mb-2"
|
|
toolbar
|
|
:value="editText"
|
|
:height="editorHeight"
|
|
@cancel="toggleEdit"
|
|
@save="save"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component, Prop } from 'vue-property-decorator'
|
|
import MarkdownEditor from 'client/components/MarkdownEditor.vue'
|
|
import CategoryItemBtn from 'client/components/CategoryItemBtn.vue'
|
|
|
|
@Component({
|
|
components: {
|
|
MarkdownEditor,
|
|
CategoryItemBtn
|
|
}
|
|
})
|
|
export default class CategoryItemSection extends Vue {
|
|
@Prop({
|
|
type: String,
|
|
default: ''
|
|
}) title: string
|
|
@Prop({
|
|
type: String,
|
|
default: ''
|
|
}) editText: string
|
|
@Prop({
|
|
type: Number,
|
|
default: 200
|
|
}) editorHeight: number
|
|
@Prop({
|
|
type: String,
|
|
default: 'pencil-alt'
|
|
}) editBtnIcon: string
|
|
@Prop({
|
|
type: String,
|
|
default: 'edit'
|
|
}) editBtnTitle: string
|
|
@Prop(Boolean) customEdit: boolean
|
|
|
|
isEdit: boolean = false
|
|
|
|
toggleEdit (): void {
|
|
if (this.customEdit) {
|
|
this.$emit('toggleEdit')
|
|
return
|
|
}
|
|
this.isEdit = !this.isEdit
|
|
}
|
|
|
|
save (edited: string): void {
|
|
this.$emit('save', edited)
|
|
this.toggleEdit()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.category-item-section:not(:last-child) {
|
|
margin-bottom: 15px;
|
|
}
|
|
</style>
|