@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/chart/index.md

@@ -1,692 +0,0 @@
----
-title: Chart · Components
-description: Show chart data, Powered by ChartJS
----
-
-<script setup>
-  import pChart from './Chart.vue'
-  import pChartSet from './ChartSet.vue'
-  import pChartVal from './ChartVal.vue'
-  import { computed } from 'vue-demi'
-
-  const data = computed(() => {
-    return {
-      labels: [
-        'January',
-        'February',
-        'March',
-        'April'
-      ],
-      datasets: [{
-        type           : 'bar',
-        label          : 'Bar Dataset',
-        data           : [10, 20, 30, 40],
-        borderColor    : 'rgb(255, 99, 132)',
-        backgroundColor: 'rgba(255, 99, 132, 0.2)'
-      }, {
-        type       : 'line',
-        label      : 'Line Dataset',
-        data       : [10, 20, 30, 40],
-        fill       : false,
-        borderColor: 'rgb(54, 162, 235)'
-      }]
-    }
-  })
-
-  const options = computed(() => {
-    return {
-      scales: {
-        y: {
-          beginAtZero: true
-        }
-      }
-    }
-  })
-
-  const dataSales = computed(() => {
-    return {
-      labels: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June'
-      ],
-      datasets: [{
-        label                    : 'Data',
-        data                     : [65, 55, 60, 45, 50, 30],
-        borderColor              : 'rgb(2, 174, 197)',
-        backgroundColor          : 'rgba(2, 174, 197, 0.2)',
-        fill                     : true,
-        pointBorderWidth         : 0,
-        pointHoverBorderWidth    : 0,
-        pointBackgroundColor     : 'transparent',
-        pointHoverBackgroundColor: 'rgb(2, 174, 197)',
-        tension                  : 0.35,
-      }]
-    }
-  })
-
-  const salesOptions = computed(() => {
-    return {
-      plugins: {
-        title: {
-          display: false,
-        },
-        legend: {
-          display: false
-        },
-      },
-      scales: {
-        x: {
-          display: false,
-        },
-        y: {
-          display: false,
-        }
-      }
-    }
-  })
-</script>
-
-# Chart
-
-> Show chart data, Powered by [ChartJS](https://chartjs.org)
-
-## Usage
-
-### Simple Usage
-
-<preview>
-  <p-chart>
-    <p-chart-set name="January">
-      <p-chart-val name="success" color="#23b242" value="30"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="February">
-      <p-chart-val name="success" color="#23b242" value="20"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="March">
-      <p-chart-val name="success" color="#23b242" value="100"  />
-      <p-chart-val name="failed" color="#e42e2c" value="25" />
-    </p-chart-set>
-    <p-chart-set name="April">
-      <p-chart-val name="success" color="#23b242" value="80"  />
-      <p-chart-val name="failed" color="#e42e2c" value="20" />
-    </p-chart-set>
-    <p-chart-set name="May">
-      <p-chart-val name="success" color="#23b242" value="150"  />
-      <p-chart-val name="failed" color="#e42e2c" value="30" />
-    </p-chart-set>
-  </p-chart>
-</preview>
-
-```vue
-<template>
-  <p-chart>
-    <p-chart-set name="January">
-      <p-chart-val name="success" color="#23b242" value="30"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="February">
-      <p-chart-val name="success" color="#23b242" value="20"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="March">
-      <p-chart-val name="success" color="#23b242" value="100"  />
-      <p-chart-val name="failed" color="#e42e2c" value="25" />
-    </p-chart-set>
-    <p-chart-set name="April">
-      <p-chart-val name="success" color="#23b242" value="80"  />
-      <p-chart-val name="failed" color="#e42e2c" value="20" />
-    </p-chart-set>
-    <p-chart-set name="May">
-      <p-chart-val name="success" color="#23b242" value="150"  />
-      <p-chart-val name="failed" color="#e42e2c" value="30" />
-    </p-chart-set>
-  </p-chart>
-</template>
-```
-
-### Advance Usage
-
-<preview>
-  <p-chart :data="dataSales" :options="salesOptions" />
-</preview>
-
-```vue
-<template>
-  <p-chart :data="dataSales" :options="salesOptions" />
-</template>
-
-<script lang="ts" setup>
-  const dataSales = computed(() => {
-    return {
-      labels: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June'
-      ],
-      datasets: [{
-        label                    : 'Data',
-        data                     : [65, 55, 60, 45, 50, 30],
-        borderColor              : 'rgb(2, 174, 197)',
-        backgroundColor          : 'rgba(2, 174, 197, 0.2)',
-        fill                     : true,
-        pointBorderWidth         : 0,
-        pointHoverBorderWidth    : 0,
-        pointBackgroundColor     : 'transparent',
-        pointHoverBackgroundColor: 'rgb(2, 174, 197)',
-        tension                  : 0.35,
-      }]
-    }
-  })
-
-  const salesOptions = computed(() => {
-    return {
-      plugins: {
-        title: {
-          display: false,
-        },
-        legend: {
-          display: false
-        },
-      },
-      scales: {
-        x: {
-          display: false,
-        },
-        y: {
-          display: false,
-        }
-      }
-    }
-  })
-</script>
-```
-
-## Variants
-
-Support all chart types provided by [ChartJS](https://chartjs.org):
-  - `line`
-  - `bar`
-  - `radar`
-  - `pie`
-  - `doughnut`
-  - `polarArea`
-  - `scatter`
-  - `bubble`
-
-Default is `line`.
-
-### type `line`
-
-<preview>
-  <p-chart variant="line">
-    <p-chart-set name="January">
-      <p-chart-val name="success" color="#23b242" value="30"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="February">
-      <p-chart-val name="success" color="#23b242" value="20"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="March">
-      <p-chart-val name="success" color="#23b242" value="100"  />
-      <p-chart-val name="failed" color="#e42e2c" value="25" />
-    </p-chart-set>
-    <p-chart-set name="April">
-      <p-chart-val name="success" color="#23b242" value="80"  />
-      <p-chart-val name="failed" color="#e42e2c" value="20" />
-    </p-chart-set>
-    <p-chart-set name="May">
-      <p-chart-val name="success" color="#23b242" value="150"  />
-      <p-chart-val name="failed" color="#e42e2c" value="30" />
-    </p-chart-set>
-  </p-chart>
-</preview>
-
-```vue
-<template>
-  <p-chart variant="line">
-    <p-chart-set name="January">
-      <p-chart-val name="success" color="#23b242" value="30"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="February">
-      <p-chart-val name="success" color="#23b242" value="20"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="March">
-      <p-chart-val name="success" color="#23b242" value="100"  />
-      <p-chart-val name="failed" color="#e42e2c" value="25" />
-    </p-chart-set>
-    <p-chart-set name="April">
-      <p-chart-val name="success" color="#23b242" value="80"  />
-      <p-chart-val name="failed" color="#e42e2c" value="20" />
-    </p-chart-set>
-    <p-chart-set name="May">
-      <p-chart-val name="success" color="#23b242" value="150"  />
-      <p-chart-val name="failed" color="#e42e2c" value="30" />
-    </p-chart-set>
-  </p-chart>
-</template>
-```
-
-### type `bar`
-
-<preview>
-  <p-chart variant="bar">
-    <p-chart-set name="January">
-      <p-chart-val name="success" color="#23b242" value="30"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="February">
-      <p-chart-val name="success" color="#23b242" value="20"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="March">
-      <p-chart-val name="success" color="#23b242" value="100"  />
-      <p-chart-val name="failed" color="#e42e2c" value="25" />
-    </p-chart-set>
-    <p-chart-set name="April">
-      <p-chart-val name="success" color="#23b242" value="80"  />
-      <p-chart-val name="failed" color="#e42e2c" value="20" />
-    </p-chart-set>
-    <p-chart-set name="May">
-      <p-chart-val name="success" color="#23b242" value="150"  />
-      <p-chart-val name="failed" color="#e42e2c" value="30" />
-    </p-chart-set>
-  </p-chart>
-</preview>
-
-```vue
-<template>
-  <p-chart variant="bar">
-    <p-chart-set name="January">
-      <p-chart-val name="success" color="#23b242" value="30"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="February">
-      <p-chart-val name="success" color="#23b242" value="20"  />
-      <p-chart-val name="failed" color="#e42e2c" value="10" />
-    </p-chart-set>
-    <p-chart-set name="March">
-      <p-chart-val name="success" color="#23b242" value="100"  />
-      <p-chart-val name="failed" color="#e42e2c" value="25" />
-    </p-chart-set>
-    <p-chart-set name="April">
-      <p-chart-val name="success" color="#23b242" value="80"  />
-      <p-chart-val name="failed" color="#e42e2c" value="20" />
-    </p-chart-set>
-    <p-chart-set name="May">
-      <p-chart-val name="success" color="#23b242" value="150"  />
-      <p-chart-val name="failed" color="#e42e2c" value="30" />
-    </p-chart-set>
-  </p-chart>
-</template>
-```
-
-### type `radar`
-
-<preview>
-  <div class="w-1/2">
-    <p-chart variant="radar">
-      <p-chart-set name="Eating">
-        <p-chart-val name="male" color="#408bdd" fill="#408bdd4f" value="65"  />
-        <p-chart-val name="female" color="#eb6261" fill="#eb62614f" value="28" />
-      </p-chart-set>
-      <p-chart-set name="Drinking">
-        <p-chart-val name="male" color="#408bdd" fill="#408bdd4f" value="59"  />
-        <p-chart-val name="female" color="#eb6261" fill="#eb62614f" value="48" />
-      </p-chart-set>
-      <p-chart-set name="Sleeping">
-        <p-chart-val name="male" color="#408bdd" fill="#408bdd4f" value="90"  />
-        <p-chart-val name="female" color="#eb6261" fill="#eb62614f" value="40" />
-      </p-chart-set>
-      <p-chart-set name="Designing">
-        <p-chart-val name="male" color="#408bdd" fill="#408bdd4f" value="81"  />
-        <p-chart-val name="female" color="#eb6261" fill="#eb62614f" value="19" />
-      </p-chart-set>
-      <p-chart-set name="Coding">
-        <p-chart-val name="male" color="#408bdd" fill="#408bdd4f" value="56"  />
-        <p-chart-val name="female" color="#eb6261" fill="#eb62614f" value="96" />
-      </p-chart-set>
-    </p-chart>
-  </div>
-</preview>
-
-```vue
-<template>
-  <div class="w-1/2">
-    <p-chart variant="radar">
-      <p-chart-set name="Eating">
-        <p-chart-val name="male" color="#408bdd" fill="#408bdd4f" value="65"  />
-        <p-chart-val name="female" color="#eb6261" fill="#eb62614f" value="28" />
-      </p-chart-set>
-      <p-chart-set name="Drinking">
-        <p-chart-val name="male" color="#408bdd" fill="#408bdd4f" value="59"  />
-        <p-chart-val name="female" color="#eb6261" fill="#eb62614f" value="48" />
-      </p-chart-set>
-      <p-chart-set name="Sleeping">
-        <p-chart-val name="male" color="#408bdd" fill="#408bdd4f" value="90"  />
-        <p-chart-val name="female" color="#eb6261" fill="#eb62614f" value="40" />
-      </p-chart-set>
-      <p-chart-set name="Designing">
-        <p-chart-val name="male" color="#408bdd" fill="#408bdd4f" value="81"  />
-        <p-chart-val name="female" color="#eb6261" fill="#eb62614f" value="19" />
-      </p-chart-set>
-      <p-chart-set name="Coding">
-        <p-chart-val name="male" color="#408bdd" fill="#408bdd4f" value="56"  />
-        <p-chart-val name="female" color="#eb6261" fill="#eb62614f" value="96" />
-      </p-chart-set>
-    </p-chart>
-  </div>
-</template>
-```
-
-### type `pie`
-
-<preview>
-  <div class="w-1/2">
-    <p-chart variant="pie">
-      <p-chart-set name="Gender">
-        <p-chart-val name="male" value="49" color="#408bdd" />
-        <p-chart-val name="female" value="61" color="#eb6261" />
-      </p-chart-set>
-    </p-chart>
-  </div>
-</preview>
-
-```vue
-<template>
-  <div class="w-1/2">
-    <p-chart variant="pie">
-      <p-chart-set name="Gender">
-        <p-chart-val name="male" value="49" color="#408bdd" />
-        <p-chart-val name="female" value="61" color="#eb6261" />
-      </p-chart-set>
-    </p-chart>
-  </div>
-</template>
-```
-
-### type `doughnut`
-
-<preview>
-  <div class="w-1/2">
-    <p-chart variant="doughnut">
-      <p-chart-set name="Gender">
-        <p-chart-val name="male" value="49" color="#408bdd" />
-        <p-chart-val name="female" value="61" color="#eb6261" />
-      </p-chart-set>
-    </p-chart>
-  </div>
-</preview>
-
-```vue
-<template>
-  <div class="w-1/2">
-    <p-chart variant="doughnut">
-      <p-chart-set name="Gender">
-        <p-chart-val name="male" value="49" color="#408bdd" />
-        <p-chart-val name="female" value="61" color="#eb6261" />
-      </p-chart-set>
-    </p-chart>
-  </div>
-</template>
-```
-
-### type `polarArea`
-
-<preview>
-  <div class="w-1/2">
-    <p-chart variant="polarArea">
-      <p-chart-set name="Area">
-        <p-chart-val name="red" value="11" color="rgb(255, 99, 132)" />
-        <p-chart-val name="green" value="16" color="rgb(75, 192, 192)" />
-        <p-chart-val name="yellow" value="7" color="rgb(255, 205, 86)" />
-        <p-chart-val name="grey" value="3" color="rgb(201, 203, 207)" />
-        <p-chart-val name="blue" value="14" color="rgb(54, 162, 235" />
-      </p-chart-set>
-    </p-chart>
-  </div>
-</preview>
-
-```vue
-<template>
-  <div class="w-1/2">
-    <p-chart variant="polarArea">
-      <p-chart-set name="Area">
-        <p-chart-val name="red" value="11" color="rgb(255, 99, 132)" />
-        <p-chart-val name="green" value="16" color="rgb(75, 192, 192)" />
-        <p-chart-val name="yellow" value="7" color="rgb(255, 205, 86)" />
-        <p-chart-val name="grey" value="3" color="rgb(201, 203, 207)" />
-        <p-chart-val name="blue" value="14" color="rgb(54, 162, 235" />
-      </p-chart-set>
-    </p-chart>
-  </div>
-</template>
-```
-
-### type `bubble`
-
-<preview>
-  <p-chart variant="bubble">
-    <p-chart-set name="Area" color="#408bdd">
-      <p-chart-val :value="[11, 11, 3]" />
-      <p-chart-val :value="[15, 2, 8]" />
-      <p-chart-val :value="[25, 5, 30]" />
-      <p-chart-val :value="[19, 10, 4]" />
-    </p-chart-set>
-  </p-chart>
-</preview>
-
-```vue
-<template>
-  <p-chart variant="bubble">
-    <p-chart-set name="Area" color="#408bdd">
-      <p-chart-val :value="[11, 11, 3]" />
-      <p-chart-val :value="[15, 2, 8]" />
-      <p-chart-val :value="[25, 5, 30]" />
-      <p-chart-val :value="[19, 10, 4]" />
-    </p-chart-set>
-  </p-chart>
-</template>
-```
-
-### type `scatter`
-
-<preview>
-  <p-chart variant="scatter">
-    <p-chart-set name="Area" color="#408bdd">
-      <p-chart-val :value="[11, 11]" />
-      <p-chart-val :value="[15, 2]" />
-      <p-chart-val :value="[25, 8]" />
-      <p-chart-val :value="[19, 2]" />
-    </p-chart-set>
-  </p-chart>
-</preview>
-
-```vue
-<template>
-  <p-chart variant="scatter">
-    <p-chart-set name="Area" color="#408bdd">
-      <p-chart-val :value="[11, 11]" />
-      <p-chart-val :value="[15, 2]" />
-      <p-chart-val :value="[25, 8]" />
-      <p-chart-val :value="[19, 2]" />
-    </p-chart-set>
-  </p-chart>
-</template>
-```
-
-## Legend position
-
-You can set position of label using prop `legend`, valid value is `top`, `left`, `bottom`, `right`, `chartArea` and `none` to disabled.
-Default is `bottom`.
-
-<preview>
-  <div class="grid w-full grid-cols-2 gap-2">
-    <p-chart variant="pie" legend="left">
-      <p-chart-set name="Gender">
-        <p-chart-val name="male" value="49" color="#408bdd" />
-        <p-chart-val name="female" value="61" color="#eb6261" />
-      </p-chart-set>
-    </p-chart>
-    <p-chart variant="pie" legend="right">
-      <p-chart-set name="Gender">
-        <p-chart-val name="male" value="49" color="#408bdd" />
-        <p-chart-val name="female" value="61" color="#eb6261" />
-      </p-chart-set>
-    </p-chart>
-  </div>
-</preview>
-
-```vue
-<template>
-  <div class="grid w-full grid-cols-2 gap-2">
-    <p-chart variant="pie" legend="left">
-      <p-chart-set name="Gender">
-        <p-chart-val name="male" value="49" color="#408bdd" />
-        <p-chart-val name="female" value="61" color="#eb6261" />
-      </p-chart-set>
-    </p-chart>
-    <p-chart variant="pie" legend="right">
-      <p-chart-set name="Gender">
-        <p-chart-val name="male" value="49" color="#408bdd" />
-        <p-chart-val name="female" value="61" color="#eb6261" />
-      </p-chart-set>
-    </p-chart>
-  </div>
-</template>
-```
-
-## Customization
-
-If renderless not satisfies your needs, you can manually set the datasets and options via props `data` and `options`.
-
-<preview>
-  <p-chart
-    variant="scatter"
-    :data="data"
-    :options="options" />
-</preview>
-
-```vue
-<template>
-  <p-chart
-    variant="scatter"
-    :data="data"
-    :options="options" />
-</template>
-
-<script lang="ts" setup>
-  const data = computed(() => {
-    return {
-      labels: [
-        'January',
-        'February',
-        'March',
-        'April'
-      ],
-      datasets: [{
-        type           : 'bar',
-        label          : 'Bar Dataset',
-        data           : [10, 20, 30, 40],
-        borderColor    : 'rgb(255, 99, 132)',
-        backgroundColor: 'rgba(255, 99, 132, 0.2)'
-      }, {
-        type       : 'line',
-        label      : 'Line Dataset',
-        data       : [10, 20, 30, 40],
-        fill       : false,
-        borderColor: 'rgb(54, 162, 235)'
-      }]
-    }
-  })
-
-  const options = computed(() => {
-    return {
-      scales: {
-        y: {
-          beginAtZero: true
-        }
-      }
-    }
-  })
-</script>
-```
-
-## Variables
-Chart use local CSS variables on `.chart` for enhanced real-time customization.
-
-```sass
---p-chart-padding-x: theme(spacing.4);
---p-chart-padding-y: theme(spacing.4);
-```
-
-## API
-
-### Props `<p-chart>`
-
-| Props     |   Type   | Default  | Description                                                                                            |
-|-----------|:--------:|:--------:|--------------------------------------------------------------------------------------------------------|
-| `variant` | `String` |  `line`  | Chart type, valid value is `line`, `bar`, `radar`, `pie`, `doughnut`, `polarArea`, `scatter`, `bubble` |
-| `legend`  | `String` | `bottom` | Legend position, valid value is  `top`, `left`, `bottom`, `right`, `chartArea`, `none`                 |
-| `data`    | `Object` |   `-`    | Extends Chart's dataset                                                                                |
-| `options` | `Object` |   `-`    | Extends Chart's options                                                                                |
-
-### Slots `<p-chart>`
-
-| Name      | Description                             |
-|-----------|-----------------------------------------|
-| `default` | Content to place in the `<p-chart-set>` |
-
-### Props `<p-chart-set>`
-
-| Props     |   Type   | Default | Description                                                             |
-|-----------|:--------:|:-------:|-------------------------------------------------------------------------|
-| `name`    | `String` |   `-`   | Chart's dataset label                                                   |
-| `value`   | `Number` |   `-`   | Chart's dataset series value **(for `bubble` and `scatter` only)**      |
-| `color`   | `String` |   `-`   | Chart's dataset series color **(for `bubble` and `scatter` only)**      |
-| `fill`    | `String` |   `-`   | Chart's dataset series fill color **(for `bubble` and `scatter` only)** |
-| `options` | `Object` |   `-`   | Chart's dataset options                                                 |
-
-### Slots `<p-chart-set>`
-
-| Name      | Description                             |
-|-----------|-----------------------------------------|
-| `default` | Content to place in the `<p-chart-val>` |
-
-### Props `<p-chart-val>`
-
-| Props     |   Type   | Default | Description                       |
-|-----------|:--------:|:-------:|-----------------------------------|
-| `name`    | `String` |   `-`   | Chart's dataset series name       |
-| `value`   | `Number` |   `-`   | Chart's dataset series value      |
-| `color`   | `String` |   `-`   | Chart's dataset series color      |
-| `fill`    | `String` |   `-`   | Chart's dataset series fill color |
-| `options` | `Object` |   `-`   | Chart's dataset options           |
-
-### Slots `<p-chart-val>`
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td colspan="2" class="text-center">There no slots here</td>
-    </tr>
-  </tbody>
-</table>
-

package/dist/components/chart/utils/use-chart.d.ts

@@ -1,2 +0,0 @@
-import type { ChartData, ChartType, ChartOptions, Chart } from 'chart.js/auto';
-export declare function createChart(target: HTMLCanvasElement, type: ChartType, data: ChartData, options: ChartOptions): Promise<Chart>;