@onereach/ui-components 2.69.1-beta.2095.0 → 2.69.1-beta.2099.0

package/src/components/or-pagination-v3/OrPagination.stories3.ts

@@ -1,87 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { ref, watch } from 'vue-demi';
-import OrPaginationDocs from './OrPagination.docs.mdx';
-import OrPagination from './OrPagination.vue';
-import { PaginationModel } from './types';
-
-export default {
-  title: 'Components/Pagination',
-  component: OrPagination,
-
-  argTypes: {
-    // Props
-    modelValue: {
-      control: { type: 'text' },
-    },
-
-    value: { // TODO: Remove Vue 2 fallback
-      table: { disable: true },
-    },
-
-    length: {
-      control: { type: 'number' },
-    },
-
-    // Events
-    'update:modelValue': {
-      table: { disable: true },
-    },
-
-    input: {
-      table: { disable: true },
-    },
-  },
-
-  parameters: {
-    layout: 'centered',
-
-    docs: {
-      page: OrPaginationDocs,
-    },
-
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=4063%3A35218&t=axoGLEPrByClXTTU-4',
-    },
-  },
-} as Meta<typeof OrPagination>;
-
-const Template: StoryFn<typeof OrPagination> = (args) => ({
-  components: {
-    OrPagination,
-  },
-
-  setup() {
-    // State
-    const model = ref<PaginationModel>();
-
-    // Effects
-    watch(model, (value) => {
-      console.debug(value);
-    });
-
-    return {
-      args,
-      model,
-      onUpdateModelValue: action('update:modelValue'),
-      onInput: action('input'),
-    };
-  },
-
-  template: `
-    <OrPagination
-      v-model="model"
-      v-bind="args"
-      @update:modelValue="onUpdateModelValue"
-      @input="onInput"
-    />
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  // Props
-  length: 555,
-};

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

@@ -1,260 +0,0 @@
-<template>
-  <div
-    ref="root"
-    v-bind="$attrs"
-    :class="rootStyles"
-  >
-    <div :class="offsetControlStyles">
-      <OrButton
-        :variant="'link'"
-        :color="'inherit'"
-        :disabled="currentPage === firstPage"
-        @click.stop="toPreviousPage()"
-      >
-        <OrIcon :icon="'keyboard_arrow_left'" />
-      </OrButton>
-
-      <OrButton
-        v-for="(page, index) in buttonGroup"
-        :key="index"
-        :variant="'link'"
-        :color="'inherit'"
-        :activated="currentPage === page"
-        @click.stop="typeof page === 'number' && toPage(page)"
-      >
-        {{ page }}
-      </OrButton>
-
-      <OrButton
-        :variant="'link'"
-        :color="'inherit'"
-        :disabled="currentPage === lastPage"
-        @click.stop="toNextPage()"
-      >
-        <OrIcon :icon="'keyboard_arrow_right'" />
-      </OrButton>
-    </div>
-
-    <div :class="limitControlStyles">
-      Per page:
-
-      <OrButton
-        ref="limitButton"
-        :variant="'link'"
-        :color="'inherit'"
-        :activated="true"
-        @click.stop="limitMenu.open()"
-      >
-        {{ currentLimit }} <OrIcon :icon="'arrow_drop_down'" />
-      </OrButton>
-
-      <OrMenu
-        ref="limitMenu"
-        :trigger="limitButtonRoot"
-      >
-        <OrMenuItem
-          v-for="pageSize in pageSizeOptions"
-          :key="pageSize"
-          @click.stop="currentLimit = pageSize"
-        >
-          {{ pageSize }}
-        </OrMenuItem>
-      </OrMenu>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
-import { useClassAttribute } from '../../hooks';
-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 { PaginationLimitControl, PaginationOffsetControl, PaginationRoot } from './styles';
-import { PaginationModel } from './types';
-
-export default defineComponent({
-  name: 'OrPagination',
-
-  components: {
-    OrButton,
-    OrIcon,
-    OrMenu,
-    OrMenuItem,
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    modelValue: {
-      type: Object as PropType<PaginationModel>,
-      default: {} as PaginationModel,
-    },
-
-    value: { // TODO: Remove Vue 2 fallback
-      type: Object as PropType<PaginationModel>,
-      default: {} as PaginationModel,
-    },
-
-    length: {
-      type: Number,
-      required: true,
-    },
-
-    pageSizeOptions: {
-      type: Array as PropType<number[]>,
-      default: [50, 20, 10, 5] as number[],
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-
-    'input',
-  ],
-
-  expose: [
-    'root',
-  ],
-
-  setup(props, context) {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    const limitButton = ref<InstanceType<typeof OrButton>>();
-    const limitButtonRoot = computed(() => limitButton.value?.root);
-
-    const limitMenu = ref<InstanceType<typeof OrMenu>>();
-    const limitMenuRoot = computed(() => limitMenu.value?.root);
-
-    // Styles
-    const classAttribute = useClassAttribute();
-
-    const rootStyles = computed(() => [
-      'or-pagination',
-      ...PaginationRoot,
-      classAttribute.value,
-    ]);
-
-    const offsetControlStyles = computed(() => [
-      ...PaginationOffsetControl,
-    ]);
-
-    const limitControlStyles = computed(() => [
-      ...PaginationLimitControl,
-    ]);
-
-    // State
-    const proxyModelValue = computed({
-      get: () => {
-        return props.modelValue ?? props.value; // TODO: Remove Vue 2 fallback
-      },
-
-      set: (value) => {
-        context.emit('input', value);
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const currentLimit = computed<number>({
-      get: () => {
-        return proxyModelValue.value.limit ?? props.pageSizeOptions[0];
-      },
-
-      set: (value) => {
-        proxyModelValue.value = {
-          limit: value,
-          offset: currentOffset.value,
-        };
-      },
-    });
-
-    const currentOffset = computed<number>({
-      get: () => {
-        return proxyModelValue.value.offset ?? 0;
-      },
-
-      set: (value) => {
-        proxyModelValue.value = {
-          limit: currentLimit.value,
-          offset: value,
-        };
-      },
-    });
-
-    const currentPage = computed<number>({
-      get: () => {
-        return Math.floor(currentOffset.value / currentLimit.value) + 1;
-      },
-
-      set: (value) => {
-        currentOffset.value = (value - 1) * currentLimit.value;
-      },
-    });
-
-    const firstPage = computed<number>(() => {
-      return 1;
-    });
-
-    const lastPage = computed<number>(() => {
-      return Math.ceil(props.length / currentLimit.value);
-    });
-
-    const buttonGroup = computed<(number | string)[]>(() => {
-      return Array.from({ length: lastPage.value }, (_, index) => index + 1)
-        .map((page) => {
-          switch (true) {
-            case page > firstPage.value && page < currentPage.value - 1:
-            case page > currentPage.value + 1 && page < lastPage.value:
-              return '…';
-
-            default:
-              return page;
-          }
-        })
-        .reduce((accumulator, page) => {
-          if (accumulator[accumulator.length - 1] === page) {
-            return accumulator;
-          }
-
-          return [...accumulator, page];
-        }, [] as (number | string)[]);
-    });
-
-    // Functions
-    function toPreviousPage(): void {
-      currentPage.value = currentPage.value - 1;
-    }
-
-    function toNextPage(): void {
-      currentPage.value = currentPage.value + 1;
-    }
-
-    function toPage(page: number): void {
-      currentPage.value = page;
-    }
-
-    return {
-      root,
-      limitButton,
-      limitButtonRoot,
-      limitMenu,
-      limitMenuRoot,
-      rootStyles,
-      offsetControlStyles,
-      limitControlStyles,
-      proxyModelValue,
-      currentLimit,
-      currentOffset,
-      currentPage,
-      firstPage,
-      lastPage,
-      buttonGroup,
-      toPreviousPage,
-      toNextPage,
-      toPage,
-    };
-  },
-});
-</script>

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

@@ -1,2 +0,0 @@
-export { default as OrPaginationV3 } from './OrPagination.vue';
-export * from './types';

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

@@ -1,30 +0,0 @@
-export const PaginationRoot: string[] = [
-  // Layout
-  'layout-row',
-
-  // Spacing
-  'gap-xl',
-
-  // Typography
-  'typography-caption-regular',
-
-  // Theme
-  'theme-foreground-outline',
-  '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',
-];

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

@@ -1,4 +0,0 @@
-export interface PaginationModel {
-  limit: number;
-  offset: number;
-}