classcard-ui 0.2.294 → 0.2.298

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.294",
+  "version": "0.2.298",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -53,6 +53,8 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "postcss": "^7.0.36",
+    "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.6",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.14",
     "vue-template-compiler": "^2.6.14"
   },

package/src/components/CButtonGroup/CButtonGroup.vue

@@ -51,8 +51,8 @@
           'rounded-l-md border-r-0': index == 0,
           'px-4': button.label,
         }"
-        @click="handleEvent(button.action)"
-        @blur="handleEvent(button.action)"
+        @click="handleEvent(button.onClickAction)"
+        @blur="handleEvent(button.blurAction)"
       >
         <div v-if="button.icon == ''" class="h-5"></div>
         <c-icon

package/src/components/CRadio/CRadio.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="bg-white rounded-md -space-y-px">
       <div
-        class="relative rounded-tl-md rounded-tr-md pb-5 flex"
+        class="relative rounded-tl-md rounded-tr-md pb-5"
         v-for="item in items"
         v-bind:key="item.label"
       >
@@ -16,16 +16,16 @@
             class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 cursor-pointer border-gray-300 disabled:opacity-50"
             :disabled="isDisabled"
           />
+          <label class="ml-3 flex flex-col cursor-pointer" @click="onChange(item.value)">
+            <span class="block text-sm font-medium">
+              {{ item.label }}
+            </span>
+            <span class="block text-sm text-gray-500">
+              {{ item.description }}
+            </span> 
+          </label>
         </div>
-        <label class="ml-3 flex flex-col cursor-pointer" @click="onChange(item.value)">
-          <span class="block text-sm font-medium">
-            {{ item.label }}
-          </span>
-          <span class="block text-sm text-gray-500">
-            {{ item.description }}
-          </span>
-          <slot v-if="item.value === selectedItem" :name="item.value" />
-        </label>
+        <slot v-if="item.value === selectedItem" :name="item.value" />
       </div>
     </div>
   </div>

package/src/components/CReorderableStackedList/CReorderableStackedList.vue

@@ -24,6 +24,7 @@
           :size="items.size"
           :rounded="items.rounded"
           :image="items.image"
+          :imageClasses="items.imageClasses"
         ></c-avatar>
         <div class="flex flex-grow items-center justify-between flex-wrap">
           <div class="ml-3">

package/src/components/CTable/CTable.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <div
-      slot="table-actions"
-      v-if="tableActions"
-      class="bg-gray-50 rounded-lg p-3 mb-4"
-    >
+    <div slot="table-actions" v-if="tableActions" class="mb-4 rounded-lg bg-gray-50 p-3">
       <div class="flex justify-between">
         <div v-if="searching">
           <c-input
@@ -22,55 +18,22 @@
             <div>
               <button
                 @click="handleToggle"
-                class="
-                  inline-flex
-                  justify-center
-                  w-full
-                  rounded-md
-                  border border-gray-200
-                  shadow-sm
-                  px-2
-                  py-2
-                  bg-white
-                  text-sm
-                  font-medium
-                  hover:bg-gray-50
-                  focus:outline-none focus:outline-none
-                  focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600
-                "
+                class="focus:outline-none inline-flex w-full justify-center rounded-md border border-gray-200 bg-white px-2 py-2 text-sm font-medium shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
                 aria-haspopup="true"
                 aria-expanded="true"
               >
-                <c-icon
-                  name="view-board"
-                  type="solid"
-                  class="text-gray-400 h-5 w-5"
-                ></c-icon>
+                <c-icon name="view-board" type="solid" class="h-5 w-5 text-gray-400"></c-icon>
                 <c-icon
                   name="chevron-down"
                   type="solid"
-                  class="ml-1 text-gray-400 h-5 w-5"
+                  class="ml-1 h-5 w-5 text-gray-400"
                 ></c-icon>
               </button>
             </div>
             <!-- dropdown having list of all columns to show hide -->
             <div
               v-if="toggleDropdown"
-              class="
-                origin-top-right
-                absolute
-                right-0
-                mt-2
-                -mr-1
-                w-56
-                rounded-md
-                shadow-lg
-                bg-white
-                ring-1 ring-gray-900 ring-opacity-5
-                z-100
-                overflow-y-auto
-                max-h-96
-              "
+              class="absolute right-0 z-10 mt-2 -mr-1 max-h-96 w-56 origin-top-right overflow-y-auto rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
               tabindex="0"
               @blur="handleToggle"
             >
@@ -84,15 +47,7 @@
                   href="#"
                   v-for="column in showHideColumnList"
                   v-bind:key="column.field"
-                  class="
-                    flex
-                    block
-                    px-4
-                    py-2
-                    text-sm text-gray-700
-                    hover:bg-gray-100
-                    hover:text-gray-900
-                  "
+                  class="block flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                   role="menuitem"
                 >
                   <c-checkbox
@@ -121,12 +76,10 @@
     </div>
 
     <vue-good-table
-      class="border-solid border-2 border-gray-100 rounded-lg overflow-hidden"
+      class="overflow-hidden rounded-lg border-2 border-solid border-gray-100"
       mode="remote"
       ref="my-table"
-      :styleClass="
-        showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'
-      "
+      :styleClass="showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'"
       row-style-class="focus:outline-none"
       min-height="400px"
       :globalSearch="true"
@@ -170,21 +123,21 @@
           <c-icon
             v-if="props.column.direction == null"
             name="sort-ascending-solid"
-            class="h-5 w-5 ml-3 invisible sortingIcon"
+            class="sortingIcon invisible ml-3 h-5 w-5"
             type="solid"
           ></c-icon>
           <!-- renders when direction is asc -->
           <c-icon
             v-else-if="props.column.direction == 'asc'"
             name="sort-ascending-solid"
-            class="h-5 w-5 ml-3"
+            class="ml-3 h-5 w-5"
             type="solid"
           ></c-icon>
           <!-- renders when direction is desc -->
           <c-icon
             v-else-if="props.column.direction == 'desc'"
             name="sort-descending-solid"
-            class="h-5 w-5 ml-3"
+            class="ml-3 h-5 w-5"
             type="solid"
           ></c-icon>
         </span>
@@ -195,11 +148,7 @@
       <template slot="table-row" slot-scope="props">
         <!-- renders if drag and drop is present in table -->
         <span v-if="props.column.field == 'drag'">
-          <c-icon
-            name="menu-solid"
-            type="solid"
-            class="h-5 w-5 text-gray-500 handle"
-          ></c-icon>
+          <c-icon name="menu-solid" type="solid" class="handle h-5 w-5 text-gray-500"></c-icon>
         </span>
         <!-- if customization or adding another form element is required -->
         <span v-else-if="props.column.customizeColumn">
@@ -223,7 +172,7 @@
       <!-- Custom loader for table -->
       <template slot="loadingContent">
         <svg
-          class="animate-spin h-7 w-7 text-white ml-auto mr-auto"
+          class="ml-auto mr-auto h-7 w-7 animate-spin text-white"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
@@ -376,12 +325,8 @@ export default {
     },
     // array of rows after drag and drop
     rearrange(oldIndex, newIndex) {
-      const movedItem = this.reorderedArray.find(
-        (item, index) => index === oldIndex
-      );
-      const remainingItems = this.reorderedArray.filter(
-        (item, index) => index !== oldIndex
-      );
+      const movedItem = this.reorderedArray.find((item, index) => index === oldIndex);
+      const remainingItems = this.reorderedArray.filter((item, index) => index !== oldIndex);
       const reorderedItems = [
         ...remainingItems.slice(0, newIndex),
         movedItem,

package/src/icons.js

@@ -40,7 +40,7 @@ export default {
   integration:
     "M10,13H4a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V14A1,1,0,0,0,10,13ZM9,19H5V15H9ZM20,3H14a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V4A1,1,0,0,0,20,3ZM19,9H15V5h4Zm1,7H18V14a1,1,0,0,0-2,0v2H14a1,1,0,0,0,0,2h2v2a1,1,0,0,0,2,0V18h2a1,1,0,0,0,0-2ZM10,3H4A1,1,0,0,0,3,4v6a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V4A1,1,0,0,0,10,3ZM9,9H5V5H9Z",
   clipboard:
-    "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2",
+    "M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z",
   package:
     "M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7",
   document:

package/src/stories/CButtonGroup.stories.js

@@ -16,13 +16,17 @@ const Template = (args, { argTypes }) => ({
 });
 
 const consoleIt = () => {
-  console.log("event fired")
+  console.log("onclick fired")
+}
+
+const consoleOut = () => {
+  console.log("focus lost")
 }
 
 export const Default = Template.bind({});
 Default.args = {
   buttonObject: [
-    { icon: "bookmark", label: "Students", value:'students', action: consoleIt },
+    { icon: "bookmark", label: "Students", value:'students', onClickAction: consoleIt, blurAction: consoleOut },
     { icon: "chat", label: "Alkama", value:'alkama'},
     { icon: "bookmark", label: "Attendance", value:'attendance' },
   ],

package/src/stories/CReorderableStackedList.stories.js

@@ -18,6 +18,6 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = {
     listItems: [
-        { image: "https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", heading: "Maths-Level1", description: "calvin.hawkins@example.com", size:"medium", rounded:false, tag:true, collapse:false, listIcon: true, reorder:true },
+        { image: "https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", heading: "Maths-Level1", description: "calvin.hawkins@example.com", size:"medium", rounded:false, tag:true, collapse:false, listIcon: true, reorder:true, imageClasses: "bg-gray-200 border-gray-200 border" },
       ],
 };