emilis
/
FoundKey
forked from FoundKeyGang/FoundKey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor pages/page-editor/page-editor.container.vue to composition API

This commit is contained in:
Johann150 2022-07-31 14:31:30 +02:00
parent 5db59ba560
commit 225cd3caef
Signed by untrusted user: Johann150
GPG Key ID: 9EE6577A2A06F8F1
1 changed files with 28 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
packages/client/src/pages/page-editor/page-editor.container.vue
View File

@ -4,7 +4,7 @@
<div class="title"><slot name="header"></slot></div>
<div class="buttons">
<slot name="func"></slot>
<button v-if="removable" class="_button" @click="remove()">
<button v-if="removable" class="_button" @click="emit('remove')">
<i class="fas fa-trash-alt"></i>
</button>
<button v-if="draggable" class="drag-handle _button">
@ -16,56 +16,41 @@
</button>
</div>
</header>
<p v-show="showBody" v-if="error != null" class="error">{{ $t('_pages.script.typeError', { slot: error.arg + 1, expect: $t(`script.types.${error.expect}`), actual: $t(`script.types.${error.actual}`) }) }}</p>
<p v-show="showBody" v-if="warn != null" class="warn">{{ $t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
<p v-show="showBody" v-if="error != null" class="error">{{ i18n.t('_pages.script.typeError', { slot: error.arg + 1, expect: i18n.t(`script.types.${error.expect}`), actual: i18n.t(`script.types.${error.actual}`) }) }}</p>
<p v-show="showBody" v-if="warn != null" class="warn">{{ i18n.t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
<div v-show="showBody" class="body">
<slot></slot>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import { i18n } from '@/i18n';
export default defineComponent({
props: {
expanded: {
type: Boolean,
default: true
},
removable: {
type: Boolean,
default: true
},
draggable: {
type: Boolean,
default: false
},
error: {
required: false,
default: null
},
warn: {
required: false,
default: null
}
},
emits: ['toggle', 'remove'],
data() {
return {
showBody: this.expanded,
};
},
methods: {
toggleContent(show: boolean) {
this.showBody = show;
this.$emit('toggle', show);
},
remove() {
this.$emit('remove');
}
}
const emit = defineEmits<{
(ev: 'toggle', v: boolean): void;
(ev: 'remove"): void;
}>();
const props = withDefaults(defineProps<{
expanded?: boolean;
removable?: boolean;
draggable?: boolean;
error?: { arg: integer; expect: string; actual: string; };
warn?: { slot: integer; };
}>(), {
expanded: true,
removable: true,
draggable: false,
});
let showBody = $ref(props.expanded);
function toggleContent(show: boolean) {
showBody = show;
emit('toggle', show);
}
</script>
<style lang="scss" scoped>