A

Author: terry520go

examples/App.vue

@@ -1,29 +1,28 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+    <button class="button" v-ripple="'red'" >Ripple</button>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from './components/HelloWorld.vue';
 
-@Component({
-  components: {
-    HelloWorld,
-  },
-})
-export default class App extends Vue {}
+@Component
+export default class App extends Vue {
+  private opts: any = {
+    color: 'red',
+  }
+}
 </script>
 
 <style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+.button {
+  padding: 8px 16px;
+  background: #0077ff;
+  border: none;
+  color: #fff;
+  border-radius: 8px;
+  outline: 0;
+  cursor: pointer;
 }
 </style>

examples/components/HelloWorld.vue

@@ -1,7 +1,9 @@
 import Vue from 'vue';
 import App from './App.vue';
+import Ripple from '../packages/index';
 
 Vue.config.productionTip = false;
+Vue.use(Ripple);
 
 new Vue({
   render: h => h(App),

examples/main.ts

@@ -0,0 +1,28 @@
+import { DirectiveBinding } from 'vue/types/options.d';
+import { IRippleOpts } from 'types/index.d';
+
+export default class Directive {
+  static options: IRippleOpts = {
+    name: 'ripple',
+    event: 'mousedown',
+    transition: 600,
+    color: 'rgba(0, 0, 0, 0.15)',
+  };
+
+  public install(options: IRippleOpts) {
+    Directive.options = Object.assign({}, Directive.options, options);
+    return {
+      bind: (el: HTMLElement, bind: DirectiveBinding) => this.bind(el, bind),
+    };
+  }
+
+  bind(el: HTMLElement, bind: DirectiveBinding) {
+    if (bind.modifiers && bind.modifiers.click) {
+      Directive.options.event = 'click';
+    }
+    if (bind.modifiers && bind.modifiers.mousedown) {
+      Directive.options.event = 'mousedown';
+    }
+    if (bind.value) Directive.options.color = bind.value;
+  }
+}

packages/directive.ts

@@ -0,0 +1,11 @@
+import { Vue } from 'vue-property-decorator';
+import { IRippleOpts } from 'types/index.d';
+import Ripple from './directive';
+
+export default {
+  install(instance: typeof Vue, options: IRippleOpts) {
+    /* eslint-disable no-param-reassign */
+    options = options || { name: 'ripple' };
+    instance.directive(options.name, new Ripple().install(options));
+  },
+};

packages/index.ts

@@ -27,9 +27,12 @@
     ]
   },
   "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
+    "examples/**/*.ts",
+    "examples/**/*.tsx",
+    "examples/**/*.vue",
+    "packages/**/*.ts",
+    "packages/**/*.tsx",
+    "packages/**/*.vue",
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ],

tsconfig.json

@@ -0,0 +1,6 @@
+export interface IRippleOpts {
+  name: string,
+  event?: string,
+  transition?: number,
+  color?: string,
+}

types/index.d.ts

@@ -15,15 +15,7 @@ module.exports = {
   },
   chainWebpack: config => {
     config.resolve.alias
-      .set('~', path.resolve('packages'));
-    config.module
-      .rule('ts')
-      .include.add('/packages')
-      .end()
-      .use('bable')
-      .loader('bable-loader')
-      .tap(options => {
-        return options;
-      });
+      .set('~', path.resolve('packages'))
+      .set('types', path.resolve('types'));
   },
 }