@wlydfe/pro-ui 0.2.20 → 0.2.21

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

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

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

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

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

@@ -0,0 +1,117 @@
+import { nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import ElementPlus from 'element-plus'
+import { describe, expect, test } from 'vitest'
+import Dialog from '../src/index.vue'
+
+describe('dialog/index.vue', () => {
+  test('render test', async () => {
+    const content = 'content'
+    const wrapper = mount(
+      () => (
+        <Dialog modelValue={true} append-to-body={false}>
+          {content}
+        </Dialog>
+      ),
+      {
+        global: {
+          plugins: [ElementPlus]
+        }
+      }
+    )
+    await nextTick()
+    expect(wrapper.find('.el-dialog__body').text()).includes(content)
+  })
+
+  test('props test', async () => {
+    const wrapper = mount(
+      () => <Dialog modelValue={true} append-to-body={false} hasFooter={false}></Dialog>,
+      {
+        global: {
+          plugins: [ElementPlus]
+        }
+      }
+    )
+
+    const confirmText = 'confirmText'
+    const cancelText = 'cancelText'
+    const title = 'title'
+    const top = '10px'
+    const width = '100px'
+    const wrapper1 = mount(
+      () => (
+        <Dialog
+          modelValue={true}
+          append-to-body={false}
+          confirmText={confirmText}
+          cancelText={cancelText}
+          title={title}
+          top={top}
+          width={width}
+        ></Dialog>
+      ),
+      {
+        global: {
+          plugins: [ElementPlus]
+        }
+      }
+    )
+    await nextTick()
+    expect(wrapper.find('.plus-dialog-footer').exists()).toBe(false)
+
+    expect(wrapper1.find('.plus-dialog-footer .el-button').text()).includes(cancelText)
+    expect(wrapper1.find('.plus-dialog-footer .el-button--primary').text()).includes(confirmText)
+    expect(wrapper1.find('.el-dialog__title').text()).includes(title)
+    expect(wrapper1.find('.plus-dialog').attributes('style')).includes(top)
+    expect(wrapper1.find('.plus-dialog').attributes('style')).includes(width)
+  })
+
+  test('emitted test', async () => {
+    const visible = ref(true)
+    const onConfirm = () => {
+      visible.value = false
+    }
+    const wrapper = mount(
+      () => <Dialog modelValue={visible.value} append-to-body={false}></Dialog>,
+      {
+        global: {
+          plugins: [ElementPlus]
+        },
+        props: {
+          onConfirm
+        }
+      }
+    )
+    expect(wrapper.emitted().confirm).toEqual(undefined)
+    expect(wrapper.emitted().cancel).toEqual(undefined)
+  })
+
+  test('slots test', async () => {
+    const content = 'content'
+    const header = 'header'
+    const footer = 'footer'
+    const wrapper = mount(
+      () => (
+        <Dialog
+          modelValue={true}
+          append-to-body={false}
+          v-slots={{
+            header: () => header,
+            footer: () => footer
+          }}
+        >
+          {content}
+        </Dialog>
+      ),
+      {
+        global: {
+          plugins: [ElementPlus]
+        }
+      }
+    )
+    await nextTick()
+    expect(wrapper.find('.el-dialog__header').text()).includes(header)
+    expect(wrapper.find('.plus-dialog-body').text()).includes(content)
+    expect(wrapper.find('.el-dialog__footer').text()).includes(footer)
+  })
+})

package/packages/components/dialog/index.ts

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

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

@@ -0,0 +1,83 @@
+<template>
+  <el-dialog
+    v-model="subVisible"
+    :top="top"
+    :width="width"
+    :title="title || t('plus.dialog.title')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :append-to-body="false"
+    :before-close="handleCancel"
+    class="plus-dialog"
+    v-bind="$attrs"
+  >
+    <template v-if="$slots.header" #header>
+      <slot name="header" />
+    </template>
+
+    <div class="plus-dialog-body">
+      <slot />
+    </div>
+
+    <template v-if="hasFooter" #footer>
+      <div class="plus-dialog-footer" :style="style">
+        <slot name="footer">
+          <el-button @click="handleCancel">
+            {{ cancelText || t('plus.dialog.cancelText') }}
+          </el-button>
+          <el-button type="primary" :loading="confirmLoading" @click="handleConfirm">
+            {{ confirmText || t('plus.dialog.confirmText') }}
+          </el-button>
+        </slot>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect, computed } from 'vue'
+import { ElDialog, ElButton } from 'element-plus'
+import { useLocale } from '@wlydfe/pro-ui-hooks'
+import type { PlusDialogSelfProps as PlusDialogProps, PlusDialogEmits } from './type'
+
+defineOptions({
+  name: 'PlusDialog',
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<PlusDialogProps>(), {
+  modelValue: false,
+  confirmText: '',
+  confirmLoading: false,
+  cancelText: '',
+  hasFooter: true,
+  title: '',
+  top: '15vh',
+  width: '460px',
+  footerAlign: 'right'
+})
+const emit = defineEmits<PlusDialogEmits>()
+const style = computed(() => ({
+  justifyContent:
+    props.footerAlign === 'left'
+      ? 'flex-start'
+      : props.footerAlign === 'center'
+      ? 'center'
+      : 'flex-end'
+}))
+const subVisible = ref(false)
+const { t } = useLocale()
+
+watchEffect(() => {
+  subVisible.value = props.modelValue
+})
+
+const handleConfirm = (): void => {
+  emit('confirm')
+}
+
+const handleCancel = (): void => {
+  emit('update:modelValue', false)
+  emit('cancel')
+}
+</script>

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

@@ -0,0 +1,22 @@
+import type { DialogProps } from 'element-plus'
+import type { RecordType, Mutable } from '@wlydfe/pro-ui-types'
+
+export interface PlusDialogSelfProps {
+  modelValue?: boolean
+  confirmText?: string
+  cancelText?: string
+  confirmLoading?: boolean
+  hasFooter?: boolean
+  footerAlign?: 'left' | 'right' | 'center'
+  top?: string
+  width?: string | number
+  title?: string
+}
+
+export type PlusDialogProps = PlusDialogSelfProps & Partial<Mutable<DialogProps>> & RecordType
+
+export interface PlusDialogEmits {
+  (e: 'update:modelValue', visible: boolean): void
+  (e: 'cancel'): void
+  (e: 'confirm'): void
+}

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

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

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

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