@privyid/persona 1.2.0 → 1.2.1

package/dist/components/pagination/Pagination.vue

@@ -1,373 +0,0 @@
-<template>
-  <div
-    data-testid="pagination"
-    :class="classNames">
-    <div
-      v-if="quickJump"
-      class="pagination__quickjump"
-      data-testid="pagination-quickjump">
-      {{ pageLabel }}
-      <Select
-        v-model="model"
-        :searchable="false"
-        :size="selectSize"
-        data-testid="pagination-select"
-        :options="pageOptions"
-        @change="({ value }) => selectPage(value)" />
-      <slot
-        name="quick-jump-count"
-        :total="totalPageCount">
-        of {{ totalPageCount }}
-      </slot>
-    </div>
-    <nav
-      v-else
-      class="pagination__items">
-      <Button
-        v-if="variant === 'far'"
-        data-testid="pagination-nav-first"
-        variant="solid"
-        size="sm"
-        :disabled="!canPrev"
-        class="pagination__items__nav-first"
-        icon
-        @click="selectPage(1)">
-        <slot name="first-navigation">
-          {{ firstNavLabel }}
-        </slot>
-      </Button>
-      <Button
-        v-if="variant === 'short' || variant === 'far'"
-        data-testid="pagination-nav-prev"
-        variant="solid"
-        size="sm"
-        :disabled="!canPrev"
-        class="pagination__items__nav-prev"
-        icon
-        @click="prev">
-        <slot name="prev-navigation">
-          <template v-if="navigationText">
-            {{ prevNavLabel }}
-          </template>
-          <IconPrev v-else />
-        </slot>
-      </Button>
-      <template v-if="!navigationOnly">
-        <Button
-          v-for="(page, index) in pageItems"
-          :key="index"
-          data-testid="pagination-item"
-          variant="solid"
-          size="sm"
-          icon
-          :readonly="typeof page === 'string'"
-          :active="page === model"
-          @click="selectPage(page)">
-          {{ page }}
-        </Button>
-      </template>
-      <Button
-        v-if="variant === 'short' || variant === 'far'"
-        data-testid="pagination-nav-next"
-        variant="solid"
-        size="sm"
-        :disabled="!canNext"
-        class="pagination__items__nav-next"
-        icon
-        @click="next">
-        <slot name="next-navigation">
-          <template v-if="navigationText">
-            {{ nextNavLabel }}
-          </template>
-          <IconNext v-else />
-        </slot>
-      </Button>
-      <Button
-        v-if="variant === 'far'"
-        data-testid="pagination-nav-last"
-        variant="solid"
-        size="sm"
-        :disabled="!canNext"
-        class="pagination__items__nav-last"
-        icon
-        @click="selectPage(totalPageCount)">
-        <slot name="last-navigation">
-          {{ lastNavLabel }}
-        </slot>
-      </Button>
-    </nav>
-    <div
-      v-if="showCounter || showDetail"
-      class="pagination__count"
-      data-testid="pagination-count">
-      <slot
-        name="pagination-count"
-        :page="modelValue"
-        :per-page="perPage"
-        :range="rowRange"
-        :total-page="totalPageCount"
-        :total="total">
-        {{ rowRange[0] }} - {{ rowRange[1] }} of {{ total }}
-      </slot>
-    </div>
-    <div
-      v-if="showPerPage || showDetail"
-      class="pagination__options"
-      data-testid="pagination-option">
-      {{ showRowsLabel }}
-      <Select
-        v-model="rowPerPage"
-        :searchable="false"
-        :size="selectSize"
-        :options="rowPerPageOptions" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, watch } from "vue-demi";
-import Button from "../button/Button.vue";
-import Select from "../select/Select.vue";
-import IconPrev from "@privyid/persona-icon/vue/chevron-left/20.vue";
-import IconNext from "@privyid/persona-icon/vue/chevron-right/20.vue";
-import { useVModel } from "../input";
-import { usePagination } from ".";
-import { getPageRange } from "./utils/calculate-page";
-const props = defineProps({
-  modelValue: {
-    type: Number,
-    default: 1
-  },
-  quickJump: {
-    type: Boolean,
-    default: false
-  },
-  showCounter: {
-    type: Boolean,
-    default: false
-  },
-  showPerPage: {
-    type: Boolean,
-    default: false
-  },
-  showDetail: {
-    type: Boolean,
-    default: false
-  },
-  navigationText: {
-    type: Boolean,
-    default: false
-  },
-  navigationOnly: {
-    type: Boolean,
-    default: false
-  },
-  variant: {
-    type: String,
-    default: "short"
-  },
-  perPage: {
-    type: Number,
-    default: 10
-  },
-  perPageOptions: {
-    type: Array,
-    default: () => [
-      10,
-      20,
-      30
-    ]
-  },
-  total: {
-    type: Number,
-    default: 0
-  },
-  displayLimit: {
-    type: Number,
-    default: 10
-  },
-  pageLabel: {
-    type: String,
-    default: "Page"
-  },
-  prevNavLabel: {
-    type: String,
-    default: "Previous"
-  },
-  nextNavLabel: {
-    type: String,
-    default: "Next"
-  },
-  firstNavLabel: {
-    type: String,
-    default: "First"
-  },
-  lastNavLabel: {
-    type: String,
-    default: "Last"
-  },
-  showRowsLabel: {
-    type: String,
-    default: "Show rows"
-  },
-  selectSize: {
-    type: String,
-    default: "md"
-  }
-});
-const emit = defineEmits(["update:modelValue", "update:perPage", "change"]);
-const classNames = computed(() => {
-  const results = ["pagination"];
-  if (props.navigationOnly)
-    results.push("pagination--navonly");
-  return results;
-});
-const model = useVModel(props);
-const {
-  pageItems,
-  rowRange,
-  totalPageCount,
-  canNext,
-  canPrev
-} = usePagination(props);
-const pageOptions = computed(() => {
-  return getPageRange(1, totalPageCount.value).map((page) => {
-    return {
-      text: String(page),
-      value: page
-    };
-  });
-});
-const rowPerPageOptions = computed(() => {
-  return props.perPageOptions.map((option) => {
-    return {
-      text: String(option),
-      value: option
-    };
-  });
-});
-const rowPerPage = computed({
-  get() {
-    return props.perPage;
-  },
-  set(value) {
-    emit("update:perPage", value);
-  }
-});
-watch(totalPageCount, (value) => {
-  if (model.value > value)
-    model.value = value || 1;
-});
-function next() {
-  model.value = Math.min(model.value + 1, totalPageCount.value);
-  emit("change", model.value);
-}
-function prev() {
-  model.value = Math.max(model.value - 1, 1);
-  emit("change", model.value);
-}
-function selectPage(page) {
-  if (typeof page === "string") return;
-  if (model.value !== page) {
-    model.value = page;
-    emit("change", page);
-  }
-}
-defineExpose({
-  next,
-  prev
-});
-defineSlots();
-</script>
-
-<style lang="postcss">
-/**
-* Component Name: Pagination
-* Component URI : https://www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=338%3A15323&t=u3Y7jHGZtoyAFn21-4
-* Date Created  : December 22, 2022
-* Last Update   : December 22, 2022
-*/
-.pagination {
-  @apply relative flex flex-wrap justify-start items-center w-full;
-
-  &&--navonly {
-    .pagination {
-      &__items {
-        @apply order-4 ml-4 only:ml-auto;
-      }
-
-      &__count {
-        @apply ml-0 mr-auto;
-      }
-    }
-  }
-
-  &__quickjump,
-  &__items,
-  &__options {
-    @apply flex flex-wrap items-center text-default;
-    @apply dark:text-dark-default;
-  }
-
-  &__quickjump {
-    .dropdown {
-      @apply mx-3;
-    }
-  }
-
-  &__items {
-    @apply space-x-2;
-
-    .btn--icon.btn--sm {
-      @apply px-2 py-1 min-w-[34px];
-
-      &:is(.pagination__items__nav-first, .pagination__items__nav-prev, .pagination__items__nav-next, .pagination__items__nav-last) > svg {
-        @apply my-[0.15rem];
-      }
-    }
-  }
-
-  &__count {
-    @apply ml-5 text-default;
-    @apply dark:text-dark-default;
-  }
-
-  &__options {
-    @apply justify-between items-center ml-auto;
-
-    .dropdown {
-      @apply ml-3;
-    }
-  }
-
-  .dropdown {
-    @apply max-w-[80px];
-
-    &__menu {
-      @apply min-w-fit;
-    }
-  }
-
-  .btn {
-    @apply transition-none;
-  }
-
-  .btn--variant-solid {
-    @apply justify-center items-center hover:shadow-none;
-
-    &.btn--default {
-      @apply bg-transparent hover:bg-ground focus:bg-ground border-transparent focus:border-default hover:border-default text-default font-normal focus:outline-none;
-      @apply dark:bg-transparent hover:dark:bg-dark-ground focus:dark:bg-dark-ground dark:border-transparent focus:dark:border-dark-default hover:dark:border-dark-default dark:text-dark-default;
-
-      &[active="true"] {
-        @apply bg-info-emphasis border-info-emphasis text-state-emphasis cursor-default;
-        @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis dark:text-dark-state-emphasis;
-      }
-
-      &[readonly] {
-        @apply pointer-events-none;
-      }
-    }
-  }
-}
-</style>

package/dist/components/pagination/Pagination.vue.d.ts

@@ -1,261 +0,0 @@
-import type { PropType, VNode } from 'vue-demi';
-import type { SizeVariant } from '../button';
-type NavigationVariant = 'none' | 'short' | 'far';
-declare function next(): void;
-declare function prev(): void;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        'quick-jump-count'(props: {
-            total: number;
-        }): VNode[];
-        'pagination-count'(props: {
-            page: number;
-            perPage: number;
-            total: number;
-            totalPage: number;
-            range: number[];
-        }): VNode[];
-        'first-navigation'(): VNode[];
-        'prev-navigation'(): VNode[];
-        'next-navigation'(): VNode[];
-        'last-navigation'(): VNode[];
-    }> & {
-        'quick-jump-count'(props: {
-            total: number;
-        }): VNode[];
-        'pagination-count'(props: {
-            page: number;
-            perPage: number;
-            total: number;
-            totalPage: number;
-            range: number[];
-        }): VNode[];
-        'first-navigation'(): VNode[];
-        'prev-navigation'(): VNode[];
-        'next-navigation'(): VNode[];
-        'last-navigation'(): VNode[];
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: NumberConstructor;
-        default: number;
-    };
-    quickJump: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showCounter: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showPerPage: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showDetail: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    navigationText: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    navigationOnly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    variant: {
-        type: PropType<NavigationVariant>;
-        default: string;
-    };
-    perPage: {
-        type: NumberConstructor;
-        default: number;
-    };
-    perPageOptions: {
-        type: {
-            (arrayLength: number): Number[];
-            (...items: Number[]): Number[];
-            new (arrayLength: number): Number[];
-            new (...items: Number[]): Number[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            readonly [Symbol.species]: ArrayConstructor;
-        };
-        default: () => number[];
-    };
-    total: {
-        type: NumberConstructor;
-        default: number;
-    };
-    displayLimit: {
-        type: NumberConstructor;
-        default: number;
-    };
-    pageLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    prevNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    nextNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    firstNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    lastNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    showRowsLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    selectSize: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-}>, {
-    next: typeof next;
-    prev: typeof prev;
-}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: number) => void;
-    change: (args_0: number) => void;
-    "update:perPage": (args_0: number) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: NumberConstructor;
-        default: number;
-    };
-    quickJump: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showCounter: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showPerPage: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showDetail: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    navigationText: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    navigationOnly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    variant: {
-        type: PropType<NavigationVariant>;
-        default: string;
-    };
-    perPage: {
-        type: NumberConstructor;
-        default: number;
-    };
-    perPageOptions: {
-        type: {
-            (arrayLength: number): Number[];
-            (...items: Number[]): Number[];
-            new (arrayLength: number): Number[];
-            new (...items: Number[]): Number[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            readonly [Symbol.species]: ArrayConstructor;
-        };
-        default: () => number[];
-    };
-    total: {
-        type: NumberConstructor;
-        default: number;
-    };
-    displayLimit: {
-        type: NumberConstructor;
-        default: number;
-    };
-    pageLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    prevNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    nextNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    firstNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    lastNavLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    showRowsLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    selectSize: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
-    onChange?: ((args_0: number) => any) | undefined;
-    "onUpdate:perPage"?: ((args_0: number) => any) | undefined;
-}>, {
-    modelValue: number;
-    variant: NavigationVariant;
-    total: number;
-    displayLimit: number;
-    perPage: number;
-    quickJump: boolean;
-    showCounter: boolean;
-    showPerPage: boolean;
-    showDetail: boolean;
-    navigationText: boolean;
-    navigationOnly: boolean;
-    perPageOptions: Number[];
-    pageLabel: string;
-    prevNavLabel: string;
-    nextNavLabel: string;
-    firstNavLabel: string;
-    lastNavLabel: string;
-    showRowsLabel: string;
-    selectSize: SizeVariant;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/pagination/index.d.ts

@@ -1,14 +0,0 @@
-interface PaginationProps {
-    modelValue: number;
-    perPage: number;
-    total: number;
-    displayLimit: number;
-}
-export declare function usePagination(props: PaginationProps): {
-    pageItems: import("vue-demi").ComputedRef<(string | number)[] | undefined>;
-    rowRange: import("vue-demi").ComputedRef<number[]>;
-    totalPageCount: import("vue-demi").ComputedRef<number>;
-    canNext: import("vue-demi").ComputedRef<boolean>;
-    canPrev: import("vue-demi").ComputedRef<boolean>;
-};
-export {};