classcard-ui 0.2.1475 → 0.2.1476

package/src/components/CStats/CStats.vue

@@ -1,157 +1,157 @@
-<template>
-  <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 gap-6" :class="dynamicGridSize">
-      <div
-        :class="['pt-3', showStatsBorder ? 'border-t border-gray-200' : '']"
-        v-for="(count, statIndex) in statsCount"
-        :key="statIndex"
-      >
-        <div
-          class="leading-6 md:flex-col md:items-start md:justify-center lg:flex-row lg:items-end lg:justify-between"
-        >
-          <div>
-            <dt class="flex text-sm font-normal leading-5 text-gray-900">
-              <span
-                class="overflow-hidden overflow-ellipsis whitespace-nowrap"
-                >{{ count.label }}</span
-              >
-              <span v-if="count.number" class="ml-1 text-sm text-gray-500"
-                >({{ count.number }})</span
-              >
-              <span v-if="count.suffix" class="ml-1 text-sm text-gray-500"
-                >({{ count.suffix }})</span
-              >
-
-              <span
-                v-if="count.icon && count.toolTip"
-                class="relative ml-2 inline-flex shrink-0 items-center self-center"
-              >
-                <c-tool-tip
-                  v-if="
-                    count.toolTip.showToolTip || hoveredStatIndex === statIndex
-                  "
-                  color="#1f2937"
-                  :classes="tooltipClasses(count)"
-                  :tooltip-text="count.toolTip.text"
-                  :isTopAligned="true"
-                ></c-tool-tip>
-                <c-icon
-                  :name="count.icon.name"
-                  :type="count.icon.type"
-                  :class="count.icon.class"
-                  :cursorType="count.icon.cursorType"
-                  @mouseover.native="hoveredStatIndex = statIndex"
-                  @mouseleave.native="hoveredStatIndex = null"
-                ></c-icon>
-              </span>
-              <c-icon
-                v-else-if="
-                  count.icon != undefined &&
-                  count.icon != null &&
-                  !count.toolTip
-                "
-                :name="count.icon.name"
-                :type="count.icon.type"
-                :class="count.icon.class"
-                :cursorType="count.icon.cursorType"
-              ></c-icon>
-            </dt>
-            <div class="mt-2 flex items-baseline justify-start">
-              <p
-                v-if="count.useNonAnimatedDisplay"
-                class="text-2xl font-semibold"
-              >
-                <span>{{ count.totalCount }}</span>
-              </p>
-              <p :class="`text-2xl font-semibold ${fontColor}`" v-else>
-                <number-animator :value="count.totalCount" />
-              </p>
-              <p
-                class="text-xs font-normal text-gray-900"
-                v-if="count.denominator"
-              >
-                /{{ count.denominator }}
-              </p>
-            </div>
-          </div>
-          <div class="mt-3 flex items-center">
-            <c-tag
-              v-if="count.tag"
-              :icon="count.tag.icon"
-              :label="count.tag.label"
-              :color="count.tag.color"
-              tagClasses="rounded-full text-xs"
-            ></c-tag>
-            <label
-              v-if="count.days"
-              :class="`ml-1 text-sm font-normal leading-5 text-gray-500 ${count.daysClass}`"
-              >{{ count.days }}</label
-            >
-          </div>
-        </div>
-      </div>
-    </dl>
-  </div>
-</template>
-
-<script>
-import CTag from "../CTag/CTag.vue";
-import CIcon from "../CIcon/CIcon.vue";
-import CToolTip from "../CToolTip/CToolTip.vue";
-import NumberAnimator from "../NumberAnimator.vue";
-export default {
-  name: "CStats",
-  components: { CTag, CIcon, CToolTip, NumberAnimator },
-  props: {
-    statsCount: {
-      type: Array,
-    },
-    title: {
-      type: Object,
-    },
-    fontColor: {
-      type: String,
-      default: "text-gray-900",
-    },
-    colorClasses: {
-      type: Object,
-    },
-    dynamicGridSize: {
-      type: String,
-      default: "md:grid-cols-3",
-    },
-    showStatsBorder: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      hoveredStatIndex: null,
-    };
-  },
-  methods: {
-    tooltipClasses(count) {
-      const base =
-        "block bottom-full left-1/2 mb-1 -translate-x-1/2 text-white font-normal bg-gray-800";
-      if (count.toolTip.classes) {
-        return `${base} ${count.toolTip.classes}`;
-      }
-      return `${base} whitespace-nowrap`;
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <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 gap-6" :class="dynamicGridSize">
+      <div
+        :class="['pt-3', showStatsBorder ? 'border-t border-gray-200' : '']"
+        v-for="(count, statIndex) in statsCount"
+        :key="statIndex"
+      >
+        <div
+          class="leading-6 md:flex-col md:items-start md:justify-center lg:flex-row lg:items-end lg:justify-between"
+        >
+          <div>
+            <dt class="flex text-sm font-normal leading-5 text-gray-900">
+              <span
+                class="overflow-hidden overflow-ellipsis whitespace-nowrap"
+                >{{ count.label }}</span
+              >
+              <span v-if="count.number" class="ml-1 text-sm text-gray-500"
+                >({{ count.number }})</span
+              >
+              <span v-if="count.suffix" class="ml-1 text-sm text-gray-500"
+                >({{ count.suffix }})</span
+              >
+
+              <span
+                v-if="count.icon && count.toolTip"
+                class="relative ml-2 inline-flex shrink-0 items-center self-center"
+              >
+                <c-tool-tip
+                  v-if="
+                    count.toolTip.showToolTip || hoveredStatIndex === statIndex
+                  "
+                  color="#1f2937"
+                  :classes="tooltipClasses(count)"
+                  :tooltip-text="count.toolTip.text"
+                  :isTopAligned="true"
+                ></c-tool-tip>
+                <c-icon
+                  :name="count.icon.name"
+                  :type="count.icon.type"
+                  :class="count.icon.class"
+                  :cursorType="count.icon.cursorType"
+                  @mouseover.native="hoveredStatIndex = statIndex"
+                  @mouseleave.native="hoveredStatIndex = null"
+                ></c-icon>
+              </span>
+              <c-icon
+                v-else-if="
+                  count.icon != undefined &&
+                  count.icon != null &&
+                  !count.toolTip
+                "
+                :name="count.icon.name"
+                :type="count.icon.type"
+                :class="count.icon.class"
+                :cursorType="count.icon.cursorType"
+              ></c-icon>
+            </dt>
+            <div class="mt-2 flex items-baseline justify-start">
+              <p
+                v-if="count.useNonAnimatedDisplay"
+                class="text-2xl font-semibold"
+              >
+                <span>{{ count.totalCount }}</span>
+              </p>
+              <p :class="`text-2xl font-semibold ${fontColor}`" v-else>
+                <number-animator :value="count.totalCount" />
+              </p>
+              <p
+                class="text-xs font-normal text-gray-900"
+                v-if="count.denominator"
+              >
+                /{{ count.denominator }}
+              </p>
+            </div>
+          </div>
+          <div class="mt-3 flex items-center">
+            <c-tag
+              v-if="count.tag"
+              :icon="count.tag.icon"
+              :label="count.tag.label"
+              :color="count.tag.color"
+              tagClasses="rounded-full text-xs"
+            ></c-tag>
+            <label
+              v-if="count.days"
+              :class="`ml-1 text-sm font-normal leading-5 text-gray-500 ${count.daysClass}`"
+              >{{ count.days }}</label
+            >
+          </div>
+        </div>
+      </div>
+    </dl>
+  </div>
+</template>
+
+<script>
+import CTag from "../CTag/CTag.vue";
+import CIcon from "../CIcon/CIcon.vue";
+import CToolTip from "../CToolTip/CToolTip.vue";
+import NumberAnimator from "../NumberAnimator.vue";
+export default {
+  name: "CStats",
+  components: { CTag, CIcon, CToolTip, NumberAnimator },
+  props: {
+    statsCount: {
+      type: Array,
+    },
+    title: {
+      type: Object,
+    },
+    fontColor: {
+      type: String,
+      default: "text-gray-900",
+    },
+    colorClasses: {
+      type: Object,
+    },
+    dynamicGridSize: {
+      type: String,
+      default: "md:grid-cols-3",
+    },
+    showStatsBorder: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      hoveredStatIndex: null,
+    };
+  },
+  methods: {
+    tooltipClasses(count) {
+      const base =
+        "block bottom-full left-1/2 mb-1 -translate-x-1/2 text-white font-normal bg-gray-800";
+      if (count.toolTip.classes) {
+        return `${base} ${count.toolTip.classes}`;
+      }
+      return `${base} whitespace-nowrap`;
+    },
+  },
+};
+</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