classcard-ui 0.2.325 → 0.2.328

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.325",
+  "version": "0.2.328",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
-    "@storybook/addon-actions": "^6.4.13",
-    "@storybook/addon-essentials": "^6.4.13",
-    "@storybook/addon-links": "^6.4.13",
-    "@storybook/vue": "^6.4.13",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/vue": "^6.4.19",
     "@tailwindcss/postcss7-compat": "^2.2.14",
     "@types/lodash-es": "^4.17.5",
     "@vue/cli-plugin-babel": "^4.5.13",

package/src/components/CButtonGroup/CButtonGroup.vue

@@ -47,7 +47,7 @@
         type="button"
         class="relative inline-flex items-center px-2 py-2 border-r border-l border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
         :class="{
-          'rounded-r-md border-l-0': index == buttonObject.length - 1,
+          'rounded-r-md border-l-0 border-r rounded-l-none': index == buttonObject.length - 1,
           'rounded-l-md': index == 0,
           'border-r-0': index == 0 && buttonObject.length != 2,
           'px-4': button.label,

package/src/components/CButtonSelect/CButtonSelect.vue

@@ -24,9 +24,8 @@
       >
         <ul class="py-1" tabindex="-1" role="listbox" aria-labelledby="listbox-label">
           <li
-            v-for="(item, index) in items"
+            v-for="(item) in items"
             :key="item.text"
-            :class="index !== Object.keys(items).length - 1 ? 'border-b border-gray-200' : ''"
             class="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer"
             @mousedown="emitOptionAction(item.action)"
           >

package/src/components/CDatepicker/CDatepicker.vue

@@ -10,7 +10,10 @@
       <p v-if="isRequired" class="ml-1 text-red-600">*</p>
     </div>
     <v-date-picker
-      :class="{ 'inline-block h-full': true, 'w-full': isExpanded }"
+      :class="{
+        'inline-block h-full': true,
+        'w-full': isExpanded,
+      }"
       :masks="masks"
       @input="onDayClick"
       :value="value"
@@ -38,7 +41,7 @@
             :value="inputValue"
             :class="[
               disabled
-                ? 'border-l-0 border-gray-100 text-gray-400'
+                ? 'pointer-events-none border-l-0 border-gray-100 text-gray-400'
                 : 'border-l-0 border-gray-300 text-gray-900',
               'focus:outline-none focus:border-blue-500 w-full appearance-none rounded-r-md border  bg-white p-2 text-sm shadow-sm',
             ]"

package/src/components/CGroupedSelect/CGroupedSelect.vue

@@ -9,11 +9,11 @@
     <label v-if="label" class="block text-sm font-medium text-gray-700">
       {{ label }}
     </label>
-    <div class="mt-1 relative">
+    <div class="relative mt-1">
       <div class="relative">
         <input
           type="text"
-          class="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+          class="focus:outline-none relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 disabled:pointer-events-none disabled:opacity-50 sm:text-sm"
           aria-haspopup="listbox"
           aria-expanded="true"
           aria-labelledby="listbox-label"
@@ -21,12 +21,11 @@
           :placeholder="placeholder"
           @focus="openDropDown()"
           @input="onInput"
+          :disabled="disabled"
         />
-        <span
-          class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
-        >
+        <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
           <svg
-            class="animate-spin h-5 w-5 text-gray-400"
+            class="h-5 w-5 animate-spin text-gray-400"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
@@ -74,7 +73,7 @@
         To: "opacity-0"
     -->
       <ul
-        class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        class="ring-black focus:outline-none absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm"
         tabindex="-1"
         role="listbox"
         aria-labelledby="listbox-label"
@@ -89,15 +88,15 @@
 
         <span v-for="option in options" :key="option.id">
           <li
-            class="text-gray-900 text-left cursor-default select-none relative py-2 pl-3 pr-9"
+            class="relative cursor-default select-none py-2 pl-3 pr-9 text-left text-gray-900"
             role="option"
           >
-            <span class="font-bold italic block truncate">
+            <span class="block truncate font-bold italic">
               {{ option.label }}
             </span>
           </li>
           <li
-            class="text-gray-900 text-left cursor-default select-none relative py-2 pl-3 pr-9 group hover:text-white hover:bg-indigo-600"
+            class="group relative cursor-default select-none py-2 pl-3 pr-9 text-left text-gray-900 hover:bg-indigo-600 hover:text-white"
             v-for="subOption in option.options"
             :key="subOption.id"
             role="option"
@@ -106,9 +105,7 @@
             <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
             <span
               :class="[
-                subOption.label === value.label
-                  ? 'font-semibold'
-                  : 'font-normal',
+                subOption.label === value.label ? 'font-semibold' : 'font-normal',
                 ' block break-words',
               ]"
             >
@@ -121,7 +118,7 @@
           Highlighted: "text-white", Not Highlighted: "text-indigo-600"
         -->
             <span
-              class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4 group-hover:text-white"
+              class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 group-hover:text-white"
               v-if="subOption.label === value.label"
             >
               <!-- Heroicon name: solid/check -->
@@ -145,7 +142,7 @@
         <!-- More items... -->
       </ul>
     </div>
-    <p v-if="isError" class="mt-2 text-sm text-left text-red-600">
+    <p v-if="isError" class="mt-2 text-left text-sm text-red-600">
       {{ errorMessage }}
     </p>
   </div>
@@ -162,6 +159,7 @@ export default {
     value: Object,
     placeholder: String,
     isSearching: Boolean,
+    disabled: { type: Boolean, default: false },
     isError: { type: Boolean, default: false },
     errorMessage: {
       type: String,

package/src/stories/CButtonSelect.stories.js

@@ -23,8 +23,8 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = {
   items: [
-    { icon: "check", text: "one", action: "first" },
-    { icon: "check", text: "two", action: "second" },
+    { icon: "check", text: "one", action: "first", iconType: "solid" },
+    { icon: "check", text: "two", action: "second", iconType: "solid" },
   ],
   type: "primary",
   label: "Button",