commit cfc4ec2c21d9bd17ebb930676ab6e702a4d6882b
parent 67d1faaccb2ae89fde899da7558632f055f02dfd
Author: George Francis <georgedoescode@gmail.com>
Date: Fri, 3 Jul 2020 08:26:38 +0100
add base input range component, auto globally register base components, reformat vue files to remove script and style additional spacing
Diffstat:
13 files changed, 280 insertions(+), 208 deletions(-)
diff --git a/.prettierrc b/.prettierrc
@@ -3,5 +3,5 @@
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
- "vueIndentScriptAndStyle": true
+ "vueIndentScriptAndStyle": false
}
diff --git a/package-lock.json b/package-lock.json
@@ -5904,8 +5904,7 @@
"lodash": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
- "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
- "dev": true
+ "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
+ "lodash": "^4.17.15",
"normalize.css": "^8.0.1",
"vue": "^2.6.11",
"vue-social-sharing": "^3.0.0-beta.11",
diff --git a/src/App.vue b/src/App.vue
@@ -1,14 +1,14 @@
<script>
- import TheHeader from './components/TheHeader.vue';
- import TheGenerator from './components/TheGenerator.vue';
+import TheHeader from './components/TheHeader.vue';
+import TheGenerator from './components/TheGenerator.vue';
- export default {
- name: 'App',
- components: {
- TheHeader,
- TheGenerator,
- },
- };
+export default {
+ name: 'App',
+ components: {
+ TheHeader,
+ TheGenerator,
+ },
+};
</script>
<template>
diff --git a/src/components/BaseRangeInput.vue b/src/components/BaseRangeInput.vue
@@ -0,0 +1,21 @@
+<script>
+export default {
+ name: 'BaseRangeInput',
+ props: {
+ name: {
+ type: String,
+ required: true,
+ },
+ },
+};
+</script>
+
+<template>
+ <input :id="name" type="range" :name="name" />
+</template>
+
+<style scoped>
+input {
+ min-width: 0;
+}
+</style>
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -0,0 +1,27 @@
+<script>
+export default {
+ name: 'GeneratorControls',
+};
+</script>
+
+<template>
+ <div class="generator-controls">
+ <label for="scaleX" class="generator-controls__label">Scale X</label>
+ <BaseRangeInput name="scaleX" />
+ <label for="scaleX" class="generator-controls__label">Scale Y</label>
+ <BaseRangeInput name="scaleY" />
+ <label for="roundness" class="generator-controls__label"
+ >Roundness</label
+ >
+ <BaseRangeInput name="roundness" />
+ </div>
+</template>
+
+<style scoped>
+.generator-controls {
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ grid-auto-rows: max-content;
+ width: 100%;
+}
+</style>
diff --git a/src/components/GeneratorExportConrols.vue b/src/components/GeneratorExportConrols.vue
@@ -1,61 +0,0 @@
-<script>
- import CodeIcon from '@/assets/img/code.svg';
- import DownloadIcon from '@/assets/img/download.svg';
-
- export default {
- name: 'GeneratorExportControls',
- components: {
- CodeIcon,
- DownloadIcon,
- },
- };
-</script>
-
-<template>
- <div class="generator-export-controls">
- <button class="generator-export-controls__btn">
- <DownloadIcon />
- </button>
- <button class="generator-export-controls__btn">
- <CodeIcon />
- </button>
- </div>
-</template>
-
-<style scoped>
- .generator-export-controls {
- display: flex;
- justify-content: flex-end;
- width: 100%;
- }
-
- .generator-export-controls__btn {
- margin-left: var(--spacing-5);
- padding: 0;
- border: 0;
- border-radius: 50%;
- outline: none;
- cursor: pointer;
- transition: stroke 125ms ease-in-out, transform 125ms ease-in-out;
- }
-
- .generator-export-controls__btn svg {
- stroke: var(--grey-900);
- }
-
- .generator-export-controls__btn:hover {
- transform: scale(1.125);
- }
-
- .generator-export-controls__btn:active {
- transform: scale(0.875);
- }
-
- .generator-export-controls__btn:active svg {
- stroke: var(--grey-500);
- }
-
- .generator-export-controls__btn:first-child {
- margin-left: 0;
- }
-</style>
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -0,0 +1,61 @@
+<script>
+import CodeIcon from '@/assets/img/code.svg';
+import DownloadIcon from '@/assets/img/download.svg';
+
+export default {
+ name: 'GeneratorExportOptions',
+ components: {
+ CodeIcon,
+ DownloadIcon,
+ },
+};
+</script>
+
+<template>
+ <div class="generator-export-controls">
+ <button class="generator-export-controls__btn">
+ <DownloadIcon />
+ </button>
+ <button class="generator-export-controls__btn">
+ <CodeIcon />
+ </button>
+ </div>
+</template>
+
+<style scoped>
+.generator-export-controls {
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+}
+
+.generator-export-controls__btn {
+ margin-left: var(--spacing-5);
+ padding: 0;
+ border: 0;
+ border-radius: 50%;
+ outline: none;
+ cursor: pointer;
+ transition: stroke 125ms ease-in-out, transform 125ms ease-in-out;
+}
+
+.generator-export-controls__btn svg {
+ stroke: var(--grey-900);
+}
+
+.generator-export-controls__btn:hover {
+ transform: scale(1.125);
+}
+
+.generator-export-controls__btn:active {
+ transform: scale(0.875);
+}
+
+.generator-export-controls__btn:active svg {
+ stroke: var(--grey-500);
+}
+
+.generator-export-controls__btn:first-child {
+ margin-left: 0;
+}
+</style>
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -1,7 +1,7 @@
<script>
- export default {
- name: 'GeneratorPreview',
- };
+export default {
+ name: 'GeneratorPreview',
+};
</script>
<template>
@@ -11,23 +11,23 @@
</template>
<style scoped>
- .generator-preview {
- position: relative;
- width: 100%;
- }
+.generator-preview {
+ position: relative;
+ width: 100%;
+}
- .generator-preview::before {
- content: '';
- display: block;
- padding-bottom: 100%;
- }
+.generator-preview::before {
+ content: '';
+ display: block;
+ padding-bottom: 100%;
+}
- .generator-preview svg {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: var(--grey-000);
- }
+.generator-preview svg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--grey-000);
+}
</style>
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -1,22 +1,22 @@
<script>
- import RedditLogo from '@/assets/img/social-icons/reddit-alien.svg';
- import TwitterLogo from '@/assets/img/social-icons/twitter.svg';
+import RedditLogo from '@/assets/img/social-icons/reddit-alien.svg';
+import TwitterLogo from '@/assets/img/social-icons/twitter.svg';
- export default {
- name: 'SocialSharing',
- components: {
- RedditLogo,
- TwitterLogo,
- },
- data() {
- return {
- sharingOptions: {
- url: 'https://www.squircley.app',
- title: 'Squircley | Squircle Maker',
- },
- };
- },
- };
+export default {
+ name: 'SocialSharing',
+ components: {
+ RedditLogo,
+ TwitterLogo,
+ },
+ data() {
+ return {
+ sharingOptions: {
+ url: 'https://www.squircley.app',
+ title: 'Squircley | Squircle Maker',
+ },
+ };
+ },
+};
</script>
<template>
@@ -40,35 +40,35 @@
</template>
<style scoped>
- .social-sharing {
- display: flex;
- }
+.social-sharing {
+ display: flex;
+}
- .social-sharing__icon {
- display: block;
- width: var(--spacing-4);
- height: var(--spacing-4);
- margin-left: var(--spacing-5);
- cursor: pointer;
- transition: transform 125ms ease-in-out;
- }
+.social-sharing__icon {
+ display: block;
+ width: var(--spacing-4);
+ height: var(--spacing-4);
+ margin-left: var(--spacing-5);
+ cursor: pointer;
+ transition: transform 125ms ease-in-out;
+}
- .social-sharing__icon svg {
- width: 100%;
- height: 100%;
- fill: var(--grey-900);
- transition: fill 125ms ease-in-out, transform 125ms ease-in-out;
- }
+.social-sharing__icon svg {
+ width: 100%;
+ height: 100%;
+ fill: var(--grey-900);
+ transition: fill 125ms ease-in-out, transform 125ms ease-in-out;
+}
- .social-sharing__icon:hover svg {
- transform: scale(1.125);
- }
+.social-sharing__icon:hover svg {
+ transform: scale(1.125);
+}
- .social-sharing__icon:active svg {
- fill: var(--grey-500);
- }
+.social-sharing__icon:active svg {
+ fill: var(--grey-500);
+}
- .social-sharing__icon:active {
- transform: scale(0.875);
- }
+.social-sharing__icon:active {
+ transform: scale(0.875);
+}
</style>
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -1,14 +1,16 @@
<script>
- import GeneratorPreview from './GeneratorPreview.vue';
- import GeneratorExportControls from './GeneratorExportConrols.vue';
+import GeneratorPreview from './GeneratorPreview.vue';
+import GeneratorControls from './GeneratorControls.vue';
+import GeneratorExportOptions from './GeneratorExportOptions.vue';
- export default {
- name: 'TheGenerator',
- components: {
- GeneratorPreview,
- GeneratorExportControls,
- },
- };
+export default {
+ name: 'TheGenerator',
+ components: {
+ GeneratorPreview,
+ GeneratorControls,
+ GeneratorExportOptions,
+ },
+};
</script>
<template>
@@ -18,39 +20,38 @@
<GeneratorPreview />
</div>
<div class="generator__control-section">
- <div></div>
- <GeneratorExportControls />
+ <GeneratorControls />
+ <GeneratorExportOptions />
</div>
</div>
</div>
</template>
<style scoped>
- .generator-wrapper {
- padding: 0 var(--spacing-4);
- }
- .generator {
- display: flex;
- max-width: var(--spacing-15);
- margin: 0 auto;
- padding: var(--spacing-4);
- background: #fff;
- border-radius: 16px;
- }
+.generator-wrapper {
+ padding: 0 var(--spacing-4);
+}
- .generator__preview-section {
- position: relative;
- width: 50%;
- flex-shrink: 0;
- margin-right: var(--spacing-4);
- }
+.generator {
+ display: flex;
+ max-width: var(--spacing-15);
+ margin: 0 auto;
+ padding: var(--spacing-4);
+ background: #fff;
+ border-radius: 16px;
+}
- .generator__control-section {
- display: grid;
- grid-template-rows: 1fr max-content;
- flex-grow: 1;
- min-height: 100%;
+.generator__preview-section {
+ position: relative;
+ width: 50%;
+ flex-shrink: 0;
+ margin-right: var(--spacing-4);
+}
- /* background: red; */
- }
+.generator__control-section {
+ display: grid;
+ grid-template-rows: 1fr max-content;
+ flex-grow: 1;
+ min-height: 100%;
+}
</style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -1,12 +1,12 @@
<script>
- import SocialSharing from './SocialSharing.vue';
+import SocialSharing from './SocialSharing.vue';
- export default {
- name: 'TheHeader',
- components: {
- SocialSharing,
- },
- };
+export default {
+ name: 'TheHeader',
+ components: {
+ SocialSharing,
+ },
+};
</script>
<template>
@@ -18,37 +18,37 @@
</template>
<style scoped>
- .header {
- display: grid;
- grid-template-columns: 1fr max-content 1fr;
- grid-template-rows: auto;
- align-items: center;
- padding: var(--spacing-5);
- margin-bottom: var(--spacing-7);
- }
+.header {
+ display: grid;
+ grid-template-columns: 1fr max-content 1fr;
+ grid-template-rows: auto;
+ align-items: center;
+ padding: var(--spacing-5);
+ margin-bottom: var(--spacing-7);
+}
- .header__logo {
- grid-column: 1;
- grid-row: 1;
- justify-self: start;
- width: var(--spacing-6);
- height: var(--spacing-6);
- background: var(--grey-900);
- border-radius: 16px;
- }
+.header__logo {
+ grid-column: 1;
+ grid-row: 1;
+ justify-self: start;
+ width: var(--spacing-6);
+ height: var(--spacing-6);
+ background: var(--grey-900);
+ border-radius: 16px;
+}
- .header__title {
- grid-column: 2;
- grid-row: 1;
- justify-self: center;
- font-size: var(--font-size-7);
- font-weight: 900;
- text-align: center;
- }
+.header__title {
+ grid-column: 2;
+ grid-row: 1;
+ justify-self: center;
+ font-size: var(--font-size-7);
+ font-weight: 900;
+ text-align: center;
+}
- .header__social {
- grid-column: 3;
- grid-row: 1;
- justify-content: flex-end;
- }
+.header__social {
+ grid-column: 3;
+ grid-row: 1;
+ justify-content: flex-end;
+}
</style>
diff --git a/src/main.js b/src/main.js
@@ -2,12 +2,35 @@ import './assets/styles/app.css';
import Vue from 'vue';
import App from './App.vue';
+import upperFirst from 'lodash/upperFirst';
+import camelCase from 'lodash/camelCase';
import VueSocialSharing from 'vue-social-sharing';
Vue.use(VueSocialSharing);
Vue.config.productionTip = false;
+const requireComponent = require.context(
+ './components',
+ false,
+ /Base[A-Z]\w+\.(vue|js)$/
+);
+
+requireComponent.keys().forEach((fileName) => {
+ const componentConfig = requireComponent(fileName);
+
+ const componentName = upperFirst(
+ camelCase(
+ fileName
+ .split('/')
+ .pop()
+ .replace(/\.\w+$/, '')
+ )
+ );
+
+ Vue.component(componentName, componentConfig.default || componentConfig);
+});
+
new Vue({
render: (h) => h(App),
}).$mount('#app');
