classcard-ui 0.2.792 → 0.2.793

package/package.json

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

package/src/components/CTable/CTable.vue

@@ -75,7 +75,11 @@
           </div>
           <slot name="customDatePicker"></slot>
 
-          <div v-if="enableDownload" @click="startDownload">
+          <!-- simple download button -->
+          <div
+            v-if="enableDownload && !downloadDropdown"
+            @click="startDownload"
+          >
             <c-button-icon
               type="white"
               :icon="
@@ -92,6 +96,64 @@
               :isLoading="downloadLoader"
             ></c-button-icon>
           </div>
+          <!-- download button with download options -->
+          <div v-else class="relative ml-3">
+            <div>
+              <button
+                @click="handleDownloadToggle"
+                class="inline-flex w-full justify-center rounded-md border border-gray-200 bg-white px-2 py-2 text-sm font-medium shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+                aria-haspopup="true"
+                aria-expanded="true"
+              >
+                <c-icon
+                  v-if="downloadOptionLoader"
+                  cursorType="cursor-pointer"
+                  class="mr-2 h-5 w-5 text-gray-400"
+                  name="loader"
+                ></c-icon>
+                <c-icon
+                  v-else
+                  name="download-solid"
+                  type="solid"
+                  class="h-5 w-5 text-gray-400"
+                ></c-icon>
+                <c-icon
+                  name="chevron-down"
+                  type="solid"
+                  class="ml-1 h-5 w-5 text-gray-400"
+                ></c-icon>
+              </button>
+            </div>
+            <!-- download options dropdown -->
+            <div
+              v-if="toggleDownloadDropdown"
+              @click="handleDownloadToggle"
+              class="fixed inset-0 z-20"
+            ></div>
+            <div
+              v-if="toggleDownloadDropdown"
+              class="absolute right-0 z-30 mt-2 -mr-1 max-h-96 w-64 origin-top-right overflow-y-auto rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
+              tabindex="0"
+            >
+              <div
+                class="py-1"
+                role="menu"
+                aria-orientation="vertical"
+                aria-labelledby="option-menu"
+              >
+                <div
+                  v-for="(item, index) in showDownloadDropdownList"
+                  :key="index"
+                  class="cursor-pointer px-4 py-2 text-sm text-gray-900 hover:bg-gray-100 hover:text-gray-900"
+                  role="menuitem"
+                  @click="downloadFromOption(item.value)"
+                >
+                  <p>{{ item.title }}</p>
+                  <p class="text-sm text-gray-400">{{ item.description }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -316,6 +378,10 @@ export default {
     showHideColumnList: {
       type: Array,
     },
+    // List of items to show download options
+    // showDownloadDropdownList: {
+    //   type: Array,
+    // },
     // Function on changing page number
     onPageChange: {
       type: Function,
@@ -336,6 +402,13 @@ export default {
     downloadLoader: {
       type: Boolean,
     },
+    // Start the loader
+    downloadOptionLoader: {
+      type: Boolean,
+    },
+    downloadDropdown: {
+      type: Boolean,
+    },
     rowStyleClassFn: {
       type: Function,
       default: () => "",
@@ -373,11 +446,26 @@ export default {
   data() {
     return {
       toggleDropdown: false,
+      toggleDownloadDropdown: false,
       showLoader: this.isLoading,
       searchTerm: this.searchQuery ? this.searchQuery : "",
       paginationRecords: this.paginationData,
       reorderedArray: [...this.rows],
       controlClick: false,
+      showDownloadDropdownList: [
+        {
+          title: "Download",
+          value: "summary",
+          description:
+            "Downloads each invoice, as a separate row, with invoice items comma separated.",
+        },
+        {
+          title: "Detailed download",
+          value: "detailed",
+          description:
+            "Downloads each invoice line-item, as a separate row (recommended for importing into accounting softwares).",
+        },
+      ],
     };
   },
   methods: {
@@ -396,6 +484,9 @@ export default {
     handleToggle() {
       this.toggleDropdown = !this.toggleDropdown;
     },
+    handleDownloadToggle() {
+      this.toggleDownloadDropdown = !this.toggleDownloadDropdown;
+    },
     showHideColumn(value, name) {
       this.$emit("hideCols", value, name);
     },
@@ -459,6 +550,10 @@ export default {
     startDownload() {
       this.$emit("handleDownloadButton");
     },
+    downloadFromOption(value) {
+      this.toggleDownloadDropdown = false;
+      this.$emit("handleDownloadOptionButton", value);
+    },
   },
   watch: {
     isLoading() {