vft 0.0.1

package/src/web/layouts/footer/index.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { addUnit, generateCssVars, isNullOrUndefined } from '@vri/utils';
+import { useNamespace } from '../../../use';
+import { computed } from 'vue';
+
+interface LayoutFooterProps {
+  leftDistance?: number;
+}
+
+const {
+  leftDistance
+} = defineProps<LayoutFooterProps>();
+
+const ns = /* hoist-static*/ useNamespace('layout-footer');
+
+defineOptions({
+  name: ns.b()
+});
+
+const style = computed(() => {
+	return generateCssVars(
+    isNullOrUndefined(leftDistance) ? {} : {
+    'left': addUnit(leftDistance) as string
+  }, 'layout-footer');
+});
+</script>
+
+<template>
+  <div :class="ns.b()" :style="style">
+    <div :class="ns.e('left')"><slot name="left"/></div>
+    <div :class="ns.e('center')"><slot /></div>
+    <div :class="ns.e('right')"><slot name="right" /></div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

package/src/web/layouts/header/index.scss

@@ -0,0 +1,35 @@
+$name: layout-header;
+
+@include set-root-css-vars($name, $layout-header);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  height: getCompCssVar('height');
+  color: getCompCssVar('color');
+  background-color: getCompCssVar('bg-color');
+  border-bottom: getCompCssVar('border-bottom');
+  box-sizing: border-box;
+  @include m(fixed) {
+    z-index: getCompCssVar('z-index');
+    width: 100%;
+  }
+
+  @include e(top) {
+    height: getCompCssVar('top-height');
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @include e(left) {
+      display: flex;
+      height: 100%;
+      align-items: center;
+    }
+
+    //@include e(right) {
+    //}
+  }
+}

package/src/web/layouts/header/index.ts

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

package/src/web/layouts/header/index.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useNamespace } from '../../../use';
+import { type LogoProps, Logo } from '../../logo';
+
+interface LayoutHeaderProps {
+  logoCfg: LogoProps;
+}
+
+const {
+  logoCfg
+} = defineProps<LayoutHeaderProps>();
+
+const ns = /* hoist-static*/ useNamespace('layout-header');
+
+defineOptions({
+  name: ns.b()
+});
+
+const getHeaderClass = computed(() => {
+  return [
+    ns.b(),
+    {
+      [`${ns.m('fixed')}`]: true
+    }
+  ];
+});
+</script>
+
+<template>
+  <div :class="getHeaderClass">
+    <div :class="ns.e('top')">
+      <div :class="ns.e('left')">
+        <logo v-bind="logoCfg" />
+        <slot name="left" />
+      </div>
+      <div :class="ns.e('right')">
+        <slot />
+      </div>
+    </div>
+    <slot name="bottom" />
+  </div>
+</template>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/src/web/layouts/iframe/index.scss

@@ -0,0 +1,18 @@
+$name: iframe-page;
+
+@include set-root-css-vars($name, $iframe-page);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  @include e(main) {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #fff;
+    border: 0;
+    box-sizing: border-box;
+  }
+}

package/src/web/layouts/iframe/index.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { unref } from 'vue';
+import { type RouteLocationNormalized } from 'vue-router';
+import { type RouteRecordItem } from '@vri/router';
+import { useNamespace } from '../../../use';
+import FramePage from './page.vue';
+import { useRouter } from 'vue-router';
+
+interface Props {
+  iframePages: RouteLocationNormalized[]
+}
+
+const {
+  iframePages
+} = defineProps<Props>();
+
+const ns = /* hoist-static*/ useNamespace('iframe-layout');
+
+defineOptions({
+	name: ns.b()
+});
+
+const router = useRouter();
+
+function showIframe(item: RouteRecordItem) {
+  return item.fullPath === unref(router.currentRoute).fullPath;
+}
+</script>
+
+<template>
+  <template v-for="item in iframePages" :key="item.query ? item.fullPath : item.path">
+    <frame-page
+      v-if="item.meta.frameSrc"
+      v-show="showIframe(item)" :frameSrc="item.meta.frameSrc" />
+  </template>
+</template>

package/src/web/layouts/iframe/page.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useNamespace } from '../../../use';
+
+interface IframePageProps {
+  frameSrc: string;
+}
+
+const {
+  frameSrc = ''
+} = defineProps<IframePageProps>();
+
+const ns = /* hoist-static*/ useNamespace('iframe-page');
+
+defineOptions({
+	name: ns.b()
+});
+</script>
+
+<template>
+  <iframe :class="ns.b()"  :src="frameSrc" />
+</template>
+
+<style lang="scss">
+@include b(iframe-page) {
+  height: 100%;
+  width: 100%;
+  border: none;
+  display: block;
+}
+</style>

package/src/web/layouts/index.ts

@@ -0,0 +1,8 @@
+import IframeLayout from './iframe/index.vue';
+import Blank from './blank.vue';
+import RouterViewContent from './router-view-content/index.vue';
+
+export * from './header';
+export * from './footer';
+
+export { RouterViewContent, IframeLayout, Blank };

package/src/web/layouts/router-view-content/index.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { getRouterKeyPath } from '@vri/router';
+import { type Component, computed } from 'vue';
+import { type RouteLocationNormalizedLoaded } from 'vue-router';
+import { useNamespace } from '../../../use';
+
+interface LayoutConentProps {
+  tabStore?: any
+  openKeepAlive?: boolean;
+  isReloadFlag: boolean
+  pageErrorStatus?: boolean;
+  enableErrorHandle?: boolean;
+  exceptionComp?: Component;
+}
+
+const {
+  tabStore,
+  openKeepAlive = true,
+  isReloadFlag,
+  pageErrorStatus,
+  exceptionComp,
+  enableErrorHandle
+} = defineProps<LayoutConentProps>();
+
+const ns = /* hoist-static*/ useNamespace('router-view-content');
+
+defineOptions({
+  name: ns.b()
+});
+
+const getCaches = computed(() => {
+  if (!openKeepAlive) {
+    return [];
+  }
+  return tabStore.getCachedTabList;
+});
+
+const pageComponent = computed(() => {
+  return (component: Component) => {
+    if (enableErrorHandle) {
+      return pageErrorStatus ? (exceptionComp || component) : component;
+    } else {
+      return component;
+    }
+  };
+});
+
+const excludeNames = computed(() => {
+  return (route: RouteLocationNormalizedLoaded) => {
+    let name = route.name;
+    if (route.meta?.currentActivePath) {
+      name = route.matched?.filter(item => {
+        return item.path === route.meta?.currentActivePath;
+      })?.[0].name;
+    }
+    
+    return isReloadFlag ? undefined : name;
+  };
+});
+</script>
+
+<template>
+  <router-view v-slot="{ Component: Comp, route }">
+    <keep-alive v-if="openKeepAlive" :include="getCaches" :exclude="excludeNames(route)">
+      <component v-if="isReloadFlag" :is="pageComponent(Comp)"
+        :key="getRouterKeyPath(route)" />
+    </keep-alive>
+    <component v-else :is="pageComponent(Comp)" :key="route.fullPath" />
+  </router-view>
+</template>

package/src/web/link/index.scss

@@ -0,0 +1,95 @@
+$name: link;
+$link: () !default;
+$link: map-merge((
+  'font-size': getCssVar('font-size-base'),
+  'font-weight': getCssVar('font-weight-primary'),
+  'text-color': getCssVar('text-regular-color'),
+  'hover-text-color': getCssVar('primary-color'),
+  'disabled-text-color': getCssVar('text-placeholder-color'),
+), $link);
+
+@include set-root-css-vars($name, $link);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  position: relative;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: getCssVar('link', 'font-size');
+  font-weight: getCssVar('link', 'font-weight');
+
+  color: getCssVar('link', 'text-color');
+
+  &:hover {
+    color: getCssVar('link', 'hover-text-color');
+  }
+
+  @include when(underline) {
+    &:hover:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 0;
+      bottom: 0;
+      border-bottom: 1px solid getCssVar('link', 'hover-text-color');
+    }
+  }
+
+  @include when(disabled) {
+    color: getCssVar('link', 'disabled-text-color');
+    cursor: not-allowed;
+  }
+
+  & [class*='#{$namespace}-icon-'] {
+    & + span {
+      margin-left: 5px;
+    }
+  }
+
+  &.#{$namespace}-link--default {
+    &:after {
+      border-color: getCssVar('link', 'hover-text-color');
+    }
+  }
+
+  @include e(inner) {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @each $type in $types {
+    &.#{$namespace}-link--#{$type} {
+      @include css-var-from-global(('link', 'text-color'), ($type, 'color'));
+      @include css-var-from-global(
+            ('link', 'hover-text-color'),
+            ($type, 'color', 'light-3')
+      );
+      @include css-var-from-global(
+            ('link', 'disabled-text-color'),
+            ($type, 'color', 'light-5')
+      );
+
+      &:after {
+        border-color: getCssVar('link', 'text-color');
+      }
+
+      @include when(underline) {
+        &:hover:after {
+          border-color: getCssVar('link', 'text-color');
+        }
+      }
+    }
+  }
+}

package/src/web/link/index.ts

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

package/src/web/link/index.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { singleAttrToObj } from '@vri/utils';
+import { computed } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
+import { type IconProps, Icon } from '../../common';
+import { useNamespace } from '../../use';
+import { useRouterHelper, type WinOpenType } from '@vri/router';
+
+interface Props {
+  type?: 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'default';
+  underline?: boolean
+  disabled?: boolean
+  route?: WinOpenType | RouteLocationRaw
+  isReplace?: boolean
+  icon?: IconProps
+}
+
+const {
+  type = 'default',
+  underline = true,
+  disabled = false,
+  route,
+  isReplace,
+  icon
+} = defineProps<Props>();
+
+const ns = /* hoist-static*/ useNamespace('link');
+
+defineOptions({
+	name: ns.b()
+});
+
+const emit = defineEmits(['click']);
+
+const { go } = useRouterHelper();
+
+function handleClick (event: MouseEvent) {
+  if (route) {
+  	go(route as RouteLocationRaw, isReplace);
+  }
+  if (!disabled) emit('click', event);
+}
+
+const _icon = computed(() => {
+  return singleAttrToObj(icon, 'icon') as IconProps;
+});
+</script>
+
+<template>
+  <span
+    :class="[
+      ns.b(),
+      ns.m(type),
+      ns.is('disabled', disabled),
+      ns.is('underline', underline && !disabled),
+    ]"
+    @click="handleClick"
+  >
+    <Icon v-if="_icon?.icon" v-bind="_icon" />
+    <span v-if="$slots.default" :class="ns.e('inner')">
+      <slot />
+    </span>
+  </span>
+</template>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

package/src/web/loading/directive.ts

@@ -0,0 +1,104 @@
+import { isRef, ref } from 'vue';
+import { isObject, isString } from '@vri/utils';
+import { Loading } from './service';
+import type { Directive, DirectiveBinding, UnwrapRef } from 'vue';
+import type { LoadingOptions } from './types';
+import type { LoadingInstance } from './loading';
+
+const INSTANCE_KEY = Symbol('VriLoading');
+
+export type LoadingBinding = boolean | UnwrapRef<LoadingOptions>;
+
+export interface VriLoading extends HTMLElement {
+  [INSTANCE_KEY]?: {
+    instance: LoadingInstance;
+    options: LoadingOptions;
+  };
+}
+
+const createInstance = (el: VriLoading, binding: DirectiveBinding<LoadingBinding>) => {
+  const vm = binding.instance;
+  
+  // @ts-ignore
+  const getBindingProp = <K extends keyof LoadingOptions>(key: K): LoadingOptions[K] => (isObject(binding.value) ? binding.value[key] : undefined);
+  
+  const resolveExpression = (key: any) => {
+    // @ts-ignore
+    const data = (isString(key) && vm?.[key]) || key;
+    if (data) return ref(data);
+    else return data;
+  };
+  
+  
+  const getProp = <K extends keyof LoadingOptions>(name: K) => resolveExpression(getBindingProp(name));
+  
+  const fullscreen = getBindingProp('fullscreen') ?? binding.modifiers.fullscreen;
+  
+  const options: LoadingOptions = {
+    text: getProp('text'),
+    svg: getProp('svg'),
+    svgViewBox: getProp('svgViewBox'),
+    spinner: getProp('spinner'),
+    visible: getProp('visible'),
+    background: getProp('background'),
+    customClass: getProp('customClass'),
+    rotate: getProp('rotate'),
+    img: getProp('img'),
+    fullscreen,
+    target: getBindingProp('target') ?? (fullscreen ? undefined : el),
+    body: getBindingProp('body') ?? binding.modifiers.body,
+    lock: getBindingProp('lock') ?? binding.modifiers.lock
+  };
+  
+  el[INSTANCE_KEY] = {
+    options,
+    instance: Loading(options)
+  };
+};
+
+const updateOptions = (newOptions: UnwrapRef<LoadingOptions>, originalOptions: LoadingOptions) => {
+  for (const key of Object.keys(originalOptions)) {
+    // @ts-ignore
+    if (isRef(originalOptions[key])) originalOptions[key].value = newOptions[key];
+  }
+};
+
+export const vLoading: Directive<VriLoading, LoadingBinding> = createLoadingDirective();
+
+export function createLoadingDirective (defaultLoadingCfg?: UnwrapRef<LoadingOptions>) {
+  return {
+    mounted(el: VriLoading, binding: DirectiveBinding<LoadingBinding>) {
+      // @ts-ignore
+      if (binding.value.visible === false) {
+        binding.value = undefined;
+      } else {
+        binding.value = { ...defaultLoadingCfg, ...binding.value };
+      }
+      
+      if (binding.value) {
+        createInstance(el, binding);
+      }
+    },
+    updated(el: VriLoading, binding: DirectiveBinding<LoadingBinding>) {
+      const instance = el[INSTANCE_KEY];
+      if (binding.oldValue !== binding.value) {
+        if (binding.value && !binding.oldValue) {
+          // @ts-ignore
+          binding.value = { ...defaultLoadingCfg, ...binding.value };
+          
+          createInstance(el, binding);
+        } else if (binding.value && binding.oldValue) {
+          if (isObject(binding.value)) {
+            binding.value = { ...defaultLoadingCfg, ...binding.value };
+            updateOptions(binding.value, instance!.options);
+          }
+        } else {
+          instance?.instance.close();
+        }
+      }
+    },
+    unmounted(el: VriLoading) {
+      el[INSTANCE_KEY]?.instance.close();
+    }
+  };
+}

package/src/web/loading/index.ts

@@ -0,0 +1,6 @@
+import { vLoading, createLoadingDirective } from './directive';
+import type { VriLoading, LoadingBinding } from './directive';
+
+export { vLoading, createLoadingDirective, VriLoading, LoadingBinding };
+
+export * from './types';

package/src/web/loading/loading.scss

@@ -0,0 +1,108 @@
+$name: loading;
+
+@include set-root-css-vars($name, $loading);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b(loading-parent) {
+  @include m(relative) {
+    position: relative !important;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  @include m(hidden) {
+    overflow: hidden !important;
+  }
+}
+
+@include b(loading-mask) {
+  position: absolute;
+  z-index: 2000;
+  background-color: getCompCssVar('mask-color');
+  margin: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: opacity getCssVar('transition-duration');
+
+  @include when(fullscreen) {
+    position: fixed;
+
+    .#{$namespace}-loading-spinner {
+      margin-top: calc((0px - getCssVar('loading-fullscreen-spinner-size')) / 2);
+
+      .circular {
+        height: getCompCssVar('fullscreen-spinner-size');
+        width: getCompCssVar('fullscreen-spinner-size');
+      }
+    }
+  }
+}
+
+@include b(loading-spinner) {
+  top: 50%;
+  margin-top: calc((0px - getCssVar('loading-spinner-size')) / 2);
+  width: 100%;
+  text-align: center;
+  position: absolute;
+
+  .#{$namespace}-loading-text {
+    color: getCompCssVar('color');;
+    margin: getCompCssVar('margin');
+    font-size: getCompCssVar('text-size');
+  }
+
+  .circular {
+    display: inline;
+    height: getCompCssVar('spinner-size');
+    width: getCompCssVar('spinner-size');
+    animation: getCompCssVar('rotate-animation');
+  }
+
+  .circular-no-rotate {
+    animation: none
+  }
+
+  .path {
+    animation: loading-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    stroke-width: 2;
+    stroke: getCssVar('primary-color');
+    stroke-linecap: round;
+  }
+
+  i {
+    color: getCssVar('primary-color');
+  }
+}
+
+.#{$namespace}-loading-fade-enter-from,
+.#{$namespace}-loading-fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes loading-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
+  }
+}