<template>
  <div class="trezo-card-dropdown inline-block relative">
    <button
      type="button"
      :class="{
        'trezo-card-dropdown-btn inline-block rounded-md border border-gray-100 py-[5px] md:py-[6.5px] px-[12px] md:px-[19px] transition-all hover:bg-gray-50 dark:border-[#172036] dark:hover:bg-[#0a0e19]': true,
        active: isActive,
      }"
      id="dropdownToggle"
      @click.stop="toggleActive"
    >
      <span
        class="inline-block relative ltr:pr-[17px] ltr:md:pr-[20px] rtl:pl-[17px] rtl:ml:pr-[20px]"
      >
        Monthly
        <i
          class="ri-arrow-down-s-line text-lg absolute ltr:-right-[3px] rtl:-left-[3px] top-1/2 -translate-y-1/2"
        ></i>
      </span>
    </button>
    <ul
      class="trezo-card-dropdown-menu transition-all bg-white shadow-3xl rounded-md top-full py-[15px] absolute ltr:left-0 rtl:right-0 w-[195px] z-[5] dark:bg-dark dark:shadow-none"
    >
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          Weekly
        </button>
      </li>
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          Monthly
        </button>
      </li>
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          Yearly
        </button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useClickOutside } from "@/utils/useClickOutside";

export default defineComponent({
  name: "DropdownsOne",
  setup() {
    const { isActive, toggleActive } = useClickOutside("dropdownToggle");

    return {
      isActive,
      toggleActive,
    };
  },
});
</script>

  <template> 
  <div class="trezo-card-dropdown inline-block relative">
    <button
      type="button"
        :class="{
          'trezo-card-dropdown-btn inline-block transition-all text-[26px] text-gray-500 dark:text-gray-400 leading-none hover:text-primary-500': true,
          active: isActive,
        }"
        id="dropdownToggle"
        @click.stop="toggleActive"
    >
      <i class="ri-more-fill"></i>
    </button>
    <ul
      class="trezo-card-dropdown-menu transition-all bg-white shadow-3xl rounded-md top-full py-[15px] absolute ltr:left-0 rtl:right-0 w-[195px] z-[5] dark:bg-dark dark:shadow-none"
    >
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          This Day
        </button>
      </li>
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          This Week
        </button>
      </li>
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          This Month
        </button>
      </li>
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          This Year
        </button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useClickOutside } from "@/utils/useClickOutside";

export default defineComponent({
  name: "DropdownsTwo",
  setup() {
    const { isActive, toggleActive } = useClickOutside("dropdownToggle");

    return {
      isActive,
      toggleActive,
    };
  },
});
</script>

  <template>
  <div class="trezo-card-dropdown inline-block relative">
    <button
      type="button"
          :class="{
            'trezo-card-dropdown-btn inline-block transition-all hover:text-primary-500': true,
            active: isActive,
          }"
          id="dropdownToggle"
          @click.stop="toggleActive"
    >
      <span
        class="inline-block relative ltr:pr-[17px] ltr:md:pr-[20px] rtl:pl-[17px] rtl:ml:pr-[20px]"
      >
        This Day
        <i
          class="ri-arrow-down-s-line text-lg absolute ltr:-right-[3px] rtl:-left-[3px] top-1/2 -translate-y-1/2 mt-[2px]"
        ></i>
      </span>
    </button>
    <ul
      class="trezo-card-dropdown-menu transition-all bg-white shadow-3xl rounded-md top-full py-[15px] absolute ltr:left-0 rtl:right-0 w-[195px] z-[5] dark:bg-dark dark:shadow-none"
    >
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          This Day
        </button>
      </li>
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          This Week
        </button>
      </li>
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          This Month
        </button>
      </li>
      <li>
        <button
          type="button"
          class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
        >
          This Year
        </button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, } from "vue";
import { useClickOutside } from "@/utils/useClickOutside";

export default defineComponent({
  name: "DropdownsThree",
  setup() {
    const { isActive, toggleActive } = useClickOutside("dropdownToggle");

    return {
      isActive,
      toggleActive,
    };
  },
});
</script>

  
    <template> 
    <div class="trezo-card-dropdown inline-block relative">
      <button
          :class="{
            'trezo-card-dropdown-btn inline-block py-[10px] px-[30px] bg-primary-500 text-white transition-all hover:bg-primary-400 rounded-md border border-primary-500 hover:border-primary-400': true,
            active: isActive,
          }"
          id="dropdownToggle"
          @click.stop="toggleActive"
        type="button"
      >
        <span
          class="inline-block relative ltr:pr-[17px] ltr:md:pr-[20px] rtl:pl-[17px] rtl:ml:pr-[20px]"
        >
          Dropdown
          <i
            class="ri-arrow-down-s-line text-lg absolute ltr:-right-[3px] rtl:-left-[3px] top-1/2 -translate-y-1/2 mt-px"
          ></i>
        </span>
      </button>
      <ul
        class="trezo-card-dropdown-menu transition-all bg-white shadow-3xl rounded-md top-full py-[15px] absolute ltr:left-0 rtl:right-0 w-[195px] z-[5] dark:bg-dark dark:shadow-none"
      >
        <li>
          <button
            type="button"
            class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
          >
            Weekly
          </button>
        </li>
        <li>
          <button
            type="button"
            class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
          >
            Monthly
          </button>
        </li>
        <li>
          <button
            type="button"
            class="block w-full transition-all text-black ltr:text-left rtl:text-right relative py-[8px] px-[20px] hover:bg-gray-50 dark:text-white dark:hover:bg-black"
          >
            Yearly
          </button>
        </li>
      </ul>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
  import { useClickOutside } from "@/utils/useClickOutside";
  
  export default defineComponent({
    name: "DropdownsFour",
    setup() {
      const { isActive, toggleActive } = useClickOutside("dropdownToggle");
  
      return {
        isActive,
        toggleActive,
      };
    },
  });
  </script>