vft 0.0.1 → 0.0.2

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

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

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

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

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

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