classcard-ui 0.2.208 → 0.2.212

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.208",
+  "version": "0.2.212",
+  "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
     "build-bundle": "vue-cli-service build --target lib --name classcard-ui src/main.js",
-    "build-storybook": "build-storybook",
-    "publish-to-npm": "npm version patch && npm run build-bundle && npm publish",
-    "storybook": "start-storybook -p 6006"
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "publish-to-npm": "npm version patch && git push && npm run build-bundle && npm publish",
+    "build-storybook": "build-storybook"
   },
-  "main": "dist/classcard-ui.common.js",
   "files": [
     "dist/*",
     "src/*"
@@ -18,18 +18,13 @@
   "dependencies": {
     "@shopify/draggable": "^1.0.0-beta.8",
     "@storybook/addon-postcss": "^2.0.0",
-    "@tailwindcss/postcss7-compat": "^2.2.17",
-    "autoprefixer": "^9",
+    "@tailwindcss/forms": "^0.2.1",
     "core-js": "^3.18.0",
     "dayjs": "^1.10.7",
     "filestack-js": "^3.25.0",
     "gridjs-selection": "^3.4.0",
     "gridjs-vue": "^3.4.0",
-    "i": "^0.3.7",
     "lodash-es": "^4.17.21",
-    "npm": "^8.3.0",
-    "postcss": "^7",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "v-calendar": "^2.3.2",
     "vue": "^2.6.14",
     "vue-good-table": "^2.21.8",
@@ -42,21 +37,22 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
-    "@storybook/vue": "^6.4.9",
-    "@tailwindcss/forms": "^0.4.0",
+    "@storybook/addon-actions": "^6.4.4",
+    "@storybook/addon-essentials": "^6.4.4",
+    "@storybook/addon-links": "^6.4.4",
+    "@storybook/vue": "^6.4.4",
     "@tailwindcss/postcss7-compat": "^2.2.14",
     "@types/lodash-es": "^4.17.5",
     "@vue/cli-plugin-babel": "^4.5.13",
     "@vue/cli-plugin-eslint": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
+    "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-cli-plugin-tailwind": "~2.2.18",
+    "postcss": "^7.0.36",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.14",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {

package/src/components/CDatepicker/CDatepicker.vue

@@ -41,7 +41,6 @@
                 : 'border-gray-300 border-l-0 text-gray-700',
               'bg-white  w-full p-2 appearance-none border  rounded-r-md focus:outline-none focus:border-blue-500 text-sm',
             ]"
-            @click="togglePopover()"
             :readonly="disabled"
           />
         </div>

package/src/components/CInputAddon/CInputAddon.vue

@@ -74,7 +74,7 @@
         <div
           v-if="!isValidate"
           class="right-0 pr-2 flex items-center pointer-events-none text-red-600"
-          >
+        >
           <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
         </div>
         <span

package/src/components/CMultiselect/CMultiselect.vue

@@ -74,7 +74,7 @@ export default {
       required: true,
     },
     label: String,
-    placeholder: {
+    placeholder:{
       type: String,
       default: "Start typing... (min 2 characters) to search options",
     },
@@ -173,7 +173,7 @@ export default {
 .vs__dropdown-toggle.vs__dropdown-option--highlight {
   @apply bg-indigo-700 text-white;
 }
-.vs__dropdown-option--highlight {
+.vs__dropdown-option--highlight { 
   @apply bg-indigo-700 text-white;
 }
 </style>

package/src/components/CMultiselectr/CMultiselectr.vue

@@ -1,11 +1,12 @@
 <template>
   <div>
-    <!-- <label class="text-sm text-gray-900">{{label}}</label>
+     <!-- <label class="text-sm text-gray-900">{{label}}</label>
     <multiselect class="mt-1" v-model="value" :options="options" :multiple="true">
     </multiselect> -->
   </div>
 </template>
 <script>
+
 export default {
   // name: "CMultiselect",
   // components: { Multiselect },
@@ -37,7 +38,7 @@ export default {
 .multiselect__tag-icon:hover,
 .multiselect__option--highlight,
 .multiselect__option--highlight::after {
-  background: #0369a1;
+  background: #0369A1;
   color: #fff;
 }
 </style>

package/src/components/CPagination/CPagination.vue

@@ -1,85 +1,80 @@
 <template>
-<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
-  <div class="flex-1 flex justify-between sm:hidden">
-    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
-      Previous
-    </a>
-    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
-      Next
-    </a>
-  </div>
-  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-    <div>
-      <p class="text-sm text-gray-700">
-        Showing
-        <span class="font-medium">1</span>
-        to
-        <span class="font-medium">10</span>
-        of
-        <span class="font-medium">97</span>
-        results
-      </p>
-    </div>
-    <div>
-      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
-        <div class="hidden md:-mt-px md:flex">
-          <div href="#"
-            @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
-            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-r-0 border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-            :class="
+  <nav class="px-4 flex items-center justify-between sm:px-0">
+    <div class="-mt-px w-0 flex-1 flex">
+      <a
+        @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
+        class="pt-4 pr-1 inline-flex items-center text-sm font-medium"
+        :class="
+          currentPageNumber == '1'
+            ? 'text-gray-400 pointer-events-none'
+            : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
+        "
+      >
+        <c-icon
+          name="arrow-narrow-left-solid"
+          class="h-5 w-5 mr-3"
+          :class="
             currentPageNumber == '1'
               ? 'text-gray-400 pointer-events-none'
-              : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
-            "
-            >
-            <span class="sr-only">Previous</span>
-            <!-- Heroicon name: solid/chevron-left -->
-            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
-            </svg>
-          </div>
-          <div
-            v-for="page in pageRange"
-            :key="page"
-            :class="[
-              page == currentPageNumber
-                ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium'
-                : '',
-              page === '...' ? 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border border-r-0 text-sm font-medium' : '',
-              page !== currentPageNumber && page !== '...'
-                ? 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border border-r-0 text-sm font-medium'
-                : '',
-            ]"
-            @click="changePage(page)"
-          >
-            <div v-if="page === '...'">...</div>
-            <div v-else>
-              {{ page }}
-            </div>
-          </div>
-          <div href="#"
-          class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
-          @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
+              : 'text-gray-500 group-hover:text-gray-800'
+          "
+          type="solid"
+        ></c-icon>
+        Previous
+      </a>
+    </div>
+    <div class="hidden md:-mt-px md:flex">
+      <div
+        v-for="page in pageRange"
+        :key="page"
+        class="text-gray-500 hover:text-gray-700 px-4 inline-flex items-center text-sm font-medium group"
+        :class="[
+          page == currentPageNumber
+            ? 'border-indigo-500 border-t-4 cursor-pointer'
+            : 'hover:border-t-4',
+          page === '...' ? 'cursor-text hover:border-t-4 hover:border-transparent' : '',
+          page !== currentPageNumber && page !== '...'
+            ? 'hover:border-gray-300 hover:border-t-4 cursor-pointer'
+            : '',
+        ]"
+        @click="changePage(page)"
+      >
+        <div class="pt-4 group-hover:-mt-1" v-if="page === '...'">...</div>
+        <div v-else-if="page == currentPageNumber" class="pt-3.5 text-indigo-600">
+          {{ page }}
+        </div>
+        <div class="pt-4 group-hover:-mt-1" v-else>
+          {{ page }}
+        </div>
+      </div>
+    </div>
+    <div class="-mt-px w-0 flex-1 flex justify-end">
+      <a
+        @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
+        class="pt-4 pl-1 inline-flex items-center text-sm"
+        :class="
+          currentPageNumber == lastPageNumber
+            ? 'text-gray-400 pointer-events-none'
+            : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
+        "
+      >
+        Next
+        <c-icon
+          class="ml-3 h-5 w-5"
           :class="
             currentPageNumber == lastPageNumber
               ? 'text-gray-400 pointer-events-none'
-              : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
+              : 'text-gray-500 group-hover:text-gray-800'
           "
-          >
-            <span class="sr-only">Next</span>
-            <!-- Heroicon name: solid/chevron-right -->
-            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-            </svg>
-          </div>
-        </div>
-      </nav>
+          name="arrow-narrow-right-solid"
+          type="solid"
+        ></c-icon>
+      </a>
     </div>
-  </div>
-</div>
+  </nav>
 </template>
 <script>
-// import CIcon from "../CIcon/CIcon.vue";
+import CIcon from "../CIcon/CIcon.vue";
 export default {
   name: "CPagination",
   props: {
@@ -97,7 +92,7 @@ export default {
     },
   },
   components: {
-    
+    CIcon,
   },
   data() {
     return {

package/src/components/CRadio/CRadio.vue

@@ -17,10 +17,7 @@
             :disabled="isDisabled"
           />
         </div>
-        <label
-          class="ml-3 flex flex-col cursor-pointer"
-          @click="onChange(item.value)"
-        >
+        <label class="ml-3 flex flex-col cursor-pointer" @click="onChange(item.value)">
           <span class="block text-sm font-medium">
             {{ item.label }}
           </span>

package/src/components/CSwitch/CSwitch.vue

@@ -38,7 +38,6 @@
         <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
       </span>
     </div>
-
     <!-- large toggle -->
     <div v-else :class="label == '' ? 'items-center' : 'items-start'" class="flex justify-between cursor-pointer">
       <span class="flex-grow flex flex-col" id="toggleLabel" v-if="direction == 'left'" @click="switchValue">
@@ -60,7 +59,7 @@
           class="inline-block h-5 w-5 rounded-full bg-white transform ring-0 transition ease-in-out duration-200"
         ></span>
       </button>
-      <span class="flex flex-col" id="toggleLabel" v-if="direction == 'right'" @click="switchValue">
+      <span class="flex flex-col" id="toggleLabel" v-if="direction == 'right'" disabled:opacity-50>
         <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
         <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
       </span>
@@ -92,9 +91,6 @@ export default {
     direction: {
       type: String,
     },
-    disabled: {
-      type: Boolean,
-    }
   },
   data() {
     return {
@@ -103,7 +99,7 @@ export default {
   },
   methods: {
     switchValue() {
-      this.isToggle = this.isToggle == 1 ? 0 : 1;
+      this.isToggle = this.isToggle === 1 ? 0 : 1;
       this.$emit("returnToggleValue", this.isToggle);
     },
   },