@wlydfe/pro-ui 0.2.21 → 0.2.23

package/packages/components/form/index.ts

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

package/packages/components/form/src/collapse-transition.vue

@@ -1,59 +0,0 @@
-<template>
-  <transition-group
-    v-if="collapseTransition"
-    name="plus-collapse-transition"
-    :css="false"
-    v-on="on"
-  >
-    <slot />
-  </transition-group>
-  <template v-else>
-    <slot />
-  </template>
-</template>
-
-<script lang="ts" setup>
-import type { RendererElement } from 'vue'
-
-type Props = {
-  /**
-   * @desc 动画时长
-   * @version v0.1.15
-   */
-  collapseDuration?: number
-  /**
-   * @desc 是否开启折叠动画
-   * @version v0.1.15
-   */
-  collapseTransition?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  collapseDuration: 300,
-  collapseTransition: true
-})
-
-defineOptions({
-  name: 'PlusCollapseTransition'
-})
-
-const on = {
-  beforeEnter(el: RendererElement) {
-    el.style.opacity = 0
-  },
-  enter(el: RendererElement, done: () => void) {
-    requestAnimationFrame(() => {
-      el.style.transition = `opacity ${props.collapseDuration}ms linear`
-      el.style.opacity = 1
-      done()
-    })
-  },
-
-  leave(el: RendererElement, done: () => void) {
-    el.style.opacity = 0
-    setTimeout(() => {
-      done()
-    }, (props.collapseDuration / 3) * 2)
-  }
-}
-</script>

package/packages/components/form/src/form-content.vue

@@ -1,169 +0,0 @@
-<template>
-  <el-row v-bind="rowProps" class="plus-form__row">
-    <PlusCollapseTransition
-      :collapse-duration="collapseDuration"
-      :collapse-transition="collapseTransition"
-    >
-      <el-col v-for="item in columns" :key="item.prop" v-bind="item.colProps || colProps">
-        <!-- el-form-item上一行的内容 -->
-        <div
-          v-if="item.renderPrevious || $slots[getPreviousSlotName(item.prop)]"
-          class="plus-form-item-previous"
-        >
-          <component
-            :is="item.renderPrevious"
-            v-if="isFunction(item.renderPrevious)"
-            v-bind="item"
-          />
-
-          <slot
-            v-else-if="$slots[getPreviousSlotName(item.prop)]"
-            :name="getPreviousSlotName(item.prop)"
-            v-bind="item"
-          />
-        </div>
-
-        <PlusFormItem
-          :model-value="getModelValue(item.prop)"
-          v-bind="item"
-          :clearable="clearable"
-          :has-label="getHasLabel(item.hasLabel)"
-          @change="value => handleChange(value, item)"
-        >
-          <!--表单项label插槽 -->
-          <template
-            v-if="$slots[getLabelSlotName(item.prop)]"
-            #[getLabelSlotName(item.prop)]="data"
-          >
-            <slot :name="getLabelSlotName(item.prop)" v-bind="data" />
-          </template>
-
-          <!--表单项插槽 -->
-          <template
-            v-if="$slots[getFieldSlotName(item.prop)]"
-            #[getFieldSlotName(item.prop)]="data"
-          >
-            <slot :name="getFieldSlotName(item.prop)" v-bind="data" />
-          </template>
-
-          <!--表单tooltip插槽 -->
-          <template v-if="$slots['tooltip-icon']" #tooltip-icon>
-            <slot name="tooltip-icon" />
-          </template>
-        </PlusFormItem>
-
-        <!-- el-form-item 下一行额外的内容 -->
-        <div
-          v-if="item.renderExtra || $slots[getExtraSlotName(item.prop)]"
-          class="plus-form-item-extra"
-        >
-          <component
-            :is="item.renderExtra"
-            v-if="item.renderExtra && isFunction(item.renderExtra)"
-            v-bind="item"
-          />
-
-          <slot
-            v-else-if="$slots[getExtraSlotName(item.prop)]"
-            :name="getExtraSlotName(item.prop)"
-            v-bind="item"
-          />
-        </div>
-      </el-col>
-    </PlusCollapseTransition>
-
-    <!-- 搜索的footer插槽  -->
-    <slot name="search-footer" />
-  </el-row>
-</template>
-
-<script lang="ts" setup>
-import type { Ref, ComputedRef } from 'vue'
-import { ref, watch, unref } from 'vue'
-import type { RowProps, ColProps } from 'element-plus'
-import { ElRow, ElCol } from 'element-plus'
-import { PlusFormItem } from '@wlydfe/pro-ui-components/form-item'
-import type { PlusColumn, FieldValues, FieldValueType, Mutable } from '@wlydfe/pro-ui-types'
-import {
-  getLabelSlotName,
-  getFieldSlotName,
-  getExtraSlotName,
-  getPreviousSlotName,
-  isFunction,
-  getValue,
-  setValue,
-  isBoolean
-} from '@wlydfe/pro-ui-components/utils'
-import PlusCollapseTransition from './collapse-transition.vue'
-
-export interface PlusFormContentProps {
-  modelValue?: FieldValues
-  hasLabel?: boolean
-  columns?: PlusColumn[]
-  rowProps?: Partial<Mutable<RowProps>>
-  colProps?: Partial<Mutable<ColProps>>
-  /**
-   * @desc 动画时长
-   * @version v0.1.15
-   */
-  collapseDuration?: number
-  /**
-   * @desc 是否开启折叠动画
-   * @version v0.1.15
-   */
-  collapseTransition?: boolean
-  /**
-   *  @version v0.1.18
-   */
-  clearable?: boolean
-}
-
-export interface PlusFormContentEmits {
-  (e: 'update:modelValue', values: FieldValues): void
-  (e: 'change', values: FieldValues, column: PlusColumn): void
-}
-
-defineOptions({
-  name: 'PlusFormContent'
-})
-
-const props = withDefaults(defineProps<PlusFormContentProps>(), {
-  modelValue: () => ({}),
-  hasLabel: true,
-  rowProps: () => ({}),
-  colProps: () => ({}),
-  columns: () => [],
-  collapseDuration: undefined,
-  collapseTransition: undefined,
-  clearable: true
-})
-const emit = defineEmits<PlusFormContentEmits>()
-
-const values = ref<FieldValues>({})
-
-const getHasLabel = (hasLabel?: boolean | Ref<boolean> | ComputedRef<boolean>) => {
-  const has = unref(hasLabel) as boolean
-  if (isBoolean(has)) {
-    return has
-  }
-  return props.hasLabel
-}
-
-watch(
-  () => props.modelValue,
-  val => {
-    values.value = val
-  },
-  {
-    immediate: true
-  }
-)
-
-const getModelValue = (prop: string) => getValue(values.value, prop)
-
-const handleChange = (value: FieldValueType, column: PlusColumn) => {
-  setValue(values.value, column.prop, value)
-  emit('update:modelValue', values.value)
-  emit('change', values.value, column)
-}
-</script>

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

@@ -1,244 +0,0 @@
-<template>
-  <el-form
-    ref="formInstance"
-    :rules="rules"
-    :label-width="hasLabel ? labelWidth : 0"
-    class="plus-form"
-    :class="hasLabel ? '' : 'no-has-label'"
-    :label-position="labelPosition"
-    :validate-on-rule-change="false"
-    :label-suffix="hasLabel ? labelSuffix : ''"
-    v-bind="attrs"
-    :model="model"
-    @validate="handleValidate"
-  >
-    <slot>
-      <!-- group form -->
-      <template v-if="subGroup">
-        <el-card
-          v-for="(groupItem, index) in subGroup"
-          :key="unref(groupItem.title)"
-          v-bind="groupItem.cardProps || cardProps"
-          class="plus-form__group__item"
-        >
-          <template #header>
-            <slot
-              name="group-header"
-              :title="unref(groupItem.title)"
-              :columns="groupItem.columns"
-              :icon="groupItem.icon"
-              :index="index"
-            >
-              <div class="plus-form__group__item__icon">
-                <el-icon v-if="groupItem.icon">
-                  <component :is="groupItem.icon" />
-                </el-icon>
-                {{ unref(groupItem.title) }}
-              </div>
-            </slot>
-          </template>
-
-          <slot
-            v-if="$slots[getFormGroupSlotName(groupItem.name)]"
-            :name="getFormGroupSlotName(groupItem.name)"
-            v-bind="groupItem"
-            :index="index"
-          />
-
-          <PlusFormContent
-            v-else
-            v-model="values"
-            :row-props="rowProps"
-            :col-props="colProps"
-            :columns="filterHide(groupItem.columns)"
-            :has-label="hasLabel"
-            :collapse-transition="collapseTransition"
-            :collapse-duration="collapseDuration"
-            :clearable="clearable"
-            @change="handleChange"
-          >
-            <template v-for="(_, key) in $slots" :key="key" #[key]="data">
-              <slot :name="key" v-bind="data" />
-            </template>
-          </PlusFormContent>
-        </el-card>
-      </template>
-
-      <!-- normal form -->
-      <template v-else>
-        <PlusFormContent
-          v-model="values"
-          :row-props="rowProps"
-          :col-props="colProps"
-          :columns="subColumns"
-          :has-label="hasLabel"
-          :collapse-transition="collapseTransition"
-          :collapse-duration="collapseDuration"
-          :clearable="clearable"
-          @change="handleChange"
-        >
-          <template v-for="(_, key) in $slots" :key="key" #[key]="data">
-            <slot :name="key" v-bind="data" />
-          </template>
-        </PlusFormContent>
-      </template>
-    </slot>
-
-    <div v-if="hasFooter" class="plus-form__footer" :style="style">
-      <slot name="footer" v-bind="{ handleReset, handleSubmit }">
-        <el-button v-if="hasReset" @click="handleReset">
-          <!-- reset -->
-          {{ resetText || t('plus.form.resetText') }}
-        </el-button>
-        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
-          <!-- submit -->
-          {{ submitText || t('plus.form.submitText') }}
-        </el-button>
-      </slot>
-    </div>
-  </el-form>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch, computed, unref, useAttrs, withModifiers } from 'vue'
-import type { FormInstance } from 'element-plus'
-import { ElMessage, ElForm, ElCard, ElButton, ElIcon } from 'element-plus'
-import { useLocale } from '@wlydfe/pro-ui-hooks'
-import type { PlusColumn, FieldValues, RecordType } from '@wlydfe/pro-ui-types'
-import {
-  isArray,
-  isPlainObject,
-  isFunction,
-  getFormGroupSlotName
-} from '@wlydfe/pro-ui-components/utils'
-import PlusFormContent from './form-content.vue'
-import type { PlusFormSelfProps, PlusFormEmits } from './type'
-
-defineOptions({
-  name: 'PlusForm',
-  inheritAttrs: false
-})
-
-const props = withDefaults(defineProps<PlusFormSelfProps>(), {
-  modelValue: () => ({}),
-  defaultValues: () => ({}),
-  labelWidth: '110px',
-  labelPosition: 'right',
-  rowProps: () => ({}),
-  colProps: () => ({}),
-  labelSuffix: '',
-  hasErrorTip: true,
-  hasFooter: true,
-  hasReset: true,
-  hasLabel: true,
-  submitLoading: false,
-  submitText: '',
-  resetText: '',
-  footerAlign: 'left',
-  rules: () => ({}),
-  columns: () => [],
-  group: false,
-  cardProps: () => ({}),
-  prevent: false,
-  collapseDuration: undefined,
-  collapseTransition: undefined,
-  clearable: true
-})
-const emit = defineEmits<PlusFormEmits>()
-
-const { t } = useLocale()
-const formInstance = ref<FormInstance | null>(null)
-const values = ref<FieldValues>({})
-
-const filterHide = (columns?: PlusColumn[]) => {
-  return columns?.filter(item => unref(item.hideInForm) !== true) || []
-}
-const model = computed(() => values.value)
-const style = computed(() => ({
-  justifyContent:
-    props.footerAlign === 'left'
-      ? 'flex-start'
-      : props.footerAlign === 'center'
-      ? 'center'
-      : 'flex-end'
-}))
-const subColumns = computed(() => filterHide(props.columns))
-const subGroup = computed(() =>
-  isArray(props.group) ? props.group?.filter(item => unref(item.hideInGroup) !== true) : props.group
-)
-
-const originAttrs = useAttrs()
-const attrs = computed(() => ({
-  ...originAttrs,
-  ...(props.prevent
-    ? {
-        onSubmit: withModifiers(
-          (...arg: any[]) => {
-            if (originAttrs?.onSubmit && isFunction(originAttrs?.onSubmit)) {
-              // eslint-disable-next-line @typescript-eslint/no-extra-semi
-              ;(originAttrs.onSubmit as any)(...arg)
-            }
-          },
-          ['prevent']
-        )
-      }
-    : {})
-}))
-
-watch(
-  () => props.modelValue,
-  val => {
-    values.value = val
-  },
-  {
-    immediate: true
-  }
-)
-
-const handleChange = (_: FieldValues, column: PlusColumn) => {
-  emit('update:modelValue', values.value)
-  emit('change', values.value, column)
-}
-
-// 清空校验
-const clearValidate = (): void => {
-  formInstance.value?.clearValidate()
-}
-
-const handleSubmit = async () => {
-  try {
-    const valid = await formInstance.value?.validate()
-    if (valid) {
-      emit('submit', values.value)
-      return true
-    }
-  } catch (errors: unknown) {
-    if (props.hasErrorTip) {
-      ElMessage.closeAll()
-      const values: RecordType[] | false =
-        isPlainObject(errors) && Object.values(errors as RecordType)
-      const message = values ? values[0]?.[0]?.message : undefined
-      ElMessage.warning(message || t('plus.form.errorTip'))
-    }
-    emit('submitError', errors)
-  }
-  return false
-}
-
-const handleReset = (): void => {
-  clearValidate()
-  values.value = { ...props.defaultValues }
-  emit('update:modelValue', values.value)
-  emit('reset', values.value)
-}
-
-const handleValidate = (...args: any[]): void => {
-  emit('validate', ...args)
-}
-
-defineExpose({
-  formInstance,
-  handleSubmit,
-  handleReset
-})
-</script>

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

@@ -1,155 +0,0 @@
-import type { Component, ComputedRef } from 'vue'
-import type { FormRules, RowProps, ColProps, CardProps, ComponentSize } from 'element-plus'
-import type { PlusColumn, FieldValues, Mutable, RecordType } from '@wlydfe/pro-ui-types'
-
-/**
- * fork https://github.com/element-plus/element-plus/blob/dev/packages/components/form/src/form.ts#L14-L110
- */
-export type ElementPlusFormProps = {
-  /**
-   * @description Control the size of components in this form.
-   */
-  size: ComponentSize
-  /**
-   * @description Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component.
-   */
-  disabled: boolean
-  /**
-   * @description Data of form component.
-   */
-  model?: RecordType
-  /**
-   * @description Validation rules of form.
-   */
-  rules: FormRules
-  /**
-   * @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.
-   */
-  labelPosition: 'left' | 'right' | 'top'
-  /**
-   * @description Position of asterisk.
-   */
-  requireAsteriskPosition: 'left' | 'right'
-  /**
-   * @description Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported.
-   */
-  labelWidth: string | number
-  /**
-   * @description Suffix of the label.
-   */
-  labelSuffix: string
-  /**
-   * @description Whether the form is inline.
-   */
-  inline: boolean
-  /**
-   * @description Whether to display the error message inline with the form item.
-   */
-  inlineMessage: boolean
-  /**
-   * @description Whether to display an icon indicating the validation result.
-   */
-  statusIcon: boolean
-  /**
-   * @description Whether to show the error message.
-   */
-  showMessage: boolean
-  /**
-   * @description Whether to trigger validation when the `rules` prop is changed.
-   */
-  validateOnRuleChange: boolean
-  /**
-   * @description Whether to hide required fields should have a red asterisk (star) beside their labels.
-   */
-  hideRequiredAsterisk: boolean
-  /**
-   * @description When validation fails, scroll to the first error form entry.
-   */
-  scrollToError: boolean
-  /**
-   * @description When validation fails, it scrolls to the first error item based on the scrollIntoView option.
-   * @version 2.3.2
-   */
-  scrollIntoViewOptions: RecordType | boolean
-}
-
-/**
- * 分组表单配置项
- */
-export interface PlusFormGroupRow {
-  /**
-   * @version v0.1.17  新增 ComputedRef<string> 类型
-   */
-  title: string | ComputedRef<string>
-  /**
-   * @version v0.1.25 新增，用于自动生成分步内容插槽
-   */
-  name?: string
-  icon?: Component
-  /**
-   * @desc 分组表单el-card的props，优先级高于整体的cardProps
-   * @version v0.1.1
-   */
-  cardProps?: Partial<Mutable<CardProps>>
-  hideInGroup?: boolean | ComputedRef<boolean>
-  /**
-   * @version  v0.1.25 调整为可选
-   */
-  columns?: PlusColumn[]
-}
-
-export type PlusFormSelfProps = {
-  modelValue?: FieldValues
-  defaultValues?: FieldValues
-  columns?: PlusColumn[]
-  labelWidth?: ElementPlusFormProps['labelWidth']
-  labelPosition?: ElementPlusFormProps['labelPosition']
-  rowProps?: Partial<Mutable<RowProps>>
-  colProps?: Partial<Mutable<ColProps>>
-  labelSuffix?: ElementPlusFormProps['labelSuffix']
-  hasErrorTip?: boolean
-  hasFooter?: boolean
-  hasReset?: boolean
-  hasLabel?: boolean
-  submitText?: string
-  resetText?: string
-  submitLoading?: boolean
-  footerAlign?: 'left' | 'right' | 'center'
-  rules?: ElementPlusFormProps['rules']
-  group?: false | PlusFormGroupRow[]
-  cardProps?: Partial<Mutable<CardProps>>
-  /**
-   * @desc 阻止el-form的默认提交表单行为
-   * @version v0.1.12
-   */
-  prevent?: boolean
-  /**
-   * @desc 动画时长
-   * @version v0.1.15
-   */
-  collapseDuration?: number
-  /**
-   * @desc 是否开启折叠动画
-   * @version v0.1.15
-   */
-  collapseTransition?: boolean
-  /**
-   *  @version v0.1.18
-   */
-  clearable?: boolean
-}
-
-export type PlusFormProps = PlusFormSelfProps & Partial<ElementPlusFormProps> & RecordType
-
-export interface PlusFormState {
-  values: FieldValues
-  subColumns: PlusColumn[]
-}
-export interface PlusFormEmits {
-  (e: 'update:modelValue', values: FieldValues): void
-  (e: 'submit', values: FieldValues): void
-  (e: 'change', values: FieldValues, column: PlusColumn): void
-  (e: 'reset', values: FieldValues): void
-  (e: 'submitError', errors: unknown): void
-  (e: 'validate', ...args: any[]): boolean
-}

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

@@ -1,9 +0,0 @@
-import '@external/form/style/css'
-import '@external/button/style/css'
-import '@external/card/style/css'
-import '@external/row/style/css'
-import '@external/col/style/css'
-
-import '@wlydfe/pro-ui-components/form-item/style/css'
-
-import '@wlydfe/pro-ui-theme-chalk/plus-form.css'

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

@@ -1,9 +0,0 @@
-import '@external/form/style/index'
-import '@external/button/style/index'
-import '@external/card/style/index'
-import '@external/row/style/index'
-import '@external/col/style/index'
-
-import '@wlydfe/pro-ui-components/form-item/style/index'
-
-import '@wlydfe/pro-ui-theme-chalk/src/form.scss'