@bridge-ui/vue 0.0.8 → 0.0.9

package/dist/Components/TimePanel/timePanel.types.d.ts

@@ -0,0 +1,147 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from 'vue';
+import { DisableTimesInput, MergeHtmlProps, MergeProps, TimeColor, TimeColorItem, TimeRounded, TimeValue } from '@bridge-ui/core';
+export interface TimePanelColorOverrides {}
+export interface TimePanelRoundedOverrides {}
+export interface TimePanelClasses {
+    /**
+     * Classes for each scrollable column.
+     */
+    column?: string;
+    /**
+     * Classes for each time tile button.
+     */
+    item?: string;
+    /**
+     * Classes for the root element.
+     */
+    root?: string;
+}
+export interface TimePanelCustomProps {
+    /**
+     * Props forwarded to each scrollable column.
+     *
+     * @default undefined
+     */
+    column?: HTMLAttributes;
+    /**
+     * Props forwarded to each time tile button.
+     *
+     * @default undefined
+     */
+    item?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+export interface TimePanelEmits {
+    /**
+     * Emitted when the selected time changes.
+     */
+    change: [value: Date | null];
+}
+export interface TimePanelTokens {
+    /**
+     * Color token map overrides.
+     */
+    color?: Record<string, Partial<TimeColorItem>>;
+    /**
+     * Border radius token map overrides.
+     */
+    rounded?: Record<string, string>;
+}
+export interface TimePanelOwnProps {
+    /**
+     * Uses a 12-hour clock with an AM/PM column.
+     *
+     * @default false
+     */
+    ampm?: boolean;
+    /**
+     * Classes for panel regions.
+     *
+     * @default undefined
+     */
+    classes?: TimePanelClasses;
+    /**
+     * Accent color for time tiles.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<TimeColor, TimePanelColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: TimePanelCustomProps;
+    /**
+     * Disables the entire panel.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Times that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableTimes?: DisableTimesInput;
+    /**
+     * Minute step between options.
+     *
+     * @default 1
+     */
+    interval?: number;
+    /**
+     * Latest selectable time.
+     *
+     * @default undefined
+     */
+    maxTime?: Date;
+    /**
+     * Earliest selectable time.
+     *
+     * @default undefined
+     */
+    minTime?: Date;
+    /**
+     * Prevents selection while keeping tiles visible.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Border radius of time tiles.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<TimeRounded, TimePanelRoundedOverrides>;
+    /**
+     * Shows a seconds column and includes seconds in the selected value.
+     *
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * IANA time zone.
+     *
+     * @default undefined
+     */
+    timeZone?: string;
+    /**
+     * Token overrides.
+     *
+     * @default undefined
+     */
+    tokens?: TimePanelTokens;
+    /**
+     * Selected time (`Date` wall clock).
+     *
+     * @default undefined
+     */
+    value?: null | TimeValue;
+}
+export type TimePanelProps = MergeHtmlProps<TimePanelOwnProps, HTMLAttributes>;

package/dist/Components/TimePicker/TimePicker.js

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

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

@@ -0,0 +1,10 @@
+import { TimePickerOwnProps } from './timePicker.types';
+declare const __VLS_export: import('vue').DefineComponent<TimePickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    cancel: () => any;
+    change: (value: Date | null) => any;
+}, string, import('vue').PublicProps, Readonly<TimePickerOwnProps> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onChange?: ((value: Date | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/Components/TimePicker/TimePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,82 @@
+import e from "../Button/Button.js";
+import t from "../TimePanel/TimePanel.js";
+import { useTimePicker as n } from "./composables/useTimePicker.js";
+import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeClass as d, normalizeProps as f, openBlock as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+//#region src/Components/TimePicker/TimePicker.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "TimePicker",
+	props: {
+		ampm: { type: Boolean },
+		classes: {},
+		color: {},
+		customProps: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
+		disableTimes: {},
+		interval: {},
+		maxTime: {},
+		minTime: {},
+		readOnly: { type: Boolean },
+		rounded: {},
+		showFooter: { type: Boolean },
+		showSeconds: { type: Boolean },
+		timeZone: {},
+		tokens: {},
+		value: {}
+	},
+	emits: ["cancel", "change"],
+	setup(c, { emit: _ }) {
+		let { merged: v, rootBind: y, footerBind: b, showFooter: x, applyLabel: S, timeTokens: C, contentBind: w, handleApply: T, cancelLabel: E, displayValue: D, handleCancel: O, applyButtonProps: k, cancelButtonProps: A, handlePanelChange: j } = n(c, {
+			ampm: !1,
+			interval: 1,
+			rounded: "md",
+			color: "primary",
+			showFooter: !1,
+			showSeconds: !1
+		}, _);
+		return (n, c) => (p(), i("div", f(l(h(y))), [a("div", { class: d(h(w)) }, [s(h(t), {
+			ampm: h(v).ampm,
+			tokens: h(C),
+			color: h(v).color,
+			value: h(D),
+			rounded: h(v).rounded,
+			"max-time": h(v).maxTime,
+			"min-time": h(v).minTime,
+			disabled: h(v).disabled,
+			interval: h(v).interval,
+			"read-only": h(v).readOnly,
+			"time-zone": h(v).timeZone,
+			onChange: h(j),
+			"show-seconds": h(v).showSeconds,
+			"disable-times": h(v).disableTimes
+		}, null, 8, [
+			"ampm",
+			"tokens",
+			"color",
+			"value",
+			"rounded",
+			"max-time",
+			"min-time",
+			"disabled",
+			"interval",
+			"read-only",
+			"time-zone",
+			"onChange",
+			"show-seconds",
+			"disable-times"
+		])], 2), h(x) ? (p(), i("div", f(u({ key: 0 }, h(b))), [s(h(e), u({
+			variant: "flat",
+			color: "secondary",
+			onClick: h(O)
+		}, h(A)), {
+			default: g(() => [o(m(h(E)), 1)]),
+			_: 1
+		}, 16, ["onClick"]), s(h(e), u({ color: "primary" }, h(k), { onClick: h(T) }), {
+			default: g(() => [o(m(h(S)), 1)]),
+			_: 1
+		}, 16, ["onClick"])], 16)) : r("", !0)], 16));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/Components/TimePicker/composables/useTimePicker.d.ts

@@ -0,0 +1,31 @@
+import { MaybeRefOrGetter } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults, TimeValue } from '@bridge-ui/core';
+import { TimePickerOwnProps } from '../timePicker.types';
+type TimePickerLibDefaults = LibDefaultsShape<TimePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "showFooter" | "showSeconds">;
+type TimePickerMerged = MergeLibDefaults<TimePickerOwnProps, TimePickerLibDefaults>;
+/**
+ * Owns controlled/uncontrolled value, optional footer draft, and panel binds.
+ */
+export declare function useTimePicker(props: MaybeRefOrGetter<TimePickerOwnProps>, libDefaults: TimePickerLibDefaults, emit: {
+    (event: "change", value: null | TimeValue): void;
+    (event: "cancel"): void;
+}): {
+    merged: import('vue').ComputedRef<TimePickerMerged>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePickerOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "showFooter" | "defaultValue" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    showFooter: import('vue').ComputedRef<boolean>;
+    timeTokens: import('vue').ComputedRef<{
+        color: Record<string, Partial<import('@bridge-ui/core').TimeColorItem>> | undefined;
+        rounded: Record<string, string> | undefined;
+    }>;
+    contentBind: import('vue').ComputedRef<string>;
+    handleApply: () => void;
+    displayValue: import('vue').ComputedRef<Date | null>;
+    handleCancel: () => void;
+    handlePanelChange: (next: null | TimeValue) => void;
+    applyLabel: import('vue').ComputedRef<string>;
+    cancelLabel: import('vue').ComputedRef<string>;
+    applyButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
+    cancelButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
+};
+export {};

package/dist/Components/TimePicker/composables/useTimePicker.js

@@ -0,0 +1,84 @@
+import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { computed as i, ref as a, toValue as o, useAttrs as s, watch as c } from "vue";
+import { cn as l, splitComponentProps as u } from "@bridge-ui/core";
+import { isNil as d, omit as f } from "es-toolkit/compat";
+//#region src/Components/TimePicker/composables/useTimePicker.ts
+var p = [
+	"ampm",
+	"color",
+	"value",
+	"tokens",
+	"classes",
+	"maxTime",
+	"minTime",
+	"rounded",
+	"disabled",
+	"interval",
+	"readOnly",
+	"timeZone",
+	"showFooter",
+	"customProps",
+	"showSeconds",
+	"defaultValue",
+	"disableTimes"
+];
+function m(m, h, g) {
+	let _ = s(), v = e(), y = i(() => u({
+		bridgeKeys: p,
+		props: {
+			..._,
+			...o(m)
+		}
+	})), { merged: b, entry: x } = n({
+		libDefaults: h,
+		componentName: "TimePicker",
+		props: () => y.value.componentProps
+	}), S = i(() => b.value.customProps), C = i(() => f(y.value.inheritedAttrs, ["onChange", "onCancel"])), w = r({
+		entry: x,
+		props: () => y.value.componentProps
+	}), T = i(() => o(m)), E = i(() => !d(T.value.value)), D = a(b.value.defaultValue ?? null), O = i(() => E.value ? T.value.value ?? null : D.value), k = a(O.value);
+	c(() => [O.value, b.value.showFooter], ([e, t]) => {
+		t && (k.value = e);
+	});
+	let A = i(() => b.value.showFooter ? k.value : O.value), j = i(() => ({
+		color: b.value.tokens?.time?.color ?? b.value.tokens?.color,
+		rounded: b.value.tokens?.time?.rounded ?? b.value.tokens?.rounded
+	})), M = (e) => {
+		E.value || (D.value = e), g("change", e);
+	}, N = (e) => {
+		if (b.value.showFooter) {
+			k.value = e;
+			return;
+		}
+		M(e);
+	}, P = () => {
+		M(k.value);
+	}, F = () => {
+		k.value = O.value, g("cancel");
+	}, I = i(() => t(S.value?.root, C.value, l({
+		"flex w-fit flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-dark-900": !0,
+		[w.value.root ?? ""]: !0
+	}))), L = i(() => l({ "px-2.5": !0 }));
+	return {
+		merged: b,
+		rootBind: I,
+		footerBind: i(() => t(S.value?.footer, {}, l({
+			"flex items-center justify-end gap-2 border-t border-dark-100 bg-dark-50 px-3 py-2 dark:border-dark-800 dark:bg-dark-950/40": !0,
+			[w.value.footer ?? ""]: !0
+		}))),
+		showFooter: i(() => !!b.value.showFooter),
+		timeTokens: j,
+		contentBind: L,
+		handleApply: P,
+		displayValue: A,
+		handleCancel: F,
+		handlePanelChange: N,
+		applyLabel: i(() => v("Apply")),
+		cancelLabel: i(() => v("Cancel")),
+		applyButtonProps: i(() => S.value?.applyButton),
+		cancelButtonProps: i(() => S.value?.cancelButton)
+	};
+}
+//#endregion
+export { m as useTimePicker };

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

@@ -0,0 +1,3 @@
+export { useTimePicker } from './composables/useTimePicker';
+export type { TimePickerClasses, TimePickerColorOverrides, TimePickerCustomProps, TimePickerEmits, TimePickerOwnProps, TimePickerProps, TimePickerRoundedOverrides, TimePickerTokens, } from './timePicker.types';
+export { default as TimePicker } from './TimePicker.vue';

package/dist/Components/TimePicker/index.js

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

package/dist/Components/TimePicker/timePicker.types.d.ts

@@ -0,0 +1,176 @@
+import { HTMLAttributes } from 'vue';
+import { DisableTimesInput, MergeHtmlProps, MergeProps, TimeColor, TimeColorItem, TimeRounded, TimeValue } from '@bridge-ui/core';
+import { ButtonProps } from '../Button/button.types';
+export interface TimePickerColorOverrides {}
+export interface TimePickerRoundedOverrides {}
+export interface TimePickerClasses {
+    /**
+     * Classes for the footer.
+     */
+    footer?: string;
+    /**
+     * Classes for the root element.
+     */
+    root?: string;
+}
+export interface TimePickerCustomProps {
+    /**
+     * Props forwarded to the Apply button.
+     *
+     * @default undefined
+     */
+    applyButton?: Partial<ButtonProps>;
+    /**
+     * Props forwarded to the Cancel button.
+     *
+     * @default undefined
+     */
+    cancelButton?: Partial<ButtonProps>;
+    /**
+     * Props forwarded to the footer.
+     *
+     * @default undefined
+     */
+    footer?: HTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+export interface TimePickerEmits {
+    /**
+     * Emitted when Cancel is pressed.
+     */
+    cancel: [];
+    /**
+     * Emitted when Apply is pressed (`showFooter`) or when the value commits.
+     */
+    change: [value: null | TimeValue];
+}
+export interface TimePickerTokens {
+    /**
+     * Color token map overrides.
+     */
+    color?: Record<string, Partial<TimeColorItem>>;
+    /**
+     * Border radius token map overrides.
+     */
+    rounded?: Record<string, string>;
+    /**
+     * Nested time panel token overrides.
+     */
+    time?: {
+        color?: Record<string, Partial<TimeColorItem>>;
+        rounded?: Record<string, string>;
+    };
+}
+export interface TimePickerOwnProps {
+    /**
+     * Uses a 12-hour clock with an AM/PM column.
+     *
+     * @default false
+     */
+    ampm?: boolean;
+    /**
+     * Classes for picker regions.
+     *
+     * @default undefined
+     */
+    classes?: TimePickerClasses;
+    /**
+     * Accent color.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<TimeColor, TimePickerColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: TimePickerCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: null | TimeValue;
+    /**
+     * Disables the picker.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Times that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableTimes?: DisableTimesInput;
+    /**
+     * Minute step between options.
+     *
+     * @default 1
+     */
+    interval?: number;
+    /**
+     * Latest selectable time.
+     *
+     * @default undefined
+     */
+    maxTime?: Date;
+    /**
+     * Earliest selectable time.
+     *
+     * @default undefined
+     */
+    minTime?: Date;
+    /**
+     * Prevents selection.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Border radius of time tiles and chrome.
+     *
+     * `TimeField` always forwards its own `rounded` here so the picker matches the
+     * field, independent of `TimePicker.defaultProps`.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<TimeRounded, TimePickerRoundedOverrides>;
+    /**
+     * Shows Cancel / Apply footer. Selection is draft until Apply.
+     *
+     * @default false
+     */
+    showFooter?: boolean;
+    /**
+     * Shows seconds in the panel and formatted value.
+     *
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * IANA time zone.
+     *
+     * @default undefined
+     */
+    timeZone?: string;
+    /**
+     * Token overrides.
+     *
+     * @default undefined
+     */
+    tokens?: TimePickerTokens;
+    /**
+     * Controlled value.
+     *
+     * @default undefined
+     */
+    value?: null | TimeValue;
+}
+export type TimePickerProps = MergeHtmlProps<TimePickerOwnProps, HTMLAttributes>;

package/dist/Components/TimeRangeField/TimeRangeField.js

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

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

@@ -0,0 +1,32 @@
+import { TimeRangeValue } from '@bridge-ui/core';
+import { TimeRangeFieldOwnProps, TimeRangeFieldSlots } from './timeRangeField.types';
+type __VLS_Slots = TimeRangeFieldSlots;
+type __VLS_Props = TimeRangeFieldOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: null | TimeRangeValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    change: (value: TimeRangeValue | null) => any;
+    close: () => any;
+    open: () => any;
+    "update:modelValue": (value: TimeRangeValue | null | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onChange?: ((value: TimeRangeValue | null) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: TimeRangeValue | null | undefined) => any) | undefined;
+}>, {
+    showErrorIcon: boolean;
+    clearable: 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;
+    };
+};