Skip to content

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 combined value is stored as an object with the corresponding numeric fields.

Theme entry: WidgetDuration

Props

NameTypeRequiredDefaultDescription
nameStringundefinedThe widget name; falls back to the field context value when omitted.
labelStringundefinedThe label displayed next to the widget; falls back to the field context value when omitted.
helpStringundefinedHelp text displayed alongside the widget; falls back to the field context value when omitted.
readOnlyBooleanfalseWhether the widget is read-only; falls back to the field context value when omitted.
requiredBooleanundefined, // let the default from field context take overWhether the widget is required; falls back to the field context value when undefined.
modelValueString|Number|Boolean|Array|ObjectundefinedThe widget's bound value (v-model); used only in contextless mode.
fieldToWidgetObject|FunctionnullAdapter that converts the form model value into a value suitable for the widget UI.
widgetToFieldObject|FunctionnullAdapter that converts the widget UI value back into a form model value for validation and submission.
invalidBooleanundefinedManually set the invalid state when not in a field context.
warningBooleanundefinedManually set the warning state when not in a field context.
disabledBooleanfalseWhether the widget is disabled.
disabledFnFunctionnullA function that returns whether the widget should be disabled; takes precedence over the disabled prop.
contextlessBooleanfalseWhen true, the widget ignores any surrounding field or form context and manages its own state.
displayDependenciesArray() => []Field paths whose values the widget needs for display logic; registered with the field context.
themeOverrideString|Object|ArraynullA partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
showDaysbooleanfalseWhen true, renders the days spinner.
showHoursbooleanfalseWhen true, renders the hours spinner.
showMinutesbooleantrueWhen true, renders the minutes spinner.
showSecondsbooleanfalseWhen true, renders the seconds spinner.

Events

NameDescription
update:modelValueEmitted when the widget value changes.

Full event reference

Source

client/lib/widgets/WidgetDuration.vue

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2