classcard-ui 0.2.666 → 0.2.671

package/src/components/CBasicTable/CBasicTable.vue

@@ -1,184 +0,0 @@
-<template>
-  <div>
-    <div class="flex flex-col">
-      <div class="-my-2">
-        <div class="py-2 align-middle inline-block min-w-full">
-          <div class="">
-            <table :class="columnData ? 'divide-y divide-gray-200' : ''" class="min-w-full">
-              <thead class="table w-full table-fixed">
-                <tr v-if="columnData && columnData.length">
-                  <th v-if="enableSelection" class="px-2 py-3 sticky top-0 z-10 bg-gray-100">
-                    <c-checkbox @onChange="changeAllValues"></c-checkbox>
-                  </th>
-                  <th
-                    v-for="(column, index) in columnData"
-                    :key="index"
-                    scope="col"
-                    class="px-2 py-3 text-left text-sm font-medium text-gray-500 sticky top-0 z-10 bg-gray-100"
-                  >
-                    {{ column }}
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="bg-white divide-y divide-gray-200 max-h-96 block overflow-y-auto">
-                <tr
-                  v-for="(row, index) in rowRecords"
-                  @click="$emit('rowClick', index)"
-                  :key="row.index"
-                  class="align-top table w-full table-fixed"
-                  :class="[
-                    `${selectedRow && index === selectedIndex ? 'bg-indigo-100' : ''}`,
-                    `${disabledRow ? 'opacity-40 pointer-events-none' : ''}`,
-                  ]"
-                >
-                  <td
-                    v-for="(record, index) in row"
-                    :key="index"
-                    class="px-2 whitespace-nowrap text-sm text-gray-900"
-                    :class="columnClasses"
-                  >
-                    <c-checkbox
-                      v-if="enableSelection && record.isSelected"
-                      :value="record.isSelected.value"
-                    ></c-checkbox>
-                    <p v-else-if="record.tag">
-                      <c-tag :label="record.tag.label" :color="record.tag.color"></c-tag>
-                    </p>
-                    <p v-else-if="record.avatar">
-                      <c-avatar
-                        :image="record.avatar.image"
-                        :rounded="record.avatar.rounded"
-                        :size="record.avatar.size"
-                        :name="record.avatar.name"
-                        :description="record.avatar.description"
-                      ></c-avatar>
-                    </p>
-                    <p v-else-if="record.secondary" class="text-gray-500">
-                      {{ record.secondary.label }}
-                    </p>
-                    <p v-else-if="record.icon">
-                      <c-icon
-                        :type="record.icon.type"
-                        :class="record.icon.class"
-                        :name="record.icon.name"
-                      ></c-icon>
-                    </p>
-                    <p v-else-if="record.linkLabel">
-                      <a
-                        href="#"
-                        class="flex block text-sm text-indigo-600 hover:underline"
-                        @click.prevent="action"
-                      >
-                        {{ record.linkLabel.label }}
-                      </a>
-                    </p>
-                    <p v-else-if="record.switch">
-                      <c-switch :value="record.switch.value"></c-switch>
-                    </p>
-                    <div v-else-if="record.selectpicker">
-                      <c-select
-                        :placeholder="record.selectpicker.placeholder"
-                        :options="record.selectpicker.options"
-                        :dropdownClass="record.selectpicker.dropdownClass"
-                      ></c-select>
-                    </div>
-                    <div v-else-if="record.stackedList">
-                      <c-stacked-list
-                        :listItems="record.stackedList.items"
-                        :divider="record.stackedList.divider"
-                      ></c-stacked-list>
-                    </div>
-                    <div v-else-if="record.colorText">
-                      <p :class="record.colorText.class">
-                        {{ record.colorText.value }}
-                      </p>
-                      <p v-if="record.colorText.description" class="text-gray-500">
-                        {{ record.colorText.description }}
-                      </p>
-                    </div>
-                    <div v-else>
-                      <p>{{ record.record.value }}</p>
-                      <div class="flex" v-if="record.record.description">
-                        <slot></slot>
-                        <p class="text-gray-500">
-                          {{ record.record.description }}
-                        </p>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CTag from "../CTag/CTag.vue";
-import CIcon from "../CIcon/CIcon.vue";
-import CSwitch from "../CSwitch/CSwitch.vue";
-import CCheckbox from "../CCheckbox/CCheckbox.vue";
-import CAvatar from "../CAvatar/CAvatar.vue";
-import CSelect from "../CSelect/CSelect.vue";
-import CStackedList from "../CStackedList/CStackedList.vue";
-export default {
-  name: "CBasicTable",
-  components: {
-    CTag,
-    CIcon,
-    CSwitch,
-    CCheckbox,
-    CAvatar,
-    CStackedList,
-    CSelect,
-  },
-  props: {
-    columnData: {
-      type: Array,
-    },
-    rowRecords: {
-      type: Array,
-    },
-    enableSelection: {
-      type: Boolean,
-    },
-    selectedRow: {
-      type: Boolean,
-    },
-    disabledRow: {
-      type: Boolean,
-    },
-    rowClick: {
-      type: Function,
-    },
-    selectedIndex: {
-      type: String,
-    },
-    columnClasses: {
-      type: String,
-    },
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    action() {
-      this.$emit("linkAction");
-    },
-    changeAllValues(value) {
-      this.rowRecords.forEach(function (row) {
-        row.forEach(function (record) {
-          if (record.isSelected) {
-            record.isSelected.value = value;
-          }
-        });
-      });
-    },
-  },
-};
-</script>
-
-<style></style>

package/src/components/CBasicTable/index.js

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

package/src/components/CBreadcrumbs/CBreadcrumbs.vue

@@ -1,38 +0,0 @@
-<template>
-  <div>
-    <nav class="flex" aria-label="Breadcrumb">
-      <ol class="flex items-center space-x-4">
-        <li v-for="nav in navObject" v-bind:key="nav.label">
-          <div class="flex items-center">
-            <c-icon
-              name="chevron-right" type="solid"
-              class="flex-shrink-0 h-5 w-5 text-gray-400"
-            ></c-icon>
-
-            <a
-              :href="nav.href"
-              class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
-              >{{nav.label}}</a
-            >
-          </div>
-        </li>
-      </ol>
-    </nav>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CBreadcrumbs",
-  components: { CIcon },
-  props: {
-    navObject: {
-      type: Array,
-      required:true
-    }
-  }
-};
-</script>
-
-<style></style>

package/src/components/CBreadcrumbs/index.js

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

package/src/components/CButton/CButton.vue

@@ -1,147 +0,0 @@
-<template>
-  <div>
-    <slot></slot>
-    <button
-      v-if="type == 'tertiary'"
-      :class="customClasses"
-      class="focus:outline-none flex cursor-pointer flex-row rounded-md px-4 py-2 text-sm text-indigo-600 hover:bg-indigo-100 hover:text-indigo-800 focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon
-        v-if="icon"
-        :type="icon.type"
-        :class="iconClasses"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon
-      >{{ label }}
-      <slot name="customButtonContent"></slot>
-    </button>
-    <button
-      v-else-if="type != 'tertiary' && label.length"
-      :type="type"
-      :class="classes"
-      :disabled="disabled"
-      class="focus:outline-none inline-flex items-center rounded-md px-4 py-2 text-sm font-medium shadow-sm focus:ring-2 focus:ring-offset-2 disabled:opacity-50"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon v-if="isLoading" class="mr-2 h-4 w-4" name="loader"></c-icon>
-      <c-icon
-        v-if="icon && !isLoading"
-        :type="icon.type"
-        :class="iconClasses"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      {{ label }}
-      <slot name="customButtonContent"></slot>
-    </button>
-    <button
-      v-else-if="type != 'tertiary' && label.length == 0"
-      :type="type"
-      :class="classes"
-      :disabled="disabled"
-      class="focus:outline-none inline-flex items-center rounded-md px-3 py-2 text-sm font-medium shadow-sm focus:ring-2 focus:ring-offset-2 disabled:opacity-50"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon v-if="isLoading" class="mr-2 h-4 w-4" name="loader"></c-icon>
-      <c-icon
-        v-if="icon && !isLoading"
-        :type="icon.type"
-        :class="iconClasses"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      <slot name="customButtonContent"></slot>
-    </button>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButton",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-    },
-    icon: {
-      type: Object,
-    },
-    type: {
-      type: String,
-      default: "primary",
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    action: {
-      type: Function,
-    },
-    customClasses: {
-      type: String,
-      default: "",
-    },
-    iconCustomClasses: {
-      type: String,
-      default: "",
-    },
-  },
-
-  computed: {
-    classes() {
-      let classes = {
-        "text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "white",
-        "text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500":
-          this.type == "secondary",
-        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600 border border-transparent":
-          this.type == "danger",
-        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600 border border-transparent":
-          this.type == "success",
-        "text-green-800 border border-solid border-gray-300 bg-white hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "secondary-success",
-        "text-gray-700 hover:bg-gray-200 bg-gray-100": this.type == "secondary-gray",
-        "bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200": this.type == "light-red",
-        "bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
-          this.type == "light-green",
-        "bg-gray-800 text-white hover:bg-gray-700 focus:ring-gray-500": this.type == "dark-blue",
-        "cursor-default pointer-events-none": this.isLoading,
-      };
-      classes[this.customClasses] = true;
-      return classes;
-    },
-    iconClasses() {
-      let iconClasses = {
-        "h-5 w-5 mr-1": this.iconCustomClasses ? false : true,
-        "text-indigo-400": this.type == "secondary",
-        "text-white":
-          this.type == "success" ||
-          this.type == "primary" ||
-          this.type == "danger" ||
-          this.type == "dark-blue",
-        "text-gray-400": this.type == "secondary-gray" || this.type == "white",
-        "text-red-400": this.type == "light-red",
-      };
-      iconClasses[this.iconCustomClasses] = true;
-      return iconClasses;
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("onClick");
-    },
-  },
-};
-</script>
-
-<style></style>

package/src/components/CButton/index.js

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

package/src/components/CButtonGroup/CButtonGroup.vue

@@ -1,116 +0,0 @@
-<template>
-  <div>
-    <span
-      v-if="!hideDropdownIcon"
-      class="relative -ml-px block sm:hidden sm:shadow-sm"
-    >
-      <div>
-        <button
-          @click="showButtons = !showButtons"
-          type="button"
-          class="focus:ring-blue-600 focus:border-blue-600 focus:outline-none relative inline-flex items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:ring-1 sm:rounded-md sm:px-3"
-          id="menu-3"
-          aria-expanded="false"
-          aria-haspopup="true"
-        >
-          <span class="">{{ buttonObject[0].label }}</span>
-          <c-icon
-            type="solid"
-            name="chevron-down"
-            class="ml-2 h-5 w-5"
-          ></c-icon>
-        </button>
-      </div>
-      <div
-        v-show="showButtons"
-        class="ring-black focus:outline-none absolute z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-opacity-5"
-        role="menu"
-        aria-orientation="vertical"
-      >
-        <div class="py-1">
-          <a
-            v-for="button in buttonObject"
-            v-bind:key="button.label"
-            href="#"
-            class="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
-            role="menuitem"
-          >
-            <div v-if="button.icon == ''" class="h-5"></div>
-            <c-icon
-              v-if="button.icon"
-              :name="button.icon"
-              type="solid"
-              class="-ml-1 mr-2 h-5 w-5 text-gray-400"
-            ></c-icon>
-            {{ button.label }}
-          </a>
-        </div>
-      </div>
-    </span>
-    <span :class="buttonClass">
-      <button
-        v-for="(button, index) in buttonObject"
-        v-bind:key="button.label"
-        type="button"
-        class="focus:outline-none relative inline-flex items-center border-r border-l border-t border-b border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
-        :class="{
-          'rounded-r-md rounded-l-none border-l border-r':
-            index == buttonObject.length - 1,
-          'rounded-l-md': index == 0,
-          'border-r-0': index != buttonObject.length - 1,
-          'px-4': button.label,
-        }"
-        @click="handleEvent(button.onClickAction)"
-        @blur="handleEvent(button.blurAction)"
-      >
-        <div v-if="button.icon == ''" class="h-5"></div>
-        <c-icon
-          v-if="button.icon"
-          :name="button.icon"
-          type="solid"
-          :class="button.label ? '-ml-1 mr-2' : ''"
-          class="h-5 w-5 text-gray-400"
-        ></c-icon>
-        {{ button.label }}
-        <slot></slot>
-      </button>
-    </span>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButtonGroup",
-  components: { CIcon },
-  props: {
-    buttonObject: {
-      type: Array,
-      required: true,
-    },
-    hideDropdownIcon: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      showButtons: false,
-      buttonClass:
-        this.hideDropdownIcon === true
-          ? "z-0 relative inline-flex rounded-md block"
-          : "z-0 relative inline-flex hidden rounded-md sm:block",
-    };
-  },
-  methods: {
-    handleEvent(function_name) {
-      if (function_name) function_name();
-    },
-    buttonAction(event, value) {
-      this.$emit("onClick", value);
-    },
-  },
-};
-</script>
-
-<style></style>

package/src/components/CButtonGroup/index.js

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

package/src/components/CButtonIcon/CButtonIcon.vue

@@ -1,91 +0,0 @@
-<template>
-  <div>
-    <slot></slot>
-    <button
-      v-if="type == 'tertiary'"
-      class="focus:outline-none flex cursor-pointer flex-row rounded-md px-2 py-2 text-sm text-indigo-600 hover:bg-indigo-100 hover:text-indigo-800 focus:ring-2 focus:ring-indigo-200 focus:ring-offset-2"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon v-if="icon" :type="icon.type" :class="icon.class" :name="icon.name"></c-icon>
-      <slot></slot>
-    </button>
-    <button
-      v-else-if="type == 'rounded-hover'"
-      @click.prevent="$emit('action')"
-      class="focus:outline-none flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500"
-    >
-      <c-icon v-if="icon" :type="icon.type" :class="icon.class" :name="icon.name"></c-icon>
-    </button>
-    <button
-      v-else
-      :type="type"
-      :class="classes"
-      class="focus:outline-none inline-flex items-center rounded-md px-2 py-2 text-sm font-medium shadow-sm focus:ring-2 focus:ring-offset-2"
-      @click.prevent="$emit('action')"
-    >
-      <c-icon v-if="isLoading" class="mr-2 h-5 w-5" :class="loaderClasses" name="loader"></c-icon>
-      <c-icon
-        v-if="icon"
-        :type="icon.type"
-        :class="icon.class"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      <slot></slot>
-    </button>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButtonIcon",
-  components: { CIcon },
-  props: {
-    icon: {
-      type: Object,
-    },
-    type: {
-      type: String,
-      default: "primary",
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    action: {
-      type: Function,
-    },
-    loaderClasses: {
-      type: String,
-    },
-  },
-
-  computed: {
-    classes() {
-      return {
-        "border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "white",
-        "text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:ring-indigo-500":
-          this.type == "secondary",
-        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600": this.type == "danger",
-        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
-          this.type == "success",
-        "text-gray-900 hover:bg-gray-200 bg-gray-100": this.type == "secondary-gray",
-        "cursor-default pointer-events-none": this.isLoading,
-      };
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit("onClick");
-    },
-  },
-};
-</script>
-
-<style></style>

package/src/components/CButtonIcon/index.js

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

package/src/components/CButtonLink/CButtonLink.vue

@@ -1,39 +0,0 @@
-<template>
-  <span class="relative z-0 inline-flex w-full rounded-md shadow-sm">
-    <button
-      v-if="image"
-      type="button"
-      class="focus:outline-none relative -ml-px inline-flex items-center rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
-    >
-      <img class="h-10 w-10" :src="image" />
-    </button>
-    <button
-      type="button"
-      class="focus:outline-none relative inline-flex w-full items-center justify-between rounded-r-md border border-gray-300 bg-white py-2 pl-4 pr-1 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
-      :class="image ? 'rounded-r-md' : 'rounded-md'"
-      @click="$emit('action')"
-    >
-      {{ label }}
-      <c-icon type="solid" name="chevron-right" class="h-5 w-5"></c-icon>
-    </button>
-  </span>
-</template>
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButtonLink",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-    },
-    image: {
-      type: String,
-      default: null,
-    },
-    action: {
-      type: Function,
-    },
-  },
-};
-</script>

package/src/components/CButtonLink/index.js

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