try it out

Author: jikkai

Diff for: .babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["es2015", "stage-0", "stage-2"],
+  "comments": false,
+  "env": {
+    "production": {
+      "plugins": [
+        ["transform-runtime", { "polyfill": false, "regenerator": false }]
+      ]
+    }
+  }
+}

Diff for: .eslintignore

@@ -0,0 +1,2 @@
+node_modules/**
+lib/**

Diff for: .eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    sourceType: 'module',
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true
+    }
+  },
+  env: {
+    browser: true,
+    node: true
+  },
+  extends: 'standard',
+  plugins: [
+    'html'
+  ],
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

Diff for: .gitignore

@@ -0,0 +1,10 @@
+*.log
+.cache
+.DS_Store
+.idea
+.xml
+build
+dist
+node_modules
+.gitkeep
+converage

Diff for: Makefile

@@ -0,0 +1,13 @@
+.PHONY: dist test
+
+dev:
+	@npm run dev
+
+dist:
+	@npm run dist
+
+deploy:
+	@npm run deploy
+
+test:
+	@npm test

Diff for: README.md

@@ -0,0 +1 @@
+# GSR Skillbar

Diff for: cooking.build.js

@@ -0,0 +1,29 @@
+var cooking = require('cooking')
+
+cooking.set({
+  entry: './src/index.js',
+  dist: './lib',
+  clean: false,
+  format: 'cjs',
+  extends: ['vue2'],
+  minimize: true,
+  postcss: [
+    require('postcss-salad')({
+      browsers: ['ie > 8', 'last 2 versions'],
+      features: {
+        bem: {
+          shortcuts: { component: 'c', modifier: 'm', descendent: 'd' },
+          separators: { modifier: '--', descendent: '__' }
+        }
+      }
+    })
+  ],
+  externals: {
+    vue: 'vue'
+  },
+  extractCSS: 'gsr-skillbar.css'
+})
+
+cooking.add('output.filename', 'gsr-skillbar.js')
+
+module.exports = cooking.resolve()

Diff for: cooking.conf.js

@@ -0,0 +1,33 @@
+var cooking = require('cooking')
+
+cooking.set({
+  entry: {
+    app: ['./example/main.js']
+  },
+  dist: './dist',
+  template: './example/index.tpl',
+
+  devServer: {
+    port: 8095,
+    publicPath: '/',
+    log: false
+  },
+
+  postcss: [
+    require('postcss-salad')()
+  ],
+
+  // production
+  clean: true,
+  hash: true,
+  sourceMap: true,
+  minimize: true,
+  chunk: true,
+  publicPath: '/lib/',
+  assetsPath: 'static',
+  urlLoaderLimit: 10000,
+  extractCSS: '[name].[contenthash:7].css',
+  extends: ['vue2', 'lint']
+})
+
+module.exports = cooking.resolve()

Diff for: example/app.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="example-container">
+    <div class="example-item">
+      <label>XG~GD</label>
+      <gsr-skillbar :items="itemsA" />
+    </div>
+    <div class="example-item">
+      <label>V</label>
+      <gsr-skillbar :items="itemsB" />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        itemsA: [
+          ['#FFFFFF', '#FFFFFF'],
+          ['#FFFF99', '#FFFF99'],
+          ['#FFFF99', '#FFFFFF'],
+          ['#FFFF00', '#FFFF00'],
+          ['#FFFF00', '#FFFFFF'],
+          ['#33FF00', '#33FF00'],
+          ['#33FF00', '#FFFFFF'],
+          ['#3366FF', '#3366FF'],
+          ['#3366FF', '#FFFFFF'],
+          ['#FF00FF', '#FF00FF'],
+          ['#FF00FF', '#FFFFFF'],
+          ['#FF0000', '#FF0000'],
+          ['#FF0000', '#FFFFFF'],
+          ['#DD8844', '#DD8844'],
+          ['silver', 'silver'],
+          ['#FFD700', '#FFD700']
+        ],
+        itemsB: [
+          ['#808080', '#808080'],
+          ['#FF8080', '#FF8080'],
+          ['#FF00FF', '#FF00FF'],
+          ['#80C0FF', '#80C0FF'],
+          ['#00FFFF', '#00FFFF'],
+          ['#00FF00', '#00FF00'],
+          ['#FFFF00', '#FFFF00'],
+          ['#FFC000', '#FFC000'],
+          ['#FF0000', '#FF0000'],
+          ['#C0C0C0', '#C0C0C0'],
+          ['#FF8000', '#FF8000']
+        ]
+      }
+    }
+  }
+</script>
+
+<style>
+  @reset-global pc;
+
+  html, body {
+    size: 100%;
+    display: flex;
+    align-items: center;
+  }
+  
+  @component-namespace example {
+    @c container {
+      size: 100% 120px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    @c item {
+      size: 50% 64px;
+      margin: auto;
+      display: flex;
+      align-items: center;
+
+      & label {
+        width: 5rem;
+        display: block;
+      }
+    }
+  }
+</style>

Diff for: example/index.tpl

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title>gsr skillbar</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

Diff for: example/main.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './app.vue'
+import GSRSkillbar from '../src'
+
+Vue.use(GSRSkillbar)
+
+new Vue({ // eslint-disable-line
+  el: '#app',
+  render: h => h(App)
+})