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

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

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