classcard-ui 0.2.1462 → 0.2.1464

package/src/components/CStats/CStats.vue

@@ -1,187 +1,187 @@
-<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 gap-6 overflow-hidden"
-      :class="dynamicGridSize"
-    >
-      <div
-        :class="['pt-3', showStatsBorder ? 'border-t border-gray-200' : '']"
-        v-for="count in statsCount"
-        v-bind:key="count.number"
-      >
-        <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
-              >
-
-              <div
-                :class="['ml-1', 'absolute', `${count.toolTip.class}`]"
-                v-if="
-                  count.toolTip != undefined &&
-                  count.toolTip != null &&
-                  count.toolTip.showToolTip
-                "
-              >
-                <c-tool-tip
-                  color="#1f2937"
-                  :classes="
-                    count.toolTip.classes
-                      ? count.toolTip.classes
-                      : 'text-white whitespace-nowrap font-normal sticky bg-gray-800 w-auto'
-                  "
-                  :tooltip-text="count.toolTip.text"
-                  :isTopAligned="true"
-                ></c-tool-tip>
-              </div>
-
-              <c-icon
-                v-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"
-                @mouseover.native="count.toolTip.showToolTip = true"
-                @mouseleave.native="count.toolTip.showToolTip = false"
-              ></c-icon>
-              <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,
-    },
-  },
-};
-</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 gap-6 overflow-hidden"
+      :class="dynamicGridSize"
+    >
+      <div
+        :class="['pt-3', showStatsBorder ? 'border-t border-gray-200' : '']"
+        v-for="count in statsCount"
+        v-bind:key="count.number"
+      >
+        <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
+              >
+
+              <div
+                :class="['ml-1', 'absolute', `${count.toolTip.class}`]"
+                v-if="
+                  count.toolTip != undefined &&
+                  count.toolTip != null &&
+                  count.toolTip.showToolTip
+                "
+              >
+                <c-tool-tip
+                  color="#1f2937"
+                  :classes="
+                    count.toolTip.classes
+                      ? count.toolTip.classes
+                      : 'text-white whitespace-nowrap font-normal sticky bg-gray-800 w-auto'
+                  "
+                  :tooltip-text="count.toolTip.text"
+                  :isTopAligned="true"
+                ></c-tool-tip>
+              </div>
+
+              <c-icon
+                v-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"
+                @mouseover.native="count.toolTip.showToolTip = true"
+                @mouseleave.native="count.toolTip.showToolTip = false"
+              ></c-icon>
+              <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,
+    },
+  },
+};
+</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