@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/toast/Toast.vue

@@ -1,247 +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 setup>
-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 { useNotifyItem } from "../notify";
-const props = defineProps({
-  text: {
-    type: String,
-    default: ""
-  },
-  /**
-   * @deprecated use `text` instead
-   */
-  title: {
-    type: String,
-    default: ""
-  },
-  icon: {
-    type: [
-      String,
-      Object,
-      Function
-    ],
-    default: void 0
-  },
-  iconColor: {
-    type: String,
-    default: void 0
-  },
-  toastAttrs: {
-    type: Object,
-    default: void 0
-  },
-  toastClass: {
-    type: [
-      String,
-      Array,
-      Object
-    ],
-    default: void 0
-  },
-  actions: {
-    type: Array,
-    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 = ["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) {
-  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/Toast.vue.d.ts

@@ -1,118 +0,0 @@
-import type { PropType, Component } from 'vue-demi';
-import type { ColorVariant } from '../button';
-import type { AdditionalAttr } from '../global/types';
-import type { ToastActionOption } from '.';
-declare const _default: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * @deprecated use `text` instead
-     */
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    icon: {
-        type: PropType<string | Component>;
-        default: undefined;
-    };
-    iconColor: {
-        type: PropType<ColorVariant>;
-        default: undefined;
-    };
-    toastAttrs: {
-        type: PropType<AdditionalAttr>;
-        default: undefined;
-    };
-    toastClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    actions: {
-        type: PropType<ToastActionOption[]>;
-        default: () => never[];
-    };
-    dismissable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loadingText: {
-        type: StringConstructor;
-        default: string;
-    };
-    loadingSpinner: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    dismissed: () => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * @deprecated use `text` instead
-     */
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    icon: {
-        type: PropType<string | Component>;
-        default: undefined;
-    };
-    iconColor: {
-        type: PropType<ColorVariant>;
-        default: undefined;
-    };
-    toastAttrs: {
-        type: PropType<AdditionalAttr>;
-        default: undefined;
-    };
-    toastClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    actions: {
-        type: PropType<ToastActionOption[]>;
-        default: () => never[];
-    };
-    dismissable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loadingText: {
-        type: StringConstructor;
-        default: string;
-    };
-    loadingSpinner: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    onDismissed?: (() => any) | undefined;
-}>, {
-    text: string;
-    title: string;
-    icon: string | Component;
-    loading: boolean;
-    dismissable: boolean;
-    loadingText: string;
-    iconColor: ColorVariant;
-    actions: ToastActionOption[];
-    toastAttrs: AdditionalAttr;
-    toastClass: string | unknown[] | Record<string, any>;
-    loadingSpinner: boolean;
-}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
-export default _default;

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;