vft 0.0.1

package/src/web/tooltip/tooltip.vue

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

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

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

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

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

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

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "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"]
+}

package/types/component.ts

@@ -0,0 +1 @@
+export type ComponentSize = number | string | 'large' | 'small' | '';