@privyid/persona 1.1.2 → 1.2.1

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

@@ -1,264 +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 lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
-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'
-import type { StyleVariant } from '.'
-
-const props = defineProps({
-  modelValue: {
-    type   : String,
-    default: '',
-  },
-  variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'default',
-  },
-  clearable: {
-    type   : Boolean,
-    default: false,
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  error: {
-    type   : Boolean,
-    default: false,
-  },
-  containerClass: {
-    type   : [String, Object],
-    default: undefined,
-  },
-})
-
-const emit  = defineEmits(['update:modelValue', 'clear'])
-const model = useVModel(props)
-
-const classNames = computed(() => {
-  const result: string[] = ['']
-
-  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: string[] = ['']
-
-  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<{
-  'clearable'(props: { clear: () => void }): VNode[],
-}>()
-</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-file/InputFile.vue

@@ -1,221 +0,0 @@
-<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 lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
-import { computed, ref } from 'vue-demi'
-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'
-import type { ModelModifier, MultipleType } from '../dropzone'
-import type { SizeVariant } from '../button'
-
-const props = defineProps({
-  modelValue: {
-    type: [
-      globalThis.File,
-      Array,
-      String,
-    ] as PropType<globalThis.File | globalThis.File[] | string | string[]>,
-    default: undefined,
-  },
-  modelModifiers: {
-    type   : Object as PropType<ModelModifier>,
-    default: () => ({} as ModelModifier),
-  },
-  multiple: {
-    type   : [Boolean, String] as PropType<boolean | MultipleType>,
-    default: false,
-  },
-  maxlength: {
-    type   : [Number, String],
-    default: undefined,
-  },
-  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 as PropType<SizeVariant>,
-    default: 'md',
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [unknown],
-  'clear': [Event],
-  'change': [unknown],
-  'cancel': [],
-}>()
-
-const model    = useVModel(props)
-const dropzone = ref<InstanceType<typeof pDropzone>>()
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  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: Array<globalThis.File> | globalThis.File) {
-  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<{
-  'append'(): VNode[],
-}>()
-</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>

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

@@ -1,188 +0,0 @@
-<template>
-  <div
-    class="input-group"
-    data-testid="input-group"
-    :class="classNames">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  computed,
-  provide,
-  toRef,
-} from 'vue-demi'
-import type { SizeVariant } from '../button'
-import { INPUTGROUP_SETTING } from '.'
-
-const props = defineProps({
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  readonly: {
-    type   : Boolean,
-    default: false,
-  },
-  error: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  // eslint-disable-next-line unicorn/explicit-length-check
-  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/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/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>;

package/dist/components/input-group/index.mjs

@@ -1 +0,0 @@
-export const INPUTGROUP_SETTING = Symbol("InputGroupSetting");