@privyid/persona 1.2.1 → 1.2.2-dev.1

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

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

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

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

@@ -0,0 +1,245 @@
+<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";
+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

@@ -0,0 +1,88 @@
+import type { PropType, VNode } from 'vue';
+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").DefineComponent<import("vue").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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").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").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.vue

@@ -0,0 +1,195 @@
+<template>
+  <p-dropzone
+    ref="dropzone"
+    v-model="model"
+    class="input-file"
+    data-testid="input-file"
+    container-class="input-file__container"
+    :class="classNames"
+    :model-modifiers="modelModifiers"
+    :multiple="multiple"
+    :maxlength="maxlength"
+    :accept="accept"
+    :disabled="disabled"
+    :readonly="readonly"
+    :clear-on-cancel="clearOnCancel">
+    <template #default="{ browse, rawModel }">
+      <p-input-group
+        :disabled="disabled"
+        :error="error"
+        :size="size">
+        <p-input-group-addon>
+          <p-button
+            :disabled="disabled"
+            :readonly="readonly"
+            @click="browse">
+            {{ browseLabel }}
+          </p-button>
+        </p-input-group-addon>
+        <p-input
+          readonly
+          :clearable="clearable"
+          :model-value="getFileNames(rawModel)"
+          :placeholder="placeholder"
+          @clear.stop.prevent="clear">
+          <template
+            v-if="$slots.append"
+            #append>
+            <slot
+              name="append" />
+          </template>
+        </p-input>
+      </p-input-group>
+    </template>
+  </p-dropzone>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { useVModel } from "../input";
+import pDropzone from "../dropzone/Dropzone.vue";
+import pInput from "../input/Input.vue";
+import pInputGroup from "../input-group/InputGroup.vue";
+import pInputGroupAddon from "../input-group/InputGroupAddon.vue";
+import pButton from "../button/Button.vue";
+const props = defineProps({
+  modelValue: {
+    type: [
+      globalThis.File,
+      Array,
+      String
+    ],
+    default: void 0
+  },
+  modelModifiers: {
+    type: Object,
+    default: () => ({})
+  },
+  multiple: {
+    type: [Boolean, String],
+    default: false
+  },
+  maxlength: {
+    type: [Number, String],
+    default: void 0
+  },
+  accept: {
+    type: String,
+    default: ""
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  clearOnCancel: {
+    type: Boolean,
+    default: false
+  },
+  placeholder: {
+    type: String,
+    default: "No file chosen"
+  },
+  browseLabel: {
+    type: String,
+    default: "Choose file"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: "md"
+  }
+});
+const emit = defineEmits(["update:modelValue", "clear", "change", "cancel"]);
+const model = useVModel(props);
+const dropzone = ref();
+const classNames = computed(() => {
+  const result = [];
+  if (props.readonly)
+    result.push("input-file--readonly");
+  if (props.disabled)
+    result.push("input-file--disabled");
+  if (props.error)
+    result.push("input-file--error");
+  return result;
+});
+function getFileNames(files) {
+  return Array.isArray(files) ? files.map((file) => file.name).join(", ") : files?.name ?? "";
+}
+function clear() {
+  const event = new Event("clear");
+  emit("clear", event);
+  if (!props.disabled && !props.readonly && !event.defaultPrevented)
+    dropzone.value.clear();
+}
+defineExpose({
+  dropzone,
+  clear
+});
+defineSlots();
+</script>
+
+<style lang="postcss">
+.input-file__container {
+  > .input-group > .input-group__addon {
+    @apply py-1 pl-1 pr-2;
+
+    > .btn {
+      @apply py-0 px-3 h-full items-center mr-4;
+    }
+  }
+
+  .input__clear {
+    @apply pointer-events-auto;
+  }
+
+  &--disabled,
+  &:disabled {
+    .input-group__addon,
+    .input-group .input__form {
+      @apply bg-base text-muted;
+      @apply dark:bg-dark-base dark:text-dark-muted;
+    }
+
+    .input-group__addon {
+      @apply rounded-l-sm;
+
+      + .input {
+        @apply rounded-r-sm;
+      }
+    }
+  }
+
+  &:hover {
+    .input-group__addon,
+    .input-group .input__form {
+      @apply border-subtle;
+      @apply dark:border-dark-subtle;
+    }
+  }
+
+  &&--disabled {
+    > .input-group > .input-group__addon > .btn {
+      @apply opacity-100;
+    }
+  }
+
+  &&--error {
+    .input-group__addon,
+    .input-group .input__form {
+      @apply border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis;
+    }
+  }
+}
+</style>