Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
馃摝 Upgrade Nuxt to latest major version (#4)
Includes an upgrade to latest major version of chroma.js, as well as some code formatting changes. Removes `vue-slider-component` in favour of an internal range input that is SSR-compatible. Currently built with Sass for styles, pending a refactor/redesign. `yarn.lock` replaces `package-lock.json` pending a solution to this [peerDependencies issue](https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794) (see this [nuxt.js issue](nuxt/nuxt#4839) for more info).
- Loading branch information
1 parent
e64bedf
commit 90c07c2
Showing
15 changed files
with
10,660 additions
and
14,350 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| module.exports = { | ||
| extends: ['@zazen/eslint-config', '@zazen/eslint-config/vue'], | ||
| rules: { | ||
| 'vue/html-indent': ['error', 4], | ||
| // 'vue/html-indent': ['error', 4], | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| module.exports = { | ||
| extends: ['@zazen/stylelint-config'], | ||
| extends: ['@zazen/stylelint-config', '@zazen/stylelint-config/sass'], | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,9 @@ | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| /** | ||
| * Fix tracking issue for right-aligned text. | ||
| */ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -24,6 +24,3 @@ export default { | |
| }, | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <template> | ||
| <details class="bb b--black-10"> | ||
| <summary class="w-100 flex items-center justify-between pa3 pa4-ns"> | ||
| <slot name="summary"></slot> | ||
| </summary> | ||
| <div> | ||
| <slot></slot> | ||
| </div> | ||
| </details> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| summary { | ||
| list-style-type: none; | ||
| cursor: pointer; | ||
| } | ||
| summary::-webkit-details-marker { | ||
| display: none; | ||
| } | ||
| </style> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| <template> | ||
| <div class="range-field" :class="{'is-disabled': disabled}"> | ||
| <label v-if="label" class="range-field__label"> | ||
| <slot>{{ label }}</slot> | ||
| </label> | ||
|
|
||
| <input | ||
| class="range-field__input" | ||
| type="range" | ||
| :disabled="disabled" | ||
| :max="max" | ||
| :min="min" | ||
| :value="value" | ||
| v-bind="$attrs" | ||
| @input="input" | ||
| > | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'RangeField', | ||
| props: { | ||
| disabled: { | ||
| type: Boolean, | ||
| default: false | ||
| }, | ||
| label: { | ||
| type: String, | ||
| default: '' | ||
| }, | ||
| max: { | ||
| type: Number, | ||
| default: 100 | ||
| }, | ||
| min: { | ||
| type: Number, | ||
| default: 0 | ||
| }, | ||
| value: { | ||
| type: Number, | ||
| default: 50 | ||
| } | ||
| }, | ||
| methods: { | ||
| input($event) { | ||
| if (!this.disabled) { | ||
| this.$emit('input', parseFloat($event.target.value)); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| $fallbackAccentColor: #0078d7; | ||
| :root { | ||
| --range-accent-color: #0078d7; | ||
| } | ||
| .range-field { | ||
| margin: 8px 0; | ||
| font-size: 15px; | ||
| &.is-disabled { | ||
| color: lighten(#000, 60%); | ||
| } | ||
| } | ||
| .range-field__label { | ||
| display: block; | ||
| margin-bottom: 4px; | ||
| line-height: 30px; | ||
| color: #000100; | ||
| } | ||
| .range-field__input { | ||
| appearance: none; | ||
| width: 100%; | ||
| margin: 8px 0; | ||
| &:focus { | ||
| outline: none; | ||
| } | ||
| @mixin track() { | ||
| height: 2px; | ||
| background: lighten(#000, 60%); | ||
| } | ||
| &::-ms-track { | ||
| height: 24px; | ||
| } | ||
| &::-ms-fill-lower, | ||
| &::-ms-fill-upper { | ||
| @include track; | ||
| } | ||
| &::-ms-fill-lower { | ||
| background: var(--range-accent-color, $fallbackAccentColor); | ||
| } | ||
| &::-moz-range-track { | ||
| @include track; | ||
| } | ||
| &::-moz-progress-bar { | ||
| margin-inline-start: 0; | ||
| margin-inline-end: 0; | ||
| } | ||
| &::-webkit-slider-runnable-track { | ||
| @include track; | ||
| } | ||
| @mixin thumb() { | ||
| background: var(--range-accent-color, $fallbackAccentColor); | ||
| height: 24px; | ||
| width: 8px; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| border: 0; | ||
| margin: 0; | ||
| &:focus { | ||
| background: #000; | ||
| } | ||
| } | ||
| &::-webkit-slider-thumb { | ||
| @include thumb; | ||
| -webkit-appearance: none; | ||
| margin-top: -11px; | ||
| margin-bottom: 11px; | ||
| } | ||
| &::-ms-thumb { | ||
| @include thumb; | ||
| } | ||
| &::-moz-range-thumb { | ||
| @include thumb; | ||
| } | ||
| &:disabled { | ||
| @mixin slider-disabled() { | ||
| background: lighten(#000, 80%); | ||
| cursor: default; | ||
| } | ||
| &::-ms-fill-lower, | ||
| &::-ms-fill-upper, | ||
| &::-ms-thumb { | ||
| @include slider-disabled; | ||
| } | ||
| &::-webkit-slider-thumb, | ||
| &::-webkit-slider-runnable-track { | ||
| @include slider-disabled; | ||
| } | ||
| &::-moz-range-track, | ||
| &::-moz-range-thumb { | ||
| @include slider-disabled; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.