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

package/dist/components.d.ts

@@ -12,27 +12,28 @@ type RootProps = {
 //#region src/components/root/root.vue.d.ts
 /**
  * Root component to be placed at the top of the component tree.
+ *
+ * @example
+ * ```vue
+ * <root>
+ *   <!-- uimed-components -->
+ * </root>
+ * ```
+ *
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/root | Root Guide}
  */
-declare const _default$1: typeof __VLS_export$1;
-declare const __VLS_export$1: __VLS_WithSlots$1<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$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>, {
   default?: (props: {}) => any;
 }>;
-type __VLS_WithSlots$1<T, S> = T & {
+type __VLS_WithSlots$4<T, S> = T & {
   new (): {
     $slots: S;
   };
 };
 //#endregion
 //#region src/components/btn/types.d.ts
-/**
- * Style variation for the {@link Btn} component.
- * {@link btnVariantToVuetifyVariant} for the mapping applied when rendering.
- */
 type BtnVariant = "primary" | "secondary" | "ghost";
-/**
- * Color palette for the {@link Btn} component.
- * {@link btnColorToVuetifyColor} for the mapping applied when rendering.
- */
 type BtnColor = "primary" | "secondary" | "positive" | "informative" | "caution" | "danger";
 /**
  * Props exposed by the {@link Btn} component.
@@ -72,25 +73,227 @@ type BtnProps = {
  *
  * @example
  * ```vue
- * <btn variant="primary" color="danger" @click="onClick">
+ * <btn color="danger" @click="onClick">
  *   Confirmar
  * </btn>
  * ```
  *
- * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/btn | Guia do Btn}
+ * @see {@link https://nexdom-healthtech.github.io/uimed-vue/guide/components/btn | Btn Guide}
  */
-declare const _default: typeof __VLS_export;
-declare const __VLS_export: __VLS_WithSlots<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$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, {} & {
   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 & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/text-field/types.d.ts
+type TextFieldVariant = "primary" | "secondary";
+type TextFieldType = "text" | "phone" | "email" | "url" | "password" | "search";
+/**
+ * Props exposed by the {@link TextField} component.
+ */
+type TextFieldProps = {
+  /**
+   * Applies a distinct style variation to the field.
+   * One of `primary` or `secondary`.
+   * @default "primary"
+   */
+  variant?: TextFieldVariant;
+  /**
+   * Applies a distinct behavior to the field.
+   * One of `text`, `phone`, `email`, `url`, `password` or `search`.
+   * @default "text"
+   */
+  type?: TextFieldType;
+  /**
+   * Removes the ability to click or target the field.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Displays a loading indicator on the input.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Displays clear action.
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * Prevent value changes.
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Field label.
+   */
+  label?: string;
+  /**
+   * Field placeholder.
+   */
+  placeholder?: string;
+  /**
+   * Field message to show and direct user to fill field correctly.
+   *
+   * This message will be replaced when there's an error message to be shown.
+   */
+  hint?: string;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/text-field/text-field.vue.d.ts
+/**
+ * Text field component to be used throughout the application.
+ *
+ * @example
+ * ```vue
+ * <text-field label="E-mail" type="email" />
+ * ```
+ *
+ * @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 & {
+  modelValue?: string;
+}, {}, {}, {}, {}, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, import("vue", { with: { "resolution-mode": "import" } }).ComponentOptionsMixin, {
+  "update:modelValue": (value: string) => any;
+}, string, import("vue", { with: { "resolution-mode": "import" } }).PublicProps, Readonly<TextFieldProps & {
+  modelValue?: string;
+}> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+  clearable: boolean;
+}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
+//#endregion
+//#region src/components/grid/container/types.d.ts
+/**
+ * Props exposed by the {@link Container} component.
+ */
+type ContainerProps = {
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/grid/container/container.vue.d.ts
+/**
+ * Container component to be placed at the top of the component tree.
+ *
+ * @example
+ * ```vue
+ * <container>
+ *   <!-- uimed-components -->
+ * </container>
+ * ```
+ *
+ * @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>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots$2<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/grid/row/types.d.ts
+/**
+ * Props exposed by the {@link Row} component.
+ */
+type RowProps = {
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+//#endregion
+//#region src/components/grid/row/row.vue.d.ts
+/**
+ * Row component to be placed within a container.
+ *
+ * @example
+ * ```vue
+ * <container>
+ *   <row>
+ *     <!-- uimed-column -->
+ *   </row>
+ * </container>
+ * ```
+ *
+ * @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>, {
+  default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots$1<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/grid/column/types.d.ts
+/**
+ * Props exposed by the {@link Col} component.
+ */
+type ColumnProps = {
+  /**
+   * Number of columns to stretch the component.
+   * Available options are:
+   * - `"auto"`: which won't try to stretch the component
+   * - `"1"` to `"12"`.
+   * @default "12"
+   */
+  cols?: Cols;
+  /**
+   * Component id to use on automated tests.
+   */
+  dataTestid?: string;
+};
+type Cols = "auto" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+//#endregion
+//#region src/components/grid/column/column.vue.d.ts
+/**
+ * Column component to be placed within a row.
+ *
+ * @example
+ * ```vue
+ * <container>
+ *   <row>
+ *     <col>
+ *       <!-- uimed-components -->
+ *     </col>
+ *   </row>
+ * </container>
+ * ```
+ *
+ * @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<{}>, {
+  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<T, S> = T & {
   new (): {
     $slots: S;
   };
 };
 //#endregion
-export { _default as Btn, _default$1 as Root };
+export { _default as Btn, _default$1 as Column, _default$2 as Container, _default$3 as Root, _default$4 as Row, _default$5 as TextField };

package/dist/components.js

@@ -1,5 +1,5 @@
-import { computed, createBlock, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
-import { VApp, VBtn } from "vuetify/components";
+import { computed, createBlock, defineComponent, mergeModels, openBlock, renderSlot, toValue, unref, useModel, withCtx } from "vue";
+import { VApp, VBtn, VCol, VContainer, VRow, VTextField } from "vuetify/components";
 //#endregion
 //#region src/components/root/root.vue
 var root_default = /* @__PURE__ */ defineComponent({
@@ -20,32 +20,12 @@ var root_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/btn/consts.ts
-/**
-* Maps {@link BtnVariant} to the underlying Vuetify `VBtn` `variant` value.
-* Each value is checked against Vuetify's prop type, so a variant renamed or
-* removed by Vuetify fails to type-check here.
-*/
+//#region src/components/btn/composables.ts
 const btnVariantToVuetifyVariant = {
 	primary: "elevated",
 	secondary: "flat",
 	ghost: "outlined"
 };
-/**
-* Resolves a {@link BtnVariant} to its Vuetify `VBtn` `variant` value,
-* defaulting to `primary`'s mapping when `variant` is `undefined` or not a
-* key of {@link btnVariantToVuetifyVariant} (e.g. a value that bypassed
-* {@link BtnVariant}'s type check at the call site).
-*/
-function resolveBtnVariant(variant) {
-	return btnVariantToVuetifyVariant[variant] ?? btnVariantToVuetifyVariant.primary;
-}
-/**
-* Maps {@link BtnColor} to the underlying Vuetify `VBtn` `color` value.
-* Vuetify types `color` as a bare `string` (it accepts any theme color or
-* CSS color), so this only guarantees every {@link BtnColor} has a mapped
-* value, not that the value is itself a valid Vuetify theme color.
-*/
 const btnColorToVuetifyColor = {
 	primary: "primary",
 	secondary: "secondary",
@@ -54,14 +34,17 @@ const btnColorToVuetifyColor = {
 	caution: "warning",
 	danger: "error"
 };
-/**
-* Resolves a {@link BtnColor} to its Vuetify `VBtn` `color` value,
-* defaulting to `primary`'s mapping when `color` is `undefined` or not a key
-* of {@link btnColorToVuetifyColor} (e.g. a value that bypassed
-* {@link BtnColor}'s type check at the call site).
-*/
-function resolveBtnColor(color) {
-	return btnColorToVuetifyColor[color] ?? btnColorToVuetifyColor.primary;
+function useBtnVariant(variant) {
+	return computed(() => {
+		const variantValue = toValue(variant);
+		return variantValue ? btnVariantToVuetifyVariant[variantValue] : btnVariantToVuetifyVariant.primary;
+	});
+}
+function useBtnColor(color) {
+	return computed(() => {
+		const colorValue = toValue(color);
+		return colorValue ? btnColorToVuetifyColor[colorValue] : btnColorToVuetifyColor.primary;
+	});
 }
 //#endregion
 //#region src/components/btn/btn.vue
@@ -94,15 +77,15 @@ var btn_default = /* @__PURE__ */ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const vuetifyVariant = computed(() => resolveBtnVariant(props.variant));
-		const vuetifyColor = computed(() => resolveBtnColor(props.color));
+		const vuetifyVariant = useBtnVariant(() => props.variant);
+		const vuetifyColor = useBtnColor(() => props.color);
 		function onClick(event) {
 			emit("click", event);
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VBtn), {
-				variant: vuetifyVariant.value,
-				color: vuetifyColor.value,
+				variant: unref(vuetifyVariant),
+				color: unref(vuetifyColor),
 				disabled: props.disabled,
 				loading: props.loading,
 				"data-testid": props.dataTestid,
@@ -121,4 +104,192 @@ var btn_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { btn_default as Btn, root_default as Root };
+//#region src/components/text-field/composables.ts
+const textFieldVariantToVuetifyVariant = {
+	primary: "underlined",
+	secondary: "outlined"
+};
+const textFieldTypeToVuetifyType = {
+	text: "text",
+	phone: "tel",
+	email: "email",
+	url: "url",
+	password: "password",
+	search: "text"
+};
+function useTextFieldVariant(variant) {
+	return computed(() => {
+		const variantValue = toValue(variant);
+		return variantValue ? textFieldVariantToVuetifyVariant[variantValue] : textFieldVariantToVuetifyVariant.primary;
+	});
+}
+function useTextFieldType(type) {
+	return computed(() => {
+		const typeValue = toValue(type);
+		return typeValue ? textFieldTypeToVuetifyType[typeValue] : textFieldTypeToVuetifyType.text;
+	});
+}
+//#endregion
+//#region src/components/text-field/text-field.vue
+var text_field_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "text-field",
+	props: /*@__PURE__*/ mergeModels({
+		variant: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		clearable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		hint: {
+			type: String,
+			required: false
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	}, {
+		"modelValue": {
+			type: String,
+			default: ""
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const props = __props;
+		const vuetifyVariant = useTextFieldVariant(() => props.variant);
+		const vuetifyType = useTextFieldType(() => props.type);
+		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),
+				"data-testid": props.dataTestid,
+				disabled: props.disabled,
+				loading: props.loading,
+				readonly: props.readonly,
+				label: props.label,
+				placeholder: props.placeholder,
+				hint: props.hint,
+				clearable: computedClearable.value
+			}, null, 8, [
+				"modelValue",
+				"variant",
+				"type",
+				"data-testid",
+				"disabled",
+				"loading",
+				"readonly",
+				"label",
+				"placeholder",
+				"hint",
+				"clearable"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/grid/container/container.vue
+var container_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "container",
+	props: { dataTestid: {
+		type: String,
+		required: false
+	} },
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VContainer), {
+				"data-testid": props.dataTestid,
+				fluid: ""
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["data-testid"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/grid/row/row.vue
+var row_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "row",
+	props: { dataTestid: {
+		type: String,
+		required: false
+	} },
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VRow), { "data-testid": props.dataTestid }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["data-testid"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/grid/column/column.vue
+var column_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "column",
+	props: {
+		cols: {
+			type: String,
+			required: false,
+			default: "12"
+		},
+		dataTestid: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VCol), {
+				cols: "12",
+				sm: props.cols,
+				"data-testid": props.dataTestid
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["sm", "data-testid"]);
+		};
+	}
+});
+//#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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "1.1.0-beta.1",
+  "version": "1.1.0-beta.3",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -40,7 +40,7 @@
     "test": "vp test",
     "test:mutations": "stryker run",
     "test:e2e": "vpx playwright test",
-    "check": "vp check",
+    "check": "vp check && vpx vue-tsc",
     "prepublishOnly": "vpr build",
     "prepare": "vp config",
     "depcruise": "depcruise src --output-type err-long",
@@ -69,10 +69,12 @@
     "oxc-minify": "^0.143.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.7",
+    "vite-plus": "^0.2.9",
     "vitepress": "2.0.0-alpha.19",
     "vitepress-plugin-group-icons": "^1.7.6",
     "vue": "^3.5.40",