Skip to content

Commit

Permalink
Merge pull request #19 from andrejsharapov/develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrejsharapov
andrejsharapov authored Sep 11, 2022
2 parents d70be1a + a6b19ea commit 26fbd38
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 111 deletions.
174 changes: 82 additions & 92 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Vue Box-shadows

Collection of CSS box-shadows for every taste contains [more than 100](#groups) simple, beautiful and airy shadows. Add beautiful shadow effects to your Vue project without thinking about CSS. Some shadows are borrowed from the collection of [box-shadow.css][bsh-repo].
Collection of CSS box-shadows for every taste contains [more than 100](#groups) simple, beautiful and airy shadows. Add beautiful shadow effects to your Vue project without thinking about CSS.

---

Expand Down Expand Up @@ -55,68 +55,77 @@ $ yarn add vue-box-shadows

To create a basic shadow element with minimal configuration, write the following:

[Vue CLI](#vue-cli) | [Nuxt](#nuxtjs-global-registration)

### Vue CLI

```html
<div v-box-shadow>
Add beautiful shadow effects to your project without thinking about CSS.
Properties are supported by all modern browsers.
</div>
```

```js
import Vue from "vue";
import vueBoxShadows from "vue-box-shadows";

Vue.use(vueBoxShadows, {
// options
});
```

### Nuxt.js: Global Registration

Create plugin _/plugins/vue-box-shadows.js_

```js
import Vue from "vue";
import vueBoxShadows from "vue-box-shadows";

Vue.use(vueBoxShadows);
```

Add to _nuxt.config.js_
<script>
import Vue from "vue";
import vueBoxShadows from "vue-box-shadows";
```js
export default {
plugins: [{ src: "~/plugins/vue-box-shadows" }],
};
```
Vue.use(vueBoxShadows, {
// options
});
Usage in _index.vue_
export default {};
</script>

```js
<template>
<div
v-for="(item, index) in items"
:key="index"
v-box-shadow="item"
>
{{ item }}
</div>
<div v-box-shadow>
Add beautiful shadow effects to your project without thinking about CSS.
Properties are supported by all modern browsers.
</div>
</template>
```

To use collection shadows, you need to apply **Id** and short **names** in the [groups](#groups) table. Note that they are used in different ways:

```html
<script>
export default {
data: () => ({
items: [2, 4, 2],
}),
};
</script>

<template>
<!-- use name -->
<div v-box-shadow:neu-2></div>

<!-- or -->

<!-- use id -->
<div v-box-shadow="34"></div>

<!-- use shadow ids in a loop -->
<div v-for="(item, index) in items" :key="index" v-box-shadow="item">
{{ item }}
</div>
</template>
```

[![Edit Vue Box-shadows, Nuxt2 and TailwindCSS](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-box-shadows-nuxt2-and-tailwindcss-db9968?fontsize=14&hidenavigation=1&theme=dark)
## Groups

The entire list of shadows can be viewed **[here][1.0.4]** or separately in the table below.

| Group | Id | Names ($ is value/number) | Values | Examples |
| ------------------- | :-----: | ---------------------------------- | :----: | :------------: |
| None | 0 | `none` | 1 | --- |
| Elevation | 1-24 | `el-$` | 1-24 | [View][ex-el] |
| Borders | 25-30 | `bd-$` | 1-6 | [View][ex-bd] |
| Neumorphism | 31-39 | `neu-$` or `neu-$-i` or `neu-$-io` | 1-3 | [View][ex-neu] |
| Axis x | 40-45 | `ax-$` | 1-6 | [View][ex-ax] |
| Axis y | 46-51 | `ay-$` | 1-6 | [View][ex-ay] |
| Small inner side | 52-55 | `si-$` | 1-4 | [View][ex-si] |
| Medium inner side | 56-59 | `mi-$` | 1-4 | [View][ex-mi] |
| Large inner side | 60-63 | `li-$` | 1-4 | [View][ex-li] |
| Top | 64-69 | `t-$` | 1-6 | [View][ex-t] |
| Bottom | 70-75 | `b-$` | 1-6 | [View][ex-b] |
| Right side | 76-81 | `r-$` | 1-6 | [View][ex-r] |
| Left side | 82-87 | `l-$` | 1-6 | [View][ex-l] |
| Angle: top left | 88-93 | `tl-$` | 1-6 | [View][ex-tl] |
| Angle: top right | 94-99 | `tr-$` | 1-6 | [View][ex-tr] |
| Angle: bottom right | 100-105 | `br-$` | 1-6 | [View][ex-br] |
| Angle: bottom left | 106-111 | `bl-$` | 1-6 | [View][ex-bl] |
| Patterns | 112-115 | `p-$` | 1-2 | --- |

## Options

Expand All @@ -125,38 +134,6 @@ Usage in _index.vue_
| useClass | Boolean | false | Set to `true` in order to import styles into `<head>` automatically. |
| shadowBaseCustom | String | "0 2px 8px 0 rgb(50 50 50 / 8%)" | Set a value for [`box-shadow`][docs] to change the default property. |

---

## Groups

In release v1.0.4, shadows have been grouped and sorted.
You can [see the entire list of shadows][1.0.4] in the table below.

| Group | Name ($ is value/number) | Values | Shadow id's | Examples |
| ------------------- | ---------------------------------- | :----: | :---------: | :------------: |
| None | `none` | 1 | 0 | --- |
| Elevation | `el-$` | 1-24 | 1-24 | [View][ex-el] |
| Borders | `bd-$` | 1-6 | 25-30 | [View][ex-bd] |
| Neumorphism | `neu-$` or `neu-$-i` or `neu-$-io` | 1-3 | 31-39 | [View][ex-neu] |
| Axis x | `ax-$` | 1-6 | 40-45 | [View][ex-ax] |
| Axis y | `ay-$` | 1-6 | 46-51 | [View][ex-ay] |
| Small inner side | `si-$` | 1-4 | 52-55 | [View][ex-si] |
| Medium inner side | `mi-$` | 1-4 | 56-59 | [View][ex-mi] |
| Large inner side | `li-$` | 1-4 | 60-63 | [View][ex-li] |
| Top | `t-$` | 1-6 | 64-69 | [View][ex-t] |
| Bottom | `b-$` | 1-6 | 70-75 | [View][ex-b] |
| Right side | `r-$` | 1-6 | 76-81 | [View][ex-r] |
| Left side | `l-$` | 1-6 | 82-87 | [View][ex-l] |
| Angle: top left | `tl-$` | 1-6 | 88-93 | [View][ex-tl] |
| Angle: top right | `tr-$` | 1-6 | 94-99 | [View][ex-tr] |
| Angle: bottom right | `br-$` | 1-6 | 100-105 | [View][ex-br] |
| Angle: bottom left | `bl-$` | 1-6 | 106-111 | [View][ex-bl] |
| Patterns | `p-$` | 1-2 | 112-115 | View |

> **Warning** `Names don't work`
> In the v2.0.0 release, you will be able to use these names in the directive instead of numbers.
> **They are currently unavailable.**
### 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.
Expand All @@ -165,7 +142,7 @@ Properties are supported by all modern browsers. You can find out about browser

Feedback, bug reports, and pull requests are welcome. Read the detailed information about contributions in the [CONTRIBUTING.md][contributing] file.

> **Note** `Bug reporting`
> **Note** `Bug reporting`
> If you find a bug and would like to [report it][bug-report], please make sure the request is not on the [list of known issues][bugs].
## License
Expand All @@ -174,48 +151,57 @@ vue-box-shadows is licensed under the MIT license. You are free to use, modify a

---

[Installing](#install) · [Usage](#how-to-use) · [Options](#options) · [Groups](#groups)
[Installing](#install) · [Usage](#how-to-use) · [Groups](#groups) · [Options](#options)

<p align="right">
<a href="#vue-box-shadows">Return to top</a>
</p>

[bsh-repo]: https://github.com/madeas/box-shadows.css
[caniuse]: https://caniuse.com/?search=box-shadow
[1.0.4]: https://codesandbox.io/s/vue-box-shadows-1-0-4-mrjlvt

<!-- -->
<!-- Repo -->

[1.0.4]: https://codesandbox.io/s/vue-box-shadows-1-0-4-mrjlvt
[docs]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
[contributing]: https://github.com/andrejsharapov/vue-box-shadows/blob/master/CONTRIBUTING.md
[bugs]: https://github.com/andrejsharapov/vue-box-shadows/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3ABugfix
[bug-report]: https://github.com/andrejsharapov/vue-box-shadows/issues/new?labels=Bug+report&template=bug_report.md+

<!-- -->

[discord]: https://discord.gg/XtT4Hdf3
[discord-img]: https://img.shields.io/badge/discord-channel-5865f2.svg
[npm]: https://www.npmjs.com/package/vue-box-shadows
[npm-img]: https://img.shields.io/npm/v/vue-box-shadows?color=c53635

<!-- -->

[npm]: https://www.npmjs.com/package/vue-box-shadows
[npm-img]: https://img.shields.io/npm/v/vue-box-shadows?color=c53635
[download]: https://npm-stat.com/charts.html?package=vue-box-shadows
[download-img]: https://img.shields.io/npm/dm/vue-box-shadows.svg

<!-- -->

[license]: https://github.com/andrejsharapov/vue-box-shadows/blob/master/LICENSE
[license-img]: https://img.shields.io/github/license/andrejsharapov/vue-box-shadows.svg

<!-- -->

[issues]: https://github.com/andrejsharapov/vue-box-shadows/issues/
[issues-img]: https://img.shields.io/github/issues/andrejsharapov/vue-box-shadows.svg

<!-- -->

[contributing]: https://github.com/andrejsharapov/vue-box-shadows/blob/master/CONTRIBUTING.md
[contributors]: https://github.com/andrejsharapov/vue-box-shadows/graphs/contributors/
[contributors-img]: https://img.shields.io/github/contributors/andrejsharapov/vue-box-shadows?color=fd7e17

<!-- -->

[discord]: https://discord.gg/XtT4Hdf3
[discord-img]: https://img.shields.io/badge/discord-channel-5865f2.svg

<!-- GitHub buttons -->

[watchers]: https://github.com/andrejsharapov/vue-box-shadows/watchers/
[forks]: https://github.com/andrejsharapov/vue-box-shadows/network/
[stars]: https://github.com/andrejsharapov/vue-box-shadows/stargazers/

<!-- -->
<!--Examples -->

[ex-el]: https://codesandbox.io/s/v-b-s-1-0-4-elevation-w22j9h?file=/src/App.vue
[ex-bd]: https://codesandbox.io/s/v-b-s-1-0-4-bd-merco1?file=/src/App.vue
Expand All @@ -233,3 +219,7 @@ vue-box-shadows is licensed under the MIT license. You are free to use, modify a
[ex-tr]: https://codesandbox.io/s/v-b-s-1-0-4-tr-mvskqv?file=/src/App.vue
[ex-br]: https://codesandbox.io/s/v-b-s-1-0-4-br-ktwumh?file=/src/App.vue
[ex-bl]: https://codesandbox.io/s/v-b-s-1-0-4-bl-g231ml?file=/src/App.vue

<!-- Other -->

[caniuse]: https://caniuse.com/?search=box-shadow
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-box-shadows",
"version": "1.0.5",
"version": "2.0.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Vue Box-shadows v1.0.5</title>
<title>Vue Box-shadows</title>
</head>
<body>
<div id="app">
Expand Down
6 changes: 5 additions & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
Add beautiful shadow effects to your project without thinking about CSS.
</p>

<div class="list-item" v-box-shadow:neu-2></div>

<br />

<div class="list">
<div
v-for="(item, index) in items"
Expand Down Expand Up @@ -94,4 +98,4 @@ body {
.no-name {
background-color: #e9b6cf;
}
</style>
</style>
42 changes: 26 additions & 16 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,25 +54,35 @@ const baseBoxShadow = (el) => {
};

const numShadows = (el, bindings) => {
let num = parseInt(bindings.value);

if (isNaN(num)) {
return;
} else if (num !== el[currentValue]) {
el[currentValue] = num;
let name = bindings.arg;
let num = bindings.value;

if (name) {
const getElName = collection.find((el) => el.name === name);
const setElStyle = {
prop: "--box-shadow",
val: baseBoxShadow(getElName),
};

if (!bindings) {
console.warn("bindings is not found");
} else {
const list = collection;
el.style.setProperty(setElStyle.prop, setElStyle.val);
el.setAttribute("data-shadow", name);
} else {
if (isNaN(num)) {
return;
} else if (num !== el[currentValue]) {
el[currentValue] = num;

const newStyle = {
prop: "--box-shadow",
val: baseBoxShadow(list[num]),
};
if (!bindings) {
console.warn("bindings is not found");
} else {
const setElStyle = {
prop: "--box-shadow",
val: baseBoxShadow(collection[num]),
};

el.style.setProperty(newStyle.prop, newStyle.val);
el.setAttribute("data-shadow", num);
el.style.setProperty(setElStyle.prop, setElStyle.val);
el.setAttribute("data-shadow", num);
}
}
}
};
Expand Down

0 comments on commit 26fbd38

Please sign in to comment.