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;
+}