@wlydfe/pro-ui 0.2.21 → 0.2.24

package/packages/components/sidebar/src/sidebar-item.vue

@@ -1,197 +0,0 @@
-<template>
-  <template v-if="item.meta?.hideInMenu !== true">
-    <!-- 没有子菜单的情况 -->
-    <template v-if="resolveMenuItem(item)">
-      <el-menu-item
-        :key="getIndex(item)"
-        class="plus-sidebar__item"
-        :index="getIndex(item)"
-        :disabled="item.meta?.disabled"
-        @click="handleClickItem(item)"
-      >
-        <!-- 自定义显示 -->
-        <component
-          :is="renderMenuItem"
-          v-if="renderMenuItem && isFunction(renderMenuItem)"
-          v-bind="removeChildrenField(item)"
-        />
-
-        <!-- menu-item 插槽 -->
-        <slot v-else-if="$slots['sidebar-item']" name="sidebar-item" v-bind="item" />
-
-        <el-icon v-else-if="item.meta && item.meta.icon" class="plus-sidebar__item-icon">
-          <component :is="item.meta.icon" v-bind="removeChildrenField(item)" />
-        </el-icon>
-
-        <template #title>
-          <span class="plus-sidebar__item-title">
-            <component
-              :is="renderTitle"
-              v-if="renderTitle && isFunction(renderTitle)"
-              v-bind="removeChildrenField(item)"
-            />
-
-            <!-- menu-item title 插槽 -->
-            <slot
-              v-else-if="$slots['sidebar-item-title']"
-              name="sidebar-item-title"
-              v-bind="item"
-            />
-
-            <template v-else>
-              {{ item.meta?.title || item.name || item.path }}
-            </template>
-          </span>
-        </template>
-      </el-menu-item>
-    </template>
-
-    <!-- 有子菜单的情况 -->
-    <el-sub-menu
-      v-else
-      :key="getIndex(item)"
-      :index="getIndex(item)"
-      class="plus-sidebar__item-sub"
-    >
-      <template #title>
-        <!-- 自定义显示 -->
-        <component
-          :is="renderSubMenuItem"
-          v-if="renderSubMenuItem && isFunction(renderSubMenuItem)"
-          v-bind="removeChildrenField(item)"
-        />
-
-        <!-- sub-menu 插槽 -->
-        <slot v-else-if="$slots['sidebar-sub']" name="sidebar-sub" v-bind="item" />
-
-        <el-icon v-else-if="item.meta?.icon" class="plus-sidebar__item-icon">
-          <component :is="item.meta?.icon" v-bind="removeChildrenField(item)" />
-        </el-icon>
-
-        <span class="plus-sidebar__item-title">
-          <component
-            :is="renderTitle"
-            v-if="renderTitle && isFunction(renderTitle)"
-            v-bind="removeChildrenField(item)"
-          />
-
-          <!-- sub-menu title 插槽 -->
-          <slot v-else-if="$slots['sidebar-item-title']" name="sidebar-item-title" v-bind="item" />
-
-          <template v-else>
-            {{ item.meta?.title || item.name || item.path }}
-          </template>
-        </span>
-      </template>
-      <PlusSidebarItem
-        v-for="child in item.children"
-        :key="child.path"
-        :item="child"
-        :parent="item"
-        :collapse="collapse"
-        :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-sub-menu>
-  </template>
-</template>
-
-<script lang="ts" setup>
-import { getCurrentInstance, useAttrs } from 'vue'
-import type { PlusRouteRecordRaw, RenderTypes } from '@wlydfe/pro-ui-types'
-import { ElSubMenu, ElMenuItem, ElIcon } from 'element-plus'
-import type { Router } from 'vue-router'
-import { isUrl, isFunction, removeChildrenField } from '@wlydfe/pro-ui-components/utils'
-
-export interface PlusSidebarItemProps {
-  parent: PlusRouteRecordRaw | PlusRouteRecordRaw[]
-  item: PlusRouteRecordRaw
-  collapse?: boolean
-  /**
-   * 自定义 菜单的  menuItem
-   * @param route
-   */
-  renderMenuItem?: (route: PlusRouteRecordRaw) => RenderTypes
-  /**
-   * 自定义 菜单的 subMenu
-   * @param route
-   */
-  renderSubMenuItem?: (route: PlusRouteRecordRaw) => RenderTypes
-  /**
-   * 自定义 菜单的标题显示
-   * @param route
-   */
-  renderTitle?: (route: PlusRouteRecordRaw) => RenderTypes
-}
-
-defineOptions({
-  name: 'PlusSidebarItem',
-  inheritAttrs: false
-})
-
-const props = withDefaults(defineProps<PlusSidebarItemProps>(), {
-  collapse: false,
-  renderMenuItem: undefined,
-  renderSubMenuItem: undefined,
-  renderTitle: undefined
-})
-
-const onClickMenuItem = useAttrs().onClickMenuItem as (
-  item: PlusRouteRecordRaw,
-  parent: PlusRouteRecordRaw | PlusRouteRecordRaw[]
-) => void
-
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const instance = getCurrentInstance()!
-const router = instance.appContext.config.globalProperties.$router as Router
-
-const resolveMenuItem = (item: PlusRouteRecordRaw) => {
-  // 没有子路由的情况
-  if (!item.children?.length) return true
-
-  const children = item.children.filter(i => i.meta?.hideInMenu !== true)
-  // 判断子路由都是隐藏状态
-  if (!children.length) {
-    return true
-  }
-
-  return false
-}
-
-const replacePath = (path: string) => path.replace('/http', 'http')
-
-const getIndex = (item: PlusRouteRecordRaw) => {
-  return (item.redirect as string) || (item.path as string)
-}
-
-const handleClickItem = (item: PlusRouteRecordRaw) => {
-  if (isFunction(onClickMenuItem)) {
-    onClickMenuItem(item, props.parent)
-    return
-  }
-
-  if (isUrl(replacePath(item.path as string))) {
-    const url = replacePath(item.path as string)
-    window.open(url)
-  } else {
-    router && router.push(getIndex(item))
-  }
-}
-</script>

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

@@ -1,43 +0,0 @@
-import type { Ref, ComputedRef } from 'vue'
-import type { ScrollbarProps } from 'element-plus'
-import type { PlusRouteRecordRaw, Mutable, RenderTypes, RecordType } from '@wlydfe/pro-ui-types'
-
-export interface PlusSidebarSelfProps {
-  routes?: PlusRouteRecordRaw[]
-  collapse?: boolean
-  defaultActive?: string | ComputedRef<string> | Ref<string>
-  /**
-   * 自定义 菜单的  menuItem
-   * @param route
-   */
-  renderMenuItem?: (route: PlusRouteRecordRaw) => RenderTypes
-  /**
-   * 自定义 菜单的 subMenu
-   * @param route
-   */
-  renderSubMenuItem?: (route: PlusRouteRecordRaw) => RenderTypes
-  /**
-   * 自定义 菜单的标题显示
-   * @param route
-   */
-  renderTitle?: (route: PlusRouteRecordRaw) => RenderTypes
-  /**
-   * 可以为菜单增加一个额外内容，在菜单头和菜单之间
-   * @param route
-   */
-  renderMenuExtra?: (route: PlusRouteRecordRaw) => RenderTypes
-  scrollbarProps?: Partial<Mutable<ScrollbarProps>>
-
-  /**
-   * 菜单的宽度
-   * @deprecated 0.1.20
-   */
-  width?: number | string
-}
-
-export type PlusSidebarProps = PlusSidebarSelfProps & RecordType
-
-export interface PlusSidebarEmits {
-  (e: 'update:collapse', collapse: boolean): void
-  (e: 'toggleCollapse', collapse: boolean): void
-}

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

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

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

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

package/packages/components/steps-form/__tests__/steps-form.test.tsx

@@ -1,188 +0,0 @@
-import { nextTick, ref } from 'vue'
-import { mount } from '@vue/test-utils'
-import ElementPlus from 'element-plus'
-import { describe, expect, test } from 'vitest'
-import StepsForm from '../src/index.vue'
-
-describe('steps-form/index.vue', () => {
-  test('render test', async () => {
-    const values = ref<number>(1)
-    const stepForm = ref<any[]>([
-      {
-        title: '第一步',
-        form: {
-          modelValue: {},
-          columns: [
-            {
-              label: '名称',
-              width: 120,
-              prop: 'name',
-              valueType: 'copy',
-              tooltip: '名称最多显示6个字符'
-            },
-            {
-              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'
-                }
-              ]
-            }
-          ],
-          rules: {
-            name: [
-              {
-                required: true,
-                message: '请输入名称'
-              }
-            ]
-          }
-        }
-      },
-      {
-        title: '第二步',
-        form: {
-          labelWidth: '100',
-          modelValue: {},
-          columns: [
-            {
-              label: '标签',
-              width: 120,
-              prop: 'tag'
-            },
-            {
-              label: '执行进度',
-              width: 200,
-              prop: 'progress'
-            },
-            {
-              label: '评分',
-              width: 200,
-              prop: 'rate',
-              valueType: 'rate'
-            },
-            {
-              label: '是否显示',
-              width: 100,
-              prop: 'switch',
-              valueType: 'switch'
-            }
-          ],
-          rules: {
-            tag: [
-              {
-                required: true,
-                message: '请输入标签'
-              }
-            ],
-            progress: [
-              {
-                required: true,
-                message: '请输入执行进度'
-              }
-            ]
-          }
-        }
-      },
-      {
-        title: '第三步',
-        form: {
-          modelValue: {},
-          columns: [
-            {
-              label: '时间',
-              prop: 'time',
-              valueType: 'date-picker'
-            },
-            {
-              label: '要求',
-              prop: 'demand',
-              valueType: 'checkbox',
-              options: [
-                {
-                  label: '四六级',
-                  value: '0'
-                },
-                {
-                  label: '计算机二级证书',
-                  value: '1'
-                },
-                {
-                  label: '普通话证书',
-                  value: '2'
-                }
-              ]
-            },
-            {
-              label: '奖励',
-              prop: 'price'
-            },
-            {
-              label: '提成',
-              prop: 'percentage'
-            },
-            {
-              label: '说明',
-              prop: 'desc',
-              valueType: 'textarea',
-              fieldProps: {
-                maxlength: 10,
-                showWordLimit: true,
-                autosize: { minRows: 2, maxRows: 4 }
-              }
-            }
-          ],
-          rules: {
-            time: [
-              {
-                required: true,
-                trigger: 'change',
-                message: '请选择时间'
-              }
-            ],
-            demand: [
-              {
-                required: true,
-                trigger: 'change',
-                message: '请选择要求'
-              }
-            ]
-          }
-        }
-      }
-    ])
-
-    const wrapper = mount(() => <StepsForm modelValue={values.value} data={stepForm.value} />, {
-      global: {
-        plugins: [ElementPlus]
-      }
-    })
-    await nextTick()
-    expect(wrapper.find('.plus-steps-form').exists()).toBe(true)
-    expect(wrapper.find('.plus-steps-form .el-steps').exists()).toBe(true)
-    expect(wrapper.find('.plus-steps-form .el-steps').exists()).toBe(true)
-    expect(wrapper.find('.plus-steps-form .el-steps .el-step__head').exists()).toBe(true)
-    expect(wrapper.find('.plus-steps-form .plus-form').exists()).toBe(true)
-    expect(wrapper.find('.plus-steps-form .plus-form .plus-form__footer').exists()).toBe(true)
-  })
-})

package/packages/components/steps-form/index.ts

@@ -1,6 +0,0 @@
-import StepsForm from './src/index.vue'
-
-export type { PlusStepsFormProps } from './src/index.vue'
-export * from './src/type'
-
-export const PlusStepsForm = StepsForm

package/packages/components/steps-form/src/index.vue

@@ -1,156 +0,0 @@
-<template>
-  <div
-    :class="['plus-steps-form', $attrs.direction === 'vertical' ? 'plus-steps-from-vertical' : '']"
-  >
-    <el-steps :active="active" finish-status="success" v-bind="$attrs">
-      <el-step v-for="item in data" :key="item.title" v-bind="item">
-        <template v-if="$slots.icon" #icon>
-          <slot name="icon" :icon="item.icon" :title="item.title" :description="item.description" />
-        </template>
-
-        <template v-if="$slots.title" #title>
-          <slot
-            name="title"
-            :icon="item.icon"
-            :title="item.title"
-            :description="item.description"
-          />
-        </template>
-
-        <template v-if="$slots.description" #description>
-          <slot
-            name="description"
-            :icon="item.icon"
-            :title="item.title"
-            :description="item.description"
-          />
-        </template>
-      </el-step>
-    </el-steps>
-
-    <PlusForm
-      v-bind="data[currentIndex].form"
-      :has-reset="active !== 1"
-      :submit-text="
-        active === data.length
-          ? submitText || t('plus.stepsForm.submitText')
-          : nextText || t('plus.stepsForm.nextText')
-      "
-      :reset-text="preText || t('plus.stepsForm.preText')"
-      @submit="next"
-      @reset="pre"
-      @change="handleChange"
-    >
-      <slot v-if="$slots[slotName]" :name="slotName" v-bind="data[currentIndex]" />
-    </PlusForm>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watchEffect, computed } from 'vue'
-import { ElSteps, ElStep } from 'element-plus'
-import type { FieldValues, PlusColumn } from '@wlydfe/pro-ui-types'
-import { useLocale } from '@wlydfe/pro-ui-hooks'
-import { PlusForm } from '@wlydfe/pro-ui-components/form'
-import type { PlusStepFromRow } from './type'
-
-export interface PlusStepsFormProps {
-  /**
-   *
-   * @version 0.1.14  变更为可选
-   */
-  modelValue?: number
-  /**
-   * 数据
-   * @version 0.1.14  变更为可选
-   */
-  data?: PlusStepFromRow[]
-  /**
-   * 提交按钮文字
-   * @version 0.1.14
-   * @default 提交
-   */
-  submitText?: string
-  /**
-   * 下一步按钮文字
-   * @version 0.1.14
-   * @default 下一步
-   */
-  nextText?: string
-  /**
-   * 上一步按钮文字
-   * @version 0.1.14
-   * @default 上一步
-   */
-  preText?: string
-}
-export interface PlusStepsFormEmits {
-  (e: 'pre', modelValue: number): void
-  /**
-   * @version 0.1.23 新增参数  allValues
-   */
-  (e: 'next', modelValue: number, values: FieldValues, allValues: FieldValues): void
-  /**
-   * @version 0.1.23
-   */
-  (e: 'submit', modelValue: number, values: FieldValues, allValues: FieldValues): void
-  (e: 'update:modelValue', active: number): void
-  (e: 'change', values: FieldValues, column: PlusColumn): void
-}
-
-defineOptions({
-  name: 'PlusStepsForm'
-})
-
-const props = withDefaults(defineProps<PlusStepsFormProps>(), {
-  modelValue: 1,
-  data: () => [],
-  submitText: undefined,
-  nextText: undefined,
-  preText: undefined
-})
-
-const emit = defineEmits<PlusStepsFormEmits>()
-const { t } = useLocale()
-const active = ref()
-
-watchEffect(() => {
-  active.value = props.modelValue
-})
-
-const currentIndex = computed(() => active.value - 1)
-
-const slotName = computed(() => `step-${active.value}`)
-
-const allValues = computed(() =>
-  props.data?.reduce((pre, current) => ({ ...pre, ...current.form?.modelValue }), {})
-)
-
-const handleChange = (values: FieldValues, column: PlusColumn) => {
-  emit('change', values, column)
-}
-
-// 上一步
-const pre = () => {
-  if (active.value-- > props.data.length + 1) active.value = 1
-  emit('update:modelValue', active.value)
-  emit('pre', active.value)
-}
-
-// 下一步
-const next = (values: FieldValues) => {
-  // Save current active value for comparison
-  const currentActive = active.value
-
-  // Update active value, ensuring it doesn't exceed max index
-  active.value = Math.min(currentActive + 1, props.data.length)
-
-  emit('update:modelValue', active.value)
-  emit('next', active.value, values, allValues.value)
-
-  // Check if moving from last step to completion
-  if (currentActive === props.data.length && active.value === props.data.length) {
-    emit('submit', active.value, values, allValues.value)
-  }
-}
-</script>

package/packages/components/steps-form/src/type.ts

@@ -1,14 +0,0 @@
-import type { StepProps } from 'element-plus'
-import type { Mutable } from '@wlydfe/pro-ui-types'
-import type { PlusFormProps } from '@wlydfe/pro-ui-components/form'
-
-export interface PlusStepFromRow {
-  title: Mutable<StepProps>['title']
-  /**
-   * @version 0.1.22 变更为可选项
-   */
-  form?: PlusFormProps
-  description?: Mutable<StepProps>['description']
-  icon?: Mutable<StepProps>['icon']
-  status?: Mutable<StepProps>['status']
-}

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

@@ -1,6 +0,0 @@
-import '@external/steps/style/css'
-import '@external/step/style/css'
-
-import '@wlydfe/pro-ui-components/form/style/css'
-
-import '@wlydfe/pro-ui-theme-chalk/plus-steps-form.css'

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

@@ -1,6 +0,0 @@
-import '@external/steps/style/index'
-import '@external/step/style/index'
-
-import '@wlydfe/pro-ui-components/form/style/index'
-
-import '@wlydfe/pro-ui-theme-chalk/src/steps-form.scss'