@avakhula/ui 0.0.141 → 0.0.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.141",
+  "version": "0.0.142",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",

package/src/App.vue

@@ -1,56 +1,21 @@
 <template>
-  <div id="test">
-    <ib-form-group class="form-group">
-      <ib-label for="first_name" required>
-        test
-      </ib-label>
+  <ib-alert class="info-notification" type="info" show-icon title="twat">
 
-      <ib-input id="first_name" name="first_name"
-        v-tooltip="'Cannot be edited because user info were synchronized from another LMS.'"
-        readonly />
-    </ib-form-group>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda minus qui reiciendis. Id assumenda dolore
+    laudantium nobis corporis corrupti, rem officiis voluptatum et debitis voluptatem error asperiores, aperiam porro
+    itaque?
 
-    <ib-form-group class="form-group">
-      <ib-label for="first_name" required>
-        test
-      </ib-label>
-
-      <ib-input id="first_name" name="first_name"
-        v-tooltip="'Cannot be edited because user info were synchronized from another LMS.'"
-        readonly />
-    </ib-form-group>
-  </div>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda minus qui reiciendis. Id assumenda dolore
+    laudantium nobis corporis corrupti, rem officiis voluptatum et debitis voluptatem error asperiores, aperiam porro
+    itaque?
+  </ib-alert>
 </template>
 
 <script>
-import IbInput from "./components/Form/Input/Input.vue";
-import { IbFormGroup, IbLabel, TooltipDirective as Tooltip } from "./index";
+import IbAlert from "./components/Alert/Alert.vue"
 export default {
-  directives: {
-    Tooltip
-  },
-  methods: {
-    test() {
-      console.log('test')
-    },
-    test1() {
-      console.log('test')
-    }
-  },
   components: {
-    IbInput,
-    IbFormGroup,
-    IbLabel
-  },
-};
-</script>
-
-<style lang="scss">
-#test {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    IbAlert
+  }
 }
-</style>
+</script>

package/src/components/Alert/Alert.vue

@@ -56,12 +56,22 @@ export default {
     },
   },
   mounted() {
-    setTimeout(() => {
-      this.checkHeight();
-    }, 1000);
+    this.checkHeight();
 
+    if (this.$refs.content) {
+      this.contentObserver = new ResizeObserver(() => {
+        this.checkHeight();
+      });
+
+      this.contentObserver.observe(this.$refs.content);
+    }
     window.addEventListener("resize", () => this.checkHeight());
   },
+  data() {
+    return {
+      contentObserver: null,
+    };
+  },
   methods: {
     close() {
       this.$emit("close");
@@ -76,11 +86,10 @@ export default {
 
       if (!parentWidth || !contentStyle) return;
 
-      console.log(contentStyle.width, 'contentStyle.width', 'parentWidth', parentWidth)
       if (parseInt(contentStyle.width) <= parentWidth) {
         this.$refs.content.classList.remove("large");
       }
-      console.log(contentStyle.height, 'contentStyle.height')
+
       if (parseInt(contentStyle.height) > 37) {
         this.$refs.content.classList.add("large");
       }
@@ -122,6 +131,7 @@ export default {
     },
   },
   beforeUnmount() {
+    this.contentObserver?.disconnect();
     window.removeEventListener("resize", () => this.checkHeight());
   },
   components: {