classcard-ui 0.2.705 → 0.2.708

package/src/components/CBasicTable/CBasicTable.vue

@@ -1,184 +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>
+<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 +1,3 @@
-import CBasicTable from './CBasicTable.vue'
-
+import CBasicTable from './CBasicTable.vue'
+
 export default CBasicTable

package/src/components/CBreadcrumbs/CBreadcrumbs.vue

@@ -1,38 +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>
+<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 +1,3 @@
-import CBreadcrumbs from './CBreadcrumbs.vue'
-
+import CBreadcrumbs from './CBreadcrumbs.vue'
+
 export default CBreadcrumbs