vft 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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