index.js

import { base, collection } from "./shadows";

const currentValue = "vBoxShadowValue";

const baseBoxShadow = (el) => {
  if (el === undefined) {
    el = base;
  }

  const isInset = (el) => {
    if (isNaN(el.inset) || el.inset === false) {
      return "";
    } else {
      return "inset ";
    }
  };

  const getColor = (el) => {
    if (el.color !== "transparent") {
      return " rgb(" + el.color + " / " + el.opacity + "%)";
    } else {
      return "transparent";
    }
  };

  const shadow = (el) => {
    return (
      isInset(el) +
      el.offsetX +
      " " +
      el.offsetY +
      " " +
      el.blur +
      " " +
      el.spread +
      " " +
      getColor(el)
    );
  };

  if (el.multiple) {
    const em = el.multiple;

    return em
      .map(function (el) {
        return shadow(el);
      })
      .join(", ");
  } else {
    return shadow(el);
  }
};

const numShadows = (el, bindings) => {
  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),
    };

    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;

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

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

const VueBoxShadow = {
  install(app, 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);
      }
    }

    app.directive("box-shadow", {
      beforeMount(el) {
        if (!options.useClass) {
          el.style.cssText += styles;
        } else {
          el.classList.add("vue-box-shadow");
        }
      },
      mounted: (el, bindings) => numShadows(el, bindings),
      updated: (el, bindings) => numShadows(el, bindings),
    });
  },
};

export default VueBoxShadow;