classcard-ui 0.2.1494 → 0.2.1495

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1494",
+  "version": "0.2.1495",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue

@@ -12,7 +12,7 @@
         <c-icon v-if="isLoading" class="mr-2 h-4 w-4" name="loader"></c-icon>
         {{ selectedValue ? selectedValue : label }}
       </button>
-      <span class="relative -ml-px block">
+      <span class="relative -ml-px block" ref="dropdownTrigger">
         <button
           @click="toggleDropdown = !toggleDropdown"
           @blur="close()"
@@ -30,8 +30,11 @@
         </button>
         <div
           v-if="toggleDropdown"
-          :class="dropdownPositionClass"
-          class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
+          :class="[
+            dropdownPositionClass,
+            dropdownMenuClass,
+            'absolute z-10 w-56 rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5',
+          ]"
         >
           <div
             class="py-1"
@@ -59,6 +62,7 @@
 <script>
 import { getActionID } from "../../helper";
 import CIcon from "../CIcon/CIcon.vue";
+
 export default {
   name: "CButtonWithDropdown",
   components: { CIcon },
@@ -100,11 +104,10 @@ export default {
   data() {
     return {
       toggleDropdown: false,
-      isSelected: false,
       selectedValue: this.value,
+      dropdownMenuClass: "top-full right-0 mt-2 origin-top-right",
     };
   },
-
   computed: {
     classes() {
       return {
@@ -128,11 +131,52 @@ export default {
     getActionIDFn(name) {
       return getActionID(name, this.id);
     },
+    updateDropdownPlacement() {
+      if (this.ticking) return;
+
+      const trigger = this.$refs.dropdownTrigger;
+      if (!trigger) return;
+
+      this.ticking = true;
+      requestAnimationFrame(() => {
+        this.ticking = false;
+        if (!this.$refs.dropdownTrigger) return;
+
+        const { top, bottom, left, right } = trigger.getBoundingClientRect();
+        const alignRight = right >= window.innerWidth - left;
+        const menuHeight = (this.items || []).length * 36 + 8;
+        const openAbove =
+          window.innerHeight - bottom < menuHeight &&
+          top > window.innerHeight - bottom;
+        const horizontal = alignRight ? "right-0" : "left-0";
+
+        if (openAbove) {
+          this.dropdownMenuClass = alignRight
+            ? `bottom-full ${horizontal} mb-2 origin-bottom-right`
+            : `bottom-full ${horizontal} mb-2 origin-bottom-left`;
+        } else {
+          this.dropdownMenuClass = alignRight
+            ? `top-full ${horizontal} mt-2 origin-top-right`
+            : `top-full ${horizontal} mt-2 origin-top-left`;
+        }
+      });
+    },
+    togglePlacementListeners(active) {
+      if (active) {
+        window.addEventListener("resize", this.updateDropdownPlacement, {
+          passive: true,
+        });
+        window.addEventListener("scroll", this.updateDropdownPlacement, true);
+        return;
+      }
+
+      window.removeEventListener("resize", this.updateDropdownPlacement);
+      window.removeEventListener("scroll", this.updateDropdownPlacement, true);
+    },
     selectOption(event, value) {
       this.selectedValue = event.target.innerText;
       this.$emit("onSelectOption", value);
       this.toggleDropdown = false;
-      this.isSelected = true;
     },
     close() {
       this.toggleDropdown = false;
@@ -145,8 +189,20 @@ export default {
     value() {
       this.selectedValue = this.value;
     },
+    toggleDropdown(isOpen) {
+      if (isOpen) {
+        this.$nextTick(() => {
+          if (!this.toggleDropdown || !this.$refs.dropdownTrigger) return;
+          this.updateDropdownPlacement();
+          this.togglePlacementListeners(true);
+        });
+      } else {
+        this.togglePlacementListeners(false);
+      }
+    },
+  },
+  beforeDestroy() {
+    this.togglePlacementListeners(false);
   },
 };
 </script>
-
-<style></style>