@privyid/persona 1.1.2 → 1.2.1-rc.0

package/dist/components/toggle/Toggle.vue

@@ -1,239 +0,0 @@
-<template>
-  <label
-    data-testid="toggle"
-    class="toggle"
-    :class="classNames"
-    @click.prevent="toggle">
-    <div
-      class="toggle__switch"
-      data-testid="toggle-switch"
-      :class="switchClass">
-      <span
-        v-if="noLabel === false"
-        class="toggle__label toggle__checked-label">
-        <slot
-          name="checked"
-          :is-checked="model">
-          {{ checkedLabel }}
-        </slot>
-      </span>
-      <input
-        type="checkbox"
-        class="toggle__pointer"
-        :disabled="disabled || readonly"
-        :value="value"
-        :checked="model">
-      <span
-        v-if="noLabel === false"
-        class="toggle__label toggle__unchecked-label">
-        <slot
-          name="unchecked"
-          :is-checked="model">
-          {{ uncheckedLabel }}
-        </slot>
-      </span>
-    </div>
-    <slot :is-checked="model" />
-  </label>
-</template>
-
-<script lang="ts" setup>
-import type { PropType, VNode } from 'vue-demi'
-import { computed } from 'vue-demi'
-import { useVModel } from '../checkbox'
-
-type StyleVariant = 'pill' | 'flat'
-
-const props = defineProps({
-  variant: {
-    type   : String as PropType<StyleVariant>,
-    default: 'pill',
-  },
-  modelValue: {
-    type   : undefined as PropType<any>,
-    default: false,
-  },
-  value: {
-    type   : undefined as PropType<any>,
-    default: true,
-  },
-  uncheckedValue: {
-    type   : undefined as PropType<any>,
-    default: false,
-  },
-  checked: {
-    type   : Boolean,
-    default: false,
-  },
-  checkedLabel: {
-    type   : String,
-    default: 'on',
-  },
-  uncheckedLabel: {
-    type   : String,
-    default: 'off',
-  },
-  noLabel: {
-    type   : Boolean,
-    default: false,
-  },
-  readonly: {
-    type   : Boolean,
-    default: false,
-  },
-  disabled: {
-    type   : Boolean,
-    default: false,
-  },
-  switchClass: {
-    type: [
-      String,
-      Array,
-      Object,
-    ],
-    default: undefined,
-  },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [unknown],
-  'change': [boolean],
-}>()
-
-const slots = defineSlots<{
-  'checked'(props: { isChecked: boolean }): VNode[],
-  'unchecked'(props: { isChecked: boolean }): VNode[],
-  'default'(props: { isChecked: boolean }): VNode[],
-}>()
-
-const model = useVModel(props)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.variant)
-    result.push(`toggle--${props.variant}`)
-
-  if (model.value)
-    result.push('toggle--checked')
-
-  if (props.disabled)
-    result.push('toggle--disabled')
-
-  if (props.readonly)
-    result.push('toggle--readonly')
-
-  if (slots.default)
-    result.push('toggle--labeled')
-
-  return result
-})
-
-function toggle () {
-  if (!props.readonly && !props.disabled) {
-    const value = !model.value
-
-    model.value = value
-    emit('change', value)
-  }
-}
-</script>
-
-<style lang="postcss">
-.toggle {
-  @apply inline-flex cursor-pointer relative items-center select-none text-default;
-  @apply dark:text-dark-default;
-
-  &__switch {
-    @apply flex shrink-0 items-center justify-center relative bg-base border-default font-medium;
-    @apply dark:bg-dark-base dark:border-dark-default;
-  }
-
-  &__pointer {
-    @apply block absolute appearance-none cursor-pointer will-change-transform transition-transform -translate-x-1/2 bg-default;
-    @apply dark:bg-dark-layer-2;
-  }
-
-  &--disabled {
-    @apply opacity-50 pointer-events-none;
-  }
-
-  &&--pill {
-    .toggle__switch {
-      @apply w-9 h-5 rounded-full text-[0.5rem] text-state-emphasis border;
-      @apply dark:text-dark-state-emphasis;
-    }
-
-    .toggle__label {
-      @apply w-1/2 flex justify-center items-center;
-    }
-
-    .toggle__pointer {
-      @apply w-4 h-4 rounded-full shadow-md;
-    }
-
-    &.toggle--checked {
-      .toggle__switch {
-        @apply bg-brand-accent border-brand-accent;
-        @apply dark:bg-dark-brand-accent dark:border-dark-brand-accent;
-      }
-
-      .toggle__pointer {
-        @apply translate-x-1/2;
-      }
-    }
-  }
-
-  &&--flat {
-    .toggle__switch {
-      @apply flex-row-reverse border-2 rounded-sm min-h-[1.5rem] min-w-[2.5rem];
-    }
-
-    .toggle__label {
-      @apply px-1 z-[2] relative text-sm rounded-none;
-    }
-
-    .toggle__checked-label {
-      @apply text-muted;
-      @apply dark:text-dark-muted;
-    }
-
-    .toggle__pointer {
-      @apply w-1/2 h-full rounded-xs z-1;
-    }
-
-    &.toggle--checked {
-      .toggle__checked-label {
-        @apply text-default;
-        @apply dark:text-dark-default;
-      }
-
-      .toggle__unchecked-label {
-        @apply text-muted;
-        @apply dark:text-dark-muted;
-      }
-
-      .toggle__pointer {
-        @apply translate-x-1/2;
-      }
-    }
-  }
-
-  .dropdown__menu & {
-    @apply px-3 py-2 cursor-pointer text-default w-full select-none text-left flex justify-between items-center flex-row-reverse;
-    @apply dark:text-dark-default;
-
-    &:hover,
-    &:focus-visible {
-      @apply bg-base;
-      @apply dark:bg-dark-base;
-    }
-  }
-
-  &&--labeled {
-    .toggle__switch {
-      @apply mr-4;
-    }
-  }
-}
-</style>

package/dist/components/tooltip/Tooltip.vue

@@ -1,172 +0,0 @@
-<template>
-  <div
-    v-show="show && !isHidden"
-    ref="tooltip"
-    class="tooltip"
-    data-testid="tooltip"
-    :class="classNames">
-    <div
-      ref="tooltipArrow"
-      class="tooltip__arrow"
-      data-popper-arrow />
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
-import {
-  toRef,
-  watch,
-  computed,
-  watchEffect,
-  ref,
-} from 'vue-demi'
-import type { ColorVariant } from '.'
-import type { Placement } from '@floating-ui/dom'
-import {
-  autoUpdate,
-  computePosition,
-  arrow,
-  offset,
-  flip,
-  shift,
-  inline,
-  hide,
-} from '@floating-ui/dom'
-
-const props = defineProps({
-  show: {
-    type   : Boolean,
-    default: false,
-  },
-  color: {
-    type   : String as PropType<ColorVariant>,
-    default: 'black',
-  },
-  target: {
-    type   : Object as PropType<HTMLElement>,
-    default: undefined,
-  },
-  placement: {
-    type   : String as PropType<Placement>,
-    default: 'top',
-  },
-})
-
-const emit = defineEmits<{
-  'show': [HTMLElement],
-  'hide': [HTMLElement],
-}>()
-
-const placement    = toRef(props, 'placement')
-const target       = toRef(props, 'target')
-const tooltip      = ref<HTMLDivElement>()
-const tooltipArrow = ref<HTMLDivElement>()
-const isHidden     = ref(false)
-
-const classNames = computed(() => {
-  const result: string[] = []
-
-  if (props.color)
-    result.push(`tooltip--${props.color}`)
-
-  return result
-})
-
-watch(() => props.show, (value) => {
-  if (value)
-    emit('show', target.value)
-  else
-    emit('hide', target.value)
-})
-
-watchEffect((onCleanup) => {
-  if (tooltip.value && target.value && tooltipArrow.value) {
-    const cleanup = autoUpdate(target.value, tooltip.value, () => {
-      computePosition(target.value, tooltip.value, {
-        strategy  : 'absolute',
-        placement : placement.value,
-        middleware: [
-          flip(),
-          shift(),
-          inline(),
-          offset(12),
-          hide(),
-          arrow({ element: tooltipArrow.value }),
-        ],
-      }).then(({ x, y, middlewareData, placement }) => {
-        if (tooltip.value) {
-          tooltip.value.dataset.popperPlacement = placement
-
-          tooltip.value.style.left = `${x || 0}px`
-          tooltip.value.style.top  = `${y || 0}px`
-
-          isHidden.value = middlewareData.hide.referenceHidden
-        }
-
-        if (tooltipArrow.value) {
-          tooltipArrow.value.style.left = `${middlewareData.arrow.x}px`
-          tooltipArrow.value.style.top  = `${middlewareData.arrow.y}px`
-        }
-      })
-    }, { animationFrame: true })
-
-    onCleanup(cleanup)
-  }
-}, { flush: 'post' })
-</script>
-
-<style lang="postcss">
-.tooltip {
-  --p-tooltip-z-index: theme(zIndex.tooltip);
-
-  @apply z-[var(--p-tooltip-z-index)] px-4 py-3 rounded text-xs inline-block absolute drop-shadow-sm;
-
-  &__arrow {
-    @apply absolute text-xs after:w-4 after:h-4 after:block after:rounded-[3px] after:rotate-45 after:left-0 after:content-[''] after:z-0;
-
-    [data-popper-placement^="left"] > & {
-      @apply -right-[6px];
-    }
-
-    [data-popper-placement^="right"] > & {
-      @apply -left-[6px];
-    }
-
-    [data-popper-placement^="bottom"] > & {
-      @apply -top-[6px];
-    }
-
-    [data-popper-placement^="top"] > & {
-      @apply -bottom-[6px];
-    }
-  }
-
-  &--black {
-    @apply bg-inverse text-on-emphasis;
-    @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
-
-    .tooltip__arrow {
-      @apply after:bg-inverse;
-      @apply dark:after:bg-dark-inverse;
-    }
-  }
-
-  &--white {
-    @apply bg-default text-subtle;
-    @apply dark:bg-dark-default dark:text-dark-subtle;
-
-    .tooltip__arrow {
-      @apply after:bg-default;
-      @apply dark:after:bg-dark-default;
-    }
-  }
-}
-
-[data-tooltip-enable="true"] {
-  &[data-tooltip-action="click"] {
-    @apply cursor-pointer;
-  }
-}
-</style>

package/dist/components/tooltip/TooltipContainer.vue

@@ -1,89 +0,0 @@
-<template>
-  <div
-    class="tooltip-container"
-    data-testid="tooltip-container">
-    <Tooltip
-      v-for="[id, item] in items"
-      :key="id"
-      v-bind="item">
-      <span
-        v-p-md.inline="item.text"
-        class="tooltip__text" />
-    </Tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {
-  reactive,
-  ref,
-} from 'vue-demi'
-import Tooltip from './Tooltip.vue'
-import type { TooltipItem, TooltipOptions } from '.'
-import { uniqueId } from 'lodash-es'
-import { vPMd } from '../markdown'
-
-const items = ref<Map<string, TooltipItem>>(new Map())
-
-function add (options: TooltipOptions): string {
-  const id = uniqueId('tooltip_')
-
-  items.value.set(id, reactive({ ...options, show: false }) as TooltipItem)
-
-  return id
-}
-
-function update (id: string, options: TooltipOptions) {
-  const item = items.value.get(id)
-
-  if (item) {
-    item.target    = options.target
-    item.text      = options.text
-    item.placement = options.placement
-  }
-}
-
-function show (id: string) {
-  const item   = items.value.get(id)
-  const result = item.target.dispatchEvent(new CustomEvent('tooltip:show', {
-    detail    : item,
-    cancelable: true,
-  }))
-
-  if (result)
-    item.show = true
-}
-
-function hide (id: string) {
-  const item   = items.value.get(id)
-  const result = item.target.dispatchEvent(new CustomEvent('tooltip:hide', {
-    detail    : item,
-    cancelable: true,
-  }))
-
-  if (result)
-    item.show = false
-}
-
-function toggle (id: string) {
-  const item = items.value.get(id)
-
-  if (item.show)
-    hide(id)
-  else
-    show(id)
-}
-
-function remove (id: string) {
-  items.value.delete(id)
-}
-
-defineExpose({
-  add,
-  update,
-  show,
-  hide,
-  toggle,
-  remove,
-})
-</script>

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

@@ -1,17 +0,0 @@
-import type { Placement } from '@floating-ui/dom';
-import type { Directive } from 'vue-demi';
-export type ColorVariant = 'black' | 'white';
-export interface TooltipOptions {
-    text: string;
-    color: ColorVariant;
-    placement: Placement;
-    target: HTMLElement;
-}
-export interface TooltipItem extends TooltipOptions {
-    show: boolean;
-}
-export declare const pTooltip: Directive<HTMLElement, string | boolean>;
-export declare const vPTooltip: import("vue-demi").ObjectDirective<HTMLElement, string | boolean, string, string>;
-export declare function showTooltip(selector: string | HTMLElement): Promise<void>;
-export declare function hideTooltip(selector: string | HTMLElement): Promise<void>;
-export declare function toggleTooltip(selector: string | HTMLElement): Promise<void>;

package/dist/components/tooltip/index.mjs

@@ -1,113 +0,0 @@
-import { useSingleton } from "../global/use-singleton.mjs";
-import createHandler from "./utils/create-handler.mjs";
-import { addHoverListener, removeHoverListener } from "./utils/on-hover.mjs";
-import {
-  parsePlacement,
-  parseAction,
-  parseText,
-  parseColor
-} from "./utils/parse-bindings.mjs";
-const handleClick = createHandler("click", "toggle", true);
-const handleMouseEnter = createHandler("hover", "show");
-const handleMouseLeave = createHandler("hover", "hide");
-const handleFocus = createHandler("focus", "show");
-const handleBlur = createHandler("focus", "hide");
-async function useTooltip() {
-  const { default: TooltipContainer } = await import("./TooltipContainer.vue");
-  const tooltip = await useSingleton(TooltipContainer);
-  return tooltip;
-}
-export const pTooltip = {
-  async mounted(el, bindings) {
-    const tooltip = await useTooltip();
-    const action = parseAction(el, bindings);
-    const color = parseColor(el, bindings);
-    const text = parseText(el, bindings);
-    const placement = parsePlacement(el, bindings);
-    const enable = bindings.value !== false && !!text;
-    const id = tooltip.add({
-      target: el,
-      placement,
-      text,
-      color
-    });
-    el.dataset.tooltipId = id;
-    el.dataset.tooltipAction = action;
-    el.dataset.tooltipText = text;
-    el.dataset.tooltipEnable = enable ? "true" : "false";
-    el.removeAttribute("title");
-    el.addEventListener("click", handleClick);
-    el.addEventListener("focus", handleFocus, { passive: true });
-    el.addEventListener("blur", handleBlur, { passive: true });
-    const delay = Number.parseInt(el.dataset.tooltipLong ?? "500");
-    const debounce = Number.parseInt(el.dataset.tooltipDebounce);
-    addHoverListener(el, {
-      onHoverIn: handleMouseEnter,
-      onHoverOut: handleMouseLeave,
-      delay: bindings.modifiers.long ? delay : 0,
-      debounced: debounce
-    });
-  },
-  async updated(el, bindings) {
-    const tooltip = await useTooltip();
-    const id = el.dataset.tooltipId;
-    const action = parseAction(el, bindings);
-    const color = parseColor(el, bindings);
-    const text = parseText(el, bindings);
-    const placement = parsePlacement(el, bindings);
-    const enable = bindings.value !== false && !!text;
-    el.dataset.tooltipAction = action;
-    el.dataset.tooltipText = text;
-    el.dataset.tooltipEnable = enable ? "true" : "false";
-    tooltip.update(id, {
-      target: el,
-      placement,
-      text,
-      color
-    });
-    if (enable && bindings.value === true)
-      tooltip.show(id);
-    if (!enable)
-      tooltip.hide(id);
-    el.removeAttribute("title");
-  },
-  async unmounted(el, bindings) {
-    const { default: TooltipContainer } = await import("./TooltipContainer.vue");
-    const tooltip = await useSingleton(TooltipContainer);
-    const id = el.dataset.tooltipId;
-    const text = parseText(el, bindings);
-    tooltip.remove(id);
-    el.removeEventListener("click", handleClick);
-    el.removeEventListener("focus", handleFocus);
-    el.removeEventListener("blur", handleBlur);
-    el.setAttribute("title", text);
-    removeHoverListener(el);
-    delete el.dataset.tooltipId;
-    delete el.dataset.tooltipAction;
-    delete el.dataset.tooltipText;
-    delete el.dataset.tooltipEnable;
-  }
-};
-export const vPTooltip = pTooltip;
-function getTooltipId(selector) {
-  const targets = selector instanceof HTMLElement ? [selector] : [...document.querySelectorAll(selector)];
-  return targets.map((target) => target?.dataset.tooltipId).filter(Boolean);
-}
-export async function showTooltip(selector) {
-  const ids = getTooltipId(selector);
-  const tooltip = await useTooltip();
-  for (const id of ids)
-    tooltip.show(id);
-}
-export async function hideTooltip(selector) {
-  const ids = getTooltipId(selector);
-  const tooltip = await useTooltip();
-  for (const id of ids)
-    tooltip.hide(id);
-}
-export async function toggleTooltip(selector) {
-  const ids = getTooltipId(selector);
-  const tooltip = await useTooltip();
-  for (const id of ids)
-    tooltip.toggle(id);
-}

package/dist/components/tooltip/utils/create-handler.d.ts

@@ -1,9 +0,0 @@
-type EventAction = 'toggle' | 'show' | 'hide';
-/**
- *
- * @param eventName Event name, only run when attr data-tooltip-action match this name
- * @param tooltipAction Action applied to the tooltip
- * @param prevent If true, it's will prevent default action.
- */
-export default function createHandler(eventName: string, tooltipAction: EventAction, prevent?: boolean): (event: MouseEvent) => Promise<void>;
-export {};

package/dist/components/tooltip/utils/create-handler.mjs

@@ -1,16 +0,0 @@
-import { useSingleton } from "../../global/use-singleton.mjs";
-export default function createHandler(eventName, tooltipAction, prevent = false) {
-  return async function handler(event) {
-    const { default: TooltipContainer } = await import("../TooltipContainer.vue");
-    const tooltip = await useSingleton(TooltipContainer);
-    const target = event.target;
-    const id = target.dataset.tooltipId;
-    const enable = target.dataset.tooltipEnable !== "false";
-    const action = target.dataset.tooltipAction;
-    if (id && enable && action.includes(eventName)) {
-      tooltip[tooltipAction](id);
-      if (prevent)
-        event.preventDefault();
-    }
-  };
-}

package/dist/components/tooltip/utils/on-hover.d.ts

@@ -1,23 +0,0 @@
-type MouseEventHandler = (event: MouseEvent) => void;
-export interface HoverOptions {
-    /**
-     * Long hover duration (in ms)
-     */
-    delay?: number;
-    /**
-     * Hover out debounce (in ms)
-     */
-    debounced?: number;
-    onHoverIn: MouseEventHandler;
-    onHoverOut: MouseEventHandler;
-}
-/**
- * Custom on hover handler
- * It's fix issue when mouseenter and mouseleave triggered repeately on Span Element.
- * This also handle add long delay
- * @param target
- * @param opts
- */
-export declare function addHoverListener(target: HTMLElement, opts: HoverOptions): void;
-export declare function removeHoverListener(target: HTMLElement): void;
-export {};