vue-amazing-ui/es/floatbutton/FloatButton.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as N, ref as V, computed as o, watch as F, createBlock as g, openBlock as i, resolveDynamicComponent as b, normalizeStyle as j, normalizeClass as R, unref as s, withCtx as r, createVNode as u, withDirectives as H, mergeProps as O, createSlots as W, normalizeProps as q, guardReactiveProps as A, createElementVNode as f, createElementBlock as p, createCommentVNode as c, Transition as $, renderSlot as d, createTextVNode as y, toDisplayString as w, vShow as G } from "vue";
import J from "../tooltip/index.js";
import K from "../badge/index.js";
import { useInject as Q, useSlotsExist as U } from "../utils/index.js";
const X = { class: "float-btn-body" }, Y = { class: "float-btn-content" }, Z = {
  key: 0,
  class: "float-btn-icon"
}, x = {
  key: 1,
  class: "close-svg",
  focusable: "false",
  "data-icon": "close",
  width: "1em",
  height: "1em",
  fill: "currentColor",
  "aria-hidden": "true",
  "fill-rule": "evenodd",
  viewBox: "64 64 896 896"
}, _ = {
  key: 1,
  class: "float-btn-description"
}, tt = { class: "float-btn-menu" }, rt = /* @__PURE__ */ N({
  __name: "FloatButton",
  props: {
    top: { default: void 0 },
    bottom: { default: 40 },
    left: { default: void 0 },
    right: { default: 40 },
    zIndex: { default: 9 },
    width: { default: 44 },
    height: { default: 44 },
    type: { default: "default" },
    shape: { default: "circle" },
    icon: { type: [Object, Function], default: void 0 },
    description: { default: void 0 },
    href: { default: void 0 },
    target: { default: "_self" },
    menuTrigger: { default: void 0 },
    tooltip: { default: void 0 },
    tooltipProps: { default: () => ({}) },
    badgeProps: { default: () => ({}) }
  },
  emits: ["click", "openChange"],
  setup(B, { emit: k }) {
    const t = B, l = V(!1), { colorPalettes: m } = Q("FloatButton"), h = k, a = U(["icon", "description", "tooltip", "menu"]), T = o(() => a.tooltip || t.tooltip), C = o(() => a.icon || t.icon), P = o(() => a.description || t.description), z = o(() => typeof t.width == "number" ? `${t.width}px` : t.width), S = o(() => typeof t.height == "number" ? `${t.height}px` : t.height), L = o(() => typeof t.left == "number" ? `${t.left}px` : t.left), D = o(() => t.left ? null : typeof t.right == "number" ? `${t.right}px` : t.right), E = o(() => typeof t.top == "number" ? `${t.top}px` : t.top), I = o(() => t.top ? null : typeof t.bottom == "number" ? `${t.bottom}px` : t.bottom);
    F(l, (e) => {
      h("openChange", e);
    });
    function M(e) {
      h("click", e), t.menuTrigger === "click" && a.menu && (l.value = !l.value);
    }
    return (e, n) => (i(), g(b(e.href ? "a" : "div"), {
      tabindex: "0",
      class: R(["float-btn-wrap", `float-btn-${e.type} float-btn-${e.shape}`]),
      style: j(`
      --float-btn-width: ${z.value};
      --float-btn-height: ${S.value};
      --float-btn-left: ${L.value};
      --float-btn-right: ${D.value};
      --float-btn-top: ${E.value};
      --float-btn-bottom: ${I.value};
      --float-btn-z-index: ${e.zIndex};
      --float-btn-primary-color: ${s(m)[5]};
      --float-btn-primary-color-hover: ${s(m)[4]};
    `),
      href: e.href,
      target: e.target,
      onClick: M,
      onBlur: n[0] || (n[0] = (v) => e.menuTrigger === "click" ? l.value = !1 : null),
      onMouseenter: n[1] || (n[1] = (v) => e.menuTrigger === "hover" ? l.value = !0 : null),
      onMouseleave: n[2] || (n[2] = (v) => e.menuTrigger === "hover" ? l.value = !1 : null)
    }, {
      default: r(() => [
        u(s(J), O({ placement: "left" }, e.tooltipProps, { class: "float-btn-tooltip" }), W({
          default: r(() => [
            u(s(K), q(A(e.badgeProps)), {
              default: r(() => [
                f("div", X, [
                  f("div", Y, [
                    C.value ? (i(), p("div", Z, [
                      u($, { name: "fade" }, {
                        default: r(() => [
                          l.value ? (i(), p("svg", x, [...n[3] || (n[3] = [
                            f("path", { d: "M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" }, null, -1)
                          ])])) : d(e.$slots, "icon", { key: 0 }, () => [
                            e.icon ? (i(), g(b(e.icon), { key: 0 })) : c("", !0)
                          ], !0)
                        ]),
                        _: 3
                      })
                    ])) : c("", !0),
                    P.value ? (i(), p("div", _, [
                      d(e.$slots, "description", {}, () => [
                        y(w(e.description), 1)
                      ], !0)
                    ])) : c("", !0)
                  ])
                ])
              ]),
              _: 3
            }, 16)
          ]),
          _: 2
        }, [
          T.value ? {
            name: "tooltip",
            fn: r(() => [
              d(e.$slots, "tooltip", {}, () => [
                y(w(e.tooltip), 1)
              ], !0)
            ]),
            key: "0"
          } : void 0
        ]), 1040),
        H(u($, { name: "move" }, {
          default: r(() => [
            f("div", tt, [
              d(e.$slots, "menu", {}, void 0, !0)
            ])
          ]),
          _: 3
        }, 512), [
          [G, l.value]
        ])
      ]),
      _: 3
    }, 40, ["class", "style", "href", "target"]));
  }
});
export {
  rt as default
};