classcard-ui 0.2.989 → 0.2.990

package/src/components/CSelect/index.js

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

package/src/components/CSmallTimeline/CSmallTimeline.vue

@@ -1,40 +1,40 @@
-<template>
-  <div>
-    <div class="flow-root">
-      <ul>
-        <li v-for="timeline in timelineItems" v-bind:key="timeline.label">
-          <div class="relative pb-1">
-            <span
-              class="absolute left-1 top-0.5 -ml-px h-full w-0.5 bg-indigo-600"
-              aria-hidden="true"
-            ></span>
-            <div class="relative ml-3">
-              <div class="min-w-0 mb-1.5">
-                <div>
-                  <p class="text-sm text-gray-400">
-                    {{ timeline.label }}
-                  </p>
-                </div>
-                <div><span class="text-sm text-gray-400">12/25</span></div>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CSmallTimeline",
-  props: {
-    timelineItems: {
-      type: Array,
-      required: true,
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <div class="flow-root">
+      <ul>
+        <li v-for="timeline in timelineItems" v-bind:key="timeline.label">
+          <div class="relative pb-1">
+            <span
+              class="absolute left-1 top-0.5 -ml-px h-full w-0.5 bg-indigo-600"
+              aria-hidden="true"
+            ></span>
+            <div class="relative ml-3">
+              <div class="min-w-0 mb-1.5">
+                <div>
+                  <p class="text-sm text-gray-400">
+                    {{ timeline.label }}
+                  </p>
+                </div>
+                <div><span class="text-sm text-gray-400">12/25</span></div>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CSmallTimeline",
+  props: {
+    timelineItems: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CSmallTimeline/index.js

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

package/src/components/CStackedList/CStackedList.vue

@@ -1,150 +1,150 @@
-<template>
-  <div>
-    <ul>
-      <li
-        v-for="items in listItems"
-        v-bind:key="items.size"
-        class="py-4"
-        :class="{
-          'cursor-pointer': items.collapse,
-          'border-b border-gray-200': divider === true,
-        }"
-      >
-        <div class="flex items-center justify-between">
-          <div
-            class="flex w-full items-center"
-            v-on="items.collapse ? { click: () => collapseList() } : null"
-          >
-            <c-icon
-              v-if="items.collapse"
-              :name="showSection ? 'chevron-down' : 'chevron-right'"
-              type="solid"
-              class="mr-3 h-5 w-5 shrink-0 text-gray-900"
-            ></c-icon>
-
-            <div v-if="isIcon" class="h-full rounded-md bg-gray-100">
-              <c-avatar
-                v-if="items.image"
-                :size="items.size"
-                :rounded="items.rounded"
-                :image="items.image"
-                class="shrink-0"
-              ></c-avatar>
-              <c-icon
-                v-else
-                :name="icon.name"
-                :type="icon.type"
-                :class="icon.class"
-              ></c-icon>
-            </div>
-            <div v-else-if="isCustomIcon" class="h-full">
-              <slot name="customIcon"></slot>
-            </div>
-            <c-avatar
-              v-else
-              :size="items.size"
-              :rounded="items.rounded"
-              :image="items.image"
-              class="shrink-0"
-            ></c-avatar>
-            <div class="ml-3 w-full">
-              <div class="flex items-center">
-                <p class="text-sm font-medium text-gray-900">
-                  {{ items.heading }}
-                </p>
-                <div
-                  v-if="items.tagLabels && items.tagLabels.length > 0"
-                  class="flex items-center"
-                >
-                  <c-tag
-                    v-for="(tagLabel, i) in items.tagLabels"
-                    :key="i"
-                    :label="tagLabel.tagLabel"
-                    :color="tagLabel.tagColor"
-                    class="relative bottom-0.5 ml-2.5"
-                  ></c-tag>
-                </div>
-                <c-tag
-                  v-else-if="items.tag"
-                  :label="items.tagLabel"
-                  :color="items.tagColor"
-                  class="relative bottom-0.5 ml-2.5"
-                ></c-tag>
-              </div>
-              <p v-if="items.description" class="mt-1 text-sm text-gray-500">
-                {{ items.description }}
-              </p>
-            </div>
-          </div>
-          <button
-            v-if="items.listIcon"
-            type="button"
-            :id="listId ? listId : ''"
-            class="focus:outline-none flex h-8 w-8 items-center justify-center rounded-full text-gray-500 hover:bg-red-100 hover:text-red-800 focus:ring-2 focus:ring-red-500"
-            @click="deleteItem"
-          >
-            <c-icon
-              name="trash"
-              type="solid"
-              class="h-5 w-5 hover:text-red-800"
-            ></c-icon>
-          </button>
-        </div>
-        <div v-if="showSection" class="mt-3 ml-[88px]">
-          <slot></slot>
-          <!-- <div class="mt-2 h-40 w-full bg-gray-100">something</div> -->
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-<script>
-import CAvatar from "../CAvatar/CAvatar.vue";
-import CTag from "../CTag/CTag.vue";
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CStackedList",
-  components: { CAvatar, CTag, CIcon },
-  props: {
-    listItems: {
-      type: Array,
-      required: true,
-    },
-    divider: {
-      type: Boolean,
-      default: true,
-    },
-    isIcon: {
-      type: Boolean,
-      default: false,
-    },
-    isCustomIcon: {
-      type: Boolean,
-      default: false,
-    },
-    listId: {
-      type: String,
-    },
-    icon: {
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      showSection: false,
-    };
-  },
-  methods: {
-    collapseList() {
-      this.showSection = !this.showSection;
-    },
-    deleteItem(item) {
-      if (this.listId) {
-        this.$emit("delete-item", this.listId, item);
-      } else {
-        this.$emit("delete-item", item);
-      }
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <ul>
+      <li
+        v-for="items in listItems"
+        v-bind:key="items.size"
+        class="py-4"
+        :class="{
+          'cursor-pointer': items.collapse,
+          'border-b border-gray-200': divider === true,
+        }"
+      >
+        <div class="flex items-center justify-between">
+          <div
+            class="flex w-full items-center"
+            v-on="items.collapse ? { click: () => collapseList() } : null"
+          >
+            <c-icon
+              v-if="items.collapse"
+              :name="showSection ? 'chevron-down' : 'chevron-right'"
+              type="solid"
+              class="mr-3 h-5 w-5 shrink-0 text-gray-900"
+            ></c-icon>
+
+            <div v-if="isIcon" class="h-full rounded-md bg-gray-100">
+              <c-avatar
+                v-if="items.image"
+                :size="items.size"
+                :rounded="items.rounded"
+                :image="items.image"
+                class="shrink-0"
+              ></c-avatar>
+              <c-icon
+                v-else
+                :name="icon.name"
+                :type="icon.type"
+                :class="icon.class"
+              ></c-icon>
+            </div>
+            <div v-else-if="isCustomIcon" class="h-full">
+              <slot name="customIcon"></slot>
+            </div>
+            <c-avatar
+              v-else
+              :size="items.size"
+              :rounded="items.rounded"
+              :image="items.image"
+              class="shrink-0"
+            ></c-avatar>
+            <div class="ml-3 w-full">
+              <div class="flex items-center">
+                <p class="text-sm font-medium text-gray-900">
+                  {{ items.heading }}
+                </p>
+                <div
+                  v-if="items.tagLabels && items.tagLabels.length > 0"
+                  class="flex items-center"
+                >
+                  <c-tag
+                    v-for="(tagLabel, i) in items.tagLabels"
+                    :key="i"
+                    :label="tagLabel.tagLabel"
+                    :color="tagLabel.tagColor"
+                    class="relative bottom-0.5 ml-2.5"
+                  ></c-tag>
+                </div>
+                <c-tag
+                  v-else-if="items.tag"
+                  :label="items.tagLabel"
+                  :color="items.tagColor"
+                  class="relative bottom-0.5 ml-2.5"
+                ></c-tag>
+              </div>
+              <p v-if="items.description" class="mt-1 text-sm text-gray-500">
+                {{ items.description }}
+              </p>
+            </div>
+          </div>
+          <button
+            v-if="items.listIcon"
+            type="button"
+            :id="listId ? listId : ''"
+            class="focus:outline-none flex h-8 w-8 items-center justify-center rounded-full text-gray-500 hover:bg-red-100 hover:text-red-800 focus:ring-2 focus:ring-red-500"
+            @click="deleteItem"
+          >
+            <c-icon
+              name="trash"
+              type="solid"
+              class="h-5 w-5 hover:text-red-800"
+            ></c-icon>
+          </button>
+        </div>
+        <div v-if="showSection" class="mt-3 ml-[88px]">
+          <slot></slot>
+          <!-- <div class="mt-2 h-40 w-full bg-gray-100">something</div> -->
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import CAvatar from "../CAvatar/CAvatar.vue";
+import CTag from "../CTag/CTag.vue";
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CStackedList",
+  components: { CAvatar, CTag, CIcon },
+  props: {
+    listItems: {
+      type: Array,
+      required: true,
+    },
+    divider: {
+      type: Boolean,
+      default: true,
+    },
+    isIcon: {
+      type: Boolean,
+      default: false,
+    },
+    isCustomIcon: {
+      type: Boolean,
+      default: false,
+    },
+    listId: {
+      type: String,
+    },
+    icon: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      showSection: false,
+    };
+  },
+  methods: {
+    collapseList() {
+      this.showSection = !this.showSection;
+    },
+    deleteItem(item) {
+      if (this.listId) {
+        this.$emit("delete-item", this.listId, item);
+      } else {
+        this.$emit("delete-item", item);
+      }
+    },
+  },
+};
+</script>

package/src/components/CStackedList/index.js

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

package/src/components/CStats/CStats.vue

@@ -1,116 +1,116 @@
-<template>
-  <!-- <div>
-    <dl class="mt-5 sm:flex sm:flex-col md:flex md:flex-row justify-between">
-      <div
-        :class="index == statsCount.length - 1 ? '' : 'mr-2'"
-        class="bg-white w-full overflow-hidden shadow rounded-lg"
-        v-for="(count, index) in statsCount"
-        v-bind:key="count.number"
-      >
-        <div class="px-4 pt-3 pb-1 flex">
-          <c-icon
-            v-if="count.icon"
-            :name="count.icon.name"
-            :type="count.icon.type"
-            :class="count.icon.class"
-          ></c-icon>
-          <div :class="count.icon ? 'ml-3' : ''">
-            <dt class="text-sm text-gray-500 flex">
-              <span>{{ count.label }}</span>
-              <span class="text-sm text-gray-900 ml-1">{{ count.number }}</span>
-            </dt>
-            <dd class="text-2xl font-semibold text-gray-900">
-              {{ count.totalCount }}
-            </dd>
-          </div>
-        </div>
-        <div class="ml-12 pb-2 flex items-center" v-if="count.tag || count.days">
-          <c-tag v-if="count.tag" :label="count.tag.label" :color="count.tag.color"></c-tag>
-          <label v-if="count.days" class="text-xs text-gray-500 ml-1">{{ count.days }}</label>
-        </div>
-      </div>
-    </dl>
-  </div> -->
-  <!-- This example requires Tailwind CSS v2.0+ -->
-  <div>
-    <div class="flex items-center justify-between" v-if="title">
-      <h3 class="text-lg font-medium leading-6 text-gray-900">
-        {{ title.heading }}
-      </h3>
-      <c-tag
-        v-if="title.label"
-        class="hidden sm:block"
-        :label="title.label"
-        color="green"
-      ></c-tag>
-    </div>
-    <dl
-      :class="`mt-4 grid grid-cols-1 divide-y ${
-        colorClasses ? colorClasses.divide : 'divide-gray-200'
-      } overflow-hidden rounded-lg ${
-        colorClasses ? colorClasses.background : 'bg-gray-100'
-      } md:grid-cols-3 md:divide-y-0 md:divide-x`"
-    >
-      <div
-        class="px-4 py-5 sm:p-6"
-        v-for="count in statsCount"
-        v-bind:key="count.number"
-      >
-        <div
-          class="flex items-end justify-between md:flex-col md:items-start md:justify-center lg:flex-row lg:items-end lg:justify-between"
-        >
-          <div>
-            <dt class="flex text-sm text-gray-500">
-              <span>{{ count.label }}</span>
-              <span v-if="count.number" class="ml-1 text-sm text-gray-900">{{
-                count.number
-              }}</span>
-              <span v-if="count.suffix" class="ml-1 text-sm text-gray-900"
-                >({{ count.suffix }})</span
-              >
-            </dt>
-            <div class="mt-1 flex items-baseline justify-start">
-              <p :class="`text-2xl font-semibold ${fontColor}`">
-                {{ count.totalCount }}
-              </p>
-              <label v-if="count.days" class="ml-2 text-xs text-gray-500">{{
-                count.days
-              }}</label>
-            </div>
-          </div>
-          <c-tag
-            v-if="count.tag"
-            :label="count.tag.label"
-            :color="count.tag.color"
-            tagClasses="rounded-full text-xs"
-          ></c-tag>
-        </div>
-      </div>
-    </dl>
-  </div>
-</template>
-
-<script>
-import CTag from "../CTag/CTag.vue";
-export default {
-  name: "CStats",
-  components: { CTag },
-  props: {
-    statsCount: {
-      type: Array,
-    },
-    title: {
-      type: Object,
-    },
-    fontColor: {
-      type: String,
-      default: "text-gray-900",
-    },
-    colorClasses: {
-      type: Object,
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <!-- <div>
+    <dl class="mt-5 sm:flex sm:flex-col md:flex md:flex-row justify-between">
+      <div
+        :class="index == statsCount.length - 1 ? '' : 'mr-2'"
+        class="bg-white w-full overflow-hidden shadow rounded-lg"
+        v-for="(count, index) in statsCount"
+        v-bind:key="count.number"
+      >
+        <div class="px-4 pt-3 pb-1 flex">
+          <c-icon
+            v-if="count.icon"
+            :name="count.icon.name"
+            :type="count.icon.type"
+            :class="count.icon.class"
+          ></c-icon>
+          <div :class="count.icon ? 'ml-3' : ''">
+            <dt class="text-sm text-gray-500 flex">
+              <span>{{ count.label }}</span>
+              <span class="text-sm text-gray-900 ml-1">{{ count.number }}</span>
+            </dt>
+            <dd class="text-2xl font-semibold text-gray-900">
+              {{ count.totalCount }}
+            </dd>
+          </div>
+        </div>
+        <div class="ml-12 pb-2 flex items-center" v-if="count.tag || count.days">
+          <c-tag v-if="count.tag" :label="count.tag.label" :color="count.tag.color"></c-tag>
+          <label v-if="count.days" class="text-xs text-gray-500 ml-1">{{ count.days }}</label>
+        </div>
+      </div>
+    </dl>
+  </div> -->
+  <!-- This example requires Tailwind CSS v2.0+ -->
+  <div>
+    <div class="flex items-center justify-between" v-if="title">
+      <h3 class="text-lg font-medium leading-6 text-gray-900">
+        {{ title.heading }}
+      </h3>
+      <c-tag
+        v-if="title.label"
+        class="hidden sm:block"
+        :label="title.label"
+        color="green"
+      ></c-tag>
+    </div>
+    <dl
+      :class="`mt-4 grid grid-cols-1 divide-y ${
+        colorClasses ? colorClasses.divide : 'divide-gray-200'
+      } overflow-hidden rounded-lg ${
+        colorClasses ? colorClasses.background : 'bg-gray-100'
+      } md:grid-cols-3 md:divide-y-0 md:divide-x`"
+    >
+      <div
+        class="px-4 py-5 sm:p-6"
+        v-for="count in statsCount"
+        v-bind:key="count.number"
+      >
+        <div
+          class="flex items-end justify-between md:flex-col md:items-start md:justify-center lg:flex-row lg:items-end lg:justify-between"
+        >
+          <div>
+            <dt class="flex text-sm text-gray-500">
+              <span>{{ count.label }}</span>
+              <span v-if="count.number" class="ml-1 text-sm text-gray-900">{{
+                count.number
+              }}</span>
+              <span v-if="count.suffix" class="ml-1 text-sm text-gray-900"
+                >({{ count.suffix }})</span
+              >
+            </dt>
+            <div class="mt-1 flex items-baseline justify-start">
+              <p :class="`text-2xl font-semibold ${fontColor}`">
+                {{ count.totalCount }}
+              </p>
+              <label v-if="count.days" class="ml-2 text-xs text-gray-500">{{
+                count.days
+              }}</label>
+            </div>
+          </div>
+          <c-tag
+            v-if="count.tag"
+            :label="count.tag.label"
+            :color="count.tag.color"
+            tagClasses="rounded-full text-xs"
+          ></c-tag>
+        </div>
+      </div>
+    </dl>
+  </div>
+</template>
+
+<script>
+import CTag from "../CTag/CTag.vue";
+export default {
+  name: "CStats",
+  components: { CTag },
+  props: {
+    statsCount: {
+      type: Array,
+    },
+    title: {
+      type: Object,
+    },
+    fontColor: {
+      type: String,
+      default: "text-gray-900",
+    },
+    colorClasses: {
+      type: Object,
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CStats/index.js

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