classcard-ui 0.2.1506 → 0.2.1508-beta.0

package/src/components/CTimeline/CTimeline.vue

@@ -1,237 +1,237 @@
-<template>
-  <div>
-    <div class="flow-root">
-      <ul class="-mb-8">
-        <li>
-          <div class="relative pb-8">
-            <span
-              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-              aria-hidden="true"
-            ></span>
-            <div class="relative flex space-x-3">
-              <div>
-                <span :class="colorClasses"
-                  class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white"
-                >
-                 <c-icon :name="icon" type="solid" class="h-5 w-5"></c-icon>
-                </span>
-              </div>
-              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                <div>
-                  <p class="text-sm text-gray-500">
-                    Applied to
-                    <a href="#" class="font-medium text-gray-900"
-                      >Front End Developer</a
-                    >
-                  </p>
-                </div>
-                <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                  <time datetime="2020-09-20">Sep 20</time>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <li>
-          <div class="relative pb-8">
-            <span
-              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-              aria-hidden="true"
-            ></span>
-            <div class="relative flex space-x-3">
-              <div>
-                <span
-                  class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white"
-                >
-                  <!-- Heroicon name: thumb-up -->
-                  <svg
-                    class="h-5 w-5 text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                <div>
-                  <p class="text-sm text-gray-500">
-                    Advanced to phone screening by
-                    <a href="#" class="font-medium text-gray-900"
-                      >Bethany Blake</a
-                    >
-                  </p>
-                </div>
-                <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                  <time datetime="2020-09-22">Sep 22</time>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <li>
-          <div class="relative pb-8">
-            <span
-              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-              aria-hidden="true"
-            ></span>
-            <div class="relative flex space-x-3">
-              <div>
-                <span
-                  class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white"
-                >
-                  <!-- Heroicon name: check -->
-                  <svg
-                    class="h-5 w-5 text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                <div>
-                  <p class="text-sm text-gray-500">
-                    Completed phone screening with
-                    <a href="#" class="font-medium text-gray-900"
-                      >Martha Gardner</a
-                    >
-                  </p>
-                </div>
-                <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                  <time datetime="2020-09-28">Sep 28</time>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <li>
-          <div class="relative pb-8">
-            <span
-              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-              aria-hidden="true"
-            ></span>
-            <div class="relative flex space-x-3">
-              <div>
-                <span
-                  class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white"
-                >
-                  <!-- Heroicon name: thumb-up -->
-                  <svg
-                    class="h-5 w-5 text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                <div>
-                  <p class="text-sm text-gray-500">
-                    Advanced to interview by
-                    <a href="#" class="font-medium text-gray-900"
-                      >Bethany Blake</a
-                    >
-                  </p>
-                </div>
-                <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                  <time datetime="2020-09-30">Sep 30</time>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <li>
-          <div class="relative pb-8">
-            <div class="relative flex space-x-3">
-              <div>
-                <span
-                  class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white"
-                >
-                  <!-- Heroicon name: check -->
-                  <svg
-                    class="h-5 w-5 text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                <div>
-                  <p class="text-sm text-gray-500">
-                    Completed interview with
-                    <a href="#" class="font-medium text-gray-900"
-                      >Katherine Snyder</a
-                    >
-                  </p>
-                </div>
-                <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                  <time datetime="2020-10-04">Oct 4</time>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CTimeline",
-  components: { CIcon },
-  props: {
-    statsCount: {
-      type: Array,
-    },
-    color: {
-      type: String,
-    },
-    icon:{
-      type: String
-    }
-  },
-    computed: {
-    colorClasses() {
-      return {
-        "bg-red-200 text-red-800": this.color == "red",
-        "bg-yellow-100 text-yellow-800": this.color == "yellow",
-        "bg-green-100 text-green-800": this.color == "green",
-        "bg-indigo-100 text-indigo-800": this.color == "indigo"
-      };
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <div class="flow-root">
+      <ul class="-mb-8">
+        <li>
+          <div class="relative pb-8">
+            <span
+              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+              aria-hidden="true"
+            ></span>
+            <div class="relative flex space-x-3">
+              <div>
+                <span :class="colorClasses"
+                  class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white"
+                >
+                 <c-icon :name="icon" type="solid" class="h-5 w-5"></c-icon>
+                </span>
+              </div>
+              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                <div>
+                  <p class="text-sm text-gray-500">
+                    Applied to
+                    <a href="#" class="font-medium text-gray-900"
+                      >Front End Developer</a
+                    >
+                  </p>
+                </div>
+                <div class="text-right text-sm whitespace-nowrap text-gray-500">
+                  <time datetime="2020-09-20">Sep 20</time>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+
+        <li>
+          <div class="relative pb-8">
+            <span
+              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+              aria-hidden="true"
+            ></span>
+            <div class="relative flex space-x-3">
+              <div>
+                <span
+                  class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white"
+                >
+                  <!-- Heroicon name: thumb-up -->
+                  <svg
+                    class="h-5 w-5 text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                <div>
+                  <p class="text-sm text-gray-500">
+                    Advanced to phone screening by
+                    <a href="#" class="font-medium text-gray-900"
+                      >Bethany Blake</a
+                    >
+                  </p>
+                </div>
+                <div class="text-right text-sm whitespace-nowrap text-gray-500">
+                  <time datetime="2020-09-22">Sep 22</time>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+
+        <li>
+          <div class="relative pb-8">
+            <span
+              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+              aria-hidden="true"
+            ></span>
+            <div class="relative flex space-x-3">
+              <div>
+                <span
+                  class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white"
+                >
+                  <!-- Heroicon name: check -->
+                  <svg
+                    class="h-5 w-5 text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                <div>
+                  <p class="text-sm text-gray-500">
+                    Completed phone screening with
+                    <a href="#" class="font-medium text-gray-900"
+                      >Martha Gardner</a
+                    >
+                  </p>
+                </div>
+                <div class="text-right text-sm whitespace-nowrap text-gray-500">
+                  <time datetime="2020-09-28">Sep 28</time>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+
+        <li>
+          <div class="relative pb-8">
+            <span
+              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+              aria-hidden="true"
+            ></span>
+            <div class="relative flex space-x-3">
+              <div>
+                <span
+                  class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white"
+                >
+                  <!-- Heroicon name: thumb-up -->
+                  <svg
+                    class="h-5 w-5 text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                <div>
+                  <p class="text-sm text-gray-500">
+                    Advanced to interview by
+                    <a href="#" class="font-medium text-gray-900"
+                      >Bethany Blake</a
+                    >
+                  </p>
+                </div>
+                <div class="text-right text-sm whitespace-nowrap text-gray-500">
+                  <time datetime="2020-09-30">Sep 30</time>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+
+        <li>
+          <div class="relative pb-8">
+            <div class="relative flex space-x-3">
+              <div>
+                <span
+                  class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white"
+                >
+                  <!-- Heroicon name: check -->
+                  <svg
+                    class="h-5 w-5 text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+                <div>
+                  <p class="text-sm text-gray-500">
+                    Completed interview with
+                    <a href="#" class="font-medium text-gray-900"
+                      >Katherine Snyder</a
+                    >
+                  </p>
+                </div>
+                <div class="text-right text-sm whitespace-nowrap text-gray-500">
+                  <time datetime="2020-10-04">Oct 4</time>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CTimeline",
+  components: { CIcon },
+  props: {
+    statsCount: {
+      type: Array,
+    },
+    color: {
+      type: String,
+    },
+    icon:{
+      type: String
+    }
+  },
+    computed: {
+    colorClasses() {
+      return {
+        "bg-red-200 text-red-800": this.color == "red",
+        "bg-yellow-100 text-yellow-800": this.color == "yellow",
+        "bg-green-100 text-green-800": this.color == "green",
+        "bg-indigo-100 text-indigo-800": this.color == "indigo"
+      };
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CTimeline/index.js

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