@avakhula/ui 0.0.141 → 0.0.143

package/package.json

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

package/src/App.vue

@@ -1,56 +1,25 @@
 <template>
-  <div id="test">
-    <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>
-
-    <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 class="test">
+    <div>
+      <ib-radio value="a" label="Item 1" name="Checkbox" v-bind="{}" />
+      <ib-radio isChecked style="margin-left: 15px" value="b" label="Item 2" name="Checkbox" v-bind="{}" />
+    </div>
   </div>
 </template>
 
 <script>
-import IbInput from "./components/Form/Input/Input.vue";
-import { IbFormGroup, IbLabel, TooltipDirective as Tooltip } from "./index";
+import IbRadio from "./components/Form/Radio/Radio.vue";
+
 export default {
-  directives: {
-    Tooltip
-  },
-  methods: {
-    test() {
-      console.log('test')
-    },
-    test1() {
-      console.log('test')
-    }
-  },
   components: {
-    IbInput,
-    IbFormGroup,
-    IbLabel
-  },
-};
+    IbRadio
+  }
+}
+
 </script>
 
-<style lang="scss">
-#test {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+<style>
+.test {
+  padding-top: 110vh;
 }
-</style>
+</style>

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: {

package/src/components/Form/Radio/Radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="classes" :for="id">
+  <label :class="classes" :for="id" @click.prevent="onClick">
     <input
       type="radio"
       :name="name"
@@ -9,7 +9,6 @@
       :disabled="disabled"
       ref="radio"
       @input.stop
-      @click="onClick"
       @change="onChange"
     />
     <span class="ib-radio-body" :class="{ 'without-text': !label?.length }">
@@ -62,32 +61,33 @@ export default {
     },
   },
   mounted() {
-    this.$globalEvents.$on("radio:update", (name) => {
-      if (name === this.name) {
-        this.checked = this.$refs.radio?.checked;
+    this.$globalEvents.$on(`radio:update:${this.name}`, (uid) => {
+      if (this.uid !== uid) {
+        this.checked = false;
       }
     });
   },
   data() {
     return {
       checked: this.isChecked,
+      uid: generateUID(),
     };
   },
   methods: {
     onClick() {
       if (!this.disabled) {
-        this.checked = this.$refs.radio?.checked;
+        this.checked = !this.checked;
+        this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);
         this.$emit("input", this.checked);
         this.$emit("change", this.checked);
-        this.$globalEvents.$emit("radio:update", this.name);
       }
     },
     onChange() {
       if (!this.disabled) {
-        this.checked = this.$refs.radio?.checked;
+        this.checked = !this.checked;
+        this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);
         this.$emit("change", this.checked);
         this.$emit("input", this.checked);
-        this.$globalEvents.$emit("radio:update", this.name);
       }
     },
   },