@astryx-vue/core 0.3.0 → 0.4.1

package/dist/DateRangeInput/index.d.ts

@@ -1,2 +1,2 @@
-import { Ci as DateRangeInputEmits, Si as DateRange, Ti as DateRangePreset, wi as DateRangeInputProps, xi as _default } from "../index-DUaLJO7l.js";
+import { Ci as DateRange, Ei as DateRangePreset, Si as _default, Ti as DateRangeInputProps, wi as DateRangeInputEmits } from "../index-UA93Im7H.js";
 export { type DateRange, _default as DateRangeInput, type DateRangeInputEmits, type DateRangeInputProps, type DateRangePreset };

package/dist/DateRangeInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../DateRangeInput-Bqi5tlIA.js";
+import { t as _sfc_main } from "../DateRangeInput-Dsf5Tyf-.js";
 export { _sfc_main as DateRangeInput };

package/dist/{DateRangeInput-Bqi5tlIA.js → DateRangeInput-Dsf5Tyf-.js}

@@ -1,19 +1,22 @@
 import { t as _sfc_main$2 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$3 } from "./ButtonTooltip-nWWrth8j.js";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$3 } from "./ButtonTooltip-CNKOQHYR.js";
 import { a as isRangeWithinSpan, c as resolveWeekStart, i as isDayOutsideSpan, r as formatDateRange, s as orderRange, t as applyRangeClick } from "./useDateRange-CIXoE_8k.js";
-import { t as _sfc_main$4 } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$5 } from "./IconButton-DDNgNl7B.js";
-import { a as useAstryxLocale, o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { a as standaloneShortWeekdayNames, i as formatCalendarMonth, o as weekdayNames } from "./locale-DgkZEMTn.js";
+import { t as _sfc_main$4 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$5 } from "./FieldIcon-BFSHZEs_.js";
+import { t as _sfc_main$6 } from "./IconButton-DI-XBbtV.js";
+import { o as useAstryxLocale, s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { a as weekdayNames, i as standaloneShortWeekdayNames, r as formatCalendarMonth } from "./locale-D1Z3K290.js";
 import { a as todayISODate, n as buildMonthGrid, t as addMonths } from "./useMonthGrid-fGHSSrFc.js";
 import { t as usePendingChange } from "./usePendingChange-ib-h8FZK.js";
+import { t as useResolvedLabelHidden } from "./useResolvedLabelHidden-B2rlWiaI.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { t as _sfc_main$6 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$7 } from "./Spinner-9cYUCnDy.js";
-import { t as _sfc_main$8 } from "./Field-D5gUEGw4.js";
-import { t as _sfc_main$9 } from "./Popover-DJf8POzL.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, shallowRef, toDisplayString, unref, useId, useModel, useTemplateRef, withCtx } from "vue";
+import { t as _sfc_main$7 } from "./Spinner-BY8iQz--.js";
+import { i as useAriaRequired } from "./context-Cfml4jaK.js";
+import { t as _sfc_main$8 } from "./Field-JIxT3xCh.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { t as _sfc_main$9 } from "./Popover-78dFjTb9.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, withCtx } from "vue";
 import "../styles/calendar.css";
 import "../styles/date-range-input.css";
 import "../styles/bordered-control.css";
@@ -107,7 +110,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					class: "astryx-calendar-nav-button",
 					"aria-label": unref(messages).calendar.previousMonth,
 					onClick: _cache[0] || (_cache[0] = ($event) => emit("shift", -1))
-				}, [createVNode(_sfc_main$6, {
+				}, [createVNode(_sfc_main$4, {
 					icon: "chevronLeft",
 					size: "sm"
 				})], 8, _hoisted_3$1),
@@ -117,7 +120,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					class: "astryx-calendar-nav-button",
 					"aria-label": unref(messages).calendar.nextMonth,
 					onClick: _cache[1] || (_cache[1] = ($event) => emit("shift", 1))
-				}, [createVNode(_sfc_main$6, {
+				}, [createVNode(_sfc_main$4, {
 					icon: "chevronRight",
 					size: "sm"
 				})], 8, _hoisted_5$1)
@@ -188,6 +191,7 @@ const _hoisted_5 = {
 const _hoisted_6 = ["disabled", "onClick"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxDateRangeInput",
+	inheritAttrs: false,
 	__name: "DateRangeInput",
 	props: /*@__PURE__*/ mergeModels({
 		label: {},
@@ -219,10 +223,39 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		isRequired: { type: Boolean },
 		isOptional: { type: Boolean },
 		isLabelHidden: { type: Boolean },
+		labelHidden: { type: Boolean },
 		labelTooltip: {},
 		status: {},
 		statusVariant: { default: "attached" },
-		width: {}
+		width: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	}, {
 		"modelValue": { default: null },
 		"modelModifiers": {}
@@ -232,6 +265,25 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const model = useModel(__props, "modelValue");
+		const attrs = useAttrs();
+		const parts = useFieldPartStyling({
+			component: "DateRangeInput",
+			props,
+			attrs,
+			reservedAttrs: [
+				"id",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-required",
+				"aria-busy",
+				"aria-disabled",
+				"aria-invalid",
+				"aria-expanded",
+				"aria-controls"
+			]
+		});
+		const hideLabel = useResolvedLabelHidden(() => props.isLabelHidden, () => props.labelHidden);
+		const ariaRequired = useAriaRequired(props);
 		const messages = useAstryxMessages();
 		const locale = useAstryxLocale();
 		const generatedId = `astryx-date-range-${useId()}`;
@@ -295,19 +347,25 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function presetDisabled(preset) {
 			return !isRangeWithinSpan(preset.getRange(), props.minRangeSpan, props.maxRangeSpan);
 		}
-		function clear() {
+		function clear(event) {
 			pending.value = null;
 			commit(null);
 			open.value = false;
+			if (event.detail === 0) containerRef.value?.querySelector(".astryx-date-range-trigger")?.focus({ preventScroll: true });
+		}
+		function triggerAttrs() {
+			return parts.forwardedAttrs();
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
 				createVNode(_sfc_main$8, {
+					class: normalizeClass(unref(parts).containerClass.value),
+					style: normalizeStyle(unref(parts).containerStyle.value),
 					label: __props.label,
 					"input-id": inputId.value,
 					description: __props.description,
 					width: __props.width,
-					"is-label-hidden": __props.isLabelHidden,
+					"is-label-hidden": unref(hideLabel),
 					"is-disabled": locked.value,
 					"is-optional": __props.isOptional,
 					"is-required": __props.isRequired,
@@ -370,34 +428,39 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						default: withCtx(() => [createElementVNode("div", {
 							ref_key: "containerRef",
 							ref: containerRef,
-							class: "astryx-date-range-input astryx-bordered-control",
+							class: normalizeClass(["astryx-date-range-input astryx-bordered-control", unref(parts).controlClass()]),
+							style: normalizeStyle(unref(parts).controlStyle()),
 							"data-size": __props.size,
 							"data-status": __props.status?.type,
 							"data-disabled": locked.value || void 0,
 							onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
 							onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
 						}, [
-							createElementVNode("button", {
+							createElementVNode("button", mergeProps(triggerAttrs(), {
 								id: inputId.value,
 								type: "button",
 								class: "astryx-date-range-trigger",
 								disabled: locked.value && !showsDisabledMessage.value,
-								"aria-describedby": [field.describedBy, showsDisabledMessage.value ? disabledMessageId : void 0].filter(Boolean).join(" ") || void 0,
+								"aria-describedby": [
+									unref(attrs)["aria-describedby"],
+									field.describedBy,
+									showsDisabledMessage.value ? disabledMessageId : void 0
+								].filter(Boolean).join(" ") || void 0,
 								"aria-invalid": __props.status?.type === "error" || void 0,
 								"aria-busy": busy.value || void 0,
-								"aria-required": __props.isRequired || void 0,
+								"aria-required": unref(ariaRequired),
 								"aria-disabled": showsDisabledMessage.value || void 0,
 								onFocus: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onFocus && unref(disabledTooltip).onFocus(...args)),
 								onBlur: _cache[1] || (_cache[1] = (...args) => unref(disabledTooltip).onBlur && unref(disabledTooltip).onBlur(...args))
-							}, [createVNode(_sfc_main$6, {
+							}), [createVNode(_sfc_main$4, {
 								class: "astryx-date-range-icon",
 								icon: "calendar",
 								size: "sm"
 							}), createElementVNode("span", {
 								class: "astryx-date-range-value",
 								"data-placeholder": !display.value || void 0
-							}, toDisplayString(display.value || placeholder.value), 9, _hoisted_3)], 40, _hoisted_2),
-							__props.hasClear && model.value && !locked.value ? (openBlock(), createBlock(_sfc_main$5, {
+							}, toDisplayString(display.value || placeholder.value), 9, _hoisted_3)], 16, _hoisted_2),
+							__props.hasClear && model.value && !locked.value ? (openBlock(), createBlock(_sfc_main$6, {
 								key: 0,
 								class: "astryx-input-clear-button",
 								variant: "ghost",
@@ -405,18 +468,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								label: clearLabel.value,
 								onClick: clear
 							}, {
-								default: withCtx(() => [createVNode(_sfc_main$4, { type: "clear" })]),
+								default: withCtx(() => [createVNode(_sfc_main$5, { type: "clear" })]),
 								_: 1
 							}, 8, ["label"])) : createCommentVNode("v-if", true),
 							busy.value ? (openBlock(), createBlock(_sfc_main$7, {
 								key: 1,
 								size: "sm",
 								"aria-label": unref(messages).dateInput.loading
-							}, null, 8, ["aria-label"])) : __props.status ? (openBlock(), createBlock(_sfc_main$4, {
+							}, null, 8, ["aria-label"])) : __props.status ? (openBlock(), createBlock(_sfc_main$5, {
 								key: 2,
 								type: __props.status.type
 							}, null, 8, ["type"])) : createCommentVNode("v-if", true)
-						], 40, _hoisted_1)]),
+						], 46, _hoisted_1)]),
 						_: 2
 					}, 1032, [
 						"is-open",
@@ -425,6 +488,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					])]),
 					_: 1
 				}, 8, [
+					"class",
+					"style",
 					"label",
 					"input-id",
 					"description",

package/dist/DateTimeInput/index.d.ts

@@ -1,2 +1,2 @@
-import { _i as _default, bi as DateTimeInputSize, vi as DateTimeInputEmits, yi as DateTimeInputProps } from "../index-DUaLJO7l.js";
+import { bi as DateTimeInputProps, vi as _default, xi as DateTimeInputSize, yi as DateTimeInputEmits } from "../index-UA93Im7H.js";
 export { _default as DateTimeInput, type DateTimeInputEmits, type DateTimeInputProps, type DateTimeInputSize };

package/dist/DateTimeInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../DateTimeInput-A7m2O3bg.js";
+import { t as _sfc_main } from "../DateTimeInput-tfM1y5nZ.js";
 export { _sfc_main as DateTimeInput };