vft 0.0.1 → 0.0.3

package/src/web/descriptions/descriptions-row.vue

@@ -1,49 +0,0 @@
-<template>
-  <template v-if="descriptions.direction === 'vertical'">
-    <tr>
-      <template v-for="(cell, index) in row" :key="`tr1-${index}`">
-        <descriptions-cell :cell="cell" tag="th" type="label" />
-      </template>
-    </tr>
-    <tr>
-      <template v-for="(cell, index) in row" :key="`tr2-${index}`">
-        <descriptions-cell :cell="cell" tag="td" type="content" />
-      </template>
-    </tr>
-  </template>
-  <tr v-else>
-    <template v-for="(cell, index) in row" :key="`tr3-${index}`">
-      <template v-if="descriptions.border">
-        <descriptions-cell :cell="cell" tag="td" type="label" />
-        <descriptions-cell :cell="cell" tag="td" type="content" />
-      </template>
-      <descriptions-cell v-else :cell="cell" tag="td" type="both" />
-    </template>
-  </tr>
-</template>
-
-<script lang="ts" setup>
-import { inject } from 'vue';
-import { useNamespace } from '../../use';
-
-import DescriptionsCell from './descriptions-cell';
-import { descriptionsKey } from './token';
-
-import type { IDescriptionsInject } from './descriptions.type';
-
-interface Props {
-	row?: Array<any>
-}
-
-const {
-	row = []
-} = defineProps<Props>();
-
-const ns = /* hoist-static*/ useNamespace('descriptions-row');
-
-defineOptions({
-	name: ns.b()
-});
-
-const descriptions = inject(descriptionsKey, {} as IDescriptionsInject);
-</script>

package/src/web/descriptions/descriptions.scss

@@ -1,153 +0,0 @@
-$descriptions-header-margin-bottom: () !default;
-$descriptions-header-margin-bottom: map-merge(
-  (
-    'large': 20px,
-    'default': 16px,
-    'small': 12px,
-  ),
-  $descriptions-header-margin-bottom
-);
-
-$descriptions-title-font-size: () !default;
-$descriptions-title-font-size: map-merge(
-  (
-    'large': 16px,
-    'default': 16px,
-    'small': 14px,
-  ),
-  $descriptions-title-font-size
-);
-
-$descriptions-cell-padding-bottom: () !default;
-$descriptions-cell-padding-bottom: map-merge(
-  (
-    'large': 16px,
-    'default': 12px,
-    'small': 8px,
-  ),
-  $descriptions-cell-padding-bottom
-);
-
-$descriptions-bordered-cell-padding: () !default;
-$descriptions-bordered-cell-padding: map-merge(
-  (
-    'large': 12px 15px,
-    'default': 8px 11px,
-    'small': 4px 7px,
-  ),
-  $descriptions-bordered-cell-padding
-);
-
-$descriptions-cell-font-size: () !default;
-$descriptions-cell-font-size: map-merge(
-  (
-    'large': 14px,
-    'default': 14px,
-    'small': 12px,
-  ),
-  $descriptions-cell-font-size
-);
-
-@include b(descriptions) {
-  @include set-component-css-var('descriptions', $descriptions);
-
-  box-sizing: border-box;
-  font-size: getCssVar('font-size', 'base');
-  color: getCssVar('text-color', 'primary');
-
-  @include e(header) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: map-get($descriptions-header-margin-bottom, 'default');
-
-    @include e(title) {
-      color: getCssVar('text-color', 'primary');
-      font-size: map-get($descriptions-title-font-size, 'default');
-      font-weight: bold;
-    }
-  }
-
-
-
-  @include e(body) {
-    background-color: getCssVar('fill-color', 'blank');
-
-    .#{$namespace}-descriptions__table {
-      width: 100%;
-      border: 1px solid rgb(241, 246, 254);
-      border-radius: 4px;
-      table-layout: fixed;
-      overflow-wrap: break-word;
-      word-break: break-all;
-      border-collapse: collapse;
-
-      .#{$namespace}-descriptions__cell {
-        box-sizing: border-box;
-        text-align: left;
-        font-weight: normal;
-        line-height: 23px;
-        font-size: map-get($descriptions-cell-font-size, 'default');
-
-        @include when(left) {
-          text-align: left;
-        }
-
-        @include when(center) {
-          text-align: center;
-        }
-
-        @include when(right) {
-          text-align: right;
-        }
-      }
-
-      &.is-bordered {
-        .#{$namespace}-descriptions__cell {
-          border: getCssVar('descriptions-table-border');
-          padding: map-get($descriptions-bordered-cell-padding, 'default');
-        }
-      }
-
-      &:not(.is-bordered) {
-        .#{$namespace}-descriptions__cell {
-          padding-bottom: map-get($descriptions-cell-padding-bottom, 'default');
-        }
-      }
-    }
-  }
-
-  @each $size in (large, small) {
-    @include m($size) {
-      font-size: map-get($input-font-size, $size);
-
-      @include e(header) {
-        margin-bottom: map-get($descriptions-header-margin-bottom, $size);
-
-        @include e(title) {
-          font-size: map-get($descriptions-title-font-size, $size);
-        }
-      }
-
-      @include e(body) {
-        .#{$namespace}-descriptions__table {
-          .#{$namespace}-descriptions__cell {
-            font-size: map-get($descriptions-cell-font-size, $size);
-          }
-
-          &.is-bordered {
-            .#{$namespace}-descriptions__cell {
-              padding: map-get($descriptions-bordered-cell-padding, $size);
-            }
-          }
-
-          &:not(.is-bordered) {
-            .#{$namespace}-descriptions__cell {
-              padding-bottom: map-get($descriptions-cell-padding-bottom, $size);
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/web/descriptions/descriptions.type.ts

@@ -1,19 +0,0 @@
-export interface IDescriptionsInject {
-  border: boolean;
-  column: number;
-  direction: 'horizontal' | 'vertical';
-  size: '' | 'default' | 'small' | 'large';
-  title: string;
-  extra: string;
-}
-
-export interface IDescriptionsItemInject {
-  label: string;
-  span: number;
-  width: string | number;
-  minWidth: string | number;
-  align: string;
-  labelAlign: string;
-  className: string;
-  labelClassName: string;
-}

package/src/web/descriptions/index.ts

@@ -1,4 +0,0 @@
-import DescriptionsItem from './description-item.vue';
-import Descriptions from './description.vue';
-
-export { DescriptionsItem, Descriptions };

package/src/web/descriptions/token.ts

@@ -1,4 +0,0 @@
-import type { InjectionKey } from 'vue';
-import type { IDescriptionsInject } from './descriptions.type';
-
-export const descriptionsKey = 'vriDescriptions' as any as InjectionKey<IDescriptionsInject>;

package/src/web/divider/index.ts

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

package/src/web/divider/index.vue

@@ -1,60 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useNamespace } from '../../use';
-import type { CSSProperties } from 'vue';
-import type { BorderColor, BorderStyle } from './types';
-
-interface DividerProps {
-  direction?: 'horizontal' | 'vertical'
-  contentPosition?: 'left' | 'center' | 'right',
-  borderStyle?: BorderStyle,
-  borderColor?: BorderColor,
-  marginY?: string,
-  marginX?: string,
-}
-
-const {
-  direction = 'horizontal',
-  contentPosition = 'center',
-  borderStyle = 'solid',
-  borderColor,
-  marginY,
-  marginX
-} = defineProps<DividerProps>();
-
-const ns = /* hoist-static*/ useNamespace('divider');
-
-defineOptions({
-  name: ns.b()
-});
-
-const dividerStyle = computed(() => {
-  return {
-    ...ns.cssVarBlock({
-      'border-style': borderStyle,
-      'border-color': borderColor,
-      'margin-y': marginY,
-      'margin-x': marginX
-    })
-  } as CSSProperties;
-});
-</script>
-
-<template>
-  <div
-    :class="[ns.b(), ns.m(direction)]"
-    :style="dividerStyle"
-    role="separator"
-  >
-    <div
-      v-if="$slots.default && direction !== 'vertical'"
-      :class="[ns.e('text'), ns.is(contentPosition)]"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@import "./index.scss";
-</style>

package/src/web/divider/types.ts

@@ -1,2 +0,0 @@
-export type BorderStyle = CSSStyleDeclaration['borderStyle']
-export type BorderColor = CSSStyleDeclaration['borderColor']

package/src/web/empty/constants.ts

@@ -1,12 +0,0 @@
-export enum Empty {
-  /** 暂无收藏记录 */
-  NO_COLLECT = 'no-collect.png',
-  /** 整个页面数据 */
-  NO_PAGE_DATA = 'no-page-data.png',
-  /** 暂无数据 */
-  NO_DATA = 'no-data.png',
-  /** 此筛选条件下无结果 */
-  NO_FILTER = 'no-filter.png',
-  /** 没有搜索结果 */
-  NO_SEARCH = 'no-search.png'
-}

package/src/web/empty/index.ts

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

package/src/web/empty/index.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { renderTNode, setSize, VNode } from '@vri/utils';
-import { useNamespace } from '../../use';
-import type { ComponentSize } from '../../../types/component';
-import { getSizeType } from '../../utils';
-import { Empty } from './constants';
-import './index.scss';
-
-import NoCollect from './assets/no-collect.png';
-import NoData from './assets/no-data.png';
-import NoFilter from './assets/no-filter.png';
-import NoPageData from './assets/no-page-data.png';
-import NoSearch from './assets/no-search.png';
-
-interface EmptyProps {
-  /** 图片类型或字符串 支持自定义 slot */
-  img?: string;
-  type?: Empty;
-  /** 图片大小 */
-  size?: ComponentSize | string | number[];
-  /** 图片底部描述 支持自定义 slot */
-  desc?: string;
-}
-
-const { img, type = Empty.NO_DATA, size } = defineProps<EmptyProps>();
-
-const ns = /* hoist-static*/ useNamespace('empty');
-
-defineOptions({
-  name: ns.b()
-});
-
-const instance = getCurrentInstance();
-
-const imgTypeMap = new Map<Empty, {text: string; img: string; size?: EmptyProps['size']; descStyle?: Record<string, Numberish>}>([
-  [
-    Empty.NO_COLLECT,
-    {
-      text: '暂无收藏记录',
-      img: NoCollect
-    }
-  ],
-  [
-    Empty.NO_PAGE_DATA,
-    {
-      text: '没有找到相关信息',
-      size: 300,
-      img: NoPageData
-    }
-  ],
-  [
-    Empty.NO_DATA,
-    {
-      text: '暂无数据',
-      img: NoData
-    }
-  ],
-  [
-    Empty.NO_FILTER,
-    {
-      text: '此筛选条件下无结果',
-      img: NoFilter
-    }
-  ],
-  [
-    Empty.NO_SEARCH,
-    {
-      text: '没有搜索结果',
-      img: NoSearch
-    }
-  ]
-]);
-
-const imgInfos = imgTypeMap.get(type);
-
-const imgContent = computed(() => img || imgInfos?.img);
-
-const descContent = computed(() => renderTNode(instance, 'desc', { defaultNode: imgInfos?.text }));
-
-const _sizeType = getSizeType(size);
-</script>
-
-<template>
-  <div :class="[ns.b(), _sizeType ? ns.m(_sizeType) : '']">
-    <div :class="ns.e('image')" :style="_sizeType ? {} : setSize(imgInfos?.size || size)">
-      <slot v-if="$slots.img" name="img" />
-      <img v-else :src="imgContent" alt="" />
-    </div>
-    <span :class="ns.e('desc')" v-if="descContent">
-      <v-node :content="descContent" />
-    </span>
-    <div v-if="$slots.default" :class="ns.e('bottom')">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/web/exception/index.ts

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

package/src/web/exception/index.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { generateCssVars } from '@vri/utils';
-import { useRouter } from 'vue-router';
-import { useRouterHelper } from '@vri/router';
-import { useTabs } from '@vri/store';
-import Result from '../result/index.vue';
-import ExceptionSrc from './exception.png';
-
-interface Props {
-  title?: string;
-  showRefresh?: boolean
-  showHome?: boolean
-}
-
-const {
-	title = '页面打不开？刷新下试试',
-  showRefresh = true,
-  showHome
-} = defineProps<Props>();
-
-const router = useRouter();
-
-const { goRoot } = useRouterHelper(router);
-const { refreshPage } = useTabs();
-
-const initStyle = {
-  ...generateCssVars({
-    'title-font-size': '16px'
-  }, 'result')
-};
-</script>
-
-<template>
-  <result :title="title" :icon="{icon: ExceptionSrc, size: 350}" :style="initStyle">
-    <template #extra>
-      <el-button v-if="showHome" type="primary" @click="goRoot">返回主页</el-button>
-      <el-button v-if="showRefresh" type="primary" @click="refreshPage">刷新页面</el-button>
-    </template>
-  </result>
-</template>
-
-<style scoped lang="scss">
-
-</style>

package/src/web/filter/README.md

@@ -1,25 +0,0 @@
-# filter 筛选组件
-
-## Usage
-
-```html
-<vri-filter :menus="menus"></vri-filter>
-```
-
-## Props
-
-| 属性名 | 说明         | 类型               | 是否必传 | 默认值 |
-| ------ | ------------ | ------------------ | -------- | ------ |
-| menus  | 筛选菜单集合 | Array\<MenuProps\> | 是       | -      |
-| gap    | 菜单间距(px) | string\|number     | 否       | 40     |
-
-### menu props
-
-| 属性名    | 说明                            | 类型     | 是否必传             | 默认值 |
-| --------- | ------------------------------- | -------- | -------------------- | ------ |
-| title     | 筛选项名称                      | string   | 是                   | -      |
-| component | 组件名称                        | string   | 是                   | -      |
-| options   | 菜单选项列表                    | Array    | 是（仅日期组件不传） | -      |
-| submitFn  | 提交处理函数                    | Function | 是                   | -      |
-| type      | 日期选择器类型 / 级联是否为地区 | string   | 否                   | -      |
-| required  | 单选是否必须有值                | boolean  | 否                   | true   |

package/src/web/filter/index.scss

@@ -1,14 +0,0 @@
-$name: 'filter';
-
-@function getCompCssVar($value) {
-  @return getCssVar($name, $value);
-}
-
-@include b($name) {
-  display: inline-flex;
-  align-items: center;
-  gap: getCompCssVar('gap');
-  @include e(filter-menu) {
-    display: inline-block;
-  }
-}

package/src/web/filter/index.ts

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

package/src/web/filter/index.vue

@@ -1,60 +0,0 @@
-<template>
-  <div :class="ns.b()" :style="filterStyle">
-    <div :class="ns.e('filter-menu')" v-for="(menu, index) in menus" :key="menu.title">
-      <!-- 单选、多选、级联、更多 -->
-      <template v-if="menu.component !== ComponentType.DATE">
-        <component
-          :is="filterComponents[index]"
-          :title="menu.title"
-          :options="menu.options"
-          :type="menu?.type"
-          :label-key="menu?.labelKey"
-          :value-key="menu?.valueKey"
-          :children-key="menu?.childrenKey"
-          :has-all="menu?.hasAll"
-          :hide-search="menu?.hideSearch"
-          :value="menu?.value"
-          :required="menu?.required"
-          @submit="menu.submitFn"
-        />
-      </template>
-      <!-- 日期 -->
-      <template v-else>
-        <component :is="filterComponents[index]" :title="menu.title" :type="menu?.type" :shortcuts="menu?.shortcuts" @submit="menu.submitFn"/>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { type CSSProperties, defineAsyncComponent, computed } from 'vue';
-import { useNamespace } from '../../use';
-import { ComponentType, type FilterMenuProps } from './type';
-
-interface FilterProps {
-  menus: Array<FilterMenuProps>;
-  gap?: string | number;
-}
-
-const { menus, gap = 40 } = defineProps<FilterProps>();
-
-const ns = /* hoist-static*/ useNamespace('filter');
-defineOptions({ name: ns.b() });
-
-const filterStyle = computed(() => {
-  return {
-    ...ns.cssVarBlock({
-      gap: isNaN(+gap) ? `${gap}` : `${gap}px`
-    })
-  } as CSSProperties;
-});
-
-let filterComponents: any = {};
-menus.forEach((menu, index) => {
-  filterComponents[index] = defineAsyncComponent(() => import(`../${menu.component}/index.vue`));
-});
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>

package/src/web/filter/type.ts

@@ -1,13 +0,0 @@
-export enum ComponentType {
-  CASCADER = 'cascader-select',
-  SINGLE = 'single-select',
-  MULTIPLE = 'multiple-select',
-  DATE = 'datepicker',
-  TILED = 'tiled-select'
-}
-
-export interface FilterMenuProps {
-  component: ComponentType;
-  submitFn: Function;
-  [key: string]: any;
-}

package/src/web/focus-trap/index.ts

@@ -1,6 +0,0 @@
-import FocusTrap from './index.vue';
-
-export { FocusTrap };
-
-export * from './tokens';
-export * from './utils';