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

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/package.json

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