Merge pull request #69 from jesusantguerrero/release/1.3.0

Release/1.3.10

.github/workflows/npm-publish.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - run: npm ci
       - run: npm run test:unit
 
@@ -25,7 +25,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: npm publish

package.json

@@ -1,6 +1,6 @@
 {
   "name": "atmosphere-ui",
-  "version": "1.3.3",
+  "version": "1.3.10",
   "description": "UI for jetstream/inertia and Vue 3",
   "type": "module",
   "keywords": [
@@ -21,7 +21,6 @@
     "test:coverage": "vitest run --coverage",
     "storybook": "storybook dev -p 6006",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "prepublishOnly": "npm run build",
     "release": "npm run build && bumpp --commit --tag --push",
     "release-publish-only": "bumpp --commit --tag --push",
     "docs:build": "storybook build -o docs",
@@ -34,9 +33,7 @@
     "@popperjs/core": "^2.11.8",
     "floating-vue": "^2.0.0-beta.24",
     "lodash": "^4.17.21",
-    "mathjs": "^12.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "mathjs": "^12.4.3",
     "vueuse-temporals": "^1.6.0"
   },
   "peerDependencies": {
@@ -46,7 +43,8 @@
     "vue": "^3.2.0"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^1.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "@babel/core": "^7.23.5",
     "@inertiajs/vue3": "^1.0.16",
     "@rushstack/eslint-patch": "^1.10.2",
@@ -66,6 +64,7 @@
     "@vitejs/plugin-vue": "^4.5.1",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vitest/coverage-c8": "^0.33.0",
+    "@vitest/coverage-v8": "^1.6.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.3",

src/components/molecules/AtCardAction/AtCardAction.vue

@@ -89,14 +89,14 @@ withDefaults(
   }
 
   &__footer {
-    .footer-title {
-      color: #8582d1;
-      font-weight: 600;
-    }
     max-width: 374px;
     color: #9b9b9b;
     font-size: 12px;
     text-align: center;
+    .footer-title {
+      color: #8582d1;
+      font-weight: 600;
+    }
   }
 }
 </style>

src/components/molecules/AtSideItem/AtSideItem.vue

@@ -5,16 +5,13 @@ import { isSamePath } from "../../../utils";
 const props = withDefaults(
   defineProps<{
     to: string;
-    // eslint-disable-next-line @typescript-eslint/ban-types
     icon: string | Object;
     label: string;
     name: string;
     classes: string;
     itemClass?: string;
     itemActiveClass?: string;
-    // eslint-disable-next-line @typescript-eslint/ban-types
     as: string | Object;
-    // eslint-disable-next-line @typescript-eslint/ban-types
     isActiveFunction?: Function | null;
   }>(),
   {
@@ -24,13 +21,18 @@ const props = withDefaults(
 
 const currentPath = inject("currentPath", ref(""));
 const counters = inject("counters", ref({}));
+const isExpanded = inject("isExpanded", ref(true));
 const classes = computed(() => {
-  const classes = "flex items-center w-full px-5 py-4 cursor-pointer";
+  const classes = ["flex items-center w-full py-4 cursor-pointer"];
+  if (!isExpanded.value) {
+    classes.push("px-5");
+  }
+
   return [
     isActive(props.to) && props.itemActiveClass,
     props.classes,
     props.itemClass,
-    classes,
+    ...classes,
   ];
 });
 
@@ -43,14 +45,12 @@ function isActive(url: string) {
   return isActiveMethod(url, currentPath.value);
 }
 
-const isExpanded = inject("isExpanded", true);
-
 const isIconComponent = computed(() => {
   return typeof props.icon !== "string";
 });
 
 const itemCounter = computed(() => {
-  return counters.value[props.name] ?? null
+  return counters.value[props.name] ?? null;
 });
 </script>
 
@@ -59,7 +59,7 @@ const itemCounter = computed(() => {
     <div class="divider__inner"></div>
   </div>
 
-  <div v-else class="item" v-bind="$attrs">
+  <div v-else class="item" v-bind="$attrs" :title="label">
     <slot :label="label" :to="to" :class="classes" :icon="icon">
       <component :is="componentName" :class="classes" :href="to" :label="label">
         <component
@@ -81,7 +81,7 @@ const itemCounter = computed(() => {
         <div
           v-if="itemCounter"
           class="flex items-center justify-center w-5 h-5 text-xs text-white rounded-full shadow-md"
-          :class="[itemCounter.class ?? 'bg-error' , isExpanded && 'ml-4']"
+          :class="[itemCounter.class ?? 'bg-error', isExpanded && 'ml-4']"
         >
           {{ itemCounter.count }}
         </div>

src/components/molecules/AtSideItemGroup/AtSideItemGroup.vue

@@ -41,14 +41,11 @@ const props = withDefaults(
 const isExpanded = inject("isExpanded");
 const currentPath = inject("currentPath", ref(""));
 
-
 const isActive = computed(() => {
   return props.trackId == props.modelValue;
 });
 const hasActiveChild = computed(() => {
-  return (
-    !isActive.value && props.childs.find((item) => item.to == currentPath.value)
-  );
+  return !isActive.value && props.childs.find((item) => item.to == currentPath.value);
 });
 const arrowIcon = computed(() => {
   return isActive.value ? "chevron-down" : "chevron-right";
@@ -66,19 +63,21 @@ const isIconComponent = computed(() => {
 
 onMounted(() => {
   if (hasActiveChild.value) {
-    emitValue()
+    emitValue();
   }
-})
+});
 </script>
 
 <template>
   <div>
     <div
-      class="flex items-center justify-between px-5 text-left transition cursor-pointer"
+      class="flex items-center justify-between text-left transition cursor-pointer"
       v-bind="$attrs"
       :class="[
         isActive || (!isActive && hasActiveChild) ? itemActiveClass : itemClass,
+        isExpanded ? 'px-5' : 'px-3',
       ]"
+      :title="label"
       @click="emitValue()"
     >
       <span class="w-full py-4 side-item">

src/components/molecules/AtStatItem/AtStatItem.vue

@@ -83,14 +83,14 @@ s
   }
 
   &__footer {
-    .footer-title {
-      color: #8582d1;
-      font-weight: 600;
-    }
     max-width: 374px;
     color: #9b9b9b;
     font-size: 12px;
     text-align: center;
+    .footer-title {
+      color: #8582d1;
+      font-weight: 600;
+    }
   }
 }
 </style>

src/components/organisms/AtAuthForm/AtAuthForm.spec.js

@@ -4,7 +4,7 @@
 import userEvent from "@testing-library/user-event";
 import { render, screen, fireEvent } from "@testing-library/vue";
 import { describe, expect, it } from "vitest";
-import { reactive } from "vue";
+import { reactive, ref } from "vue";
 import AuthForm from "./AtAuthForm.vue";
 
 describe("AuthForm component", () => {
@@ -92,9 +92,57 @@ describe("AuthForm component", () => {
     });
   });
 
-  it("Should render the component register", async () => {
+  it("Should change email on initial value change", async () => {
+    const initialValues = ref({
+      email: "",
+    });
+
+    const email = "[email protected]";
+
+    const component = render(AuthForm, {
+      props: {
+        mode: "register",
+        initialValues: initialValues,
+        config: {
+          email: {
+            disabled: true
+          }
+        }
+      },
+    });
+
+    initialValues.value.email = email;
+    const inputEmail = await component.findByTestId("input-email");
+    expect(inputEmail.value).toBe(email);
+  });
+  it("Should disable email on config set", async () => {
+    const initialValues = ref({
+      email: "",
+    });
+
+    const email = "[email protected]";
+
+    const component = render(AuthForm, {
+      props: {
+        mode: "register",
+        initialValues: initialValues,
+        config: {
+          email: {
+            disabled: true
+          }
+        }
+      },
+    });
+
+    initialValues.value.email = email;
+    const inputEmail = await component.findByTestId("input-email");
+    await userEvent.type(inputEmail, "[email protected]")
+    expect(inputEmail.value).toBe(email);
+  });
+
+  it("Should disable email after initialization in register", async () => {
     const initialValues = reactive({
-      email: "[email protected]",
+      email: "",
     });
 
     const component = render(AuthForm, {
@@ -103,6 +151,8 @@ describe("AuthForm component", () => {
       },
     });
 
+    initialValues.email = "[email protected]"
+
     component.findByText("[email protected]");
     initialValues.email = "[email protected]";
     component.findByText("[email protected]");