classcard-ui 0.2.293 → 0.2.297

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.293",
+  "version": "0.2.297",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CButtonGroup/CButtonGroup.vue

@@ -51,9 +51,8 @@
           'rounded-l-md border-r-0': index == 0,
           'px-4': button.label,
         }"
-        @click="buttonAction($event, button.value)"
-        @focus="$emit('focus', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
+        @click="handleEvent(button.onClickAction)"
+        @blur="handleEvent(button.blurAction)"
       >
         <div v-if="button.icon == ''" class="h-5"></div>
         <c-icon
@@ -87,14 +86,11 @@ export default {
     };
   },
   methods: {
+    handleEvent(function_name) {
+      if(function_name) function_name()
+    },
     buttonAction(event, value) {
       this.$emit("onClick", value);
-    },
-    focus() {
-      console.log("focus")
-    },
-    blur() {
-      console.log("blur")
     }
   },
 };

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/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

@@ -15,10 +15,18 @@ const Template = (args, { argTypes }) => ({
   template: '<c-button-group v-bind="$props" />',
 });
 
+const consoleIt = () => {
+  console.log("onclick fired")
+}
+
+const consoleOut = () => {
+  console.log("focus lost")
+}
+
 export const Default = Template.bind({});
 Default.args = {
   buttonObject: [
-    { icon: "bookmark", label: "Students", value:'students' },
+    { 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" },
       ],
 };