vft 0.0.1

package/src/web/icon-text/index.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { addUnit, singleAttrToObj } from '@vri/utils';
+import { computed } from 'vue';
+import { Icon as VIcon } from '../../common/icon';
+import { type IconProps } from '../../common/icon/types';
+import { useNamespace } from '../../use';
+
+interface IconTextProps {
+  text: string;
+  icon: IconProps;
+  color?: string;
+  hoverColor?: string;
+  distance?: Numberish;
+  reverse?: boolean;
+}
+
+const {
+  text, icon, color = '#434343', hoverColor, reverse, distance
+} = defineProps<IconTextProps>();
+
+const ns = /* hoist-static*/ useNamespace('icon-text');
+
+defineOptions({
+  name: ns.b()
+});
+
+const emit = defineEmits(['click']);
+
+const _hoverColor = computed(() => {
+  return hoverColor ? hoverColor : color;
+});
+
+const _icon = computed(() => {
+  return singleAttrToObj(icon, 'icon', { size: 16, color }) as IconProps;
+});
+
+const distanceStyle = computed(() => {
+  return reverse ? { marginLeft: addUnit(distance) } : { marginRight: addUnit(distance) };
+});
+</script>
+
+<template>
+  <span :class="ns.b()" @click="emit('click')">
+    <v-icon v-if="!reverse" v-bind="_icon" :style="distanceStyle"/>
+    {{ text }}
+    <v-icon v-if="reverse" v-bind="_icon" :style="distanceStyle"/>
+  </span>
+</template>
+
+<style lang="scss">
+$name: icon-text;
+$icon-text: () !default;
+$icon-text: map-merge((
+  'text-color': white,
+), $icon-text);
+
+@include set-root-css-vars($name, $icon-text);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  display: flex;
+  align-items: center;
+
+  color: v-bind('color');
+
+  &:hover {
+    color: v-bind('_hoverColor');
+
+    i {
+      color: v-bind('_hoverColor') !important;
+    }
+  }
+}
+</style>

package/src/web/image/index.scss

@@ -0,0 +1,46 @@
+%size {
+  width: 100%;
+  height: 100%;
+}
+
+@include b(image) {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  @include e(inner) {
+    @extend %size !optional;
+    vertical-align: top;
+    opacity: 1;
+    @include when(loading) {
+      opacity: 0;
+    }
+  }
+
+  @include e(wrapper) {
+    @extend %size !optional;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  @include e(placeholder) {
+    @extend %size !optional;
+    background: getCssVar('fill-color', 'light');
+  }
+
+  @include e(error) {
+    @extend %size !optional;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    background: getCssVar('fill-color', 'light');
+    color: getCssVar('text-color', 'placeholder');
+    vertical-align: middle;
+  }
+
+  @include e(preview) {
+    cursor: pointer;
+  }
+}

package/src/web/image/index.ts

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

package/src/web/image/index.vue

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

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

package/src/web/index.ts

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