TimeField
Source: client/lib/theme/vueda-tailwind/controls/index.js
The input-shell variant for editable time segments (hour / minute, plus optional second / period). See also: DateField.root; identical shell and size-tier recipe, only the segment set inside differs.
Vue component: TimeField
| Slot | Default classes | Description |
|---|---|---|
| root | callback | The input-shell variant for editable time segments (hour / minute, plus optional second / period). See also: DateField.root; identical shell and size-tier recipe, only the segment set inside differs. |
root
The input-shell variant for editable time segments (hour / minute, plus optional second / period). See also: DateField.root; identical shell and size-tier recipe, only the segment set inside differs.
Callback:
javascript
({ size }) => ({
class: [
// Shell and surface.
"flex w-full items-center rounded-vueda-field field-line bg-field hover:bg-field-hover text-sm transition-shadow",
// Focus, read-only, and disabled states.
"focus-within:hairline-ring focus-within:focus-ring-shadow",
// Disabled: an inert slab, not a faded field. The state is a data attribute on a
// wrapper element, which the `disabled:` variant (`:disabled`) never matches.
"data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed",
"data-[disabled]:bg-disabled data-[disabled]:text-disabled-foreground data-[disabled]:hairline-border",
"data-[readonly]:bg-transparent data-[readonly]:hover:bg-transparent data-[readonly]:hairline-border",
"data-[warning=true]:not-aria-invalid:hairline-warning",
"aria-invalid:hairline-destructive focus-within:aria-invalid:focus-ring-shadow-destructive",
// Size classes.
{
"h-vueda-control px-vueda-control-px": !size || size === "default",
"h-vueda-control-sm px-vueda-control-px-sm": size === "sm",
"h-vueda-control-lg px-vueda-control-px-lg": size === "lg",
},
],
})Source: client/lib/theme/vueda-tailwind/controls/TimeField.theme.js:17