@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/table/Table.vue

@@ -1,391 +0,0 @@
-<template>
-  <div
-    data-testid="datatable"
-    class="datatable"
-    :class="classNames">
-    <div
-      v-if="variant === 'static' || (variant === 'flexible' && showTableHeader)"
-      class="datatable__headers">
-      <div
-        v-if="draggable"
-        class="datatable__header datatable__drag">
-        <IconDrag />
-      </div>
-
-      <div
-        v-if="selectable"
-        class="datatable__header datatable__checkbox">
-        <Checkbox
-          v-model="selectAll"
-          data-testid="datatable-select-all"
-          :indeterminate="indeterminate" />
-      </div>
-
-      <div
-        v-for="field in fields"
-        :key="field.key"
-        class="datatable__header"
-        data-testid="datatable-static-header"
-        :class="field.thClass"
-        :style="field.width ? { width: `${field.width}%` } : { flex: '1 1 0%' }"
-        :data-header="field.key">
-        <slot
-          :name="`head(${field.key})`"
-          :label="field.label"
-          :field="field">
-          {{ field.label }}
-        </slot>
-      </div>
-    </div>
-
-    <Draggable
-      v-if="Array.isArray(items) && items.length > 0"
-      v-model="rows"
-      class="datatable__body"
-      handle=".datatable__drag"
-      item-key="_key"
-      :disabled="!draggable">
-      <template #item="{ element, index }">
-        <div
-          class="datatable__row"
-          data-role="row">
-          <div
-            v-if="draggable"
-            class="datatable__cell datatable__drag"
-            data-testid="datatable-drag-handle">
-            <IconDrag />
-          </div>
-
-          <div
-            v-if="selectable"
-            class="datatable__cell datatable__checkbox">
-            <Checkbox
-              v-model="model"
-              data-testid="datatable-select"
-              :value="element"
-              :disabled="element._selectable === false" />
-          </div>
-
-          <div
-            v-for="field in fields"
-            :key="field.key"
-            class="datatable__cell"
-            data-testid="datatable-cell"
-            :class="field.tdClass"
-            :style="field.width ? { width: `${field.width}%` } : { flex: '1 1 0%' }"
-            :data-cell="field.key">
-            <template v-if="variant === 'flexible'">
-              <div
-                class="datatable__header"
-                :class="field.thClass">
-                <slot
-                  :name="`head(${field.key})`"
-                  :label="field.label"
-                  :field="field"
-                  :data-header="field.key">
-                  {{ field.label }}
-                </slot>
-              </div>
-            </template>
-            <slot
-              :name="`cell(${field.key})`"
-              :index="index"
-              :item="element">
-              {{ field.formatter(element[field.key], element) }}
-            </slot>
-          </div>
-        </div>
-      </template>
-    </Draggable>
-
-    <div
-      v-else
-      class="datatable__body">
-      <div
-        class="datatable__row">
-        <template v-if="variant === 'flexible'">
-          <div
-            v-for="field in fields"
-            :key="field.key"
-            class="datatable__cell datatable__cell--empty"
-            data-testid="datatable-cell-empty"
-            :class="field.tdClass"
-            :style="field.width ? { width: `${field.width}%` } : { flex: '1 1 0%' }"
-            :data-cell="field.key">
-            <div
-              class="datatable__header"
-              :class="field.thClass">
-              <slot
-                :name="`head(${field.key})`"
-                :label="field.label"
-                :field="field"
-                :data-header="field.key">
-                {{ field.label }}
-              </slot>
-            </div>
-          </div>
-        </template>
-        <div
-          data-testid="datatable-empty"
-          class="datatable__cell datatable__cell--empty datatable__state-empty">
-          <slot name="empty">
-            <span class="flex items-center justify-center text-subtle dark:text-dark-subtle">
-              {{ emptyLabel }}
-            </span>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import {
-  computed,
-  defineComponent
-} from "vue-demi";
-import Checkbox from "../checkbox/Checkbox.vue";
-import { useVModel } from "../input";
-import IconDrag from "@privyid/persona-icon/vue/draggable/20.vue";
-import Draggable from "vuedraggable";
-import defu from "defu";
-export default defineComponent({
-  components: {
-    Checkbox,
-    IconDrag,
-    Draggable
-  },
-  props: {
-    variant: {
-      type: String,
-      default: "flexible"
-    },
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
-    fields: {
-      type: Array,
-      default: () => []
-    },
-    items: {
-      type: Array,
-      default: () => []
-    },
-    selectable: {
-      type: Boolean,
-      default: false
-    },
-    draggable: {
-      type: Boolean,
-      default: false
-    },
-    emptyLabel: {
-      type: String,
-      default: "There are no records to show"
-    },
-    noLabel: {
-      type: Boolean,
-      default: false
-    },
-    showTableHeader: {
-      type: Boolean,
-      default: false
-    }
-  },
-  models: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  },
-  emits: ["update:modelValue", "update:items"],
-  setup(props, { emit }) {
-    const model = useVModel(props);
-    const rows = computed({
-      get() {
-        return props.items.map((item) => {
-          return defu(item, { _key: Symbol("item-key") });
-        });
-      },
-      set(items) {
-        emit("update:items", items);
-      }
-    });
-    const classNames = computed(() => {
-      const results = [];
-      if (props.variant)
-        results.push(`datatable--${props.variant}`);
-      if (props.selectable)
-        results.push("datatable--selectable");
-      if (props.draggable)
-        results.push("datatable--draggable");
-      if (props.noLabel && props.variant === "flexible")
-        results.push("datatable--no-label");
-      if (props.showTableHeader && props.variant === "flexible")
-        results.push("datatable--show-table-header");
-      return results;
-    });
-    const selectableRows = computed(() => {
-      return props.items.filter((item) => item._selectable !== false);
-    });
-    const selectAll = computed({
-      get() {
-        if (props.items.length === 0)
-          return false;
-        return model.value.length === selectableRows.value.length;
-      },
-      set(value) {
-        if (selectAll.value !== value)
-          model.value = value ? [...selectableRows.value] : [];
-      }
-    });
-    const indeterminate = computed(() => {
-      return model.value.length > 0 && model.value.length < selectableRows.value.length;
-    });
-    if (import.meta.env.DEV)
-      console.warn("<p-table> was deprecated, please use <p-table-flex> or <p-table-static> instead");
-    return {
-      model,
-      rows,
-      classNames,
-      selectAll,
-      indeterminate
-    };
-  }
-});
-</script>
-
-<style lang="postcss">
-.datatable {
-  --p-table-bg: theme(backgroundColor.default.DEFAULT);
-  --p-table-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
-  --p-table-border: theme(borderColor.default.DEFAULT);
-  --p-table-border-dark: theme(borderColor.dark.default.DEFAULT);
-
-  @apply flex flex-col w-full;
-
-  &__headers {
-    @apply flex pt-4 space-x-2 bg-[color:var(--p-table-bg)];
-    @apply dark:bg-[color:var(--p-table-bg-dark)];
-
-    > .datatable__header {
-      @apply px-3;
-    }
-
-    + .datatable__body {
-      @apply pt-2;
-    }
-  }
-
-  .datatable__header {
-    @apply text-subtle text-xs font-bold pb-3;
-    @apply dark:text-dark-subtle;
-
-    &.datatable__checkbox,
-    &.datatable__drag {
-      @apply shrink-0 grow-0;
-    }
-
-    &.datatable__checkbox {
-      @apply px-6;
-    }
-
-    &.datatable__drag {
-      @apply invisible mx-3;
-    }
-  }
-
-  &__row {
-    @apply flex space-x-2 w-full items-start flex-wrap;
-
-    & > :not([hidden]) {
-      ~ .basis-full {
-        @apply ml-0;
-      }
-    }
-  }
-
-  &__cell {
-    @apply py-4 px-3 text-sm text-default break-all;
-    @apply dark:text-dark-default;
-
-    & > .datatable__header {
-      @apply text-xs;
-    }
-
-    &.datatable__checkbox,
-    &.datatable__drag {
-      @apply shrink-0 grow-0 self-center;
-    }
-
-    &.datatable__checkbox {
-      > .checkbox {
-        @apply px-3 gap-0;
-      }
-    }
-
-    &.datatable__drag {
-      @apply cursor-grabbing mx-3;
-    }
-
-    &--empty {
-      @apply pt-4 pb-0 px-3 text-sm text-default;
-      @apply dark:text-dark-default;
-
-      &.basis-full {
-        @apply pb-4;
-      }
-    }
-  }
-
-  &__state-empty {
-    @apply basis-full flex-1;
-  }
-
-  &__body {
-    @apply flex flex-col;
-  }
-
-  &--flexible {
-    .datatable__body {
-      @apply space-y-3;
-    }
-
-    .datatable__row {
-      @apply rounded border border-[color:var(--p-table-border)] bg-[color:var(--p-table-bg)];
-      @apply dark:border-[color:var(--p-table-border-dark)] dark:bg-[color:var(--p-table-bg-dark)];
-    }
-
-    &.datatable--no-label {
-      .datatable__body {
-        .datatable__header {
-          @apply hidden;
-        }
-      }
-    }
-
-    &.datatable--show-table-header {
-      .datatable__headers {
-        @apply border py-2 rounded border-[color:var(--p-table-border)];
-        @apply dark:border-[color:var(--p-table-border-dark)];
-
-        .datatable__header {
-          @apply pb-0;
-        }
-      }
-    }
-
-  }
-
-  &--static {
-    .datatable__headers {
-      @apply border-b border-b-[color:var(--p-table-border)];
-      @apply dark:border-b-[color:var(--p-table-border-dark)];
-    }
-
-    .datatable__body {
-      @apply border-b border-b-[color:var(--p-table-border)] divide-y divide-[color:var(--p-table-border)] bg-[color:var(--p-table-bg)];
-      @apply dark:border-b-[color:var(--p-table-border-dark)] dark:divide-[color:var(--p-table-border-dark)] dark:bg-[color:var(--p-table-bg-dark)];
-    }
-  }
-}
-</style>

package/dist/components/table/Table.vue.d.ts

@@ -1,174 +0,0 @@
-import type { PropType } from 'vue-demi';
-import type { TableField } from '.';
-type TypeVariant = 'flexible' | 'static';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    variant: {
-        type: PropType<TypeVariant>;
-        default: string;
-    };
-    modelValue: {
-        type: PropType<Record<string, any>[]>;
-        default: () => never[];
-    };
-    fields: {
-        type: PropType<TableField<Record<string, any>>[]>;
-        default: () => never[];
-    };
-    items: {
-        type: PropType<Record<string, any>[]>;
-        default: () => never[];
-    };
-    selectable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    draggable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    emptyLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    noLabel: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showTableHeader: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {
-    model: import("vue-demi").Ref<Record<string, any>[], Record<string, any>[]>;
-    rows: import("vue-demi").WritableComputedRef<Record<string, unknown>[], Record<string, unknown>[]>;
-    classNames: import("vue-demi").ComputedRef<string[]>;
-    selectAll: import("vue-demi").WritableComputedRef<boolean, boolean>;
-    indeterminate: import("vue-demi").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "update:items")[], "update:modelValue" | "update:items", import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    variant: {
-        type: PropType<TypeVariant>;
-        default: string;
-    };
-    modelValue: {
-        type: PropType<Record<string, any>[]>;
-        default: () => never[];
-    };
-    fields: {
-        type: PropType<TableField<Record<string, any>>[]>;
-        default: () => never[];
-    };
-    items: {
-        type: PropType<Record<string, any>[]>;
-        default: () => never[];
-    };
-    selectable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    draggable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    emptyLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    noLabel: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showTableHeader: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:items"?: ((...args: any[]) => any) | undefined;
-}>, {
-    modelValue: Record<string, any>[];
-    draggable: boolean;
-    variant: TypeVariant;
-    fields: TableField<Record<string, any>>[];
-    items: Record<string, any>[];
-    selectable: boolean;
-    emptyLabel: string;
-    noLabel: boolean;
-    showTableHeader: boolean;
-}, {}, {
-    Checkbox: any;
-    IconDrag: any;
-    Draggable: import("vue-demi").DefineComponent<{
-        list: {
-            type: ArrayConstructor;
-            required: boolean;
-            default: any;
-        };
-        modelValue: {
-            type: ArrayConstructor;
-            required: boolean;
-            default: any;
-        };
-        itemKey: {
-            type: (FunctionConstructor | StringConstructor)[];
-            required: boolean;
-        };
-        clone: {
-            type: FunctionConstructor;
-            default: (original: any) => any;
-        };
-        tag: {
-            type: StringConstructor;
-            default: string;
-        };
-        move: {
-            type: FunctionConstructor;
-            default: any;
-        };
-        componentData: {
-            type: ObjectConstructor;
-            required: boolean;
-            default: any;
-        };
-    }, unknown, {
-        error: boolean;
-    }, {
-        realList(): any;
-        getKey(): any;
-    }, {
-        getUnderlyingVm(domElement: any): any;
-        getUnderlyingPotencialDraggableComponent(htmElement: any): any;
-        emitChanges(evt: any): void;
-        alterList(onList: any): void;
-        spliceList(): void;
-        updatePosition(oldIndex: any, newIndex: any): void;
-        getRelatedContextFromMoveEvent({ to, related }: {
-            to: any;
-            related: any;
-        }): any;
-        getVmIndexFromDomIndex(domIndex: any): any;
-        onDragStart(evt: any): void;
-        onDragAdd(evt: any): void;
-        onDragRemove(evt: any): void;
-        onDragUpdate(evt: any): void;
-        computeFutureIndex(relatedContext: any, evt: any): any;
-        onDragMove(evt: any, originalEvent: any): any;
-        onDragEnd(): void;
-    }, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, any[], any, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<{
-        move: Function;
-        tag: string;
-        clone: Function;
-        list: unknown[];
-        modelValue: unknown[];
-        componentData: Record<string, any>;
-    } & {
-        itemKey?: string | Function;
-    }>, {
-        move: Function;
-        tag: string;
-        clone: Function;
-        list: unknown[];
-        modelValue: unknown[];
-        componentData: Record<string, any>;
-    }, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

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

@@ -1,49 +0,0 @@
-import type { HTMLAttributes } from 'vue-demi';
-import type { LiteralUnion } from 'type-fest';
-export type KeyType<T> = LiteralUnion<keyof T & string, string>;
-export type LabelType<T> = LiteralUnion<Capitalize<keyof T & string>, string>;
-export type ApperanceVariant = 'card' | 'table';
-export interface TableField<T = Record<string, unknown>> {
-    /**
-     * Field's key
-     */
-    key: KeyType<T>;
-    /**
-     * Field's Label
-     */
-    label?: LabelType<T>;
-    /**
-     * field width, value in percent
-     */
-    width?: number | string;
-    /**
-     * Function for transforming value in
-     */
-    formatter?: (value: unknown, item: T) => string;
-    /**
-     * Additional class to td element
-     */
-    tdClass?: HTMLAttributes['class'];
-    /**
-     * Additional class to th element
-     */
-    thClass?: HTMLAttributes['class'];
-    /**
-     * Enable sortable field
-     * @default true
-     */
-    sortable?: boolean;
-}
-export declare function baseFormatter(value: unknown): string;
-export declare function defineTable<T = unknown>(fields: Array<TableField<T>> | string[]): Array<TableField<T>>;
-export declare function withKey(item: object): Omit<object, never> & Omit<{
-    _key: symbol;
-}, never> & {};
-export declare function withoutKey(item: Record<string, unknown>): Pick<Record<string, unknown>, string>;
-/**
- * Add unit to unitless value
- * @param value value
- * @param unit default unit
- */
-export declare function withUnit(value?: number | string | undefined, unit?: string): string | number | undefined;
-export declare function withoutUnit(value: string, unit?: string): number;

package/dist/components/table/index.mjs

@@ -1,37 +0,0 @@
-import defu from "defu";
-import {
-  startCase,
-  isNil,
-  omit
-} from "lodash-es";
-export function baseFormatter(value) {
-  return isNil(value) ? "-" : String(value);
-}
-function normalizeField(field) {
-  return defu(field, {
-    label: startCase(field.key),
-    formatter: baseFormatter
-  });
-}
-export function defineTable(fields) {
-  return fields.map((field) => {
-    return typeof field === "string" ? normalizeField({ key: field }) : normalizeField(field);
-  });
-}
-export function withKey(item) {
-  return defu(item, { _key: Symbol("item-key") });
-}
-export function withoutKey(item) {
-  return omit(item, "_key");
-}
-export function withUnit(value, unit = "%") {
-  if (!value)
-    return;
-  if (Number.isFinite(Number(value)))
-    return `${value}${unit}`;
-  return value;
-}
-export function withoutUnit(value, unit = "%") {
-  const val = value.endsWith(unit) ? value.slice(0, value.length - unit.length) : value;
-  return Number.parseFloat(val);
-}