Saving for posterity
commit
f7b897a14e
@ -0,0 +1,2 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
Binary file not shown.
@ -0,0 +1,480 @@
|
||||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Correct the line height in all browsers.
|
||||
* 3. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
/* Document
|
||||
========================================================================== */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
/* 1 */
|
||||
line-height: 1.15;
|
||||
/* 2 */
|
||||
-ms-text-size-adjust: 100%;
|
||||
/* 3 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 3 */ }
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
body {
|
||||
margin: 0; }
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block; }
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0; }
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
figcaption,
|
||||
figure,
|
||||
main {
|
||||
/* 1 */
|
||||
display: block; }
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
figure {
|
||||
margin: 1em 40px; }
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
/* 1 */
|
||||
height: 0;
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */ }
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
a {
|
||||
background-color: transparent;
|
||||
/* 1 */
|
||||
-webkit-text-decoration-skip: objects;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0; }
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit; }
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; }
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
dfn {
|
||||
font-style: italic; }
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000; }
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
small {
|
||||
font-size: 80%; }
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline; }
|
||||
|
||||
sub {
|
||||
bottom: -0.25em; }
|
||||
|
||||
sup {
|
||||
top: -0.5em; }
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
audio,
|
||||
video {
|
||||
display: inline-block; }
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0; }
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
img {
|
||||
border-style: none; }
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
svg:not(:root) {
|
||||
overflow: hidden; }
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible; }
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none; }
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0; }
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText; }
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em; }
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
display: table;
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
white-space: normal;
|
||||
/* 1 */ }
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
progress {
|
||||
display: inline-block;
|
||||
/* 1 */
|
||||
vertical-align: baseline;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
textarea {
|
||||
overflow: auto; }
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto; }
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */ }
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
details,
|
||||
menu {
|
||||
display: block; }
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
summary {
|
||||
display: list-item; }
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
canvas {
|
||||
display: inline-block; }
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
template {
|
||||
display: none; }
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
[hidden] {
|
||||
display: none; }
|
||||
|
||||
/* END NORMALIZE
|
||||
========================================================================== */
|
||||
html, body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px; }
|
||||
|
||||
div#app {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column; }
|
||||
div#app .search-wrapper {
|
||||
position: relative; }
|
||||
div#app .search-wrapper label {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
z-index: -1;
|
||||
transition: .15s all ease-in-out; }
|
||||
div#app .search-wrapper input {
|
||||
padding: 4px 12px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
transition: .15s all ease-in-out;
|
||||
background: white; }
|
||||
div#app .search-wrapper input:focus {
|
||||
outline: none;
|
||||
transform: scale(1.05); }
|
||||
div#app .search-wrapper input:focus + label {
|
||||
font-size: 10px;
|
||||
transform: translateY(-24px) translateX(-12px); }
|
||||
div#app .search-wrapper input::-webkit-input-placeholder {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-weight: 100; }
|
||||
div#app .wrapper {
|
||||
display: flex;
|
||||
max-width: 444px;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 12px; }
|
||||
div#app .card {
|
||||
box-shadow: rgba(0, 0, 0, 0.11765) 0px 1px 6px, rgba(0, 0, 0, 0.11765) 0px 1px 4px;
|
||||
max-width: 124px;
|
||||
margin: 12px;
|
||||
transition: .15s all ease-in-out; }
|
||||
div#app .card:hover {
|
||||
transform: scale(1.1); }
|
||||
div#app .card a {
|
||||
text-decoration: none;
|
||||
padding: 12px;
|
||||
color: #03A9F4;
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; }
|
||||
div#app .card a img {
|
||||
height: 100px; }
|
||||
div#app .card a small {
|
||||
font-size: 10px;
|
||||
padding: 4px; }
|
||||
div#app .hotpink {
|
||||
background: hotpink; }
|
||||
div#app .green {
|
||||
background: green; }
|
||||
div#app .box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12); }
|
||||
|
||||
/*# sourceMappingURL=app.css.map */
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["app.scss"],
|
||||
"names": [],
|
||||
"file": "app.css"
|
||||
}
|
||||
@ -0,0 +1,564 @@
|
||||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Correct the line height in all browsers.
|
||||
* 3. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
line-height: 1.15; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* END NORMALIZE
|
||||
========================================================================== */
|
||||
|
||||
|
||||
html, body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
div#app {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
label {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
color: rgba(0,0,0,.50);
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
z-index: -1;
|
||||
transition: .15s all ease-in-out;
|
||||
}
|
||||
input {
|
||||
padding: 4px 12px;
|
||||
color: rgba(0,0,0,.70);
|
||||
border: 1px solid rgba(0,0,0,.12);
|
||||
transition: .15s all ease-in-out;
|
||||
background: white;
|
||||
&:focus {
|
||||
outline: none;
|
||||
transform: scale(1.05);
|
||||
& + label {
|
||||
font-size: 12px;
|
||||
transform: translateY(-24px) translateX(-12px);
|
||||
}
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
font-size: 12px;
|
||||
color: rgba(0,0,0,.50);
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
max-width: 444px;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
|
||||
max-width: 124px;
|
||||
margin: 12px;
|
||||
transition: .15s all ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
padding: 12px;
|
||||
color: #03A9F4;
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
img {
|
||||
height: 100px;
|
||||
}
|
||||
small {
|
||||
font-size: 10px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hotpink {
|
||||
background: hotpink;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid rgba(0,0,0,.12);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@ -0,0 +1 @@
|
||||
<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M128 9.102c65.665 0 118.898 53.233 118.898 118.898 0 65.665-53.233 118.898-118.898 118.898C62.335 246.898 9.102 193.665 9.102 128 9.102 62.335 62.335 9.102 128 9.102M128 0C57.421 0 0 57.421 0 128c0 70.579 57.421 128 128 128 70.579 0 128-57.421 128-128C256 57.421 198.579 0 128 0m20.83 25.524c-10.43-1.896-35.651 36.409-43.994 59.734-.634 1.769-2.086 8.249-2.086 9.955 0 0 6.531 14.055 8.343 17.351-3.034-1.58-9.323-13.756-9.323-13.756-3.034 5.784-5.942 32.34-4.994 37.271 0 0 6.762 10.062 9.387 12.578-3.603-1.201-9.671-9.355-9.671-9.355-1.138 3.508-.916 10.807-.379 13.274 4.551 6.637 10.619 7.396 10.619 7.396s-6.637 66.181 3.413 71.111c6.258-1.327 7.775-73.956 7.775-73.956s7.585.569 9.292-1.327c3.856-2.655 12.826-30.224 12.958-34.202 0 0-10.41 1.952-15.487 3.924 3.826-3.8 16.049-6.352 16.049-6.352 3.315-3.979 10.291-31.047 10.994-39.391.176-2.093.583-4.657.268-8.398 0 0-9.941 2.177-12.014 1.424 2.104-.237 12.263-4.14 12.263-4.14 1.801-16.213 2.358-42.091-3.413-43.141zm-36.38 171.691c-.795 19.496-1.294 25.004-2.115 29.601-.379.857-.758.997-1.138-.095-3.477-15.992-3.224-136.438 36.409-191.241-23.05 42.092-33.535 122.861-33.156 161.735z" fill="#333"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
@ -0,0 +1,24 @@
|
||||
<! Doctype HTML>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="/css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='app'>
|
||||
<div class='search-wrapper'>
|
||||
<input type="text" v-model='keyword' placeholder="Search by title..." />
|
||||
<label>Search Title</label>
|
||||
</div>
|
||||
<div class='wrapper' >
|
||||
<div class='card' v-for='post in filteredList'>
|
||||
<a v-bind:href='post.link' target='_blank'>
|
||||
<img v-bind:src="post.logo" alt=""/>
|
||||
{{post.title}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/vue.js"></script>
|
||||
<script type="text/javascript" src="js/dist/main.bundle.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
var postList = [
|
||||
new Post(
|
||||
'Vue.js',
|
||||
'https://vuejs.org/',
|
||||
'Chris',
|
||||
'https://vuejs.org//images/logo.png'
|
||||
),
|
||||
new Post(
|
||||
'React.js',
|
||||
'https://facebook.github.io/react/',
|
||||
'Tim',
|
||||
'http://daynin.github.io/clojurescript-presentation/img/react-logo.png'
|
||||
),
|
||||
new Post(
|
||||
'Angular.js',
|
||||
'https://angularjs.org/',
|
||||
'Sam',
|
||||
'https://angularjs.org/img/ng-logo.png'
|
||||
),
|
||||
new Post(
|
||||
'Ember.js',
|
||||
'http://emberjs.com/',
|
||||
'Rachel',
|
||||
'http://www.gravatar.com/avatar/0cf15665a9146ba852bf042b0652780a?s=200'
|
||||
),
|
||||
new Post(
|
||||
'Meteor.js',
|
||||
'https://www.meteor.com/',
|
||||
'Chris',
|
||||
'http://hacktivist.in/introduction-to-nodejs-mongodb-meteor/img/meteor.png'
|
||||
),
|
||||
new Post(
|
||||
'Aurelia',
|
||||
'http://aurelia.io/',
|
||||
'Tim',
|
||||
'https://cdn.auth0.com/blog/aurelia-logo.png'
|
||||
),
|
||||
new Post(
|
||||
'Node.js',
|
||||
'https://nodejs.org/en/',
|
||||
'A. A. Ron',
|
||||
'https://code-maven.com/img/node.png'
|
||||
),
|
||||
new Post(
|
||||
'Pusher',
|
||||
'https://pusher.com/',
|
||||
'Alex',
|
||||
'https://avatars1.githubusercontent.com/u/739550?v=3&s=400'
|
||||
),
|
||||
new Post(
|
||||
'Feathers.js',
|
||||
'http://feathersjs.com/',
|
||||
'Chuck',
|
||||
'https://cdn.worldvectorlogo.com/logos/feathersjs.svg'
|
||||
),
|
||||
]
|
||||
|
||||
var app = new Vue({
|
||||
el:'#app',
|
||||
data:{
|
||||
keyword: 'Javascript'
|
||||
}
|
||||
});
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
'use strict';
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var Post = function Post(title, link, author, logo) {
|
||||
_classCallCheck(this, Post);
|
||||
|
||||
this.title = title;
|
||||
this.link = link;
|
||||
this.author = author;
|
||||
this.logo = logo;
|
||||
};
|
||||
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
keyword: '',
|
||||
postList: [new Post('Vue.js', 'https://vuejs.org/', 'Chris', 'https://vuejs.org//images/logo.png'), new Post('React.js', 'https://facebook.github.io/react/', 'Tim', 'http://daynin.github.io/clojurescript-presentation/img/react-logo.png'), new Post('Angular.js', 'https://angularjs.org/', 'Sam', 'https://angularjs.org/img/ng-logo.png'), new Post('Ember.js', 'http://emberjs.com/', 'Rachel', 'http://www.gravatar.com/avatar/0cf15665a9146ba852bf042b0652780a?s=200'), new Post('Meteor.js', 'https://www.meteor.com/', 'Chris', 'http://hacktivist.in/introduction-to-nodejs-mongodb-meteor/img/meteor.png'), new Post('Aurelia', 'http://aurelia.io/', 'Tim', 'https://cdn.auth0.com/blog/aurelia-logo.png'), new Post('Node.js', 'https://nodejs.org/en/', 'A. A. Ron', 'https://code-maven.com/img/node.png'), new Post('Pusher', 'https://pusher.com/', 'Alex', 'https://avatars1.githubusercontent.com/u/739550?v=3&s=400'), new Post('Feathers.js', 'http://feathersjs.com/', 'Chuck', 'https://cdn.worldvectorlogo.com/logos/feathersjs.svg')]
|
||||
},
|
||||
computed: {
|
||||
filteredList: function filteredList() {
|
||||
var _this = this;
|
||||
|
||||
return this.postList.filter(function (post) {
|
||||
return post.title.toLowerCase().includes(_this.keyword.toLowerCase());
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,79 @@
|
||||
class Post{
|
||||
constructor(title, link, author, logo){
|
||||
this.title = title
|
||||
this.link = link
|
||||
this.author = author
|
||||
this.logo = logo
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var app = new Vue({
|
||||
el:'#app',
|
||||
data:{
|
||||
keyword: '',
|
||||
postList: [
|
||||
new Post(
|
||||
'Vue.js',
|
||||
'https://vuejs.org/',
|
||||
'Chris',
|
||||
'https://vuejs.org//images/logo.png'
|
||||
),
|
||||
new Post(
|
||||
'React.js',
|
||||
'https://facebook.github.io/react/',
|
||||
'Tim',
|
||||
'http://daynin.github.io/clojurescript-presentation/img/react-logo.png'
|
||||
),
|
||||
new Post(
|
||||
'Angular.js',
|
||||
'https://angularjs.org/',
|
||||
'Sam',
|
||||
'https://angularjs.org/img/ng-logo.png'
|
||||
),
|
||||
new Post(
|
||||
'Ember.js',
|
||||
'http://emberjs.com/',
|
||||
'Rachel',
|
||||
'http://www.gravatar.com/avatar/0cf15665a9146ba852bf042b0652780a?s=200'
|
||||
),
|
||||
new Post(
|
||||
'Meteor.js',
|
||||
'https://www.meteor.com/',
|
||||
'Chris',
|
||||
'http://hacktivist.in/introduction-to-nodejs-mongodb-meteor/img/meteor.png'
|
||||
),
|
||||
new Post(
|
||||
'Aurelia',
|
||||
'http://aurelia.io/',
|
||||
'Tim',
|
||||
'https://cdn.auth0.com/blog/aurelia-logo.png'
|
||||
),
|
||||
new Post(
|
||||
'Node.js',
|
||||
'https://nodejs.org/en/',
|
||||
'A. A. Ron',
|
||||
'https://code-maven.com/img/node.png'
|
||||
),
|
||||
new Post(
|
||||
'Pusher',
|
||||
'https://pusher.com/',
|
||||
'Alex',
|
||||
'https://avatars1.githubusercontent.com/u/739550?v=3&s=400'
|
||||
),
|
||||
new Post(
|
||||
'Feathers.js',
|
||||
'http://feathersjs.com/',
|
||||
'Chuck',
|
||||
'https://cdn.worldvectorlogo.com/logos/feathersjs.svg'
|
||||
),
|
||||
]
|
||||
},
|
||||
computed:{
|
||||
filteredList(){
|
||||
return this.postList.filter((post) => {return post.title.toLowerCase().includes(this.keyword.toLowerCase());});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -0,0 +1,809 @@
|
||||
/**
|
||||
* vuex v2.3.0
|
||||
* (c) 2017 Evan You
|
||||
* @license MIT
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global.Vuex = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var applyMixin = function (Vue) {
|
||||
var version = Number(Vue.version.split('.')[0]);
|
||||
|
||||
if (version >= 2) {
|
||||
var usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1;
|
||||
Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit });
|
||||
} else {
|
||||
// override init and inject vuex init procedure
|
||||
// for 1.x backwards compatibility.
|
||||
var _init = Vue.prototype._init;
|
||||
Vue.prototype._init = function (options) {
|
||||
if ( options === void 0 ) options = {};
|
||||
|
||||
options.init = options.init
|
||||
? [vuexInit].concat(options.init)
|
||||
: vuexInit;
|
||||
_init.call(this, options);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Vuex init hook, injected into each instances init hooks list.
|
||||
*/
|
||||
|
||||
function vuexInit () {
|
||||
var options = this.$options;
|
||||
// store injection
|
||||
if (options.store) {
|
||||
this.$store = options.store;
|
||||
} else if (options.parent && options.parent.$store) {
|
||||
this.$store = options.parent.$store;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var devtoolHook =
|
||||
typeof window !== 'undefined' &&
|
||||
window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
|
||||
|
||||
function devtoolPlugin (store) {
|
||||
if (!devtoolHook) { return }
|
||||
|
||||
store._devtoolHook = devtoolHook;
|
||||
|
||||
devtoolHook.emit('vuex:init', store);
|
||||
|
||||
devtoolHook.on('vuex:travel-to-state', function (targetState) {
|
||||
store.replaceState(targetState);
|
||||
});
|
||||
|
||||
store.subscribe(function (mutation, state) {
|
||||
devtoolHook.emit('vuex:mutation', mutation, state);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the first item that pass the test
|
||||
* by second argument function
|
||||
*
|
||||
* @param {Array} list
|
||||
* @param {Function} f
|
||||
* @return {*}
|
||||
*/
|
||||
/**
|
||||
* Deep copy the given object considering circular structure.
|
||||
* This function caches all nested objects and its copies.
|
||||
* If it detects circular structure, use cached copy to avoid infinite loop.
|
||||
*
|
||||
* @param {*} obj
|
||||
* @param {Array<Object>} cache
|
||||
* @return {*}
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* forEach for object
|
||||
*/
|
||||
function forEachValue (obj, fn) {
|
||||
Object.keys(obj).forEach(function (key) { return fn(obj[key], key); });
|
||||
}
|
||||
|
||||
function isObject (obj) {
|
||||
return obj !== null && typeof obj === 'object'
|
||||
}
|
||||
|
||||
function isPromise (val) {
|
||||
return val && typeof val.then === 'function'
|
||||
}
|
||||
|
||||
function assert (condition, msg) {
|
||||
if (!condition) { throw new Error(("[vuex] " + msg)) }
|
||||
}
|
||||
|
||||
var Module = function Module (rawModule, runtime) {
|
||||
this.runtime = runtime;
|
||||
this._children = Object.create(null);
|
||||
this._rawModule = rawModule;
|
||||
var rawState = rawModule.state;
|
||||
this.state = (typeof rawState === 'function' ? rawState() : rawState) || {};
|
||||
};
|
||||
|
||||
var prototypeAccessors$1 = { namespaced: {} };
|
||||
|
||||
prototypeAccessors$1.namespaced.get = function () {
|
||||
return !!this._rawModule.namespaced
|
||||
};
|
||||
|
||||
Module.prototype.addChild = function addChild (key, module) {
|
||||
this._children[key] = module;
|
||||
};
|
||||
|
||||
Module.prototype.removeChild = function removeChild (key) {
|
||||
delete this._children[key];
|
||||
};
|
||||
|
||||
Module.prototype.getChild = function getChild (key) {
|
||||
return this._children[key]
|
||||
};
|
||||
|
||||
Module.prototype.update = function update (rawModule) {
|
||||
this._rawModule.namespaced = rawModule.namespaced;
|
||||
if (rawModule.actions) {
|
||||
this._rawModule.actions = rawModule.actions;
|
||||
}
|
||||
if (rawModule.mutations) {
|
||||
this._rawModule.mutations = rawModule.mutations;
|
||||
}
|
||||
if (rawModule.getters) {
|
||||
this._rawModule.getters = rawModule.getters;
|
||||
}
|
||||
};
|
||||
|
||||
Module.prototype.forEachChild = function forEachChild (fn) {
|
||||
forEachValue(this._children, fn);
|
||||
};
|
||||
|
||||
Module.prototype.forEachGetter = function forEachGetter (fn) {
|
||||
if (this._rawModule.getters) {
|
||||
forEachValue(this._rawModule.getters, fn);
|
||||
}
|
||||
};
|
||||
|
||||
Module.prototype.forEachAction = function forEachAction (fn) {
|
||||
if (this._rawModule.actions) {
|
||||
forEachValue(this._rawModule.actions, fn);
|
||||
}
|
||||
};
|
||||
|
||||
Module.prototype.forEachMutation = function forEachMutation (fn) {
|
||||
if (this._rawModule.mutations) {
|
||||
forEachValue(this._rawModule.mutations, fn);
|
||||
}
|
||||
};
|
||||
|
||||
Object.defineProperties( Module.prototype, prototypeAccessors$1 );
|
||||
|
||||
var ModuleCollection = function ModuleCollection (rawRootModule) {
|
||||
var this$1 = this;
|
||||
|
||||
// register root module (Vuex.Store options)
|
||||
this.root = new Module(rawRootModule, false);
|
||||
|
||||
// register all nested modules
|
||||
if (rawRootModule.modules) {
|
||||
forEachValue(rawRootModule.modules, function (rawModule, key) {
|
||||
this$1.register([key], rawModule, false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
ModuleCollection.prototype.get = function get (path) {
|
||||
return path.reduce(function (module, key) {
|
||||
return module.getChild(key)
|
||||
}, this.root)
|
||||
};
|
||||
|
||||
ModuleCollection.prototype.getNamespace = function getNamespace (path) {
|
||||
var module = this.root;
|
||||
return path.reduce(function (namespace, key) {
|
||||
module = module.getChild(key);
|
||||
return namespace + (module.namespaced ? key + '/' : '')
|
||||
}, '')
|
||||
};
|
||||
|
||||
ModuleCollection.prototype.update = function update$1 (rawRootModule) {
|
||||
update(this.root, rawRootModule);
|
||||
};
|
||||
|
||||
ModuleCollection.prototype.register = function register (path, rawModule, runtime) {
|
||||
var this$1 = this;
|
||||
if ( runtime === void 0 ) runtime = true;
|
||||
|
||||
var parent = this.get(path.slice(0, -1));
|
||||
var newModule = new Module(rawModule, runtime);
|
||||
parent.addChild(path[path.length - 1], newModule);
|
||||
|
||||
// register nested modules
|
||||
if (rawModule.modules) {
|
||||
forEachValue(rawModule.modules, function (rawChildModule, key) {
|
||||
this$1.register(path.concat(key), rawChildModule, runtime);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
ModuleCollection.prototype.unregister = function unregister (path) {
|
||||
var parent = this.get(path.slice(0, -1));
|
||||
var key = path[path.length - 1];
|
||||
if (!parent.getChild(key).runtime) { return }
|
||||
|
||||
parent.removeChild(key);
|
||||
};
|
||||
|
||||
function update (targetModule, newModule) {
|
||||
// update target module
|
||||
targetModule.update(newModule);
|
||||
|
||||
// update nested modules
|
||||
if (newModule.modules) {
|
||||
for (var key in newModule.modules) {
|
||||
if (!targetModule.getChild(key)) {
|
||||
console.warn(
|
||||
"[vuex] trying to add a new module '" + key + "' on hot reloading, " +
|
||||
'manual reload is needed'
|
||||
);
|
||||
return
|
||||
}
|
||||
update(targetModule.getChild(key), newModule.modules[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var Vue; // bind on install
|
||||
|
||||
var Store = function Store (options) {
|
||||
var this$1 = this;
|
||||
if ( options === void 0 ) options = {};
|
||||
|
||||
assert(Vue, "must call Vue.use(Vuex) before creating a store instance.");
|
||||
assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.");
|
||||
|
||||
var state = options.state; if ( state === void 0 ) state = {};
|
||||
var plugins = options.plugins; if ( plugins === void 0 ) plugins = [];
|
||||
var strict = options.strict; if ( strict === void 0 ) strict = false;
|
||||
|
||||
// store internal state
|
||||
this._committing = false;
|
||||
this._actions = Object.create(null);
|
||||
this._mutations = Object.create(null);
|
||||
this._wrappedGetters = Object.create(null);
|
||||
this._modules = new ModuleCollection(options);
|
||||
this._modulesNamespaceMap = Object.create(null);
|
||||
this._subscribers = [];
|
||||
this._watcherVM = new Vue();
|
||||
|
||||
// bind commit and dispatch to self
|
||||
var store = this;
|
||||
var ref = this;
|
||||
var dispatch = ref.dispatch;
|
||||
var commit = ref.commit;
|
||||
this.dispatch = function boundDispatch (type, payload) {
|
||||
return dispatch.call(store, type, payload)
|
||||
};
|
||||
this.commit = function boundCommit (type, payload, options) {
|
||||
return commit.call(store, type, payload, options)
|
||||
};
|
||||
|
||||
// strict mode
|
||||
this.strict = strict;
|
||||
|
||||
// init root module.
|
||||
// this also recursively registers all sub-modules
|
||||
// and collects all module getters inside this._wrappedGetters
|
||||
installModule(this, state, [], this._modules.root);
|
||||
|
||||
// initialize the store vm, which is responsible for the reactivity
|
||||
// (also registers _wrappedGetters as computed properties)
|
||||
resetStoreVM(this, state);
|
||||
|
||||
// apply plugins
|
||||
plugins.concat(devtoolPlugin).forEach(function (plugin) { return plugin(this$1); });
|
||||
};
|
||||
|
||||
var prototypeAccessors = { state: {} };
|
||||
|
||||
prototypeAccessors.state.get = function () {
|
||||
return this._vm._data.$$state
|
||||
};
|
||||
|
||||
prototypeAccessors.state.set = function (v) {
|
||||
assert(false, "Use store.replaceState() to explicit replace store state.");
|
||||
};
|
||||
|
||||
Store.prototype.commit = function commit (_type, _payload, _options) {
|
||||
var this$1 = this;
|
||||
|
||||
// check object-style commit
|
||||
var ref = unifyObjectStyle(_type, _payload, _options);
|
||||
var type = ref.type;
|
||||
var payload = ref.payload;
|
||||
var options = ref.options;
|
||||
|
||||
var mutation = { type: type, payload: payload };
|
||||
var entry = this._mutations[type];
|
||||
if (!entry) {
|
||||
console.error(("[vuex] unknown mutation type: " + type));
|
||||
return
|
||||
}
|
||||
this._withCommit(function () {
|
||||
entry.forEach(function commitIterator (handler) {
|
||||
handler(payload);
|
||||
});
|
||||
});
|
||||
this._subscribers.forEach(function (sub) { return sub(mutation, this$1.state); });
|
||||
|
||||
if (options && options.silent) {
|
||||
console.warn(
|
||||
"[vuex] mutation type: " + type + ". Silent option has been removed. " +
|
||||
'Use the filter functionality in the vue-devtools'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
Store.prototype.dispatch = function dispatch (_type, _payload) {
|
||||
// check object-style dispatch
|
||||
var ref = unifyObjectStyle(_type, _payload);
|
||||
var type = ref.type;
|
||||
var payload = ref.payload;
|
||||
|
||||
var entry = this._actions[type];
|
||||
if (!entry) {
|
||||
console.error(("[vuex] unknown action type: " + type));
|
||||
return
|
||||
}
|
||||
return entry.length > 1
|
||||
? Promise.all(entry.map(function (handler) { return handler(payload); }))
|
||||
: entry[0](payload)
|
||||
};
|
||||
|
||||
Store.prototype.subscribe = function subscribe (fn) {
|
||||
var subs = this._subscribers;
|
||||
if (subs.indexOf(fn) < 0) {
|
||||
subs.push(fn);
|
||||
}
|
||||
return function () {
|
||||
var i = subs.indexOf(fn);
|
||||
if (i > -1) {
|
||||
subs.splice(i, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Store.prototype.watch = function watch (getter, cb, options) {
|
||||
var this$1 = this;
|
||||
|
||||
assert(typeof getter === 'function', "store.watch only accepts a function.");
|
||||
return this._watcherVM.$watch(function () { return getter(this$1.state, this$1.getters); }, cb, options)
|
||||
};
|
||||
|
||||
Store.prototype.replaceState = function replaceState (state) {
|
||||
var this$1 = this;
|
||||
|
||||
this._withCommit(function () {
|
||||
this$1._vm._data.$$state = state;
|
||||
});
|
||||
};
|
||||
|
||||
Store.prototype.registerModule = function registerModule (path, rawModule) {
|
||||
if (typeof path === 'string') { path = [path]; }
|
||||
assert(Array.isArray(path), "module path must be a string or an Array.");
|
||||
this._modules.register(path, rawModule);
|
||||
installModule(this, this.state, path, this._modules.get(path));
|
||||
// reset store to update getters...
|
||||
resetStoreVM(this, this.state);
|
||||
};
|
||||
|
||||
Store.prototype.unregisterModule = function unregisterModule (path) {
|
||||
var this$1 = this;
|
||||
|
||||
if (typeof path === 'string') { path = [path]; }
|
||||
assert(Array.isArray(path), "module path must be a string or an Array.");
|
||||
this._modules.unregister(path);
|
||||
this._withCommit(function () {
|
||||
var parentState = getNestedState(this$1.state, path.slice(0, -1));
|
||||
Vue.delete(parentState, path[path.length - 1]);
|
||||
});
|
||||
resetStore(this);
|
||||
};
|
||||
|
||||
Store.prototype.hotUpdate = function hotUpdate (newOptions) {
|
||||
this._modules.update(newOptions);
|
||||
resetStore(this, true);
|
||||
};
|
||||
|
||||
Store.prototype._withCommit = function _withCommit (fn) {
|
||||
var committing = this._committing;
|
||||
this._committing = true;
|
||||
fn();
|
||||
this._committing = committing;
|
||||
};
|
||||
|
||||
Object.defineProperties( Store.prototype, prototypeAccessors );
|
||||
|
||||
function resetStore (store, hot) {
|
||||
store._actions = Object.create(null);
|
||||
store._mutations = Object.create(null);
|
||||
store._wrappedGetters = Object.create(null);
|
||||
store._modulesNamespaceMap = Object.create(null);
|
||||
var state = store.state;
|
||||
// init all modules
|
||||
installModule(store, state, [], store._modules.root, true);
|
||||
// reset vm
|
||||
resetStoreVM(store, state, hot);
|
||||
}
|
||||
|
||||
function resetStoreVM (store, state, hot) {
|
||||
var oldVm = store._vm;
|
||||
|
||||
// bind store public getters
|
||||
store.getters = {};
|
||||
var wrappedGetters = store._wrappedGetters;
|
||||
var computed = {};
|
||||
forEachValue(wrappedGetters, function (fn, key) {
|
||||
// use computed to leverage its lazy-caching mechanism
|
||||
computed[key] = function () { return fn(store); };
|
||||
Object.defineProperty(store.getters, key, {
|
||||
get: function () { return store._vm[key]; },
|
||||
enumerable: true // for local getters
|
||||
});
|
||||
});
|
||||
|
||||
// use a Vue instance to store the state tree
|
||||
// suppress warnings just in case the user has added
|
||||
// some funky global mixins
|
||||
var silent = Vue.config.silent;
|
||||
Vue.config.silent = true;
|
||||
store._vm = new Vue({
|
||||
data: {
|
||||
$$state: state
|
||||
},
|
||||
computed: computed
|
||||
});
|
||||
Vue.config.silent = silent;
|
||||
|
||||
// enable strict mode for new vm
|
||||
if (store.strict) {
|
||||
enableStrictMode(store);
|
||||
}
|
||||
|
||||
if (oldVm) {
|
||||
if (hot) {
|
||||
// dispatch changes in all subscribed watchers
|
||||
// to force getter re-evaluation for hot reloading.
|
||||
store._withCommit(function () {
|
||||
oldVm._data.$$state = null;
|
||||
});
|
||||
}
|
||||
Vue.nextTick(function () { return oldVm.$destroy(); });
|
||||
}
|
||||
}
|
||||
|
||||
function installModule (store, rootState, path, module, hot) {
|
||||
var isRoot = !path.length;
|
||||
var namespace = store._modules.getNamespace(path);
|
||||
|
||||
// register in namespace map
|
||||
if (module.namespaced) {
|
||||
store._modulesNamespaceMap[namespace] = module;
|
||||
}
|
||||
|
||||
// set state
|
||||
if (!isRoot && !hot) {
|
||||
var parentState = getNestedState(rootState, path.slice(0, -1));
|
||||
var moduleName = path[path.length - 1];
|
||||
store._withCommit(function () {
|
||||
Vue.set(parentState, moduleName, module.state);
|
||||
});
|
||||
}
|
||||
|
||||
var local = module.context = makeLocalContext(store, namespace, path);
|
||||
|
||||
module.forEachMutation(function (mutation, key) {
|
||||
var namespacedType = namespace + key;
|
||||
registerMutation(store, namespacedType, mutation, local);
|
||||
});
|
||||
|
||||
module.forEachAction(function (action, key) {
|
||||
var namespacedType = namespace + key;
|
||||
registerAction(store, namespacedType, action, local);
|
||||
});
|
||||
|
||||
module.forEachGetter(function (getter, key) {
|
||||
var namespacedType = namespace + key;
|
||||
registerGetter(store, namespacedType, getter, local);
|
||||
});
|
||||
|
||||
module.forEachChild(function (child, key) {
|
||||
installModule(store, rootState, path.concat(key), child, hot);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* make localized dispatch, commit, getters and state
|
||||
* if there is no namespace, just use root ones
|
||||
*/
|
||||
function makeLocalContext (store, namespace, path) {
|
||||
var noNamespace = namespace === '';
|
||||
|
||||
var local = {
|
||||
dispatch: noNamespace ? store.dispatch : function (_type, _payload, _options) {
|
||||
var args = unifyObjectStyle(_type, _payload, _options);
|
||||
var payload = args.payload;
|
||||
var options = args.options;
|
||||
var type = args.type;
|
||||
|
||||
if (!options || !options.root) {
|
||||
type = namespace + type;
|
||||
if (!store._actions[type]) {
|
||||
console.error(("[vuex] unknown local action type: " + (args.type) + ", global type: " + type));
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
return store.dispatch(type, payload)
|
||||
},
|
||||
|
||||
commit: noNamespace ? store.commit : function (_type, _payload, _options) {
|
||||
var args = unifyObjectStyle(_type, _payload, _options);
|
||||
var payload = args.payload;
|
||||
var options = args.options;
|
||||
var type = args.type;
|
||||
|
||||
if (!options || !options.root) {
|
||||
type = namespace + type;
|
||||
if (!store._mutations[type]) {
|
||||
console.error(("[vuex] unknown local mutation type: " + (args.type) + ", global type: " + type));
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
store.commit(type, payload, options);
|
||||
}
|
||||
};
|
||||
|
||||
// getters and state object must be gotten lazily
|
||||
// because they will be changed by vm update
|
||||
Object.defineProperties(local, {
|
||||
getters: {
|
||||
get: noNamespace
|
||||
? function () { return store.getters; }
|
||||
: function () { return makeLocalGetters(store, namespace); }
|
||||
},
|
||||
state: {
|
||||
get: function () { return getNestedState(store.state, path); }
|
||||
}
|
||||
});
|
||||
|
||||
return local
|
||||
}
|
||||
|
||||
function makeLocalGetters (store, namespace) {
|
||||
var gettersProxy = {};
|
||||
|
||||
var splitPos = namespace.length;
|
||||
Object.keys(store.getters).forEach(function (type) {
|
||||
// skip if the target getter is not match this namespace
|
||||
if (type.slice(0, splitPos) !== namespace) { return }
|
||||
|
||||
// extract local getter type
|
||||
var localType = type.slice(splitPos);
|
||||
|
||||
// Add a port to the getters proxy.
|
||||
// Define as getter property because
|
||||
// we do not want to evaluate the getters in this time.
|
||||
Object.defineProperty(gettersProxy, localType, {
|
||||
get: function () { return store.getters[type]; },
|
||||
enumerable: true
|
||||
});
|
||||
});
|
||||
|
||||
return gettersProxy
|
||||
}
|
||||
|
||||
function registerMutation (store, type, handler, local) {
|
||||
var entry = store._mutations[type] || (store._mutations[type] = []);
|
||||
entry.push(function wrappedMutationHandler (payload) {
|
||||
handler(local.state, payload);
|
||||
});
|
||||
}
|
||||
|
||||
function registerAction (store, type, handler, local) {
|
||||
var entry = store._actions[type] || (store._actions[type] = []);
|
||||
entry.push(function wrappedActionHandler (payload, cb) {
|
||||
var res = handler({
|
||||
dispatch: local.dispatch,
|
||||
commit: local.commit,
|
||||
getters: local.getters,
|
||||
state: local.state,
|
||||
rootGetters: store.getters,
|
||||
rootState: store.state
|
||||
}, payload, cb);
|
||||
if (!isPromise(res)) {
|
||||
res = Promise.resolve(res);
|
||||
}
|
||||
if (store._devtoolHook) {
|
||||
return res.catch(function (err) {
|
||||
store._devtoolHook.emit('vuex:error', err);
|
||||
throw err
|
||||
})
|
||||
} else {
|
||||
return res
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function registerGetter (store, type, rawGetter, local) {
|
||||
if (store._wrappedGetters[type]) {
|
||||
console.error(("[vuex] duplicate getter key: " + type));
|
||||
return
|
||||
}
|
||||
store._wrappedGetters[type] = function wrappedGetter (store) {
|
||||
return rawGetter(
|
||||
local.state, // local state
|
||||
local.getters, // local getters
|
||||
store.state, // root state
|
||||
store.getters // root getters
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
function enableStrictMode (store) {
|
||||
store._vm.$watch(function () { return this._data.$$state }, function () {
|
||||
assert(store._committing, "Do not mutate vuex store state outside mutation handlers.");
|
||||
}, { deep: true, sync: true });
|
||||
}
|
||||
|
||||
function getNestedState (state, path) {
|
||||
return path.length
|
||||
? path.reduce(function (state, key) { return state[key]; }, state)
|
||||
: state
|
||||
}
|
||||
|
||||
function unifyObjectStyle (type, payload, options) {
|
||||
if (isObject(type) && type.type) {
|
||||
options = payload;
|
||||
payload = type;
|
||||
type = type.type;
|
||||
}
|
||||
|
||||
assert(typeof type === 'string', ("Expects string as the type, but found " + (typeof type) + "."));
|
||||
|
||||
return { type: type, payload: payload, options: options }
|
||||
}
|
||||
|
||||
function install (_Vue) {
|
||||
if (Vue) {
|
||||
console.error(
|
||||
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
|
||||
);
|
||||
return
|
||||
}
|
||||
Vue = _Vue;
|
||||
applyMixin(Vue);
|
||||
}
|
||||
|
||||
// auto install in dist mode
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
install(window.Vue);
|
||||
}
|
||||
|
||||
var mapState = normalizeNamespace(function (namespace, states) {
|
||||
var res = {};
|
||||
normalizeMap(states).forEach(function (ref) {
|
||||
var key = ref.key;
|
||||
var val = ref.val;
|
||||
|
||||
res[key] = function mappedState () {
|
||||
var state = this.$store.state;
|
||||
var getters = this.$store.getters;
|
||||
if (namespace) {
|
||||
var module = getModuleByNamespace(this.$store, 'mapState', namespace);
|
||||
if (!module) {
|
||||
return
|
||||
}
|
||||
state = module.context.state;
|
||||
getters = module.context.getters;
|
||||
}
|
||||
return typeof val === 'function'
|
||||
? val.call(this, state, getters)
|
||||
: state[val]
|
||||
};
|
||||
// mark vuex getter for devtools
|
||||
res[key].vuex = true;
|
||||
});
|
||||
return res
|
||||
});
|
||||
|
||||
var mapMutations = normalizeNamespace(function (namespace, mutations) {
|
||||
var res = {};
|
||||
normalizeMap(mutations).forEach(function (ref) {
|
||||
var key = ref.key;
|
||||
var val = ref.val;
|
||||
|
||||
val = namespace + val;
|
||||
res[key] = function mappedMutation () {
|
||||
var args = [], len = arguments.length;
|
||||
while ( len-- ) args[ len ] = arguments[ len ];
|
||||
|
||||
if (namespace && !getModuleByNamespace(this.$store, 'mapMutations', namespace)) {
|
||||
return
|
||||
}
|
||||
return this.$store.commit.apply(this.$store, [val].concat(args))
|
||||
};
|
||||
});
|
||||
return res
|
||||
});
|
||||
|
||||
var mapGetters = normalizeNamespace(function (namespace, getters) {
|
||||
var res = {};
|
||||
normalizeMap(getters).forEach(function (ref) {
|
||||
var key = ref.key;
|
||||
var val = ref.val;
|
||||
|
||||
val = namespace + val;
|
||||
res[key] = function mappedGetter () {
|
||||
if (namespace && !getModuleByNamespace(this.$store, 'mapGetters', namespace)) {
|
||||
return
|
||||
}
|
||||
if (!(val in this.$store.getters)) {
|
||||
console.error(("[vuex] unknown getter: " + val));
|
||||
return
|
||||
}
|
||||
return this.$store.getters[val]
|
||||
};
|
||||
// mark vuex getter for devtools
|
||||
res[key].vuex = true;
|
||||
});
|
||||
return res
|
||||
});
|
||||
|
||||
var mapActions = normalizeNamespace(function (namespace, actions) {
|
||||
var res = {};
|
||||
normalizeMap(actions).forEach(function (ref) {
|
||||
var key = ref.key;
|
||||
var val = ref.val;
|
||||
|
||||
val = namespace + val;
|
||||
res[key] = function mappedAction () {
|
||||
var args = [], len = arguments.length;
|
||||
while ( len-- ) args[ len ] = arguments[ len ];
|
||||
|
||||
if (namespace && !getModuleByNamespace(this.$store, 'mapActions', namespace)) {
|
||||
return
|
||||
}
|
||||
return this.$store.dispatch.apply(this.$store, [val].concat(args))
|
||||
};
|
||||
});
|
||||
return res
|
||||
});
|
||||
|
||||
function normalizeMap (map) {
|
||||
return Array.isArray(map)
|
||||
? map.map(function (key) { return ({ key: key, val: key }); })
|
||||
: Object.keys(map).map(function (key) { return ({ key: key, val: map[key] }); })
|
||||
}
|
||||
|
||||
function normalizeNamespace (fn) {
|
||||
return function (namespace, map) {
|
||||
if (typeof namespace !== 'string') {
|
||||
map = namespace;
|
||||
namespace = '';
|
||||
} else if (namespace.charAt(namespace.length - 1) !== '/') {
|
||||
namespace += '/';
|
||||
}
|
||||
return fn(namespace, map)
|
||||
}
|
||||
}
|
||||
|
||||
function getModuleByNamespace (store, helper, namespace) {
|
||||
var module = store._modulesNamespaceMap[namespace];
|
||||
if (!module) {
|
||||
console.error(("[vuex] module namespace not found in " + helper + "(): " + namespace));
|
||||
}
|
||||
return module
|
||||
}
|
||||
|
||||
var index = {
|
||||
Store: Store,
|
||||
install: install,
|
||||
version: '2.3.0',
|
||||
mapState: mapState,
|
||||
mapMutations: mapMutations,
|
||||
mapGetters: mapGetters,
|
||||
mapActions: mapActions
|
||||
};
|
||||
|
||||
return index;
|
||||
|
||||
})));
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "devcoffee",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "veux.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"http-serve": "^1.0.1"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,809 @@
|
||||
/**
|
||||
* vuex v2.3.0
|
||||
* (c) 2017 Evan You
|
||||
* @license MIT
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global.Vuex = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var applyMixin = function (Vue) {
|
||||
var version = Number(Vue.version.split('.')[0]);
|
||||
|
||||
if (version >= 2) {
|
||||
var usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1;
|
||||
Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit });
|
||||
} else {
|
||||
// override init and inject vuex init procedure
|
||||
// for 1.x backwards compatibility.
|
||||
var _init = Vue.prototype._init;
|
||||
Vue.prototype._init = function (options) {
|
||||
if ( options === void 0 ) options = {};
|
||||
|
||||
options.init = options.init
|
||||
? [vuexInit].concat(options.init)
|
||||
: vuexInit;
|
||||
_init.call(this, options);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Vuex init hook, injected into each instances init hooks list.
|
||||
*/
|
||||
|
||||
function vuexInit () {
|
||||
var options = this.$options;
|
||||
// store injection
|
||||
if (options.store) {
|
||||
this.$store = options.store;
|
||||
} else if (options.parent && options.parent.$store) {
|
||||
this.$store = options.parent.$store;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var devtoolHook =
|
||||
typeof window !== 'undefined' &&
|
||||
window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
|
||||
|
||||
function devtoolPlugin (store) {
|
||||
if (!devtoolHook) { return }
|
||||
|
||||
store._devtoolHook = devtoolHook;
|
||||
|
||||
devtoolHook.emit('vuex:init', store);
|
||||
|
||||
devtoolHook.on('vuex:travel-to-state', function (targetState) {
|
||||
store.replaceState(targetState);
|
||||
});
|
||||
|
||||
store.subscribe(function (mutation, state) {
|
||||
devtoolHook.emit('vuex:mutation', mutation, state);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the first item that pass the test
|
||||
* by second argument function
|
||||
*
|
||||
* @param {Array} list
|
||||
* @param {Function} f
|
||||
* @return {*}
|
||||
*/
|
||||
/**
|
||||
* Deep copy the given object considering circular structure.
|
||||
* This function caches all nested objects and its copies.
|
||||
* If it detects circular structure, use cached copy to avoid infinite loop.
|
||||
*
|
||||
* @param {*} obj
|
||||
* @param {Array<Object>} cache
|
||||
* @return {*}
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* forEach for object
|
||||
*/
|
||||
function forEachValue (obj, fn) {
|
||||
Object.keys(obj).forEach(function (key) { return fn(obj[key], key); });
|
||||
}
|
||||
|
||||
function isObject (obj) {
|
||||
return obj !== null && typeof obj === 'object'
|
||||
}
|
||||
|
||||
function isPromise (val) {
|
||||
return val && typeof val.then === 'function'
|
||||
}
|
||||
|
||||
function assert (condition, msg) {
|
||||
if (!condition) { throw new Error(("[vuex] " + msg)) }
|
||||
}
|
||||
|
||||
var Module = function Module (rawModule, runtime) {
|
||||
this.runtime = runtime;
|
||||
this._children = Object.create(null);
|
||||
this._rawModule = rawModule;
|
||||
var rawState = rawModule.state;
|
||||
this.state = (typeof rawState === 'function' ? rawState() : rawState) || {};
|
||||
};
|
||||
|
||||
var prototypeAccessors$1 = { namespaced: {} };
|
||||
|
||||
prototypeAccessors$1.namespaced.get = function () {
|
||||
return !!this._rawModule.namespaced
|
||||
};
|
||||
|
||||
Module.prototype.addChild = function addChild (key, module) {
|
||||
this._children[key] = module;
|
||||
};
|
||||
|
||||
Module.prototype.removeChild = function removeChild (key) {
|
||||
delete this._children[key];
|
||||
};
|
||||
|
||||
Module.prototype.getChild = function getChild (key) {
|
||||
return this._children[key]
|
||||
};
|
||||
|
||||
Module.prototype.update = function update (rawModule) {
|
||||
this._rawModule.namespaced = rawModule.namespaced;
|
||||
if (rawModule.actions) {
|
||||
this._rawModule.actions = rawModule.actions;
|
||||
}
|
||||
if (rawModule.mutations) {
|
||||
this._rawModule.mutations = rawModule.mutations;
|
||||
}
|
||||
if (rawModule.getters) {
|
||||
this._rawModule.getters = rawModule.getters;
|
||||
}
|
||||
};
|
||||
|
||||
Module.prototype.forEachChild = function forEachChild (fn) {
|
||||
forEachValue(this._children, fn);
|
||||
};
|
||||
|
||||
Module.prototype.forEachGetter = function forEachGetter (fn) {
|
||||
if (this._rawModule.getters) {
|
||||
forEachValue(this._rawModule.getters, fn);
|
||||
}
|
||||
};
|
||||
|
||||
Module.prototype.forEachAction = function forEachAction (fn) {
|
||||
if (this._rawModule.actions) {
|
||||
forEachValue(this._rawModule.actions, fn);
|
||||
}
|
||||
};
|
||||
|
||||
Module.prototype.forEachMutation = function forEachMutation (fn) {
|
||||
if (this._rawModule.mutations) {
|
||||
forEachValue(this._rawModule.mutations, fn);
|
||||
}
|
||||
};
|
||||
|
||||
Object.defineProperties( Module.prototype, prototypeAccessors$1 );
|
||||
|
||||
var ModuleCollection = function ModuleCollection (rawRootModule) {
|
||||
var this$1 = this;
|
||||
|
||||
// register root module (Vuex.Store options)
|
||||
this.root = new Module(rawRootModule, false);
|
||||
|
||||
// register all nested modules
|
||||
if (rawRootModule.modules) {
|
||||
forEachValue(rawRootModule.modules, function (rawModule, key) {
|
||||
this$1.register([key], rawModule, false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
ModuleCollection.prototype.get = function get (path) {
|
||||
return path.reduce(function (module, key) {
|
||||
return module.getChild(key)
|
||||
}, this.root)
|
||||
};
|
||||
|
||||
ModuleCollection.prototype.getNamespace = function getNamespace (path) {
|
||||
var module = this.root;
|
||||
return path.reduce(function (namespace, key) {
|
||||
module = module.getChild(key);
|
||||
return namespace + (module.namespaced ? key + '/' : '')
|
||||
}, '')
|
||||
};
|
||||
|
||||
ModuleCollection.prototype.update = function update$1 (rawRootModule) {
|
||||
update(this.root, rawRootModule);
|
||||
};
|
||||
|
||||
ModuleCollection.prototype.register = function register (path, rawModule, runtime) {
|
||||
var this$1 = this;
|
||||
if ( runtime === void 0 ) runtime = true;
|
||||
|
||||
var parent = this.get(path.slice(0, -1));
|
||||
var newModule = new Module(rawModule, runtime);
|
||||
parent.addChild(path[path.length - 1], newModule);
|
||||
|
||||
// register nested modules
|
||||
if (rawModule.modules) {
|
||||
forEachValue(rawModule.modules, function (rawChildModule, key) {
|
||||
this$1.register(path.concat(key), rawChildModule, runtime);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
ModuleCollection.prototype.unregister = function unregister (path) {
|
||||
var parent = this.get(path.slice(0, -1));
|
||||
var key = path[path.length - 1];
|
||||
if (!parent.getChild(key).runtime) { return }
|
||||
|
||||
parent.removeChild(key);
|
||||
};
|
||||
|
||||
function update (targetModule, newModule) {
|
||||
// update target module
|
||||
targetModule.update(newModule);
|
||||
|
||||
// update nested modules
|
||||
if (newModule.modules) {
|
||||
for (var key in newModule.modules) {
|
||||
if (!targetModule.getChild(key)) {
|
||||
console.warn(
|
||||
"[vuex] trying to add a new module '" + key + "' on hot reloading, " +
|
||||
'manual reload is needed'
|
||||
);
|
||||
return
|
||||
}
|
||||
update(targetModule.getChild(key), newModule.modules[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var Vue; // bind on install
|
||||
|
||||
var Store = function Store (options) {
|
||||
var this$1 = this;
|
||||
if ( options === void 0 ) options = {};
|
||||
|
||||
assert(Vue, "must call Vue.use(Vuex) before creating a store instance.");
|
||||
assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.");
|
||||
|
||||
var state = options.state; if ( state === void 0 ) state = {};
|
||||
var plugins = options.plugins; if ( plugins === void 0 ) plugins = [];
|
||||
var strict = options.strict; if ( strict === void 0 ) strict = false;
|
||||
|
||||
// store internal state
|
||||
this._committing = false;
|
||||
this._actions = Object.create(null);
|
||||
this._mutations = Object.create(null);
|
||||
this._wrappedGetters = Object.create(null);
|
||||
this._modules = new ModuleCollection(options);
|
||||
this._modulesNamespaceMap = Object.create(null);
|
||||
this._subscribers = [];
|
||||
this._watcherVM = new Vue();
|
||||
|
||||
// bind commit and dispatch to self
|
||||
var store = this;
|
||||
var ref = this;
|
||||
var dispatch = ref.dispatch;
|
||||
var commit = ref.commit;
|
||||
this.dispatch = function boundDispatch (type, payload) {
|
||||
return dispatch.call(store, type, payload)
|
||||
};
|
||||
this.commit = function boundCommit (type, payload, options) {
|
||||
return commit.call(store, type, payload, options)
|
||||
};
|
||||
|
||||
// strict mode
|
||||
this.strict = strict;
|
||||
|
||||
// init root module.
|
||||
// this also recursively registers all sub-modules
|
||||
// and collects all module getters inside this._wrappedGetters
|
||||
installModule(this, state, [], this._modules.root);
|
||||
|
||||
// initialize the store vm, which is responsible for the reactivity
|
||||
// (also registers _wrappedGetters as computed properties)
|
||||
resetStoreVM(this, state);
|
||||
|
||||
// apply plugins
|
||||
plugins.concat(devtoolPlugin).forEach(function (plugin) { return plugin(this$1); });
|
||||
};
|
||||
|
||||
var prototypeAccessors = { state: {} };
|
||||
|
||||
prototypeAccessors.state.get = function () {
|
||||
return this._vm._data.$$state
|
||||
};
|
||||
|
||||
prototypeAccessors.state.set = function (v) {
|
||||
assert(false, "Use store.replaceState() to explicit replace store state.");
|
||||
};
|
||||
|
||||
Store.prototype.commit = function commit (_type, _payload, _options) {
|
||||
var this$1 = this;
|
||||
|
||||
// check object-style commit
|
||||
var ref = unifyObjectStyle(_type, _payload, _options);
|
||||
var type = ref.type;
|
||||
var payload = ref.payload;
|
||||
var options = ref.options;
|
||||
|
||||
var mutation = { type: type, payload: payload };
|
||||
var entry = this._mutations[type];
|
||||
if (!entry) {
|
||||
console.error(("[vuex] unknown mutation type: " + type));
|
||||
return
|
||||
}
|
||||
this._withCommit(function () {
|
||||
entry.forEach(function commitIterator (handler) {
|
||||
handler(payload);
|
||||
});
|
||||
});
|
||||
this._subscribers.forEach(function (sub) { return sub(mutation, this$1.state); });
|
||||
|
||||
if (options && options.silent) {
|
||||
console.warn(
|
||||
"[vuex] mutation type: " + type + ". Silent option has been removed. " +
|
||||
'Use the filter functionality in the vue-devtools'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
Store.prototype.dispatch = function dispatch (_type, _payload) {
|
||||
// check object-style dispatch
|
||||
var ref = unifyObjectStyle(_type, _payload);
|
||||
var type = ref.type;
|
||||
var payload = ref.payload;
|
||||
|
||||
var entry = this._actions[type];
|
||||
if (!entry) {
|
||||
console.error(("[vuex] unknown action type: " + type));
|
||||
return
|
||||
}
|
||||
return entry.length > 1
|
||||
? Promise.all(entry.map(function (handler) { return handler(payload); }))
|
||||
: entry[0](payload)
|
||||
};
|
||||
|
||||
Store.prototype.subscribe = function subscribe (fn) {
|
||||
var subs = this._subscribers;
|
||||
if (subs.indexOf(fn) < 0) {
|
||||
subs.push(fn);
|
||||
}
|
||||
return function () {
|
||||
var i = subs.indexOf(fn);
|
||||
if (i > -1) {
|
||||
subs.splice(i, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Store.prototype.watch = function watch (getter, cb, options) {
|
||||
var this$1 = this;
|
||||
|
||||
assert(typeof getter === 'function', "store.watch only accepts a function.");
|
||||
return this._watcherVM.$watch(function () { return getter(this$1.state, this$1.getters); }, cb, options)
|
||||
};
|
||||
|
||||
Store.prototype.replaceState = function replaceState (state) {
|
||||
var this$1 = this;
|
||||
|
||||
this._withCommit(function () {
|
||||
this$1._vm._data.$$state = state;
|
||||
});
|
||||
};
|
||||
|
||||
Store.prototype.registerModule = function registerModule (path, rawModule) {
|
||||
if (typeof path === 'string') { path = [path]; }
|
||||
assert(Array.isArray(path), "module path must be a string or an Array.");
|
||||
this._modules.register(path, rawModule);
|
||||
installModule(this, this.state, path, this._modules.get(path));
|
||||
// reset store to update getters...
|
||||
resetStoreVM(this, this.state);
|
||||
};
|
||||
|
||||
Store.prototype.unregisterModule = function unregisterModule (path) {
|
||||
var this$1 = this;
|
||||
|
||||
if (typeof path === 'string') { path = [path]; }
|
||||
assert(Array.isArray(path), "module path must be a string or an Array.");
|
||||
this._modules.unregister(path);
|
||||
this._withCommit(function () {
|
||||
var parentState = getNestedState(this$1.state, path.slice(0, -1));
|
||||
Vue.delete(parentState, path[path.length - 1]);
|
||||
});
|
||||
resetStore(this);
|
||||
};
|
||||
|
||||
Store.prototype.hotUpdate = function hotUpdate (newOptions) {
|
||||
this._modules.update(newOptions);
|
||||
resetStore(this, true);
|
||||
};
|
||||
|
||||
Store.prototype._withCommit = function _withCommit (fn) {
|
||||
var committing = this._committing;
|
||||
this._committing = true;
|
||||
fn();
|
||||
this._committing = committing;
|
||||
};
|
||||
|
||||
Object.defineProperties( Store.prototype, prototypeAccessors );
|
||||
|
||||
function resetStore (store, hot) {
|
||||
store._actions = Object.create(null);
|
||||
store._mutations = Object.create(null);
|
||||
store._wrappedGetters = Object.create(null);
|
||||
store._modulesNamespaceMap = Object.create(null);
|
||||
var state = store.state;
|
||||
// init all modules
|
||||
installModule(store, state, [], store._modules.root, true);
|
||||
// reset vm
|
||||
resetStoreVM(store, state, hot);
|
||||
}
|
||||
|
||||
function resetStoreVM (store, state, hot) {
|
||||
var oldVm = store._vm;
|
||||
|
||||
// bind store public getters
|
||||
store.getters = {};
|
||||
var wrappedGetters = store._wrappedGetters;
|
||||
var computed = {};
|
||||
forEachValue(wrappedGetters, function (fn, key) {
|
||||
// use computed to leverage its lazy-caching mechanism
|
||||
computed[key] = function () { return fn(store); };
|
||||
Object.defineProperty(store.getters, key, {
|
||||
get: function () { return store._vm[key]; },
|
||||
enumerable: true // for local getters
|
||||
});
|
||||
});
|
||||
|
||||
// use a Vue instance to store the state tree
|
||||
// suppress warnings just in case the user has added
|
||||
// some funky global mixins
|
||||
var silent = Vue.config.silent;
|
||||
Vue.config.silent = true;
|
||||
store._vm = new Vue({
|
||||
data: {
|
||||
$$state: state
|
||||
},
|
||||
computed: computed
|
||||
});
|
||||
Vue.config.silent = silent;
|
||||
|
||||
// enable strict mode for new vm
|
||||
if (store.strict) {
|
||||
enableStrictMode(store);
|
||||
}
|
||||
|
||||
if (oldVm) {
|
||||
if (hot) {
|
||||
// dispatch changes in all subscribed watchers
|
||||
// to force getter re-evaluation for hot reloading.
|
||||
store._withCommit(function () {
|
||||
oldVm._data.$$state = null;
|
||||
});
|
||||
}
|
||||
Vue.nextTick(function () { return oldVm.$destroy(); });
|
||||
}
|
||||
}
|
||||
|
||||
function installModule (store, rootState, path, module, hot) {
|
||||
var isRoot = !path.length;
|
||||
var namespace = store._modules.getNamespace(path);
|
||||
|
||||
// register in namespace map
|
||||
if (module.namespaced) {
|
||||
store._modulesNamespaceMap[namespace] = module;
|
||||
}
|
||||
|
||||
// set state
|
||||
if (!isRoot && !hot) {
|
||||
var parentState = getNestedState(rootState, path.slice(0, -1));
|
||||
var moduleName = path[path.length - 1];
|
||||
store._withCommit(function () {
|
||||
Vue.set(parentState, moduleName, module.state);
|
||||
});
|
||||
}
|
||||
|
||||
var local = module.context = makeLocalContext(store, namespace, path);
|
||||
|
||||
module.forEachMutation(function (mutation, key) {
|
||||
var namespacedType = namespace + key;
|
||||
registerMutation(store, namespacedType, mutation, local);
|
||||
});
|
||||
|
||||
module.forEachAction(function (action, key) {
|
||||
var namespacedType = namespace + key;
|
||||
registerAction(store, namespacedType, action, local);
|
||||
});
|
||||
|
||||
module.forEachGetter(function (getter, key) {
|
||||
var namespacedType = namespace + key;
|
||||
registerGetter(store, namespacedType, getter, local);
|
||||
});
|
||||
|
||||
module.forEachChild(function (child, key) {
|
||||
installModule(store, rootState, path.concat(key), child, hot);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* make localized dispatch, commit, getters and state
|
||||
* if there is no namespace, just use root ones
|
||||
*/
|
||||
function makeLocalContext (store, namespace, path) {
|
||||
var noNamespace = namespace === '';
|
||||
|
||||
var local = {
|
||||
dispatch: noNamespace ? store.dispatch : function (_type, _payload, _options) {
|
||||
var args = unifyObjectStyle(_type, _payload, _options);
|
||||
var payload = args.payload;
|
||||
var options = args.options;
|
||||
var type = args.type;
|
||||
|
||||
if (!options || !options.root) {
|
||||
type = namespace + type;
|
||||
if (!store._actions[type]) {
|
||||
console.error(("[vuex] unknown local action type: " + (args.type) + ", global type: " + type));
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
return store.dispatch(type, payload)
|
||||
},
|
||||
|
||||
commit: noNamespace ? store.commit : function (_type, _payload, _options) {
|
||||
var args = unifyObjectStyle(_type, _payload, _options);
|
||||
var payload = args.payload;
|
||||
var options = args.options;
|
||||
var type = args.type;
|
||||
|
||||
if (!options || !options.root) {
|
||||
type = namespace + type;
|
||||
if (!store._mutations[type]) {
|
||||
console.error(("[vuex] unknown local mutation type: " + (args.type) + ", global type: " + type));
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
store.commit(type, payload, options);
|
||||
}
|
||||
};
|
||||
|
||||
// getters and state object must be gotten lazily
|
||||
// because they will be changed by vm update
|
||||
Object.defineProperties(local, {
|
||||
getters: {
|
||||
get: noNamespace
|
||||
? function () { return store.getters; }
|
||||
: function () { return makeLocalGetters(store, namespace); }
|
||||
},
|
||||
state: {
|
||||
get: function () { return getNestedState(store.state, path); }
|
||||
}
|
||||
});
|
||||
|
||||
return local
|
||||
}
|
||||
|
||||
function makeLocalGetters (store, namespace) {
|
||||
var gettersProxy = {};
|
||||
|
||||
var splitPos = namespace.length;
|
||||
Object.keys(store.getters).forEach(function (type) {
|
||||
// skip if the target getter is not match this namespace
|
||||
if (type.slice(0, splitPos) !== namespace) { return }
|
||||
|
||||
// extract local getter type
|
||||
var localType = type.slice(splitPos);
|
||||
|
||||
// Add a port to the getters proxy.
|
||||
// Define as getter property because
|
||||
// we do not want to evaluate the getters in this time.
|
||||
Object.defineProperty(gettersProxy, localType, {
|
||||
get: function () { return store.getters[type]; },
|
||||
enumerable: true
|
||||
});
|
||||
});
|
||||
|
||||
return gettersProxy
|
||||
}
|
||||
|
||||
function registerMutation (store, type, handler, local) {
|
||||
var entry = store._mutations[type] || (store._mutations[type] = []);
|
||||
entry.push(function wrappedMutationHandler (payload) {
|
||||
handler(local.state, payload);
|
||||
});
|
||||
}
|
||||
|
||||
function registerAction (store, type, handler, local) {
|
||||
var entry = store._actions[type] || (store._actions[type] = []);
|
||||
entry.push(function wrappedActionHandler (payload, cb) {
|
||||
var res = handler({
|
||||
dispatch: local.dispatch,
|
||||
commit: local.commit,
|
||||
getters: local.getters,
|
||||
state: local.state,
|
||||
rootGetters: store.getters,
|
||||
rootState: store.state
|
||||
}, payload, cb);
|
||||
if (!isPromise(res)) {
|
||||
res = Promise.resolve(res);
|
||||
}
|
||||
if (store._devtoolHook) {
|
||||
return res.catch(function (err) {
|
||||
store._devtoolHook.emit('vuex:error', err);
|
||||
throw err
|
||||
})
|
||||
} else {
|
||||
return res
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function registerGetter (store, type, rawGetter, local) {
|
||||
if (store._wrappedGetters[type]) {
|
||||
console.error(("[vuex] duplicate getter key: " + type));
|
||||
return
|
||||
}
|
||||
store._wrappedGetters[type] = function wrappedGetter (store) {
|
||||
return rawGetter(
|
||||
local.state, // local state
|
||||
local.getters, // local getters
|
||||
store.state, // root state
|
||||
store.getters // root getters
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
function enableStrictMode (store) {
|
||||
store._vm.$watch(function () { return this._data.$$state }, function () {
|
||||
assert(store._committing, "Do not mutate vuex store state outside mutation handlers.");
|
||||
}, { deep: true, sync: true });
|
||||
}
|
||||
|
||||
function getNestedState (state, path) {
|
||||
return path.length
|
||||
? path.reduce(function (state, key) { return state[key]; }, state)
|
||||
: state
|
||||
}
|
||||
|
||||
function unifyObjectStyle (type, payload, options) {
|
||||
if (isObject(type) && type.type) {
|
||||
options = payload;
|
||||
payload = type;
|
||||
type = type.type;
|
||||
}
|
||||
|
||||
assert(typeof type === 'string', ("Expects string as the type, but found " + (typeof type) + "."));
|
||||
|
||||
return { type: type, payload: payload, options: options }
|
||||
}
|
||||
|
||||
function install (_Vue) {
|
||||
if (Vue) {
|
||||
console.error(
|
||||
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
|
||||
);
|
||||
return
|
||||
}
|
||||
Vue = _Vue;
|
||||
applyMixin(Vue);
|
||||
}
|
||||
|
||||
// auto install in dist mode
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
install(window.Vue);
|
||||
}
|
||||
|
||||
var mapState = normalizeNamespace(function (namespace, states) {
|
||||
var res = {};
|
||||
normalizeMap(states).forEach(function (ref) {
|
||||
var key = ref.key;
|
||||
var val = ref.val;
|
||||
|
||||
res[key] = function mappedState () {
|
||||
var state = this.$store.state;
|
||||
var getters = this.$store.getters;
|
||||
if (namespace) {
|
||||
var module = getModuleByNamespace(this.$store, 'mapState', namespace);
|
||||
if (!module) {
|
||||
return
|
||||
}
|
||||
state = module.context.state;
|
||||
getters = module.context.getters;
|
||||
}
|
||||
return typeof val === 'function'
|
||||
? val.call(this, state, getters)
|
||||
: state[val]
|
||||
};
|
||||
// mark vuex getter for devtools
|
||||
res[key].vuex = true;
|
||||
});
|
||||
return res
|
||||
});
|
||||
|
||||
var mapMutations = normalizeNamespace(function (namespace, mutations) {
|
||||
var res = {};
|
||||
normalizeMap(mutations).forEach(function (ref) {
|
||||
var key = ref.key;
|
||||
var val = ref.val;
|
||||
|
||||
val = namespace + val;
|
||||
res[key] = function mappedMutation () {
|
||||
var args = [], len = arguments.length;
|
||||
while ( len-- ) args[ len ] = arguments[ len ];
|
||||
|
||||
if (namespace && !getModuleByNamespace(this.$store, 'mapMutations', namespace)) {
|
||||
return
|
||||
}
|
||||
return this.$store.commit.apply(this.$store, [val].concat(args))
|
||||
};
|
||||
});
|
||||
return res
|
||||
});
|
||||
|
||||
var mapGetters = normalizeNamespace(function (namespace, getters) {
|
||||
var res = {};
|
||||
normalizeMap(getters).forEach(function (ref) {
|
||||
var key = ref.key;
|
||||
var val = ref.val;
|
||||
|
||||
val = namespace + val;
|
||||
res[key] = function mappedGetter () {
|
||||
if (namespace && !getModuleByNamespace(this.$store, 'mapGetters', namespace)) {
|
||||
return
|
||||
}
|
||||
if (!(val in this.$store.getters)) {
|
||||
console.error(("[vuex] unknown getter: " + val));
|
||||
return
|
||||
}
|
||||
return this.$store.getters[val]
|
||||
};
|
||||
// mark vuex getter for devtools
|
||||
res[key].vuex = true;
|
||||
});
|
||||
return res
|
||||
});
|
||||
|
||||
var mapActions = normalizeNamespace(function (namespace, actions) {
|
||||
var res = {};
|
||||
normalizeMap(actions).forEach(function (ref) {
|
||||
var key = ref.key;
|
||||
var val = ref.val;
|
||||
|
||||
val = namespace + val;
|
||||
res[key] = function mappedAction () {
|
||||
var args = [], len = arguments.length;
|
||||
while ( len-- ) args[ len ] = arguments[ len ];
|
||||
|
||||
if (namespace && !getModuleByNamespace(this.$store, 'mapActions', namespace)) {
|
||||
return
|
||||
}
|
||||
return this.$store.dispatch.apply(this.$store, [val].concat(args))
|
||||
};
|
||||
});
|
||||
return res
|
||||
});
|
||||
|
||||
function normalizeMap (map) {
|
||||
return Array.isArray(map)
|
||||
? map.map(function (key) { return ({ key: key, val: key }); })
|
||||
: Object.keys(map).map(function (key) { return ({ key: key, val: map[key] }); })
|
||||
}
|
||||
|
||||
function normalizeNamespace (fn) {
|
||||
return function (namespace, map) {
|
||||
if (typeof namespace !== 'string') {
|
||||
map = namespace;
|
||||
namespace = '';
|
||||
} else if (namespace.charAt(namespace.length - 1) !== '/') {
|
||||
namespace += '/';
|
||||
}
|
||||
return fn(namespace, map)
|
||||
}
|
||||
}
|
||||
|
||||
function getModuleByNamespace (store, helper, namespace) {
|
||||
var module = store._modulesNamespaceMap[namespace];
|
||||
if (!module) {
|
||||
console.error(("[vuex] module namespace not found in " + helper + "(): " + namespace));
|
||||
}
|
||||
return module
|
||||
}
|
||||
|
||||
var index = {
|
||||
Store: Store,
|
||||
install: install,
|
||||
version: '2.3.0',
|
||||
mapState: mapState,
|
||||
mapMutations: mapMutations,
|
||||
mapGetters: mapGetters,
|
||||
mapActions: mapActions
|
||||
};
|
||||
|
||||
return index;
|
||||
|
||||
})));
|
||||
Loading…
Reference in New Issue