Improve: Added borderActiveColor, borderTextActiveColor props

Author: anburocky3

README.md

@@ -11,7 +11,7 @@
 </a>
 <a href="https://www.npmjs.com/package/vue-pagination-tw">
   <img src="https://img.shields.io/npm/dw/vue-pagination-tw" alt="Downloads" />
-</a> 
+</a>
 
 [![NPM](https://nodei.co/npm/vue-pagination-tw.png)](https://nodei.co/npm/vue-pagination-tw/)
 
@@ -110,6 +110,21 @@ So this is also avaliable
 />
 ```
 
+If you want to specify custom `Active Border color & text color`, you can do it like this:
+
+```html
+<VuePaginationTw
+  :totalItems="20"
+  :currentPage="1"
+  :perPage="6"
+  @pageChanged="functionName"
+  :goButton="false"
+  styled="centered"
+  borderActiveColor="border-red-500"
+  borderTextActiveColor="text-red-500"
+/>
+```
+
 #### roadmaps
 
 - [ ] Make different versions of paginations (xs, md, lg, xlg)

dev/serve.vue

@@ -16,9 +16,9 @@ export default defineComponent({
     }
   },
   mounted() {
-    // let externalScript = document.createElement('script')
-    // externalScript.setAttribute('src', 'https://cdn.tailwindcss.com')
-    // document.head.appendChild(externalScript)
+    let externalScript = document.createElement('script')
+    externalScript.setAttribute('src', 'https://cdn.tailwindcss.com')
+    document.head.appendChild(externalScript)
   }
 });
 </script>
@@ -33,6 +33,8 @@ export default defineComponent({
           :per-page="6"
           @page-changed="console.log('s')"
           :go-button="false"
+          borderActiveColor="border-red-500"
+          borderTextActiveColor="text-red-500"
         />
       </div>
     </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pagination-tw",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Simple Vue Pagination component that can be used in any project with range & ui customization.",
   "main": "dist/vue-pagination-tw.ssr.js",
   "browser": "dist/vue-pagination-tw.esm.js",

src/components/vue-pagination-tw.vue

@@ -30,6 +30,14 @@ const props = defineProps({
     type: String,
     default: 'Go'
   },
+  borderActiveColor: {
+    type: String,
+    default: 'border-indigo-500'
+  },
+  borderTextActiveColor: {
+    type: String,
+    default: 'text-indigo-500'
+  },
   styled: {
     type: String,
     default: 'simple'
@@ -141,9 +149,10 @@ const calculatedPages = computed(() => {
           v-for="(page, index) in calculatedPages"
           :key="index"
           class="bg-white border border-gray-300 text-gray-500 relative inline-flex items-center px-4 py-2 text-sm font-medium"
-          :class="{ 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600': currentPage == page }"
+          :class="{ [`z-10 bg-indigo-50 !${borderActiveColor} !${borderTextActiveColor}`]: currentPage == page }"
           @click.prevent="changePage(page)"
         >{{ page }}</a>
+        <!-- :class="currentPage === page ? `z-10 bg-indigo-50 !${borderActiveColor} !${borderTextActiveColor}` : '' }" -->
         <span
           class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
           v-if="hasLast()"
@@ -197,7 +206,8 @@ const calculatedPages = computed(() => {
       <input
         type="text"
         placeholder="Page no"
-        class="w-28 px-4 py-1 rounded-l outline-none border-t-2 border-l-2 border-b-2 focus:border-indigo-500 placeholder:text-xs uppercase font-semibold"
+        class="w-28 px-4 py-1 rounded-l outline-none border-t-2 border-l-2 border-b-2 placeholder:text-xs uppercase font-semibold"
+        :class="`focus:${borderActiveColor}`"
         v-model="pageInput"
       />
       <button