@wlydfe/pro-ui 0.2.21 → 0.2.24

package/packages/components/search/index.ts

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

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

@@ -1,207 +0,0 @@
-<template>
-  <PlusForm
-    ref="plusFormInstance"
-    v-bind="$attrs"
-    v-model="values"
-    :inline="inline"
-    :rules="rules"
-    :label-position="labelPosition"
-    :row-props="rowProps"
-    :col-props="colProps"
-    :columns="subColumns"
-    class="plus-search"
-    :has-footer="false"
-    @change="handleChange"
-  >
-    <template v-for="(_, key) in $slots" :key="key" #[key]="data">
-      <slot :name="key" v-bind="data" />
-    </template>
-
-    <template #search-footer>
-      <el-form-item
-        v-if="hasFooter"
-        class="plus-search__button__wrapper"
-        :label="labelPosition === 'top' ? 'placeholder' : ''"
-      >
-        <slot
-          name="footer"
-          :is-show-unfold="isShowUnfold"
-          :handle-reset="handleReset"
-          :handle-search="handleSearch"
-          :handle-unfold="handleUnfold"
-          :search-loading="searchLoading"
-        >
-          <template v-for="button in buttonOrder" :key="button">
-            <el-button
-              v-if="button === 'reset' && hasReset"
-              :icon="hasSearchIcon ? RefreshRight : undefined"
-              @click="handleReset"
-            >
-              {{ resetText || t('plus.search.resetText') }}
-            </el-button>
-            <el-button
-              v-if="button === 'search'"
-              type="primary"
-              :loading="searchLoading"
-              :icon="hasSearchIcon ? Search : undefined"
-              @click="handleSearch"
-            >
-              {{ searchText || t('plus.search.searchText') }}
-            </el-button>
-            <template v-if="button === 'fold'">
-              <el-link
-                v-if="hasUnfold && originData.length > showNumber"
-                class="plus-search__unfold"
-                type="primary"
-                :underline="(versionIsLessThan299 ? false : 'never') as any"
-                href="javaScript:;"
-                @click="handleUnfold"
-              >
-                {{ unfoldText }}
-                <el-icon>
-                  <ArrowUp v-if="isShowUnfold" />
-                  <ArrowDown v-else />
-                </el-icon>
-              </el-link>
-            </template>
-          </template>
-        </slot>
-      </el-form-item>
-    </template>
-  </PlusForm>
-</template>
-
-<script lang="ts" setup>
-import type { PlusFormInstance } from '@wlydfe/pro-ui-components/form'
-import { PlusForm } from '@wlydfe/pro-ui-components/form'
-import type { ComputedRef } from 'vue'
-import { ref, computed, watch, unref, useAttrs } from 'vue'
-import { ArrowDown, ArrowUp, Search, RefreshRight } from '@element-plus/icons-vue'
-import type { PlusColumn, FieldValues } from '@wlydfe/pro-ui-types'
-import { useLocale } from '@wlydfe/pro-ui-hooks'
-import { ElFormItem, ElButton, ElIcon, ElLink } from 'element-plus'
-import { orderBy } from 'lodash-es'
-import { versionIsLessThan299 } from '@wlydfe/pro-ui-components/utils'
-import type { FormRules } from 'element-plus'
-import type { PlusSearchSelfProps as PlusSearchProps, PlusSearchEmits } from './type'
-
-defineOptions({
-  name: 'PlusSearch'
-})
-
-const props = withDefaults(defineProps<PlusSearchProps>(), {
-  modelValue: () => ({}),
-  defaultValues: () => ({}),
-  hasFooter: true,
-  hasReset: true,
-  // 搜索按钮是否显示icon
-  hasSearchIcon: true,
-  hasUnfold: true,
-  defaultUnfold: true,
-  searchLoading: false,
-  searchText: '',
-  resetText: '',
-  retractText: '',
-  expandText: '',
-  inline: true,
-  showNumber: 2,
-  labelPosition: undefined,
-  columns: () => [],
-  rowProps: () => ({
-    gutter: 20
-  }),
-  buttonOrder: () => ['reset', 'search', 'fold'],
-  colProps: () => ({
-    xs: 24,
-    sm: 12,
-    md: 8,
-    lg: 8,
-    xl: 6
-  }),
-  needValidate: false
-})
-const emit = defineEmits<PlusSearchEmits>()
-
-const { t } = useLocale()
-const plusFormInstance = ref<PlusFormInstance | null>()
-
-const isShowUnfold = ref<boolean>(props.defaultUnfold ?? false)
-const values = ref<FieldValues>({})
-
-const attrs = useAttrs()
-const rules: ComputedRef<FormRules | undefined> = computed(() =>
-  props.needValidate ? (attrs.rules as FormRules) : undefined
-)
-const unfoldText = computed(() =>
-  isShowUnfold.value
-    ? props.retractText || t('plus.search.retract')
-    : props.expandText || t('plus.search.expand')
-)
-
-const originData = computed<PlusColumn[]>(() => {
-  const filterData = props.columns
-    .filter(item => unref(item.hideInSearch) !== true)
-    // FIXME:  hideInForm 不应该传递
-    .map(item => ({ ...item, hideInForm: false }))
-    // set order default value
-    .map(item => ({ ...item, order: item?.order ? unref(item.order) : 0 }))
-  return orderBy(filterData, ['order'], ['desc'])
-})
-
-const subColumns = computed<PlusColumn[]>(() => {
-  if (props.hasUnfold && !isShowUnfold.value) {
-    return originData.value.slice(0, props.showNumber)
-  } else {
-    return originData.value
-  }
-})
-
-watch(
-  () => props.modelValue,
-  val => {
-    values.value = val
-  },
-  {
-    immediate: true
-  }
-)
-
-const handleChange = async (values: FieldValues, column: PlusColumn) => {
-  emit('update:modelValue', values)
-  emit('change', values, column)
-}
-
-const handleSearchDefault = () => {
-  emit('search', values.value)
-}
-
-const handleSearchValidate = async () => {
-  const isValid = await plusFormInstance.value?.handleSubmit()
-  if (isValid) {
-    emit('search', values.value)
-  }
-}
-
-const handleSearch = computed(() =>
-  props.needValidate ? handleSearchValidate : handleSearchDefault
-)
-
-const handleReset = (): void => {
-  values.value = { ...props.defaultValues }
-  emit('update:modelValue', values.value)
-  emit('reset', values.value)
-}
-
-const handleUnfold = (e: MouseEvent) => {
-  e.preventDefault()
-  isShowUnfold.value = !isShowUnfold.value
-  emit('collapse', isShowUnfold.value)
-}
-
-defineExpose({
-  plusFormInstance,
-  handleReset,
-  handleSearch: handleSearch.value,
-  handleUnfold
-})
-</script>

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

@@ -1,57 +0,0 @@
-import type { PlusColumn, FieldValues, Mutable } from '@wlydfe/pro-ui-types'
-import type { PlusFormProps } from '@wlydfe/pro-ui-components'
-
-import type { RowProps, ColProps } from 'element-plus'
-
-export type PlusSearchSelfProps = {
-  modelValue?: FieldValues
-  defaultValues?: FieldValues
-  columns?: PlusColumn[]
-  hasFooter?: boolean
-  /**
-   * 搜索按钮是否显示icon
-   * @version 0.2.18
-   * @default true
-   */
-  hasSearchIcon?: boolean
-  hasReset?: boolean
-  hasUnfold?: boolean
-  /**
-   * 默认是否展开
-   * @version 0.1.24
-   * @default false
-   */
-  defaultUnfold?: boolean
-  searchText?: string
-  resetText?: string
-  retractText?: string
-  expandText?: string
-  searchLoading?: boolean
-  inline?: boolean
-  showNumber?: number
-  /**
-   * 搜索按钮排列顺序
-   * @version 0.2.18
-   * @default ['reset', 'search', 'fold']
-   */
-  buttonOrder?: ('reset' | 'search' | 'fold')[]
-  labelPosition?: 'left' | 'right' | 'top'
-  rowProps?: Partial<Mutable<RowProps>>
-  colProps?: Partial<Mutable<ColProps>>
-  /**
-   * 搜索是否需要校验 ，默认不需要校验表单
-   * @variation v0.1.15
-   * @default  false
-   */
-  needValidate?: boolean
-}
-
-export type PlusSearchProps = PlusSearchSelfProps & PlusFormProps
-
-export interface PlusSearchEmits {
-  (e: 'update:modelValue', values: FieldValues): void
-  (e: 'search', values: FieldValues): void
-  (e: 'change', values: FieldValues, column: PlusColumn): void
-  (e: 'reset', values: FieldValues): void
-  (e: 'collapse', isShowUnfold: boolean): void
-}

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

@@ -1,5 +0,0 @@
-import '@external/button/style/css'
-
-import '@wlydfe/pro-ui-components/form/style/css'
-
-import '@wlydfe/pro-ui-theme-chalk/plus-search.css'

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

@@ -1,5 +0,0 @@
-import '@external/button/style/index'
-
-import '@wlydfe/pro-ui-components/form/style/index'
-
-import '@wlydfe/pro-ui-theme-chalk/src/search.scss'

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

@@ -1,149 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import { ElMenu, ElMenuItem, ElIcon, ElScrollbar, ElSubMenu } from 'element-plus'
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
-import type { PlusRouteRecordRaw } from 'plus-pro-components'
-import { Document as DocumentIcon } from '@element-plus/icons-vue'
-import Sidebar from '../src/index.vue'
-
-describe('sidebar/index.vue', () => {
-  test('render test', async () => {
-    const routes: PlusRouteRecordRaw[] = [
-      {
-        path: '/breadcrumb',
-        name: 'breadcrumb',
-        meta: {
-          icon: DocumentIcon
-        }
-      },
-      {
-        path: '/description',
-        name: 'description',
-        meta: {
-          icon: DocumentIcon
-        }
-      }
-    ]
-    const wrapper = mount(() => <Sidebar routes={routes} />, {
-      components: {
-        ElMenu,
-        ElMenuItem,
-        ElIcon,
-        ElScrollbar,
-        ElSubMenu
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-sidebar').exists()).toBe(true)
-    expect(wrapper.find('.plus-sidebar__item').exists()).toBe(true)
-    expect(wrapper.find('.plus-sidebar__item-icon').exists()).toBe(true)
-    expect(wrapper.find('.plus-sidebar__item-title').exists()).toBe(true)
-    expect(wrapper.find('.plus-sidebar').text()).includes(routes[0].name)
-    expect(wrapper.find('.plus-sidebar').text()).includes(routes[1].name)
-  })
-
-  test('hideInMenu test', async () => {
-    const routes: PlusRouteRecordRaw[] = [
-      {
-        path: '/breadcrumb',
-        name: 'breadcrumb',
-        meta: {
-          icon: DocumentIcon
-        }
-      },
-      {
-        path: '/description',
-        name: 'description',
-        meta: {
-          icon: DocumentIcon,
-          hideInMenu: true
-        }
-      }
-    ]
-    const wrapper = mount(() => <Sidebar routes={routes} />, {
-      components: {
-        ElMenu,
-        ElMenuItem,
-        ElIcon,
-        ElScrollbar,
-        ElSubMenu
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-sidebar').text()).includes(routes[0].name)
-    expect(wrapper.find('.plus-sidebar').text()).not.includes(routes[1].name)
-  })
-
-  test('renderTitle test', async () => {
-    const routes: PlusRouteRecordRaw[] = [
-      {
-        path: '/breadcrumb',
-        name: 'breadcrumb',
-        meta: {
-          icon: DocumentIcon
-        }
-      },
-      {
-        path: '/description',
-        name: 'description',
-        meta: {
-          icon: DocumentIcon
-        }
-      }
-    ]
-
-    const renderTitle = (route: PlusRouteRecordRaw) => {
-      return route.path as string
-    }
-
-    const wrapper = mount(() => <Sidebar routes={routes} renderTitle={renderTitle} />, {
-      components: {
-        ElMenu,
-        ElMenuItem,
-        ElIcon,
-        ElScrollbar,
-        ElSubMenu
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-sidebar').text()).includes(routes[0].path)
-    expect(wrapper.find('.plus-sidebar').text()).includes(routes[1].path)
-  })
-
-  test('slots test', async () => {
-    const routes: PlusRouteRecordRaw[] = [
-      {
-        path: '/breadcrumb',
-        name: 'breadcrumb',
-        meta: {
-          icon: DocumentIcon
-        }
-      },
-      {
-        path: '/description',
-        name: 'description',
-        meta: {
-          icon: DocumentIcon
-        }
-      }
-    ]
-
-    const slots = {
-      'sidebar-extra': () => 'sidebar-extra',
-      'sidebar-item': () => 'sidebar-item'
-    }
-
-    const wrapper = mount(() => <Sidebar routes={routes} v-slots={slots} />, {
-      components: {
-        ElMenu,
-        ElMenuItem,
-        ElIcon,
-        ElScrollbar,
-        ElSubMenu
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-sidebar').text()).includes('sidebar-extra')
-    expect(wrapper.find('.plus-sidebar').text()).includes('sidebar-item')
-  })
-})

package/packages/components/sidebar/index.ts

@@ -1,8 +0,0 @@
-import Sidebar from './src/index.vue'
-import SidebarItem from './src/sidebar-item.vue'
-
-export type PlusSidebarInstance = InstanceType<typeof Sidebar>
-export * from './src/type'
-
-export const PlusSidebar = Sidebar
-export const PlusSidebarItem = SidebarItem

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

@@ -1,138 +0,0 @@
-<template>
-  <el-menu
-    ref="plusSidebarInstance"
-    mode="vertical"
-    :collapse="subCollapse"
-    :default-active="subDefaultActive"
-    :collapse-transition="true"
-    class="plus-sidebar"
-    :class="[$attrs.mode === 'horizontal' ? 'is-horizontal' : 'is-vertical']"
-    :ellipsis="false"
-    unique-opened
-    v-bind="$attrs"
-  >
-    <component :is="renderMenuExtra" v-if="renderMenuExtra && isFunction(renderMenuExtra)" />
-
-    <!-- 菜单头插槽 -->
-    <slot v-else-if="$slots['sidebar-extra']" name="sidebar-extra" />
-
-    <el-scrollbar class="plus-sidebar__scrollbar" v-bind="scrollbarProps">
-      <!-- 添加递归组件，用来生成多级菜单 -->
-      <PlusSidebarItem
-        v-for="item in subRoutes"
-        :key="item.path"
-        :item="item"
-        :parent="subRoutes"
-        :collapse="subCollapse"
-        :render-menu-item="renderMenuItem"
-        :render-sub-menu-item="renderSubMenuItem"
-        :render-title="renderTitle"
-        @click-menu-item="onClickMenuItem"
-      >
-        <!-- sidebar-item 插槽 -->
-        <template v-if="$slots['sidebar-item']" #sidebar-item="data">
-          <slot name="sidebar-item" v-bind="data" />
-        </template>
-
-        <!-- sidebar-sub 插槽 -->
-        <template v-if="$slots['sidebar-sub']" #sidebar-sub="data">
-          <slot name="sidebar-sub" v-bind="data" />
-        </template>
-
-        <!-- sidebar-item-title  插槽-->
-        <template v-if="$slots['sidebar-item-title']" #sidebar-item-title="data">
-          <slot name="sidebar-item-title" v-bind="data" />
-        </template>
-      </PlusSidebarItem>
-    </el-scrollbar>
-
-    <el-menu-item
-      v-if="$attrs.mode !== 'horizontal'"
-      index="collapse"
-      class="plus-sidebar__collapse"
-      :class="subCollapse ? 'is-collapse' : ''"
-      @click="toggleCollapse"
-    >
-      <el-icon v-if="subCollapse"><Expand /></el-icon>
-      <el-icon v-else><Fold /></el-icon>
-    </el-menu-item>
-  </el-menu>
-</template>
-
-<script lang="ts" setup>
-import type { ComputedRef } from 'vue'
-import { ref, computed, watchEffect, getCurrentInstance, unref, useAttrs } from 'vue'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import { ElMenu, ElMenuItem, ElIcon, ElScrollbar } from 'element-plus'
-import { Expand, Fold } from '@element-plus/icons-vue'
-import { cloneDeep } from 'lodash-es'
-import type { PlusRouteRecordRaw } from '@wlydfe/pro-ui-types'
-import { isFunction } from '@wlydfe/pro-ui-components/utils'
-import PlusSidebarItem from './sidebar-item.vue'
-import type { PlusSidebarSelfProps as PlusSidebarProps, PlusSidebarEmits } from './type'
-
-defineOptions({
-  name: 'PlusSidebar'
-})
-
-const props = withDefaults(defineProps<PlusSidebarProps>(), {
-  routes: () => [],
-  scrollbarProps: () => ({}),
-  collapse: false,
-  renderMenuItem: undefined,
-  renderSubMenuItem: undefined,
-  renderTitle: undefined,
-  renderMenuExtra: undefined,
-  /**
-   * 菜单的宽度
-   * @deprecated 0.1.20
-   */
-  width: 200,
-  defaultActive: undefined
-})
-
-const emit = defineEmits<PlusSidebarEmits>()
-
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const instance = getCurrentInstance()!
-const route = computed(
-  () => instance.appContext.config.globalProperties.$route as RouteLocationNormalizedLoaded
-)
-
-const plusSidebarInstance = ref<InstanceType<typeof ElMenu> | null>(null)
-
-const subCollapse = ref(false)
-const subRoutes = computed(() =>
-  cloneDeep(props.routes).sort((a, b) => (a.meta?.sort || 0) - (b.meta?.sort || 0))
-)
-
-// 激活的菜单
-const computedDefaultActive = computed(
-  () => (route.value?.redirectedFrom && route.value?.redirectedFrom?.path) || route.value?.path
-)
-
-const subDefaultActive = computed(
-  () => unref(props.defaultActive) || computedDefaultActive.value
-) as ComputedRef<string>
-
-const onClickMenuItem = useAttrs().onClickMenuItem as (
-  item: PlusRouteRecordRaw,
-  parent: PlusRouteRecordRaw | PlusRouteRecordRaw[]
-) => void
-// 切换菜单
-const toggleCollapse = () => {
-  subCollapse.value = !subCollapse.value
-  emit('update:collapse', subCollapse.value)
-  emit('toggleCollapse', subCollapse.value)
-}
-
-watchEffect(() => {
-  subCollapse.value = props.collapse
-})
-
-defineExpose({
-  collapse: subCollapse,
-  toggleCollapse,
-  plusSidebarInstance
-})
-</script>