@wlydfe/pro-ui 0.2.21 → 0.2.24

package/packages/components/page/src/index.vue

@@ -1,385 +0,0 @@
-<template>
-  <div class="plus-page">
-    <component :is="renderWrapper().search" v-if="search">
-      <PlusSearch
-        ref="plusSearchInstance"
-        v-bind="search"
-        v-model="values"
-        :columns="processedColumns"
-        :search-loading="loadingStatus"
-        @search="handleSearch"
-        @reset="handleReset"
-      >
-        <template v-if="$slots['search-footer']" #footer="data">
-          <slot name="search-footer" v-bind="data" />
-        </template>
-
-        <template v-for="(_, key) in searchSlots" :key="key" #[key]="data">
-          <slot :name="key" v-bind="data" />
-        </template>
-      </PlusSearch>
-    </component>
-
-    <el-divider v-if="dividerProps" v-bind="dividerProps" />
-
-    <slot name="extra" />
-
-    <component :is="renderWrapper().table" :key="searchSlot" class="plus-page__table_wrapper">
-      <PlusTable
-        ref="plusTableInstance"
-        :title-bar="{ refresh: true }"
-        v-bind="table"
-        :adaptive="table?.adaptive ?? true"
-        :table-data="tableData"
-        :loading-status="loadingStatus"
-        :columns="processedColumns"
-        :pagination="
-          pagination === false
-            ? undefined
-            : {
-                ...pagination,
-                total,
-                modelValue: pageInfo,
-                pageSizeList: computedDefaultPageSizeList
-              }
-        "
-        @paginationChange="handlePaginationChange"
-        @refresh="handleRefresh"
-      >
-        <template v-if="$slots['table-title']" #title>
-          <slot name="table-title" />
-        </template>
-
-        <template v-if="$slots['table-toolbar']" #toolbar>
-          <slot name="table-toolbar" />
-        </template>
-
-        <template v-if="$slots['table-expand']" #expand="data">
-          <slot name="table-expand" v-bind="data" />
-        </template>
-
-        <template v-if="$slots['table-append']" #append>
-          <slot name="table-append" />
-        </template>
-
-        <template v-if="$slots['table-empty']" #empty>
-          <slot name="table-empty" />
-        </template>
-
-        <template v-for="(_, key) in tableSlots" :key="key" #[key]="data">
-          <slot :name="key" v-bind="data" />
-        </template>
-      </PlusTable>
-    </component>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PlusColumn, PageInfo, RecordType, Mutable, FieldValues } from '@wlydfe/pro-ui-types'
-import type { PlusSearchProps, PlusSearchInstance } from '@wlydfe/pro-ui-components/search'
-import { PlusSearch } from '@wlydfe/pro-ui-components/search'
-import type { PlusTableProps, PlusTableInstance } from '@wlydfe/pro-ui-components/table'
-import { PlusTable } from '@wlydfe/pro-ui-components/table'
-import type { PlusPaginationProps } from '@wlydfe/pro-ui-components/pagination'
-import { h, ref, computed, useSlots } from 'vue'
-import type { CardProps } from 'element-plus'
-import { ElCard, ElDivider } from 'element-plus'
-import { useTable } from '@wlydfe/pro-ui-hooks'
-import {
-  isPlainObject,
-  getFieldSlotName,
-  getLabelSlotName,
-  getExtraSlotName,
-  getPreviousSlotName
-} from '@wlydfe/pro-ui-components/utils'
-import { DefaultPageInfo, DefaultPageSizeList } from '@wlydfe/pro-ui-constants'
-
-export interface PlusPageProps {
-  /**
-   * 配置
-   */
-  columns: PlusColumn[]
-  /**
-   *
-   * params参数中一定会有 pageSize 和  page ，这两个参数是 plus-pro-components 的规范
-   * @param params
-   */
-  request: (params: Partial<PageInfo> & RecordType) => Promise<{
-    /** 数据 */
-    data: RecordType[]
-    /** 不传会使用 data 的长度，如果是分页一定要传*/
-    total: number
-  }>
-
-  /**
-   * PlusSearchProps
-   */
-  search?: false | Partial<PlusSearchProps>
-  /**
-   * PlusTableProps
-   */
-  table?: Partial<PlusTableProps>
-
-  /**
-   * request的 params 其他参数，默认会带pageSize，page和 PlusSearch组件中的值
-   */
-  params?: RecordType
-
-  /**
-   * 对通过 request 获取的数据进行处理
-   * @param data
-   */
-  postData?: <T = RecordType[]>(data: T[]) => T[]
-  /**
-   * 搜索之前进行一些修改
-   * @param params
-   */
-  beforeSearchSubmit?: <T = RecordType>(params: T) => T
-
-  /**
-   *  表格和搜索是否需要el-card 包裹 默认true
-   */
-  isCard?: boolean
-  /**
-   * 搜索外层的el-card的props ，当isCard为true时生效
-   */
-  searchCardProps?: Partial<Mutable<CardProps>>
-  /**
-   *   表格外层的el-card的props ，当isCard为true时生效
-   */
-  tableCardProps?: Partial<Mutable<CardProps>>
-  defaultPageInfo?: PageInfo
-  defaultPageSizeList?: number[]
-  pagination?: false | Omit<PlusPaginationProps, 'total' | 'modelValue' | 'pageSizeList'>
-  /**
-   * 组件渲染完成后是否立即调用getList
-   */
-  immediate?: boolean
-  /**
-   * 搜索与表格分割线
-   */
-  dividerProps?: false | Partial<RecordType>
-
-  /**
-   * 可以修改默认的分页参数
-   */
-  pageInfoMap?: { page?: string; pageSize?: string }
-
-  /**
-   * 自定义的插槽是否对 PlusSearch 组件提供。当启用时，自定义的插槽 PlusTable 内的表单不生效
-   * @version v0.1.25
-   * @default false
-   */
-  searchSlot?: boolean
-}
-export interface PlusPageEmits {
-  (e: 'search', data: FieldValues): void
-  (e: 'reset', data: FieldValues): void
-  (e: 'paginationChange', pageInfo: PageInfo): void
-  /**
-   * 数据加载失败时触发
-   */
-  (e: 'requestError', error: unknown): void
-  /**
-   * 数据加载完成时触发
-   */
-  (e: 'requestComplete', tableData: RecordType[]): void
-}
-
-defineOptions({
-  name: 'PlusPage'
-})
-
-const props = withDefaults(defineProps<PlusPageProps>(), {
-  params: () => ({}),
-  columns: () => [],
-  postData: undefined,
-  beforeSearchSubmit: undefined,
-  isCard: true,
-  // eslint-disable-next-line vue/require-valid-default-prop
-  search: () => ({}),
-  table: () => ({}),
-  defaultPageInfo: () => ({ ...DefaultPageInfo }),
-  defaultPageSizeList: () => DefaultPageSizeList,
-  searchCardProps: () => ({}),
-  tableCardProps: () => ({}),
-  /**
-   * 分页组件的其他参数，不包含total，modelValue，pageSizeList
-   */
-  pagination: () => ({}),
-  immediate: true,
-  dividerProps: false,
-  pageInfoMap: () => ({
-    page: 'page',
-    pageSize: 'pageSize'
-  }),
-  searchSlot: false
-})
-const emit = defineEmits<PlusPageEmits>()
-
-// 处理 columns 的默认值
-const processedColumns = computed(() => {
-  return props.columns.map(column => ({
-    hideInSearch: true, // 默认为 true
-    ...column
-  }))
-})
-
-const formSlotList = [
-  getFieldSlotName(),
-  getLabelSlotName(),
-  getExtraSlotName(),
-  getPreviousSlotName()
-]
-
-const slots = useSlots()
-
-const group = computed(() => {
-  const formSlots = {}
-  const otherSlots = {}
-  Object.keys(slots).forEach(key => {
-    const has = formSlotList.some(i => key.includes(i))
-    if (has) {
-      formSlots[key] = slots[key]
-    } else {
-      otherSlots[key] = slots[key]
-    }
-  })
-  return { formSlots, otherSlots }
-})
-
-const searchSlots = computed(() => (props.searchSlot ? group.value.formSlots : {}))
-const tableSlots = computed(() => (props.searchSlot ? group.value.otherSlots : slots))
-
-const computedDefaultPageInfo = computed(() => props.defaultPageInfo)
-const computedDefaultPageSizeList = computed(() => props.defaultPageSizeList)
-const { tableData, pageInfo, total, loadingStatus } = useTable(computedDefaultPageInfo)
-const plusSearchInstance = ref<PlusSearchInstance | null>(null)
-const plusTableInstance = ref<PlusTableInstance | null>(null)
-const values = ref<FieldValues>({ ...(props.search as Partial<PlusSearchProps>)?.defaultValues })
-
-/** 渲染包裹层 */
-const renderWrapper = () => {
-  if (props.isCard) {
-    return {
-      search: h(ElCard, { ...props.searchCardProps, class: 'plus-page__search' }),
-      table: h(ElCard, { ...props.tableCardProps, class: 'plus-page__table' })
-    }
-  }
-  // 当isCard为false时添加class
-  return {
-    search: h('div', { class: 'plus-page__search' }),
-    table: h('div', { class: 'plus-page__table' })
-  }
-}
-
-const getList = async () => {
-  if (!props.request) return
-  try {
-    loadingStatus.value = true
-    const payload: RecordType = {
-      ...values.value,
-      // eslint-disabled no-useless-spread
-      ...{
-        [props.pageInfoMap?.page || 'page']: pageInfo.value.page,
-        [props.pageInfoMap?.pageSize || 'pageSize']: pageInfo.value.pageSize
-      },
-      ...props.params
-    }
-    const { data, total: dataTotal } = await props.request(payload)
-    const list = (props.postData && props.postData(data)) || data
-    tableData.value = list || []
-    total.value = dataTotal || list.length
-    emit('requestComplete', tableData.value)
-  } catch (error: unknown) {
-    emit('requestError', error)
-  }
-  loadingStatus.value = false
-}
-
-if (props.immediate) {
-  getList()
-}
-
-const handlePaginationChange = (_pageInfo: PageInfo): void => {
-  pageInfo.value = _pageInfo
-  getList()
-  emit('paginationChange', _pageInfo)
-}
-
-const handleSearch = (val: FieldValues) => {
-  const data = (props.beforeSearchSubmit && props.beforeSearchSubmit(val)) || val
-  values.value = data
-  pageInfo.value.page = 1
-  getList()
-  emit('search', values.value)
-}
-
-const handleReset = (val: FieldValues) => {
-  values.value = { ...val }
-  pageInfo.value.page = 1
-  getList()
-  emit('reset', values.value)
-}
-
-const handleRefresh = () => {
-  getList()
-}
-
-/**
- * 设置搜索的值
- * @version v0.1.17
- */
-const setSearchFieldsValue = (val: RecordType) => {
-  if (isPlainObject(val)) {
-    Object.keys(val).forEach(key => {
-      Reflect.set(values.value, key, val[key])
-    })
-  }
-}
-
-/**
- * 获取搜索的值
- * @version v0.1.17
- */
-const getSearchFieldsValue = (key?: keyof any) => {
-  if (key !== undefined && key !== null) {
-    return Reflect.get(values.value, key)
-  } else {
-    return { ...values.value }
-  }
-}
-/**
- * 清空搜索的值
- * @version v0.1.17
- */
-const clearSearchFieldsValue = () => {
-  values.value = {}
-}
-
-/**
- * @version 0.1.23
- */
-const setTableData = (data?: RecordType[], _total?: number) => {
-  tableData.value = data || []
-  total.value = _total || data?.length || 0
-}
-
-defineExpose({
-  plusSearchInstance,
-  plusTableInstance,
-  getList,
-  handleReset,
-  /**
-   * TODO: 将会在v0.2.0中移除
-   */
-  handleRest: handleReset,
-  setSearchFieldsValue,
-  getSearchFieldsValue,
-  clearSearchFieldsValue,
-  /**
-   * @version 0.1.23
-   */
-  setTableData
-})
-</script>

package/packages/components/page/style/css.ts

@@ -1,6 +0,0 @@
-import '@external/card/style/css'
-
-import '@wlydfe/pro-ui-components/search/style/css'
-import '@wlydfe/pro-ui-components/table/style/css'
-
-import '@wlydfe/pro-ui-theme-chalk/plus-page.css'

package/packages/components/page/style/index.ts

@@ -1,6 +0,0 @@
-import '@external/card/style/index'
-
-import '@wlydfe/pro-ui-components/search/style/index'
-import '@wlydfe/pro-ui-components/table/style/index'
-
-import '@wlydfe/pro-ui-theme-chalk/src/page.scss'

package/packages/components/pagination/__tests__/pagination.test.tsx

@@ -1,76 +0,0 @@
-import { nextTick, ref } from 'vue'
-import { mount } from '@vue/test-utils'
-import ElementPlus from 'element-plus'
-import { describe, expect, test } from 'vitest'
-import Pagination from '../src/index.vue'
-
-describe('pagination/index.vue', () => {
-  test('render test', async () => {
-    const pageInfo = ref()
-    const wrapper = mount(() => <Pagination total={100} modelValue={pageInfo.value}></Pagination>, {
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.el-pagination').text()).includes('Total')
-  })
-
-  test('props test', async () => {
-    const total = 100
-    const pageInfo = ref()
-    const wrapper = mount(
-      () => <Pagination total={total} modelValue={pageInfo.value}></Pagination>,
-      {
-        global: {
-          plugins: [ElementPlus]
-        }
-      }
-    )
-    await nextTick()
-    expect(wrapper.find('.el-pagination__total').text()).includes(total)
-  })
-
-  test('slots test', async () => {
-    const total = 100
-    const pageInfo = ref()
-    const wrapper = mount(
-      () => (
-        <Pagination
-          total={total}
-          modelValue={pageInfo.value}
-          v-slots={{
-            'pagination-left': () => 'pagination-left'
-          }}
-        ></Pagination>
-      ),
-      {
-        global: {
-          plugins: [ElementPlus]
-        }
-      }
-    )
-    await nextTick()
-    expect(wrapper.find('.plus-pagination').text()).includes('pagination-left')
-
-    const wrapper1 = mount(
-      () => (
-        <Pagination
-          total={total}
-          align="left"
-          modelValue={pageInfo.value}
-          v-slots={{
-            'pagination-right': () => 'pagination-right'
-          }}
-        ></Pagination>
-      ),
-      {
-        global: {
-          plugins: [ElementPlus]
-        }
-      }
-    )
-    await nextTick()
-    expect(wrapper1.find('.plus-pagination').text()).includes('pagination-right')
-  })
-})

package/packages/components/pagination/index.ts

@@ -1,6 +0,0 @@
-import Pagination from './src/index.vue'
-
-export type PlusPaginationInstance = InstanceType<typeof Pagination>
-export * from './src/type'
-
-export const PlusPagination = Pagination

package/packages/components/pagination/src/index.vue

@@ -1,67 +0,0 @@
-<template>
-  <div class="plus-pagination">
-    <slot v-if="align === 'right'" name="pagination-left">
-      <span />
-    </slot>
-
-    <el-pagination
-      layout="total, sizes, prev, pager, next, jumper"
-      :background="false"
-      :current-page="pageInfo.page"
-      :page-size="pageInfo.pageSize"
-      :total="total"
-      :page-sizes="pageSizeList"
-      v-bind="$attrs"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-    <slot v-if="align === 'left'" name="pagination-right"> <span /></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watchEffect } from 'vue'
-import { DefaultPageSizeList, DefaultPageInfo } from '@wlydfe/pro-ui-constants'
-import { ElPagination } from 'element-plus'
-import type { PageInfo } from '@wlydfe/pro-ui-types'
-import type { PlusPaginationSelfProps, PlusPaginationEmits } from './type'
-
-defineOptions({
-  name: 'PlusPagination'
-})
-
-const props = withDefaults(defineProps<PlusPaginationSelfProps>(), {
-  total: 0,
-  pageSizeList: () => [...DefaultPageSizeList],
-  modelValue: () => ({ ...DefaultPageInfo }),
-  align: 'right'
-})
-const emit = defineEmits<PlusPaginationEmits>()
-
-const pageInfo = ref<PageInfo>({ ...DefaultPageInfo })
-
-watchEffect(() => {
-  pageInfo.value = { ...props.modelValue }
-})
-
-const handleEmit = () => {
-  emit('update:modelValue', pageInfo.value)
-  emit('change', pageInfo.value)
-}
-
-// 改变翻页组件中每页数据总数
-const handleSizeChange = (pageSize: number) => {
-  pageInfo.value.pageSize = pageSize
-  // 改变翻页数目，必须将页面=1
-  pageInfo.value.page = 1
-  handleEmit()
-  emit('size-change', pageSize)
-}
-
-// 跳到当前是第几页
-const handleCurrentChange = (page: number) => {
-  pageInfo.value.page = page
-  handleEmit()
-  emit('current-change', page)
-}
-</script>

package/packages/components/pagination/src/type.ts

@@ -1,20 +0,0 @@
-import type { PaginationProps } from 'element-plus'
-import type { PageInfo, RecordType, Mutable } from '@wlydfe/pro-ui-types'
-
-export interface PlusPaginationSelfProps {
-  modelValue?: PageInfo
-  total?: number
-  pageSizeList?: number[]
-  align?: 'left' | 'right'
-}
-
-export type PlusPaginationProps = PlusPaginationSelfProps &
-  Partial<Mutable<PaginationProps>> &
-  RecordType
-
-export interface PlusPaginationEmits {
-  (e: 'update:modelValue', pageInfo: PageInfo): void
-  (e: 'change', pageInfo: PageInfo): void
-  (e: 'size-change', value: number): void
-  (e: 'current-change', value: number): void
-}

package/packages/components/pagination/style/css.ts

@@ -1,3 +0,0 @@
-import '@external/pagination/style/css'
-
-import '@wlydfe/pro-ui-theme-chalk/plus-pagination.css'

package/packages/components/pagination/style/index.ts

@@ -1,3 +0,0 @@
-import '@external/pagination/style/index'
-
-import '@wlydfe/pro-ui-theme-chalk/src/pagination.scss'

package/packages/components/popover/__tests__/popover.test.tsx

@@ -1,24 +0,0 @@
-import { nextTick } from 'vue'
-import { mount } from '@vue/test-utils'
-import ElementPlus, { ElButton } from 'element-plus'
-import { describe, expect, test } from 'vitest'
-import Popover from '../src/index.vue'
-
-describe('popover/index.vue', () => {
-  test('render test', async () => {
-    const content = '点击'
-    const slots = {
-      reference() {
-        return <ElButton> {content}</ElButton>
-      }
-    }
-
-    const wrapper = mount(() => <Popover v-slots={slots}></Popover>, {
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.el-button').text()).includes(content)
-  })
-})

package/packages/components/popover/index.ts

@@ -1,5 +0,0 @@
-import Popover from './src/index.vue'
-
-export type { PlusPopoverProps } from './src/index.vue'
-
-export const PlusPopover = Popover

package/packages/components/popover/src/index.vue

@@ -1,80 +0,0 @@
-<template>
-  <el-popover v-model:visible="subVisible" v-bind="$attrs">
-    <slot />
-
-    <div v-if="hasShowBottomButton" style="padding-top: 12px">
-      <el-button size="small" plain @click="handleCancelPopover">
-        {{ cancelText || t('plus.popover.cancelText') }}
-      </el-button>
-
-      <el-button
-        size="small"
-        type="primary"
-        :loading="confirmLoading"
-        @click="handleConfirmPopover"
-      >
-        {{ confirmText || t('plus.popover.confirmText') }}
-      </el-button>
-    </div>
-
-    <template #reference>
-      <span>
-        <slot name="reference" />
-      </span>
-    </template>
-  </el-popover>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { useLocale } from '@wlydfe/pro-ui-hooks'
-import { ElPopover, ElButton } from 'element-plus'
-
-export interface PlusPopoverProps {
-  hasShowBottomButton?: boolean
-  confirmLoading?: boolean
-  cancelText?: string
-  confirmText?: string
-}
-export interface PlusPopoverEmits {
-  (e: 'cancel'): void
-  (e: 'confirm'): void
-}
-
-defineOptions({
-  name: 'PlusPopover'
-})
-
-const props = withDefaults(defineProps<PlusPopoverProps>(), {
-  // 是否显示底部按钮
-  hasShowBottomButton: false,
-  confirmLoading: false,
-  cancelText: '',
-  confirmText: '',
-  visible: false
-})
-const emit = defineEmits<PlusPopoverEmits>()
-
-const subVisible = ref(false)
-const { t } = useLocale()
-
-watch(
-  () => props.visible,
-  val => {
-    subVisible.value = val
-  },
-  {
-    immediate: true
-  }
-)
-
-const handleCancelPopover = (): void => {
-  subVisible.value = false
-  emit('cancel')
-}
-
-const handleConfirmPopover = (): void => {
-  subVisible.value = false
-  emit('confirm')
-}
-</script>

package/packages/components/popover/style/css.ts

@@ -1,4 +0,0 @@
-import '@external/popover/style/css'
-import '@external/button/style/css'
-
-import '@wlydfe/pro-ui-theme-chalk/plus-popover.css'