vft 0.0.1

package/src/web/loading/loading.ts

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

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

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

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

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

package/src/web/logo/index.vue

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

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