@wlydfe/pro-ui 0.2.20 → 0.2.21

package/packages/components/date-picker/src/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <div
+    v-click-outside="onClickOutside"
+    class="plus-date-picker"
+    :class="{
+      'is-focus': isFocus,
+      'is-disabled': formDisabled
+    }"
+  >
+    <el-date-picker
+      ref="startPickerInstance"
+      v-model="state.start"
+      :type="type"
+      :value-format="valueFormat"
+      :placeholder="t('plus.datepicker.startPlaceholder')"
+      :disabled-date="subStartDisabledDate"
+      class="plus-date-picker__start"
+      clearable
+      :disabled="formDisabled"
+      v-bind="computedStartProps"
+      @change="handleChange"
+      @focus="handleFocus"
+    />
+    <span class="plus-date-picker__middle"> {{ rangeSeparator }} </span>
+    <el-date-picker
+      ref="endPickerInstance"
+      v-model="state.end"
+      :value-format="valueFormat"
+      :type="type"
+      :placeholder="t('plus.datepicker.endPlaceholder')"
+      :disabled-date="subEndDisabledDate"
+      class="plus-date-picker__end"
+      clearable
+      :disabled="formDisabled"
+      v-bind="computedEndProps"
+      @change="handleChange"
+      @focus="handleFocus"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, ref, useAttrs, computed } from 'vue'
+import type { DatePickerProps } from 'element-plus'
+import { ElDatePicker, ClickOutside as vClickOutside, useFormDisabled } from 'element-plus'
+import { isFunction } from '@wlydfe/pro-ui-components/utils'
+import { useLocale } from '@wlydfe/pro-ui-hooks'
+
+export interface PlusDatePickerProps {
+  modelValue?: string[]
+  rangeSeparator?: string
+  valueFormat?: string
+  type?: 'year' | 'month' | 'date' | 'dates' | 'datetime' | 'week'
+  startProps?: Partial<DatePickerProps>
+  endProps?: Partial<DatePickerProps>
+  /**
+   * @version 0.1.14
+   */
+  disabled?: boolean
+  startDisabledDate?: (startTime: Date, endValue: string) => boolean
+  endDisabledDate?: (endTime: Date, startValue: string) => boolean
+}
+export interface PlusRadioEmits {
+  (e: 'change', value: string[]): void
+  (e: 'focus', event: FocusEvent): void
+  (e: 'update:modelValue', value: string[]): void
+}
+export interface DatePickerState {
+  start: string
+  end: string
+}
+
+defineOptions({
+  name: 'PlusDatePicker'
+})
+
+const props = withDefaults(defineProps<PlusDatePickerProps>(), {
+  modelValue: () => [],
+  rangeSeparator: '/',
+  type: 'datetime',
+  valueFormat: 'YYYY-MM-DD HH:mm:ss',
+  startProps: () => ({}),
+  endProps: () => ({}),
+  disabled: false,
+  startDisabledDate: (startTime, endValue) => {
+    if (!endValue) return false
+    return startTime.getTime() > new Date(endValue).getTime()
+  },
+  endDisabledDate: (endTime, startValue) => {
+    if (!startValue) return false
+    return endTime.getTime() < new Date(startValue).getTime()
+  }
+})
+const emit = defineEmits<PlusRadioEmits>()
+
+const { t } = useLocale()
+const attrs = useAttrs()
+const computedStartProps = computed(() => ({ ...attrs, ...props.startProps }))
+const computedEndProps = computed(() => ({ ...attrs, ...props.endProps }))
+const startPickerInstance = ref<InstanceType<typeof ElDatePicker> | null>()
+const endPickerInstance = ref<InstanceType<typeof ElDatePicker> | null>()
+const state: DatePickerState = reactive({
+  start: '',
+  end: ''
+})
+const formDisabled = useFormDisabled()
+const isFocus = ref(false)
+
+const handleFocus = (event: FocusEvent) => {
+  isFocus.value = true
+  emit('focus', event)
+}
+const onClickOutside = () => {
+  isFocus.value = false
+}
+
+const subStartDisabledDate = (time: Date) => {
+  if (props.startDisabledDate && isFunction(props.startDisabledDate)) {
+    return props.startDisabledDate(time, state.end)
+  }
+  return false
+}
+
+const subEndDisabledDate = (time: Date) => {
+  if (props.endDisabledDate && isFunction(props.endDisabledDate)) {
+    return props.endDisabledDate(time, state.start)
+  }
+  return false
+}
+
+watch(
+  () => props.modelValue,
+  val => {
+    const [start, end] = val
+    state.start = start
+    state.end = end
+  },
+  {
+    immediate: true
+  }
+)
+
+const handleChange = () => {
+  const res = [state.start, state.end]
+  emit('update:modelValue', res)
+  emit('change', res)
+}
+
+defineExpose({
+  startPickerInstance,
+  endPickerInstance
+})
+</script>

package/packages/components/date-picker/style/css.ts

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

package/packages/components/date-picker/style/index.ts

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

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

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

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