classcard-ui 0.2.614 → 0.2.617

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.614",
+  "version": "0.2.617",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CButtonGroup/CButtonGroup.vue

@@ -8,7 +8,7 @@
         <button
           @click="showButtons = !showButtons"
           type="button"
-          class="focus:ring-blue-600 focus:border-blue-600 relative inline-flex items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 sm:rounded-md sm:px-3"
+          class="focus:ring-blue-600 focus:border-blue-600 focus:outline-none relative inline-flex items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:ring-1 sm:rounded-md sm:px-3"
           id="menu-3"
           aria-expanded="false"
           aria-haspopup="true"
@@ -23,7 +23,7 @@
       </div>
       <div
         v-show="showButtons"
-        class="absolute z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="ring-black focus:outline-none absolute z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-opacity-5"
         role="menu"
         aria-orientation="vertical"
       >
@@ -52,12 +52,12 @@
         v-for="(button, index) in buttonObject"
         v-bind:key="button.label"
         type="button"
-        class="relative inline-flex items-center border-r border-l border-t border-b border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        class="focus:outline-none relative inline-flex items-center border-r border-l border-t border-b border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
         :class="{
-          'rounded-r-md rounded-l-none border-l-0 border-r':
+          'rounded-r-md rounded-l-none border-l border-r':
             index == buttonObject.length - 1,
           'rounded-l-md': index == 0,
-          'border-r-0': index == 0 && buttonObject.length != 2,
+          'border-r-0': index != buttonObject.length - 1,
           'px-4': button.label,
         }"
         @click="handleEvent(button.onClickAction)"

package/src/components/CStats/CStats.vue

@@ -45,14 +45,20 @@
       ></c-tag>
     </div>
     <dl
-      class="mt-5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-gray-100 md:grid-cols-3 md:divide-y-0 md:divide-x"
+      :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">
+        <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>
@@ -62,19 +68,17 @@
               <p :class="`text-2xl font-semibold ${fontColor}`">
                 {{ count.totalCount }}
               </p>
-              <label v-if="count.days" class="ml-2 text-sm text-gray-500">{{
+              <label v-if="count.days" class="ml-2 text-xs text-gray-500">{{
                 count.days
               }}</label>
             </div>
           </div>
-          <div class="flex items-center pb-1" v-if="count.tag">
-            <c-tag
-              v-if="count.tag"
-              :label="count.tag.label"
-              :color="count.tag.color"
-              tagClasses="rounded-full"
-            ></c-tag>
-          </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>
@@ -97,6 +101,9 @@ export default {
       type: String,
       default: "text-gray-900",
     },
+    colorClasses: {
+      type: Object,
+    },
   },
 };
 </script>