@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/table-static/TableStatic.vue

@@ -0,0 +1,406 @@
+<template>
+  <TableStaticRoot
+    data-testid="table-static"
+    :scrollable="scrollable"
+    :class="classNames"
+    :table-class="tableClass">
+    <thead
+      v-if="!noLabel"
+      class="table-static__headers">
+      <tr :class="trClass">
+        <th
+          v-if="draggable"
+          class="table-static__header table-static__drag" />
+        <th
+          v-if="selectable"
+          class="table-static__header table-static__checkbox">
+          <Checkbox
+            v-model="selectAll"
+            data-testid="table-static-select-all"
+            :indeterminate="indeterminate" />
+        </th>
+        <th
+          v-for="field in fields"
+          :key="field.key"
+          class="table-static__header"
+          data-testid="table-static-header"
+          :style="field.width ? { width: withUnit(field.width) } : {}"
+          :class="[field.thClass, { 'table-static__header--sortable': isSortable(field) }]"
+          :data-header="field.key"
+          @click="setSortField(field)">
+          <slot
+            :name="`head(${field.key})`"
+            :label="field.label"
+            :field="field"
+            :sort="getSortField(field)">
+            <span class="table-static__header-label">
+              {{ field.label }}
+              <TableStaticSort
+                v-if="isSortable(field)"
+                :active="getSortField(field)" />
+            </span>
+          </slot>
+        </th>
+      </tr>
+    </thead>
+    <Draggable
+      v-if="Array.isArray(items) && items.length > 0"
+      v-model="rows"
+      class="table-static__body"
+      handle=".table-static__drag"
+      item-key="_key"
+      tag="tbody"
+      :disabled="!draggable">
+      <template #item="{ element, index }">
+        <tr
+          class="table-static__row"
+          :class="trClass"
+          data-role="row">
+          <slot
+            name="row"
+            :item="element"
+            :index="index">
+            <td
+              v-if="draggable"
+              class="table-static__cell table-static__drag"
+              data-testid="table-static-drag-handle">
+              <IconDrag />
+            </td>
+            <td
+              v-if="selectable"
+              class="table-static__cell table-static__checkbox">
+              <Checkbox
+                v-model="model"
+                data-testid="table-static-select"
+                :value="withoutKey(element)"
+                :disabled="element._selectable === false" />
+            </td>
+            <td
+              v-for="field in fields"
+              :key="field.key"
+              class="table-static__cell"
+              data-testid="table-static-cell"
+              :class="field.tdClass"
+              :data-cell="field.key">
+              <slot
+                :name="`cell(${field.key})`"
+                :index="index"
+                :item="element">
+                {{ field.formatter(element[field.key], element) }}
+              </slot>
+            </td>
+          </slot>
+        </tr>
+      </template>
+    </Draggable>
+    <tbody
+      v-else
+      class="table-static__body">
+      <tr
+        class="table-static__row">
+        <td
+          :colspan="selectable ? fields.length + 1 : fields.length"
+          data-testid="table-static-empty"
+          class="table-static__cell table-static__cell--empty datatable__state-empty">
+          <slot name="empty">
+            <span class="flex items-center justify-center text-subtle dark:text-dark-subtle">
+              {{ emptyLabel }}
+            </span>
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </TableStaticRoot>
+</template>
+
+<script setup>
+import {
+  ref,
+  watch,
+  computed
+} from "vue";
+import {
+  withKey,
+  withoutKey,
+  withUnit
+} from "../table";
+import Checkbox from "../checkbox/Checkbox.vue";
+import TableStaticRoot from "./TableStaticRoot.vue";
+import { useVModel } from "../input";
+import IconDrag from "@privyid/persona-icon/vue/draggable/20.vue";
+import Draggable from "vuedraggable";
+import TableStaticSort from "./TableStaticSort.vue";
+const props = defineProps({
+  apperance: {
+    type: String,
+    default: "table"
+  },
+  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
+  },
+  tableClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  trClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  },
+  scrollable: {
+    type: Boolean,
+    default: true
+  },
+  sortable: {
+    type: [Boolean, String],
+    default: false
+  },
+  sortBy: {
+    type: Object,
+    default: () => ({})
+  }
+});
+const model = useVModel(props);
+const localSortBy = ref(props.sortBy);
+const emit = defineEmits(["update:modelValue", "update:items", "update:sortBy", "sort"]);
+const rows = computed({
+  get() {
+    return props.items.map((item) => {
+      return withKey(item);
+    });
+  },
+  set(items) {
+    emit("update:items", items);
+  }
+});
+const classNames = computed(() => {
+  const result = ["table-static"];
+  if (props.apperance)
+    result.push(`table-static--${props.apperance}`);
+  if (props.selectable)
+    result.push("table-static--selectable");
+  if (props.draggable)
+    result.push("table-static--draggable");
+  if (props.noLabel)
+    result.push("table-static--no-label");
+  if (props.scrollable)
+    result.push("table-static--scrollable");
+  return result;
+});
+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.map((item) => withoutKey(item)) : [];
+    }
+  }
+});
+const indeterminate = computed(() => {
+  return model.value.length > 0 && model.value.length < selectableRows.value.length;
+});
+watch(() => props.sortBy, (value) => {
+  localSortBy.value = value;
+});
+function isSortable(field) {
+  return props.sortable && field.sortable !== false;
+}
+function getSortField(field) {
+  return localSortBy.value[field.key];
+}
+function setSortField(field) {
+  if (isSortable(field)) {
+    const oldValue = getSortField(field);
+    const newValue = oldValue === "asc" ? "desc" : oldValue === "desc" ? void 0 : "asc";
+    const value = props.sortable === "multiple" ? { ...localSortBy.value, [field.key]: newValue } : { [field.key]: newValue };
+    localSortBy.value = value;
+    emit("update:sortBy", value);
+    emit("sort", value);
+  }
+}
+defineSlots();
+</script>
+
+<style lang="postcss">
+.table-static {
+  --p-table-bg: theme(backgroundColor.default.DEFAULT);
+  --p-table-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+  --p-table-header-bg: var(--p-table-bg);
+  --p-table-header-bg-dark: var(--p-table-bg-dark);
+  --p-table-border: theme(borderColor.default.DEFAULT);
+  --p-table-border-dark: theme(borderColor.dark.default.DEFAULT);
+
+  @apply w-full;
+
+  &__table {
+    @apply table;
+  }
+
+  &:not(&--scrollable) {
+    &.table-static__table {
+      @apply max-w-full;
+    }
+
+   & .table-static__row > .table-static__cell {
+      @apply whitespace-pre-wrap;
+    }
+  }
+
+  &:where(&--scrollable) {
+    .table-static__table {
+      @apply min-w-full;
+    }
+
+    & .table-static__row > .table-static__cell {
+      @apply whitespace-pre;
+    }
+  }
+
+  &__headers {
+    @apply pt-4 bg-[color:var(--p-table-bg)];
+    @apply dark:bg-[color:var(--p-table-bg-dark)];
+
+    .table-static__header {
+      @apply px-3 text-xs border-x-0;
+
+      &--sortable {
+        @apply cursor-pointer select-none;
+      }
+
+      &.table-static__drag,
+      &.table-static__checkbox {
+        @apply w-[1%];
+      }
+
+      &-label {
+        @apply inline-flex items-center;
+      }
+
+      &-sort {
+        @apply flex flex-col flex-shrink-0 items-center justify-center ml-1;
+        @apply text-muted;
+        @apply dark:text-dark-muted;
+
+        &[active="asc"] {
+          > .table-static__header-sort-down {
+            @apply text-default;
+            @apply dark:text-dark-default;
+          }
+        }
+
+        &[active="desc"] {
+          > .table-static__header-sort-up {
+            @apply text-default;
+            @apply dark:text-dark-default;
+          }
+        }
+      }
+
+      &-sort-down {
+        @apply -mt-2;
+      }
+    }
+
+    + .table-static__body {
+      @apply pt-2;
+    }
+  }
+
+  & &__row > &__cell {
+    @apply ml-2 py-4 px-3 text-sm text-default;
+    @apply dark:text-dark-default;
+
+    &.table-static__drag {
+      @apply cursor-grabbing md:mx-3;
+    }
+  }
+
+  & &__headers &__header {
+    @apply bg-[color:var(--p-table-header-bg)];
+    @apply dark:bg-[color:var(--p-table-header-bg-dark)];
+  }
+
+  & &__body > &__row {
+    @apply border-t 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)];
+  }
+
+  &--no-label {
+    .table-static__body > .table-static__row:first-child {
+      @apply border-t-0;
+    }
+  }
+
+  &--table {
+    .table-static__row .table-static__cell,
+    .table-static__headers .table-static__header {
+      @apply border-0;
+    }
+
+    .table-static__row .table-static__cell {
+      @apply align-top;
+    }
+  }
+
+  &--card {
+    .table-static__table {
+      @apply border-separate border-spacing-y-2;
+    }
+
+    .table-static__row .table-static__cell,
+    .table-static__headers .table-static__header {
+      @apply border-x-0 border-y;
+
+      &:first-child {
+        @apply rounded-l border-l;
+      }
+
+      &:last-child {
+        @apply rounded-r border-r;
+      }
+    }
+  }
+
+  &--scrollable {
+    @apply overflow-auto overscroll-contain;
+  }
+}
+</style>

package/dist/components/table-static/TableStatic.vue.d.ts

@@ -0,0 +1,90 @@
+import type { VNode } from 'vue';
+import type { ApperanceVariant, TableField, KeyType } from '../table';
+import type { SortValue } from '.';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{
+        modelValue: T[];
+        items: T[];
+        draggable: boolean;
+        sortable: boolean | "multiple" | "single";
+        sortBy: Record<string, any>;
+        selectable: boolean;
+        apperance: ApperanceVariant;
+        fields: TableField<T>[];
+        emptyLabel: string;
+        noLabel: boolean;
+        tableClass: any;
+        trClass: any;
+        scrollable: boolean;
+    }> & Omit<{
+        readonly modelValue: T[];
+        readonly items: T[];
+        readonly draggable: boolean;
+        readonly sortable: boolean | "multiple" | "single";
+        readonly sortBy: Record<string, any>;
+        readonly selectable: boolean;
+        readonly apperance: ApperanceVariant;
+        readonly fields: TableField<T>[];
+        readonly emptyLabel: string;
+        readonly noLabel: boolean;
+        readonly scrollable: boolean;
+        readonly tableClass?: any;
+        readonly trClass?: any;
+        readonly "onUpdate:modelValue"?: ((args_0: T[]) => any) | undefined;
+        readonly onSort?: ((args_0: Record<string, SortValue>) => any) | undefined;
+        readonly "onUpdate:items"?: ((args_0: T[]) => any) | undefined;
+        readonly "onUpdate:sortBy"?: ((args_0: Record<string, SortValue>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "modelValue" | "items" | "draggable" | "sortable" | "sortBy" | "selectable" | "apperance" | "fields" | "emptyLabel" | "noLabel" | "tableClass" | "trClass" | "scrollable">, "onUpdate:modelValue" | "onUpdate:items" | "onSort" | "onUpdate:sortBy" | ("modelValue" | "items" | "draggable" | "sortable" | "sortBy" | "selectable" | "apperance" | "fields" | "emptyLabel" | "noLabel" | "tableClass" | "trClass" | "scrollable")> & Partial<{}> & {}> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        [K: `cell(${string})`]: (props: {
+            index: number;
+        }) => VNode[];
+        [K: `head(${string})`]: (props: {
+            field: TableField<T>;
+            label: string;
+            sort?: "asc" | "desc";
+        }) => VNode[];
+        empty(): VNode[];
+        row(props: {
+            index: number;
+            item: T;
+        }): VNode[];
+    } & { [K in KeyType<T> as `cell(${K})`]: (props: {
+        item: T;
+        index: number;
+    }) => VNode[]; } & { [K_1 in KeyType<T> as `head(${K_1})`]: (props: {
+        field: TableField<T>;
+        label: string;
+        sort?: "asc" | "desc";
+    }) => VNode[]; }> & {
+        [K: `cell(${string})`]: (props: {
+            index: number;
+        }) => VNode[];
+        [K: `head(${string})`]: (props: {
+            field: TableField<T>;
+            label: string;
+            sort?: "asc" | "desc";
+        }) => VNode[];
+        empty(): VNode[];
+        row(props: {
+            index: number;
+            item: T;
+        }): VNode[];
+    } & { [K in KeyType<T> as `cell(${K})`]: (props: {
+        item: T;
+        index: number;
+    }) => VNode[]; } & { [K_1 in KeyType<T> as `head(${K_1})`]: (props: {
+        field: TableField<T>;
+        label: string;
+        sort?: "asc" | "desc";
+    }) => VNode[]; };
+    emit: ((evt: "update:modelValue", args_0: T[]) => void) & ((evt: "sort", args_0: Record<string, SortValue>) => void) & ((evt: "update:items", args_0: T[]) => void) & ((evt: "update:sortBy", args_0: Record<string, SortValue>) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/table-static/TableStaticRoot.vue

@@ -0,0 +1,39 @@
+<template>
+  <template v-if="scrollable">
+    <div
+      class="table-static"
+      v-bind="$attrs">
+      <table
+        class="table-static__table"
+        :class="tableClass">
+        <slot />
+      </table>
+    </div>
+  </template>
+  <template v-else>
+    <table
+      class="table-static__table"
+      :class="tableClass"
+      v-bind="$attrs">
+      <slot />
+    </table>
+  </template>
+</template>
+
+<script setup>
+defineOptions({ inheritAttrs: false });
+defineProps({
+  scrollable: {
+    type: Boolean,
+    default: true
+  },
+  tableClass: {
+    type: [
+      String,
+      Array,
+      Object
+    ],
+    default: void 0
+  }
+});
+</script>

package/dist/components/table-static/TableStaticRoot.vue.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, PropType } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tableClass: {
+        type: PropType<HTMLAttributes["class"]>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tableClass: {
+        type: PropType<HTMLAttributes["class"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    tableClass: any;
+    scrollable: boolean;
+}, {}, {}, {}, string, import("vue").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/table-static/TableStaticSort.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    :active="active"
+    class="table-static__header-sort"
+    data-testid="table-static-header-sort">
+    <IconUp
+      class="table-static__header-sort-up" />
+    <IconDown
+      class="table-static__header-sort-down" />
+  </div>
+</template>
+
+<script setup>
+import IconUp from "@privyid/persona-icon/vue/caret-up/16.vue";
+import IconDown from "@privyid/persona-icon/vue/caret-down/16.vue";
+defineProps({
+  active: {
+    type: String,
+    default: void 0
+  }
+});
+</script>

package/dist/components/table-static/TableStaticSort.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    active: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    active: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,64 @@
+import type { MaybeRefOrGetter } from 'vue';
+export type SortValue = 'asc' | 'desc';
+export interface DataTableOption {
+    /**
+     * Filter list equal to object
+     * @example
+     * // Filter list with name === 'Tarjono' and gender === 'male'
+     * const items = useTable(list, {
+     *    filterBy: {
+     *      name: 'Tarjono',
+     *      gender: 'male',
+     *    }
+     * })
+     */
+    filterBy?: MaybeRefOrGetter<Record<string, string>>;
+    /**
+     * Sort list based on key
+     * @example
+     * const items = useTable(list, {
+     *    sortBy: {
+     *      name: 'asc',
+     *    }
+     * })
+     */
+    sortBy?: MaybeRefOrGetter<Record<string, string>>;
+    /**
+     * Limit showing list
+     * @example
+     * const items = useTable(lst, {
+     *    perPage: 5,
+     *    page: 2,
+     * })
+     */
+    perPage?: MaybeRefOrGetter<number>;
+    page?: MaybeRefOrGetter<number>;
+}
+/**
+ * Reactive filter, sort and paginate array of object
+ * @param items
+ * @param options
+ * @returns
+ * @example
+ *
+ * const list = ref([
+ *   { id: 1, name: 'Tarjono', age: 20, gender: 'male' },
+ *   { id: 2, name: 'Yuki', age: 25, gender: 'female' },
+ *   { id: 3, name: 'Agus', age: 33, gender: 'male' },
+ *   { id: 4, name: 'Tumijah', age: 70, gender: 'female' },
+ *   { id: 5, name: 'Admojo', age: 55, gender: 'male' },
+ * ])
+ *
+ * const filterBy = ref({ gender: 'male' })
+ * const sortBy   = ref({ age: 'asc' })
+ * const page     = ref(1)
+ * const perPage  = ref(3)
+ *
+ * const items = useTableQuery(list, {
+ *   filterBy,
+ *   sortBy,
+ *   page,
+ *   perPage,
+ * })
+ */
+export declare function useTableQuery(items: MaybeRefOrGetter<unknown[]>, options?: DataTableOption): import("vue").ComputedRef<unknown[]>;

package/dist/components/table-static/index.mjs

@@ -0,0 +1,24 @@
+import {
+  computed,
+  toValue
+} from "vue";
+import { arrayFilter, arraySort } from "../utils/array.mjs";
+export function useTableQuery(items, options = {}) {
+  const filteredItems = computed(() => {
+    const filterBy = toValue(options.filterBy);
+    const list = toValue(items);
+    return filterBy ? arrayFilter(list, filterBy) : list;
+  });
+  const sortedItems = computed(() => {
+    const sortBy = toValue(options.sortBy);
+    return sortBy ? arraySort(filteredItems.value, sortBy) : filteredItems.value;
+  });
+  const paginateItems = computed(() => {
+    const perPage = toValue(options.perPage) ?? sortedItems.value.length;
+    const page = toValue(options.page) ?? 1;
+    const start = (page - 1) * perPage;
+    const end = start + perPage;
+    return sortedItems.value.slice(start, end);
+  });
+  return paginateItems;
+}