@privyid/persona 1.1.1 → 1.2.0

package/dist/components/table/index.md

@@ -0,0 +1,546 @@
+---
+title: Table · Components
+description: Delightful datatables.
+---
+
+<script setup>
+  import pTable from './Table.vue'
+  import pAvatar from '../avatar/Avatar.vue'
+  import pLabel from '../label/Label.vue'
+  import pHeading from '../heading/Heading.vue'
+  import pText from '../text/Text.vue'
+  import pBanner from '../banner/Banner.vue'
+  import { defineTable } from '.'
+  import { ref } from 'vue-demi'
+
+  const fields = defineTable([
+    'id',
+    'name',
+    'status',
+  ])
+
+  const fields2 = defineTable([
+    {
+      key  : 'id',
+      label: 'PrivyID',
+    },
+    {
+      key  : 'name',
+      label: 'Name',
+    },
+    {
+      key      : 'status',
+      label    : 'Is Active',
+      formatter: (value) => value ? 'Active': 'Deactive',
+    },
+  ])
+
+  const items = ref([
+    {
+      id    : 1,
+      name  : 'Tarjono',
+      status: true,
+    },
+    {
+      id    : 2,
+      name  : 'Renatta',
+      status: false,
+    },
+    {
+      id    : 3,
+      name  : 'Jonathan Smith',
+      status: true,
+    },
+    {
+      id    : 4,
+      name  : 'Arch Brown',
+      status: true,
+    },
+  ])
+
+  const itemsB = ref([
+    {
+      id    : 1,
+      name  : 'Tarjono',
+      status: true,
+    },
+    {
+      id    : 2,
+      name  : 'Tarjono',
+      status: false,
+    },
+    {
+      id    : 3,
+      name  : 'Tarjono',
+      status: true,
+    },
+    {
+      id         : 4,
+      name       : 'Can\'t be selected',
+      status     : true,
+      _selectable: false,
+    },
+  ])
+
+  const itemsC = ref([])
+
+  const selected = ref([])
+  const selectedA = ref([])
+</script>
+
+# Table
+
+> Delightful datatables.
+
+<p-banner variant="danger">
+  This component mark as <strong>deprecated</strong>.
+  Please use <a href="../table-flex/">Table Flex</a> or <a href="../table-static/">Table Static</a> instead
+</p-banner>
+
+## Usage
+
+### Simple Usage
+
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items" variant="static" />
+</preview>
+
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items" />
+</preview>
+
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items" />
+</preview>
+
+```vue
+<template class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items" />
+</template>
+
+<script setup>
+import { defineTable } from '@privyid/persona/core'
+
+const fields = defineTable([
+  'id',
+  'name',
+  'status',
+])
+
+const items = ref([
+  {
+    id    : 1,
+    name  : 'Tarjono',
+    status: true,
+  },
+  {
+    id    : 2,
+    name  : 'Tarjono',
+    status: false,
+  },
+  {
+    id    : 3,
+    name  : 'Tarjono',
+    status: true,
+  },
+  {
+    id    : 4,
+    name  : 'Tarjono',
+    status: true,
+  },
+])
+</script>
+```
+
+### Custom Label + Formatter
+
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields2" :items="items" />
+</preview>
+
+```vue
+<template class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items" />
+</template>
+
+<script setup>
+import { defineTable } from '@privyid/persona'
+
+const fields = defineTable([
+  {
+    key  : 'id',
+    label: 'PrivyID',
+  },
+  {
+    key  : 'name',
+    label: 'Name',
+  },
+  {
+    key      : 'status',
+    label    : 'Is Active',
+    formatter: (value) => value ? 'Active': 'Deactive',
+  },
+])
+
+const items = ref([
+  {
+    id    : 1,
+    name  : 'Tarjono',
+    status: true,
+  },
+  {
+    id    : 2,
+    name  : 'Tarjono',
+    status: false,
+  },
+  {
+    id    : 3,
+    name  : 'Tarjono',
+    status: true,
+  },
+  {
+    id    : 4,
+    name  : 'Tarjono',
+    status: true,
+  },
+])
+</script>
+```
+
+### Custom Empty Label
+Empty state label customization can be done through the `empty-label` prop.
+#### Default
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="itemsC" />
+</preview>
+
+```vue
+<template>
+  <p-table :fields="fields" :items="items" />
+</template>
+```
+
+#### Custom
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="itemsC" empty-label="There’s nothing to show here" />
+</preview>
+
+```vue
+<template>
+  <p-table
+    :fields="fields" :items="items"
+    empty-label="There’s nothing to show here" />
+</template>
+```
+
+## Variants
+
+There are 2 variants: `flexible` and `static`, default is `flexible`
+
+### Flexible
+
+#### Default
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items" />
+</preview>
+
+```vue
+<template>
+  <p-table :fields="fields" :items="items" />
+</template>
+```
+
+#### No Label
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items" no-label />
+</preview>
+
+```vue
+<template>
+  <p-table :fields="fields" :items="items" no-label />
+</template>
+```
+
+#### Show Table Header
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items" no-label show-table-header />
+</preview>
+
+```vue
+<template>
+  <p-table
+    :fields="fields"
+    :items="items"
+    no-label
+    show-table-header />
+</template>
+```
+
+### Static
+
+<preview class="flex-col space-y-2">
+  <p-table variant="static" :fields="fields" :items="items" />
+</preview>
+
+```vue
+<template>
+  <p-table variant="static" :fields="fields" :items="items" />
+</template>
+```
+
+## Selectable
+
+Add prop `selectable` to enable checkbox inside table
+
+<preview class="flex-col space-y-2">
+  <p-table selectable :fields="fields" :items="items" />
+</preview>
+
+```vue
+<template>
+  <p-table selectable :fields="fields" :items="items" />
+</template>
+```
+
+### Binding v-model
+
+The result of selected item is bind inside `v-model`
+
+<preview class="flex-col space-y-2">
+  <p-table v-model="selected" selectable :fields="fields" :items="items" />
+</preview>
+
+```vue
+<template>
+  <p-table v-model="selected" selectable :fields="fields" :items="items" />
+</template>
+```
+
+**Selected :**
+
+<pre><code>{{ selected }}</code></pre>
+
+### Disabling some item
+
+set `_selectable` to `false` in your items to disabled item from selection.
+
+<preview class="flex-col space-y-2">
+  <p-table v-model="selectedA" selectable :fields="fields" :items="itemsB" />
+</preview>
+
+```vue
+<template>
+  <p-table v-model="selectedA" selectable :fields="fields" :items="items" />
+</template>
+
+<script setup>
+  const items = ref([
+    {
+      id    : 1,
+      name  : 'Tarjono',
+      status: true,
+    },
+    {
+      id    : 2,
+      name  : 'Tarjono',
+      status: false,
+    },
+    {
+      id    : 3,
+      name  : 'Tarjono',
+      status: true,
+    },
+    {
+      id         : 4,
+      name       : 'Can\'t be selected',
+      status     : true,
+      _selectable: false,
+    },
+  ])
+</script>
+```
+
+## Draggable
+
+add prop `draggable` to enable drag-to-sort.
+
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" v-model:items="items" draggable />
+</preview>
+
+```vue
+<template>
+  <p-table :fields="fields" v-model:items="items" draggable />
+</template>
+```
+## Customization Slot
+
+### Custom Cell
+
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items">
+    <template #cell(name)="{ item }">
+      <div class="flex items-center space-x-2">
+        <p-avatar size="sm" :name="item.name" />
+        <span>{{ item.name }}</span>
+      </div>
+    </template>
+    <template #cell(status)="{ item }">
+      <p-label variant="light" :color="item.status ? 'success' : 'default'" size="sm">
+        {{ item.status ? 'active' : 'inactive' }}
+      </p-label>
+    </template>
+  </p-table>
+</preview>
+
+```vue
+<template>
+  <p-table :fields="fields" :items="items">
+    <template #cell(name)="{ item }">
+      <div class="flex items-center space-x-2">
+        <p-avatar size="sm" :name="item.name" />
+        <span>{{ item.name }}</span>
+      </div>
+    </template>
+    <template #cell(status)="{ item }">
+      <p-label
+        variant="light" :color="item.status ? 'success' : 'default'"
+        size="sm">
+        {{ item.status ? 'active' : 'inactive' }}
+      </p-label>
+    </template>
+  </p-table>
+</template>
+```
+
+### Custom Head
+
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items">
+    <template #head(status)="{ label }">
+      {{ label }}<p-label size="xs" class="ml-1">new</p-label>
+    </template>
+  </p-table>
+</preview>
+
+```vue
+<template>
+  <p-table :fields="fields" :items="items">
+    <template #head(status)="{ label }">
+      {{ label }}<p-label size="xs" class="ml-1">new</p-label>
+    </template>
+  </p-table>
+</template>
+```
+
+### Custom Empty
+Table has default empty state, but it's be able to customize by own via slot `empty`.
+
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="itemsC">
+    <template #empty>
+      <div class="flex flex-col items-center justify-center">
+        <img src="/assets/images/img-table-empty-records.svg">
+        <p-heading element="h6" class="mt-12">Uh oh, no data</p-heading>
+        <p-text variant="body2" class="py-4 text-subtle dark:text-dark-subtle">We’re empty-handed!</p-text>
+      </div>
+    </template>
+  </p-table>
+</preview>
+
+```vue
+<template>
+  <p-table :fields="fields" :items="items">
+    <template #empty>
+      <div class="flex flex-col items-center justify-center">
+        <img src="/assets/images/img-table-empty-records.svg">
+        <p-heading element="h6" class="mt-12">Uh oh, no data</p-heading>
+        <p-text variant="body2" class="py-4 text-subtle dark:text-dark-subtle">
+          We’re empty-handed!
+        </p-text>
+      </div>
+    </template>
+  </p-table>
+</template>
+```
+
+## Variables
+Table use local CSS variables on `.datatable` for enhanced real-time customization.
+
+```sass
+--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);
+```
+### Example
+It's possible to custom table flexible background, but the border must be transparent or same as the background color.
+<preview class="flex-col space-y-2">
+  <p-table :fields="fields" :items="items" style="--p-table-bg: #F3F3F3;--p-table-bg-dark: #0D1117;--p-table-border: #F3F3F3; --p-table-border-dark: #0D1117;" />
+</preview>
+
+```vue
+<template>
+  <p-table
+    :fields="fields"
+    :items="items"
+    style="--p-table-bg: #F3F3F3;
+    --p-table-bg-dark: #0D1117;
+    --p-table-border: #F3F3F3;
+    --p-table-border-dark: #0D1117;" />
+</template>
+```
+
+
+## API
+
+### Props
+
+| Props         |   Type    |  Default   | Description                                              |
+|---------------|:---------:|:----------:|----------------------------------------------------------|
+| `variant`     | `String`  | `flexible` | Table style variant, valid value is `flexible`, `static` |
+| `items`       |  `Array`  |    `-`     | Table items                                              |
+| `fields`      |  `Array`  |    `-`     | Table fields                                             |
+| `selectable`  | `Boolean` |  `false`   | Enable checkbox                                          |
+| `draggable`   | `Boolean` |  `false`   | Enable draggable                                         |
+| `v-model`     |  `Array`  |    `-`     | `v-model` for selected value                             |
+| `empty-label` | `String`  |  `There are no records to show`   | Table empty state label           |
+| `no-label`    | `Boolean` |  `false`   | Hide label in `flexible` variant                         |
+| `show-table-header`    | `Boolean` |  `false`   | Show table header in `flexible` variant         |
+
+In props `fields` contain
+
+| Props       | Type             | Description                                                                  |
+|-------------|:----------------:|------------------------------------------------------------------------------|
+| `key`       | `String`         | Field's key                                                                  |
+| `label?`     | `String`         | Field's Label                                                               |
+| `width?`     | `Number`         | Field's width in percent                                                    |
+| `formatter?` | `Function`       | Field's formatter, it receives `value` and `item` params and returning string value  |
+| `thClass?`   | `HTMLAttributes` | `HTMLAttributes` of `class` to use in table column cell                     |
+| `tdClass?`   | `HTMLAttributes` | `HTMLAttributes` of `class` to use in table head cell                       |
+
+
+### Slots
+
+| Name         | Description                 |
+|--------------|-----------------------------|
+| `cell(:key)` | Content for checked label   |
+| `head(:key)` | Content for unchecked label |
+| `empty`      | Content for empty state     |
+
+### Events
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Arguments</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="3" class="text-center">There no props here</td>
+    </tr>
+  </tbody>
+</table>

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

@@ -0,0 +1 @@
+export {};

package/dist/components/table/index.spec.mjs

@@ -0,0 +1,119 @@
+import {
+  baseFormatter,
+  defineTable,
+  withKey,
+  withoutKey,
+  withoutUnit,
+  withUnit
+} from "./index.mjs";
+describe("defineTable", () => {
+  it("should able convert string to field object", () => {
+    const fields = defineTable([
+      "id",
+      "item",
+      "status"
+    ]);
+    expect(fields).toStrictEqual([
+      {
+        key: "id",
+        label: "Id",
+        formatter: baseFormatter
+      },
+      {
+        key: "item",
+        label: "Item",
+        formatter: baseFormatter
+      },
+      {
+        key: "status",
+        label: "Status",
+        formatter: baseFormatter
+      }
+    ]);
+  });
+  it("should able normalize field object", () => {
+    const fields = defineTable([
+      /* mising formatter */
+      { key: "id", label: "#" },
+      /* mising label and formatter */
+      { key: "item" },
+      {
+        key: "status",
+        label: "Is Active?",
+        tdClass: "center"
+      }
+    ]);
+    expect(fields).toMatchObject([
+      {
+        key: "id",
+        label: "#",
+        formatter: baseFormatter
+      },
+      {
+        key: "item",
+        label: "Item",
+        formatter: baseFormatter
+      },
+      {
+        key: "status",
+        label: "Is Active?",
+        tdClass: "center",
+        formatter: baseFormatter
+      }
+    ]);
+  });
+});
+describe("baseFormatter", () => {
+  const cases = [
+    // eslint-disable-next-line unicorn/no-null
+    [null, "-"],
+    [void 0, "-"],
+    [1, "1"],
+    [true, "true"],
+    [false, "false"],
+    ["Hello", "Hello"],
+    ["", ""]
+  ];
+  it.each(cases)("should format %s to %s", (input, expected) => {
+    const output = baseFormatter(input);
+    expect(output).toBe(expected);
+  });
+});
+describe("withKey", () => {
+  it("should return object with `_key`", () => {
+    const item = { hello: "world" };
+    const output = withKey(item);
+    expect(output._key).toBeDefined();
+    expect(typeof output._key).toBe("symbol");
+  });
+});
+describe("withoutKey", () => {
+  it("should return object without `_key`", () => {
+    const item = { hello: "world", _key: Symbol("item-key") };
+    const output = withoutKey(item);
+    expect(output._key).toBeUndefined();
+    expect(typeof output._key).not.toBe("symbol");
+  });
+});
+describe("withUnit", () => {
+  it("should return percent if value is number", () => {
+    expect(withUnit(5)).toBe("5%");
+  });
+  it("should return percent if value is string but has no unit", () => {
+    expect(withUnit("100")).toBe("100%");
+  });
+  it("should return nothing if value is undefined", () => {
+    expect(withUnit()).toBeUndefined();
+  });
+  it("should return as is if value has a unit", () => {
+    expect(withUnit("10rem")).toBe("10rem");
+  });
+});
+describe("withoutUnit", () => {
+  it("should remove unit if exist", () => {
+    expect(withoutUnit("100%")).toBe(100);
+  });
+  it("should return as is if value has no unit", () => {
+    expect(withoutUnit("50")).toBe(50);
+  });
+});

package/dist/components/table-flex/TableFlex.spec.d.ts

@@ -0,0 +1 @@
+export {};