@plexui/vue 0.1.9 → 0.1.10

package/dist/es/components/Field/Field.js

@@ -112,8 +112,10 @@ const FieldComponent = defineComponent({
         size: String,
         /** Shows a required asterisk after the label. Visual only: no `required` attribute. @default false */
         required: { type: Boolean, default: false },
-        /** Layout direction of label and control. @default "vertical" */
-        orientation: { type: String, default: "vertical" },
+        /** Layout direction of label and control. @default "horizontal" on a `row`, else "vertical" */
+        orientation: String,
+        /** One line of a FieldGroup: label at the start, control at the end. @default false */
+        row: { type: Boolean, default: false },
         /** Overrides the generated id set on the control and the label's `for`. A child's own `id` wins over both. */
         id: String,
         /** Optically aligns the control's text with surrounding content; passed to the control. */
@@ -123,7 +125,8 @@ const FieldComponent = defineComponent({
     setup(props, { attrs, slots }) {
         const generatedId = useId();
         return () => {
-            const { required, orientation, opticallyAlign } = props;
+            const { required, row, opticallyAlign } = props;
+            const orientation = props.orientation ?? (row ? "horizontal" : "vertical");
             const fieldId = props.id || `field-${generatedId}`;
             const labelId = `${fieldId}-label`;
             const description = slots.description ? slots.description() : props.description;
@@ -163,10 +166,12 @@ const FieldComponent = defineComponent({
                 required ? h("span", { "class": s.RequiredIndicator, "aria-hidden": "true" }, "*") : null,
             ]);
             return h("div", {
+                ...(row && attrs),
                 "class": clsx(s.Field, attrs.class),
                 "data-size": size,
                 "data-orientation": orientation,
                 "data-optically-align": opticallyAlign,
+                "data-row": row ? "" : undefined,
             }, [
                 h("div", { class: s.LabelGroup }, [
                     hasLabelAction

package/dist/es/components/Field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/components/Field/Field.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx, { type ClassValue } from \"clsx\"\nimport {\n  Comment,\n  Fragment,\n  Static,\n  Text,\n  camelize,\n  cloneVNode,\n  defineComponent,\n  h,\n  isVNode,\n  useId,\n  type PropType,\n  type SlotsType,\n  type VNode,\n  type VNodeArrayChildren,\n  type VNodeChild,\n} from \"vue\"\nimport type { ControlSize } from \"@plexui/styles/types\"\nimport { FieldError } from \"../FieldError/index.js\"\nimport { hasContent } from \"../../lib/slotContent.js\"\nimport s from \"@plexui/styles/components/Field/Field.module.css\"\n\n// Vue port of packages/ui/src/components/Field/Field.tsx.\n//\n// - `label`, `description` and `errorMessage` take a string prop or a slot of\n//   the same name (the slot wins), like React's ReactNode props.\n// - Children: React accepts an element, which Field clones with the field\n//   props, or a render prop `(fieldProps) => ReactNode`, which it leaves alone.\n//   Both are the default slot here, which receives the field props:\n//   - a slot that reads them (`v-slot=\"fieldProps\"` + `v-bind=\"fieldProps\"`,\n//     `v-slot=\"{ id }\"`, `(fieldProps) => h(...)`) is the render prop: its\n//     content renders as it is.\n//   - a slot that does not read them and holds exactly one element or\n//     component gets it cloned like React's `cloneElement`: `opticallyAlign`\n//     replaces the child's own, the child's own `id` stays and the label's\n//     `for` follows it, `aria-describedby` is joined after the child's own\n//     ids, and an explicit `aria-invalid` on the child wins. Template\n//     comments do not count as children (JSX comments); the\n//     placeholder of a `v-if` that renders nothing does, like `{false}` in a\n//     React children array, so `<A v-if=\"x\" /><Input />` is not cloned.\n//   - anything else (text, several roots, a `v-for` list) renders as it is,\n//     like a React child that is not a single element.\n//   - content a wrapper forwards with `<slot />` counts as its own roots, as\n//     React's `children` passed on to Field are the elements themselves.\n// - As in React only `class` reaches the root element; other attributes are\n//   dropped.\n\nexport type FieldChildProps = {\n  id: string\n  /** The label's id. Bind it to a control that the label's `for` cannot name, such as a Select trigger. */\n  \"aria-labelledby\"?: string\n  \"aria-describedby\"?: string\n  \"aria-invalid\"?: boolean\n  opticallyAlign?: \"start\" | \"end\"\n}\n\ntype Props = Record<string, unknown>\n\nconst CONTROL_SIZES: ReadonlySet<unknown> = new Set([\"3xs\", \"2xs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\", \"3xl\"])\n\n/** The slot props, recording whether the slot read them (the render-prop form). */\nconst trackUse = (target: FieldChildProps) => {\n  const state = { used: false }\n  const proxy = new Proxy(target, {\n    get(object, key, receiver) {\n      state.used = true\n      return Reflect.get(object, key, receiver)\n    },\n    has(object, key) {\n      state.used = true\n      return Reflect.has(object, key)\n    },\n    ownKeys(object) {\n      state.used = true\n      return Reflect.ownKeys(object)\n    },\n    getOwnPropertyDescriptor(object, key) {\n      state.used = true\n      return Reflect.getOwnPropertyDescriptor(object, key)\n    },\n  })\n  return { proxy, state }\n}\n\n/** Like React's `isValidElement` for a slot root: an element or a component. */\nconst isElementVNode = (node: VNode) => {\n  const { type } = node\n  if (type === Fragment || type === Text || type === Comment || type === Static) return false\n  if (typeof type === \"object\" && type !== null && (\"__isTeleport\" in type || \"__isSuspense\" in type)) return false\n  return true\n}\n\n/**\n * Template comments (`<!-- note -->`) are no children, like JSX comments.\n * The empty placeholder of a `v-if` that renders nothing (or of a `false`\n * child) still counts, like `{false}` in a React children array.\n */\nconst isTemplateComment = (node: VNodeArrayChildren[number]) =>\n  isVNode(node) && node.type === Comment && !!node.children && node.children !== \"v-if\"\n\n/**\n * Unwraps content forwarded through a wrapper's `<slot />`: the fragment\n * `renderSlot` creates, keyed `_<slot name>`.\n */\nconst unwrapForwardedSlots = (nodes: VNodeArrayChildren): VNodeArrayChildren =>\n  nodes.flatMap((node) =>\n    isVNode(node) &&\n    node.type === Fragment &&\n    typeof node.key === \"string\" &&\n    node.key.startsWith(\"_\") &&\n    Array.isArray(node.children)\n      ? unwrapForwardedSlots(node.children)\n      : [node],\n  )\n\n/** The one element a non-render-prop slot holds, if it holds exactly one. */\nconst singleElement = (nodes: VNodeArrayChildren): VNode | undefined => {\n  const roots = unwrapForwardedSlots(nodes).filter((node) => !isTemplateComment(node))\n  if (roots.length !== 1) return undefined\n  const [root] = roots\n  return isVNode(root) && isElementVNode(root) ? root : undefined\n}\n\n/** A child prop under its attribute name or its camelCase prop name. */\nconst childProp = (props: Props, name: string) => props[name] ?? props[camelize(name)]\n\n/**\n * `cloneElement(child, fieldProps)` with React Field's merging rules. A child\n * without its own name (`aria-label`, `aria-labelledby`, `label`, a `#label`\n * slot) is also labelled by the field's label, which names triggers `for`\n * cannot reach.\n */\nconst cloneWithFieldProps = (child: VNode, fieldChildProps: FieldChildProps, labelId: string): VNode => {\n  const own: Props = { ...(child.props ?? {}) }\n  const childDescribedBy = childProp(own, \"aria-describedby\") as string | undefined\n  const childInvalid = childProp(own, \"aria-invalid\")\n  const childSlots = child.children\n  const childNamed =\n    childProp(own, \"aria-label\") != null ||\n    childProp(own, \"aria-labelledby\") != null ||\n    own.label != null ||\n    (childSlots != null && typeof childSlots === \"object\" && !Array.isArray(childSlots) && \"label\" in childSlots)\n\n  const overrides: Props = {\n    ...fieldChildProps,\n    // Merge with the child's own associations instead of overwriting them\n    \"aria-describedby\": [childDescribedBy, fieldChildProps[\"aria-describedby\"]].filter(Boolean).join(\" \") || undefined,\n    \"aria-invalid\": childInvalid ?? fieldChildProps[\"aria-invalid\"],\n    ...(!childNamed && { \"aria-labelledby\": labelId }),\n  }\n\n  // One spelling per prop, so the field's value is the one that applies\n  for (const key of Object.keys(overrides)) {\n    for (const spelling of [key, camelize(key), key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)]) {\n      delete own[spelling]\n    }\n  }\n\n  return cloneVNode({ ...child, props: own } as VNode, overrides)\n}\n\nconst FieldComponent = defineComponent({\n  name: \"Field\",\n  inheritAttrs: false,\n  props: {\n    /** Label text for the field (or the `label` slot) */\n    label: String,\n    /** Helper text below the label, linked via `aria-describedby` (or the `description` slot) */\n    description: String,\n    /**\n     * Error message below the control (or the `errorMessage` slot). When set,\n     * the control gets `aria-invalid=\"true\"`. Rendered with FieldError.\n     */\n    errorMessage: String,\n    /** Content at the end of the label row, such as a link that acts on the field (or the `labelAction` slot) */\n    labelAction: String,\n    /** Font size of the label, to match the control's size. @default the child control's `size`, else \"md\" */\n    size: String as PropType<ControlSize>,\n    /** Shows a required asterisk after the label. Visual only: no `required` attribute. @default false */\n    required: { type: Boolean, default: false },\n    /** Layout direction of label and control. @default \"vertical\" */\n    orientation: { type: String as PropType<\"vertical\" | \"horizontal\">, default: \"vertical\" },\n    /** Overrides the generated id set on the control and the label's `for`. A child's own `id` wins over both. */\n    id: String,\n    /** Optically aligns the control's text with surrounding content; passed to the control. */\n    opticallyAlign: String as PropType<\"start\" | \"end\">,\n  },\n  slots: Object as SlotsType<{\n    /** The control. Read the props to render them yourself (React's render prop). */\n    default?: (fieldProps: FieldChildProps) => VNodeChild\n    label?: () => VNodeChild\n    labelAction?: () => VNodeChild\n    description?: () => VNodeChild\n    errorMessage?: () => VNodeChild\n  }>,\n  setup(props, { attrs, slots }) {\n    const generatedId = useId()\n\n    return () => {\n      const { required, orientation, opticallyAlign } = props\n      const fieldId = props.id || `field-${generatedId}`\n      const labelId = `${fieldId}-label`\n\n      const description = slots.description ? slots.description() : props.description\n      const hasDescription = slots.description ? hasContent(description as VNodeArrayChildren) : !!description\n      const errorMessage = slots.errorMessage ? slots.errorMessage() : props.errorMessage\n      const hasError = slots.errorMessage ? hasContent(errorMessage as VNodeArrayChildren) : !!errorMessage\n\n      const descriptionId = hasDescription ? `${fieldId}-description` : undefined\n      const errorId = hasError ? `${fieldId}-error` : undefined\n\n      // Build aria-describedby from description + error IDs\n      const ariaDescribedBy = [descriptionId, errorId].filter(Boolean).join(\" \") || undefined\n      const invalid = hasError\n\n      // Props to inject into the child control\n      const fieldChildProps: FieldChildProps = {\n        \"id\": fieldId,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": invalid || undefined,\n        ...(opticallyAlign && { opticallyAlign }),\n      }\n\n      // Resolve the children\n      let resolvedChildren: VNodeArrayChildren | undefined\n      let childSize: unknown\n      // The control's id, which the label's `for` has to match\n      let controlId = fieldId\n      if (slots.default) {\n        const { proxy, state } = trackUse({ ...fieldChildProps, \"aria-labelledby\": labelId })\n        const nodes = slots.default(proxy) as VNodeArrayChildren\n        const child = state.used ? undefined : singleElement(nodes)\n        childSize = child?.props?.size\n        controlId = (child?.props?.id as string | undefined) || fieldId\n        resolvedChildren = child ? [cloneWithFieldProps(child, { ...fieldChildProps, id: controlId }, labelId)] : nodes\n      }\n      const size = props.size ?? (CONTROL_SIZES.has(childSize) ? (childSize as ControlSize) : \"md\")\n\n      const labelAction = slots.labelAction ? slots.labelAction() : props.labelAction\n      const hasLabelAction = slots.labelAction ? hasContent(labelAction as VNodeArrayChildren) : !!labelAction\n      const labelElement = h(\"label\", { class: s.Label, id: labelId, for: controlId }, [\n        slots.label ? slots.label() : props.label,\n        required ? h(\"span\", { \"class\": s.RequiredIndicator, \"aria-hidden\": \"true\" }, \"*\") : null,\n      ])\n\n      return h(\n        \"div\",\n        {\n          \"class\": clsx(s.Field, attrs.class as ClassValue),\n          \"data-size\": size,\n          \"data-orientation\": orientation,\n          \"data-optically-align\": opticallyAlign,\n        },\n        [\n          h(\"div\", { class: s.LabelGroup }, [\n            hasLabelAction\n              ? h(\"div\", { class: s.LabelRow }, [labelElement, h(\"div\", { class: s.LabelAction }, [labelAction as VNodeChild])])\n              : labelElement,\n            hasDescription ? h(\"div\", { class: s.Description, id: descriptionId }, [description as VNodeChild]) : null,\n          ]),\n          h(\"div\", { class: s.Content }, [\n            h(\"div\", { class: s.Control }, resolvedChildren),\n            hasError ? h(FieldError, { id: errorId }, () => [errorMessage as VNodeChild]) : null,\n          ]),\n        ],\n      )\n    }\n  },\n})\n\ntype FieldOwnProps = InstanceType<typeof FieldComponent>[\"$props\"]\n\n/** Field props; `class` reaches the root element. */\nexport type FieldProps = FieldOwnProps & { class?: ClassValue }\n\n/** Form field wrapper with label, description, error and accessibility linking. */\nexport const Field = FieldComponent as typeof FieldComponent & { new (): { $props: FieldProps } }\n"]}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/components/Field/Field.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx, { type ClassValue } from \"clsx\"\nimport {\n  Comment,\n  Fragment,\n  Static,\n  Text,\n  camelize,\n  cloneVNode,\n  defineComponent,\n  h,\n  isVNode,\n  useId,\n  type PropType,\n  type SlotsType,\n  type VNode,\n  type VNodeArrayChildren,\n  type VNodeChild,\n} from \"vue\"\nimport type { ControlSize } from \"@plexui/styles/types\"\nimport { FieldError } from \"../FieldError/index.js\"\nimport { hasContent } from \"../../lib/slotContent.js\"\nimport s from \"@plexui/styles/components/Field/Field.module.css\"\n\n// Vue port of packages/ui/src/components/Field/Field.tsx.\n//\n// - `label`, `description` and `errorMessage` take a string prop or a slot of\n//   the same name (the slot wins), like React's ReactNode props.\n// - Children: React accepts an element, which Field clones with the field\n//   props, or a render prop `(fieldProps) => ReactNode`, which it leaves alone.\n//   Both are the default slot here, which receives the field props:\n//   - a slot that reads them (`v-slot=\"fieldProps\"` + `v-bind=\"fieldProps\"`,\n//     `v-slot=\"{ id }\"`, `(fieldProps) => h(...)`) is the render prop: its\n//     content renders as it is.\n//   - a slot that does not read them and holds exactly one element or\n//     component gets it cloned like React's `cloneElement`: `opticallyAlign`\n//     replaces the child's own, the child's own `id` stays and the label's\n//     `for` follows it, `aria-describedby` is joined after the child's own\n//     ids, and an explicit `aria-invalid` on the child wins. Template\n//     comments do not count as children (JSX comments); the\n//     placeholder of a `v-if` that renders nothing does, like `{false}` in a\n//     React children array, so `<A v-if=\"x\" /><Input />` is not cloned.\n//   - anything else (text, several roots, a `v-for` list) renders as it is,\n//     like a React child that is not a single element.\n//   - content a wrapper forwards with `<slot />` counts as its own roots, as\n//     React's `children` passed on to Field are the elements themselves.\n// - As in React only `class` reaches the root element; other attributes are\n//   dropped. On a `row` they all reach it, as React's rest props do.\n\nexport type FieldChildProps = {\n  id: string\n  /** The label's id. Bind it to a control that the label's `for` cannot name, such as a Select trigger. */\n  \"aria-labelledby\"?: string\n  \"aria-describedby\"?: string\n  \"aria-invalid\"?: boolean\n  opticallyAlign?: \"start\" | \"end\"\n}\n\ntype Props = Record<string, unknown>\n\nconst CONTROL_SIZES: ReadonlySet<unknown> = new Set([\"3xs\", \"2xs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\", \"3xl\"])\n\n/** The slot props, recording whether the slot read them (the render-prop form). */\nconst trackUse = (target: FieldChildProps) => {\n  const state = { used: false }\n  const proxy = new Proxy(target, {\n    get(object, key, receiver) {\n      state.used = true\n      return Reflect.get(object, key, receiver)\n    },\n    has(object, key) {\n      state.used = true\n      return Reflect.has(object, key)\n    },\n    ownKeys(object) {\n      state.used = true\n      return Reflect.ownKeys(object)\n    },\n    getOwnPropertyDescriptor(object, key) {\n      state.used = true\n      return Reflect.getOwnPropertyDescriptor(object, key)\n    },\n  })\n  return { proxy, state }\n}\n\n/** Like React's `isValidElement` for a slot root: an element or a component. */\nconst isElementVNode = (node: VNode) => {\n  const { type } = node\n  if (type === Fragment || type === Text || type === Comment || type === Static) return false\n  if (typeof type === \"object\" && type !== null && (\"__isTeleport\" in type || \"__isSuspense\" in type)) return false\n  return true\n}\n\n/**\n * Template comments (`<!-- note -->`) are no children, like JSX comments.\n * The empty placeholder of a `v-if` that renders nothing (or of a `false`\n * child) still counts, like `{false}` in a React children array.\n */\nconst isTemplateComment = (node: VNodeArrayChildren[number]) =>\n  isVNode(node) && node.type === Comment && !!node.children && node.children !== \"v-if\"\n\n/**\n * Unwraps content forwarded through a wrapper's `<slot />`: the fragment\n * `renderSlot` creates, keyed `_<slot name>`.\n */\nconst unwrapForwardedSlots = (nodes: VNodeArrayChildren): VNodeArrayChildren =>\n  nodes.flatMap((node) =>\n    isVNode(node) &&\n    node.type === Fragment &&\n    typeof node.key === \"string\" &&\n    node.key.startsWith(\"_\") &&\n    Array.isArray(node.children)\n      ? unwrapForwardedSlots(node.children)\n      : [node],\n  )\n\n/** The one element a non-render-prop slot holds, if it holds exactly one. */\nconst singleElement = (nodes: VNodeArrayChildren): VNode | undefined => {\n  const roots = unwrapForwardedSlots(nodes).filter((node) => !isTemplateComment(node))\n  if (roots.length !== 1) return undefined\n  const [root] = roots\n  return isVNode(root) && isElementVNode(root) ? root : undefined\n}\n\n/** A child prop under its attribute name or its camelCase prop name. */\nconst childProp = (props: Props, name: string) => props[name] ?? props[camelize(name)]\n\n/**\n * `cloneElement(child, fieldProps)` with React Field's merging rules. A child\n * without its own name (`aria-label`, `aria-labelledby`, `label`, a `#label`\n * slot) is also labelled by the field's label, which names triggers `for`\n * cannot reach.\n */\nconst cloneWithFieldProps = (child: VNode, fieldChildProps: FieldChildProps, labelId: string): VNode => {\n  const own: Props = { ...(child.props ?? {}) }\n  const childDescribedBy = childProp(own, \"aria-describedby\") as string | undefined\n  const childInvalid = childProp(own, \"aria-invalid\")\n  const childSlots = child.children\n  const childNamed =\n    childProp(own, \"aria-label\") != null ||\n    childProp(own, \"aria-labelledby\") != null ||\n    own.label != null ||\n    (childSlots != null && typeof childSlots === \"object\" && !Array.isArray(childSlots) && \"label\" in childSlots)\n\n  const overrides: Props = {\n    ...fieldChildProps,\n    // Merge with the child's own associations instead of overwriting them\n    \"aria-describedby\": [childDescribedBy, fieldChildProps[\"aria-describedby\"]].filter(Boolean).join(\" \") || undefined,\n    \"aria-invalid\": childInvalid ?? fieldChildProps[\"aria-invalid\"],\n    ...(!childNamed && { \"aria-labelledby\": labelId }),\n  }\n\n  // One spelling per prop, so the field's value is the one that applies\n  for (const key of Object.keys(overrides)) {\n    for (const spelling of [key, camelize(key), key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)]) {\n      delete own[spelling]\n    }\n  }\n\n  return cloneVNode({ ...child, props: own } as VNode, overrides)\n}\n\nconst FieldComponent = defineComponent({\n  name: \"Field\",\n  inheritAttrs: false,\n  props: {\n    /** Label text for the field (or the `label` slot) */\n    label: String,\n    /** Helper text below the label, linked via `aria-describedby` (or the `description` slot) */\n    description: String,\n    /**\n     * Error message below the control (or the `errorMessage` slot). When set,\n     * the control gets `aria-invalid=\"true\"`. Rendered with FieldError.\n     */\n    errorMessage: String,\n    /** Content at the end of the label row, such as a link that acts on the field (or the `labelAction` slot) */\n    labelAction: String,\n    /** Font size of the label, to match the control's size. @default the child control's `size`, else \"md\" */\n    size: String as PropType<ControlSize>,\n    /** Shows a required asterisk after the label. Visual only: no `required` attribute. @default false */\n    required: { type: Boolean, default: false },\n    /** Layout direction of label and control. @default \"horizontal\" on a `row`, else \"vertical\" */\n    orientation: String as PropType<\"vertical\" | \"horizontal\">,\n    /** One line of a FieldGroup: label at the start, control at the end. @default false */\n    row: { type: Boolean, default: false },\n    /** Overrides the generated id set on the control and the label's `for`. A child's own `id` wins over both. */\n    id: String,\n    /** Optically aligns the control's text with surrounding content; passed to the control. */\n    opticallyAlign: String as PropType<\"start\" | \"end\">,\n  },\n  slots: Object as SlotsType<{\n    /** The control. Read the props to render them yourself (React's render prop). */\n    default?: (fieldProps: FieldChildProps) => VNodeChild\n    label?: () => VNodeChild\n    labelAction?: () => VNodeChild\n    description?: () => VNodeChild\n    errorMessage?: () => VNodeChild\n  }>,\n  setup(props, { attrs, slots }) {\n    const generatedId = useId()\n\n    return () => {\n      const { required, row, opticallyAlign } = props\n      const orientation = props.orientation ?? (row ? \"horizontal\" : \"vertical\")\n      const fieldId = props.id || `field-${generatedId}`\n      const labelId = `${fieldId}-label`\n\n      const description = slots.description ? slots.description() : props.description\n      const hasDescription = slots.description ? hasContent(description as VNodeArrayChildren) : !!description\n      const errorMessage = slots.errorMessage ? slots.errorMessage() : props.errorMessage\n      const hasError = slots.errorMessage ? hasContent(errorMessage as VNodeArrayChildren) : !!errorMessage\n\n      const descriptionId = hasDescription ? `${fieldId}-description` : undefined\n      const errorId = hasError ? `${fieldId}-error` : undefined\n\n      // Build aria-describedby from description + error IDs\n      const ariaDescribedBy = [descriptionId, errorId].filter(Boolean).join(\" \") || undefined\n      const invalid = hasError\n\n      // Props to inject into the child control\n      const fieldChildProps: FieldChildProps = {\n        \"id\": fieldId,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": invalid || undefined,\n        ...(opticallyAlign && { opticallyAlign }),\n      }\n\n      // Resolve the children\n      let resolvedChildren: VNodeArrayChildren | undefined\n      let childSize: unknown\n      // The control's id, which the label's `for` has to match\n      let controlId = fieldId\n      if (slots.default) {\n        const { proxy, state } = trackUse({ ...fieldChildProps, \"aria-labelledby\": labelId })\n        const nodes = slots.default(proxy) as VNodeArrayChildren\n        const child = state.used ? undefined : singleElement(nodes)\n        childSize = child?.props?.size\n        controlId = (child?.props?.id as string | undefined) || fieldId\n        resolvedChildren = child ? [cloneWithFieldProps(child, { ...fieldChildProps, id: controlId }, labelId)] : nodes\n      }\n      const size = props.size ?? (CONTROL_SIZES.has(childSize) ? (childSize as ControlSize) : \"md\")\n\n      const labelAction = slots.labelAction ? slots.labelAction() : props.labelAction\n      const hasLabelAction = slots.labelAction ? hasContent(labelAction as VNodeArrayChildren) : !!labelAction\n      const labelElement = h(\"label\", { class: s.Label, id: labelId, for: controlId }, [\n        slots.label ? slots.label() : props.label,\n        required ? h(\"span\", { \"class\": s.RequiredIndicator, \"aria-hidden\": \"true\" }, \"*\") : null,\n      ])\n\n      return h(\n        \"div\",\n        {\n          ...(row && attrs),\n          \"class\": clsx(s.Field, attrs.class as ClassValue),\n          \"data-size\": size,\n          \"data-orientation\": orientation,\n          \"data-optically-align\": opticallyAlign,\n          \"data-row\": row ? \"\" : undefined,\n        },\n        [\n          h(\"div\", { class: s.LabelGroup }, [\n            hasLabelAction\n              ? h(\"div\", { class: s.LabelRow }, [labelElement, h(\"div\", { class: s.LabelAction }, [labelAction as VNodeChild])])\n              : labelElement,\n            hasDescription ? h(\"div\", { class: s.Description, id: descriptionId }, [description as VNodeChild]) : null,\n          ]),\n          h(\"div\", { class: s.Content }, [\n            h(\"div\", { class: s.Control }, resolvedChildren),\n            hasError ? h(FieldError, { id: errorId }, () => [errorMessage as VNodeChild]) : null,\n          ]),\n        ],\n      )\n    }\n  },\n})\n\ntype FieldOwnProps = InstanceType<typeof FieldComponent>[\"$props\"]\n\n/** Field props; `class` reaches the root element. */\nexport type FieldProps = FieldOwnProps & { class?: ClassValue }\n\n/** Form field wrapper with label, description, error and accessibility linking. */\nexport const Field = FieldComponent as typeof FieldComponent & { new (): { $props: FieldProps } }\n"]}

package/dist/es/components/FieldGroup/FieldGroup.js

@@ -0,0 +1,54 @@
+import clsx, {} from "clsx";
+import { defineComponent, h, useId } from "vue";
+import { hasContent } from "../../lib/slotContent.js";
+import s from "@plexui/styles/components/FieldGroup/FieldGroup.module.css";
+// Vue port of packages/ui/src/components/FieldGroup/FieldGroup.tsx.
+//
+// - `title` and `description` take a string prop or a slot of the same name,
+//   like React's ReactNode props. `action` and `footer` are slots here.
+// - Attributes reach the root `section`, as React's rest props do.
+const FieldGroupComponent = defineComponent({
+    name: "FieldGroup",
+    inheritAttrs: false,
+    props: {
+        /** Heading over the block (or the `title` slot); it names the group */
+        title: String,
+        /** Line under the title (or the `description` slot) */
+        description: String,
+        /** Class for the block that holds the rows */
+        bodyClass: [String, Array, Object],
+    },
+    slots: Object,
+    setup(props, { attrs, slots }) {
+        const titleId = `field-group-${useId()}`;
+        return () => {
+            const title = slots.title ? slots.title() : props.title;
+            const hasTitle = slots.title ? hasContent(title) : !!title;
+            const description = slots.description ? slots.description() : props.description;
+            const hasDescription = slots.description ? hasContent(description) : !!description;
+            const action = slots.action?.();
+            const hasAction = !!action && hasContent(action);
+            return h("section", {
+                "role": "group",
+                "aria-labelledby": hasTitle ? titleId : undefined,
+                ...attrs,
+                "class": clsx(s.FieldGroup, attrs.class),
+            }, [
+                hasTitle || hasDescription || hasAction
+                    ? h("div", { class: s.Header }, [
+                        h("div", { class: s.HeaderText }, [
+                            hasTitle ? h("h2", { class: s.Title, id: titleId }, [title]) : null,
+                            hasDescription ? h("p", { class: s.Description }, [description]) : null,
+                        ]),
+                        hasAction ? action : null,
+                    ])
+                    : null,
+                h("div", { class: clsx(s.Body, props.bodyClass) }, [slots.default?.()]),
+                slots.footer?.(),
+            ]);
+        };
+    },
+});
+/** A titled block of rows: `Field row` lines with hairlines between them. */
+export const FieldGroup = FieldGroupComponent;
+//# sourceMappingURL=FieldGroup.js.map

package/dist/es/components/FieldGroup/FieldGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../../src/components/FieldGroup/FieldGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx, { type ClassValue } from \"clsx\"\nimport { defineComponent, h, useId, type PropType, type SlotsType, type VNodeArrayChildren, type VNodeChild } from \"vue\"\nimport { hasContent } from \"../../lib/slotContent.js\"\nimport s from \"@plexui/styles/components/FieldGroup/FieldGroup.module.css\"\n\n// Vue port of packages/ui/src/components/FieldGroup/FieldGroup.tsx.\n//\n// - `title` and `description` take a string prop or a slot of the same name,\n//   like React's ReactNode props. `action` and `footer` are slots here.\n// - Attributes reach the root `section`, as React's rest props do.\n\nconst FieldGroupComponent = defineComponent({\n  name: \"FieldGroup\",\n  inheritAttrs: false,\n  props: {\n    /** Heading over the block (or the `title` slot); it names the group */\n    title: String,\n    /** Line under the title (or the `description` slot) */\n    description: String,\n    /** Class for the block that holds the rows */\n    bodyClass: [String, Array, Object] as PropType<ClassValue>,\n  },\n  slots: Object as SlotsType<{\n    /** The rows: `Field row`, or rows of your own. */\n    default?: () => VNodeChild\n    title?: () => VNodeChild\n    description?: () => VNodeChild\n    /** Content at the end of the header, such as a button */\n    action?: () => VNodeChild\n    /** Content under the block, such as a note */\n    footer?: () => VNodeChild\n  }>,\n  setup(props, { attrs, slots }) {\n    const titleId = `field-group-${useId()}`\n\n    return () => {\n      const title = slots.title ? slots.title() : props.title\n      const hasTitle = slots.title ? hasContent(title as VNodeArrayChildren) : !!title\n      const description = slots.description ? slots.description() : props.description\n      const hasDescription = slots.description ? hasContent(description as VNodeArrayChildren) : !!description\n      const action = slots.action?.()\n      const hasAction = !!action && hasContent(action as VNodeArrayChildren)\n\n      return h(\n        \"section\",\n        {\n          \"role\": \"group\",\n          \"aria-labelledby\": hasTitle ? titleId : undefined,\n          ...attrs,\n          \"class\": clsx(s.FieldGroup, attrs.class as ClassValue),\n        },\n        [\n          hasTitle || hasDescription || hasAction\n            ? h(\"div\", { class: s.Header }, [\n                h(\"div\", { class: s.HeaderText }, [\n                  hasTitle ? h(\"h2\", { class: s.Title, id: titleId }, [title as VNodeChild]) : null,\n                  hasDescription ? h(\"p\", { class: s.Description }, [description as VNodeChild]) : null,\n                ]),\n                hasAction ? action : null,\n              ])\n            : null,\n          h(\"div\", { class: clsx(s.Body, props.bodyClass) }, [slots.default?.()]),\n          slots.footer?.(),\n        ],\n      )\n    }\n  },\n})\n\ntype FieldGroupOwnProps = InstanceType<typeof FieldGroupComponent>[\"$props\"]\n\n/** FieldGroup props; attributes reach the root element. */\nexport type FieldGroupProps = FieldGroupOwnProps & { class?: ClassValue }\n\n/** A titled block of rows: `Field row` lines with hairlines between them. */\nexport const FieldGroup = FieldGroupComponent as typeof FieldGroupComponent & { new (): { $props: FieldGroupProps } }\n"]}

package/dist/es/components/FieldGroup/index.js

@@ -0,0 +1,2 @@
+export { FieldGroup } from "./FieldGroup.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/FieldGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/FieldGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAA","sourcesContent":["export { FieldGroup, type FieldGroupProps } from \"./FieldGroup.js\"\n"]}

package/dist/types/components/Field/Field.d.ts

@@ -28,10 +28,12 @@ declare const FieldComponent: import("vue").DefineComponent<import("vue").Extrac
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Layout direction of label and control. @default "vertical" */
-    orientation: {
-        type: PropType<"vertical" | "horizontal">;
-        default: string;
+    /** Layout direction of label and control. @default "horizontal" on a `row`, else "vertical" */
+    orientation: PropType<"vertical" | "horizontal">;
+    /** One line of a FieldGroup: label at the start, control at the end. @default false */
+    row: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     /** Overrides the generated id set on the control and the label's `for`. A child's own `id` wins over both. */
     id: StringConstructor;
@@ -58,10 +60,12 @@ declare const FieldComponent: import("vue").DefineComponent<import("vue").Extrac
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Layout direction of label and control. @default "vertical" */
-    orientation: {
-        type: PropType<"vertical" | "horizontal">;
-        default: string;
+    /** Layout direction of label and control. @default "horizontal" on a `row`, else "vertical" */
+    orientation: PropType<"vertical" | "horizontal">;
+    /** One line of a FieldGroup: label at the start, control at the end. @default false */
+    row: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     /** Overrides the generated id set on the control and the label's `for`. A child's own `id` wins over both. */
     id: StringConstructor;
@@ -69,7 +73,7 @@ declare const FieldComponent: import("vue").DefineComponent<import("vue").Extrac
     opticallyAlign: PropType<"start" | "end">;
 }>> & Readonly<{}>, {
     required: boolean;
-    orientation: "vertical" | "horizontal";
+    row: boolean;
 }, SlotsType<{
     /** The control. Read the props to render them yourself (React's render prop). */
     default?: (fieldProps: FieldChildProps) => VNodeChild;

package/dist/types/components/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,40 @@
+import { type ClassValue } from "clsx";
+import { type PropType, type SlotsType, type VNodeChild } from "vue";
+declare const FieldGroupComponent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Heading over the block (or the `title` slot); it names the group */
+    title: StringConstructor;
+    /** Line under the title (or the `description` slot) */
+    description: StringConstructor;
+    /** Class for the block that holds the rows */
+    bodyClass: PropType<ClassValue>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Heading over the block (or the `title` slot); it names the group */
+    title: StringConstructor;
+    /** Line under the title (or the `description` slot) */
+    description: StringConstructor;
+    /** Class for the block that holds the rows */
+    bodyClass: PropType<ClassValue>;
+}>> & Readonly<{}>, {}, SlotsType<{
+    /** The rows: `Field row`, or rows of your own. */
+    default?: () => VNodeChild;
+    title?: () => VNodeChild;
+    description?: () => VNodeChild;
+    /** Content at the end of the header, such as a button */
+    action?: () => VNodeChild;
+    /** Content under the block, such as a note */
+    footer?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type FieldGroupOwnProps = InstanceType<typeof FieldGroupComponent>["$props"];
+/** FieldGroup props; attributes reach the root element. */
+export type FieldGroupProps = FieldGroupOwnProps & {
+    class?: ClassValue;
+};
+/** A titled block of rows: `Field row` lines with hairlines between them. */
+export declare const FieldGroup: typeof FieldGroupComponent & {
+    new (): {
+        $props: FieldGroupProps;
+    };
+};
+export {};

package/dist/types/components/FieldGroup/index.d.ts

@@ -0,0 +1 @@
+export { FieldGroup, type FieldGroupProps } from "./FieldGroup.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/vue",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Plex UI components for Vue 3, built on Reka UI and the shared @plexui/styles CSS",
   "type": "module",
   "license": "MIT",