vft 0.0.1 → 0.0.3

package/src/web/nodata/index.scss

@@ -1,37 +0,0 @@
-$name: 'nodata';
-
-@include b($name) {
-  text-align: center;
-  @include e(img) {
-    @include when(global) {
-      margin-top: 96px;
-      width: 368px;
-      height: 248px;
-    }
-    @include when(page) {
-      margin-top: 80px;
-      width: 288px;
-      height: 176px;
-    }
-    @include when(local) {
-      margin-top: 40px;
-      width: 176px;
-      height: 106px;
-    }
-  }
-  @include e(text) {
-    padding-top: 16px;
-    font-size: 13px;
-    color: #8193ad;
-    line-height: 18px;
-    @include when(global) {
-      padding-bottom: 96px;
-    }
-    @include when(page) {
-      padding-bottom: 80px;
-    }
-    @include when(local) {
-      padding-bottom: 40px;
-    }
-  }
-}

package/src/web/nodata/index.ts

@@ -1,6 +0,0 @@
-import Nodata from './index.vue';
-import EmptyFail from './fail.vue';
-
-export * from './types';
-
-export { Nodata, EmptyFail };

package/src/web/nodata/index.vue

@@ -1,46 +0,0 @@
-<template>
-  <div :class="ns.b()">
-    <img :src="getImageUrl(type)" :class="[ns.e('img'), ns.is(level)]" />
-    <div :class="[ns.e('text'), ns.is(level)]">
-      <slot>{{ TypeText[`${type}`] }}</slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useNamespace } from '../../use';
-import { TypeText } from './types';
-
-const ns = /* hoist-static*/ useNamespace('nodata');
-defineOptions({ name: ns.b() });
-
-interface NodataProps {
-  type: number | string;
-}
-
-const { type } = defineProps<NodataProps>();
-
-const level = computed(() => {
-  let lv = 'global';
-  if (+type < 200 && [105, 106].includes(+type)) {
-    lv = 'global';
-  }
-  if (+type < 200 && ![105, 106].includes(+type)) {
-    lv = 'page';
-  }
-  if (+type >= 200) {
-    lv = 'local';
-  }
-  return lv;
-});
-
-/** Vite中动态引入图片函数 */
-const getImageUrl = (type: string | number) => {
-  return new URL(`./img/${type}.png`, import.meta.url).href;
-};
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>

package/src/web/nodata/types.ts

@@ -1,17 +0,0 @@
-export interface ITypeText {
-  [key: string]: string;
-}
-export const TypeText: ITypeText = {
-  '100': '暂无数据',
-  '101': '暂无相关数据',
-  '102': '没有搜索结果？换个关键词试试',
-  '103': '此筛选条件下无结果',
-  '104': '加载失败，请刷新重试',
-  '105': '页面打不开？刷新下试试',
-  '106': '抱歉，您访问的页面报错了',
-  '107': '网络错误，请检查网络连接后重试',
-  '200': '暂无数据',
-  '201': '暂无相关数据',
-  '202': '没有搜索结果？换个关键词试试',
-  '203': '此筛选条件下无结果'
-};

package/src/web/only-child/index.tsx

@@ -1,69 +0,0 @@
-import { Comment, Fragment, Text, cloneVNode, defineComponent, inject, withDirectives } from 'vue';
-import { NOOP, isObject } from '@vue/shared';
-import { FORWARD_REF_INJECTION_KEY, useForwardRefDirective, useNamespace } from '../../use';
-import { debugWarn } from '../../utils';
-
-import type { Ref, VNode } from 'vue';
-
-const NAME = 'VriOnlyChild';
-
-export const OnlyChild = defineComponent({
-  name: NAME,
-  setup(_, { slots, attrs }) {
-    const forwardRefInjection = inject(FORWARD_REF_INJECTION_KEY);
-    const forwardRefDirective = useForwardRefDirective(forwardRefInjection?.setForwardRef ?? NOOP);
-    return () => {
-      const defaultSlot = slots.default?.(attrs);
-      if (!defaultSlot) return null;
-
-      if (defaultSlot.length > 1) {
-        debugWarn(NAME, 'requires exact only one valid child.');
-        return null;
-      }
-
-      const firstLegitNode = findFirstLegitChild(defaultSlot);
-      if (!firstLegitNode) {
-        debugWarn(NAME, 'no valid child node found');
-        return null;
-      }
-
-      return withDirectives(cloneVNode(firstLegitNode!, attrs), [[forwardRefDirective]]);
-    };
-  }
-});
-
-function findFirstLegitChild(node: VNode[] | undefined): VNode | null {
-  if (!node) return null;
-  const children = node as VNode[];
-  for (const child of children) {
-    /**
-     * when user uses h(Fragment, [text]) to render plain string,
-     * this switch case just cannot handle, when the value is primitives
-     * we should just return the wrapped string
-     */
-    if (isObject(child)) {
-      switch (child.type) {
-        case Comment:
-          continue;
-        case Text:
-        case 'svg':
-          return wrapTextContent(child);
-        case Fragment:
-          return findFirstLegitChild(child.children as VNode[]);
-        default:
-          return child;
-      }
-    }
-    return wrapTextContent(child);
-  }
-  return null;
-}
-
-function wrapTextContent(s: string | VNode) {
-  const ns = useNamespace('only-child');
-  return <span class={ns.e('content')}>{s}</span>;
-}
-
-export type OnlyChildExpose = {
-  forwardRef: Ref<HTMLElement>;
-};

package/src/web/pagination/components/jumper.vue

@@ -1,49 +0,0 @@
-<template>
-  <span :class="ns.e('jump')" :disabled="disabled">
-    <span :class="[ns.e('goto')]">{{ t('el.pagination.goto') }}</span>
-    <vri-input
-      :size="size"
-      :class="[ns.e('editor'), ns.is('in-pagination')]"
-      :min="1"
-      :max="pageCount"
-      :disabled="disabled"
-      :model-value="innerValue"
-      :validate-event="false"
-      type="number"
-      @update:model-value="handleInput"
-      @change="handleChange"
-    />
-    <span :class="[ns.e('classifier')]">页</span>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import { type ComponentSize } from '../../../../types/component';
-import { useNamespace } from '../../../use';
-import VriInput from '../../input//index.vue';
-import { usePagination } from '../usePagination';
-
-interface Props {
-  size: ComponentSize
-}
-
-const {
-	size
-} = defineProps<Props>();
-
-const ns = useNamespace('pagination');
-const { pageCount, disabled, currentPage, changeEvent } = usePagination();
-const userInput = ref<number>();
-const innerValue = computed(() => userInput.value ?? currentPage?.value);
-
-function handleInput(val: number | string) {
-  userInput.value = +val;
-}
-
-function handleChange(val: number | string) {
-  val = Math.trunc(+val);
-  changeEvent?.(+val);
-  userInput.value = undefined;
-}
-</script>

package/src/web/pagination/components/next.vue

@@ -1,40 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="btn-next"
-    :disabled="internalDisabled"
-    :aria-disabled="internalDisabled"
-    @click="$emit('click', $event)"
-  >
-    <span v-if="nextText">{{ nextText }}</span>
-    <Icon icon="vi-arrow-right" :size="16" />
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import Icon from '../../../common/icon/index.vue';
-
-interface Props {
-  disabled?: boolean;
-  currentPage?: number;
-  pageCount?: number;
-  nextText?: string;
-}
-
-const {
-  disabled,
-  currentPage = 1,
-  pageCount = 50,
-  nextText
-} = defineProps<Props>();
-
-defineEmits(['click']);
-
-const internalDisabled = computed(
-  () =>
-    disabled ||
-    currentPage === pageCount ||
-    pageCount === 0
-);
-</script>

package/src/web/pagination/components/pager.vue

@@ -1,215 +0,0 @@
-<template>
-  <ul :class="nsPager.b()" @click="onPagerClick" @keyup.enter="onEnter">
-    <li
-      v-if="pageCount > 0"
-      :class="[
-        nsPager.is('active', currentPage === 1),
-        nsPager.is('disabled', disabled),
-      ]"
-      class="number"
-      :aria-current="currentPage === 1"
-      :tabindex="tabindex"
-    >
-      1
-    </li>
-    <li
-      v-if="showPrevMore"
-      :class="[
-        'more',
-        'btn-quickprev',
-        nsIcon.b(),
-        nsPager.is('disabled', disabled),
-      ]"
-      :tabindex="tabindex"
-      @mouseenter="onMouseEnter(true)"
-      @mouseleave="quickPrevHover = false"
-      @focus="onFocus(true)"
-      @blur="quickPrevFocus = false"
-    >
-      <Icon v-if="(quickPrevHover || quickPrevFocus) && !disabled" icon="vi-arrow-lefts" :size="12" :scale="0.8" />
-      <Icon v-else icon="vi-more" />
-    </li>
-    <li
-      v-for="pager in pagers"
-      :key="pager"
-      :class="[
-        nsPager.is('active', currentPage === pager),
-        nsPager.is('disabled', disabled),
-      ]"
-      class="number"
-      :aria-current="currentPage === pager"
-      :tabindex="tabindex"
-    >
-      {{ pager }}
-    </li>
-    <li
-      v-if="showNextMore"
-      :class="[
-        'more',
-        'btn-quicknext',
-        nsIcon.b(),
-        nsPager.is('disabled', disabled),
-      ]"
-      :tabindex="tabindex"
-      @mouseenter="onMouseEnter()"
-      @mouseleave="quickNextHover = false"
-      @focus="onFocus()"
-      @blur="quickNextFocus = false"
-    >
-      <Icon v-if="(quickNextHover || quickNextFocus) && !disabled" icon="vi-arrow-rights" :size="12"
-        :scale="0.8" />
-      <Icon v-else icon="vi-more" />
-    </li>
-    <li
-      v-if="pageCount > 1"
-      :class="[
-        nsPager.is('active', currentPage === pageCount),
-        nsPager.is('disabled', disabled),
-      ]"
-      class="number"
-      :aria-current="currentPage === pageCount"
-      :tabindex="tabindex"
-    >
-      {{ pageCount }}
-    </li>
-  </ul>
-</template>
-<script lang="ts" setup>
-import { computed, ref, watchEffect } from 'vue';
-import { useNamespace } from '../../../use';
-import Icon from '../../../common/icon/index.vue';
-
-interface Props {
-  currentPage?: number;
-  pageCount: number;
-  pagerCount?: number;
-  disabled?: boolean;
-}
-
-const {
-  currentPage = 1,
-  pageCount,
-  pagerCount = 7,
-  disabled
-} = defineProps<Props>();
-
-const emit = defineEmits(['change']);
-const nsPager = useNamespace('pager');
-const nsIcon = useNamespace('icon');
-const showPrevMore = ref(false);
-const showNextMore = ref(false);
-const quickPrevHover = ref(false);
-const quickNextHover = ref(false);
-const quickPrevFocus = ref(false);
-const quickNextFocus = ref(false);
-const pagers = computed(() => {
-  const halfPagerCount = (pagerCount - 1) / 2;
-  let showPrevMore = false;
-  let showNextMore = false;
-  if (pageCount > pagerCount) {
-    if (currentPage > pagerCount - halfPagerCount) {
-      showPrevMore = true;
-    }
-    if (currentPage < pageCount - halfPagerCount) {
-      showNextMore = true;
-    }
-  }
-  const array: number[] = [];
-  if (showPrevMore && !showNextMore) {
-    const startPage = pageCount - (pagerCount - 2);
-    for (let i = startPage; i < pageCount; i++) {
-      array.push(i);
-    }
-  } else if (!showPrevMore && showNextMore) {
-    for (let i = 2; i < pagerCount; i++) {
-      array.push(i);
-    }
-  } else if (showPrevMore && showNextMore) {
-    const offset = Math.floor(pagerCount / 2) - 1;
-    for (let i = currentPage - offset; i <= currentPage + offset; i++) {
-      array.push(i);
-    }
-  } else {
-    for (let i = 2; i < pageCount; i++) {
-      array.push(i);
-    }
-  }
-  return array;
-});
-const tabindex = computed(() => (disabled ? -1 : 0));
-watchEffect(() => {
-  const halfPagerCount = (pagerCount - 1) / 2;
-  showPrevMore.value = false;
-  showNextMore.value = false;
-  if (pageCount! > pagerCount) {
-    if (currentPage > pagerCount - halfPagerCount) {
-      showPrevMore.value = true;
-    }
-    if (currentPage < pageCount! - halfPagerCount) {
-      showNextMore.value = true;
-    }
-  }
-});
-
-function onMouseEnter (forward = false) {
-  if (disabled) return;
-  if (forward) {
-    quickPrevHover.value = true;
-  } else {
-    quickNextHover.value = true;
-  }
-}
-
-function onFocus (forward = false) {
-  if (forward) {
-    quickPrevFocus.value = true;
-  } else {
-    quickNextFocus.value = true;
-  }
-}
-
-function onEnter (e: UIEvent) {
-  const target = e.target as HTMLElement;
-  if (
-    target.tagName.toLowerCase() === 'li' &&
-    Array.from(target.classList).includes('number')
-  ) {
-    const newPage = Number(target.textContent);
-    if (newPage !== currentPage) {
-      emit('change', newPage);
-    }
-  } else if (
-    target.tagName.toLowerCase() === 'li' &&
-    Array.from(target.classList).includes('more')
-  ) {
-    onPagerClick(e);
-  }
-}
-
-function onPagerClick (event: UIEvent) {
-  const target = event.target as HTMLElement;
-  if (target.tagName.toLowerCase() === 'ul' || disabled) {
-    return;
-  }
-  let newPage = Number(target.textContent);
-  const pagerCountOffset = pagerCount - 2;
-  if (target.className.includes('more')) {
-    if (target.className.includes('quickprev')) {
-      newPage = currentPage - pagerCountOffset;
-    } else if (target.className.includes('quicknext')) {
-      newPage = currentPage + pagerCountOffset;
-    }
-  }
-  if (!Number.isNaN(+newPage)) {
-    if (newPage < 1) {
-      newPage = 1;
-    }
-    if (newPage > pageCount) {
-      newPage = pageCount;
-    }
-  }
-  if (newPage !== currentPage) {
-    emit('change', newPage);
-  }
-}
-</script>

package/src/web/pagination/components/prev.vue

@@ -1,35 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="btn-prev"
-    :disabled="internalDisabled"
-    :aria-disabled="internalDisabled"
-    @click="emit('click', $event)"
-  >
-    <span v-if="prevText">{{ prevText }}</span>
-    <Icon icon="vi-arrow-left" :size="16"/>
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import Icon from '../../../common/icon/index.vue';
-
-interface Props {
-  disabled?: boolean
-  currentPage?: number
-  prevText?:string
-}
-
-const {
-  disabled,
-  currentPage = 1,
-  prevText
-} = defineProps<Props>();
-
-const emit = defineEmits(['click']);
-
-const internalDisabled = computed(
-  () => disabled || currentPage <= 1
-);
-</script>

package/src/web/pagination/components/sizes.vue

@@ -1,76 +0,0 @@
-<template>
-  <span :class="ns.e('sizes')">
-    <el-select
-      :model-value="innerPageSize"
-      :disabled="disabled"
-      :popper-class="popperClass"
-      :size="size"
-      :validate-event="false"
-      @change="handleChange"
-    >
-      <el-option
-        v-for="item in innerPageSizes"
-        :key="item"
-        :value="item"
-        :label="item + '条/页'"
-      />
-    </el-select>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { isEqual } from 'lodash';
-import { ElOption, ElSelect } from 'element-plus';
-import { useNamespace } from '../../../use';
-import { usePagination } from '../usePagination';
-
-interface Props {
-  pageSize?: number
-  pageSizes?: number[]
-  popperClass?: string
-  disabled?: boolean
-  size?: string
-}
-
-const {
-  pageSize,
-  pageSizes = [10, 20, 30, 40, 50, 100],
-  popperClass,
-  disabled,
-  size
-} = defineProps<Props>();
-
-const emit = defineEmits(['page-size-change']);
-const ns = useNamespace('pagination');
-const pagination = usePagination();
-const innerPageSize = ref<number>(pageSize!);
-
-watch(
-  () => pageSizes,
-  (newVal, oldVal) => {
-    if (isEqual(newVal, oldVal)) return;
-    if (Array.isArray(newVal)) {
-      const _pageSize = newVal.includes(pageSize!)
-        ? pageSize
-        : pageSizes[0];
-      emit('page-size-change', _pageSize);
-    }
-  }
-);
-
-watch(
-  () => pageSize,
-  (newVal) => {
-    innerPageSize.value = newVal!;
-  }
-);
-
-const innerPageSizes = computed(() => pageSizes);
-function handleChange(val: number) {
-  if (val !== innerPageSize.value) {
-    innerPageSize.value = val;
-    pagination.handleSizeChange?.(Number(val));
-  }
-}
-</script>

package/src/web/pagination/components/total.vue

@@ -1,21 +0,0 @@
-<template>
-  <span :class="ns.e('total')" :disabled="disabled">
-    {{ total }}
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { useNamespace } from '../../../use';
-import { usePagination } from '../usePagination';
-
-const ns = useNamespace('pagination');
-const { disabled } = usePagination();
-
-interface Props {
-  total: number;
-}
-
-const {
-  total = 1000
-} = defineProps<Props>();
-</script>