feat(Pagination): add new two variants: text and text-rounded

packages/pagination/src/VPagination.stories.ts

@@ -1,6 +1,8 @@
 import {Meta, Story} from '@storybook/vue3';
 import VPagination from './VPagination.vue';
 
+const variants = ['default', 'text', 'text-rounded']
+
 export default {
   title: 'Components/Pagination',
   component: VPagination,
@@ -124,16 +126,40 @@ export const Slots: Story = (args) => ({
   `,
 });
 
+export const Variants: Story = (args) => ({
+  components: {VPagination},
+  setup() {
+    return {args,
+      variants
+    };
+  },
+  template: `
+  <v-pagination
+    v-bind="args"
+    v-for="variant in variants"
+    :key="variant"
+    :variant="variant"
+    class="mb-4"
+   />
+  `,
+});
+
 export const DarkMode: Story = (args) => ({
   components: {
     VPagination,
   },
   setup() {
-    return {args};
+    return {args, variants};
   },
   template: `
 <div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
-  <v-pagination v-bind="args" />
+  <v-pagination
+  v-bind="args"
+    v-for="variant in variants"
+    :key="variant"
+    :variant="variant"
+    class="mb-4"
+  />
 </div>
   `,
 });

packages/pagination/src/VPagination.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, ref, toRefs, watch} from 'vue';
+import {type PropType, computed, ref, toRefs, watch} from 'vue';
 import Pagino from 'pagino';
 import VPaginationItem from './VPaginationItem.vue';
 import VIcon from '@morpheme/icon';
@@ -85,6 +85,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  variant: {
+    type: String as PropType<'default' | 'text' | 'text-rounded'>,
+    default: 'default'
+  }
 });
 
 const emit =
@@ -153,6 +157,7 @@ watch(
     aria-label="Pagination"
     class="v-pagination"
     :class="[
+      `v-pagination--${variant}`,
       `v-pagination--${size}`,
       {
         'v-pagination--flat': flat,

packages/themes/src/morpheme/_data-table.dark.scss

@@ -49,5 +49,14 @@
       --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
       filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
     }
+
+    // pagination
+    .v-pagination {
+      --v-pagination-gap: var(--size-spacing-1);
+
+      &-item {
+        border-radius: var(--border-radius-lg);
+      }
+    }
   }
 }

packages/themes/src/morpheme/_pagination.dark.scss

@@ -28,5 +28,21 @@
         );
       }
     }
+
+    // variants
+    &--text-rounded,
+    &--text {
+      --v-pagination-item-bg-color: transparent;
+      --v-pagination-item-text-color: var(--color-gray-200);
+      --v-pagination-item-border-color: transparent;
+      --v-pagination-item-active-bg-color: var(--color-gray-true-600);
+      --v-pagination-item-active-text-color: initial;
+      --v-pagination-item-active-border-color: transparent;
+      --v-pagination-item-hover-bg-color: transparent;
+      --v-pagination-item-hover-text-color: initial;
+      --v-pagination-item-disabled-bg-color: transparent;
+      --v-pagination-item-disabled-text-color: var(--color-gray-true-500);
+      --v-pagination-item-disabled-border-color: transparent;
+    }
   }
 }

packages/themes/src/morpheme/_pagination.scss

@@ -151,4 +151,31 @@
     padding: var(--v-pagination-lg-item-action-padding-y)
       var(--v-pagination-lg-item-action-padding-x);
   }
+
+  // variants
+  &--text-rounded,
+  &--text {
+    --v-pagination-item-bg-color: transparent;
+    --v-pagination-item-text-color: var(--color-gray-700);
+    --v-pagination-item-border-color: transparent;
+    --v-pagination-item-active-bg-color: var(--color-gray-100);
+    --v-pagination-item-active-text-color: initial;
+    --v-pagination-item-active-border-color: transparent;
+    --v-pagination-item-hover-bg-color: transparent;
+    --v-pagination-item-hover-text-color: initial;
+    --v-pagination-item-disabled-bg-color: transparent;
+    --v-pagination-item-disabled-text-color: var(--color-gray-400);
+    --v-pagination-item-disabled-border-color: transparent;
+    --v-pagination-shadow: none;
+    --v-pagination-item-border-radius: var(--border-radius-lg);
+    --v-pagination-border-radius: 0px;
+
+    .v-pagination-item {
+      border-radius: var(--v-pagination-item-border-radius);
+    }
+  }
+
+  &--text-rounded {
+    --v-pagination-item-border-radius: 20px;
+  }
 }