docs/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>local memo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  </head>
  <body class="m-5">
    <div class="block">
      <h1 class="title">local memo</h1>
      <p class="subtitle">ローカルに保存してるからって安全なわけではありません。なんなら手元でtxtファイル作って管理したほうがよっぽど安全だと思います<a href="https://www.rdegges.com/2018/please-stop-using-local-storage/">参考元/</a><a href="https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851">参考元（日本語訳）</a></p>
    </div>
    <div class="block" id="app">
      <article class="columns">
        <aside class="left-side colum menu box is-2">
          <p class="menu-label">files</p>
          <ul class="menu-list">
            <li>
              <button class="button is-small is-white" v-on:click="seenInput" id="new">新規ファイル</button>
            </li>
            <li>
              <button class="button is-small is-white" v-on:click="overwritingSave" id="overwritingSave">上書き保存</button>
            </li>
            <li>
              <button class="button is-small is-white" v-on:click="saveAsInputSeen=true" id="saveAs">名前を付けて保存</button>
              <form action="" v-if="saveAsInputSeen" v-on:submit.prevent="saveAs">
                <input class="input is-primary" type="text" ref="saveAsFileName" v-if="saveAsInputSeen">
              </form>
            </li>
            <li>
              <button class="button is-small is-white" v-on:click="rmFileListSeen=true" id="saveAs">ファイルを削除</button>
              <div v-if="rmFileListSeen">
                <div v-for="file in fileList" id="delFileList">
                  <input type="checkbox" v-model="rmFileIdList" v-bind:value="file.id" v-bind:id="file.id">
                  <label>{{ file.fileName }}</label>
                </div>
                <button class="button is-danger is-light" v-on:click="removeFile">削除</button>
                <button class="button is-primary is-light" v-on:click="rmFileListSeen=false">キャンセル</button>
              </div>
            </li>
          </ul>
        </aside>
        <div class="main column is-7">
          <div class="tabs is-boxed" id="editorTabs">
            <ul>
              <li v-for="file in openFileList" v-bind:file="file" v-bind:key="file.id" v-bind:class="{'is-active':file.isActive}"><a>
                  <p v-on:click="changeActive(file)">{{ file.fileName }}</p>
                  <button class="delete is-small ml-2" v-on:click="closeFile(file)"></button></a></li>
            </ul>
          </div>
          <textarea class="textarea" v-if="editorSeen" v-model="fileList.filter(file=&gt;file.isActive)[0].txt" ref="editor" v-on:input="overwritingSave"></textarea>
        </div>
        <div class="right-side column box is-3">
          <aside class="left-side colum menu" id="memoList">
            <p class="menu-label">memos</p>
            <ul class="menu-list">
              <li v-for="file in fileList" v-bind:file="file" v-bind:key="file.id"><a class="columns" v-on:click="openFile(file)">
                  <p class="is-four-fifths column">{{ file.fileName }}</p></a></li>
              <form v-on:submit.prevent="newFile">
                <input class="input is-primary" ref="newFileName" placeholder="new file name" v-if="newFileInputSeen" id="newFileNameInput">
              </form>
            </ul>
          </aside>
        </div>
      </article>
    </div>
    <script src="./bundle.js"></script><script src="https://kit.fontawesome.com/a198b76e1e.js" crossorigin="anonymous"></script>
  </body>
</html>