Merge pull request #199 from shikorism/feature/vue

タグ入力欄のVue化

resources/assets/js/checkin.js

@@ -1,58 +0,0 @@
-function updateTags() {
-    $('input[name=tags]').val(
-        $('#tags')
-            .find('li')
-            .map(function () {
-                return $(this).data('value');
-            })
-            .get()
-            .join(' ')
-    );
-}
-
-function insertTag(value) {
-    $('<li class="list-inline-item badge badge-primary" style="cursor: pointer;"><span class="oi oi-tag"></span> <span></span> | x</li>')
-        .data('value', value)
-        .children(':last-child')
-            .text(value)
-            .end()
-        .appendTo('#tags');
-}
-
-var initTags = $('input[name=tags]').val();
-if (initTags.trim() !== '') {
-    initTags.split(' ').forEach(function (value) {
-        insertTag(value);
-    });
-}
-
-$('#tagInput').on('keydown', function (ev) {
-    var $this = $(this);
-    if ($this.val().trim() !== '') {
-        switch (ev.key) {
-            case 'Tab':
-            case 'Enter':
-            case ' ':
-                if (ev.originalEvent.isComposing !== true) {
-                    insertTag($this.val().trim());
-                    $this.val('');
-                    updateTags();
-                }
-                ev.preventDefault();
-                break;
-        }
-    } else if (ev.key === 'Enter') {
-        // 誤爆防止
-        ev.preventDefault();
-    }
-});
-
-$('#tags')
-    .on('click', 'li', function (ev) {
-        $(this).remove();
-        updateTags();
-    })
-    .parent()
-    .on('click', function (ev) {
-        $('#tagInput').focus();
-    });

resources/assets/js/checkin.ts

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+import TagInput from "./components/TagInput.vue";
+
+new Vue({
+    el: '#app',
+    components: {
+        TagInput
+    }
+});

resources/assets/js/components/TagInput.vue

@@ -0,0 +1,77 @@
+<template>
+    <div :class="containerClass" @click="$refs.input.focus()">
+        <input :name="name" type="hidden" :value="tagValue">
+        <ul class="list-inline d-inline">
+            <li v-for="(tag, i) in tags"
+                class="list-inline-item badge badge-primary tag-item"
+                @click="removeTag(i)"><span class="oi oi-tag"></span> {{ tag }} | x</li>
+        </ul>
+        <input :id="id"
+               ref="input"
+               type="text"
+               class="tag-input"
+               v-model="buffer"
+               @keydown="onKeyDown">
+    </div>
+</template>
+
+<script lang="ts">
+    import {Vue, Component, Prop} from "vue-property-decorator";
+
+    @Component
+    export default class TagInput extends Vue {
+        @Prop(String) readonly id!: string;
+        @Prop(String) readonly name!: string;
+        @Prop(String) readonly value!: string;
+        @Prop(Boolean) readonly isInvalid!: boolean;
+
+        tags: string[] = this.value.trim() !== "" ? this.value.trim().split(" ") : [];
+        buffer: string = "";
+
+        onKeyDown(event: KeyboardEvent) {
+            if (this.buffer.trim() !== "") {
+                switch (event.key) {
+                    case 'Tab':
+                    case 'Enter':
+                    case ' ':
+                        if ((event as any).isComposing !== true) {
+                            this.tags.push(this.buffer);
+                            this.buffer = "";
+                        }
+                        event.preventDefault();
+                        break;
+                }
+            } else if (event.key === "Enter") {
+                // 誤爆防止
+                event.preventDefault();
+            }
+        }
+
+        removeTag(index: number) {
+            this.tags.splice(index, 1);
+        }
+
+        get containerClass(): object {
+            return {
+                "form-control": true,
+                "h-auto": true,
+                "is-invalid": this.isInvalid
+            };
+        }
+
+        get tagValue(): string {
+            return this.tags.join(" ");
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .tag-item {
+        cursor: pointer;
+    }
+
+    .tag-input {
+        border: 0;
+        outline: 0;
+    }
+</style>

resources/assets/js/vue-shims.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+    import Vue from "vue";
+    export default Vue;
+}

resources/views/ejaculation/checkin.blade.php

@@ -3,7 +3,7 @@
 @section('title', 'チェックイン')
 
 @section('content')
-<div class="container">
+<div id="app" class="container">
     <h2>今致してる？</h2>
     <hr>
     <div class="row justify-content-center mt-5">
@@ -38,12 +38,8 @@
                 </div>
                 <div class="form-row">
                     <div class="form-group col-sm-12">
-                        <input name="tags" type="hidden" value="{{ old('tags') ?? $defaults['tags'] }}">
                         <label for="tagInput"><span class="oi oi-tags"></span> タグ</label>
-                        <div class="form-control h-auto {{ $errors->has('tags') ? ' is-invalid' : '' }}">
-                            <ul id="tags" class="list-inline d-inline"></ul>
-                            <input id="tagInput" type="text" style="outline: 0; border: 0;">
-                        </div>
+                        <tag-input id="tagInput" name="tags" value="{{ old('tags') ?? $defaults['tags'] }}" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
                         <small class="form-text text-muted">
                             Tab, Enter, 半角スペースのいずれかで入力確定します。
                         </small>

resources/views/ejaculation/edit.blade.php

@@ -3,7 +3,7 @@
 @section('title', 'チェックインの修正')
 
 @section('content')
-<div class="container">
+<div id="app" class="container">
     <h2>チェックインの修正</h2>
     <hr>
     <div class="row justify-content-center mt-5">
@@ -39,12 +39,8 @@
                 </div>
                 <div class="form-row">
                     <div class="form-group col-sm-12">
-                        <input name="tags" type="hidden" value="{{ old('tags') ?? $ejaculation->textTags() }}">
                         <label for="tagInput"><span class="oi oi-tags"></span> タグ</label>
-                        <div class="form-control h-auto {{ $errors->has('tags') ? ' is-invalid' : '' }}">
-                            <ul id="tags" class="list-inline d-inline"></ul>
-                            <input id="tagInput" type="text" style="outline: 0; border: 0;">
-                        </div>
+                        <tag-input id="tagInput" name="tags" value="{{ old('tags') ?? $ejaculation->textTags() }}" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
                         <small class="form-text text-muted">
                             Tab, Enter, 半角スペースのいずれかで入力確定します。
                         </small>