classcard-ui 0.2.671 → 0.2.689

package/src/components/CBasicTable/CBasicTable.vue

@@ -0,0 +1,184 @@
+<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

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

package/src/components/CBreadcrumbs/CBreadcrumbs.vue

@@ -0,0 +1,38 @@
+<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

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

package/src/components/CButton/CButton.vue

@@ -0,0 +1,147 @@
+<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

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

package/src/components/CButtonGroup/CButtonGroup.vue

@@ -0,0 +1,116 @@
+<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

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

package/src/components/CButtonIcon/CButtonIcon.vue

@@ -0,0 +1,91 @@
+<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

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

package/src/components/CButtonLink/CButtonLink.vue

@@ -0,0 +1,39 @@
+<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

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