mine-h5-ui/es/MeBesselCurve/index.vue.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { defineComponent as u, openBlock as o, createElementBlock as l, unref as e, createElementVNode as s, mergeProps as f, Fragment as k, renderList as h, createCommentVNode as g, mergeDefaults as p } from "vue";
import { useMarker as _, useHandler as v, defaultProps as w } from "./hooks.js";
const C = {
  key: 0,
  width: "100%",
  height: "100%"
}, b = ["id"], y = ["d", "fill"], B = ["d", "stroke", "stroke-width", "marker-end"], M = /* @__PURE__ */ u({
  name: "MeBesselCurve",
  __name: "index",
  props: /* @__PURE__ */ p({
    list: {},
    direction: {},
    color: {},
    strokeWidth: {},
    arrow: { type: Boolean }
  }, w),
  setup(r) {
    const n = r, { marker: t, triangleId: i } = _(n), { lines: d, besselCurveRef: a } = v(n);
    return (W, $) => (o(), l("div", {
      ref_key: "besselCurveRef",
      ref: a,
      class: "me-bessel-curve me-absolute-top-left me-w-fill me-h-fill"
    }, [
      e(d).length ? (o(), l("svg", C, [
        s("defs", null, [
          s("marker", f({
            id: e(i),
            markerUnits: "strokeWidth",
            refX: "0",
            orient: "auto"
          }, e(t)), [
            s("path", {
              d: `M 0 0 L ${e(t).markerWidth} ${e(t).refY} L 0 ${e(t).markerHeight} z`,
              fill: r.color
            }, null, 8, y)
          ], 16, b)
        ]),
        (o(!0), l(k, null, h(e(d), (m, c) => (o(), l("path", {
          key: c,
          d: m,
          stroke: r.color,
          "stroke-width": r.strokeWidth,
          fill: "none",
          "marker-end": r.arrow ? `url(#${e(i)})` : ""
        }, null, 8, B))), 128))
      ])) : g("", !0)
    ], 512));
  }
});
export {
  M as default
};