codex-team · ilyamore88 · Nov 4, 2019 · Nov 4, 2019 · Nov 4, 2019 · Nov 6, 2019
diff --git a/example/.eslintrc.js b/example/.eslintrc.js
@@ -3,10 +3,11 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
+  extends: [
     'plugin:vue/essential',
     'eslint:recommended',
-    '@vue/typescript'
+    '@vue/typescript',
+    'codex'
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -15,4 +16,4 @@ module.exports = {
   parserOptions: {
     parser: '@typescript-eslint/parser'
   }
-}
+};
diff --git a/example/babel.config.js b/example/babel.config.js
@@ -2,4 +2,4 @@ module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
   ]
-}
+};
diff --git a/example/package.json b/example/package.json
@@ -9,9 +9,11 @@
   },
   "dependencies": {
     "core-js": "^3.3.2",
+    "postcss-nested": "^4.1.2",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
-    "vue-property-decorator": "^8.3.0"
+    "vue-property-decorator": "^8.3.0",
+    "vue-unique-id": "^2.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",
@@ -20,6 +22,7 @@
     "@vue/cli-service": "^4.0.0",
     "@vue/eslint-config-typescript": "^4.0.0",
     "eslint": "^5.16.0",
+    "eslint-config-codex": "github:codex-team/eslint-config",
     "eslint-plugin-vue": "^5.0.0",
     "typescript": "~3.5.3",
     "vue-template-compiler": "^2.6.10"

diff --git a/example/postcss.config.js b/example/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    'postcss-nested': {},
     autoprefixer: {}
   }
-}
+};
diff --git a/example/public/index.html b/example/public/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>CodeX.Music Demo</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
   </head>
   <body>
     <noscript>

diff --git a/example/src/App.vue b/example/src/App.vue
@@ -1,30 +1,32 @@
 <template>
   <div id="app">
-    Demo application for Codex.Music
-    <button @click="play()">Play</button>
-    <button @click="stop()">Stop</button>
+    <Home></Home>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import ChilloutMusic from '../../src/index';
+import Home from './views/Home.vue';
 
 @Component({
-  components: {},
-})
-export default class App extends Vue {
-  chilloutmusic = new ChilloutMusic();
-
-  play() {
-    this.chilloutmusic.play();
+  components: {
+    Home
   }
+})
 
-  stop() {
-    this.chilloutmusic.stop();
-  }
-}
+/**
+ * Root app view
+ */
+export default class App extends Vue {}
 </script>
 
+<style src="./styles/base.css"></style>
+
 <style>
+  #app {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow: hidden;
+  }
 </style>
diff --git a/example/src/components/Player.vue b/example/src/components/Player.vue
@@ -0,0 +1,180 @@
+<template>
+  <tr class="player">
+    <td>
+      <button class="player__button">
+        <div class="player__button-icon"></div>
+        <span>Play</span>
+      </button>
+    </td>
+    <td>
+      <select class="player__select">
+        <option>
+          Trumpet
+        </option>
+        <option>
+          Bass
+        </option>
+      </select>
+    </td>
+    <td>
+      <input class="player__input"
+        type="text"
+      >
+    </td>
+    <td>
+      <input class="player__input"
+        type="text"
+      >
+    </td>
+    <td>
+      <select class="player__select">
+        <option>
+          Chorus
+        </option>
+        <option>
+          Echo
+        </option>
+        <option>
+          None
+        </option>
+      </select>
+    </td>
+    <td>
+      <input
+        :id="$id('effect-gain')"
+        type="range"
+        min="0"
+        max="10"
+        step="0.01"
+        class="player__range"
+      >
+      <label
+        :for="$id('effect-gain')"
+        class="player__label"
+      >
+        4.53
+      </label>
+    </td>
+    <td>
+      <input
+        :id="$id('track-volume')"
+        type="range"
+        min="0"
+        max="10"
+        step="0.5"
+        class="player__range"
+      >
+      <label
+        :for="$id('track-volume')"
+        class="player__label"
+      >
+        9.00
+      </label>
+    </td>
+  </tr>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({
+  components: {
+  }
+})
+
+/**
+ * Player component
+ */
+export default class Player extends Vue {
+}
+</script>
+
+<style>
+  .player {
+    height: 62px;
+    border-bottom: 1px solid var(--color-border-table);
+    &__button {
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--color-border-element);
+      border-radius: 3px;
+      color: var(--color-text-main);
+      background: var(--color-bg-element);
+      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
+      padding: 8px 15px;
+      font-weight: 500;
+      font-size: 14px;
+      height: 32px;
+      box-sizing: border-box;
+
+      &-icon {
+        display: inline-block;
+        float: left;
+        background-image: url(../images/icons/triangle.svg);
+        height: 10px;
+        width: 6px;
+        margin-right: 10px;
+      }
+    }
+
+    &__input {
+      box-sizing: border-box;
+      height: 32px;
+      border: 1px solid var(--color-border-element);
+      border-radius: 3px;
+      background: var(--color-bg-element);
+      color: var(--color-text-main);
+      font-weight: 500;
+      font-size: 14px;
+      padding: 8px 10px;
+    }
+
+    &__range {
+      -webkit-appearance: none;
+      width: 100px;
+      background: transparent;
+      margin-right: 15px;
+
+      /** Thumb */
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        height: 17px;
+        width: 17px;
+        border-radius: 50%;
+        background: var(--color-bg-range-thumb);
+        cursor: pointer;
+        margin-top: -6px;
+      }
+
+      &::-moz-range-thumb {
+        height: 17px;
+        width: 17px;
+        border-radius: 50%;
+        background: var(--color-bg-range-thumb);
+        cursor: pointer;
+      }
+
+      /** Track */
+      &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 5px;
+        cursor: pointer;
+        background: var(--color-bg-range-track);
+        border-radius: 3px;
+      }
+
+      &::-moz-range-track {
+        width: 100%;
+        height: 5px;
+        cursor: pointer;
+        background: var(--color-bg-range-track);
+        border-radius: 3px;
+      }
+    }
+
+    &__label {
+      font-size: 14px;
+      color: var(--color-bg-label);
+    }
+  }
+</style>
diff --git a/example/src/images/icons/triangle.svg b/example/src/images/icons/triangle.svg
diff --git a/example/src/main.ts b/example/src/main.ts
@@ -1,8 +1,11 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from 'vue';
+import App from './App.vue';
+import uniqueId from 'vue-unique-id';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+
+Vue.use(uniqueId);
 
 new Vue({
-  render: h => h(App),
-}).$mount('#app')
+  render: h => h(App)
+}).$mount('#app');
diff --git a/example/src/shims-vue.d.ts b/example/src/shims-vue.d.ts
@@ -1,4 +1,4 @@
 declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
+  import Vue from 'vue';
+  export default Vue;
 }
diff --git a/example/src/styles/base.css b/example/src/styles/base.css
@@ -0,0 +1,26 @@
+@import "variables.css";
+
+/**
+ * Base site styles
+ */
+html,body {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  min-height: 100%;
+  overflow: hidden;
+  color: var(--color-text-main);
+  background: var(--color-bg-main);
+  font-size: 15px;
+  font-family: Roboto, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
diff --git a/example/src/styles/variables.css b/example/src/styles/variables.css
@@ -0,0 +1,16 @@
+:root {
+  /** Fonts */
+  --color-text-main: #102a24;
+  --color-text-second: #667C7C;
+
+  /** Backgrounds */
+  --color-bg-main: #E7F8FF;
+  --color-bg-element: #ecfff6;
+  --color-bg-range-thumb: #23cba3;
+  --color-bg-range-track: rgba(16, 42, 36, 0.6);
+  --color-bg-label: rgba(16, 42, 36, 0.6);
+
+  /** Borders */
+  --color-border-element: #cbe9d7;
+  --color-border-table: #cbe9d7;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,4 @@ module.exports = { @@
       presets: [
         '@vue/cli-plugin-babel/preset'
       ]
-    }
+    };