vft 0.0.1 → 0.0.2

package/src/web/image/index.vue

@@ -1,251 +0,0 @@
-<script lang="ts" setup>
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import type { ImgFitType } from './types';
-import {
-  computed,
-  nextTick,
-  onMounted,
-  useAttrs as useRawAttrs,
-  watch,
-  ref
-} from 'vue';
-import { isClient, useEventListener, useThrottleFn } from '@vueuse/core';
-import { useNamespace } from '../../use';
-import { useAttrs } from '@vri/use';
-import {
-  getScrollContainer,
-  isElement,
-  isInContainer,
-  isString
-} from '@vri/utils';
-
-import type { CSSProperties, StyleValue } from 'vue';
-
-interface Props {
-  hideOnClickModal?: boolean
-  src?: string
-  fit?: ImgFitType
-  loading?: 'eager' | 'lazy'
-  lazy?: boolean
-  scrollContainer?: string | HTMLElement
-  previewSrcList?: string[]
-  previewTeleported?: boolean
-  zIndex?: number
-  initialIndex?: number
-  infinite?: boolean
-  closeOnPressEscape?: boolean
-}
-
-const {
-  hideOnClickModal = false,
-  src = '',
-  fit = '',
-  previewTeleported = false,
-  initialIndex = 0,
-  infinite = true,
-  closeOnPressEscape = true,
-  previewSrcList = [],
-  loading,
-  lazy,
-  scrollContainer
-} = defineProps<Props>();
-
-const emit = defineEmits(['load', 'error', 'switch', 'close', 'show']);
-
-let prevOverflow = '';
-
-const ns = useNamespace('image');
-const rawAttrs = useRawAttrs();
-const attrs = useAttrs();
-
-const imageSrc = ref<string | undefined>();
-const hasLoadError = ref(false);
-const isLoading = ref(true);
-const showViewer = ref(false);
-const container = ref<HTMLElement>();
-const _scrollContainer = ref<HTMLElement | Window>();
-
-const supportLoading = isClient && 'loading' in HTMLImageElement.prototype;
-let stopScrollListener: (() => void) | undefined;
-let stopWheelListener: (() => void) | undefined;
-
-const containerStyle = computed(() => rawAttrs.style as StyleValue);
-
-const imageStyle = computed<CSSProperties>(() => {
-  if (isClient && fit) {
-    return { objectFit: fit };
-  }
-  return {};
-});
-
-const preview = computed(() => {
-  return Array.isArray(previewSrcList) && previewSrcList.length > 0;
-});
-
-const imageIndex = computed(() => {
-  let previewIndex = initialIndex;
-  if (initialIndex > previewSrcList.length - 1) {
-    previewIndex = 0;
-  }
-  return previewIndex;
-});
-
-const isManual = computed(() => {
-  if (loading === 'eager') return false;
-  return (!supportLoading && loading === 'lazy') || lazy;
-});
-
-const loadImage = () => {
-  if (!isClient) return;
-
-  // reset status
-  isLoading.value = true;
-  hasLoadError.value = false;
-  imageSrc.value = src;
-};
-
-function handleLoad (event: Event) {
-  isLoading.value = false;
-  hasLoadError.value = false;
-  emit('load', event);
-}
-
-function handleError (event: Event) {
-  isLoading.value = false;
-  hasLoadError.value = true;
-  emit('error', event);
-}
-
-function handleLazyLoad () {
-  if (isInContainer(container.value, _scrollContainer.value)) {
-    loadImage();
-    removeLazyLoadListener();
-  }
-}
-
-const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200);
-
-async function addLazyLoadListener () {
-  if (!isClient) return;
-
-  await nextTick();
-
-  if (isElement(scrollContainer)) {
-    _scrollContainer.value = scrollContainer;
-  } else if (isString(scrollContainer) && scrollContainer !== '') {
-    _scrollContainer.value =
-      document.querySelector<HTMLElement>(scrollContainer) ?? undefined;
-  } else if (container.value) {
-    _scrollContainer.value = getScrollContainer(container.value);
-  }
-
-  if (_scrollContainer.value) {
-    stopScrollListener = useEventListener(
-      _scrollContainer,
-      'scroll',
-      lazyLoadHandler
-    );
-    setTimeout(() => handleLazyLoad(), 100);
-  }
-}
-
-function removeLazyLoadListener () {
-  if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return;
-
-  stopScrollListener?.();
-  _scrollContainer.value = undefined;
-}
-
-function wheelHandler (e: WheelEvent) {
-  if (!e.ctrlKey) return;
-
-  if (e.deltaY < 0) {
-    e.preventDefault();
-    return false;
-  } else if (e.deltaY > 0) {
-    e.preventDefault();
-    return false;
-  }
-}
-
-function clickHandler () {
-  // don't show viewer when preview is false
-  if (!preview.value) return;
-
-  stopWheelListener = useEventListener('wheel', wheelHandler, {
-    passive: false
-  });
-
-  // prevent body scroll
-  prevOverflow = document.body.style.overflow;
-  document.body.style.overflow = 'hidden';
-  showViewer.value = true;
-  emit('show');
-}
-
-function closeViewer () {
-  stopWheelListener?.();
-  document.body.style.overflow = prevOverflow;
-  showViewer.value = false;
-  emit('close');
-}
-
-function switchViewer (val: number) {
-  emit('switch', val);
-}
-
-watch(
-  () => src,
-  () => {
-    if (isManual.value) {
-      // reset status
-      isLoading.value = true;
-      hasLoadError.value = false;
-      removeLazyLoadListener();
-      addLazyLoadListener();
-    } else {
-      loadImage();
-    }
-  }
-);
-
-onMounted(() => {
-  if (isManual.value) {
-    addLazyLoadListener();
-  } else {
-    loadImage();
-  }
-});
-</script>
-
-<template>
-  <div ref="container" :class="[ns.b(), $attrs.class]" :style="containerStyle">
-    <img
-      v-if="imageSrc !== undefined && !hasLoadError"
-      v-bind="attrs"
-      :src="imageSrc"
-      :loading="loading"
-      :style="imageStyle"
-      :class="[
-        ns.e('inner'),
-        preview && ns.e('preview'),
-        isLoading && ns.is('loading'),
-      ]"
-      @click="clickHandler"
-      @load="handleLoad"
-      @error="handleError"
-    />
-    <div v-if="isLoading || hasLoadError" :class="ns.e('wrapper')">
-      <slot v-if="isLoading" name="placeholder">
-        <div :class="ns.e('placeholder')" />
-      </slot>
-      <slot v-else-if="hasLoadError" name="error">
-        <div :class="ns.e('error')">加载失败</div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@import "./index.scss";
-</style>

package/src/web/image/types.ts

@@ -1 +0,0 @@
-export type ImgFitType = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';

package/src/web/index.ts

@@ -1,33 +0,0 @@
-export * from '../common';
-export * from './layouts';
-export * from './logo';
-export * from './tag';
-export * from './tabs';
-export * from './divider';
-export * from './menu';
-export * from './context-menu';
-export * from './loading';
-export * from './multiple-tabs';
-export * from './result';
-export * from './link';
-export * from './transition';
-export * from './back-top';
-export * from './input';
-// export * from './qrcode';
-export * from './full-screen';
-export * from './image';
-export * from './tooltip';
-export * from './select';
-export * from './cascader';
-export * from './scrollbar';
-export * from './popover';
-export * from './avatar';
-export * from './avatar';
-export * from './icon-text';
-export * from './nodata';
-export * from './descriptions';
-export * from './exception';
-export * from './side-menu';
-export * from './empty';
-
-export * from './pagination';

package/src/web/input/index.ts

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