@bridge-ui/vue 0.0.10 → 0.1.0

package/dist/Components/Pagination/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,77 @@
+import e from "../Icon/Icon.js";
+import { usePagination as t } from "./composables/usePagination.js";
+import { Fragment as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useModel as v } from "vue";
+//#region src/Components/Pagination/Pagination.vue?vue&type=script&setup=true&lang.ts
+var y = {
+	key: 0,
+	class: "contents"
+}, b = {
+	key: 1,
+	class: "contents"
+}, x = {
+	key: 1,
+	class: "contents"
+}, S = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "Pagination",
+	props: /*@__PURE__*/ u({
+		boundaryCount: {},
+		classes: {},
+		color: {},
+		count: {},
+		customProps: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		hasNext: { type: Boolean },
+		hasPrevious: { type: Boolean },
+		hideNextButton: {
+			type: Boolean,
+			default: !1
+		},
+		hidePrevButton: {
+			type: Boolean,
+			default: !1
+		},
+		mode: {},
+		modelValue: {},
+		rounded: {},
+		siblingCount: {},
+		size: {},
+		variant: {}
+	}, {
+		modelValue: { default: 1 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u([
+		"change",
+		"next",
+		"previous",
+		"update:modelValue"
+	], ["update:modelValue"]),
+	setup(c, { emit: u }) {
+		let S = u, C = c, w = v(c, "modelValue"), { entries: T, showPrev: E, showNext: D, rootBind: O, listBind: k, prevBind: A, nextBind: j, getItemBind: M, prevIconBind: N, nextIconBind: P, getEllipsisBind: F } = t(C, {
+			size: "md",
+			rounded: "md",
+			variant: "text",
+			disabled: !1,
+			siblingCount: 1,
+			mode: "numbered",
+			color: "primary",
+			boundaryCount: 1,
+			hideNextButton: !1,
+			hidePrevButton: !1
+		}, w, S);
+		return (t, c) => (p(), i("nav", f(l(_(O))), [a("ul", f(l(_(k))), [
+			_(E) ? (p(), i("li", y, [a("button", f(l(_(A))), [h(t.$slots, "prev", {}, () => [s(_(e), d({ icon: "chevronLeft" }, _(N)), null, 16)])], 16)])) : r("", !0),
+			(p(!0), i(n, null, m(_(T), (e, r) => (p(), i(n, { key: `${e.type}-${r}` }, [e.type === "ellipsis" ? (p(), i("li", d({
+				key: 0,
+				ref_for: !0
+			}, _(F)(r)), [h(t.$slots, "ellipsis", {}, () => [c[0] ||= o("…", -1)])], 16)) : (p(), i("li", b, [a("button", d({ ref_for: !0 }, _(M)(e.page)), g(e.page), 17)]))], 64))), 128)),
+			_(D) ? (p(), i("li", x, [a("button", f(l(_(j))), [h(t.$slots, "next", {}, () => [s(_(e), d({ icon: "chevronRight" }, _(P)), null, 16)])], 16)])) : r("", !0)
+		], 16)], 16));
+	}
+});
+//#endregion
+export { S as default };

package/dist/Components/Pagination/composables/usePagination.d.ts

@@ -0,0 +1,62 @@
+import { Ref, SetupContext } from 'vue';
+import { PaginationEntry } from '@bridge-ui/core/Domain';
+import { IconSize } from '@bridge-ui/core/Tokens';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { PaginationEmits, PaginationOwnProps, PaginationProps } from '../pagination.types';
+type PaginationLibDefaults = LibDefaultsShape<PaginationOwnProps, "mode" | "size" | "color" | "rounded" | "variant" | "disabled" | "siblingCount" | "boundaryCount" | "hideNextButton" | "hidePrevButton">;
+type PaginationMerged = MergeLibDefaults<PaginationOwnProps, PaginationLibDefaults>;
+export declare function usePagination(props: PaginationOwnProps, libDefaults: PaginationLibDefaults, model: Ref<number | undefined>, emit: SetupContext<PaginationEmits>["emit"]): {
+    page: import('vue').ComputedRef<number>;
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    merged: import('vue').ComputedRef<PaginationMerged>;
+    entries: import('vue').ComputedRef<PaginationEntry[]>;
+    showPrev: import('vue').ComputedRef<boolean>;
+    showNext: import('vue').ComputedRef<boolean>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-label": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<PaginationProps, "color" | "mode" | "size" | "classes" | "customProps" | "rounded" | "variant" | "disabled" | "modelValue" | "boundaryCount" | "count" | "hasNext" | "hasPrevious" | "hideNextButton" | "hidePrevButton" | "siblingCount">>>;
+    listBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    prevBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        onClick: () => void;
+        type: "button";
+        "aria-label": string;
+        disabled: boolean;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    nextBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        onClick: () => void;
+        "aria-label": string;
+        type: "button";
+        disabled: boolean;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    getItemBind: (pageNumber: number) => import('@bridge-ui/core/Utils').MergePartBind<{
+        type: "button";
+        disabled: NonNullable<boolean | undefined>;
+        "aria-label": string;
+        "aria-current": "page" | undefined;
+        onClick: () => void;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>;
+    prevIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-hidden": boolean;
+        size: keyof IconSize;
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    nextIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-hidden": boolean;
+        size: keyof IconSize;
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    getEllipsisBind: (index: number) => import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-hidden": boolean;
+        "data-ellipsis-index": number;
+        class: string;
+    }, "class", import('vue').LiHTMLAttributes | undefined, {}>;
+};
+export {};

package/dist/Components/Pagination/composables/usePagination.js

@@ -0,0 +1,188 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { computed as r, useAttrs as i, useSlots as a } from "vue";
+import { get as o } from "es-toolkit/compat";
+import { getPaginationItems as s } from "@bridge-ui/core/Domain";
+import { paginationColorProps as ee, paginationRoundedProps as c, paginationSizeProps as l, paginationVariantProps as u } from "@bridge-ui/core/Tokens";
+import { cn as d, mergeBridgeUILayeredClasses as f, splitComponentProps as p } from "@bridge-ui/core/Utils";
+//#region src/Components/Pagination/composables/usePagination.ts
+var m = [
+	"mode",
+	"size",
+	"color",
+	"count",
+	"classes",
+	"hasNext",
+	"rounded",
+	"variant",
+	"disabled",
+	"modelValue",
+	"customProps",
+	"hasPrevious",
+	"siblingCount",
+	"boundaryCount",
+	"hideNextButton",
+	"hidePrevButton"
+];
+function h(h, g, _, v) {
+	let y = i(), b = a(), x = r(() => p({
+		props: {
+			...y,
+			...h
+		},
+		bridgeKeys: m
+	})), { merged: S, entry: C } = t({
+		libDefaults: g,
+		componentName: "Pagination",
+		props: () => x.value.componentProps
+	}), w = r(() => S.value.customProps), T = r(() => S.value.mode === "simple" ? 1 : _.value ?? 1), E = r(() => S.value.mode === "simple" ? [] : s({
+		page: T.value,
+		count: S.value.count ?? 0,
+		siblingCount: S.value.siblingCount,
+		boundaryCount: S.value.boundaryCount
+	})), D = n({
+		entry: C,
+		props: () => x.value.componentProps
+	}), O = r(() => f(l, C.value?.tokens?.size)), k = r(() => f(u, C.value?.tokens?.variant)), A = r(() => f(ee, C.value?.tokens?.color)), j = r(() => f(c, C.value?.tokens?.rounded)), M = r(() => o(O.value, S.value.size)), N = r(() => o(k.value, S.value.variant)), P = r(() => o(A.value, S.value.color)), F = r(() => o(j.value, S.value.rounded)), I = (e) => {
+		if (S.value.disabled) return;
+		let t = S.value.count ?? 0, n = Math.min(Math.max(1, e), Math.max(t, 1));
+		_.value = n, v("change", n), v("update:modelValue", n);
+	}, L = () => {
+		if (!S.value.disabled) {
+			if (S.value.mode === "simple") {
+				if (S.value.hasPrevious === !1) return;
+				v("previous");
+				return;
+			}
+			I(T.value - 1);
+		}
+	}, R = () => {
+		if (!S.value.disabled) {
+			if (S.value.mode === "simple") {
+				if (S.value.hasNext === !1) return;
+				v("next");
+				return;
+			}
+			I(T.value + 1);
+		}
+	}, z = r(() => S.value.disabled ? !0 : S.value.mode === "simple" ? S.value.hasPrevious === !1 : T.value <= 1), B = r(() => S.value.disabled ? !0 : S.value.mode === "simple" ? S.value.hasNext === !1 : T.value >= (S.value.count ?? 0)), V = r(() => !S.value.hidePrevButton), H = r(() => !S.value.hideNextButton), U = r(() => S.value.variant === "outlined"), W = r(() => S.value.variant === "ghost"), G = r(() => d({
+		[o(M.value, "item") ?? ""]: !0,
+		[o(N.value, "item") ?? ""]: !0,
+		[o(F.value, "item") ?? ""]: W.value
+	})), K = r(() => d({
+		[o(M.value, "itemIcon") ?? ""]: !0,
+		[o(N.value, "item") ?? ""]: !0,
+		[o(F.value, "item") ?? ""]: W.value
+	})), q = r(() => {
+		let e = S.value.variant;
+		return d({
+			[o(N.value, "itemSelected") ?? ""]: !0,
+			[o(P.value, "itemSelectedFilled") ?? ""]: e === "outlined",
+			[o(P.value, "itemSelectedAccent") ?? ""]: e === "text" || e === "ghost",
+			[o(P.value, "itemSelectedSoft") ?? ""]: e === "ghost"
+		});
+	}), J = r(() => {
+		let e = E.value.filter((e) => e.type === "page");
+		return {
+			first: e[0]?.page,
+			last: e[e.length - 1]?.page
+		};
+	}), Y = (e, t) => {
+		if (!U.value) return !1;
+		if (e === "prev") return !0;
+		if (V.value) return !1;
+		let n = E.value[0];
+		return e === "page" ? n?.type === "page" && n.page === t : e === "ellipsis" && n?.type === "ellipsis" && t === 0;
+	}, X = r(() => {
+		let t = x.value.inheritedAttrs;
+		return e(w.value?.root, t, {
+			"aria-label": t["aria-label"] ?? "Pagination",
+			class: d({
+				[o(M.value, "root") ?? ""]: !0,
+				[o(D.value, "root") ?? ""]: !0
+			})
+		});
+	}), Z = r(() => e(w.value?.list, {}, { class: d({
+		[o(M.value, "list") ?? ""]: !0,
+		[o(N.value, "list") ?? ""]: !0,
+		[o(F.value, "list") ?? ""]: U.value,
+		[o(D.value, "list") ?? ""]: !0
+	}) })), Q = (t) => {
+		let n = t === T.value, r = U.value && !V.value && t === J.value.first, i = U.value && !H.value && t === J.value.last;
+		return e(w.value?.item, {}, {
+			type: "button",
+			disabled: S.value.disabled,
+			"aria-label": `Page ${t}`,
+			"aria-current": n ? "page" : void 0,
+			onClick: () => {
+				n || I(t);
+			},
+			class: d({
+				[G.value]: !0,
+				[q.value]: n,
+				[o(D.value, "item") ?? ""]: !0,
+				"ml-0": Y("page", t),
+				[o(F.value, "itemStart") ?? ""]: r,
+				[o(F.value, "itemEnd") ?? ""]: i
+			})
+		});
+	}, te = (t) => e(w.value?.ellipsis, {}, {
+		"aria-hidden": !0,
+		"data-ellipsis-index": t,
+		class: d({
+			[o(M.value, "ellipsis") ?? ""]: !0,
+			[o(N.value, "ellipsis") ?? ""]: !0,
+			[o(F.value, "item") ?? ""]: W.value,
+			[o(D.value, "ellipsis") ?? ""]: !0,
+			"ml-0": Y("ellipsis", t)
+		})
+	}), $ = r(() => o(M.value, "icon") ?? "sm");
+	return {
+		page: T,
+		slots: b,
+		merged: S,
+		entries: E,
+		showPrev: V,
+		showNext: H,
+		rootBind: X,
+		listBind: Z,
+		prevBind: r(() => e(w.value?.prev, {}, {
+			onClick: L,
+			type: "button",
+			"aria-label": "Previous",
+			disabled: z.value,
+			class: d({
+				[K.value]: !0,
+				[o(D.value, "prev") ?? ""]: !0,
+				[o(D.value, "item") ?? ""]: !0,
+				"ml-0": U.value,
+				[o(F.value, "itemStart") ?? ""]: U.value
+			})
+		})),
+		nextBind: r(() => e(w.value?.next, {}, {
+			onClick: R,
+			"aria-label": "Next",
+			type: "button",
+			disabled: B.value,
+			class: d({
+				[K.value]: !0,
+				[o(D.value, "next") ?? ""]: !0,
+				[o(D.value, "item") ?? ""]: !0,
+				[o(F.value, "itemEnd") ?? ""]: U.value
+			})
+		})),
+		getItemBind: Q,
+		prevIconBind: r(() => e(w.value?.prevIcon, {}, {
+			"aria-hidden": !0,
+			size: $.value,
+			class: "shrink-0 pointer-events-none"
+		})),
+		nextIconBind: r(() => e(w.value?.nextIcon, {}, {
+			"aria-hidden": !0,
+			size: $.value,
+			class: "shrink-0 pointer-events-none"
+		})),
+		getEllipsisBind: te
+	};
+}
+//#endregion
+export { h as usePagination };

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

@@ -0,0 +1,3 @@
+export { usePagination } from './composables/usePagination';
+export type { PaginationClasses, PaginationColorOverrides, PaginationCustomProps, PaginationEmits, PaginationOwnProps, PaginationProps, PaginationRoundedOverrides, PaginationSizeOverrides, PaginationSlots, PaginationVariantOverrides, } from './pagination.types';
+export { default as Pagination } from './Pagination.vue';

package/dist/Components/Pagination/index.js

@@ -0,0 +1,3 @@
+import { usePagination as e } from "./composables/usePagination.js";
+import t from "./Pagination.js";
+export { t as Pagination, e as usePagination };

package/dist/Components/Pagination/pagination.types.d.ts

@@ -0,0 +1,218 @@
+import { ButtonHTMLAttributes, HTMLAttributes, LiHTMLAttributes, Slot } from 'vue';
+import { PaginationColor, PaginationRounded, PaginationSize, PaginationVariant } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
+import { IconProps } from '../Icon';
+export interface PaginationSizeOverrides {}
+export interface PaginationColorOverrides {}
+export interface PaginationRoundedOverrides {}
+export interface PaginationVariantOverrides {}
+export interface PaginationClasses {
+    /**
+     * Classes merged onto each ellipsis placeholder.
+     */
+    ellipsis?: string;
+    /**
+     * Classes merged onto each page button.
+     */
+    item?: string;
+    /**
+     * Classes merged onto the unordered list.
+     */
+    list?: string;
+    /**
+     * Classes merged onto the next control.
+     */
+    next?: string;
+    /**
+     * Classes merged onto the previous control.
+     */
+    prev?: string;
+    /**
+     * Classes merged onto the nav root.
+     */
+    root?: string;
+}
+export interface PaginationCustomProps {
+    /**
+     * Props forwarded to each ellipsis placeholder.
+     *
+     * @default undefined
+     */
+    ellipsis?: LiHTMLAttributes;
+    /**
+     * Props forwarded to each page button.
+     *
+     * @default undefined
+     */
+    item?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the unordered list.
+     *
+     * @default undefined
+     */
+    list?: HTMLAttributes;
+    /**
+     * Props forwarded to the next button.
+     *
+     * @default undefined
+     */
+    next?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the next `Icon`.
+     *
+     * @default undefined
+     */
+    nextIcon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the previous button.
+     *
+     * @default undefined
+     */
+    prev?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the previous `Icon`.
+     *
+     * @default undefined
+     */
+    prevIcon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the nav root.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+export interface PaginationEmits {
+    /**
+     * Emitted when the page changes in numbered mode.
+     */
+    change: [page: number];
+    /**
+     * Emitted when next is activated in simple mode.
+     */
+    next: [];
+    /**
+     * Emitted when previous is activated in simple mode.
+     */
+    previous: [];
+    /**
+     * Emitted when `v-model` should update.
+     */
+    "update:modelValue": [page: number];
+}
+/**
+ * Pagination page controls for lists and tables.
+ */
+export interface PaginationOwnProps {
+    /**
+     * Pages always shown at the start and end (numbered mode).
+     *
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Classes for pagination parts.
+     *
+     * @default undefined
+     */
+    classes?: PaginationClasses;
+    /**
+     * Selected page accent color.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<PaginationColor, PaginationColorOverrides>;
+    /**
+     * Total number of pages (numbered mode).
+     *
+     * @default undefined
+     */
+    count?: number;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: PaginationCustomProps;
+    /**
+     * Disable all controls.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether next is available (`mode="simple"`).
+     *
+     * @default undefined
+     */
+    hasNext?: boolean;
+    /**
+     * Whether previous is available (`mode="simple"`).
+     *
+     * @default undefined
+     */
+    hasPrevious?: boolean;
+    /**
+     * Hide the next control.
+     *
+     * @default false
+     */
+    hideNextButton?: boolean;
+    /**
+     * Hide the previous control.
+     *
+     * @default false
+     */
+    hidePrevButton?: boolean;
+    /**
+     * Numbered pages vs prev/next only.
+     *
+     * @default "numbered"
+     */
+    mode?: "simple" | "numbered";
+    /**
+     * Bound page with `v-model` (1-based, numbered mode).
+     *
+     * @default 1
+     */
+    modelValue?: number;
+    /**
+     * Control corner radius (`ghost` items / `outlined` group edges).
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<PaginationRounded, PaginationRoundedOverrides>;
+    /**
+     * Pages shown on each side of the current page (numbered mode).
+     *
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Control size.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<PaginationSize, PaginationSizeOverrides>;
+    /**
+     * Visual style of page / control buttons.
+     *
+     * @default "text"
+     */
+    variant?: MergeProps<PaginationVariant, PaginationVariantOverrides>;
+}
+export interface PaginationSlots {
+    /**
+     * Custom ellipsis content (default `…`).
+     */
+    ellipsis?: Slot;
+    /**
+     * Custom next control content (default chevron icon).
+     */
+    next?: Slot;
+    /**
+     * Custom previous control content (default chevron icon).
+     */
+    prev?: Slot;
+}
+export type PaginationProps = MergeHtmlProps<PaginationOwnProps, HTMLAttributes>;

package/dist/Components/PasswordField/PasswordField.vue_vue_type_script_setup_true_lang.js

@@ -6,8 +6,8 @@ import { FORM_FIELD_CHROME_SLOT_NAMES as a } from "../FormField/formField.types.
 import o from "../FormField/FormField.js";
 import { usePasswordField as s } from "./composables/usePasswordField.js";
 import { computed as c, createBlock as l, createElementVNode as u, createSlots as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, mergeProps as g, normalizeProps as _, openBlock as v, ref as y, renderList as b, renderSlot as x, unref as S, useModel as C, vModelDynamic as w, withCtx as T, withDirectives as E } from "vue";
-import { cn as D } from "@bridge-ui/core";
-import { isUndefined as O } from "es-toolkit/compat";
+import { isUndefined as D } from "es-toolkit/compat";
+import { cn as O } from "@bridge-ui/core/Utils";
 //#region src/Components/PasswordField/PasswordField.vue?vue&type=script&setup=true&lang.ts
 var k = /*@__PURE__*/ p({
 	inheritAttrs: !1,
@@ -51,13 +51,13 @@ var k = /*@__PURE__*/ p({
 			set: (e) => {
 				A.value = e, M.value = e;
 			},
-			get: () => O(A.value) ? M.value : A.value
+			get: () => D(A.value) ? M.value : A.value
 		}), P = e(), { formField: F, inputBind: I, isVisible: L, mergedClasses: R, toggleVisibility: z } = s(j, { onVisibilityChange: (e) => k("visibility-change", e) }), B = c(() => n(j.customProps?.toggle, {
 			type: "button",
 			disabled: j.disabled,
 			onClick: z,
 			"aria-label": L.value ? P("Hide password") : P("Show password")
-		}, D({
+		}, O({
 			"bridge-end-adornment bridge-field-adornment-button inline-flex h-full items-center justify-center px-2.5": !0,
 			[R.value.toggle ?? ""]: !0
 		})));