From 0670cb8736b6500e9d6bbbcdb0367342eb8ef94a Mon Sep 17 00:00:00 2001 From: shibafu Date: Sat, 1 Jun 2019 00:40:35 +0900 Subject: [PATCH] =?UTF-8?q?=E3=82=BF=E3=82=B0=E5=85=A5=E5=8A=9B=E6=AC=84?= =?UTF-8?q?=E3=81=A0=E3=81=91Vue=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- resources/assets/js/checkin.ts | 62 ++------------- resources/assets/js/components/TagInput.vue | 77 +++++++++++++++++++ resources/assets/js/vue-shims.d.ts | 4 + resources/views/ejaculation/checkin.blade.php | 7 +- resources/views/ejaculation/edit.blade.php | 7 +- tsconfig.json | 4 +- yarn.lock | 20 ++++- 8 files changed, 113 insertions(+), 72 deletions(-) create mode 100644 resources/assets/js/components/TagInput.vue create mode 100644 resources/assets/js/vue-shims.d.ts diff --git a/package.json b/package.json index d8b7fa3..e957a17 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,9 @@ "ts-loader": "^6.0.1", "typescript": "^3.4.5", "vue": "^2.6.10", - "vue-template-compiler": "^2.6.6" + "vue-class-component": "^7.1.0", + "vue-property-decorator": "^8.1.1", + "vue-template-compiler": "^2.6.10" }, "stylelint": { "extends": "stylelint-config-recess-order" diff --git a/resources/assets/js/checkin.ts b/resources/assets/js/checkin.ts index 1e0a67d..7e54285 100644 --- a/resources/assets/js/checkin.ts +++ b/resources/assets/js/checkin.ts @@ -1,59 +1,9 @@ -function updateTags() { - $('input[name=tags]').val( - $('#tags') - .find('li') - .map(function () { - return $(this).data('value'); - }) - .get() - .join(' ') - ); -} +import Vue from 'vue'; +import TagInput from "./components/TagInput.vue"; -function insertTag(value: string) { - $('
  • | x
    • ') - .data('value', value) - .children(':last-child') - .text(value) - .end() - .appendTo('#tags'); -} - -const initTags = $('input[name=tags]').val() as string; -if (initTags.trim() !== '') { - initTags.split(' ').forEach(function (value) { - insertTag(value); - }); -} - -$('#tagInput').on('keydown', function (ev: JQuery.KeyDownEvent) { - const $this = $(this); - let value = $this.val() as string; - if (value.trim() !== '') { - switch (ev.key) { - case 'Tab': - case 'Enter': - case ' ': - if ((ev.originalEvent as any).isComposing !== true) { - insertTag(value.trim()); - $this.val(''); - updateTags(); - } - ev.preventDefault(); - break; - } - } else if (ev.key === 'Enter') { - // 誤爆防止 - ev.preventDefault(); +new Vue({ + el: '#app', + components: { + TagInput } }); - -$('#tags') - .on('click', 'li', function (ev) { - $(this).remove(); - updateTags(); - }) - .parent() - .on('click', function (ev) { - $('#tagInput').focus(); - }); \ No newline at end of file diff --git a/resources/assets/js/components/TagInput.vue b/resources/assets/js/components/TagInput.vue new file mode 100644 index 0000000..db81d55 --- /dev/null +++ b/resources/assets/js/components/TagInput.vue @@ -0,0 +1,77 @@ + + + diff --git a/resources/assets/js/vue-shims.d.ts b/resources/assets/js/vue-shims.d.ts new file mode 100644 index 0000000..ad17f79 --- /dev/null +++ b/resources/assets/js/vue-shims.d.ts @@ -0,0 +1,4 @@ +declare module "*.vue" { + import Vue from "vue"; + export default Vue; +} \ No newline at end of file diff --git a/resources/views/ejaculation/checkin.blade.php b/resources/views/ejaculation/checkin.blade.php index 669b9cf..fcfd3d8 100644 --- a/resources/views/ejaculation/checkin.blade.php +++ b/resources/views/ejaculation/checkin.blade.php @@ -3,7 +3,7 @@ @section('title', 'チェックイン') @section('content') -
    +

    今致してる？

    @@ -40,10 +40,7 @@
    -
    -
      - -
      + Tab, Enter, 半角スペースのいずれかで入力確定します。 diff --git a/resources/views/ejaculation/edit.blade.php b/resources/views/ejaculation/edit.blade.php index 8bae248..5640b26 100644 --- a/resources/views/ejaculation/edit.blade.php +++ b/resources/views/ejaculation/edit.blade.php @@ -3,7 +3,7 @@ @section('title', 'チェックインの修正') @section('content') -
      +

      チェックインの修正

      @@ -41,10 +41,7 @@
      -
      -
        - -
        + Tab, Enter, 半角スペースのいずれかで入力確定します。 diff --git a/tsconfig.json b/tsconfig.json index 99adef1..d2d1b2c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,9 @@ "sourceMap": true, "target": "es5", "module": "es2015", - "strict": true + "moduleResolution": "node", + "strict": true, + "experimentalDecorators": true }, "include": [ "resources/assets/js/**/*" diff --git a/yarn.lock b/yarn.lock index a61a245..644a72f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7830,6 +7830,11 @@ vm-browserify@0.0.4: dependencies: indexof "0.0.1" +vue-class-component@^7.0.1, vue-class-component@^7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.1.0.tgz#b33efcb10e17236d684f70b1e96f1946ec793e87" + integrity sha512-G9152NzUkz0i0xTfhk0Afc8vzdXxDR1pfN4dTwE72cskkgJtdXfrKBkMfGvDuxUh35U500g5Ve4xL8PEGdWeHg== + vue-hot-reload-api@^2.3.0: version "2.3.2" resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.2.tgz#1fcc1495effe08a790909b46bf7b5c4cfeb6f21b" @@ -7846,6 +7851,13 @@ vue-loader@^15.4.2: vue-hot-reload-api "^2.3.0" vue-style-loader "^4.1.0" +vue-property-decorator@^8.1.1: + version "8.1.1" + resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.1.1.tgz#80dadbe5ffa0e7eb6a0ba0a07036365471a7d5ee" + integrity sha512-K+PUT17ZEMWyhrKZnl4Fc9qMyFpMcjVbZJBwx4BpA8BXfaspaTeFdoHuk1aywC/+4G86sxIr/5n4IQUQLecSWw== + dependencies: + vue-class-component "^7.0.1" + vue-style-loader@^4.1.0: version "4.1.2" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8" @@ -7854,10 +7866,10 @@ vue-style-loader@^4.1.0: hash-sum "^1.0.2" loader-utils "^1.0.2" -vue-template-compiler@^2.6.6: - version "2.6.6" - resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.6.tgz#a807acbf3d51971d3721d75ecb1b927b517c1a02" - integrity sha512-OakxDGyrmMQViCjkakQFbDZlG0NibiOzpLauOfyCUVRQc9yPmTqpiz9nF0VeA+dFkXegetw0E5x65BFhhLXO0A== +vue-template-compiler@^2.6.10: + version "2.6.10" + resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc" + integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg== dependencies: de-indent "^1.0.2" he "^1.1.0"