@bridge-ui/vue 0.2.0 → 0.4.0

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

@@ -0,0 +1,151 @@
+import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
+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 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"
+}, M = {
+	key: 1,
+	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",
+	props: {
+		active: { type: Boolean },
+		columnId: {},
+		multiple: { type: Boolean },
+		options: {},
+		overlay: { default: "auto" },
+		searchable: { type: Boolean },
+		searchValue: {},
+		values: {}
+	},
+	emits: ["apply"],
+	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]);
+		});
+		function Y() {
+			R.value = !R.value;
+		}
+		function X(e, t) {
+			V.value = E(V.value, e, t, I.multiple);
+		}
+		function Z() {
+			V.value = T(V.value, W.value, !K.value);
+		}
+		function Q() {
+			V.value = [], z.value = "";
+		}
+		function $() {
+			L("apply", V.value, z.value), R.value = !1;
+		}
+		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
+		}, {
+			default: x(() => [d("div", A, [
+				m.searchable ? (g(), u("div", j, [p(y(o), {
+					"hide-error-message": "",
+					"start-icon": "search",
+					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", M, [m.multiple && W.value.length > 0 ? (g(), u("div", {
+					key: 0,
+					role: "menuitemcheckbox",
+					"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(y(a), {
+					"hide-error-message": "",
+					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,
+					size: G.value,
+					draft: V.value,
+					multiple: m.multiple,
+					onToggle: X,
+					name: `filter-${m.columnId}`
+				}, null, 8, [
+					"options",
+					"size",
+					"draft",
+					"multiple",
+					"name"
+				])])) : l("", !0),
+				d("div", P, [p(y(r), {
+					size: "sm",
+					variant: "outline",
+					onClick: Q
+				}, {
+					default: x(() => [f(v(y(H)("Reset")), 1)]),
+					_: 1
+				}), p(y(r), {
+					size: "sm",
+					onClick: $
+				}, {
+					default: x(() => [f(v(y(H)("OK")), 1)]),
+					_: 1
+				})])
+			])]),
+			_: 1
+		}, 8, [
+			"modelValue",
+			"overlay",
+			"custom-props"
+		])]));
+	}
+});
+//#endregion
+export { F as default };

package/dist/Components/DataTable/DataTableFilterOptions.js

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

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

@@ -0,0 +1,17 @@
+import { DataTableFilterOption } from '@bridge-ui/core/Domain';
+type __VLS_Props = {
+    draft: string[];
+    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;
+}>, {
+    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

@@ -0,0 +1,81 @@
+import e from "../Checkbox/Checkbox.js";
+import t from "../Radio/Radio.js";
+import { Fragment as n, createBlock as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, openBlock as c, renderList as l, resolveComponent as u, toDisplayString as d, unref as f } from "vue";
+//#region src/Components/DataTable/DataTableFilterOptions.vue?vue&type=script&setup=true&lang.ts
+var p = {
+	key: 0,
+	class: "min-w-0"
+}, m = { class: "px-2 py-1 text-xs font-medium text-dark-500 dark:text-dark-400" }, h = { class: "ps-2" }, g = [
+	"aria-checked",
+	"role",
+	"onClick"
+], _ = /*@__PURE__*/ s({
+	inheritAttrs: !1,
+	name: "DataTableFilterOptions",
+	__name: "DataTableFilterOptions",
+	props: {
+		draft: {},
+		multiple: { type: Boolean },
+		name: {},
+		options: {},
+		size: { default: "sm" }
+	},
+	emits: ["toggle"],
+	setup(s, { emit: _ }) {
+		let v = s, y = _;
+		function b(e) {
+			return v.multiple ? v.draft.includes(e) : v.draft[0] === e;
+		}
+		return (_, v) => {
+			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"
+			])])])) : (c(), i("div", {
+				key: 1,
+				"aria-checked": b(l.value),
+				role: s.multiple ? "menuitemcheckbox" : "menuitemradio",
+				onClick: (e) => y("toggle", l.value, !b(l.value)),
+				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: s.size,
+				"hide-error-message": "",
+				"end-label": l.label,
+				"model-value": b(l.value),
+				classes: { root: "pointer-events-none" }
+			}, null, 8, [
+				"size",
+				"end-label",
+				"model-value"
+			])) : (c(), r(f(t), {
+				key: 1,
+				name: s.name,
+				size: s.size,
+				"hide-error-message": "",
+				value: l.value,
+				"model-value": s.draft[0],
+				"end-label": l.label,
+				classes: { root: "pointer-events-none" }
+			}, null, 8, [
+				"name",
+				"size",
+				"value",
+				"model-value",
+				"end-label"
+			]))], 8, g))], 64))), 128);
+		};
+	}
+});
+//#endregion
+export { _ as default };

package/dist/Components/DataTable/DataTableSearch.js

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

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

@@ -0,0 +1,12 @@
+import { TextFieldOwnProps } from '../TextField/textField.types';
+type __VLS_Props = {
+    fieldProps?: Partial<Omit<TextFieldOwnProps, "modelValue">>;
+    modelValue: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (query: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((query: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,39 @@
+import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
+import t from "../TextField/TextField.js";
+import { createBlock as n, defineComponent as r, mergeProps as i, openBlock as a, unref as o } from "vue";
+import { cn as s } from "@bridge-ui/core/Utils";
+//#region src/Components/DataTable/DataTableSearch.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ r({
+	inheritAttrs: !1,
+	name: "DataTableSearch",
+	__name: "DataTableSearch",
+	props: {
+		fieldProps: {},
+		modelValue: {}
+	},
+	emits: ["update:modelValue"],
+	setup(r, { emit: c }) {
+		let l = c, u = e();
+		return (e, c) => (a(), n(o(t), i({
+			size: "sm",
+			"hide-error-message": "",
+			"start-icon": "search"
+		}, r.fieldProps, {
+			"model-value": r.modelValue,
+			"aria-label": o(u)("Search"),
+			placeholder: o(u)("Search"),
+			"onUpdate:modelValue": c[0] ||= (e) => l("update:modelValue", e ?? ""),
+			classes: {
+				...r.fieldProps?.classes,
+				root: o(s)("w-52", r.fieldProps?.classes?.root)
+			}
+		}), null, 16, [
+			"model-value",
+			"aria-label",
+			"placeholder",
+			"classes"
+		]));
+	}
+});
+//#endregion
+export { c as default };

package/dist/Components/DataTable/DataTableSelection.js

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

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

@@ -0,0 +1,20 @@
+import { CheckboxProps } from '../Checkbox/checkbox.types';
+import { DataTableCustomProps } from './dataTable.types';
+type __VLS_Props = {
+    checkboxProps?: DataTableCustomProps["checkbox"];
+    checked: boolean;
+    indeterminate?: boolean;
+    kind: "row" | "page";
+    multiple?: boolean;
+    name?: string;
+    radioProps?: DataTableCustomProps["radio"];
+    size: CheckboxProps["size"];
+    value?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (checked: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((checked: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,56 @@
+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 l = /*@__PURE__*/ a({
+	inheritAttrs: !1,
+	name: "DataTableSelection",
+	__name: "DataTableSelection",
+	props: {
+		checkboxProps: {},
+		checked: { type: Boolean },
+		indeterminate: { type: Boolean },
+		kind: {},
+		multiple: { type: Boolean },
+		name: {},
+		radioProps: {},
+		size: {},
+		value: {}
+	},
+	emits: ["change"],
+	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: a.size,
+			"hide-error-message": "",
+			"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"
+		])) : (s(), i(c(n), o({
+			key: 1,
+			size: a.size,
+			name: a.name,
+			value: a.value,
+			"hide-error-message": "",
+			"aria-label": p.value
+		}, a.radioProps, {
+			"model-value": a.checked ? a.value : "",
+			"onUpdate:modelValue": r[1] ||= () => d("change", !0)
+		}), null, 16, [
+			"size",
+			"name",
+			"value",
+			"aria-label",
+			"model-value"
+		]));
+	}
+});
+//#endregion
+export { l as default };

package/dist/Components/DataTable/DataTableSortButton.js

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

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

@@ -0,0 +1,17 @@
+import { DataTableAriaSort } from '@bridge-ui/core/Domain';
+type __VLS_Props = {
+    sort: DataTableAriaSort;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/DataTable/DataTableSortButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,43 @@
+import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
+import t from "../Icon/Icon.js";
+import n from "../Tooltip/Tooltip.js";
+import { Fragment as r, computed as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, unref as f, withCtx as p } from "vue";
+import { getDataTableSortTooltip as m } from "@bridge-ui/core/Domain";
+import { cn as h } from "@bridge-ui/core/Utils";
+//#region src/Components/DataTable/DataTableSortButton.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "inline-flex min-w-0 flex-1 items-center gap-1.5 leading-none" }, _ = { class: "min-w-0 truncate leading-none" }, v = { class: "inline-flex h-6 w-5 shrink-0 flex-col items-center justify-center leading-none" }, y = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	name: "DataTableSortButton",
+	__name: "DataTableSortButton",
+	props: { sort: {} },
+	setup(c) {
+		let y = c, b = e(), x = i(() => b(m(y.sort)));
+		return (e, i) => (u(), a(r, null, [o("span", g, [o("span", _, [d(e.$slots, "default")]), o("span", v, [s(f(t), {
+			size: "lg",
+			icon: "chevronUp",
+			class: l(f(h)({
+				"-mb-1": !0,
+				"text-dark-800 dark:text-dark-100": c.sort === "ascending",
+				"text-dark-300 dark:text-dark-600": c.sort !== "ascending"
+			}))
+		}, null, 8, ["class"]), s(f(t), {
+			size: "lg",
+			icon: "chevronDown",
+			class: l(f(h)({
+				"text-dark-800 dark:text-dark-100": c.sort === "descending",
+				"text-dark-300 dark:text-dark-600": c.sort !== "descending"
+			}))
+		}, null, 8, ["class"])])]), s(f(n), {
+			content: x.value,
+			"custom-props": {
+				root: { class: "absolute inset-0 z-[1] max-w-none" },
+				trigger: { class: "absolute inset-0 size-full max-w-none" }
+			}
+		}, {
+			trigger: p(() => [...i[0] ||= [o("span", { class: "size-full" }, null, -1)]]),
+			_: 1
+		}, 8, ["content"])], 64));
+	}
+});
+//#endregion
+export { y as default };

package/dist/Components/DataTable/DataTableToolbarButton.js

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

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

@@ -0,0 +1,14 @@
+import { IconSource } from '../../Adapters/Icon';
+import { ButtonOwnProps } from '../Button/button.types';
+type __VLS_Props = {
+    buttonProps?: Partial<Omit<ButtonOwnProps, "icon">>;
+    icon: IconSource;
+    label: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,31 @@
+import e from "../Button/Button.js";
+import t from "../Tooltip/Tooltip.js";
+import { createBlock as n, createVNode as r, defineComponent as i, mergeProps as a, openBlock as o, unref as s, withCtx as c } from "vue";
+//#region src/Components/DataTable/DataTableToolbarButton.vue?vue&type=script&setup=true&lang.ts
+var l = /*@__PURE__*/ i({
+	inheritAttrs: !1,
+	name: "DataTableToolbarButton",
+	__name: "DataTableToolbarButton",
+	props: {
+		buttonProps: {},
+		icon: {},
+		label: {}
+	},
+	emits: ["click"],
+	setup(i, { emit: l }) {
+		let u = l;
+		return (l, d) => (o(), n(s(t), { content: i.label }, {
+			trigger: c(() => [r(s(e), a({
+				size: "sm",
+				color: "dark",
+				icon: i.icon,
+				type: "button",
+				density: "mini",
+				"aria-label": i.label
+			}, i.buttonProps, { onClick: d[0] ||= (e) => u("click", e) }), null, 16, ["icon", "aria-label"])]),
+			_: 1
+		}, 8, ["content"]));
+	}
+});
+//#endregion
+export { l as default };