🏴󠁧󠁢󠁷󠁬󠁳󠁿

package.json

@@ -17,6 +17,7 @@
     "chart.js": "^2.7.1",
     "cross-env": "^5.2.0",
     "date-fns": "^1.30.1",
+    "grapheme-splitter": "^1.0.4",
     "husky": "^1.3.1",
     "jquery": "^3.2.1",
     "js-cookie": "^2.2.0",

resources/assets/js/checkin.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import TagInput from "./components/TagInput.vue";
 import MetadataPreview from './components/MetadataPreview.vue';
+import GraphemeSplitter from "grapheme-splitter";
 
 export const bus = new Vue({name: "EventBus"});
 
@@ -16,6 +17,7 @@ new Vue({
     data: {
         metadata: null,
         metadataLoadState: MetadataLoadState.Inactive,
+        noteLength: 0
     },
     components: {
         TagInput,
@@ -28,6 +30,16 @@ new Vue({
             this.fetchMetadata(linkInput.value);
         }
     },
+    watch: {
+        noteLength: (length: number) => {
+            const counter = document.querySelector<HTMLElement>(
+                "#note-character-counter"
+            );
+            if (counter) {
+                counter.innerText = `残り ${500 - length} 文字`;
+            }
+        }
+    },
     methods: {
         // オカズリンクの変更時
         onChangeLink(event: Event) {
@@ -43,6 +55,14 @@ new Vue({
                 this.fetchMetadata(url);
             }
         },
+        onChangeNote(event: Event) {
+            if (event.target instanceof HTMLTextAreaElement) {
+                const splitter = new GraphemeSplitter();
+                this.noteLength = splitter.splitGraphemes(
+                    event.target.value
+                ).length;
+            }
+        },
         // メタデータの取得
         fetchMetadata(url: string) {
             this.metadataLoadState = MetadataLoadState.Loading;

resources/views/ejaculation/checkin.blade.php

@@ -67,8 +67,8 @@
                 <div class="form-row">
                     <div class="form-group col-sm-12">
                         <label for="note"><span class="oi oi-comment-square"></span> ノート</label>
-                        <textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4">{{ old('note') ?? $defaults['note'] }}</textarea>
+                        <textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4" v-on:input="onChangeNote">{{ old('note') ?? $defaults['note'] }}</textarea>
-                        <small class="form-text text-muted">
+                        <small id="note-character-counter" class="form-text text-muted">
                             最大 500 文字
                         </small>
                         @if ($errors->has('note'))

resources/views/ejaculation/edit.blade.php

@@ -68,8 +68,8 @@
                 <div class="form-row">
                     <div class="form-group col-sm-12">
                         <label for="note"><span class="oi oi-comment-square"></span> ノート</label>
-                        <textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4">{{ old('note') ?? $ejaculation->note }}</textarea>
+                        <textarea id="note" name="note" class="form-control {{ $errors->has('note') ? ' is-invalid' : '' }}" rows="4" v-on:input="onChangeNote">{{ old('note') ?? $ejaculation->note }}</textarea>
-                        <small class="form-text text-muted">
+                        <small id="note-character-counter" class="form-text text-muted">
                             最大 500 文字
                         </small>
                         @if ($errors->has('note'))

tsconfig.json

@@ -5,9 +5,8 @@
     "module": "es2015",
     "moduleResolution": "node",
     "strict": true,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true
   },
-  "include": [
+  "include": ["resources/assets/js/**/*"]
-    "resources/assets/js/**/*"
-  ]
 }

yarn.lock

@@ -3357,6 +3357,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
   integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
 
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"