vft 0.0.1

package/src/web/nodata/index.scss

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

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

package/src/web/nodata/index.vue

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

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

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

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

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

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

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

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

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