rei-kit 0.17.1 → 0.18.0

package/dist/web.js

@@ -1,20 +1,20 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
-import { Fragment, Teleport, Transition, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, onBeforeUnmount, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useModel, watch, withCtx, withModifiers } from "vue";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, onBeforeUnmount, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useModel, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { RouterLink } from "vue-router";
 //#region src/web/BaseAccordion.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = { class: "rk-accordion" };
-var _hoisted_2$1 = [
+var _hoisted_1$7 = { class: "rk-accordion" };
+var _hoisted_2$7 = [
 	"aria-expanded",
 	"aria-controls",
 	"onClick"
 ];
-var _hoisted_3$1 = { class: "rk-accordion-title" };
-var _hoisted_4$1 = {
+var _hoisted_3$5 = { class: "rk-accordion-title" };
+var _hoisted_4$4 = {
 	class: "rk-accordion-mark",
 	"aria-hidden": "true"
 };
-var _hoisted_5$1 = ["id"];
-var _hoisted_6$1 = { class: "rk-accordion-clip" };
+var _hoisted_5$3 = ["id"];
+var _hoisted_6$2 = { class: "rk-accordion-clip" };
 //#endregion
 //#region src/web/BaseAccordion.vue
 var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -36,7 +36,7 @@ var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			else open.value = __props.multiple ? [...open.value, key] : [key];
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("ul", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+			return openBlock(), createElementBlock("ul", _hoisted_1$7, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 				return openBlock(), createElementBlock("li", {
 					key: item.key,
 					class: "rk-accordion-item"
@@ -47,26 +47,112 @@ var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 						"aria-expanded": isOpen(item.key),
 						"aria-controls": `${unref(uid)}-${item.key}`,
 						onClick: ($event) => toggle(item.key)
-					}, [createElementVNode("span", _hoisted_3$1, toDisplayString(item.title), 1), createElementVNode("span", _hoisted_4$1, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "rk-accordion-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-accordion-bar rk-accordion-bar-turn", { "is-open": isOpen(item.key) }]) }, null, 2)])], 8, _hoisted_2$1)]),
+					}, [createElementVNode("span", _hoisted_3$5, toDisplayString(item.title), 1), createElementVNode("span", _hoisted_4$4, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "rk-accordion-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-accordion-bar rk-accordion-bar-turn", { "is-open": isOpen(item.key) }]) }, null, 2)])], 8, _hoisted_2$7)]),
 					_: 2
 				}, 1024)), createElementVNode("div", {
 					id: `${unref(uid)}-${item.key}`,
 					class: normalizeClass(["rk-accordion-panel", { "is-open": isOpen(item.key) }])
-				}, [createElementVNode("div", _hoisted_6$1, [createElementVNode("div", { class: normalizeClass(["rk-accordion-body", { "is-open": isOpen(item.key) }]) }, [renderSlot(_ctx.$slots, "default", {
+				}, [createElementVNode("div", _hoisted_6$2, [createElementVNode("div", { class: normalizeClass(["rk-accordion-body", { "is-open": isOpen(item.key) }]) }, [renderSlot(_ctx.$slots, "default", {
 					item,
 					open: isOpen(item.key)
-				}, void 0, true)], 2)])], 10, _hoisted_5$1)]);
+				}, void 0, true)], 2)])], 10, _hoisted_5$3)]);
 			}), 128))]);
 		};
 	}
 }), [["__scopeId", "data-v-00091812"]]);
 //#endregion
+//#region src/web/BaseBreadcrumb.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$6 = ["aria-label"];
+var _hoisted_2$6 = { class: "rk-crumbs" };
+var _hoisted_3$4 = {
+	key: 1,
+	class: "rk-crumb-current",
+	"aria-current": "page"
+};
+var _hoisted_4$3 = {
+	key: 2,
+	class: "rk-crumb-sep",
+	"aria-hidden": "true"
+};
+//#endregion
+//#region src/web/BaseBreadcrumb.vue
+var BaseBreadcrumb_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseBreadcrumb",
+	props: {
+		items: {},
+		label: { default: "" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", { "aria-label": __props.label || void 0 }, [createElementVNode("ol", _hoisted_2$6, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createElementBlock("li", {
+					key: item.label,
+					class: "rk-crumb"
+				}, [item.to ? (openBlock(), createBlock(unref(RouterLink), {
+					key: 0,
+					to: item.to,
+					class: "rk-crumb-link"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+					_: 2
+				}, 1032, ["to"])) : (openBlock(), createElementBlock("span", _hoisted_3$4, toDisplayString(item.label), 1)), index < __props.items.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$3, "/")) : createCommentVNode("", true)]);
+			}), 128))])], 8, _hoisted_1$6);
+		};
+	}
+}), [["__scopeId", "data-v-85ee4b4e"]]);
+//#endregion
+//#region src/web/BaseDisclosure.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$5 = { class: "rk-disclosure" };
+var _hoisted_2$5 = ["aria-expanded", "aria-controls"];
+var _hoisted_3$3 = { class: "rk-disclosure-title" };
+var _hoisted_4$2 = {
+	class: "rk-disclosure-mark",
+	"aria-hidden": "true"
+};
+var _hoisted_5$2 = ["id"];
+var _hoisted_6$1 = { class: "rk-disclosure-clip" };
+//#endregion
+//#region src/web/BaseDisclosure.vue
+var BaseDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseDisclosure",
+	props: /*@__PURE__*/ mergeModels({
+		title: {},
+		headingLevel: { default: 3 }
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const open = useModel(__props, "modelValue");
+		const id = useId();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [(openBlock(), createBlock(resolveDynamicComponent(`h${__props.headingLevel}`), null, {
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					class: "rk-disclosure-control",
+					"aria-expanded": open.value,
+					"aria-controls": unref(id),
+					onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
+				}, [createElementVNode("span", _hoisted_3$3, toDisplayString(__props.title), 1), createElementVNode("span", _hoisted_4$2, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "rk-disclosure-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-disclosure-bar rk-disclosure-turn", { "is-open": open.value }]) }, null, 2)])], 8, _hoisted_2$5)]),
+				_: 1
+			})), createElementVNode("div", {
+				id: unref(id),
+				class: normalizeClass(["rk-disclosure-panel", { "is-open": open.value }])
+			}, [createElementVNode("div", _hoisted_6$1, [createElementVNode("div", { class: normalizeClass(["rk-disclosure-body", { "is-open": open.value }]) }, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2)])], 10, _hoisted_5$2)]);
+		};
+	}
+}), [["__scopeId", "data-v-fef7de4d"]]);
+//#endregion
 //#region src/web/BaseModal.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = ["role", "aria-label"];
-var _hoisted_2 = { class: "rk-modal-head" };
-var _hoisted_3 = { class: "rk-modal-title" };
-var _hoisted_4 = ["aria-label"];
-var _hoisted_5 = { class: "rk-modal-body" };
+var _hoisted_1$4 = ["role", "aria-label"];
+var _hoisted_2$4 = { class: "rk-modal-head" };
+var _hoisted_3$2 = { class: "rk-modal-title" };
+var _hoisted_4$1 = ["aria-label"];
+var _hoisted_5$1 = { class: "rk-modal-body" };
 var _hoisted_6 = {
 	key: 0,
 	class: "rk-modal-actions"
@@ -180,7 +266,7 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					"aria-label": __props.title,
 					tabindex: "-1"
 				}, [
-					createElementVNode("div", _hoisted_2, [createElementVNode("h2", _hoisted_3, toDisplayString(__props.title), 1), __props.dismissible ? (openBlock(), createElementBlock("button", {
+					createElementVNode("div", _hoisted_2$4, [createElementVNode("h2", _hoisted_3$2, toDisplayString(__props.title), 1), __props.dismissible ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						type: "button",
 						class: "rk-modal-close",
@@ -194,18 +280,222 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					}, [createElementVNode("path", {
 						d: "M18 6 6 18M6 6l12 12",
 						"stroke-linecap": "round"
-					})], -1)])], 8, _hoisted_4)) : createCommentVNode("", true)]),
-					createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+					})], -1)])], 8, _hoisted_4$1)) : createCommentVNode("", true)]),
+					createElementVNode("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 					_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])) : createCommentVNode("", true)
-				], 8, _hoisted_1$1)], 32)) : createCommentVNode("", true)]),
+				], 8, _hoisted_1$4)], 32)) : createCommentVNode("", true)]),
 				_: 3
 			})]);
 		};
 	}
 }), [["__scopeId", "data-v-e092f731"]]);
 //#endregion
+//#region src/web/BasePagination.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = ["aria-label"];
+var _hoisted_2$3 = ["disabled", "aria-label"];
+var _hoisted_3$1 = {
+	key: 0,
+	class: "rk-pager-gap",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = ["aria-current", "onClick"];
+var _hoisted_5 = ["disabled", "aria-label"];
+/**
+* Moving between pages of a list.
+*
+* A `nav` of buttons rather than links, because this component does not know
+* whether the app pages by route, by query or in memory. It emits a number and
+* the app decides what that means.
+*
+* ## The ellipsis
+*
+* Every page number is unusable past about a dozen, and cutting to
+* "1 … 7 8 9 … 40" is what every list does. The window is a fixed size around
+* the current page and the first and last are always present, so the control
+* never changes width as you move through it — a row of numbers that reflows
+* under the pointer is a row you have to re-aim at.
+*
+* The gap is a `<span>`, not a disabled button: it is not a control, and
+* announcing it as one gives a screen reader something to try to press.
+*/
+var GAP = "gap";
+//#endregion
+//#region src/web/BasePagination.vue
+var BasePagination_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BasePagination",
+	props: {
+		page: {},
+		pages: {},
+		siblings: { default: 1 },
+		label: { default: "" },
+		previousLabel: {},
+		nextLabel: {}
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = computed(() => {
+			if (__props.pages <= 1) return [1];
+			const first = 1;
+			const last = __props.pages;
+			if (__props.pages <= __props.siblings * 2 + 5) return Array.from({ length: __props.pages }, (_, i) => i + 1);
+			const from = Math.max(2, __props.page - __props.siblings);
+			const to = Math.min(last - 1, __props.page + __props.siblings);
+			const out = [first];
+			if (from > 2) out.push(GAP);
+			for (let n = from; n <= to; n++) out.push(n);
+			if (to < last - 1) out.push(GAP);
+			if (last > first) out.push(last);
+			return out;
+		});
+		const go = (next) => {
+			if (next >= 1 && next <= __props.pages && next !== __props.page) emit("change", next);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				class: "rk-pager",
+				"aria-label": __props.label || void 0
+			}, [
+				createElementVNode("button", {
+					type: "button",
+					class: "rk-pager-step",
+					disabled: __props.page <= 1,
+					"aria-label": __props.previousLabel,
+					onClick: _cache[0] || (_cache[0] = ($event) => go(__props.page - 1))
+				}, " ‹ ", 8, _hoisted_2$3),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(slots.value, (slot, index) => {
+					return openBlock(), createElementBlock(Fragment, { key: `${slot}-${index}` }, [slot === "gap" ? (openBlock(), createElementBlock("span", _hoisted_3$1, "…")) : (openBlock(), createElementBlock("button", {
+						key: 1,
+						type: "button",
+						class: normalizeClass(["rk-pager-page", { "is-active": slot === __props.page }]),
+						"aria-current": slot === __props.page ? "page" : void 0,
+						onClick: ($event) => go(slot)
+					}, toDisplayString(slot), 11, _hoisted_4))], 64);
+				}), 128)),
+				createElementVNode("button", {
+					type: "button",
+					class: "rk-pager-step",
+					disabled: __props.page >= __props.pages,
+					"aria-label": __props.nextLabel,
+					onClick: _cache[1] || (_cache[1] = ($event) => go(__props.page + 1))
+				}, " › ", 8, _hoisted_5)
+			], 8, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-cc4bbb58"]]);
+//#endregion
+//#region src/web/BaseTabs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = ["aria-label"];
+var _hoisted_2$2 = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"tabindex",
+	"onClick"
+];
+var _hoisted_3 = ["id", "aria-labelledby"];
+//#endregion
+//#region src/web/BaseTabs.vue
+var BaseTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseTabs",
+	props: /*@__PURE__*/ mergeModels({
+		items: {},
+		label: { default: "" }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const active = useModel(__props, "modelValue");
+		const uid = useId();
+		const tabs = ref([]);
+		const tabId = (key) => `${uid}-tab-${key}`;
+		const panelId = (key) => `${uid}-panel-${key}`;
+		function select(key, focus = false) {
+			active.value = key;
+			if (!focus) return;
+			const index = __props.items.findIndex((item) => item.key === key);
+			requestAnimationFrame(() => tabs.value[index]?.focus());
+		}
+		function onKeydown(event) {
+			const index = __props.items.findIndex((item) => item.key === active.value);
+			if (index < 0) return;
+			const last = __props.items.length - 1;
+			let next;
+			if (event.key === "ArrowRight") next = index === last ? 0 : index + 1;
+			else if (event.key === "ArrowLeft") next = index === 0 ? last : index - 1;
+			else if (event.key === "Home") next = 0;
+			else if (event.key === "End") next = last;
+			else return;
+			event.preventDefault();
+			const item = __props.items[next];
+			if (item) select(item.key, true);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [createElementVNode("div", {
+				class: "rk-tabs",
+				role: "tablist",
+				"aria-label": __props.label || void 0,
+				onKeydown
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+				return openBlock(), createElementBlock("button", {
+					key: item.key,
+					ref_for: true,
+					ref_key: "tabs",
+					ref: tabs,
+					type: "button",
+					role: "tab",
+					class: normalizeClass(["rk-tab", { "is-active": item.key === active.value }]),
+					id: tabId(item.key),
+					"aria-selected": item.key === active.value,
+					"aria-controls": panelId(item.key),
+					tabindex: item.key === active.value ? 0 : -1,
+					onClick: ($event) => select(item.key)
+				}, toDisplayString(item.label), 11, _hoisted_2$2);
+			}), 128))], 40, _hoisted_1$2), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+				return withDirectives((openBlock(), createElementBlock("div", {
+					key: item.key,
+					role: "tabpanel",
+					class: "rk-tabpanel",
+					id: panelId(item.key),
+					"aria-labelledby": tabId(item.key),
+					tabindex: "0"
+				}, [renderSlot(_ctx.$slots, "default", {
+					item,
+					active: active.value
+				}, void 0, true)], 8, _hoisted_3)), [[vShow, item.key === active.value]]);
+			}), 128))]);
+		};
+	}
+}), [["__scopeId", "data-v-b854e7f5"]]);
+//#endregion
+//#region src/web/BaseTooltip.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "rk-tip" };
+var _hoisted_2$1 = ["id"];
+//#endregion
+//#region src/web/BaseTooltip.vue
+var BaseTooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseTooltip",
+	props: {
+		label: {},
+		placement: { default: "top" }
+	},
+	setup(__props) {
+		const id = useId();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", _hoisted_1$1, [renderSlot(_ctx.$slots, "default", { describedBy: unref(id) }, void 0, true), createElementVNode("span", {
+				id: unref(id),
+				role: "tooltip",
+				class: normalizeClass(["rk-tip-bubble", `is-${__props.placement}`])
+			}, toDisplayString(__props.label), 11, _hoisted_2$1)]);
+		};
+	}
+}), [["__scopeId", "data-v-3ed61bd4"]]);
+//#endregion
 //#region src/web/NavLinks.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { class: "rk-nav-inner" };
 //#endregion
 //#region src/web/NavLinks.vue
 var NavLinks_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -217,10 +507,7 @@ var NavLinks_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("nav", {
-				class: "rk-nav",
-				"aria-label": __props.label || void 0
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+			return openBlock(), createElementBlock("nav", { "aria-label": __props.label || void 0 }, [createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 				return openBlock(), createBlock(unref(RouterLink), {
 					key: item.key,
 					to: item.to,
@@ -237,11 +524,11 @@ var NavLinks_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					"class",
 					"aria-current"
 				]);
-			}), 128))], 8, _hoisted_1);
+			}), 128))])], 8, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-85e7ac48"]]);
+}), [["__scopeId", "data-v-5e640548"]]);
 //#endregion
-export { BaseAccordion_default as BaseAccordion, BaseModal_default as BaseModal, NavLinks_default as NavLinks };
+export { BaseAccordion_default as BaseAccordion, BaseBreadcrumb_default as BaseBreadcrumb, BaseDisclosure_default as BaseDisclosure, BaseModal_default as BaseModal, BasePagination_default as BasePagination, BaseTabs_default as BaseTabs, BaseTooltip_default as BaseTooltip, NavLinks_default as NavLinks };
 
 //# sourceMappingURL=web.js.map