@onereach/ui-components 11.2.2-beta.4407.0 → 11.2.2

package/src/components/or-pagination-v3/OrPagination.vue

@@ -3,46 +3,7 @@
     :ref="'root'"
     :class="rootStyles"
   >
-    <div :class="['layout-row', 'gap-md', 'shrink-0']">
-      <template v-if="features.limit">
-        <div :class="['layout-row', 'gap-sm']">
-          Per page:
-
-          <OrButton
-            :ref="'limitButton'"
-            :class="itemStyles"
-            :variant="'link'"
-            :color="'inherit'"
-            :activated="true"
-            @click="limitMenu && limitMenu.open()"
-          >
-            {{ currentLimit }} <OrIcon :icon="limitMenu && limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
-          </OrButton>
-
-          <OrMenu
-            :ref="'limitMenu'"
-            :additional-styles="['min-w-[60px]']"
-            :trigger="limitButtonRoot"
-            :placement="'top'"
-          >
-            <OrMenuItem
-              v-for="limit of options"
-              :key="limit"
-              :selected="currentLimit === limit"
-              @click="currentLimit = limit; limitMenu && limitMenu.close()"
-            >
-              {{ limit }}
-            </OrMenuItem>
-          </OrMenu>
-        </div>
-      </template>
-
-      <template v-if="features.range">
-        {{ currentOffset + 1 }}-{{ Math.min(currentOffset + currentLimit, length) }} of {{ length }}
-      </template>
-    </div>
-
-    <div :class="['layout-row', 'gap-md', 'shrink-0']">
+    <div :class="offsetControlStyles">
       <OrButton
         :class="itemStyles"
         :variant="'link'"
@@ -55,7 +16,7 @@
 
       <template v-if="isDesktop">
         <OrButton
-          v-for="(page, index) of buttonGroup"
+          v-for="(page, index) in buttonGroup"
           :key="index"
           :class="itemStyles"
           :variant="'link'"
@@ -65,47 +26,64 @@
         >
           {{ page }}
         </OrButton>
-      </template>
 
-      <template v-if="isMobile">
         <OrButton
-          :ref="'offsetButton'"
           :class="itemStyles"
           :variant="'link'"
           :color="'inherit'"
-          :activated="true"
-          @click="offsetMenu && offsetMenu.open()"
+          :disabled="currentPage === lastPage"
+          @click="toNextPage()"
         >
-          {{ currentPage }} <OrIcon :icon="offsetMenu && offsetMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
+          <OrIcon :icon="'keyboard_arrow_right'" />
         </OrButton>
+      </template>
+    </div>
 
-        <OrMenu
-          :ref="'offsetMenu'"
-          :additional-styles="['min-w-[60px]']"
-          :trigger="offsetButtonRoot"
-          :placement="'top'"
-        >
-          <OrMenuItem
-            v-for="page of lastPage"
-            :key="page"
-            :selected="currentPage === page"
-            @click="currentPage = page; offsetMenu && offsetMenu.close()"
-          >
-            {{ page }}
-          </OrMenuItem>
-        </OrMenu>
+    <div :class="limitControlStyles">
+      <template v-if="isDesktop">
+        Per page:
       </template>
 
       <OrButton
+        :ref="'limitButton'"
         :class="itemStyles"
         :variant="'link'"
         :color="'inherit'"
-        :disabled="currentPage === lastPage"
-        @click="toNextPage()"
+        :activated="true"
+        @click="limitMenu && limitMenu.open()"
       >
-        <OrIcon :icon="'keyboard_arrow_right'" />
+        {{ currentLimit }} <OrIcon :icon="limitMenu && limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
       </OrButton>
+
+      <OrMenu
+        :ref="'limitMenu'"
+        :additional-styles="['min-w-[60px]']"
+        :trigger="limitButtonRoot"
+        :placement="'top'"
+      >
+        <OrMenuItem
+          v-for="pageSize in options"
+          :key="pageSize"
+          @click="currentLimit = pageSize; limitMenu && limitMenu.close()"
+        >
+          {{ pageSize }}
+        </OrMenuItem>
+      </OrMenu>
     </div>
+
+    <template v-if="isMobile">
+      <div :class="offsetControlStyles">
+        <OrButton
+          :class="itemStyles"
+          :variant="'link'"
+          :color="'inherit'"
+          :disabled="currentPage === lastPage"
+          @click="toNextPage()"
+        >
+          <OrIcon :icon="'keyboard_arrow_right'" />
+        </OrButton>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -116,8 +94,8 @@ import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../or-menu-v3';
-import * as Styles from './styles';
-import { PaginationFeatures, PaginationModelValue } from './types';
+import { PaginationItem, PaginationLimitControl, PaginationOffsetControl, PaginationRoot } from './styles';
+import { PaginationModelValue } from './types';
 
 export default defineComponent({
   name: 'OrPagination',
@@ -149,15 +127,6 @@ export default defineComponent({
       type: Array as PropType<number[]>,
       default: () => [50, 20, 10, 5],
     },
-
-    features: {
-      type: Object as PropType<PaginationFeatures>,
-
-      default: () => ({
-        limit: true,
-        range: true,
-      }) as PaginationFeatures,
-    },
   },
 
   emits: [
@@ -169,38 +138,41 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs & Styles
+    // Refs
     const root = ref<HTMLElement>();
 
-    const rootStyles = computed(() => [
-      'or-pagination-v3',
-      ...Styles.Pagination,
-    ]);
-
     const limitButton = ref<InstanceType<typeof OrButton>>();
     const limitButtonRoot = computed(() => limitButton.value?.root);
 
     const limitMenu = ref<InstanceType<typeof OrMenu>>();
     const limitMenuRoot = computed(() => limitMenu.value?.root);
 
-    const offsetButton = ref<InstanceType<typeof OrButton>>();
-    const offsetButtonRoot = computed(() => offsetButton.value?.root);
+    // Styles
+    const rootStyles = computed(() => [
+      'or-pagination-v3',
+      ...PaginationRoot,
+    ]);
+
+    const offsetControlStyles = computed(() => [
+      ...PaginationOffsetControl,
+    ]);
 
-    const offsetMenu = ref<InstanceType<typeof OrMenu>>();
-    const offsetMenuRoot = computed(() => offsetMenu.value?.root);
+    const limitControlStyles = computed(() => [
+      ...PaginationLimitControl,
+    ]);
 
     const itemStyles = computed(() => [
-      ...Styles.PaginationItem,
+      ...PaginationItem,
     ]);
 
     // State
-    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const currentLimit = computed<number>({
-      get: () => model.value?.limit ?? props.options[0],
+      get: () => proxyModelValue.value?.limit ?? props.options[0],
 
       set: (value) => {
-        model.value = {
+        proxyModelValue.value = {
           limit: value,
           offset: 0,
         };
@@ -208,10 +180,10 @@ export default defineComponent({
     });
 
     const currentOffset = computed<number>({
-      get: () => model.value?.offset ?? 0,
+      get: () => proxyModelValue.value?.offset ?? 0,
 
       set: (value) => {
-        model.value = {
+        proxyModelValue.value = {
           limit: currentLimit.value,
           offset: value,
         };
@@ -295,37 +267,24 @@ export default defineComponent({
 
     return {
       root,
-      rootStyles,
-
       limitButton,
       limitButtonRoot,
-
       limitMenu,
       limitMenuRoot,
-
-      offsetButton,
-      offsetButtonRoot,
-
-      offsetMenu,
-      offsetMenuRoot,
-
+      rootStyles,
+      offsetControlStyles,
+      limitControlStyles,
       itemStyles,
-
-      model,
-
+      proxyModelValue,
       currentLimit,
       currentOffset,
       currentPage,
-
       firstPage,
       lastPage,
-
       buttonGroup,
-
       toPreviousPage,
       toNextPage,
       toPage,
-
       isDesktop,
       isMobile,
     };

package/src/components/or-pagination-v3/styles.ts

@@ -1,4 +1,4 @@
-export const Pagination: string[] = [
+export const PaginationRoot: string[] = [
   // Layout
   'layout-row',
 
@@ -13,6 +13,22 @@ export const Pagination: string[] = [
   'dark:theme-foreground-outline-dark',
 ];
 
+export const PaginationOffsetControl: string[] = [
+  // Layout
+  'layout-row',
+
+  // Spacing
+  'gap-md',
+];
+
+export const PaginationLimitControl: string[] = [
+  // Layout
+  'layout-row',
+
+  // Spacing
+  'gap-sm',
+];
+
 export const PaginationItem: string[] = [
   // Typography
   'typography-caption-regular',

package/src/components/or-pagination-v3/types.ts

@@ -4,8 +4,3 @@ export type PaginationModelValue = ModelValue<{
   limit: number;
   offset: number;
 }>;
-
-export type PaginationFeatures = {
-  limit?: boolean;
-  range?: boolean;
-};