@nexdom/uimed-vue 1.1.0-beta.2 → 1.1.0-beta.4

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$1: typeof __VLS_export$2;
-declare const __VLS_export$2: __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$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$1<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$1;
-declare const __VLS_export$1: __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$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<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$2: typeof __VLS_export;
-declare const __VLS_export: 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;
@@ -175,4 +190,166 @@ declare const __VLS_export: import("vue", { with: { "resolution-mode": "import"
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
 //#endregion
-export { _default as Btn, _default$1 as Root, _default$2 as TextField };
+//#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$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$3<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$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$2<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$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 Frm, _default$4 as Root, _default$5 as Row, _default$6 as TextField };

package/dist/components.js

@@ -1,5 +1,6 @@
-import { computed, createBlock, createPropsRestProxy, defineComponent, mergeModels, openBlock, renderSlot, toValue, unref, useModel, withCtx } from "vue";
-import { VApp, VBtn, 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",
@@ -160,6 +223,10 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			required: false
 		},
+		required: {
+			type: Boolean,
+			required: false
+		},
 		label: {
 			type: String,
 			required: false
@@ -189,6 +256,7 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 		const props = createPropsRestProxy(__props, ["clearable"]);
 		const vuetifyVariant = useTextFieldVariant(() => props.variant);
 		const vuetifyType = useTextFieldType(() => props.type);
+		const rules = useTextFieldRules(props);
 		const computedClearable = computed(() => __props.clearable ?? props.type === "search");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(VTextField), {
@@ -196,6 +264,7 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 				"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",
@@ -221,4 +291,110 @@ var text_field_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { btn_default as Btn, root_default as Root, text_field_default as TextField };
+//#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
+//#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.2",
+  "version": "1.1.0-beta.4",
   "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",
@@ -71,7 +72,6 @@
     "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",