@privyid/persona 1.2.0 → 1.2.1

package/dist/components/input/Input.vue

@@ -1,215 +0,0 @@
-<template>
-  <div
-    class="input"
-    :class="containerClass"
-    data-testid="input-container">
-    <span
-      v-if="$slots.prepend"
-      class="input__prepend">
-      <slot name="prepend" />
-    </span>
-    <input
-      ref="input"
-      v-model="model"
-      class="input__form"
-      data-testid="input"
-      :disabled="disabled"
-      :readonly="readonly"
-      :class="classNames"
-      v-bind="$attrs"
-      @beforeinput="checkOnInput(accept, $event)">
-    <IconClear
-      v-show="clearable && model"
-      class="input__clear"
-      data-testid="input-clear"
-      @click="clear" />
-    <span
-      v-if="$slots.append"
-      class="input__append">
-      <slot name="append" />
-    </span>
-  </div>
-</template>
-
-<script setup>
-import {
-  computed,
-  inject,
-  ref
-} from "vue-demi";
-import { useVModel } from ".";
-import IconClear from "@privyid/persona-icon/vue/close-circle-solid/20.vue";
-import { INPUTGROUP_SETTING } from "../input-group";
-import { checkOnInput } from "./utils/accept";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: void 0
-  },
-  size: {
-    type: String,
-    default: "md"
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  error: {
-    type: Boolean,
-    default: false
-  },
-  clearable: {
-    type: Boolean,
-    default: false
-  },
-  containerClass: {
-    type: [
-      String,
-      Array,
-      Object
-    ],
-    default: void 0
-  },
-  accept: {
-    type: String,
-    default: void 0
-  }
-});
-const emit = defineEmits(["update:modelValue", "clear"]);
-const slots = defineSlots();
-const input = ref();
-const model = useVModel(props);
-const setting = inject(INPUTGROUP_SETTING, void 0, false);
-const classNames = computed(() => {
-  const result = [];
-  if (setting?.size.value)
-    result.push(`input--${setting?.size.value}`);
-  else if (props.size)
-    result.push(`input--${props.size}`);
-  if (props.disabled)
-    result.push("input--disabled");
-  if (props.readonly)
-    result.push("input--readonly");
-  if (props.error)
-    result.push("input--error", "state--error");
-  if (props.clearable)
-    result.push("input--clearable");
-  if (slots.prepend)
-    result.push("input--has-prepend");
-  if (slots.append)
-    result.push("input--has-append");
-  return result;
-});
-function clear(event) {
-  emit("clear", event);
-  if (!props.disabled && !props.readonly && !event.defaultPrevented)
-    model.value = "";
-}
-defineExpose({
-  input,
-  clear
-});
-</script>
-
-<style lang="postcss">
-.input {
-  @apply w-full relative bg-default rounded;
-  @apply dark:bg-dark-default;
-
-  &__form {
-    @apply py-[10px] px-3 text-base relative rounded border border-solid border-subtlest hover:border-subtle text-default w-full outline-none bg-transparent;
-    @apply dark:border-dark-subtlest hover:dark:border-dark-subtle dark:text-dark-default dark:bg-transparent;
-
-    &::placeholder,
-    &__placeholder {
-      @apply text-muted;
-      @apply dark:text-dark-muted;
-    }
-
-    &:disabled,
-    &--disabled,
-    &[disabled="true"],
-    .state--disabled & {
-      @apply bg-base border-subtle pointer-events-none text-muted;
-      @apply dark:bg-dark-base dark:border-dark-subtle  dark:text-dark-muted;
-    }
-
-    &:focus {
-      @apply border-subtle ring-4 ring-subtle/10 z-1;
-      @apply dark:border-dark-subtle dark:ring-dark-subtle/10;
-    }
-  }
-
-  &--xs {
-    @apply text-sm py-[2px] rounded-xs;
-  }
-
-  &--sm {
-    @apply py-[4px] rounded-sm;
-  }
-
-  &--md {
-    @apply py-[10px];
-  }
-
-  &--lg {
-    @apply py-4;
-  }
-
-  .state--error,
-  .state--error & > &__form:not(.no--error),
-  &--error,
-  &-group--error.input-group .input > .input__form:not(.no--error) {
-    @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
-    @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
-  }
-
-  .input__clear {
-    @apply text-default/30 cursor-pointer hover:text-danger z-[2];
-    @apply dark:text-dark-default/30 hover:dark:text-dark-danger;
-  }
-
-  &__prepend,
-  &__append {
-    @apply absolute top-0 h-full flex items-center z-[2];
-  }
-
-  &__prepend {
-    @apply left-3;
-  }
-
-  &__append {
-    @apply right-3;
-  }
-
-  &--has {
-    &-prepend {
-      @apply pl-9;
-    }
-
-    &-append {
-      @apply pr-9;
-    }
-  }
-
-  &--clearable {
-    @apply pr-9;
-
-    + .input__clear {
-      @apply absolute right-3 top-1/2 -translate-y-1/2;
-    }
-
-    &:where(.input--has-append) {
-      @apply pr-[4.15rem];
-      + .input__clear {
-        @apply right-[2.45rem];
-      }
-    }
-  }
-}
-</style>

package/dist/components/input/Input.vue.d.ts

@@ -1,111 +0,0 @@
-import type { PropType, VNode } from 'vue-demi';
-import type { SizeVariant } from '../button';
-import type { AcceptVariant } from './utils/accept';
-declare function clear(event: MouseEvent): void;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        prepend(): VNode[];
-        append(): VNode[];
-    }> & {
-        prepend(): VNode[];
-        append(): VNode[];
-    };
-    refs: {
-        input: HTMLInputElement;
-    };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    containerClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    accept: {
-        type: PropType<AcceptVariant>;
-        default: undefined;
-    };
-}>, {
-    input: import("vue-demi").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
-    clear: typeof clear;
-}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    clear: (args_0: MouseEvent) => void;
-    "update:modelValue": (args_0: string | number) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    size: {
-        type: PropType<SizeVariant>;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    containerClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    accept: {
-        type: PropType<AcceptVariant>;
-        default: undefined;
-    };
-}>> & Readonly<{
-    onClear?: ((args_0: MouseEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: string | number) => any) | undefined;
-}>, {
-    size: SizeVariant;
-    modelValue: string | number;
-    disabled: boolean;
-    error: boolean;
-    readonly: boolean;
-    clearable: boolean;
-    containerClass: string | unknown[] | Record<string, any>;
-    accept: AcceptVariant;
-}, {}, {}, {}, 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/index.d.ts

@@ -1,6 +0,0 @@
-import type { Ref } from 'vue-demi';
-export interface InputProps<V = string> {
-    modelValue?: V;
-}
-export declare function useVModel<V>(props: InputProps<V>): Ref<V>;
-export { type AcceptVariant, isAccepted, removeUnaccepted, checkOnInput, } from './utils/accept';

package/dist/components/input/index.md

@@ -1,262 +0,0 @@
----
-title: Input · Components
-description: Base text-input form.
----
-
-<script setup>
-  import pInput from "./Input.vue"
-  import { ref } from "vue-demi"
-  import IconAt from '@privyid/persona-icon/vue/address/20.vue'
-  import IconCheck from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
-  import IconEmail from '@privyid/persona-icon/vue/email/20.vue'
-  import PSpinner from '../spinner/Spinner.vue'
-  import PBanner from '../banner/Banner.vue'
-
-  const value  = ref('')
-  const result = ref('')
-</script>
-
-# Input
-
-> Base text-input form.
-
-## Usage
-
-### Simple Usage
-
-<preview>
-  <p-input v-model="value" placeholder="Input Here" />
-</preview>
-
-```vue
-<template>
-  <p-input v-model="value" placeholder="Input Here" />
-</template>
-```
-
-## Sizing
-Input has 4 variants size: `xs`, `sm`, `md`, `lg`, default is `md`.
-
-<preview class="flex-col space-y-3">
-  <p-input size="xs" />
-  <p-input size="sm" />
-  <p-input size="md" />
-  <p-input size="lg" />
-</preview>
-
-```vue
-<template>
-  <p-input size="xs" />
-  <p-input size="sm" />
-  <p-input size="md" />
-  <p-input size="lg" />
-</template>
-```
-
-## Disabled state
-
-<preview class="flex-col space-y-3">
-  <p-input disabled />
-</preview>
-
-```vue
-<template>
-  <p-input disabled />
-</template>
-```
-
-## Readonly state
-
-<preview class="flex-col space-y-3">
-  <p-input readonly />
-</preview>
-
-```vue
-<template>
-  <p-input readonly />
-</template>
-```
-
-## Error state
-
-<preview class="flex-col space-y-3">
-  <p-input error />
-</preview>
-
-```vue
-<template>
-  <p-input error />
-</template>
-```
-
-## Clearable
-
-Add clear button to input with prop `clearable`.
-
-<preview class="flex-col space-y-3">
-  <p-input clearable />
-</preview>
-
-```vue
-<template>
-  <p-input clearable />
-</template>
-```
-
-## Prepend & Append
-Input has append & prepend feature to place content inside input field. But the content that can be inserted is limited, which is only an icon.
-
-<p-banner :dismissable="false">
-  When the prepend of <code>Textfield</code> was an icon, the color of icon must be <code>fg.subtle</code> (<code>.text-subtle</code>) and or <code>fg.subtlest</code> (<code>.text-subtlest</code>).
-</p-banner>
-
-### Prepend
-<preview class="flex-col space-y-3">
-  <p-input>
-    <template #prepend>
-      <IconAt />
-    </template>
-  </p-input>
-  <p-input>
-    <template #prepend>
-      <IconEmail class="text-muted" />
-    </template>
-  </p-input>
-</preview>
-
-```vue
-<template>
-  <p-input>
-    <template #prepend>
-      <IconAt />
-    </template>
-  </p-input>
-  <p-input>
-    <template #prepend>
-      <IconEmail class="text-muted" />
-    </template>
-  </p-input>
-</template>
-```
-
-### Append
-
-<p-banner :dismissable="false" class="mt-4">
-  When the append of <code>Textfield</code> was an icon, the color of icon must be <a href="/design-system/foundation/colors/#brand">brand</a> and or <a href="/design-system/foundation/colors/#foregrounds">state(roles)</a> foregrounds. The spinner (circle loading) of <code>Textfield</code> must be <a href="/design-system/foundation/colors/#brand">brand</a>, <code>fg.subtle</code> (<code>.text-subtle</code>) and or <code>fg.subtlest</code> (<code>.text-subtlest</code>).
-</p-banner>
-
-<preview class="flex-col space-y-3">
-  <p-input>
-    <template #append>
-      <IconCheck class="text-success" />
-    </template>
-  </p-input>
-  <p-input>
-    <template #append>
-      <p-spinner />
-    </template>
-  </p-input>
-</preview>
-
-```vue
-<template>
-  <p-input>
-    <template #append>
-      <IconCheck class="text-success" />
-    </template>
-  </p-input>
-  <p-input>
-    <template #append>
-      <p-spinner />
-    </template>
-  </p-input>
-</template>
-```
-
-## Accept Character
-
-You can filter what characters are allowed to be input using the prop `accept`. The value can be RegExp, or using available preset.
-
-<preview class="flex-col space-y-4">
-  <p-input accept="0-9" placeholder="Numeric Only (Manual)" />
-  <p-input accept="numeric" placeholder="Numeric Only (using Preset)" />
-</preview>
-
-```vue
-<template>
-  <p-input accept="0-9" placeholder="Numeric Only (Manual)" />
-  <p-input accept="numeric" placeholder="Numeric Only (using Preset)" />
-</template>
-```
-
-### Available Preset
-
-<div class="overflow-x-auto">
-
-| Preset                       | RegExp                                                           | Alias                            |
-|------------------------------|------------------------------------------------------------------|----------------------------------|
-| `numeric`                    | `0-9`                                                            | `num`, `digit`                   |
-| `alpha`                      | `A-Za-z`                                                         |                                  |
-| `alpha-space`                | `A-Za-z\s`                                                       |                                  |
-| `alpha-space-symbol`         | <code>A-Za-z\s!"#$%&\'()*+,./:;<=>?@[\\\]^_&#96;{\|}~-</code>    | `non-numeric`                    |
-| `alpha-numeric`              | `A-Za-z0-9`                                                      | `alpha-num`                      |
-| `alpha-numeric-space`        | `A-Za-z0-9\s`                                                    | `alpha-num-space`                |
-| `alpha-numeric-space-symbol` | <code>A-Za-z0-9\s!"#$%&\'()*+,./:;<=>?@[\\\]^_&#96;{\|}~-</code> | `text`, `alpha-num-space-symbol` |
-| `numeric-space`              | `0-9\s`                                                          | `num-space`                      |
-| `numeric-space-symbol`       | <code>0-9\s!"#$%&\'()*+,./:;<=>?@[\\\]^_&#96;{\|}~-</code>       | `non-alpha`, `num-space-symbol`  |
-
-</div>
-
-## Binding v-model
-
-Input value can be binding with `v-model`.
-
-<preview>
-  <p-input v-model="result" />
-</preview>
-
-**result:**
-
-<pre class="truncate"><code>{{ result || '-' }}</code></pre>
-
-```vue
-<template>
-  <p-input v-model="result" />
-</template>
-```
-
-## API
-
-### Props
-
-| Props             |              Type               | Default | Description                                             |
-|-------------------|:-------------------------------:|:-------:|---------------------------------------------------------|
-| `type`            |            `String`             | `text`  | Input type                                              |
-| `size`            |            `String`             |  `md`   | Input size variant, valid value: `xs`, `sm`, `md`, `lg` |
-| `placeholder`     |            `String`             |   `-`   | Input placeholder                                       |
-| `disabled`        |            `Boolean`            | `false` | Disabled state                                          |
-| `readonly`        |            `Boolean`            | `false` | Readonly state                                          |
-| `error`           |            `Boolean`            | `false` | Error state                                             |
-| `clearable`       |            `Boolean`            | `false` | Enable clear button                                     |
-| `accept`          |            `String`             |   `-`   | Whitelist character can be inputted                     |
-| `modelValue`      |            `String`             |   `-`   | v-model value                                           |
-| `container-class` | `String` or `Array` or `Object` |   `-`   | CSS class to add in the input container                 |
-
-### Slots
-
-| Name      | Description                                         |
-|-----------|-----------------------------------------------------|
-| `prepend` | Content to place icon inside of prepend input field |
-| `append`  | Content to place icon inside of append input field  |
-
-### Events
-
-| Name     | Arguments | Description                     |
-|----------|-----------|---------------------------------|
-| `change` | `String`  | Event when value changed        |
-| `clear`  | `-`       | Event when clear button clicked |
-
-## See Also
-
-- [Form Group](/components/form-group/)
-- [Input Group](/components/input-group/)

package/dist/components/input/index.mjs

@@ -1,25 +0,0 @@
-import { syncRef } from "@vueuse/core";
-import {
-  computed,
-  getCurrentInstance,
-  ref
-} from "vue-demi";
-export function useVModel(props) {
-  const localValue = ref(props.modelValue);
-  const { emit } = getCurrentInstance();
-  const model = computed({
-    get() {
-      return props.modelValue;
-    },
-    set(value) {
-      emit("update:modelValue", value);
-    }
-  });
-  syncRef(localValue, model, { immediate: false });
-  return localValue;
-}
-export {
-  isAccepted,
-  removeUnaccepted,
-  checkOnInput
-} from "./utils/accept.mjs";

package/dist/components/input/utils/accept.d.ts

@@ -1,26 +0,0 @@
-import type { LiteralUnion } from 'type-fest';
-export declare const AcceptPresets: {
-    readonly num: "\\d";
-    readonly numeric: "\\d";
-    readonly digit: "\\d";
-    readonly alpha: "A-Za-z";
-    readonly 'alpha-num': "A-Za-z\\d";
-    readonly 'alpha-num-space': "A-Za-z\\d\\s";
-    readonly 'alpha-num-space-symbol': "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'alpha-numeric': "A-Za-z\\d";
-    readonly 'alpha-numeric-space': "A-Za-z\\d\\s";
-    readonly 'alpha-numeric-space-symbol': "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'alpha-space': "A-Za-z\\s";
-    readonly 'alpha-space-symbol': "A-Za-z\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'num-space': "\\d\\s";
-    readonly 'num-space-symbol': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'numeric-space': "\\d\\s";
-    readonly 'numeric-space-symbol': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'non-numeric': "A-Za-z\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly 'non-alpha': "\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-    readonly text: "A-Za-z\\d\\s!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-};
-export type AcceptVariant = LiteralUnion<keyof typeof AcceptPresets, string>;
-export declare function isAccepted(accept: AcceptVariant | undefined, text: string): boolean;
-export declare function removeUnaccepted(accept: AcceptVariant | undefined, text: string): string;
-export declare function checkOnInput(accept: AcceptVariant | undefined, event: Event): void;