@privyid/persona 0.19.0 → 0.21.0

package/dist/components/accordion/Accordion.vue

@@ -0,0 +1,118 @@
+<template>
+  <div
+    :class="classNames"
+    data-testid="accordion">
+    <slot>
+      <Item
+        v-for="(item, i) in items"
+        :key="i"
+        :title="item.title"
+        :disabled="item.disabled">
+        <div class="p-4">
+          {{ item.content }}
+        </div>
+      </Item>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { type AccordionItem, ACCORDION_CONTEXT } from '.'
+import {
+  PropType, computed, provide, readonly,
+} from 'vue-demi'
+import Item from './AccordionItem.vue'
+
+defineOptions({ name: 'Accordion' })
+
+const props = defineProps({
+  multiple: {
+    type   : Boolean,
+    default: false,
+  },
+  flush: {
+    type   : Boolean,
+    default: false,
+  },
+  pill: {
+    type   : Boolean,
+    default: false,
+  },
+  modelValue: {
+    type   : String,
+    default: undefined,
+  },
+  noCaret: {
+    type   : Boolean,
+    default: false,
+  },
+  items: {
+    type   : Array as PropType<AccordionItem[]>,
+    default: () => ([] as AccordionItem[]),
+  },
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string],
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emit, { passive: true })
+
+const classNames = computed(() => {
+  const result: string[] = ['accordion']
+
+  if (props.flush)
+    result.push('accordion--flush')
+
+  if (props.pill)
+    result.push('accordion--pills')
+
+  return result
+})
+
+function setOpenItem (id: string): void {
+  modelValue.value = id
+}
+
+provide(ACCORDION_CONTEXT, {
+  openItem: readonly(modelValue),
+  multiple: props.multiple,
+  noCaret : props.noCaret,
+  setOpenItem,
+})
+</script>
+
+<style lang="postcss">
+.accordion {
+  @apply flex flex-col w-full;
+  @apply border border-default rounded;
+  @apply dark:border-dark-default;
+
+  & > &__item {
+    @apply first:rounded-t last:rounded-b;
+  }
+
+  &--pills {
+    @apply gap-2 border-0 rounded-none;
+
+    > .accordion__item {
+      @apply border rounded border-default;
+      @apply dark:border-dark-default;
+    }
+  }
+
+  &:not(&--pills) {
+    @apply divide-y divide-default;
+    @apply dark:divide-dark-default;
+  }
+
+  &--flush {
+    @apply border-0 rounded-none;
+
+    > .accordion__item {
+      @apply first:rounded-none last:rounded-none;
+    }
+  }
+}
+</style>

package/dist/components/accordion/AccordionItem.vue

@@ -0,0 +1,184 @@
+<template>
+  <div
+    :class="classNames"
+    data-testid="accordion-item"
+    :disabled="disabled"
+    :data-accordion-item-id="uid">
+    <slot
+      name="activator"
+      :toggle="toggle"
+      :expanded="model">
+      <div
+        class="accordion__item__activator"
+        data-testid="accordion-item-activator"
+        @click="toggle">
+        <Subheading>
+          {{ title }}
+        </Subheading>
+        <slot
+          v-if="!hideCaret"
+          name="caret"
+          :expanded="model">
+          <ChevronUp
+            v-if="model"
+            class="accordion__item__caret"
+            data-testid="accordion-item-caret" />
+          <ChevronDown
+            v-else
+            class="accordion__item__caret"
+            data-testid="accordion-item-caret" />
+        </slot>
+      </div>
+    </slot>
+
+    <Collapse
+      :when="model"
+      class="accordion__item__content"
+      data-testid="accordion-item-content">
+      <slot :expanded="model" />
+    </Collapse>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { ACCORDION_CONTEXT, generateId } from '.'
+import {
+  computed, inject, watch,
+} from 'vue-demi'
+
+import Subheading from '../subheading/Subheading.vue'
+import { Collapse } from 'vue-collapsed'
+import ChevronUp from '@privyid/persona-icon/vue/chevron-up/16.vue'
+import ChevronDown from '@privyid/persona-icon/vue/chevron-down/16.vue'
+
+const uid = generateId(undefined, 'accordion-item')
+
+const parentData = inject(ACCORDION_CONTEXT)
+
+const props = defineProps({
+  modelValue: {
+    type   : Boolean,
+    default: false,
+  },
+  title: {
+    type   : String,
+    default: '',
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+  noCaret: {
+    type   : Boolean,
+    default: false,
+  },
+})
+const emit  = defineEmits([
+  'update:modelValue',
+  'expand',
+  'collapse',
+])
+
+const model = useVModel(props, 'modelValue', emit, { passive: true })
+
+const hideCaret = computed(() => {
+  return props.noCaret || (parentData?.noCaret)
+})
+
+const classNames = computed(() => {
+  const result: string[] = ['accordion__item']
+
+  if (props.disabled)
+    result.push('accordion__item--disabled')
+
+  if (model.value)
+    result.push('expanded')
+  else
+    result.push('collapsed')
+
+  return result
+})
+
+function toggle () {
+  if (props.disabled)
+    return
+
+  model.value = !model.value
+
+  if (!model.value && !parentData?.multiple)
+    parentData?.setOpenItem('')
+}
+
+watch(
+  () => parentData?.openItem.value,
+  () => {
+    model.value = parentData?.openItem.value === uid.value && !parentData?.multiple
+  },
+)
+watch(
+  () => model.value,
+  (value) => {
+    if (value && !parentData?.multiple) parentData?.setOpenItem(uid.value)
+
+    if (value)
+      emit('expand')
+    else
+      emit('collapse')
+  },
+)
+</script>
+
+<style lang="postcss">
+.accordion__item {
+  --p-accordion-bg: theme(backgroundColor.default.DEFAULT);
+  --p-accordion-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+  --p-accordion-collapsed-border: theme(borderColor.default.DEFAULT);
+  --p-accordion-collapsed-border-dark: theme(borderColor.dark.default.DEFAULT);
+  --p-accordion-expanded-border: theme(borderColor.default.DEFAULT);
+  --p-accordion-expanded-border-dark: theme(borderColor.dark.default.DEFAULT);
+
+  @apply w-full bg-[color:var(--p-accordion-bg)];
+  @apply dark:bg-[color:var(--p-accordion-bg-dark)];
+
+  &:not(.accordion &) {
+    @apply rounded border;
+
+    &.collapsed {
+      @apply border-[color:var(--p-accordion-collapsed-border)];
+      @apply dark:border-[color:var(--p-accordion-collapsed-border-dark)];
+    }
+
+    &.expanded {
+      @apply border-[color:var(--p-accordion-expanded-border)];
+      @apply dark:border-[color:var(--p-accordion-expanded-border-dark)];
+    }
+
+    .accordion__item__activator {
+      @apply bg-default-alpha;
+      @apply dark:bg-dark-default-alpha;
+    }
+  }
+
+  &__activator {
+    @apply flex justify-between items-center p-4 cursor-pointer;
+
+    .expanded & {
+      @apply bg-default-alpha;
+      @apply dark:bg-dark-default-alpha;
+    }
+  }
+
+  &:is(&--disabled) {
+    @apply pointer-events-none;
+
+    > .accordion__item__activator {
+      @apply opacity-50;
+    }
+  }
+
+  &__content {
+    @apply transition-[height] duration-300 ease-out;
+  }
+}
+</style>

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,14 @@
+import { type ComputedRef, type MaybeRefOrGetter, type InjectionKey, type Ref } from 'vue';
+export interface AccordionItem {
+    title: string;
+    content: string;
+    disabled?: boolean;
+}
+export declare const ACCORDION_CONTEXT: InjectionKey<{
+    openItem: Readonly<Ref<string | undefined>>;
+    multiple: boolean;
+    noCaret: boolean;
+    setOpenItem: (id: string) => void;
+}>;
+export declare function defineAccordion(items: AccordionItem[]): AccordionItem[];
+export declare const generateId: (id?: MaybeRefOrGetter<string | undefined>, suffix?: string) => ComputedRef<string>;

package/dist/components/accordion/index.mjs

@@ -0,0 +1,10 @@
+import {
+  computed,
+  toValue
+} from "vue";
+export const ACCORDION_CONTEXT = Symbol("accordion");
+export function defineAccordion(items) {
+  return items;
+}
+const getId = (suffix = "") => `${suffix}__${Math.random().toString().slice(2, 8)}`;
+export const generateId = (id, suffix) => computed(() => toValue(id) ?? getId(suffix));

package/dist/components/avatar/Avatar.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
 }, {
@@ -51,7 +51,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     imgClass: {
-        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: undefined;
     };
 }>> & {

package/dist/components/badge/Badge.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>>, {
-    variant: StyleVariant;
     color: ColorVariant;
+    variant: StyleVariant;
 }, {}>;
 export default _default;

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -5,7 +5,8 @@
     :class="classNames">
     <component
       :is="tagName"
-      :href="permalink">
+      :href="permalink"
+      :class="{ 'breadcrumbs__item__link' : permalink }">
       <slot />
     </component>
     <div
@@ -82,7 +83,7 @@ export default defineComponent({
       }
     }
 
-    & > a {
+    & > .breadcrumbs__item__link {
       @apply text-subtle cursor-pointer underline decoration-solid hover:no-underline;
       @apply dark:text-dark-subtle;
     }

package/dist/components/button/Button.vue

@@ -4,77 +4,108 @@
     :href="href"
     :type="type"
     data-testid="btn"
-    :class="classNames">
-    <slot />
+    :class="classNames"
+    :disabled="loading || disabled">
+    <spinner v-if="loading" />
+    <slot v-else />
   </component>
 </template>
 
-<script>
+<script lang="ts" setup>
 import {
   computed,
-  defineComponent,
-  inject
-} from "vue-demi";
-import { BUTTONGROUP_SETTING } from "../button-group";
-import { INPUTGROUP_SETTING } from "../input-group";
-export default defineComponent({
-  props: {
-    variant: {
-      type: String,
-      default: "solid"
-    },
-    color: {
-      type: String,
-      default: "default"
-    },
-    size: {
-      type: String,
-      default: "md"
-    },
-    icon: {
-      type: Boolean,
-      default: false
-    },
-    pill: {
-      type: Boolean,
-      default: false
-    },
-    href: {
-      type: [String, Object],
-      default: void 0
-    },
-    type: {
-      type: String,
-      default: "button"
-    }
+  PropType,
+  inject,
+} from 'vue-demi'
+import type { RouteLocationRaw } from 'vue-router'
+import {
+  ColorVariant,
+  SizeVariant,
+  StyleVariant,
+  TypeVariant,
+} from '.'
+import { BUTTONGROUP_SETTING } from '../button-group'
+import { INPUTGROUP_SETTING } from '../input-group'
+import Spinner from '../spinner/SpinnerRinggo.vue'
+
+const props = defineProps({
+  variant: {
+    type   : String as PropType<StyleVariant>,
+    default: 'solid',
   },
-  setup(props) {
-    const inputSetting = inject(INPUTGROUP_SETTING, void 0, false);
-    const buttonSetting = inject(BUTTONGROUP_SETTING, void 0, false);
-    const classNames = computed(() => {
-      const result = ["btn"];
-      if (props.color)
-        result.push(`btn--${props.color}`);
-      if (props.variant)
-        result.push(`btn--variant-${props.variant}`);
-      if (inputSetting?.size.value)
-        result.push(`btn--${inputSetting?.size.value}`);
-      else if (buttonSetting?.size.value)
-        result.push(`btn--${buttonSetting?.size.value}`);
-      else if (props.size)
-        result.push(`btn--${props.size}`);
-      if (props.icon)
-        result.push("btn--icon");
-      if (props.pill)
-        result.push("btn--pill");
-      return result;
-    });
-    const tagName = computed(() => {
-      return props.href ? "nuxt-link" : "button";
-    });
-    return { classNames, tagName };
-  }
-});
+  color: {
+    type   : String as PropType<ColorVariant>,
+    default: 'default',
+  },
+  size: {
+    type   : String as PropType<SizeVariant>,
+    default: 'md',
+  },
+  icon: {
+    type   : Boolean,
+    default: false,
+  },
+  pill: {
+    type   : Boolean,
+    default: false,
+  },
+  href: {
+    type   : [String, Object] as PropType<string | RouteLocationRaw>,
+    default: undefined,
+  },
+  type: {
+    type   : String as PropType<TypeVariant>,
+    default: 'button',
+  },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+  loading: {
+    type   : Boolean,
+    default: false,
+  },
+})
+
+const inputSetting  = inject(INPUTGROUP_SETTING, undefined, false)
+const buttonSetting = inject(BUTTONGROUP_SETTING, undefined, false)
+
+const classNames = computed(() => {
+  const result: string[] = ['btn']
+
+  if (props.color)
+    result.push(`btn--${props.color}`)
+
+  if (props.variant)
+    result.push(`btn--variant-${props.variant}`)
+
+  if (props.loading)
+    result.push('btn--loading')
+
+  // eslint-disable-next-line unicorn/explicit-length-check
+  if (inputSetting?.size.value)
+    result.push(`btn--${inputSetting?.size.value}`)
+  // eslint-disable-next-line unicorn/explicit-length-check
+  else if (buttonSetting?.size.value)
+    result.push(`btn--${buttonSetting?.size.value}`)
+  // eslint-disable-next-line unicorn/explicit-length-check
+  else if (props.size)
+    result.push(`btn--${props.size}`)
+
+  if (props.icon)
+    result.push('btn--icon')
+
+  if (props.pill)
+    result.push('btn--pill')
+
+  return result
+})
+
+const tagName = computed(() => {
+  return props.href
+    ? 'nuxt-link'
+    : 'button'
+})
 </script>
 
 <style lang="postcss">
@@ -320,5 +351,11 @@ export default defineComponent({
   &&--pill {
     @apply rounded-full;
   }
+
+  &--loading {
+    .spinner {
+      @apply h-6;
+    }
+  }
 }
 </style>

package/dist/components/calendar/Calendar.vue.d.ts

@@ -179,14 +179,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:start"?: ((...args: any[]) => any) | undefined;
     "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: Date | [Date, Date];
     start: Date;
+    mode: "date" | "month" | "year";
     end: Date;
     min: Date;
     max: Date;
-    modelValue: Date | [Date, Date];
     disabled: boolean;
     readonly: boolean;
-    mode: "date" | "month" | "year";
     range: boolean;
     minRange: string;
     maxRange: string;

package/dist/components/calendar/adapter/adapter.mjs

@@ -3,7 +3,7 @@ import {
 } from "date-fns";
 import id from "date-fns/locale/id/index";
 import en from "date-fns/locale/en-US/index";
-import { getLang } from "../../global/context.mjs";
+import { getLang } from "../../global/store.mjs";
 import { chunk } from "lodash-es";
 const localePacks = { en, id };
 export const CalendarFormat = [

package/dist/components/camera/Camera.vue.d.ts

@@ -49,7 +49,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     toast: (text: string) => void;
     deviceId: ComputedRef<string | undefined>;
     constraints: ComputedRef<MediaStreamConstraints>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "start" | "update:modelValue" | "result")[], "change" | "start" | "update:modelValue" | "result", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "result" | "start")[], "change" | "update:modelValue" | "result" | "start", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<string | string[] | File | File[]>;
         default: string;
@@ -81,13 +81,13 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onStart?: ((...args: any[]) => any) | undefined;
     onResult?: ((...args: any[]) => any) | undefined;
+    onStart?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: string | string[] | File | File[];
+    facingMode: ConstrainDOMString;
     mask: MaskVariant;
     mirror: boolean | "preview" | "all";
-    facingMode: ConstrainDOMString;
+    modelValue: string | string[] | File | File[];
     modelModifiers: ModelModifier;
     adapter: Adapter;
     silent: boolean;

package/dist/components/caption/Caption.vue

@@ -44,8 +44,12 @@ export default defineComponent({
 
 <style lang="postcss">
 .caption {
-  @apply block text-muted text-xs tracking-wide;
-  @apply dark:text-dark-muted;
+  @apply block text-xs tracking-wide;
+
+  &:not([class^='text-'], [class*='text-']) {
+    @apply text-muted;
+    @apply dark:text-dark-muted;
+  }
 
   /**
   * Caption in tiny size
@@ -57,10 +61,26 @@ export default defineComponent({
   /**
   * Weight of caption
   */
+  &--thin {
+    @apply font-thin;
+  }
+
+  &--extralight {
+    @apply font-extralight;
+  }
+
+  &--light {
+    @apply font-light;
+  }
+
   &--normal {
     @apply font-normal;
   }
 
+  &--semibold {
+    @apply font-semibold;
+  }
+
   &--medium {
     @apply font-medium;
   }
@@ -69,6 +89,14 @@ export default defineComponent({
     @apply font-bold;
   }
 
+  &--extrabold {
+    @apply font-extrabold;
+  }
+
+  &--black {
+    @apply font-black;
+  }
+
   /**
   * Text transform
   * of caption

package/dist/components/card/Card.vue

@@ -139,9 +139,17 @@ export default defineComponent({
   --p-card-color: theme(textColor.default);
   --p-card-color-dark: theme(textColor.dark.default);
 
-  @apply border bg-[color:var(--p-card-bg)] border-[color:var(--p-card-border)] text-[color:var(--p-card-color)] rounded;
+  @apply border bg-[color:var(--p-card-bg)] border-[color:var(--p-card-border)] text-[color:var(--p-card-color)] rounded-md;
   @apply dark:bg-[color:var(--p-card-bg-dark)] dark:border-[color:var(--p-card-border-dark)] dark:text-[color:var(--p-card-color-dark)];
 
+  /**
+  * Card inside card
+  * has 8px rounded
+  */
+  .card {
+    @apply rounded;
+  }
+
   /*
   * Card Body & Card Header
   * by default have 24px (1.5rem) padding