@privyid/persona 1.2.1 → 1.2.2-dev.1

package/dist/components/tabs/Tab.vue

@@ -0,0 +1,26 @@
+<template>
+  <section
+    data-testid="tab-panel"
+    class="tab__panel">
+    <div
+      data-testid="tab-content"
+      class="tab__content">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+defineOptions({ name: "Tab" });
+defineSlots();
+</script>

package/dist/components/tabs/Tab.vue.d.ts

@@ -0,0 +1,45 @@
+import type { VNode } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        title(): VNode[];
+        icon(): VNode[];
+        default(): VNode[];
+    }> & {
+        title(): VNode[];
+        icon(): VNode[];
+        default(): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    disabled: 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/tabs/TabContent.vue

@@ -0,0 +1,53 @@
+<script>
+import {
+  Transition,
+  KeepAlive,
+  h,
+  ref,
+  watch,
+  defineComponent
+} from "vue";
+import { findAllChildren, toBoolean } from "../utils/vnode";
+import { useToNumber } from "@vueuse/core";
+export default defineComponent({
+  props: {
+    active: {
+      type: [Number, String],
+      required: true
+    },
+    keepAlive: {
+      type: Boolean,
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots }) {
+    const transition = ref(props.vertical ? "slide-top" : "slide-left");
+    const active = useToNumber(() => props.active, { nanToZero: true });
+    watch(() => props.active, (value, last) => {
+      transition.value = value < last ? props.vertical ? "slide-bottom" : "slide-right" : props.vertical ? "slide-top" : "slide-left";
+    });
+    return () => {
+      const tab = findAllChildren(slots.default(), "Tab").map((vnode, index) => {
+        const isDisabled = toBoolean(vnode.props?.disabled);
+        const isActive = index === props.active && !isDisabled;
+        return h(vnode, {
+          key: index,
+          dataTabid: index,
+          style: { display: isActive ? "block" : "none" }
+        });
+      }).at(active.value);
+      const body = () => {
+        return props.keepAlive ? h(KeepAlive, tab) : tab;
+      };
+      return h(Transition, {
+        name: transition.value,
+        mode: "out-in"
+      }, body);
+    };
+  }
+});
+</script>

package/dist/components/tabs/TabContent.vue.d.ts

@@ -0,0 +1,33 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    active: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    vertical: boolean;
+    keepAlive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/tabs/Tabs.vue

@@ -0,0 +1,209 @@
+<template>
+  <div
+    data-testid="tabs"
+    class="tabs"
+    :class="classNames">
+    <nav
+      data-testid="tabs-nav-wrapper"
+      class="tabs__nav"
+      :class="navWrapperClass">
+      <Nav
+        class="nav"
+        data-testid="tabs-nav"
+        :variant="variant"
+        :align="align"
+        :vertical="vertical"
+        :justified="justified"
+        :fill="fill">
+        <NavItem
+          v-for="(tab, i) in tabs"
+          :key="i"
+          data-testid="tab"
+          :disabled="tab.disabled"
+          :active="i === active"
+          :class="{
+  'nav__item--no-icon': !tab.slots?.icon,
+  'nav__item--no-label': !tab.title && !tab.slots?.title
+}"
+          @click="selectTab(i, tab)">
+          <template #icon>
+            <template v-if="tab.slots?.icon">
+              <component :is="tab.slots.icon" />
+            </template>
+          </template>
+          <template v-if="tab.slots?.title">
+            <component :is="tab.slots.title" />
+          </template>
+          <template v-else>
+            {{ tab.title }}
+          </template>
+        </NavItem>
+      </Nav>
+    </nav>
+
+    <div class="tabs__content">
+      <tab-content
+        :active="active"
+        :vertical="vertical"
+        :keep-alive="keepAlive">
+        <slot />
+      </tab-content>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed
+} from "vue";
+import Nav from "../nav/Nav.vue";
+import NavItem from "../nav/NavItem.vue";
+import TabContent from "./TabContent.vue";
+import { useVModel } from "../input";
+import { findAllChildren, toBoolean } from "../utils/vnode";
+const props = defineProps({
+  variant: {
+    type: String,
+    default: "tabs"
+  },
+  align: {
+    type: String,
+    default: "left"
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  fill: {
+    type: Boolean,
+    default: false
+  },
+  justified: {
+    type: Boolean,
+    default: false
+  },
+  navWrapperClass: {
+    type: String,
+    default: void 0
+  },
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  keepAlive: {
+    type: Boolean,
+    default: false
+  }
+});
+const classNames = computed(() => {
+  const result = [];
+  if (props.vertical && props.align)
+    result.push(`tabs--vertical-align-${props.align}`);
+  return result;
+});
+const slots = defineSlots();
+const active = useVModel(props);
+const tabs = computed(() => {
+  const vnodes = slots.default ? slots.default() : [];
+  const tabs2 = findAllChildren(vnodes, "Tab");
+  return tabs2.map((vnode) => {
+    return {
+      title: vnode.props?.title,
+      disabled: toBoolean(vnode.props?.disabled),
+      slots: vnode.children
+    };
+  });
+});
+function selectTab(index, tab) {
+  if (!tab.disabled)
+    active.value = index;
+}
+</script>
+
+<style lang="postcss">
+/**
+* Component Name: Tabs
+* Component URI : https://www.figma.com/file/tVQNwXeQkMtZlX1x3qjJu8/B-A-S-E-%2F-Style-Guide?node-id=262%3A2160
+* Date Created  : Aug 11, 2022
+* Last Update   : Aug 12, 2022
+*/
+.tabs {
+  --p-tabs-content-padding-x: theme(spacing.6);
+  --p-tabs-content-padding-y: theme(spacing.6);
+
+  /**
+  * tab content
+  */
+  &__content {
+    @apply py-[var(--p-tabs-content-padding-y)] w-full;
+  }
+
+  /**
+  * set border bottom
+  * for navigation
+  */
+  .nav {
+    @apply border-b border-b-default;
+    @apply dark:border-b-dark-default;
+
+    &__link {
+      .badge {
+        @apply ml-2;
+      }
+    }
+
+    &--vertical {
+      @apply pb-2 border-b-0 border-r border-r-default;
+      @apply dark:border-r-dark-default;
+    }
+  }
+
+  /**
+  * alignment tabs in vertical
+  * orientation
+  */
+  &--vertical-align-right,
+  &--vertical-align-left {
+    @apply w-full flex items-start;
+
+    .tabs {
+      &__nav {
+        @apply shrink-0;
+      }
+
+      &__content {
+        @apply grow px-[var(--p-tabs-content-padding-x)] py-[var(--p-tabs-content-padding-y)];
+      }
+    }
+  }
+
+  /**
+  * left align for
+  * vertical navigation
+  */
+  &--vertical-align-left {
+    .nav {
+      &__item {
+        @apply -mr-[1px];
+      }
+    }
+  }
+
+  /**
+  * right align for
+  * vertical navigation
+  */
+  &--vertical-align-right {
+    @apply flex-row-reverse;
+
+    .nav {
+      @apply border-b-0 border-r-0 border-l border-l-default;
+      @apply dark:border-l-dark-default;
+
+      &.nav--pills {
+        @apply pl-2 pr-0;
+      }
+    }
+  }
+}
+</style>

package/dist/components/tabs/Tabs.vue.d.ts

@@ -0,0 +1,96 @@
+import type { VNode, PropType } from 'vue';
+import type { StyleVariant as TabsStyleVariant, AlignVariant as TabsAlignVariant } from '../nav';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<TabsStyleVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<TabsAlignVariant>;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    justified: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    navWrapperClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<TabsStyleVariant>;
+        default: string;
+    };
+    align: {
+        type: PropType<TabsAlignVariant>;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    justified: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    navWrapperClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    fill: boolean;
+    modelValue: number;
+    variant: TabsStyleVariant;
+    vertical: boolean;
+    align: TabsAlignVariant;
+    justified: boolean;
+    keepAlive: boolean;
+    navWrapperClass: string;
+}, {}, {}, {}, 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/text/Text.vue

@@ -0,0 +1,220 @@
+<template>
+  <component
+    :is="elementNames"
+    data-testid="freetext"
+    class="freetext"
+    :class="classNames"
+    :href="href">
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import {
+  computed,
+  resolveComponent
+} from "vue";
+const props = defineProps({
+  variant: {
+    type: String,
+    default: "body"
+  },
+  href: {
+    type: [String, Object],
+    default: void 0
+  },
+  weight: {
+    type: String,
+    default: "normal"
+  },
+  transform: {
+    type: String,
+    default: "normalcase"
+  },
+  element: {
+    type: String,
+    default: "span"
+  }
+});
+const elementNames = computed(() => {
+  return props.href ? resolveComponent("nuxt-link") : props.element;
+});
+const classNames = computed(() => {
+  const result = [""];
+  if (props.variant)
+    result.push(`freetext--${props.variant}`);
+  if (props.weight)
+    result.push(`freetext--${props.weight}`);
+  if (props.transform)
+    result.push(`freetext--${props.transform}`);
+  if (props.href)
+    result.push("freetext--hyperlink");
+  if (props.href && (props.variant === "caption" || props.variant === "caption2"))
+    result.push("freetext--medium");
+  return result;
+});
+</script>
+
+<style lang="postcss">
+.freetext {
+  /**
+  * Weight variant
+  * of text
+  */
+  &--thin {
+    @apply font-thin;
+  }
+
+  &--extralight {
+    @apply font-extralight;
+  }
+
+  &--light {
+    @apply font-light;
+  }
+
+  &--normal {
+    @apply font-normal;
+  }
+
+  &--semibold {
+    @apply font-semibold;
+  }
+
+  &--medium {
+    @apply font-medium;
+  }
+
+  &--bold {
+    @apply font-bold;
+  }
+
+  &--extrabold {
+    @apply font-extrabold;
+  }
+
+  &--black {
+    @apply font-black;
+  }
+
+  /**
+  * Text transform
+  * of text
+  */
+  &--normalcase {
+    @apply normal-case;
+  }
+
+  &--lowercase {
+    @apply lowercase;
+  }
+
+  &--capitalize {
+    @apply capitalize;
+  }
+
+  &--uppercase {
+    @apply uppercase;
+  }
+
+  /**
+  * Hyperlink style
+   */
+  &--hyperlink {
+    @apply underline decoration-solid;
+
+    &:not([class^='text-'], [class*='text-']) {
+      @apply text-link;
+      @apply dark:text-dark-link;
+    }
+  }
+
+  /**
+  * Heading Style
+  */
+  &--h1 {
+    @apply text-7xl;
+  }
+  &--h2 {
+    @apply text-6xl;
+  }
+  &--h3 {
+    @apply text-5xl;
+  }
+  &--h4 {
+    @apply text-4xl;
+  }
+  &--h5 {
+    @apply text-2xl font-medium;
+  }
+  &--h6 {
+    @apply text-xl font-medium;
+  }
+
+  /**
+  * Subheading Style
+  */
+  &--subheading {
+    @apply text-base font-medium;
+
+  }
+  &--subheading2 {
+    @apply text-sm tracking-wide font-medium;
+  }
+
+  /**
+  * Body Style
+  */
+  &--body {
+    @apply text-base;
+  }
+  &--body2 {
+    @apply text-sm tracking-wide;
+  }
+
+  /**
+  * Button Style
+  */
+  &--btn {
+    @apply font-medium text-base tracking-wider;
+  }
+  &--btn2 {
+    @apply font-medium text-sm;
+  }
+
+  /**
+  * Caption Style
+  */
+  &--caption {
+    @apply text-xs;
+  }
+  &--caption2 {
+    @apply text-tn font-medium;
+  }
+
+  /**
+  * Form Label Style
+  */
+  &--formlabel {
+    @apply font-medium text-sm tracking-wide;
+  }
+  &--formlabel2 {
+    @apply font-bold text-xs leading-tightest;
+  }
+
+  &--formlabel,
+  &--formlabel2 {
+    &:not([class^='text-'], [class*='text-']) {
+      @apply text-subtle;
+      @apply dark:text-dark-subtle;
+    }
+  }
+
+  /**
+  * Overline Style
+  */
+  &--overline {
+    @apply text-tn font-medium tracking-widest uppercase;
+  }
+}
+</style>