vft 0.0.1

package/src/web/tag/index.scss

@@ -0,0 +1,182 @@
+$name: tag;
+
+@include set-root-css-vars($name, $tag);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+$tag-border-width: 1px;
+
+$tag-icon-span-gap: () !default;
+$tag-icon-span-gap: map-merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $tag-icon-span-gap
+);
+
+@function returnVarList($var, $type: 'primary') {
+  $list: ('fill-color', 'blank');
+  @if $var != false {
+    $list: ($type, 'color', $var);
+  }
+  @return $list;
+}
+// false mean --el-color-white
+@mixin genTheme($backgroundColorWeight, $borderColorWeight, $hoverColorWeight) {
+  @include css-var-from-global(
+    ('tag', 'bg-color'),
+    returnVarList($backgroundColorWeight)
+  );
+  @include css-var-from-global(
+    ('tag', 'border-color'),
+    returnVarList($borderColorWeight)
+  );
+  @include css-var-from-global(
+    ('tag', 'hover-color'),
+    returnVarList($hoverColorWeight)
+  );
+
+  @each $type in $types {
+    &.#{bem('tag', '', $type)} {
+      @include css-var-from-global(
+        ('tag', 'bg-color'),
+        returnVarList($backgroundColorWeight, $type)
+      );
+      @include css-var-from-global(
+        ('tag', 'border-color'),
+        returnVarList($borderColorWeight, $type)
+      );
+      @include css-var-from-global(
+        ('tag', 'hover-color'),
+        returnVarList($hoverColorWeight, $type)
+      );
+    }
+  }
+}
+
+@include b(tag) {
+  @include genTheme('light-9', 'light-8', '');
+
+  @include css-var-from-global(('tag', 'text-color'), ('primary', 'color'));
+  @each $type in $types {
+    &.#{bem('tag', '', $type)} {
+      @include css-var-from-global(('tag', 'text-color'), ($type, 'color'));
+    }
+  }
+
+  @include when(hit) {
+    border-color: getCssVar('primary', 'color');
+  }
+  @include when(round) {
+    border-radius: getCssVar('tag', 'border-radius-rounded');
+  }
+
+  .#{$namespace}-tag__close {
+    color: getCssVar('tag', 'text-color');
+    &:hover {
+      color: getCssVar('color-white');
+      background-color: getCssVar('tag-hover-color');
+    }
+  }
+
+  background-color: getCssVar('tag-bg-color');
+  border-color: getCssVar('tag-border-color');
+  color: getCssVar('tag-text-color');
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  height: map-get($tag-height, 'default');
+  padding: 0 map-get($tag-padding, 'default') - $border-width;
+
+  font-size: getCssVar('tag-font-size');
+  line-height: 1;
+  border-width: $tag-border-width;
+  border-style: solid;
+  border-radius: getCssVar('tag-border-radius');
+  box-sizing: border-box;
+  white-space: nowrap;
+
+  @include set-css-var-value('icon-size', 14px);
+
+  $svg-margin-size: 1px;
+  .#{$namespace}-icon {
+    cursor: pointer;
+    color: inherit;
+    font-size: calc(#{getCssVar('icon-size')} - #{$svg-margin-size * 2});
+  }
+
+  .#{$namespace}-tag__close {
+    @include flex-center();
+    border-radius: 50%;
+    height: getCssVar('icon-size');
+    width: getCssVar('icon-size');
+    margin-left: map-get($tag-icon-span-gap, 'default');
+  }
+
+  @include m(dark) {
+    @include genTheme('', '', 'light-3');
+    @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
+
+    @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
+    @each $type in $types {
+      &.#{bem('tag', '', $type)} {
+        @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
+      }
+    }
+  }
+
+  @include m(plain) {
+    @include genTheme(false, 'light-5', '');
+    @include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
+  }
+
+  &.is-closable {
+    padding-right: map-get($tag-icon-span-gap, 'default') - $border-width;
+  }
+
+  @include e(content) {
+    @include line-clamp(getCompCssVar('content-line-clamp-num'));
+    max-width: getCompCssVar('content-max-width');
+    white-space: break-spaces;
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      padding: 0 map-get($tag-padding, $size) - $tag-border-width;
+      height: map-get($tag-height, $size);
+
+      @include set-css-var-value(
+        'icon-size',
+        #{map-get($tag-icon-size, $size)}
+      );
+
+      .#{$namespace}-tag__close {
+        margin-left: map-get($tag-icon-span-gap, $size);
+      }
+
+      &.is-closable {
+        padding-right: map-get($tag-icon-span-gap, $size) - $border-width;
+      }
+    }
+  }
+
+  @include m(small) {
+    .#{$namespace}-icon-close {
+      transform: scale(0.8);
+    }
+  }
+
+  @each $type in $types {
+    &.#{bem('tag', '', $type)} {
+      @include when(hit) {
+        border-color: getCssVar($type, 'color');
+      }
+    }
+  }
+}

package/src/web/tag/index.ts

@@ -0,0 +1,5 @@
+import Tag from './index.vue';
+
+export { Tag };
+
+export * from './types';

package/src/web/tag/index.vue

@@ -0,0 +1,78 @@
+<script lang="tsx" setup>
+import { useSize } from 'element-plus';
+import { type ComponentSize } from '../../../types/component';
+import Icon from '../../common/icon/index.vue';
+import { computed, Transition } from 'vue';
+import { useNamespace } from '../../use';
+import './index.scss';
+import type { TagType } from './types';
+
+interface Props {
+  closable?: boolean;
+  type?: TagType;
+  hit?: boolean;
+  disableTransitions?: boolean;
+  color?: string;
+  size?: ComponentSize;
+  effect?: 'dark' | 'light' | 'plain';
+  round?: boolean;
+}
+
+const {
+  closable,
+  type,
+  hit,
+  disableTransitions = true,
+  color,
+  size,
+  effect = 'light',
+  round
+} = defineProps<Props>();
+
+const emit = defineEmits(['close', 'click']);
+const slots = useSlots();
+
+const tagSize = useSize();
+const ns = useNamespace('tag');
+const classes = computed(() => {
+  return [
+    ns.b(),
+    ns.is('closable', closable),
+    ns.m(type),
+    ns.m(tagSize.value),
+    ns.m(effect),
+    ns.is('hit', hit),
+    ns.is('round', round)
+  ];
+});
+
+// methods
+const handleClose = (event: MouseEvent) => {
+  emit('close', event);
+};
+
+const handleClick = (event: MouseEvent) => {
+  emit('click', event);
+};
+
+const renderTag = () => {
+  return <span class={classes.value}
+    style={{ backgroundColor: color }} onClick={handleClick}>
+    <span class={ns.e('content')}>
+      {slots.default?.()}
+    </span>
+    {
+      closable ? <div class={ns.e('close')} onClick={handleClose}>
+        <Icon icon="vi-close" />
+      </div> : ''
+    }
+  </span>;
+};
+
+defineRender(() => {
+  return disableTransitions ? renderTag() :
+    <Transition name={`${ns.namespace.value}-zoom-in-center`} appear>
+      {renderTag()}
+    </Transition>;
+});
+</script>

package/src/web/tag/types.ts

@@ -0,0 +1,2 @@
+export type TagType = 'success' | 'info' | 'warning' | 'danger' | ''
+

package/src/web/tooltip/content.vue

@@ -0,0 +1,239 @@
+<template>
+  <teleport :disabled="!teleported" :to="_appendTo">
+    <transition :name="transition" @after-leave="onTransitionLeave" @before-enter="onBeforeEnter" @after-enter="onAfterShow" @before-leave="onBeforeLeave">
+      <popper-content
+        v-if="shouldRender"
+        v-show="shouldShow"
+        :id="id"
+        ref="contentRef"
+        v-bind="$attrs"
+        :aria-label="ariaLabel"
+        :aria-hidden="ariaHidden"
+        :boundaries-padding="boundariesPadding"
+        :fallback-placements="fallbackPlacements"
+        :gpu-acceleration="gpuAcceleration"
+        :offset="offset"
+        :placement="placement"
+        :popper-options="popperOptions"
+        :strategy="strategy"
+        :effect="effect"
+        :enterable="enterable"
+        :pure="pure"
+        :popper-class="popperClass"
+        :popper-style="[popperStyle, contentStyle]"
+        :reference-el="referenceEl"
+        :trigger-target-el="triggerTargetEl"
+        :visible="shouldShow"
+        :z-index="zIndex"
+        @mouseenter="onContentEnter"
+        @mouseleave="onContentLeave"
+        @blur="onBlur"
+        @close="onClose"
+      >
+        <template v-if="!destroyed">
+          <slot />
+        </template>
+      </popper-content>
+    </transition>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { Options, Placement } from '@popperjs/core';
+import { computed, inject, onBeforeUnmount, ref, type StyleValue, unref, watch } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { usePopperContainerId } from '../../use';
+import { composeEventHandlers } from '../../utils';
+import { PopperContent } from '../popper';
+import { TOOLTIP_INJECTION_KEY } from './tokens';
+
+defineOptions({
+  name: 'VriTooltipContent',
+  inheritAttrs: false
+});
+
+interface Props {
+  boundariesPadding?: number;
+  fallbackPlacements?: Placement[];
+  gpuAcceleration?: boolean;
+  offset?: number;
+  placement?: Placement;
+  popperOptions?: Partial<Options>;
+  strategy?: 'fixed' | 'absolute';
+  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;
+  // ==
+  showAfter?: number;
+  hideAfter?: number;
+  appendTo?: HTMLElement | string;
+  content?: string;
+  rawContent?: boolean;
+  persistent?: boolean;
+  transition?: string;
+  teleported?: boolean;
+  disabled?: boolean;
+}
+
+const {
+  boundariesPadding = 0,
+  fallbackPlacements,
+  gpuAcceleration = true,
+  offset = 12,
+  placement = 'bottom',
+  popperOptions = {},
+  strategy = 'absolute',
+  style,
+  appendTo,
+  className,
+  effect = 'dark',
+  visible,
+  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
+} = defineProps<Props>();
+
+const { selector } = usePopperContainerId();
+// TODO any is temporary, replace with `InstanceType<typeof ElPopperContent> | null` later
+const contentRef = ref<any>(null);
+const destroyed = ref(false);
+const { controlled, id, open, trigger, onClose, onOpen, onShow, onHide, onBeforeShow, onBeforeHide } = inject(TOOLTIP_INJECTION_KEY, undefined)!;
+const persistentRef = computed(() => {
+  // For testing, we would always want the content to be rendered
+  // to the DOM, so we need to return true here.
+  if (process.env.NODE_ENV === 'test') {
+    return true;
+  }
+  return persistent;
+});
+
+onBeforeUnmount(() => {
+  destroyed.value = true;
+});
+
+const shouldRender = computed(() => {
+  return unref(persistentRef) ? true : unref(open);
+});
+
+const shouldShow = computed(() => {
+  return disabled ? false : unref(open);
+});
+
+const _appendTo = computed(() => {
+  return appendTo || selector.value;
+});
+
+const contentStyle = computed(() => (style ?? {}) as any);
+
+const ariaHidden = computed(() => !unref(open));
+
+const onTransitionLeave = () => {
+  onHide();
+};
+
+const stopWhenControlled = () => {
+  if (unref(controlled)) return true;
+};
+
+const onContentEnter = composeEventHandlers(stopWhenControlled, () => {
+  if (enterable && unref(trigger) === 'hover') {
+    onOpen();
+  }
+});
+
+const onContentLeave = composeEventHandlers(stopWhenControlled, () => {
+  if (unref(trigger) === 'hover') {
+    onClose();
+  }
+});
+
+const onBeforeEnter = () => {
+  contentRef.value?.updatePopper?.();
+  onBeforeShow?.();
+};
+
+const onBeforeLeave = () => {
+  onBeforeHide?.();
+};
+
+const onAfterShow = () => {
+  onShow();
+  stopHandle = onClickOutside(
+    computed(() => {
+      return contentRef.value?.popperContentRef;
+    }),
+    () => {
+      if (unref(controlled)) return;
+      const $trigger = unref(trigger);
+      if ($trigger !== 'hover') {
+        onClose();
+      }
+    }
+  );
+};
+
+const onBlur = () => {
+  if (!virtualTriggering) {
+    onClose();
+  }
+};
+
+let stopHandle: ReturnType<typeof onClickOutside>;
+
+watch(
+  () => unref(open),
+  (val) => {
+    if (!val) {
+      stopHandle?.();
+    }
+  },
+  {
+    flush: 'post'
+  }
+);
+
+watch(
+  () => content,
+  () => {
+    contentRef.value?.updatePopper?.();
+  }
+);
+
+defineExpose({
+  /**
+   * @description el-popper-content component instance
+   */
+  contentRef
+});
+</script>

package/src/web/tooltip/index.ts

@@ -0,0 +1,4 @@
+import Tooltip from './tooltip.vue';
+
+export * from './types';
+export { Tooltip };

package/src/web/tooltip/tokens.ts

@@ -0,0 +1,21 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export type Arrayable<T> = T | T[];
+export type TooltipTriggerType = 'hover' | 'focus' | 'click' | 'contextmenu';
+
+export type ElTooltipInjectionContext = {
+  controlled?: Ref<boolean>;
+  id?: Ref<string>;
+  open?: Ref<boolean>;
+  trigger?: Arrayable<TooltipTriggerType>;
+  onOpen?: (e?: Event) => void;
+  onClose?: (e?: Event) => void;
+  onToggle?: (e?: Event) => void;
+  onShow?: () => void;
+  onHide?: () => void;
+  onBeforeShow?: () => void;
+  onBeforeHide?: () => void;
+  updatePopper?: () => void;
+};
+
+export const TOOLTIP_INJECTION_KEY: InjectionKey<ElTooltipInjectionContext> = Symbol('vriTooltip');