@wlydfe/pro-ui 0.2.21 → 0.2.23

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

@@ -1,339 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { nextTick, ref } from 'vue'
-import { mount } from '@vue/test-utils'
-import ElementPlus from 'element-plus'
-import type { PlusColumn } from '@wlydfe/pro-ui-types'
-import Descriptions from '../src/index.vue'
-
-const TestServe = {
-  getList: async () => {
-    const index = Math.random() * 10
-    const data = {
-      index,
-      id: index,
-      title: '序号' + (index + 1),
-      name: 'name'.repeat(10),
-      status: '1',
-      tag: index === 1 ? 'success' : 'danger',
-      progress: 30,
-      rate: index > 3 ? 2 : 3.5,
-      switch: index > 3 ? true : false,
-      indexColStyle:
-        index < 3
-          ? {
-              backgroundColor: '#314659'
-            }
-          : {
-              backgroundColor: '#979797'
-            },
-      time: new Date(),
-      code: `
-  const getData = async params => {
-    const data = await getData(params)
-    return { list: data.data, ...data }
-  }`
-    }
-    return {
-      data
-    }
-  }
-}
-
-describe('descriptions/index.vue', () => {
-  test('render test', async () => {
-    const columns: PlusColumn[] = [
-      {
-        label: '名称',
-        width: 120,
-        prop: 'name',
-        valueType: 'copy'
-      },
-      {
-        label: '状态',
-        width: 120,
-        prop: 'status',
-        valueType: 'select',
-        options: [
-          {
-            label: '未解决',
-            value: '0',
-            color: 'red'
-          },
-          {
-            label: '已解决',
-            value: '1',
-            color: 'blue'
-          },
-          {
-            label: '解决中',
-            value: '2',
-            color: 'yellow'
-          },
-          {
-            label: '失败',
-            value: '3',
-            color: 'red'
-          }
-        ]
-      },
-      {
-        label: '标签',
-        width: 120,
-        prop: 'tag',
-        valueType: 'tag'
-      },
-      {
-        label: '执行进度',
-        width: 200,
-        prop: 'progress',
-        valueType: 'progress'
-      },
-      {
-        label: '代码块',
-        width: 250,
-        prop: 'code',
-        valueType: 'code'
-      },
-      {
-        label: '评分',
-        width: 200,
-        prop: 'rate',
-        valueType: 'rate'
-      },
-      {
-        label: '开关',
-        width: 100,
-        prop: 'switch',
-        valueType: 'switch',
-        editable: true
-      },
-      {
-        label: '时间',
-        width: 190,
-        prop: 'time',
-        valueType: 'date-picker'
-      }
-    ]
-    const labels = columns.map(item => item.label)
-
-    const descriptionsData = ref<any>({})
-    const wrapper = mount(() => <Descriptions columns={columns} data={descriptionsData.value} />, {
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-
-    const getList = async () => {
-      try {
-        const { data } = await TestServe.getList()
-        descriptionsData.value = data || {}
-      } catch (error) {}
-    }
-    await getList()
-    await nextTick()
-    expect(wrapper.find('.plus-description').exists()).toBe(true)
-    expect(wrapper.find('.plus-description__name').exists()).toBe(true)
-    expect(wrapper.find('.plus-description__label').exists()).toBe(true)
-    expect(wrapper.find('.plus-description__label').text()).toContain(labels[0])
-    expect(wrapper.find('.plus-description__name').text()).toContain('name'.repeat(10))
-    expect(wrapper.find('.el-tag').exists()).toBe(true)
-    expect(wrapper.find('.el-progress').exists()).toBe(true)
-    expect(wrapper.find('.plus-display-item__pre').exists()).toBe(true)
-
-    setTimeout(() => {
-      expect(wrapper.find('.el-switch').exists()).toBe(true)
-    })
-  })
-
-  test('props test', async () => {
-    const title = 'title'
-    const wrapper = mount(() => <Descriptions title={title} data={{}} />, {
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.el-descriptions__title').text()).toContain(title)
-  })
-
-  test('slots test', async () => {
-    const columns: PlusColumn[] = [
-      {
-        label: '名称',
-        width: 120,
-        prop: 'name'
-      },
-      {
-        label: '状态',
-        width: 120,
-        prop: 'status',
-        valueType: 'select',
-        options: [
-          {
-            label: '未解决',
-            value: '0',
-            color: 'red'
-          },
-          {
-            label: '已解决',
-            value: '1',
-            color: 'blue'
-          },
-          {
-            label: '解决中',
-            value: '2',
-            color: 'yellow'
-          },
-          {
-            label: '失败',
-            value: '3',
-            color: 'red'
-          }
-        ]
-      }
-    ]
-    const title = 'title'
-    const data = {
-      index: 0,
-      status: '1',
-      name: '小明'
-    }
-    const slot = {
-      ['plus-desc-name']: ({ value }: { value: string }) => '自定义' + value,
-      ['plus-desc-label-name']: ({ label }: { label: string }) => '自定义label' + label,
-      ['plus-desc-status']: ({ value }: { value: string }) => '自定义' + value,
-      ['plus-desc-label-status']: ({ label }: { label: string }) => '自定义label' + label
-    }
-    const wrapper = mount(
-      () => <Descriptions title={title} columns={columns} data={data} v-slots={slot} />,
-      {
-        global: {
-          plugins: [ElementPlus]
-        }
-      }
-    )
-    await nextTick()
-    expect(wrapper.find('.plus-description').text()).toContain('自定义小明')
-    expect(wrapper.find('.plus-description').text()).toContain('自定义label名称')
-    expect(wrapper.find('.plus-description').text()).toContain('自定义1')
-    expect(wrapper.find('.plus-description').text()).toContain('自定义label状态')
-  })
-
-  test('descriptions form and instance test', async () => {
-    const columns: PlusColumn[] = [
-      {
-        label: '名称',
-        width: 120,
-        prop: 'name',
-        valueType: 'copy'
-      },
-      {
-        label: '标签',
-        width: 120,
-        prop: 'tag',
-        valueType: 'tag'
-      },
-      {
-        label: '状态',
-        width: 120,
-        prop: 'status',
-        valueType: 'select',
-        options: [
-          {
-            label: '未解决',
-            value: '0',
-            color: 'red'
-          },
-          {
-            label: '已解决',
-            value: '1',
-            color: 'blue'
-          },
-          {
-            label: '解决中',
-            value: '2',
-            color: 'yellow'
-          },
-          {
-            label: '失败',
-            value: '3',
-            color: 'red'
-          }
-        ]
-      },
-      {
-        label: '执行进度',
-        width: 200,
-        prop: 'progress',
-        valueType: 'progress'
-      },
-      {
-        label: '代码块',
-        width: 250,
-        prop: 'code',
-        valueType: 'code'
-      },
-      {
-        label: '评分',
-        width: 200,
-        prop: 'rate',
-        valueType: 'rate'
-      },
-      {
-        label: '开关',
-        width: 100,
-        prop: 'switch',
-        valueType: 'switch'
-      },
-      {
-        label: '时间',
-        width: 190,
-        prop: 'time',
-        valueType: 'date-picker'
-      }
-    ]
-
-    const data = {
-      title: '序号',
-      name: '',
-      status: '1',
-      tag: '',
-      progress: 30,
-      rate: 3,
-      switch: false,
-      time: new Date(),
-      code: `
-    const getData = async params => {
-      const data = await getData(params)
-      return { list: data.data, ...data }
-    }`
-    }
-
-    const wrapper = mount(Descriptions, {
-      props: {
-        columns: columns,
-        editable: true,
-        data: data
-      },
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-
-    // form dom
-    setTimeout(() => {
-      expect(wrapper.find('.plus-description .plus-form').exists()).toBe(true)
-      expect(wrapper.find('.plus-description .plus-form .el-input__inner').exists()).toBe(true)
-      expect(wrapper.find('.plus-description .plus-form .el-select__input').exists()).toBe(true)
-      expect(wrapper.find('.plus-description .plus-form .el-switch').exists()).toBe(true)
-      expect(wrapper.find('.plus-description .plus-form .el-rate').exists()).toBe(true)
-      expect(wrapper.find('.plus-description .plus-form .el-date-editor').exists()).toBe(true)
-    })
-
-    // instance
-    expect(wrapper.vm).toHaveProperty('formRefs')
-    expect(wrapper.vm).toHaveProperty('validate')
-    expect(wrapper.vm).toHaveProperty('clearValidate')
-  })
-})

package/packages/components/descriptions/index.ts

@@ -1,6 +0,0 @@
-import Descriptions from './src/index.vue'
-
-export type PlusDescriptionsInstance = InstanceType<typeof Descriptions>
-export type { PlusDescriptionsProps } from './src/index.vue'
-
-export const PlusDescriptions = Descriptions

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

@@ -1,262 +0,0 @@
-<template>
-  <el-descriptions
-    :title="title"
-    :column="column"
-    class="plus-description"
-    :class="{ 'no-border': !border }"
-    :border="elBorder"
-    v-bind="$attrs"
-  >
-    <slot>
-      <template v-for="(item, index) in subColumns" :key="item.prop">
-        <el-descriptions-item
-          :label="getLabel(item.label)"
-          :class-name="
-            (item.descriptionsItemProps?.className || '') +
-            ' plus-description__name  plus-description__content'
-          "
-          :label-class-name="
-            (item.descriptionsItemProps?.labelClassName || '') +
-            ' plus-description__label' +
-            (getIsRequired(item, index) ? ' is-required' : '')
-          "
-          v-bind="item.descriptionsItemProps || descriptionsItemProps"
-        >
-          <template #label>
-            <component
-              :is="item.renderDescriptionsLabel"
-              v-if="item.renderDescriptionsLabel && isFunction(item.renderDescriptionsLabel)"
-              :label="getLabel(item.label)"
-              :column="item"
-              :row="data"
-            />
-
-            <!-- plus-desc-label-* -->
-            <template v-else-if="$slots[getDescLabelSlotName(item.prop)]">
-              <slot
-                :name="getDescLabelSlotName(item.prop)"
-                :column="item"
-                :row="data"
-                :label="getLabel(item.label)"
-              />
-            </template>
-
-            <!-- normal -->
-            <template v-else>{{ getLabel(item.label) }}</template>
-          </template>
-
-          <!-- 第一优先级表单 -->
-          <template v-if="editable">
-            <PlusDisplayItem
-              ref="plusDisplayItemInstance"
-              :column="item"
-              :row="data"
-              editable
-              :form-props="formProps"
-              @change="data => handleChange(data, index, item)"
-            />
-          </template>
-
-          <!-- renderDescriptionsItem -->
-          <component
-            :is="item.renderDescriptionsItem"
-            v-else-if="item.renderDescriptionsItem && isFunction(item.renderDescriptionsItem)"
-            :value="getDisplayValue(item.prop)"
-            :column="item"
-            :row="data"
-          />
-
-          <!-- plus-desc-* -->
-          <template v-else-if="$slots[getDescSlotName(item.prop)]">
-            <slot
-              :name="getDescSlotName(item.prop)"
-              :column="item"
-              :row="data"
-              :value="getDisplayValue(item.prop)"
-            />
-          </template>
-
-          <!-- normal -->
-          <template v-else>
-            <PlusDisplayItem :column="item" :row="data" />
-          </template>
-        </el-descriptions-item>
-      </template>
-    </slot>
-
-    <template #title>
-      <slot name="title" />
-    </template>
-
-    <template #extra>
-      <slot name="extra" />
-    </template>
-  </el-descriptions>
-</template>
-
-<script lang="ts" setup>
-import type { ExtractPropTypes } from 'vue'
-import { computed, unref, ref, shallowRef, watch } from 'vue'
-import type { descriptionProps } from 'element-plus'
-import { ElDescriptions, ElDescriptionsItem } from 'element-plus'
-import type { PlusColumn, RecordType, Mutable, FieldValueType } from '@wlydfe/pro-ui-types'
-import type { TableFormRefRow } from '@wlydfe/pro-ui-components/table'
-import { PlusDisplayItem } from '@wlydfe/pro-ui-components/display-item'
-import {
-  isFunction,
-  getDescSlotName,
-  getDescLabelSlotName,
-  getValue,
-  getLabel
-} from '@wlydfe/pro-ui-components/utils'
-import type { PlusDisplayItemInstance } from '@wlydfe/pro-ui-components/display-item'
-import type { PlusFormProps } from '@wlydfe/pro-ui-components/form'
-
-export type DescriptionProps = Partial<Mutable<ExtractPropTypes<typeof descriptionProps>>>
-
-type FormChangeCallBackParams = {
-  column: PlusColumn
-  index: number
-  prop: string
-  row: RecordType
-  value: FieldValueType
-}
-export interface PlusDescriptionsProps {
-  data: RecordType
-  columns?: PlusColumn[]
-  column?: number
-  title?: string
-  border?: boolean
-  /**
-   * 是否整体可编辑
-   * @version 0.1.17
-   * @default false
-   */
-  editable?: boolean
-  /**
-   * PlusFormProps 优先级低于column.formProps
-   * @version 0.1.17
-   */
-  formProps?: PlusFormProps
-  /**
-   * el-descriptions-item 的props 优先级低于column.descriptionsItemProps
-   * @version 0.1.17
-   */
-  descriptionsItemProps?: RecordType
-}
-export interface PlusDescriptionsEmits {
-  (e: 'formChange', data: FormChangeCallBackParams): void
-}
-export interface PlusTableTableColumnStatus {
-  text: string
-  color: string
-}
-
-defineOptions({
-  name: 'PlusDescriptions'
-})
-
-const props = withDefaults(defineProps<PlusDescriptionsProps>(), {
-  data: () => ({}),
-  columns: () => [],
-  title: '',
-  column: 3,
-  border: true,
-  editable: false,
-  formProps: undefined,
-  descriptionsItemProps: undefined
-})
-
-const emit = defineEmits<PlusDescriptionsEmits>()
-
-const plusDisplayItemInstance = ref<PlusDisplayItemInstance[] | null>()
-
-const elBorder = computed(() => (props.editable ? true : props.border))
-
-/**
- * 表单的ref
- */
-const formRefs = shallowRef<TableFormRefRow[]>([])
-
-const subColumns = computed(() =>
-  props.columns.filter(item => unref(item.hideInDescriptions) !== true)
-)
-
-const getDisplayValue = (prop: string) => getValue(props.data, prop)
-
-/**
- *  设置表单ref
- */
-const setFormRef = () => {
-  if (!plusDisplayItemInstance.value?.length) return
-  const list =
-    plusDisplayItemInstance.value?.map(item => ({
-      ...item,
-      ...item?.getDisplayItemInstance()
-    })) || []
-
-  formRefs.value = list as unknown as TableFormRefRow[]
-}
-
-watch(
-  plusDisplayItemInstance,
-  () => {
-    setFormRef()
-  },
-  {
-    deep: true,
-    flush: 'post'
-  }
-)
-
-/**
- * 判断是否是required
- * @param item
- */
-const getIsRequired = (item: PlusColumn, index: number) => {
-  const itemFormProps = isFunction(item.formProps)
-    ? item.formProps(props.data[item.prop], { row: props.data, index })
-    : unref(item.formProps)
-  const rules = Reflect.get(itemFormProps?.rules || props.formProps?.rules || {}, item.prop) || {}
-  const isRequired = Object.values(rules).some(i => i.required)
-  return isRequired
-}
-
-/**
- * 表单发生变化
- * @param data
- * @param index
- * @param item
- */
-const handleChange = (
-  data: { value: any; prop: string; row: RecordType },
-  index: number,
-  item: PlusColumn
-) => {
-  const formChangeCallBackParams = { ...data, index, column: { ...item } }
-  console.log(formChangeCallBackParams, 'formChangeCallBackParams')
-  emit('formChange', formChangeCallBackParams)
-}
-
-const validate = async () => {
-  try {
-    await Promise.all(
-      formRefs.value?.map((item: TableFormRefRow) => item.formInstance.value?.validate())
-    )
-  } catch (errors: any) {
-    return Promise.reject(errors)
-  }
-}
-
-const clearValidate = () => {
-  formRefs.value?.forEach((item: TableFormRefRow) => {
-    item.formInstance.value?.clearValidate()
-  })
-}
-
-defineExpose({
-  formRefs,
-  validate,
-  clearValidate
-})
-</script>

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

@@ -1,5 +0,0 @@
-import '@external/descriptions/style/css'
-
-import '@wlydfe/pro-ui-components/display-item/style/css'
-
-import '@wlydfe/pro-ui-theme-chalk/plus-descriptions.css'

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

@@ -1,5 +0,0 @@
-import '@external/descriptions/style/index'
-
-import '@wlydfe/pro-ui-components/display-item/style/index'
-
-import '@wlydfe/pro-ui-theme-chalk/src/descriptions.scss'