@bridge-ui/vue 0.2.0 → 0.3.0

package/dist/Components/Table/composables/useTable.js

@@ -0,0 +1,88 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { TABLE_INJECTION_KEY as r } from "../tableInjectionKey.js";
+import { computed as i, provide as a, useAttrs as o } from "vue";
+import { get as s } from "es-toolkit/compat";
+import { tableAlignProps as c, tableRoundedProps as l, tableSizeProps as u, tableVariantProps as d } from "@bridge-ui/core/Tokens";
+import { cn as f, mergeBridgeUILayeredClasses as p, splitComponentProps as m } from "@bridge-ui/core/Utils";
+//#region src/Components/Table/composables/useTable.ts
+var h = [
+	"full",
+	"size",
+	"classes",
+	"rounded",
+	"striped",
+	"variant",
+	"hoverable",
+	"customProps",
+	"stickyHeader"
+];
+function g(g, _) {
+	let v = o(), y = i(() => m({
+		bridgeKeys: h,
+		props: {
+			...v,
+			...g
+		}
+	})), { merged: b, entry: x } = t({
+		libDefaults: _,
+		componentName: "Table",
+		props: () => y.value.componentProps
+	}), S = n({
+		entry: x,
+		props: () => y.value.componentProps
+	}), C = i(() => p(u, x.value?.tokens?.size)), w = i(() => p(d, x.value?.tokens?.variant)), T = i(() => p(c, x.value?.tokens?.align)), E = i(() => p(l, x.value?.tokens?.rounded)), D = i(() => s(C.value, b.value.size)), O = i(() => s(w.value, b.value.variant)), k = i(() => s(E.value, b.value.rounded)), A = i(() => ({
+		full: b.value.full === !0,
+		striped: b.value.striped === !0,
+		hoverable: b.value.hoverable === !0,
+		stickyHeader: b.value.stickyHeader === !0,
+		mergedClasses: {
+			row: s(S.value, "row"),
+			body: s(S.value, "body"),
+			cell: s(S.value, "cell"),
+			head: s(S.value, "head"),
+			footer: s(S.value, "footer"),
+			header: s(S.value, "header"),
+			caption: s(S.value, "caption")
+		},
+		tokenClasses: {
+			sizeHead: s(D.value, "head"),
+			sizeCell: s(D.value, "cell"),
+			align: T.value,
+			variantRow: s(O.value, "row"),
+			sizeCaption: s(D.value, "caption"),
+			variantBody: s(O.value, "body"),
+			variantHead: s(O.value, "head"),
+			variantCell: s(O.value, "cell"),
+			variantFooter: s(O.value, "footer"),
+			variantHeader: s(O.value, "header"),
+			roundedFooter: s(k.value, "footer"),
+			roundedHeader: s(k.value, "header"),
+			variantCaption: s(O.value, "caption"),
+			variantRowHover: s(O.value, "rowHover"),
+			variantRowStriped: s(O.value, "rowStriped"),
+			variantHeadSticky: s(O.value, "headSticky")
+		}
+	}));
+	return a(r, A), {
+		merged: b,
+		rootBind: i(() => e(b.value.customProps?.root, y.value.inheritedAttrs, { class: f({
+			"overflow-x-auto": b.value.stickyHeader !== !0,
+			[s(D.value, "root") ?? ""]: !0,
+			[s(O.value, "root") ?? ""]: !0,
+			[s(k.value, "root") ?? ""]: !0,
+			[s(S.value, "root") ?? ""]: !0
+		}) })),
+		tableBind: i(() => {
+			let t = b.value.stickyHeader === !0 ? s(O.value, "tableSticky") : s(O.value, "table");
+			return e(b.value.customProps?.table, {}, { class: f({
+				"min-w-full": b.value.full === !0,
+				[s(D.value, "table") ?? ""]: !0,
+				[t ?? ""]: !0,
+				[s(S.value, "table") ?? ""]: !0
+			}) });
+		}),
+		contextValue: A
+	};
+}
+//#endregion
+export { g as useTable };

package/dist/Components/Table/composables/useTableCell.d.ts

@@ -0,0 +1,12 @@
+import { TableCellOwnProps, TableCellProps, TableHeadOwnProps, TableHeadProps } from '../table.types';
+type TableCellKind = "cell" | "head";
+/**
+ * Bind for `TableCell` (`td`) and `TableHead` (`th`).
+ */
+export declare function useTableCell(props: TableCellOwnProps | TableHeadOwnProps, part: TableCellKind): {
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        scope: string | undefined;
+        class: string;
+    }, "class", import('vue').TdHTMLAttributes | import('vue').ThHTMLAttributes | undefined, Omit<TableCellProps | TableHeadProps, "classes" | "customProps" | "numeric" | "align">>>;
+};
+export {};

package/dist/Components/Table/composables/useTableCell.js

@@ -0,0 +1,40 @@
+import { mergePartBind as e } from "../../../Utils/index.js";
+import { TABLE_INJECTION_KEY as t, TABLE_SECTION_INJECTION_KEY as n } from "../tableInjectionKey.js";
+import { computed as r, inject as i, useAttrs as a } from "vue";
+import { get as o } from "es-toolkit/compat";
+import { cn as s, splitComponentProps as c } from "@bridge-ui/core/Utils";
+//#region src/Components/Table/composables/useTableCell.ts
+var l = [
+	"align",
+	"classes",
+	"numeric",
+	"customProps"
+];
+function u(u, d) {
+	let f = a(), p = i(t, null), m = i(n, null);
+	if (!p) throw Error("Table parts must be used within a Table provider");
+	let h = r(() => c({
+		props: {
+			...f,
+			...u
+		},
+		bridgeKeys: l
+	}));
+	return { rootBind: r(() => {
+		let t = p.value, n = h.value.componentProps.numeric === !0, r = h.value.componentProps.align ?? (n ? "end" : "start"), i = o(t.tokenClasses.align, r), a = d === "head" ? t.tokenClasses.sizeHead : t.tokenClasses.sizeCell, c = d === "head" ? t.tokenClasses.variantHead : t.tokenClasses.variantCell, l = d === "head" ? o(i, "head") : o(i, "cell"), u = d === "head" ? t.mergedClasses.head : t.mergedClasses.cell, f = d === "head" && t.stickyHeader && m?.value === "header";
+		return e(h.value.componentProps.customProps?.root, h.value.inheritedAttrs, {
+			scope: d === "head" ? "col" : void 0,
+			class: s({
+				"tabular-nums": n,
+				[a ?? ""]: !0,
+				[l ?? ""]: !0,
+				[c ?? ""]: !0,
+				[u ?? ""]: !0,
+				[h.value.componentProps.classes?.root ?? ""]: !0,
+				[t.tokenClasses.variantHeadSticky ?? ""]: f
+			})
+		});
+	}) };
+}
+//#endregion
+export { u as useTableCell };

package/dist/Components/Table/composables/useTablePart.d.ts

@@ -0,0 +1,12 @@
+import { TableBodyProps, TableCaptionProps, TableFooterProps, TableHeaderProps } from '../table.types';
+type TablePartKind = "body" | "footer" | "header" | "caption";
+type TablePartProps = TableBodyProps | TableFooterProps | TableHeaderProps | TableCaptionProps;
+/**
+ * Bind for `TableHeader` / `TableBody` / `TableFooter` / `TableCaption`.
+ */
+export declare function useTablePart(props: TablePartProps, part: TablePartKind): {
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<TablePartProps, "classes" | "customProps">>>;
+};
+export {};

package/dist/Components/Table/composables/useTablePart.js

@@ -0,0 +1,32 @@
+import { mergePartBind as e } from "../../../Utils/index.js";
+import { TABLE_INJECTION_KEY as t, TABLE_SECTION_INJECTION_KEY as n } from "../tableInjectionKey.js";
+import { computed as r, inject as i, provide as a, useAttrs as o } from "vue";
+import { cn as s, splitComponentProps as c } from "@bridge-ui/core/Utils";
+//#region src/Components/Table/composables/useTablePart.ts
+var l = ["classes", "customProps"];
+function u(u, d) {
+	let f = o(), p = i(t, null);
+	if (!p) throw Error("Table parts must be used within a Table provider");
+	d !== "caption" && a(n, r(() => d));
+	let m = r(() => c({
+		props: {
+			...f,
+			...u
+		},
+		bridgeKeys: l
+	}));
+	return { rootBind: r(() => {
+		let t = p.value, n = d === "header" ? t.tokenClasses.variantHeader : d === "body" ? t.tokenClasses.variantBody : d === "footer" ? t.tokenClasses.variantFooter : t.tokenClasses.variantCaption, r = d === "caption" ? t.tokenClasses.sizeCaption : void 0;
+		return e(m.value.componentProps.customProps?.root, m.value.inheritedAttrs, { class: s({
+			"sticky top-0 z-20": d === "header" && t.stickyHeader,
+			[r ?? ""]: !0,
+			[n ?? ""]: !0,
+			[t.tokenClasses.roundedHeader ?? ""]: d === "header",
+			[t.tokenClasses.roundedFooter ?? ""]: d === "footer",
+			[t.mergedClasses[d] ?? ""]: !0,
+			[m.value.componentProps.classes?.root ?? ""]: !0
+		}) });
+	}) };
+}
+//#endregion
+export { u as useTablePart };

package/dist/Components/Table/composables/useTableRow.d.ts

@@ -0,0 +1,6 @@
+import { TableRowOwnProps, TableRowProps } from '../table.types';
+export declare function useTableRow(props: TableRowOwnProps): {
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<TableRowProps, "classes" | "customProps">>>;
+};

package/dist/Components/Table/composables/useTableRow.js

@@ -0,0 +1,29 @@
+import { mergePartBind as e } from "../../../Utils/index.js";
+import { TABLE_INJECTION_KEY as t, TABLE_SECTION_INJECTION_KEY as n } from "../tableInjectionKey.js";
+import { computed as r, inject as i, useAttrs as a } from "vue";
+import { cn as o, splitComponentProps as s } from "@bridge-ui/core/Utils";
+//#region src/Components/Table/composables/useTableRow.ts
+var c = ["classes", "customProps"];
+function l(l) {
+	let u = a(), d = i(t, null), f = i(n, null);
+	if (!d) throw Error("Table parts must be used within a Table provider");
+	let p = r(() => s({
+		props: {
+			...u,
+			...l
+		},
+		bridgeKeys: c
+	}));
+	return { rootBind: r(() => {
+		let t = d.value, n = f?.value === "body";
+		return e(p.value.componentProps.customProps?.root, p.value.inheritedAttrs, { class: o({
+			[t.tokenClasses.variantRow ?? ""]: !0,
+			[t.mergedClasses.row ?? ""]: !0,
+			[p.value.componentProps.classes?.root ?? ""]: !0,
+			[t.tokenClasses.variantRowHover ?? ""]: n && t.hoverable,
+			[t.tokenClasses.variantRowStriped ?? ""]: n && t.striped
+		}) });
+	}) };
+}
+//#endregion
+export { l as useTableRow };

package/dist/Components/Table/index.d.ts

@@ -0,0 +1,14 @@
+export { useTable } from './composables/useTable';
+export { useTableCell } from './composables/useTableCell';
+export { useTablePart } from './composables/useTablePart';
+export { useTableRow } from './composables/useTableRow';
+export type { TableAlignOverrides, TableBodyClasses, TableBodyCustomProps, TableBodyOwnProps, TableBodyProps, TableBodySlots, TableCaptionClasses, TableCaptionCustomProps, TableCaptionOwnProps, TableCaptionProps, TableCaptionSlots, TableCellClasses, TableCellCustomProps, TableCellOwnProps, TableCellProps, TableCellSlots, TableClasses, TableCustomProps, TableFooterClasses, TableFooterCustomProps, TableFooterOwnProps, TableFooterProps, TableFooterSlots, TableHeadClasses, TableHeadCustomProps, TableHeadOwnProps, TableHeadProps, TableHeadSlots, TableHeaderClasses, TableHeaderCustomProps, TableHeaderOwnProps, TableHeaderProps, TableHeaderSlots, TableOwnProps, TableProps, TableRoundedOverrides, TableRowClasses, TableRowCustomProps, TableRowOwnProps, TableRowProps, TableRowSlots, TableSizeOverrides, TableSlots, TableVariantOverrides, } from './table.types';
+export { default as Table } from './Table.vue';
+export { default as TableBody } from './TableBody.vue';
+export { default as TableCaption } from './TableCaption.vue';
+export { default as TableCell } from './TableCell.vue';
+export { default as TableFooter } from './TableFooter.vue';
+export { default as TableHead } from './TableHead.vue';
+export { default as TableHeader } from './TableHeader.vue';
+export { TABLE_INJECTION_KEY, TABLE_SECTION_INJECTION_KEY, type TableContextValue, type TableSection, type TableTokenClasses, } from './tableInjectionKey';
+export { default as TableRow } from './TableRow.vue';

package/dist/Components/Table/index.js

@@ -0,0 +1,14 @@
+import { TABLE_INJECTION_KEY as e, TABLE_SECTION_INJECTION_KEY as t } from "./tableInjectionKey.js";
+import { useTable as n } from "./composables/useTable.js";
+import { useTableCell as r } from "./composables/useTableCell.js";
+import { useTablePart as i } from "./composables/useTablePart.js";
+import { useTableRow as a } from "./composables/useTableRow.js";
+import o from "./Table.js";
+import s from "./TableBody.js";
+import c from "./TableCaption.js";
+import l from "./TableCell.js";
+import u from "./TableFooter.js";
+import d from "./TableHead.js";
+import f from "./TableHeader.js";
+import p from "./TableRow.js";
+export { e as TABLE_INJECTION_KEY, t as TABLE_SECTION_INJECTION_KEY, o as Table, s as TableBody, c as TableCaption, l as TableCell, u as TableFooter, d as TableHead, f as TableHeader, p as TableRow, n as useTable, r as useTableCell, i as useTablePart, a as useTableRow };

package/dist/Components/Table/table.types.d.ts

@@ -0,0 +1,416 @@
+import { HTMLAttributes, Slot, TdHTMLAttributes, ThHTMLAttributes } from 'vue';
+import { TableAlign, TableRounded, TableSize, TableVariant } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
+export interface TableSizeOverrides {}
+export interface TableAlignOverrides {}
+export interface TableRoundedOverrides {}
+export interface TableVariantOverrides {}
+export interface TableBodyClasses {
+    /**
+     * Classes merged onto the `tbody`.
+     */
+    root?: string;
+}
+export interface TableBodyCustomProps {
+    /**
+     * Props forwarded to the `tbody`.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+/**
+ * Table body (`tbody`). Must be used inside `Table`.
+ */
+export interface TableBodyOwnProps {
+    /**
+     * Classes for the body.
+     *
+     * @default undefined
+     */
+    classes?: TableBodyClasses;
+    /**
+     * Extra props for the `tbody`.
+     *
+     * @default undefined
+     */
+    customProps?: TableBodyCustomProps;
+}
+export interface TableBodySlots {
+    /**
+     * Body rows.
+     */
+    default?: Slot<undefined>;
+}
+export interface TableCaptionClasses {
+    /**
+     * Classes merged onto the caption.
+     */
+    root?: string;
+}
+export interface TableCaptionCustomProps {
+    /**
+     * Props forwarded to the caption.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+/**
+ * Table caption. Must be used inside `Table`.
+ */
+export interface TableCaptionOwnProps {
+    /**
+     * Classes for the caption.
+     *
+     * @default undefined
+     */
+    classes?: TableCaptionClasses;
+    /**
+     * Extra props for the caption.
+     *
+     * @default undefined
+     */
+    customProps?: TableCaptionCustomProps;
+}
+export interface TableCaptionSlots {
+    /**
+     * Caption content.
+     */
+    default?: Slot<undefined>;
+}
+export interface TableCellClasses {
+    /**
+     * Classes merged onto the `td`.
+     */
+    root?: string;
+}
+export interface TableCellCustomProps {
+    /**
+     * Props forwarded to the `td`.
+     *
+     * @default undefined
+     */
+    root?: TdHTMLAttributes;
+}
+/**
+ * Table body cell (`td`). Must be used inside `Table`.
+ */
+export interface TableCellOwnProps {
+    /**
+     * Text alignment.
+     *
+     * @default "start"
+     */
+    align?: MergeProps<TableAlign, TableAlignOverrides>;
+    /**
+     * Classes for the cell.
+     *
+     * @default undefined
+     */
+    classes?: TableCellClasses;
+    /**
+     * Extra props for the `td`.
+     *
+     * @default undefined
+     */
+    customProps?: TableCellCustomProps;
+    /**
+     * Tabular numbers and end alignment (unless `align` is set).
+     *
+     * @default false
+     */
+    numeric?: boolean;
+}
+export interface TableCellSlots {
+    /**
+     * Cell content.
+     */
+    default?: Slot<undefined>;
+}
+export interface TableClasses {
+    /**
+     * Classes merged onto the `tbody`.
+     */
+    body?: string;
+    /**
+     * Classes merged onto the caption.
+     */
+    caption?: string;
+    /**
+     * Classes merged onto body cells.
+     */
+    cell?: string;
+    /**
+     * Classes merged onto the `tfoot`.
+     */
+    footer?: string;
+    /**
+     * Classes merged onto header cells.
+     */
+    head?: string;
+    /**
+     * Classes merged onto the `thead`.
+     */
+    header?: string;
+    /**
+     * Classes merged onto the wrapper around `<table>`.
+     */
+    root?: string;
+    /**
+     * Classes merged onto rows.
+     */
+    row?: string;
+    /**
+     * Classes merged onto the `<table>` element.
+     */
+    table?: string;
+}
+export interface TableCustomProps {
+    /**
+     * Props forwarded to the wrapper around `<table>`.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the `<table>` element.
+     *
+     * @default undefined
+     */
+    table?: HTMLAttributes;
+}
+export interface TableFooterClasses {
+    /**
+     * Classes merged onto the `tfoot`.
+     */
+    root?: string;
+}
+export interface TableFooterCustomProps {
+    /**
+     * Props forwarded to the `tfoot`.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+/**
+ * Table footer (`tfoot`). Must be used inside `Table`.
+ */
+export interface TableFooterOwnProps {
+    /**
+     * Classes for the footer.
+     *
+     * @default undefined
+     */
+    classes?: TableFooterClasses;
+    /**
+     * Extra props for the `tfoot`.
+     *
+     * @default undefined
+     */
+    customProps?: TableFooterCustomProps;
+}
+export interface TableFooterSlots {
+    /**
+     * Footer rows.
+     */
+    default?: Slot<undefined>;
+}
+export interface TableHeadClasses {
+    /**
+     * Classes merged onto the `th`.
+     */
+    root?: string;
+}
+export interface TableHeadCustomProps {
+    /**
+     * Props forwarded to the `th`.
+     *
+     * @default undefined
+     */
+    root?: ThHTMLAttributes;
+}
+/**
+ * Table header cell (`th`). Must be used inside `Table`.
+ */
+export interface TableHeadOwnProps {
+    /**
+     * Text alignment.
+     *
+     * @default "start"
+     */
+    align?: MergeProps<TableAlign, TableAlignOverrides>;
+    /**
+     * Classes for the header cell.
+     *
+     * @default undefined
+     */
+    classes?: TableHeadClasses;
+    /**
+     * Extra props for the `th`.
+     *
+     * @default undefined
+     */
+    customProps?: TableHeadCustomProps;
+    /**
+     * Tabular numbers and end alignment (unless `align` is set).
+     *
+     * @default false
+     */
+    numeric?: boolean;
+}
+export interface TableHeadSlots {
+    /**
+     * Header cell content.
+     */
+    default?: Slot<undefined>;
+}
+export interface TableHeaderClasses {
+    /**
+     * Classes merged onto the `thead`.
+     */
+    root?: string;
+}
+export interface TableHeaderCustomProps {
+    /**
+     * Props forwarded to the `thead`.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+/**
+ * Table header (`thead`). Must be used inside `Table`.
+ */
+export interface TableHeaderOwnProps {
+    /**
+     * Classes for the header.
+     *
+     * @default undefined
+     */
+    classes?: TableHeaderClasses;
+    /**
+     * Extra props for the `thead`.
+     *
+     * @default undefined
+     */
+    customProps?: TableHeaderCustomProps;
+}
+export interface TableHeaderSlots {
+    /**
+     * Header rows.
+     */
+    default?: Slot<undefined>;
+}
+/**
+ * Presentational table root. Compose with `TableHeader`, `TableBody`,
+ * `TableRow`, `TableHead`, and `TableCell`.
+ */
+export interface TableOwnProps {
+    /**
+     * Classes for table parts.
+     *
+     * @default undefined
+     */
+    classes?: TableClasses;
+    /**
+     * Extra props for the wrapper and `<table>`.
+     *
+     * @default undefined
+     */
+    customProps?: TableCustomProps;
+    /**
+     * Stretch the table to at least the wrapper width.
+     *
+     * @default true
+     */
+    full?: boolean;
+    /**
+     * Row hover styles on the body.
+     *
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * Corner radius of the wrapper, header, and footer.
+     *
+     * @default "lg"
+     */
+    rounded?: MergeProps<TableRounded, TableRoundedOverrides>;
+    /**
+     * Cell padding / type scale.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<TableSize, TableSizeOverrides>;
+    /**
+     * Stick header cells to the top of the nearest scrollport (usually the page).
+     *
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Alternating body row surfaces.
+     *
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Chrome treatment. Pair with Pagination `text` / `ghost` / `outlined`.
+     *
+     * @default "plain"
+     */
+    variant?: MergeProps<TableVariant, TableVariantOverrides>;
+}
+export interface TableRowClasses {
+    /**
+     * Classes merged onto the `tr`.
+     */
+    root?: string;
+}
+export interface TableRowCustomProps {
+    /**
+     * Props forwarded to the `tr`.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+/**
+ * Table row (`tr`). Must be used inside `Table`.
+ */
+export interface TableRowOwnProps {
+    /**
+     * Classes for the row.
+     *
+     * @default undefined
+     */
+    classes?: TableRowClasses;
+    /**
+     * Extra props for the `tr`.
+     *
+     * @default undefined
+     */
+    customProps?: TableRowCustomProps;
+}
+export interface TableRowSlots {
+    /**
+     * Row cells.
+     */
+    default?: Slot<undefined>;
+}
+export interface TableSlots {
+    /**
+     * Table sections and caption.
+     */
+    default?: Slot<undefined>;
+}
+export type TableBodyProps = MergeHtmlProps<TableBodyOwnProps, HTMLAttributes>;
+export type TableCaptionProps = MergeHtmlProps<TableCaptionOwnProps, HTMLAttributes>;
+export type TableCellProps = MergeHtmlProps<TableCellOwnProps, TdHTMLAttributes>;
+export type TableFooterProps = MergeHtmlProps<TableFooterOwnProps, HTMLAttributes>;
+export type TableHeadProps = MergeHtmlProps<TableHeadOwnProps, ThHTMLAttributes>;
+export type TableHeaderProps = MergeHtmlProps<TableHeaderOwnProps, HTMLAttributes>;
+export type TableProps = MergeHtmlProps<TableOwnProps, HTMLAttributes>;
+export type TableRowProps = MergeHtmlProps<TableRowOwnProps, HTMLAttributes>;