@bridge-ui/vue 0.1.1 → 0.3.0

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>;

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

@@ -0,0 +1,114 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { TableAlign } from '@bridge-ui/core/Tokens';
+/**
+ * Table section for row hover / stripe and sticky header cells.
+ */
+export type TableSection = "body" | "footer" | "header";
+/**
+ * Merged token classes for table parts.
+ */
+export type TableTokenClasses = {
+    /**
+     * Merged align class maps for cells and header cells.
+     */
+    align: TableAlign;
+    /**
+     * Footer corner radius classes.
+     */
+    roundedFooter?: string;
+    /**
+     * Header corner radius classes.
+     */
+    roundedHeader?: string;
+    /**
+     * Caption size classes.
+     */
+    sizeCaption?: string;
+    /**
+     * Body cell size classes.
+     */
+    sizeCell?: string;
+    /**
+     * Header cell size classes.
+     */
+    sizeHead?: string;
+    /**
+     * Body variant classes.
+     */
+    variantBody?: string;
+    /**
+     * Caption variant classes.
+     */
+    variantCaption?: string;
+    /**
+     * Body cell variant classes.
+     */
+    variantCell?: string;
+    /**
+     * Footer variant classes.
+     */
+    variantFooter?: string;
+    /**
+     * Header cell variant classes.
+     */
+    variantHead?: string;
+    /**
+     * Header variant classes.
+     */
+    variantHeader?: string;
+    /**
+     * Sticky header cell variant classes.
+     */
+    variantHeadSticky?: string;
+    /**
+     * Row variant classes.
+     */
+    variantRow?: string;
+    /**
+     * Hoverable body row variant classes.
+     */
+    variantRowHover?: string;
+    /**
+     * Striped body row variant classes.
+     */
+    variantRowStriped?: string;
+};
+/**
+ * Shared table chrome for `Table*` descendants.
+ */
+export type TableContextValue = {
+    /**
+     * Whether the table is full width.
+     */
+    full: boolean;
+    /**
+     * Whether body rows show hover styles.
+     */
+    hoverable: boolean;
+    /**
+     * Registry / instance classes for parts.
+     */
+    mergedClasses: {
+        body?: string;
+        caption?: string;
+        cell?: string;
+        footer?: string;
+        head?: string;
+        header?: string;
+        row?: string;
+    };
+    /**
+     * Whether header cells stick to the nearest scrollport (usually the page).
+     */
+    stickyHeader: boolean;
+    /**
+     * Whether body rows alternate surfaces.
+     */
+    striped: boolean;
+    /**
+     * Merged token classes for parts.
+     */
+    tokenClasses: TableTokenClasses;
+};
+export declare const TABLE_INJECTION_KEY: InjectionKey<ComputedRef<TableContextValue>>;
+export declare const TABLE_SECTION_INJECTION_KEY: InjectionKey<ComputedRef<TableSection>>;

package/dist/Components/Table/tableInjectionKey.js

@@ -0,0 +1,4 @@
+//#region src/Components/Table/tableInjectionKey.ts
+var e = Symbol("bridge-table"), t = Symbol("bridge-table-section");
+//#endregion
+export { e as TABLE_INJECTION_KEY, t as TABLE_SECTION_INJECTION_KEY };

package/dist/Components/TextField/composables/useTextField.d.ts

@@ -170,7 +170,7 @@ export declare function useTextField(props: TextFieldOwnProps): {
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;

package/dist/Components/Textarea/composables/useTextarea.d.ts

@@ -171,7 +171,7 @@ export declare function useTextarea(props: TextareaOwnProps, textareaRef: Ref<nu
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;

package/dist/Components/TimeField/composables/useTimeField.d.ts

@@ -181,7 +181,7 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -730,6 +730,7 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
             disableAutoFocus?: boolean;
             disableScrollLock?: boolean;
             keepMounted?: boolean;
+            matchWidth?: boolean;
             offset?: number;
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;

package/dist/Components/TimePanel/composables/useTimePanel.d.ts

@@ -27,6 +27,7 @@ export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>,
     columnBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     getHourBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
+        "aria-label": string;
         disabled: boolean;
         "aria-pressed": boolean;
         onClick: () => void;
@@ -38,12 +39,14 @@ export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>,
     showMeridiem: import('vue').ComputedRef<boolean>;
     getMinuteBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
+        "aria-label": string;
         disabled: boolean;
         "aria-pressed": boolean;
         onClick: () => void;
     }>;
     getSecondBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
+        "aria-label": string;
         disabled: boolean;
         "aria-pressed": boolean;
         onClick: () => void;
@@ -51,6 +54,7 @@ export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>,
     meridiemItems: import('vue').ComputedRef<TimePanelItem[]>;
     getMeridiemBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
+        "aria-label": string;
         disabled: boolean;
         "aria-pressed": boolean;
         onClick: () => void;

package/dist/Components/TimePanel/composables/useTimePanel.js

@@ -143,34 +143,35 @@ function E(w, E, D) {
 		"w-fit min-w-fit": !M.value.fill,
 		[I.value.root ?? ""]: !0
 	}))), Q = a(() => n(P.value?.column, {}, y({
-		"box-border flex h-full min-w-0 flex-1 flex-col items-stretch gap-1 overflow-x-hidden overflow-y-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-corner]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-dark-300 dark:[&::-webkit-scrollbar-thumb]:bg-dark-600": !0,
+		"box-border flex h-full min-w-0 flex-1 flex-col items-stretch gap-1 overflow-x-hidden overflow-y-auto bridge-scroll-fade-y bridge-hide-scrollbar": !0,
 		[T]: !0,
 		[I.value.column ?? ""]: !0
-	}))), $ = (e, t) => {
-		let r = z.value;
+	}))), $ = (e, t, r) => {
+		let i = z.value;
 		return n(P.value?.item, {
 			type: "button",
+			"aria-label": r,
 			disabled: e.disabled,
 			"aria-pressed": e.selected,
 			onClick: () => t(e.value)
 		}, y({
-			"w-full cursor-pointer px-3 py-2 text-sm transition-all duration-150 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed": !0,
+			"w-full cursor-pointer px-3 py-2 text-sm transition-colors duration-150 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed": !0,
 			[R.value ?? ""]: !0,
-			[r?.base ?? ""]: e.state === "base" || e.state === "hover",
-			[r?.hover ?? ""]: e.state === "base" || e.state === "hover",
-			[r?.selected ?? ""]: e.state === "selected",
-			[r?.disabled ?? ""]: e.state === "disabled",
+			[i?.base ?? ""]: e.state === "base" || e.state === "hover",
+			[i?.hover ?? ""]: e.state === "base" || e.state === "hover",
+			[i?.selected ?? ""]: e.state === "selected",
+			[i?.disabled ?? ""]: e.state === "disabled",
 			[I.value.item ?? ""]: !0
 		}));
 	}, oe = (e) => $(e, (e) => {
 		typeof e == "number" && K(e);
-	}), se = (e) => $(e, (e) => {
+	}, `Hour ${e.label}`), se = (e) => $(e, (e) => {
 		typeof e == "number" && q(e);
-	}), ce = (e) => $(e, (e) => {
+	}, `Minute ${e.label}`), ce = (e) => $(e, (e) => {
 		typeof e == "number" && J(e);
-	}), le = (e) => $(e, (e) => {
+	}, `Second ${e.label}`), le = (e) => $(e, (e) => {
 		(e === "AM" || e === "PM") && Y(e);
-	}), ue = a(() => !!M.value.ampm);
+	}, String(e.label)), ue = a(() => !!M.value.ampm);
 	return {
 		merged: M,
 		rootBind: ae,

package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts

@@ -181,7 +181,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -722,6 +722,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
             disableAutoFocus?: boolean;
             disableScrollLock?: boolean;
             keepMounted?: boolean;
+            matchWidth?: boolean;
             offset?: number;
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;