@privyid/persona 1.1.1 → 1.2.0

package/dist/components/qrcode/Qrcode.vue

@@ -8,119 +8,105 @@
     :alt="String(data)">
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+<script setup>
 import {
   computed,
   onMounted,
-  shallowRef,
-} from 'vue-demi'
-import type QRCode from 'qr-code-styling'
-import type {
-  Options,
-  ErrorCorrectionLevel,
-  TypeNumber,
-  Mode,
-} from 'qr-code-styling'
-import type { StyleVariant } from '.'
-import type { ModelModifier } from '../dropzone'
-import { defuFn } from 'defu'
-import { usePreview } from '../cropper/utils/use-preview'
-import { useVModel } from '../input'
-import { createSpinner } from '../avatar/utils/create-image'
-import { fromBase64 } from '../utils/base64'
-import { toDataURL } from '../signature-draw/utils/canvas'
-import { watchDebounced } from '@vueuse/core'
-
+  shallowRef
+} from "vue-demi";
+import { defuFn } from "defu";
+import { usePreview } from "../cropper/utils/use-preview";
+import { useVModel } from "../input";
+import { createSpinner } from "../avatar/utils/create-image";
+import { fromBase64 } from "../utils/base64";
+import { toDataURL } from "../signature-draw/utils/canvas";
+import { watchDebounced } from "@vueuse/core";
 const props = defineProps({
   modelValue: {
-    type   : [String, globalThis.File],
-    default: undefined,
+    type: [String, globalThis.File],
+    default: void 0
   },
   modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
+    type: Object,
+    default: () => ({})
   },
   data: {
-    type   : undefined as PropType<any>,
-    default: undefined,
+    type: void 0,
+    default: void 0
   },
   variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'square',
+    type: String,
+    default: "square"
   },
   size: {
-    type   : [Number, String],
-    default: 200,
+    type: [Number, String],
+    default: 200
   },
   logo: {
-    type   : String,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   logoSize: {
-    type   : [Number, String],
-    default: 0.8,
+    type: [Number, String],
+    default: 0.8
   },
   logoMargin: {
-    type   : [Number, String],
-    default: 8,
+    type: [Number, String],
+    default: 8
   },
   color: {
-    type   : String,
-    default: '#000000',
+    type: String,
+    default: "#000000"
   },
   bgColor: {
-    type   : String,
-    default: '#ffffff',
+    type: String,
+    default: "#ffffff"
   },
   ecc: {
-    type   : String as PropType<ErrorCorrectionLevel>,
-    default: 'M',
+    type: String,
+    default: "M"
   },
   typeNumber: {
-    type   : Number as PropType<TypeNumber>,
-    default: 0,
+    type: Number,
+    default: 0
   },
   mode: {
-    type   : String as PropType<Mode>,
-    default: undefined,
+    type: String,
+    default: void 0
   },
   options: {
-    type   : Object as PropType<Options>,
-    default: undefined,
-  },
-})
-
-const model   = useVModel(props)
-const preview = usePreview(model, createSpinner(Number(props.size)))
-const qrCode  = shallowRef<QRCode>()
-
+    type: Object,
+    default: void 0
+  }
+});
+const model = useVModel(props);
+const preview = usePreview(model, createSpinner(Number(props.size)));
+const qrCode = shallowRef();
 const qrOptions = computed(() => {
-  return defuFn<Options, [Options]>(props.options, {
-    type       : 'canvas',
-    data       : props.data,
-    width      : props.size as number,
-    height     : props.size as number,
-    image      : props.logo,
+  return defuFn(props.options, {
+    type: "canvas",
+    data: props.data,
+    width: props.size,
+    height: props.size,
+    image: props.logo,
     dotsOptions: {
-      type : props.variant,
-      color: props.color,
+      type: props.variant,
+      color: props.color
     },
-    cornersDotOptions   : { type: props.variant === 'dots' ? 'dot' : undefined },
-    cornersSquareOptions: { type: props.variant === 'dots' ? 'extra-rounded' : undefined },
-    qrOptions           : {
-      mode                : props.mode,
-      typeNumber          : props.typeNumber,
-      errorCorrectionLevel: props.ecc,
+    cornersDotOptions: { type: props.variant === "dots" ? "dot" : void 0 },
+    cornersSquareOptions: { type: props.variant === "dots" ? "extra-rounded" : void 0 },
+    qrOptions: {
+      mode: props.mode,
+      typeNumber: props.typeNumber,
+      errorCorrectionLevel: props.ecc
     },
     imageOptions: {
-      margin   : props.logoMargin as number,
-      imageSize: props.logoSize as number,
+      margin: props.logoMargin,
+      imageSize: props.logoSize
     },
-    backgroundOptions: { color: props.bgColor },
-  })
-})
-
+    backgroundOptions: { color: props.bgColor }
+  });
+});
 watchDebounced(() => [
   props.data,
   props.variant,
@@ -133,38 +119,28 @@ watchDebounced(() => [
   props.ecc,
   props.typeNumber,
   props.mode,
-  props.options,
+  props.options
 ], () => {
-  load()
-}, { debounce: 300 })
-
+  load();
+}, { debounce: 300 });
 onMounted(() => {
-  load()
-})
-
-async function load () {
+  load();
+});
+async function load() {
   if (props.data) {
     if (qrCode.value)
-      qrCode.value.update(qrOptions.value)
+      qrCode.value.update(qrOptions.value);
     else {
-      const { default: QRStyling } = await import('qr-code-styling')
-
-      qrCode.value = new QRStyling(qrOptions.value)
+      const { default: QRStyling } = await import("qr-code-styling");
+      qrCode.value = new QRStyling(qrOptions.value);
     }
-
-    const canvas = await qrCode.value._getElement('png')
-    const result = toDataURL(canvas as HTMLCanvasElement, 'image/png')
-    const value  = props.modelModifiers.base64
-      ? result
-      : fromBase64(result)
-
-    model.value = value
+    const canvas = await qrCode.value._getElement("png");
+    const result = toDataURL(canvas, "image/png");
+    const value = props.modelModifiers.base64 ? result : fromBase64(result);
+    model.value = value;
   }
 }
-
-defineEmits<{
-  'update:modelValue': [unknown],
-}>()
+defineEmits(["update:modelValue"]);
 </script>
 
 <style lang="postcss">

package/dist/components/qrcode/Qrcode.vue.d.ts

@@ -0,0 +1,145 @@
+import type { PropType } from 'vue-demi';
+import type { Options, ErrorCorrectionLevel, TypeNumber, Mode } from 'qr-code-styling';
+import type { StyleVariant } from '.';
+import type { ModelModifier } from '../dropzone';
+declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: undefined;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    data: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    logo: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    logoSize: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    logoMargin: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    ecc: {
+        type: PropType<ErrorCorrectionLevel>;
+        default: string;
+    };
+    typeNumber: {
+        type: PropType<TypeNumber>;
+        default: number;
+    };
+    mode: {
+        type: PropType<Mode>;
+        default: undefined;
+    };
+    options: {
+        type: PropType<Options>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | {
+            new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
+            prototype: File;
+        })[];
+        default: undefined;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    data: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    logo: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    logoSize: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    logoMargin: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    ecc: {
+        type: PropType<ErrorCorrectionLevel>;
+        default: string;
+    };
+    typeNumber: {
+        type: PropType<TypeNumber>;
+        default: number;
+    };
+    mode: {
+        type: PropType<Mode>;
+        default: undefined;
+    };
+    options: {
+        type: PropType<Options>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+}>, {
+    size: string | number;
+    data: any;
+    modelValue: string | File;
+    mode: Mode;
+    bgColor: string;
+    variant: StyleVariant;
+    color: string;
+    options: Options;
+    modelModifiers: ModelModifier;
+    logo: string;
+    logoSize: string | number;
+    logoMargin: string | number;
+    ecc: ErrorCorrectionLevel;
+    typeNumber: TypeNumber;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/qrcode/index.md

@@ -0,0 +1,248 @@
+---
+title: QR Code · Components
+description: QRCode Image Generator
+---
+
+<script setup>
+  import pQrcode from './Qrcode.vue'
+  import pInput from '../input/Input.vue'
+  import { withBase } from 'vitepress'
+  import { ref } from 'vue-demi'
+
+  const Logo      = withBase('/assets/images/logo.svg')
+  const result    = ref()
+  const resultB64 = ref()
+
+  const text = ref('https://persona.privyid.dev')
+</script>
+
+# QR Code
+
+> QRCode Image Generator
+
+## Usage
+
+### Simple Usage
+
+<preview>
+  <p-qrcode data="https://persona.privyid.dev" />
+</preview>
+
+```vue
+<template>
+  <p-qrcode data="https://persona.privyid.dev" />
+</template>
+```
+
+### Simple QR Generator
+
+<preview>
+  <div class="flex flex-col">
+    <p-input v-model="text" />
+    <p-qrcode :data="text" />
+  </div>
+</preview>
+
+```vue
+<template>
+  <div class="flex flex-col">
+    <p-input v-model="text" />
+    <p-qrcode :data="text" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const text = ref('https://persona.privyid.dev')
+</script>
+```
+
+## Sizing
+
+Adjust QR size using prop `size`. Default is `200`
+
+<preview class="space-x-3">
+  <p-qrcode size="50" data="Hello World" />
+  <p-qrcode size="100" data="Hello World" />
+  <p-qrcode size="150" data="Hello World" />
+</preview>
+
+```vue
+<template>
+  <p-qrcode size="50" data="Hello World" />
+  <p-qrcode size="100" data="Hello World" />
+  <p-qrcode size="150" data="Hello World" />
+</template>
+```
+
+## Variant
+
+There are 3 style variants: `square`, `rounded` and `dots`. Default value is `square`
+
+<preview>
+  <div class="grid grid-cols-3 gap-4">
+    <p-qrcode variant="square" data="Hello World" />
+    <p-qrcode variant="rounded" data="Hello World" />
+    <p-qrcode variant="dots" data="Hello World" />
+  </div>
+</preview>
+
+```vue
+<template>
+  <p-qrcode variant="square" data="Hello World" />
+  <p-qrcode variant="rounded" data="Hello World" />
+  <p-qrcode variant="dots" data="Hello World" />
+</template>
+
+```
+
+## Logo
+
+<preview class="space-x-3">
+  <!-- From local assets -->
+  <p-qrcode data="https://persona.privyid.dev" :logo="Logo" />
+  <!-- From URL -->
+  <p-qrcode data="https://persona.privyid.dev" logo="https://privy-open-source.github.io/design-system/assets/images/icon-privy.svg" />
+</preview>
+
+```vue
+<template>
+  <!-- From local assets -->
+  <p-qrcode data="https://persona.privyid.dev" :logo="Logo" />
+  <!-- From URL -->
+  <p-qrcode data="https://persona.privyid.dev" logo="https://privy-open-source.github.io/design-system/assets/images/icon-privy.svg" />
+</template>
+
+<script lang="ts" setup>
+import Logo from '../assets/logo.svg'
+</script>
+```
+
+## Color
+
+<preview>
+  <p-qrcode data="https://persona.privyid.dev" color="#0065D1" />
+</preview>
+
+```vue
+<template>
+  <p-qrcode
+    data="https://persona.privyid.dev"
+    color="#0065D1" />
+</template>
+
+```
+
+## Background Color
+
+<preview>
+  <p-qrcode data="https://persona.privyid.dev" color="#3887DB" bg-color="#14181E" />
+</preview>
+
+```vue
+<template>
+  <p-qrcode
+    data="https://persona.privyid.dev"
+    color="#3887DB"
+    bg-color="#14181E" />
+</template>
+
+```
+
+## Binding v-model
+
+You can binding the generated result with `v-model`.
+
+<preview class="flex-col">
+  <p-qrcode data="Lorem ipsum" v-model="result" />
+</preview>
+
+```vue
+<template>
+  <p-qrcode data="Lorem ipsum" v-model="result" />
+</template>
+
+<script lang="ts" setup>
+const result = ref<File>()
+</script>
+```
+
+**result**
+
+<pre class="truncate"><code>{{ result }}</code></pre>
+
+### Encode to base64
+
+If you prefer [base64-dataURI][data-uri] format, add modifier `.base64` to your `v-model`.
+
+<preview class="flex-col">
+  <p-qrcode data="Lorem ipsum" v-model.base64="resultB64" />
+</preview>
+
+**result**
+
+<pre class="truncate"><code>{{ resultB64 }}</code></pre>
+
+```vue
+<template>
+  <p-qrcode data="Lorem ipsum" v-model.base64="result" />
+</template>
+
+<script lang="ts" setup>
+const result = ref('')
+</script>
+```
+
+## API
+
+### Props
+
+| Props        |   Type   |  Default  | Description                                                                      |
+|--------------|:--------:|:---------:|----------------------------------------------------------------------------------|
+| `data`       |  `Any`   |    `-`    | QRCode contains data                                                             |
+| `size`       | `Number` |   `200`   | QRCode image's width and height                                                  |
+| `variant`    | `String` | `square`  | Style variant.<br/> valid value: `square`, `rounded`, `dots`                     |
+| `logo`       | `String` |    `-`    | QRCode logo url                                                                  |
+| `logoSize`   | `Number` |   `0.8`   | QRCode logo size                                                                 |
+| `logoMargin` | `Number` |    `8`    | QRCode logo margin                                                               |
+| `color`      | `String` | `#000000` | QRCode color                                                                     |
+| `bgColor`    | `String` | `#FFFFFF` | QRCode background color                                                          |
+| `ecc`        | `String` |    `M`    | QRCode error correction level.<br/> valid value: `L`, `M`, `H`, `Q`              |
+| `typeNumber` | `Number` |    `-`    | QRCode type number                                                               |
+| `mode`       | `String` |    `-`    | QRCode mode                                                                      |
+| `options`    | `Object` |    `-`    | Extends [Qr Code Styling](https://github.com/kozakdenys/qr-code-styling) options |
+| `modelValue` | `String` |    `-`    | Result of generated image                                                        |
+
+### Slots
+
+<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>
+
+### 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>
+
+[data-uri]: https://en.wikipedia.org/wiki/Data_URI_scheme

package/dist/components/radio/Radio.spec.d.ts

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