initial commit

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Alexander Angelov (https://github.com/angelov-a)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,72 @@
+
+# Material Design Ripple for Vue
+
+A configurable directive-based Ripple effect for Vue.
+
+Notable features:
+
+* Ability to change options and turn on/off dynamically
+* Ripple resizes correctly if target size changes mid-effect
+* Unbounded option
+
+
+## Installation
+
+```
+npm install vue-ripplify --save
+```
+
+
+## Usage
+
+```javascript
+import VueRipplify from 'vue-ripplify'
+
+Vue.directive('ripple', VueRipplify)
+```
+```html
+<div v-ripple class="button">This button ripples</div>
+```
+
+
+## Options
+
+The directive can be configured by assigning an object with the following optional keys.
+
+| Key           | Type    | Default Value           | Description
+| :------------ | :------ | :---------------------- | :--------------------------------------------------------- |
+| `isDisabled`  | Boolean | `false`                 | Disables the ripple effect.                                |
+| `isUnbounded` | Boolean | `false`                 | Unbounded ripple variant for icons, action buttons, etc.   |
+| `duration`    | Number  | `250`                   | Effect duration in ms. Does not include fade time.         |
+| `color`       | String  | `'rgba(0, 0, 0, 0.26)'` | A CSS-valid color value. RGBA with low opacity recommended.|
+| `zIndex`      | Number  | `20`                    | Effect z-index.                                            |
+
+
+## Examples
+
+A custom colored ripple.
+```html
+<div v-ripple="{ color: 'rgba(44, 221, 0, .36)' }">Custom Ripple</div>
+```
+
+Variables can be used for dynamic control.
+vue-ripplify will reconfigure the effect when either of `this.isRippleDisabled` or `this.rippleColor` changes.
+```html
+<div v-ripple="{ isDisabled: isRippleDisabled, color: rippleColor }">Dynamically Configured Ripple</div>
+```
+
+
+## Global Options
+
+Setting default values can be done thus:
+
+```js
+import Ripplify from 'vue-ripplify'
+
+Ripplify.isUnbounded = false
+Ripplify.duration = 125
+Ripplify.color = 'rgba(255, 255, 255, 0.26)'
+Ripplify.zIndex = 150
+
+Vue.directive('ripple', Ripplify)
+```

build/rollup.config.js

@@ -0,0 +1,12 @@
+import { terser } from "rollup-plugin-terser"
+
+export default {
+    input: 'src/wrapper.js',
+
+    output: {
+        name: 'VueRipplify',
+        exports: 'named',
+    },
+
+    plugins: [terser()],
+}

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "vue-ripplify",
+  "version": "1.0.0",
+  "description": "A configurable directive-based Ripple effect for Vue",
+  "main": "dist/vue-ripplify.umd.js",
+  "module": "dist/vue-ripplify.esm.js",
+  "unpkg": "dist/vue-ripplify.min.js",
+  "scripts": {
+    "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
+    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-ripplify.umd.js",
+    "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-ripplify.esm.js",
+    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-ripplify.min.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/angelov-a/vue-ripplify.git"
+  },
+  "keywords": [
+    "vue",
+    "material design",
+    "ripple",
+    "directive"
+  ],
+  "author": "Alexander Angelov <[email protected]> (https://github.com/angelov-a)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angelov-a/vue-ripplify/issues"
+  },
+  "homepage": "https://github.com/angelov-a/vue-ripplify#readme",
+  "devDependencies": {
+    "rollup": "^0.67.3",
+    "rollup-plugin-terser": "^3.0.0"
+  }
+}