blessing-ui 0.1.0

package/dist/components/BlessContainer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,22 @@
+import { createBlock as e, defineComponent as t, normalizeClass as n, openBlock as r, renderSlot as i, resolveDynamicComponent as a, withCtx as o } from "vue";
+//#region src/components/BlessContainer.vue?vue&type=script&setup=true&lang.ts
+var s = /*@__PURE__*/ t({
+	name: "BlessContainer",
+	__name: "BlessContainer",
+	props: {
+		as: { default: "div" },
+		size: { default: "lg" },
+		padded: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(t) {
+		return (s, c) => (r(), e(a(t.as), { class: n(["bless-container", [`bless-container--${t.size}`, { "bless-container--padded": t.padded }]]) }, {
+			default: o(() => [i(s.$slots, "default")]),
+			_: 3
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { s as default };

package/dist/components/BlessContextMenu.js

@@ -0,0 +1,5 @@
+import e from "./BlessContextMenu.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/BlessContextMenu.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,23 @@
+import { BlessMenuItem } from './menu';
+type __VLS_Props = {
+    items: BlessMenuItem[];
+    checked?: Record<string, boolean>;
+    radios?: Record<string, string>;
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: BlessMenuItem) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: BlessMenuItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BlessContextMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,34 @@
+import e from "./BlessDropdownMenu.js";
+import { createBlock as t, defineComponent as n, openBlock as r, renderSlot as i, withCtx as a } from "vue";
+//#region src/components/BlessContextMenu.vue?vue&type=script&setup=true&lang.ts
+var o = /*@__PURE__*/ n({
+	name: "BlessContextMenu",
+	__name: "BlessContextMenu",
+	props: {
+		items: {},
+		checked: {},
+		radios: {}
+	},
+	emits: ["select"],
+	setup(n, { emit: o }) {
+		let s = o;
+		return (o, c) => (r(), t(e, {
+			items: n.items,
+			checked: n.checked,
+			radios: n.radios,
+			context: "",
+			block: "",
+			placement: "bottom-start",
+			onSelect: c[0] ||= (e) => s("select", e)
+		}, {
+			trigger: a(() => [i(o.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"items",
+			"checked",
+			"radios"
+		]));
+	}
+});
+//#endregion
+export { o as default };

package/dist/components/BlessDash.css

@@ -0,0 +1 @@
+.bless-dash{width:var(--bless-dash-width);height:var(--bless-border-width);margin-inline:var(--bless-space-2);vertical-align:middle;background:var(--bless-color-text);font-size:0;display:inline-block}.bless-dash--muted{background:var(--bless-color-text-muted)}.bless-dash--accent{background:var(--bless-color-accent)}

package/dist/components/BlessDash.js

@@ -0,0 +1,6 @@
+import "./BlessDash.css";
+import e from "./BlessDash.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/BlessDash.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    color?: "text" | "muted" | "accent";
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: "text" | "muted" | "accent";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessDash.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,12 @@
+import { createElementBlock as e, defineComponent as t, normalizeClass as n, openBlock as r, toDisplayString as i } from "vue";
+//#region src/components/BlessDash.vue?vue&type=script&setup=true&lang.ts
+var a = /*@__PURE__*/ t({
+	name: "BlessDash",
+	__name: "BlessDash",
+	props: { color: { default: "text" } },
+	setup(t) {
+		return (a, o) => (r(), e("span", { class: n(["bless-dash", `bless-dash--${t.color}`]) }, i(" "), 2));
+	}
+});
+//#endregion
+export { a as default };

package/dist/components/BlessDataTable.css

@@ -0,0 +1 @@
+.bless-datatable{border-radius:var(--bless-radius);gap:var(--bless-space-3);font-family:var(--bless-font-sans);color:var(--bless-color-text);display:grid}.bless-datatable--loading tbody{opacity:.5;transition:opacity var(--bless-duration-base)}.bless-datatable__toolbar{align-items:center;gap:var(--bless-space-3);flex-wrap:wrap;display:flex}.bless-datatable__search{width:240px}.bless-datatable__cols{margin-inline-start:auto}.bless-datatable__cols-btn{padding:var(--bless-space-2) var(--bless-space-3);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);color:var(--bless-color-text);font:inherit;font-size:var(--bless-text-xs);font-weight:var(--bless-font-weight-bold);letter-spacing:var(--bless-tracking-wide);text-transform:uppercase;cursor:pointer;transform:skewX(var(--bless-skew))}.bless-datatable__cols-btn:hover{border-color:var(--bless-color-text)}.bless-datatable__cols-btn:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-datatable__scroll{overflow-x:auto}.bless-datatable__check{width:36px}.bless-datatable__sort{align-items:center;gap:var(--bless-space-1);color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.bless-datatable__sort:hover{color:var(--bless-color-text)}.bless-datatable__sort:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-datatable__sort-icon{opacity:.4;font-size:var(--bless-text-2xs)}[aria-sort=ascending] .bless-datatable__sort-icon,[aria-sort=descending] .bless-datatable__sort-icon{opacity:1;color:var(--bless-color-accent-text)}.bless-datatable__row{transition:background var(--bless-duration-fast)}.bless-datatable__row:hover{background:var(--bless-color-surface)}.bless-datatable__row--selected{background:color-mix(in srgb, var(--bless-color-accent) 8%, transparent)}.bless-datatable__empty{text-align:center;color:var(--bless-color-text-muted);padding:var(--bless-space-8)}.bless-datatable__foot{justify-content:space-between;align-items:center;gap:var(--bless-space-3);flex-wrap:wrap;display:flex}.bless-datatable__pager{align-items:center;gap:var(--bless-space-3);display:flex}.bless-datatable__size{width:120px}

package/dist/components/BlessDataTable.js

@@ -0,0 +1,6 @@
+import "./BlessDataTable.css";
+import e from "./BlessDataTable.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/BlessDataTable.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,82 @@
+import { BlessDataColumn } from './table';
+declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        columns: BlessDataColumn<T>[];
+        rows: T[];
+        rowKey: keyof T & string;
+        pageSize?: number;
+        pageSizes?: number[];
+        selectable?: boolean;
+        searchable?: boolean;
+        searchKeys?: (keyof T & string)[];
+        searchPlaceholder?: string;
+        /** accessible name of the search box */
+        searchLabel?: string;
+        emptyText?: string;
+        caption?: string;
+        /** rows are one server page; sort / query / page are yours to fetch with (see `state` event) */
+        server?: boolean;
+        /** server mode: total row count */
+        total?: number;
+        loading?: boolean;
+    } & {
+        "onUpdate:selected"?: ((rows: T[]) => any) | undefined;
+        onRowClick?: ((row: T) => any) | undefined;
+        onState?: ((s: {
+            sortKey: string | null;
+            sortDir: "asc" | "desc";
+            query: string;
+            page: number;
+            pageSize: number;
+        }) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        state: {
+            sortKey: string | null;
+            sortDir: "asc" | "desc";
+            page: number;
+            pageSize: number;
+            query: string;
+            selected: Set<string | number> & Omit<Set<string | number>, keyof Set<any>>;
+            hidden: Set<string> & Omit<Set<string>, keyof Set<any>>;
+        };
+        selectedRows: import('vue').ComputedRef<T[]>;
+    }>) => void;
+    attrs: any;
+    slots: { [K in `cell-${keyof T & string}`]?: ((props: {
+        row: T;
+        value: T[keyof T & string];
+        index: number;
+    }) => any) | undefined; } & {
+        toolbar?: (props: {
+            state: {
+                sortKey: string | null;
+                sortDir: "asc" | "desc";
+                page: number;
+                pageSize: number;
+                query: string;
+                selected: Set<string | number> & Omit<Set<string | number>, keyof Set<any>>;
+                hidden: Set<string> & Omit<Set<string>, keyof Set<any>>;
+            };
+            selected: T[];
+        }) => any;
+    };
+    emit: ((evt: "update:selected", rows: T[]) => void) & ((evt: "rowClick", row: T) => void) & ((evt: "state", s: {
+        sortKey: string | null;
+        sortDir: "asc" | "desc";
+        query: string;
+        page: number;
+        pageSize: number;
+    }) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/BlessDataTable.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,212 @@
+import e from "./BlessText.js";
+import t from "./BlessInput.js";
+import n from "./BlessCheckbox.js";
+import r from "./BlessSelect.js";
+import i from "./BlessPagination.js";
+import ee from "./BlessDropdownMenu.js";
+import { useDataTable as a } from "../composables/useDataTable.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, toRef as w, unref as T, watch as E, withCtx as D, withModifiers as O } from "vue";
+//#region src/components/BlessDataTable.vue?vue&type=script&setup=true&lang.ts
+var k = { class: "bless-datatable__toolbar" }, A = { class: "bless-datatable__scroll" }, j = ["aria-busy"], M = {
+	key: 0,
+	class: "bless-table__caption"
+}, N = { class: "bless-table__head" }, P = {
+	key: 0,
+	scope: "col",
+	class: "bless-table__th bless-datatable__check"
+}, F = ["aria-sort"], I = ["onClick"], L = {
+	class: "bless-datatable__sort-icon",
+	"aria-hidden": "true"
+}, R = { key: 0 }, z = ["colspan"], B = ["aria-selected", "onClick"], V = { class: "bless-datatable__foot" }, H = { class: "bless-datatable__pager" }, U = /*@__PURE__*/ m({
+	name: "BlessDataTable",
+	__name: "BlessDataTable",
+	props: {
+		columns: {},
+		rows: {},
+		rowKey: {},
+		pageSize: { default: 10 },
+		pageSizes: { default: () => [
+			10,
+			25,
+			50
+		] },
+		selectable: { type: Boolean },
+		searchable: { type: Boolean },
+		searchKeys: {},
+		searchPlaceholder: { default: "Search…" },
+		searchLabel: { default: "Search rows" },
+		emptyText: { default: "No rows." },
+		caption: {},
+		server: { type: Boolean },
+		total: {},
+		loading: { type: Boolean }
+	},
+	emits: [
+		"update:selected",
+		"rowClick",
+		"state"
+	],
+	setup(m, { expose: U, emit: W }) {
+		let G = m, K = W, q = s(() => G.rows), J = s(() => [.../* @__PURE__ */ new Set([G.pageSize, ...G.pageSizes])].sort((e, t) => e - t).map((e) => ({
+			value: e,
+			label: `${e} / page`
+		}))), Y = a(q, {
+			rowKey: G.rowKey,
+			pageSize: G.pageSize,
+			searchKeys: G.searchKeys,
+			server: G.server,
+			total: w(() => G.total ?? 0)
+		}), { state: X } = Y, Z = () => ({
+			sortKey: X.sortKey,
+			sortDir: X.sortDir,
+			query: X.query,
+			page: X.page,
+			pageSize: X.pageSize
+		});
+		E(() => [
+			X.sortKey,
+			X.sortDir,
+			X.query,
+			X.page,
+			X.pageSize
+		], () => G.server && K("state", Z())), _(() => G.server && K("state", Z()));
+		let Q = s(() => G.columns.filter((e) => !X.hidden.has(e.key))), te = s(() => [{
+			type: "label",
+			label: "Columns"
+		}, ...G.columns.filter((e) => e.hideable !== !1).map((e) => ({
+			type: "checkbox",
+			label: e.label,
+			value: e.key
+		}))]), ne = s(() => Object.fromEntries(G.columns.map((e) => [e.key, !X.hidden.has(e.key)]))), re = y(), $ = s(() => G.columns.find((e) => e.header)?.key), ie = (e, t) => $.value ? String(e[$.value]) : `row ${(X.page - 1) * X.pageSize + t + 1}`;
+		function ae(e) {
+			Y.toggle(e), K("update:selected", Y.selectedRows.value);
+		}
+		function oe() {
+			Y.togglePage(), K("update:selected", Y.selectedRows.value);
+		}
+		return U({
+			state: X,
+			selectedRows: Y.selectedRows
+		}), (a, s) => (v(), u("div", { class: h(["bless-datatable", { "bless-datatable--loading": m.loading }]) }, [
+			d("div", k, [
+				m.searchable ? (v(), c(t, {
+					key: 0,
+					modelValue: T(X).query,
+					"onUpdate:modelValue": [s[0] ||= (e) => T(X).query = e, s[1] ||= (e) => T(X).page = 1],
+					type: "search",
+					size: "sm",
+					placeholder: m.searchPlaceholder,
+					"aria-label": m.searchLabel,
+					class: "bless-datatable__search"
+				}, null, 8, [
+					"modelValue",
+					"placeholder",
+					"aria-label"
+				])) : l("", !0),
+				x(a.$slots, "toolbar", {
+					state: T(X),
+					selected: T(Y).selectedRows.value
+				}),
+				p(ee, {
+					items: te.value,
+					checked: ne.value,
+					placement: "bottom-end",
+					class: "bless-datatable__cols",
+					onSelect: s[2] ||= (e) => e.type === "checkbox" && T(Y).toggleColumn(e.value)
+				}, {
+					trigger: D(() => [...s[6] ||= [d("button", {
+						type: "button",
+						class: "bless-datatable__cols-btn"
+					}, "Columns ▾", -1)]]),
+					_: 1
+				}, 8, ["items", "checked"])
+			]),
+			d("div", A, [d("table", {
+				class: "bless-table bless-datatable__table",
+				"aria-busy": m.loading || void 0
+			}, [
+				m.caption ? (v(), u("caption", M, C(m.caption), 1)) : l("", !0),
+				d("thead", N, [d("tr", null, [m.selectable ? (v(), u("th", P, [p(n, {
+					ref_key: "selectAllRef",
+					ref: re,
+					"model-value": T(Y).allPageSelected.value,
+					indeterminate: !T(Y).allPageSelected.value && T(Y).somePageSelected.value,
+					"aria-label": "Select page",
+					"onUpdate:modelValue": oe
+				}, null, 8, ["model-value", "indeterminate"])])) : l("", !0), (v(!0), u(o, null, b(Q.value, (e) => (v(), u("th", {
+					key: e.key,
+					scope: "col",
+					class: h(["bless-table__th", [e.align && `bless-table__cell--${e.align}`, { "bless-datatable__th--sortable": e.sortable }]]),
+					style: g(e.width ? { width: e.width } : void 0),
+					"aria-sort": T(X).sortKey === e.key ? T(X).sortDir === "asc" ? "ascending" : "descending" : e.sortable ? "none" : void 0
+				}, [e.sortable ? (v(), u("button", {
+					key: 0,
+					type: "button",
+					class: "bless-datatable__sort",
+					onClick: (t) => T(Y).sortBy(e.key)
+				}, [f(C(e.label) + " ", 1), d("span", L, C(T(X).sortKey === e.key ? T(X).sortDir === "asc" ? "↑" : "↓" : "↕"), 1)], 8, I)) : (v(), u(o, { key: 1 }, [f(C(e.label), 1)], 64))], 14, F))), 128))])]),
+				d("tbody", null, [T(Y).pageRows.value.length ? l("", !0) : (v(), u("tr", R, [d("td", {
+					colspan: Q.value.length + +!!m.selectable,
+					class: "bless-table__cell bless-datatable__empty"
+				}, C(m.emptyText), 9, z)])), (v(!0), u(o, null, b(T(Y).pageRows.value, (e, t) => (v(), u("tr", {
+					key: String(T(Y).keyOf(e)),
+					class: h(["bless-table__row bless-datatable__row", { "bless-datatable__row--selected": T(X).selected.has(T(Y).keyOf(e)) }]),
+					"aria-selected": m.selectable ? T(X).selected.has(T(Y).keyOf(e)) : void 0,
+					onClick: (t) => K("rowClick", e)
+				}, [m.selectable ? (v(), u("td", {
+					key: 0,
+					class: "bless-table__cell bless-datatable__check",
+					onClick: s[3] ||= O(() => {}, ["stop"])
+				}, [p(n, {
+					"model-value": T(X).selected.has(T(Y).keyOf(e)),
+					"aria-label": `Select ${ie(e, t)}`,
+					"onUpdate:modelValue": (t) => ae(e)
+				}, null, 8, [
+					"model-value",
+					"aria-label",
+					"onUpdate:modelValue"
+				])])) : l("", !0), (v(!0), u(o, null, b(Q.value, (n) => (v(), c(S(n.header ? "th" : "td"), {
+					key: n.key,
+					scope: n.header ? "row" : void 0,
+					class: h(["bless-table__cell", n.align && `bless-table__cell--${n.align}`]),
+					"data-label": n.label
+				}, {
+					default: D(() => [x(a.$slots, `cell-${n.key}`, {
+						row: e,
+						value: e[n.key],
+						index: t
+					}, () => [f(C(e[n.key]), 1)])]),
+					_: 2
+				}, 1032, [
+					"scope",
+					"class",
+					"data-label"
+				]))), 128))], 10, B))), 128))])
+			], 8, j)]),
+			d("div", V, [p(e, {
+				size: "xs",
+				muted: "",
+				role: "status"
+			}, {
+				default: D(() => [m.selectable && T(X).selected.size ? (v(), u(o, { key: 0 }, [f(C(T(X).selected.size) + " selected · ", 1)], 64)) : l("", !0), f(" " + C(T(Y).sorted.value.length) + " rows ", 1)]),
+				_: 1
+			}), d("div", H, [p(r, {
+				"model-value": T(X).pageSize,
+				size: "sm",
+				"aria-label": "Rows per page",
+				options: J.value,
+				class: "bless-datatable__size",
+				"onUpdate:modelValue": s[4] ||= (e) => {
+					T(X).pageSize = Number(e), T(X).page = 1;
+				}
+			}, null, 8, ["model-value", "options"]), p(i, {
+				modelValue: T(X).page,
+				"onUpdate:modelValue": s[5] ||= (e) => T(X).page = e,
+				total: T(Y).pageCount.value,
+				siblings: 1
+			}, null, 8, ["modelValue", "total"])])])
+		], 2));
+	}
+});
+//#endregion
+export { U as default };

package/dist/components/BlessDataView.css

@@ -0,0 +1 @@
+.bless-dataview{gap:var(--bless-space-3);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-dataview__bar{align-items:center;gap:var(--bless-space-3);display:flex}.bless-dataview__header{flex:1}.bless-dataview--list .bless-dataview__items{flex-direction:column;display:flex}.bless-dataview--list .bless-dataview__item+.bless-dataview__item{border-top:var(--bless-border-width) solid var(--bless-color-border)}.bless-dataview--grid .bless-dataview__items{grid-template-columns:repeat(auto-fill, minmax(var(--_col), 1fr));gap:var(--bless-space-3);display:grid}.bless-dataview__empty{padding:var(--bless-space-6);text-align:center;color:var(--bless-color-text-muted)}.bless-dataview__pager{align-self:center}

package/dist/components/BlessDataView.js

@@ -0,0 +1,6 @@
+import "./BlessDataView.css";
+import e from "./BlessDataView.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/BlessDataView.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,43 @@
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<({
+        items: T[];
+        rowKey?: (item: T, index: number) => string | number;
+        pageSize?: number;
+        /** min card width in grid layout */
+        columns?: string;
+        label?: string;
+        /** hide the list/grid switch */
+        switchable?: boolean;
+    } & {
+        layout?: "list" | "grid";
+    }) & {
+        "onUpdate:layout"?: ((value: "list" | "grid") => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        header?: (props: {
+            layout: "list" | "grid";
+        }) => any;
+    } & {
+        default?: (props: {
+            item: T;
+            index: number;
+            layout: "list" | "grid";
+        }) => any;
+    } & {
+        empty?: (props: {}) => any;
+    };
+    emit: (event: "update:layout", value: "list" | "grid") => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/BlessDataView.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,86 @@
+import e from "./BlessToggle.js";
+import t from "./BlessToggleGroup.js";
+import n from "./BlessPagination.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, normalizeClass as p, normalizeStyle as m, openBlock as h, ref as g, renderList as _, renderSlot as v, useModel as y, watch as b, withCtx as x } from "vue";
+//#region src/components/BlessDataView.vue?vue&type=script&setup=true&lang.ts
+var S = {
+	key: 0,
+	class: "bless-dataview__bar"
+}, C = { class: "bless-dataview__header" }, w = ["aria-label"], T = {
+	key: 2,
+	class: "bless-dataview__empty"
+}, E = /*@__PURE__*/ d({
+	name: "BlessDataView",
+	__name: "BlessDataView",
+	props: /*@__PURE__*/ f({
+		items: {},
+		rowKey: {},
+		pageSize: { default: 0 },
+		columns: { default: "220px" },
+		label: { default: "Items" },
+		switchable: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		layout: { default: "list" },
+		layoutModifiers: {}
+	}),
+	emits: ["update:layout"],
+	setup(d) {
+		let f = d, E = y(d, "layout"), D = g(1), O = i(() => f.pageSize ? Math.max(1, Math.ceil(f.items.length / f.pageSize)) : 1);
+		b(O, (e) => D.value > e && (D.value = e));
+		let k = i(() => f.pageSize ? f.items.slice((D.value - 1) * f.pageSize, D.value * f.pageSize) : f.items);
+		return (i, f) => (h(), s("div", {
+			class: p(["bless-dataview", `bless-dataview--${E.value}`]),
+			style: m({ "--_col": d.columns })
+		}, [
+			i.$slots.header || d.switchable ? (h(), s("div", S, [c("div", C, [v(i.$slots, "header", { layout: E.value })]), d.switchable ? (h(), a(t, {
+				key: 0,
+				"model-value": E.value,
+				label: "Layout",
+				"onUpdate:modelValue": f[0] ||= (e) => E.value = e ?? "list"
+			}, {
+				default: x(() => [u(e, {
+					value: "list",
+					size: "sm",
+					label: "List"
+				}, {
+					default: x(() => [...f[2] ||= [l("☰", -1)]]),
+					_: 1
+				}), u(e, {
+					value: "grid",
+					size: "sm",
+					label: "Grid"
+				}, {
+					default: x(() => [...f[3] ||= [l("▦", -1)]]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value"])) : o("", !0)])) : o("", !0),
+			k.value.length ? (h(), s("div", {
+				key: 1,
+				class: "bless-dataview__items",
+				role: "list",
+				"aria-label": d.label
+			}, [(h(!0), s(r, null, _(k.value, (e, t) => (h(), s("div", {
+				key: d.rowKey ? d.rowKey(e, t) : t,
+				class: "bless-dataview__item",
+				role: "listitem"
+			}, [v(i.$slots, "default", {
+				item: e,
+				index: (D.value - 1) * d.pageSize + t,
+				layout: E.value
+			})]))), 128))], 8, w)) : (h(), s("div", T, [v(i.$slots, "empty", {}, () => [f[4] ||= l("No items", -1)])])),
+			O.value > 1 ? (h(), a(n, {
+				key: 3,
+				modelValue: D.value,
+				"onUpdate:modelValue": f[1] ||= (e) => D.value = e,
+				total: O.value,
+				class: "bless-dataview__pager"
+			}, null, 8, ["modelValue", "total"])) : o("", !0)
+		], 6));
+	}
+});
+//#endregion
+export { E as default };

package/dist/components/BlessDatePicker.css

@@ -0,0 +1 @@
+.bless-datepicker{--_h:40px;--_fs:var(--bless-text-md);font-family:var(--bless-font-sans);color:var(--bless-color-text);align-items:stretch;display:inline-flex}.bless-datepicker--sm{--_h:32px;--_fs:var(--bless-text-sm)}.bless-datepicker--lg{--_h:48px;--_fs:var(--bless-text-lg)}.bless-datepicker__trigger,.bless-datepicker__native{align-items:center;gap:var(--bless-space-2);min-width:200px;height:var(--_h);padding:0 var(--bless-space-3);box-sizing:border-box;border:0;border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);color:inherit;font:inherit;font-size:var(--_fs);text-align:start;cursor:pointer;background:0 0;display:inline-flex}.bless-datepicker__trigger:focus-visible,.bless-datepicker__native:focus-visible{border-bottom-color:var(--bless-color-accent-text);outline:0}.bless-datepicker__trigger[aria-expanded=true]{border-bottom-color:var(--bless-color-accent-text)}.bless-datepicker__icon{color:var(--bless-color-text-muted)}.bless-datepicker__text{flex:1}.bless-datepicker__text--placeholder{color:var(--bless-color-text-muted)}.bless-datepicker__clear{border:0;border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);background:var(--bless-color-surface);font:inherit;color:var(--bless-color-text-muted);cursor:pointer;padding:0 var(--bless-space-2)}.bless-datepicker--invalid .bless-datepicker__clear{border-bottom-color:var(--bless-color-danger)}.bless-datepicker__clear:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px}.bless-datepicker__clear:hover{opacity:var(--bless-hover-opacity)}.bless-datepicker__panel{inset:unset;padding:var(--bless-space-3);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);box-shadow:var(--bless-shadow-plate);margin:0;position:fixed}.bless-datepicker--invalid .bless-datepicker__trigger,.bless-datepicker--invalid .bless-datepicker__native{border-bottom-color:var(--bless-color-danger)}.bless-datepicker--disabled{opacity:.4}.bless-datepicker__field{border-radius:var(--bless-radius-plate);transform:skewX(var(--bless-skew));border-bottom:calc(2 * var(--bless-border-width)) solid var(--bless-color-text-muted);background:0 0;display:inline-flex}.bless-datepicker__field:focus-within{border-bottom-color:var(--bless-color-accent-text)}.bless-datepicker__field>.bless-datepicker__native{transform:skewX(var(--bless-skew-counter));padding-inline:calc(var(--bless-space-3) + 4px);background:0 0;border-bottom:0}.bless-datepicker__trigger{border-radius:var(--bless-radius-plate);transform:skewX(var(--bless-skew));padding-inline:calc(var(--bless-space-3) + 4px)}.bless-datepicker__trigger>*{transform:skewX(var(--bless-skew-counter))}

package/dist/components/BlessDatePicker.js

@@ -0,0 +1,6 @@
+import "./BlessDatePicker.css";
+import e from "./BlessDatePicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/BlessDatePicker.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,29 @@
+type __VLS_Props = {
+    id?: string;
+    range?: boolean;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    locale?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** prefer native <input type=date> on coarse pointers (touch) */
+    nativeOnTouch?: boolean;
+    size?: "sm" | "md" | "lg";
+};
+type __VLS_ModelProps = {
+    modelValue?: string | [string, string] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | [string, string] | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | [string, string] | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    placeholder: string;
+    locale: string;
+    nativeOnTouch: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;