@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/label/Label.vue

@@ -0,0 +1,249 @@
+<template>
+  <div
+    v-if="show"
+    data-testid="label"
+    :class="classNames">
+    <Dot
+      v-if="variant === 'dot'"
+      data-testid="dot"
+      :color="color" /> <slot />
+
+    <span
+      v-if="dismissable"
+      data-testid="label-dismiss"
+      class="label__dismiss"
+      @click="close">
+      <IconClose />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import Dot from "../dot/Dot.vue";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
+const props = defineProps({
+  color: {
+    type: String,
+    default: "default"
+  },
+  variant: {
+    type: String,
+    default: "default"
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  dismissable: {
+    type: Boolean,
+    default: false
+  }
+});
+const emit = defineEmits(["dismissed"]);
+const show = ref(true);
+const classNames = computed(() => {
+  const result = ["label"];
+  if (props.color)
+    result.push(`label--${props.color}`);
+  if (props.variant)
+    result.push(`label--variant-${props.variant}`);
+  if (props.size)
+    result.push(`label--${props.size}`);
+  return result;
+});
+function close(event) {
+  emit("dismissed", event);
+  if (!event.defaultPrevented)
+    show.value = false;
+}
+</script>
+
+<style lang="postcss">
+/**
+* Component Name: Label
+* Component URI : https://www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=308%3A15173
+* Date Created  : June 2, 2022
+* Last Update   : June 24, 2022
+*/
+
+.label {
+  --p-color-primary-light: lighten(theme(colors.brand.accent.DEFAULT), 40%);
+  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent.DEFAULT), 40%);
+
+  @apply inline-flex items-center border border-transparent;
+
+  &:not(.label--variant-dot) {
+    @apply space-x-[6px];
+  }
+
+  /**
+  * Add dismiss button
+  */
+  &__dismiss {
+    @apply border-l ml-2 pl-1.5 hover:cursor-pointer border-subtle-alpha text-default/30 hover:text-default/50;
+    @apply dark:border-dark-subtle-alpha dark:text-dark-default/30 hover:dark:text-dark-default/50;
+  }
+
+  /**
+  * Provide size of label
+  * There are lg, md,
+  * sm and xs
+  */
+  &--lg {
+    @apply text-base px-3 py-1 rounded;
+  }
+
+  &--md {
+    @apply text-sm px-2 py-[2px] rounded-sm;
+  }
+
+  &--sm {
+    @apply text-xs px-[6px] py-[2px] rounded-xs;
+  }
+
+  &--xs {
+    @apply px-1 py-0 text-tn rounded-tn;
+  }
+
+  /**
+  * Set default label with
+  * color variant
+  */
+  &--variant-default {
+    &:not(&.label--default) {
+      @apply text-state-emphasis;
+      @apply dark:text-dark-state-emphasis;
+    }
+
+    &.label {
+      &--default {
+        --p-label-bg-variant-default: theme(backgroundColor.inverse);
+        --p-label-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
+        --p-label-text-variant-default: theme(textColor.on-emphasis);
+        --p-label-text-dark-variant-default: theme(textColor.dark.on-emphasis);
+
+        &:not([class^='bg-'], [class*='bg-']) {
+          @apply bg-[color:var(--p-label-bg-variant-default)];
+          @apply dark:bg-[color:var(--p-label-bg-dark-variant-default)];
+        }
+
+        &:not([class^='text-'], [class*='text-']) {
+          @apply text-[color:var(--p-label-text-variant-default)];
+          @apply dark:text-[color:var(--p-label-text-dark-variant-default)];
+        }
+
+        .label__dismiss {
+          @apply border-default/30 text-on-emphasis/30 hover:text-on-emphasis/50;
+          @apply dark:border-dark-default/30 dark:text-dark-on-emphasis/30 hover:dark:text-dark-on-emphasis/50;
+        }
+      }
+
+      &--primary {
+        @apply bg-brand-accent;
+        @apply dark:bg-dark-brand-accent;
+      }
+
+      &--info {
+        @apply bg-info-emphasis;
+        @apply dark:bg-dark-info-emphasis;
+      }
+
+      &--success {
+        @apply bg-success-emphasis;
+        @apply dark:bg-dark-success-emphasis;
+      }
+
+      &--warning {
+        @apply bg-warning-emphasis;
+        @apply dark:bg-dark-warning-emphasis;
+      }
+
+      &--danger {
+        @apply bg-danger-emphasis;
+        @apply dark:bg-dark-danger-emphasis;
+      }
+    }
+  }
+
+  /**
+  * Provide light variant
+  * in all color
+  */
+  &--variant-light {
+    &.label {
+      &--default {
+        @apply bg-emphasis-alpha text-subtle;
+        @apply dark:bg-dark-emphasis-alpha dark:text-dark-subtle;
+      }
+
+      &--primary {
+        @apply bg-[color:var(--p-color-primary-light)] text-brand-accent;
+        @apply dark:bg-[color:var(--p-color-dark-primary-light)] dark:text-dark-brand-accent;
+      }
+
+      &--info {
+        @apply bg-info text-info;
+        @apply dark:bg-dark-info dark:text-dark-info;
+      }
+
+      &--success {
+        @apply bg-success text-success;
+        @apply dark:bg-dark-success dark:text-dark-success;
+      }
+
+      &--warning {
+        @apply bg-warning text-warning;
+        @apply dark:bg-dark-warning dark:text-dark-warning;
+      }
+
+      &--danger {
+        @apply bg-danger text-danger;
+        @apply dark:bg-dark-danger dark:text-dark-danger;
+      }
+    }
+  }
+
+  /**
+  * Provide dot variant
+  * in all color
+  */
+  &--variant-dot {
+    --p-label-dot-default: theme(backgroundColor.inverse);
+    --p-label-dot-dark-default: theme(backgroundColor.dark.inverse);
+
+    .dot--variant-default {
+      --p-dot-bg-default: var(--p-label-dot-default);
+      --p-dot-bg-dark-default: var(--p-label-dot-dark-default);
+    }
+
+    /**
+    * Dot variant have
+    * white background and bordered
+    */
+    @apply bg-default text-default border-default;
+    @apply dark:bg-dark-default dark:text-dark-default dark:border-dark-default;
+
+    &.label {
+      &--lg,
+      &--md {
+        .dot {
+          @apply mr-2;
+        }
+      }
+
+      &--sm {
+        .dot {
+          @apply mr-1.5;
+        }
+      }
+
+      &--xs {
+        .dot {
+          @apply mr-1;
+        }
+      }
+    }
+  }
+}
+</style>

package/dist/components/label/Label.vue.d.ts

@@ -0,0 +1,63 @@
+import type { PropType } from 'vue';
+import type { StyleVariant } from '.';
+import type { ColorVariant, SizeVariant } from '../button';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismissed: (args_0: MouseEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    variant: {
+        type: PropType<StyleVariant>;
+        default: string;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    dismissable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onDismissed?: ((args_0: MouseEvent) => any) | undefined;
+}>, {
+    size: SizeVariant;
+    variant: StyleVariant;
+    dismissable: boolean;
+    color: ColorVariant;
+}, {}, {}, {}, 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/label/index.d.ts

@@ -0,0 +1 @@
+export type StyleVariant = 'default' | 'light' | 'dot';

package/dist/components/list-group/ListGroup.vue

@@ -0,0 +1,73 @@
+<template>
+  <span
+    class="list-group"
+    data-testid="list-group"
+    :class="classNames">
+    <slot />
+  </span>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  flush: {
+    type: Boolean,
+    default: false
+  },
+  horizontal: {
+    type: Boolean,
+    default: false
+  },
+  borderless: {
+    type: Boolean,
+    default: false
+  },
+  rounded: {
+    type: Boolean,
+    default: false
+  }
+});
+const classNames = computed(() => {
+  const result = [""];
+  if (props.flush)
+    result.push("list-group--flush");
+  if (props.horizontal)
+    result.push("list-group--horizontal");
+  if (props.borderless)
+    result.push("list-group--borderless");
+  if (props.rounded)
+    result.push("list-group--rounded");
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.list-group {
+  --p-list-group-bg: theme(backgroundColor.default.DEFAULT);
+  --p-list-group-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+
+  @apply flex flex-col max-w-full divide-y divide-default border border-default rounded-md bg-[color:var(--p-list-group-bg)];
+  @apply dark:border-dark-default dark:divide-dark-default dark:bg-[color:var(--p-list-group-bg-dark)];
+
+  &--flush {
+    @apply border-0 rounded-none;
+  }
+
+  &--horizontal {
+    @apply flex-row divide-x divide-y-0;
+  }
+
+  &--borderless {
+    @apply border-0 divide-y-0;
+  }
+
+  &--rounded {
+    @apply divide-y-0;
+
+    > :not([hidden]) ~ :not([hidden]),
+    > :first-child {
+      @apply rounded-md;
+    }
+  }
+}
+</style>

package/dist/components/list-group/ListGroup.vue.d.ts

@@ -0,0 +1,56 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    flush: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderless: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    flush: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderless: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    flush: boolean;
+    horizontal: boolean;
+    rounded: boolean;
+    borderless: boolean;
+}, {}, {}, {}, 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/list-group/ListGroupItem.vue

@@ -0,0 +1,79 @@
+<template>
+  <component
+    :is="elementNames"
+    data-testid="list-group-item"
+    class="list-group__item"
+    :aria-current="active"
+    :aria-disabled="disabled"
+    :class="classNames">
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed, resolveComponent } from "vue";
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  element: {
+    type: String,
+    default: "span"
+  }
+});
+const classNames = computed(() => {
+  const result = [""];
+  if (props.active)
+    result.push("list-group__item--active");
+  if (props.disabled)
+    result.push("list-group__item--disabled");
+  return result;
+});
+const elementNames = computed(() => {
+  return props.element === "link" ? resolveComponent("nuxt-link") : props.element;
+});
+</script>
+
+<style lang="postcss">
+.list-group {
+  &__item {
+    --p-list-item-bg: theme(backgroundColor.default.DEFAULT);
+    --p-list-item-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+    --p-list-item-bg-active: theme(backgroundColor.default.alpha);
+    --p-list-item-bg-active-dark: theme(backgroundColor.dark.default.alpha);
+    --p-list-item-padding-x: theme(spacing.4);
+    --p-list-item-padding-y: theme(spacing.2);
+
+    @apply relative block px-[var(--p-list-item-padding-x)] py-[--p-list-item-padding-y] bg-[color:var(--p-list-item-bg)] first:rounded-t-md last:rounded-b-md text-default;
+    @apply dark:bg-[color:var(--p-list-item-bg-dark)] dark:text-dark-default;
+
+    .list-group--flush & {
+      @apply first:rounded-none last:rounded-none;
+    }
+
+    .list-group--horizontal & {
+      @apply first:rounded-l-md last:rounded-r-md first:rounded-tr-none last:rounded-bl-none;
+    }
+
+    a& {
+      @apply no-underline hover:no-underline cursor-pointer text-default hover:bg-default-alpha;
+      @apply dark:text-dark-default dark:hover:bg-dark-default-alpha;
+    }
+
+    &:is(&--active) {
+      @apply bg-[color:var(--p-list-item-bg-active)] cursor-default;
+      @apply dark:bg-[color:var(--p-list-item-bg-active-dark)];
+    }
+
+    &:is(&--disabled) {
+      @apply cursor-default bg-[color:var(--p-list-item-bg)/50] hover:bg-[color:var(--p-list-item-bg)/50] text-subtlest hover:text-subtlest;
+      @apply dark:bg-[color:var(--p-list-item-bg-dark)/50] dark:hover:bg-[color:var(--p-list-item-bg-dark)/50] dark:text-dark-subtlest dark:hover:text-dark-subtlest;
+    }
+  }
+}
+</style>

package/dist/components/list-group/ListGroupItem.vue.d.ts

@@ -0,0 +1,49 @@
+import type { PropType } from 'vue';
+import type { ElementVariant } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    element: {
+        type: PropType<ElementVariant>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    active: boolean;
+    element: ElementVariant;
+}, {}, {}, {}, 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/list-group/index.d.ts

@@ -0,0 +1 @@
+export type ElementVariant = 'div' | 'span' | 'link';

package/dist/components/main/Main.vue

@@ -0,0 +1,66 @@
+<template>
+  <main class="main">
+    <slot />
+  </main>
+</template>
+
+<style lang="postcss">
+.main {
+  --p-spacer: 1rem;
+
+  /**
+  * Heading
+  */
+  h1, h2, h3, h4, h5, h6 {
+    &:not(.dropdown__header, .accordion__item__title, .card__header__title, .tour__title) {
+      --p-heading-margin-bottom: calc(var(--p-spacer) * .5);
+      @apply mb-[var(--p-heading-margin-bottom)];
+    }
+  }
+
+  /**
+  * Permalink
+  */
+  a {
+    &:not(.navbar__brand, .sidebar__brand, .dropdown__item, .list-group__item, .btn, .nav__link, .breadcrumbs__item__link) {
+      --p-color-link-hover: darken(theme(textColor.link.DEFAULT), 5%);
+      --p-color-dark-link-hover: darken(theme(textColor.link.DEFAULT), 5%);
+
+      @apply underline text-link hover:text-[color:var(--p-color-link-hover)];
+      @apply dark:text-dark-link hover:dark:text-[color:var(--p-color-dark-link-hover)];
+    }
+  }
+
+  /**
+  * Paragraph
+  */
+  p {
+    --p-paragraph-margin-bottom: var(--p-spacer);
+    @apply mt-0 mb-[var(--p-paragraph-margin-bottom)] text-base text-default;
+    @apply dark:text-dark-default;
+  }
+
+  /**
+  * Small
+  */
+  small {
+    @apply text-tn;
+  }
+
+  /**
+  * Strong
+  */
+  strong {
+    @apply font-bold;
+  }
+
+  /**
+  * Caption
+  */
+  caption {
+    @apply text-xs text-muted;
+    @apply dark:text-dark-muted;
+  }
+}
+
+</style>

package/dist/components/main/Main.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, 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/markdown/index.d.ts

@@ -0,0 +1,29 @@
+import type { Directive } from 'vue';
+import type { MarkedOptions } from 'marked';
+export interface MarkdownOption {
+    /**
+     * Use inline parsing
+     * @link https://marked.js.org/using_advanced#inline
+     */
+    inline: boolean;
+    /**
+     * Escape value char before encode
+     */
+    escape: boolean;
+    /**
+     * Disabled sanitize HTML result
+     */
+    unsecure: boolean;
+    /**
+     * marked options
+     */
+    marked: MarkedOptions;
+}
+/**
+ * Parse markdown to html string
+ * @param text markdown string
+ * @param options parsing options
+ */
+export declare function markdown(text?: string, _option?: Partial<MarkdownOption>): string;
+export declare const pMd: Directive<HTMLElement, string>;
+export declare const vPMd: import("vue").FunctionDirective<HTMLElement, string, string, string>;