feat: add some props for adjustment ui

gitsindonesia · Dec 16, 2021 · c50ce33 · c50ce33
1 parent 4901f3a
commit c50ce33
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/src/components/VBreadcrumbs/VBreadcrumbs.vue b/src/components/VBreadcrumbs/VBreadcrumbs.vue
@@ -11,6 +11,10 @@ const props = defineProps({
     type: String,
     default: '/',
   },
+  customClass: {
+    type: String,
+    default: ''
+  }
 });
 </script>
 
@@ -20,16 +24,17 @@ const props = defineProps({
       <slot :name="`item.${index}`">
         <router-link
           :to="item.to"
-          exact-active-class="text-primary-500"
-          class="font-medium hover:text-primary-600"
+          :class="[customClass]"
+          exact-active-class="!text-primary-600"
+          class="font-medium hover:text-primary-700"
         >
           <slot :name="`title.${index}`">
             {{ item.title }}
           </slot>
         </router-link>
         <template v-if="index + 1 < props.items.length">
           <slot name="divider">
-            <span class="text-sm text-gray-400 font-medium mx-2">
+            <span class="text-sm text-gray-400 font-medium mx-0">
               {{ props.divider }}
             </span>
           </slot>

diff --git a/src/components/VBtn/VBtn.vue b/src/components/VBtn/VBtn.vue
@@ -143,6 +143,8 @@ const colorClass = computed(() => {
         return 'text-error-600';
       case 'success':
         return 'text-success-600';
+      case 'gray-light':
+        return 'text-gray-3';
       default:
         return 'text-gray-800';
     }
@@ -160,6 +162,8 @@ const colorClass = computed(() => {
         return 'text-error-600 border-error-600 hover:bg-error-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent';
       case 'success':
         return 'text-success-600 border-success-600 hover:bg-success-600 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent';
+      case 'gray-light':
+        return 'text-gray-3 border-gray-3 hover:bg-gray-300 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent';
       default:
         return 'text-gray-600 border-gray-600 hover:bg-gray-400 hover:bg-opacity-20 disabled:bg-opacity-50 disabled:border-opacity-50 disabled:bg-opacity-50 disabled:text-opacity-50 hover:disabled:bg-transparent';
     }
@@ -177,6 +181,8 @@ const colorClass = computed(() => {
         return 'text-white border-error-600 bg-error-600 hover:border-error-700 hover:bg-error-700 focus:ring-error-600';
       case 'success':
         return 'text-white border-success-600 bg-success-600 hover:border-success-700 hover:bg-success-700';
+      case 'gray-light':
+        return 'text-gray-3 hover:text-gray-200 hover:bg-gray-50 bg-white border-gray-300 focus:border-gray-400 hover:border-gray-400';
       default:
         return 'text-gray-800 hover:text-gray-900 hover:bg-gray-50 bg-white border-gray-300 focus:border-gray-400 hover:border-gray-400';
     }

diff --git a/src/components/VDataTable/VDataTable.vue b/src/components/VDataTable/VDataTable.vue
@@ -363,8 +363,8 @@ const end = computed(() =>
                 <a
                   v-if="!disableSorting && header.sortable"
                   href="#"
-                  class="flex justify-between items-center truncate"
-                  :class="[header.align ? `justify-${header.align}` : '']"
+                  class="flex items-center truncate"
+                  :class="[header.align ? `justify-${header.align}` : 'justify-between']"
                   @click.prevent="handleSort(header)"
                 >
                   <span>

diff --git a/src/components/VNavDrawer/VNavDrawer.vue b/src/components/VNavDrawer/VNavDrawer.vue
@@ -44,6 +44,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  toggleColor: {
+    type: String,
+    default: 'primary',
+  },
 });
 
 const {mini, menus, logoProps, dark, color, hideToggle, classMenuParent} =
@@ -99,7 +103,7 @@ const bgColor = computed(() =>
             no-ring
             class="absolute -right-4"
             :class="btnToggleClass"
-            color="primary"
+            :color="toggleColor"
             @click="toggleMenu"
           >
             <ChevronLeftIcon

diff --git a/src/components/VPagination/VPagination.vue b/src/components/VPagination/VPagination.vue
@@ -42,7 +42,7 @@ const props = defineProps({
   activeClass: {
     type: String,
     default:
-      'bg-primary-500 border-primary-500 hover:!bg-primary-600 text-white !font-bold',
+      'bg-primary-600 border-primary-600 hover:!bg-primary-700 text-white !font-bold',
   },
   defaultClass: {
     type: String,