x-next 1.0.1 → 1.1.0

package/dist/es/components/tooltip/Tooltip.vue.js

@@ -0,0 +1,135 @@
+import { defineComponent as T, ref as w, computed as l, createVNode as s, mergeProps as P, isVNode as S, cloneVNode as V } from "vue";
+import { Trigger as v } from "../trigger/index.js";
+import { getClassNameMixin as k } from "../../_utils/config.js";
+import { tooltipProps as F } from "./props.js";
+const m = (e) => e === !0 || e === "", D = (e) => {
+  const o = e.props ?? {};
+  return m(o.disabled) || m(o.loading);
+}, A = (e) => {
+  if (!e || typeof e != "object" || Array.isArray(e))
+    return {};
+  const o = e;
+  return {
+    position: o.position,
+    inset: o.inset,
+    top: o.top,
+    right: o.right,
+    bottom: o.bottom,
+    left: o.left,
+    float: o.float,
+    zIndex: o.zIndex,
+    width: o.width
+  };
+}, E = /* @__PURE__ */ T({
+  name: "Tooltip",
+  props: F,
+  emits: {
+    "update:popupVisible": (e) => !0,
+    /**
+     * @zh 文字气泡显示状态改变时触发
+     * @en Emitted when the tooltip display status changes
+     * @param {boolean} visible
+     */
+    popupVisibleChange: (e) => !0,
+    show: () => !0,
+    hide: () => !0,
+    resize: () => !0
+  },
+  /**
+   * @zh 内容
+   * @en Content
+   * @slot content
+   */
+  setup(e, {
+    emit: o,
+    slots: n
+  }) {
+    const i = k("tooltip"), a = w(e.defaultPopupVisible), p = l(() => e.popupVisible ?? a.value), C = (t) => {
+      e.popupVisible === void 0 && (a.value = t), o("update:popupVisible", t), o("popupVisibleChange", t);
+    }, f = l(() => [i.element("content"), e.contentClass, {
+      [i.modifier("mini")]: e.mini
+    }]), b = l(() => {
+      if (e.backgroundColor || e.contentStyle)
+        return {
+          backgroundColor: e.backgroundColor,
+          ...e.contentStyle
+        };
+    }), g = l(() => [i.element("popup-arrow"), e.arrowClass]), y = l(() => {
+      if (e.backgroundColor || e.arrowStyle)
+        return {
+          backgroundColor: e.backgroundColor,
+          ...e.arrowStyle
+        };
+    }), h = () => {
+      var r, c, d;
+      const t = ((r = n.default) == null ? void 0 : r.call(n)) ?? [];
+      if (t.length === 1 && S(t[0]) && D(t[0])) {
+        const u = t[0];
+        return s("span", {
+          class: i.element("disabled-wrapper"),
+          style: A((c = u.props) == null ? void 0 : c.style)
+        }, [V(u, {
+          style: [(d = u.props) == null ? void 0 : d.style, {
+            pointerEvents: "none"
+          }]
+        })]);
+      }
+      return t;
+    };
+    return () => s(v, P({
+      class: i.block,
+      trigger: e.trigger,
+      position: e.position,
+      popupVisible: p.value,
+      disabled: e.disabled,
+      popupOffset: e.popupOffset,
+      popupTranslate: e.popupTranslate,
+      showArrow: e.showArrow,
+      alignPoint: e.alignPoint,
+      contentClass: f.value,
+      contentStyle: b.value,
+      arrowClass: g.value,
+      arrowStyle: y.value,
+      popupStyle: e.popupStyle,
+      popupContainer: e.popupContainer,
+      animationName: e.animationName,
+      duration: e.duration,
+      mouseEnterDelay: e.mouseEnterDelay,
+      mouseLeaveDelay: e.mouseLeaveDelay,
+      focusDelay: e.focusDelay,
+      popupHoverStay: e.popupHoverStay,
+      blurToClose: e.blurToClose,
+      clickToClose: e.clickToClose,
+      clickOutsideToClose: e.clickOutsideToClose,
+      unmountOnClose: e.unmountOnClose,
+      autoFitPopupWidth: e.autoFitPopupWidth,
+      autoFitPopupMinWidth: e.autoFitPopupMinWidth,
+      autoFixPosition: e.autoFixPosition,
+      updateAtScroll: e.updateAtScroll,
+      autoFitPosition: e.autoFitPosition,
+      renderToBody: e.renderToBody,
+      preventFocus: e.preventFocus,
+      scrollToClose: e.scrollToClose,
+      scrollToCloseDistance: e.scrollToCloseDistance,
+      openedClass: e.openedClass,
+      autoFitTransformOrigin: !0,
+      hideEmpty: !0
+    }, {
+      role: "tooltip"
+    }, {
+      onPopupVisibleChange: C,
+      onShow: () => o("show"),
+      onHide: () => o("hide"),
+      onResize: () => o("resize")
+    }), {
+      default: h,
+      content: () => {
+        var t;
+        return ((t = n.content) == null ? void 0 : t.call(n)) ?? e.content;
+      }
+    });
+  }
+});
+export {
+  E as default
+};

package/dist/es/components/tooltip/Tooltip.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Tooltip.vue.js";
+export {
+  f as default
+};

package/dist/es/components/tooltip/index.js

@@ -0,0 +1,8 @@
+import o from "./Tooltip.vue.js";
+import { generateComponent as t } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as e } from "../../_utils/config.js";
+const i = t(e("Tooltip"), o);
+export {
+  i as Tooltip,
+  i as default
+};

package/dist/es/components/tooltip/props.js

@@ -0,0 +1,146 @@
+const e = {
+  popupVisible: {
+    type: Boolean,
+    default: void 0
+  },
+  defaultPopupVisible: {
+    type: Boolean,
+    default: !1
+  },
+  trigger: {
+    type: [String, Array],
+    default: "hover"
+  },
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  content: {
+    type: [String, Number]
+  },
+  position: {
+    type: String,
+    default: "top"
+  },
+  mini: {
+    type: Boolean,
+    default: !1
+  },
+  backgroundColor: {
+    type: String
+  },
+  contentClass: {
+    type: [String, Array, Object]
+  },
+  contentStyle: {
+    type: Object
+  },
+  arrowClass: {
+    type: [String, Array, Object]
+  },
+  arrowStyle: {
+    type: Object
+  },
+  popupContainer: {
+    type: [String, Object]
+  },
+  popupOffset: {
+    type: Number,
+    default: 10
+  },
+  popupTranslate: {
+    type: [Array, Object]
+  },
+  showArrow: {
+    type: Boolean,
+    default: !0
+  },
+  alignPoint: {
+    type: Boolean,
+    default: !1
+  },
+  popupStyle: {
+    type: Object
+  },
+  animationName: {
+    type: String,
+    default: "x-zoom-in-fade-out"
+  },
+  duration: {
+    type: [Number, Object]
+  },
+  mouseEnterDelay: {
+    type: Number,
+    default: 100
+  },
+  mouseLeaveDelay: {
+    type: Number,
+    default: 100
+  },
+  focusDelay: {
+    type: Number,
+    default: 0
+  },
+  popupHoverStay: {
+    type: Boolean,
+    default: !0
+  },
+  blurToClose: {
+    type: Boolean,
+    default: !0
+  },
+  clickToClose: {
+    type: Boolean,
+    default: !0
+  },
+  clickOutsideToClose: {
+    type: Boolean,
+    default: !0
+  },
+  unmountOnClose: {
+    type: Boolean,
+    default: !0
+  },
+  autoFitPopupWidth: {
+    type: Boolean,
+    default: !1
+  },
+  autoFitPopupMinWidth: {
+    type: Boolean,
+    default: !1
+  },
+  autoFixPosition: {
+    type: Boolean,
+    default: !0
+  },
+  updateAtScroll: {
+    type: Boolean,
+    default: !1
+  },
+  autoFitPosition: {
+    type: Boolean,
+    default: !0
+  },
+  renderToBody: {
+    type: Boolean,
+    default: !0
+  },
+  preventFocus: {
+    type: Boolean,
+    default: !1
+  },
+  scrollToClose: {
+    type: Boolean,
+    default: !1
+  },
+  scrollToCloseDistance: {
+    type: Number,
+    default: 0
+  },
+  openedClass: {
+    type: [String, Array, Object]
+  }
+};
+export {
+  e as tooltipProps
+};

package/dist/es/components/trend-chart/components/TrendChart.js

@@ -0,0 +1,212 @@
+import { defineComponent as G, reactive as I, computed as u, ref as A, onMounted as F, onUnmounted as W, watch as P, nextTick as x, createVNode as s, mergeProps as R, h as U, Fragment as _ } from "vue";
+import $ from "../helpers/getPadding.js";
+import { useLocale as q } from "../../../locale/index.js";
+import T from "./trend-chart-grid.js";
+import V from "./trend-chart-labels.js";
+import Y from "./trend-chart-curve.js";
+import { getComponentPrefix as H } from "../../../_utils/config.js";
+import { trendChartProps as J } from "../props.js";
+import { TrendChartTheme as h } from "../themes.js";
+const ie = /* @__PURE__ */ G({
+  name: H("TrendChart"),
+  components: {
+    TrendChartGrid: T,
+    TrendChartLabels: V,
+    TrendChartCurve: Y
+  },
+  props: J,
+  emits: {
+    "mouse-move": (a) => !0
+  },
+  setup(a, {
+    emit: f
+  }) {
+    const {
+      t: j
+    } = q(), n = I({
+      width: null,
+      height: null,
+      labelsOverflowObject: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      },
+      activeLine: null,
+      activeLineParams: null
+    }), z = (e, t) => ({
+      ...e,
+      ...t,
+      stroke: {
+        ...e.stroke,
+        ...t == null ? void 0 : t.stroke
+      },
+      fill: {
+        ...e.fill,
+        ...t == null ? void 0 : t.fill
+      },
+      point: {
+        ...e.point,
+        ...t == null ? void 0 : t.point
+      },
+      axisLine: {
+        ...e.axisLine,
+        ...t == null ? void 0 : t.axisLine
+      }
+    }), c = u(() => {
+      let e = h.INFO;
+      return a.status === "primary" ? e = h.PRIMARY : a.status === "success" ? e = h.SUCCESS : a.status === "danger" ? e = h.DANGER : a.status === "warning" ? e = h.WARNING : a.status === "strong" && (e = h.STRONG), z(e, a.theme);
+    }), m = u(() => a.dataset.filter((e) => Number.isFinite(e))), k = u(() => m.value.length > 0), o = u(() => $(a.padding || "0")), l = u(() => ({
+      minX: Number(o.value.left) + Number(n.labelsOverflowObject.left),
+      minY: Number(o.value.top) + Number(n.labelsOverflowObject.top),
+      maxX: (n.width ?? 0) - Number(o.value.right) - Number(n.labelsOverflowObject.right),
+      maxY: (n.height ?? 0) - Number(o.value.bottom) - Number(n.labelsOverflowObject.bottom)
+    })), i = u(() => {
+      let e = m.value.length ? Math.max(...m.value) : 0, t = m.value.length ? Math.min(...m.value) : 0;
+      const r = m.value.length;
+      return a.max !== void 0 && (e = Math.max(e, a.max)), a.min !== void 0 && (t = Math.min(t, a.min)), {
+        maxValue: e,
+        minValue: t,
+        maxAmount: r
+      };
+    }), S = u(() => ({
+      x: l.value.minX,
+      y: l.value.minY,
+      width: Math.max(0, l.value.maxX - l.value.minX),
+      height: Math.max(0, l.value.maxY - l.value.minY),
+      opacity: 0
+    })), g = u(() => ({
+      x: l.value.minX + Math.max(0, l.value.maxX - l.value.minX) / 2,
+      y: l.value.minY + Math.max(0, l.value.maxY - l.value.minY) / 2
+    })), d = u(() => {
+      if (i.value.maxAmount <= 0)
+        return [];
+      if (i.value.maxAmount === 1)
+        return [Math.round(l.value.minX + (l.value.maxX - l.value.minX) / 2)];
+      const e = (l.value.maxX - l.value.minX) / (i.value.maxAmount - 1);
+      return Array.from({
+        length: i.value.maxAmount
+      }, (t, r) => Math.round(l.value.minX + e * r));
+    }), v = A(null), b = A(null), L = () => {
+      if (v.value) {
+        const e = v.value.getBoundingClientRect();
+        n.width = e.width, n.height = e.height;
+      }
+    }, N = () => {
+      if (v.value && b.value) {
+        const e = v.value.getBoundingClientRect(), t = b.value.$el.getBoundingClientRect();
+        n.labelsOverflowObject = {
+          top: Math.max(0, Number(e.top) - Number(t.top) + Number(o.value.top)),
+          right: Math.max(0, Number(t.right) - Number(e.right) + Number(o.value.right)),
+          bottom: Math.max(0, Number(t.bottom) - Number(e.bottom) + Number(o.value.bottom)),
+          left: Math.max(0, Number(o.value.left) - Number(t.left) + Number(e.left))
+        };
+      } else
+        n.labelsOverflowObject = {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        };
+    }, w = () => {
+      L(), x(N);
+    }, E = (e) => d.value.length ? d.value.reduce((t, r) => Math.abs(t - e) > Math.abs(r - e) ? r : t, 1 / 0) : null, B = (e) => {
+      if (v.value) {
+        const t = v.value.getBoundingClientRect();
+        n.activeLine = E(e.clientX - t.left);
+      }
+    }, D = () => {
+      n.activeLine = null, n.activeLineParams = null;
+    }, y = () => {
+      L(), x(N);
+    };
+    return F(() => {
+      w(), window.addEventListener("resize", y);
+    }), W(() => {
+      window.removeEventListener("resize", y);
+    }), P(() => n.activeLine, (e) => {
+      if (e !== null) {
+        const t = d.value.indexOf(e);
+        if (t < 0)
+          return;
+        n.activeLineParams = {
+          index: t
+        }, f("mouse-move", {
+          ...n.activeLineParams,
+          data: m.value[t]
+        });
+      } else
+        f("mouse-move", null);
+    }), P(() => [a.labels, a.dataset, a.min, a.max, a.padding], () => {
+      n.labelsOverflowObject = {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      }, x(w);
+    }, {
+      deep: !0
+    }), () => {
+      var e, t, r, O, M, C, X;
+      return s("svg", {
+        class: "x-trend-chart",
+        ref: v,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "100%",
+        height: "100%"
+      }, [a.grid && s(T, {
+        class: "grid",
+        verticalLines: a.grid.verticalLines,
+        verticalLinesNumber: a.grid.verticalLinesNumber || i.value.maxAmount,
+        horizontalLines: a.grid.horizontalLines,
+        horizontalLinesNumber: a.grid.horizontalLinesNumber || (((e = a.labels) == null ? void 0 : e.yLabels) ?? 0),
+        boundary: l.value
+      }, null), a.labels && s(V, R({
+        ref: b,
+        class: "labels"
+      }, a.labels, {
+        boundary: l.value,
+        minValue: i.value.minValue,
+        maxValue: i.value.maxValue
+      }), null), s(Y, {
+        class: "curve",
+        data: m.value,
+        boundary: l.value,
+        minValue: i.value.minValue,
+        maxValue: i.value.maxValue,
+        maxAmount: i.value.maxAmount,
+        activeLineParams: n.activeLineParams,
+        theme: c.value
+      }, null), !k.value && U("text", {
+        class: "x-trend-chart-empty",
+        x: g.value.x,
+        y: g.value.y,
+        "text-anchor": "middle",
+        "dominant-baseline": "middle",
+        style: {
+          fill: "var(--x-color-text-secondary)",
+          fontSize: "12px",
+          pointerEvents: "none"
+        }
+      }, j("common.noData")), a.interactive && s(_, null, [s("line", {
+        class: "x-trend-chart-active-line",
+        x1: n.activeLine ?? l.value.minX,
+        x2: n.activeLine ?? l.value.minX,
+        y1: l.value.minY,
+        y2: l.value.maxY,
+        visibility: n.activeLine !== null ? "visible" : "hidden",
+        style: {
+          stroke: (r = (t = c.value) == null ? void 0 : t.axisLine) == null ? void 0 : r.color,
+          strokeWidth: (M = (O = c.value) == null ? void 0 : O.axisLine) == null ? void 0 : M.width,
+          strokeOpacity: (X = (C = c.value) == null ? void 0 : C.axisLine) == null ? void 0 : X.opacity
+        }
+      }, null), s("rect", R(S.value, {
+        onMousemove: B,
+        onMouseout: D
+      }), null)])]);
+    };
+  }
+});
+export {
+  ie as default
+};

package/dist/es/components/trend-chart/components/trend-chart-curve.js

@@ -0,0 +1,79 @@
+import { defineComponent as T, computed as s, createVNode as c } from "vue";
+import W from "../helpers/genPoints.js";
+import E from "../helpers/genPath.js";
+import { getComponentPrefix as F } from "../../../_utils/config.js";
+import { trendChartCurveProps as S } from "../props.js";
+const G = /* @__PURE__ */ T({
+  name: F("TrendChartCurve"),
+  props: S,
+  setup(e) {
+    const u = s(() => W(e.data, e.boundary, e.maxValue, e.minValue, e.maxAmount)), m = s(() => E([...u.value], e.smooth, e.boundary)), b = s(() => {
+      var a;
+      return e.fill && ((a = m.value) == null ? void 0 : a.fillPath) && u.value.length > 1 && e.maxValue !== e.minValue;
+    }), A = s(() => {
+      var h, d, f, v, x, y, P, k, C, g, V;
+      const a = [];
+      b.value && a.push(c("path", {
+        class: "x-trend-chart-fill",
+        d: m.value.fillPath,
+        fill: "none",
+        style: {
+          fill: ((d = (h = e.theme) == null ? void 0 : h.fill) == null ? void 0 : d.color) || "var(--x-color-text-secondary)",
+          opacity: ((v = (f = e.theme) == null ? void 0 : f.fill) == null ? void 0 : v.opacity) ?? 0.1
+        }
+      }, null)), e.stroke && ((x = m.value) != null && x.linePath) && a.push(c("path", {
+        class: "x-trend-chart-stroke",
+        d: m.value.linePath,
+        fill: "none",
+        stroke: "none",
+        style: {
+          stroke: (P = (y = e.theme) == null ? void 0 : y.stroke) == null ? void 0 : P.color,
+          strokeWidth: (C = (k = e.theme) == null ? void 0 : k.stroke) == null ? void 0 : C.width,
+          opacity: (V = (g = e.theme) == null ? void 0 : g.stroke) == null ? void 0 : V.opacity
+        }
+      }, null));
+      const N = (i) => {
+        var t, l;
+        const n = ((l = (t = e.theme) == null ? void 0 : t.point) == null ? void 0 : l.width) ?? 3;
+        return i ? n + 1 : n;
+      }, R = (i) => {
+        var t, l, o, r, w, L;
+        const n = ((l = (t = e.theme) == null ? void 0 : t.point) == null ? void 0 : l.color) ?? ((r = (o = e.theme) == null ? void 0 : o.stroke) == null ? void 0 : r.color);
+        return i ? {
+          fill: n,
+          stroke: n,
+          strokeWidth: 1
+        } : {
+          fill: n,
+          opacity: (L = (w = e.theme) == null ? void 0 : w.point) == null ? void 0 : L.opacity
+        };
+      };
+      if (e.showPoints && u.value) {
+        const i = u.value.map((n, t) => {
+          var l, o, r;
+          return c("circle", {
+            key: t,
+            class: {
+              point: !0,
+              "x-trend-chart-point-active": ((l = e.activeLineParams) == null ? void 0 : l.index) === t
+            },
+            cx: n.x,
+            cy: n.y,
+            r: N(((o = e.activeLineParams) == null ? void 0 : o.index) === t),
+            style: R(((r = e.activeLineParams) == null ? void 0 : r.index) === t)
+          }, null);
+        });
+        a.push(c("g", {
+          class: "x-trend-chart-points"
+        }, [i]));
+      }
+      return a;
+    });
+    return () => c("g", {
+      class: e.className
+    }, [A.value]);
+  }
+});
+export {
+  G as default
+};

package/dist/es/components/trend-chart/components/trend-chart-grid.js

@@ -0,0 +1,62 @@
+import { defineComponent as b, computed as u, h as i } from "vue";
+import { getComponentPrefix as h } from "../../../_utils/config.js";
+import { trendChartGridProps as y } from "../props.js";
+import { TrendChartAxisColor as m } from "../themes.js";
+const N = b({
+  name: h("TrendChartGrid"),
+  props: y,
+  setup(n) {
+    const c = (e) => {
+      const t = n.verticalLinesNumber > 1 ? (n.boundary.maxX - n.boundary.minX) / (n.verticalLinesNumber - 1) : 0, r = n.boundary.minX + t * (e - 1), a = n.boundary.minY, o = n.boundary.maxY;
+      return {
+        x1: r,
+        x2: r,
+        y1: a,
+        y2: o,
+        style: { stroke: m }
+      };
+    }, d = (e) => {
+      const t = n.horizontalLinesNumber > 1 ? (n.boundary.maxY - n.boundary.minY) / (n.horizontalLinesNumber - 1) : 0, r = n.boundary.maxY - t * (e - 1), a = n.boundary.minX, o = n.boundary.maxX;
+      return {
+        x1: a,
+        x2: o,
+        y1: r,
+        y2: r,
+        style: { stroke: m }
+      };
+    }, l = u(() => {
+      if (n.verticalLines && n.verticalLinesNumber > 0) {
+        const e = [];
+        for (let t = 1; t <= n.verticalLinesNumber; t++)
+          e.push(
+            i("line", {
+              class: "line",
+              ...c(t)
+            })
+          );
+        return i("g", { class: "vertical" }, e);
+      }
+      return null;
+    }), s = u(() => {
+      if (n.horizontalLines && n.horizontalLinesNumber > 0) {
+        const e = [];
+        for (let t = 1; t <= n.horizontalLinesNumber; t++)
+          e.push(
+            i("line", {
+              class: "line",
+              ...d(t)
+            })
+          );
+        return i("g", { class: "horizontal" }, e);
+      }
+      return null;
+    });
+    return () => {
+      const e = [];
+      return l.value && e.push(l.value), s.value && e.push(s.value), e.length === 0 ? null : i("g", null, e);
+    };
+  }
+});
+export {
+  N as default
+};