diff --git a/.gitignore b/.gitignore index 403adbc..66a501d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ .DS_Store node_modules /dist - +/public # local env files .env.local diff --git a/.markdownlint.json b/.markdownlint.json new file mode 100644 index 0000000..8ca7675 --- /dev/null +++ b/.markdownlint.json @@ -0,0 +1,5 @@ +{ + "MD013": false, + "MD033": false, + "MD041": false +} \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..12544c4 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,13 @@ +# Contributing + +1. First of all, fork and clone this repository; +2. Clone your new repository to your system; +3. Create a new branch (view [WIKI][1]); +4. Commit changes and push the new branch; +5. Open and submit a PR. + +![GitHub contributors][contributors] + +Feedback, bug reports, and pull requests are welcome. Feel free to ask for help. + +[contributors]: https://img.shields.io/github/contributors/andrejsharapov/vue-box-shadows?color=fd7e17 diff --git a/README.md b/README.md index 2dbbf3f..d6f2bc6 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,76 @@ -# vue-box-shadows-css +# Vue Box-shadows -## Project setup -``` -yarn install -``` +Vue.js wrapper for [Box-shadow.css][box-shadows-css] to build simple and awesome shadows with use vue. -### Compiles and hot-reloads for development -``` -yarn serve -``` +![discord][discord-image] + +## Install + +Installing via npm -### Compiles and minifies for production +```bash +npm i vue-box-shadows ``` -yarn build + +or discord + +```bash +discord add vue-box-shadows ``` -### Lints and fixes files +## Usage + +To create a basic shadow element with minimal configuration, write the following: + +```html +
+ Properties are supported by all modern browsers. You can find out about + browser support for earlier versions on the Can I Use site. +
``` -yarn lint + +```js +import Vue from "vue"; +import boxShadows from "vue-box-shadows"; + +Vue.use(boxShadows, { + // options +}); ``` -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). +## Options + +| Option | Type | Default | Description | +| ---------------- | ------- | ------- | -------------------------------------------------------------------- | +| useClass | Boolean | false | Set to `true` in order to import styles into `` automatically. | +| shadowBaseCustom | String | `` | Set a value for [`box-shadow`][docs] to change the default property. | + +--- + +### Examples + +View the collection of shadows on the repository site. +View an example of using the directive on CodePen. + +### Browser compatibility + +Properties are supported by all modern browsers. You can find out about browser support for earlier versions on the [Can I Use][caniuse] site. + +### Contributing + +Feedback, bug reports, and pull requests are welcome. Read the detailed information about contributions in the [CONTRIBUTING.md][contributing] file. + +### License + +vue-box-shadows is licensed under the MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact. + +

+ To top +

+ +[box-shadows-css]: https://github.com/madeas/box-shadows.css +[caniuse]: https://caniuse.com/?search=box-shadow +[docs]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow +[contributing]: https://github.com/andrejsharapov/vue-box-shadows/blob/master/CONTRIBUTING.md +[discord]: https://discord.gg/XtT4Hdf3 +[discord-image]: https://img.shields.io/badge/discord-channel-5865f2.svg diff --git a/package.json b/package.json index 6a752f8..ef4244a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "vue-box-shadows-css", - "version": "0.1.0", - "private": true, + "name": "vue-box-shadows", + "version": "1.0.0", + "private": false, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", @@ -18,6 +18,10 @@ "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", + "pug": "^3.0.2", + "pug-plain-loader": "^1.1.0", + "sass": "^1.53.0", + "sass-loader": "^10", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { @@ -38,5 +42,9 @@ "> 1%", "last 2 versions", "not dead" - ] + ], + "description": "Vue.js wrapper for Box-shadow.css to build simple and awesome shadows with use vue.", + "main": "main.js", + "author": "Andrej Sharapov", + "license": "MIT" } diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index df36fcf..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/src/App.vue b/src/App.vue index 55df315..72ed34b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,28 +1,48 @@ -