@onereach/ui-components 2.69.7-beta.2168.0 → 2.69.7-beta.2170.0

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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,270 @@
+<template>
+  <div
+    ref="root"
+    v-bind="$attrs"
+    :class="rootStyles"
+  >
+    <div :class="offsetControlStyles">
+      <OrButton
+        :class="itemStyles"
+        :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"
+        :class="itemStyles"
+        :variant="'link'"
+        :color="'inherit'"
+        :activated="currentPage === page"
+        @click.stop="typeof page === 'number' && toPage(page)"
+      >
+        {{ page }}
+      </OrButton>
+
+      <OrButton
+        :class="itemStyles"
+        :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"
+        :class="itemStyles"
+        :variant="'link'"
+        :color="'inherit'"
+        :activated="true"
+        @click.stop="limitMenu.open()"
+      >
+        {{ currentLimit }} <OrIcon :icon="'arrow_drop_down'" />
+      </OrButton>
+
+      <OrMenu
+        ref="limitMenu"
+        :trigger="limitButtonRoot"
+        :placement="'top'"
+      >
+        <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 { PaginationItem, 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: undefined,
+    },
+
+    value: { // TODO: Remove Vue 2 fallback
+      type: Object as PropType<PaginationModel>,
+      default: undefined,
+    },
+
+    length: {
+      type: Number,
+      required: true,
+    },
+
+    pageSizeOptions: {
+      type: Array as PropType<number[]>,
+      default: () => [50, 20, 10, 5],
+    },
+  },
+
+  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,
+    ]);
+
+    const itemStyles = computed(() => [
+      ...PaginationItem,
+    ]);
+
+    // 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: 0,
+        };
+      },
+    });
+
+    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,
+      itemStyles,
+      proxyModelValue,
+      currentLimit,
+      currentOffset,
+      currentPage,
+      firstPage,
+      lastPage,
+      buttonGroup,
+      toPreviousPage,
+      toNextPage,
+      toPage,
+    };
+  },
+});
+</script>

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

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

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

@@ -0,0 +1,38 @@
+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',
+];
+
+export const PaginationItem: string[] = [
+  // Typography
+  'typography-caption-regular',
+
+  // Typography (activated)
+  'activated:typography-caption-bold',
+];

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

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

package/src/components/or-radio-v3/OrRadio.vue

@@ -4,9 +4,9 @@
     :class="rootStyles"
   >
     <input
+      v-bind="$attrs"
       :id="controlId"
       v-model="proxyModelValue"
-      v-bind="$attrs"
       :class="controlStyles"
       type="radio"
       :value="inputValue"

package/src/components/or-select-v3/OrSelect.stories3.ts

@@ -108,10 +108,6 @@ export default {
       control: { type: 'boolean' },
     },
 
-    disableDefaultStyles: {
-      control: { type: 'boolean' },
-    },
-
     enableSearch: {
       control: { type: 'boolean' },
     },

package/src/components/or-select-v3/OrSelect.vue

@@ -39,12 +39,12 @@
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
       >
-        <template v-if="proxyModelValue && proxyModelValue.length > 0">
-          <template v-if="multiple">
-            <slot
-              name="valueTemplate"
-              :model="proxyModelValue"
-            >
+        <template v-if="multiple">
+          <slot
+            name="valueTemplate"
+            :model="proxyModelValue"
+          >
+            <template v-if="proxyModelValue && proxyModelValue.length > 0">
               <OrTag
                 v-for="option in selection"
                 :key="option.value"
@@ -53,10 +53,16 @@
               >
                 {{ option.label }}
               </OrTag>
-            </slot>
-          </template>
+            </template>
 
-          <template v-else>
+            <template v-else>
+              <span :class="placeholderStyles">{{ placeholder }}</span>
+            </template>
+          </slot>
+        </template>
+
+        <template v-else>
+          <template v-if="proxyModelValue">
             <slot
               name="valueTemplate"
               :model="proxyModelValue"
@@ -64,10 +70,10 @@
               {{ selection.label }}
             </slot>
           </template>
-        </template>
 
-        <template v-else>
-          <span :class="placeholderStyles">{{ placeholder }}</span>
+          <template v-else>
+            <span :class="placeholderStyles">{{ placeholder }}</span>
+          </template>
         </template>
       </div>
 
@@ -266,12 +272,12 @@ export default defineComponent({
     },
 
     modelValue: {
-      type: [String, Array] as PropType<string | string[]>,
+      type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
       default: undefined,
     },
 
     value: { // TODO: Remove Vue 2 fallback
-      type: [String, Array] as PropType<string | string[]>,
+      type: [String, Number, Array] as PropType<string | number | (string | number)[]>,
       default: undefined,
     },
 

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

@@ -1,2 +1,3 @@
 export { default as OrSelectV3 } from './OrSelect.vue';
 export * from './props';
+export * from './types';

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

@@ -8,10 +8,7 @@ export const SelectRoot: string[] = [
 
 export const SelectControl: string[] = [
   // Layout
-  'layout-row',
-
-  // Box
-  'w-full',
+  'layout-row grow',
 
   // Overflow
   'overflow-hidden',

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

@@ -1,5 +1,5 @@
 export interface SelectOption {
-  value: string;
+  value: string | number;
   label: string;
 }
 

package/src/components/or-switch-v3/OrSwitch.vue

@@ -5,9 +5,9 @@
   >
     <template v-if="!loading">
       <input
+        v-bind="$attrs"
         :id="controlId"
         v-model="proxyModelValue"
-        v-bind="$attrs"
         :class="controlStyles"
         type="checkbox"
         :value="inputValue"

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="root"
-    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
@@ -28,14 +27,11 @@
       <textarea
         :id="controlId"
         v-model="proxyModelValue"
+        v-bind="$attrs"
         :class="controlStyles"
         :placeholder="placeholder"
         :required="required"
         :disabled="disabled"
-
-        :readonly="readonly"
-        :maxlength="maxLength"
-
         @keydown="$emit('keydown', $event)"
         @keyup="$emit('keyup', $event)"
         @focus="$emit('focus', $event)"

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

@@ -7,8 +7,8 @@ export const TextareaRoot: string[] = [
 ];
 
 export const TextareaControl: string[] = [
-  // Box
-  'w-full',
+  // Layout
+  'grow',
 
   // Typography
   'typography-inherit',

package/dist/bundled/v2/components/or-combined-input-v3/OrCombinedInput.stories3.d.ts

@@ -1,27 +0,0 @@
-import { Meta, StoryFn } from '@storybook/vue3';
-declare const _default: Meta<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-    [x: string]: ((...args: any[]) => any) | null;
-} | string[], {} & {}, {
-    [x: number]: string;
-} | {}, true>)>;
-export default _default;
-export declare const Default: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-    [x: string]: ((...args: any[]) => any) | null;
-} | string[], {} & {}, {
-    [x: number]: string;
-} | {}, true>)>;
-export declare const Addon: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-    [x: string]: ((...args: any[]) => any) | null;
-} | string[], {} & {}, {
-    [x: number]: string;
-} | {}, true>)>;
-export declare const Hint: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-    [x: string]: ((...args: any[]) => any) | null;
-} | string[], {} & {}, {
-    [x: number]: string;
-} | {}, true>)>;
-export declare const Error: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
-    [x: string]: ((...args: any[]) => any) | null;
-} | string[], {} & {}, {
-    [x: number]: string;
-} | {}, true>)>;