@ac-design/design-system 2.0.0 → 2.1.0

package/dist/lib/components/AcKeyValueInput.vue_vue_type_script_setup_true_lang.js

@@ -1,38 +1,39 @@
 import e from "./AcButton.js";
 import t from "./AcInput.js";
 import n from "./AcSelect.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, openBlock as h, ref as g, renderList as ee, renderSlot as _, toDisplayString as v, unref as y, useId as b, useModel as x, watch as te, withCtx as ne, withKeys as S } from "vue";
-import { CircleAlert as re, Plus as C, Trash2 as ie } from "@lucide/vue";
+import { Fragment as r, TransitionGroup as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, openBlock as h, ref as g, renderList as ee, renderSlot as _, toDisplayString as v, unref as y, useId as b, useModel as te, watch as ne, withCtx as x, withKeys as S } from "vue";
+import { Plus as C, Trash as w } from "@lucide/vue";
 //#region src/lib/components/AcKeyValueInput.vue?vue&type=script&setup=true&lang.ts
-var ae = [
+var T = [
 	"aria-labelledby",
 	"aria-label",
 	"aria-describedby"
-], oe = {
+], re = {
 	key: 0,
 	class: "font-normal text-muted"
-}, se = {
+}, ie = {
 	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, ce = {
-	class: "mb-1.5 hidden grid-cols-[minmax(0,1fr)_auto] gap-x-3 sm:grid",
+}, ae = {
+	key: 2,
+	class: "mb-1.5 hidden grid-cols-[minmax(0,1fr)_auto] gap-x-4 sm:grid",
 	"aria-hidden": "true"
-}, le = { key: 0 }, ue = { class: "space-y-3" }, w = [
+}, oe = { key: 0 }, se = [
 	"data-row",
 	"onFocusin",
 	"onFocusout"
-], T = [
+], ce = [
 	"aria-label",
 	"title",
 	"onClick"
 ], E = {
-	key: 3,
+	key: 4,
 	class: "text-base text-muted"
-}, de = {
+}, D = {
 	class: "sr-only",
 	"aria-live": "polite"
-}, D = /*@__PURE__*/ d({
+}, O = /*@__PURE__*/ d({
 	__name: "AcKeyValueInput",
 	props: /*@__PURE__*/ f({
 		label: { default: "" },
@@ -82,239 +83,254 @@ var ae = [
 		modelModifiers: {}
 	}),
 	emits: /*@__PURE__*/ f(["add", "remove"], ["update:modelValue"]),
-	setup(d, { expose: f, emit: D }) {
-		let O = d, k = x(d, "modelValue"), A = D, j = b(), M = `${j}-label`, N = `${j}-hint`, P = `${j}-msg`, F = g(null), I = 0, L = g([]), R = g(null), z = g(""), B = i(() => k.value ?? []), V = i(() => !!O.options?.length), H = i(() => !O.disabled && !O.readonly), U = i(() => O.max !== void 0 && B.value.length >= O.max), fe = i(() => O.addLabel || `Add ${O.itemName}`), pe = i(() => [O.hint && N, O.errorMsg && P].filter(Boolean).join(" ") || void 0), W = i(() => V.value ? "sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_220px]" : "sm:grid-cols-2"), me = i(() => O.size === "small" ? "size-9" : "size-10"), G = i(() => {
+	setup(d, { expose: f, emit: O }) {
+		let k = d, A = te(d, "modelValue"), j = O, M = b(), N = `${M}-label`, P = `${M}-hint`, F = `${M}-msg`, I = g(null), L = 0, R = g([]), z = g(null), B = g(""), V = a(() => A.value ?? []), H = a(() => !!k.options?.length), U = a(() => !k.disabled && !k.readonly), W = a(() => k.max !== void 0 && V.value.length >= k.max), le = a(() => k.addLabel || "Add new"), ue = a(() => [k.hint && P, k.errorMsg && F].filter(Boolean).join(" ") || void 0), G = a(() => H.value ? "sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_256px]" : "sm:grid-cols-2"), de = a(() => k.size === "small" ? "size-[34px]" : "size-[38px]"), K = a(() => {
 			let e = /* @__PURE__ */ new Set();
-			return B.value.map((t, n) => {
+			return V.value.map((t, n) => {
 				let r = {}, i = t.key.trim();
 				if (i) {
-					let a = V.value ? `${i}\u0000${t.option ?? ""}` : i;
-					!O.allowDuplicateKeys && e.has(a) && (r.key = V.value && t.option ? `“${i}” with ${q(t.option)} is already used.` : `“${i}” is already used. Keys must be unique.`), e.add(a), r.key ||= O.validateKey?.(t.key, n, B.value) || void 0;
-				} else t.value && R.value !== L.value[n] && (r.key = `Enter a key, or remove this ${O.itemName}.`);
-				return (i || t.value) && (r.value = O.validateValue?.(t.value, t.key, n, B.value) || void 0), r;
+					let a = H.value ? `${i}\u0000${t.option ?? ""}` : i;
+					!k.allowDuplicateKeys && e.has(a) && (r.key = H.value && t.option ? `“${i}” with ${q(t.option)} is already used.` : `“${i}” is already used. Keys must be unique.`), e.add(a), r.key ||= k.validateKey?.(t.key, n, V.value) || void 0;
+				} else t.value && z.value !== R.value[n] && (r.key = `Enter a key, or remove this ${k.itemName}.`);
+				return (i || t.value) && (r.value = k.validateValue?.(t.value, t.key, n, V.value) || void 0), r;
 			});
-		}), K = i(() => G.value.some((e) => e.key || e.value));
+		}), fe = a(() => K.value.some((e) => e.key || e.value));
 		function q(e) {
-			return O.options?.find((t) => t.value === e)?.label ?? e;
+			return k.options?.find((t) => t.value === e)?.label ?? e;
 		}
 		function J(e) {
-			let t = B.value[e]?.key.trim();
-			return t ? `${O.itemName} ${t}` : `${O.itemName} ${e + 1}`;
+			let t = V.value[e]?.key.trim();
+			return t ? `${k.itemName} ${t}` : `${k.itemName} ${e + 1}`;
 		}
 		function Y(e) {
 			return e.charAt(0).toUpperCase() + e.slice(1);
 		}
 		function X(e) {
-			z.value = "", p(() => z.value = e);
+			B.value = "", p(() => B.value = e);
 		}
 		function Z(e, t) {
 			p(() => {
-				((F.value?.querySelector(`[data-row="${e}"]`))?.querySelector(t === "remove" ? "[data-action='remove']" : `[data-cell="${t}"]`) ?? F.value?.querySelector("[data-action='add']"))?.focus();
+				([...I.value?.querySelectorAll(`[data-row="${e}"]`) ?? []].at(-1)?.querySelector(t === "remove" ? "[data-action='remove']" : `[data-cell="${t}"]`) ?? I.value?.querySelector("[data-action='add']"))?.focus();
 			});
 		}
 		function Q(e, t) {
-			k.value = B.value.map((n, r) => r === e ? {
+			A.value = V.value.map((n, r) => r === e ? {
 				...n,
 				...t
 			} : n);
 		}
 		function $() {
-			if (!H.value || U.value) return;
+			if (!U.value || W.value) return;
 			let e = {
 				key: "",
 				value: ""
 			};
-			V.value && (e.option = O.defaultOption ?? O.options[0].value), L.value = [...L.value, I++], k.value = [...B.value, e];
-			let t = B.value.length;
-			A("add", t), X(`${Y(O.itemName)} ${t + 1} added.`), Z(t, "key");
+			H.value && (e.option = k.defaultOption ?? k.options[0].value), R.value = [...R.value, L++], A.value = [...V.value, e];
+			let t = V.value.length;
+			j("add", t), X(`${Y(k.itemName)} ${t + 1} added.`), Z(t, "key");
 		}
-		function he(e) {
-			if (!H.value) return;
-			let t = B.value[e];
+		function pe(e) {
+			if (!U.value) return;
+			let t = V.value[e];
 			if (!t) return;
 			let n = J(e);
-			L.value = L.value.filter((t, n) => n !== e), k.value = B.value.filter((t, n) => n !== e), A("remove", t, e), X(`${Y(n)} removed.`);
-			let r = B.value.length;
-			r ? Z(Math.min(e, r - 1), "remove") : p(() => F.value?.querySelector("[data-action='add']")?.focus());
+			R.value = R.value.filter((t, n) => n !== e), A.value = V.value.filter((t, n) => n !== e), j("remove", t, e), X(`${Y(n)} removed.`);
+			let r = V.value.length;
+			r ? Z(Math.min(e, r - 1), "remove") : p(() => I.value?.querySelector("[data-action='add']")?.focus());
 		}
-		function ge(e, t) {
+		function me(e, t) {
 			e.isComposing || (e.preventDefault(), Z(t, "value"));
 		}
-		function _e(e, t) {
-			e.isComposing || (e.preventDefault(), t < B.value.length - 1 ? Z(t + 1, "key") : U.value || $());
+		function he(e, t) {
+			e.isComposing || (e.preventDefault(), t < V.value.length - 1 ? Z(t + 1, "key") : W.value || $());
 		}
-		function ve(e, t) {
+		function ge(e, t) {
 			let n = e.currentTarget, r = e.relatedTarget;
-			r && (n.contains(r) || r instanceof Element && r.closest("[data-testid='ac-select-panel']")) || R.value === t && (R.value = null);
+			r && (n.contains(r) || r instanceof Element && r.closest("[data-testid='ac-select-panel']")) || z.value === t && (z.value = null);
 		}
-		return te(() => B.value.length, (e) => {
-			L.value.length !== e && (L.value = Array.from({ length: e }, () => I++));
+		return ne(() => V.value.length, (e) => {
+			R.value.length !== e && (R.value = Array.from({ length: e }, () => L++));
 		}, { immediate: !0 }), f({
 			add: $,
 			focus: () => Z(0, "key"),
-			hasErrors: () => K.value
-		}), (i, f) => (h(), s("div", {
+			hasErrors: () => fe.value
+		}), (a, f) => (h(), c("div", {
 			ref_key: "root",
-			ref: F,
+			ref: I,
 			role: "group",
-			"aria-labelledby": d.label ? M : void 0,
+			"aria-labelledby": d.label ? N : void 0,
 			"aria-label": d.label ? void 0 : `${Y(d.itemName)}s`,
-			"aria-describedby": pe.value,
+			"aria-describedby": ue.value,
 			class: m(d.disabled && "opacity-50"),
 			"data-ac-ds": "",
 			"data-testid": "ac-key-value-input"
 		}, [
-			d.label ? (h(), s("div", {
+			d.label ? (h(), c("div", {
 				key: 0,
-				id: M,
+				id: N,
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
 			}, [
-				c("span", null, v(d.label), 1),
-				d.readonly ? (h(), s("span", oe, "(read only)")) : o("", !0),
-				d.required ? (h(), s("span", se, "*")) : o("", !0)
-			])) : o("", !0),
-			d.hint ? (h(), s("p", {
+				l("span", null, v(d.label), 1),
+				d.readonly ? (h(), c("span", re, "(read only)")) : s("", !0),
+				d.required ? (h(), c("span", ie, "*")) : s("", !0)
+			])) : s("", !0),
+			d.hint ? (h(), c("p", {
 				key: 1,
-				id: N,
+				id: P,
 				class: "mb-2 text-base text-muted"
-			}, v(d.hint), 1)) : o("", !0),
-			B.value.length ? (h(), s(r, { key: 2 }, [c("div", ce, [c("div", { class: m(["grid gap-x-3 text-base font-medium text-muted", W.value]) }, [
-				c("span", null, v(d.keyLabel), 1),
-				c("span", null, v(d.valueLabel), 1),
-				V.value ? (h(), s("span", le, v(d.optionLabel), 1)) : o("", !0)
-			], 2), H.value ? (h(), s("span", {
+			}, v(d.hint), 1)) : s("", !0),
+			V.value.length ? (h(), c("div", ae, [l("div", { class: m(["grid gap-x-4 text-base font-medium text-muted", G.value]) }, [
+				l("span", null, v(d.keyLabel), 1),
+				l("span", null, v(d.valueLabel), 1),
+				H.value ? (h(), c("span", oe, v(d.optionLabel), 1)) : s("", !0)
+			], 2), U.value ? (h(), c("span", {
 				key: 0,
-				class: m(d.size === "small" ? "w-9" : "w-10")
-			}, null, 2)) : o("", !0)]), c("div", ue, [(h(!0), s(r, null, ee(B.value, (e, r) => (h(), s("div", {
-				key: L.value[r] ?? r,
-				"data-row": r,
-				class: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-2 max-sm:rounded-10 max-sm:border max-sm:border-border max-sm:bg-surface max-sm:p-3 sm:gap-x-3",
-				onFocusin: (e) => R.value = L.value[r] ?? null,
-				onFocusout: (e) => ve(e, L.value[r] ?? -1)
-			}, [c("div", { class: m(["grid items-start gap-x-3 gap-y-3", W.value]) }, [
-				u(t, {
-					"data-cell": "key",
-					"model-value": e.key,
-					label: `${d.keyLabel} ${r + 1}`,
-					placeholder: d.keyPlaceholder,
-					size: d.size,
-					disabled: d.disabled,
-					readonly: d.readonly,
-					"error-msg": G.value[r]?.key,
-					autocomplete: "off",
-					spellcheck: "false",
-					class: m(["sm:[&>label:first-child]:sr-only", d.mono && "[&_input]:font-mono"]),
-					"onUpdate:modelValue": (e) => Q(r, { key: String(e) }),
-					onKeydown: S((e) => ge(e, r), ["enter"])
-				}, null, 8, [
-					"model-value",
-					"label",
-					"placeholder",
-					"size",
-					"disabled",
-					"readonly",
-					"error-msg",
-					"class",
-					"onUpdate:modelValue",
-					"onKeydown"
-				]),
-				u(t, {
-					"data-cell": "value",
-					"model-value": e.value,
-					label: `${d.valueLabel} ${r + 1}`,
-					placeholder: d.valuePlaceholder,
-					size: d.size,
-					disabled: d.disabled,
-					readonly: d.readonly,
-					"error-msg": G.value[r]?.value,
-					autocomplete: "off",
-					spellcheck: "false",
-					class: "sm:[&>label:first-child]:sr-only",
-					"onUpdate:modelValue": (e) => Q(r, { value: String(e) }),
-					onKeydown: S((e) => _e(e, r), ["enter"])
-				}, null, 8, [
-					"model-value",
-					"label",
-					"placeholder",
-					"size",
-					"disabled",
-					"readonly",
-					"error-msg",
-					"onUpdate:modelValue",
-					"onKeydown"
-				]),
-				V.value && d.readonly ? (h(), a(t, {
+				class: m(d.size === "small" ? "w-[34px]" : "w-[38px]")
+			}, null, 2)) : s("", !0)])) : s("", !0),
+			V.value.length || U.value ? (h(), o(i, {
+				key: 3,
+				tag: "div",
+				class: "relative space-y-4",
+				"enter-active-class": "transition-all duration-300 ease-out motion-reduce:transition-none",
+				"enter-from-class": "-translate-y-2.5 opacity-0",
+				"leave-active-class": "absolute w-full transition-all duration-300 ease-out motion-reduce:transition-none",
+				"leave-to-class": "translate-x-5 opacity-0",
+				"move-class": "transition-transform duration-300 ease-out motion-reduce:transition-none"
+			}, {
+				default: x(() => [(h(!0), c(r, null, ee(V.value, (e, r) => (h(), c("div", {
+					key: R.value[r] ?? r,
+					"data-row": r,
+					class: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4 max-sm:rounded-10 max-sm:border max-sm:border-border max-sm:bg-surface max-sm:p-3",
+					onFocusin: (e) => z.value = R.value[r] ?? null,
+					onFocusout: (e) => ge(e, R.value[r] ?? -1)
+				}, [l("div", { class: m(["grid items-start gap-x-4 gap-y-3 [&_div:has(>input)]:rounded-8 [&_input]:rounded-8 [&_input]:font-medium", G.value]) }, [
+					u(t, {
+						"data-cell": "key",
+						"model-value": e.key,
+						label: `${d.keyLabel} ${r + 1}`,
+						placeholder: d.keyPlaceholder,
+						size: d.size,
+						disabled: d.disabled,
+						readonly: d.readonly,
+						"error-msg": K.value[r]?.key,
+						autocomplete: "off",
+						spellcheck: "false",
+						class: m(["sm:[&>label:first-child]:sr-only", d.mono && "[&_input]:font-mono"]),
+						"onUpdate:modelValue": (e) => Q(r, { key: String(e) }),
+						onKeydown: S((e) => me(e, r), ["enter"])
+					}, null, 8, [
+						"model-value",
+						"label",
+						"placeholder",
+						"size",
+						"disabled",
+						"readonly",
+						"error-msg",
+						"class",
+						"onUpdate:modelValue",
+						"onKeydown"
+					]),
+					u(t, {
+						"data-cell": "value",
+						"model-value": e.value,
+						label: `${d.valueLabel} ${r + 1}`,
+						placeholder: d.valuePlaceholder,
+						size: d.size,
+						disabled: d.disabled,
+						readonly: d.readonly,
+						"error-msg": K.value[r]?.value,
+						autocomplete: "off",
+						spellcheck: "false",
+						class: "sm:[&>label:first-child]:sr-only",
+						"onUpdate:modelValue": (e) => Q(r, { value: String(e) }),
+						onKeydown: S((e) => he(e, r), ["enter"])
+					}, null, 8, [
+						"model-value",
+						"label",
+						"placeholder",
+						"size",
+						"disabled",
+						"readonly",
+						"error-msg",
+						"onUpdate:modelValue",
+						"onKeydown"
+					]),
+					H.value && d.readonly ? (h(), o(t, {
+						key: 0,
+						"data-cell": "option",
+						"model-value": e.option ? q(e.option) : "",
+						label: `${d.optionLabel} ${r + 1}`,
+						size: d.size,
+						readonly: "",
+						class: "sm:[&>label:first-child]:sr-only"
+					}, null, 8, [
+						"model-value",
+						"label",
+						"size"
+					])) : H.value ? (h(), o(n, {
+						key: 1,
+						"data-cell": "option",
+						"model-value": e.option ?? null,
+						options: d.options,
+						label: `${d.optionLabel} ${r + 1}`,
+						size: d.size,
+						disabled: d.disabled,
+						class: "sm:[&>div:first-child]:sr-only",
+						"onUpdate:modelValue": (e) => Q(r, { option: e ?? void 0 })
+					}, null, 8, [
+						"model-value",
+						"options",
+						"label",
+						"size",
+						"disabled",
+						"onUpdate:modelValue"
+					])) : s("", !0)
+				], 2), U.value ? (h(), c("button", {
 					key: 0,
-					"data-cell": "option",
-					"model-value": e.option ? q(e.option) : "",
-					label: `${d.optionLabel} ${r + 1}`,
-					size: d.size,
-					readonly: "",
-					class: "sm:[&>label:first-child]:sr-only"
-				}, null, 8, [
-					"model-value",
-					"label",
-					"size"
-				])) : V.value ? (h(), a(n, {
-					key: 1,
-					"data-cell": "option",
-					"model-value": e.option ?? null,
-					options: d.options,
-					label: `${d.optionLabel} ${r + 1}`,
-					size: d.size,
-					disabled: d.disabled,
-					class: "sm:[&>div:first-child]:sr-only",
-					"onUpdate:modelValue": (e) => Q(r, { option: e ?? void 0 })
-				}, null, 8, [
-					"model-value",
-					"options",
-					"label",
-					"size",
-					"disabled",
-					"onUpdate:modelValue"
-				])) : o("", !0)
-			], 2), H.value ? (h(), s("button", {
-				key: 0,
-				type: "button",
-				"data-action": "remove",
-				class: m(["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-10 text-muted transition-colors duration-200 hover:bg-danger/10 hover:text-danger-strong focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none max-sm:mt-7", me.value]),
-				"aria-label": `Remove ${J(r)}`,
-				title: `Remove ${d.itemName}`,
-				onClick: (e) => he(r)
-			}, [u(y(ie), {
-				class: "size-4",
-				"aria-hidden": "true"
-			})], 10, T)) : o("", !0)], 40, w))), 128))])], 64)) : H.value ? o("", !0) : (h(), s("p", E, "No " + v(d.itemName) + "s.", 1)),
-			_(i.$slots, "footer"),
-			H.value ? (h(), s("div", {
-				key: 4,
-				class: m(["flex items-center gap-3", B.value.length || i.$slots.footer ? "mt-3" : ""])
+					type: "button",
+					"data-action": "remove",
+					class: m(["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-8 bg-danger/5 text-danger/60 transition-all duration-200 hover:bg-danger/10 hover:text-danger focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none max-sm:mt-7", de.value]),
+					"aria-label": `Remove ${J(r)}`,
+					title: `Remove ${d.itemName}`,
+					onClick: (e) => pe(r)
+				}, [u(y(w), {
+					class: "size-[18px]",
+					"aria-hidden": "true"
+				})], 10, ce)) : s("", !0)], 40, se))), 128))]),
+				_: 1
+			})) : (h(), c("p", E, "No " + v(d.itemName) + "s.", 1)),
+			_(a.$slots, "footer"),
+			U.value ? (h(), c("div", {
+				key: 5,
+				class: m(["flex items-center gap-3", V.value.length || a.$slots.footer ? "mt-2" : ""])
 			}, [u(e, {
 				"data-action": "add",
-				title: fe.value,
+				title: le.value,
+				"aria-label": d.addLabel ? void 0 : `Add new ${d.itemName}`,
 				size: "small",
 				variant: "light",
-				disabled: U.value,
+				disabled: W.value,
 				onClick: $
 			}, {
-				icon: ne(() => [u(y(C), { "aria-hidden": "true" })]),
+				icon: x(() => [u(y(C), { "aria-hidden": "true" })]),
 				_: 1
-			}, 8, ["title", "disabled"]), d.max === void 0 ? o("", !0) : (h(), s("span", {
+			}, 8, [
+				"title",
+				"aria-label",
+				"disabled"
+			]), d.max === void 0 ? s("", !0) : (h(), c("span", {
 				key: 0,
-				class: m(["text-xs text-muted tabular-nums", U.value && "font-medium text-heading"])
-			}, v(B.value.length) + " of " + v(d.max), 3))], 2)) : o("", !0),
-			d.errorMsg ? (h(), s("p", {
-				key: 5,
-				id: P,
-				class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+				class: m(["text-xs text-muted tabular-nums", W.value && "font-medium text-heading"])
+			}, v(V.value.length) + " of " + v(d.max), 3))], 2)) : s("", !0),
+			d.errorMsg ? (h(), c("p", {
+				key: 6,
+				id: F,
+				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, [u(y(re), {
-				class: "size-4 shrink-0",
-				"aria-hidden": "true"
-			}), l(" " + v(d.errorMsg), 1)])) : o("", !0),
-			c("p", de, v(z.value), 1)
-		], 10, ae));
+			}, v(d.errorMsg), 1)) : s("", !0),
+			l("p", D, v(B.value), 1)
+		], 10, T));
 	}
 });
 //#endregion
-export { D as default };
+export { O as default };

package/dist/lib/components/AcLineChart.vue.d.ts

@@ -6,6 +6,8 @@ export interface Props extends XYChartProps {
     curve?: ChartCurve;
     /** Line thickness in px. */
     lineWidth?: number;
+    /** Draws a dot on every point. `auto` shows them up to 60 rows, where they still read as points. */
+    points?: boolean | "auto";
 }
 type __VLS_Slots = {
     /** Replaces the tooltip body for the hovered row. */
@@ -16,11 +18,15 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     title: string;
     description: string;
     height: number;
+    points: boolean | "auto";
     loading: boolean;
+    animation: boolean;
     tooltip: boolean;
     emptyText: string;
     lineWidth: number;
+    renderer: "canvas" | "svg";
     gridLines: boolean;
+    zoom: boolean;
     xFormatter: (value: Date | number | string) => string;
     yFormatter: (value: number) => string;
     xLabel: string;