vft 0.0.1

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

@@ -0,0 +1,132 @@
+<template>
+  <el-dropdown ref="CascaderSelectDropdown" trigger="click" placement="bottom-start" :hide-on-click="false" @visible-change="onVisibleChange">
+    <div :class="ns.b()">
+      <span :class="[ns.e('title'), ns.is('show', showDropdown || realCheckList.length)]">{{ title }}</span>
+      <vri-svg :class="[ns.e('icon-arrow-down'), ns.is('rotate', showDropdown)]" name="arrow-down" :color="showDropdown || realCheckList.length ? '#409eff' : '#606266'"/>
+    </div>
+    <template #dropdown>
+      <div :class="ns.e('dropdown')">
+        <cascader-panel ref="cascadePanel" v-model="checkList" :options="options" :props="props" :border="false">
+          <template #bottom>
+            <dropdown-bottom @reset="reset" @confirm="submit" />
+          </template>
+        </cascader-panel>
+      </div>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import CascaderPanel from '../cascader-panel/index.vue';
+import VriSvg from '../svg/index.vue';
+import DropdownBottom from '../dropdown-bottom/index.vue';
+import { ref } from 'vue';
+import { type CascaderProps } from 'element-plus';
+import { useNamespace } from '../../use';
+import type { IResult, ICheckedNodes } from './types';
+
+const ns = /* hoist-static*/ useNamespace('cascader-select');
+defineOptions({ name: ns.b() });
+
+interface CascaderSelcetProps {
+  title: string;
+  options: Array<any>;
+  type?: string;
+  labelKey?: string;
+  valueKey?: string;
+  childrenKey?: string;
+}
+
+const { title, options, type = '', labelKey = 'name', valueKey = 'code', childrenKey = 'values' } = defineProps<CascaderSelcetProps>();
+
+const props: CascaderProps = {
+  multiple: true,
+  label: labelKey,
+  value: valueKey,
+  children: childrenKey
+};
+const emit = defineEmits<{
+  (e: 'submit', val: IResult): void;
+}>();
+
+const CascaderSelectDropdown = ref();
+
+const checkList = ref<any>([]);
+const realCheckList = ref<any>([]);
+
+const showDropdown = ref(false);
+
+/** 监听下拉菜单关闭时实际值和选择值是否一致，若不一致则将显示值修改为和实际值一致 */
+const onVisibleChange = (visible: boolean) => {
+  showDropdown.value = visible;
+  if (!visible && JSON.stringify(realCheckList.value.sort()) !== JSON.stringify(checkList.value.sort())) {
+    checkList.value = JSON.parse(JSON.stringify(realCheckList.value));
+  }
+};
+
+const reset = () => {
+  checkList.value = [];
+};
+
+const cascadePanel = ref();
+const submit = () => {
+  realCheckList.value = JSON.parse(JSON.stringify(checkList.value));
+  let result: IResult = {};
+
+  /** 地区特殊处理 */
+  if (type === 'area') {
+    result = handleAreaChecked(cascadePanel.value.getCheckedNodes());
+  } else {
+    checkList.value.forEach((leaf: Array<string>) => {
+      leaf.forEach((val: string, index: number) => {
+        const lv = `lv${index + 1}`;
+        if (!result[lv]) {
+          result[lv] = [];
+        }
+        if (!result[lv].includes(val)) {
+          result[lv].push(val);
+        }
+      });
+    });
+  }
+  emit('submit', result);
+  CascaderSelectDropdown.value?.handleClose();
+};
+
+const handleAreaChecked = (nodes: Array<ICheckedNodes>) => {
+  let result: IResult = {
+    lv1: [],
+    lv2: [],
+    lv3: []
+  };
+  nodes.forEach((node) => {
+    if (node.level === 1) {
+      result.lv1.push(node.value);
+    }
+    if (node.level === 2) {
+      /** 非直辖市 */
+      if (nodes.findIndex((n) => n.value === node?.parent?.value) > -1) {
+      } else {
+        if (node.children.length) {
+          /** 非直辖市 */
+          result.lv2.push(node.value);
+        } else {
+          /** 直辖市 */
+          result.lv3.push(node.value);
+        }
+      }
+    }
+    if (node.level === 3) {
+      if (nodes.findIndex((no) => no.value === node?.parent?.value) > -1) {
+      } else {
+        result.lv3.push(node.value);
+      }
+    }
+  });
+  return result;
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

@@ -0,0 +1,9 @@
+export interface IResult {
+  [key: string]: Array<string>;
+}
+
+export interface ICheckedNodes {
+  level: number;
+  value: string;
+  [key: string]: any;
+}

package/src/web/context-menu/createContextMenu.ts

@@ -0,0 +1,72 @@
+import { isClient } from '@vri/utils';
+import { createVNode, render } from 'vue';
+import contextMenuVue from './index.vue';
+import type { ContextMenuProps, CreateContextOptions } from './types';
+
+const menuManager: {
+  domList: Element[];
+  resolve: Fn;
+} = {
+  domList: [],
+  resolve: () => {}
+};
+
+export const createContextMenu = function (options: CreateContextOptions) {
+  const { event } = options || {};
+
+  // event?.preventDefault() 阻止浏览器的默认右键菜单事件
+  event && event?.preventDefault();
+
+  if (!isClient) {
+    return;
+  }
+  return new Promise((resolve) => {
+    const body = document.body;
+
+    const container = document.createElement('div');
+    const propsData: Partial<ContextMenuProps> = {
+      ...options
+    };
+    
+    if (options.event) {
+      propsData.axis = { x: event.clientX, y: event.clientY };
+      // @ts-ignore
+      delete propsData.event;
+    }
+    
+    const vm = createVNode(contextMenuVue, propsData);
+    render(vm, container);
+
+    const handleClick = function () {
+      menuManager.resolve('');
+    };
+
+    menuManager.domList.push(container);
+
+    const remove = function () {
+      menuManager.domList.forEach((dom: Element) => {
+        try {
+          dom && body.removeChild(dom);
+        } catch (error) {}
+      });
+      body.removeEventListener('click', handleClick);
+      body.removeEventListener('scroll', handleClick);
+    };
+
+    menuManager.resolve = function (arg) {
+      remove();
+      resolve(arg);
+    };
+    remove();
+    body.appendChild(container);
+    // body.addEventListener('click', handleClick);
+    // body.addEventListener('scroll', handleClick);
+  });
+};
+
+export const destroyContextMenu = function () {
+  if (menuManager) {
+    menuManager.resolve('');
+    menuManager.domList = [];
+  }
+};

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

@@ -0,0 +1,4 @@
+export { createContextMenu, destroyContextMenu } from './createContextMenu';
+export { useContextMenu } from './useContextMenu';
+
+export * from './types';

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

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { useClickAway, useEventListener, useTimeoutFn } from '@vri/use';
+import { computed, ref, type CSSProperties } from 'vue';
+import type { Axis, ContextMenuItem } from './types';
+import { MenuItem } from '../menu';
+
+interface Props {
+  axis?: Axis;
+  styles?: CSSProperties;
+  width?: number;
+  items?: ContextMenuItem[];
+}
+
+const {
+  axis, styles, width, items
+} = defineProps<Props>();
+
+let contextMenuRef = ref();
+
+const getStyle = computed((): CSSProperties => {
+  const { x, y } = axis || { x: 0, y: 0 };
+  const menuHeight = (items || []).length * 40;
+  const menuWidth = width || 0;
+  const body = document.body;
+
+  const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
+  const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
+  return {
+    zIndex: 3000,
+    ...styles,
+    position: 'fixed',
+    width: `${width}px`,
+    left: `${left + 1}px`,
+    top: `${top + 1}px`
+  };
+});
+
+let show = ref(false);
+
+useTimeoutFn(() => {
+  show.value = true;
+}, 0);
+
+useClickAway(contextMenuRef, () => {
+  show.value = false;
+}, {
+  listenerOptions: {
+    capture: true
+  }
+});
+
+useEventListener(window, 'scroll', () => {
+  show.value = false;
+}, {
+  capture: true
+});
+
+useEventListener(window, 'drag', () => {
+  show.value = false;
+}, {
+  capture: true
+});
+
+function handleClick (item: ContextMenuItem) {
+  if (!item?.disabled) {
+    item.handler?.();
+    show.value = false;
+  }
+}
+</script>
+
+<template>
+  <transition name="vri-zoom-in-top">
+    <div ref="contextMenuRef" v-show="show" :style="getStyle" @click.stop class="vri-menu">
+      <div class="vri-sub-menu">
+        <menu-item v-for="(item, index) in items"
+          @click="handleClick(item)"
+          :index="index + item.text"
+          :title="item.text"
+          :divider="item.divider"
+          :disabled="item.disabled"
+          :icon="item.iconCfg"
+          isAloneUse
+          :key="index" />
+      </div>
+    </div>
+  </transition>
+</template>
+

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

@@ -0,0 +1,27 @@
+import { type CSSProperties } from 'vue';
+import { type IconProps } from '../../common';
+
+export interface Axis {
+  x: number;
+  y: number;
+}
+
+export interface ContextMenuItem {
+  text: string;
+  iconCfg?: IconProps;
+  disabled?: boolean;
+  handler?: Fn;
+  divider?: boolean;
+}
+
+export interface CreateContextOptions {
+  event: MouseEvent;
+  styles?: CSSProperties | Record<string, string>;
+  items?: ContextMenuItem[];
+}
+
+export interface ContextMenuProps {
+  axis: Axis;
+  styles: CSSProperties;
+  items: ContextMenuItem[];
+}

package/src/web/context-menu/useContextMenu.ts

@@ -0,0 +1,14 @@
+import { onUnmounted, getCurrentInstance } from 'vue';
+import { createContextMenu, destroyContextMenu } from './createContextMenu';
+import type { ContextMenuItem } from './types';
+
+export type { ContextMenuItem };
+
+export function useContextMenu(authRemove = true) {
+  if (getCurrentInstance() && authRemove) {
+    onUnmounted(() => {
+      destroyContextMenu();
+    });
+  }
+  return [createContextMenu, destroyContextMenu];
+}

package/src/web/descriptions/description-item.vue

@@ -0,0 +1,34 @@
+<template>
+  <slot/>
+</template>
+
+<script lang="ts" setup>
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useNamespace } from '../../use';
+
+interface Props {
+  label?: string
+  span?: number
+  width?: string | number
+  minWidth?: string | number
+  align?: string
+  labelAlign?: string
+  className?: string
+  labelClassName?: string
+}
+
+const {
+  span = 1,
+  align = 'left'
+} = defineProps<Props>();
+
+const ns = /* hoist-static*/ useNamespace('descriptions-item');
+
+defineOptions({
+  name: ns.b()
+});
+</script>
+
+<style lang="scss">
+@import "./descriptions-item.scss";
+</style>

package/src/web/descriptions/description.vue

@@ -0,0 +1,124 @@
+<template>
+  <div :class="descriptionKls">
+    <div
+      v-if="title || extra || $slots.title || $slots.extra"
+      :class="ns.e('header')"
+    >
+      <div :class="ns.e('title')">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div :class="ns.e('extra')">
+        <slot name="extra">{{ extra }}</slot>
+      </div>
+    </div>
+
+    <div :class="ns.e('body')">
+      <table :class="[ns.e('table'), ns.is('bordered', border)]">
+        <tbody>
+          <template v-for="(row, index) in getRows()" :key="index">
+            <descriptions-row :row="row" />
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, provide, useSlots, getCurrentInstance } from 'vue';
+import { flattedChildren } from '../../utils';
+import { useSize } from 'element-plus';
+import { useNamespace } from '../../use';
+import DescriptionsRow from './descriptions-row.vue';
+import { descriptionsKey } from './token';
+
+interface Props {
+  border?: boolean
+  column?: number
+  direction?: 'horizontal' | 'vertical'
+  size?: string
+  title?: string
+  extra?: string
+}
+
+const {
+  border = false,
+  column = 3,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  direction = 'horizontal',
+  title,
+  extra
+} = defineProps<Props>();
+
+const ns = /* hoist-static*/ useNamespace('descriptions');
+
+defineOptions({
+	name: ns.b()
+});
+
+const descriptionsSize = useSize();
+
+const slots = useSlots();
+
+const instance = getCurrentInstance()!;
+
+provide(descriptionsKey, instance.props as any);
+
+const descriptionKls = computed(() => [ns.b(), ns.m(descriptionsSize.value)]);
+
+const filledNode = (node, span, count, isLast = false) => {
+  if (!node.props) {
+    node.props = {};
+  }
+  if (span > count) {
+    node.props.span = count;
+  }
+  if (isLast) {
+    // set the last span
+    node.props.span = span;
+  }
+  return node;
+};
+
+const getRows = () => {
+  const children = flattedChildren(slots.default?.()).filter(
+    (node) => node?.type?.name === 'vri-descriptions-item'
+  );
+  const rows: number[] = [];
+  let temp: number[] = [];
+  let count = column;
+  let totalSpan = 0; // all spans number of item
+
+  children.forEach((node, index) => {
+    const span = node.props?.span || 1;
+
+    if (index < children.length - 1) {
+      totalSpan += span > count ? count : span;
+    }
+
+    if (index === children.length - 1) {
+      // calculate the last item span
+      const lastSpan = column - (totalSpan % column);
+      temp.push(filledNode(node, lastSpan, count, true));
+      rows.push(temp);
+      return;
+    }
+
+    if (span < count) {
+      count -= span;
+      temp.push(node);
+    } else {
+      temp.push(filledNode(node, span, count));
+      rows.push(temp);
+      count = column;
+      temp = [];
+    }
+  });
+
+  return rows;
+};
+</script>
+
+<style lang="scss">
+@import "./descriptions.scss";
+</style>

package/src/web/descriptions/descriptions-cell.ts

@@ -0,0 +1,95 @@
+import { defineComponent, h, inject } from 'vue';
+import { addUnit } from '@vri/utils';
+import { useNamespace } from '../../use';
+import { getNormalizedProps } from '../../utils';
+import { descriptionsKey } from './token';
+
+import type { VNode } from 'vue';
+import type { IDescriptionsInject, IDescriptionsItemInject } from './descriptions.type';
+
+export default defineComponent({
+  name: 'VriDescriptionsCell',
+  props: {
+    cell: {
+      type: Object
+    },
+    tag: {
+      type: String
+    },
+    type: {
+      type: String
+    }
+  },
+  setup() {
+    const descriptions = inject(descriptionsKey, {} as IDescriptionsInject);
+
+    return {
+      descriptions
+    };
+  },
+  render() {
+    const item = getNormalizedProps(this.cell as VNode) as IDescriptionsItemInject;
+
+    const { border, direction } = this.descriptions;
+    const isVertical = direction === 'vertical';
+    const label = this.cell?.children?.label?.() || item.label;
+    const content = this.cell?.children?.default?.();
+    const span = item.span;
+    const align = item.align ? `is-${item.align}` : '';
+    const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : '' || align;
+    const className = item.className;
+    const labelClassName = item.labelClassName;
+    const style = {
+      width: addUnit(item.width),
+      minWidth: addUnit(item.minWidth)
+    };
+    const ns = useNamespace('descriptions');
+
+    switch (this.type) {
+      case 'label':
+        return h(
+          this.tag,
+          {
+            style,
+            class: [ns.e('cell'), ns.e('label'), ns.is('bordered-label', border), ns.is('vertical-label', isVertical), labelAlign, labelClassName],
+            colSpan: isVertical ? span : 1
+          },
+          label
+        );
+      case 'content':
+        return h(
+          this.tag,
+          {
+            class: [ns.e('cell'), ns.e('content'), ns.is('bordered-content', border), ns.is('vertical-content', isVertical), align, className],
+            colSpan: isVertical ? span : span * 2 - 1
+          },
+          content
+        );
+      default:
+        return h(
+          'td',
+          {
+            style,
+            class: [ns.e('cell'), align],
+            colSpan: span
+          },
+          [
+            h(
+              'span',
+              {
+                class: [ns.e('label'), labelClassName]
+              },
+              label
+            ),
+            h(
+              'span',
+              {
+                class: [ns.e('content'), className]
+              },
+              content
+            )
+          ]
+        );
+    }
+  }
+});

package/src/web/descriptions/descriptions-item.scss

@@ -0,0 +1,68 @@
+$descriptions-item-label-margin-right: () !default;
+$descriptions-item-label-margin-right: map-merge(
+  (
+    'large': 16px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $descriptions-item-label-margin-right
+);
+
+$descriptions-item-vertical-label-padding-bottom: () !default;
+$descriptions-item-vertical-label-padding-bottom: map-merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $descriptions-item-vertical-label-padding-bottom
+);
+
+@include b(descriptions) {
+  @include e(label) {
+    &.#{$namespace}-descriptions__cell.is-bordered-label {
+      font-weight: bold;
+      color: getCssVar('text-color', 'regular');
+      background: getCssVar('descriptions-item-bordered-label-background');
+    }
+
+    &:not(.is-bordered-label) {
+      color: getCssVar('text-color', 'primary');
+      margin-right: map-get($descriptions-item-label-margin-right, 'default');
+    }
+
+    &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+      padding-bottom: map-get(
+        $descriptions-item-vertical-label-padding-bottom,
+        'default'
+      );
+    }
+  }
+
+  @include e(content) {
+    &.#{$namespace}-descriptions__cell.is-bordered-content {
+      color: getCssVar('text-color', 'primary');
+    }
+
+    &:not(.is-bordered-label) {
+      color: getCssVar('text-color', 'regular');
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(label) {
+        &:not(.is-bordered-label) {
+          margin-right: map-get($descriptions-item-label-margin-right, $size);
+        }
+
+        &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+          padding-bottom: map-get(
+            $descriptions-item-vertical-label-padding-bottom,
+            $size
+          );
+        }
+      }
+    }
+  }
+}