@nexdom/uimed-vue 1.3.0-beta.3 → 2.0.0-beta.2

package/AGENTS.md

@@ -128,6 +128,7 @@ CI (`.github/workflows/ci.yml`) runs, in order: commitlint on PR commits, `vp pa
 
 - Component layout: `src/components/<name>/<name>.vue`, `types.ts` for prop/option types, `__tests__/<name>.test.ts` for unit tests. Composables follow the same shape under `src/composables/<name>/`.
 - Public components/composables/types are re-exported from `src/components/index.ts` and `src/composables/index.ts`.
+- Every publicly exported component must use the `U` prefix on its export identifier (e.g., `UButton`, `UMain`), while internal file names and component names remain unprefixed.
 - Use [JSDoc](https://jsdoc.app/about-getting-started) on every method/prop/type intended to be part of the public API — it's the primary documentation surface and supports markdown/code examples.
 - Known workarounds (see CONTRIBUTING.md before touching related config): `stryker-vue-ignorer` patches a Stryker/Vue macro-hoisting issue; `vue-tsc` is used for type-check instead of Vite+'s built-in one due to an oxlint/Vue support gap. Both are meant to be removed once their upstream issues are fixed — don't build further on top of them without checking if they're still needed.
 

package/dist/components.d.ts

@@ -133,11 +133,11 @@ interface NavigationMenuItem {
   action?: () => void;
 }
 //#endregion
-//#region src/components/root/types.d.ts
+//#region src/components/main/types.d.ts
 /**
- * Props exposed by the {@link Root} component.
+ * Props exposed by the {@link Main} component.
  */
-type RootProps = {
+type MainProps = {
   /**
    * Component id to use on automated tests.
    */
@@ -156,25 +156,27 @@ type RootProps = {
   navigationMenu?: NavigationMenuProps;
 };
 //#endregion
-//#region src/components/root/root.vue.d.ts
+//#region src/components/main/main.vue.d.ts
 /**
- * Root component to be placed at the top of the component tree.
+ * Main component to be placed at the top of the component tree.
  *
  * @example
  * ```vue
- * <root>
- *   <!-- uimed-components -->
- * </root>
+ * <template>
+ *  <u-main>
+ *    <!-- uimed-components -->
+ *  </u-main>
+ * </template>
  * ```
  *
- * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/root | Root Guide}
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/main | Main Guide}
  */
-declare const _default$6: typeof __VLS_export$8;
-declare const __VLS_export$8: __VLS_WithSlots$7<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RootProps & {
+declare const _default$4: typeof __VLS_export$9;
+declare const __VLS_export$9: __VLS_WithSlots$7<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<MainProps & {
   notificationsOpen?: boolean;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
   "update:notificationsOpen": (value: boolean) => any;
-}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RootProps & {
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<MainProps & {
   notificationsOpen?: boolean;
 }> & Readonly<{
   "onUpdate:notificationsOpen"?: ((value: boolean) => any) | undefined;
@@ -187,18 +189,18 @@ type __VLS_WithSlots$7<T, S> = T & {
   };
 };
 //#endregion
-//#region src/components/btn/types.d.ts
-type BtnVariant = "primary" | "secondary" | "ghost";
+//#region src/components/button/types.d.ts
+type ButtonVariant = "primary" | "secondary" | "ghost";
 /**
- * Props exposed by the {@link Btn} component.
+ * Props exposed by the {@link Button} component.
  */
-type BtnProps = {
+type ButtonProps = {
   /**
    * Applies a distinct style variation to the button.
    * One of `primary`, `secondary`, or `ghost`.
    * @default "primary"
    */
-  variant?: BtnVariant;
+  variant?: ButtonVariant;
   /**
    * Applies a distinct behavior to the button.
    * One of `button` or `submit`.
@@ -231,23 +233,25 @@ type BtnProps = {
   dataTestid?: string;
 };
 //#endregion
-//#region src/components/btn/btn.vue.d.ts
+//#region src/components/button/button.vue.d.ts
 /**
  * Button component to be used throughout the application.
  *
  * @example
  * ```vue
- * <btn color="danger" @click="onClick">
- *   Confirmar
- * </btn>
+ * <template>
+ *  <u-button color="danger" @click="onClick">
+ *     Confirmar
+ *  </u-button>
+ * </template>
  * ```
  *
- * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/btn | Btn Guide}
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/button | Button Guide}
  */
-declare const _default: typeof __VLS_export$7;
-declare const __VLS_export$7: __VLS_WithSlots$6<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<BtnProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
+declare const _default: typeof __VLS_export$8;
+declare const __VLS_export$8: __VLS_WithSlots$6<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
   click: (event: MouseEvent) => any;
-}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<BtnProps> & Readonly<{
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ButtonProps> & Readonly<{
   onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
@@ -328,13 +332,15 @@ type TextFieldProps = {
  *
  * @example
  * ```vue
- * <text-field label="E-mail" type="email" />
+ * <template>
+ *  <u-text-field label="E-mail" type="email" />
+ * <template>
  * ```
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/text-field | TextField Guide}
  */
-declare const _default$8: typeof __VLS_export$6;
-declare const __VLS_export$6: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
+declare const _default$9: typeof __VLS_export$7;
+declare const __VLS_export$7: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
   modelValue?: string;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
   "update:modelValue": (value: string) => any;
@@ -365,15 +371,17 @@ type ContainerProps = {
  *
  * @example
  * ```vue
- * <container>
- *   <!-- uimed-components -->
- * </container>
+ * <template>
+ *  <u-container>
+ *     <!-- uimed-components -->
+ *  </u-container>
+ * <template>
  * ```
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Container Guide}
  */
-declare const _default$2: typeof __VLS_export$5;
-declare const __VLS_export$5: __VLS_WithSlots$5<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+declare const _default$2: typeof __VLS_export$6;
+declare const __VLS_export$6: __VLS_WithSlots$5<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots$5<T, S> = T & {
@@ -399,17 +407,19 @@ type RowProps = {
  *
  * @example
  * ```vue
- * <container>
- *   <row>
- *     <!-- uimed-column -->
- *   </row>
- * </container>
+ * <template>
+ *   <u-container>
+ *    <u-row>
+ *       <!-- uimed-column -->
+ *     </u-row>
+ *   </u-container>
+ * </template>
  * ```
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
-declare const _default$7: typeof __VLS_export$4;
-declare const __VLS_export$4: __VLS_WithSlots$4<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RowProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+declare const _default$5: typeof __VLS_export$5;
+declare const __VLS_export$5: __VLS_WithSlots$4<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RowProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots$4<T, S> = T & {
@@ -444,19 +454,21 @@ type Cols = "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10"
  *
  * @example
  * ```vue
- * <container>
- *   <row>
- *     <col>
- *       <!-- uimed-components -->
- *     </col>
- *   </row>
- * </container>
+ * <template>
+ *   <u-container>
+ *     <u-row>
+ *       <u-column>
+ *         <!-- uimed-components -->
+ *       </u-column>
+ *     </u-row>
+ *  </u-container>
+ * </template>
  * ```
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Column Guide}
  */
-declare const _default$1: typeof __VLS_export$3;
-declare const __VLS_export$3: __VLS_WithSlots$3<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ColumnProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ColumnProps> & Readonly<{}>, {
+declare const _default$1: typeof __VLS_export$4;
+declare const __VLS_export$4: __VLS_WithSlots$3<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ColumnProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ColumnProps> & Readonly<{}>, {
   cols: "12" | "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11";
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
@@ -467,11 +479,11 @@ type __VLS_WithSlots$3<T, S> = T & {
   };
 };
 //#endregion
-//#region src/components/frm/types.d.ts
+//#region src/components/form/types.d.ts
 /**
- * Props exposed by the {@link Frm} component.
+ * Props exposed by the {@link Form} component.
  */
-type FrmProps = {
+type FormProps = {
   /**
    * Id to set on `form` native element.
    */
@@ -482,24 +494,26 @@ type FrmProps = {
   dataTestid?: string;
 };
 //#endregion
-//#region src/components/frm/frm.vue.d.ts
+//#region src/components/form/form.vue.d.ts
 /**
  * Form component to be used throughout the application.
  *
  * @example
  * ```vue
- * <frm @submit="onSubmit">
- *   <!-- uimed-field-components -->
- *   <!-- uimed-submit-btn-component -->
- * </frm>
+ * <template>
+ *  <u-form @submit="onSubmit">
+ *    <!-- uimed-field-components -->
+ *     <!-- uimed-submit-btn-component -->
+ *  </u-form>
+ * </template>
  * ```
  *
- * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/frm | Form Guide}
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/form | Form Guide}
  */
-declare const _default$5: typeof __VLS_export$2;
-declare const __VLS_export$2: __VLS_WithSlots$2<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<FrmProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
+declare const _default$3: typeof __VLS_export$3;
+declare const __VLS_export$3: __VLS_WithSlots$2<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<FormProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {} & {
   submit: (event: SubmitEvent) => any;
-}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<FrmProps> & Readonly<{
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<FormProps> & Readonly<{
   onSubmit?: ((event: SubmitEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
@@ -510,22 +524,24 @@ type __VLS_WithSlots$2<T, S> = T & {
   };
 };
 //#endregion
-//#region src/components/content/content.vue.d.ts
+//#region src/components/sections/section-content/section-content.vue.d.ts
 /**
  * Proxy component for Vuetify's `v-card-text`, used to structure content
- * displayed inside a {@link ContentSet}.
+ * displayed inside a {@link Section}.
  *
  * @example
  * ```vue
- * <content-set title="Title">
- *   <content>Content</content>
- * </content-set>
+ * <template>
+ *   <u-section title="Title">
+ *     <u-section-content>Content</u-section-content>
+ *   </u-section>
+ * </template>
  * ```
  *
- * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/content-set | ContentSet Guide}
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$3: typeof __VLS_export$1;
-declare const __VLS_export$1: __VLS_WithSlots$1<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{}, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, true, {}, any>, {
+declare const _default$7: typeof __VLS_export$2;
+declare const __VLS_export$2: __VLS_WithSlots$1<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<{}, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, true, {}, any>, {
   default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots$1<T, S> = T & {
@@ -534,20 +550,20 @@ type __VLS_WithSlots$1<T, S> = T & {
   };
 };
 //#endregion
-//#region src/components/content/types.d.ts
-type ContentSetVariant = "primary" | "secondary";
+//#region src/components/sections/section/types.d.ts
+type SectionVariant = "primary" | "secondary";
 /**
- * Props exposed by the {@link ContentSet} component.
+ * Props exposed by the {@link Section} component.
  */
-type ContentSetProps = {
+type SectionProps = {
   /**
-   * Applies a distinct style variation to the content set.
+   * Applies a distinct style variation to the section.
    * One of `primary` or `secondary`.
    * @default "primary"
    */
-  variant?: ContentSetVariant;
+  variant?: SectionVariant;
   /**
-   * Title displayed at the top of the content set.
+   * Title displayed at the top of the section.
    */
   title?: string;
   /**
@@ -555,17 +571,17 @@ type ContentSetProps = {
    */
   subtitle?: string;
   /**
-   * List of actions displayed at the bottom of the content set, inside
+   * List of actions displayed at the bottom of the section, inside
    * `v-card-actions`. When undefined or empty, no actions area is rendered.
    */
-  actions?: ContentSetAction[];
+  actions?: SectionAction[];
   /**
-   * Makes the content set occupy 100% of its parent's width.
+   * Makes the section occupy 100% of its parent's width.
    * @default false
    */
   fullWidth?: boolean;
   /**
-   * Makes the content set occupy 100% of its parent's height.
+   * Makes the section occupy 100% of its parent's height.
    * @default false
    */
   fullHeight?: boolean;
@@ -581,9 +597,9 @@ type ContentSetProps = {
   dataTestid?: string;
 };
 /**
- * A single action rendered inside {@link ContentSet}'s actions area.
+ * A single action rendered inside {@link Section}'s actions area.
  */
-interface ContentSetAction extends BtnProps {
+interface SectionAction extends ButtonProps {
   /**
    * Text displayed on the action button.
    */
@@ -594,22 +610,24 @@ interface ContentSetAction extends BtnProps {
   onClick?: (event: MouseEvent) => void;
 }
 //#endregion
-//#region src/components/content/content-set.vue.d.ts
+//#region src/components/sections/section/section.vue.d.ts
 /**
- * Content set component to group related content and actions, to be used
+ * Section component to group related content and actions, to be used
  * throughout the application.
  *
  * @example
  * ```vue
- * <content-set title="Title" subtitle="Subtitle">
- *   Content
- * </content-set>
+ * <template>
+ *   <u-section title="Title" subtitle="Subtitle">
+ *     Content
+ *   </u-section>
+ * <template>
  * ```
  *
- * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/content-set | ContentSet Guide}
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/section | Section Guide}
  */
-declare const _default$4: typeof __VLS_export;
-declare const __VLS_export: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<ContentSetProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<ContentSetProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+declare const _default$6: typeof __VLS_export$1;
+declare const __VLS_export$1: __VLS_WithSlots<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<SectionProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<SectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {
@@ -618,4 +636,72 @@ type __VLS_WithSlots<T, S> = T & {
   };
 };
 //#endregion
-export { type AppBarProps as AppBarConfig, type AppBarUserProps as AppBarUserConfig, _default as Btn, _default$1 as Column, _default$2 as Container, _default$3 as Content, _default$4 as ContentSet, type ContentSetAction, _default$5 as Frm, type NavigationMenuProps as NavigationMenuConfig, _default$6 as Root, _default$7 as Row, _default$8 as TextField };
+//#region src/components/table/types.d.ts
+/**
+ * Props exposed by the {@link UTable} component.
+ */
+type TableProps = {
+  /**
+   * Optional column headers. When not provided or empty, no `<thead>` is
+   * rendered in horizontal mode. In vertical mode, headers (when non-empty)
+   * are used as labels for rows. When `vertical` is true and `headers` is
+   * `undefined`, the component falls back to horizontal mode (single table,
+   * plain rows). When `vertical` is true and `headers` is an empty array,
+   * vertical mode is still used, but rows are rendered without labels (a
+   * single `<td>` per row).
+   */
+  headers?: string[];
+  /**
+   * Optional rows of data. Each entry is a list of string cell values.
+   * In horizontal mode, each item becomes one `<tr>` with cells as `<td>`.
+   * In vertical mode with headers, renders one `v-table` per item with one `<tr>`
+   * per header (th + td for that item's value). In vertical mode with an empty
+   * `headers` array, renders one `v-table` per item with one `<tr>` per cell
+   * value (a single `<td>`, no `<th>`). No padding or truncation applied —
+   * cells are rendered exactly as provided, even if rows have different lengths.
+   */
+  items?: string[][];
+  /**
+   * Changes table layout when true. When enabled with a non-empty `headers`
+   * array, renders one `v-table` per item in `items`, with each table showing
+   * that item's values vertically (one row per header). When enabled with an
+   * empty `headers` array, still renders one `v-table` per item, but each row
+   * only has the item's value (no header label). When `headers` is
+   * `undefined`, falls back to horizontal layout (single table, plain rows)
+   * regardless of this prop.
+   * @default false
+   */
+  vertical?: boolean;
+  /**
+   * Shows a skeleton loader in place of the table content while data is being
+   * loaded.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component id to use on automated tests. In vertical mode with multiple
+   * items, each table gets a suffixed id: `${dataTestid}-${index}`. With a
+   * single table (non-vertical or vertical with one item), the unsuffixed id
+   * is used. When undefined, no data-testid attribute is set.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/table/table.vue.d.ts
+/**
+ * Component to present data using tables. All content is data-driven via props
+ * — no slots. Supports both horizontal (default) and vertical layouts.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <u-table :headers="['Nome', 'Idade']" :items="[['Ana', '30'], ['Bruno', '25']]" />
+ * </template>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/table | Table Guide}
+ */
+declare const _default$8: typeof __VLS_export;
+declare const __VLS_export: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TableProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<TableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+//#endregion
+export { type AppBarProps as AppBarConfig, type AppBarUserProps as AppBarUserConfig, type NavigationMenuProps as NavigationMenuConfig, type SectionAction, type TableProps, _default as UButton, _default$1 as UColumn, _default$2 as UContainer, _default$3 as UForm, _default$4 as UMain, _default$5 as URow, _default$6 as USection, _default$7 as USectionContent, _default$8 as UTable, _default$9 as UTextField };

package/dist/components.js

@@ -1,6 +1,6 @@
 import { r as useVuetifyColor, t as messages } from "./use-toast-CACuYhK_.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, useModel, withCtx, withModifiers } from "vue";
-import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCol, VContainer, VDivider, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VMain, VMenu, VNavigationDrawer, VRow, VSkeletonLoader, VSnackbarQueue, VTextField } from "vuetify/components";
+import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardText, VCol, VContainer, VDivider, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VMain, VMenu, VNavigationDrawer, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField } from "vuetify/components";
 import { formatDateTime, isEmail, isEmpty, isPhone, isUrl, toPeriodInterval } from "@nexdom/shared/utils";
 //#region src/composables/navigation/use-route-props.ts
 function useRouteProps(route) {
@@ -15,7 +15,7 @@ function isExternalRoute(route) {
 }
 //#endregion
 //#region src/components/app-bar/app-bar.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$1 = { class: "opacity-60" };
+const _hoisted_1$2 = { class: "opacity-60" };
 //#endregion
 //#region src/components/app-bar/app-bar.vue
 var app_bar_default = /* @__PURE__ */ defineComponent({
@@ -139,7 +139,7 @@ var app_bar_default = /* @__PURE__ */ defineComponent({
 									}, createSlots({ _: 2 }, [notification.date ? {
 										name: "append",
 										fn: withCtx(() => [createVNode(unref(VListItemAction), { end: "" }, {
-											default: withCtx(() => [createElementVNode("small", _hoisted_1$1, toDisplayString(formatNotificationDate(notification.date)), 1)]),
+											default: withCtx(() => [createElementVNode("small", _hoisted_1$2, toDisplayString(formatNotificationDate(notification.date)), 1)]),
 											_: 2
 										}, 1024)]),
 										key: "0"
@@ -405,7 +405,7 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/navigation-menu/navigation-menu.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = { class: "px-4 pt-2" };
+const _hoisted_1$1 = { class: "px-4 pt-2" };
 //#endregion
 //#region src/components/navigation-menu/navigation-menu.vue
 var navigation_menu_default = /* @__PURE__ */ defineComponent({
@@ -462,7 +462,7 @@ var navigation_menu_default = /* @__PURE__ */ defineComponent({
 				absolute: "",
 				temporary: ""
 			}, {
-				prepend: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(text_field_default, {
+				prepend: withCtx(() => [createElementVNode("div", _hoisted_1$1, [createVNode(text_field_default, {
 					modelValue: search.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
 					type: "search",
@@ -543,10 +543,10 @@ var toast_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/root/root.vue
-var root_default = /* @__PURE__ */ defineComponent({
+//#region src/components/main/main.vue
+var main_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
-	__name: "root",
+	__name: "main",
 	props: /*@__PURE__*/ mergeModels({
 		dataTestid: {
 			type: String,
@@ -608,31 +608,31 @@ var root_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/composables/btn.ts
-const btnVariantToVuetifyVariant = {
+//#region src/composables/button/button.ts
+const buttonVariantToVuetifyVariant = {
 	primary: "elevated",
 	secondary: "flat",
 	ghost: "outlined"
 };
-function useBtnVariant(variant) {
+function useButtonVariant(variant) {
 	return computed(() => {
 		const variantValue = toValue(variant);
-		return variantValue ? btnVariantToVuetifyVariant[variantValue] : btnVariantToVuetifyVariant.primary;
+		return variantValue ? buttonVariantToVuetifyVariant[variantValue] : buttonVariantToVuetifyVariant.primary;
 	});
 }
-function useBtnType(type) {
+function useButtonType(type) {
 	return computed(() => {
 		return toValue(type) ?? "button";
 	});
 }
-function useBtnForm(form) {
+function useButtonForm(form) {
 	return computed(() => toValue(form));
 }
 //#endregion
-//#region src/components/btn/btn.vue
-var btn_default = /* @__PURE__ */ defineComponent({
+//#region src/components/button/button.vue
+var button_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
-	__name: "btn",
+	__name: "button",
 	props: {
 		variant: {
 			type: String,
@@ -667,10 +667,10 @@ var btn_default = /* @__PURE__ */ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const variant = useBtnVariant(() => props.variant);
+		const variant = useButtonVariant(() => props.variant);
 		const color = useVuetifyColor(() => props.color);
-		const type = useBtnType(() => props.type);
-		const form = useBtnForm(() => props.form);
+		const type = useButtonType(() => props.type);
+		const form = useButtonForm(() => props.form);
 		function onClick(event) {
 			emit("click", event);
 		}
@@ -749,10 +749,10 @@ var column_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/frm/frm.vue
-var frm_default = /* @__PURE__ */ defineComponent({
+//#region src/components/form/form.vue
+var form_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
-	__name: "frm",
+	__name: "form",
 	props: {
 		id: {
 			type: String,
@@ -784,10 +784,10 @@ var frm_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/content/content.vue
-var content_default = /* @__PURE__ */ defineComponent({
+//#region src/components/sections/section-content/section-content.vue
+var section_content_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
-	__name: "content",
+	__name: "section-content",
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VCardText), null, {
@@ -798,22 +798,22 @@ var content_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/composables/content-set.ts
-const contentSetVariantToVuetifyVariant = {
+//#region src/composables/section/section.ts
+const sectionVariantToVuetifyVariant = {
 	primary: "elevated",
 	secondary: "outlined"
 };
-function useContentSetVariant(variant) {
+function useSectionVariant(variant) {
 	return computed(() => {
 		const variantValue = toValue(variant);
-		return variantValue ? contentSetVariantToVuetifyVariant[variantValue] : contentSetVariantToVuetifyVariant.primary;
+		return variantValue ? sectionVariantToVuetifyVariant[variantValue] : sectionVariantToVuetifyVariant.primary;
 	});
 }
 //#endregion
-//#region src/components/content/content-set.vue
-var content_set_default = /* @__PURE__ */ defineComponent({
+//#region src/components/sections/section/section.vue
+var section_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
-	__name: "content-set",
+	__name: "section",
 	props: {
 		variant: {
 			type: String,
@@ -850,7 +850,7 @@ var content_set_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
-		const variant = useContentSetVariant(() => props.variant);
+		const variant = useSectionVariant(() => props.variant);
 		const title = computed(() => props.title || void 0);
 		const subtitle = computed(() => props.subtitle || void 0);
 		const width = computed(() => props.fullWidth ? "100%" : void 0);
@@ -878,7 +878,7 @@ var content_set_default = /* @__PURE__ */ defineComponent({
 						class: "mt-auto"
 					}, {
 						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.actions, ({ label, onClick, ...action }, index) => {
-							return openBlock(), createBlock(btn_default, mergeProps({ key: index }, { ref_for: true }, action, { onClick }), {
+							return openBlock(), createBlock(button_default, mergeProps({ key: index }, { ref_for: true }, action, { onClick }), {
 								default: withCtx(() => [createTextVNode(toDisplayString(label), 1)]),
 								_: 2
 							}, 1040, ["onClick"]);
@@ -905,4 +905,86 @@ var content_set_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { btn_default as Btn, column_default as Column, container_default as Container, content_default as Content, content_set_default as ContentSet, frm_default as Frm, root_default as Root, row_default as Row, text_field_default as TextField };
+//#region src/components/table/table.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { scope: "row" };
+const _hoisted_2 = { key: 0 };
+//#endregion
+//#region src/components/table/table.vue
+var table_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "table",
+	props: {
+		headers: {
+			type: Array,
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		vertical: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const hasHeaders = computed(() => !!props.headers?.length);
+		const itemRows = computed(() => props.items ?? []);
+		const type = computed(() => {
+			if (hasHeaders.value && !props.vertical) return "table-thead, table-tbody";
+			return "table-tbody";
+		});
+		function getVerticalTableTestId(index) {
+			if (!props.dataTestid) return void 0;
+			if (itemRows.value.length === 1) return props.dataTestid;
+			return `${props.dataTestid}-${index}`;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VSkeletonLoader), {
+				loading: props.loading,
+				type: type.value
+			}, {
+				default: withCtx(() => [props.vertical ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(itemRows.value, (item, itemIndex) => {
+					return openBlock(), createBlock(unref(VTable), {
+						key: itemIndex,
+						"data-testid": getVerticalTableTestId(itemIndex)
+					}, {
+						default: withCtx(() => [createElementVNode("tbody", null, [hasHeaders.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.headers, (header, headerIndex) => {
+							return openBlock(), createElementBlock("tr", { key: headerIndex }, [createElementVNode("th", _hoisted_1, toDisplayString(header), 1), createElementVNode("td", null, toDisplayString(item[headerIndex]), 1)]);
+						}), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(item, (cell, cellIndex) => {
+							return openBlock(), createElementBlock("tr", { key: cellIndex }, [createElementVNode("td", null, toDisplayString(cell), 1)]);
+						}), 128))])]),
+						_: 2
+					}, 1032, ["data-testid"]);
+				}), 128)) : (openBlock(), createBlock(unref(VTable), {
+					key: 1,
+					"data-testid": props.dataTestid
+				}, {
+					default: withCtx(() => [hasHeaders.value && !props.vertical ? (openBlock(), createElementBlock("thead", _hoisted_2, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.headers, (header, index) => {
+						return openBlock(), createElementBlock("th", {
+							key: index,
+							scope: "col"
+						}, toDisplayString(header), 1);
+					}), 128))])])) : createCommentVNode("v-if", true), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(itemRows.value, (row, rowIndex) => {
+						return openBlock(), createElementBlock("tr", { key: rowIndex }, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, cellIndex) => {
+							return openBlock(), createElementBlock("td", { key: cellIndex }, toDisplayString(cell), 1);
+						}), 128))]);
+					}), 128))])]),
+					_: 1
+				}, 8, ["data-testid"]))]),
+				_: 1
+			}, 8, ["loading", "type"]);
+		};
+	}
+});
+//#endregion
+export { button_default as UButton, column_default as UColumn, container_default as UContainer, form_default as UForm, main_default as UMain, row_default as URow, section_default as USection, section_content_default as USectionContent, table_default as UTable, text_field_default as UTextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "1.3.0-beta.3",
+  "version": "2.0.0-beta.2",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",