@nexdom/uimed-vue 1.1.0-beta.3 → 1.1.0

package/README.md

@@ -58,9 +58,9 @@ Add the `Root` component to you `App.vue`, then add the rest of the components a
 ```vue
 <!-- App.vue -->
 <template>
-  <Root>
+  <root>
     <!-- ... -->
-  </Root>
+  </root>
 </template>
 
 <script setup lang="ts">

package/dist/components.d.ts

@@ -22,11 +22,11 @@ type RootProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/root | Root Guide}
  */
-declare const _default$3: typeof __VLS_export$5;
-declare const __VLS_export$5: __VLS_WithSlots$4<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RootProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RootProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
+declare const _default$4: typeof __VLS_export$6;
+declare const __VLS_export$6: __VLS_WithSlots$5<import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<RootProps, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<RootProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$4<T, S> = T & {
+type __VLS_WithSlots$5<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -45,6 +45,12 @@ type BtnProps = {
    * @default "primary"
    */
   variant?: BtnVariant;
+  /**
+   * Applies a distinct behavior to the button.
+   * One of `button` or `submit`.
+   * @default "button"
+   */
+  type?: "submit" | "button";
   /**
    * Applies a color to the button.
    * One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
@@ -61,6 +67,10 @@ type BtnProps = {
    * @default false
    */
   loading?: boolean;
+  /**
+   * Associated [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/form) id.
+   */
+  form?: string;
   /**
    * Component id to use on automated tests.
    */
@@ -80,21 +90,21 @@ type BtnProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/btn | Btn Guide}
  */
-declare const _default: typeof __VLS_export$4;
-declare const __VLS_export$4: __VLS_WithSlots$3<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$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, {} & {
   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$3<T, S> = T & {
+type __VLS_WithSlots$4<T, S> = T & {
   new (): {
     $slots: S;
   };
 };
 //#endregion
-//#region src/components/text-field/types.d.ts
+//#region src/components/inputs/text-field/types.d.ts
 type TextFieldVariant = "primary" | "secondary";
 type TextFieldType = "text" | "phone" | "email" | "url" | "password" | "search";
 /**
@@ -133,6 +143,11 @@ type TextFieldProps = {
    * @default false
    */
   readonly?: boolean;
+  /**
+   * Add `rules` to require field to be filled before form submission.
+   * @default false
+   */
+  required?: boolean;
   /**
    * Field label.
    */
@@ -153,7 +168,7 @@ type TextFieldProps = {
   dataTestid?: string;
 };
 //#endregion
-//#region src/components/text-field/text-field.vue.d.ts
+//#region src/components/inputs/text-field/text-field.vue.d.ts
 /**
  * Text field component to be used throughout the application.
  *
@@ -164,8 +179,8 @@ type TextFieldProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/text-field | TextField Guide}
  */
-declare const _default$5: typeof __VLS_export$3;
-declare const __VLS_export$3: import("vue", { with: { "resolution-mode": "import" } }).DefineComponent<TextFieldProps & {
+declare const _default$6: typeof __VLS_export$4;
+declare const __VLS_export$4: 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;
@@ -173,9 +188,7 @@ declare const __VLS_export$3: import("vue", { with: { "resolution-mode": "import
   modelValue?: string;
 }> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {
-  clearable: boolean;
-}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
 //#region src/components/grid/container/types.d.ts
 /**
@@ -201,11 +214,11 @@ type ContainerProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Container Guide}
  */
-declare const _default$2: typeof __VLS_export$2;
-declare const __VLS_export$2: __VLS_WithSlots$2<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$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>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$2<T, S> = T & {
+type __VLS_WithSlots$3<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -237,11 +250,11 @@ type RowProps = {
  *
  * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/layout | Row Guide}
  */
-declare const _default$4: typeof __VLS_export$1;
-declare const __VLS_export$1: __VLS_WithSlots$1<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$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>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$1<T, S> = T & {
+type __VLS_WithSlots$2<T, S> = T & {
   new (): {
     $slots: S;
   };
@@ -284,16 +297,59 @@ 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;
-declare const __VLS_export: __VLS_WithSlots<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$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<{}>, {
   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 & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/frm/types.d.ts
+/**
+ * Props exposed by the {@link Frm} component.
+ */
+type FrmProps = {
+  /**
+   * Id to set on `form` native element.
+   */
+  id?: string;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/frm/frm.vue.d.ts
+/**
+ * Form component to be used throughout the application.
+ *
+ * @example
+ * ```vue
+ * <frm @submit="onSubmit">
+ *   <!-- uimed-field-components -->
+ *   <!-- uimed-submit-btn-component -->
+ * </frm>
+ * ```
+ *
+ * @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, {} & {
+  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<T, S> = T & {
   new (): {
     $slots: S;
   };
 };
 //#endregion
-export { _default as Btn, _default$1 as Column, _default$2 as Container, _default$3 as Root, _default$4 as Row, _default$5 as TextField };
+export { _default as Btn, _default$1 as Column, _default$2 as Container, _default$3 as Frm, _default$4 as Root, _default$5 as Row, _default$6 as TextField };

package/dist/components.js

@@ -1,5 +1,6 @@
-import { computed, createBlock, defineComponent, mergeModels, openBlock, renderSlot, toValue, unref, useModel, withCtx } from "vue";
-import { VApp, VBtn, VCol, VContainer, VRow, VTextField } from "vuetify/components";
+import { computed, createBlock, createPropsRestProxy, defineComponent, mergeModels, openBlock, renderSlot, toValue, unref, useModel, withCtx, withModifiers } from "vue";
+import { VApp, VBtn, VCol, VContainer, VForm, VRow, VTextField } from "vuetify/components";
+import { isEmail, isEmpty, isPhone, isUrl } from "@nexdom/shared/utils";
 //#endregion
 //#region src/components/root/root.vue
 var root_default = /* @__PURE__ */ defineComponent({
@@ -20,7 +21,7 @@ var root_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/btn/composables.ts
+//#region src/composables/btn.ts
 const btnVariantToVuetifyVariant = {
 	primary: "elevated",
 	secondary: "flat",
@@ -46,6 +47,14 @@ function useBtnColor(color) {
 		return colorValue ? btnColorToVuetifyColor[colorValue] : btnColorToVuetifyColor.primary;
 	});
 }
+function useBtnType(type) {
+	return computed(() => {
+		return toValue(type) ?? "button";
+	});
+}
+function useBtnForm(form) {
+	return computed(() => toValue(form));
+}
 //#endregion
 //#region src/components/btn/btn.vue
 var btn_default = /* @__PURE__ */ defineComponent({
@@ -56,6 +65,10 @@ var btn_default = /* @__PURE__ */ defineComponent({
 			type: String,
 			required: false
 		},
+		type: {
+			type: String,
+			required: false
+		},
 		color: {
 			type: String,
 			required: false
@@ -68,6 +81,10 @@ var btn_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			required: false
 		},
+		form: {
+			type: String,
+			required: false
+		},
 		dataTestid: {
 			type: String,
 			required: false
@@ -77,34 +94,63 @@ var btn_default = /* @__PURE__ */ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const vuetifyVariant = useBtnVariant(() => props.variant);
-		const vuetifyColor = useBtnColor(() => props.color);
+		const variant = useBtnVariant(() => props.variant);
+		const color = useBtnColor(() => props.color);
+		const type = useBtnType(() => props.type);
+		const form = useBtnForm(() => props.form);
 		function onClick(event) {
 			emit("click", event);
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VBtn), {
-				variant: unref(vuetifyVariant),
-				color: unref(vuetifyColor),
 				disabled: props.disabled,
 				loading: props.loading,
 				"data-testid": props.dataTestid,
+				variant: unref(variant),
+				color: unref(color),
+				type: unref(type),
+				form: unref(form),
 				onClick
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 8, [
-				"variant",
-				"color",
 				"disabled",
 				"loading",
-				"data-testid"
+				"data-testid",
+				"variant",
+				"color",
+				"type",
+				"form"
 			]);
 		};
 	}
 });
 //#endregion
-//#region src/components/text-field/composables.ts
+//#region src/composables/inputs/rules.ts
+function required(value) {
+	return !isEmpty(value) || "Campo obrigatório";
+}
+function phone(value) {
+	return isEmpty(value) || isPhone(value) || "Número inválido";
+}
+function email(value) {
+	return isEmpty(value) || isEmail(value) || "E-mail inválido";
+}
+function url(value) {
+	return isEmpty(value) || isUrl(value) || "URL inválida";
+}
+//#endregion
+//#region src/composables/inputs/use-rules.ts
+function useRules(options) {
+	return computed(() => {
+		const rules = [];
+		if (options.required) rules.push(required);
+		return rules;
+	});
+}
+//#endregion
+//#region src/composables/inputs/text-field.ts
 const textFieldVariantToVuetifyVariant = {
 	primary: "underlined",
 	secondary: "outlined"
@@ -117,6 +163,11 @@ const textFieldTypeToVuetifyType = {
 	password: "password",
 	search: "text"
 };
+const textFieldTypeToVuetifyRule = {
+	phone,
+	email,
+	url
+};
 function useTextFieldVariant(variant) {
 	return computed(() => {
 		const variantValue = toValue(variant);
@@ -129,8 +180,20 @@ function useTextFieldType(type) {
 		return typeValue ? textFieldTypeToVuetifyType[typeValue] : textFieldTypeToVuetifyType.text;
 	});
 }
+function useTextFieldRules(props) {
+	const defaultRules = useRules(props);
+	return computed(() => {
+		const rules = [...defaultRules.value];
+		const typeRule = associatedRuleType(props.type) ? textFieldTypeToVuetifyRule[props.type] : void 0;
+		if (typeRule) rules.push(typeRule);
+		return rules;
+	});
+}
+function associatedRuleType(type) {
+	return type in textFieldTypeToVuetifyRule;
+}
 //#endregion
-//#region src/components/text-field/text-field.vue
+//#region src/components/inputs/text-field/text-field.vue
 var text_field_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "text-field",
@@ -154,12 +217,16 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 		clearable: {
 			type: Boolean,
 			required: false,
-			default: void 0
+			default: () => void 0
 		},
 		readonly: {
 			type: Boolean,
 			required: false
 		},
+		required: {
+			type: Boolean,
+			required: false
+		},
 		label: {
 			type: String,
 			required: false
@@ -186,16 +253,18 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const props = __props;
+		const props = createPropsRestProxy(__props, ["clearable"]);
 		const vuetifyVariant = useTextFieldVariant(() => props.variant);
 		const vuetifyType = useTextFieldType(() => props.type);
-		const computedClearable = computed(() => props.clearable ?? props.type === "search");
+		const rules = useTextFieldRules(props);
+		const computedClearable = computed(() => __props.clearable ?? props.type === "search");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VTextField), {
 				modelValue: modelValue.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
 				variant: unref(vuetifyVariant),
 				type: unref(vuetifyType),
+				rules: unref(rules),
 				"data-testid": props.dataTestid,
 				disabled: props.disabled,
 				loading: props.loading,
@@ -208,6 +277,7 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 				"modelValue",
 				"variant",
 				"type",
+				"rules",
 				"data-testid",
 				"disabled",
 				"loading",
@@ -292,4 +362,39 @@ var column_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { btn_default as Btn, column_default as Column, container_default as Container, root_default as Root, row_default as Row, text_field_default as TextField };
+//#region src/components/frm/frm.vue
+var frm_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "frm",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["submit"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		async function onSubmit(event) {
+			const { valid } = await event;
+			if (valid) emit("submit", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VForm), {
+				id: props.id,
+				"data-testid": props.dataTestid,
+				onSubmit: withModifiers(onSubmit, ["prevent"])
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["id", "data-testid"]);
+		};
+	}
+});
+//#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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "1.1.0-beta.3",
+  "version": "1.1.0",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -54,6 +54,7 @@
     "@commitlint/config-conventional": "^21.2.0",
     "@fontsource/roboto": "^5.3.0",
     "@mdi/font": "^7.4.47",
+    "@nexdom/shared": "^2.1.1",
     "@playwright/test": "^1.62.1",
     "@stryker-mutator/core": "^10.0.0",
     "@stryker-mutator/vitest-runner": "^10.0.0",
@@ -66,12 +67,11 @@
     "conventional-changelog-conventionalcommits": "^9.3.1",
     "dependency-cruiser": "^18.1.1",
     "jsdom": "^30.0.1",
-    "oxc-minify": "^0.143.0",
+    "oxc-minify": "^0.147.0",
     "postcss": "^8.5.25",
     "resize-observer-polyfill": "^1.5.1",
     "sass-embedded": "^1.103.1",
     "stryker-vue-ignorer": "github:davidlandais/stryker-vue-ignorer",
-    "type-fest": "^5.8.0",
     "typescript": "^6.0.3",
     "vite-plugin-vuetify": "^2.1.3",
     "vite-plus": "^0.2.9",
@@ -84,6 +84,7 @@
   "peerDependencies": {
     "@fontsource/roboto": "^5.3.0",
     "@mdi/font": "^7.4.47",
+    "@nexdom/shared": "^2.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "vite-plugin-vuetify": "^2.1.3",
     "vite-plus": "^0.2.7",