classcard-ui 0.2.1497 → 0.2.1498-beta.0

package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue

@@ -1,208 +1,208 @@
-<template>
-  <div>
-    <span class="relative inline-flex rounded-md shadow-sm">
-      <button
-        :type="type"
-        @click="handleButtonClick"
-        :class="[classes, isDisabled ? 'opacity-50' : '']"
-        class="relative h-9 inline-flex items-center rounded-l-md px-3 py-2 text-sm font-medium focus:z-10 focus:outline-none focus:ring-1"
-        :disabled="isDisabled"
-        :id="id"
-      >
-        <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" ref="dropdownTrigger">
-        <button
-          @click="toggleDropdown = !toggleDropdown"
-          @blur="close()"
-          :type="type"
-          :class="[
-            classes,
-            isDisabled || isDropdownDisabled ? 'opacity-50' : '',
-          ]"
-          class="relative h-9 inline-flex items-center rounded-r-md px-2 py-2 text-sm font-medium focus:z-10 focus:outline-none focus:ring-1"
-          :disabled="isDisabled || isDropdownDisabled"
-          :id="id + '_button_dropdown'"
-        >
-          <span class="sr-only">Open options</span>
-          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
-        </button>
-        <div
-          v-if="toggleDropdown"
-          :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"
-            role="menu"
-            aria-orientation="vertical"
-            aria-labelledby="option-menu"
-          >
-            <li
-              v-for="item in items"
-              v-bind:key="item.items"
-              @mousedown="selectOption($event, item.value)"
-              class="block cursor-pointer px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-              role="menuitem"
-              :id="getActionIDFn(item.secondaryText)"
-            >
-              {{ item.text }}
-            </li>
-          </div>
-        </div>
-      </span>
-    </span>
-  </div>
-</template>
-
-<script>
-import { getActionID } from "../../helper";
-import CIcon from "../CIcon/CIcon.vue";
-
-export default {
-  name: "CButtonWithDropdown",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-    },
-    type: {
-      type: String,
-      default: "secondary",
-    },
-    value: {
-      type: String,
-    },
-    items: {
-      type: Array,
-      required: true,
-    },
-    dropdownPositionClass: {
-      type: String,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    isDropdownDisabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      toggleDropdown: false,
-      selectedValue: this.value,
-      dropdownMenuClass: "top-full right-0 mt-2 origin-top-right",
-    };
-  },
-  computed: {
-    classes() {
-      return {
-        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "border text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "secondary",
-        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
-          this.type == "success",
-        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
-          this.type == "danger",
-        "border border-green-800 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
-          this.type == "light-green",
-        "border border-red-800 bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
-          this.type == "light-red",
-        "cursor-default pointer-events-none": this.isLoading,
-      };
-    },
-  },
-  methods: {
-    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;
-    },
-    close() {
-      this.toggleDropdown = false;
-    },
-    handleButtonClick() {
-      this.$emit("action", this.selectedValue);
-    },
-  },
-  watch: {
-    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>
+<template>
+  <div>
+    <span class="relative inline-flex rounded-md shadow-sm">
+      <button
+        :type="type"
+        @click="handleButtonClick"
+        :class="[classes, isDisabled ? 'opacity-50' : '']"
+        class="relative h-9 inline-flex items-center rounded-l-md px-3 py-2 text-sm font-medium focus:z-10 focus:outline-none focus:ring-1"
+        :disabled="isDisabled"
+        :id="id"
+      >
+        <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" ref="dropdownTrigger">
+        <button
+          @click="toggleDropdown = !toggleDropdown"
+          @blur="close()"
+          :type="type"
+          :class="[
+            classes,
+            isDisabled || isDropdownDisabled ? 'opacity-50' : '',
+          ]"
+          class="relative h-9 inline-flex items-center rounded-r-md px-2 py-2 text-sm font-medium focus:z-10 focus:outline-none focus:ring-1"
+          :disabled="isDisabled || isDropdownDisabled"
+          :id="id + '_button_dropdown'"
+        >
+          <span class="sr-only">Open options</span>
+          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
+        </button>
+        <div
+          v-if="toggleDropdown"
+          :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"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="option-menu"
+          >
+            <li
+              v-for="item in items"
+              v-bind:key="item.items"
+              @mousedown="selectOption($event, item.value)"
+              class="block cursor-pointer px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+              role="menuitem"
+              :id="getActionIDFn(item.secondaryText)"
+            >
+              {{ item.text }}
+            </li>
+          </div>
+        </div>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script>
+import { getActionID } from "../../helper";
+import CIcon from "../CIcon/CIcon.vue";
+
+export default {
+  name: "CButtonWithDropdown",
+  components: { CIcon },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    id: {
+      type: String,
+    },
+    type: {
+      type: String,
+      default: "secondary",
+    },
+    value: {
+      type: String,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    dropdownPositionClass: {
+      type: String,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    isDropdownDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      toggleDropdown: false,
+      selectedValue: this.value,
+      dropdownMenuClass: "top-full right-0 mt-2 origin-top-right",
+    };
+  },
+  computed: {
+    classes() {
+      return {
+        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "border text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "secondary",
+        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
+          this.type == "success",
+        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
+          this.type == "danger",
+        "border border-green-800 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
+          this.type == "light-green",
+        "border border-red-800 bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
+          this.type == "light-red",
+        "cursor-default pointer-events-none": this.isLoading,
+      };
+    },
+  },
+  methods: {
+    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;
+    },
+    close() {
+      this.toggleDropdown = false;
+    },
+    handleButtonClick() {
+      this.$emit("action", this.selectedValue);
+    },
+  },
+  watch: {
+    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>

package/src/components/CButtonWithDropdown/index.js

@@ -1,3 +1,3 @@
-import CButtonWithDropdown from './CButtonWithDropdown.vue'
-
+import CButtonWithDropdown from './CButtonWithDropdown.vue'
+
 export default CButtonWithDropdown