vft 0.0.1 → 0.0.3

package/src/web/menu/index.scss

@@ -1,336 +0,0 @@
-$name: menu;
-
-@include set-root-css-vars($name, $menu);
-
-@function getCompCssVar($value) {
-  @return getCssVar($name, $value);
-}
-
-@mixin menu-item {
-  display: flex;
-  align-items: center;
-  height: getCompCssVar('item-height');
-  line-height: getCompCssVar('item-height');
-  font-size: getCompCssVar('item-font-size');
-  color: getCompCssVar('text-color');
-  padding: 0 getCompCssVar('base-level-padding');
-  list-style: none;
-  cursor: pointer;
-  position: relative;
-  transition: border-color getCssVar('transition-duration'),
-  background-color getCssVar('transition-duration'),
-  color getCssVar('transition-duration');
-  box-sizing: border-box;
-  white-space: nowrap;
-
-  * {
-    vertical-align: bottom;
-  }
-
-  i {
-    margin-right: getCompCssVar('icon-mr');;
-  }
-
-  &:hover,
-  &:focus {
-    outline: none;
-  }
-
-  &:hover {
-    background-color: getCompCssVar('hover-bg-color');
-  }
-
-  @include when(disabled) {
-    opacity: 0.25;
-    cursor: not-allowed;
-    background: none !important;
-  }
-
-  span {
-    @include line-clamp(1);
-    word-break: break-all;
-  }
-}
-
-@include b(menu) {
-  border-right: solid 1px getCompCssVar('border-color');
-  list-style: none;
-  position: relative;
-  margin: 0;
-  padding-left: 0;
-  background-color: getCompCssVar('bg-color');
-  box-sizing: border-box;
-  @include m(vertical) {
-    &:not(.#{$namespace}-menu--collapse):not(.#{$namespace}-menu--popup-container) {
-      & .#{$namespace}-menu-item,
-      & .#{$namespace}-sub-menu__title,
-      & .#{$namespace}-menu-item-group__title {
-        //white-space: nowrap;
-        padding-left: calc(
-          #{getCompCssVar('base-level-padding')} + #{getCompCssVar('level')} *
-          #{getCompCssVar('level-padding')}
-        );
-      }
-    }
-    @include b(menu-item) {
-      white-space: initial;
-    }
-  }
-
-  @include m(horizontal) {
-    display: flex;
-    flex-wrap: nowrap;
-    border-bottom: getCompCssVar('border-bottom');
-    border-right: none;
-
-    & > .#{$namespace}-menu-item {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-
-      height: 100%;
-
-      margin: 0;
-      border-bottom: 2px solid transparent;
-      color: getCompCssVar('text-color');
-
-      a,
-      a:hover {
-        color: inherit;
-      }
-
-      &:not(.is-disabled):hover,
-      &:not(.is-disabled):focus {
-        background-color: #fff;
-      }
-    }
-    & > .#{$namespace}-sub-menu {
-      &:focus,
-      &:hover {
-        outline: none;
-      }
-
-      &:hover {
-        .#{$namespace}-sub-menu__title {
-          color: getCompCssVar('hover-text-color');
-        }
-      }
-
-      &.is-active {
-        .#{$namespace}-sub-menu__title {
-          border-bottom: 2px solid getCompCssVar('active-color');
-          color: getCompCssVar('active-color');
-
-          &:hover {
-            color: getCompCssVar('hover-text-color');
-          }
-        }
-      }
-
-      & .#{$namespace}-sub-menu__title {
-        height: 100%;
-        line-height: 100%;
-        border-bottom: 2px solid transparent;
-        color: getCompCssVar('text-color');
-
-        &:hover {
-          background-color: getCompCssVar('hover-bg-color');
-        }
-      }
-    }
-    & .#{$namespace}-menu {
-      & .#{$namespace}-menu-item,
-      & .#{$namespace}-sub-menu__title {
-        background-color: getCompCssVar('bg-color');
-        display: flex;
-        align-items: center;
-        height: getCompCssVar('horizontal-sub-item-height');
-        padding: 0 10px;
-        color: getCompCssVar('text-color');
-      }
-
-      & .#{$namespace}-sub-menu__title {
-        padding-right: 40px;
-      }
-
-      & .#{$namespace}-menu-item.is-active,
-      & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title {
-        color: getCompCssVar('active-color');
-      }
-    }
-    & .#{$namespace}-menu-item:not(.is-disabled):hover {
-      outline: none;
-      color: getCompCssVar('hover-text-color');
-      background-color: getCompCssVar('hover-bg-color');
-    }
-    & .#{$namespace}-menu-item:not(.is-disabled):focus {
-      outline: none;
-      color: getCompCssVar('focus-text-color');
-      background-color: getCompCssVar('focus-bg-color');
-    }
-    & > .#{$namespace}-menu-item.is-active {
-      border-bottom: 2px solid getCompCssVar('active-color');
-      color: getCompCssVar('active-color');
-    }
-  }
-  @include m(collapse) {
-    width: calc(
-      #{getCompCssVar('icon-width')} + #{getCompCssVar('base-level-padding')} *
-      2
-    );
-
-    > .#{$namespace}-menu-item,
-    > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title,
-    > .#{$namespace}-menu-item-group > ul > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title {
-      [class^='#{$namespace}-icon'] {
-        margin: 0;
-        vertical-align: middle;
-        width: getCompCssVar('icon-width');
-        text-align: center;
-      }
-
-      .#{$namespace}-sub-menu__icon-arrow {
-        display: none;
-      }
-
-      > span {
-        height: 0;
-        width: 0;
-        overflow: hidden;
-        visibility: hidden;
-        display: inline-block;
-      }
-    }
-
-    > .#{$namespace}-menu-item.is-active i {
-      color: inherit;
-    }
-
-    .#{$namespace}-menu .#{$namespace}-sub-menu {
-      min-width: 200px;
-    }
-  }
-  @include m(popup) {
-    z-index: 100;
-    min-width: 200px;
-    border: none;
-    padding: 5px 0;
-    box-shadow: getCssVar('box-shadow-light');
-
-    // Todo radius
-    border-radius: getCompCssVar('popup-border-radius');
-
-  }
-
-  .#{$namespace}-icon {
-    flex-shrink: 0;
-  }
-}
-
-@include b(menu-item) {
-  @include menu-item;
-
-  & [class^='#{$namespace}-icon'] {
-    margin-right: 5px;
-    width: getCompCssVar('icon-width');
-    text-align: center;
-    font-size: 18px;
-    vertical-align: middle;
-  }
-  @include when(active) {
-    color: getCompCssVar('active-color');
-    i {
-      color: inherit;
-    }
-  }
-  .#{$namespace}-menu-tooltip__trigger {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0 getCompCssVar('base-level-padding');
-  }
-}
-
-@include b(sub-menu) {
-  list-style: none;
-  margin: 0;
-  padding-left: 0;
-  background: getCompCssVar('sub-menu-bg-color');;
-
-  @include e(title) {
-    @include menu-item;
-
-    &:hover {
-      background-color: getCompCssVar('hover-bg-color');
-    }
-
-    @include e(text) {
-      padding-right: 30px;
-    }
-
-  }
-  & .#{$namespace}-menu {
-    border: none;
-  }
-  & .#{$namespace}-menu-item {
-    height: getCompCssVar('sub-item-height');
-    line-height: getCompCssVar('sub-item-height');
-    min-width: getCompCssVar('item-min-width');
-  }
-  @include e(hide-arrow) {
-    .#{$namespace}-sub-menu__icon-arrow {
-      display: none !important;
-    }
-  }
-  @include when(active) {
-    .#{$namespace}-sub-menu__title {
-      border-bottom-color: getCompCssVar('active-color');
-    }
-  }
-  @include when(disabled) {
-    .#{$namespace}-sub-menu__title,
-    .#{$namespace}-menu-item {
-      opacity: 0.25;
-      cursor: not-allowed;
-      background: none !important;
-    }
-  }
-  .#{$namespace}-icon {
-    vertical-align: middle;
-    margin-right: getCompCssVar('icon-mr');;
-    text-align: center;
-
-    &.#{$namespace}-sub-menu__icon-more {
-      margin-right: 0 !important;
-    }
-  }
-  .#{$namespace}-sub-menu__icon-arrow {
-    position: absolute;
-    right: getCompCssVar('base-level-padding');
-    transition: transform getCssVar('transition-duration');
-    color: inherit;
-  }
-}
-
-@include b(menu-item-group) {
-  > ul {
-    padding: 0;
-  }
-  @include e(title) {
-    padding: 7px 0 7px getCompCssVar('base-level-padding');
-    line-height: normal;
-    font-size: 12px;
-    color: getCssVar('text-color', 'secondary');
-  }
-}
-
-.horizontal-collapse-transition .#{$namespace}-sub-menu__title .#{$namespace}-sub-menu__icon-arrow {
-  transition: getCssVar('transition-duration-fast');
-  opacity: 0;
-}
-

package/src/web/menu/index.ts

@@ -1,8 +0,0 @@
-import Menu from './menu.vue';
-import MenuItem from './menu-item.vue';
-import MenuItemGroup from './menu-item-group.vue';
-import SubMenu from './sub-menu.vue';
-
-export * from './types';
-
-export { Menu, MenuItem, MenuItemGroup, SubMenu };

package/src/web/menu/menu-collapse-transition.vue

@@ -1,62 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useNamespace } from '../../use';
-import { addClass, hasClass, removeClass } from '@vri/utils';
-
-import type { BaseTransitionProps, TransitionProps } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const ns = useNamespace('menu');
-    const listeners = {
-      onBeforeEnter: (el) => (el.style.opacity = '0.2'),
-      onEnter(el, done) {
-        addClass(el, `${ns.namespace.value}-opacity-transition`);
-        el.style.opacity = '1';
-        done();
-      },
-
-      onAfterEnter(el) {
-        removeClass(el, `${ns.namespace.value}-opacity-transition`);
-        el.style.opacity = '';
-      },
-
-      onBeforeLeave(el) {
-        if (!el.dataset) {
-          ;(el as any).dataset = {};
-        }
-
-        if (hasClass(el, ns.m('collapse'))) {
-          removeClass(el, ns.m('collapse'));
-          el.dataset.oldOverflow = el.style.overflow;
-          el.dataset.scrollWidth = el.clientWidth.toString();
-          addClass(el, ns.m('collapse'));
-        } else {
-          addClass(el, ns.m('collapse'));
-          el.dataset.oldOverflow = el.style.overflow;
-          el.dataset.scrollWidth = el.clientWidth.toString();
-          removeClass(el, ns.m('collapse'));
-        }
-
-        el.style.width = `${el.scrollWidth}px`;
-        el.style.overflow = 'hidden';
-      },
-
-      onLeave(el: HTMLElement) {
-        addClass(el, 'horizontal-collapse-transition');
-        el.style.width = `${el.dataset.scrollWidth}px`;
-      }
-    } as BaseTransitionProps<HTMLElement> as TransitionProps;
-
-    return {
-      listeners
-    };
-  }
-});
-</script>
-
-<template>
-  <transition mode="out-in" v-bind="listeners">
-    <slot />
-  </transition>
-</template>

package/src/web/menu/menu-item-group.vue

@@ -1,27 +0,0 @@
-<template>
-  <li :class="ns.b()">
-    <div :class="ns.e('title')">
-      <template v-if="!$slots.title">{{ title }}</template>
-      <slot v-else name="title" />
-    </div>
-    <ul>
-      <slot />
-    </ul>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import { useNamespace } from '../../use';
-
-interface Props {
-	title?: string
-}
-
-defineProps<Props>();
-
-const ns = /* hoist-static*/ useNamespace('menu-item-group');
-
-defineOptions({
-	name: ns.b()
-});
-</script>

package/src/web/menu/menu-item.vue

@@ -1,126 +0,0 @@
-<script lang="ts" setup>
-import { renderTNode, singleAttrToObj, VNode } from '@vri/utils';
-import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, reactive } from 'vue';
-import { throwError } from '../../utils';
-import { useNamespace } from '../../use';
-import { type RouteLocationRaw } from 'vue-router';
-import useMenu from './use-menu';
-import { Icon, type IconProps } from '../../common';
-import { Divider, Tooltip } from '../../web';
-
-import type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types';
-
-interface Props {
-  /** 唯一标志 */
-  index?: string;
-  /** Vue Router 路径对象 */
-  route?: RouteLocationRaw;
-  /** 是否禁用 */
-  disabled?: boolean;
-  icon?: IconProps;
-  title?: string;
-  isAloneUse?: boolean;
-  divider?: boolean;
-  className?: string
-  reverse?: boolean
-}
-
-const { index, route, disabled, icon, isAloneUse, divider, className, reverse } = defineProps<Props>();
-
-const ns = /* hoist-static*/ useNamespace('menu-item');
-
-const emit = defineEmits(['click']);
-
-defineOptions({
-  name: ns.b()
-});
-
-const instance = getCurrentInstance()!;
-
-const nsMenu = useNamespace('menu');
-
-const nsMenuItem = useNamespace('menu-item');
-
-// 获取来自 menu.vue 中注入的数据
-const rootMenu = !isAloneUse ? inject<MenuProvider>('rootMenu') : null;
-if (!rootMenu && !isAloneUse) throwError(ns.b(), 'can not inject root menu');
-
-// indexPath：当前 menu-item 对应的 index 和 vri-sub-menu 的 index，parentMenu 为 vri-sub-menu 组件
-const { parentMenu, indexPath } = useMenu(
-  instance,
-  computed(() => index!)
-);
-
-// 注入来自 sub-menu 中的 provide 数据
-const subMenu = !isAloneUse ? inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`) : null;
-if (!subMenu && !isAloneUse) throwError(ns.b(), 'can not inject sub menu');
-
-// 当前是否为 active
-const active = computed(() => index === rootMenu?.activeIndex);
-
-const item: MenuItemRegistered = reactive({
-  index: index!,
-  indexPath,
-  active
-});
-
-// 点击具体菜单项
-const handleClick = () => {
-  if (!disabled) {
-    rootMenu?.handleMenuItemClick({
-      index: index!,
-      indexPath: indexPath.value,
-      route: route
-    });
-    emit('click', item);
-  }
-};
-
-const _icon = computed(() => {
-  return singleAttrToObj(icon, 'icon') as IconProps;
-});
-
-const title = computed(() => {
-  return renderTNode(instance, 'title');
-});
-
-onMounted(() => {
-  if (!isAloneUse) {
-    // 触发 sub-menu,vue 中的 addSubMenu
-    subMenu?.addSubMenu(item);
-    // 触发 menu.vue 中的 addMenuItem 更新 items
-    rootMenu?.addMenuItem(item);
-  }
-});
-
-onBeforeUnmount(() => {
-  if (!isAloneUse) {
-    subMenu?.removeSubMenu(item);
-    rootMenu?.removeMenuItem(item);
-  }
-});
-</script>
-
-<template>
-  <Divider v-if="reverse && divider" marginY="0" />
-  <li :class="[className, nsMenuItem.b(), nsMenuItem.is('active', isAloneUse ? false : active), nsMenuItem.is('disabled', disabled)]" role="menuitem" tabindex="-1" @click="handleClick">
-    <tooltip
-      v-if="parentMenu?.type?.name === 'vri-menu' && rootMenu?.props.collapse && $slots.title"
-      placement="right" :fallback-placements="['left']" persistent>
-      <template #content>
-        <slot name="title" />
-      </template>
-      <div :class="nsMenu.be('tooltip', 'trigger')">
-        <slot />
-      </div>
-    </tooltip>
-    <template v-else>
-      <slot v-if="$slots?.default"/>
-      <template v-else>
-        <Icon v-if="_icon?.icon" v-bind="_icon" />
-        <span :title="title"><v-node :content="title" /></span>
-      </template>
-    </template>
-  </li>
-  <Divider v-if="!reverse && divider" marginY="0" />
-</template>