vft 0.0.1 → 0.0.3

package/src/web/popover/index.vue

@@ -1,161 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-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

@@ -1,45 +0,0 @@
-<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

@@ -1,311 +0,0 @@
-<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

@@ -1,108 +0,0 @@
-$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

@@ -1,11 +0,0 @@
-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';