vft 0.0.1

package/src/common/icon/iconfont/iconfont.css

@@ -0,0 +1,334 @@
+@font-face {
+  font-family: "vicon"; /* Project id 2250128 */
+  src: url('//at.alicdn.com/t/c/font_2250128_z5kfrf8moz7.woff2?t=1675775733770') format('woff2'),
+  url('//at.alicdn.com/t/c/font_2250128_z5kfrf8moz7.woff?t=1675775733770') format('woff'),
+  url('//at.alicdn.com/t/c/font_2250128_z5kfrf8moz7.ttf?t=1675775733770') format('truetype');
+}
+
+.vicon {
+  font-family: "vicon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.vi-category:before {
+  content: "\e615";
+}
+
+.vi-tag:before {
+  content: "\e631";
+}
+
+.vi-arrow-downs:before {
+  content: "\e609";
+}
+
+.vi-more:before {
+  content: "\e63b";
+}
+
+.vi-arrow-lefts:before {
+  content: "\e6c6";
+}
+
+.vi-arrow-rights:before {
+  content: "\e6c9";
+}
+
+.vi-date:before {
+  content: "\e697";
+}
+
+.vi-user-fill:before {
+  content: "\e63c";
+}
+
+.vi-link:before {
+  content: "\e61a";
+}
+
+.vi-exit:before {
+  content: "\e7cb";
+}
+
+.vi-search:before {
+  content: "\e623";
+}
+
+.vi-star:before {
+  content: "\e63e";
+}
+
+.vi-vip:before {
+  content: "\e70c";
+}
+
+.vi-new:before {
+  content: "\e70d";
+}
+
+.vi-hot:before {
+  content: "\e70e";
+}
+
+.vi-reset:before {
+  content: "\e710";
+}
+
+.vi-tip:before {
+  content: "\e714";
+}
+
+.vi-full-screen:before {
+  content: "\e690";
+}
+
+.vi-exit-screen:before {
+  content: "\e695";
+}
+
+.vi-desktop:before {
+  content: "\e6be";
+}
+
+.vi-sort:before {
+  content: "\e741";
+}
+
+.vi-sorts:before {
+  content: "\e742";
+}
+
+.vi-phone:before {
+  content: "\e748";
+}
+
+.vi-mini-program:before {
+  content: "\e749";
+}
+
+.vi-shrink:before {
+  content: "\e74c";
+}
+
+.vi-enlarge:before {
+  content: "\e74d";
+}
+
+.vi-txt:before {
+  content: "\e75b";
+}
+
+.vi-file:before {
+  content: "\e75d";
+}
+
+.vi-html:before {
+  content: "\e75c";
+}
+
+.vi-zip:before {
+  content: "\e75f";
+}
+
+.vi-exc:before {
+  content: "\e760";
+}
+
+.vi-pdf:before {
+  content: "\e761";
+}
+
+.vi-ppt:before {
+  content: "\e762";
+}
+
+.vi-word:before {
+  content: "\e763";
+}
+
+.vi-weixin:before {
+  content: "\e76a";
+}
+
+.vi-app:before {
+  content: "\e771";
+}
+
+.vi-safe:before {
+  content: "\e727";
+}
+
+.vi-view:before {
+  content: "\e747";
+}
+
+.vi-no-view:before {
+  content: "\e75a";
+}
+
+.vi-close-full:before {
+  content: "\e75e";
+}
+
+.vi-back-top:before {
+  content: "\aa";
+}
+
+.vi-arrow-up:before {
+  content: "\e746";
+}
+
+.vi-arrow-down:before {
+  content: "\e7b2";
+}
+
+.vi-fill-error:before {
+  content: "\e65f";
+}
+
+.vi-fill-warning:before {
+  content: "\e6eb";
+}
+
+.vi-fill-success:before {
+  content: "\e73b";
+}
+
+.vi-new-page:before {
+  content: "\e7ab";
+}
+
+.vi-close-left:before {
+  content: "\e9dc";
+}
+
+.vi-close-right:before {
+  content: "\e9db";
+}
+
+.vi-refresh:before {
+  content: "\e628";
+}
+
+.vi-close-all:before {
+  content: "\e612";
+}
+
+.vi-close-other:before {
+  content: "\e68c";
+}
+
+.vi-arrow-right:before {
+  content: "\e743";
+}
+
+.vi-arrow-left:before {
+  content: "\e745";
+}
+
+.vi-copy:before {
+  content: "\e744";
+}
+
+.vi-setting-web:before {
+  content: "\e608";
+}
+
+.vi-loading1:before {
+  content: "\e69d";
+}
+
+.vi-success:before {
+  content: "\e80f";
+}
+
+.vi-fail:before {
+  content: "\e652";
+}
+
+.vi-delete:before {
+  content: "\e810";
+}
+
+.vi--shijian:before {
+  content: "\e614";
+}
+
+.vi--award:before {
+  content: "\e627";
+}
+
+.vi-book:before {
+  content: "\e607";
+}
+
+.vi--loading:before {
+  content: "\e962";
+}
+
+.vi-fangda:before {
+  content: "\e621";
+}
+
+.vi-add:before {
+  content: "\e678";
+}
+
+.vi-sangedian:before {
+  content: "\e64f";
+}
+
+.vi-guanbiquanping:before {
+  content: "\e64b";
+}
+
+.vi-quanping:before {
+  content: "\e637";
+}
+
+.vi-collapse:before {
+  content: "\e603";
+}
+
+.vi-item:before {
+  content: "\e67f";
+}
+
+.vi-home:before {
+  content: "\e60c";
+}
+
+.vi-quanxian:before {
+  content: "\e635";
+}
+
+.vi-weibiaoti-:before {
+  content: "\e616";
+}
+
+.vi-admin:before {
+  content: "\e600";
+}
+
+.vi-xiaochengxu:before {
+  content: "\e602";
+}
+
+.vi-user:before {
+  content: "\e851";
+}
+
+.vi-lock:before {
+  content: "\e605";
+}
+
+.vi-laba:before {
+  content: "\e60b";
+}
+
+.vi-close:before {
+  content: "\e6ab";
+}

package/src/common/icon/index.scss

@@ -0,0 +1,31 @@
+@use './iconfont/iconfont.css';
+
+$name: icon;
+
+@include set-root-css-vars($name, $icon);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  position: relative;
+  display: inline-block;
+  font: normal normal normal 14px/1 iconfont;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  transition: all 0.2s ease;
+  color: getCompCssVar('text-color');
+
+  &::before {
+    display: inline-block;
+  }
+
+  &__image {
+    display: block;
+    width: 1em;
+    height: 1em;
+    object-fit: contain;
+  }
+}

package/src/common/icon/index.ts

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

package/src/common/icon/index.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { computed, type CSSProperties, inject } from 'vue';
+import { addUnit } from '@vri/utils';
+import { useNamespace } from '../../use';
+import Badge from '../badge/index.vue';
+import { CONFIG_PROVIDER_KEY } from '../config-provider/types';
+
+interface IconProps {
+  /** 是否显示图标右上角小红点 */
+  dot?: boolean;
+  /** 图标名称或图片链接 */
+  icon: string;
+  /** 图标大小 */
+  size?: Numberish;
+  /** 图标右上角徽标的内容 */
+  badge?: Numberish;
+  /** 图标颜色 */
+  color?: string;
+  /** 类名前缀，用于使用自定义图标 */
+  classPrefix?: string;
+  spin?: boolean;
+  cursor?: boolean;
+  scale?: number
+}
+
+const emit = defineEmits(['click']);
+
+const { color, size, icon, classPrefix, spin, cursor, scale } = defineProps<IconProps>();
+
+const ns = /* hoist-static*/ useNamespace('icon');
+
+defineOptions({
+  name: ns.b()
+});
+
+const style = computed(() => {
+  const _style: CSSProperties = {};
+  if (color) {
+    _style['color'] = color;
+  }
+  if (size) {
+    _style['fontSize'] = addUnit(size);
+  }
+  if (spin) {
+    _style['animation'] = 'vri-rotate 1s linear 0s infinite';
+  }
+  if (cursor) {
+    _style['cursor'] = 'pointer';
+  }
+  if (scale) {
+    _style.transform = 'scale(0.8)';
+  }
+  return _style;
+});
+
+const isImage = (name?: string) => name?.includes('/');
+const isImageIcon = isImage(icon);
+
+const config = inject(CONFIG_PROVIDER_KEY, null);
+
+const _classPrefix = computed(() => classPrefix || config?.value?.iconPrefix);
+const classes = computed(() => (isImageIcon ? '' : [icon.startsWith('vi-') ? 'vicon' : 'iconfont', `${_classPrefix.value || ''}${icon}`]));
+</script>
+
+<template>
+  <Badge isIcon @click="emit('click')" :spin="spin" :dot="dot" :class="[ns.b(), classes]" :style="style" :content="badge">
+    <slot />
+    <img v-if="isImageIcon" :class="ns.e('image')" :src="icon" alt="" />
+  </Badge>
+</template>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/src/common/icon/types.ts

@@ -0,0 +1,16 @@
+export interface IconProps {
+  /** 是否显示图标右上角小红点 */
+  dot?: boolean;
+  /** 图标名称或图片链接 */
+  icon: string;
+  /** 图标大小 */
+  size?: Numberish;
+  /** 图标右上角徽标的内容 */
+  badge?: Numberish;
+  /** 图标颜色 */
+  color?: string;
+  /** 类名前缀，用于使用自定义图标 */
+  classPrefix?: string;
+  spin?: boolean;
+  cursor?: boolean;
+}

package/src/common/index.ts

@@ -0,0 +1,6 @@
+export * from './badge';
+export * from './icon';
+export * from './config-provider';
+export * from './message';
+export * from './overlay';
+export * from './clamp';

package/src/common/message/index.ts

@@ -0,0 +1,5 @@
+import Message from './method';
+
+export const VriMessage = Message;
+export default VriMessage;
+

package/src/common/message/instance.ts

@@ -0,0 +1,29 @@
+import { shallowReactive } from 'vue';
+import type { ComponentInternalInstance, VNode } from 'vue';
+import type { MessageHandler, MessageProps } from './message';
+
+export type MessageContext = {
+  id: string;
+  vnode: VNode;
+  handler: MessageHandler;
+  vm: ComponentInternalInstance;
+  props: MessageProps;
+};
+
+export const instances: MessageContext[] = shallowReactive([]);
+
+export const getInstance = (id: string) => {
+  const idx = instances.findIndex((instance) => instance.id === id);
+  const current = instances[idx];
+  let prev: MessageContext | undefined;
+  if (idx > 0) {
+    prev = instances[idx - 1];
+  }
+  return { current, prev };
+};
+
+export const getLastOffset = (id: string): number => {
+  const { prev } = getInstance(id);
+  if (!prev) return 0;
+  return prev.vm.exposed!.bottom.value;
+};

package/src/common/message/message.scss

@@ -0,0 +1,108 @@
+$name: message;
+
+@include set-root-css-vars($name, $message);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b(message) {
+  width: fit-content;
+  max-width: calc(100% - 32px);
+  box-sizing: border-box;
+  border-radius: getCompCssVar('border-radius');
+  border-width: getCompCssVar('border-width');
+  border-style: solid;
+  border-color: getCompCssVar('border-color');
+  position: fixed;
+  left: 50%;
+  top: 20px;
+  transform: translateX(-50%);
+  background-color: getCompCssVar('bg-color');
+  transition: opacity getCssVar('transition-duration'), transform 0.4s, top 0.4s;
+  padding: getCompCssVar('padding');
+  display: flex;
+  align-items: center;
+
+  @include when(center) {
+    justify-content: center;
+  }
+
+  @include when(closable) {
+    .#{$namespace}-message__content {
+      padding-right: 31px;
+    }
+  }
+
+  p {
+    margin: 0;
+  }
+
+  @each $type in (success, info, warning, error) {
+    @include m($type) {
+      @include css-var-from-global(
+        ('message', 'bg-color'),
+        ('color', $type, 'light-9')
+      );
+      @include css-var-from-global(
+        ('message', 'border-color'),
+        ('color', $type, 'light-8')
+      );
+      @include css-var-from-global(('message', 'text-color'), ('color', $type));
+
+      .#{$namespace}-message__content {
+        color: getCompCssVar('text-color');
+        overflow-wrap: anywhere;
+      }
+    }
+
+
+    & .#{$namespace}-message-icon--#{$type} {
+      @include set-component-css-var('icon', ('text-color':getCompCssVar('text-color')));
+
+      color: getCompCssVar('text-color');
+    }
+  }
+
+  @include e(icon) {
+    margin-right: 10px;
+  }
+
+  .#{$namespace}-message__badge {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+  }
+
+  @include e(content) {
+    padding: 0;
+    font-size: 14px;
+    line-height: 1;
+    &:focus {
+      outline-width: 0;
+    }
+  }
+
+  & .#{$namespace}-message__closeBtn {
+    position: absolute;
+    top: 50%;
+    right: 19px;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: getCssVar('message', 'close-icon-color');
+    font-size: getCssVar('message', 'close-size');
+
+    &:focus {
+      outline-width: 0;
+    }
+    &:hover {
+      color: getCssVar('message', 'close-hover-color');
+    }
+  }
+}
+
+.#{$namespace}-message-fade-enter-from,
+.#{$namespace}-message-fade-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -100%);
+}

package/src/common/message/message.ts

@@ -0,0 +1,80 @@
+import { isClient } from '@vueuse/core';
+import type { AppContext, VNode } from 'vue';
+
+export const messageTypes = ['success', 'info', 'warning', 'error'] as const;
+export type MessageType = 'success' | 'warning' | 'info' | 'error';
+
+export interface MessageConfigContext {
+  /** 可同时显示的消息最大数量 */
+  max?: number;
+}
+
+// props 默认赋值
+export const messageDefaults = {
+  customClass: '',
+  center: false,
+  dangerouslyUseHTMLString: false,
+  duration: 2000,
+  icon: undefined,
+  id: '',
+  message: '',
+  onClose: undefined,
+  showClose: false,
+  type: 'info',
+  offset: 16,
+  zIndex: 0,
+  grouping: true,
+  repeatNum: 1,
+  appendTo: isClient ? document.body : (undefined as never)
+};
+
+export interface MessageProps {
+  customClass?: string;
+  center?: boolean;
+  dangerouslyUseHTMLString?: boolean;
+  duration?: number;
+  icon?: string;
+  id?: string;
+  message?: string | VNode | (() => VNode);
+  onClose?: Function;
+  showClose?: boolean;
+  type?: MessageType;
+  offset?: number;
+  zIndex?: number;
+  grouping?: boolean;
+  repeatNum?: number;
+}
+
+// 排除 id 增加 appendTo
+export type MessageOptions = Partial<
+  Omit<MessageProps, 'id'> & {
+    appendTo?: HTMLElement | string;
+  }
+>;
+
+export type MessageParams = MessageOptions | MessageOptions['message'];
+
+export type MessageParamsNormalized = Omit<MessageProps, 'id'> & {
+  appendTo: HTMLElement;
+};
+
+export type MessageOptionsWithType = Omit<MessageOptions, 'type'>;
+export type MessageParamsWithType = MessageOptionsWithType | MessageOptions['message'];
+
+export interface MessageHandler {
+  close: () => void;
+}
+
+export type MessageFn = {
+  (options?: MessageParams, appContext?: null | AppContext): MessageHandler;
+  closeAll(type?: MessageType): void;
+};
+
+export type MessageTypedFn = (options?: MessageParamsWithType, appContext?: null | AppContext) => MessageHandler;
+
+export interface Message extends MessageFn {
+  success: MessageTypedFn;
+  warning: MessageTypedFn;
+  info: MessageTypedFn;
+  error: MessageTypedFn;
+}