classcard-ui 0.2.716 → 0.2.718

package/package.json

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

package/src/components/CIconDropdown/CIconDropdown.vue

@@ -21,6 +21,7 @@
             :name="icon.name"
             :type="icon.type"
             :class="icon.class"
+            :cursorType="cursorType"
           ></c-icon>
         </button>
       </div>
@@ -30,28 +31,30 @@
         class="absolute z-10 mt-2 -mr-1 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
       >
         <div
-          class="w-max py-2"
+          class="w-max py-1"
           role="menu"
           aria-orientation="vertical"
           aria-labelledby="option-menu"
         >
-          <a
-            v-for="(item, index) in items"
-            v-bind:key="item.text"
-            @mousedown.stop.prevent="dropdownAction(item)"
-            class="flex cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 disabled:pointer-events-none disabled:opacity-50"
-            :class="item.class"
-            role="menuitem"
-            :disabled="item.disabled"
-          >
-            <c-icon
-              v-if="item.icon"
-              :name="dropdownIcons[index].name"
-              :type="dropdownIcons[index].type"
-              :class="dropdownIcons[index].class"
-            ></c-icon>
-            {{ item.text }}
-          </a>
+          <div v-for="(item, index) in items" v-bind:key="item.text">
+            <a
+              @mousedown.stop.prevent="dropdownAction(item)"
+              class="flex cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 disabled:pointer-events-none disabled:opacity-50"
+              :class="item.class"
+              role="menuitem"
+              :disabled="item.disabled"
+            >
+              <c-icon
+                v-if="item.icon"
+                :name="dropdownIcons[index].name"
+                :type="dropdownIcons[index].type"
+                :class="dropdownIcons[index].class"
+                :cursorType="cursorType"
+              ></c-icon>
+              {{ item.text }}
+            </a>
+            <hr v-if="item.border" class="my-1" />
+          </div>
         </div>
       </div>
     </div>
@@ -91,6 +94,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    cursorType: {
+      type: String,
+      default: "cursor-pointer",
+    },
   },
   data() {
     return {

package/src/stories/CIconDropdown.stories.js

@@ -9,7 +9,7 @@ export default {
   argTypes: {
     items: { control: { type: "object" } },
     icon: Object,
-    dropdownIcons: { type: Array }
+    dropdownIcons: { type: Array },
   },
 };
 
@@ -22,19 +22,24 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = {
   items: [
-    { icon: true, text: "one", action:'alert', class:'hover:bg-red-100 hover:text-red-500 w-56' },
+    {
+      icon: true,
+      text: "one",
+      action: "alert",
+      class: "hover:bg-red-100 hover:text-red-500 w-56",
+    },
     { text: "two" },
   ],
   dropdownIcons: [
     {
-      name:'trash',
-      class:'mr-3 h-5 w-5 text-gray-400 hover:text-red-500',
-      type:'solid'
-    }
+      name: "trash",
+      class: "mr-3 h-5 w-5 text-gray-400 hover:text-red-500",
+      type: "solid",
+    },
   ],
-  icon:{
-      name:'dots-vertical-solid',
-      class:'h-5 w-5 text-gray-500',
-      type:'solid'
-  }
-};
+  icon: {
+    name: "dots-vertical-solid",
+    class: "h-5 w-5 text-gray-500",
+    type: "solid",
+  },
+};