@bridge-ui/vue 0.3.0 → 0.4.0

package/dist/Components/DataTable/DataTableFilterMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,21 +1,22 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
-import t from "../Icon/Icon.js";
-import n from "../Button/Button.js";
-import r from "../Menu/Menu.js";
-import i from "../Checkbox/Checkbox.js";
-import a from "../TextField/TextField.js";
-import o from "./DataTableFilterOptions.js";
-import { 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, openBlock as g, ref as _, unref as v, watch as y, withCtx as b } from "vue";
-import { flattenDataTableFilterOptionValues as x, setDataTableFilterDraftAll as S, toggleDataTableFilterDraft as C } from "@bridge-ui/core/Domain";
-import { cn as w } from "@bridge-ui/core/Utils";
+import { useBreakpoint as t } from "../../Utils/useBreakpoint.js";
+import n from "../Icon/Icon.js";
+import r from "../Button/Button.js";
+import i from "../FieldOverlay/FieldOverlay.js";
+import a from "../Checkbox/Checkbox.js";
+import o from "../TextField/TextField.js";
+import s from "./DataTableFilterOptions.js";
+import { computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, ref as _, toDisplayString as v, unref as y, watch as b, withCtx as x } from "vue";
+import { flattenDataTableFilterOptionValues as S, getFieldOverlayControlSize as C, resolveFieldOverlay as w, setDataTableFilterDraftAll as T, toggleDataTableFilterDraft as E } from "@bridge-ui/core/Domain";
+import { cn as D } from "@bridge-ui/core/Utils";
 //#region src/Components/DataTable/DataTableFilterMenu.vue?vue&type=script&setup=true&lang.ts
-var T = ["aria-pressed"], E = { class: "min-w-52 px-1 pb-0.5 pt-2.5" }, D = {
+var O = { class: "relative z-2 inline-flex items-center leading-none" }, k = ["aria-pressed", "aria-label"], A = { class: "min-w-52 overflow-hidden rounded-md bg-white px-1 pb-0.5 pt-2.5 shadow-lg ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10" }, j = {
 	key: 0,
 	class: "px-1 pb-1.5"
-}, O = {
+}, M = {
 	key: 1,
-	class: "flex max-h-60 flex-col gap-0.5 overflow-y-auto pb-2"
-}, k = ["aria-checked"], A = { class: "flex justify-end gap-2 border-t border-dark-200 px-2 pb-1 pt-1.5 dark:border-dark-700" }, j = /*@__PURE__*/ m({
+	class: "flex max-h-60 flex-col gap-0.5 overflow-y-auto overscroll-contain pb-2 bridge-soft-scrollbar"
+}, N = ["aria-checked"], P = { class: "flex justify-end gap-2 border-t border-dark-200 px-2 pb-1 pt-1.5 dark:border-dark-700" }, F = /*@__PURE__*/ m({
 	inheritAttrs: !1,
 	name: "DataTableFilterMenu",
 	__name: "DataTableFilterMenu",
@@ -24,109 +25,127 @@ var T = ["aria-pressed"], E = { class: "min-w-52 px-1 pb-0.5 pt-2.5" }, D = {
 		columnId: {},
 		multiple: { type: Boolean },
 		options: {},
+		overlay: { default: "auto" },
 		searchable: { type: Boolean },
 		searchValue: {},
 		values: {}
 	},
 	emits: ["apply"],
-	setup(m, { emit: j }) {
-		let M = m, N = j, P = _(!1), F = _([]), I = _(""), L = e(), R = s(() => L("Search")), z = s(() => x(M.options)), B = s(() => z.value.length > 0 && z.value.every((e) => F.value.includes(e))), V = s(() => {
-			let e = z.value.filter((e) => F.value.includes(e)).length;
-			return e > 0 && e < z.value.length;
+	setup(m, { emit: F }) {
+		let I = m, L = F, R = _(!1), z = _(""), B = t(), V = _([]), H = e(), U = _(null), W = c(() => S(I.options)), G = c(() => C(w(I.overlay, B.mobile))), K = c(() => W.value.length > 0 && W.value.every((e) => V.value.includes(e))), q = c(() => {
+			let e = W.value.filter((e) => V.value.includes(e)).length;
+			return e > 0 && e < W.value.length;
+		}), J = c(() => ({ menu: {
+			anchorEl: U.value,
+			placement: "bottom"
+		} }));
+		b(R, (e) => {
+			e && (z.value = I.searchValue, V.value = [...I.values]);
 		});
-		y(P, (e) => {
-			e && (I.value = M.searchValue, F.value = [...M.values]);
-		});
-		function H(e, t) {
-			F.value = C(F.value, e, t, M.multiple);
+		function Y() {
+			R.value = !R.value;
+		}
+		function X(e, t) {
+			V.value = E(V.value, e, t, I.multiple);
 		}
-		function U() {
-			F.value = S(F.value, z.value, !B.value);
+		function Z() {
+			V.value = T(V.value, W.value, !K.value);
 		}
-		function W() {
-			F.value = [], I.value = "";
+		function Q() {
+			V.value = [], z.value = "";
 		}
-		function G() {
-			N("apply", F.value, I.value), P.value = !1;
+		function $() {
+			L("apply", V.value, z.value), R.value = !1;
 		}
-		return (e, s) => (g(), c(v(r), {
-			modelValue: P.value,
-			"onUpdate:modelValue": s[1] ||= (e) => P.value = e,
-			placement: "bottom",
-			"custom-props": {
-				root: { class: "relative z-[2] inline-flex items-center leading-none" },
-				trigger: { class: "inline-flex items-center leading-none" }
-			}
+		return (e, t) => (g(), u("span", O, [d("button", {
+			type: "button",
+			ref_key: "triggerRef",
+			ref: U,
+			"aria-pressed": m.active,
+			onClick: Y,
+			"aria-label": y(H)("Filter column"),
+			class: h(y(D)({
+				"inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm leading-none hover:bg-dark-500/10 dark:hover:bg-dark-500/15": !0,
+				"text-primary-600": m.active
+			}))
+		}, [p(y(n), {
+			size: "sm",
+			icon: "filter"
+		})], 10, k), p(y(i), {
+			modelValue: R.value,
+			"onUpdate:modelValue": t[1] ||= (e) => R.value = e,
+			overlay: m.overlay,
+			"custom-props": J.value
 		}, {
-			trigger: b(() => [d("button", {
-				type: "button",
-				"aria-pressed": m.active,
-				"aria-label": "Filter column",
-				class: h(v(w)({
-					"inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm leading-none hover:bg-dark-500/10 dark:hover:bg-dark-500/15": !0,
-					"text-primary-600": m.active
-				}))
-			}, [p(v(t), {
-				size: "sm",
-				icon: "filter"
-			})], 10, T)]),
-			default: b(() => [d("div", E, [
-				m.searchable ? (g(), u("div", D, [p(v(a), {
-					size: "sm",
+			default: x(() => [d("div", A, [
+				m.searchable ? (g(), u("div", j, [p(y(o), {
 					"hide-error-message": "",
 					"start-icon": "search",
-					modelValue: I.value,
-					"onUpdate:modelValue": s[0] ||= (e) => I.value = e,
-					"aria-label": R.value,
-					placeholder: R.value
+					size: G.value,
+					modelValue: z.value,
+					"onUpdate:modelValue": t[0] ||= (e) => z.value = e,
+					"aria-label": y(H)("Search"),
+					placeholder: y(H)("Search")
 				}, null, 8, [
+					"size",
 					"modelValue",
 					"aria-label",
 					"placeholder"
 				])])) : l("", !0),
-				m.options.length > 0 ? (g(), u("div", O, [m.multiple && z.value.length > 0 ? (g(), u("div", {
+				m.options.length > 0 ? (g(), u("div", M, [m.multiple && W.value.length > 0 ? (g(), u("div", {
 					key: 0,
 					role: "menuitemcheckbox",
-					"aria-checked": B.value,
-					onClick: U,
+					"aria-checked": K.value,
+					onClick: Z,
 					class: "flex w-full cursor-pointer items-center rounded-md px-2 py-1.5 text-start hover:bg-dark-500/5 dark:hover:bg-dark-500/10"
-				}, [p(v(i), {
-					size: "sm",
+				}, [p(y(a), {
 					"hide-error-message": "",
-					"model-value": B.value,
-					"end-label": "Select all items",
-					indeterminate: V.value,
-					classes: { root: "pointer-events-none" }
-				}, null, 8, ["model-value", "indeterminate"])], 8, k)) : l("", !0), p(o, {
+					size: G.value,
+					"model-value": K.value,
+					indeterminate: q.value,
+					classes: { root: "pointer-events-none" },
+					"end-label": y(H)("Select all items")
+				}, null, 8, [
+					"size",
+					"model-value",
+					"indeterminate",
+					"end-label"
+				])], 8, N)) : l("", !0), p(s, {
 					options: m.options,
-					draft: F.value,
+					size: G.value,
+					draft: V.value,
 					multiple: m.multiple,
-					onToggle: H,
+					onToggle: X,
 					name: `filter-${m.columnId}`
 				}, null, 8, [
 					"options",
+					"size",
 					"draft",
 					"multiple",
 					"name"
 				])])) : l("", !0),
-				d("div", A, [p(v(n), {
+				d("div", P, [p(y(r), {
 					size: "sm",
 					variant: "outline",
-					onClick: W
+					onClick: Q
 				}, {
-					default: b(() => [...s[2] ||= [f(" Reset ", -1)]]),
+					default: x(() => [f(v(y(H)("Reset")), 1)]),
 					_: 1
-				}), p(v(n), {
+				}), p(y(r), {
 					size: "sm",
-					onClick: G
+					onClick: $
 				}, {
-					default: b(() => [...s[3] ||= [f("OK", -1)]]),
+					default: x(() => [f(v(y(H)("OK")), 1)]),
 					_: 1
 				})])
 			])]),
 			_: 1
-		}, 8, ["modelValue"]));
+		}, 8, [
+			"modelValue",
+			"overlay",
+			"custom-props"
+		])]));
 	}
 });
 //#endregion
-export { j as default };
+export { F as default };

package/dist/Components/DataTable/DataTableFilterOptions.vue.d.ts

@@ -4,11 +4,14 @@ type __VLS_Props = {
     multiple: boolean;
     name: string;
     options: DataTableFilterOption[];
+    size?: "md" | "sm";
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     toggle: (value: string, selected: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: ((value: string, selected: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    size: "md" | "sm";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/Components/DataTable/DataTableFilterOptions.vue_vue_type_script_setup_true_lang.js

@@ -17,7 +17,8 @@ var p = {
 		draft: {},
 		multiple: { type: Boolean },
 		name: {},
-		options: {}
+		options: {},
+		size: { default: "sm" }
 	},
 	emits: ["toggle"],
 	setup(s, { emit: _ }) {
@@ -29,12 +30,14 @@ var p = {
 			let x = u("DataTableFilterOptions", !0);
 			return c(!0), i(n, null, l(s.options, (l) => (c(), i(n, { key: l.value }, [l.children && l.children.length > 0 ? (c(), i("div", p, [a("div", m, d(l.label), 1), a("div", h, [o(x, {
 				name: s.name,
+				size: s.size,
 				draft: s.draft,
 				multiple: s.multiple,
 				options: l.children,
 				onToggle: v[0] ||= (e, t) => y("toggle", e, t)
 			}, null, 8, [
 				"name",
+				"size",
 				"draft",
 				"multiple",
 				"options"
@@ -46,15 +49,19 @@ var p = {
 				class: "flex w-full cursor-pointer items-center rounded-md px-2 py-1.5 text-start hover:bg-dark-500/5 dark:hover:bg-dark-500/10"
 			}, [s.multiple ? (c(), r(f(e), {
 				key: 0,
-				size: "sm",
+				size: s.size,
 				"hide-error-message": "",
 				"end-label": l.label,
 				"model-value": b(l.value),
 				classes: { root: "pointer-events-none" }
-			}, null, 8, ["end-label", "model-value"])) : (c(), r(f(t), {
+			}, null, 8, [
+				"size",
+				"end-label",
+				"model-value"
+			])) : (c(), r(f(t), {
 				key: 1,
-				size: "sm",
 				name: s.name,
+				size: s.size,
 				"hide-error-message": "",
 				value: l.value,
 				"model-value": s.draft[0],
@@ -62,6 +69,7 @@ var p = {
 				classes: { root: "pointer-events-none" }
 			}, null, 8, [
 				"name",
+				"size",
 				"value",
 				"model-value",
 				"end-label"

package/dist/Components/DataTable/DataTableSelection.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import e from "../Checkbox/Checkbox.js";
-import t from "../Radio/Radio.js";
-import { computed as n, createBlock as r, defineComponent as i, mergeProps as a, openBlock as o, unref as s } from "vue";
+import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
+import t from "../Checkbox/Checkbox.js";
+import n from "../Radio/Radio.js";
+import { computed as r, createBlock as i, defineComponent as a, mergeProps as o, openBlock as s, unref as c } from "vue";
 //#region src/Components/DataTable/DataTableSelection.vue?vue&type=script&setup=true&lang.ts
-var c = /*@__PURE__*/ i({
+var l = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	name: "DataTableSelection",
 	__name: "DataTableSelection",
@@ -18,30 +19,30 @@ var c = /*@__PURE__*/ i({
 		value: {}
 	},
 	emits: ["change"],
-	setup(i, { emit: c }) {
-		let l = i, u = c, d = n(() => l.kind === "page" ? "Select all rows" : "Select row");
-		return (n, c) => i.kind === "page" || i.multiple ? (o(), r(s(e), a({
+	setup(a, { emit: l }) {
+		let u = a, d = l, f = e(), p = r(() => u.kind === "page" ? f("Select all rows") : f("Select row"));
+		return (e, r) => a.kind === "page" || a.multiple ? (s(), i(c(t), o({
 			key: 0,
-			size: i.size,
+			size: a.size,
 			"hide-error-message": "",
-			"model-value": i.checked,
-			"aria-label": d.value,
-			indeterminate: i.indeterminate
-		}, i.checkboxProps, { "onUpdate:modelValue": c[0] ||= (e) => u("change", !!e) }), null, 16, [
+			"model-value": a.checked,
+			"aria-label": p.value,
+			indeterminate: a.indeterminate
+		}, a.checkboxProps, { "onUpdate:modelValue": r[0] ||= (e) => d("change", !!e) }), null, 16, [
 			"size",
 			"model-value",
 			"aria-label",
 			"indeterminate"
-		])) : (o(), r(s(t), a({
+		])) : (s(), i(c(n), o({
 			key: 1,
-			size: i.size,
-			name: i.name,
-			value: i.value,
+			size: a.size,
+			name: a.name,
+			value: a.value,
 			"hide-error-message": "",
-			"aria-label": d.value
-		}, i.radioProps, {
-			"model-value": i.checked ? i.value : "",
-			"onUpdate:modelValue": c[1] ||= () => u("change", !0)
+			"aria-label": p.value
+		}, a.radioProps, {
+			"model-value": a.checked ? a.value : "",
+			"onUpdate:modelValue": r[1] ||= () => d("change", !0)
 		}), null, 16, [
 			"size",
 			"name",
@@ -52,4 +53,4 @@ var c = /*@__PURE__*/ i({
 	}
 });
 //#endregion
-export { c as default };
+export { l as default };

package/dist/Components/DataTable/DataTableToolbarButton.vue.d.ts

@@ -1,7 +1,8 @@
+import { IconSource } from '../../Adapters/Icon';
 import { ButtonOwnProps } from '../Button/button.types';
 type __VLS_Props = {
     buttonProps?: Partial<Omit<ButtonOwnProps, "icon">>;
-    icon: "columns";
+    icon: IconSource;
     label: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {

package/dist/Components/DataTable/composables/useDataTable.d.ts

@@ -2,11 +2,12 @@ import { Ref, VNode, VNodeChild } from 'vue';
 import { getDataTableAriaSort, getDataTableSortIcon, DataTableColumnSearch, DataTableFilterOption, DataTableFilters, DataTablePaginationSlotProps, DataTablePerPageSlotProps, DataTableSorting, DataTableStickyEdge, DataTableStickyInset } from '@bridge-ui/core/Domain';
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { DataTableColumn, DataTableOwnProps, DataTableProps } from '../dataTable.types';
-type DataTableLibDefaults = LibDefaultsShape<DataTableOwnProps<unknown>, "full" | "size" | "loading" | "rounded" | "striped" | "variant" | "hoverable" | "stickyHeader" | "selectionMode" | "loadingVariant" | "paginationAlign">;
+type DataTableLibDefaults = LibDefaultsShape<DataTableOwnProps<unknown>, "full" | "size" | "loading" | "rounded" | "striped" | "variant" | "hoverable" | "stickyHeader" | "filterOverlay" | "selectionMode" | "columnsOverlay" | "loadingVariant">;
 type DataTableMerged<T> = MergeLibDefaults<DataTableOwnProps<T>, DataTableLibDefaults>;
 export type DataTableHeaderView = {
     align?: DataTableColumn<unknown>["align"];
     ariaSort: ReturnType<typeof getDataTableAriaSort>;
+    classes?: DataTableColumn<unknown>["classes"];
     ellipsis: boolean;
     filterable: boolean;
     filterActive: boolean;
@@ -29,6 +30,7 @@ export type DataTableHeaderView = {
 };
 export type DataTableCellView = {
     align?: DataTableColumn<unknown>["align"];
+    classes?: DataTableColumn<unknown>["classes"];
     content: VNodeChild;
     ellipsis: boolean;
     id: string;
@@ -71,11 +73,14 @@ export declare function useDataTable<T>(props: DataTableOwnProps<T>, libDefaults
     rowViews: import('vue').ComputedRef<DataTableRowView<T>[]>;
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DataTableProps<T>, "search" | "columns" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "page" | "loading" | "rows" | "filters" | "hoverable" | "stickyHeader" | "striped" | "columnSearch" | "expanded" | "getRowId" | "hiddenColumns" | "loadingVariant" | "pageCount" | "paginationAlign" | "perPage" | "perPageOptions" | "selection" | "selectionMode" | "sorting" | "totalCount">>>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DataTableProps<T>, "search" | "columns" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "page" | "loading" | "rows" | "filters" | "hoverable" | "stickyHeader" | "striped" | "columnSearch" | "columnsOverlay" | "columnsShowFooter" | "expanded" | "filterOverlay" | "getRowId" | "hiddenColumns" | "loadingVariant" | "pageCount" | "perPage" | "perPageOptions" | "selection" | "selectionMode" | "sorting" | "totalCount">>>>;
     emptyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showEmpty: import('vue').ComputedRef<boolean>;
+    frameBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", {}, {}>>;
     tableProps: import('vue').ComputedRef<{
         size: NonNullable<keyof import('@bridge-ui/core/Tokens').TableSize | undefined>;
         variant: NonNullable<keyof import('@bridge-ui/core/Tokens').TableVariant | undefined>;
@@ -488,7 +493,7 @@ export declare function useDataTable<T>(props: DataTableOwnProps<T>, libDefaults
             left?: number;
             right?: number;
             width?: string | undefined;
-            minWidth?: string | undefined;
+            maxWidth?: string | undefined;
         };
         tabindex: number | undefined;
         "aria-sort": import('@bridge-ui/core/Domain').DataTableAriaSort | undefined;
@@ -512,7 +517,7 @@ export declare function useDataTable<T>(props: DataTableOwnProps<T>, libDefaults
             left?: number;
             right?: number;
             width?: string | undefined;
-            minWidth?: string | undefined;
+            maxWidth?: string | undefined;
         };
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, {}>;
@@ -532,6 +537,8 @@ export declare function useDataTable<T>(props: DataTableOwnProps<T>, libDefaults
         class: string;
     }, "class", {}, {}>>;
     paginationBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        onVnodeMounted: (vnode: VNode) => void;
+        onVnodeUnmounted: () => void;
         class: string;
     }, "class", {}, {}>>;
     selectAllState: import('vue').ComputedRef<{
@@ -551,6 +558,7 @@ export declare function useDataTable<T>(props: DataTableOwnProps<T>, libDefaults
     visibilityEnabled: import('vue').ComputedRef<boolean>;
     paginationSlotProps: import('vue').ComputedRef<DataTablePaginationSlotProps>;
     onCommitColumnFilter: (columnId: string, values: string[], query: string) => void;
+    onHiddenColumnsChange: (ids: string[]) => void;
     onToggleColumnVisibility: (columnId: string, hide: boolean) => void;
     loadingBar: import('vue').ComputedRef<boolean>;
 };