vft 0.0.1

package/src/web/popover/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <tooltip
+    ref="tooltipRef"
+    v-bind="$attrs"
+    :trigger="trigger"
+    :placement="placement"
+    :disabled="disabled"
+    :visible="visible"
+    :transition="transition"
+    :popper-options="popperOptions"
+    :tabindex="tabindex"
+    :content="content"
+    :offset="offset"
+    :show-after="showAfter"
+    :hide-after="hideAfter"
+    :auto-close="autoClose"
+    :show-arrow="showArrow"
+    :aria-label="title"
+    :effect="effect"
+    :enterable="enterable"
+    :popper-class="kls"
+    :popper-style="style"
+    :teleported="teleported"
+    :persistent="persistent"
+    :gpu-acceleration="gpuAcceleration"
+    @before-show="beforeEnter"
+    @before-hide="beforeLeave"
+    @show="afterEnter"
+    @hide="afterLeave"
+  >
+    <template v-if="$slots.reference">
+      <slot name="reference" />
+    </template>
+
+    <template #content>
+      <div v-if="title" :class="ns.e('title')" role="title">
+        {{ title }}
+      </div>
+      <slot>
+        {{ content }}
+      </slot>
+    </template>
+  </tooltip>
+</template>
+<script lang="ts" setup>
+import type { Options, Placement } from '@popperjs/core';
+import { computed, ref, type StyleValue, unref } from 'vue';
+import { addUnit } from '@vri/utils';
+import { useNamespace } from '../../use';
+import type { TooltipTriggerType } from '../tooltip/types';
+import { Tooltip } from '../tooltip';
+
+interface PopoverProps {
+  trigger?: TooltipTriggerType;
+  placement?: Placement;
+  disabled?: boolean;
+  visible?: boolean;
+  transition?: string;
+  popperOptions?: Partial<Options>;
+  tabindex?: number;
+  content?: string;
+  popperStyle?: StyleValue;
+  popperClass?: ClassType;
+  enterable?: boolean;
+  effect?: 'light' | 'dark';
+  teleported?: boolean;
+  title?: string;
+  width?: string | number;
+  offset?: number;
+  showAfter?: number;
+  hideAfter?: number;
+  autoClose?: number;
+  showArrow?: boolean;
+  persistent?: boolean;
+}
+
+const {
+  trigger = 'hover',
+  placement = 'bottom',
+  disabled,
+  visible = null,
+  transition = 'vri-fade-in-linear',
+  popperOptions,
+  tabindex = 0,
+  content,
+  popperStyle,
+  popperClass,
+  enterable = true,
+  effect = 'light',
+  teleported = true,
+  title,
+  width = 150,
+  offset,
+  showAfter = 0,
+  hideAfter = 200,
+  autoClose = 0,
+  showArrow = true,
+  persistent = true
+} = defineProps<PopoverProps>();
+
+const emit = defineEmits(['update:visible', 'before-enter', 'before-leave', 'after-enter', 'after-leave']);
+
+const ns = /* hoist-static*/ useNamespace('popover');
+
+defineOptions({
+  name: ns.b()
+});
+
+const tooltipRef = ref();
+const popperRef = computed(() => {
+  return unref(tooltipRef)?.popperRef;
+});
+
+const style = computed(() => {
+  return [
+    {
+      width: addUnit(width)
+    },
+    popperStyle!
+  ];
+});
+
+const kls = computed(() => {
+  return [ns.b(), popperClass!, { [ns.m('plain')]: !!content }];
+});
+
+const gpuAcceleration = computed(() => {
+  return transition === `${ns.namespace.value}-fade-in-linear`;
+});
+
+const hide = () => {
+  tooltipRef.value?.hide();
+};
+
+const beforeEnter = () => {
+  emit('before-enter');
+};
+const beforeLeave = () => {
+  emit('before-leave');
+};
+
+const afterEnter = () => {
+  emit('after-enter');
+};
+
+const afterLeave = () => {
+  emit('update:visible', false);
+  emit('after-leave');
+};
+
+defineExpose({
+  /** @description popper ref */
+  popperRef,
+  /** @description hide popover */
+  hide
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/src/web/popover/types.ts

@@ -0,0 +1,26 @@
+import type { Options, Placement } from '@popperjs/core';
+import type { TooltipTriggerType } from '../tooltip/types';
+
+export interface PopoverProps {
+  trigger?: TooltipTriggerType;
+  placement?: Placement;
+  disabled?: boolean;
+  visible?: boolean;
+  transition?: string;
+  popperOptions?: Partial<Options>;
+  tabindex?: number;
+  content?: string;
+  popperStyle?: StyleValue;
+  popperClass?: ClassType;
+  enterable?: boolean;
+  effect?: 'light' | 'dark';
+  teleported?: boolean;
+  title?: string;
+  width?: string | number;
+  offset?: number;
+  showAfter?: number;
+  hideAfter?: number;
+  autoClose?: number;
+  showArrow?: boolean;
+  persistent?: boolean;
+}

package/src/web/popper/arrow.vue

@@ -0,0 +1,45 @@
+<template>
+  <span ref="arrowRef" :class="ns.e('arrow')" data-popper-arrow="" />
+</template>
+
+<script lang="ts" setup>
+import { inject, onBeforeUnmount, watch } from 'vue';
+import { useNamespace } from '../../use';
+import { POPPER_CONTENT_INJECTION_KEY } from './tokens';
+
+defineOptions({
+  name: 'VriPopperArrow',
+  inheritAttrs: false
+});
+
+interface Props {
+  arrowOffset?: number
+}
+
+const {
+  arrowOffset = 5
+} = defineProps<Props>();
+
+const ns = useNamespace('popper');
+const { arrowOffset: _arrowOffset, arrowRef } = inject(
+  POPPER_CONTENT_INJECTION_KEY,
+  undefined
+)!;
+
+watch(
+  () => arrowOffset,
+  (val) => {
+    _arrowOffset.value = val;
+  }
+);
+onBeforeUnmount(() => {
+  arrowRef.value = undefined;
+});
+
+defineExpose({
+  /**
+   * @description Arrow element
+   */
+  arrowRef
+});
+</script>

package/src/web/popper/content.vue

@@ -0,0 +1,311 @@
+<template>
+  <div ref="popperContentRef" :style="contentStyle" :class="contentClass" tabindex="-1"
+    @mouseenter="(e) => $emit('mouseenter', e)" @mouseleave="(e) => $emit('mouseleave', e)">
+    <focus-trap
+      :trapped="trapped"
+      :trap-on-focus-in="true"
+      :focus-trap-el="popperContentRef"
+      :focus-start-el="focusStartRef"
+      @focus-after-trapped="onFocusAfterTrapped"
+      @focus-after-released="onFocusAfterReleased"
+      @focusin="onFocusInTrap"
+      @focusout-prevented="onFocusoutPrevented"
+      @release-requested="onReleaseRequested"
+    >
+      <slot />
+    </focus-trap>
+  </div>
+</template>
+
+<script lang="ts" setup>
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  computed, inject, onBeforeUnmount, onMounted, provide, ref, unref, watch,
+  getCurrentInstance,
+  type StyleValue
+} from 'vue';
+import { isNil } from 'lodash';
+import { createPopper } from '@popperjs/core';
+import { FocusTrap } from '../focus-trap';
+import { useNamespace, useZIndex } from '../../use';
+import { POPPER_CONTENT_INJECTION_KEY, POPPER_INJECTION_KEY } from './tokens';
+import { isElement } from '@vri/utils';
+import { buildPopperOptions, unwrapMeasurableEl } from './utils';
+import type { Options, Placement } from '@popperjs/core';
+import type { WatchStopHandle } from 'vue';
+import type { CreatePopperInstanceParams } from './types';
+
+defineOptions({
+  name: 'VriPopperContent'
+});
+
+interface Props {
+  boundariesPadding?: number;
+  fallbackPlacements?: Placement[];
+  gpuAcceleration?: boolean;
+  offset?: number;
+  placement?: Placement;
+  popperOptions?: Partial<Options>;
+  strategy?: 'fixed' | 'absolute';
+  id?: string;
+  style?: StyleValue;
+  className?: ClassType;
+  effect?: string;
+  visible?: boolean;
+  enterable?: boolean;
+  pure?: boolean;
+  focusOnShow?: boolean;
+  trapping?: boolean;
+  popperClass?: ClassType;
+  popperStyle?: StyleValue;
+  referenceEl?: HTMLElement;
+  triggerTargetEl?: HTMLElement;
+  stopPopperMouseEvent?: boolean;
+  ariaLabel?: string;
+  virtualTriggering?: boolean;
+  zIndex?: number;
+}
+
+const {
+  boundariesPadding = 0,
+  fallbackPlacements,
+  gpuAcceleration = true,
+  offset = 12,
+  placement = 'bottom',
+  popperOptions = {},
+  strategy = 'absolute',
+  id,
+  style,
+  className,
+  effect = 'dark',
+  visible,
+  enterable = true,
+  pure,
+  focusOnShow = false,
+  trapping = false,
+  popperClass,
+  popperStyle,
+  referenceEl,
+  triggerTargetEl,
+  stopPopperMouseEvent = true,
+  ariaLabel,
+  virtualTriggering,
+  zIndex
+} = defineProps<Props>();
+
+const emit = defineEmits(['mouseenter', 'mouseleave', 'focus', 'blur', 'close']);
+
+const instance = getCurrentInstance()!;
+
+const {
+  popperInstanceRef,
+  contentRef,
+  triggerRef,
+  role
+} = inject(POPPER_INJECTION_KEY, undefined)!;
+// const formItemContext = inject(formItemContextKey, undefined);
+const { nextZIndex } = useZIndex();
+const ns = useNamespace('popper');
+const popperContentRef = ref<HTMLElement>();
+const focusStartRef = ref<'container' | 'first' | HTMLElement>('first');
+const arrowRef = ref<HTMLElement>();
+const arrowOffset = ref<number>();
+
+provide(POPPER_CONTENT_INJECTION_KEY, {
+  arrowRef,
+  arrowOffset
+});
+
+// if (
+//   formItemContext &&
+//   (formItemContext.addInputId || formItemContext.removeInputId)
+// ) {
+//   // disallow auto-id from inside popper content
+//   provide(formItemContextKey, {
+//     ...formItemContext,
+//     addInputId: NOOP,
+//     removeInputId: NOOP
+//   });
+// }
+
+const contentZIndex = ref<number>(zIndex || nextZIndex());
+const trapped = ref<boolean>(false);
+
+let triggerTargetAriaStopWatch: WatchStopHandle | undefined = undefined;
+
+const computedReference = computed(() => unwrapMeasurableEl(referenceEl) || unref(triggerRef));
+
+const contentStyle = computed(() => [{ zIndex: unref(contentZIndex) }, popperStyle] as any);
+
+const contentClass = computed(() => [ns.b(), ns.is('pure', pure), ns.is(effect), popperClass]);
+
+const ariaModal = computed<string | undefined>(() => {
+  return role && role.value === 'dialog' ? 'false' : undefined;
+});
+
+const createPopperInstance = ({
+  referenceEl,
+  popperContentEl,
+  arrowEl
+}: CreatePopperInstanceParams) => {
+  const options: any = buildPopperOptions(instance.props, {
+    arrowEl,
+    arrowOffset: unref(arrowOffset)
+  });
+
+  return createPopper(referenceEl, popperContentEl, options);
+};
+
+const updatePopper = (shouldUpdateZIndex = true) => {
+  unref(popperInstanceRef)?.update();
+  shouldUpdateZIndex && (contentZIndex.value = zIndex || nextZIndex());
+};
+
+const togglePopperAlive = () => {
+  const monitorable = { name: 'eventListeners', enabled: visible };
+  unref(popperInstanceRef)?.setOptions?.((options) => ({
+    ...options,
+    modifiers: [...(options.modifiers || []), monitorable]
+  }));
+  updatePopper(false);
+  if (visible && focusOnShow) {
+    trapped.value = true;
+  } else if (visible === false) {
+    trapped.value = false;
+  }
+};
+
+const onFocusAfterTrapped = () => {
+  emit('focus');
+};
+
+const onFocusAfterReleased = (event: CustomEvent) => {
+  if (event.detail?.focusReason !== 'pointer') {
+    focusStartRef.value = 'first';
+    emit('blur');
+  }
+};
+
+const onFocusInTrap = (event: FocusEvent) => {
+  if (visible && !trapped.value) {
+    if (event.target) {
+      focusStartRef.value = event.target as typeof focusStartRef.value;
+    }
+    trapped.value = true;
+  }
+};
+
+const onFocusoutPrevented = (event: CustomEvent) => {
+  if (!trapping) {
+    if (event.detail.focusReason === 'pointer') {
+      event.preventDefault();
+    }
+    trapped.value = false;
+  }
+};
+
+const onReleaseRequested = () => {
+  trapped.value = false;
+  emit('close');
+};
+
+onMounted(() => {
+  let updateHandle: WatchStopHandle;
+  watch(
+    computedReference,
+    (referenceEl) => {
+      updateHandle?.();
+      const popperInstance = unref(popperInstanceRef);
+      popperInstance?.destroy?.();
+      if (referenceEl) {
+        const popperContentEl = unref(popperContentRef)!;
+        contentRef.value = popperContentEl;
+
+        popperInstanceRef.value = createPopperInstance({
+          referenceEl,
+          popperContentEl,
+          arrowEl: unref(arrowRef)
+        });
+
+        updateHandle = watch(
+          () => referenceEl.getBoundingClientRect(),
+          () => updatePopper(),
+          {
+            immediate: true
+          }
+        );
+      } else {
+        popperInstanceRef.value = undefined;
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+
+  watch(
+    () => triggerTargetEl,
+    (triggerTargetEl, prevTriggerTargetEl) => {
+      triggerTargetAriaStopWatch?.();
+      triggerTargetAriaStopWatch = undefined;
+
+      const el = unref(triggerTargetEl || popperContentRef.value);
+      const prevEl = unref(prevTriggerTargetEl || popperContentRef.value);
+
+      if (isElement(el)) {
+        triggerTargetAriaStopWatch = watch(
+          [role, () => ariaLabel, ariaModal, () => id],
+          (watches) => {
+            ['role', 'aria-label', 'aria-modal', 'id'].forEach((key, idx) => {
+              isNil(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]!);
+            });
+          },
+          { immediate: true }
+        );
+      }
+      if (prevEl !== el && isElement(prevEl)) {
+        ['role', 'aria-label', 'aria-modal', 'id'].forEach((key) => {
+          prevEl.removeAttribute(key);
+        });
+      }
+    },
+    { immediate: true }
+  );
+
+  watch(() => visible, togglePopperAlive, { immediate: true });
+
+  watch(
+    () =>
+      buildPopperOptions(instance.props, {
+        arrowEl: unref(arrowRef),
+        arrowOffset: unref(arrowOffset)
+      }),
+    (option) => popperInstanceRef.value?.setOptions(option)
+  );
+});
+
+onBeforeUnmount(() => {
+  triggerTargetAriaStopWatch?.();
+  triggerTargetAriaStopWatch = undefined;
+});
+
+defineExpose({
+  /**
+   * @description popper content element
+   */
+  popperContentRef,
+  /**
+   * @description popperjs instance
+   */
+  popperInstanceRef,
+  /**
+   * @description method for updating popper
+   */
+  updatePopper,
+
+  /**
+   * @description content style
+   */
+  contentStyle
+});
+</script>

package/src/web/popper/index.scss

@@ -0,0 +1,108 @@
+$name: popper;
+$popper: () !default;
+$popper: map-merge((
+  'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px),
+), $popper);
+
+@include b(popper) {
+  @include set-component-css-var('popper', $popper);
+}
+
+@include b(popper) {
+  position: absolute;
+  border-radius: getCssVar('popper', 'border-radius');
+  padding: 5px 11px;
+  z-index: 2000;
+  font-size: 12px;
+  line-height: 20px;
+  min-width: 10px;
+  word-wrap: break-word;
+  visibility: visible;
+
+  $arrow-selector: #{& + '__arrow'};
+
+  @include when(dark) {
+    color: getCssVar('bg-color');
+    background: getCssVar('text-color', 'primary');
+    border: 1px solid getCssVar('text-color', 'primary');
+
+    #{$arrow-selector}::before {
+      border: 1px solid getCssVar('text-color', 'primary');
+      background: getCssVar('text-color', 'primary');
+      right: 0;
+    }
+  }
+
+  @include when(light) {
+    background: getCssVar('bg-color', 'overlay');
+    border: 1px solid getCssVar('border-color', 'light');
+
+    #{$arrow-selector}::before {
+      border: 1px solid getCssVar('border-color', 'light');
+      background: getCssVar('bg-color', 'overlay');
+      right: 0;
+    }
+  }
+
+  @include when(pure) {
+    padding: 0;
+  }
+
+  @include e(arrow) {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    z-index: -1;
+
+    &::before {
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      z-index: -1;
+      content: ' ';
+      transform: rotate(45deg);
+      background: getCssVar('text-color', 'primary');
+      box-sizing: border-box;
+    }
+  }
+
+  $placements: (
+    'top': 'bottom',
+    'bottom': 'top',
+    'left': 'right',
+    'right': 'left',
+  );
+
+  @each $placement, $opposite in $placements {
+    &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
+      #{$opposite}: -5px;
+
+      &::before {
+        @if $placement == top {
+          border-bottom-right-radius: 2px;
+        }
+        @if $placement == bottom {
+          border-top-left-radius: 2px;
+        }
+        @if $placement == left {
+          border-top-right-radius: 2px;
+        }
+        @if $placement == right {
+          border-bottom-left-radius: 2px;
+        }
+      }
+    }
+  }
+
+  @each $placement,
+    $adjacency
+      in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
+  {
+    &[data-popper-placement^='#{$placement}'] {
+      #{$arrow-selector}::before {
+        border-#{$placement}-color: transparent !important;
+        border-#{$adjacency}-color: transparent !important;
+      }
+    }
+  }
+}

package/src/web/popper/index.ts

@@ -0,0 +1,11 @@
+import Popper from './popper.vue';
+
+import PopperArrow from './arrow.vue';
+import PopperTrigger from './trigger.vue';
+import PopperContent from './content.vue';
+
+export { PopperArrow, PopperTrigger, PopperContent, Popper };
+
+export * from './types';
+
+export type { Placement, Options } from '@popperjs/core';