@privyid/persona 1.2.0 → 1.2.1

package/dist/components/contextual-bar/ContextualBar.vue

@@ -1,433 +0,0 @@
-<template>
-  <transition
-    name="fade"
-    appear
-    @enter="onEnter"
-    @after-leave="onLeave">
-    <div
-      v-show="model"
-      ref="root"
-      data-testid="contextual-bar"
-      class="contextual-bar"
-      v-bind="$attrs"
-      :class="classNames"
-      :style="styleBg">
-      <div
-        data-testid="contextual-bar-wrapper"
-        class="contextual-bar__wrapper"
-        :class="{
-  'contextual-bar__wrapper--with-message': message || $slots.message,
-  'contextual-bar__wrapper--with-action': $slots.action
-}">
-        <span
-          v-if="$slots.icon"
-          data-testid="contextual-bar-icon"
-          class="contextual-bar__icon">
-          <slot name="icon" />
-        </span>
-        <div class="contextual-bar__content-wrapper">
-          <div class="contextual-bar__content">
-            <div
-              v-if="title || $slots.title"
-              data-testid="contextual-bar-title"
-              class="contextual-bar__content__title">
-              <slot name="title">
-                <p-subheading v-if="message">
-                  {{ title }}
-                </p-subheading>
-                <template v-else>
-                  {{ title }}
-                </template>
-              </slot>
-            </div>
-            <div
-              v-if="message || $slots.message"
-              data-testid="contextual-bar-message"
-              class="contextual-bar__content__message">
-              <p-caption>
-                <slot name="message">
-                  {{ message }}
-                </slot>
-              </p-caption>
-            </div>
-          </div>
-          <div
-            v-if="$slots.action"
-            data-testid="contextual-bar-action"
-            class="contextual-bar__action">
-            <slot name="action" />
-          </div>
-        </div>
-      </div>
-      <div
-        v-if="dismissable"
-        data-testid="contextual-bar-close"
-        class="contextual-bar__close"
-        @click="close">
-        <IconClose />
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script setup>
-import {
-  ref,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-  watchEffect
-} from "vue-demi";
-import { useVModel } from "../input";
-import pCaption from "../caption/Caption.vue";
-import pSubheading from "../subheading/Subheading.vue";
-import IconClose from "@privyid/persona-icon/vue/close/16.vue";
-import { useElementSize } from "@vueuse/core";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  state: {
-    type: String,
-    default: "info"
-  },
-  backgroundUrl: {
-    type: String,
-    default: void 0
-  },
-  backgroundDarkUrl: {
-    type: String,
-    default: void 0
-  },
-  dismissable: {
-    type: Boolean,
-    default: true
-  },
-  title: {
-    type: String,
-    default: void 0
-  },
-  message: {
-    type: String,
-    default: void 0
-  },
-  align: {
-    type: String,
-    default: "left"
-  },
-  modelValue: {
-    type: Boolean,
-    default: true
-  },
-  fixed: {
-    type: Boolean,
-    default: false
-  }
-});
-const emit = defineEmits(["update:modelValue", "close", "show", "hide"]);
-const model = useVModel(props);
-const root = ref();
-const { height } = useElementSize(root, void 0, { box: "border-box" });
-function close(event) {
-  emit("close", event);
-  if (!event.defaultPrevented)
-    model.value = false;
-}
-const isFixed = computed(() => {
-  return props.fixed;
-});
-const classNames = computed(() => {
-  const result = [""];
-  if (props.state)
-    result.push(`contextual-bar--${props.state}`);
-  if (props.align)
-    result.push(`contextual-bar--align-${props.align}`);
-  if (props.backgroundUrl)
-    result.push("contextual-bar--background-image");
-  if (props.fixed)
-    result.push("contextual-bar--fixed");
-  return result;
-});
-const styleBg = computed(() => {
-  const result = {};
-  if (props.backgroundUrl) {
-    result["--p-contextual-bar-bg-image"] = `url("${props.backgroundUrl}")`;
-    result["--p-contextual-bar-bg-dark-image"] = props.backgroundDarkUrl ? `url("${props.backgroundDarkUrl}")` : `url("${props.backgroundUrl}")`;
-  }
-  return result;
-});
-function onEnter() {
-  document.body.classList.add("contextual-bar__body--active");
-  if (isFixed.value) {
-    document.body.style.setProperty("margin-top", "var(--p-contextual-bar-height)");
-    document.body.classList.add("contextual-bar__body--fixed-active");
-  }
-  emit("show");
-}
-function onLeave() {
-  document.body.classList.remove("contextual-bar__body--active");
-  if (isFixed.value) {
-    document.body.style.removeProperty("margin-top");
-    document.body.classList.remove("contextual-bar__body--fixed-active");
-  }
-  emit("hide");
-}
-watchEffect((onCleanup) => {
-  if (typeof document !== "undefined" && props.fixed && model.value) {
-    document.body.style.setProperty("--p-contextual-bar-height", `${height.value}px`);
-    onCleanup(() => {
-      document.body.style.removeProperty("--p-contextual-bar-height");
-    });
-  }
-});
-onMounted(() => {
-  document.body.classList.add("contextual-bar__body");
-});
-onBeforeUnmount(() => {
-  document.body.classList.remove("contextual-bar__body");
-  if (model.value)
-    onLeave();
-});
-defineSlots();
-</script>
-
-<style lang="postcss">
-.contextual-bar {
-  --p-contextual-bar-bg-image: none;
-  --p-contextual-bar-bg-dark-image: none;
-  --p-contextual-bar-fixed-top: theme(spacing.0);
-
-  @apply p-6 w-full max-w-[100vw] transition-all;
-
-  &:not(&--fixed) {
-    @apply relative;
-  }
-
-  &__body {
-    @apply transition-all;
-
-    &--active {
-      @apply transition-all;
-
-      &:not(&-hide) {
-        .navbar--fixed {
-          @apply mt-[var(--p-contextual-bar-height)] transition-all;
-        }
-
-        .sidebar--fixed {
-          @apply mt-[var(--p-contextual-bar-height)] transition-all;
-        }
-      }
-    }
-
-    &--fixed-active {
-      .navbar--fixed {
-        @apply mt-[var(--p-contextual-bar-height)] transition-all;
-      }
-
-      .sidebar--fixed {
-        @apply mt-[var(--p-contextual-bar-height)] transition-all;
-      }
-    }
-  }
-
-  &__wrapper {
-    @apply px-4 md:px-24 flex-grow flex items-center mr-3 md:mr-9;
-
-    &--with-message {
-      @apply items-start;
-    }
-
-    &--with-action {
-      @apply items-center;
-
-      &.contextual-bar__wrapper--with-message {
-        .contextual-bar__icon {
-          @apply self-start;
-        }
-      }
-    }
-  }
-
-  /**
-  * Custom background image
-  * are available
-  */
-  &--background-image {
-    @apply bg-no-repeat bg-cover bg-[top_center] bg-[image:var(--p-contextual-bar-bg-image)];
-    @apply dark:bg-[image:var(--p-contextual-bar-bg-dark-image)]
-  }
-
-  /**
-  * Contextualbar alignment:
-  * left, center and right
-  */
-  &&--align-left {
-    .contextual-bar__wrapper {
-      @apply justify-start text-left;
-    }
-  }
-
-  &&--align-center {
-    .contextual-bar__wrapper {
-      @apply justify-center text-center;
-
-      &--with-action {
-        .contextual-bar__content {
-          @apply text-left;
-        }
-      }
-    }
-
-    .contextual-bar__action {
-      @apply ml-0;
-    }
-  }
-
-  &&--align-right {
-    .contextual-bar__wrapper {
-      @apply justify-end text-right;
-
-      &--with-action {
-        .contextual-bar__content {
-          @apply text-left;
-        }
-        .contextual-bar__action {
-          @apply ml-0;
-        }
-      }
-    }
-  }
-
-  &&--align-center,
-  &&--align-right {
-    .contextual-bar__wrapper {
-      &--with-action {
-        @apply space-gap-3;
-
-        .contextual-bar__icon {
-          @apply mr-0;
-        }
-      }
-    }
-
-    .contextual-bar__content {
-      @apply grow-0;
-    }
-  }
-
-  /**
-  * Contextualbar body
-  * content
-  */
-  &__content-wrapper {
-    @apply flex-grow flex flex-col md:flex-row md:items-center;
-  }
-
-  &__content {
-    @apply flex flex-col flex-grow flex-shrink-0;
-
-    &__message {
-      .caption {
-        @apply text-subtle;
-        @apply dark:text-dark-subtle;
-      }
-    }
-
-    &__title {
-      @apply text-base;
-    }
-  }
-
-  &__action {
-    @apply flex shrink-0 ml-auto space-gap-3 pt-4 md:pt-0;
-  }
-
-  &__icon {
-    @apply relative mr-4 shrink;
-
-    img {
-      @apply max-w-[20px] w-auto;
-    }
-  }
-
-  /**
-  * Dismiss button of
-  * contextualbar
-  */
-  &__close {
-    @apply absolute right-6 top-1/2 -translate-y-1/2 cursor-pointer text-default/30 hover:text-default/50;
-  }
-
-  /**
-  * Dismiss button stay
-  * in light mode when
-  * has background-image
-  */
-  &:not(&--background-image) {
-    .contextual-bar__close {
-      @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
-    }
-  }
-
-  /**
-  * Contextualbar has 4 state
-  * variant: error, warning, info
-  * and neutral
-  */
-  &&--info {
-    @apply bg-ground text-default;
-    @apply dark:bg-dark-ground dark:text-dark-default;
-
-    .contextual-bar {
-      &__icon {
-        @apply text-info;
-        @apply dark:text-dark-info;
-      }
-    }
-  }
-
-  &&--error,
-  &&--warning,
-  &&--neutral {
-    @apply text-state-emphasis;
-    @apply dark:text-dark-state-emphasis;
-  }
-
-  &&--error {
-    @apply bg-danger-emphasis;
-    @apply dark:bg-dark-danger-emphasis;
-
-    .contextual-bar__close {
-      @apply text-danger hover:text-danger/50;
-      @apply dark:text-dark-danger dark:hover:text-dark-danger/50;
-    }
-  }
-
-  &&--warning {
-    @apply bg-warning-emphasis;
-    @apply dark:bg-dark-warning-emphasis;
-
-    .contextual-bar__close {
-      @apply text-warning hover:text-warning/50;
-      @apply dark:text-dark-warning;
-    }
-  }
-
-  &&--neutral {
-    @apply bg-inverse text-on-emphasis;
-    @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
-
-    .contextual-bar__close {
-      @apply text-on-emphasis/30 hover:text-on-emphasis/50;
-      @apply dark:text-dark-on-emphasis/30 hover:dark:text-dark-on-emphasis/50;
-    }
-  }
-
-  /**
-  * Contextualbar with
-  * fixed-top position
-  */
-  &&--fixed {
-    @apply fixed z-50 top-[var(--p-contextual-bar-fixed-top)] left-0;
-  }
-}
-</style>

package/dist/components/contextual-bar/ContextualBar.vue.d.ts

@@ -1,124 +0,0 @@
-import type { PropType, VNode } from 'vue-demi';
-import type { AlignVariant } from '../nav';
-import type { StyleVariant } from '.';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        icon(): VNode[];
-        title(): VNode[];
-        message(): VNode[];
-        action(): VNode[];
-    }> & {
-        icon(): VNode[];
-        title(): VNode[];
-        message(): VNode[];
-        action(): VNode[];
-    };
-    refs: {
-        root: HTMLDivElement;
-    };
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
-    state: {
-        type: PropType<StyleVariant>;
-        default: string;
-    };
-    backgroundUrl: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    backgroundDarkUrl: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    dismissable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    message: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    align: {
-        type: PropType<AlignVariant>;
-        default: string;
-    };
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    fixed: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: boolean) => void;
-    close: (args_0: Event) => void;
-    show: () => void;
-    hide: () => void;
-}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    state: {
-        type: PropType<StyleVariant>;
-        default: string;
-    };
-    backgroundUrl: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    backgroundDarkUrl: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    dismissable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    title: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    message: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    align: {
-        type: PropType<AlignVariant>;
-        default: string;
-    };
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    fixed: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
-    onClose?: ((args_0: Event) => any) | undefined;
-    onShow?: (() => any) | undefined;
-    onHide?: (() => any) | undefined;
-}>, {
-    fixed: boolean;
-    title: string;
-    modelValue: boolean;
-    dismissable: boolean;
-    align: AlignVariant;
-    message: string;
-    backgroundUrl: string;
-    backgroundDarkUrl: string;
-    state: StyleVariant;
-}, {}, {}, {}, string, import("vue-demi").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/contextual-bar/__mocks__/use-element-bounding.d.ts

@@ -1,5 +0,0 @@
-export declare const height: import("vue-demi").Ref<number, number>;
-export declare function useElementBounding(): {
-    height: import("vue-demi").Ref<number, number>;
-};
-export declare function simulateHeightChanged(newHeight: number): Promise<void>;

package/dist/components/contextual-bar/__mocks__/use-element-bounding.mjs

@@ -1,10 +0,0 @@
-import { nextTick, ref } from "vue-demi";
-export const height = ref(0);
-export function useElementBounding() {
-  return { height };
-}
-export async function simulateHeightChanged(newHeight) {
-  height.value = newHeight;
-  await nextTick();
-  await nextTick();
-}

package/dist/components/contextual-bar/index.d.ts

@@ -1 +0,0 @@
-export type StyleVariant = 'error' | 'warning' | 'info' | 'neutral';