vue-box-shadows

andrejsharapov · Jul 16, 2022 · ac595ef · ac595ef
1 parent ec66ef0
commit ac595ef
Show file tree

Hide file tree

Showing 14 changed files with 672 additions and 145 deletions.
diff --git 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
@@ -0,0 +1,5 @@
+{
+  "MD013": false,
+  "MD033": false,
+  "MD041": false
+}
diff --git a/CONTRIBUTING.md 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
@@ -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
+<div v-box-shadow>
+  Properties are supported by all modern browsers. You can find out about
+  browser support for earlier versions on the Can I Use site.
+</div>
 ```
-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 `<head>` 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.
+
+<p align="right">
+  <a href="#vue-box-shadows">To top</a>
+</p>
+
+[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
@@ -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
diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,48 @@
-<template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+<template lang="pug">
+  #app
+    useBoxShadows.text-center(msg="Box-shadows.css <strong>for <span style='color: #42d392'>Vue</span></strong>")
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import useBoxShadows from "./components/Example.vue";
+// import Vue from "vue";
+// import boxShadows from "/src/assets/index.js";
+
+// Vue.use(boxShadows, {
+//   useClass: true,
+//   shadowBaseCustom: "",
+// });
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
-    HelloWorld
-  }
-}
+    useBoxShadows,
+  },
+};
 </script>
 
-<style>
-#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;
-}
+<style lang="sass">
+@function rgb($hex)
+    @return red($hex) green($hex) blue($hex)
+
+/* // - e9ecf2 //- 1f2229 */
+
+body
+  --base-size: 0.25rem
+  --text-color: #{rgb(#1f2229)}
+  --background-color: #{rgb(#e9ecf2)}
+  --border-color: #{rgb(#abc6d0)}
+  --border-opacity: 1
+  --background-opacity: 1
+
+  font-family: sans-serif
+  font-size: clamp(1rem, 2vw, 2.5rem)
+  color: rgba(var(--text-color))
+  background-color: rgba(var(--background-color) / var(--background-opacity))
+
+.text-center
+  text-align: center
+
+.pa-4
+  padding: calc(var(--base-size) * 4)
 </style>
diff --git a/src/assets/index.js b/src/assets/index.js
@@ -0,0 +1,82 @@
+import { baseShadow as base, listShadows } from "./shadows";
+
+const currentValue = "vBoxShadowValue";
+const baseBoxShadow = (el) => {
+  if (!el) {
+    el = base;
+  }
+
+  return `${el?.inset ? "inset" : ""} ${el?.offsetX} ${el?.offsetY} ${
+    el?.blur
+  } ${el?.spread} rgba(${el?.color}/${el?.opacity}%)
+  `;
+};
+
+const numShadows = function (el, bindings) {
+  let num = parseInt(bindings.value);
+
+  if (isNaN(num)) {
+    return;
+  } else if (num !== el[currentValue]) {
+    el[currentValue] = num;
+
+    if (!bindings) {
+      console.warn("bindings is not found");
+    } else {
+      const list = listShadows;
+
+      const newStyle = {
+        prop: "--box-shadow",
+        val: baseBoxShadow(list[num]),
+      };
+
+      el.style.setProperty(newStyle.prop, newStyle.val);
+    }
+  }
+};
+
+const VueBoxShadow = {
+  install(Vue, options) {
+    options = Object.assign(
+      { useClass: false, shadowBaseCustom: baseBoxShadow() },
+      options
+    );
+
+    const styles = `
+      --box-shadow: ${options.shadowBaseCustom};
+      box-shadow: var(--box-shadow);`;
+
+    if (options.useClass) {
+      const stylesheets = window.document.styleSheets;
+      const rule = `.vue-box-shadow{${styles}}`;
+
+      if (stylesheets && stylesheets[0] && stylesheets.insertRule) {
+        stylesheets.insertRule(rule);
+      } else {
+        let styleTag = window.document.createElement("style");
+
+        styleTag.setAttribute("type", "text/css");
+        styleTag.appendChild(window.document.createTextNode(rule));
+        window.document.head.appendChild(styleTag);
+      }
+    } else {
+      //
+    }
+
+    Vue.directive("box-shadow", {
+      currentValue: 0,
+      bind(el) {
+        if (!options.useClass) {
+          el.style.cssText += styles;
+        } else {
+          el.classList.add("vue-box-shadow");
+        }
+      },
+      inserted: (el, bindings) => numShadows(el, bindings),
+      updated: (el, bindings) => numShadows(el, bindings),
+      // componentUpdated: (el, bindings) => numShadows(el, bindings),
+    });
+  },
+};
+
+export default VueBoxShadow;
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/shadows.js b/src/assets/shadows.js
@@ -0,0 +1,63 @@
+export const baseShadow = {
+  id: "-1",
+  offsetX: "0",
+  offsetY: "0.625rem",
+  blur: "2.5rem",
+  spread: "0",
+  color: "50 50 50",
+  opacity: 10,
+  inset: false,
+};
+
+export const listShadows = [
+  {
+    id: "0",
+    offsetX: "0",
+    offsetY: "0",
+    blur: "0",
+    spread: "0",
+    color: "0 0 0",
+    opacity: 0,
+    inset: false,
+  },
+  {
+    id: "1",
+    offsetX: "0",
+    offsetY: "0",
+    blur: "0",
+    spread: "0",
+    color: "0 0 0",
+    opacity: 0,
+    inset: false,
+  },
+  {
+    id: "2",
+    offsetX: "0",
+    offsetY: "0",
+    blur: "0",
+    spread: "0",
+    color: "0 0 0",
+    opacity: 0,
+    inset: false,
+  },
+  {
+    id: "3",
+    offsetX: "0",
+    offsetY: "0",
+    blur: "0",
+    spread: "0",
+    color: "0 0 0",
+    opacity: 0,
+    inset: false,
+  },
+  {
+    id: "4",
+    offsetX: "0",
+    offsetY: "0",
+    blur: "0",
+    spread: "0",
+    color: "0 0 0",
+    opacity: 0,
+    inset: false,
+  },
+];