flame-plus 0.1.33 → 0.1.36

package/src/packages/components/base/flmSlider/flmSlider.vue

@@ -1,35 +0,0 @@
-<script lang="tsx">
-import { defineComponent, PropType, computed, reactive } from 'vue'
-import { SliderConfig, SliderDefaultEvent, sliderDefaultConfig } from 'flame-types'
-import { filterConfig } from '../../../utils'
-
-export default defineComponent({
-  emits: ['change', 'input'],
-  props: {
-    // 默认设置
-    config: {
-      type: Object as PropType<SliderConfig>,
-      default: {}
-    },
-  },
-  setup(props, ctx) {
-    // 滑块设置
-    const sliderConfig = computed((): SliderConfig => {
-      return filterConfig(sliderDefaultConfig, props.config)
-    })
-
-    // 滑块默认事件
-    const sliderDefaultEvent: SliderDefaultEvent = reactive({
-      onChange: (value: SliderConfig['model-value']) => ctx.emit('change', value),
-      onInput: (value: SliderConfig['model-value']) => ctx.emit('input', value),
-    })
-
-    return () => (
-      <el-slider
-        {...sliderConfig.value}
-        {...sliderDefaultEvent}
-      ></el-slider>
-    )
-  },
-})
-</script>

package/src/packages/components/base/flmSwitch/flmSwitch.vue

@@ -1,29 +0,0 @@
-<script lang="tsx">
-import { defineComponent, PropType, computed } from 'vue'
-import { SwitchConfig, switchDefaultConfig } from 'flame-types'
-import { filterConfig } from '../../../utils'
-
-export default defineComponent({
-  emits: ['change'],
-  props: {
-    // 默认设置
-    config: {
-      type: Object as PropType<SwitchConfig>,
-      default: {}
-    },
-  },
-  setup(props, ctx) {
-    // 开关设置
-    const switchConfig = computed((): SwitchConfig => {
-      return filterConfig(switchDefaultConfig, props.config)
-    })
-    
-    return () => (
-      <el-switch
-        {...switchConfig.value}
-        onChange={(value: SwitchConfig['model-value']) => ctx.emit('change', value)}
-      ></el-switch>
-    )
-  },
-})
-</script>

package/src/packages/components/base/flmTimePicker/flmTimePicker.vue

@@ -1,37 +0,0 @@
-<script lang="tsx">
-import { defineComponent, PropType, computed, reactive } from 'vue'
-import { TimePickerConfig, TimePickerDefaultEvent, timePickerDefaultConfig } from 'flame-types'
-import { filterConfig } from '../../../utils'
-
-export default defineComponent({
-  emits: ['change', 'blur', 'focus', 'visible-change' ],
-  props: {
-    // 默认设置
-    config: {
-      type: Object as PropType<TimePickerConfig>,
-      default: {}
-    },
-  },
-  setup(props, ctx) {
-    // 时间选择器设置
-    const timePickerConfig = computed((): TimePickerConfig => {
-      return filterConfig(timePickerDefaultConfig, props.config)
-    })
-
-    //  时间选择器事件
-    const timePickerDefaultEvent: TimePickerDefaultEvent = reactive({
-      'onUpdate:modelValue': (value: TimePickerConfig['model-value']) => ctx.emit('change', value),  // v-model 不用改不了值
-      onBlur: (event: any) => ctx.emit('blur', event),
-      onFocus: (event: any) => ctx.emit('focus', event),
-      onVisibleChange: (event: boolean) => ctx.emit('visible-change', event),
-    })
-
-    return () => (
-      <el-time-picker
-        {...timePickerConfig.value}
-        {...timePickerDefaultEvent}
-      />
-    )
-  },
-})
-</script>

package/src/packages/components/base/flmTimeSelect/flmTimeSelect.vue

@@ -1,36 +0,0 @@
-<script lang="tsx">
-import { defineComponent, PropType, computed, reactive } from 'vue'
-import { TimeSelectConfig, timeSelectDefaultConfig } from 'flame-types'
-import { filterConfig } from '../../../utils'
-
-export default defineComponent({
-  emits: ['change', 'blur', 'focus'],
-  props: {
-    // 默认设置
-    config: {
-      type: Object as PropType<TimeSelectConfig>,
-      default: {}
-    },
-  },
-  setup(props, ctx) {
-    // 时间选择设置
-    const timeSelectConfig = computed((): TimeSelectConfig => {
-      return filterConfig(timeSelectDefaultConfig, props.config)
-    })
-
-    // 时间选择默认事件
-    const timeSelectDefaultEvent: any = reactive({
-      onChange: (value: TimeSelectConfig['model-value']) => ctx.emit('change', value),
-      onBlur: () => ctx.emit('blur'),
-      onFocus: () => ctx.emit('focus'),
-    })
-
-    return () => (
-      <el-timeSelect
-        {...timeSelectConfig.value}
-        {...timeSelectDefaultEvent}
-      />
-    )
-  },
-})
-</script>

package/src/packages/components/base/flmTransfer/flmTransfer.vue

@@ -1,42 +0,0 @@
-<script lang="tsx">
-import { defineComponent, PropType, computed, reactive } from 'vue'
-import { TransferConfig, TransferDefaultEvent, transferDefaultConfig } from 'flame-types'
-import { filterConfig } from '../../../utils'
-
-export default defineComponent({
-  emits: ['change', 'left-check-change', 'right-check-change'],
-  props: {
-    // 默认设置
-    config: {
-      type: Object as PropType<TransferConfig>,
-      default: {}
-    },
-  },
-  setup(props, ctx) {
-    // 穿梭框设置
-    const transferConfig = computed((): TransferConfig => {
-      return filterConfig(transferDefaultConfig, props.config)
-    })
-
-    // 穿梭框默认事件
-    const transferDefaultEvent: TransferDefaultEvent = reactive({
-      onChange: (value: TransferConfig['model-value']) => ctx.emit('change', value),
-      onLeftCheckChange: (value: TransferConfig['model-value']) => ctx.emit('left-check-change', value),
-      onRightCheckChange: (value: TransferConfig['model-value']) => ctx.emit('right-check-change', value),
-    })
-
-    return () => (
-      <el-transfer
-        {...transferConfig.value}
-        {...transferDefaultEvent}
-      >
-        {{
-          'default': ({ option }: any) => ctx.slots['default']?.({ option }),
-          'left-footer': () => ctx.slots['left-footer']?.(),
-          'right-footer': () => ctx.slots['right-footer']?.(),
-        }}
-      </el-transfer>
-    )
-  },
-})
-</script>

package/src/packages/components/complex/flmForm/flmForm.vue

@@ -1,243 +0,0 @@
-<script lang="tsx">
-import {
-  defineComponent,
-  getCurrentInstance,
-  PropType,
-  reactive,
-  computed,
-  watch,
-  h,
-  resolveComponent,
-  onMounted
-} from 'vue'
-import {
-  flmButton,
-  flmCascader,
-  flmCheckbox,
-  flmColorPicker,
-  flmDatePicker,
-  flmInput,
-  flmInputNumber,
-  flmRadio,
-  flmRate,
-  flmRead,
-  flmSelect,
-  flmSlider,
-  flmSwitch,
-  flmTimePicker,
-  flmTimeSelect,
-  flmTransfer,
-} from '../../index'
-import {
-  ControlTypes,
-  ControlConfig,
-  isInputControl,
-  FormModel,
-  FormConfig,
-  FormItemConfig,
-  FormButtonConfig,
-  formDefaultConfig
-} from 'flame-types'
-import { filterConfig, isValidKey } from '../../../utils'
-
-export default defineComponent({
-  components: {
-    flmButton,
-    flmCascader,
-    flmCheckbox,
-    flmColorPicker,
-    flmDatePicker,
-    flmInput,
-    flmInputNumber,
-    flmRadio,
-    flmRate,
-    flmRead,
-    flmSelect,
-    flmSlider,
-    flmSwitch,
-    flmTimePicker,
-    flmTimeSelect,
-    flmTransfer,
-  },
-  emits: ['submit', 'cancel', 'reset', 'customEvent'],
-  props: {
-    // 默认设置
-    config: {
-      type: Object as PropType<FormConfig>,
-      default: {}
-    },
-  },
-  computed: {
-    columnNumber(): number | boolean {
-      const { inline = false, columnNumber = 0 } = this.config
-      return inline && columnNumber > 1
-        ? columnNumber
-        : false
-    }
-  },
-  setup(props, { slots, emit, expose }) {
-    const instance = getCurrentInstance()    // 实例，必须在最外层声明
-    let formModel: FormModel = reactive({})  // 表单数据
-
-    // 监听表单配置的 model，变化后更新组件内部 formModel
-    watch(() => props.config.model, (newModel: FormModel) => updateFormModel(newModel))
-
-    // 监听组件内部 formModel，变化后更新控件 value
-    watch(formModel, (newModel: FormModel) => updateControl(newModel))
-
-    onMounted(() => {
-      if (props.config?.model && Object.keys(props.config?.model).length) {
-        updateControl(props.config.model)
-        updateFormModel(props.config.model)
-      }
-    })
-
-    /**
-     * 更新控件值
-     * @date 2022-05-09
-     * @param {FormModel} model
-     */
-    const updateControl = (model: FormModel) => {
-      props.config.items?.forEach((formItem: FormItemConfig) => {
-        if (!isValidKey('isSlot', formItem) && typeof(formItem.prop) === 'string') {
-          const { controlConfig } = formItem
-          controlConfig && (
-            isInputControl(controlConfig)
-              ? controlConfig['modelValue'] = model[formItem.prop]
-              : controlConfig['model-value'] = model[formItem.prop]
-          )
-        }
-      })
-    }
-
-    /**
-     * 更新表单值
-     * @date 2022-05-09
-     * @param {FormModel} model
-     */
-    const updateFormModel = (model: FormModel) => {
-      Object.entries(model).forEach(([key, value]: Array<any>) => formModel[key] = value)
-    }
-
-    /**
-     * 表单修改
-     * @date 2022-04-14
-     * @param {any} value 修改值
-     * @param {string} prop 修改键名
-     */
-    const formChange = (value: any, prop: string) => formModel[prop] = value
-
-    /**
-     * 表单方法调用
-     * @date 2022-04-14
-     * @param {'submit' | 'cancel' | 'reset' | string} event 方法名（默认方法直接调用；自定义方法回传方法名及表单数据）
-     */
-    const formEvent = (event: FormButtonConfig['event']) => {
-      const defaultEvent: Record<FormButtonConfig['event'], Function> = { submit, cancel, reset }
-      isValidKey(event, defaultEvent)
-        ? defaultEvent[event]()
-        : emit('customEvent', { event, formModel })
-    }
-
-    // 提交
-    const submit = () => {
-      const formRef: any = instance?.refs['formRef']
-      if (!formRef) return
-      formRef.validate((valid: boolean) => {
-        valid && emit('submit', formModel)
-      })
-    }
-
-    // 取消
-    const cancel = () => {
-      emit('cancel', formModel)
-    }
-
-    // 重置
-    const reset = () => {
-      const formRef: any = instance?.refs['formRef']
-      if (!formRef) return
-      formRef.resetFields()
-      emit('reset', formModel)
-    }
-
-    /**
-     * 表单元素
-     * @date 2022-04-14
-     * @param {Array} items 表单项配置
-     * @returns {any} 表单项dom
-     */
-    const formItemsDom = (items: FormConfig['items'] = []) => {
-      const controlDom = (prop: string, controlType: ControlTypes, controlConfig: ControlConfig) => {
-        const config: FormModel = { ...controlConfig }
-        const event = controlType === ControlTypes['flmInput'] ? 'onInput' : 'onChange'
-        config[event] = (value: any) => formChange(value, prop)
-        return h(resolveComponent(controlType), { config })
-      }
-      return items.map((item: FormItemConfig) => {
-        if (typeof(item.prop) === 'string') {
-          if (isValidKey('isSlot', item)) {
-            const { isSlot, ...itemConfig } = item
-            return (
-              <el-form-item class={`form-${item.prop}`} {...itemConfig}>
-                {(slots[item.prop]?.({ prop: item.prop, formModel }))}
-              </el-form-item>
-            )
-          } else {
-            const { controlType, controlConfig, ...itemConfig } = item
-            if (controlType && controlConfig) {
-              return (
-                <el-form-item class={`form-${item.prop}`} {...itemConfig}>
-                  {controlDom(item.prop, controlType, controlConfig)}
-                </el-form-item>
-              )
-            }
-          }
-        }
-      })
-    }
-
-    /**
-     * 表单按钮
-     * @date 2022-04-14
-     * @param {Array} buttons 表单按钮配置
-     * @returns {any} 表单按钮dom
-     */
-    const buttonsDom = (buttons: FormConfig['buttons'] = []) => {
-      if (buttons.length) {
-        return (
-          <el-form-item class="form-buttons">
-            {buttons.map(({ event, ...config }: FormButtonConfig) =>
-              <flm-button config={config} onButtonClick={() => formEvent(event)} />
-            )}
-          </el-form-item>
-        )
-      }
-    }
-
-    expose({ formModel, reset })
-
-    // 表单设置
-    const formConfig = computed((): FormConfig => filterConfig(formDefaultConfig, props.config))
-    const formDom = () => {
-      const { items = [], buttons = [], model, ...defaultConfig } = formConfig.value
-      return (
-        <el-form ref='formRef' {...defaultConfig} model={formModel}>
-          {formItemsDom(items)}
-          {buttonsDom(buttons)}
-        </el-form>
-      )
-    }
-    return () => (formDom())
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-$columnNumber: v-bind(columnNumber);
-:deep(.el-form-item) {
-  @if $columnNumber != false {
-    width: calc((100% - 32px * $columnNumber) / $columnNumber);
-  }
-}
-</style>

package/src/packages/components/complex/flmSearch/flmSearch.vue

@@ -1,145 +0,0 @@
-<template>
-  <div>
-    <flmForm
-      class="search-default"
-      ref="searchDefaultRef"
-      :config="defaultConfig"
-      @submit="searchSubmit"
-      @reset="searchReset"
-      @customEvent="searchCustomEvent"
-    >
-      <template v-for="defaultSlot in defaultSlots" #[defaultSlot]="{ prop, formModel }">
-        <slot :name="defaultSlot" :prop="prop" :formModel="formModel"></slot>
-      </template>
-    </flmForm>
-    <el-drawer
-      v-if="hasExtra"
-      v-model="showExtra"
-      title="搜索"
-      :before-close="closeDrawer"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
-      direction="ltr"
-    >
-      <flmForm
-        ref="searchExtraRef"
-        :config="extraConfig"
-        @submit="drawerSubmit"
-        @cancel="closeDrawer"
-      >
-        <template v-for="extraSlot in extraSlots" #[extraSlot]="{ prop, formModel }">
-          <slot :name="extraSlot" :prop="prop" :formModel="formModel"></slot>
-        </template>
-      </flmForm>
-    </el-drawer>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType, ref, Ref, computed, ComputedRef } from 'vue'
-import { flmForm } from '../../index'
-import { ButtonType, FormItemConfig, SearchConfig } from 'flame-types'
-import { isValidKey } from '../../../utils'
-
-const emit = defineEmits(['searchSubmit', 'searchReset', 'searchCustomEvent'])
-const props = defineProps({
-  config: {
-    type: Object as PropType<SearchConfig>,
-    default() {
-      return {}
-    }
-  }
-})
-
-const searchDefaultRef: Ref<any> = ref()       // 默认搜索栏实例
-const searchExtraRef: Ref<any> = ref()         // 额外搜索栏实例
-
-let showExtra: Ref<boolean> = ref(false)       // 显示额外搜索条件
-let hasExtra: Ref<boolean> = ref(false)        // 有额外搜索条件
-let extraFormModel: Ref<SearchConfig> = ref({})  // 额外搜索条件
-
-const maxFormItem = computed(() => props.config.maxFormItem || 3) // 默认搜索栏最大条件数
-
-// 默认搜索栏设置
-const defaultConfig: ComputedRef<SearchConfig> = computed(() => {
-  const { items = [], buttons, ...config } = props.config
-  hasExtra.value = items.length > maxFormItem.value
-  hasExtra.value && buttons?.unshift({ 'buttonText': '更多', 'event': 'openDrawer' })  // 搜索条件大于最大数量，插入更多按钮
-  return {
-    ...config,
-    inline: true,
-    items: items.slice(0, maxFormItem.value),
-    buttons
-  }
-})
-// 额外搜索栏设置
-const extraConfig: ComputedRef<SearchConfig> = computed(() => {
-  const { items, buttons, ...config } = props.config
-  return {
-    ...config,
-    inline: false,
-    items: items?.slice(maxFormItem.value),
-    // 插入额外搜索栏按钮
-    buttons: [
-      {
-        'buttonText': '取消',
-        'event': 'cancel'
-      },
-      {
-        'type': ButtonType['primary'],
-        'buttonText': '搜索',
-        'event': 'submit'
-      }
-    ]
-  }
-})
-
-// 获取表格插槽
-const getFormSlots = (items: SearchConfig['items'] = []): Array<string> => {
-  let slots: Array<string> = []
-  items.forEach((item: FormItemConfig) => {
-    if (isValidKey('isSlot', item)) {
-      const { prop } = item
-      prop && typeof(prop) === 'string' && slots.push(prop)
-    }
-  })
-  return slots
-}
-// 默认搜索栏插槽
-const defaultSlots = computed((): Array<string> => getFormSlots(props.config.items?.slice(0, maxFormItem.value)) ?? [])
-// 额外搜索栏插槽
-const extraSlots = computed((): Array<string> => getFormSlots(props.config.items?.slice(maxFormItem.value)) ?? [])
-
-// 搜索栏提交
-const searchSubmit = (formModel: SearchConfig['model']) => {
-  emit('searchSubmit', { ...formModel, ...extraFormModel.value })
-}
-
-// 搜索栏取消
-const searchReset = () => {
-  searchExtraRef.value?.reset()
-  const extraFormModel = searchExtraRef.value?.formModel ?? {}
-  emit('searchReset', { ...extraFormModel, ...searchDefaultRef.value.formModel })
-}
-
-// 搜索栏自定义操作
-const searchCustomEvent = ({ event, formModel }: { event: string, formModel: SearchConfig['model']}) => {
-  const customEvent: Record<string, Function> = { openDrawer }
-  if (isValidKey(event, customEvent)) {
-    customEvent[event](formModel)
-  } else {
-    emit('searchCustomEvent', event)
-  }
-}
-
-const openDrawer = () => showExtra.value = true    // 打开额外搜索栏弹窗
-const closeDrawer = () => showExtra.value = false  // 关闭额外搜索栏弹窗
-
-// 额外搜索栏提交
-const drawerSubmit = (formModel: SearchConfig['model']) => {
-  formModel && (extraFormModel.value = formModel)
-  emit('searchSubmit', { ...searchDefaultRef.value.formModel, ...formModel })
-  closeDrawer()
-}
-</script>

package/src/packages/components/complex/flmTable/flmTable.vue

@@ -1,106 +0,0 @@
-<script lang="tsx">
-import { defineComponent, PropType, reactive, computed } from 'vue'
-import {
-  TableConfig,
-  TableColumnConfig,
-  TableDefaultEvent,
-  tableDefaultConfig,
-  tableColumnDefaultConfig
-} from 'flame-types'
-import { filterConfig } from '../../../utils'
-
-export default defineComponent({
-  emits: [
-    'select',
-    'select-all',
-    'selection-change',
-    'cell-mouse-enter',
-    'cell-mouse-leave',
-    'cell-click',
-    'cell-dblclick',
-    'cell-contextmenu',
-    'row-click',
-    'row-contextmenu',
-    'row-dblclick',
-    'header-click',
-    'header-contextmenu',
-    'sort-change',
-    'filter-change',
-    'current-change',
-    'header-dragend',
-    'expand-change',
-  ],
-  props: {
-    // 默认设置
-    config: {
-      type: Object as PropType<TableConfig>,
-      default: {}
-    },
-  },
-  setup(props, { slots, emit }) {
-    // 表格默认事件
-    const tableDefaultEvent: TableDefaultEvent = reactive({
-      onSelect: (selection: any, row: any) => emit('select', { selection, row }),
-      onSelectAll: (selection: any) => emit('select-all', selection),
-      onSelectionChange: (row: any, column: any, cell: any, event: any) => emit('selection-change', { row, column, cell, event }),
-      onCellMouseEnter: (row: any, column: any, cell: any, event: any) => emit('cell-mouse-enter', { row, column, cell, event }),
-      onCellMouseLeave: (row: any, column: any, cell: any, event: any) => emit('cell-mouse-leave', { row, column, cell, event }),
-      onCellClick: (row: any, column: any, cell: any, event: any) => emit('cell-click', { row, column, cell, event }),
-      onCellDblclick: (row: any, column: any, cell: any, event: any) => emit('cell-dblclick', { row, column, cell, event }),
-      onCellContextmenu: (row: any, column: any, cell: any, event: any) => emit('cell-contextmenu', { row, column, cell, event }),
-      onRowClick: (row: any, column: any, event: any) => emit('row-click', { row, column, event }),
-      onRowContextmenu: (row: any, column: any, event: any) => emit('row-contextmenu', { row, column, event }),
-      onRowDblclick: (row: any, column: any, event: any) => emit('row-dblclick', { row, column, event }),
-      onHeaderClick: (column: any, event: any) => emit('header-click', { column, event }),
-      onHeaderContextmenu: (column: any, event: any) => emit('header-contextmenu', { column, event }),
-      onSortChange: ({ column, prop, order }: any) => emit('sort-change', { column, prop, order }),
-      onFilterChange: (filters: any) => emit('filter-change', filters),
-      onCurrentChange: (currentRow: any, oldCurrentRow: any) => emit('current-change', { currentRow, oldCurrentRow }),
-      onHeaderDragend: (newWidth: any, oldWidth: any, column: any, event: any) => emit('header-dragend', { newWidth, oldWidth, column, event }),
-      onExpandChange: (row: any, expanded: any) => emit('expand-change', { row, expanded }),
-    })
-    
-    /**
-     * 表格
-     * @date 2022-09-29
-     * @param {TableConfig} tableConfig 表格配置
-     * @returns {any} 表格dom
-     */
-    const tableDom = (tableConfig: TableConfig) => {
-      const { columns = [], ...defaultConfig } = tableConfig
-      return (
-        <el-table
-          {...defaultConfig}
-          {...tableDefaultEvent}
-        >{tableColumnDom(columns)}</el-table>
-      )
-    }
-
-    /**
-     * 表格元素
-     * @date 2022-04-14
-     * @param {Array} tableColumns 表格列配置
-     * @returns {any} 表格列dom
-     */
-    const tableColumnDom = (childColumns: TableConfig['columns'] = []) => {
-      return childColumns.map(({ isSlot, columns = [], ...childColumnConfig }: TableColumnConfig) => {
-        let childDom: any
-        if (columns.length) {
-          childDom = tableColumnDom(columns)
-        } else if (isSlot) {
-          childDom = { default: ({ $index: index, row, column }: any) => childColumnConfig.prop && slots[childColumnConfig.prop]?.({ index, row, column }) }
-        }
-        return (
-          <el-table-column {...filterConfig(tableColumnDefaultConfig, childColumnConfig)}>
-            {childDom}
-          </el-table-column>
-        )
-      })
-    }
-
-    // 表单设置
-    const tableConfig = computed((): TableConfig => filterConfig(tableDefaultConfig, props.config))
-    return () => (tableDom(tableConfig.value))
-  },
-})
-</script>