vft 0.0.1

package/src/web/avatar/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <span :class="avatarClass" :style="sizeStyle">
+    <img
+      v-if="(src || srcSet) && !hasLoadError"
+      :src="src"
+      :alt="alt"
+      :srcset="srcSet"
+      :style="fitStyle"
+      @error="handleError"
+    />
+    <Icon v-else-if="icon" />
+    <slot v-else />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { addUnit, isNumber, isString } from '@vri/utils';
+import type { CSSProperties } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { Icon, type IconProps } from '../../common';
+import { useNamespace } from '../../use';
+
+interface Props {
+  size?: number | 'large' | 'default' | 'small'
+  shape?: 'circle' | 'square'
+  icon?: IconProps
+  src?: string
+  alt?: string
+  srcSet?: string
+  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+}
+
+const {
+  size = '',
+  shape = 'circle',
+  icon,
+  src,
+  alt,
+  srcSet,
+  fit = 'cover'
+} = defineProps<Props>();
+
+const emit = defineEmits(['error']);
+
+const ns = useNamespace('avatar');
+
+const hasLoadError = ref(false);
+
+const avatarClass = computed(() => {
+  const classList = [ns.b()];
+  if (isString(size)) classList.push(ns.m(size));
+  if (icon) classList.push(ns.m('icon'));
+  if (shape) classList.push(ns.m(shape));
+  return classList;
+});
+
+const sizeStyle = computed(() => {
+  return isNumber(size)
+    ? (ns.cssVarBlock({
+      size: addUnit(size) || ''
+    }) as CSSProperties)
+    : undefined;
+});
+
+const fitStyle = computed<CSSProperties>(() => ({
+  objectFit: fit
+}));
+
+// need reset hasLoadError to false if src changed
+watch(
+  () => src,
+  () => (hasLoadError.value = false)
+);
+
+function handleError (e: Event) {
+  hasLoadError.value = true;
+  emit('error', e);
+}
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

package/src/web/back-top/index.scss

@@ -0,0 +1,35 @@
+$name: back-top;
+$back-top: () !default;
+$back-top: map-merge((
+  'bg-color': getCssVar('bg-color', 'overlay'),
+  'text-color': getCssVar('primary-color'),
+  'hover-bg-color': getCssVar('border-color-extra-light'),
+), $back-top);
+
+@include b($name) {
+  @include set-component-css-var('backtop', $back-top);
+
+  position: fixed;
+  background-color: getCssVar('backtop', 'bg-color');
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: getCssVar('backtop', 'text-color');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  box-shadow: getCssVar('box-shadow', 'lighter');
+  cursor: pointer;
+  z-index: 5;
+
+  &:hover {
+    background-color: getCssVar('backtop', 'hover-bg-color');
+  }
+
+  @include e(icon) {
+    font-size: 20px;
+  }
+}
+
+

package/src/web/back-top/index.ts

@@ -0,0 +1,3 @@
+import BackTop from './index.vue';
+
+export { BackTop };

package/src/web/back-top/index.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { singleAttrToObj } from '@vri/utils';
+import { type IconProps, Icon } from '../../common';
+import { useBackTop } from './use-back-top';
+import { useNamespace } from '../../use';
+import { computed, getCurrentInstance } from 'vue';
+
+interface BackTopProps {
+  /** 滚动高度达到此参数值才出现 */
+  visibilityHeight?: number
+  /** 触发滚动的对象 */
+  target?: string
+  /** 控制其显示位置，距离页面右边距 */
+  right?: number
+  /** 控制其显示位置，距离页面底部距离 */
+  bottom?: number
+  /** 滚动 icon dom  */
+  icon?: IconProps
+}
+
+const {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  visibilityHeight = 200,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  target,
+  right = 40,
+  bottom = 40,
+  icon = 'vi-back-top',
+} = defineProps<BackTopProps>();
+
+const emit = defineEmits(['click']);
+
+const ns = /* hoist-static*/ useNamespace('back-top');
+
+defineOptions({
+	name: ns.b()
+});
+
+const instance = getCurrentInstance()!;
+
+const { handleClick, visible } = useBackTop(instance.props, emit, ns.b());
+
+const backTopStyle = computed(() => ({
+  right: `${right}px`,
+  bottom: `${bottom}px`
+}));
+
+const _icon = computed(() => {
+  return singleAttrToObj(icon, 'icon', {
+    color: 'black'
+  }) as IconProps;
+});
+</script>
+
+<template>
+  <transition :name="`${ns.namespace}-fade-in`">
+    <div
+      v-if="visible"
+      :style="backTopStyle"
+      :class="ns.b()"
+      @click.stop="handleClick"
+    >
+      <slot>
+        <Icon v-if="_icon?.icon" v-bind="_icon" />
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

package/src/web/back-top/types.ts

@@ -0,0 +1,14 @@
+import type { IconProps } from '../../common';
+
+export interface BackTopProps {
+  /** 滚动高度达到此参数值才出现 */
+  visibilityHeight?: number;
+  /** 触发滚动的对象 */
+  target?: string;
+  /** 控制其显示位置，距离页面右边距 */
+  right?: number;
+  /** 控制其显示位置，距离页面底部距离 */
+  bottom?: number;
+  /** 滚动 icon dom  */
+  icon?: IconProps;
+}

package/src/web/back-top/use-back-top.ts

@@ -0,0 +1,65 @@
+import { onMounted, ref, shallowRef } from 'vue';
+import { useEventListener, useThrottleFn, useTimeoutFn } from '@vueuse/core';
+import { throwError } from '../../utils';
+import { type BackTopProps } from './types';
+
+export const useBackTop = (props: BackTopProps, emit: Function, componentName: string) => {
+  const el = shallowRef<HTMLElement>();
+  const container = shallowRef<Document | HTMLElement>();
+  const visible = ref(false);
+  
+  const scrollToTop = () => {
+    if (!el.value) return;
+    el.value.scrollTo(({ left: 0, top: 0, behavior: 'smooth' }));
+  };
+  
+  const handleScroll = () => {
+    if (el.value) visible.value = el.value.scrollTop >= props.visibilityHeight!;
+  };
+  
+  const handleClick = (event: MouseEvent) => {
+    scrollToTop();
+    emit('click', event);
+  };
+  
+  const handleScrollThrottled = useThrottleFn(handleScroll, 300, true);
+  
+  useEventListener(container, 'scroll', handleScrollThrottled);
+  
+  onMounted(() => {
+    container.value = document;
+    el.value = document.documentElement;
+    
+    if (props.target) {
+      useTimeoutFn(() => {
+        el.value = document.querySelector<HTMLElement>(props.target!) ?? undefined;
+        if (!el.value) {
+          throwError(componentName, `target does not exist: ${props.target}`);
+        }
+        container.value = el.value;
+      }, 10);
+    }
+  });
+  
+  // listener scroll target，if scroll target change，the scrollTop dom visible need also change
+  watch(
+    () => props.target,
+    (val) => {
+      nextTick(() => {
+        if (val) {
+          el.value = document.querySelector<HTMLElement>(val) ?? undefined;
+          if (!el.value) {
+            throwError(componentName, `target does not exist: ${val}`);
+          }
+          if (el.value) visible.value = el.value.scrollTop >= props.visibilityHeight!;
+          container.value = el.value;
+        }
+      });
+    }
+  );
+  
+  return {
+    visible,
+    handleClick
+  };
+};

package/src/web/cascader/index.scss

@@ -0,0 +1,214 @@
+@mixin cascader-tag-normal($background-color) {
+  .el-tag {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    margin: 2px 0 2px 6px;
+    text-overflow: ellipsis;
+    background: $background-color;
+
+    &:not(.is-hit) {
+      border-color: transparent;
+    }
+
+    > span {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .#{$namespace}-icon-close {
+      flex: none;
+      background-color: getCssVar('text-color', 'placeholder');
+      color: getCssVar('color-white');
+
+      &:hover {
+        background-color: getCssVar('text-color', 'secondary');
+      }
+    }
+  }
+}
+
+@include b(cascader) {
+  @include set-component-css-var('cascader', $cascader);
+
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  font-size: getCssVar('font-size', 'base');
+  line-height: map-get($input-height, 'default');
+  outline: none;
+
+  &:not(.is-disabled):hover {
+    .#{$namespace}-input__wrapper {
+      cursor: pointer;
+      box-shadow: 0 0 0 1px getCssVar('input', 'hover-border-color') inset;
+    }
+  }
+
+  .#{$namespace}-input {
+    display: flex;
+    cursor: pointer;
+
+    .#{$namespace}-input__inner {
+      text-overflow: ellipsis;
+      cursor: pointer;
+
+      &::selection {
+        outline: none;
+      }
+    }
+
+    .#{$namespace}-input__suffix-inner {
+      .#{$namespace}-icon {
+        height: calc(100% - 2px);
+
+        svg {
+          vertical-align: middle;
+        }
+      }
+    }
+
+    .icon-arrow-down {
+      transition: transform getCssVar('transition-duration');
+      font-size: 14px;
+
+      @include when(reverse) {
+        transform: rotateZ(180deg);
+      }
+    }
+
+    .icon-circle-close:hover {
+      color: var(
+        #{getCssVarName('input', 'clear-hover-color')},
+        map-get($input, 'clear-hover-color')
+      );
+    }
+
+    @include when(focus) {
+      .#{$namespace}-input__wrapper {
+        box-shadow: 0 0 0 1px
+          var(
+            #{getCssVarName('input', 'focus-border-color')},
+            map-get($input, 'focus-border-color')
+          )
+          inset;
+      }
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      font-size: map-get($input-font-size, $size);
+      line-height: map-get($input-height, $size);
+    }
+  }
+
+  @include when(disabled) {
+    .#{$namespace}-cascader__label {
+      z-index: calc(getCssVar('index', 'normal') + 1);
+      color: getCssVar('disabled-text-color');
+    }
+  }
+
+  @include e(dropdown) {
+    @include set-component-css-var('cascader', $cascader);
+  }
+
+  @include e(dropdown) {
+    font-size: getCssVar('cascader-menu-font-size');
+    border-radius: getCssVar('cascader-menu-radius');
+
+    @include picker-popper(
+      getCssVar('cascader-menu-fill'),
+      getCssVar('cascader-menu-border'),
+      getCssVar('cascader-menu-shadow')
+    );
+
+    &.#{$namespace}-popper {
+      box-shadow: getCssVar('cascader-menu-shadow');
+    }
+  }
+
+  @include e(tags) {
+    position: absolute;
+    left: 0;
+    right: 30px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-wrap: wrap;
+    line-height: normal;
+    text-align: left;
+    box-sizing: border-box;
+    @include cascader-tag-normal(getCssVar('cascader-tag-background'));
+  }
+
+  @include e(collapse-tags) {
+    white-space: normal;
+    z-index: getCssVar('index-normal');
+    @include cascader-tag-normal(getCssVar('fill-color'));
+  }
+
+  @include e(suggestion-panel) {
+    border-radius: getCssVar('cascader-menu', 'radius');
+  }
+
+  @include e(suggestion-list) {
+    max-height: 204px;
+    margin: 0;
+    padding: 6px 0;
+    font-size: getCssVar('font-size', 'base');
+    color: getCssVar('cascader-menu', 'text-color');
+    text-align: center;
+  }
+
+  @include e(suggestion-item) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 34px;
+    padding: 0 15px;
+    text-align: left;
+    outline: none;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      background: getCssVar('cascader-node', 'background-hover');
+    }
+
+    &.is-checked {
+      color: getCssVar('cascader', 'menu-selected-text-color');
+      font-weight: bold;
+    }
+
+    > span {
+      margin-right: 10px;
+    }
+  }
+
+  @include e(empty-text) {
+    margin: 10px 0;
+    color: getCssVar('cascader', 'color-empty');
+  }
+
+  @include e(search-input) {
+    flex: 1;
+    height: 24px;
+    min-width: 60px;
+    margin: 2px 0 2px map-get($input-padding-horizontal, 'default')-$border-width;
+    padding: 0;
+    color: getCssVar('cascader', 'menu-text-color');
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+
+    background: transparent;
+
+    &::placeholder {
+      // two input overlap
+      color: transparent;
+    }
+  }
+}

package/src/web/cascader/index.ts

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