Stackedit/src/components/modals/providers/DropboxPublishModal.vue
2022-06-02 07:45:13 +08:00

61 lines
2.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<modal-inner aria-label="发布到Dropbox">
<div class="modal__content">
<div class="modal__image">
<icon-provider provider-id="dropbox"></icon-provider>
</div>
<p>发布到您的<b>Dropbox</b></p>
<form-entry label="File path" error="path">
<input slot="field" class="textfield" type="text" v-model.trim="path" @keydown.enter="resolve()">
<div class="form-entry__info">
<b>例如:</b> {{config.token.fullAccess ? '' : '/Applications/StackEdit (restricted)'}}/path/to/My Document.html<br>
如果文件存在将被覆盖
</div>
</form-entry>
<form-entry label="Template">
<select slot="field" class="textfield" v-model="selectedTemplate" @keydown.enter="resolve()">
<option v-for="(template, id) in allTemplatesById" :key="id" :value="id">
{{ template.name }}
</option>
</select>
<div class="form-entry__actions">
<a href="javascript:void(0)" @click="configureTemplates">配置模板</a>
</div>
</form-entry>
</div>
<div class="modal__button-bar">
<button class="button" @click="config.reject()">取消</button>
<button class="button button--resolve" @click="resolve()">确认</button>
</div>
</modal-inner>
</template>
<script>
import dropboxProvider from '../../../services/providers/dropboxProvider';
import modalTemplate from '../common/modalTemplate';
export default modalTemplate({
data: () => ({
path: '',
}),
computedLocalSettings: {
selectedTemplate: 'dropboxPublishTemplate',
},
created() {
this.path = `/${this.currentFileName}.html`;
},
methods: {
resolve() {
if (!dropboxProvider.checkPath(this.path)) {
this.setError('path');
} else {
// Return new location
const location = dropboxProvider.makeLocation(this.config.token, this.path);
location.templateId = this.selectedTemplate;
this.config.resolve(location);
}
},
},
});
</script>