@privyid/persona 1.1.2 → 1.2.0

package/dist/components/input-file/index.md

@@ -0,0 +1,200 @@
+---
+title: Input File · Components
+description: Base file-input form.
+---
+
+<script setup>
+  import pInputFile from "./InputFile.vue"
+  import { ref } from "vue-demi"
+
+  const result    = ref()
+  const resultB64 = ref()
+</script>
+
+# Input File
+
+> Base file-input form.
+
+## Usage
+
+### Simple Usage
+
+<preview>
+  <p-input-file multiple />
+</preview>
+
+```vue
+<template>
+  <p-input-file multiple />
+</template>
+```
+
+## Sizing
+
+There are 4 size variants that can be use: `xs`, `sm`, `md`, `lg`. default is `md`.
+
+<preview class="flex-col space-y-3">
+  <p-input-file size="xs" />
+  <p-input-file size="sm" />
+  <p-input-file size="md" />
+  <p-input-file size="lg" />
+</preview>
+
+```vue
+<template>
+  <p-input-file size="xs" />
+  <p-input-file size="sm" />
+  <p-input-file size="md" />
+  <p-input-file size="lg" />
+</template>
+```
+
+## Disabled State
+
+<preview class="flex-col space-y-3">
+  <p-input-file disabled />
+</preview>
+
+```vue
+<template>
+  <p-input-file disabled />
+</template>
+```
+
+## Readonly State
+
+<preview class="flex-col space-y-3">
+  <p-input-file readonly />
+</preview>
+
+```vue
+<template>
+  <p-input-file readonly />
+</template>
+```
+
+## Error State
+
+<preview class="flex-col space-y-3">
+  <p-input-file error />
+</preview>
+
+```vue
+<template>
+  <p-input-file error />
+</template>
+```
+
+## Clearable
+
+<preview class="flex-col space-y-3">
+  <p-input-file clearable />
+</preview>
+
+```vue
+<template>
+  <p-input-file clearable />
+</template>
+```
+
+## Multiple upload
+
+Add prop `multiple` to enable multi-selected upload.
+
+<preview class="flex-col space-y-3">
+  <p-input-file multiple />
+</preview>
+
+```vue
+<template>
+  <p-input-file multiple />
+</template>
+```
+
+### Appending values
+
+Inherit from [Dropzone](/components/dropzone/), when user selecting the files, and then selecting again, the old list of files is replaced with new ones. Set `multiple` prop to `'append'` if you want to keep the last ones.
+
+<preview class="flex-col space-y-3">
+  <p-input-file multiple="append" />
+</preview>
+
+```vue
+<template>
+  <p-input-file multiple="append" />
+</template>
+```
+
+## Binding v-model
+
+<preview class="flex-col space-y-3">
+  <p-input-file v-model="result" />
+</preview>
+
+**result:**
+
+<pre class="truncate"><code>{{ result }}</code></pre>
+
+```vue
+<template>
+  <p-input-file v-model="result" />
+</template>
+```
+
+### Encode to base64
+
+By default, this component keep v-model value as [File][file] object.
+If you need [base64-dataURI][data-uri] format, you can add modifier `base64` to your `v-model`.
+
+<preview class="flex-col space-y-3">
+  <p-input-file v-model.base64="resultB64" />
+</preview>
+
+**result:**
+
+<pre class="truncate"><code>{{ resultB64 }}</code></pre>
+
+```vue
+<template>
+  <p-input-file v-model.base64="result" />
+</template>
+```
+## API
+
+### Props
+
+| Props          |        Type         | Default | Description                                                                    |
+|----------------|:-------------------:|:-------:|--------------------------------------------------------------------------------|
+| `size`         |      `String`       |  `md`   | Input size, valid value: `xs`, `sm`, `md`, `lg`                                |
+| `disabled`     |      `Boolean`      | `false` | Disabled state                                                                 |
+| `readonly`     |      `Boolean`      | `false` | Readonly state                                                                 |
+| `error`        |      `Boolean`      | `false` | Error state                                                                    |
+| `multiple`     | `Boolean`, `String` | `false` | Enable multiple mode, set to `append` to [appening values](#appending-values)  |
+| `maxlength`    |      `Number`       |   `-`   | Maxlength selected files, only work on multiple mode                           |
+| `accept`       |      `String`       |   `-`   | Limitting file type can be selected, see [HTML attribute: accept][attr-accept] |
+| `clearOnCanel` |      `Boolean`      | `false` | Clear v-model when user cancel the browse file                                 |
+| `clearable`    |      `Boolean`      | `false` | Enable clear button                                                            |
+| `modelValue`   |       `File`        |   `-`   | v-model value                                                                  |
+
+### Slots
+
+| Name     | Description                                        |
+|----------|----------------------------------------------------|
+| `append` | Content to place icon inside of append input field |
+
+### Events
+
+| Name     | Arguments | Description                           |
+|----------|-----------|---------------------------------------|
+| `change` | Files     | Event when value changed              |
+| `cancel` | -         | Event when user cancel selecting file |
+
+## See Also
+
+- [Input](/components/input/)
+- [Input Group](/components/input-group/)
+- [Dropzone](/components/dropzone/)
+
+[file]: https://developer.mozilla.org/en-US/docs/Web/API/File
+[data-uri]: https://en.wikipedia.org/wiki/Data_URI_scheme
+[attr-accept]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept

package/dist/components/input-group/InputGroup.spec.d.ts

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

package/dist/components/input-group/InputGroup.spec.mjs

@@ -0,0 +1,53 @@
+import pInputGroup from "./InputGroup.vue";
+import { render } from "@testing-library/vue";
+it("should render properly without any prop", () => {
+  const screen = render({
+    components: { pInputGroup },
+    template: `
+      <p-input-group />
+    `
+  });
+  const input = screen.queryByTestId("input-group");
+  expect(input).toBeInTheDocument();
+  expect(input).toHaveClass("input-group");
+});
+it("should able to set size of input-group via `size` props", () => {
+  const screen = render({
+    components: { pInputGroup },
+    template: `
+      <p-input-group size="sm" />
+    `
+  });
+  const input = screen.queryByTestId("input-group");
+  expect(input).toHaveClass("input-group--sm");
+});
+it("should have disable state if prop `disabled` set to true", () => {
+  const screen = render({
+    components: { pInputGroup },
+    template: `
+      <p-input-group disabled />
+    `
+  });
+  const input = screen.queryByTestId("input-group");
+  expect(input).toHaveClass("input-group--disabled", "state--disabled");
+});
+it("should have readonly state if prop `readonly` set to true", () => {
+  const screen = render({
+    components: { pInputGroup },
+    template: `
+      <p-input-group readonly />
+    `
+  });
+  const input = screen.queryByTestId("input-group");
+  expect(input).toHaveClass("input-group--readonly");
+});
+it("should have error state if prop `error` set to true", () => {
+  const screen = render({
+    components: { pInputGroup },
+    template: `
+      <p-input-group error />
+    `
+  });
+  const input = screen.queryByTestId("input-group");
+  expect(input).toHaveClass("input-group--error", "state--error");
+});

package/dist/components/input-group/InputGroup.vue

@@ -7,55 +7,44 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+<script setup>
 import {
   computed,
   provide,
-  toRef,
-} from 'vue-demi'
-import type { SizeVariant } from '../button'
-import { INPUTGROUP_SETTING } from '.'
-
+  toRef
+} from "vue-demi";
+import { INPUTGROUP_SETTING } from ".";
 const props = defineProps({
   size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
+    type: String,
+    default: "md"
   },
   disabled: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   readonly: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   error: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
+    type: Boolean,
+    default: false
+  }
+});
 const classNames = computed(() => {
-  const result: string[] = []
-
-  // eslint-disable-next-line unicorn/explicit-length-check
+  const result = [];
   if (props.size)
-    result.push(`input-group--${props.size}`)
-
+    result.push(`input-group--${props.size}`);
   if (props.disabled)
-    result.push('input-group--disabled', 'state--disabled')
-
+    result.push("input-group--disabled", "state--disabled");
   if (props.readonly)
-    result.push('input-group--readonly')
-
+    result.push("input-group--readonly");
   if (props.error)
-    result.push('input-group--error', 'state--error')
-
-  return result
-})
-
-provide(INPUTGROUP_SETTING, { size: toRef(props, 'size') })
+    result.push("input-group--error", "state--error");
+  return result;
+});
+provide(INPUTGROUP_SETTING, { size: toRef(props, "size") });
 </script>
 
 <style lang="postcss">

package/dist/components/input-group/InputGroup.vue.d.ts

@@ -0,0 +1,58 @@
+import type { PropType } from 'vue-demi';
+import type { SizeVariant } from '../button';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: SizeVariant;
+    disabled: boolean;
+    error: boolean;
+    readonly: boolean;
+}, {}, {}, {}, string, import("vue-demi").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/input-group/InputGroupAddon.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, 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/input-group/index.md

@@ -0,0 +1,299 @@
+---
+title: Input Group · Components
+description: Combine multiple input in singleline.
+---
+
+<script setup>
+  import pInput from '../input/Input.vue'
+  import pInputGroup from './InputGroup.vue'
+  import pInputGroupAddon from './InputGroupAddon.vue'
+  import pButton from '../button/Button.vue'
+  import pDivider from '../divider/Divider.vue'
+  import pSelect from '../select/Select.vue'
+  import IconEmail from '@privyid/persona-icon/vue/address/20.vue'
+  import { ref } from 'vue-demi'
+
+  const select = ref()
+</script>
+
+# Input Group
+
+> Combine multiple input in singleline.
+
+## Usage
+
+### Simple Usage
+
+<preview>
+  <p-input-group>
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+</preview>
+
+```vue
+<template>
+  <p-input-group>
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+</template>
+```
+
+### With Addon
+
+<preview class="flex-col space-y-3">
+  <p-input-group>
+    <p-input-group-addon>
+      <IconEmail />
+    </p-input-group-addon>
+    <p-input />
+  </p-input-group>
+</preview>
+
+```vue
+<template>
+  <p-input-group>
+    <p-input-group-addon>
+      <IconEmail />
+    </p-input-group-addon>
+    <p-input />
+  </p-input-group>
+</template>
+```
+
+### With Addon and Divider
+
+<preview class="flex-col space-y-3">
+  <p-input-group>
+    <p-input-group-addon>
+      <IconEmail />
+    </p-input-group-addon>
+    <p-divider vertical />
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+</preview>
+
+```vue
+<template>
+  <p-input-group>
+    <p-input-group-addon>
+      <IconEmail />
+    </p-input-group-addon>
+    <p-divider vertical />
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+</template>
+```
+
+### Input and Select
+
+<preview>
+  <p-input-group error>
+    <p-select v-model="select" :options="['A', 'B', 'C']" />
+    <p-input />
+  </p-input-group>
+</preview>
+
+```vue
+<template>
+  <p-input-group>
+    <p-select :options="['A', 'B', 'C']" />
+    <p-input />
+  </p-input-group>
+</template>
+```
+
+### Multiple Input
+
+<preview>
+  <p-input-group>
+    <p-input />
+    <p-divider vertical />
+    <p-input />
+    <p-divider vertical />
+    <p-input />
+  </p-input-group>
+</preview>
+
+```vue
+<template>
+  <p-input-group>
+    <p-input />
+    <p-divider vertical />
+    <p-input />
+    <p-divider vertical />
+    <p-input />
+  </p-input-group>
+</template>
+```
+
+## Sizing
+
+Input Group also has 4 variants size: `xs`, `sm`, `md`, `lg`, default is `md`.
+
+<preview class="flex-col space-y-3">
+  <p-input-group size="xs">
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+  <p-input-group size="sm">
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+  <p-input-group size="md">
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+  <p-input-group size="lg">
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+</preview>
+
+```vue
+<template>
+  <p-input-group size="xs">
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+  <p-input-group size="sm">
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+  <p-input-group size="md">
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+  <p-input-group size="lg">
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+</template>
+```
+
+## Disabled State
+
+Adding prop `disabled` to Input Group to unified input into disabled state
+
+<preview>
+  <p-input-group disabled>
+    <p-input-group-addon>
+      <IconEmail />
+    </p-input-group-addon>
+    <p-divider vertical />
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+</preview>
+
+```vue
+<template>
+  <p-input-group disabled>
+    <p-input-group-addon>
+      <IconEmail />
+    </p-input-group-addon>
+    <p-divider vertical />
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+</template>
+```
+
+## Error State
+
+Adding prop `error` to Input Group to unified input into error state
+
+<preview>
+  <p-input-group error>
+    <p-input-group-addon>
+      <IconEmail />
+    </p-input-group-addon>
+    <p-divider vertical />
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+</preview>
+
+```vue
+<template>
+  <p-input-group error>
+    <p-input-group-addon>
+      <IconEmail />
+    </p-input-group-addon>
+    <p-divider vertical />
+    <p-input />
+    <p-button variant="input">
+      Submit
+    </p-button>
+  </p-input-group>
+</template>
+```
+
+## API
+
+### Props
+
+| Props      |   Type    | Default | Description                                             |
+|------------|:---------:|:-------:|---------------------------------------------------------|
+| `size`     | `String`  |  `md`   | Input size variant, valid value: `xs`, `sm`, `md`, `lg` |
+| `disabled` | `Boolean` | `false` | Disabled state                                          |
+| `readonly` | `Boolean` | `false` | Readonly state                                          |
+| `error`    | `Boolean` | `false` | Error state                                             |
+
+### Slots
+
+| Name      | Description                   |
+|-----------|-------------------------------|
+| `default` | Content to place a form input |
+
+### 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>
+
+## See Also