vft 0.0.1

package/src/common/message/message.vue

@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import { EVENT_CODE } from '@vri/constants';
+import { isObject } from '@vri/utils';
+import { useResizeObserver, useTimeoutFn } from '@vueuse/core';
+import { useEventListener } from '@vri/use';
+import type { CSSProperties } from 'vue';
+import { computed, onMounted, ref, type VNode, watch } from 'vue';
+import { useNamespace } from '../../use';
+import { getLastOffset } from './instance';
+import Icon from '../icon/index.vue';
+import type { MessageType } from './message';
+
+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;
+}
+
+const props = defineProps<MessageProps>();
+
+defineEmits(['destroy']);
+
+const ns = useNamespace('message');
+
+// 消息框 ref
+const messageRef = ref<HTMLDivElement>();
+// 是否可见
+const visible = ref(false);
+const height = ref(0);
+
+let stopTimer: (() => void) | undefined = undefined;
+
+const iconCfgMap = new Map([
+  ['success', { icon: 'vi-fill-success' }],
+  ['error', { icon: 'vi-fill-error' }],
+  ['warning', { icon: 'vi-fill-warning' }]
+]);
+
+const iconCfg = computed(() => {
+  const _iconCfg = props.icon ? isObject(props.icon) ? props.icon : { icon: props.icon } : '';
+
+  return _iconCfg || iconCfgMap.get(props.type) || '';
+});
+
+const typeClass = computed(() => {
+  const type = props.type;
+  return { [ns.bm('icon', type)]: type };
+});
+
+const lastOffset = computed(() => getLastOffset(props.id));
+// 偏移量
+const offset = computed(() => props.offset + lastOffset.value);
+const bottom = computed((): number => height.value + offset.value);
+const customStyle = computed<CSSProperties>(() => ({
+  top: `${offset.value}px`,
+  zIndex: props.zIndex
+}));
+
+function startTimer () {
+  if (props.duration === 0) return;
+  ({ stop: stopTimer } = useTimeoutFn(() => {
+    close();
+  }, props.duration));
+}
+
+function clearTimer () {
+  stopTimer?.();
+}
+
+function close () {
+  visible.value = false;
+}
+
+// 监听退出键关闭
+function keydown ({ code }: KeyboardEvent) {
+  if (code === EVENT_CODE.esc) {
+    close();
+  }
+}
+
+onMounted(() => {
+  startTimer();
+  visible.value = true;
+});
+
+watch(
+  () => props.repeatNum,
+  () => {
+    clearTimer();
+    startTimer();
+  }
+);
+
+// 监听键盘事件
+useEventListener(document, 'keydown', keydown);
+
+// 监听 messageRef 消息框的大小变化
+useResizeObserver(messageRef, () => {
+  height.value = messageRef.value!.getBoundingClientRect().height;
+});
+
+defineExpose({
+  visible,
+  bottom,
+  close
+});
+</script>
+
+<template>
+  <transition
+    :name="ns.b('fade')"
+    @before-leave="onClose"
+    @after-leave="$emit('destroy')"
+  >
+    <div
+      v-show="visible"
+      :id="id"
+      ref="messageRef"
+      :class="[
+        ns.b(),
+        { [ns.m(type)]: type && !icon },
+        ns.is('center', center),
+        ns.is('closable', showClose),
+        customClass,
+      ]"
+      :style="customStyle"
+      role="alert"
+      @mouseenter="clearTimer"
+      @mouseleave="startTimer"
+    >
+      <div v-if="iconCfg" :class="[ns.e('icon'), typeClass]">
+        <icon v-bind="iconCfg" />
+      </div>
+      <slot>
+        <p v-if="!dangerouslyUseHTMLString" :class="ns.e('content')">
+          {{ message }}
+        </p>
+        <!-- Caution here, message could've been compromised, never use user's input as message -->
+        <p v-else :class="ns.e('content')" v-html="message" />
+      </slot>
+      <div v-if="showClose" :class="ns.e('closeBtn')" @click.stop="close">
+        <icon icon="vi-close"/>
+      </div>
+    </div>
+  </transition>
+</template>
+
+
+<style lang="scss">
+@import "./message.scss";
+</style>

package/src/common/message/method.ts

@@ -0,0 +1,172 @@
+import { createVNode, render } from 'vue';
+import { isClient } from '@vueuse/core';
+import { isElement, isFunction, isNumber, isString, isVNode } from '@vri/utils';
+import { useZIndex } from '../../use';
+import { debugWarn } from '../../utils';
+import MessageConstructor from './message.vue';
+import { messageDefaults, messageTypes } from './message';
+import { instances } from './instance';
+import { messageConfig } from '../config-provider/types';
+import type { MessageContext } from './instance';
+import type { AppContext } from 'vue';
+import type { Message, MessageFn, MessageHandler, MessageParamsNormalized, MessageParams, MessageType } from './message';
+
+let seed = 1;
+
+// 获取最终处理后的 message 的参数
+const normalizeOptions = (params?: MessageParams) => {
+  const options = !params || isString(params) || isVNode(params) || isFunction(params) ? { message: params } : params;
+
+  // 合并传入的数据与默认的值
+  const normalized = {
+    ...messageDefaults,
+    ...options
+  };
+
+  // appendTo 默认指定为 body
+  if (!normalized.appendTo) {
+    normalized.appendTo = document.body;
+  } else if (isString(normalized.appendTo)) {
+    let appendTo = document.querySelector<HTMLElement>(normalized.appendTo);
+    // 当外部传入了 appendTo 但是我们获取到的 appendTo 不是一个元素节点，抛出警告，然后继续默认指定为 body
+    if (!isElement(appendTo)) {
+      debugWarn('VriMessage', 'the appendTo option is not an HTMLElement. Falling back to document.body.');
+      appendTo = document.body;
+    }
+
+    normalized.appendTo = appendTo;
+  }
+
+  return normalized as MessageParamsNormalized;
+};
+
+// 关闭 message
+const closeMessage = (instance: MessageContext) => {
+  const idx = instances.indexOf(instance);
+  if (idx === -1) return;
+
+  instances.splice(idx, 1);
+  const { handler } = instance;
+  handler.close();
+};
+
+/**
+ * @description 创建一个 message 实例
+ * @author wfd
+ * @date 2022/10/31 15:37
+ * @example
+ * @param {any} appendTo
+ * @param {Omit<, "appendTo">} options
+ * @param {AppContext | null} context
+ * @returns {MessageContext}
+ */
+const createMessage = ({ appendTo, ...options }: MessageParamsNormalized, context?: AppContext | null): MessageContext => {
+  // z-index 的设置
+  const { nextZIndex } = useZIndex();
+  // 自定义 message 的 id
+  const id = `message_${seed++}`;
+  // 获取用户自定义的 onClose
+  const userOnClose = options.onClose;
+
+  const container = document.createElement('div');
+
+  const props = {
+    ...options,
+    zIndex: nextZIndex() + options.zIndex!,
+    id,
+    onClose: () => {
+      userOnClose?.();
+      closeMessage(instance);
+    },
+
+    // 清除 message element 防止内存泄漏
+    onDestroy: () => {
+      render(null, container);
+    }
+  };
+  // 创建一个虚拟节点，children 的用处是为了 message 可能是函数或者虚拟节点
+  const vnode = createVNode(MessageConstructor, props, isFunction(props.message) || isVNode(props.message) ? { default: isFunction(props.message) ? props.message : () => props.message } : null);
+
+  // 设置 context
+  vnode.appContext = context || message._context;
+  // 渲染虚拟dom
+  render(vnode, container);
+
+  // 将渲染好的 dom 添加到 appendTo 上，默认是添加到 body 上
+  appendTo.appendChild(container.firstElementChild!);
+
+  const vm = vnode.component!;
+
+  const handler: MessageHandler = {
+    // instead of calling the onClose function directly,
+    // setting this value so that we can have the full lifecycle
+    // for out component, so that all closing steps will not be skipped.
+    close: () => {
+      // 将 message 组件暴露出来的 visible 设置为 false
+      vm.exposed!.visible.value = false;
+    }
+  };
+
+  // 返回这个实例
+  const instance: MessageContext = {
+    id,
+    vnode,
+    vm,
+    handler,
+    props: (vnode.component as any).props
+  };
+
+  return instance;
+};
+
+// message 初始化相关
+const message: MessageFn & Partial<Message> & { _context: AppContext | null } = (options = {}, context) => {
+  if (!isClient) return { close: () => undefined };
+
+  // 判断设置最大的 message 展示的数量
+  if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {
+    return { close: () => undefined };
+  }
+  // 获取最终处理后的 message 的参数
+  const normalized = normalizeOptions(options);
+
+  // 开启分组，message 实例存在
+  if (normalized.grouping && instances.length) {
+    // 找出当前实例中展示的 message 与现在 options 参数中 message 一致的 message 实例
+    const instance = instances.find(({ vnode: vm }) => vm.props?.message === normalized.message);
+    // repeatNum ++
+    if (instance) {
+      instance.props.repeatNum += 1;
+      instance.props.type = normalized.type;
+      return instance.handler;
+    }
+  }
+  // 创建一个 message 实例
+  const instance = createMessage(normalized, context);
+  // 将 message 实例 push 至数组中
+  instances.push(instance);
+
+  return instance.handler;
+};
+
+//
+messageTypes.forEach((type) => {
+  message[type] = (options = {}, appContext) => {
+    const normalized = normalizeOptions(options);
+    return message({ ...normalized, type }, appContext);
+  };
+});
+
+// 关闭所有 message
+export function closeAll(type?: MessageType): void {
+  for (const instance of instances) {
+    if (!type || type === instance.props.type) {
+      instance.handler.close();
+    }
+  }
+}
+
+message.closeAll = closeAll;
+message._context = null;
+
+export default message as Message;

package/src/common/overlay/index.scss

@@ -0,0 +1,14 @@
+@include b(overlay) {
+  #{& + '-root'} {
+    height: 0;
+  }
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  height: 100%;
+  background-color: getCssVar('overlay-color', 'lighter');
+  overflow: auto;
+}

package/src/common/overlay/index.ts

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

package/src/common/overlay/index.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { createVNode, useSlots, type CSSProperties, h, renderSlot } from 'vue';
+import { useNamespace } from '../../use';
+import { NOOP } from '@vue/shared';
+
+enum PatchFlags {
+  TEXT = 1,
+  CLASS = 2,
+  STYLE = 4,
+  PROPS = 8,
+  FULL_PROPS = 16,
+  HYDRATE_EVENTS = 32,
+  STABLE_FRAGMENT = 64,
+  KEYED_FRAGMENT = 128,
+  UNKEYED_FRAGMENT = 256,
+  NEED_PATCH = 512,
+  DYNAMIC_SLOTS = 1024,
+  HOISTED = -1,
+  BAIL = -2
+}
+
+interface Props {
+  mask?: boolean;
+  onlyNode?: boolean
+  customMaskEvent?: boolean;
+  overlayClass?: any;
+  zIndex?: Numberish;
+}
+
+const useSameTarget = (handleClick?: (e: MouseEvent) => void) => {
+  if (!handleClick) {
+    return { onClick: NOOP, onMousedown: NOOP, onMouseup: NOOP };
+  }
+
+  let mousedownTarget = false;
+  let mouseupTarget = false;
+
+  const onClick = (e: MouseEvent) => {
+    // if and only if
+    if (mousedownTarget && mouseupTarget) {
+      handleClick(e);
+    }
+    mousedownTarget = mouseupTarget = false;
+  };
+
+  const onMousedown = (e: MouseEvent) => {
+    // marking current mousedown target.
+    mousedownTarget = e.target === e.currentTarget;
+  };
+  const onMouseup = (e: MouseEvent) => {
+    // marking current mouseup target.
+    mouseupTarget = e.target === e.currentTarget;
+  };
+
+  return { onClick, onMousedown, onMouseup };
+};
+
+const { mask, customMaskEvent, overlayClass, zIndex, onlyNode } = defineProps<Props>();
+
+const ns = /* hoist-static*/ useNamespace('overlay');
+
+defineOptions({
+  name: ns.b()
+});
+
+const emit = defineEmits(['click']);
+
+const slots = useSlots();
+
+const onMaskClick = (e: MouseEvent) => {
+  emit('click', e);
+};
+
+const { onClick, onMousedown, onMouseup } = useSameTarget(customMaskEvent ? undefined : onMaskClick);
+
+defineRender(() => {
+  return mask
+    ? createVNode(
+        'div',
+        {
+          class: [ns.b(), overlayClass],
+          style: {
+            zIndex: zIndex
+          },
+          onClick,
+          onMousedown,
+          onMouseup
+        },
+        [renderSlot(slots, 'default')],
+        PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS,
+        ['onClick', 'onMouseup', 'onMousedown']
+      )
+    : onlyNode ? h(
+      'div',
+      {},
+      [renderSlot(slots, 'default')]
+    ) : h(
+        'div',
+        {
+          class: overlayClass,
+          style: {
+            zIndex: zIndex,
+            position: 'fixed',
+            top: '0px',
+            right: '0px',
+            bottom: '0px',
+            left: '0px'
+          } as CSSProperties
+        },
+        [renderSlot(slots, 'default')]
+      );
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/src/constants/comp.ts

@@ -0,0 +1 @@
+export const COMP_TYPE = ['success', 'info', 'warning', 'danger', ''];

package/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './comp';

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './web';
+export * from './common';
+export * from './page';

package/src/page/index.ts

@@ -0,0 +1 @@
+export * from './page-wrapper';

package/src/page/page-wrapper/index.scss

@@ -0,0 +1,31 @@
+$name: page-wrapper;
+$page-wrpper: () !default;
+$page-wrpper: map-merge((
+  'text-color': white,
+), $page-wrpper);
+
+@include set-root-css-vars($name, $page-wrpper);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  height: 60px;
+
+  @include e(header) {
+    display: flex;
+    height: 100%;
+    padding-left: 20px;
+    align-items: center;
+    border-bottom: 8px solid #eee;
+
+    @include e(title) {
+      font-size: 20px;
+    }
+  }
+
+  @include e(content) {
+    padding: 20px 20px 0 20px;
+  }
+}

package/src/page/page-wrapper/index.ts

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

package/src/page/page-wrapper/index.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useNamespace } from '../../use';
+import './index.scss';
+
+interface Props {
+  title?: string;
+}
+
+const {
+  title
+} = defineProps<Props>();
+
+const ns = /* hoist-static*/ useNamespace('page-wrapper');
+
+defineOptions({
+  name: ns.b()
+});
+
+const { getTitle } = useRouterHelper();
+</script>
+
+<template>
+  <div :class="ns.b()">
+    <div :class="ns.e('header')">
+      <span :class="ns.e('title')">{{ title || getTitle }}</span>
+    </div>
+    <div :class="ns.e('content')">
+      <slot />
+    </div>
+  </div>
+</template>