@privyid/persona 1.2.0 → 1.2.1

package/dist/components/input/utils/accept.mjs

@@ -1,81 +0,0 @@
-const ALPHA = "A-Za-z";
-const NUMERIC = "\\d";
-const SPACE = "\\s";
-const SYMBOL = "!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-";
-const REGEX_ALPHA = `${ALPHA}`;
-const REGEX_NUMERIC = `${NUMERIC}`;
-const REGEX_ALPHA_NUMERIC = `${ALPHA}${NUMERIC}`;
-const REGEX_ALPHA_NUMERIC_SPACE = `${ALPHA}${NUMERIC}${SPACE}`;
-const REGEX_ALPHA_NUMERIC_SPACE_SYMBOL = `${ALPHA}${NUMERIC}${SPACE}${SYMBOL}`;
-const REGEX_ALPHA_SPACE = `${ALPHA}${SPACE}`;
-const REGEX_ALPHA_SPACE_SYMBOL = `${ALPHA}${SPACE}${SYMBOL}`;
-const REGEX_NUMERIC_SPACE = `${NUMERIC}${SPACE}`;
-const REGEX_NUMERIC_SPACE_SYMBOL = `${NUMERIC}${SPACE}${SYMBOL}`;
-export const AcceptPresets = {
-  "num": REGEX_NUMERIC,
-  "numeric": REGEX_NUMERIC,
-  "digit": REGEX_NUMERIC,
-  "alpha": REGEX_ALPHA,
-  "alpha-num": REGEX_ALPHA_NUMERIC,
-  "alpha-num-space": REGEX_ALPHA_NUMERIC_SPACE,
-  "alpha-num-space-symbol": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL,
-  "alpha-numeric": REGEX_ALPHA_NUMERIC,
-  "alpha-numeric-space": REGEX_ALPHA_NUMERIC_SPACE,
-  "alpha-numeric-space-symbol": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL,
-  "alpha-space": REGEX_ALPHA_SPACE,
-  "alpha-space-symbol": REGEX_ALPHA_SPACE_SYMBOL,
-  "num-space": REGEX_NUMERIC_SPACE,
-  "num-space-symbol": REGEX_NUMERIC_SPACE_SYMBOL,
-  "numeric-space": REGEX_NUMERIC_SPACE,
-  "numeric-space-symbol": REGEX_NUMERIC_SPACE_SYMBOL,
-  "non-numeric": REGEX_ALPHA_SPACE_SYMBOL,
-  "non-alpha": REGEX_NUMERIC_SPACE_SYMBOL,
-  "text": REGEX_ALPHA_NUMERIC_SPACE_SYMBOL
-};
-export function isAccepted(accept, text) {
-  if (!accept)
-    return true;
-  try {
-    const regexStr = AcceptPresets[accept.toLowerCase()] ?? accept;
-    const regex = new RegExp(`^[${regexStr}]+$`);
-    return regex.test(text);
-  } catch (error) {
-    if (import.meta.env.DEV)
-      console.error(error);
-    return true;
-  }
-}
-export function removeUnaccepted(accept, text) {
-  if (!accept)
-    return text;
-  try {
-    const regexStr = AcceptPresets[accept.toLowerCase()] ?? accept;
-    const regex = new RegExp(`[^${regexStr}]+`, "g");
-    return text.replaceAll(regex, "");
-  } catch (error) {
-    if (import.meta.env.DEV)
-      console.error(error);
-    return text;
-  }
-}
-export function checkOnInput(accept, event) {
-  if (event.data && !isAccepted(accept, event.data)) {
-    event.preventDefault();
-    if (event.inputType === "insertFromPaste") {
-      const target = event.target;
-      const oldValue = target.value;
-      const value = removeUnaccepted(accept, event.data);
-      const ss = target.selectionStart;
-      const se = target.selectionEnd;
-      const nextValue = `${oldValue.slice(0, ss)}${value}${oldValue.slice(se)}`;
-      try {
-        target.value = nextValue;
-        target.dispatchEvent(new InputEvent("input"));
-        target.setSelectionRange(value.length + ss, value.length + ss);
-      } catch (error) {
-        if (import.meta.env.DEV)
-          console.error(error);
-      }
-    }
-  }
-}

package/dist/components/input-color/index.d.ts

@@ -1 +0,0 @@
-export type StyleVariant = 'default' | 'circle';

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

@@ -1,152 +0,0 @@
----
-title: Input Color · Components
-description: Base color-input form.
----
-
-<script setup>
-  import pInputColor from './inputColor.vue'
-  import pButton from '../button/Button.vue'
-  import { ref } from 'vue-demi'
-
-  const colorDefault = ref('')
-  const colorCustom = ref('')
-  const color = ref('')
-</script>
-
-# Input Color
-
-> Base color-input form.
-
-## Usage
-
-### Simple Usage
-
-<preview>
-  <p-input-color />
-</preview>
-
-```vue
-<template>
-  <p-input-color />
-</template>
-```
-
-## Variant
-Input color also available with variant `circle`. When variant is not set, input color will looks as `default`.
-
-<preview>
-  <p-input-color variant="circle" />
-</preview>
-
-```vue
-<template>
-  <p-input-color variant="circle" />
-</template>
-```
-
-## Disabled state
-
-<preview>
-  <p-input-color disabled />
-</preview>
-
-```vue
-<template>
-  <p-input-color disabled />
-</template>
-```
-
-## Error state
-
-<preview>
-  <p-input-color error />
-</preview>
-
-```vue
-<template>
-  <p-input-color error />
-</template>
-```
-
-## Binding v-model
-
-<preview>
-  <p-input-color v-model="color" />
-</preview>
-<div class="flex flex-col mt-2 space-y-1">
-  <strong>Result: {{ color }}</strong>
-</div>
-
-```vue
-<template>
-  <p-input-color v-model="color" />
-</template>
-
-<script lang="ts" setup>
-  const color = ref('')
-</script>
-```
-
-## Clearable
-Clear button are hidden by default. To show clear button, you can set `clearable` to `true`.
-
-### Default clearable
-<preview class="space-x-6">
-  <p-input-color clearable v-model="colorDefault" />
-</preview>
-
-```vue
-<template>
-  <p-input-color clearable v-model="color" />
-</template>
-```
-
-### Custom clearable
-
-<preview class="space-x-6">
-  <p-input-color clearable v-model="colorCustom">
-    <template #clearable="{ clear }">
-      <p-button :disabled="!colorCustom" style="--p-button-sm-padding-x: 0" size="sm" variant="link" @click="clear">Reset</p-button>
-    </template>
-  </p-input-color>
-</preview>
-
-```vue
-<template>
-  <p-input-color clearable v-model="color">
-    <template #clearable="{ clear }">
-      <p-button 
-        :disabled="!color" 
-        style="--p-button-sm-padding-x: 0" 
-        size="sm" 
-        variant="link" 
-        @click="clear">Reset</p-button>
-    </template>
-  </p-input-color>
-</template>
-```
-
-## API
-
-### Props
-
-| Props             |              Type               | Default | Description                                             |
-|-------------------|:-------------------------------:|:-------:|---------------------------------------------------------|
-| `variant`         |            `String`             | `-`     | Input color style variant, valid value: `default` and `circle`  |
-| `disabled`        |            `Boolean`            | `false` | Disabled state                                          |
-| `error`           |            `Boolean`            | `false` | Error state                                             |
-| `clearable`       |            `Boolean`            | `false` | Enable clear button                                     |
-| `modelValue`      |            `String`             |   `-`   | v-model value                                           |
-| `container-class` | `String` or `Object`            |   `-`   | CSS class to add in the input color container           |
-
-### Slots
-
-| Name        | Description                                         |
-|-------------|-------------------------------------------------------|
-| `clearable` | Content to place custom clear action of input color |
-
-### Events
-
-| Name     | Arguments | Description                     |
-|----------|-----------|---------------------------------|
-| `clear`  | `-`       | Event when clear button clicked |

package/dist/components/input-color/input-color.spec.d.ts

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

package/dist/components/input-color/input-color.spec.mjs

@@ -1,76 +0,0 @@
-import pInputColor from "./inputColor.vue";
-import { fireEvent, render } from "@testing-library/vue";
-import { ref } from "vue-demi";
-it("should render properly without any prop", () => {
-  const screen = render({
-    components: { pInputColor },
-    template: "<p-input-color />"
-  });
-  const input = screen.queryByTestId("input-color");
-  expect(input).toBeInTheDocument();
-});
-it("should be able to change style variant using `variant` prop", () => {
-  const screen = render({
-    components: { pInputColor },
-    template: '<p-input-color variant="circle" />'
-  });
-  const input = screen.queryByTestId("input-color");
-  expect(input).toHaveClass("input-color--circle");
-  expect(input).not.toHaveClass("input-color--default");
-});
-it("should has disabled state if prop `disabled` set to true", () => {
-  const screen = render({
-    components: { pInputColor },
-    template: "<p-input-color disabled />"
-  });
-  const input = screen.queryByTestId("input-color");
-  const inputForm = screen.queryByTestId("input-color-form");
-  expect(input).toHaveClass("input-color--disabled");
-  expect(inputForm).toBeDisabled();
-  expect(inputForm).toHaveAttribute("disabled");
-});
-it("should has error state if prop `error` set to true", () => {
-  const screen = render({
-    components: { pInputColor },
-    template: "<p-input-color error />"
-  });
-  const input = screen.queryByTestId("input-color");
-  const inputForm = screen.queryByTestId("input-color-form");
-  expect(input).toHaveClass("input-color--error");
-  expect(inputForm).toHaveClass("input-color__form--error", "state--error");
-});
-it("should has clear button when prop `clearable` was provided", async () => {
-  const model = ref("#5846e2");
-  const screen = render({
-    components: { pInputColor },
-    template: '<p-input-color v-model="model" clearable />',
-    setup() {
-      return { model };
-    }
-  });
-  const input = screen.queryByTestId("input-color");
-  const inputForm = screen.queryByTestId("input-color-form");
-  const inputClear = screen.queryByTestId("input-color-clear");
-  expect(input).toHaveClass("input-color--selected");
-  expect(inputForm).toHaveClass("input-color__form--clearable", "input-color__form");
-  expect(inputClear).toBeInTheDocument();
-  await fireEvent.click(inputClear);
-  expect(model.value).toBe("");
-});
-it("should be able to make custom class via `container-class` prop", async () => {
-  const model = ref("");
-  const screen = render({
-    components: { pInputColor },
-    template: '<p-input-color v-model="model" container-class="custom-class" />',
-    setup() {
-      return { model };
-    }
-  });
-  const input = screen.queryByTestId("input-color");
-  const inputForm = screen.queryByTestId("input-color-form");
-  expect(input).toHaveClass("input-color", "custom-class", "input-color--default");
-  expect(input).not.toHaveClass("input-color--selected");
-  await fireEvent.update(inputForm, "#5846e2");
-  expect(input).toHaveClass("input-color--selected");
-  expect(model.value).toBe("#5846e2");
-});

package/dist/components/input-color/inputColor.vue

@@ -1,245 +0,0 @@
-<template>
-  <div
-    class="input-color"
-    :class="[containerClass, inputClass]"
-    data-testid="input-color"
-    :style="`--p-input-color-bg:${model}`">
-    <span class="input-color__body">
-      <span class="input-color__face">
-        <IconAddPlus24
-          v-if="!model"
-          data-testid="input-color-add"
-          class="input-color__icon" />
-        <template v-else>
-          <IconCheckmarkCircleSolid20
-            v-if="variant === 'circle'"
-            data-testid="input-color-check-circle"
-            class="input-color__icon" />
-          <IconCheckmarkCircleSolid24
-            v-else
-            class="input-color__icon"
-            data-testid="input-color-check" />
-        </template>
-      </span>
-      <input
-        v-model="model"
-        :disabled="disabled"
-        type="color"
-        data-testid="input-color-form"
-        :class="[classNames, 'input-color__form']">
-    </span>
-    <slot
-      name="clearable"
-      :clear="clear">
-      <IconClear
-        v-if="model && clearable"
-        data-testid="input-color-clear"
-        class="input-color__clear"
-        @click="clear" />
-    </slot>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue-demi";
-import { useVModel } from "../input";
-import IconCheckmarkCircleSolid20 from "@privyid/persona-icon/vue/checkmark-circle-solid/20.vue";
-import IconCheckmarkCircleSolid24 from "@privyid/persona-icon/vue/checkmark-circle-solid/24.vue";
-import IconAddPlus24 from "@privyid/persona-icon/vue/add-plus/24.vue";
-import IconClear from "@privyid/persona-icon/vue/close-circle-solid/20.vue";
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: ""
-  },
-  variant: {
-    type: String,
-    default: "default"
-  },
-  clearable: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  error: {
-    type: Boolean,
-    default: false
-  },
-  containerClass: {
-    type: [String, Object],
-    default: void 0
-  }
-});
-const emit = defineEmits(["update:modelValue", "clear"]);
-const model = useVModel(props);
-const classNames = computed(() => {
-  const result = [""];
-  if (props.clearable)
-    result.push("input-color__form--clearable");
-  if (props.error)
-    result.push("input-color__form--error", "state--error");
-  return result;
-});
-const inputClass = computed(() => {
-  const result = [""];
-  if (props.variant)
-    result.push(`input-color--${props.variant}`);
-  if (props.disabled)
-    result.push("input-color--disabled");
-  if (model.value)
-    result.push("input-color--selected");
-  if (props.error)
-    result.push("input-color--error");
-  return result;
-});
-function clear() {
-  emit("clear");
-  model.value = "";
-}
-defineSlots();
-</script>
-
-<style lang="postcss">
-.input-color {
-  /**
-  * define color-bg variable
-  * for change
-  */
-  --p-input-color-bg: theme(backgroundColor.ground);
-
-  @apply flex items-center space-x-3 relative;
-
-  /**
-  * default variant's
-  * size and shape
-  */
-  &--default {
-    .input-color__body {
-      @apply w-14 h-14 rounded;
-    }
-  }
-
-  /**
-  * set sizing of
-  * circle variant
-  */
-  &--circle {
-    .input-color__body {
-      @apply rounded-full w-10 h-10;
-    }
-  }
-
-  /**
-  * make icon in white
-  * when color is selected
-  */
-  &:where(&--selected) {
-    .input-color__icon {
-      @apply text-state-emphasis;
-      @apply dark:text-dark-state-emphasis;
-    }
-  }
-
-  /**
-  * selected state
-  */
-  &--selected {
-    /**
-    * coloring body of
-    * input-color via
-    * color-bg variable
-    * */
-    .input-color__body {
-      @apply border-[color:var(--p-input-color-bg)] bg-[color:var(--p-input-color-bg)];
-      @apply dark:border-[color:var(--p-input-color-bg)] dark:bg-[color:var(--p-input-color-bg)];
-    }
-
-    /**
-    * make circle has
-    * an outline when
-    * selected
-    */
-    &.input-color--circle {
-      .input-color__body {
-        @apply outline outline-4 outline-default;
-        @apply dark:outline-dark-default;
-      }
-    }
-  }
-
-  /**
-  * default style of
-  * body of input-color
-  */
-  &__body {
-    @apply relative border-2 border-dashed border-default bg-ground text-subtle;
-    @apply dark:bg-dark-ground dark:border-dark-default dark:text-dark-subtle;
-  }
-
-  /**
-  * wrapper of checked
-  * and add icon
-  */
-  &__face {
-    @apply h-full w-full flex justify-center items-center;
-  }
-
-  /**
-  * hide input-color
-  * form visually
-  */
-  &__form {
-    @apply w-full h-full absolute left-0 top-0 opacity-0;
-
-    /**
-    * cursor pointer
-    * when form is not
-    * disabled
-    */
-    &:not(&:disabled, &[disabled="true"], &--disabled) {
-      @apply hover:cursor-pointer;
-    }
-  }
-
-  /**
-  * clear button
-  */
-  &__clear {
-    @apply z-[10] text-default/30 cursor-pointer hover:text-danger absolute -right-2.5 -top-2.5;
-    @apply dark:text-base-black/30 dark:hover:text-dark-danger;
-  }
-
-  /**
-  * make input-color
-  * looks vague when
-  * disabled
-  */
-  &--disabled {
-    .input-color__body {
-      @apply opacity-50;
-    }
-  }
-
-  /**
-  * adding red border
-  * when input error
-  */
-  &--error {
-    .input-color__body {
-      @apply ring-1 ring-danger-emphasis ring-offset-2;
-      @apply dark:ring-dark-danger-emphasis;
-    }
-  }
-
-  /**
-  * make icon subtle
-  * by default */
-  &__icon {
-    @apply text-subtle;
-    @apply dark:text-dark-subtle;
-  }
-}
-</style>

package/dist/components/input-color/inputColor.vue.d.ts

@@ -1,88 +0,0 @@
-import type { PropType, VNode } from 'vue-demi';
-import type { StyleVariant } from '.';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        clearable(props: {
-            clear: () => void;
-        }): VNode[];
-    }> & {
-        clearable(props: {
-            clear: () => void;
-        }): VNode[];
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-    };
-    variant: {
-        type: PropType<StyleVariant>;
-        default: string;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    containerClass: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    clear: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-    };
-    variant: {
-        type: PropType<StyleVariant>;
-        default: string;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    containerClass: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: undefined;
-    };
-}>> & Readonly<{
-    onClear?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    modelValue: string;
-    disabled: boolean;
-    error: boolean;
-    variant: StyleVariant;
-    clearable: boolean;
-    containerClass: string | Record<string, any>;
-}, {}, {}, {}, 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-file/InputFile.spec.d.ts

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