classcard-ui 0.2.666 → 0.2.671

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,333 +0,0 @@
-<template>
-  <div>
-    <div class="flex w-full items-center justify-between" v-if="label">
-      <div class="flex items-center">
-        <!-- label of multiselect field -->
-        <label v-if="label" class="text-sm font-medium text-gray-900">{{ label }}</label>
-        <!-- asterisk sign to render if field is required -->
-        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
-      </div>
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-    <v-select
-      class="disabled-opacity-50 disabled-pointer-events-none disabled-cursor-default mt-1 text-sm"
-      :placeholder="placeholder"
-      :multiple="isMultiple"
-      :taggable="isTaggable"
-      :push-tags="pushTags"
-      :filterable="filterable"
-      v-model="value"
-      :options="options"
-      @input="setSelectedOptions"
-      @search="fetchOptions"
-      @search:focus="$emit('search:focus')"
-      :label="optionLabel"
-      :clearable="clearable"
-      :loading="loading"
-      @open="onOpen"
-      @close="onClose"
-      :disabled="isDisabled"
-    >
-      <template #open-indicator="{ attributes }">
-        <span v-bind="attributes">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 cursor-pointer text-gray-400"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </template>
-      <!-- eslint-disable-next-line vue/no-unused-vars  -->
-      <template #no-options="{ search, searching, loading }">
-        <span v-if="search.length < 1">Start typing to search for options...</span>
-        <span v-else>No options found, try searching something else.</span>
-      </template>
-      <template #spinner="{ loading }">
-        <svg
-          class="h-5 w-5 animate-spin text-gray-400"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          v-if="loading"
-        >
-          <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>
-      <template slot="option" slot-scope="option">
-        <slot name="custom-option" v-bind:option="option"></slot>
-      </template>
-      <template v-if="showOptionImage" v-slot:option="option">
-        <div :class="`flex w-full ${option.description ? 'items-start' : 'items-center'}`">
-          <c-avatar
-            v-if="option.image"
-            size="extraextrasmall"
-            :image="option.image"
-            :rounded="true"
-            :description="option.description"
-            class="mr-2"
-          ></c-avatar>
-          <c-avatar
-            v-else
-            size="extraextrasmall"
-            :nameInitials="option.initials"
-            :description="option.description"
-            :rounded="true"
-            class="mr-2"
-          ></c-avatar>
-          <div class="w-full">
-            <p>{{ option[optionLabel] }}</p>
-            <p class="text-xs" v-if="option.description">
-              {{ option.description }}
-            </p>
-          </div>
-        </div>
-      </template>
-      <template #list-footer>
-        <li ref="load" class="loader" v-show="hasNextPage">Loading more options...</li>
-        <li
-          v-if="showFooterButton"
-          class="group sticky bottom-0 mt-1 cursor-pointer select-none bg-gray-50 py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-          id="listbox-option-0"
-          role="option"
-          @click="$emit('footerButtonClick')"
-        >
-          <div class="flex items-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6 flex-shrink-0 text-gray-400"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
-                clip-rule="evenodd"
-              />
-            </svg>
-            <span class="ml-3 block truncate font-semibold">
-              {{ footerButtonText }}
-            </span>
-          </div>
-        </li>
-      </template>
-    </v-select>
-
-    <p v-if="subLabel" class="mt-1 text-sm text-gray-500">{{ subLabel }}</p>
-    <p v-if="!isValidate" class="mt-1 text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-  </div>
-</template>
-<script>
-import vSelect from "vue-select";
-import CAvatar from "../CAvatar/CAvatar.vue";
-import { debounce } from "lodash-es";
-// import Fuse from "fuse.js";
-import "vue-select/dist/vue-select.css";
-export default {
-  name: "CMultiselect",
-  components: { vSelect, CAvatar },
-  props: {
-    options: {
-      type: Array,
-      required: true,
-    },
-    showFooterButton: {
-      type: Boolean,
-      default: false,
-    },
-    footerButtonText: {
-      type: String,
-      default: "",
-    },
-    label: String,
-    isRequired: {
-      type: Boolean,
-    },
-    subLabel: String,
-    placeholder: {
-      type: String,
-      default: "Start typing... (min 2 characters) to search options",
-    },
-    // whether multiple fields are allowed or not
-    isMultiple: {
-      type: Boolean,
-    },
-    // append newly created tags in options
-    pushTags: {
-      type: Boolean,
-    },
-    // whether to allow user to create new options
-    isTaggable: {
-      type: Boolean,
-    },
-    getOptions: {
-      // function to emit on search{
-      type: Function,
-    },
-    customiseOption: {
-      type: Boolean,
-    },
-    // whether to show profile picture in option
-    showOptionImage: {
-      type: Boolean,
-    },
-    // the name of the option to render in the selectpicker
-    optionLabel: {
-      type: String,
-    },
-    // action to trigger after selecting option from dropdown
-    onSelectOptions: {
-      type: Function,
-    },
-    optionsSelected: {
-      type: [Array, Object],
-    },
-    filterable: {
-      type: Boolean,
-      default: false,
-    },
-    clearable: {
-      type: Boolean,
-      default: true,
-    },
-    isValidate: {
-      type: Boolean,
-      default: true,
-    },
-    errorMessage: {
-      type: String,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    hasNextPage: {
-      type: Boolean,
-      default: false,
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    // text adjacent to label of dropdown to provide hint about field
-    hint: { type: String },
-  },
-  computed: {},
-  data() {
-    return {
-      loaderSearching: true,
-      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
-      observer: null,
-    };
-  },
-  methods: {
-    fetchOptions(search, loaderSearching) {
-      this.emitGetOptions(search, loaderSearching);
-    },
-    emitGetOptions: debounce(function (search, loaderSearching) {
-      this.$emit("getOptions", search, loaderSearching);
-    }, 300),
-    setSelectedOptions(params) {
-      this.value = params;
-      this.$emit("onSelectOptions", params);
-    },
-    async onOpen() {
-      if (this.hasNextPage) {
-        await this.$nextTick();
-        if (this.$refs?.load && this.observer) {
-          this.observer.observe(this.$refs.load);
-        } else {
-          setTimeout(() => {
-            this.onOpen();
-          }, 500);
-        }
-      }
-      this.emitGetOptions("", true);
-    },
-    onClose() {
-      this.observer.disconnect();
-    },
-    async infiniteScroll([{ isIntersecting }]) {
-      if (isIntersecting) {
-        this.emitLoadNextPage();
-      }
-    },
-    emitLoadNextPage: debounce(function () {
-      this.$emit("loadNextPage");
-    }, 300),
-  },
-  watch: {
-    optionsSelected() {
-      this.value = this.optionsSelected;
-    },
-  },
-  mounted() {
-    this.observer = new IntersectionObserver(this.infiniteScroll);
-  },
-};
-</script>
-<style>
-.v-select {
-  @apply cursor-pointer;
-}
-.vs__dropdown-toggle {
-  @apply focus:outline-none w-full rounded-md border border-gray-300 bg-white pl-3 text-left shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-}
-.vs__selected-options {
-  @apply flex-wrap overflow-hidden;
-}
-.vs--open .vs__dropdown-toggle {
-  border-bottom-color: rgba(212, 212, 216, var(--tw-border-opacity));
-  @apply rounded-b-md;
-}
-.vs__selected {
-  @apply m-0 mr-1 border-none py-0 pl-1.5 pr-1.5;
-  margin-bottom: 2px;
-}
-.vs__selected-options {
-  @apply pl-0;
-  padding-top: 0.5px;
-  padding-bottom: 1px;
-}
-.vs__search,
-.vs__search:focus {
-  @apply m-0 p-0;
-}
-.vs__actions {
-  @apply pt-0 pr-3;
-}
-.vs__dropdown-menu {
-  @apply focus:outline-none mt-2 max-h-60 overflow-auto rounded-md bg-white py-0 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm;
-}
-.vs__dropdown-option {
-  @apply py-2;
-}
-.vs__dropdown-toggle.vs__dropdown-option--highlight {
-  @apply bg-indigo-700 text-white;
-}
-.vs__dropdown-option--highlight {
-  @apply bg-indigo-700 text-white;
-}
-</style>

package/src/components/CMultiselect/index.js

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

package/src/components/CMultiselectr/CMultiselectr.vue

@@ -1,44 +0,0 @@
-<template>
-  <div>
-     <!-- <label class="text-sm text-gray-900">{{label}}</label>
-    <multiselect class="mt-1" v-model="value" :options="options" :multiple="true">
-    </multiselect> -->
-  </div>
-</template>
-<script>
-
-export default {
-  // name: "CMultiselect",
-  // components: { Multiselect },
-  // props: {
-  //   options: {
-  //     type: Array,
-  //     required: true,
-  //   },
-  //   label:String
-  // },
-  // computed: {},
-  // data() {
-  //   return {
-  //     value: [],
-  //   };
-  // },
-};
-</script>
-<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
-<style>
-.multiselect__tags {
-  border: 1px solid #d1d5db;
-}
-.multiselect__placeholder {
-  color: #111827;
-}
-.multiselect__tag,
-.multiselect__tag-icon:after,
-.multiselect__tag-icon:hover,
-.multiselect__option--highlight,
-.multiselect__option--highlight::after {
-  background: #0369A1;
-  color: #fff;
-}
-</style>

package/src/components/CMultiselectr/index.js

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

package/src/components/CPageHeading/CPageHeading.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="sticky top-0 z-10 -mx-16 bg-transparent px-16 backdrop-blur-xl">
-    <div
-      class="flex flex-col items-start justify-between pt-4 pb-2 sm:max-w-full sm:flex-row sm:items-center sm:pb-1"
-    >
-      <div>
-        <h2
-          class="mt-1 text-xl font-bold leading-7 text-gray-900 sm:mt-0 sm:truncate sm:text-xl"
-        >
-          {{ title }}
-        </h2>
-      </div>
-      <div class="justify-self-end">
-        <slot></slot>
-        <div v-if="buttonType" class="mt-5 flex sm:mt-0 lg:mt-0 lg:ml-4">
-          <span class="sm:ml-3">
-            <c-button
-              :label="buttonType.label"
-              :icon="buttonType.icon"
-              :type="buttonType.type"
-              @action="emitAction"
-            ></c-button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CButton from "../CButton/CButton.vue";
-export default {
-  name: "CPageHeading",
-  components: { CButton },
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    description: { type: String },
-    helpVideo: {
-      type: String,
-    },
-    helpArticle: { type: String },
-    buttonType: { type: Object },
-    callAction: {
-      type: Function,
-    },
-  },
-  methods: {
-    emitAction() {
-      this.$emit("callAction");
-    },
-  },
-};
-</script>

package/src/components/CPageHeading/index.js

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

package/src/components/CPagination/CPagination.vue

@@ -1,202 +0,0 @@
-<template>
-  <div
-    class="flex items-center justify-between border-gray-200 bg-white px-4 py-3 sm:px-6"
-  >
-    <div class="flex flex-1 justify-between sm:hidden">
-      <a
-        href="#"
-        class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
-      >
-        Previous
-      </a>
-      <a
-        href="#"
-        class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
-      >
-        Next
-      </a>
-    </div>
-    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-      <div>
-        <p class="text-sm text-gray-700">
-          Showing
-          <span class="font-medium">{{ setPaginationRecords.from }}</span>
-          to
-          <span class="font-medium">{{ setPaginationRecords.to }}</span>
-          of
-          <span class="font-medium">{{
-            setPaginationRecords.totalRecords
-          }}</span>
-          results
-        </p>
-      </div>
-      <div>
-        <nav
-          class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
-          aria-label="Pagination"
-        >
-          <div class="hidden md:-mt-px md:flex">
-            <div
-              href="#"
-              @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
-              class="relative inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
-              :class="
-                currentPageNumber == '1'
-                  ? 'pointer-events-none text-gray-400'
-                  : 'group cursor-pointer text-gray-500 hover:text-gray-700'
-              "
-            >
-              <span class="sr-only">Previous</span>
-              <!-- Heroicon name: solid/chevron-left -->
-              <svg
-                class="h-5 w-5"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </div>
-            <div
-              v-for="page in pageRange"
-              :key="page"
-              class="cursor-pointer"
-              :class="[
-                page == currentPageNumber
-                  ? 'relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600'
-                  : '',
-                page === '...'
-                  ? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
-                  : '',
-                page !== currentPageNumber && page !== '...'
-                  ? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
-                  : '',
-                page == currentPageNumber + 1 ? 'border-l-0' : '',
-              ]"
-              @click="changePage(page)"
-            >
-              <div v-if="page === '...'">...</div>
-              <div v-else>
-                {{ page }}
-              </div>
-            </div>
-            <div
-              href="#"
-              class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
-              @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
-              :class="
-                currentPageNumber == lastPageNumber
-                  ? 'pointer-events-none text-gray-400'
-                  : 'group cursor-pointer text-gray-500 hover:text-gray-700'
-              "
-            >
-              <span class="sr-only">Next</span>
-              <!-- Heroicon name: solid/chevron-right -->
-              <svg
-                class="h-5 w-5"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </div>
-          </div>
-        </nav>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { isEqual } from "lodash-es";
-
-export default {
-  name: "CPagination",
-  props: {
-    setPaginationRecords: {
-      type: Object,
-    },
-    setCurrentPage: {
-      type: Function,
-    },
-    setPreviousPage: {
-      type: Function,
-    },
-    setNextPage: {
-      type: Function,
-    },
-  },
-  components: {},
-  data() {
-    return {
-      currentPageNumber: this.setPaginationRecords.currentPage,
-      lastPageNumber: this.setPaginationRecords.lastPage,
-    };
-  },
-  computed: {
-    pageRange() {
-      var current = this.setPaginationRecords.currentPage,
-        last = this.setPaginationRecords.lastPage,
-        delta = 2,
-        left = current - delta,
-        right = current + delta + 1,
-        range = [],
-        rangeWithDots = [],
-        l;
-      for (let i = 1; i <= last; i++) {
-        if (i == 1 || i == last || (i >= left && i < right)) {
-          range.push(i);
-        }
-      }
-      for (let i of range) {
-        if (l) {
-          if (i - l === 2) {
-            rangeWithDots.push(l + 1);
-          } else if (i - l !== 1) {
-            rangeWithDots.push("...");
-          }
-        }
-        rangeWithDots.push(i);
-        l = i;
-      }
-      return rangeWithDots;
-    },
-  },
-  methods: {
-    changePage(page) {
-      if (page !== "...") {
-        this.$emit("setCurrentPage", page);
-        this.currentPageNumber = page;
-      }
-    },
-    goToPreviousPage() {
-      var previousPage = this.currentPageNumber - 1;
-      this.currentPageNumber = previousPage;
-      this.$emit("setPreviousPage", previousPage);
-    },
-    goToNextPage() {
-      var nextPage = this.currentPageNumber + 1;
-      this.currentPageNumber = nextPage;
-      this.$emit("setNextPage", nextPage);
-    },
-  },
-  watch: {
-    setPaginationRecords(newVal, oldVal) {
-      if (!isEqual(newVal, oldVal)) {
-        this.currentPageNumber = newVal.currentPage;
-        this.lastPageNumber = newVal.lastPage;
-      }
-    },
-  },
-};
-</script>

package/src/components/CPagination/index.js

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