@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/popup/Popup.vue

@@ -1,428 +0,0 @@
-<template>
-  <div
-    data-testid="popup"
-    :class="[classNames, popupClass]"
-    v-bind="popupAttrs">
-    <div
-      class="popup__icon"
-      data-testid="popup-icon"
-      :class="classIcon">
-      <component
-        :is="toastIcon"
-        v-if="toastIcon" />
-    </div>
-    <div class="popup__body">
-      <div
-        v-if="title"
-        v-p-md.inline="title"
-        class="popup__title" />
-      <div
-        v-if="text"
-        v-p-md.inline="text"
-        class="popup__text"
-        data-testid="popup-text" />
-      <div
-        v-if="actions.length > 0"
-        class="popup__actions">
-        <template
-          v-for="(action, i) in actions"
-          :key="i">
-          <a
-            v-p-md.inline="action.text"
-            data-testid="popup-action"
-            href="javascript:void"
-            class="popup__action"
-            v-bind="action.attrs"
-            @click.prevent="onActionClick(action)" />
-        </template>
-      </div>
-    </div>
-    <div
-      v-if="dismissable"
-      data-testid="popup-close"
-      class="popup__close"
-      @click="close">
-      <IconClose />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { Component, PropType } from 'vue-demi'
-import {
-  computed,
-  h,
-} from 'vue-demi'
-import type {
-  PopupActionOption,
-  PopupStyleVariant,
-  PopupTypeVariant,
-} from '.'
-import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-import { vPMd } from '../markdown'
-import type { ColorVariant } from '../button'
-import type { AdditionalAttr } from '../global/types'
-import { useNotifyItem } from '../notify'
-import { PopupIcons } from '.'
-
-const props = defineProps({
-  title: {
-    type   : String,
-    default: '',
-  },
-  text: {
-    type   : String,
-    default: '',
-  },
-  type: {
-    type   : String as PropType<PopupTypeVariant>,
-    default: 'info',
-  },
-  variant: {
-    type   : String as PropType<PopupStyleVariant>,
-    default: 'simple',
-  },
-  icon: {
-    type: [
-      String,
-      Object,
-      Function,
-    ] as PropType<string | Component>,
-    default: undefined,
-  },
-  iconColor: {
-    type   : String as PropType<ColorVariant>,
-    default: undefined,
-  },
-  popupAttrs: {
-    type   : Object as PropType<AdditionalAttr>,
-    default: undefined,
-  },
-  popupClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  actions: {
-    type   : Array as PropType<PopupActionOption[]>,
-    default: () => ([]),
-  },
-  dismissable: {
-    type   : Boolean,
-    default: true,
-  },
-})
-
-const notify = useNotifyItem()
-const emit   = defineEmits<{
-  'dismissed': [],
-}>()
-
-const classNames = computed(() => {
-  const result: string[] = ['popup']
-
-  if (props.type)
-    result.push(`popup--${props.type}`)
-
-  if (props.variant)
-    result.push(`popup--${props.variant}`)
-
-  return result
-})
-
-const classIcon = computed(() => {
-  const result: string[] = ['default']
-
-  if (props.iconColor)
-    result.push(`popup__icon--${props.iconColor}`)
-
-  return result
-})
-
-const toastIcon = computed(() => {
-  if (!props.icon)
-    return PopupIcons[props.type]
-
-  if (typeof props.icon === 'string') {
-    return () => h('img', {
-      'src'        : props.icon,
-      'width'      : 20,
-      'height'     : 20,
-      'data-testid': 'popup-icon-image',
-    })
-  }
-
-  return props.icon
-})
-
-function close () {
-  notify.close()
-
-  emit('dismissed')
-}
-
-async function onActionClick (action: PopupActionOption) {
-  const event = new MouseEvent('click')
-
-  if (typeof action.onClick === 'function')
-    await action.onClick(Object.assign(event, { close }))
-
-  if (!event.defaultPrevented)
-    close()
-}
-</script>
-
-<style lang="postcss">
-.popup {
-  --p-popup-icon-color-primary: theme(textColor.brand.accent.DEFAULT);
-  --p-popup-icon-color-primary-dark: theme(textColor.dark.brand.accent.DEFAULT);
-
-  /**
-  * global style
-  * of popup
-  */
-  @apply flex shadow-xl rounded w-72 md:w-96 overflow-hidden;
-
-  .popup__icon,
-  .popup__close {
-    @apply shrink-0 p-4;
-  }
-
-  .popup__icon {
-    @apply flex items-center justify-center;
-  }
-
-  .popup__close {
-    @apply cursor-pointer text-muted hover:text-default;
-    @apply dark:text-dark-muted dark:hover:text-dark-default;
-  }
-
-  .popup__body {
-    @apply py-4 grow space-y-2 flex flex-col overflow-hidden justify-center;
-  }
-
-  .popup__title {
-    @apply text-sm font-medium leading-[1.75] truncate;
-  }
-
-  .popup__text {
-    @apply text-xs line-clamp-2;
-  }
-
-  .popup__actions {
-    @apply space-x-2;
-  }
-
-  .popup__action {
-    @apply text-xs truncate hover:underline;
-  }
-
-  /**
-  * Give padding-left when
-  * popup variant is not filled
-  */
-  &:not(.popup--filled) {
-    .popup__body {
-      @apply pl-4;
-    }
-  }
-
-  /**
-  * set popup info title
-  * and text color
-  */
-  &:is(.popup--info) {
-    .popup__title {
-      @apply text-default;
-      @apply dark:text-dark-default;
-    }
-
-    .popup__text {
-      @apply text-subtle;
-      @apply dark:text-dark-subtle;
-    }
-  }
-
-  /**
-  * set popup info icon color.
-  * provide background when
-  * variant is filled
-  */
-  &&--info {
-    &:is(.popup--simple) {
-      .popup__icon {
-        @apply bg-ground text-info;
-        @apply dark:bg-dark-ground dark:text-dark-info;
-
-        &--default {
-          @apply text-default;
-          @apply dark:text-dark-default;
-        }
-
-        &--warning {
-          @apply text-warning;
-          @apply dark:text-dark-warning;
-        }
-
-        &--success {
-          @apply text-success;
-          @apply dark:text-dark-success;
-        }
-
-        &--primary {
-          @apply text-[color:var(--p-toast-icon-color-primary)];
-          @apply dark:text-[color:var(--p-toast-icon-color-primary-dark)];
-        }
-
-        &--danger {
-          @apply text-danger;
-          @apply dark:text-danger;
-        }
-      }
-      .popup__title {
-        @apply text-default;
-        @apply dark:text-dark-default;
-      }
-    }
-    &.popup--filled {
-      @apply bg-ground text-info;
-      @apply dark:bg-dark-ground dark:text-dark-info;
-    }
-  }
-
-  /**
-  * provide title color
-  * in simple variant.
-  * set popup icon color and background.
-  * provide background color when
-  * variant is filled
-  */
-  &&--error {
-    &.popup--simple {
-      .popup__title {
-        @apply text-danger;
-        @apply dark:text-dark-danger;
-      }
-    }
-
-    .popup__icon,
-    &.popup--filled {
-      @apply bg-danger-emphasis;
-      @apply dark:bg-dark-danger-emphasis;
-    }
-  }
-
-  &&--success {
-    &.popup--simple {
-      .popup__title {
-        @apply text-success;
-        @apply dark:text-dark-success;
-      }
-    }
-
-    .popup__icon,
-    &.popup--filled {
-      @apply bg-success-emphasis;
-      @apply dark:bg-dark-success-emphasis;
-    }
-  }
-
-  &&--warning {
-    &.popup--simple {
-      .popup__title {
-        @apply text-warning;
-        @apply dark:text-dark-warning;
-      }
-    }
-
-    .popup__icon,
-    &.popup--filled {
-      @apply bg-warning-emphasis;
-      @apply dark:bg-dark-warning-emphasis;
-    }
-  }
-
-  /**
-  * set global style
-  * of popup in simple
-  * variant
-  */
-  &&--simple {
-    @apply bg-default;
-    @apply dark:bg-dark-default;
-
-    .popup__text {
-      @apply text-subtle;
-      @apply dark:text-dark-subtle;
-    }
-
-    &:not(.popup--info) {
-      .popup__icon {
-        @apply text-state-emphasis;
-        @apply dark:text-dark-state-emphasis;
-      }
-    }
-
-    .popup__action {
-      @apply text-info;
-      @apply dark:text-dark-info;
-    }
-  }
-
-  /**
-  * aligning popup icon
-  * when variant is filled.
-  * provide text color
-  * when popup color isn't info
-  */
-  &&--filled {
-    .popup__icon {
-      @apply items-start;
-
-      > svg {
-        @apply h-[24.56px];
-      }
-
-      &--default {
-        @apply text-on-emphasis;
-        @apply dark:text-dark-on-emphasis;
-      }
-
-      &--warning {
-        @apply text-warning;
-        @apply dark:text-dark-warning;
-      }
-
-      &--success {
-        @apply text-success;
-        @apply dark:text-dark-success;
-      }
-
-      &--primary {
-        @apply text-[color:var(--p-popup-icon-color-primary)];
-        @apply dark:text-[color:var(--p-popup-icon-color-primary-dark)];
-      }
-
-      &--danger {
-        @apply text-danger;
-        @apply dark:text-danger;
-      }
-    }
-
-    &:not(.popup--info),
-    &:not(.popup--info) .popup__action {
-      @apply text-state-emphasis;
-      @apply dark:text-dark-state-emphasis;
-    }
-
-    &:not(.popup--info) .popup__close {
-      @apply text-on-emphasis/70 hover:text-on-emphasis;
-      @apply dark:text-dark-on-emphasis/70 dark:hover:text-dark-on-emphasis;
-    }
-  }
-}
-
-</style>

package/dist/components/popup/index.d.ts

@@ -1,38 +0,0 @@
-import type { HTMLAttributes, Component } from 'vue-demi';
-import type { ColorVariant } from '../button';
-import type { NotifyInstance, NotifyOption } from '../notify';
-import type { AdditionalAttr } from '../global/types';
-import type { RequireAtLeastOne } from 'type-fest';
-import type pPopup from './Popup.vue';
-export type PopupTypeVariant = 'info' | 'success' | 'warning' | 'error';
-export type PopupStyleVariant = 'simple' | 'filled';
-export type PopupInstance = NotifyInstance<typeof pPopup>;
-export interface PopupActionOption {
-    text?: string;
-    onClick?: (event: MouseEvent & {
-        close: () => void;
-    }) => void | Promise<void>;
-    attrs?: AdditionalAttr;
-}
-interface Option extends Omit<NotifyOption, 'component'> {
-    type?: PopupTypeVariant;
-    variant?: PopupStyleVariant;
-    title?: string;
-    text?: string;
-    icon?: string | Component;
-    iconColor?: ColorVariant;
-    popupClass?: HTMLAttributes['class'];
-    popupAttrs?: AdditionalAttr;
-    dismissable?: boolean;
-    actions?: PopupActionOption[];
-}
-export declare const PopupIcons: {
-    info: any;
-    success: any;
-    warning: any;
-    error: any;
-};
-export type PopupOption = RequireAtLeastOne<Option, 'text' | 'title'>;
-declare function showPopup(text: string, title?: string, type?: PopupTypeVariant, variant?: PopupStyleVariant): Promise<PopupInstance>;
-declare function showPopup(option: PopupOption): Promise<PopupInstance>;
-export default showPopup;

package/dist/components/popup/index.mjs

@@ -1,31 +0,0 @@
-import { markRaw } from "vue-demi";
-import { showNotify } from "../notify/index.mjs";
-import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/20.vue";
-import IconSuccess from "@privyid/persona-icon/vue/checkmark/20.vue";
-import IconWarning from "@privyid/persona-icon/vue/exclamation-circle-solid/20.vue";
-import IconError from "@privyid/persona-icon/vue/exclamation-triangle-solid/20.vue";
-export const PopupIcons = {
-  info: markRaw(IconInfo),
-  success: markRaw(IconSuccess),
-  warning: markRaw(IconWarning),
-  error: markRaw(IconError)
-};
-async function showPopup(textOrOption, title, type, variant) {
-  if (typeof textOrOption === "string") {
-    return await showPopup({
-      text: textOrOption,
-      title,
-      type,
-      variant
-    });
-  }
-  const { default: pPopup } = await import("./Popup.vue");
-  const instance = await showNotify({
-    component: markRaw(pPopup),
-    props: textOrOption,
-    duration: textOrOption.duration,
-    position: textOrOption.position
-  });
-  return instance;
-}
-export default showPopup;

package/dist/components/progress/Progress.vue

@@ -1,221 +0,0 @@
-<template>
-  <div
-    class="progress"
-    data-testid="progress"
-    :class="classNames">
-    <div class="progress__items">
-      <slot />
-    </div>
-
-    <div
-      v-if="titleVariant === 'general'"
-      data-testid="progress-title-general"
-      class="progress__title">
-      <template v-if="item.slots?.title">
-        <component :is="item.slots.title" />
-      </template>
-      <template v-else>
-        {{ item.title }}
-      </template>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { findLast } from 'lodash-es'
-import type {
-  PropType,
-  Slots,
-  VNode,
-} from 'vue-demi'
-import { computed } from 'vue-demi'
-import { findAllChildren, toBoolean } from '../utils/vnode'
-import type { IconVariant, TitleVariant } from '.'
-
-interface ProgressLabel {
-  title: string,
-  slots: Slots,
-}
-
-const props = defineProps({
-  variant: {
-    type   : String as PropType<IconVariant>,
-    default: 'dot',
-  },
-  titleVariant: {
-    type   : String as PropType<TitleVariant>,
-    default: 'specific',
-  },
-  vertical: {
-    type   : Boolean,
-    default: false,
-  },
-})
-
-const slots = defineSlots<{
-  'title'(): VNode[],
-  'default'(): VNode[],
-}>()
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.variant)
-    result.push(`progress--${props.variant}`)
-
-  if (props.titleVariant)
-    result.push(`progress--${props.titleVariant}`)
-
-  if (props.vertical)
-    result.push('progress--vertical')
-  else
-    result.push('progress--horizontal')
-
-  return result
-})
-
-const item = computed<ProgressLabel>(() => {
-  const vnodes     = findAllChildren(slots.default(), 'ProgressItem')
-  const activeNode = findLast(vnodes, (vnode) => {
-    return toBoolean(vnode.props?.active)
-  })
-
-  return {
-    title: activeNode?.props?.title ?? '',
-    slots: activeNode?.children as Slots ?? {},
-  }
-})
-</script>
-
-<style lang="postcss">
-.progress {
-  --p-bg-bar-active-state: theme(backgroundColor.info.emphasis);
-  --p-bg-bar-normal-state: theme(backgroundColor.base.DEFAULT);
-  --p-bg-dark-bar-active-state: theme(backgroundColor.dark.info.emphasis);
-  --p-bg-dark-bar-normal-state: theme(backgroundColor.dark.base);
-
-  &__items {
-    @apply flex overflow-hidden;
-  }
-
-  &__item {
-    @apply flex-1 flex justify-center relative;
-
-    &:first-child .progress__bar {
-      @apply hidden;
-    }
-  }
-
-  &__content {
-    @apply flex flex-col space-y-2;
-  }
-
-  &__point {
-    @apply w-7 h-7 rounded-full bg-[color:var(--p-bg-bar-normal-state)] flex items-center justify-center text-default;
-    @apply dark:bg-[color:var(--p-bg-dark-bar-normal-state)] dark:text-dark-default;
-  }
-
-  &__bar {
-    @apply absolute rounded-full transition-[background-position] ease-linear duration-150;
-    @apply from-[var(--p-bg-bar-active-state)_50%] to-[var(--p-bg-bar-normal-state)_50%];
-    @apply dark:from-[var(--p-bg-dark-bar-active-state)_50%] dark:to-[var(--p-bg-dark-bar-normal-state)_50%];
-  }
-
-  &__title {
-    @apply truncate text-sm text-center w-full text-default;
-    @apply dark:text-dark-default;
-  }
-
-  & > .progress__title {
-    @apply pt-2;
-  }
-
-  &--active {
-    .progress__point {
-      @apply bg-brand-accent text-state-emphasis;
-      @apply dark:bg-dark-brand-accent dark:text-dark-state-emphasis;
-    }
-  }
-
-  &--horizontal {
-    @apply w-full;
-
-    .progress__items {
-      @apply flex-row;
-    }
-
-    .progress__content {
-      @apply justify-start items-center;
-    }
-
-    .progress__bar {
-      @apply w-[calc(100%_-_3rem)] h-1 top-5 right-[calc(50%_+_1.5rem)] bg-gradient-to-r bg-[length:210%_100%] bg-right;
-    }
-
-    .progress--active + .progress--active {
-      .progress__bar {
-        @apply bg-left;
-      }
-    }
-  }
-
-  &--vertical {
-    @apply h-full;
-
-    > .progress__title {
-      @apply hidden;
-    }
-
-    .progress__items {
-      @apply flex-col items-center justify-between h-full space-y-2;
-    }
-
-    .progress__content {
-      @apply justify-center items-center;
-    }
-
-    .progress__bar {
-      @apply h-[calc(100%_-_4.25rem)] w-1 bottom-[calc(50%_+_2.25rem)] left-1/2 -translate-x-1/2 bg-gradient-to-b bg-bottom bg-[length:100%_210%];
-    }
-
-    .progress--active + .progress--active {
-      .progress__bar {
-        @apply bg-top;
-      }
-    }
-  }
-
-  &--dot {
-    .progress__point-item {
-      @apply w-3 h-3 rounded-full bg-default;
-      @apply dark:bg-dark-default;
-    }
-  }
-
-  &--counter {
-    counter-reset: progress;
-
-    .progress__point {
-      counter-increment: progress;
-
-      &-item::before {
-        content: counter(progress);
-
-        @apply text-sm font-medium;
-      }
-    }
-  }
-
-  &--specific {
-    > .progress__title {
-      @apply hidden;
-    }
-  }
-
-  &--general {
-    .progress__content > .progress__title {
-      @apply hidden;
-    }
-  }
-}
-</style>