From b7fb42cfc863e1fbe35b37c1042d77f0e05033e7 Mon Sep 17 00:00:00 2001 From: Brock Date: Fri, 1 Jun 2018 16:46:25 +0100 Subject: [PATCH 1/8] Fix dependency conflicts and update Vue and friends --- package.json | 2 +- yarn.lock | 144 ++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 103 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 15c5709..11691b1 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "inject-loader": "^2.0.1", "jest": "^20.0.4", "jest-vue-preprocessor": "^1.1.0", - "jquery": "^3.2.1", + "jquery": "3.3.1", "less": "^2.7.2", "less-loader": "^4.0.4", "lint-staged": "^4.0.2", diff --git a/yarn.lock b/yarn.lock index cc8bf97..ca09ebc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -198,12 +198,18 @@ ansi-styles@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe" -ansi-styles@^3.0.0, ansi-styles@^3.1.0: +ansi-styles@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.1.0.tgz#09c202d5c917ec23188caa5c9cb9179cd9547750" dependencies: color-convert "^1.0.0" +ansi-styles@^3.1.0, ansi-styles@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" + dependencies: + color-convert "^1.9.0" + any-promise@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27" @@ -251,8 +257,8 @@ are-we-there-yet@~1.1.2: readable-stream "^2.0.0 || ^1.1.13" argparse@^1.0.7: - version "1.0.9" - resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86" + version "1.0.10" + resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911" dependencies: sprintf-js "~1.0.2" @@ -1898,8 +1904,8 @@ better-console@*: cli-table "~0.3.1" big.js@^3.1.3: - version "3.1.3" - resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978" + version "3.2.0" + resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e" bignumber.js@^2.1.0: version "2.4.0" @@ -1983,10 +1989,14 @@ bluebird@^2.10.2: version "2.11.0" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.11.0.tgz#534b9033c022c9579c56ba3b3e5a5caafbb650e1" -bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.4.7, bluebird@^3.5.0: +bluebird@^3.0.5, bluebird@^3.3.0, bluebird@^3.4.7, bluebird@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c" +bluebird@^3.1.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9" + bluebird@~3.4.6: version "3.4.7" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.7.tgz#f72d760be09b7f76d08ed8fae98b289a8d05fab3" @@ -2515,13 +2525,13 @@ chalk@^2.0.1: escape-string-regexp "^1.0.5" supports-color "^4.0.0" -chalk@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba" +chalk@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e" dependencies: - ansi-styles "^3.1.0" + ansi-styles "^3.2.1" escape-string-regexp "^1.0.5" - supports-color "^4.0.0" + supports-color "^5.3.0" character-entities-html4@^1.0.0: version "1.1.1" @@ -2819,7 +2829,13 @@ color-convert@^0.5.3: version "0.5.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd" -color-convert@^1.0.0, color-convert@^1.3.0: +color-convert@^1.0.0, color-convert@^1.9.0: + version "1.9.1" + resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed" + dependencies: + color-name "^1.1.1" + +color-convert@^1.3.0: version "1.9.0" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a" dependencies: @@ -2829,10 +2845,14 @@ color-diff@^0.1.3: version "0.1.7" resolved "https://registry.yarnpkg.com/color-diff/-/color-diff-0.1.7.tgz#6db78cd9482a8e459d40821eaf4b503283dcb8e2" -color-name@^1.0.0, color-name@^1.1.1: +color-name@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.2.tgz#5c8ab72b64bd2215d617ae9559ebb148475cf98d" +color-name@^1.1.1: + version "1.1.3" + resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" + color-string@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991" @@ -5467,12 +5487,12 @@ fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10: mkdirp ">=0.5 0" rimraf "2" -fullcalendar@^3.3.0: - version "3.4.0" - resolved "https://registry.yarnpkg.com/fullcalendar/-/fullcalendar-3.4.0.tgz#34dabff2abe5e85f70025c789a5b9dc3ea4c4762" +fullcalendar@^3.4.0: + version "3.9.0" + resolved "https://registry.yarnpkg.com/fullcalendar/-/fullcalendar-3.9.0.tgz#b608a9989f3416f0b1d526c6bdfeeaf2ac79eda5" dependencies: jquery "2 - 3" - moment "^2.9.0" + moment "^2.20.1" function-bind@^1.0.2, function-bind@^1.1.0, function-bind@~1.1.0: version "1.1.0" @@ -6233,6 +6253,10 @@ has-flag@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51" +has-flag@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" + has-gulplog@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce" @@ -7563,7 +7587,11 @@ jpegtran-bin@^3.0.0: bin-wrapper "^3.0.0" logalot "^2.0.0" -"jquery@2 - 3", jquery@^3.2.1: +"jquery@2 - 3", jquery@3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca" + +jquery@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787" @@ -7605,7 +7633,14 @@ js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" -js-yaml@^3.4.3, js-yaml@^3.5.1: +js-yaml@^3.4.3: + version "3.11.0" + resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef" + dependencies: + argparse "^1.0.7" + esprima "^4.0.0" + +js-yaml@^3.5.1: version "3.8.2" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.2.tgz#02d3e2c0f6beab20248d412c352203827d786721" dependencies: @@ -8639,7 +8674,7 @@ lru-cache@^3.2.0: dependencies: pseudomap "^1.0.1" -lru-cache@^4.0.0, lru-cache@^4.1.0, lru-cache@^4.1.1: +lru-cache@^4.0.0, lru-cache@^4.1.0: version "4.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55" dependencies: @@ -8653,6 +8688,13 @@ lru-cache@^4.0.1: pseudomap "^1.0.1" yallist "^2.0.0" +lru-cache@^4.1.1: + version "4.1.3" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c" + dependencies: + pseudomap "^1.0.2" + yallist "^2.1.2" + ltgt@^2.1.2: version "2.2.0" resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.0.tgz#b65ba5fcb349a29924c8e333f7c6a5562f2e4842" @@ -8999,7 +9041,7 @@ moment-timezone@^0.5.14: dependencies: moment ">= 2.9.0" -moment@2.x, moment@^2.10.3, moment@^2.18.1, moment@^2.9.0: +moment@2.x, moment@^2.10.3, moment@^2.18.1: version "2.18.1" resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f" @@ -9007,6 +9049,10 @@ moment@2.x, moment@^2.10.3, moment@^2.18.1, moment@^2.9.0: version "2.21.0" resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a" +moment@^2.20.1: + version "2.22.2" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66" + mount-point@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/mount-point/-/mount-point-1.2.0.tgz#f7712295e1ecd8df2e42ecbe23e07a3660807851" @@ -10596,12 +10642,12 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.2, postcss@^6.0.3, postcss@^6.0.6: supports-color "^4.2.0" postcss@^6.0.8: - version "6.0.14" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.14.tgz#5534c72114739e75d0afcf017db853099f562885" + version "6.0.22" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.22.tgz#e23b78314905c3b90cbd61702121e7a78848f2a3" dependencies: - chalk "^2.3.0" + chalk "^2.4.1" source-map "^0.6.1" - supports-color "^4.4.0" + supports-color "^5.4.0" prelude-ls@~1.1.2: version "1.1.2" @@ -10616,8 +10662,8 @@ preserve@^0.2.0: resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" prettier@^1.7.0: - version "1.8.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.8.2.tgz#bff83e7fd573933c607875e5ba3abbdffb96aeb8" + version "1.13.3" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.3.tgz#e74c09a7df6519d472ca6febaa37cf7addb48a20" pretty-bytes@^4.0.2: version "4.0.2" @@ -11467,8 +11513,8 @@ resolve@^1.3.3, resolve@~1.3.3: path-parse "^1.0.5" resolve@^1.4.0: - version "1.5.0" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36" + version "1.7.1" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3" dependencies: path-parse "^1.0.5" @@ -12915,17 +12961,23 @@ supports-color@^3.1.1, supports-color@^3.1.2, supports-color@^3.2.3: dependencies: has-flag "^1.0.0" -supports-color@^4.0.0, supports-color@^4.2.0: +supports-color@^4.0.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b" + dependencies: + has-flag "^2.0.0" + +supports-color@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.0.tgz#ad986dc7eb2315d009b4d77c8169c2231a684037" dependencies: has-flag "^2.0.0" -supports-color@^4.4.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b" +supports-color@^5.3.0, supports-color@^5.4.0: + version "5.4.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54" dependencies: - has-flag "^2.0.0" + has-flag "^3.0.0" svg-tags@^1.0.0: version "1.0.0" @@ -13991,10 +14043,11 @@ vue-faker@^1.0.1: underscore "^1.8.3" vue-full-calendar@^2.0.6: - version "2.0.6" - resolved "https://registry.yarnpkg.com/vue-full-calendar/-/vue-full-calendar-2.0.6.tgz#6f7f882f0f306e1e075e686185c66ef363eb6cb2" + version "2.5.4" + resolved "https://registry.yarnpkg.com/vue-full-calendar/-/vue-full-calendar-2.5.4.tgz#1760c2343bc9d66149a29e94e6f763f43b5429f4" dependencies: - fullcalendar "^3.3.0" + babel-plugin-transform-runtime "^6.23.0" + fullcalendar "^3.4.0" lodash.defaultsdeep "^4.6.0" vue-highlightjs@^1.3.3: @@ -14008,8 +14061,8 @@ vue-hot-reload-api@^2.1.0: resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de" vue-hot-reload-api@^2.2.0: - version "2.2.3" - resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.3.tgz#43c8e5506d65a271d2571936d77253019fd3eb17" + version "2.3.0" + resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926" vue-loader@^12.2.1: version "12.2.1" @@ -14048,8 +14101,8 @@ vue-loader@^13.0.4: vue-template-es2015-compiler "^1.5.3" vue-loader@^13.3.0: - version "13.5.0" - resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.5.0.tgz#52f7b3790a267eff80012b77ea187a54586dd5d4" + version "13.7.2" + resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.7.2.tgz#f633f6393e905ffd730400f03c99353618c08fe8" dependencies: consolidate "^0.14.0" hash-sum "^1.0.2" @@ -14097,7 +14150,14 @@ vue-style-loader@^2.0.0: hash-sum "^1.0.2" loader-utils "^1.0.2" -vue-style-loader@^3.0.0, vue-style-loader@^3.0.1: +vue-style-loader@^3.0.0: + version "3.1.2" + resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.1.2.tgz#6b66ad34998fc9520c2f1e4d5fa4091641c1597a" + dependencies: + hash-sum "^1.0.2" + loader-utils "^1.0.2" + +vue-style-loader@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.1.tgz#c8b639bb2f24baf9d78274dc17e4f264c1deda08" dependencies: From d714a1484d6cda0a7a1eb42e30af2ce76ca7b214 Mon Sep 17 00:00:00 2001 From: Brock Date: Fri, 1 Jun 2018 16:47:42 +0100 Subject: [PATCH 2/8] Add new vue-full-calendar wrapper component --- src/components/shared/layout/FullCalendar.vue | 196 ++++++++++++++++++ src/resources/croudCalendar.scss | 182 ++++++++++++++++ 2 files changed, 378 insertions(+) create mode 100644 src/components/shared/layout/FullCalendar.vue create mode 100644 src/resources/croudCalendar.scss diff --git a/src/components/shared/layout/FullCalendar.vue b/src/components/shared/layout/FullCalendar.vue new file mode 100644 index 0000000..e722379 --- /dev/null +++ b/src/components/shared/layout/FullCalendar.vue @@ -0,0 +1,196 @@ + + + + + + + diff --git a/src/resources/croudCalendar.scss b/src/resources/croudCalendar.scss new file mode 100644 index 0000000..bf99f4b --- /dev/null +++ b/src/resources/croudCalendar.scss @@ -0,0 +1,182 @@ +@import '/sass/variables/_fonts.scss'; +@import '/sass/variables/_colours.scss'; + +@import '~fullcalendar/dist/fullcalendar.css'; + +$completed-event-colour: #454545; +$stripe-colour: rgba(255, 255, 255, 0.15); +$event-container-colour: #f5f5f5; +$today-highlight: #fcf8e3; + +$button-hover-background: #CACBCD; +$inverted-muted-text-color: rgba(0, 0, 0, 0.6); +$secondary-segment-colour: lighten($croud-colour-black, (0.8 * 100)); + +.calendar /deep/ { + .fc-content { + cursor: pointer; + font-family: $croud-font-body; + min-height: 2em; + } + + .calAvatar { + background: $croud-colour-white; + float: left; + border-radius: 50%; + position: absolute; + margin: 2px 5px 2px 3px; + } + + .fc-widget-content .fc-list-empty { + vertical-align: top; + } + + .globalCalendar { + text-shadow: none; + vertical-align: middle; + color: $croud-colour-grey-medium; + display: inline-block; + margin: 2px 4px 0 2px; + } + + .fc-title { + min-height: 22px; + display: block; + padding:3px 3px 3px 35px; + } + + .fc-day { + background-color: $event-container-colour; + } + + .fc-day.fc-state-highlight { + background-color: $today-highlight; + } + + .fc-row .fc-content-skeleton td, .fc-row .fc-helper-skeleton td { + border-color: $croud-colour-white; + border-width: 2px; + } + + .fc-event { + padding: 4px; + border: none; + border-radius: 0; + color: $croud-colour-white; + } + + .fc-event.inProgress, .fc-event.active { + color: $croud-colour-grey-darker; + background: $croud-colour-secondary-yellow; + border-color: $croud-colour-secondary-yellow; + } + + .fc-event.complete, .fc-event.completed { + background: $completed-event-colour; + border-color: $completed-event-colour; + } + + .fc-event.recurring { + background: $croud-colour-grey-light; + background-image: linear-gradient(45deg, $stripe-colour 25%, transparent 25%, transparent 50%, $stripe-colour 50%, $stripe-colour 75%, transparent 75%, transparent); + background-size: 40px 40px; + border-color: $croud-colour-grey-light; + color: $croud-colour-grey-darker; + + .fc-event-skin { + background: $croud-colour-grey-light; + border-color: $croud-colour-grey-light; + } + } + + .fc-unthemed > th, td, hr, thead, tbody, .fc-row { + border-color: $croud-colour-white; + } + + .fc-grid .fc-day-content { + clear: both; + padding: 2px 2px 1px; + } + + .fc-view-agendaDay td.fc-widget-content, + .fc-view-agendaWeek td.fc-widget-content { + border: none; + } + + .fc-unthemed th, .fc-unthemed thead { + border: none; + } + + .fc-toolbar { + border-bottom: 1px solid $croud-colour-grey-lighter; + margin: 0; + background: $secondary-segment-colour; + padding: 1.5em 1em; + color: $inverted-muted-text-color; + + h2 { + font-weight: 300; + font-size: $croud-font-size-heading; + text-decoration: none; + border: none; + margin: 0; + padding: 0; + } + } + + .fc-button { + color: $inverted-muted-text-color; + font-family: $croud-font-body; + font-size: $croud-font-size-medium; + font-weight: 700; + text-transform: capitalize; + text-shadow: none; + text-decoration: none; + text-align: center; + background: $croud-colour-grey-lighter; + white-space: nowrap; + display: inline-block; + vertical-align: middle; + border: none; + border-radius: 0.2em; + cursor: pointer; + outline: 0; + padding: 0.8em 1.5em; + line-height: 1em; + cursor: pointer; + background-image: none; + margin: 2px; + -webkit-font-smoothing: antialiased; + height: auto; + } + + .fc-state-active { + background: $croud-colour-blue; + color: $croud-colour-white; + box-shadow: none; + } + + .fc-state-hover, .fc-state-down { + background: $button-hover-background; + box-shadow: none; + } + + .fc-day-grid-event > .fc-content { + white-space: pre-wrap; + overflow: visible; + } + + .fc-header td { + padding: 0 0 0 10px; + border-bottom: 1px solid $croud-colour-grey-lighter; + } + + .fc-widget-header th { + border: none; + color: $croud-colour-grey-dark; + font-family: $croud-font-body; + font-size: $croud-font-size-medium; + line-height: 3em; + font-weight: 400; + } +} From bfa3ebd54cba6a9b2bd4529b1ff6f31549e45d03 Mon Sep 17 00:00:00 2001 From: Brock Date: Fri, 1 Jun 2018 16:48:43 +0100 Subject: [PATCH 3/8] Add docs --- .../shared/layout/croud-full-calendar.md | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/components/shared/layout/croud-full-calendar.md diff --git a/src/components/shared/layout/croud-full-calendar.md b/src/components/shared/layout/croud-full-calendar.md new file mode 100644 index 0000000..7fd3703 --- /dev/null +++ b/src/components/shared/layout/croud-full-calendar.md @@ -0,0 +1,20 @@ +### Basic usage + + + +### Views +You can change the default calendar views by using the **views** prop + + + + +### Config +This wrapper sets some sensible fullcalendar config defaults, but you can override these with the **config** prop + + + +### Props and listeners +Any other vue-full-calendar props and listeners are passed through transparently + + + From 763be99e1f1bef670821b58caa5ad804c4d1fbc2 Mon Sep 17 00:00:00 2001 From: Brock Date: Fri, 1 Jun 2018 17:00:41 +0100 Subject: [PATCH 4/8] Add simple test cases to check state of wrapper --- src/components/shared/layout/FullCalendar.vue | 2 +- test/unit/layout/FullCalendar.spec.js | 41 +++++ .../__snapshots__/FullCalendar.spec.js.snap | 150 ++++++++++++++++++ 3 files changed, 192 insertions(+), 1 deletion(-) create mode 100644 test/unit/layout/FullCalendar.spec.js create mode 100644 test/unit/layout/__snapshots__/FullCalendar.spec.js.snap diff --git a/src/components/shared/layout/FullCalendar.vue b/src/components/shared/layout/FullCalendar.vue index e722379..4649980 100644 --- a/src/components/shared/layout/FullCalendar.vue +++ b/src/components/shared/layout/FullCalendar.vue @@ -17,7 +17,7 @@   -
+
diff --git a/test/unit/layout/FullCalendar.spec.js b/test/unit/layout/FullCalendar.spec.js new file mode 100644 index 0000000..ecb43ce --- /dev/null +++ b/test/unit/layout/FullCalendar.spec.js @@ -0,0 +1,41 @@ + +import Vue from 'vue' +import FullCalendar from '../../../src/components/shared/layout/FullCalendar' + +const Constructor = Vue.extend(FullCalendar) + +const vm = new Constructor().$mount() + +describe('FullCalendar', () => { + it('should match the snapshot', () => { + expect(vm.$el).toMatchSnapshot() + }) + + describe('loading', () => { + it('should not show spinner by default', () => { + expect(vm.$el.querySelector('.ui.dimmer').classList).not.toContain('active') + }) + + it('should show spinner if loading', (done) => { + vm.loading = [{ type: 'agendaWeek', title: 'Agenda' }, { type: 'basicWeek', title: 'Basic' }] + vm.$nextTick(() => { + expect(vm.$el.querySelector('.ui.dimmer').classList).toContain('active') + done() + }) + }) + }) + + describe('views', () => { + it('show default views', () => { + expect(vm.$el.querySelector('.ui.view.buttons')).toMatchSnapshot() + }) + + it('changes views based on props', (done) => { + vm.views = [{ type: 'agendaWeek', title: 'Agenda' }, { type: 'basicWeek', title: 'Basic' }] + vm.$nextTick(() => { + expect(vm.$el.querySelector('.ui.view.buttons')).toMatchSnapshot() + done() + }) + }) + }) +}) diff --git a/test/unit/layout/__snapshots__/FullCalendar.spec.js.snap b/test/unit/layout/__snapshots__/FullCalendar.spec.js.snap new file mode 100644 index 0000000..d153747 --- /dev/null +++ b/test/unit/layout/__snapshots__/FullCalendar.spec.js.snap @@ -0,0 +1,150 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FullCalendar should match the snapshot 1`] = ` +
+
+
+
+
+ + +
+
+ +
+
+ + + +
+
+
+

+ +

+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+ Loading +
+
+
+
+`; + +exports[`FullCalendar views changes views based on props 1`] = ` +
+ + +
+`; + +exports[`FullCalendar views show default views 1`] = ` +
+ + + +
+`; From ebf41c266da5f2e6f1c9ab746313b06c06ea300f Mon Sep 17 00:00:00 2001 From: Brock Date: Sun, 3 Jun 2018 12:19:06 +0100 Subject: [PATCH 5/8] Include vue-full-calendar in transform --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 11691b1..4fd68e9 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "vue" ], "transformIgnorePatterns": [ - "node_modules/(?!croud-vue-semantic|vue-quill)" + "node_modules/(?!croud-vue-semantic|vue-quill|vue-full-calendar)" ], "transform": { "^.+\\.js$": "/node_modules/babel-jest", From 55a1c4692109d68d61c2b78ca69c4637548e4740 Mon Sep 17 00:00:00 2001 From: Brock Date: Sun, 3 Jun 2018 12:19:39 +0100 Subject: [PATCH 6/8] Increase test coverage --- test/unit/layout/FullCalendar.spec.js | 66 +++++- .../__snapshots__/FullCalendar.spec.js.snap | 195 +++++++++++++++++- 2 files changed, 253 insertions(+), 8 deletions(-) diff --git a/test/unit/layout/FullCalendar.spec.js b/test/unit/layout/FullCalendar.spec.js index ecb43ce..d1cf639 100644 --- a/test/unit/layout/FullCalendar.spec.js +++ b/test/unit/layout/FullCalendar.spec.js @@ -1,10 +1,20 @@ import Vue from 'vue' +import VueFullCalendar from 'vue-full-calendar' import FullCalendar from '../../../src/components/shared/layout/FullCalendar' +Vue.use(VueFullCalendar) + const Constructor = Vue.extend(FullCalendar) -const vm = new Constructor().$mount() +const vm = new Constructor({ + propsData: { + config: { + defaultDate: '2018-01-01', + defaultView: 'basicWeek', + }, + }, +}).$mount() describe('FullCalendar', () => { it('should match the snapshot', () => { @@ -30,6 +40,13 @@ describe('FullCalendar', () => { expect(vm.$el.querySelector('.ui.view.buttons')).toMatchSnapshot() }) + it('highlights current view', (done) => { + vm.$nextTick(() => { + expect(vm.$el.querySelector('.blue.button')).toMatchSnapshot() + done() + }) + }) + it('changes views based on props', (done) => { vm.views = [{ type: 'agendaWeek', title: 'Agenda' }, { type: 'basicWeek', title: 'Basic' }] vm.$nextTick(() => { @@ -37,5 +54,52 @@ describe('FullCalendar', () => { done() }) }) + + it('updates calendar view', () => { + vm.changeView('month') + expect(vm.currentView).toBe('month') + }) + }) + + describe('calendar controls', () => { + describe('steps date', () => { + it('forward', (done) => { + vm.step() + + vm.$nextTick(() => { + expect(vm.title).toBe('February 2018') + done() + }) + }) + + it('back', (done) => { + vm.step('prev') + + vm.$nextTick(() => { + expect(vm.title).toBe('January 2018') + done() + }) + }) + }) + }) + + describe('Calendar title and view', () => { + it('gets title when mounted', () => { + expect(vm.title).not.toBe('') + }) + + it('gets current view when mounted', () => { + expect(vm.currentView).not.toBe('') + }) + + it('updates title when view changes', (done) => { + vm.setTitle = jest.fn() + vm.step() + + vm.$nextTick(() => { + expect(vm.setTitle).toBeCalled() + done() + }) + }) }) }) diff --git a/test/unit/layout/__snapshots__/FullCalendar.spec.js.snap b/test/unit/layout/__snapshots__/FullCalendar.spec.js.snap index d153747..4e67dee 100644 --- a/test/unit/layout/__snapshots__/FullCalendar.spec.js.snap +++ b/test/unit/layout/__snapshots__/FullCalendar.spec.js.snap @@ -47,7 +47,7 @@ exports[`FullCalendar should match the snapshot 1`] = ` Month @@ -64,7 +64,7 @@ exports[`FullCalendar should match the snapshot 1`] = `

- + Jan 1 – 7, 2018

- +
+
+
+ + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+ + Mon 1/1 + + + + Tue 1/2 + + + + Wed 1/3 + + + + Thu 1/4 + + + + Fri 1/5 + + + + Sat 1/6 + + + + Sun 1/7 + +
+
+
+
+
+
+
+ + + + + +
+ + + + + + +
+
+
+ + + + + +
+ + + + + + +
+
+
+
+
+
+
+
+
@@ -127,6 +300,14 @@ exports[`FullCalendar views changes views based on props 1`] = `
`; +exports[`FullCalendar views highlights current view 1`] = ` + +`; + exports[`FullCalendar views show default views 1`] = `
From 1e9bb31e01d4549fbc4e776c9681892b4a3ba3c7 Mon Sep 17 00:00:00 2001 From: Brock Date: Sun, 3 Jun 2018 12:25:46 +0100 Subject: [PATCH 7/8] Test config merging --- test/unit/layout/FullCalendar.spec.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/test/unit/layout/FullCalendar.spec.js b/test/unit/layout/FullCalendar.spec.js index d1cf639..bdd3c27 100644 --- a/test/unit/layout/FullCalendar.spec.js +++ b/test/unit/layout/FullCalendar.spec.js @@ -35,6 +35,16 @@ describe('FullCalendar', () => { }) }) + describe('config', () => { + it('sets default config', () => { + expect(vm.$refs.calendar.fireMethod('option', 'header')).toBe(false) + }) + + it('merges config from prop', () => { + expect(vm.$refs.calendar.fireMethod('option', 'defaultView')).toBe('basicWeek') + }) + }) + describe('views', () => { it('show default views', () => { expect(vm.$el.querySelector('.ui.view.buttons')).toMatchSnapshot() From ea55ab9ac74a5cd7481d8a68b7e9bfad46fc75ba Mon Sep 17 00:00:00 2001 From: Brock Date: Sun, 3 Jun 2018 12:30:10 +0100 Subject: [PATCH 8/8] Remove clashing doc filename --- .../shared/layout/{fullcalendar.md => vue-fullcalendar.md} | 0 styleguide.config.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components/shared/layout/{fullcalendar.md => vue-fullcalendar.md} (100%) diff --git a/src/components/shared/layout/fullcalendar.md b/src/components/shared/layout/vue-fullcalendar.md similarity index 100% rename from src/components/shared/layout/fullcalendar.md rename to src/components/shared/layout/vue-fullcalendar.md diff --git a/styleguide.config.js b/styleguide.config.js index 26b7e11..6488bc4 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -42,7 +42,7 @@ module.exports = { }, { name: 'full-calendar', - content: 'src/components/shared/layout/fullcalendar.md', + content: 'src/components/shared/layout/vue-fullcalendar.md', }, ], },