vft 0.0.1 → 0.0.3

package/src/web/loading/loading.ts

@@ -1,156 +0,0 @@
-import { Transition, createApp, createVNode, h, reactive, ref, toRefs, vShow, withCtx, withDirectives } from 'vue';
-import { useNamespace } from '../../use';
-import { removeClass } from '@vri/utils';
-import './loading.scss';
-
-import type { LoadingOptionsResolved } from './types';
-
-export function createLoadingComponent(options: LoadingOptionsResolved) {
-  let afterLeaveTimer: number;
-
-  const ns = useNamespace('loading');
-  const afterLeaveFlag = ref(false);
-  const data = reactive({
-    ...options,
-    originalPosition: '',
-    originalOverflow: '',
-    visible: false
-  });
-  
-  function setText(text: string) {
-    data.text = text;
-  }
-  
-  watch(()=> data.visible, (val) => {
-    if (!val) {
-      close();
-    }
-  });
-
-  function destroySelf() {
-    const target = data.parent;
-    if (!target.vLoadingAddClassList) {
-      let loadingNumber: number | string | null = target.getAttribute('loading-number');
-      loadingNumber = Number.parseInt(loadingNumber as any) - 1;
-      if (!loadingNumber) {
-        // @ts-ignore
-        removeClass(target, ns.bm('parent', 'relative'));
-        target.removeAttribute('loading-number');
-      } else {
-        target.setAttribute('loading-number', loadingNumber.toString());
-      }
-      // @ts-ignore
-      removeClass(target, ns.bm('parent', 'hidden'));
-    }
-    removeVriLoadingChild();
-    loadingInstance.unmount();
-  }
-
-  function removeVriLoadingChild(): void {
-    vm.$el?.parentNode?.removeChild(vm.$el);
-  }
-
-  function close() {
-    if (options.beforeClose && !options.beforeClose()) return;
-
-    afterLeaveFlag.value = true;
-    clearTimeout(afterLeaveTimer);
-
-    afterLeaveTimer = window.setTimeout(handleAfterLeave, 400);
-    data.visible = false;
-
-    options.closed?.();
-  }
-
-  function handleAfterLeave() {
-    if (!afterLeaveFlag.value) return;
-    const target = data.parent;
-    afterLeaveFlag.value = false;
-    target.vLoadingAddClassList = undefined;
-    destroySelf();
-  }
-
-  const VriLoadingComponent = {
-    name: 'VriLoading',
-    setup() {
-      return () => {
-        const svg = data.spinner || data.svg;
-        const img = data.img;
-        const spinner = img
-          ? h('img', {
-              class: ['circular circular-img', data.rotate ? '' : 'circular-no-rotate'],
-              src: img
-            })
-          : h(
-              'svg',
-              {
-                class: 'circular',
-                viewBox: data.svgViewBox ? data.svgViewBox : '0 0 50 50',
-                ...(svg ? { innerHTML: svg } : {})
-              },
-              [
-                h('circle', {
-                  class: 'path',
-                  cx: '25',
-                  cy: '25',
-                  r: '20',
-                  fill: 'none'
-                })
-              ]
-            );
-
-        const spinnerText = data.text ? h('p', { class: ns.b('text') }, [data.text]) : undefined;
-
-        return h(
-          Transition,
-          {
-            name: ns.b('fade'),
-            onAfterLeave: handleAfterLeave
-          },
-          {
-            default: withCtx(() => [
-              withDirectives(
-                createVNode(
-                  'div',
-                  {
-                    style: {
-                      backgroundColor: data.background || ''
-                    },
-                    class: [ns.b('mask'), data.customClass, data.fullscreen ? 'is-fullscreen' : '']
-                  },
-                  [
-                    h(
-                      'div',
-                      {
-                        class: ns.b('spinner')
-                      },
-                      [spinner, spinnerText]
-                    )
-                  ]
-                ),
-                [[vShow, data.visible]]
-              )
-            ])
-          }
-        );
-      };
-    }
-  };
-
-  const loadingInstance = createApp(VriLoadingComponent);
-  const vm = loadingInstance.mount(document.createElement('div'));
-
-  return {
-    ...toRefs(data),
-    setText,
-    removeVriLoadingChild,
-    close,
-    handleAfterLeave,
-    vm,
-    get $el(): HTMLElement {
-      return vm.$el;
-    }
-  };
-}
-
-export type LoadingInstance = ReturnType<typeof createLoadingComponent>;

package/src/web/loading/service.ts

@@ -1,145 +0,0 @@
-import { nextTick, unref } from 'vue';
-import { isClient } from '@vueuse/core';
-import { getStyle, addClass, removeClass, isString } from '@vri/utils';
-import { useNamespace, useZIndex } from '../../use';
-import { createLoadingComponent } from './loading';
-import type { LoadingInstance } from './loading';
-import type { LoadingOptionsResolved } from '..';
-import type { LoadingOptions } from './types';
-import type { CSSProperties } from 'vue';
-
-let fullscreenInstance: LoadingInstance | undefined = undefined;
-
-export const Loading = function (
-  options: LoadingOptions = {}
-): LoadingInstance {
-  if (!isClient) return undefined as any;
-
-  const resolved = resolveOptions(options);
-
-  if (resolved.fullscreen && fullscreenInstance) {
-    return fullscreenInstance;
-  }
-  
-  const instance = createLoadingComponent({
-    ...resolved,
-    closed: () => {
-      resolved.closed?.();
-      if (resolved.fullscreen) fullscreenInstance = undefined;
-    }
-  });
-
-  addStyle(resolved, resolved.parent, instance);
-  addClassList(resolved, resolved.parent, instance);
-
-  resolved.parent.vLoadingAddClassList = () =>
-    addClassList(resolved, resolved.parent, instance);
-
-  let loadingNumber: string | null =
-    resolved.parent.getAttribute('loading-number');
-  if (!loadingNumber) {
-    loadingNumber = '1';
-  } else {
-    loadingNumber = `${Number.parseInt(loadingNumber) + 1}`;
-  }
-  resolved.parent.setAttribute('loading-number', loadingNumber);
-
-  resolved.parent.appendChild(instance.$el);
-
-  // @ts-ignore
-  nextTick(() => (instance.visible.value = resolved.visible));
-
-  if (resolved.fullscreen) {
-    fullscreenInstance = instance;
-  }
-  return instance;
-};
-
-const resolveOptions = (options: LoadingOptions): LoadingOptionsResolved => {
-  let target: HTMLElement;
-  if (isString(options.target)) {
-    target =
-      document.querySelector<HTMLElement>(options.target) ?? document.body;
-  } else {
-    target = options.target || document.body;
-  }
-  return {
-    parent: target === document.body || options.body ? document.body : target,
-    background: unref(options.background) || '',
-    svg: unref(options.svg) || '',
-    svgViewBox: unref(options.svgViewBox) || '',
-    spinner: unref(options.spinner) || false,
-    img: unref(options.img) || false,
-    text: unref(options.text) || '',
-    rotate: options.rotate ?? true,
-    fullscreen: target === document.body && (options.fullscreen ?? true),
-    lock: options.lock ?? false,
-    customClass: unref(options.customClass) || '',
-    visible: options.visible ?? true,
-    target
-  };
-};
-
-const addStyle = async (
-  options: LoadingOptionsResolved,
-  parent: HTMLElement,
-  instance: LoadingInstance
-) => {
-  const { nextZIndex } = useZIndex();
-
-  const maskStyle: Record<string, any> = {};
-  if (options.fullscreen) {
-    instance.originalPosition.value = getStyle(document.body, 'position');
-    instance.originalOverflow.value = getStyle(document.body, 'overflow');
-    maskStyle.zIndex = nextZIndex();
-  } else if (options.parent === document.body) {
-    instance.originalPosition.value = getStyle(document.body, 'position');
-    /**
-     * await dom render when visible is true in init,
-     * because some component's height maybe 0.
-     * e.g. el-table.
-     */
-    await nextTick();
-    for (const property of ['top', 'left']) {
-      const scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
-      maskStyle[property] = `${
-        // @ts-ignore
-        (options.target as HTMLElement).getBoundingClientRect()[property] +
-        document.body[scroll] +
-        document.documentElement[scroll] -
-        Number.parseInt(getStyle(document.body, `margin-${property}` as keyof CSSProperties), 10)
-      }px`;
-    }
-    for (const property of ['height', 'width']) {
-      // @ts-ignore
-      maskStyle[property] = `${(options.target as HTMLElement).getBoundingClientRect()[property]}px`;
-    }
-  } else {
-    instance.originalPosition.value = getStyle(parent, 'position');
-  }
-  for (const [key, value] of Object.entries(maskStyle)) {
-    // @ts-ignore
-    instance.$el.style[key] = value;
-  }
-};
-
-const addClassList = (
-  options: LoadingOptions,
-  parent: HTMLElement,
-  instance: LoadingInstance
-) => {
-  const ns = useNamespace('loading');
-
-  if (
-    !['absolute', 'fixed', 'sticky'].includes(instance.originalPosition.value)
-  ) {
-    addClass(parent, ns.bm('parent', 'relative'));
-  } else {
-    removeClass(parent, ns.bm('parent', 'relative'));
-  }
-  if (options.fullscreen && options.lock) {
-    addClass(parent, ns.bm('parent', 'hidden'));
-  } else {
-    removeClass(parent, ns.bm('parent', 'hidden'));
-  }
-};

package/src/web/loading/types.ts

@@ -1,29 +0,0 @@
-import type { MaybeRef } from '@vueuse/core';
-
-export type LoadingOptionsResolved = {
-  parent: LoadingParentElement;
-  background: MaybeRef<string>;
-  svg: MaybeRef<string>;
-  svgViewBox: MaybeRef<string>;
-  spinner: MaybeRef<boolean | string>;
-  img: MaybeRef<boolean | string>;
-  text: MaybeRef<string>;
-  fullscreen: boolean;
-  rotate: MaybeRef<boolean | string>;
-  lock: boolean;
-  customClass: MaybeRef<string>;
-  visible: MaybeRef<boolean>;
-  target: HTMLElement;
-  beforeClose?: () => boolean;
-  closed?: () => void;
-};
-
-export type LoadingOptions = Partial<
-  Omit<LoadingOptionsResolved, 'parent' | 'target'> & {
-  target: HTMLElement | string;
-  body: boolean;
-}>;
-
-export interface LoadingParentElement extends HTMLElement {
-  vLoadingAddClassList?: () => void;
-}

package/src/web/logo/index.scss

@@ -1,31 +0,0 @@
-$name: logo;
-
-@include set-root-css-vars($name, $logo);
-
-@function getCompCssVar($value) {
-  @return getCssVar($name, $value);
-}
-
-@include b($name) {
-  display: flex;
-  align-items: center;
-  padding-left: 20px;
-  cursor: getCompCssVar('cursor');
-  transition: all 0.2s ease;
-
-  @include e(img) {
-    width: getCompCssVar('img-width');
-    height: getCompCssVar('img-height');
-  }
-
-  @include e(title) {
-    font-size: getCompCssVar('font-size');
-    font-weight: getCompCssVar('font-weight');
-    transition: all 0.5s;
-    line-height: 1;
-    color: getCompCssVar('title-color');
-  }
-}
-
-
-

package/src/web/logo/index.ts

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

package/src/web/logo/index.vue

@@ -1,45 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useRouterHelper } from '@vri/router';
-import { useNamespace } from '../../use';
-
-interface LogoProps {
-  title: string;
-  logo: string;
-  /** 点击 logo 跳转路径 */
-  jumpPath?: string;
-}
-
-const {
-  title, jumpPath
-} = defineProps<LogoProps>();
-
-const ns = /* hoist-static*/ useNamespace('logo');
-
-defineOptions({
-	name: ns.b()
-});
-
-const getLogoClass = computed(() => [ns.b()]);
-
-const { go } = useRouterHelper();
-
-function onClickLogo () {
-  if (jumpPath) {
-    go(jumpPath);
-  }
-}
-
-const logoVars = computed(() => jumpPath ? {} : ns.cssVarBlock({ cursor: 'inital' }));
-</script>
-
-<template>
-  <div :class="getLogoClass" @click="onClickLogo" :style="logoVars">
-    <img :class="ns.e('img')" :src="logo" alt="" />
-    <div class="ml-2 truncate" :class="ns.e('title')">{{ title }}</div>
-  </div>
-</template>
-
-<style lang="scss">
-@import './index.scss';
-</style>

package/src/web/logo/types.ts

@@ -1,6 +0,0 @@
-export interface LogoProps {
-  title: string;
-  logo: string;
-  /** 点击 logo 跳转路径 */
-  jumpPath?: string;
-}