@nexdom/uimed-vue 2.0.0-beta.8 → 2.0.0

package/dist/components/sections/section/section.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,108 @@
+import { useFullHeight, useFullWidth } from "../../../composables/dimensions/dimensions.js";
+import skeleton_loader_default from "../../skeleton-loader/skeleton-loader.js";
+import button_default from "../../button/button.js";
+import { useSectionTextAlign, useSectionVariant } from "../../../composables/section/section.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { VCard, VCardActions } from "vuetify/components";
+var section_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "section",
+	props: {
+		variant: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		subtitle: {
+			type: String,
+			required: false
+		},
+		textAlign: {
+			type: String,
+			required: false
+		},
+		actions: {
+			type: Array,
+			required: false
+		},
+		fullWidth: {
+			type: Boolean,
+			required: false
+		},
+		fullHeight: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const variant = useSectionVariant(() => props.variant);
+		const textAlignClasses = useSectionTextAlign(() => props.textAlign);
+		const title = computed(() => props.title || void 0);
+		const subtitle = computed(() => props.subtitle || void 0);
+		const widthClass = useFullWidth(() => props.fullWidth);
+		const heightClass = useFullHeight(() => props.fullHeight);
+		const showActions = computed(() => !!props.actions?.length);
+		const skeletonType = computed(() => showActions.value ? "image, actions" : "image");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(skeleton_loader_default, {
+				loading: props.loading,
+				type: skeletonType.value,
+				"full-width": props.fullWidth,
+				"full-height": props.fullHeight
+			}, {
+				default: withCtx(() => [createCommentVNode(" The card and its actions have no alignment props, so `textAlign` uses utility classes "), createVNode(unref(VCard), {
+					title: title.value,
+					subtitle: subtitle.value,
+					variant: unref(variant),
+					"data-testid": props.dataTestid,
+					class: normalizeClass([
+						"d-flex flex-column",
+						unref(widthClass),
+						unref(heightClass),
+						unref(textAlignClasses).content
+					])
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default"), showActions.value ? (openBlock(), createBlock(unref(VCardActions), {
+						key: 0,
+						class: normalizeClass(["mt-auto", unref(textAlignClasses).actions])
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(props.actions, ({ label, onClick, ...action }, index) => {
+							return openBlock(), createBlock(button_default, mergeProps({ key: index }, { ref_for: true }, action, { onClick }), {
+								default: withCtx(() => [createTextVNode(toDisplayString(label), 1)]),
+								_: 2
+							}, 1040, ["onClick"]);
+						}), 128))]),
+						_: 1
+					}, 8, ["class"])) : createCommentVNode("v-if", true)]),
+					_: 3
+				}, 8, [
+					"title",
+					"subtitle",
+					"variant",
+					"data-testid",
+					"class"
+				])]),
+				_: 3
+			}, 8, [
+				"loading",
+				"type",
+				"full-width",
+				"full-height"
+			]);
+		};
+	}
+});
+//#endregion
+export { section_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/sections/section/types.d.ts

@@ -0,0 +1,80 @@
+import { ButtonProps } from "../../button/types.js";
+//#region src/components/sections/section/types.d.ts
+export type SectionVariant = "primary" | "secondary";
+export type SectionTextAlign = "start" | "center" | "end";
+/**
+ * Props exposed by the {@link Section} component.
+ */
+export type SectionProps = {
+  /**
+   * Applies a distinct style variation to the section.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: SectionVariant;
+  /**
+   * Title displayed at the top of the section.
+   */
+  title?: string;
+  /**
+   * Subtitle displayed below the title.
+   */
+  subtitle?: string;
+  /**
+   * Horizontal alignment of the section's title, subtitle, content and actions.
+   * Available options are:
+   * - `"start"`: aligns the text to the start (left in left-to-right languages)
+   *   and keeps the actions at the end;
+   * - `"center"`: centers the text and the actions;
+   * - `"end"`: aligns the text and the actions to the end.
+   *
+   * Uses `start`/`end` instead of `left`/`right`, so it follows the text
+   * direction in right-to-left languages. Nested components inherit the
+   * alignment, unless they define their own.
+   * @default "start"
+   */
+  textAlign?: SectionTextAlign;
+  /**
+   * List of actions displayed at the bottom of the section, inside
+   * `v-card-actions`. When undefined or empty, no actions area is rendered.
+   */
+  actions?: SectionAction[];
+  /**
+   * Makes the section occupy 100% of its parent's width.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Makes the section occupy 100% of its parent's height.
+   *
+   * Inside a `URow`, set its `alignY` to `"stretch"` so the section takes the height of the
+   * tallest column on the same line.
+   * @default false
+   */
+  fullHeight?: boolean;
+  /**
+   * Shows a skeleton loader in place of the content while data is being
+   * loaded.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+/**
+ * A single action rendered inside {@link Section}'s actions area.
+ */
+export interface SectionAction extends ButtonProps {
+  /**
+   * Text displayed on the action button.
+   */
+  label: string;
+  /**
+   * Called when the action button is clicked. Not called while the action is `disabled` or
+   * `loading`.
+   */
+  onClick?: (event: MouseEvent) => void;
+}
+//#endregion

package/dist/components/sections/section-content/section-content.js

@@ -0,0 +1,5 @@
+import section_content_vue_vue_type_script_setup_true_lang_default from "./section-content.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/sections/section-content/section-content.vue
+var section_content_default = section_content_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { section_content_default as default };

package/dist/components/sections/section-content/section-content.vue.d.ts

@@ -0,0 +1,27 @@
+//#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 Section}.
+ *
+ * @example
+ * ```vue
+ * <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/section | Section Guide}
+ */
+declare const _default: typeof __VLS_export;
+declare const __VLS_export: __VLS_WithSlots<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<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as default };

package/dist/components/sections/section-content/section-content.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,16 @@
+import { createBlock, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
+import { VCardText } from "vuetify/components";
+var section_content_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "section-content",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VCardText), null, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { section_content_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/skeleton-loader/skeleton-loader.js

@@ -0,0 +1,5 @@
+import skeleton_loader_vue_vue_type_script_setup_true_lang_default from "./skeleton-loader.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/skeleton-loader/skeleton-loader.vue
+var skeleton_loader_default = skeleton_loader_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { skeleton_loader_default as default };

package/dist/components/skeleton-loader/skeleton-loader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,65 @@
+import { useFullHeight, useFullWidth } from "../../composables/dimensions/dimensions.js";
+import { useLocale } from "vuetify";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { VSkeletonLoader } from "vuetify/components";
+var skeleton_loader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "skeleton-loader",
+	props: {
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		type: {
+			type: null,
+			required: true
+		},
+		fullWidth: {
+			type: Boolean,
+			required: false
+		},
+		fullHeight: {
+			type: Boolean,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { t } = useLocale();
+		const widthClass = useFullWidth(() => props.fullWidth);
+		const heightClass = useFullHeight(() => props.fullHeight);
+		const alignContentClass = computed(() => props.fullHeight ? "align-content-space-between" : void 0);
+		const loadingAttrs = computed(() => ({
+			ariaLabel: void 0,
+			ariaLive: void 0,
+			"aria-label": t("$vuetify.loading"),
+			"aria-live": "polite"
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VSkeletonLoader), mergeProps({
+				loading: props.loading,
+				type: props.type,
+				color: props.color,
+				class: [
+					unref(widthClass),
+					unref(heightClass),
+					alignContentClass.value
+				]
+			}, loadingAttrs.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"loading",
+				"type",
+				"color",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { skeleton_loader_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/table/table.js

@@ -0,0 +1,5 @@
+import table_vue_vue_type_script_setup_true_lang_default from "./table.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/table/table.vue
+var table_default = table_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { table_default as default };

package/dist/components/table/table.vue.d.ts

@@ -0,0 +1,19 @@
+import { TableProps } from "./types.js";
+//#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: 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 { _default as default };

package/dist/components/table/table.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,84 @@
+import skeleton_loader_default from "../skeleton-loader/skeleton-loader.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { VTable } from "vuetify/components";
+//#region src/components/table/table.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { scope: "row" };
+const _hoisted_2 = { key: 0 };
+var table_vue_vue_type_script_setup_true_lang_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(skeleton_loader_default, {
+				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 { table_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,51 @@
+//#region src/components/table/types.d.ts
+/**
+ * Props exposed by the {@link UTable} component.
+ */
+export 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