vft 0.0.1 → 0.0.3

package/src/web/tooltip/tooltip.vue

@@ -1,270 +0,0 @@
-<template>
-  <popper ref="popperRef" :role="role">
-    <tooltip-trigger :disabled="disabled" :trigger="trigger" :trigger-keys="triggerKeys" :virtual-ref="virtualRef" :virtual-triggering="virtualTriggering">
-      <slot v-if="$slots.default" />
-    </tooltip-trigger>
-    <tooltip-content
-      ref="contentRef"
-      :aria-label="ariaLabel"
-      :boundaries-padding="boundariesPadding"
-      :content="content"
-      :disabled="disabled"
-      :effect="effect"
-      :enterable="enterable"
-      :fallback-placements="fallbackPlacements"
-      :hide-after="hideAfter"
-      :gpu-acceleration="gpuAcceleration"
-      :offset="offset"
-      :persistent="persistent"
-      :popper-class="popperClass"
-      :popper-style="popperStyle"
-      :placement="placement"
-      :popper-options="popperOptions"
-      :pure="pure"
-      :raw-content="rawContent"
-      :reference-el="referenceEl"
-      :trigger-target-el="triggerTargetEl"
-      :show-after="showAfter"
-      :strategy="strategy"
-      :teleported="teleported"
-      :transition="transition"
-      :virtual-triggering="virtualTriggering"
-      :z-index="zIndex"
-      :append-to="appendTo"
-    >
-      <slot name="content">
-        <span v-if="rawContent" v-html="content" />
-        <span v-else>{{ content }}</span>
-      </slot>
-      <popper-arrow v-if="showArrow" :arrow-offset="arrowOffset" />
-    </tooltip-content>
-  </popper>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import type { Options, Placement } from '@popperjs/core';
-import { EVENT_CODE } from 'element-plus';
-import { computed, onDeactivated, provide, readonly, ref, type StyleValue, unref, watch } from 'vue';
-import { type Measurable, Popper, PopperArrow } from '../popper';
-import { isBoolean } from '@vri/utils';
-import { useDelayedToggle, useId, usePopperContainer } from '../../use';
-import { TOOLTIP_INJECTION_KEY } from './tokens';
-import TooltipTrigger from './trigger.vue';
-import TooltipContent from './content.vue';
-import type { TooltipTriggerType } from './types';
-import { useTooltipModelToggle } from './utils';
-
-defineOptions({
-  name: 'vri-tooltip'
-});
-
-export interface ToolTipProps {
-  role?: 'dialog' | 'grid' | 'group' | 'listbox' | 'menu' | 'navigation' | 'tooltip' | 'tree';
-  showArrow?: boolean;
-  arrowOffset?: number;
-  virtualRef?: Measurable;
-  virtualTriggering?: boolean;
-  onMouseenter?: Function;
-  onMouseleave?: Function;
-  onClick?: Function;
-  onKeydown?: Function;
-  onFocus?: Function;
-  onBlur?: Function;
-  onContextmenu?: Function;
-  id?: string;
-  open?: boolean;
-  boundariesPadding?: number;
-  fallbackPlacements?: Placement[];
-  gpuAcceleration?: boolean;
-  offset?: number;
-  placement?: Placement;
-  popperOptions?: Partial<Options>;
-  strategy?: 'fixed' | 'absolute';
-  style?: StyleValue;
-  className?: ClassType;
-  effect?: 'light' | 'dark';
-  visible?: boolean;
-  enterable?: boolean;
-  pure?: boolean;
-  focusOnShow?: boolean;
-  trapping?: boolean;
-  popperClass?: ClassType;
-  popperStyle?: StyleValue;
-  referenceEl?: HTMLElement;
-  triggerTargetEl?: HTMLElement;
-  stopPopperMouseEvent?: boolean;
-  ariaLabel?: string;
-  zIndex?: number;
-  // ==
-  showAfter?: number;
-  hideAfter?: number;
-  appendTo?: HTMLElement | string;
-  content?: string;
-  rawContent?: boolean;
-  persistent?: boolean;
-  transition?: string;
-  teleported?: boolean;
-  disabled?: boolean;
-  trigger?: TooltipTriggerType;
-  triggerKeys?: string[];
-}
-
-const {
-  role = 'tooltip',
-  showArrow = true,
-  arrowOffset = 5,
-  boundariesPadding = 0,
-  fallbackPlacements,
-  gpuAcceleration = true,
-  offset = 12,
-  placement = 'bottom',
-  popperOptions = {},
-  strategy = 'absolute',
-  style,
-  appendTo,
-  className,
-  effect = 'dark',
-  visible = null,
-  enterable = true,
-  pure,
-  focusOnShow = false,
-  trapping = false,
-  popperClass,
-  popperStyle,
-  referenceEl,
-  triggerTargetEl,
-  stopPopperMouseEvent = true,
-  ariaLabel,
-  virtualTriggering,
-  zIndex,
-  showAfter = 0,
-  hideAfter = 200,
-  content = '',
-  rawContent = false,
-  persistent,
-  transition = 'vri-fade-in-linear',
-  teleported = true,
-  disabled,
-  trigger = 'hover',
-  triggerKeys = [EVENT_CODE.enter, EVENT_CODE.space],
-  virtualRef
-} = defineProps<ToolTipProps>();
-
-const emit = defineEmits(['before-show', 'before-hide', 'show', 'hide', 'open', 'close']);
-
-usePopperContainer();
-
-const id = useId();
-// TODO any is temporary, replace with `InstanceType<typeof ElPopper> | null` later
-const popperRef = ref<any>();
-// TODO any is temporary, replace with `InstanceType<typeof ElTooltipContent> | null` later
-const contentRef = ref<any>();
-
-const updatePopper = () => {
-  const popperComponent = unref(popperRef);
-  if (popperComponent) {
-    popperComponent.popperInstanceRef?.update();
-  }
-};
-const open = ref(false);
-const toggleReason = ref<Event>();
-
-const { show, hide, hasUpdateHandler } = useTooltipModelToggle({
-  indicator: open,
-  toggleReason
-});
-
-const { onOpen, onClose } = useDelayedToggle({
-  showAfter,
-  hideAfter,
-  open: show,
-  close: hide
-});
-
-const controlled = computed(() => isBoolean(visible) && !hasUpdateHandler.value);
-
-provide(TOOLTIP_INJECTION_KEY, {
-  controlled,
-  id,
-  open: readonly(open),
-  trigger,
-  onOpen: (event?: Event) => {
-    onOpen(event);
-  },
-  onClose: (event?: Event) => {
-    onClose(event);
-  },
-  onToggle: (event?: Event) => {
-    if (unref(open)) {
-      onClose(event);
-    } else {
-      onOpen(event);
-    }
-  },
-  onShow: () => {
-    emit('show', toggleReason.value);
-  },
-  onHide: () => {
-    emit('hide', toggleReason.value);
-  },
-  onBeforeShow: () => {
-    emit('before-show', toggleReason.value);
-  },
-  onBeforeHide: () => {
-    emit('before-hide', toggleReason.value);
-  },
-  updatePopper
-});
-
-watch(
-  () => disabled,
-  (disabled) => {
-    if (disabled && open.value) {
-      open.value = false;
-    }
-  }
-);
-
-const isFocusInsideContent = () => {
-  const popperContent: HTMLElement | undefined = contentRef.value?.contentRef?.popperContentRef;
-  return popperContent && popperContent.contains(document.activeElement);
-};
-
-onDeactivated(() => open.value && hide());
-
-defineExpose({
-  /**
-   * @description el-popper component instance
-   */
-  popperRef,
-  /**
-   * @description el-tooltip-content component instance
-   */
-  contentRef,
-  /**
-   * @description validate current focus event is trigger inside el-tooltip-content
-   */
-  isFocusInsideContent,
-  /**
-   * @description update el-popper component instance
-   */
-  updatePopper,
-  /**
-   * @description expose onOpen function to mange el-tooltip open state
-   */
-  onOpen,
-  /**
-   * @description expose onOpen function to mange el-tooltip open state
-   */
-  onClose,
-  /**
-   * @description expose hide function
-   */
-  hide
-});
-</script>
-
-<style lang="scss">
-@import '../popper/index.scss';
-</style>

package/src/web/tooltip/trigger.vue

@@ -1,119 +0,0 @@
-<template>
-  <popper-trigger
-    :id="id"
-    :virtual-ref="virtualRef"
-    :open="open"
-    :virtual-triggering="virtualTriggering"
-    :class="ns.e('trigger')"
-    @blur="onBlur"
-    @click="onClick"
-    @contextmenu="onContextMenu"
-    @focus="onFocus"
-    @mouseenter="onMouseenter"
-    @mouseleave="onMouseleave"
-    @keydown="onKeydown"
-  >
-    <slot />
-  </popper-trigger>
-</template>
-<script lang="ts" setup>
-import { EVENT_CODE } from '@vri/constants';
-import { inject, ref, unref } from 'vue';
-import type { Measurable } from '../popper';
-import { PopperTrigger } from '../popper';
-import { composeEventHandlers } from '../../utils';
-import { useNamespace } from '../../use';
-import { TOOLTIP_INJECTION_KEY } from './tokens';
-import { type TooltipTriggerType } from './types';
-import { whenTrigger } from './utils';
-
-defineOptions({
-  name: 'VriTooltipTrigger'
-});
-
-interface Props {
-  disabled?: boolean
-  trigger?: TooltipTriggerType
-  triggerKeys?: string[]
-  virtualRef?: Measurable
-  virtualTriggering?: boolean
-}
-
-const {
-  disabled,
-  trigger = 'hover',
-  triggerKeys = [EVENT_CODE.enter, EVENT_CODE.space],
-  virtualRef,
-  virtualTriggering
-
-} = defineProps<Props>();
-
-const ns = useNamespace('tooltip');
-const { controlled, id, open, onOpen, onClose, onToggle } = inject(
-  TOOLTIP_INJECTION_KEY,
-  undefined
-)!;
-
-// TODO any is temporary, replace with `OnlyChildExpose | null` later
-const triggerRef = ref<any>(null);
-
-const stopWhenControlledOrDisabled = () => {
-  if (unref(controlled) || disabled) {
-    return true;
-  }
-};
-
-const onMouseenter = composeEventHandlers(
-  stopWhenControlledOrDisabled,
-  whenTrigger(trigger, 'hover', onOpen)
-);
-const onMouseleave = composeEventHandlers(
-  stopWhenControlledOrDisabled,
-  whenTrigger(trigger, 'hover', onClose)
-);
-const onClick = composeEventHandlers(
-  stopWhenControlledOrDisabled,
-  whenTrigger(trigger, 'click', (e) => {
-    // distinguish left click
-    if ((e as MouseEvent).button === 0) {
-      onToggle(e);
-    }
-  })
-);
-
-const onFocus = composeEventHandlers(
-  stopWhenControlledOrDisabled,
-  whenTrigger(trigger, 'focus', onOpen)
-);
-
-const onBlur = composeEventHandlers(
-  stopWhenControlledOrDisabled,
-  whenTrigger(trigger, 'focus', onClose)
-);
-
-const onContextMenu = composeEventHandlers(
-  stopWhenControlledOrDisabled,
-  whenTrigger(trigger, 'contextmenu', (e: Event) => {
-    e.preventDefault();
-    onToggle(e);
-  })
-);
-
-const onKeydown = composeEventHandlers(
-  stopWhenControlledOrDisabled,
-  (e: KeyboardEvent) => {
-    const { code } = e;
-    if (triggerKeys.includes(code)) {
-      e.preventDefault();
-      onToggle(e);
-    }
-  }
-);
-
-defineExpose({
-  /**
-   * @description trigger element
-   */
-  triggerRef
-});
-</script>

package/src/web/tooltip/types.ts

@@ -1,56 +0,0 @@
-import type { Options, Placement } from '@popperjs/core';
-import type { StyleValue } from 'vue';
-import type { Measurable } from '../popper';
-
-export type TooltipTriggerType = 'hover' | 'focus' | 'click' | 'contextmenu';
-
-export interface ToolTipProps {
-  role?: 'dialog' | 'grid' | 'group' | 'listbox' | 'menu' | 'navigation' | 'tooltip' | 'tree';
-  showArrow?: boolean;
-  arrowOffset?: number;
-  virtualRef?: Measurable;
-  virtualTriggering?: boolean;
-  onMouseenter?: Function;
-  onMouseleave?: Function;
-  onClick?: Function;
-  onKeydown?: Function;
-  onFocus?: Function;
-  onBlur?: Function;
-  onContextmenu?: Function;
-  id?: string;
-  open?: boolean;
-  boundariesPadding?: number;
-  fallbackPlacements?: Placement[];
-  gpuAcceleration?: boolean;
-  offset?: number;
-  placement?: Placement;
-  popperOptions?: Partial<Options>;
-  strategy?: 'fixed' | 'absolute';
-  style?: StyleValue;
-  className?: ClassType;
-  effect?: 'light' | 'dark';
-  visible?: boolean;
-  enterable?: boolean;
-  pure?: boolean;
-  focusOnShow?: boolean;
-  trapping?: boolean;
-  popperClass?: ClassType;
-  popperStyle?: StyleValue;
-  referenceEl?: HTMLElement;
-  triggerTargetEl?: HTMLElement;
-  stopPopperMouseEvent?: boolean;
-  ariaLabel?: string;
-  zIndex?: number;
-  // ==
-  showAfter?: number;
-  hideAfter?: number;
-  appendTo?: HTMLElement | string;
-  content?: string;
-  rawContent?: boolean;
-  persistent?: boolean;
-  transition?: string;
-  teleported?: boolean;
-  disabled?: boolean;
-  trigger?: TooltipTriggerType;
-  triggerKeys?: string[];
-}

package/src/web/tooltip/utils.ts

@@ -1,20 +0,0 @@
-import { isArray } from '@vri/utils';
-import { createModelToggleComposable } from 'element-plus';
-import type { TooltipTriggerType } from './types';
-
-export type Arrayable<T> = T | T[];
-
-export const isTriggerType = (trigger: Arrayable<TooltipTriggerType>, type: TooltipTriggerType) => {
-  if (isArray(trigger)) {
-    return trigger.includes(type);
-  }
-  return trigger === type;
-};
-
-export const whenTrigger = (trigger: any, type: TooltipTriggerType, handler: (e: Event) => void) => {
-  return (e: Event) => {
-    isTriggerType(trigger, type) && handler(e);
-  };
-};
-
-export const { useModelToggle: useTooltipModelToggle } = createModelToggleComposable('visible' as const);

package/src/web/transition/collapse-transition.vue

@@ -1,73 +0,0 @@
-<template>
-  <transition :name="ns.b()" v-on="on">
-    <slot />
-  </transition>
-</template>
-<script lang="ts" setup>
-import { type RendererElement } from 'vue';
-import { useNamespace } from '../../use';
-
-const ns = /* hoist-static*/ useNamespace('collapse-transition');
-
-defineOptions({
-	name: ns.b()
-});
-
-const on = {
-  beforeEnter(el: RendererElement) {
-    if (!el.dataset) el.dataset = {};
-
-    el.dataset.oldPaddingTop = el.style.paddingTop;
-    el.dataset.oldPaddingBottom = el.style.paddingBottom;
-
-    el.style.maxHeight = 0;
-    el.style.paddingTop = 0;
-    el.style.paddingBottom = 0;
-  },
-
-  enter(el: RendererElement) {
-    el.dataset.oldOverflow = el.style.overflow;
-    if (el.scrollHeight !== 0) {
-      el.style.maxHeight = `${el.scrollHeight}px`;
-      el.style.paddingTop = el.dataset.oldPaddingTop;
-      el.style.paddingBottom = el.dataset.oldPaddingBottom;
-    } else {
-      el.style.maxHeight = 0;
-      el.style.paddingTop = el.dataset.oldPaddingTop;
-      el.style.paddingBottom = el.dataset.oldPaddingBottom;
-    }
-
-    el.style.overflow = 'hidden';
-  },
-
-  afterEnter(el: RendererElement) {
-    el.style.maxHeight = '';
-    el.style.overflow = el.dataset.oldOverflow;
-  },
-
-  beforeLeave(el: RendererElement) {
-    if (!el.dataset) el.dataset = {};
-    el.dataset.oldPaddingTop = el.style.paddingTop;
-    el.dataset.oldPaddingBottom = el.style.paddingBottom;
-    el.dataset.oldOverflow = el.style.overflow;
-
-    el.style.maxHeight = `${el.scrollHeight}px`;
-    el.style.overflow = 'hidden';
-  },
-
-  leave(el: RendererElement) {
-    if (el.scrollHeight !== 0) {
-      el.style.maxHeight = 0;
-      el.style.paddingTop = 0;
-      el.style.paddingBottom = 0;
-    }
-  },
-
-  afterLeave(el: RendererElement) {
-    el.style.maxHeight = '';
-    el.style.overflow = el.dataset.oldOverflow;
-    el.style.paddingTop = el.dataset.oldPaddingTop;
-    el.style.paddingBottom = el.dataset.oldPaddingBottom;
-  }
-};
-</script>

package/src/web/transition/index.ts

@@ -1,5 +0,0 @@
-import CollapseTransition from './collapse-transition.vue';
-
-export {
-  CollapseTransition
-};

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@vri/tsconfig/tsconfig.web.json",
-  "compilerOptions": {
-    "typeRoots": ["node_modules/@types", "types"],
-    "types": ["vite/client", "node", "unplugin-vue-macros/macros-global"]
-  },
-  "include": ["src", "types", "node_modules/@vri/types"]
-}