@wlydfe/pro-ui 0.2.21 → 0.2.24

package/packages/components/form-item/style/css.ts

@@ -1,30 +0,0 @@
-import '@external/form-item/style/css'
-import '@external/tooltip/style/css'
-import '@external/icon/style/css'
-import '@external/autocomplete/style/css'
-import '@external/cascader/style/css'
-import '@external/checkbox/style/css'
-import '@external/checkbox-group/style/css'
-import '@external/color-picker/style/css'
-import '@external/date-picker/style/css'
-import '@external/input-number/style/css'
-import '@external/radio-group/style/css'
-import '@external/radio/style/css'
-import '@external/rate/style/css'
-import '@external/select/style/css'
-import '@external/option/style/css'
-import '@external/slider/style/css'
-import '@external/switch/style/css'
-import '@external/time-picker/style/css'
-import '@external/time-select/style/css'
-import '@external/input/style/css'
-import '@external/text/style/css'
-import '@external/transfer/style/css'
-import '@external/divider/style/css'
-import '@external/tree-select/style/css'
-
-import '@wlydfe/pro-ui-components/radio/style/css'
-import '@wlydfe/pro-ui-components/date-picker/style/css'
-import '@wlydfe/pro-ui-components/input-tag/style/css'
-
-import '@wlydfe/pro-ui-theme-chalk/plus-form-item.css'

package/packages/components/form-item/style/index.ts

@@ -1,30 +0,0 @@
-import '@external/form-item/style/index'
-import '@external/tooltip/style/index'
-import '@external/icon/style/index'
-import '@external/autocomplete/style/index'
-import '@external/cascader/style/index'
-import '@external/checkbox/style/index'
-import '@external/checkbox-group/style/index'
-import '@external/color-picker/style/index'
-import '@external/date-picker/style/index'
-import '@external/input-number/style/index'
-import '@external/radio-group/style/index'
-import '@external/radio/style/index'
-import '@external/rate/style/index'
-import '@external/select/style/index'
-import '@external/option/style/index'
-import '@external/slider/style/index'
-import '@external/switch/style/index'
-import '@external/time-picker/style/index'
-import '@external/time-select/style/index'
-import '@external/input/style/index'
-import '@external/text/style/index'
-import '@external/transfer/style/index'
-import '@external/divider/style/index'
-import '@external/tree-select/style/index'
-
-import '@wlydfe/pro-ui-components/radio/style/index'
-import '@wlydfe/pro-ui-components/date-picker/style/index'
-import '@wlydfe/pro-ui-components/input-tag/style/index'
-
-import '@wlydfe/pro-ui-theme-chalk/src/form-item.scss'

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

@@ -1,63 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import ElementPlus from 'element-plus'
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
-import Header from '../src/index.vue'
-
-const logo = 'https://plus-pro-components.com/logo.png'
-const title = 'PlusProComponents'
-
-describe('header/index.vue', () => {
-  test('render test', async () => {
-    const wrapper = mount(() => <Header />, {
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-header').exists()).toBe(true)
-    expect(wrapper.find('.plus-header__left').exists()).toBe(true)
-    expect(wrapper.find('.plus-header__left .plus-header__logo').exists()).toBe(true)
-    expect(wrapper.find('.plus-header__left .plus-header__title').exists()).toBe(true)
-    expect(wrapper.find('.plus-header__placeholder').exists()).toBe(true)
-    expect(wrapper.find('.plus-header__right').exists()).toBe(true)
-    expect(wrapper.find('.plus-header__right .plus-header__dropdown-area').exists()).toBe(true)
-    expect(wrapper.find('.plus-header__right .plus-header__avatar').exists()).toBe(true)
-    expect(wrapper.find('.plus-header__right .plus-header__username').exists()).toBe(true)
-  })
-
-  test('renderHeaderLeft and renderHeaderRight test', async () => {
-    const renderHeaderLeft = (info: { title: string; logo: string }) => {
-      return info.title + info.logo
-    }
-    const renderHeaderRight = (info: { userInfo: any; title: string }) => {
-      return info.title
-    }
-    const wrapper = mount(
-      () => <Header renderHeaderLeft={renderHeaderLeft} renderHeaderRight={renderHeaderRight} />,
-      {
-        global: {
-          plugins: [ElementPlus]
-        }
-      }
-    )
-    await nextTick()
-    expect(wrapper.find('.plus-header__left').text()).includes(title + logo)
-    expect(wrapper.find('.plus-header__right').text()).includes(title)
-  })
-
-  test('slots test', async () => {
-    const slots = {
-      'header-left': () => title + logo,
-      'header-right': () => title
-    }
-    const wrapper = mount(() => <Header v-slots={slots} />, {
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-header__left').text()).includes(title + logo)
-    expect(wrapper.find('.plus-header__right').text()).includes(title)
-  })
-})

package/packages/components/header/index.ts

@@ -1,5 +0,0 @@
-import Header from './src/index.vue'
-
-export * from './src/type'
-
-export const PlusHeader = Header

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

@@ -1,105 +0,0 @@
-<template>
-  <el-header class="plus-header" :class="{ 'is-fixed': fixed }">
-    <div class="plus-header__left">
-      <component
-        :is="renderHeaderLeft"
-        v-if="renderHeaderLeft && isFunction(renderHeaderLeft)"
-        :logo="logo"
-        :title="title"
-      />
-
-      <slot v-else-if="$slots['header-left']" name="header-left" :logo="logo" :title="title" />
-
-      <template v-else>
-        <img v-if="logo" :src="logo" alt="" class="plus-header__logo" />
-        <h2 v-if="title" class="plus-header__title">{{ title }}</h2>
-      </template>
-    </div>
-
-    <div class="plus-header__placeholder" />
-
-    <div class="plus-header__right">
-      <component
-        :is="renderHeaderRight"
-        v-if="renderHeaderRight && isFunction(renderHeaderRight)"
-        :user-info="userInfo"
-        :title="title"
-      />
-
-      <slot
-        v-else-if="$slots['header-right']"
-        name="header-right"
-        :user-info="userInfo"
-        :title="title"
-      />
-
-      <el-dropdown v-if="hasUserInfo" placement="bottom-end" trigger="click">
-        <span class="plus-header__dropdown-area">
-          <!-- avatar -->
-          <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="" class="plus-header__avatar" />
-          <el-icon v-else :size="20" class="plus-header__avatar"><User /></el-icon>
-
-          <!-- username -->
-          <p class="plus-header__username">{{ userInfo.username || 'admin' }}</p>
-
-          <el-icon class="el-icon-caret-bottom el-icon--right">
-            <ArrowDown />
-          </el-icon>
-        </span>
-
-        <template #dropdown>
-          <el-dropdown-menu class="header-dropdown">
-            <el-dropdown-item @click="handleClickItem(logoutItem)">
-              {{ logoutText || t('plus.header.logout') }}
-            </el-dropdown-item>
-            <el-dropdown-item
-              v-for="item in dropdownList"
-              :key="item.value"
-              @click="handleClickItem(item)"
-            >
-              {{ item.label }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div>
-  </el-header>
-
-  <div v-if="fixed" class="plus-header-placeholder" />
-</template>
-
-<script lang="ts" setup>
-import { ArrowDown, User } from '@element-plus/icons-vue'
-import { ElIcon, ElHeader, ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus'
-import { useLocale } from '@wlydfe/pro-ui-hooks'
-import { isFunction } from '@wlydfe/pro-ui-components/utils'
-import type { PlusHeaderSelfProps as PlusHeaderProps, PlusHeaderEmits } from './type'
-
-defineOptions({
-  name: 'PlusHeader'
-})
-
-const props = withDefaults(defineProps<PlusHeaderProps>(), {
-  logo: 'https://plus-pro-components.com/logo.png',
-  title: 'PlusProComponents',
-  trigger: 'click',
-  userInfo: () => ({}),
-  dropdownList: () => [],
-  logoutText: '',
-  hasUserInfo: true,
-  fixed: false
-})
-
-const emit = defineEmits<PlusHeaderEmits>()
-
-const { t } = useLocale()
-
-const logoutItem = {
-  label: props.logoutText || t('plus.header.logout'),
-  value: 'logout'
-}
-
-const handleClickItem = (item: { label: string; value: string }) => {
-  emit('clickDropdownItem', item)
-}
-</script>

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

@@ -1,32 +0,0 @@
-import type { RecordType, RenderTypes } from '@wlydfe/pro-ui-types'
-
-export interface PlusHeaderSelfProps {
-  logo?: string
-  fixed?: boolean
-  title?: string
-  logoutText?: string
-  trigger?: 'click' | 'hover'
-  userInfo?: {
-    [index: string | number | symbol]: unknown
-    username?: string
-    avatar?: string
-  }
-  hasUserInfo?: boolean
-  dropdownList?: {
-    label: string
-    value: string
-  }[]
-  // eslint-disable-next-line vue/require-default-prop
-  renderHeaderLeft?: (info: { logo: string; title: string }) => RenderTypes
-  // eslint-disable-next-line vue/require-default-prop
-  renderHeaderRight?: (info: {
-    userInfo: Record<string | number | symbol, unknown>
-    title: string
-  }) => RenderTypes
-}
-
-export type PlusHeaderProps = PlusHeaderSelfProps & RecordType
-
-export interface PlusHeaderEmits {
-  (e: 'clickDropdownItem', item: { label: string; value: string }): void
-}

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

@@ -1,7 +0,0 @@
-import '@external/header/style/css'
-import '@external/dropdown/style/css'
-import '@external/icon/style/css'
-import '@external/dropdown-menu/style/css'
-import '@external/dropdown-item/style/css'
-
-import '@wlydfe/pro-ui-theme-chalk/plus-header.css'

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

@@ -1,7 +0,0 @@
-import '@external/header/style/index'
-import '@external/dropdown/style/index'
-import '@external/icon/style/index'
-import '@external/dropdown-menu/style/index'
-import '@external/dropdown-item/style/index'
-
-import '@wlydfe/pro-ui-theme-chalk/src/header.scss'

package/packages/components/index.ts

@@ -1,22 +0,0 @@
-export * from './dialog'
-export * from './pagination'
-export * from './table'
-export * from './radio'
-export * from './date-picker'
-export * from './descriptions'
-export * from './display-item'
-export * from './form'
-export * from './form-item'
-export * from './search'
-export * from './dialog-form'
-export * from './drawer-form'
-export * from './page'
-export * from './popover'
-export * from './steps-form'
-export * from './input-tag'
-export * from './breadcrumb'
-export * from './sidebar'
-export * from './header'
-export * from './layout'
-export * from './check-card'
-export * from './check-card-group'

package/packages/components/input-tag/__tests__/input-tag.test.tsx

@@ -1,78 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import ElementPlus from 'element-plus'
-import { nextTick } from 'vue'
-import { mount } from '@vue/test-utils'
-import InputTag from '../src/index.vue'
-
-describe('input-tag/index.vue', () => {
-  test('render test', async () => {
-    const wrapper = mount(() => <InputTag />, {
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-input-tag').exists()).toBe(true)
-    expect(wrapper.find('.plus-input-tag__tag').exists()).toBe(false)
-    expect(wrapper.find('.plus-input-tag__input').exists()).toBe(true)
-  })
-
-  test('modelValue test', async () => {
-    const wrapper = mount(() => <InputTag modelValue={['tag1', 'tag2']} />, {
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-input-tag').text()).includes('tag1')
-    expect(wrapper.find('.plus-input-tag').text()).includes('tag2')
-  })
-
-  test('limit props test', async () => {
-    const wrapper = mount(
-      () => <InputTag modelValue={['tag1', 'tag2', 'tag11', 'tag22']} limit={3} />,
-      {
-        global: {
-          plugins: [ElementPlus]
-        }
-      }
-    )
-    await nextTick()
-    expect(wrapper.find('.plus-input-tag').text()).includes('tag1')
-    expect(wrapper.find('.plus-input-tag').text()).includes('tag2')
-    expect(wrapper.find('.plus-input-tag').text()).includes('tag11')
-    expect(wrapper.find('.plus-input-tag').text()).not.include('tag22')
-  })
-
-  test('instance test', async () => {
-    const wrapper = mount(InputTag, {
-      props: {
-        modelValue: ['tag1', 'tag2', 'tag11', 'tag22']
-      },
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-    expect(wrapper.vm.inputInstance).toHaveProperty('focus')
-    expect(wrapper.vm.inputInstance?.blur())
-    expect(wrapper.find('.plus-input-tag').trigger('click'))
-    expect(wrapper.find('.plus-input-tag__is-focus').exists()).toBe(false)
-    expect((wrapper.vm.tagInstance as any)[0]).toHaveProperty('closable')
-  })
-
-  test('formatTag  test', async () => {
-    const wrapper = mount(InputTag, {
-      props: {
-        modelValue: ['tag1', 'tag2'],
-        formatTag: (tag: string) => tag + 'test'
-      },
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-input-tag').text()).includes('tag1' + 'test')
-    expect(wrapper.find('.plus-input-tag').text()).includes('tag2' + 'test')
-  })
-})

package/packages/components/input-tag/index.ts

@@ -1,5 +0,0 @@
-import type { PlusInputTagProps } from './src/index.vue'
-import InputTag from './src/index.vue'
-
-export type { PlusInputTagProps }
-export const PlusInputTag = InputTag

package/packages/components/input-tag/src/index.vue

@@ -1,162 +0,0 @@
-<template>
-  <div
-    ref="plusInputTagInstance"
-    v-click-outside="onClickOutside"
-    class="plus-input-tag"
-    :class="{
-      'is-focus': state.isFocus,
-      'is-disabled': formDisabled
-    }"
-    @click="handleClick"
-  >
-    <el-tag
-      v-for="tag in state.tags"
-      ref="tagInstance"
-      :key="tag"
-      class="plus-input-tag__tag"
-      v-bind="tagProps"
-      closable
-      @close="handleClose(tag)"
-    >
-      {{ formatTag && isFunction(formatTag) ? formatTag(tag) : tag }}
-    </el-tag>
-    <el-input
-      v-if="state.tags.length < limit"
-      ref="inputInstance"
-      v-model="state.inputValue"
-      class="plus-input-tag__input"
-      :placeholder="state.tags.length ? '' : t('plus.inputTag.placeholder')"
-      :disabled="formDisabled || state.tags.length >= limit"
-      v-bind="inputProps"
-      clearable
-      @blur="handle($event, 'blur')"
-      @keyup.enter.exact="handle($event, 'enter')"
-      @keyup.space.exact="handle($event, 'space')"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { InputProps, TagProps, InputInstance, TagInstance } from 'element-plus'
-import { ElTag, ElInput, ClickOutside as vClickOutside, useFormDisabled } from 'element-plus'
-import { reactive, ref, watch } from 'vue'
-import type { Mutable } from '@wlydfe/pro-ui-types'
-import { useLocale } from '@wlydfe/pro-ui-hooks'
-import { isArray, isString, isFunction } from '@wlydfe/pro-ui-components/utils'
-
-type TriggerType = 'blur' | 'enter' | 'space'
-export interface PlusInputTagProps {
-  modelValue?: string[]
-  trigger?: TriggerType[] | TriggerType
-  inputProps?: Partial<Mutable<InputProps>>
-  tagProps?: Partial<Mutable<TagProps>>
-  limit?: number
-  formatTag?: (tag: string) => string
-  retainInputValue?: boolean
-  /**
-   * @version 0.1.14
-   */
-  disabled?: boolean
-}
-export interface PlusInputTagEmits {
-  (e: 'update:modelValue', data: string[]): void
-  (e: 'change', data: string[]): void
-  (e: 'remove', tag: string): void
-  (e: 'blur', value: string, event: FocusEvent): void
-  (e: 'enter', value: string, event: MouseEvent): void
-  (e: 'space', value: string, event: MouseEvent): void
-}
-
-export interface PlusInputTagState {
-  tags: string[]
-  inputValue: string
-  isFocus: boolean
-}
-
-defineOptions({
-  name: 'PlusInputTag'
-})
-
-const props = withDefaults(defineProps<PlusInputTagProps>(), {
-  modelValue: () => [],
-  trigger: () => ['blur', 'enter', 'space'],
-  limit: Infinity,
-  inputProps: () => ({}),
-  tagProps: () => ({}),
-  disabled: false,
-  formatTag: undefined,
-  retainInputValue: false
-})
-const emit = defineEmits<PlusInputTagEmits>()
-
-const inputInstance = ref<InputInstance | null>()
-const tagInstance = ref<TagInstance | null>()
-const plusInputTagInstance = ref<HTMLDivElement | null>()
-const state = reactive<PlusInputTagState>({
-  tags: [],
-  inputValue: '',
-  isFocus: false
-})
-const formDisabled = useFormDisabled()
-const { t } = useLocale()
-
-watch(
-  () => props.modelValue,
-  val => {
-    state.tags = val.slice(0, props.limit)
-  },
-  { immediate: true }
-)
-
-const onClickOutside = () => {
-  state.isFocus = false
-}
-
-const handleClick = () => {
-  state.isFocus = true
-  inputInstance.value?.focus()
-}
-
-const handleClose = (tag: string) => {
-  if (formDisabled.value) return
-
-  state.tags = state.tags.filter(item => item !== tag)
-  emit('remove', tag)
-  emit('update:modelValue', state.tags)
-  emit('change', state.tags)
-}
-
-const handleValue = () => {
-  if (
-    state.inputValue.trim() &&
-    !state.tags.includes(state.inputValue.trim()) &&
-    state.tags.length < props.limit
-  ) {
-    state.tags.push(state.inputValue.trim())
-  }
-
-  // Retain input value
-  if (!props.retainInputValue) {
-    state.inputValue = ''
-  }
-
-  emit('update:modelValue', state.tags)
-  emit('change', state.tags)
-}
-
-const handle = (event: MouseEvent | FocusEvent, type: TriggerType) => {
-  emit(type as any, state.inputValue, event)
-
-  const triggerList = isArray(props.trigger)
-    ? props.trigger
-    : isString(props.trigger)
-    ? [props.trigger]
-    : ['blur', 'enter', 'space']
-
-  if (triggerList.includes(type)) {
-    handleValue()
-  }
-}
-
-defineExpose({ inputInstance, tagInstance })
-</script>

package/packages/components/input-tag/style/css.ts

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

package/packages/components/input-tag/style/index.ts

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