@privyid/persona 1.2.1 → 1.2.2-dev.2

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

@@ -0,0 +1,433 @@
+<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";
+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

@@ -0,0 +1,124 @@
+import type { PropType, VNode } from 'vue';
+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").DefineComponent<import("vue").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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: boolean) => void;
+    close: (args_0: Event) => void;
+    show: () => void;
+    hide: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").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;
+    backgroundUrl: string;
+    backgroundDarkUrl: string;
+    align: AlignVariant;
+    message: string;
+    state: StyleVariant;
+}, {}, {}, {}, string, import("vue").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/index.d.ts

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