@redseed/redseed-ui-vue3 5.1.2 → 5.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "5.1.2",
+  "version": "5.1.4",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Table/Table.vue

@@ -119,12 +119,17 @@ const props = defineProps({
     table {
         @apply w-full border-collapse table-auto;
 
-        tr{
-            th {
-                @apply bg-rsui-grey-100;
-                @apply font-semibold text-xs leading-5 text-rsui-grey-600 hover:text-rsui-grey-700;
+        thead {
+            tr {
+                @apply last:border-b-rsui-grey-400;
+
+                th {
+                    @apply bg-rsui-grey-100;
+                    @apply font-semibold text-xs leading-5 text-rsui-grey-600 hover:text-rsui-grey-700;
+                }
             }
         }
+
     }
 
     &__container {

package/src/components/Table/Th.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { ArrowUpIcon, ChevronUpDownIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -18,9 +18,13 @@ const props = defineProps({
 const sortable = computed(() => props.sort !== false)
 
 const isAsc = ref(props.sort === 'asc')
-
 const isDesc = ref(props.sort === 'desc')
 
+watch(() => props.sort, () => {
+    isAsc.value = props.sort === 'asc'
+    isDesc.value = props.sort === 'desc'
+})
+
 const emit = defineEmits(['sort'])
 
 function handleSort() {

package/src/components/Table/Tr.vue

@@ -30,7 +30,7 @@ function handleClick() {
 .rsui-tr {
     @apply transition-all;
     @apply border-b border-rsui-grey-400 rounded-lg;
-    @apply last:border-b-transparent only:border-b-rsui-grey-400;
+    @apply last:border-b-transparent;
 
     &--clickable {
         @apply cursor-pointer hover:bg-rsui-grey-100;