@nexdom/uimed-vue 2.0.0-beta.34 → 2.0.0-beta.36

package/dist/components.d.ts

@@ -245,6 +245,10 @@ type TextFieldProps = {
   /**
    * Applies a distinct behavior to the field.
    * One of `text`, `phone`, `email`, `url`, `password` or `search`.
+   *
+   * With `password`, the field hides its value and shows a "Mostrar senha"
+   * button that toggles between showing and hiding it. The value hides again
+   * when the button is pressed again or the type changes.
    * @default "text"
    */
   type?: TextFieldType;
@@ -433,8 +437,8 @@ declare const __VLS_export$14: import("vue", { with: { "resolution-mode": "impor
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   variant: TextFieldVariant;
-  clearable: boolean;
   type: TextFieldType;
+  clearable: boolean;
 }, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/inputs/checkbox/types.d.ts

package/dist/components.js

@@ -1,8 +1,9 @@
 import { a as messages, n as owners$1, r as requests, s as useVuetifyColor } from "./use-dialog-Ck2_ZW7T.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onScopeDispose, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
+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, VCardText, VCheckboxBtn, VCol, VCombobox, VContainer, VDataIterator, VDatePicker, VDialog, VDivider, VEmptyState, VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels, 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 } from "@nexdom/shared/utils";
+import { VHighlight } from "vuetify/labs/VHighlight";
 //#region src/composables/navigation/use-route-props.ts
 function useRouteProps(route) {
 	return computed(() => routeToProps(route));
@@ -401,12 +402,39 @@ const textFieldTypeToVuetifyRule = {
 	email,
 	url
 };
-function useTextFieldType(type) {
+/**
+* Maps the field type to the input type, showing as plain text a password
+* the user chose to make visible.
+*/
+function useTextFieldType(type, isPasswordVisible) {
 	return computed(() => {
 		const typeValue = toValue(type);
+		if (typeValue === "password" && toValue(isPasswordVisible)) return "text";
 		return textFieldTypeToVuetifyType[typeValue];
 	});
 }
+/**
+* Controls the button that shows or hides a password field's value. The
+* password starts hidden and hides again whenever the type stops being
+* `password`.
+*/
+function useTextFieldPasswordToggle(type) {
+	const isPasswordField = computed(() => toValue(type) === "password");
+	const isPasswordVisible = ref(false);
+	const icon = computed(() => isPasswordVisible.value ? "mdi-eye-off" : "mdi-eye");
+	watch(isPasswordField, () => {
+		isPasswordVisible.value = false;
+	});
+	function toggle() {
+		isPasswordVisible.value = !isPasswordVisible.value;
+	}
+	return {
+		isPasswordField,
+		isPasswordVisible: readonly(isPasswordVisible),
+		icon,
+		toggle
+	};
+}
 function useTextFieldRules(props) {
 	const defaultRules = useRules(props);
 	return computed(() => {
@@ -512,7 +540,8 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 		const modelValue = useModel(__props, "modelValue");
 		const props = __props;
 		const vuetifyVariant = useTextFieldVariant(() => props.variant);
-		const vuetifyType = useTextFieldType(() => props.type);
+		const { isPasswordField, isPasswordVisible, icon: passwordToggleIcon, toggle: togglePassword } = useTextFieldPasswordToggle(() => props.type);
+		const vuetifyType = useTextFieldType(() => props.type, isPasswordVisible);
 		const rules = useTextFieldRules(props);
 		const isSearchField = computed(() => props.type === "search");
 		const computedClearable = computed(() => props.clearable ?? isSearchField.value);
@@ -538,10 +567,27 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 				hint: props.hint,
 				clearable: computedClearable.value,
 				"onClick:clear": clear
-			}, {
+			}, createSlots({
 				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
-				_: 1
-			}, 8, [
+				_: 2
+			}, [unref(isPasswordField) ? {
+				name: "append-inner",
+				fn: withCtx(() => [createVNode(unref(VBtn), {
+					icon: unref(passwordToggleIcon),
+					"aria-label": "Mostrar senha",
+					"aria-pressed": unref(isPasswordVisible),
+					disabled: props.disabled,
+					size: "small",
+					variant: "text",
+					onClick: unref(togglePassword)
+				}, null, 8, [
+					"icon",
+					"aria-pressed",
+					"disabled",
+					"onClick"
+				])]),
+				key: "0"
+			} : void 0]), 1032, [
 				"modelValue",
 				"variant",
 				"type",
@@ -1298,6 +1344,8 @@ var autocomplete_field_default = /* @__PURE__ */ defineComponent({
 			multiple: isMultiple.value
 		}));
 		const vuetifyComponent = computed(() => props.strict ? VAutocomplete : VCombobox);
+		const search = ref("");
+		const maskClass = computed(() => props.strict ? "v-autocomplete__mask" : "v-combobox__mask");
 		const normalizedItems = computed(() => {
 			return props.items.map((item) => {
 				if (typeof item === "string") return {
@@ -1311,6 +1359,8 @@ var autocomplete_field_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createBlock(resolveDynamicComponent(vuetifyComponent.value), {
 				modelValue: modelValue.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				search: search.value,
+				"onUpdate:search": _cache[1] || (_cache[1] = ($event) => search.value = $event),
 				variant: unref(vuetifyVariant),
 				items: normalizedItems.value,
 				"data-testid": props.dataTestid,
@@ -1327,11 +1377,35 @@ var autocomplete_field_default = /* @__PURE__ */ defineComponent({
 				rules: unref(rules),
 				"menu-props": unref(autocompleteFieldMenuProps),
 				chips: ""
-			}, {
+			}, createSlots({
 				loader: withCtx((loader) => [createVNode(field_loader_default, normalizeProps(guardReactiveProps(loader)), null, 16)]),
-				_: 1
-			}, 8, [
+				_: 2
+			}, [isMultiple.value ? {
+				name: "item",
+				fn: withCtx(({ props: itemProps }) => [createVNode(unref(VListItem), normalizeProps(guardReactiveProps(itemProps)), {
+					prepend: withCtx(({ isSelected }) => [createVNode(unref(VCheckboxBtn), {
+						"model-value": isSelected,
+						ripple: false,
+						inert: "",
+						"aria-hidden": "true"
+					}, null, 8, ["model-value"])]),
+					title: withCtx(() => [createVNode(unref(VHighlight), {
+						text: itemProps.title,
+						query: search.value,
+						"match-all": "",
+						"ignore-case": "",
+						"mark-class": maskClass.value
+					}, null, 8, [
+						"text",
+						"query",
+						"mark-class"
+					])]),
+					_: 2
+				}, 1040)]),
+				key: "0"
+			} : void 0]), 1064, [
 				"modelValue",
+				"search",
 				"variant",
 				"items",
 				"data-testid",

package/package.json

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