@bridge-ui/vue 0.1.0 → 0.1.1

package/dist/Components/Step/step.types.d.ts

@@ -0,0 +1,160 @@
+import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
+import { IconSource } from '../../Adapters/Icon';
+import { IconProps } from '../Icon';
+export interface StepClasses {
+    /**
+     * Classes merged onto the connector line.
+     */
+    connector?: string;
+    /**
+     * Classes merged onto optional vertical body content.
+     */
+    content?: string;
+    /**
+     * Classes merged onto the description.
+     */
+    description?: string;
+    /**
+     * Classes merged onto the indicator icon.
+     */
+    icon?: string;
+    /**
+     * Classes merged onto the circle / number indicator.
+     */
+    indicator?: string;
+    /**
+     * Classes merged onto the step title.
+     */
+    label?: string;
+    /**
+     * Classes merged onto the list item.
+     */
+    root?: string;
+    /**
+     * Classes merged onto the step trigger.
+     */
+    trigger?: string;
+}
+export interface StepCustomProps {
+    /**
+     * Props forwarded to the connector line.
+     *
+     * @default undefined
+     */
+    connector?: HTMLAttributes;
+    /**
+     * Props forwarded to optional vertical body content.
+     *
+     * @default undefined
+     */
+    content?: HTMLAttributes;
+    /**
+     * Props forwarded to the description.
+     *
+     * @default undefined
+     */
+    description?: HTMLAttributes;
+    /**
+     * Props forwarded to the indicator `Icon`.
+     *
+     * @default undefined
+     */
+    icon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the circle / number indicator.
+     *
+     * @default undefined
+     */
+    indicator?: HTMLAttributes;
+    /**
+     * Props forwarded to the step title.
+     *
+     * @default undefined
+     */
+    label?: HTMLAttributes;
+    /**
+     * Props forwarded to the list item.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the step trigger.
+     *
+     * @default undefined
+     */
+    trigger?: ButtonHTMLAttributes;
+}
+/**
+ * One step in a `Stepper`. Must be used inside `Stepper`.
+ */
+export interface StepOwnProps {
+    /**
+     * Classes for step parts.
+     *
+     * @default undefined
+     */
+    classes?: StepClasses;
+    /**
+     * Force completed state (else derived from index vs `activeStep`).
+     *
+     * @default undefined
+     */
+    completed?: boolean;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: StepCustomProps;
+    /**
+     * Secondary text under the label.
+     *
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * Non-interactive step.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Error styling on the indicator.
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Override the default numeric / check indicator.
+     *
+     * @default undefined
+     */
+    icon?: IconSource;
+    /**
+     * Step title (prefer `#label` slot when set).
+     *
+     * @default undefined
+     */
+    label?: string;
+}
+export interface StepSlots {
+    /**
+     * Optional body shown under the step when `orientation="vertical"` and active.
+     */
+    default?: Slot<undefined>;
+    /**
+     * Custom description (overrides `description` when set).
+     */
+    description?: Slot<undefined>;
+    /**
+     * Custom indicator content (overrides number / check / `icon`).
+     */
+    icon?: Slot<undefined>;
+    /**
+     * Custom title (overrides `label` when set).
+     */
+    label?: Slot<undefined>;
+}
+export type StepProps = MergeHtmlProps<StepOwnProps, HTMLAttributes>;

package/dist/Components/Stepper/Stepper.js

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

package/dist/Components/Stepper/Stepper.vue.d.ts

@@ -0,0 +1,24 @@
+import { StepperOwnProps, StepperSlots } from './stepper.types';
+type __VLS_Slots = StepperSlots;
+type __VLS_Props = StepperOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (step: number) => any;
+    "update:modelValue": (...args: unknown[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((step: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+}>, {
+    linear: boolean;
+}, {}, {}, {}, 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/Stepper/Stepper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import { useStepper as e } from "./composables/useStepper.js";
+import { createElementBlock as t, createElementVNode as n, defineComponent as r, guardReactiveProps as i, mergeModels as a, normalizeProps as o, openBlock as s, renderSlot as c, unref as l, useModel as u } from "vue";
+//#region src/Components/Stepper/Stepper.vue?vue&type=script&setup=true&lang.ts
+var d = /*@__PURE__*/ r({
+	inheritAttrs: !1,
+	__name: "Stepper",
+	props: /*@__PURE__*/ a({
+		classes: {},
+		color: {},
+		customProps: {},
+		linear: {
+			type: Boolean,
+			default: !0
+		},
+		orientation: {},
+		size: {}
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ a(["change", "update:modelValue"], ["update:modelValue"]),
+	setup(r, { emit: a }) {
+		let d = a, f = r, p = u(r, "modelValue"), { listBind: m, rootBind: h } = e(f, {
+			size: "md",
+			linear: !0,
+			color: "primary",
+			orientation: "horizontal"
+		}, p, d);
+		return (e, r) => (s(), t("nav", o(i(l(h))), [n("ol", o(i(l(m))), [c(e.$slots, "default")], 16)], 16));
+	}
+});
+//#endregion
+export { d as default };

package/dist/Components/Stepper/composables/useStepper.d.ts

@@ -0,0 +1,18 @@
+import { Ref, SetupContext } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { StepperEmits, StepperOwnProps, StepperProps } from '../stepper.types';
+import { StepperContextValue } from '../stepperInjectionKey';
+type StepperLibDefaults = LibDefaultsShape<StepperOwnProps, "size" | "color" | "linear" | "orientation">;
+type StepperMerged = MergeLibDefaults<StepperOwnProps, StepperLibDefaults>;
+export declare function useStepper(props: StepperOwnProps, libDefaults: StepperLibDefaults, model: Ref<number | undefined>, emit: SetupContext<StepperEmits>["emit"]): {
+    merged: import('vue').ComputedRef<StepperMerged>;
+    listBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').OlHTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-label": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<StepperProps, "color" | "orientation" | "size" | "classes" | "customProps" | "linear">>>;
+    contextValue: import('vue').ComputedRef<StepperContextValue>;
+};
+export {};

package/dist/Components/Stepper/composables/useStepper.js

@@ -0,0 +1,91 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { STEPPER_INJECTION_KEY as r } from "../stepperInjectionKey.js";
+import { computed as i, provide as a, ref as o, useAttrs as s, useId as c } from "vue";
+import { get as l } from "es-toolkit/compat";
+import { getAdjacentStepperIndex as u, getStepperStepId as d } from "@bridge-ui/core/Domain";
+import { stepperChromeProps as f, stepperColorProps as p, stepperOrientationProps as m, stepperSizeProps as h } from "@bridge-ui/core/Tokens";
+import { cn as g, mergeBridgeUILayeredClasses as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
+//#region src/Components/Stepper/composables/useStepper.ts
+var y = [
+	"size",
+	"color",
+	"linear",
+	"classes",
+	"customProps",
+	"orientation"
+];
+function b(b, x, S, C) {
+	let w = c(), T = s(), E = `bridge-stepper${w}`, D = o([]), O = /* @__PURE__ */ new Map(), k = i(() => v({
+		props: {
+			...T,
+			...b
+		},
+		bridgeKeys: y
+	})), { merged: A, entry: j } = t({
+		libDefaults: x,
+		componentName: "Stepper",
+		props: () => k.value.componentProps
+	}), M = i(() => S.value ?? 0);
+	function N(e) {
+		return D.value.includes(e) || (D.value = [...D.value, e]), () => {
+			D.value = D.value.filter((t) => t !== e);
+		};
+	}
+	function P(e, t) {
+		O.set(e, t);
+	}
+	function F(e) {
+		let t = O.get(e);
+		t?.disabled || t?.clickable === !1 || (S.value = e, C("update:modelValue", e), C("change", e));
+	}
+	function I(e) {
+		document.getElementById(d(E, e))?.focus();
+	}
+	function L(e, t) {
+		let n = /* @__PURE__ */ new Set();
+		return O.forEach((e, t) => {
+			(e.disabled || !e.clickable) && n.add(t);
+		}), u(D.value.length, e, t, n);
+	}
+	function R(e) {
+		return D.value.indexOf(e);
+	}
+	let z = n({
+		entry: j,
+		props: () => k.value.componentProps
+	}), B = i(() => _(h, j.value?.tokens?.size)), V = i(() => _(p, j.value?.tokens?.color)), H = i(() => _(m, j.value?.tokens?.orientation)), U = i(() => l(B.value, A.value.size)), W = i(() => l(V.value, A.value.color)), G = i(() => l(V.value, "error")), K = i(() => l(H.value, A.value.orientation)), q = i(() => ({
+		getIndex: R,
+		focusStep: I,
+		selectStep: F,
+		registerStep: N,
+		id: E,
+		getAdjacentIndex: L,
+		registerStepMeta: P,
+		sizeItem: U.value,
+		colorItem: W.value,
+		activeStep: M.value,
+		errorColorItem: G.value,
+		linear: A.value.linear === !0,
+		orientationItem: K.value,
+		orientation: String(A.value.orientation)
+	}));
+	a(r, q);
+	let J = i(() => e(A.value.customProps?.root, k.value.inheritedAttrs, {
+		"aria-label": "Progress",
+		class: g({ [l(z.value, "root") ?? ""]: !0 })
+	}));
+	return {
+		merged: A,
+		listBind: i(() => e(A.value.customProps?.list, {}, { class: g({
+			[f.list]: !0,
+			[l(U.value, "track") ?? ""]: !0,
+			[l(K.value, "list") ?? ""]: !0,
+			[l(z.value, "list") ?? ""]: !0,
+			"[&>li:last-child_[data-part=connector]]:hidden": !0
+		}) })),
+		rootBind: J,
+		contextValue: q
+	};
+}
+//#endregion
+export { b as useStepper };

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

@@ -0,0 +1,4 @@
+export { useStepper } from './composables/useStepper';
+export type { StepperClasses, StepperColorOverrides, StepperCustomProps, StepperEmits, StepperOrientationOverrides, StepperOwnProps, StepperProps, StepperSizeOverrides, StepperSlots, } from './stepper.types';
+export { default as Stepper } from './Stepper.vue';
+export { STEPPER_INJECTION_KEY, type StepperContextValue, type StepperStepMeta, } from './stepperInjectionKey';

package/dist/Components/Stepper/index.js

@@ -0,0 +1,4 @@
+import { STEPPER_INJECTION_KEY as e } from "./stepperInjectionKey.js";
+import { useStepper as t } from "./composables/useStepper.js";
+import n from "./Stepper.js";
+export { e as STEPPER_INJECTION_KEY, n as Stepper, t as useStepper };

package/dist/Components/Stepper/stepper.types.d.ts

@@ -0,0 +1,93 @@
+import { HTMLAttributes, OlHTMLAttributes, Slot } from 'vue';
+import { StepperColor, StepperOrientation, StepperSize } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
+export interface StepperSizeOverrides {}
+export interface StepperColorOverrides {}
+export interface StepperOrientationOverrides {}
+export interface StepperClasses {
+    /**
+     * Classes merged onto the ordered list.
+     */
+    list?: string;
+    /**
+     * Classes merged onto the nav root.
+     */
+    root?: string;
+}
+export interface StepperCustomProps {
+    /**
+     * Props forwarded to the ordered list.
+     *
+     * @default undefined
+     */
+    list?: OlHTMLAttributes;
+    /**
+     * Props forwarded to the nav root.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+export interface StepperEmits {
+    /**
+     * Emitted when the active index changes.
+     */
+    change: [step: number];
+    /**
+     * Emitted when `v-model` should update.
+     */
+    "update:modelValue": [step: number];
+}
+/**
+ * Multi-step flow indicator. Compose with `Step`.
+ */
+export interface StepperOwnProps {
+    /**
+     * Classes for stepper parts.
+     *
+     * @default undefined
+     */
+    classes?: StepperClasses;
+    /**
+     * Accent color for active / completed steps.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<StepperColor, StepperColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: StepperCustomProps;
+    /**
+     * Block jumping ahead of incomplete steps.
+     *
+     * @default true
+     */
+    linear?: boolean;
+    /**
+     * Layout direction.
+     *
+     * @default "horizontal"
+     */
+    orientation?: MergeProps<StepperOrientation, StepperOrientationOverrides>;
+    /**
+     * Indicator and label scale.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<StepperSize, StepperSizeOverrides>;
+}
+export interface StepperSlots {
+    /**
+     * The children to render (`Step`, etc.).
+     */
+    default?: Slot<undefined>;
+}
+export type StepperProps = MergeHtmlProps<StepperOwnProps, HTMLAttributes> & {
+    /**
+     * Bound with `v-model` on the component (`defineModel` internally).
+     */
+    modelValue?: number;
+};

package/dist/Components/Stepper/stepperInjectionKey.d.ts

@@ -0,0 +1,77 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { StepperColorItem, StepperOrientationItem, StepperSizeItem } from '@bridge-ui/core/Tokens';
+/**
+ * Per-step flags registered for click / keyboard gating.
+ */
+export type StepperStepMeta = {
+    /**
+     * Whether the step may be selected.
+     */
+    clickable: boolean;
+    /**
+     * Whether the step is disabled.
+     */
+    disabled: boolean;
+};
+/**
+ * Shared stepper state for `Step` descendants.
+ */
+export type StepperContextValue = {
+    /**
+     * Bound 0-based active index.
+     */
+    activeStep: number;
+    /**
+     * Accent color item for the stepper `color` token.
+     */
+    colorItem: undefined | StepperColorItem;
+    /**
+     * Error palette (used when a step has `error`).
+     */
+    errorColorItem: undefined | StepperColorItem;
+    /**
+     * Focus a step trigger by index.
+     */
+    focusStep: (index: number) => void;
+    /**
+     * Next enabled, clickable index from `from`, wrapping around.
+     */
+    getAdjacentIndex: (from: number, direction: 1 | -1) => number;
+    /**
+     * Resolves a registered step's 0-based index.
+     */
+    getIndex: (id: string) => number;
+    /**
+     * Stable id prefix for step / content pairing.
+     */
+    id: string;
+    /**
+     * When true, block jumping ahead of incomplete steps.
+     */
+    linear: boolean;
+    /**
+     * Layout direction token key.
+     */
+    orientation: string;
+    /**
+     * Orientation class map.
+     */
+    orientationItem: undefined | StepperOrientationItem;
+    /**
+     * Registers a step id and returns unregister.
+     */
+    registerStep: (id: string) => () => void;
+    /**
+     * Records clickable / disabled for an index.
+     */
+    registerStepMeta: (index: number, meta: StepperStepMeta) => void;
+    /**
+     * Selects a step when clickable.
+     */
+    selectStep: (index: number) => void;
+    /**
+     * Size class map.
+     */
+    sizeItem: undefined | StepperSizeItem;
+};
+export declare const STEPPER_INJECTION_KEY: InjectionKey<ComputedRef<StepperContextValue>>;

package/dist/Components/Stepper/stepperInjectionKey.js

@@ -0,0 +1,4 @@
+//#region src/Components/Stepper/stepperInjectionKey.ts
+var e = Symbol("bridge-stepper");
+//#endregion
+export { e as STEPPER_INJECTION_KEY };

package/dist/Components/TimePanel/TimePanel.vue_vue_type_script_setup_true_lang.js

@@ -21,7 +21,6 @@ var y = /*@__PURE__*/ a({
 		rounded: {},
 		showSeconds: { type: Boolean },
 		timeZone: {},
-		tokens: {},
 		value: {}
 	},
 	emits: ["change"],

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

@@ -22,7 +22,7 @@ export type TimePanelItem = {
  */
 export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>, libDefaults: TimePanelLibDefaults, emit: (event: "change", value: Date | null) => void): {
     merged: import('vue').ComputedRef<TimePanelMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePanelOwnProps, "error" | "color" | "fill" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePanelOwnProps, "error" | "color" | "fill" | "value" | "classes" | "customProps" | "rounded" | "disabled" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
     hourItems: import('vue').ComputedRef<TimePanelItem[]>;
     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, {