npm - @plexui/vue - Versions diffs - 0.1.3 → 0.1.5 - Mend

@plexui/vue 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/dist/es/components/SelectControl/SelectControl.js CHANGED Viewed

@@ -38,6 +38,8 @@ const SelectControlComponent = defineComponent({
         onClearClick: Function,
         /** Primary handler for when the control is selected with pointer or keyboard events (`@interact`). */
         onInteract: Function,
+        /** Enter interacts too, as on a combobox button. Off by default, as Enter may be an attempt to submit a form. @default false */
+        interactOnEnter: { type: Boolean, default: false },
         /** Size and spacing of the control: `3xs` 22px up to `3xl` 48px. @default "md" */
         size: { type: String, default: "md" },
         /** Displays a loading indicator in place of the dropdown icon and clear action. @default false */
@@ -57,10 +59,14 @@ const SelectControlComponent = defineComponent({
                 return;
             }
             switch (evt.key) {
-                // NOTE: "Enter" does not open selects, as it may be an attempt to submit a form
+                case "Enter":
                 case "ArrowDown":
                 case "ArrowUp":
                 case " ":
+                    // NOTE: "Enter" may be an attempt to submit a form
+                    if (evt.key === "Enter" && !props.interactOnEnter) {
+                        break;
+                    }
                     evt.stopPropagation();
                     evt.preventDefault();
                     if (props.onInteract) {
@@ -75,9 +81,6 @@ const SelectControlComponent = defineComponent({
                         }));
                     }
                     break;
-                case "Enter":
-                    // NOTE: "Enter" does not open selects, as it may be an attempt to submit a form
-                    break;
                 default:
                     // Allow all other key presses through
                     callListener(attrs.onKeydown, evt);

package/dist/es/components/SelectControl/SelectControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectControl.js","sourceRoot":"","sources":["../../../../src/components/SelectControl/SelectControl.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx, { type ClassValue } from \"clsx\"\nimport { defineComponent, h, shallowRef, type Component, type HTMLAttributes, type PropType } from \"vue\"\nimport type { ControlSize, Variants } from \"@plexui/styles/types\"\nimport { handlePressableMouseEnter } from \"../../lib/helpers.js\"\nimport { Button } from \"../Button/index.js\"\nimport { ChevronDown, Dropdown, X } from \"../Icon/index.js\"\nimport { LoadingIndicator } from \"../Indicator/index.js\"\nimport s from \"@plexui/styles/components/SelectControl/SelectControl.module.css\"\n\n// Vue port of packages/ui/src/components/SelectControl/SelectControl.tsx.\n// - The control is a <span role=\"button\"> that rebuilds <button> semantics,\n// as in React. Every attribute that is not a prop lands on it after the\n// control's own attributes (React spreads its rest props last), and an\n// `onClick` listener is dropped: the control opens on pointer down, like a\n// native select.\n// - `onClearClick` and `onInteract` are function props (`@clear-click`,\n// `@interact` in templates): the first one's presence adds the clear\n// button, the second one's changes what pointer down and the keyboard do.\n// - `@pointerdown`, `@keydown` and `@pointerenter` listeners are called the\n// way React calls `onPointerDown`, `onKeyDown` and `onPointerEnter`: only\n// while the control is interactive, `@keydown` only for keys the control\n// does not handle, and `@pointerdown` (plus `@click`) only without\n// `onInteract`. This is how a parent trigger (MenuTrigger, PopoverTrigger)\n// opens its content from the control.\n\nexport type DropdownIconType = \"chevronDown\" \| \"dropdown\" \| \"none\"\n\ntype Listener = ((...args: never[]) => unknown) \| Listener[] \| null \| undefined\n\n/** Calls a listener attribute, which Vue may hold as an array of handlers. /\nconst callListener = (listener: unknown, ...args: unknown[]) => {\n if (Array.isArray(listener)) {\n for (const handler of listener) callListener(handler, ...args)\n } else if (typeof listener === \"function\") {\n ;(listener as (...params: unknown[]) => unknown)(...args)\n }\n}\n\nconst SelectControlComponent = defineComponent({\n name: \"SelectControl\",\n inheritAttrs: false,\n props: {\n /* Style variant for the control. @default \"outline\" /\n variant: { type: String as PropType<Variants<\"soft\" \| \"outline\" \| \"ghost\">>, default: \"outline\" },\n /* Determines if the control should be a fully rounded pill shape. @default false /\n pill: { type: Boolean, default: false },\n /* Extends the control to 100% of available width. /\n block: { type: Boolean, default: undefined },\n /* Applies a negative margin using the current gutter to optically align the control with surrounding content. /\n opticallyAlign: String as PropType<\"start\" \| \"end\">,\n /* Disables the control visually and from interactions. @default false /\n disabled: { type: Boolean, default: undefined },\n /* Visually indicates that the control is in an invalid state. @default false /\n invalid: { type: Boolean, default: undefined },\n /* Indicates that the control is selected. An unselected state will display placeholder styles. @default false /\n selected: { type: Boolean, default: false },\n /* Displays a clear action that allows the select to be unset; called when it is pressed (`@clear-click`). /\n onClearClick: Function as PropType<() => void>,\n /* Primary handler for when the control is selected with pointer or keyboard events (`@interact`). /\n onInteract: Function as PropType<() => void>,\n /* Size and spacing of the control: `3xs` 22px up to `3xl` 48px. @default \"md\" /\n size: { type: String as PropType<ControlSize>, default: \"md\" },\n /* Displays a loading indicator in place of the dropdown icon and clear action. @default false /\n loading: { type: Boolean, default: undefined },\n /* Icon displayed in the far right of the control. @default \"dropdown\" /\n dropdownIconType: { type: String as PropType<DropdownIconType>, default: \"dropdown\" },\n /* Icon displayed at the start of the control /\n StartIcon: [Object, Function] as PropType<Component>,\n },\n setup(props, { slots, attrs }) {\n const controlRef = shallowRef<HTMLSpanElement \| null>(null)\n\n // Act like a <button> and fire the click handler on keyboard actions\n const handleKeyDown = (evt: KeyboardEvent) => {\n // Enter and Space on a nested control (the clear button) activate that\n // control: neither this handler nor a wrapping trigger's may take them\n if (evt.target !== evt.currentTarget && (evt.key === \" \" \|\| evt.key === \"Enter\")) {\n return\n }\n switch (evt.key) {\n // NOTE: \"Enter\" does not open selects, as it may be an attempt to submit a form\n case \"ArrowDown\":\n case \"ArrowUp\":\n case \" \":\n evt.stopPropagation()\n evt.preventDefault()\n\n if (props.onInteract) {\n props.onInteract()\n } else {\n // Otherwise, send a synthetic trigger event to the parent trigger\n controlRef.value?.dispatchEvent(\n new PointerEvent(\"pointerdown\", {\n bubbles: true,\n cancelable: true,\n pointerType: \"mouse\", // mimic mouse interaction\n }),\n )\n }\n break\n case \"Enter\":\n // NOTE: \"Enter\" does not open selects, as it may be an attempt to submit a form\n break\n default:\n // Allow all other key presses through\n callListener(attrs.onKeydown, evt)\n }\n }\n\n const handlePointerDown = (evt: PointerEvent) => {\n // Don't trigger on right clicks\n if (evt.button === 2) {\n return\n }\n\n // Prevent focus from entering the click target of the select\n // so that focus correctly moves into the menu.\n evt.stopPropagation()\n\n if (props.onInteract) {\n evt.preventDefault()\n props.onInteract()\n } else {\n // NOTE: cannot preventDefault() here, for the parent trigger\n callListener(attrs.onPointerdown, evt)\n // A parent trigger may also pass `onClick` (React's <Popover.Trigger> does).\n // This component opens on pointer down, so call it here, assuming that\n // `onPointerdown` is not going to be responsible for opening.\n callListener(attrs.onClick, evt)\n }\n }\n\n const handleClearClick = (evt: MouseEvent) => {\n evt.stopPropagation()\n evt.preventDefault()\n props.onClearClick?.()\n }\n\n return () => {\n const {\n class: className,\n onPointerdown: _onPointerdown,\n onKeydown: _onKeydown,\n onPointerenter,\n onClick: _onClick,\n ...restAttrs\n } = attrs as Record<string, unknown> & { onPointerenter?: Listener }\n const { disabled, loading, selected, pill, dropdownIconType, StartIcon } = props\n const clearable = !!props.onClearClick\n const showClearAction = clearable && selected && !loading && !disabled\n const hasDropdownIcon = dropdownIconType && dropdownIconType !== \"none\" && !loading\n const hasAnyTertiaryIndicator = showClearAction \|\| loading \|\| hasDropdownIcon\n const isInteractive = !loading && !disabled\n\n // Intentionally not using <button> and rebuilding the semantics\n return h(\n \"span\",\n {\n \"ref\": controlRef,\n \"class\": clsx(s.SelectControl, className as ClassValue),\n // Recreate <button> semantics\n \"role\": \"button\",\n \"tabindex\": disabled ? -1 : 0,\n \"onPointerenter\": (evt: PointerEvent) => {\n handlePressableMouseEnter(evt)\n callListener(onPointerenter, evt)\n },\n \"onPointerdown\": isInteractive ? handlePointerDown : undefined,\n \"onKeydown\": isInteractive ? handleKeyDown : undefined,\n \"data-variant\": props.variant,\n \"data-block\": props.block ? \"\" : undefined,\n \"data-pill\": pill ? \"\" : undefined,\n \"data-size\": props.size,\n \"data-optically-align\": props.opticallyAlign,\n \"aria-busy\": loading ? \"true\" : undefined,\n \"data-selected\": selected,\n \"data-loading\": loading ? \"\" : undefined,\n \"data-invalid\": props.invalid ? \"\" : undefined,\n \"data-disabled\": disabled ? \"\" : undefined,\n \"aria-disabled\": disabled,\n ...restAttrs,\n },\n [\n StartIcon ? h(StartIcon, { class: s.StartIcon }) : null,\n h(\"span\", { class: s.TriggerText }, slots.default?.()),\n hasAnyTertiaryIndicator\n ? h(\"div\", { class: s.IndicatorWrapper }, [\n showClearAction\n ? h(\n Button,\n {\n \"aria-label\": \"Clear current value\",\n \"class\": s.Clear,\n // Prevent pointerdown on the trigger from being captured\n \"onPointerdown\": (evt: PointerEvent) => evt.stopPropagation(),\n \"onClick\": handleClearClick,\n \"color\": \"secondary\",\n \"variant\": hasDropdownIcon ? \"ghost\" : \"solid\",\n // Mostly custom sizing through variables\n \"size\": \"3xs\",\n \"uniform\": true,\n \"pill\": pill,\n \"data-only-child\": !hasDropdownIcon ? \"\" : undefined,\n },\n { default: () => [h(X)] },\n )\n : null,\n loading ? h(LoadingIndicator, { class: s.LoadingIndicator }) : null,\n // Using raw SVG canvases (opposed to fixed icon canvases) led to less pixelation.\n hasDropdownIcon ? h(DropdownIcon, { iconType: dropdownIconType }) : null,\n ])\n : null,\n ],\n )\n }\n },\n})\n\ntype SelectControlOwnProps = InstanceType<typeof SelectControlComponent>[\"$props\"]\n\n/* SelectControl props plus the <span> attributes that fall through to it, as in React. /\nexport type SelectControlProps = SelectControlOwnProps & Omit<HTMLAttributes, keyof SelectControlOwnProps>\n\n/\n The trigger of a select: placeholder styles, start icon, clear action,\n * loading and dropdown indicators. Pair it with any floating UI (MenuTrigger,\n * PopoverTrigger); the default slot is the control's content.\n */\nexport const SelectControl = SelectControlComponent as typeof SelectControlComponent & {\n new (): { $props: SelectControlProps }\n}\n\nexport const DropdownIcon = defineComponent({\n name: \"DropdownIcon\",\n props: {\n iconType: { type: String as PropType<Exclude<DropdownIconType, \"none\">>, required: true },\n },\n setup(props) {\n return () =>\n props.iconType === \"chevronDown\"\n ? h(ChevronDown, { class: clsx(s.DropdownIcon, s.DropdownIconChevron) })\n : h(Dropdown, { class: s.DropdownIcon })\n },\n})\n"]}
1	+ {"version":3,"file":"SelectControl.js","sourceRoot":"","sources":["../../../../src/components/SelectControl/SelectControl.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx, { type ClassValue } from \"clsx\"\nimport { defineComponent, h, shallowRef, type Component, type HTMLAttributes, type PropType } from \"vue\"\nimport type { ControlSize, Variants } from \"@plexui/styles/types\"\nimport { handlePressableMouseEnter } from \"../../lib/helpers.js\"\nimport { Button } from \"../Button/index.js\"\nimport { ChevronDown, Dropdown, X } from \"../Icon/index.js\"\nimport { LoadingIndicator } from \"../Indicator/index.js\"\nimport s from \"@plexui/styles/components/SelectControl/SelectControl.module.css\"\n\n// Vue port of packages/ui/src/components/SelectControl/SelectControl.tsx.\n// - The control is a <span role=\"button\"> that rebuilds <button> semantics,\n// as in React. Every attribute that is not a prop lands on it after the\n// control's own attributes (React spreads its rest props last), and an\n// `onClick` listener is dropped: the control opens on pointer down, like a\n// native select.\n// - `onClearClick` and `onInteract` are function props (`@clear-click`,\n// `@interact` in templates): the first one's presence adds the clear\n// button, the second one's changes what pointer down and the keyboard do.\n// - `@pointerdown`, `@keydown` and `@pointerenter` listeners are called the\n// way React calls `onPointerDown`, `onKeyDown` and `onPointerEnter`: only\n// while the control is interactive, `@keydown` only for keys the control\n// does not handle, and `@pointerdown` (plus `@click`) only without\n// `onInteract`. This is how a parent trigger (MenuTrigger, PopoverTrigger)\n// opens its content from the control.\n\nexport type DropdownIconType = \"chevronDown\" \| \"dropdown\" \| \"none\"\n\ntype Listener = ((...args: never[]) => unknown) \| Listener[] \| null \| undefined\n\n/** Calls a listener attribute, which Vue may hold as an array of handlers. /\nconst callListener = (listener: unknown, ...args: unknown[]) => {\n if (Array.isArray(listener)) {\n for (const handler of listener) callListener(handler, ...args)\n } else if (typeof listener === \"function\") {\n ;(listener as (...params: unknown[]) => unknown)(...args)\n }\n}\n\nconst SelectControlComponent = defineComponent({\n name: \"SelectControl\",\n inheritAttrs: false,\n props: {\n /* Style variant for the control. @default \"outline\" /\n variant: { type: String as PropType<Variants<\"soft\" \| \"outline\" \| \"ghost\">>, default: \"outline\" },\n /* Determines if the control should be a fully rounded pill shape. @default false /\n pill: { type: Boolean, default: false },\n /* Extends the control to 100% of available width. /\n block: { type: Boolean, default: undefined },\n /* Applies a negative margin using the current gutter to optically align the control with surrounding content. /\n opticallyAlign: String as PropType<\"start\" \| \"end\">,\n /* Disables the control visually and from interactions. @default false /\n disabled: { type: Boolean, default: undefined },\n /* Visually indicates that the control is in an invalid state. @default false /\n invalid: { type: Boolean, default: undefined },\n /* Indicates that the control is selected. An unselected state will display placeholder styles. @default false /\n selected: { type: Boolean, default: false },\n /* Displays a clear action that allows the select to be unset; called when it is pressed (`@clear-click`). /\n onClearClick: Function as PropType<() => void>,\n /* Primary handler for when the control is selected with pointer or keyboard events (`@interact`). /\n onInteract: Function as PropType<() => void>,\n /* Enter interacts too, as on a combobox button. Off by default, as Enter may be an attempt to submit a form. @default false /\n interactOnEnter: { type: Boolean, default: false },\n /* Size and spacing of the control: `3xs` 22px up to `3xl` 48px. @default \"md\" /\n size: { type: String as PropType<ControlSize>, default: \"md\" },\n /* Displays a loading indicator in place of the dropdown icon and clear action. @default false /\n loading: { type: Boolean, default: undefined },\n /* Icon displayed in the far right of the control. @default \"dropdown\" /\n dropdownIconType: { type: String as PropType<DropdownIconType>, default: \"dropdown\" },\n /* Icon displayed at the start of the control /\n StartIcon: [Object, Function] as PropType<Component>,\n },\n setup(props, { slots, attrs }) {\n const controlRef = shallowRef<HTMLSpanElement \| null>(null)\n\n // Act like a <button> and fire the click handler on keyboard actions\n const handleKeyDown = (evt: KeyboardEvent) => {\n // Enter and Space on a nested control (the clear button) activate that\n // control: neither this handler nor a wrapping trigger's may take them\n if (evt.target !== evt.currentTarget && (evt.key === \" \" \|\| evt.key === \"Enter\")) {\n return\n }\n switch (evt.key) {\n case \"Enter\":\n case \"ArrowDown\":\n case \"ArrowUp\":\n case \" \":\n // NOTE: \"Enter\" may be an attempt to submit a form\n if (evt.key === \"Enter\" && !props.interactOnEnter) {\n break\n }\n\n evt.stopPropagation()\n evt.preventDefault()\n\n if (props.onInteract) {\n props.onInteract()\n } else {\n // Otherwise, send a synthetic trigger event to the parent trigger\n controlRef.value?.dispatchEvent(\n new PointerEvent(\"pointerdown\", {\n bubbles: true,\n cancelable: true,\n pointerType: \"mouse\", // mimic mouse interaction\n }),\n )\n }\n break\n default:\n // Allow all other key presses through\n callListener(attrs.onKeydown, evt)\n }\n }\n\n const handlePointerDown = (evt: PointerEvent) => {\n // Don't trigger on right clicks\n if (evt.button === 2) {\n return\n }\n\n // Prevent focus from entering the click target of the select\n // so that focus correctly moves into the menu.\n evt.stopPropagation()\n\n if (props.onInteract) {\n evt.preventDefault()\n props.onInteract()\n } else {\n // NOTE: cannot preventDefault() here, for the parent trigger\n callListener(attrs.onPointerdown, evt)\n // A parent trigger may also pass `onClick` (React's <Popover.Trigger> does).\n // This component opens on pointer down, so call it here, assuming that\n // `onPointerdown` is not going to be responsible for opening.\n callListener(attrs.onClick, evt)\n }\n }\n\n const handleClearClick = (evt: MouseEvent) => {\n evt.stopPropagation()\n evt.preventDefault()\n props.onClearClick?.()\n }\n\n return () => {\n const {\n class: className,\n onPointerdown: _onPointerdown,\n onKeydown: _onKeydown,\n onPointerenter,\n onClick: _onClick,\n ...restAttrs\n } = attrs as Record<string, unknown> & { onPointerenter?: Listener }\n const { disabled, loading, selected, pill, dropdownIconType, StartIcon } = props\n const clearable = !!props.onClearClick\n const showClearAction = clearable && selected && !loading && !disabled\n const hasDropdownIcon = dropdownIconType && dropdownIconType !== \"none\" && !loading\n const hasAnyTertiaryIndicator = showClearAction \|\| loading \|\| hasDropdownIcon\n const isInteractive = !loading && !disabled\n\n // Intentionally not using <button> and rebuilding the semantics\n return h(\n \"span\",\n {\n \"ref\": controlRef,\n \"class\": clsx(s.SelectControl, className as ClassValue),\n // Recreate <button> semantics\n \"role\": \"button\",\n \"tabindex\": disabled ? -1 : 0,\n \"onPointerenter\": (evt: PointerEvent) => {\n handlePressableMouseEnter(evt)\n callListener(onPointerenter, evt)\n },\n \"onPointerdown\": isInteractive ? handlePointerDown : undefined,\n \"onKeydown\": isInteractive ? handleKeyDown : undefined,\n \"data-variant\": props.variant,\n \"data-block\": props.block ? \"\" : undefined,\n \"data-pill\": pill ? \"\" : undefined,\n \"data-size\": props.size,\n \"data-optically-align\": props.opticallyAlign,\n \"aria-busy\": loading ? \"true\" : undefined,\n \"data-selected\": selected,\n \"data-loading\": loading ? \"\" : undefined,\n \"data-invalid\": props.invalid ? \"\" : undefined,\n \"data-disabled\": disabled ? \"\" : undefined,\n \"aria-disabled\": disabled,\n ...restAttrs,\n },\n [\n StartIcon ? h(StartIcon, { class: s.StartIcon }) : null,\n h(\"span\", { class: s.TriggerText }, slots.default?.()),\n hasAnyTertiaryIndicator\n ? h(\"div\", { class: s.IndicatorWrapper }, [\n showClearAction\n ? h(\n Button,\n {\n \"aria-label\": \"Clear current value\",\n \"class\": s.Clear,\n // Prevent pointerdown on the trigger from being captured\n \"onPointerdown\": (evt: PointerEvent) => evt.stopPropagation(),\n \"onClick\": handleClearClick,\n \"color\": \"secondary\",\n \"variant\": hasDropdownIcon ? \"ghost\" : \"solid\",\n // Mostly custom sizing through variables\n \"size\": \"3xs\",\n \"uniform\": true,\n \"pill\": pill,\n \"data-only-child\": !hasDropdownIcon ? \"\" : undefined,\n },\n { default: () => [h(X)] },\n )\n : null,\n loading ? h(LoadingIndicator, { class: s.LoadingIndicator }) : null,\n // Using raw SVG canvases (opposed to fixed icon canvases) led to less pixelation.\n hasDropdownIcon ? h(DropdownIcon, { iconType: dropdownIconType }) : null,\n ])\n : null,\n ],\n )\n }\n },\n})\n\ntype SelectControlOwnProps = InstanceType<typeof SelectControlComponent>[\"$props\"]\n\n/* SelectControl props plus the <span> attributes that fall through to it, as in React. /\nexport type SelectControlProps = SelectControlOwnProps & Omit<HTMLAttributes, keyof SelectControlOwnProps>\n\n/\n The trigger of a select: placeholder styles, start icon, clear action,\n * loading and dropdown indicators. Pair it with any floating UI (MenuTrigger,\n * PopoverTrigger); the default slot is the control's content.\n */\nexport const SelectControl = SelectControlComponent as typeof SelectControlComponent & {\n new (): { $props: SelectControlProps }\n}\n\nexport const DropdownIcon = defineComponent({\n name: \"DropdownIcon\",\n props: {\n iconType: { type: String as PropType<Exclude<DropdownIconType, \"none\">>, required: true },\n },\n setup(props) {\n return () =>\n props.iconType === \"chevronDown\"\n ? h(ChevronDown, { class: clsx(s.DropdownIcon, s.DropdownIconChevron) })\n : h(Dropdown, { class: s.DropdownIcon })\n },\n})\n"]}

package/dist/es/components/Transition/TransitionGroup.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { defineComponent, h, onBeforeUnmount, onErrorCaptured, onMounted, ref, watch, } from "vue";
 import getDisableAnimations from "./getDisableAnimations.js";
 import { flattenChildren, isPlaceholder, useChildList } from "./childList.js";
 import { useTransitionChild } from "./useTransitionChild.js";
@@ -16,12 +16,16 @@ const TransitionGroupChildInner = defineComponent({
         shouldRender: { type: Boolean, required: true },
         enterDuration: { type: Number, required: true },
         exitDuration: { type: Number, required: true },
+        overlay: Boolean,
         removeChild: { type: Function, required: true },
         callbacks: Object,
     },
     setup(props, { slots }) {
         const element = ref(null);
         const state = useTransitionChild(props, () => element.value);
+        // An exiting child stays mounted with live slots, where React renders its
+        // last element: state cleared along with the close must not throw here
+        onErrorCaptured(() => (props.shouldRender ? undefined : false));
         return () => h(props.as, {
             "ref": element,
             "class": clsx(props.className, s.TransitionGroupChild),
@@ -32,6 +36,7 @@ const TransitionGroupChildInner = defineComponent({
             "data-exiting": state.exit ? "" : undefined,
             "data-exiting-active": state.exitActive ? "" : undefined,
             "data-interrupted": state.interrupted ? "" : undefined,
+            "inert": props.overlay && state.exit ? "" : undefined,
         }, slots.default?.());
     },
 });
@@ -110,6 +115,11 @@ export const TransitionGroup = defineComponent({
         enterMountDelay: Number,
         /** Render children changes immediately, bypassing transition timings */
         disableAnimations: { type: Boolean, default: () => getDisableAnimations() },
+        /**
+         * For overlays: an exiting child is `inert`, out of the tab order and of hit
+         * testing, and with reduced motion it leaves without waiting for `exitDuration`.
+         */
+        overlay: Boolean,
         /** Determines how new children are added to the children array */
         insertMethod: { type: String, default: "append" },
         /** Called when an enter animation is staged (e.g., component mounted to the DOM) */
@@ -155,6 +165,7 @@ export const TransitionGroup = defineComponent({
                 shouldRender: child.shouldRender,
                 enterDuration: props.enterDuration,
                 exitDuration: props.exitDuration,
+                overlay: props.overlay,
                 removeChild: () => children.remove(child.key),
                 callbacks,
             }, { default: () => [child.vnode] }));

package/dist/es/components/Transition/TransitionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TransitionGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/TransitionGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport { defineComponent, h, onBeforeUnmount, onMounted, ref, watch, type PropType, type StyleValue, type VNode } from \"vue\"\nimport getDisableAnimations from \"./getDisableAnimations.js\"\nimport { flattenChildren, isPlaceholder, useChildList } from \"./childList.js\"\nimport type { InsertMethod, TransitionGroupChildCallback, TransitionGroupChildCallbacks } from \"./shared.js\"\nimport { useTransitionChild } from \"./useTransitionChild.js\"\nimport s from \"@plexui/styles/components/Transition/TransitionGroup.module.css\"\n\n// Port of packages/ui/src/components/Transition/TransitionGroup.tsx. Same\n// wrappers, data attributes and timings, so the shared CSS animates both.\n\ntype Tag = \"div\" \| \"span\"\n\nconst callbackProp = Function as PropType<TransitionGroupChildCallback>\n\nconst TransitionGroupChildInner = defineComponent({\n name: \"TransitionGroupChildInner\",\n props: {\n as: { type: String as PropType<Tag>, required: true },\n className: String,\n transitionId: String,\n styleValue: [String, Object, Array] as PropType<StyleValue>,\n preventMountTransition: Boolean,\n shouldRender: { type: Boolean, required: true },\n enterDuration: { type: Number, required: true },\n exitDuration: { type: Number, required: true },\n removeChild: { type: Function as PropType<() => void>, required: true },\n callbacks: Object as PropType<TransitionGroupChildCallbacks>,\n },\n setup(props, { slots }) {\n const element = ref<HTMLElement \| null>(null)\n const state = useTransitionChild(props, () => element.value)\n\n return () =>\n h(\n props.as,\n {\n \"ref\": element,\n \"class\": clsx(props.className, s.TransitionGroupChild),\n \"data-transition-id\": props.transitionId,\n \"style\": props.styleValue,\n \"data-entering\": state.enter ? \"\" : undefined,\n \"data-entering-active\": state.enterActive ? \"\" : undefined,\n \"data-exiting\": state.exit ? \"\" : undefined,\n \"data-exiting-active\": state.exitActive ? \"\" : undefined,\n \"data-interrupted\": state.interrupted ? \"\" : undefined,\n },\n slots.default?.(),\n )\n },\n})\n\n/*\n Delays mounting a child by `enterMountDelay` ms, except on the initial\n * (prevented) mount. Like usehooks-ts' useTimeout, a changed delay restarts\n * the pending timer; removing the delay while pending leaves it unmounted.\n /\nexport const useMountDelay = (getProps: () => { preventMountTransition?: boolean; enterMountDelay?: number }) => {\n const delay = () => {\n const { preventMountTransition, enterMountDelay } = getProps()\n return !preventMountTransition && enterMountDelay != null ? enterMountDelay : null\n }\n const mounted = ref(delay() == null)\n let timeout: number \| undefined\n\n onMounted(() => {\n watch(\n delay,\n (mountDelay) => {\n clearTimeout(timeout)\n if (!mounted.value && mountDelay != null) {\n timeout = window.setTimeout(() => (mounted.value = true), mountDelay)\n }\n },\n { immediate: true },\n )\n })\n onBeforeUnmount(() => clearTimeout(timeout))\n return mounted\n}\n\nconst TransitionGroupChild = defineComponent({\n name: \"TransitionGroupChild\",\n inheritAttrs: false,\n props: {\n preventMountTransition: Boolean,\n enterMountDelay: Number,\n },\n setup(props, { attrs, slots }) {\n const mounted = useMountDelay(() => props)\n return () =>\n mounted.value\n ? h(TransitionGroupChildInner, { ...attrs, preventMountTransition: props.preventMountTransition } as never, slots)\n : null\n },\n})\n\n// With `disableAnimations`, React wraps the children through `Children.map`,\n// which keys each wrapper by its child's key and a `false` child's wrapper by\n// its position. A reordered child moves with its wrapper (keeping its DOM and\n// state), and a `false` child turning into an element (or back) gets a new\n// wrapper. Placeholders take a symbol per position, which no child key can\n// equal.\nconst placeholderKeys: symbol[] = []\nconst wrapperKey = (vnode: VNode, index: number): PropertyKey => {\n if (!isPlaceholder(vnode)) return vnode.key!\n return (placeholderKeys[index] ??= Symbol(`placeholder-${index}`))\n}\n\n/\n Wraps each keyed child in a `<span>` (or `<div>`) that carries\n * `data-entering` / `data-exiting` state while it mounts and unmounts.\n \n A `false` slot child (a comment vnode) mirrors React's `Children.map`\n * over `false`: with `disableAnimations` it still renders an empty wrapper.\n * Leave the slot out entirely to render nothing.\n /\nexport const TransitionGroup = defineComponent({\n name: \"TransitionGroup\",\n inheritAttrs: false,\n props: {\n /* Determines the tag used by wrapping elements /\n as: { type: String as PropType<Tag>, default: \"span\" },\n /* Identifier passed to wrapping elements as `[data-transition-id]` /\n transitionId: String,\n /* Determines the amount of time that the enter state is applied during mounting /\n enterDuration: { type: Number, default: 0 },\n /* Determines the amount of time that the exit state is applied before unmounting /\n exitDuration: { type: Number, default: 0 },\n /* Determines if children should have an enter transition applied during mounting of the TransitionGroup. /\n preventInitialTransition: { type: Boolean, default: true },\n /* Delay in MS to wait before mounting a child. Unset for no delay (default). /\n enterMountDelay: Number,\n /* Render children changes immediately, bypassing transition timings /\n disableAnimations: { type: Boolean, default: () => getDisableAnimations() },\n /* Determines how new children are added to the children array /\n insertMethod: { type: String as PropType<InsertMethod>, default: \"append\" },\n /* Called when an enter animation is staged (e.g., component mounted to the DOM) /\n onEnter: callbackProp,\n /* Called when an enter animation starts /\n onEnterActive: callbackProp,\n /* Called when an enter animation completes /\n onEnterComplete: callbackProp,\n /* Called when an exit animation is staged /\n onExit: callbackProp,\n /* Called when an exit animation starts /\n onExitActive: callbackProp,\n /* Called when an exit animation completes (e.g., component unmounted from the DOM) */\n onExitComplete: callbackProp,\n },\n setup(props, { slots, attrs }) {\n const children = useChildList(\"TransitionGroup\")\n // Read at call time, so callers can swap handlers between renders\n const callbacks: TransitionGroupChildCallbacks = {\n onEnter: (el) => props.onEnter?.(el),\n onEnterActive: (el) => props.onEnterActive?.(el),\n onEnterComplete: (el) => props.onEnterComplete?.(el),\n onExit: (el) => props.onExit?.(el),\n onExitActive: (el) => props.onExitActive?.(el),\n onExitComplete: (el) => props.onExitComplete?.(el),\n }\n\n return () => {\n const slotChildren: VNode[] = flattenChildren(slots.default?.() ?? [])\n const className = attrs.class as string \| undefined\n const style = attrs.style as StyleValue \| undefined\n const renderChildren = children.next(\n children.keyedChildren(slotChildren),\n props.insertMethod,\n props.preventInitialTransition,\n )\n\n if (props.disableAnimations) {\n return slotChildren.map((vnode, index) =>\n h(\n props.as,\n { \"key\": wrapperKey(vnode, index), \"class\": className, style, \"data-transition-id\": props.transitionId },\n isPlaceholder(vnode) ? undefined : [vnode],\n ),\n )\n }\n\n return renderChildren.map((child) =>\n h(\n TransitionGroupChild,\n {\n key: child.key,\n preventMountTransition: child.preventMountTransition,\n enterMountDelay: props.enterMountDelay,\n as: props.as,\n className,\n transitionId: props.transitionId,\n styleValue: style,\n shouldRender: child.shouldRender,\n enterDuration: props.enterDuration,\n exitDuration: props.exitDuration,\n removeChild: () => children.remove(child.key),\n callbacks,\n },\n { default: () => [child.vnode] },\n ),\n )\n }\n },\n})\n\nexport type TransitionGroupProps = InstanceType<typeof TransitionGroup>[\"$props\"]\n"]}
1	+ {"version":3,"file":"TransitionGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/TransitionGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport {\n defineComponent,\n h,\n onBeforeUnmount,\n onErrorCaptured,\n onMounted,\n ref,\n watch,\n type PropType,\n type StyleValue,\n type VNode,\n} from \"vue\"\nimport getDisableAnimations from \"./getDisableAnimations.js\"\nimport { flattenChildren, isPlaceholder, useChildList } from \"./childList.js\"\nimport type { InsertMethod, TransitionGroupChildCallback, TransitionGroupChildCallbacks } from \"./shared.js\"\nimport { useTransitionChild } from \"./useTransitionChild.js\"\nimport s from \"@plexui/styles/components/Transition/TransitionGroup.module.css\"\n\n// Port of packages/ui/src/components/Transition/TransitionGroup.tsx. Same\n// wrappers, data attributes and timings, so the shared CSS animates both.\n\ntype Tag = \"div\" \| \"span\"\n\nconst callbackProp = Function as PropType<TransitionGroupChildCallback>\n\nconst TransitionGroupChildInner = defineComponent({\n name: \"TransitionGroupChildInner\",\n props: {\n as: { type: String as PropType<Tag>, required: true },\n className: String,\n transitionId: String,\n styleValue: [String, Object, Array] as PropType<StyleValue>,\n preventMountTransition: Boolean,\n shouldRender: { type: Boolean, required: true },\n enterDuration: { type: Number, required: true },\n exitDuration: { type: Number, required: true },\n overlay: Boolean,\n removeChild: { type: Function as PropType<() => void>, required: true },\n callbacks: Object as PropType<TransitionGroupChildCallbacks>,\n },\n setup(props, { slots }) {\n const element = ref<HTMLElement \| null>(null)\n const state = useTransitionChild(props, () => element.value)\n\n // An exiting child stays mounted with live slots, where React renders its\n // last element: state cleared along with the close must not throw here\n onErrorCaptured(() => (props.shouldRender ? undefined : false))\n\n return () =>\n h(\n props.as,\n {\n \"ref\": element,\n \"class\": clsx(props.className, s.TransitionGroupChild),\n \"data-transition-id\": props.transitionId,\n \"style\": props.styleValue,\n \"data-entering\": state.enter ? \"\" : undefined,\n \"data-entering-active\": state.enterActive ? \"\" : undefined,\n \"data-exiting\": state.exit ? \"\" : undefined,\n \"data-exiting-active\": state.exitActive ? \"\" : undefined,\n \"data-interrupted\": state.interrupted ? \"\" : undefined,\n \"inert\": props.overlay && state.exit ? \"\" : undefined,\n },\n slots.default?.(),\n )\n },\n})\n\n/*\n Delays mounting a child by `enterMountDelay` ms, except on the initial\n * (prevented) mount. Like usehooks-ts' useTimeout, a changed delay restarts\n * the pending timer; removing the delay while pending leaves it unmounted.\n /\nexport const useMountDelay = (getProps: () => { preventMountTransition?: boolean; enterMountDelay?: number }) => {\n const delay = () => {\n const { preventMountTransition, enterMountDelay } = getProps()\n return !preventMountTransition && enterMountDelay != null ? enterMountDelay : null\n }\n const mounted = ref(delay() == null)\n let timeout: number \| undefined\n\n onMounted(() => {\n watch(\n delay,\n (mountDelay) => {\n clearTimeout(timeout)\n if (!mounted.value && mountDelay != null) {\n timeout = window.setTimeout(() => (mounted.value = true), mountDelay)\n }\n },\n { immediate: true },\n )\n })\n onBeforeUnmount(() => clearTimeout(timeout))\n return mounted\n}\n\nconst TransitionGroupChild = defineComponent({\n name: \"TransitionGroupChild\",\n inheritAttrs: false,\n props: {\n preventMountTransition: Boolean,\n enterMountDelay: Number,\n },\n setup(props, { attrs, slots }) {\n const mounted = useMountDelay(() => props)\n return () =>\n mounted.value\n ? h(TransitionGroupChildInner, { ...attrs, preventMountTransition: props.preventMountTransition } as never, slots)\n : null\n },\n})\n\n// With `disableAnimations`, React wraps the children through `Children.map`,\n// which keys each wrapper by its child's key and a `false` child's wrapper by\n// its position. A reordered child moves with its wrapper (keeping its DOM and\n// state), and a `false` child turning into an element (or back) gets a new\n// wrapper. Placeholders take a symbol per position, which no child key can\n// equal.\nconst placeholderKeys: symbol[] = []\nconst wrapperKey = (vnode: VNode, index: number): PropertyKey => {\n if (!isPlaceholder(vnode)) return vnode.key!\n return (placeholderKeys[index] ??= Symbol(`placeholder-${index}`))\n}\n\n/\n Wraps each keyed child in a `<span>` (or `<div>`) that carries\n * `data-entering` / `data-exiting` state while it mounts and unmounts.\n \n A `false` slot child (a comment vnode) mirrors React's `Children.map`\n * over `false`: with `disableAnimations` it still renders an empty wrapper.\n * Leave the slot out entirely to render nothing.\n /\nexport const TransitionGroup = defineComponent({\n name: \"TransitionGroup\",\n inheritAttrs: false,\n props: {\n /* Determines the tag used by wrapping elements /\n as: { type: String as PropType<Tag>, default: \"span\" },\n /* Identifier passed to wrapping elements as `[data-transition-id]` /\n transitionId: String,\n /* Determines the amount of time that the enter state is applied during mounting /\n enterDuration: { type: Number, default: 0 },\n /* Determines the amount of time that the exit state is applied before unmounting /\n exitDuration: { type: Number, default: 0 },\n /* Determines if children should have an enter transition applied during mounting of the TransitionGroup. /\n preventInitialTransition: { type: Boolean, default: true },\n /* Delay in MS to wait before mounting a child. Unset for no delay (default). /\n enterMountDelay: Number,\n /* Render children changes immediately, bypassing transition timings /\n disableAnimations: { type: Boolean, default: () => getDisableAnimations() },\n /\n For overlays: an exiting child is `inert`, out of the tab order and of hit\n * testing, and with reduced motion it leaves without waiting for `exitDuration`.\n /\n overlay: Boolean,\n /* Determines how new children are added to the children array /\n insertMethod: { type: String as PropType<InsertMethod>, default: \"append\" },\n /* Called when an enter animation is staged (e.g., component mounted to the DOM) /\n onEnter: callbackProp,\n /* Called when an enter animation starts /\n onEnterActive: callbackProp,\n /* Called when an enter animation completes /\n onEnterComplete: callbackProp,\n /* Called when an exit animation is staged /\n onExit: callbackProp,\n /* Called when an exit animation starts /\n onExitActive: callbackProp,\n /* Called when an exit animation completes (e.g., component unmounted from the DOM) */\n onExitComplete: callbackProp,\n },\n setup(props, { slots, attrs }) {\n const children = useChildList(\"TransitionGroup\")\n // Read at call time, so callers can swap handlers between renders\n const callbacks: TransitionGroupChildCallbacks = {\n onEnter: (el) => props.onEnter?.(el),\n onEnterActive: (el) => props.onEnterActive?.(el),\n onEnterComplete: (el) => props.onEnterComplete?.(el),\n onExit: (el) => props.onExit?.(el),\n onExitActive: (el) => props.onExitActive?.(el),\n onExitComplete: (el) => props.onExitComplete?.(el),\n }\n\n return () => {\n const slotChildren: VNode[] = flattenChildren(slots.default?.() ?? [])\n const className = attrs.class as string \| undefined\n const style = attrs.style as StyleValue \| undefined\n const renderChildren = children.next(\n children.keyedChildren(slotChildren),\n props.insertMethod,\n props.preventInitialTransition,\n )\n\n if (props.disableAnimations) {\n return slotChildren.map((vnode, index) =>\n h(\n props.as,\n { \"key\": wrapperKey(vnode, index), \"class\": className, style, \"data-transition-id\": props.transitionId },\n isPlaceholder(vnode) ? undefined : [vnode],\n ),\n )\n }\n\n return renderChildren.map((child) =>\n h(\n TransitionGroupChild,\n {\n key: child.key,\n preventMountTransition: child.preventMountTransition,\n enterMountDelay: props.enterMountDelay,\n as: props.as,\n className,\n transitionId: props.transitionId,\n styleValue: style,\n shouldRender: child.shouldRender,\n enterDuration: props.enterDuration,\n exitDuration: props.exitDuration,\n overlay: props.overlay,\n removeChild: () => children.remove(child.key),\n callbacks,\n },\n { default: () => [child.vnode] },\n ),\n )\n }\n },\n})\n\nexport type TransitionGroupProps = InstanceType<typeof TransitionGroup>[\"$props\"]\n"]}

package/dist/es/components/Transition/shared.js CHANGED Viewed

@@ -1,4 +1,33 @@
 // Types and helpers shared by the Vue transition components. Mirrors
 // packages/ui/src/components/Transition/shared.ts.
-export {};
+// Overlay timers, in step with the `--motion-*` tokens
+export const overlayTiming = { enterDuration: 250, exitDuration: 150 };
+/** A panel that crosses the screen: a sheet or a side panel */
+export const overlayTimingLarge = { enterDuration: 300, exitDuration: 200 };
+/**
+ * An overlay stays a dismissable layer through its exit. A press on its trigger
+ * turns it around, and the layer must not count that press as outside and
+ * close it again: pass `transition` to the TransitionGroup and
+ * `onInteractOutside` to the layer.
+ */
+export const createExitGuard = () => {
+    let exiting = false;
+    return {
+        transition: {
+            onExit: () => {
+                exiting = true;
+            },
+            onEnterActive: () => {
+                exiting = false;
+            },
+            onExitComplete: () => {
+                exiting = false;
+            },
+        },
+        onInteractOutside: (event) => {
+            if (exiting)
+                event.preventDefault();
+        },
+    };
+};
 //# sourceMappingURL=shared.js.map

package/dist/es/components/Transition/shared.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/components/Transition/shared.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,mDAAmD","sourcesContent":["// Types and helpers shared by the Vue transition components. Mirrors\n// packages/ui/src/components/Transition/shared.ts.\n\nexport type TransitionDefinition = {\n opacity?: number\n /** The horizontal translation value in pixels /\n x?: number\n /* The horizontal vertical value in pixels /\n y?: number\n /* The opacity value ranging from 0 to 1. /\n scale?: number\n rotate?: number \| string\n skewX?: number \| string\n skewY?: number \| string\n blur?: number\n duration?: number\n delay?: number\n timingFunction?: string\n}\n\nexport type InitialTransitionDefinition = Omit<\n TransitionDefinition,\n \"duration\" \| \"delay\" \| \"timingFunction\"\n>\n\nexport type LayoutTransitionDefinition = {\n duration?: number\n delay?: number\n timingFunction?: string\n}\n\nexport type CallbackType =\n \| \"enter\"\n \| \"enter-active\"\n \| \"enter-complete\"\n \| \"exit\"\n \| \"exit-active\"\n \| \"exit-complete\"\n\n/* The element a transition callback receives (HTML or SVG) /\nexport type TransitionElement = HTMLElement \| SVGElement\n\nexport type TransitionGroupChildCallback = (element: TransitionElement) => void\n\n/* Lifecycle hooks, called with the transitioning element (same moments as React's `onEnter`...). */\nexport type TransitionGroupChildCallbacks = {\n onEnter?: TransitionGroupChildCallback\n onEnterActive?: TransitionGroupChildCallback\n onEnterComplete?: TransitionGroupChildCallback\n onExit?: TransitionGroupChildCallback\n onExitActive?: TransitionGroupChildCallback\n onExitComplete?: TransitionGroupChildCallback\n}\n\nexport type InsertMethod = \"append\" \| \"prepend\"\n"]}
1	+ {"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/components/Transition/shared.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,mDAAmD;AAuDnD,uDAAuD;AACvD,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,CAAA;AACtE,+DAA+D;AAC/D,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,CAAA;AAE3E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,IAAI,OAAO,GAAG,KAAK,CAAA;IACnB,OAAO;QACL,UAAU,EAAE;YACV,MAAM,EAAE,GAAG,EAAE;gBACX,OAAO,GAAG,IAAI,CAAA;YAChB,CAAC;YACD,aAAa,EAAE,GAAG,EAAE;gBAClB,OAAO,GAAG,KAAK,CAAA;YACjB,CAAC;YACD,cAAc,EAAE,GAAG,EAAE;gBACnB,OAAO,GAAG,KAAK,CAAA;YACjB,CAAC;SACF;QACD,iBAAiB,EAAE,CAAC,KAAY,EAAE,EAAE;YAClC,IAAI,OAAO;gBAAE,KAAK,CAAC,cAAc,EAAE,CAAA;QACrC,CAAC;KACF,CAAA;AACH,CAAC,CAAA","sourcesContent":["// Types and helpers shared by the Vue transition components. Mirrors\n// packages/ui/src/components/Transition/shared.ts.\n\nexport type TransitionDefinition = {\n opacity?: number\n /** The horizontal translation value in pixels /\n x?: number\n /* The horizontal vertical value in pixels /\n y?: number\n /* The opacity value ranging from 0 to 1. /\n scale?: number\n rotate?: number \| string\n skewX?: number \| string\n skewY?: number \| string\n blur?: number\n duration?: number\n delay?: number\n timingFunction?: string\n}\n\nexport type InitialTransitionDefinition = Omit<\n TransitionDefinition,\n \"duration\" \| \"delay\" \| \"timingFunction\"\n>\n\nexport type LayoutTransitionDefinition = {\n duration?: number\n delay?: number\n timingFunction?: string\n}\n\nexport type CallbackType =\n \| \"enter\"\n \| \"enter-active\"\n \| \"enter-complete\"\n \| \"exit\"\n \| \"exit-active\"\n \| \"exit-complete\"\n\n/* The element a transition callback receives (HTML or SVG) /\nexport type TransitionElement = HTMLElement \| SVGElement\n\nexport type TransitionGroupChildCallback = (element: TransitionElement) => void\n\n/* Lifecycle hooks, called with the transitioning element (same moments as React's `onEnter`...). /\nexport type TransitionGroupChildCallbacks = {\n onEnter?: TransitionGroupChildCallback\n onEnterActive?: TransitionGroupChildCallback\n onEnterComplete?: TransitionGroupChildCallback\n onExit?: TransitionGroupChildCallback\n onExitActive?: TransitionGroupChildCallback\n onExitComplete?: TransitionGroupChildCallback\n}\n\nexport type InsertMethod = \"append\" \| \"prepend\"\n\n// Overlay timers, in step with the `--motion-` tokens\nexport const overlayTiming = { enterDuration: 250, exitDuration: 150 }\n/** A panel that crosses the screen: a sheet or a side panel /\nexport const overlayTimingLarge = { enterDuration: 300, exitDuration: 200 }\n\n/\n An overlay stays a dismissable layer through its exit. A press on its trigger\n * turns it around, and the layer must not count that press as outside and\n * close it again: pass `transition` to the TransitionGroup and\n * `onInteractOutside` to the layer.\n */\nexport const createExitGuard = () => {\n let exiting = false\n return {\n transition: {\n onExit: () => {\n exiting = true\n },\n onEnterActive: () => {\n exiting = false\n },\n onExitComplete: () => {\n exiting = false\n },\n },\n onInteractOutside: (event: Event) => {\n if (exiting) event.preventDefault()\n },\n }\n}\n"]}

package/dist/es/components/Transition/useTransitionChild.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { onBeforeUnmount, onMounted, reactive, watch } from "vue";
-import { waitForAnimationFrame } from "../../lib/helpers.js";
+import { prefersReducedMotion, waitForAnimationFrame } from "../../lib/helpers.js";
 import { getInitialTransitionState, transitionReducer } from "./transitionReducer.js";
 const CALLBACKS = {
     "enter": "onEnter",
@@ -46,7 +46,7 @@ export function useTransitionChild(props, getElement) {
                 exitTimeout = window.setTimeout(() => {
                     trigger("exit-complete");
                     props.removeChild();
-                }, props.exitDuration);
+                }, props.overlay && prefersReducedMotion() ? 0 : props.exitDuration);
             });
             cancel = () => {
                 cancelFrame();

package/dist/es/components/Transition/useTransitionChild.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTransitionChild.js","sourceRoot":"","sources":["../../../../src/components/Transition/useTransitionChild.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;~~AAE5D~~,OAAO,EAAE,yBAAyB,EAAE,iBAAiB,EAA8B,MAAM,wBAAwB,CAAA;~~AAWjH~~,MAAM,SAAS,GAA8D;IAC3E,OAAO,EAAE,SAAS;IAClB,cAAc,EAAE,eAAe;IAC/B,gBAAgB,EAAE,iBAAiB;IACnC,MAAM,EAAE,QAAQ;IAChB,aAAa,EAAE,cAAc;IAC7B,eAAe,EAAE,gBAAgB;CAClC,CAAA;AAED;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA2B,EAAE,UAA0C;IACxG,MAAM,KAAK,GAAG,QAAQ,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAA;IACjF,MAAM,QAAQ,GAAG,CAAC,MAA6B,EAAE,EAAE;QACjD,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IACxD,CAAC,CAAA;IAED,IAAI,YAAY,GAAwB,IAAI,CAAA;IAC5C,MAAM,OAAO,GAAG,CAAC,IAAkB,EAAE,EAAE;QACrC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;QAC5B,IAAI,CAAC,OAAO,IAAI,IAAI,KAAK,YAAY;YAAE,OAAM;QAC7C,YAAY,GAAG,IAAI,CAAA;QACnB,KAAK,CAAC,SAAS,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAA;IAC/C,CAAC,CAAA;IAED,kEAAkE;IAClE,mDAAmD;IACnD,IAAI,wBAAwB,GAAG,KAAK,CAAA;IACpC,IAAI,MAAgC,CAAA;IAEpC,MAAM,GAAG,GAAG,CAAC,YAAqB,EAAE,EAAE;QACpC,MAAM,EAAE,EAAE,CAAA;QACV,MAAM,GAAG,SAAS,CAAA;QAElB,kBAAkB;QAClB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,IAAI,WAA+B,CAAA;YACnC,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAA;YACjC,OAAO,CAAC,MAAM,CAAC,CAAA;YACf,MAAM,WAAW,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBAC7C,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAA;gBACjC,OAAO,CAAC,aAAa,CAAC,CAAA;gBACtB,WAAW,GAAG,MAAM,CAAC,UAAU,~~CAAC~~,GAAG,EAAE;~~oBACnC~~,OAAO,CAAC,eAAe,CAAC,CAAA;oBACxB,KAAK,CAAC,WAAW,EAAE,CAAA;gBACrB,CAAC,EAAE,KAAK,CAAC,YAAY,~~CAAC~~,CAAA;~~YACxB~~,CAAC,CAAC,CAAA;YACF,MAAM,GAAG,GAAG,EAAE;gBACZ,WAAW,EAAE,CAAA;gBACb,IAAI,WAAW,KAAK,SAAS;oBAAE,YAAY,CAAC,WAAW,CAAC,CAAA;YAC1D,CAAC,CAAA;YACD,OAAM;QACR,CAAC;QAED,6EAA6E;QAC7E,IAAI,KAAK,CAAC,sBAAsB,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAC9D,wBAAwB,GAAG,IAAI,CAAA;YAC/B,OAAM;QACR,CAAC;QAED,IAAI,YAAgC,CAAA;QACpC,QAAQ,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAA;QAClC,OAAO,CAAC,OAAO,CAAC,CAAA;QAChB,MAAM,WAAW,GAAG,qBAAqB,CAAC,GAAG,EAAE;YAC7C,QAAQ,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAA;YAClC,OAAO,CAAC,cAAc,CAAC,CAAA;YACvB,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACpC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAA;gBAC1B,OAAO,CAAC,gBAAgB,CAAC,CAAA;YAC3B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,CAAA;QACzB,CAAC,CAAC,CAAA;QACF,MAAM,GAAG,GAAG,EAAE;YACZ,WAAW,EAAE,CAAA;YACb,IAAI,YAAY,KAAK,SAAS;gBAAE,YAAY,CAAC,YAAY,CAAC,CAAA;QAC5D,CAAC,CAAA;IACH,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAA;IACxC,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;IACvD,eAAe,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAEjC,OAAO,KAAK,CAAA;AACd,CAAC","sourcesContent":["import { onBeforeUnmount, onMounted, reactive, watch } from \"vue\"\nimport { waitForAnimationFrame } from \"../../lib/helpers.js\"\nimport type { CallbackType, TransitionElement, TransitionGroupChildCallbacks } from \"./shared.js\"\nimport { getInitialTransitionState, transitionReducer, type TransitionStateAction } from \"./transitionReducer.js\"\n\nexport type TransitionChildProps = {\n shouldRender: boolean\n preventMountTransition?: boolean\n enterDuration: number\n exitDuration: number\n removeChild: () => void\n callbacks?: TransitionGroupChildCallbacks\n}\n\nconst CALLBACKS: Record<CallbackType, keyof TransitionGroupChildCallbacks> = {\n \"enter\": \"onEnter\",\n \"enter-active\": \"onEnterActive\",\n \"enter-complete\": \"onEnterComplete\",\n \"exit\": \"onExit\",\n \"exit-active\": \"onExitActive\",\n \"exit-complete\": \"onExitComplete\",\n}\n\n/*\n The per-child enter/exit state machine of React's TransitionGroupChild\n * (same reducer, frames and timers), shared by TransitionGroup and\n * SlotTransitionGroup. Returns the reactive state that drives the\n * `data-entering` / `data-exiting` / `data-interrupted` attributes.\n */\nexport function useTransitionChild(props: TransitionChildProps, getElement: () => TransitionElement \| null) {\n const state = reactive(getInitialTransitionState(!!props.preventMountTransition))\n const dispatch = (action: TransitionStateAction) => {\n Object.assign(state, transitionReducer(state, action))\n }\n\n let lastCallback: CallbackType \| null = null\n const trigger = (type: CallbackType) => {\n const element = getElement()\n if (!element \|\| type === lastCallback) return\n lastCallback = type\n props.callbacks?.[CALLBACKS[type]]?.(element)\n }\n\n // Allow a child to prevent mount transition, but still experience\n // future enter transition events, when applicable.\n let preventedMountTransition = false\n let cancel: (() => void) \| undefined\n\n const run = (shouldRender: boolean) => {\n cancel?.()\n cancel = undefined\n\n // Exit transition\n if (!shouldRender) {\n let exitTimeout: number \| undefined\n dispatch({ type: \"exit-before\" })\n trigger(\"exit\")\n const cancelFrame = waitForAnimationFrame(() => {\n dispatch({ type: \"exit-active\" })\n trigger(\"exit-active\")\n exitTimeout = window.setTimeout(() => {\n trigger(\"exit-complete\")\n props.removeChild()\n }, props.exitDuration)\n })\n cancel = () => {\n cancelFrame()\n if (exitTimeout !== undefined) clearTimeout(exitTimeout)\n }\n return\n }\n\n // Enter transition: check if we need to prevent this specific entering cycle\n if (props.preventMountTransition && !preventedMountTransition) {\n preventedMountTransition = true\n return\n }\n\n let enterTimeout: number \| undefined\n dispatch({ type: \"enter-before\" })\n trigger(\"enter\")\n const cancelFrame = waitForAnimationFrame(() => {\n dispatch({ type: \"enter-active\" })\n trigger(\"enter-active\")\n enterTimeout = window.setTimeout(() => {\n dispatch({ type: \"done\" })\n trigger(\"enter-complete\")\n }, props.enterDuration)\n })\n cancel = () => {\n cancelFrame()\n if (enterTimeout !== undefined) clearTimeout(enterTimeout)\n }\n }\n\n onMounted(() => run(props.shouldRender))\n watch(() => props.shouldRender, run, { flush: \"post\" })\n onBeforeUnmount(() => cancel?.())\n\n return state\n}\n"]}
1	+ {"version":3,"file":"useTransitionChild.js","sourceRoot":"","sources":["../../../../src/components/Transition/useTransitionChild.ts"],"names":[],"mappings":"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","sourcesContent":["import { onBeforeUnmount, onMounted, reactive, watch } from \"vue\"\nimport { prefersReducedMotion, waitForAnimationFrame } from \"../../lib/helpers.js\"\nimport type { CallbackType, TransitionElement, TransitionGroupChildCallbacks } from \"./shared.js\"\nimport { getInitialTransitionState, transitionReducer, type TransitionStateAction } from \"./transitionReducer.js\"\n\nexport type TransitionChildProps = {\n shouldRender: boolean\n preventMountTransition?: boolean\n enterDuration: number\n exitDuration: number\n overlay?: boolean\n removeChild: () => void\n callbacks?: TransitionGroupChildCallbacks\n}\n\nconst CALLBACKS: Record<CallbackType, keyof TransitionGroupChildCallbacks> = {\n \"enter\": \"onEnter\",\n \"enter-active\": \"onEnterActive\",\n \"enter-complete\": \"onEnterComplete\",\n \"exit\": \"onExit\",\n \"exit-active\": \"onExitActive\",\n \"exit-complete\": \"onExitComplete\",\n}\n\n/*\n The per-child enter/exit state machine of React's TransitionGroupChild\n * (same reducer, frames and timers), shared by TransitionGroup and\n * SlotTransitionGroup. Returns the reactive state that drives the\n * `data-entering` / `data-exiting` / `data-interrupted` attributes.\n */\nexport function useTransitionChild(props: TransitionChildProps, getElement: () => TransitionElement \| null) {\n const state = reactive(getInitialTransitionState(!!props.preventMountTransition))\n const dispatch = (action: TransitionStateAction) => {\n Object.assign(state, transitionReducer(state, action))\n }\n\n let lastCallback: CallbackType \| null = null\n const trigger = (type: CallbackType) => {\n const element = getElement()\n if (!element \|\| type === lastCallback) return\n lastCallback = type\n props.callbacks?.[CALLBACKS[type]]?.(element)\n }\n\n // Allow a child to prevent mount transition, but still experience\n // future enter transition events, when applicable.\n let preventedMountTransition = false\n let cancel: (() => void) \| undefined\n\n const run = (shouldRender: boolean) => {\n cancel?.()\n cancel = undefined\n\n // Exit transition\n if (!shouldRender) {\n let exitTimeout: number \| undefined\n dispatch({ type: \"exit-before\" })\n trigger(\"exit\")\n const cancelFrame = waitForAnimationFrame(() => {\n dispatch({ type: \"exit-active\" })\n trigger(\"exit-active\")\n exitTimeout = window.setTimeout(\n () => {\n trigger(\"exit-complete\")\n props.removeChild()\n },\n props.overlay && prefersReducedMotion() ? 0 : props.exitDuration,\n )\n })\n cancel = () => {\n cancelFrame()\n if (exitTimeout !== undefined) clearTimeout(exitTimeout)\n }\n return\n }\n\n // Enter transition: check if we need to prevent this specific entering cycle\n if (props.preventMountTransition && !preventedMountTransition) {\n preventedMountTransition = true\n return\n }\n\n let enterTimeout: number \| undefined\n dispatch({ type: \"enter-before\" })\n trigger(\"enter\")\n const cancelFrame = waitForAnimationFrame(() => {\n dispatch({ type: \"enter-active\" })\n trigger(\"enter-active\")\n enterTimeout = window.setTimeout(() => {\n dispatch({ type: \"done\" })\n trigger(\"enter-complete\")\n }, props.enterDuration)\n })\n cancel = () => {\n cancelFrame()\n if (enterTimeout !== undefined) clearTimeout(enterTimeout)\n }\n }\n\n onMounted(() => run(props.shouldRender))\n watch(() => props.shouldRender, run, { flush: \"post\" })\n onBeforeUnmount(() => cancel?.())\n\n return state\n}\n"]}

package/dist/es/lib/dateUtils.js CHANGED Viewed

@@ -28,6 +28,11 @@ export const isSameDay = (targetDate, compareDate) => targetDate.hasSame(compare
  * Check if a date is today
  */
 export const isToday = (dateTime) => isSameDay(dateTime, DateTime.local());
+/**
+ * Where a date sits in a week row that starts on `weekStartsOn`, 0 (Sunday) to
+ * 6 (Saturday). Luxon's weekday runs from 1 (Monday) to 7 (Sunday).
+ */
+export const weekPosition = (date, weekStartsOn) => (date.weekday - weekStartsOn + 7) % 7;
 /**
  * Split an array of days into weeks (arrays of 7 days each)
  */

package/dist/es/lib/dateUtils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dateUtils.js","sourceRoot":"","sources":["../../../src/lib/dateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAc,EAAc,EAAE;IAC3D,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1C,MAAM,WAAW,GAAG,YAAY,CAAC,WAAW,IAAI,EAAE,CAAA,CAAC,mCAAmC;IACtF,MAAM,IAAI,GAAG,EAAE,CAAA;IAEf,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,WAAW,EAAE,GAAG,EAAE,EAAE,CAAC;QAC3C,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QAC/D,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACpB,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,UAAoB,EAAE,WAAqB,EAAW,EAAE,CAC/E,UAAU,CAAC,QAAQ,EAAE,GAAG,WAAW,EAAE,QAAQ,EAAE,CAAA;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,UAAoB,EAAE,WAAqB,EAAW,EAAE,CAC9E,UAAU,CAAC,QAAQ,EAAE,GAAG,WAAW,EAAE,QAAQ,EAAE,CAAA;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,UAAoB,EAAE,WAAqB,EAAW,EAAE,CAChF,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,QAAkB,EAAW,EAAE,CAAC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAA;AAE7F;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,WAAuB,EAAE,IAAI,GAAG,CAAC,EAAgB,EAAE;IAChF,MAAM,KAAK,GAAG,EAAE,CAAA;IAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC;QAClD,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;IAC5C,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,IAAc,EACd,EAAE,GAAG,EAAE,GAAG,KAAyC,EAAE,EAC/B,EAAE;IACxB,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAEtC,OAAO;QACL,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY;QACpD,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU;KACjD,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { DateTime } from \"luxon\"\n\n/*\n Get all days in a given month as DateTime objects\n /\nexport const getDaysOfMonth = (date: DateTime): DateTime[] => {\n const startOfMonth = date.startOf(\"month\")\n const daysInMonth = startOfMonth.daysInMonth ?? 31 // fallback to 31 days if undefined\n const days = []\n\n for (let day = 0; day < daysInMonth; day++) {\n const dayDate = startOfMonth.plus({ days: day }).startOf(\"day\")\n days.push(dayDate)\n }\n\n return days\n}\n\n/\n Check if the first date is before the second date\n /\nexport const isBefore = (targetDate: DateTime, compareDate: DateTime): boolean =>\n targetDate.toMillis() < compareDate?.toMillis()\n\n/\n Check if the first date is after the second date\n /\nexport const isAfter = (targetDate: DateTime, compareDate: DateTime): boolean =>\n targetDate.toMillis() > compareDate?.toMillis()\n\n/\n Check if two dates are the same day (ignoring time)\n /\nexport const isSameDay = (targetDate: DateTime, compareDate: DateTime): boolean =>\n targetDate.hasSame(compareDate, \"day\")\n\n/\n Check if a date is today\n /\nexport const isToday = (dateTime: DateTime): boolean => isSameDay(dateTime, DateTime.local())\n\n/\n Split an array of days into weeks (arrays of 7 days each)\n /\nexport const chunkIntoWeeks = (daysInMonth: DateTime[], size = 7): DateTime[][] => {\n const weeks = []\n for (let i = 0; i < daysInMonth.length; i += size) {\n weeks.push(daysInMonth.slice(i, i + size))\n }\n return weeks\n}\n\n/\n Get the start and end date of the month the provided date is in, with optional min and max limits.\n */\nexport const getMonthStartAndEnd = (\n date: DateTime,\n { min, max }: { min?: DateTime; max?: DateTime } = {},\n): [DateTime, DateTime] => {\n const startOfMonth = date.startOf(\"month\")\n const endOfMonth = date.endOf(\"month\")\n\n return [\n min ? DateTime.max(min, startOfMonth) : startOfMonth,\n max ? DateTime.min(max, endOfMonth) : endOfMonth,\n ]\n}\n"]}
1	+ {"version":3,"file":"dateUtils.js","sourceRoot":"","sources":["../../../src/lib/dateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAc,EAAc,EAAE;IAC3D,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1C,MAAM,WAAW,GAAG,YAAY,CAAC,WAAW,IAAI,EAAE,CAAA,CAAC,mCAAmC;IACtF,MAAM,IAAI,GAAG,EAAE,CAAA;IAEf,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,WAAW,EAAE,GAAG,EAAE,EAAE,CAAC;QAC3C,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QAC/D,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACpB,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,UAAoB,EAAE,WAAqB,EAAW,EAAE,CAC/E,UAAU,CAAC,QAAQ,EAAE,GAAG,WAAW,EAAE,QAAQ,EAAE,CAAA;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,UAAoB,EAAE,WAAqB,EAAW,EAAE,CAC9E,UAAU,CAAC,QAAQ,EAAE,GAAG,WAAW,EAAE,QAAQ,EAAE,CAAA;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,UAAoB,EAAE,WAAqB,EAAW,EAAE,CAChF,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,QAAkB,EAAW,EAAE,CAAC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAA;AAE7F;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAc,EAAE,YAAoB,EAAU,EAAE,CAC3E,CAAC,IAAI,CAAC,OAAO,GAAG,YAAY,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;AAEvC;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,WAAuB,EAAE,IAAI,GAAG,CAAC,EAAgB,EAAE;IAChF,MAAM,KAAK,GAAG,EAAE,CAAA;IAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC;QAClD,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;IAC5C,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,IAAc,EACd,EAAE,GAAG,EAAE,GAAG,KAAyC,EAAE,EAC/B,EAAE;IACxB,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAC1C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAEtC,OAAO;QACL,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY;QACpD,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU;KACjD,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { DateTime } from \"luxon\"\n\n/*\n Get all days in a given month as DateTime objects\n /\nexport const getDaysOfMonth = (date: DateTime): DateTime[] => {\n const startOfMonth = date.startOf(\"month\")\n const daysInMonth = startOfMonth.daysInMonth ?? 31 // fallback to 31 days if undefined\n const days = []\n\n for (let day = 0; day < daysInMonth; day++) {\n const dayDate = startOfMonth.plus({ days: day }).startOf(\"day\")\n days.push(dayDate)\n }\n\n return days\n}\n\n/\n Check if the first date is before the second date\n /\nexport const isBefore = (targetDate: DateTime, compareDate: DateTime): boolean =>\n targetDate.toMillis() < compareDate?.toMillis()\n\n/\n Check if the first date is after the second date\n /\nexport const isAfter = (targetDate: DateTime, compareDate: DateTime): boolean =>\n targetDate.toMillis() > compareDate?.toMillis()\n\n/\n Check if two dates are the same day (ignoring time)\n /\nexport const isSameDay = (targetDate: DateTime, compareDate: DateTime): boolean =>\n targetDate.hasSame(compareDate, \"day\")\n\n/\n Check if a date is today\n /\nexport const isToday = (dateTime: DateTime): boolean => isSameDay(dateTime, DateTime.local())\n\n/\n Where a date sits in a week row that starts on `weekStartsOn`, 0 (Sunday) to\n * 6 (Saturday). Luxon's weekday runs from 1 (Monday) to 7 (Sunday).\n /\nexport const weekPosition = (date: DateTime, weekStartsOn: number): number =>\n (date.weekday - weekStartsOn + 7) % 7\n\n/\n Split an array of days into weeks (arrays of 7 days each)\n /\nexport const chunkIntoWeeks = (daysInMonth: DateTime[], size = 7): DateTime[][] => {\n const weeks = []\n for (let i = 0; i < daysInMonth.length; i += size) {\n weeks.push(daysInMonth.slice(i, i + size))\n }\n return weeks\n}\n\n/\n Get the start and end date of the month the provided date is in, with optional min and max limits.\n */\nexport const getMonthStartAndEnd = (\n date: DateTime,\n { min, max }: { min?: DateTime; max?: DateTime } = {},\n): [DateTime, DateTime] => {\n const startOfMonth = date.startOf(\"month\")\n const endOfMonth = date.endOf(\"month\")\n\n return [\n min ? DateTime.max(min, startOfMonth) : startOfMonth,\n max ? DateTime.min(max, endOfMonth) : endOfMonth,\n ]\n}\n"]}

package/dist/es/lib/helpers.js CHANGED Viewed

@@ -95,9 +95,39 @@ export const toFilterProperty = ({ blur } = {}) => {
     const filters = [blur == null ? null : `blur(${blur}px)`].filter(Boolean);
     return filters.length ? filters.join(" ") : "none";
 };
+/** The `data-*` attributes among a component's props, to pass on to its element. */
+export const dataAttributes = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith("data-")));
 export const preventDefaultHandler = (evt) => {
     evt.preventDefault();
 };
+/**
+ * For an overlay's close auto focus: focus that moved on to something else
+ * while the overlay left stays there instead of going back to the trigger.
+ */
+export const keepMovedFocus = (evt) => {
+    const active = document.activeElement;
+    const movedOut = !!active && active !== document.body && !evt.target?.contains(active);
+    if (movedOut)
+        evt.preventDefault();
+};
+/*
+ * For a row that acts on pointerup, where a press can start on the trigger and
+ * end on the row. A touch acts on its click: the click comes last, and a row
+ * that closed its list at pointerup would send it to what lies behind the list.
+ */
+let touchPressed = false;
+export const pressHandlers = (action) => ({
+    onPointerup: (evt) => {
+        touchPressed = evt.pointerType === "touch" || evt.pointerType === "pen";
+        if (!touchPressed)
+            action();
+    },
+    onClick: () => {
+        if (touchPressed)
+            action();
+        touchPressed = false;
+    },
+});
 /*
  * Intentionally simple selector string. Purposeful exclusions: (for now)
  * - select, because our selects are better recognized as button

package/dist/es/lib/helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/lib/helpers.ts"],"names":[],"mappings":"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","sourcesContent":["// Port of packages/ui/src/lib/helpers.ts with Vue-facing types (events are\n// DOM events, style objects are plain records). Keep the logic identical: the\n// parity tests compare the DOM these produce with the React output.\n\nimport { canUseDOM, hasDocument, hasWindow } from \"./environment.js\"\nimport type { Pretty } from \"./utilityTypes.js\"\n\nexport const prefersReducedMotion = () => {\n if (!hasWindow \|\| typeof window.matchMedia !== \"function\") {\n return false\n }\n\n return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n}\n\nexport const handlePressableMouseEnter = (evt: Event) => {\n const target = evt.currentTarget\n\n // Safely coerce type to HTMLElement so TS is peaceful with `evt.target`\n if (!(target instanceof HTMLElement)) {\n return\n }\n\n const elementWidth = target.offsetWidth\n\n let scale = 0.985\n\n if (elementWidth <= 80) {\n scale = 0.96\n } else if (elementWidth <= 150) {\n scale = 0.97\n } else if (elementWidth <= 220) {\n scale = 0.98\n } else if (elementWidth > 600) {\n scale = 0.995\n }\n\n target.style.setProperty(\"--scale\", scale.toString())\n}\n\ninterface CancelAnimationFrame {\n (): void\n}\n\nexport const waitForAnimationFrame = (\n cb: () => void,\n options?: { frames: number },\n): CancelAnimationFrame => {\n const runAfterTick = () => {\n const id = setTimeout(cb)\n return () => {\n clearTimeout(id)\n }\n }\n\n if (!canUseDOM \|\| typeof window.requestAnimationFrame !== \"function\") {\n return runAfterTick()\n }\n\n const visibilityHidden = hasDocument && document.visibilityState === \"hidden\"\n if (visibilityHidden) {\n return runAfterTick()\n }\n\n let frames = options?.frames ?? 2\n let animationFrame = window.requestAnimationFrame(function recurse() {\n frames -= 1\n if (frames === 0) {\n cb()\n } else {\n animationFrame = window.requestAnimationFrame(recurse)\n }\n })\n\n return () => {\n if (typeof window.cancelAnimationFrame === \"function\") {\n window.cancelAnimationFrame(animationFrame)\n }\n }\n}\n\nexport const toCssVariables = (\n variables: Record<string, string \| number \| undefined>,\n): Record<string, string> => {\n const formattedVariables = Object.keys(variables).reduce(\n (acc, variable) => {\n // Ensure value is truthy\n const value = variables[variable]\n // Accept 0 as a valid value\n if (value \|\| value === 0) {\n // Add the prefix if it wasn't already provided\n const prefix = variable.startsWith(\"--\") ? \"\" : \"--\"\n const formattedValue = typeof value === \"number\" ? `${value}px` : value\n\n acc[`${prefix}${variable}`] = formattedValue\n }\n\n return acc\n },\n {} as Record<string, string>,\n )\n\n // Safe casting because we know we've formatted an object of CSS Variable strings\n return formattedVariables\n}\n\nexport const toAngle = (value: number \| string): string =>\n typeof value === \"number\" ? `${value}deg` : value\n\nexport const toOpacityProperty = (opacity: number): string => String(opacity)\n\nexport const toMsDurationProperty = (duration: number): string => `${duration}ms`\n\nexport const toTransformProperty = ({\n x,\n y,\n scale,\n rotate,\n skewX,\n skewY,\n}: {\n x?: number\n y?: number\n scale?: number\n rotate?: number \| string\n skewX?: number \| string\n skewY?: number \| string\n} = {}): string => {\n const transforms = [\n x == null ? null : `translateX(${x}px)`,\n y == null ? null : `translateY(${y}px)`,\n scale == null ? null : `scale(${scale})`,\n rotate == null ? null : `rotate(${toAngle(rotate)})`,\n skewX == null ? null : `skewX(${toAngle(skewX)})`,\n skewY == null ? null : `skewY(${toAngle(skewY)})`,\n ].filter(Boolean)\n\n return transforms.length ? transforms.join(\" \") : \"none\"\n}\n\nexport const toFilterProperty = ({ blur }: { blur?: number \| undefined } = {}) => {\n // Maybe add more support in the future\n const filters = [blur == null ? null : `blur(${blur}px)`].filter(Boolean)\n\n return filters.length ? filters.join(\" \") : \"none\"\n}\n\nexport const preventDefaultHandler = (evt: Event) => {\n evt.preventDefault()\n}\n\n/\n Intentionally simple selector string. Purposeful exclusions: (for now)\n * - select, because our selects are better recognized as button\n * - unused selectors like iframe, object, .etc.\n * - states like [inert]\n /\nexport const focusableElements = (element: HTMLElement) =>\n element.querySelectorAll<HTMLElement>(\n 'a[href], input:not([disabled]):not([type=\"hidden\"]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex^=\"-\"]), [contenteditable]',\n )\n\nexport const sleep = (ms: number): Promise<void> =>\n new Promise((resolve) => setTimeout(resolve, ms))\n\n/\n Group an array of objects by a property, preserving the first-seen order\n * of each group.\n \n @example\n * groupByOrdered(people, \"team\")\n * // => [ { team: \"infra\", items:[...] }, { team:\"design\", items:[...] }, ... ]\n */\nexport function groupByProperty<T extends object, K extends keyof T, F = T[K]>(\n items: T[],\n key: K,\n format: (raw: T[K], item: T) => F = (raw) => raw as F,\n // Explicit: the inferred `Pretty<...>` is expanded in the published\n // declaration into a form consumers' type checks reject (TS2536)\n): ({ [P in K]: F } & { items: T[] })[] {\n const groups: Pretty<{ [P in K]: F } & { items: T[] }>[] = []\n const indexMap = new Map<unknown, number>() // maps group value -> index in groups array\n\n for (const item of items) {\n const value = format(item[key], item)\n\n // Add to existing group\n const existing = indexMap.get(value)\n if (existing !== undefined) {\n groups[existing].items.push(item)\n continue\n }\n\n // Create new group\n const group = { [key]: value, items: [item] } as { [P in K]: F } & { items: T[] }\n indexMap.set(value, groups.length)\n groups.push(group)\n }\n\n return groups\n}\n"]}
1	+ {"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/lib/helpers.ts"],"names":[],"mappings":"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","sourcesContent":["// Port of packages/ui/src/lib/helpers.ts with Vue-facing types (events are\n// DOM events, style objects are plain records). Keep the logic identical: the\n// parity tests compare the DOM these produce with the React output.\n\nimport { canUseDOM, hasDocument, hasWindow } from \"./environment.js\"\nimport type { Pretty } from \"./utilityTypes.js\"\n\nexport const prefersReducedMotion = () => {\n if (!hasWindow \|\| typeof window.matchMedia !== \"function\") {\n return false\n }\n\n return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n}\n\nexport const handlePressableMouseEnter = (evt: Event) => {\n const target = evt.currentTarget\n\n // Safely coerce type to HTMLElement so TS is peaceful with `evt.target`\n if (!(target instanceof HTMLElement)) {\n return\n }\n\n const elementWidth = target.offsetWidth\n\n let scale = 0.985\n\n if (elementWidth <= 80) {\n scale = 0.96\n } else if (elementWidth <= 150) {\n scale = 0.97\n } else if (elementWidth <= 220) {\n scale = 0.98\n } else if (elementWidth > 600) {\n scale = 0.995\n }\n\n target.style.setProperty(\"--scale\", scale.toString())\n}\n\ninterface CancelAnimationFrame {\n (): void\n}\n\nexport const waitForAnimationFrame = (\n cb: () => void,\n options?: { frames: number },\n): CancelAnimationFrame => {\n const runAfterTick = () => {\n const id = setTimeout(cb)\n return () => {\n clearTimeout(id)\n }\n }\n\n if (!canUseDOM \|\| typeof window.requestAnimationFrame !== \"function\") {\n return runAfterTick()\n }\n\n const visibilityHidden = hasDocument && document.visibilityState === \"hidden\"\n if (visibilityHidden) {\n return runAfterTick()\n }\n\n let frames = options?.frames ?? 2\n let animationFrame = window.requestAnimationFrame(function recurse() {\n frames -= 1\n if (frames === 0) {\n cb()\n } else {\n animationFrame = window.requestAnimationFrame(recurse)\n }\n })\n\n return () => {\n if (typeof window.cancelAnimationFrame === \"function\") {\n window.cancelAnimationFrame(animationFrame)\n }\n }\n}\n\nexport const toCssVariables = (\n variables: Record<string, string \| number \| undefined>,\n): Record<string, string> => {\n const formattedVariables = Object.keys(variables).reduce(\n (acc, variable) => {\n // Ensure value is truthy\n const value = variables[variable]\n // Accept 0 as a valid value\n if (value \|\| value === 0) {\n // Add the prefix if it wasn't already provided\n const prefix = variable.startsWith(\"--\") ? \"\" : \"--\"\n const formattedValue = typeof value === \"number\" ? `${value}px` : value\n\n acc[`${prefix}${variable}`] = formattedValue\n }\n\n return acc\n },\n {} as Record<string, string>,\n )\n\n // Safe casting because we know we've formatted an object of CSS Variable strings\n return formattedVariables\n}\n\nexport const toAngle = (value: number \| string): string =>\n typeof value === \"number\" ? `${value}deg` : value\n\nexport const toOpacityProperty = (opacity: number): string => String(opacity)\n\nexport const toMsDurationProperty = (duration: number): string => `${duration}ms`\n\nexport const toTransformProperty = ({\n x,\n y,\n scale,\n rotate,\n skewX,\n skewY,\n}: {\n x?: number\n y?: number\n scale?: number\n rotate?: number \| string\n skewX?: number \| string\n skewY?: number \| string\n} = {}): string => {\n const transforms = [\n x == null ? null : `translateX(${x}px)`,\n y == null ? null : `translateY(${y}px)`,\n scale == null ? null : `scale(${scale})`,\n rotate == null ? null : `rotate(${toAngle(rotate)})`,\n skewX == null ? null : `skewX(${toAngle(skewX)})`,\n skewY == null ? null : `skewY(${toAngle(skewY)})`,\n ].filter(Boolean)\n\n return transforms.length ? transforms.join(\" \") : \"none\"\n}\n\nexport const toFilterProperty = ({ blur }: { blur?: number \| undefined } = {}) => {\n // Maybe add more support in the future\n const filters = [blur == null ? null : `blur(${blur}px)`].filter(Boolean)\n\n return filters.length ? filters.join(\" \") : \"none\"\n}\n\n/** The `data-` attributes among a component's props, to pass on to its element. /\nexport const dataAttributes = (props: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith(\"data-\")))\n\nexport const preventDefaultHandler = (evt: Event) => {\n evt.preventDefault()\n}\n\n/*\n For an overlay's close auto focus: focus that moved on to something else\n * while the overlay left stays there instead of going back to the trigger.\n /\nexport const keepMovedFocus = (evt: Event) => {\n const active = document.activeElement\n const movedOut = !!active && active !== document.body && !(evt.target as Node \| null)?.contains(active)\n if (movedOut) evt.preventDefault()\n}\n\n/\n * For a row that acts on pointerup, where a press can start on the trigger and\n * end on the row. A touch acts on its click: the click comes last, and a row\n * that closed its list at pointerup would send it to what lies behind the list.\n /\nlet touchPressed = false\n\nexport const pressHandlers = (action: () => void) => ({\n onPointerup: (evt: PointerEvent) => {\n touchPressed = evt.pointerType === \"touch\" \|\| evt.pointerType === \"pen\"\n if (!touchPressed) action()\n },\n onClick: () => {\n if (touchPressed) action()\n touchPressed = false\n },\n})\n\n/\n * Intentionally simple selector string. Purposeful exclusions: (for now)\n * - select, because our selects are better recognized as button\n * - unused selectors like iframe, object, .etc.\n * - states like [inert]\n /\nexport const focusableElements = (element: HTMLElement) =>\n element.querySelectorAll<HTMLElement>(\n 'a[href], input:not([disabled]):not([type=\"hidden\"]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex^=\"-\"]), [contenteditable]',\n )\n\nexport const sleep = (ms: number): Promise<void> =>\n new Promise((resolve) => setTimeout(resolve, ms))\n\n/\n Group an array of objects by a property, preserving the first-seen order\n * of each group.\n \n @example\n * groupByOrdered(people, \"team\")\n * // => [ { team: \"infra\", items:[...] }, { team:\"design\", items:[...] }, ... ]\n */\nexport function groupByProperty<T extends object, K extends keyof T, F = T[K]>(\n items: T[],\n key: K,\n format: (raw: T[K], item: T) => F = (raw) => raw as F,\n // Explicit: the inferred `Pretty<...>` is expanded in the published\n // declaration into a form consumers' type checks reject (TS2536)\n): ({ [P in K]: F } & { items: T[] })[] {\n const groups: Pretty<{ [P in K]: F } & { items: T[] }>[] = []\n const indexMap = new Map<unknown, number>() // maps group value -> index in groups array\n\n for (const item of items) {\n const value = format(item[key], item)\n\n // Add to existing group\n const existing = indexMap.get(value)\n if (existing !== undefined) {\n groups[existing].items.push(item)\n continue\n }\n\n // Create new group\n const group = { [key]: value, items: [item] } as { [P in K]: F } & { items: T[] }\n indexMap.set(value, groups.length)\n groups.push(group)\n }\n\n return groups\n}\n"]}

package/dist/types/components/DateRangePicker/DateRangePicker.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { type PropType } from "vue";
 import type { ControlSize } from "@plexui/styles/types";
 import { type PopoverAlign, type PopoverSide } from "../Popover/index.js";
 import type { DropdownIconType } from "../SelectControl/index.js";
-import { type DateRange, type DateRangeShortcut } from "./types.js";
+import { type DateRange, type DateRangeShortcut, type WeekStart } from "./types.js";
 declare const DateRangePickerComponent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** The selected date range value (`v-model:value`). */
     value: {
@@ -16,6 +16,11 @@ declare const DateRangePickerComponent: import("vue").DefineComponent<import("vu
     max: PropType<DateTime>;
     /** Maximum length of the selectable range in days (inclusive). */
     maxRangeDays: NumberConstructor;
+    /** The day each week starts on, from 0 (Sunday) to 6 (Saturday). @default 0 */
+    weekStartsOn: {
+        type: PropType<WeekStart>;
+        default: number;
+    };
     /** Date range shortcuts for quick selection, shown to the left of the calendar. */
     shortcuts: PropType<DateRangeShortcut[]>;
     /** The preferred side of the trigger to render against when open. @default "bottom" */
@@ -103,6 +108,11 @@ declare const DateRangePickerComponent: import("vue").DefineComponent<import("vu
     max: PropType<DateTime>;
     /** Maximum length of the selectable range in days (inclusive). */
     maxRangeDays: NumberConstructor;
+    /** The day each week starts on, from 0 (Sunday) to 6 (Saturday). @default 0 */
+    weekStartsOn: {
+        type: PropType<WeekStart>;
+        default: number;
+    };
     /** Date range shortcuts for quick selection, shown to the left of the calendar. */
     shortcuts: PropType<DateRangeShortcut[]>;
     /** The preferred side of the trigger to render against when open. @default "bottom" */
@@ -190,6 +200,7 @@ declare const DateRangePickerComponent: import("vue").DefineComponent<import("vu
     clearable: boolean;
     triggerDateFormat: string;
     triggerShowIcon: boolean;
+    weekStartsOn: WeekStart;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export type DateRangePickerProps = InstanceType<typeof DateRangePickerComponent>["$props"];
 /**
@@ -209,6 +220,11 @@ export declare const DateRangePicker: import("vue").DefineComponent<import("vue"
     max: PropType<DateTime>;
     /** Maximum length of the selectable range in days (inclusive). */
     maxRangeDays: NumberConstructor;
+    /** The day each week starts on, from 0 (Sunday) to 6 (Saturday). @default 0 */
+    weekStartsOn: {
+        type: PropType<WeekStart>;
+        default: number;
+    };
     /** Date range shortcuts for quick selection, shown to the left of the calendar. */
     shortcuts: PropType<DateRangeShortcut[]>;
     /** The preferred side of the trigger to render against when open. @default "bottom" */
@@ -296,6 +312,11 @@ export declare const DateRangePicker: import("vue").DefineComponent<import("vue"
     max: PropType<DateTime>;
     /** Maximum length of the selectable range in days (inclusive). */
     maxRangeDays: NumberConstructor;
+    /** The day each week starts on, from 0 (Sunday) to 6 (Saturday). @default 0 */
+    weekStartsOn: {
+        type: PropType<WeekStart>;
+        default: number;
+    };
     /** Date range shortcuts for quick selection, shown to the left of the calendar. */
     shortcuts: PropType<DateRangeShortcut[]>;
     /** The preferred side of the trigger to render against when open. @default "bottom" */
@@ -383,5 +404,6 @@ export declare const DateRangePicker: import("vue").DefineComponent<import("vue"
     clearable: boolean;
     triggerDateFormat: string;
     triggerShowIcon: boolean;
+    weekStartsOn: WeekStart;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export {};

package/dist/types/components/DateRangePicker/context.d.ts CHANGED Viewed

@@ -2,12 +2,13 @@ import type { DateTime } from "luxon";
 import { type InjectionKey } from "vue";
 import type { ControlSize } from "@plexui/styles/types";
 import type { DropdownIconType } from "../SelectControl/index.js";
-import type { DateRange, DateRangeShortcut } from "./types.js";
+import type { DateRange, DateRangeShortcut, WeekStart } from "./types.js";
 export type DateRangeContextValue = {
     readonly value: DateRange | null;
     readonly min?: DateTime;
     readonly max?: DateTime;
     readonly maxRangeDays?: number;
+    readonly weekStartsOn: WeekStart;
     readonly triggerStepperUnit?: "month";
     readonly triggerClassName?: string;
     readonly triggerShowIcon?: boolean;

package/dist/types/components/DateRangePicker/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 export { DateRangePicker, type DateRangePickerProps } from "./DateRangePicker.js";
-export { type DateRange, type DateRangeShortcut } from "./types.js";
+export { type DateRange, type DateRangeShortcut, type WeekStart } from "./types.js";

package/dist/types/components/DateRangePicker/types.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import { type DateTime } from "luxon";
 export type DateRange = [DateTime, DateTime];
+/** The day a week starts on: 0 is Sunday, 6 is Saturday. */
+export type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type DateRangeShortcut = {
     label: string;
     getDateRange: () => DateRange;