vft 0.0.1 → 0.0.3

package/src/web/tag/index.scss

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

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

package/src/web/tag/index.vue

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

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

package/src/web/tooltip/content.vue

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

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

package/src/web/tooltip/tokens.ts

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