Adjust some components

example/cypress/e2e/button.cy.ts

@@ -32,8 +32,7 @@ describe('Button', () => {
     cy.get('@primaryButton').find('span[class*=_label]');
 
     // disabled buttons not emit click
-    cy.get('@disabledButton').click({ force: true });
-    cy.get('@disabledButton').dblclick({ force: true });
+    cy.get('@disabledButton').should('be.disabled');
     cy.get('@disabledButton').contains('0');
   });
 });

example/cypress/e2e/data-table.cy.ts

@@ -16,7 +16,7 @@ describe('DataTable', () => {
       .should('not.exist');
 
     cy.get('@columnsDefined')
-      .find('table tbody td[class*=_align__left_]')
+      .find('table tbody td[class*=_align__start_]')
       .contains('1')
       .should('exist');
 
@@ -42,7 +42,7 @@ describe('DataTable', () => {
       .should('exist');
 
     cy.get('@columnsNotDefined')
-      .find('table tbody td[class*=_align__left_]')
+      .find('table tbody td[class*=_align__start_]')
       .contains('1')
       .should('exist');
   });

example/cypress/e2e/overlays/tooltip.cy.ts

@@ -10,22 +10,26 @@ describe('Tooltip', () => {
 
     cy.get('div[data-cy=tooltip-0]').as('defaultTooltip');
 
-    cy.get('@defaultTooltip').find('div[class*=_trigger_]');
+    cy.get('@defaultTooltip').find('div[class*=_activator_]');
     cy.get('@defaultTooltip').trigger('mouseover');
     cy.get('@defaultTooltip').find('div[role=tooltip]');
     cy.get('@defaultTooltip').trigger('mouseleave');
-    cy.get('@defaultTooltip').find('div[role=tooltip]').should('not.exist');
+    cy.get('@defaultTooltip')
+      .find('div[role=tooltip-content]')
+      .should('not.exist');
   });
 
   it('checks for and trigger arrow tooltip', () => {
     cy.get('div[data-cy=tooltip-4]').as('tooltipWithArrow');
 
-    cy.get('@tooltipWithArrow').find('div[class*=_trigger_]');
+    cy.get('@tooltipWithArrow').find('div[class*=_activator_]');
     cy.get('@tooltipWithArrow').trigger('mouseover');
     cy.get('@tooltipWithArrow').find('div[role=tooltip]');
     cy.get('@tooltipWithArrow').find('span[data-popper-arrow]');
     cy.get('@tooltipWithArrow').trigger('mouseleave');
-    cy.get('@tooltipWithArrow').find('div[role=tooltip]').should('not.exist');
+    cy.get('@tooltipWithArrow')
+      .find('div[role=tooltip-content]')
+      .should('not.exist');
     cy.get('@tooltipWithArrow')
       .find('span[data-popper-arrow]')
       .should('not.exist');
@@ -34,8 +38,10 @@ describe('Tooltip', () => {
   it('disabled should not trigger tooltip', () => {
     cy.get('div[data-cy=tooltip-8]').as('disabledTooltip');
 
-    cy.get('@disabledTooltip').find('div[class*=_trigger_]');
+    cy.get('@disabledTooltip').find('div[class*=_activator_]');
     cy.get('@disabledTooltip').trigger('mouseover');
-    cy.get('@disabledTooltip').find('div[role=tooltip]').should('not.exist');
+    cy.get('@disabledTooltip')
+      .find('div[role=tooltip-content]')
+      .should('not.exist');
   });
 });

example/src/components/AppFootNav.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, toRefs, useCssModule } from 'vue';
 import { get } from '@vueuse/shared';
+import { useRoute } from 'vue-router/composables';
 import { type SideNavLink } from '@/types';
-import router from '@/router';
 
 const props = defineProps<{
   navigation: Array<{
@@ -11,15 +11,15 @@ const props = defineProps<{
   }>;
 }>();
 
-const route = computed(() => router.currentRoute);
+const route = useRoute();
 const css = useCssModule();
 
 const { navigation } = toRefs(props);
 const links = computed(() =>
   get(navigation).flatMap((section) => section.links),
 );
 const currentPage = computed(() =>
-  get(links).find((link) => link.to.name === route.value.name),
+  get(links).find((link) => link.to.name === route.name),
 );
 const currentPageIndex = computed(() => {
   const current = get(currentPage);

example/src/components/AppSideNav.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { computed, useCssModule } from 'vue';
+import { useCssModule } from 'vue';
+import { useRoute } from 'vue-router/composables';
 import { type SideNavLink } from '@/types';
-import router from '@/router';
 
 defineProps<{
   navigation: Array<{
@@ -10,7 +10,7 @@ defineProps<{
   }>;
 }>();
 
-const route = computed(() => router.currentRoute);
+const route = useRoute();
 const css = useCssModule();
 </script>
 

example/src/main.ts

@@ -42,6 +42,7 @@ const pinia = createPinia();
 setActivePinia(pinia);
 
 new Vue({
+  // @ts-ignore
   pinia,
   router,
   render: (h) => h(App),

example/src/views/CardView.vue

@@ -450,6 +450,41 @@ const sections = ref<
         divide: true,
         dense: true,
       },
+      {
+        content: 'Lorem ipsum dolor sit amet consect '.repeat(4),
+        header: 'Card with small border radius',
+        subheader: 'Card subheader',
+        variant: 'outlined',
+        prepend: 'OP',
+        rounded: 'sm',
+      },
+      {
+        content: 'Lorem ipsum dolor sit amet consect '.repeat(4),
+        header: 'Divided Card with large border radius',
+        subheader: 'Card subheader',
+        variant: 'outlined',
+        prepend: 'OP',
+        rounded: 'lg',
+        divide: true,
+      },
+      {
+        content: 'Lorem ipsum dolor sit amet consect '.repeat(4),
+        header: 'Card with image and small border radius',
+        subheader: 'Card subheader',
+        variant: 'outlined',
+        prepend: 'OP',
+        rounded: 'sm',
+        image: 'https://placehold.co/480x160',
+      },
+      {
+        content: 'Lorem ipsum dolor sit amet consect '.repeat(4),
+        header: 'Card with image and large border radius',
+        subheader: 'Card subheader',
+        variant: 'outlined',
+        prepend: 'OP',
+        rounded: 'lg',
+        image: 'https://placehold.co/480x160',
+      },
     ],
   },
 ]);

example/src/views/CheckboxView.vue

@@ -73,8 +73,8 @@ const checkboxes = ref([
         v-for="(checkbox, i) in checkboxes"
         :key="i"
         v-model="checkbox.value"
-        :indeterminate="checkbox.indeterminate"
         v-bind="checkbox"
+        @update:indeterminate="checkbox.indeterminate = $event"
       >
         <span class="capitalize"> {{ checkbox.color }} </span>
       </RuiCheckbox>

example/src/views/DataTableView.vue

@@ -50,16 +50,19 @@ const columns: DataTableColumn[] = [
     key: 'name',
     label: 'Full name',
     sortable: true,
+    align: 'start',
   },
   {
     key: 'username',
     label: 'Username',
     sortable: true,
+    align: 'center',
   },
   {
     key: 'email',
     label: 'Email address',
     sortable: true,
+    align: 'end',
   },
   {
     key: 'address.street',
@@ -82,7 +85,7 @@ const columns: DataTableColumn[] = [
   {
     key: 'phone',
     label: 'Phone',
-    align: 'right',
+    align: 'end',
   },
   {
     key: 'action',
@@ -125,7 +128,7 @@ const fixedColumns: DataTableColumn[] = [
   {
     key: 'phone',
     label: 'Phone',
-    align: 'right',
+    align: 'end',
   },
   {
     key: 'action',
@@ -624,7 +627,7 @@ onBeforeMount(() => {
             @update:pagination="table.pagination = $event"
             @update:sort="table.sort = $event"
           >
-            <template #action-data>
+            <template #item.action>
               <RuiButton icon variant="text" size="sm">
                 <RuiIcon name="more-fill" color="primary" />
               </RuiButton>
@@ -672,7 +675,7 @@ onBeforeMount(() => {
             @update:pagination="table.pagination = $event"
             @update:sort="table.sort = $event"
           >
-            <template #action-data>
+            <template #item.action>
               <RuiButton icon variant="text" size="sm">
                 <RuiIcon name="more-fill" color="primary" />
               </RuiButton>
@@ -716,7 +719,7 @@ onBeforeMount(() => {
             @update:pagination="table.pagination = $event"
             @update:sort="table.sort = $event"
           >
-            <template #action-data>
+            <template #item.action>
               <RuiButton icon variant="text" size="sm">
                 <RuiIcon name="more-fill" color="primary" />
               </RuiButton>

example/src/views/RadioView.vue

@@ -225,7 +225,12 @@ const radioGroups = ref([
   <div>
     <h2 class="text-h4 mb-6" data-cy="radio-buttons">Radio Buttons</h2>
     <div class="grid gap-4 grid-cols-6 mb-14" data-cy="radio-wrapper">
-      <RuiRadio v-for="(radio, j) in radios" :key="j" v-bind="radio">
+      <RuiRadio
+        v-for="(radio, j) in radios"
+        :key="j"
+        v-model="radio.value"
+        v-bind="radio"
+      >
         <span v-if="radio.label" class="capitalize"> {{ radio.label }} </span>
       </RuiRadio>
     </div>