@privyid/persona 1.2.0 → 1.2.1-rc.0

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

@@ -1,200 +0,0 @@
----
-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

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

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

@@ -1,53 +0,0 @@
-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

@@ -1,177 +0,0 @@
-<template>
-  <div
-    class="input-group"
-    data-testid="input-group"
-    :class="classNames">
-    <slot />
-  </div>
-</template>
-
-<script setup>
-import {
-  computed,
-  provide,
-  toRef
-} from "vue-demi";
-import { INPUTGROUP_SETTING } from ".";
-const props = defineProps({
-  size: {
-    type: String,
-    default: "md"
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  error: {
-    type: Boolean,
-    default: false
-  }
-});
-const classNames = computed(() => {
-  const result = [];
-  if (props.size)
-    result.push(`input-group--${props.size}`);
-  if (props.disabled)
-    result.push("input-group--disabled", "state--disabled");
-  if (props.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") });
-</script>
-
-<style lang="postcss">
-.input-group {
-  @apply flex w-full;
-
-  &:has(:first-child:is(.input-group__addon):nth-last-child(2)) {
-    @apply rounded bg-default focus-within:ring-4 focus-within:ring-subtle/10 border border-solid border-subtlest hover:border-subtle focus-within:border-subtle;
-    @apply dark:bg-dark-default focus-within:dark:ring-dark-subtle/10 dark:border-dark-subtlest hover:dark:border-dark-subtle focus-within:dark:border-dark-subtle;
-
-    .input {
-      @apply bg-transparent;
-      @apply dark:bg-transparent;
-    }
-
-    .input > .input__form,
-    .input-group__addon {
-      @apply border-0;
-    }
-
-    .input > .input__form {
-      @apply focus:ring-0;
-    }
-
-    &.input-group--disabled {
-      @apply border-subtle;
-      @apply dark:border-dark-subtle;
-    }
-
-    &.state--error,
-    &.input-group--error {
-      @apply border-danger-emphasis hover:border-danger-emphasis focus-within:ring-danger focus-within:border-danger-emphasis;
-      @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus-within:dark:ring-dark-danger focus-within:dark:border-dark-danger-emphasis;
-    }
-  }
-
-  & > .input-group__addon:not(:first-child),
-  & > .input:not(:first-child) > .input__form,
-  & > .select:not(:first-child) > .input > .input__form {
-    @apply rounded-l-none border-l-transparent;
-    @apply dark:border-l-transparent;
-  }
-
-  & > .input-group__addon:not(:last-child),
-  & > .input:not(:last-child) > .input__form {
-    @apply rounded-r-none border-r-transparent;
-    @apply dark:border-r-transparent;
-  }
-
-  & > .select:not(:last-child) > .input > .input__form {
-    @apply rounded-r-none z-1;
-  }
-
-  & > .input-group__addon,
-  & > .input,
-  & > .select,
-  & > .divider {
-    &:not(:first-child) {
-      @apply -ml-[1px];
-    }
-  }
-
-  .input,
-  .select > .input {
-    @apply rounded-none;
-
-    &:first-child {
-      @apply rounded-l;
-    }
-
-    &:last-child {
-      @apply rounded-r;
-    }
-
-    > .input__form {
-      &:hover,
-      &:focus {
-        @apply z-[2] border-l-subtle border-r-subtle;
-        @apply dark:border-l-dark-subtle dark:border-r-dark-subtle;
-      }
-    }
-  }
-
-  & > .btn {
-    @apply z-1;
-
-    &:not(:first-child) {
-      @apply rounded-l-none -ml-[1px];
-    }
-
-    &:not(:last-child) {
-      @apply rounded-r-none;
-    }
-  }
-
-  &&--disabled {
-    @apply border-subtle border-solid border rounded;
-    @apply dark:border-dark-subtle;
-
-    > .input > .input__form,
-    > .input-group__addon,
-    > .btn.btn--variant-input {
-      @apply border-transparent;
-      @apply dark:border-transparent;
-    }
-
-    > .input:first-child .input__form,
-    > .input-group__addon:first-child,
-    > .btn:first-child {
-      @apply rounded-l-sm;
-    }
-
-    > .input:last-child .input__form,
-    > .input-group__addon:last-child,
-    > .btn:last-child {
-      @apply rounded-r-sm;
-    }
-  }
-
-  &:is(&--xs, &--sm, &--md, &--lg) > &__addon {
-    @apply shrink-0;
-
-    + .input {
-      > .input__form {
-        @apply pl-0;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,58 +0,0 @@
-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

@@ -1,42 +0,0 @@
-<template>
-  <div class="input-group__addon">
-    <slot />
-  </div>
-</template>
-
-<style lang="postcss">
-.input-group {
-  &__addon {
-    @apply flex px-3 items-center rounded border border-solid border-subtlest outline-none text-muted bg-default;
-    @apply dark:border-dark-subtlest dark:text-dark-muted dark:bg-dark-default;
-
-    .input-group--xs > & {
-      @apply text-sm py-[2px];
-    }
-
-    .input-group--sm > & {
-      @apply py-1;
-    }
-
-    .input-group--md > & {
-      @apply py-[10px];
-    }
-
-    .input-group--lg > & {
-      @apply py-4;
-    }
-
-    .state--error &,
-    .input-group--error & {
-      @apply border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
-      @apply dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
-    }
-
-    .state--disabled &,
-    .input-group--disabled & {
-      @apply bg-base border-subtle pointer-events-none text-muted;
-      @apply dark:bg-dark-base dark:border-dark-subtle  dark:text-dark-muted;
-    }
-  }
-}
-</style>

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

@@ -1,17 +0,0 @@
-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.d.ts

@@ -1,6 +0,0 @@
-import type { InjectionKey, Ref } from 'vue-demi';
-import type { SizeVariant } from '../button';
-export interface InputGroupSetting {
-    size?: Ref<SizeVariant>;
-}
-export declare const INPUTGROUP_SETTING: InjectionKey<InputGroupSetting>;