@nexdom/uimed-vue 2.0.0-beta.54 → 2.0.0-beta.56

package/AGENTS.md

@@ -173,6 +173,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
   - A new component/composable must be listed in its guide page (`docs/guide/…`), its API page (`docs/api/…`), both sidebars in `docs/.vitepress/config.ts`, the guide index table (`docs/guide/index.md`) and the API index list (`docs/api/index.md`).
 - Never write CSS or `<style>` blocks, and expose styling to consumers only through props.
 - Adjustments that Vuetify exposes as Sass variables (e.g. a font family or a line height) go in `src/styles/settings.scss`, which `vitePluginUimed()` compiles into Vuetify's stylesheets in the apps. That file only configures variables: still no CSS rules.
+  - It also limits Vuetify's utility classes to the families the components use, without breakpoint and print variants, and its color classes to black, white and transparent, since the utility stylesheet blocks the apps' first render. Using a class from another family (e.g. `ga-2` or `overflow-hidden`) means enabling its key in `$utilities` there; the unit tests of `src/__tests__/plugins.test.ts` fail when a class used in `src` isn't generated. The theme's colors (`bg-primary`, `text-primary-text`, ...) don't depend on it.
 - Don't add spacing to Vuetify components: no padding or margin utility classes (`pa-*`, `pt-6`, `px-4`, `ma-2`, ...) and no spacing props overriding the defaults. Vuetify already applies Material Design 3 spacing, and overriding it breaks what it handles on its own, such as button paddings and the scrollbar of scrollable content. If the default spacing looks wrong, stop and ask instead of adjusting it. The one accepted layout margin is `mt-auto` on `v-card-actions` (as in `USection`), which pushes the actions to the bottom of a full-height card without setting any spacing value.
 - Prefer a Vuetify component's own props to building its parts by hand (e.g. `title`/`text` on `v-card` instead of `v-card-item` > `v-card-title` > `v-card-text`). A non-spacing utility class is acceptable only when no prop covers the need (e.g. `text-wrap` on a card title), with a comment saying why. Props covered by the shared composables below are the exception: they always go through them.
 - Reuse the shared internal composables for props that recur across components, so every component maps them to Vuetify the same way, instead of mapping them again:

package/dist/components.d.ts

@@ -625,8 +625,8 @@ declare const __VLS_export$16: import("vue", { with: { "resolution-mode": "impor
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   variant: TextFieldVariant;
-  type: TextFieldType;
   clearable: boolean;
+  type: TextFieldType;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/checkbox/types.d.ts
@@ -1595,7 +1595,21 @@ type DataSetProps<T extends object> = {
    */
   itemsPerPage?: number;
   /**
-   * Shows a search field above the records, bound to `v-model:search`.
+   * List of actions about the whole list, such as creating a record, displayed
+   * as buttons at the start of the bar above the records, before the search
+   * field. Same shape as `USection`'s actions.
+   *
+   * With the search field, the actions take the first half of the bar,
+   * wrapping within it, or a line of their own when the data set isn't wide
+   * enough for two records side by side. On extra small screens, each action
+   * takes a line of its own and the full width. When undefined or empty, and
+   * `searchable` is false, no bar is rendered.
+   */
+  actions?: SectionAction[];
+  /**
+   * Shows a search field at the end of the bar above the records, bound to
+   * `v-model:search`. It's 240px wide, the same as a card's minimum width. On
+   * extra small screens, it takes a line of its own and the full width.
    * @default false
    */
   searchable?: boolean;
@@ -1640,13 +1654,19 @@ type DataSetSlots<T extends object> = {
 //#region src/components/data-sets/data-set/data-set.vue.d.ts
 /**
  * Data set component to list records as a responsive grid of cards, with
- * client-side pagination and an optional search field. Each record of the
- * current page is rendered by the default slot, usually with `UDataSetItem`.
+ * client-side pagination, and an optional bar above the records with actions
+ * about the list and a search field. Each record of the current page is
+ * rendered by the default slot, usually with `UDataSetItem`.
  *
  * @example
  * ```vue
  * <template>
- *   <u-data-set :items="patients" :columns="4" searchable>
+ *   <u-data-set
+ *     :items="patients"
+ *     :columns="4"
+ *     :actions="[{ label: 'Novo paciente', onClick: create }]"
+ *     searchable
+ *   >
  *     <template #default="{ item }">
  *       <u-data-set-item :title="item.name" :subtitle="item.plan" />
  *     </template>

package/dist/components.js

@@ -3,7 +3,7 @@ import { a as messages, c as colorToVuetifyTextColor, n as owners$1, r as reques
 import { useLocale, useMask } from "vuetify";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, readonly, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
 import { pt } from "vuetify/locale";
-import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardItem, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VFooter, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressCircular, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
+import { VApp, VAppBar, VAppBarNavIcon, VAppBarTitle, VAutocomplete, VAvatar, VBadge, VBtn, VCard, VCardActions, VCardItem, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDefaultsProvider, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, VFooter, VForm, VIcon, VIconBtn, VImg, VList, VListGroup, VListItem, VListItemAction, VListSubheader, VLocaleProvider, VMain, VMenu, VNavigationDrawer, VPagination, VProgressCircular, VProgressLinear, VRow, VSkeletonLoader, VSnackbarQueue, VTable, VTextField, VTimePicker } from "vuetify/components";
 import { formatDateTime, isEmail, isEmpty, isPhone, isUrl, toInitials } from "@nexdom/shared/utils";
 import { VHighlight } from "vuetify/labs/VHighlight";
 import { RouterLink } from "vue-router";
@@ -2984,6 +2984,15 @@ function useDataSetColumnCols(columns) {
 	return computed(() => dataSetColumnsToColumnCols[toValue(columns)]);
 }
 /**
+* Width, out of the bar's 12 columns, of the actions and of the search field
+* above the records of a data set `width` pixels wide: they share the bar in
+* halves (`"6"`) where two cards fit side by side, so the search field, as wide
+* as a card, fits in its half, and take a line each (`"12"`) otherwise.
+*/
+function useDataSetBarCols(width) {
+	return computed(() => getDataSetFittingColumns(2, toValue(width)) === 2 ? "6" : "12");
+}
+/**
 * Maps the record properties considered by the search to Vuetify's filter
 * keys. An empty list means every property, just like an undefined one.
 */
@@ -3019,6 +3028,92 @@ function useDataSetSearchPageReset(search, page) {
 	});
 }
 //#endregion
+//#region src/components/data-sets/data-set-bar.vue
+var data_set_bar_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "data-set-bar",
+	props: /*@__PURE__*/ mergeModels({
+		actions: {
+			type: Array,
+			required: false
+		},
+		searchable: {
+			type: Boolean,
+			required: false
+		},
+		cols: {
+			type: String,
+			required: true
+		}
+	}, {
+		"modelValue": {
+			type: String,
+			default: ""
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const search = useModel(__props, "modelValue");
+		const searchFieldDefaults = { VTextField: {
+			hideDetails: "auto",
+			minWidth: 240
+		} };
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(row_default, { "align-y": "end" }, {
+				default: withCtx(() => [
+					createCommentVNode(" The search field leaves room above its text for the floating label, so its text, icon and\n         underline sit below its middle. Centered on it, the actions would look higher than the\n         field, so they line up with its underline instead "),
+					createCommentVNode(" No column grows to push the search field to the end of the line, so the actions and the\n         search field share it in two columns, and the search field is aligned to the end of its\n         own "),
+					props.actions?.length ? (openBlock(), createBlock(column_default, {
+						key: 0,
+						cols: props.searchable ? props.cols : "12"
+					}, {
+						default: withCtx(() => [createVNode(row_default, null, {
+							default: withCtx(() => [createCommentVNode(" Each action takes the full width of its column, which only stretches it below sm "), (openBlock(true), createElementBlock(Fragment, null, renderList(props.actions, ({ label, onClick, ...action }, index) => {
+								return openBlock(), createBlock(column_default, {
+									key: index,
+									cols: "auto"
+								}, {
+									default: withCtx(() => [createVNode(button_default, mergeProps({ "full-width": "" }, { ref_for: true }, action, { onClick }), {
+										default: withCtx(() => [createTextVNode(toDisplayString(label), 1)]),
+										_: 2
+									}, 1040, ["onClick"])]),
+									_: 2
+								}, 1024);
+							}), 128))]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["cols"])) : createCommentVNode("v-if", true),
+					props.searchable ? (openBlock(), createBlock(column_default, {
+						key: 1,
+						cols: props.actions?.length ? props.cols : "12"
+					}, {
+						default: withCtx(() => [createVNode(row_default, { "align-x": "end" }, {
+							default: withCtx(() => [createVNode(column_default, { cols: "auto" }, {
+								default: withCtx(() => [createCommentVNode(" Hides the empty messages area, which would misalign the field with the actions, and\n               keeps the field from shrinking to its label, which is all a column of its own width\n               would leave it "), createVNode(unref(VDefaultsProvider), { defaults: searchFieldDefaults }, {
+									default: withCtx(() => [createVNode(text_field_default, {
+										modelValue: search.value,
+										"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
+										type: "search",
+										label: "Pesquisar"
+									}, null, 8, ["modelValue"])]),
+									_: 1
+								})]),
+								_: 1
+							})]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["cols"])) : createCommentVNode("v-if", true)
+				]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
 //#region src/components/data-sets/data-set/data-set.vue
 var data_set_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -3038,6 +3133,10 @@ var data_set_default = /* @__PURE__ */ defineComponent({
 			required: false,
 			default: 10
 		},
+		actions: {
+			type: Array,
+			required: false
+		},
 		searchable: {
 			type: Boolean,
 			required: false
@@ -3078,7 +3177,9 @@ var data_set_default = /* @__PURE__ */ defineComponent({
 		const page = useModel(__props, "page");
 		const search = useModel(__props, "search");
 		const iterator = useTemplateRef("iterator");
-		const columnCols = useDataSetColumnCols(useDataSetFittingColumns(() => props.columns, useDataSetWidth(() => iterator.value?.$el)));
+		const width = useDataSetWidth(() => iterator.value?.$el);
+		const columnCols = useDataSetColumnCols(useDataSetFittingColumns(() => props.columns, width));
+		const barColumnCols = useDataSetBarCols(width);
 		const filterKeys = useDataSetFilterKeys(() => props.searchKeys);
 		useDataSetSearchPageReset(search, page);
 		return (_ctx, _cache) => {
@@ -3087,64 +3188,75 @@ var data_set_default = /* @__PURE__ */ defineComponent({
 				type: "card",
 				"full-width": ""
 			}, {
-				default: withCtx(() => [createVNode(unref(VDataIterator), {
-					ref_key: "iterator",
-					ref: iterator,
-					page: page.value,
-					"onUpdate:page": _cache[2] || (_cache[2] = ($event) => page.value = $event),
-					items: props.items,
-					"items-per-page": props.itemsPerPage,
-					search: search.value,
-					"filter-keys": unref(filterKeys),
-					"data-testid": props.dataTestid
-				}, {
-					header: withCtx(() => [props.searchable ? (openBlock(), createBlock(text_field_default, {
-						key: 0,
-						modelValue: search.value,
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
-						type: "search",
-						label: "Pesquisar"
-					}, null, 8, ["modelValue"])) : createCommentVNode("v-if", true)]),
-					default: withCtx(({ items: pageItems }) => [createCommentVNode(" Stretched, so the items of the same line (e.g. full-height cards) share its height "), createVNode(row_default, {
-						list: "",
-						"align-y": "stretch"
-					}, {
-						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(pageItems, (pageItem, index) => {
-							return openBlock(), createBlock(column_default, {
-								key: index,
-								cols: unref(columnCols),
-								"list-item": ""
+				default: withCtx(() => [createCommentVNode(" The bar and the records take a line each of the same row, so the grid spaces them as it\n         spaces its lines. The bar stays out of the iterator's header, where nothing would space\n         it from the records "), createVNode(row_default, { "data-testid": props.dataTestid }, {
+					default: withCtx(() => [props.actions?.length || props.searchable ? (openBlock(), createBlock(column_default, { key: 0 }, {
+						default: withCtx(() => [createVNode(data_set_bar_default, {
+							modelValue: search.value,
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
+							actions: props.actions,
+							searchable: props.searchable,
+							cols: unref(barColumnCols)
+						}, null, 8, [
+							"modelValue",
+							"actions",
+							"searchable",
+							"cols"
+						])]),
+						_: 1
+					})) : createCommentVNode("v-if", true), createVNode(column_default, null, {
+						default: withCtx(() => [createVNode(unref(VDataIterator), {
+							ref_key: "iterator",
+							ref: iterator,
+							page: page.value,
+							"onUpdate:page": _cache[2] || (_cache[2] = ($event) => page.value = $event),
+							items: props.items,
+							"items-per-page": props.itemsPerPage,
+							search: search.value,
+							"filter-keys": unref(filterKeys)
+						}, {
+							default: withCtx(({ items: pageItems }) => [createCommentVNode(" Stretched, so the items of the same line (e.g. full-height cards) share its height "), createVNode(row_default, {
+								list: "",
+								"align-y": "stretch"
 							}, {
-								default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
-									item: pageItem.raw,
-									index
-								})]),
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(pageItems, (pageItem, index) => {
+									return openBlock(), createBlock(column_default, {
+										key: index,
+										cols: unref(columnCols),
+										"list-item": ""
+									}, {
+										default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+											item: pageItem.raw,
+											index
+										})]),
+										_: 2
+									}, 1032, ["cols"]);
+								}), 128))]),
 								_: 2
-							}, 1032, ["cols"]);
-						}), 128))]),
-						_: 2
-					}, 1024)]),
-					"no-data": withCtx(() => [createVNode(unref(VEmptyState), { text: props.noDataText }, null, 8, ["text"])]),
-					footer: withCtx(({ pageCount }) => [pageCount > 1 ? (openBlock(), createBlock(unref(VPagination), {
-						key: 0,
-						modelValue: page.value,
-						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => page.value = $event),
-						length: pageCount,
-						"total-visible": unref(getDataSetTotalVisible)(pageCount)
-					}, null, 8, [
-						"modelValue",
-						"length",
-						"total-visible"
-					])) : createCommentVNode("v-if", true)]),
+							}, 1024)]),
+							"no-data": withCtx(() => [createVNode(unref(VEmptyState), { text: props.noDataText }, null, 8, ["text"])]),
+							footer: withCtx(({ pageCount }) => [pageCount > 1 ? (openBlock(), createBlock(unref(VPagination), {
+								key: 0,
+								modelValue: page.value,
+								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => page.value = $event),
+								length: pageCount,
+								"total-visible": unref(getDataSetTotalVisible)(pageCount)
+							}, null, 8, [
+								"modelValue",
+								"length",
+								"total-visible"
+							])) : createCommentVNode("v-if", true)]),
+							_: 3
+						}, 8, [
+							"page",
+							"items",
+							"items-per-page",
+							"search",
+							"filter-keys"
+						])]),
+						_: 3
+					})]),
 					_: 3
-				}, 8, [
-					"page",
-					"items",
-					"items-per-page",
-					"search",
-					"filter-keys",
-					"data-testid"
-				])]),
+				}, 8, ["data-testid"])]),
 				_: 3
 			}, 8, ["loading"]);
 		};

package/dist/styles/settings.scss

@@ -2,5 +2,154 @@
   $body-font-family: var(--v-font-body, "Unimed Slab", sans-serif),
   // Unimed Slab's ascent and descent take 1.26em, more than the subtitles' default 1rem line
   // height, which clipped its descenders and accented capitals
-  $list-item-subtitle-line-height: normal
+  $list-item-subtitle-line-height: normal,
+  // The utility classes are a render-blocking stylesheet in the apps, so only the ones the
+  // components use are generated. The theme's colors (`primary`, ...) don't come from here, and
+  // the palettes are left out: only the shades (black, white and transparent) remain, since
+  // Vuetify uses `bg-transparent` itself (e.g. on the navigation drawer's list)
+  $colors: (
+    "red": (),
+    "pink": (),
+    "purple": (),
+    "deep-purple": (),
+    "indigo": (),
+    "blue": (),
+    "light-blue": (),
+    "cyan": (),
+    "teal": (),
+    "green": (),
+    "light-green": (),
+    "lime": (),
+    "yellow": (),
+    "amber": (),
+    "orange": (),
+    "deep-orange": (),
+    "brown": (),
+    "blue-grey": (),
+    "grey": (),
+  ),
+  // The utility families the components use, or that Vuetify applies to them (e.g. `rounded-0` on
+  // list items), without the breakpoint and print variants, which they don't use. A class from
+  // another family needs its key enabled here
+  $utilities: (
+    "display": (
+      responsive: false,
+      print: false,
+    ),
+    "flex": (
+      responsive: false,
+    ),
+    "flex-direction": (
+      responsive: false,
+    ),
+    "flex-wrap": (
+      responsive: false,
+    ),
+    "justify-content": (
+      responsive: false,
+    ),
+    "align-items": (
+      responsive: false,
+    ),
+    "align-content": (
+      responsive: false,
+    ),
+    "margin": (
+      responsive: false,
+    ),
+    "margin-top": (
+      responsive: false,
+    ),
+    "margin-left": (
+      responsive: false,
+    ),
+    "negative-margin-right": (
+      responsive: false,
+    ),
+    "padding": (
+      responsive: false,
+    ),
+    "padding-x": (
+      responsive: false,
+    ),
+    "padding-y": (
+      responsive: false,
+    ),
+    "padding-top": (
+      responsive: false,
+    ),
+    "text-align": (
+      responsive: false,
+    ),
+    "height": (
+      responsive: false,
+    ),
+    "width": (
+      responsive: false,
+    ),
+    "overflow": false,
+    "overflow-x": false,
+    "overflow-y": false,
+    "float": false,
+    "float:rtl": false,
+    "float:ltr": false,
+    "flex-grow": false,
+    "flex-shrink": false,
+    "justify-items": false,
+    "align-self": false,
+    "order": false,
+    "gap": false,
+    "gap-row": false,
+    "gap-column": false,
+    "margin-x": false,
+    "margin-y": false,
+    "margin-right": false,
+    "margin-bottom": false,
+    "margin-start": false,
+    "margin-end": false,
+    "negative-margin": false,
+    "negative-margin-x": false,
+    "negative-margin-y": false,
+    "negative-margin-top": false,
+    "negative-margin-bottom": false,
+    "negative-margin-left": false,
+    "negative-margin-start": false,
+    "negative-margin-end": false,
+    "padding-right": false,
+    "padding-bottom": false,
+    "padding-left": false,
+    "padding-start": false,
+    "padding-end": false,
+    "rounded-top": false,
+    "rounded-end": false,
+    "rounded-bottom": false,
+    "rounded-start": false,
+    "rounded-top-start": false,
+    "rounded-top-end": false,
+    "rounded-bottom-end": false,
+    "rounded-bottom-start": false,
+    "border-current": false,
+    "border-opacity": false,
+    "border-top": false,
+    "border-end": false,
+    "border-bottom": false,
+    "border-start": false,
+    "border-style": false,
+    "white-space": false,
+    "overflow-wrap": false,
+    "opacity": false,
+    "text-overflow": false,
+    "typography": false,
+    "text-transform": false,
+    "font-weight": false,
+    "font-italic": false,
+    "text-mono": false,
+    "position": false,
+    "top": false,
+    "right": false,
+    "bottom": false,
+    "left": false,
+    "cursor": false,
+    "fill-height": false,
+  )
 );

package/package.json

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