WidgetDuration

Overview

A duration input widget that renders separate numeric spinners for days, hours, minutes, and seconds. Each time unit can be shown or hidden independently via props. The value is DRF's duration string ([D ]HH:MM:SS), as a Django DurationField sends and reads it, or with seconds a number of seconds, as DurationSecondsField sends and reads it. The shown units split the value between them, so a duration of two days reads as 48 hours when days are hidden. Clearing a unit while the rest of the value is zero sets the value to null. Entering 0 keeps a zero duration. A negative value, such as Django's -1 23:00:00 for minus one hour, shows a "Negative" segment with a minus sign before the spinners. The spinners show the duration's size, and editing them keeps the value negative.

Theme entry: WidgetDuration

Props

Name	Type	Required	Default	Description
name	String		undefined	The widget name; falls back to the field context value when omitted.
label	String		undefined	The label displayed next to the widget; falls back to the field context value when omitted.
help	String		undefined	Help text displayed alongside the widget; falls back to the field context value when omitted.
readOnly	Boolean		false	Whether the widget is read-only; falls back to the field context value when omitted.
required	Boolean		undefined, // let the default from field context take over	Whether the widget is required; falls back to the field context value when undefined.
modelValue	String|Number|Boolean|Array|Object		undefined	The widget's bound value (v-model); used only in contextless mode.
fieldToWidget	Object|Function		null	Adapter that converts the form model value into a value suitable for the widget UI.
widgetToField	Object|Function		null	Adapter that converts the widget UI value back into a form model value for validation and submission.
invalid	Boolean		undefined	Manually set the invalid state when not in a field context.
warning	Boolean		undefined	Manually set the warning state when not in a field context.
disabled	Boolean		false	Whether the widget is disabled.
disabledFn	Function		null	A function that returns whether the widget should be disabled; takes precedence over the disabled prop.
contextless	Boolean		false	When true, the widget ignores any surrounding field or form context and manages its own state.
displayDependencies	Array		() => []	Field paths whose values the widget needs for display logic; registered with the field context.
themeOverride	Object		null	A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
showDays	boolean		false	When true, renders the days spinner.
showHours	boolean		false	When true, renders the hours spinner.
showMinutes	boolean		true	When true, renders the minutes spinner.
showSeconds	boolean		false	When true, renders the seconds spinner.
seconds	boolean		false	When true, the value is a number of seconds instead of a duration string.

Events

Name	Description
update:modelValue	Emitted when the widget value changes.

Full event reference

Source

client/lib/widgets/WidgetDuration.vue