🏴󠁧󠁢󠁷󠁬󠁳󠁿

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;