vft 0.0.1 → 0.0.2

package/src/common/message/message.vue

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

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

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

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

package/src/common/overlay/index.vue

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

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

package/src/constants/index.ts

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

package/src/index.ts

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

package/src/page/index.ts

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

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

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

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

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

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