@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/timepicker/Timepicker.vue

@@ -1,230 +0,0 @@
-<template>
-  <Dropdown
-    v-model="isOpen"
-    class="timepicker"
-    data-testid="timepicker"
-    aria-label="timepicker"
-    :class="classNames"
-    :disabled="disabled">
-    <template #activator>
-      <Input
-        :value="value"
-        :model-value="value"
-        data-testid="timepicker-input"
-        class="timepicker__input"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :error="error"
-        :size="size"
-        readonly
-        @focus="onFocus">
-        <template #append>
-          <IconTime
-            class="timepicker__icon" />
-        </template>
-      </Input>
-    </template>
-
-    <Time
-      v-if="isOpen"
-      v-slot="{ confirm }"
-      v-model="model"
-      :time-separator="timeSeparator"
-      :is12-hour="is12Hour"
-      :hour-interval="hourInterval"
-      :minute-interval="minuteInterval"
-      :min="min"
-      :max="max"
-      @context="onTimeContext"
-      @change="(context) => emit('change', context)">
-      <slot
-        name="footer"
-        :confirm="confirm"
-        :close="onClose">
-        <Button
-          v-if="dismissable"
-          variant="ghost"
-          class="time__action--cancel"
-          @click="onClose">
-          {{ dimissLabel }}
-        </Button>
-        <Button
-          variant="solid"
-          color="info"
-          @click="confirm">
-          {{ confirmLabel }}
-        </Button>
-      </slot>
-    </Time>
-  </Dropdown>
-</template>
-
-<script setup lang="ts">
-import Dropdown from '../dropdown/Dropdown.vue'
-import Input from '../input/Input.vue'
-import Button from '../button/Button.vue'
-import IconTime from '@privyid/persona-icon/vue/time/16.vue'
-import Time from '../time/Time.vue'
-import type { SizeVariant } from '../button'
-import { useVModel } from '../input'
-import type { TimeContext, TimeModel } from '../time'
-import { validateInterval } from '../time/utils'
-import type { PropType, VNode } from 'vue-demi'
-import {
-  ref, computed, onMounted,
-} from 'vue-demi'
-import { format, isDate } from 'date-fns'
-
-const props = defineProps({
-  modelValue: {
-    type   : [Date, Object] as PropType<Date | TimeModel>,
-    default: undefined,
-  },
-  size: {
-    type   : String as PropType<SizeVariant>,
-    default: 'md',
-  },
-  placeholder: {
-    type   : String,
-    default: '',
-  },
-  disabled: {
-    type   : Boolean,
-    default: undefined,
-  },
-  readonly: {
-    type   : Boolean,
-    default: undefined,
-  },
-  error: {
-    type   : Boolean,
-    default: undefined,
-  },
-  dismissable: {
-    type   : Boolean,
-    default: false,
-  },
-  dimissLabel: {
-    type   : String,
-    default: 'Cancel',
-  },
-  confirmLabel: {
-    type   : String,
-    default: 'Set',
-  },
-  timeSeparator: {
-    type   : String,
-    default: ':',
-  },
-  is12Hour: {
-    type   : Boolean,
-    default: false,
-  },
-  hourInterval: {
-    type     : Number,
-    default  : 1,
-    validator: (value: number, prop) => {
-      return validateInterval('hour', value, prop.is12Hour as boolean)
-    },
-  },
-  minuteInterval: {
-    type     : Number,
-    default  : 1,
-    validator: (value: number) => {
-      return validateInterval('minute', value)
-    },
-  },
-  min: {
-    type   : Date,
-    default: undefined,
-  },
-  max: {
-    type   : Date,
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [unknown],
-  'context': [TimeContext],
-  'change': [TimeContext],
-}>()
-
-const model  = useVModel(props)
-const isOpen = ref(false)
-const value  = ref('')
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (isOpen.value)
-    result.push('timepicker--open')
-
-  if (props.disabled)
-    result.push('timepicker--disabled')
-
-  if (props.readonly)
-    result.push('timepicker--readonly')
-
-  if (props.error)
-    result.push('timepicker--error', 'state--error')
-
-  return result
-})
-
-onMounted(() => {
-  if (!model.value)
-    return
-
-  if (isDate(model.value))
-    value.value = format(model.value as Date, props.is12Hour ? 'hh:mm a' : 'HH:mm')
-  else {
-    const { hh, mm, a } = model.value as TimeModel
-    const time          = `${hh}:${mm}`
-
-    value.value = props.is12Hour ? `${time} ${a || ''}` : time
-  }
-})
-
-function onFocus () {
-  if (!props.disabled && !props.readonly)
-    isOpen.value = true
-}
-
-function onTimeContext (context: TimeContext) {
-  onClose()
-
-  value.value = context.time
-  emit('context', context)
-}
-
-function onClose () {
-  isOpen.value = false
-}
-
-defineSlots<{
-  'footer'(props: {
-    confirm: () => void,
-    close: () => void,
-  }): VNode[], }>()
-</script>
-
-<style lang="postcss">
-.timepicker {
-  &__input {
-    @apply pr-8 truncate;
-  }
-
-  &__icon {
-    @apply transition-transform duration-150 text-muted pointer-events-none;
-    @apply dark:text-dark-muted;
-  }
-
-  > .dropdown__menu {
-    --p-dropdown-size: auto;
-    --p-dropdown-max-height: 100%;
-
-    @apply min-w-max max-h-min;
-  }
-}
-</style>

package/dist/components/toast/Toast.vue

@@ -1,269 +0,0 @@
-<template>
-  <div
-    data-testid="toast"
-    class="toast"
-    :class="toastClass"
-    v-bind="toastAttrs">
-    <div
-      v-if="toastIcon"
-      class="toast__icon"
-      data-testid="toast-icon"
-      :class="classIcon">
-      <component
-        :is="toastIcon" />
-    </div>
-    <div class="toast__body">
-      <div
-        v-p-md.inline="text || title"
-        data-testid="toast-text"
-        class="toast__text" />
-    </div>
-    <div
-      v-if="loading"
-      data-testid="toast-loading"
-      class="toast__loading">
-      <span
-        v-p-md.inline="loadingText"
-        data-testid="toast-loading-text" />
-      <SpinnerRinggo
-        v-if="loadingSpinner"
-        data-testid="toast-loading-spinner" />
-    </div>
-    <div
-      v-if="actions.length > 0"
-      class="toast__actions">
-      <template
-        v-for="(action, i) in actions"
-        :key="i">
-        <p-button
-          class="toast__action"
-          data-testid="toast-action"
-          v-bind="action.attrs"
-          :size="action.size ?? 'xs'"
-          :color="action.color"
-          :variant="action.variant ?? 'ghost'"
-          @click.prevent="onActionClick(action)">
-          <span v-p-md.inline="action.text" />
-        </p-button>
-      </template>
-    </div>
-    <div
-      v-if="dismissable"
-      data-testid="toast-close"
-      class="toast__close"
-      @click="close">
-      <IconClose />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type {
-  PropType,
-  Component,
-} from 'vue-demi'
-import {
-  computed,
-  h,
-} from 'vue-demi'
-import SpinnerRinggo from '../spinner/SpinnerRinggo.vue'
-import { vPMd } from '../markdown'
-import pButton from '../button/Button.vue'
-import IconClose from '@privyid/persona-icon/vue/close/16.vue'
-import type { ColorVariant } from '../button'
-import type { AdditionalAttr } from '../global/types'
-import type { ToastActionOption } from '.'
-import { useNotifyItem } from '../notify'
-
-const props = defineProps({
-  text: {
-    type   : String,
-    default: '',
-  },
-  /**
-   * @deprecated use `text` instead
-   */
-  title: {
-    type   : String,
-    default: '',
-  },
-  icon: {
-    type: [
-      String,
-      Object,
-      Function,
-    ] as PropType<string | Component>,
-    default: undefined,
-  },
-  iconColor: {
-    type   : String as PropType<ColorVariant>,
-    default: undefined,
-  },
-  toastAttrs: {
-    type   : Object as PropType<AdditionalAttr>,
-    default: undefined,
-  },
-  toastClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-  actions: {
-    type   : Array as PropType<ToastActionOption[]>,
-    default: () => ([]),
-  },
-  dismissable: {
-    type   : Boolean,
-    default: true,
-  },
-  loading: {
-    type   : Boolean,
-    default: false,
-  },
-  loadingText: {
-    type   : String,
-    default: '',
-  },
-  loadingSpinner: {
-    type   : Boolean,
-    default: true,
-  },
-})
-
-const notify = useNotifyItem()
-const emit   = defineEmits<{
-  'dismissed': [],
-}>()
-
-const classIcon = computed(() => {
-  const result: string[] = ['toast__icon--default']
-
-  if (props.iconColor)
-    result.push(`toast__icon--${props.iconColor}`)
-
-  return result
-})
-
-const toastIcon = computed(() => {
-  if (props.icon) {
-    if (typeof props.icon === 'string') {
-      return () => h('img', {
-        'src'        : props.icon,
-        'width'      : 16,
-        'height'     : 16,
-        'data-testid': 'toast-icon-image',
-      })
-    }
-
-    return props.icon
-  }
-})
-
-function close () {
-  notify.close()
-
-  emit('dismissed')
-}
-
-async function onActionClick (action: ToastActionOption) {
-  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">
-.toast {
-  --p-toast-icon-color-primary: theme(textColor.brand.accent.DEFAULT);
-  --p-toast-icon-color-primary-dark: theme(textColor.dark.brand.accent.DEFAULT);
-
-  /**
-  * global style
-  * of toast
-  */
-  @apply flex items-center shadow-xl rounded w-72 md:w-96 overflow-hidden bg-inverse px-4 py-3 space-x-2;
-  @apply dark:bg-dark-inverse;
-
-  &__icon,
-  &__close,
-  &__action {
-    @apply shrink-0;
-  }
-
-  &__icon {
-    @apply flex items-center justify-center;
-
-    &--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-toast-icon-color-primary)];
-      @apply dark:text-[color:var(--p-toast-icon-color-primary-dark)];
-    }
-
-    &--danger {
-      @apply text-danger;
-      @apply dark:text-danger;
-    }
-
-    + .toast__body {
-      @apply pl-0;
-    }
-  }
-
-  &__action {
-    @apply px-2;
-
-    &.btn {
-      &.btn--variant-ghost {
-        @apply text-dark-link;
-        @apply dark:text-link;
-      }
-
-      &.btn--variant-outline {
-        @apply text-dark-default;
-        @apply dark:text-default;
-      }
-    }
-  }
-
-  &__loading {
-    @apply flex items-center space-x-3 text-sm text-muted;
-    @apply dark:text-dark-muted;
-  }
-
-  &__close {
-    @apply shrink-0 cursor-pointer text-muted/70 hover:text-muted;
-    @apply dark:text-dark-muted/70 dark:hover:text-dark-muted;
-  }
-
-  &__body {
-    @apply grow space-y-2 flex flex-col overflow-hidden;
-  }
-
-  &__text {
-    @apply text-sm font-medium leading-[1.75] text-on-emphasis line-clamp-2;
-    @apply dark:text-dark-on-emphasis;
-  }
-}
-
-</style>

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

@@ -1,50 +0,0 @@
-import type { HTMLAttributes, Component } from 'vue-demi';
-import type { NotifyInstance, NotifyOption } from '../notify';
-import type { ColorVariant, StyleVariant as ButtonStyleVariant, ColorVariant as ButtonColorVariant, SizeVariant as ButtonSizeVariant } from '../button';
-import type { AdditionalAttr } from '../global/types';
-import type { PopupActionOption, PopupStyleVariant, PopupTypeVariant } from '../popup';
-import type { RequireAtLeastOne } from 'type-fest';
-import type Toast from './Toast.vue';
-export interface ToastActionOption extends PopupActionOption {
-    variant?: ButtonStyleVariant;
-    color?: ButtonColorVariant;
-    size?: ButtonSizeVariant;
-}
-interface Option extends Omit<NotifyOption, 'component'> {
-    text?: string;
-    icon?: string | Component;
-    iconColor?: ColorVariant;
-    toastClass?: HTMLAttributes['class'];
-    toastAttrs?: AdditionalAttr;
-    dismissable?: boolean;
-    actions?: ToastActionOption[];
-    /**
-     * @deprecated `title` on toast was deprecated, use `popup()` instead.
-     */
-    title?: string;
-    /**
-    * @deprecated `type` on toast was deprecated, use `popup()` instead.
-    */
-    type?: PopupTypeVariant;
-    /**
-    * @deprecated `variant` on toast was deprecated, use `popup()` instead
-    */
-    variant?: PopupStyleVariant;
-    loading?: boolean;
-    loadingText?: string;
-    loadingSpinner?: boolean;
-}
-export type ToastOption = RequireAtLeastOne<Option, 'title' | 'text'>;
-export type ToastInstance = NotifyInstance<typeof Toast>;
-export interface ToastProgressInstance extends ToastInstance {
-    setProgress: (text: string) => void;
-}
-declare function showToast(text: string): Promise<ToastInstance>;
-declare function showToast(option: ToastOption): Promise<ToastInstance>;
-export type ToastProgressOption = Omit<ToastOption, 'title' | 'type' | 'variant' | 'duration' | 'loading' | 'dismissable' | 'actions'>;
-declare function showToastProgress(option: string, loadingText?: string): Promise<ToastProgressInstance>;
-declare function showToastProgress(option: ToastProgressOption): Promise<ToastProgressInstance>;
-declare const _default: typeof showToast & {
-    withProgress: typeof showToastProgress;
-};
-export default _default;

package/dist/components/toast/index.mjs

@@ -1,44 +0,0 @@
-import {
-  markRaw
-} from "vue-demi";
-import { showNotify } from "../notify/index.mjs";
-import showPopup from "../popup/index.mjs";
-import defu from "defu";
-async function showToast(option) {
-  if (typeof option === "string")
-    return await showToast({ text: option });
-  if (option.type ?? option.variant) {
-    if (option.type)
-      console.warn("`type` on toast was deprecated, use `popup()` instead.");
-    if (option.variant)
-      console.warn("`variant` on toast was deprecated, use `popup()` instead.");
-    return await showPopup({
-      ...option,
-      popupClass: option.toastClass,
-      popupAttrs: option.toastAttrs
-    });
-  }
-  if (option.title)
-    console.warn("`title` on toast was deprecated, use `text` or `popup()` instead.");
-  const { default: pToast } = await import("./Toast.vue");
-  const instance = await showNotify({
-    component: markRaw(pToast),
-    props: option,
-    duration: option.duration,
-    position: option.position
-  });
-  return instance;
-}
-async function showToastProgress(option, loadingText) {
-  const opts = typeof option === "string" ? { text: option, loadingText } : option;
-  const instance = await showToast(defu({
-    loading: true,
-    duration: -1,
-    dismissable: false
-  }, opts));
-  function setProgress(text) {
-    instance.update({ props: { loadingText: text } });
-  }
-  return Object.assign(instance, { setProgress });
-}
-export default Object.assign(showToast, { withProgress: showToastProgress });