vft 0.0.1

package/src/web/select/utils.ts

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

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

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

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

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

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

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

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

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

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

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

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

package/src/web/svg/index.ts

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

package/src/web/svg/index.vue

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