See on NPM

vuetify-more-component

More components for vuetify.

Add new components like:

• DigitalTimePicker: simpler and more minimalistic version of Vuetify's v-time-picker.
• LoadingOverlay: a customizable overlay that indicates that the process or page is loading.
• PdfViewer: customizable component that allows viewing any PDF encoded in Base64, up to 512MB!.
• CustomTable: customizable top for vuetify tables that allow you want download file pdf or excel.

Digital Time Picker

Default Component

Custom Component

Loading Overlay

Default Component

Custom Component

PDF Viewer

Default Component

Custom Example 1

Custom Example 2

It can display entire books and PDFs larger than 400mb!

PDF Custom Table

Default Component

It can download file pdf or excel or both

Example excel downloaded

Custom Component

Example custom pdf downloaded

Installation

npm install vuetify-more-component@latest

Usage

import { loadingOverlay,  digitalTimePicker, pdfViewer, customTable } from "vuetify-more-component";

export default {
  components: {
    digitalTimePicker,
    loadingOverlay,
    pdfViewer,
    customTable
  },
  data() {
    return {
      /* loadingOverlay*/
      loadingStatus: false,

      /* digitalTimePicker */
      time: "00:00",
      menu: null,

      /* pdfViewer */
      dialogStatus: false, // send the state to show the visualizer
      pdf: "", // send base64 encoded pdf in format data:application/pdf;base64,


      /* customTable */
      search_table: "", // search something about information table
      headers: [
        { text: "id", value: "id", align: "center" },
        { text: "description", value: "description", align: "center" },
      ], // headers vuetify table 

      items: [
        { id: 1, description: "item 1" },
        { id: 2, description: "item 2" },
        { id: 3, description: "item 3" },
      ], // items vuetify table

      headers_pdf: ["ID", "DESCRIPTION"], // headers to map in file pdf
    }
  },
}

<template>
  <div>
    <!-- LOADING OVERLAY -->

    <!-- DEFAULT -->
    <loadingOverlay :loading="loadingStatus"/> 
    <!-- CUSTOM -->
    <loadingOverlay
      :loading="loadingStatus"
      :titleName="'LOADING'"
      :titleColor="'#FF9800'"
      :subtitleName="'Please wait'"
      :subtitleColor="'#FFE0B2'"
      :type="'ripples'"
      :backgroundColor="'#151515'"
      :color1="'#E65100'"
      :color2="'#EF6C00'"
      :color3="'#F57C00'"
      :color4="'#FB8C00'"
    />
    <!-- TYPES: ellipsis, ripples, roller, squares, -->
  </div>

  <!-- DIGITAL TIME PICKER -->
  
  <!-- DEFAULT -->
  <div>
    <v-menu
      ref="menu"
      v-model="menu2"
      :close-on-content-click="false"
      :nudge-right="40"
      transition="scale-transition"
      offset-y
      max-width="290px"
      min-width="290px"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="time"
          label="Select time"
          required
          prepend-icon="mdi-clock-time-four-outline"
          readonly
          v-bind="attrs"
          v-on="on"
        ></v-text-field>
      </template>
      <digitalTimePicker
        v-model="time"
      ></digitalTimePicker>
    </v-menu>
  </div>
  <!-- CUSTOM -->
  <div>
    <v-menu
      ref="menu"
      v-model="menu"
      :close-on-content-click="false"
      :nudge-right="40"
      transition="scale-transition"
      offset-y
      max-width="290px"
      min-width="290px"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="time"
          label="Select time"
          required
          prepend-icon="mdi-clock-time-four-outline"
          readonly
          v-bind="attrs"
          v-on="on"
        ></v-text-field>
      </template>
      <digitalTimePicker
        v-model="time"
        :titleName="'Custom Title'"
        :lblHour="'HR'"
        :lblMinute="'MIN'"
        :hideBtnClear="false"
        :hideBtnNow="false"
        :btnClear="'Delete'"
        :btnNow="'Current'"
        :backgroundColor="'#E65100'"
        :minHour="8"
        :maxHour="17"
      ></digitalTimePicker>
    </v-menu>
  </div>

  <!-- PDF VIEWER -->

  <!-- DEFAULT -->
  <pdfViewer
    :dialogStatus="dialogStatus"
    @closePdfViewer="dialogStatus = false"
    :pdf="pdf"
  ></pdfViewer>
  <!-- CUSTOM -->
  <pdfViewer
    :dialogStatus="dialogStatus" 
    @closePdfViewer="dialogStatus = false"
    :pdf="pdf" 
    :documentName="'Document name'"
    :btnCloseName="'Back'"
    :btnCloseColor="'#E65100'"
    :typeBtnClose="'text'"
    :hideBtnClose="false" 
    :hideIconClose="true"
  ></pdfViewer>


  <!-- CUSTOM TABLE -->

  <!-- DEFAULT -->
  <v-data-table
    :headers="headers"
    :items="items"
    :search="search_table"
  >
    <template v-slot:top>
      <customTable
        @find="(data) => (search_table = data)"
        :columns="headers_pdf"
        :rows="items"
      ></customTable>
    </template>
  </v-data-table>

  <!-- CUSTOM -->

    <v-data-table
    :headers="headers"
    :items="items"
    :search="search_table"
  >
    <template v-slot:top>
      <customTable
        @find="(data) => (search_table = data)"
        :columns="headers_pdf"
        :rows="items"
        :btn_color_pdf="'#FF6363'"
        :btn_color_excel="'#CEEDC7'"
        :text_field_label="'Search code here'"
        :size_letter_title_pdf="30"
        :size_letter_data_pdf="10"
        :titleTable="'Custom Title'"
      ></customTable>
    </template>
  </v-data-table>
</template>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.