vft 0.0.1 → 0.0.3

package/src/web/select/utils.ts

@@ -1,5 +0,0 @@
-import { type ComponentSize, componentSizeMap } from './constants';
-
-export const getComponentSize = (size?: ComponentSize) => {
-  return componentSizeMap[size || 'default'];
-};

package/src/web/side-menu/index.scss

@@ -1,66 +0,0 @@
-$name: side-menu;
-
-@include set-root-css-vars($name, $side-menu);
-
-@function getCompCssVar($value) {
-  @return getCssVar($name, $value);
-}
-
-@include b($name) {
-  overflow-x: hidden;
-  transition: width 0.2s;
-  width: getCompCssVar('width');
-  display: flex;
-  flex-direction: column;
-
-  @include m(fixed) {
-    position: fixed;
-    left: 0;
-  }
-
-  @include e(top) {
-    border-bottom: getCompCssVar('border');
-    z-index: 1;
-    background-color: white;
-  }
-
-  @include e(bottom) {
-    border-top: getCompCssVar('border');
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    background-color: white;
-  }
-
-  @include e(collapse) {
-    cursor: pointer;
-    height: 40px;
-    background-color: white;
-    padding: 0 16px;
-    display: flex;
-    align-items: center;
-    border-right: solid 1px var(--vri-menu-border-color);
-    .vri-icon {
-      position: absolute;
-      right: 20px;
-    }
-  }
-
-  @include e(con) {
-    @include overlay(false);
-    overflow-x: hidden;
-  }
-
-}
-
-@include e(popper) {
-  margin-right: getCompCssVar('scroll-mr');
-
-  .vri-menu--popup {
-    @include scroll-bar();
-    @include overlay(false);
-
-    box-shadow: none;
-    max-height: calc(100vh - 200px);
-  }
-}

package/src/web/side-menu/index.ts

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

package/src/web/side-menu/index.vue

@@ -1,228 +0,0 @@
-<script lang="tsx" setup>
-import { listenerRouteChange, type MenuType, useRouterHelper } from '@vri/router';
-import { useSortable } from '@vri/use';
-import { addUnit, generateCssVars, isNullOrUndefined, isUrl } from '@vri/utils';
-import Sortable, { type SortableEvent } from 'sortablejs';
-import { useNamespace } from '../../use';
-import { Menu, SubMenu, MenuItem } from '../menu';
-import { Icon } from '../../common/icon';
-import { ref, h, type VNode, computed } from 'vue';
-import { useRouter } from 'vue-router';
-
-interface MenuConProps {
-  menus: MenuType[];
-  uniqueOpened?: boolean;
-  collapse?: boolean;
-  defaultActive?: string;
-  width?: Numberish;
-  collapseWidth?: Numberish;
-  attrMapping?: {
-    path?: string;
-    children?: string;
-    title?: string;
-    index?: Numberish;
-    icon?: string;
-  };
-  /** 系统内除去侧边栏的其他高度 */
-  extraHeight?: number;
-  /** 上下插槽的总体高度 */
-  menuTopBottomHeight?: number;
-  /** 显示底部折叠按钮 */
-  showCollapse?: boolean;
-  /** 排序配置 */
-  dragOption?: Sortable.Options & {dragClassName: string};
-  useMenuSelect?: boolean
-}
-
-const {
-  width,
-  collapseWidth = 50,
-  uniqueOpened = true,
-  collapse = false,
-  showCollapse = false,
-  menus,
-  defaultActive,
-  attrMapping,
-  extraHeight = 100,
-  menuTopBottomHeight = 40,
-  dragOption,
-  useMenuSelect = true
-} = defineProps<MenuConProps>();
-
-const emit = defineEmits(['update:collapse', 'dragEnd', 'select']);
-
-const ns = /* hoist-static*/ useNamespace('side-menu');
-
-const slots = useSlots();
-
-defineOptions({
-  name: ns.b()
-});
-
-const _defaultActive = ref();
-
-const _attrMapping = computed(() => {
-	return {
-    path: 'path',
-    children: 'children',
-    title: 'title',
-    index: 'path',
-    icon: 'icon',
-    ...attrMapping
-  };
-});
-
-listenerRouteChange((route) => {
-  if (!route || route.meta.hideSide) {
-    return;
-  }
-  _defaultActive.value = route.path as string;
-});
-
-const vSubMenu = (item: Record<string, any>, itemIndex: number): VNode => {
-  const _path = item[_attrMapping.value.path!];
-  const _title = item[_attrMapping.value.title!];
-  const _children = item?.[_attrMapping.value.children!];
-  const _index = item?.[_attrMapping.value.index!];
-  const _icon = item?.[_attrMapping.value.icon!];
-
-  return _children?.length
-    ? h(
-      // @ts-ignore
-      SubMenu,
-      {
-        popperAppendToBody: true,
-        key: _index || _path,
-        index: _index || _path,
-        title: _title,
-        icon: _icon,
-        popperClass: ns.e('popper')
-      },
-      {
-        default: () => {
-          return _children?.map((subItem: Record<string, any>, index: number) => {
-            const subPath = subItem[_attrMapping.value.path!];
-            const subIndex = subItem[_attrMapping.value.index!];
-            const subIcon = subItem[_attrMapping.value.icon!];
-            const subTitle = subItem[_attrMapping.value.title!];
-            return subItem?.[_attrMapping.value.children!]?.length
-              ? vSubMenu(subItem, index)
-              : // @ts-ignore
-              h(MenuItem, {
-                key: subIndex || subPath,
-                index: subIndex || subPath,
-                route: subPath,
-                icon: subIcon,
-                title: subTitle,
-                disabled: subItem.disabled
-              });
-          });
-        }
-      }
-    )
-    : h(MenuItem, {
-      key: _index || _path,
-      index: _index || _path,
-      title: _title,
-      route: _path,
-      icon: _icon,
-      disabled: item.disabled
-    }, slots.menuItem ? () => slots.menuItem?.({ item, index: itemIndex }) : '');
-};
-
-const vMenu = computed(() => {
-  return h(
-    Menu,
-    {
-      onSelect: useMenuSelect ? handleSelect : () => {},
-      defaultActive: defaultActive || _defaultActive.value,
-      class: [ns.e('con'), dragOption?.dragClassName ? ns.e(dragOption?.dragClassName) : ''],
-      style: { height: `calc(100% - ${menuTopBottomHeight}px)` },
-      uniqueOpened,
-      collapse,
-      'collapse-transition': false
-    }, () =>
-      menus.map((item, index) => {
-        return vSubMenu(item, index);
-      })
-  );
-});
-
-const { go } = useRouterHelper();
-const router = useRouter();
-
-async function handleSelect (data: {route: string; indexPath: string[]}) {
-  const path = data.route;
-
-  let _path = data.route;
-
-  if (data.indexPath.some((item) => isUrl(item))) {
-    _path = data.indexPath.slice(-2).join('/');
-  }
-  const linkTarget = router.getRoutes().filter((item) => item.path === _path)?.[0]?.meta?.linkTarget;
-
-  if (linkTarget) {
-    go({ url: path, winOpenOpt: { target: linkTarget as TargetContext } });
-  } else {
-    go(path);
-  }
-  emit('select', data);
-}
-
-const style = computed(() => {
-  return {
-    ...generateCssVars({ 'border-right': 'none' }, 'menu'),
-    ...generateCssVars({ width: !collapse ? addUnit(width) : addUnit(collapseWidth) }, 'side-menu'),
-    height: `calc(100% - ${extraHeight}px)`
-  };
-});
-
-const menuClass = computed(() => {
-  return [ns.b(), ns.m('fixed')];
-});
-
-function onChangeCollapse () {
-  emit('update:collapse', !collapse);
-}
-
-onMounted(() => {
-  nextTick(() => {
-    if (dragOption?.dragClassName) {
-      const el = document.querySelectorAll('.' + ns.e(dragOption?.dragClassName))?.[0] as HTMLElement;
-
-      const { initSortable } = useSortable(el, {
-        draggable: '.vri-menu-item',
-        onEnd: (evt: SortableEvent) => {
-          const { oldIndex, newIndex } = evt;
-          if (isNullOrUndefined(oldIndex) || isNullOrUndefined(newIndex) || oldIndex === newIndex) {
-            return;
-          }
-          emit('dragEnd', oldIndex, newIndex);
-        },
-        ...dragOption
-      });
-      initSortable();
-    }
-  });
-});
-
-defineRender(() => {
-  return (
-    <div class={menuClass.value} style={style.value}>
-      {slots.top ? <div class={ns.e('top')}>{slots.top()}</div> : null}
-      {vMenu.value}
-      {slots.bottom ? (
-        <div class={ns.e('bottom')}>{slots.bottom()}</div>
-      ) : showCollapse ? (
-        <div onClick={onChangeCollapse} class={[ns.e('bottom'), ns.e('collapse')]}>
-          <Icon style={{ transform: collapse ? 'rotateY(180deg)' : '' }} icon="vi-collapse"></Icon>
-        </div>
-      ) : null}
-    </div>
-  );
-});
-</script>
-
-<style lang="scss">
-@import './index.scss';
-</style>

package/src/web/side-menu/types.ts

@@ -1,20 +0,0 @@
-import { type MenuType } from '@vri/router';
-
-export interface MenuConProps {
-  /** 菜单列表 */
-  menus: MenuType[];
-  /** 菜单点击前置事件 */
-  beforeClickFn?: Function;
-  /** 保持只有一个主菜单展开 */
-  uniqueOpened?: boolean;
-  /** 是否收缩 */
-  collapse?: boolean;
-  /** 激活菜单的 index */
-  defaultActive?: string;
-  attrMapping?: {
-    path?: string;
-    children?: string;
-    title?: string;
-    index?: Numberish;
-  };
-}

package/src/web/single-select/index.scss

@@ -1,60 +0,0 @@
-$name: 'single-select';
-
-@include b($name) {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  height: 24px;
-  cursor: pointer;
-
-  @include e(title) {
-    font-size: 12px;
-    color: #111;
-    /** 最多显示8个字 超出...*/
-    max-width: 96px;
-    @include line-clamp(1);
-
-    @include when(show) {
-      color: #0171f6;
-    }
-  }
-
-  @include e(icon-arrow-down) {
-    transition: all 0.2s;
-
-    @include when(rotate) {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-@include e(dropdown) {
-  min-width: 180px;
-
-  @include e(dropdown-items) {
-    padding-top: 6px;
-    padding-bottom: 12px;
-
-  }
-}
-
-@include e(option) {
-  padding: 0 10px 0 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: #141414;
-
-  @include e(option-item) {
-    margin-right: 10px;
-  }
-
-  @include when(selected) {
-    color: #0171f6;
-
-    @include e('option-img') {
-      width: 10px;
-    }
-  }
-}

package/src/web/single-select/index.ts

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

package/src/web/single-select/index.vue

@@ -1,70 +0,0 @@
-<template>
-  <Select :class="ns.e('select')" :value="selectValue" :options="options" @visible-change="onVisibleChange" @change="onChange">
-    <template #title>
-      <div :class="ns.b()">
-        <span :class="[ns.e('title'), ns.is('show', showDropdown || !!selectValue)]">{{ showTitle }}</span>
-        <vri-svg :class="[ns.e('icon-arrow-down'), ns.is('rotate', showDropdown)]" name="arrow-down" :color="showDropdown || !!selectValue ? '#409eff' : '#606266'" />
-      </div>
-    </template>
-
-    <Option :class="[ns.e('option'), ns.is('selected', item.code === selectValue)]" v-for="item in options" :key="item.code" :label="item.name" :value="item.code">
-      <span :class="ns.e('option-item')">{{ item.name }}</span>
-      <img :class="ns.e('option-img')" src="./select@2x.png" v-if="item.code === selectValue" />
-    </Option>
-  </Select>
-</template>
-
-<script setup lang="ts">
-import VriSvg from '../svg/index.vue';
-import { Select, Option } from '../select';
-import { computed, ref } from 'vue';
-import { useNamespace } from '../../use';
-import type { Options } from './types';
-
-const ns = /* hoist-static*/ useNamespace('single-select');
-defineOptions({ name: ns.b() });
-
-interface SingleSelcetProps {
-  title: string;
-  /** 下拉列表数据 */
-  options: Array<Options>;
-  /** 默认值 */
-  value: Numberish;
-  /** 是否必传 */
-  required?: boolean;
-}
-const { title, options, value = '', required = true } = defineProps<SingleSelcetProps>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', val: Numberish): void;
-  (e: 'submit', val: Numberish): void;
-}>();
-
-const showDropdown = ref(false);
-
-const showTitle = computed(() => {
-  return options.filter((i) => i.code === selectValue.value)[0]?.name ?? title;
-});
-
-const selectValue = ref(value);
-
-const onChange = (data: any) => {
-  if (selectValue.value === data && !required) {
-    selectValue.value = '';
-  } else {
-    selectValue.value = data;
-  }
-};
-
-const onVisibleChange = (val: boolean) => {
-  showDropdown.value = val;
-  if (!val && selectValue.value !== value) {
-    emit('submit', selectValue.value);
-    emit('update:modelValue', selectValue.value);
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>

package/src/web/single-select/types.ts

@@ -1,5 +0,0 @@
-export interface Options {
-  code: string;
-  name: string;
-  [key: string]: any;
-}

package/src/web/svg/index.ts

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

package/src/web/svg/index.vue

@@ -1,22 +0,0 @@
-<template>
-  <i :style="{ fontSize: size + 'px', color }">
-    <template v-if="name === 'arrow-down'">
-      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
-        <path
-          fill="currentColor"
-          d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
-        />
-      </svg>
-    </template>
-  </i>
-</template>
-
-<script setup lang="ts">
-interface SvgProps {
-  name: string;
-  size?: string | number;
-  color?: string;
-}
-
-const { name, size = 12, color = '#606266' } = defineProps<SvgProps>();
-</script>