vft 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/web/link/index.vue

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

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

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

@@ -1,108 +0,0 @@
-$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;
-  }
-}