classcard-ui 0.2.666 → 0.2.671

package/src/components/CTable/CTable.vue

@@ -1,536 +0,0 @@
-<template>
-  <div>
-    <div
-      slot="table-actions"
-      v-if="tableActions"
-      class="mb-4 rounded-lg bg-gray-50 p-3"
-    >
-      <div class="flex items-center justify-between">
-        <div v-if="searching" class="flex-1">
-          <c-input
-            v-model="searchTerm"
-            :isValidate="searching"
-            :placeholder="searchPlaceholder"
-            class="-mt-1 mr-3 w-auto sm:w-56"
-            type="text"
-          ></c-input>
-        </div>
-        <div class="flex flex-1 justify-end">
-          <!-- dropdown icon on top right of table -->
-          <slot name="customTableActions"></slot>
-          <div class="relative inline-block text-left" v-if="enableVisibility">
-            <!-- button to show list of columns to show  hide in table -->
-            <div>
-              <button
-                @click="handleToggle"
-                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
-                  name="view-board"
-                  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>
-            <!-- dropdown having list of all columns to show hide -->
-            <div
-              v-if="toggleDropdown"
-              @click="handleToggle"
-              class="fixed inset-0 z-20"
-            ></div>
-            <div
-              v-if="toggleDropdown"
-              class="absolute right-0 z-30 mt-2 -mr-1 max-h-96 w-56 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"
-              >
-                <a
-                  href="#"
-                  v-for="column in showHideColumnList"
-                  v-bind:key="column.field"
-                  class="block flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-                  role="menuitem"
-                >
-                  <c-checkbox
-                    :label="column.label"
-                    @onChange="showHideColumn($event, column.field)"
-                    :value="!column.hidden"
-                  ></c-checkbox>
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div v-if="enableDownload" @click="startDownload">
-            <c-button-icon
-              type="white"
-              :icon="
-                downloadLoader
-                  ? null
-                  : {
-                      name: 'download-solid',
-                      type: 'solid',
-                      class: 'h-5 w-5 text-gray-400',
-                    }
-              "
-              class="ml-3"
-              loaderClasses="ml-2"
-              :isLoading="downloadLoader"
-            ></c-button-icon>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <vue-good-table
-      :class="`overflow-hidden rounded-lg ${
-        hideBorder ? ' border-none' : 'border-2 border-solid border-gray-100'
-      }`"
-      mode="remote"
-      ref="my-table"
-      :styleClass="
-        showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'
-      "
-      :row-style-class="rowStyleClassFn"
-      min-height="400px"
-      :globalSearch="true"
-      :isLoading="showLoader"
-      :totalRows="totalRecords"
-      :columns="cols"
-      :rows="rows"
-      :search-options="{
-        enabled: searching,
-        externalQuery: searchTerm,
-        placeholder: searchPlaceholder,
-        trigger: 'enter',
-      }"
-      :select-options="{
-        enabled: enableSelection,
-        selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
-        selectionInfoClass: 'custom-class',
-        selectionText: 'rows selected',
-        clearSelectionText: 'clear',
-        disableSelectInfo: true, // disable the select info panel on top
-        selectAllByGroup: true, // when used in combination with a grouped table, add a checkbox in the header row to check/uncheck the entire group
-      }"
-      :sort-options="{
-        enabled: sorting,
-        initialSortBy: initialSortField,
-      }"
-      :pagination-options="{ enabled: pagination }"
-      :fixed-header="fixedHeader"
-      @on-selected-rows-change="selectionChanged"
-      @on-sort-change="sortChange"
-      @on-search="onSearching"
-      @on-row-click="onRowClick"
-    >
-      >
-      <template slot="table-column" slot-scope="props">
-        <!-- custom sorting icon -->
-        <span v-if="props.column.sortable || sorting" class="flex">
-          <div>
-            {{ props.column.label }}
-          </div>
-          <!-- render if there is no sorting order, appears on hover -->
-          <c-icon
-            v-if="props.column.direction == null"
-            name="sort-ascending-solid"
-            class="sortingIcon invisible ml-3 h-5 w-5"
-            type="solid"
-          ></c-icon>
-          <!-- renders when direction is asc -->
-          <c-icon
-            v-else-if="props.column.direction == 'asc'"
-            name="sort-ascending-solid"
-            class="ml-3 h-5 w-5"
-            type="solid"
-          ></c-icon>
-          <!-- renders when direction is desc -->
-          <c-icon
-            v-else-if="props.column.direction == 'desc'"
-            name="sort-descending-solid"
-            class="ml-3 h-5 w-5"
-            type="solid"
-          ></c-icon>
-        </span>
-        <span v-else>
-          {{ props.column.label }}
-        </span>
-      </template>
-      <template slot="table-row" slot-scope="props">
-        <!-- renders if drag and drop is present in table -->
-        <span v-if="props.column.field == 'drag'">
-          <c-icon
-            name="menu-solid"
-            type="solid"
-            class="handle h-5 w-5 text-gray-500"
-            :cursorType="'cursor-move'"
-          ></c-icon>
-        </span>
-        <!-- if customization or adding another form element is required -->
-        <span v-else-if="props.column.customizeColumn">
-          <slot :records="props"> </slot>
-        </span>
-        <!-- renders records as per column name -->
-        <span v-else>
-          {{ props.formattedRow[props.column.field] }}
-        </span>
-      </template>
-      <!-- Custom pagination component -->
-      <template v-if="pagination" slot="pagination-bottom">
-        <c-pagination
-          v-if="paginationRecords.totalRecords > 0"
-          :setPaginationRecords="paginationRecords"
-          @setCurrentPage="setCurrentPageRecords"
-          @setPreviousPage="setPreviousPageRecords"
-          @setNextPage="setNextPageRecords"
-        ></c-pagination>
-      </template>
-      <!-- Custom loader for table -->
-      <template slot="loadingContent">
-        <svg
-          class="ml-auto mr-auto h-7 w-7 animate-spin text-white"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          ></circle>
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          ></path>
-        </svg>
-      </template>
-      <!-- <div slot="emptystate"></div> -->
-    </vue-good-table>
-  </div>
-</template>
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-import CCheckbox from "../CCheckbox/CCheckbox.vue";
-import CPagination from "../CPagination/CPagination.vue";
-import CButtonIcon from "../CButtonIcon/CButtonIcon.vue";
-
-import "vue-good-table/dist/vue-good-table.css";
-import { VueGoodTable } from "vue-good-table";
-import Sortable from "@shopify/draggable/lib/es5/sortable.js";
-import CInput from "../CInput/CInput.vue";
-import { debounce, isEqual } from "lodash-es";
-
-export default {
-  name: "CTable",
-  components: {
-    CCheckbox,
-    CIcon,
-    VueGoodTable,
-    CPagination,
-    CButtonIcon,
-    CInput,
-  },
-  props: {
-    // To show or hide pagination section
-    pagination: {
-      type: Boolean,
-    },
-    // To enable or disable sorting
-    sorting: {
-      type: Boolean,
-    },
-    // To show or hide search input
-    searching: {
-      type: Boolean,
-    },
-    // To add checkbox to select rows
-    enableSelection: {
-      type: Boolean,
-    },
-    enableVisibility: {
-      type: Boolean,
-      default: true,
-    },
-    enableDownload: {
-      type: Boolean,
-      default: true,
-    },
-    // To show and hide loader on table
-    isLoading: {
-      type: Boolean,
-    },
-    // All the buttons displayed on top right side of table
-    tableActions: {
-      type: Boolean,
-    },
-    // Placeholder text for search
-    searchPlaceholder: {
-      type: String,
-    },
-    // Total number of rows in a table to calculate page numbers
-    totalRecords: {
-      type: String,
-    },
-    // Shows current selected page and records on per page
-    paginationData: {
-      type: Object,
-    },
-    // Pass a column  on which initial sorting will be applied
-    initialSortField: {
-      type: Object,
-    },
-    // all columns of the table
-    cols: {
-      type: Array,
-      required: true,
-    },
-    // row records of the table
-    rows: {
-      type: Array,
-      required: true,
-    },
-    // List of columns to show hide
-    showHideColumnList: {
-      type: Array,
-    },
-    // Function on changing page number
-    onPageChange: {
-      type: Function,
-    },
-    // Function on changing sorting on column
-    onSortChange: {
-      type: Function,
-    },
-    // Function to fetch results on search query
-    onSearch: {
-      type: Function,
-    },
-    // Emit action on clicking the row
-    onRowClickAction: {
-      type: Function,
-    },
-    // Start the loader
-    downloadLoader: {
-      type: Boolean,
-    },
-    rowStyleClassFn: {
-      type: Function,
-      default: () => "",
-    },
-    fixedHeader: {
-      type: Boolean,
-      default: false,
-    },
-    hideBorder: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  mounted() {
-    //  to add drag and drop in table
-    let sortable = new Sortable(document.querySelectorAll("tbody"), {
-      draggable: "tr",
-      handle: ".handle",
-      classes: {
-        mirror: ["bg-white"],
-      },
-      mirror: {
-        constrainDimensions: true,
-      },
-    });
-    sortable.on("sortable:stop", (e) => this.rearrange(e.oldIndex, e.newIndex));
-    document.addEventListener("keydown", this.handleControlClick, true);
-    document.addEventListener("keyup", this.handleControlRelease, true);
-  },
-  destroyed() {
-    //to remove the event listener
-    document.removeEventListener("keydown", this.handleControlClick, true);
-    document.removeEventListener("keyup", this.handleControlRelease, true);
-  },
-  data() {
-    return {
-      toggleDropdown: false,
-      showLoader: this.isLoading,
-      searchTerm: "",
-      paginationRecords: this.paginationData,
-      reorderedArray: [...this.rows],
-      controlClick: false,
-    };
-  },
-  methods: {
-    handleControlClick(event) {
-      if (event.keyCode === 17 || event.keyCode === 91) {
-        event.preventDefault();
-        this.controlClick = true;
-      }
-    },
-    handleControlRelease(event) {
-      if (event.keyCode === 17 || event.keyCode === 91) {
-        event.preventDefault();
-        this.controlClick = false;
-      }
-    },
-    handleToggle() {
-      this.toggleDropdown = !this.toggleDropdown;
-    },
-    showHideColumn(value, name) {
-      this.$emit("hideCols", value, name);
-    },
-    // Function to get selected rows on checking the checkbox
-    selectionChanged() {
-      this.$emit("selectRows", this.$refs["my-table"].selectedRows);
-    },
-    // array of rows after drag and drop
-    rearrange(oldIndex, newIndex) {
-      const movedItem = this.reorderedArray.find(
-        (item, index) => index === oldIndex
-      );
-      const remainingItems = this.reorderedArray.filter(
-        (item, index) => index !== oldIndex
-      );
-      const reorderedItems = [
-        ...remainingItems.slice(0, newIndex),
-        movedItem,
-        ...remainingItems.slice(newIndex),
-      ];
-      this.reorderedArray = [...reorderedItems];
-      this.$emit("reordered", this.reorderedArray);
-    },
-    // listing functions
-    sortChange(params) {
-      if (params[0].type == "none") {
-        params[0].type = "asc";
-      }
-      this.$emit("onSortChange", params);
-    },
-    onSearching: debounce(function (params) {
-      this.$emit("onSearch", params);
-    }, 500),
-    setCurrentPageRecords(page) {
-      this.paginationRecords.currentPage = page;
-      this.$emit("pageChange", page);
-    },
-    setPreviousPageRecords(page) {
-      this.paginationRecords.currentPage = page;
-      this.$emit("pageChange", page);
-    },
-    setNextPageRecords(page) {
-      this.paginationRecords.currentPage = page;
-      this.$emit("pageChange", page);
-    },
-    onRowClick(params) {
-      if (params.event.target.type === undefined) {
-        if (this.controlClick) {
-          this.$emit("onRowControlClickAction", params);
-        } else {
-          this.$emit("onRowClickAction", params);
-        }
-      } else {
-        return false;
-      }
-    },
-    startDownload() {
-      this.$emit("handleDownloadButton");
-    },
-  },
-  watch: {
-    isLoading() {
-      this.showLoader = this.isLoading;
-    },
-    paginationData(newValue, oldValue) {
-      if (!isEqual(newValue, oldValue)) {
-        this.paginationRecords = newValue;
-      }
-    },
-  },
-};
-</script>
-<style>
-.vgt-table {
-  border-spacing: 0;
-  border: none !important;
-  font-family: "Inter";
-  font-size: 14px !important;
-}
-table.vgt-table td {
-  vertical-align: middle;
-}
-.vgt-table thead th {
-  background: linear-gradient(#fff, #fff);
-}
-.vgt-table th.vgt-checkbox-col {
-  border-right: 0;
-  border-bottom: 1px solid #dcdfe6;
-  background: linear-gradient(#fff, #fff);
-}
-table.vgt-table tr.clickable:hover > th.vgt-checkbox-col {
-  background: #f1f5fd;
-  border-bottom: 1px solid #dcdfe6 !important;
-}
-.vgt-table th.sortable button::before,
-.vgt-table th.sortable button::after {
-  border-right: 0;
-  border-left: 0;
-}
-[type="checkbox"],
-[type="checkbox"]:focus {
-  border-radius: 4px;
-  border-color: #d1d5db;
-  cursor: pointer;
-  color: #0284c7;
-  --tw-ring-color: #0284c7;
-}
-
-/* tbody > tr > th.vgt-checkbox-col {
-  background: linear-gradient(#fff, #fff);
-  border-bottom: 1px solid #dcdfe6;
-} */
-.vgt-global-search {
-  background: none;
-  border: none;
-  padding: 0 0 12px 0;
-}
-.vgt-global-search__input {
-  padding-left: 0;
-}
-.input__icon {
-  display: none;
-}
-.vgt-global-search__input .vgt-input {
-  height: 38px;
-  width: 250px;
-}
-.vgt-inner-wrap {
-  box-shadow: none;
-}
-.vgt-inner-wrap.is-loading {
-  opacity: 1;
-  pointer-events: auto;
-}
-.vgt-table th.sortable:hover .sortingIcon {
-  visibility: visible;
-}
-.vgt-responsive {
-  position: static;
-}
-.vgt-wrap {
-  position: static;
-}
-</style>

package/src/components/CTable/index.js

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

package/src/components/CTabs/CTabs.vue

@@ -1,111 +0,0 @@
-<template>
-  <div>
-    <slot></slot>
-    <div class="lg:hidden" :class="tabClasses">
-      <label for="tabs" class="sr-only">Select a tab</label>
-      <select
-        v-model="activeTab"
-        @change="switchTabForMobile($event.target.selectedIndex)"
-        class="block w-full rounded-md border-gray-300 pr-6 pl-4 text-sm focus:border-indigo-500 focus:ring-indigo-500"
-        id="tabs"
-      >
-        <option
-          v-for="tab in tabs"
-          :key="tab.text"
-          :value="tab.name"
-          class="text-sm"
-        >
-          {{ tab.text }}
-        </option>
-      </select>
-    </div>
-    <div class="hidden lg:block">
-      <div class="border-b border-gray-200">
-        <nav :class="classes" class="-mb-px flex" aria-label="Tabs">
-          <a
-            v-for="tab in tabs"
-            :key="tab.text"
-            @click="switchTab(tab.name)"
-            class="group inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
-            :class="
-              activeTab == tab.name
-                ? 'border-indigo-600 text-indigo-700 hover:text-indigo-800'
-                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
-            "
-          >
-            <c-icon
-              v-if="tab.icon"
-              :name="tab.icon"
-              class="-ml-0.5 mr-2 h-5 w-5"
-              :class="
-                activeTab == tab.name
-                  ? 'text-indigo-700 group-hover:text-indigo-800'
-                  : 'text-gray-400 group-hover:text-gray-500 '
-              "
-              type="solid"
-            ></c-icon>
-            <span
-              :class="
-                activeTab == tab.name
-                  ? 'text-indigo-700'
-                  : 'text-gray-500 hover:text-gray-700'
-              "
-            >
-              {{ tab.text }}
-            </span>
-          </a>
-        </nav>
-      </div>
-    </div>
-    <div v-for="(tab, index) in tabs" :key="index">
-      <div v-show="tab.name == activeTab">
-        <slot :name="`tab-panel-${tab.name}`"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-// import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CTabs",
-  // components: { CIcon },
-  props: {
-    tabs: {
-      type: Array,
-      required: true,
-    },
-    initialTab: {
-      type: String,
-    },
-    classes: {
-      type: String,
-    },
-    tabClasses: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      activeTab: this.initialTab,
-    };
-  },
-  methods: {
-    switchTab(tabText) {
-      console.log(tabText);
-      this.activeTab = tabText;
-    },
-    switchTabForMobile(index) {
-      var selectedOption = this.tabs[index];
-      this.activeTab = selectedOption.name;
-    },
-  },
-  watch: {
-    initialTab() {
-      this.activeTab = this.initialTab;
-    },
-  },
-};
-</script>
-
-<style></style>

package/src/components/CTabs/index.js

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

package/src/components/CTag/CTag.vue

@@ -1,36 +0,0 @@
-<template>
-  <div>
-    <span
-      :class="[colorClasses, tagClasses]"
-      class="px-2.5 py-0.5 inline-flex text-sm leading-5 rounded-md"
-    >
-      {{ label }}
-    </span>
-  </div>
-</template>
-<script>
-export default {
-  name: "CTag",
-  props: {
-    label: { type: String },
-    color: { type: String, default: "green" },
-    tagClasses: {
-      type: String,
-    },
-  },
-  computed: {
-    colorClasses() {
-      return {
-        "bg-gray-100 text-gray-800": this.color == "gray",
-        "bg-red-100 text-red-800": this.color == "red",
-        "bg-yellow-100 text-yellow-800": this.color == "yellow",
-        "bg-green-100 text-green-800": this.color == "green",
-        "bg-blue-100 text-blue-800": this.color == "indigo",
-        "bg-purple-100 text-purple-800": this.color == "purple",
-        "bg-pink-100 text-pink-800": this.color == "pink",
-        "bg-indigo-100 text-indigo-800": this.color == "indigo",
-      };
-    },
-  },
-};
-</script>

package/src/components/CTag/index.js

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