iryx-ui 0.14.0 → 0.15.0

package/dist/components/AppShell.vue.d.ts

@@ -7,6 +7,14 @@ export interface AppShellProps {
      */
     scroll?: 'main' | 'page';
     sidebarPosition?: 'left' | 'right';
+    /**
+     * Below `md`, move the sidebar into a drawer and put a trigger for it in
+     * the header. A sidebar narrow enough for a phone is not a sidebar, and
+     * one that simply squeezes takes the content column with it.
+     */
+    mobileNav?: boolean;
+    /** Accessible name for that trigger — override for non-English apps. */
+    navLabel?: string;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: string;
@@ -16,25 +24,42 @@ export interface AppShellProps {
         header?: string;
         body?: string;
         sidebar?: string;
+        headerRow?: string;
+        headerContent?: string;
+        navTrigger?: string;
+        navDrawer?: string;
+        navDrawerBody?: string;
         main?: string;
         footer?: string;
     };
 }
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+declare var __VLS_13: {
+    navOpen: boolean;
+    toggleNav: () => boolean;
+}, __VLS_21: {
+    inDrawer: boolean;
+}, __VLS_23: {}, __VLS_25: {}, __VLS_27: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_8) => any;
+    header?: (props: typeof __VLS_13) => any;
+} & {
+    sidebar?: (props: typeof __VLS_21) => any;
 } & {
-    sidebar?: (props: typeof __VLS_10) => any;
+    sidebar?: (props: typeof __VLS_23) => any;
 } & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_25) => any;
 } & {
-    footer?: (props: typeof __VLS_14) => any;
+    footer?: (props: typeof __VLS_27) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {
+    /** Open or close the mobile navigation drawer from the outside. */
+    navOpen: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & Readonly<{}>, {
     unstyled: boolean;
     as: string;
     scroll: "main" | "page";
     sidebarPosition: "left" | "right";
+    mobileNav: boolean;
+    navLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/AppShell.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,23 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { useElementSize as t } from "../composables/element-size.js";
-import { appShellTheme as n } from "../theme/app-shell.js";
-import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderSlot as p, unref as m, useSlots as h, withCtx as g } from "vue";
-import { Primitive as _ } from "reka-ui";
+import t from "./Icon.js";
+import { useElementSize as n } from "../composables/element-size.js";
+import { appShellTheme as r } from "../theme/app-shell.js";
+import i from "./Drawer.js";
+import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, openBlock as m, ref as h, renderSlot as g, unref as _, useSlots as v, withCtx as y } from "vue";
+import { Menu01Icon as b } from "@hugeicons/core-free-icons";
+import { Primitive as x } from "reka-ui";
 //#region src/components/AppShell.vue?vue&type=script&setup=true&lang.ts
-var v = /*@__PURE__*/ c({
+var S = ["aria-label", "aria-expanded"], C = /*@__PURE__*/ d({
 	__name: "AppShell",
 	props: {
 		as: { default: "div" },
 		scroll: { default: "main" },
 		sidebarPosition: { default: "left" },
+		mobileNav: {
+			type: Boolean,
+			default: !0
+		},
+		navLabel: { default: "Open navigation" },
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -17,35 +25,67 @@ var v = /*@__PURE__*/ c({
 		class: {},
 		ui: {}
 	},
-	setup(c) {
-		let v = c, y = h(), b = e(), x = r(() => v.unstyled ?? b.unstyled), S = f(), { height: C } = t(S), w = r(() => v.scroll === "page" && y.header ? { "--iryx-shell-header-height": `${C.value}px` } : void 0), T = r(() => n({
-			scroll: v.scroll,
-			sidebarPosition: v.sidebarPosition
+	setup(d, { expose: C }) {
+		let w = d, T = v(), E = e(), D = a(() => w.unstyled ?? E.unstyled), O = h(), { height: k } = n(O), A = a(() => w.scroll === "page" && T.header ? { "--iryx-shell-header-height": `${k.value}px` } : void 0), j = h(!1), M = a(() => w.mobileNav && !!T.sidebar), N = a(() => r({
+			scroll: w.scroll,
+			sidebarPosition: w.sidebarPosition,
+			mobileNav: M.value
 		}));
-		function E(e) {
-			let t = v.ui?.[e];
-			return x.value ? t : T.value[e]({ class: t });
+		C({ navOpen: j });
+		function P(e) {
+			let t = w.ui?.[e];
+			return D.value ? t : N.value[e]({ class: t });
 		}
-		return (e, t) => (d(), i(m(_), {
-			as: v.as,
-			style: u(w.value),
-			class: l(x.value ? [v.ui?.root, v.class] : T.value.root({ class: [v.ui?.root, v.class] }))
+		return (e, n) => (m(), o(_(x), {
+			as: w.as,
+			style: p(A.value),
+			class: f(D.value ? [w.ui?.root, w.class] : N.value.root({ class: [w.ui?.root, w.class] }))
 		}, {
-			default: g(() => [
-				e.$slots.header ? (d(), o("div", {
+			default: y(() => [
+				e.$slots.header ? (m(), c("div", {
 					key: 0,
 					ref_key: "header",
-					ref: S,
-					class: l(E("header"))
-				}, [p(e.$slots, "header")], 2)) : a("", !0),
-				s("div", { class: l(E("body")) }, [e.$slots.sidebar ? (d(), o("div", {
+					ref: O,
+					class: f(P("header"))
+				}, [l("div", { class: f(P("headerRow")) }, [M.value ? (m(), c("button", {
 					key: 0,
-					class: l(E("sidebar"))
-				}, [p(e.$slots, "sidebar")], 2)) : a("", !0), s("main", { class: l(E("main")) }, [p(e.$slots, "default")], 2)], 2),
-				e.$slots.footer ? (d(), o("div", {
+					type: "button",
+					"aria-label": w.navLabel,
+					"aria-expanded": j.value,
+					class: f(P("navTrigger")),
+					onClick: n[0] ||= (e) => j.value = !0
+				}, [u(t, { icon: _(b) }, null, 8, ["icon"])], 10, S)) : s("", !0), l("div", { class: f(P("headerContent")) }, [g(e.$slots, "header", {
+					navOpen: j.value,
+					toggleNav: () => j.value = !j.value
+				})], 2)], 2)], 2)) : s("", !0),
+				M.value ? (m(), o(i, {
 					key: 1,
-					class: l(E("footer"))
-				}, [p(e.$slots, "footer")], 2)) : a("", !0)
+					open: j.value,
+					"onUpdate:open": n[1] ||= (e) => j.value = e,
+					side: "left",
+					size: "sm",
+					class: f(P("navDrawer")),
+					ui: {
+						body: P("navDrawerBody"),
+						overlay: "md:hidden",
+						content: "md:hidden"
+					}
+				}, {
+					default: y(() => [g(e.$slots, "sidebar", { inDrawer: !0 })]),
+					_: 3
+				}, 8, [
+					"open",
+					"class",
+					"ui"
+				])) : s("", !0),
+				l("div", { class: f(P("body")) }, [e.$slots.sidebar ? (m(), c("div", {
+					key: 0,
+					class: f(P("sidebar"))
+				}, [g(e.$slots, "sidebar")], 2)) : s("", !0), l("main", { class: f(P("main")) }, [g(e.$slots, "default")], 2)], 2),
+				e.$slots.footer ? (m(), c("div", {
+					key: 2,
+					class: f(P("footer"))
+				}, [g(e.$slots, "footer")], 2)) : s("", !0)
 			]),
 			_: 3
 		}, 8, [
@@ -56,4 +96,4 @@ var v = /*@__PURE__*/ c({
 	}
 });
 //#endregion
-export { v as default };
+export { C as default };

package/dist/components/BarChart.vue.d.ts

@@ -68,6 +68,7 @@ declare var __VLS_6: {
     bandWidth: number;
     labelStep: number;
     bandCentre: (index: number) => number;
+    pointAt: (index: number) => number;
 }, __VLS_8: {
     orientation: import("..").ChartOrientation;
     ticks: number[];
@@ -82,6 +83,7 @@ declare var __VLS_6: {
     bandWidth: number;
     labelStep: number;
     bandCentre: (index: number) => number;
+    pointAt: (index: number) => number;
 };
 type __VLS_Slots = {} & {
     underlay?: (props: typeof __VLS_6) => any;

package/dist/components/BarChart.vue_vue_type_script_setup_true_lang.js

@@ -285,14 +285,14 @@ var ee = ["role", "aria-label"], D = [
 					h("span", { class: v($("tooltipValue")) }, T(Z.value.total), 3)
 				])) : p("", !0)
 			], 6)) : p("", !0)], 2),
-			h("table", { class: v($("table")) }, [
+			h("div", { class: v($("table")) }, [h("table", null, [
 				h("caption", null, T(j.label), 1),
 				h("thead", null, [h("tr", null, [t[2] ||= h("th", { scope: "col" }, " Category ", -1), (x(!0), m(u, null, C(R.value, (e) => (x(), m("th", {
 					key: e.key,
 					scope: "col"
 				}, T(e.name ?? "Value"), 1))), 128))])]),
 				h("tbody", null, [(x(!0), m(u, null, C(j.data, (e, t) => (x(), m("tr", { key: `row-${e.label}-${t}` }, [h("th", ie, T(e.label), 1), (x(!0), m(u, null, C(R.value, (t) => (x(), m("td", { key: t.key }, T(B(e, t.key) == null ? "—" : L(B(e, t.key))), 1))), 128))]))), 128))])
-			], 2)
+			])], 2)
 		], 10, ee));
 	}
 });

package/dist/components/Drawer.vue.d.ts

@@ -78,11 +78,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     unstyled: boolean;
     closeLabel: string;
+    handle: boolean;
     side: DrawerSide;
     modal: boolean | "trap-focus";
     dismissible: boolean;
     showClose: boolean;
-    handle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/LineChart.vue.d.ts

@@ -19,6 +19,20 @@ export interface LineChartProps {
      * overlapping washes muddy into a colour that belongs to neither.
      */
     variant?: 'line' | 'area';
+    /**
+     * How much to curve the line, from `0` (straight segments between
+     * readings) to `1` (fully rounded). Straight by default: a curve claims the
+     * readings run continuously into each other, which is true of a temperature
+     * trace and false of six monthly totals.
+     */
+    tension?: number;
+    /**
+     * Carry the line and its fill flat out to the left and right edges of the
+     * plot. The readings themselves do not move — markers, labels and the
+     * tooltip stay where they are — so the chart fills its box without
+     * pretending to know a value it was never given.
+     */
+    flush?: boolean;
     /** Rendered height in px. Width always fills the container. */
     height?: number;
     /** Target tick count. The axis lands on round numbers, so this is a hint. */
@@ -60,6 +74,7 @@ declare var __VLS_6: {
     bandWidth: number;
     labelStep: number;
     bandCentre: (index: number) => number;
+    pointAt: (index: number) => number;
 }, __VLS_8: {
     orientation: import("..").ChartOrientation;
     ticks: number[];
@@ -74,6 +89,7 @@ declare var __VLS_6: {
     bandWidth: number;
     labelStep: number;
     bandCentre: (index: number) => number;
+    pointAt: (index: number) => number;
 };
 type __VLS_Slots = {} & {
     underlay?: (props: typeof __VLS_6) => any;
@@ -85,9 +101,11 @@ declare const __VLS_base: import("vue").DefineComponent<LineChartProps, {}, {},
     unstyled: boolean;
     data: readonly LineChartDatum[];
     legend: boolean;
+    flush: boolean;
     height: number;
     ticks: number;
     axis: boolean;
+    tension: number;
     zero: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;