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

package/AGENTS.md

@@ -105,6 +105,7 @@ CI (`.github/workflows/ci.yml`) runs, in order: commitlint on PR commits, `vp pa
 ## Code conventions
 
 - All `src` code is written in English. `docs` content is written in Portuguese (aimed at Brazilian users), even though file/dir names stay in English.
+  - `docs` must not mention Vuetify
 - Never write CSS, classes or any kind of styling. Always use component props.
 - Path aliases: `@/*` → `src/*`, `@e2e/*` → `e2e/*`.
 - Every public component follows this pattern to block access to internals and give it an editor-hover description:

package/dist/components.d.ts

@@ -169,8 +169,8 @@ type RootProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/root | Root Guide}
  */
-declare const _default$4: typeof __VLS_export$6;
-declare const __VLS_export$6: __VLS_WithSlots$5<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RootProps & {
+declare const _default$6: typeof __VLS_export$8;
+declare const __VLS_export$8: __VLS_WithSlots$7<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RootProps & {
   notificationsOpen?: boolean;
 }, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
   "update:notificationsOpen": (value: boolean) => any;
@@ -181,7 +181,7 @@ declare const __VLS_export$6: __VLS_WithSlots$5<import("vue", { with: { "resolut
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$5<T, S> = T & {
+type __VLS_WithSlots$7<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -244,15 +244,15 @@ type BtnProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/btn | Btn Guide}
  */
-declare const _default: typeof __VLS_export$5;
-declare const __VLS_export$5: __VLS_WithSlots$4<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$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, {} & {
   click: (event: MouseEvent) => any;
 }, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<BtnProps> & Readonly<{
   onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$4<T, S> = T & {
+type __VLS_WithSlots$6<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -333,8 +333,8 @@ type TextFieldProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/text-field | TextField Guide}
  */
-declare const _default$6: typeof __VLS_export$4;
-declare const __VLS_export$4: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
+declare const _default$8: typeof __VLS_export$6;
+declare const __VLS_export$6: 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;
@@ -372,11 +372,11 @@ type ContainerProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Container Guide}
  */
-declare const _default$2: typeof __VLS_export$3;
-declare const __VLS_export$3: __VLS_WithSlots$3<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$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>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$3<T, S> = T & {
+type __VLS_WithSlots$5<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -408,11 +408,11 @@ type RowProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
-declare const _default$5: typeof __VLS_export$2;
-declare const __VLS_export$2: __VLS_WithSlots$2<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$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>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$2<T, S> = T & {
+type __VLS_WithSlots$4<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -455,13 +455,13 @@ type Cols = "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10"
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Column Guide}
  */
-declare const _default$1: typeof __VLS_export$1;
-declare const __VLS_export$1: __VLS_WithSlots$1<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$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<{}>, {
   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;
 }>;
-type __VLS_WithSlots$1<T, S> = T & {
+type __VLS_WithSlots$3<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -496,18 +496,126 @@ type FrmProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/frm | Form Guide}
  */
-declare const _default$3: typeof __VLS_export;
-declare const __VLS_export: __VLS_WithSlots<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$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, {} & {
   submit: (event: SubmitEvent) => any;
 }, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<FrmProps> & Readonly<{
   onSubmit?: ((event: SubmitEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
+type __VLS_WithSlots$2<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/content/content.vue.d.ts
+/**
+ * Proxy component for Vuetify's `v-card-text`, used to structure content
+ * displayed inside a {@link ContentSet}.
+ *
+ * @example
+ * ```vue
+ * <content-set title="Title">
+ *   <content>Content</content>
+ * </content-set>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/content-set | ContentSet 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>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/content/types.d.ts
+type ContentSetVariant = "primary" | "secondary";
+/**
+ * Props exposed by the {@link ContentSet} component.
+ */
+type ContentSetProps = {
+  /**
+   * Applies a distinct style variation to the content set.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: ContentSetVariant;
+  /**
+   * Title displayed at the top of the content set.
+   */
+  title?: string;
+  /**
+   * Subtitle displayed below the title.
+   */
+  subtitle?: string;
+  /**
+   * List of actions displayed at the bottom of the content set, inside
+   * `v-card-actions`. When undefined or empty, no actions area is rendered.
+   */
+  actions?: ContentSetAction[];
+  /**
+   * Makes the content set occupy 100% of its parent's width.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Makes the content set occupy 100% of its parent's height.
+   * @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 ContentSet}'s actions area.
+ */
+interface ContentSetAction extends BtnProps {
+  /**
+   * Text displayed on the action button.
+   */
+  label: string;
+  /**
+   * Called when the action button is clicked.
+   */
+  onClick?: (event: MouseEvent) => void;
+}
+//#endregion
+//#region src/components/content/content-set.vue.d.ts
+/**
+ * Content set component to group related content and actions, to be used
+ * throughout the application.
+ *
+ * @example
+ * ```vue
+ * <content-set title="Title" subtitle="Subtitle">
+ *   Content
+ * </content-set>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/content-set | ContentSet 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>, {
+  default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
   new (): {
     $slots: S;
   };
 };
 //#endregion
-export { type AppBarProps as AppBarConfig, type AppBarUserProps as AppBarUserConfig, _default as Btn, _default$1 as Column, _default$2 as Container, _default$3 as Frm, type NavigationMenuProps as NavigationMenuConfig, _default$4 as Root, _default$5 as Row, _default$6 as TextField };
+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 };

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, VCardText, VCol, VContainer, VDivider, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VMain, VMenu, VNavigationDrawer, VRow, 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, 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) {
@@ -784,4 +784,125 @@ var frm_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { btn_default as Btn, column_default as Column, container_default as Container, frm_default as Frm, root_default as Root, row_default as Row, text_field_default as TextField };
+//#region src/components/content/content.vue
+var content_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "content",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VCardText), null, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+//#region src/composables/content-set.ts
+const contentSetVariantToVuetifyVariant = {
+	primary: "elevated",
+	secondary: "outlined"
+};
+function useContentSetVariant(variant) {
+	return computed(() => {
+		const variantValue = toValue(variant);
+		return variantValue ? contentSetVariantToVuetifyVariant[variantValue] : contentSetVariantToVuetifyVariant.primary;
+	});
+}
+//#endregion
+//#region src/components/content/content-set.vue
+var content_set_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "content-set",
+	props: {
+		variant: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		subtitle: {
+			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 = useContentSetVariant(() => props.variant);
+		const title = computed(() => props.title || void 0);
+		const subtitle = computed(() => props.subtitle || void 0);
+		const width = computed(() => props.fullWidth ? "100%" : void 0);
+		const height = computed(() => props.fullHeight ? "100%" : void 0);
+		const showActions = computed(() => !!props.actions?.length);
+		const skeletonType = computed(() => showActions.value ? "image, actions" : "image");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VSkeletonLoader), {
+				loading: props.loading,
+				type: skeletonType.value,
+				width: width.value,
+				height: height.value
+			}, {
+				default: withCtx(() => [createVNode(unref(VCard), {
+					title: title.value,
+					subtitle: subtitle.value,
+					variant: unref(variant),
+					width: width.value,
+					height: height.value,
+					"data-testid": props.dataTestid,
+					class: "d-flex flex-column"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default"), showActions.value ? (openBlock(), createBlock(unref(VCardActions), {
+						key: 0,
+						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 }), {
+								default: withCtx(() => [createTextVNode(toDisplayString(label), 1)]),
+								_: 2
+							}, 1040, ["onClick"]);
+						}), 128))]),
+						_: 1
+					})) : createCommentVNode("v-if", true)]),
+					_: 3
+				}, 8, [
+					"title",
+					"subtitle",
+					"variant",
+					"width",
+					"height",
+					"data-testid"
+				])]),
+				_: 3
+			}, 8, [
+				"loading",
+				"type",
+				"width",
+				"height"
+			]);
+		};
+	}
+});
+//#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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "1.3.0-beta.2",
+  "version": "1.3.0-beta.3",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -43,7 +43,6 @@
     "test": "vp test",
     "test:mutations": "stryker run",
     "test:e2e": "vpx playwright test",
-    "check": "vp check && vpx vue-tsc",
     "prepublishOnly": "vpr build",
     "prepare": "vp config",
     "depcruise": "depcruise src --output-type err-long",