-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- App.vue内のヘッダー、入力、出力、文字数制限の部分をそれぞれのコンポーネントに分割 - 新しいコンポーネントを以下の通り追加: - Header.vue - TextInput.vue - TextOutput.vue - CharLimitInput.vue
- Loading branch information
1 parent
c82d708
commit 7001e41
Showing
5 changed files
with
146 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <template> | ||
| <div class="input-group mb-3 mt-3"> | ||
| <div class="input-group-prepend"> | ||
| <span class="input-group-text">Character limit / 文字数制限</span> | ||
| </div> | ||
| <input type="number" min="1000" class="form-control" v-model="localLimit" | ||
| placeholder="More than 1000 / 1000以上を入力してください" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, ref, watch } from 'vue'; | ||
| export default defineComponent({ | ||
| name: 'CharLimitInput', | ||
| props: { | ||
| modelValue: { | ||
| type: Number, | ||
| default: 4500 | ||
| } | ||
| }, | ||
| setup(props, { emit }) { | ||
| const localLimit = ref(props.modelValue); | ||
| watch(localLimit, (newValue) => { | ||
| emit('update:modelValue', newValue); | ||
| }); | ||
| return { | ||
| localLimit | ||
| }; | ||
| } | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <template> | ||
| <header> | ||
| <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | ||
| <div class="container"> | ||
| <a href="#" class="navbar-brand">📄📚 Paper Translation Helper 📚📄</a> | ||
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" | ||
| aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="collapse navbar-collapse" id="navbarNav"> | ||
| <ul class="navbar-nav mr-auto"></ul> | ||
| <ul class="navbar-nav"> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" | ||
| href="https://github.com/takanotume24/paper-translation-helper/wiki/%E4%BD%BF%E3%81%84%E6%96%B9">使い方</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" | ||
| href="https://github.com/takanotume24/paper-translation-helper/issues">ご意見･ご要望</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" | ||
| href="https://github.com/takanotume24/paper-translation-helper/">Repository</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="https://github.com/takanotume24/">@takanotume24</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| export default { | ||
| name: 'Header' | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <template> | ||
| <div class="form-group"> | ||
| <label for="original">Input / 入力</label> | ||
| <textarea id="original" class="form-control" v-model="localValue" placeholder="Paste Here. / ここに貼り付けてください." | ||
| rows="5"></textarea> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, ref, watch } from 'vue'; | ||
| export default defineComponent({ | ||
| name: 'TextInput', | ||
| props: { | ||
| modelValue: { | ||
| type: String, | ||
| default: '' | ||
| } | ||
| }, | ||
| setup(props, { emit }) { | ||
| const localValue = ref(props.modelValue); | ||
| watch(localValue, (newValue) => { | ||
| emit('update:modelValue', newValue); | ||
| }); | ||
| return { | ||
| localValue | ||
| }; | ||
| } | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <template> | ||
| <div class="list-group mt-3"> | ||
| <label class="list-group-item">Output / 出力</label> | ||
| <ul class="list-group"> | ||
| <li v-for="(column, index) in outputColumns" :key="index" class="list-group-item"> | ||
| <label :for="'text_area_' + index"> | ||
| No.{{ index }}, Number of characters: {{ column.join("").length }} | ||
| </label> | ||
| <textarea class="form-control" :id="'text_area_' + index" readonly>{{ column.join("\n") }}</textarea> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue'; | ||
| export default defineComponent({ | ||
| name: 'TextOutput', | ||
| props: { | ||
| outputColumns: { | ||
| type: Array as () => string[][], | ||
| default: () => [] | ||
| } | ||
| } | ||
| }); | ||
| </script> |