vue-chrts 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/components/Tooltip.js

@@ -1,6 +1,6 @@
-import { defineComponent as S, computed as p, createElementBlock as l, openBlock as a, createElementVNode as o, toDisplayString as n, Fragment as z, renderList as B, normalizeStyle as w } from "vue";
-import { getFirstPropertyValue as j } from "../utils.js";
-const C = { style: { display: "flex", "align-items": "center" } }, W = /* @__PURE__ */ S({
+import { defineComponent as F, computed as m, createElementBlock as n, openBlock as s, createElementVNode as r, toDisplayString as c, Fragment as p, renderList as z, normalizeStyle as w } from "vue";
+import { getFirstPropertyValue as B } from "../utils.js";
+const C = /* @__PURE__ */ F({
   __name: "Tooltip",
   props: {
     data: {},
@@ -8,66 +8,67 @@ const C = { style: { display: "flex", "align-items": "center" } }, W = /* @__PUR
     titleFormatter: { type: Function },
     yFormatter: { type: Function }
   },
-  setup(t) {
-    const e = t, c = p(
-      () => e.titleFormatter ? e.titleFormatter(e.data) : j(e.data)
-    ), m = ["_index", "_stacked", "_ending"], g = p(() => Object.entries(e.data ?? []).filter(
-      ([r, x]) => !m.includes(r) && Object.keys(e.categories).includes(r)
+  setup(l) {
+    const t = l, v = m(
+      () => t.titleFormatter ? t.titleFormatter(t.data) : B(t.data)
+    ), d = ["_index", "_stacked", "_ending"], g = m(() => Object.entries(t.data ?? []).filter(
+      ([e, a]) => !d.includes(e) && Object.keys(t.categories).includes(e)
     )), u = {
+      display: "flex",
+      flexDirection: "column"
+    }, f = {
       color: "var(--vis-tooltip-title-color, #000)",
       textTransform: "var(--vis-tooltip-title-text-transform, capitalize)",
       borderBottom: "var(--vis-tooltip-title-border-bottom, 1px solid #e5e7eb)",
-      marginBottom: "var(--vis-tooltip-title-margin-bottom, 0.25rem)",
-      paddingBottom: "var(--vis-tooltip-title-padding-bottom, 0.25rem)",
-      padding: "var(--vis-tooltip-title-padding, 0.75rem)",
+      padding: "var(--vis-tooltip-title-padding, 0.75rem 0.75rem 0.5rem 0.75rem)",
+      margin: "var(--vis-tooltip-title-margin, 0 0 0.25rem 0)",
       fontSize: "var(--vis-tooltip-title-font-size, 0.875rem)",
       lineHeight: "var(--vis-tooltip-title-line-height, 100%)",
       fontWeight: "var(--vis-tooltip-title-font-weight, 600)"
-    }, f = {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      padding: "var(--vis-tooltip-entry-padding-top, 0.25rem) var(--vis-tooltip-entry-padding-right, 0.25rem) var(--vis-tooltip-entry-padding-bottom, 0.5rem) var(--vis-tooltip-entry-padding-left, 0.25rem)"
     }, y = {
-      width: "var(--vis-tooltip-dot-width, 8px)",
-      height: "var(--vis-tooltip-dot-height, 8px)",
-      borderRadius: "var(--vis-tooltip-dot-border-radius, 4px)",
-      marginRight: "var(--vis-tooltip-dot-margin-right, 8px)"
+      display: "grid",
+      gridTemplateColumns: "auto 1fr auto",
+      alignItems: "center",
+      gap: "var(--vis-tooltip-content-gap, 0.25rem 0.5rem)",
+      padding: "var(--vis-tooltip-content-padding, 0 0.75rem 0.5rem 0.75rem)"
     }, h = {
       fontWeight: "var(--vis-tooltip-label-font-weight, 400)",
       fontSize: "var(--vis-tooltip-label-font-size, 0.875rem)",
-      marginRight: "var(--vis-tooltip-label-margin-right, 1rem)",
-      color: "var(--vis-tooltip-label-color)"
+      color: "var(--vis-tooltip-label-color, inherit)",
+      margin: "var(--vis-tooltip-label-margin, 0 1rem 0 0)",
+      whiteSpace: "nowrap"
     }, b = {
       fontSize: "var(--vis-tooltip-value-font-size, 0.875rem)",
       fontWeight: "var(--vis-tooltip-value-font-weight, 600)",
-      color: "var(--vis-tooltip-value-color)"
+      color: "var(--vis-tooltip-value-color, inherit)",
+      textAlign: "right",
+      fontVariantNumeric: "tabular-nums"
+    }, x = (e, a) => {
+      var o, i;
+      return {
+        width: "8px",
+        height: "8px",
+        aspectRatio: "1",
+        borderRadius: "var(--vis-tooltip-dot-border-radius, 4px)",
+        margin: "var(--vis-tooltip-dot-margin, 0)",
+        flexShrink: "0",
+        backgroundColor: typeof ((o = t.categories[e]) == null ? void 0 : o.color) == "string" && ((i = t.categories[e]) != null && i.color) ? t.categories[e].color : `var(--vis-color${a})`
+      };
     };
-    return (r, x) => (a(), l("div", null, [
-      o("div", { style: u }, n(c.value), 1),
-      (a(!0), l(z, null, B(g.value, ([i, s], F) => {
-        var v, d;
-        return a(), l("div", {
-          key: i,
-          style: f
-        }, [
-          o("div", C, [
-            o("span", {
-              style: w({
-                ...y,
-                backgroundColor: typeof ((v = t.categories[i]) == null ? void 0 : v.color) == "string" && ((d = t.categories[i]) != null && d.color) ? t.categories[i].color : `var(--vis-color${F})`
-              })
-            }, null, 4),
-            o("span", { style: h }, n(t.categories[i].name) + ": ", 1)
-          ]),
-          o("div", null, [
-            o("span", { style: b }, n(t.yFormatter ? t.yFormatter(s) : s), 1)
-          ])
-        ]);
-      }), 128))
+    return (e, a) => (s(), n("div", { style: u }, [
+      r("div", { style: f }, c(v.value), 1),
+      r("div", { style: y }, [
+        (s(!0), n(p, null, z(g.value, ([o, i], S) => (s(), n(p, { key: o }, [
+          r("span", {
+            style: w(x(o, S))
+          }, null, 4),
+          r("span", { style: h }, c(l.categories[o].name), 1),
+          r("span", { style: b }, c(l.yFormatter ? l.yFormatter(i) : i), 1)
+        ], 64))), 128))
+      ])
     ]));
   }
 });
 export {
-  W as default
+  C as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "type": "module",
   "files": [
     "dist"