t-fighting-design/es/ripple/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

import { defineComponent as n, ref as d, computed as r, openBlock as _, createElementBlock as y, normalizeClass as k, unref as o, normalizeStyle as C, renderSlot as R } from "vue";
import { Props as S } from "./index3.js";
import { Ripples as h } from "../../_utils/index4.js";
const v = n({
  name: "Ripple"
}), O = /* @__PURE__ */ n({
  ...v,
  props: S,
  setup(s) {
    const p = s, l = d(null), i = r(() => {
      const { startOpacity: e, endOpacity: t } = p;
      return {
        "--f-ripple-start-opacity": e,
        "--f-ripple-end-opacity": t
      };
    }), c = r(() => {
      const { noSelect: e } = p;
      return ["f-ripple", { "f-ripple__select": e }];
    }), a = (e) => {
      const { type: t, ripplesColor: f, duration: m, disabled: u } = p;
      if (u)
        return;
      new h(
        e,
        l.value,
        {
          duration: m,
          component: "f-ripple",
          className: "f-ripple__animation",
          type: t,
          ripplesColor: f
        }
      ).clickRipples();
    };
    return (e, t) => (_(), y("div", {
      ref_key: "FRipple",
      ref: l,
      class: k(o(c)),
      style: C(o(i)),
      onClick: a
    }, [
      R(e.$slots, "default")
    ], 6));
  }
});
export {
  O as default
};