v0.1.0

kimuraz · May 14, 2019 · f7cf9d9 · f7cf9d9
2 parents 9325286 + d894a71
commit f7cf9d9
Show file tree

Hide file tree

Showing 24 changed files with 10,668 additions and 221 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -0,0 +1,37 @@
+version: 2
+jobs:
+  lint:
+    docker:
+      - image: circleci/node:8.9.4
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run: yarn install
+      - run: yarn lint --no-fix 
+      - save_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - node_modules
+  build:
+    docker:
+      - image: circleci/node:8.9.4
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run: yarn install
+      - run: yarn build
+      - save_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - node_modules
+
+workflows:
+  version: 2
+  test:
+    jobs:
+      - lint
+  build:
+    jobs:
+      - build
diff --git a/.prettierrc.yml b/.prettierrc.yml
@@ -0,0 +1,4 @@
+singleQuote: true
+semit: true
+tabWidth: 2
+trailingComma: true
diff --git a/README.md b/README.md
@@ -2,41 +2,27 @@
 
 > A VueJS implementation of [InteractJS](http://interactjs.io)
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/0d134e46-98be-4533-a02f-fbf9e0358879/deploy-status)](https://app.netlify.com/sites/vue-interact/deploys)
+
+:book: [Checkout the documentation](https://vue-interact.netlify.com/)
+
 ## Build Setup
 
 ``` bash
-# install using NPM
 npm install vue-interact --save
-```
-
-## Using It
 
-You can import either the vue-interact JS file:
-```
-import VueInteract from 'vue-interact';
-```
-Or use the InteractPanel component in your project:
-```
-import InteractPanel from 'vue-interact';
-
-new Vue({
-  ...
-  components: {
-    iteractPanel: InteractPanel,
-    ...
-  },
-  ...
-});
+yarn add vue-interact
 ```
 
+
 ## Back-To-Work Plan
 
 - [ ] Contribuition directives
-- [ ] Separate properly InteractPanel
+- [X] Separate properly InteractPanel
 - [ ] Directive
 - [ ] Documentation
-- [ ] Change building process
-- [ ] CI Process
+- [X] Change building process
+- [X] CI Process
 
 > Any contribuition is welcome :arrow_up:
 

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -9,7 +9,7 @@ function resolve (dir) {
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './src/vue-interact/index.js'
   },
   output: {
     path: config.build.assetsRoot,
@@ -22,7 +22,7 @@ module.exports = {
     extensions: ['.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src')
+      '@': resolve('demo')
     }
   },
   module: {
@@ -31,7 +31,7 @@ module.exports = {
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         enforce: 'pre',
-        include: [resolve('src'), resolve('test')],
+        include: [resolve('demo'), resolve('test')],
         options: {
           formatter: require('eslint-friendly-formatter')
         }
@@ -44,7 +44,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test')]
+        include: [resolve('demo'), resolve('test')]
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
@@ -12,6 +12,9 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 })
 
 module.exports = merge(baseWebpackConfig, {
+  entry: {
+    app: './demo/main.js'
+  },
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
   },

diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
@@ -4,117 +4,14 @@ var webpack = require('webpack')
 var config = require('../config')
 var merge = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
-var CopyWebpackPlugin = require('copy-webpack-plugin')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 
 var env = config.build.env
 
-var webpackConfig = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true
-    })
-  },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
+module.exports = {
+  entry: './src/vue-interact/index.js',
   output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+    library: 'vue-interact',
+    libraryTarget: 'umd',
+    filename: './dist/vue-interact.bundle.js',
   },
-  plugins: [
-    // http://vuejs.github.io/vue-loader/en/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      sourceMap: true
-    }),
-    // extract css into its own file
-    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
-    }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
-    new OptimizeCSSPlugin({
-      cssProcessorOptions: {
-        safe: true
-      }
-    }),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: config.build.index,
-      template: 'index.html',
-      inject: true,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
-    }),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module, count) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      chunks: ['vendor']
-    }),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.build.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ]
-})
-
-if (config.build.productionGzip) {
-  var CompressionWebpackPlugin = require('compression-webpack-plugin')
-
-  webpackConfig.plugins.push(
-    new CompressionWebpackPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
-      ),
-      threshold: 10240,
-      minRatio: 0.8
-    })
-  )
-}
-
-if (config.build.bundleAnalyzerReport) {
-  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
-}
-
-module.exports = webpackConfig
+};
diff --git a/demo/App.vue b/demo/App.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="vue-interact">
+    <h2>Vue Interact Demo</h2>
+
+    <InteractPanel :class="['resizable', 'draggable']">
+      InteractPanel (I have all the mixins!)
+    </InteractPanel>
+
+
+    <DraggablePanel :lockAxis="lockDrag" class="draggable">
+      <p>Dragging Panel</p>
+      <p>Lock Axis control</p>
+      <div class="lock-drag">
+        <div v-for="val in ['x', 'y', 'xy']" :key="val">
+          <input v-model="lockDrag" type="radio" name="lockDrag" :value="val" />
+          {{ val }}
+        </div>
+      </div>
+    </DraggablePanel>
+
+    <ResizablePanel :edges="resizeEdges">
+      Resizable Panel
+      <div v-for="pos in Object.keys(resizeEdges)" :key="pos">
+        <input type="checkbox" v-model="resizeEdges[pos]" />
+        {{ pos }}
+      </div>
+    </ResizablePanel>
+  </div>
+</template>
+
+<script>
+import InteractPanel from '../src/components/InteractPanel';
+import ResizablePanel from '../src/components/ResizablePanel';
+import DraggablePanel from '../src/components/DraggablePanel';
+
+export default {
+  name: 'app',
+  components: {
+    InteractPanel,
+    ResizablePanel,
+    DraggablePanel,
+  },
+  data() {
+    return {
+      lockDrag: 'xy',
+      resizeEdges: {
+        top: true,
+        bottom: true,
+        left: true,
+        right: true,
+      },
+    };
+  },
+};
+</script>
+
+<style>
+.vue-interact {
+  font-family: sans-serif;
+  width: 100vw;
+  height: 100vh;
+}
+
+.draggable,
+.resizable {
+  background-color: #2299ee;
+  border-radius: 2px;
+  width: 200px;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.lock-drag {
+  display: flex;
+}
+</style>
diff --git a/demo/main.js b/demo/main.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import App from './App';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app');