@wlydfe/pro-ui 0.2.21 → 0.2.24

package/packages/components/check-card/src/index.vue

@@ -1,169 +0,0 @@
-<template>
-  <div
-    class="plus-check-card"
-    :class="[
-      getClass(),
-      state.checked ? 'plus-check-card--checked' : '',
-      disabled ? 'plus-check-card--disabled' : ''
-    ]"
-    @click="handleClick"
-  >
-    <div class="plus-check-card__avatar-wrapper">
-      <component
-        :is="avatar"
-        v-if="isFunction(avatar)"
-        :avatar="avatar"
-        :title="title"
-        :description="description"
-      />
-      <slot
-        v-else-if="$slots.avatar"
-        name="avatar"
-        :avatar="avatar"
-        :title="title"
-        :description="description"
-      />
-
-      <el-avatar v-else-if="isString(avatar)" :src="(avatar as string)" v-bind="avatarProps" />
-    </div>
-
-    <div class="plus-check-card__right-content">
-      <div v-if="title || $slots.title" class="plus-check-card__title">
-        <div class="plus-check-card__title-left">
-          <component
-            :is="title"
-            v-if="isFunction(title)"
-            :avatar="avatar"
-            :title="title"
-            :description="description"
-          />
-
-          <slot
-            v-else-if="$slots.title"
-            name="title"
-            :title="title"
-            :avatar="avatar"
-            :description="description"
-          />
-          <template v-else> {{ title }}</template>
-        </div>
-
-        <div class="plus-check-card__title-right" @click.stop="handelExtra">
-          <component
-            :is="extra"
-            v-if="isFunction(extra)"
-            :avatar="avatar"
-            :title="title"
-            :description="description"
-          />
-
-          <slot
-            v-else-if="$slots.extra"
-            name="extra"
-            :title="title"
-            :avatar="avatar"
-            :description="description"
-          />
-        </div>
-      </div>
-
-      <div v-if="description || $slots.description" class="plus-check-card__description">
-        <component
-          :is="description"
-          v-if="isFunction(description)"
-          :title="title"
-          :avatar="avatar"
-          :description="description"
-        />
-        <slot
-          v-else-if="$slots.description"
-          name="description"
-          :title="title"
-          :description="description"
-          :avatar="avatar"
-        />
-        <template v-else> {{ description }}</template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive, watchEffect } from 'vue'
-import type { ComponentSize } from 'element-plus'
-import { ElAvatar } from 'element-plus'
-import type { RecordType, RenderTypes } from '@wlydfe/pro-ui-types'
-import { isString, isFunction } from '@wlydfe/pro-ui-components/utils'
-
-export interface PlusCheckCardProps {
-  modelValue?: boolean
-  size?: ComponentSize
-  avatar?:
-    | string
-    | ((data: Pick<PlusCheckCardProps, 'avatar' | 'title' | 'description'>) => RenderTypes)
-  avatarProps?: RecordType
-  title?:
-    | string
-    | ((data: Pick<PlusCheckCardProps, 'avatar' | 'title' | 'description'>) => RenderTypes)
-  description?:
-    | string
-    | ((data: Pick<PlusCheckCardProps, 'avatar' | 'title' | 'description'>) => RenderTypes)
-  disabled?: boolean
-  extra?: (data: Pick<PlusCheckCardProps, 'avatar' | 'title' | 'description'>) => RenderTypes
-}
-export interface PlusCheckCardEmits {
-  (e: 'update:modelValue', checked: boolean): void
-  (e: 'change', checked: boolean): void
-  (e: 'extra'): void
-}
-export interface CheckCardState {
-  checked: boolean
-}
-
-const classDataEnum: Record<Exclude<ComponentSize, ''>, string> = {
-  large: 'plus-check-card--large',
-  default: 'plus-check-card--default',
-  small: 'plus-check-card--small'
-}
-
-defineOptions({
-  name: 'PlusCheckCard'
-})
-
-const props = withDefaults(defineProps<PlusCheckCardProps>(), {
-  modelValue: false,
-  size: 'default',
-  avatar: undefined,
-  avatarProps: () => ({}),
-  title: undefined,
-  description: undefined,
-  extra: undefined,
-  disabled: false
-})
-
-const emit = defineEmits<PlusCheckCardEmits>()
-
-const state: CheckCardState = reactive({
-  checked: false
-})
-
-watchEffect(() => {
-  state.checked = props.modelValue
-})
-
-const getClass = () => {
-  return props.size ? classDataEnum[props.size] : 'plus-check-card--default'
-}
-
-const handleClick = () => {
-  if (props.disabled) return
-  state.checked = !state.checked
-  emit('update:modelValue', state.checked)
-  emit('change', state.checked)
-}
-
-const handelExtra = () => {
-  if (props.disabled) return
-  emit('extra')
-}
-</script>

package/packages/components/check-card/style/css.ts

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

package/packages/components/check-card/style/index.ts

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

package/packages/components/check-card-group/__tests__/check-card-group.test.tsx

@@ -1,36 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
-import PlusCheckCardGroup from '../src/index.vue'
-
-describe('check-card-group/index.vue', () => {
-  test('render test', async () => {
-    const wrapper = mount(() => (
-      <PlusCheckCardGroup
-        options={[
-          {
-            title: 'title0',
-            description: 'description0',
-            value: '0',
-            avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-          },
-          {
-            title: 'title1',
-            description: 'description1',
-            value: '1',
-            avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
-          }
-        ]}
-      />
-    ))
-    await nextTick()
-    expect(wrapper.find('.plus-check-card-group').exists()).toBe(true)
-    expect(wrapper.find('.plus-check-card').exists()).toBe(true)
-    expect(wrapper.find('.plus-check-card__avatar-wrapper').exists()).toBe(true)
-    expect(wrapper.find('.el-avatar').exists()).toBe(true)
-    expect(wrapper.find('.plus-check-card__title').exists()).toBe(true)
-    expect(wrapper.find('.plus-check-card__title-left').exists()).toBe(true)
-    expect(wrapper.find('.plus-check-card__title-right').exists()).toBe(true)
-    expect(wrapper.find('.plus-check-card__description').exists()).toBe(true)
-  })
-})

package/packages/components/check-card-group/index.ts

@@ -1,5 +0,0 @@
-import CheckCardGroup from './src/index.vue'
-
-export type { PlusCheckCardGroupProps } from './src/index.vue'
-
-export const PlusCheckCardGroup = CheckCardGroup

package/packages/components/check-card-group/src/index.vue

@@ -1,125 +0,0 @@
-<template>
-  <div class="plus-check-card-group">
-    <PlusCheckCard
-      v-for="(item, index) in options"
-      :key="item.value || index"
-      :size="size"
-      :disabled="disabled"
-      v-bind="item"
-      :model-value="getChecked(item.value)"
-      @change="handleChange($event, item.value)"
-      @extra="handleExtra(item)"
-    >
-      <!--  插槽支持 统一插槽和个性化插槽 -->
-      <template v-if="$slots['avatar-' + item.value] || $slots.avatar" #avatar="data">
-        <slot v-if="$slots['avatar-' + item.value]" :name="'avatar-' + item.value" v-bind="data" />
-        <slot v-if="$slots.avatar" name="avatar" v-bind="data" />
-      </template>
-
-      <template v-if="$slots['title-' + item.value] || $slots.title" #title="data">
-        <slot v-if="$slots['title-' + item.value]" :name="'title-' + item.value" v-bind="data" />
-        <slot v-if="$slots.title" name="title" v-bind="data" />
-      </template>
-
-      <template
-        v-if="$slots['description-' + item.value] || $slots.description"
-        #description="data"
-      >
-        <slot
-          v-if="$slots['description-' + item.value]"
-          :name="'description-' + item.value"
-          v-bind="data"
-        />
-        <slot v-if="$slots.description" name="description" v-bind="data" />
-      </template>
-
-      <template v-if="$slots['extra-' + item.value] || $slots.extra" #extra="data">
-        <slot v-if="$slots['extra-' + item.value]" :name="'extra-' + item.value" v-bind="data" />
-        <slot v-if="$slots.extra" name="extra" v-bind="data" />
-      </template>
-    </PlusCheckCard>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive, watchEffect } from 'vue'
-import { PlusCheckCard } from '@wlydfe/pro-ui-components/check-card'
-import type { PlusCheckCardProps } from '@wlydfe/pro-ui-components/check-card'
-import type { ComponentSize } from 'element-plus'
-
-export type ArrayValueType = (string | number)[]
-export type SingleValueType = string | number
-export type ValueType = ArrayValueType | SingleValueType
-export interface PlusCheckCardGroupProps {
-  modelValue?: ValueType
-  options?: (PlusCheckCardProps & { value: string | number })[]
-  size?: ComponentSize
-  disabled?: boolean
-  multiple?: boolean
-}
-export interface PlusCheckCardGroupEmits {
-  (e: 'update:modelValue', checked: ValueType): void
-  (e: 'change', checked: ValueType): void
-  (e: 'extra', item: PlusCheckCardProps & { value: string | number }): void
-}
-export interface CheckCardState {
-  checkList: ArrayValueType
-  checked: SingleValueType
-}
-
-defineOptions({
-  name: 'PlusCheckCardGroup'
-})
-
-const props = withDefaults(defineProps<PlusCheckCardGroupProps>(), {
-  modelValue: () => [],
-  options: () => [],
-  size: undefined,
-  disabled: false,
-  multiple: false
-})
-
-const emit = defineEmits<PlusCheckCardGroupEmits>()
-
-const state: CheckCardState = reactive({
-  checkList: [],
-  checked: ''
-})
-
-watchEffect(() => {
-  if (props.multiple) {
-    state.checkList = props.modelValue as ArrayValueType
-  } else {
-    state.checked = props.modelValue as SingleValueType
-  }
-})
-
-const getChecked = (value: SingleValueType) => {
-  if (props.multiple) {
-    return state.checkList.includes(value)
-  } else {
-    return state.checked === value
-  }
-}
-
-const handleChange = (model: boolean, value: SingleValueType) => {
-  if (props.multiple) {
-    if (model) {
-      state.checkList.push(value)
-    } else {
-      state.checkList = state.checkList.filter(item => item !== value)
-    }
-    emit('update:modelValue', state.checkList)
-    emit('change', state.checkList)
-  } else {
-    const val = model ? value : ''
-    emit('update:modelValue', val)
-    emit('change', val)
-  }
-}
-
-const handleExtra = (item: PlusCheckCardProps & { value: string | number }) => {
-  if (props.disabled) return
-  emit('extra', item)
-}
-</script>

package/packages/components/check-card-group/style/css.ts

@@ -1,3 +0,0 @@
-import '@wlydfe/pro-ui-components/check-card/style/css'
-
-import '@wlydfe/pro-ui-theme-chalk/plus-check-card-group.css'

package/packages/components/check-card-group/style/index.ts

@@ -1,3 +0,0 @@
-import '@wlydfe/pro-ui-components/check-card/style/index'
-
-import '@wlydfe/pro-ui-theme-chalk/src/check-card-group.scss'

package/packages/components/date-picker/__tests__/date-picker.test.tsx

@@ -1,79 +0,0 @@
-import { nextTick, ref } from 'vue'
-import { mount } from '@vue/test-utils'
-import { ElDatePicker } from 'element-plus'
-import { describe, expect, test } from 'vitest'
-import DatePicker from '../src/index.vue'
-
-describe('date-picker/index.vue', () => {
-  test('render test', async () => {
-    const wrapper = mount(DatePicker, {
-      components: {
-        ElDatePicker
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-date-picker').exists()).toBe(true)
-    expect(wrapper.find('.plus-date-picker__start').exists()).toBe(true)
-    expect(wrapper.find('.plus-date-picker__middle').exists()).toBe(true)
-    expect(wrapper.find('.plus-date-picker__end').exists()).toBe(true)
-  })
-
-  test('rangeSeparator props test', async () => {
-    const date = ref<string[]>([])
-    const rangeSeparator = '***'
-    const wrapper = mount(
-      () => <DatePicker rangeSeparator={rangeSeparator} modelValue={date.value} />,
-      {
-        components: {
-          ElDatePicker
-        }
-      }
-    )
-    await nextTick()
-    expect(wrapper.find('.plus-date-picker__middle').text()).includes(rangeSeparator)
-  })
-
-  test('modelValue test', async () => {
-    const start = '2026-8-1 14:12:12'
-    const end = '2026-8-8 14:12:12'
-    const date = ref<string[]>([start, end])
-    const wrapper = mount(DatePicker, {
-      components: {
-        ElDatePicker
-      },
-      props: {
-        modelValue: date.value,
-        'onUpdate:modelValue': (data: string[]) => wrapper.setProps({ modelValue: data })
-      }
-    })
-    expect(wrapper.props('modelValue')[0]).toBe(start)
-    expect(wrapper.props('modelValue')[1]).toBe(end)
-  })
-
-  test('instance test', async () => {
-    const wrapper = mount(DatePicker, {
-      components: {
-        ElDatePicker
-      }
-    })
-    expect(wrapper.vm.startPickerInstance).toHaveProperty('focus')
-    expect(wrapper.vm.startPickerInstance).toHaveProperty('handleOpen')
-    expect(wrapper.vm.startPickerInstance).toHaveProperty('handleClose')
-    expect(wrapper.vm.endPickerInstance).toHaveProperty('focus')
-    expect(wrapper.vm.endPickerInstance).toHaveProperty('handleOpen')
-    expect(wrapper.vm.endPickerInstance).toHaveProperty('handleClose')
-  })
-
-  test('input test', async () => {
-    const wrapper = mount(DatePicker, {
-      components: {
-        ElDatePicker
-      }
-    })
-    await nextTick()
-    const input = wrapper.find('.el-input__inner')
-    input.setValue('2023-08-01 12:12:12')
-    const changeEvent = wrapper.emitted()
-    expect(changeEvent).toHaveProperty('input')
-  })
-})

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

@@ -1,6 +0,0 @@
-import DatePicker from './src/index.vue'
-
-export type PlusDatePickerInstance = InstanceType<typeof DatePicker>
-export type { PlusDatePickerProps } from './src/index.vue'
-
-export const PlusDatePicker = DatePicker

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

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

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

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

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