openatc-components 0.0.1

package/build/webpack.prod.conf.js

@@ -0,0 +1,149 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { 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: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : 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'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // 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',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const 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) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

package/config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

package/config/index.js

@@ -0,0 +1,76 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8099, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

package/config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

package/config/test.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})

package/index.html

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

package/package/kisscomps/components/CircleMenu/KissCircleMenu.vue

@@ -0,0 +1,398 @@
+<template>
+  <div class='quick-menu' ref='quickMenu' :style='quickMenuStyle'>
+    <div v-for='(n,key) in menuCount' class='sub-menu' :style='getSubMenu(n-1)' :key='key'>
+        <router-link v-if='menuUrlList[n-1].isLink' :to='menuUrlList[n-1].url' :target='openNewTab' :style='subMenuStyle' @mouseover.stop='mouseEnterSubMenu' @mouseout.stop='mouseOutSubMenu'>
+          <i :class='iconClass[n-1]' ref='icon'></i>
+        </router-link>
+        <a v-else :style='subMenuStyle' @mouseover.stop='mouseEnterSubMenu' @mouseout.stop='mouseOutSubMenu' @click='processCallback(key)'>
+          <i :class='iconClass[n-1]' ref='icon'></i>
+        </a>
+      </div>
+      <div class='menu' :style='menuStyle'>
+        <div class='core-menu' @click='toggleMenu'>
+          <div class='bar'></div>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+export default{
+  name: 'kiss-circle-menu',
+  props: {
+    menuCount: {
+      type: Number,
+      required: true,
+      default: 4
+    },
+    iconClass: {
+      type: Array,
+      required: true
+    },
+    menuUrlList: {
+      type: Array,
+      required: true
+    },
+    backgroundColor: {
+      type: String,
+      default: '#20babb'
+    },
+    color: {
+      type: String,
+      default: '#fff'
+    },
+    isOpenNewTab: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: String,
+      default: 'top-left'
+    }
+  },
+  computed: {
+    openNewTab () {
+      return this.isOpenNewTab ? '_blank' : '_self'
+    },
+    quickMenuStyle () {
+      const topPosition = { top: '30px' }
+      const bottomPosition = { bottom: '30px' }
+      const leftPosition = { left: '30px' }
+      const rightPosition = { right: '30px' }
+      let style = this.isTop ? topPosition : bottomPosition
+      Object.assign(style, this.isLeft ? leftPosition : rightPosition)
+      Object.assign(style, {transform: this.isLeft ? 'rotate(-180deg)' : 'rotate(180deg)'})
+      return style
+    },
+    menuStyle () {
+      return {
+        backgroundColor: this.backgroundColor,
+        color: this.color
+      }
+    },
+    subMenuStyle () {
+      const style = {
+        backgroundColor: this.backgroundColor,
+        color: this.color
+      }
+      return style
+    },
+
+    isTop () {
+      return !!~this.position.toLowerCase().indexOf('top')
+    },
+    isLeft () {
+      return !!~this.position.toLowerCase().indexOf('left')
+    }
+  },
+  data () {
+    return {
+      menuSize: 60,
+      subMenu4: [[['0', '-160'], ['-80', '-138.6'], ['-138.6', '-80'], ['-160', '0']], [['0', '-160'], ['80', '-138.6'], ['138.6', '-80'], ['160', '0']], [['0', '160'], ['138.6', '80'], ['80', '138.6'], ['160', '0']], [['-160', '0'], ['-138.6', '80'], ['-80', '138.6'], ['0', '160']]],
+      subMenu3: [[['-160', '0'], ['-113', '-113'], ['0', '-160']], [['0', '-160'], ['113', '-113'], ['160', '0']], [['0', '160'], ['113', '113'], ['160', '0']], [['-160', '0'], ['-113', '113'], ['0', '160']]],
+      subMenu2: [[['-160', '0'], ['0', '-160']], [['0', '-160'], ['160', '0']], [['0', '160'], ['160', '0']], [['-160', '0'], ['0', '160']]]
+    }
+  },
+  methods: {
+    getSubMenu (n) {
+      let menuPosition = this.menuCount === 4 ? this.subMenu4 : this.menuCount === 3 ? this.subMenu3 : this.subMenu2
+      menuPosition = this.isTop && this.isLeft ? menuPosition[2] : this.isTop && !this.isLeft ? menuPosition[1] : !this.isTop && this.isLeft ? menuPosition[3] : menuPosition[0]
+      return {
+        top: menuPosition[n][0] + 'px', left: menuPosition[n][1] + 'px'
+      }
+    },
+    toggleMenu (e) {
+      let menuEl = this.$refs.quickMenu
+      let menuIconEl = this.$refs.icon
+      if (!~menuEl.className.indexOf(' active')) {
+        menuEl.className += ' active'
+        menuIconEl.forEach(function (element, index) {
+          element.className += ' menu-animate'
+        })
+      } else {
+        menuEl.className = menuEl.className.replace(' active', '')
+        menuIconEl.forEach(function (element, index) {
+          element.className = element.className.replace(' menu-animate', '')
+        })
+      }
+    },
+    processCallback (key) {
+      console.log(key)
+      this.$emit('process', key)
+    },
+    mouseEnterSubMenu (e) {
+      if (e.target.tagName === 'A') {
+        e.target.style.backgroundColor = this.lightenColor(this.backgroundColor, 20)
+        // e.target.firstElementChild.style.backgroundColor = this.lightenColor(this.backgroundColor, 20)
+      } else if (e.target.tagName === 'I') {
+        e.target.parentElement.style.backgroundColor = this.lightenColor(this.backgroundColor, 20)
+        // e.target.style.backgroundColor = this.lightenColor(this.backgroundColor, 20)
+      }
+    },
+    mouseOutSubMenu (e) {
+      if (e.target.tagName === 'A') {
+        e.target.style.backgroundColor = this.backgroundColor
+        // e.target.firstElementChild.style.backgroundColor = this.backgroundColor
+      } else if (e.target.tagName === 'I') {
+        e.target.parentElement.style.backgroundColor = this.backgroundColor
+        // e.target.style.backgroundColor = this.backgroundColor
+      }
+    },
+    lightenColor (hex, amt) {
+      var usePound = false
+      if (hex[0] === '#') {
+        hex = hex.slice(1)
+        usePound = true
+      }
+      var num = parseInt(hex, 16)
+      var r = (num >> 16) + amt
+
+      if (r > 255) r = 255
+      else if (r < 0) r = 0
+
+      var b = ((num >> 8) & 0x00FF) + amt
+      if (b > 255) b = 255
+      else if (b < 0) b = 0
+
+      var g = (num & 0x0000FF) + amt
+      if (g > 255) g = 255
+      else if (g < 0) g = 0
+      return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
+    }
+  }
+}
+</script>
+<style lang='less'>
+.menu-animate {
+  -webkit-animation: bounce 1s linear 1s;
+  -moz-animation: bounce 1s linear 1s;
+  animation: bounce 1s linear 1s;
+}
+
+.quick-menu {
+  color: #fff;
+  position: fixed;
+  width: 60px;
+  height: 60px;
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  transition: all 1s ease;
+  right: 30px;
+  > .menu {
+    display: block;
+    position: absolute;
+    border-radius: 50% !important;
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
+    color: #fff;
+    -webkit-transition: all 1s ease;
+    -moz-transition: all 1s ease;
+    transition: all 1s ease;
+    .core-menu {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      width: 60px;
+      height: 60px;
+      -webkit-transform: rotate(180deg);
+      -moz-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+      -o-transform: rotate(180deg);
+      transform: rotate(180deg);
+      -webkit-transition: all 1s ease;
+      -moz-transition: all 1s ease;
+      transition: all 1s ease;
+      .bar {
+        -webkit-transition: all 1s ease;
+        -moz-transition: all 1s ease;
+        transition: all 1s ease;
+        width: 28px;
+        height: 3px;
+        background: #fff;
+        position: absolute;
+        top: 35%;
+        margin-top: -1.5px;
+        left: 16px;
+        -webkit-transform-origin: 0% 50%;
+        -moz-transform-origin: 0% 50%;
+        -ms-transform-origin: 0% 50%;
+        -o-transform-origin: 0% 50%;
+        transform-origin: 0% 50%;
+        &:before ,&:after{
+          -webkit-transition: all 1s ease;
+          -moz-transition: all 1s ease;
+          transition: all 1s ease;
+          content: '';
+          width: 28px;
+          height: 3px;
+          background: #fff;
+          position: absolute;
+          left: 0px;
+          -webkit-transform-origin: 0% 50%;
+          -moz-transform-origin: 0% 50%;
+          -ms-transform-origin: 0% 50%;
+          -o-transform-origin: 0% 50%;
+          transform-origin: 0% 50%;
+        }
+        &:before{
+          margin-top: 30%;
+        }
+        &:after {
+          margin-top: 60%;
+        }
+      }
+    }
+  }
+  .sub-menu{
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    font-size: 30px;
+    text-align: center;
+    border-radius: 50% !important;
+    a{
+      outline: none;
+      text-decoration: none;
+      display: inline-block;
+      border-radius: 50% !important;
+      width: 100%;
+      height: 100%;
+      i {
+        outline: none;
+        font-size:30px;
+        margin-top:12px;
+        background:transparent;
+        &:before{
+          vertical-align: middle;
+        }
+      }
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  &.active{
+    -webkit-transform: rotate(0deg)!important;
+      -moz-transform: rotate(0deg)!important;
+      -ms-transform: rotate(0deg)!important;
+      -o-transform: rotate(0deg)!important;
+      transform: rotate(0deg)!important;
+      .menu{
+        -webkit-transform: scale(0.7);
+        -moz-transform: scale(0.7);
+        -ms-transform: scale(0.7);
+        -o-transform: scale(0.7);
+        transform: scale(0.7);
+        .bar {
+          top: 50%;
+          margin-top: -1.5px;
+          left: 50%;
+          margin-left: -12px;
+          -webkit-transform-origin: 50% 50%;
+          -moz-transform-origin: 50% 50%;
+          -ms-transform-origin: 50% 50%;
+          -o-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+          -webkit-transform: rotate(405deg);
+          -moz-transform: rotate(405deg);
+          -ms-transform: rotate(405deg);
+          -o-transform: rotate(405deg);
+          transform: rotate(405deg);
+              &:before {
+                -webkit-transform-origin: 50% 50%;
+                -moz-transform-origin: 50% 50%;
+                -ms-transform-origin: 50% 50%;
+                -o-transform-origin: 50% 50%;
+                transform-origin: 50% 50%;
+                -webkit-transform: rotate(-450deg);
+                -moz-transform: rotate(-450deg);
+                -ms-transform: rotate(-450deg);
+                -o-transform: rotate(-450deg);
+                transform: rotate(-450deg);
+                margin-top: 0px;
+              }
+          &:after{
+            opacity: 0;
+          }
+        }
+      }
+    }
+}
+@-webkit-keyframes bounce {
+  0%,100% {
+    -webkit-transform: translateY(0px);
+  }
+  10% {
+    -webkit-transform: translateY(6px);
+  }
+  30% {
+    -webkit-transform: translateY(-4px);
+  }
+  70% {
+    -webkit-transform: translateY(3px);
+  }
+  90% {
+    -webkit-transform: translateY(-2px);
+  }
+}
+@-moz-keyframes bounce {
+  0%,100% {
+    -moz-transform: translateY(0px);
+  }
+  10% {
+    -moz-transform: translateY(6px);
+  }
+  30% {
+    -moz-transform: translateY(-4px);
+  }
+  70% {
+    -moz-transform: translateY(3px);
+  }
+  90% {
+    -moz-transform: translateY(-2px);
+  }
+}
+@keyframes bounce {
+  0%,100% {
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+  10% {
+    -webkit-transform: translateY(6px);
+    -moz-transform: translateY(6px);
+    -ms-transform: translateY(6px);
+    -o-transform: translateY(6px);
+    transform: translateY(6px);
+  }
+  30% {
+    -webkit-transform: translateY(-4px);
+    -moz-transform: translateY(-4px);
+    -ms-transform: translateY(-4px);
+    -o-transform: translateY(-4px);
+    transform: translateY(-4px);
+  }
+  70% {
+    -webkit-transform: translateY(3px);
+    -moz-transform: translateY(3px);
+    -ms-transform: translateY(3px);
+    -o-transform: translateY(3px);
+    transform: translateY(3px);
+  }
+  90% {
+    -webkit-transform: translateY(-2px);
+    -moz-transform: translateY(-2px);
+    -ms-transform: translateY(-2px);
+    -o-transform: translateY(-2px);
+    transform: translateY(-2px);
+  }
+}
+</style>

package/package/kisscomps/components/CircleMenu/index.js

@@ -0,0 +1,2 @@
+import CircleMenu from './KissCircleMenu.vue'
+export default CircleMenu