flame-plus 0.1.7 → 0.1.10

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "flame-plus",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "private": false,
   "description": "基于 element-plus 的组件库",
-  "main": "lib/flame-plus.umd.min.js",
+  "main": "packages/index.ts",
   "types": [
-    "lib/packages/index.d.ts"
+    "lib/flame-plus.umd.min.d.ts"
   ],
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "rm -rf dist/ && tsc",
+    "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "lib": "vue-cli-service build --target lib --name flame-plus --dest lib packages/index.ts"
   },

package/packages/components/base/flmButton/flmButton.vue

@@ -0,0 +1,29 @@
+<script lang="tsx">
+import { defineComponent, PropType, computed } from 'vue'
+import { ButtonConfig, buttonDefaultConfig } from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['buttonClick'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<ButtonConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 按钮设置
+    const buttonConfig = computed((): ButtonConfig => {
+      return filterConfig(buttonDefaultConfig, props.config)
+    })
+    
+    return () => (
+      <el-button
+        {...buttonConfig.value}
+        onClick={() => ctx.emit('buttonClick')}
+      >{buttonConfig.value.text || '点击'}</el-button>
+    )
+  },
+})
+</script>

package/packages/components/base/flmCascader/flmCascader.vue

@@ -0,0 +1,39 @@
+<script lang="tsx">
+import { defineComponent, PropType, computed, reactive } from 'vue'
+import { CascaderConfig, CascaderDefaultEvent, cascaderDefaultConfig } from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['change', 'expand-change', 'blur', 'focus', 'visible-change', 'remove-tag'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<CascaderConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 级联选择器设置
+    const cascaderConfig = computed((): CascaderConfig => {
+      return filterConfig(cascaderDefaultConfig, props.config)
+    })
+
+    // 级联选择器事件
+    const cascaderDefaultEvent: CascaderDefaultEvent = reactive({
+      onChange: (value: CascaderConfig['model-value']) => ctx.emit('change', value),
+      onExpandChange: (event: any) => ctx.emit('expand-change', event),
+      onBlur: (event: any) => ctx.emit('blur', event),
+      onFocus: (event: any) => ctx.emit('focus', event),
+      onVisibleChange: (event: boolean) => ctx.emit('visible-change', event),
+      onRemoveTag: (event: any) => ctx.emit('remove-tag', event)
+    })
+
+    return () => (
+      <el-cascader
+        {...cascaderConfig.value}
+        {...cascaderDefaultEvent}
+      />
+    )
+  },
+})
+</script>

package/packages/components/base/flmCheckbox/flmCheckbox.vue

@@ -0,0 +1,34 @@
+<script lang="tsx">
+import { defineComponent, PropType, reactive, computed } from 'vue'
+import { CheckboxConfig, CheckboxDefaultEvent, checkboxDefaultConfig } from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['change'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<CheckboxConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 多选框设置
+    const checkboxConfig = computed((): CheckboxConfig => {
+      return filterConfig(checkboxDefaultConfig, props.config)
+    })
+
+    // 多选框事件
+    const checkboxDefaultEvent: CheckboxDefaultEvent = reactive({
+      onChange: (value: CheckboxConfig['model-value']) => ctx.emit('change', value)
+    })
+
+    return () => (
+      <el-checkbox
+        {...checkboxConfig.value}
+        {...checkboxDefaultEvent}
+      ></el-checkbox>
+    )
+  },
+})
+</script>

package/packages/components/base/flmCheckbox/flmCheckboxGroup.vue

@@ -0,0 +1,71 @@
+<script lang="tsx">
+import { defineComponent, PropType, ref, Ref, computed } from 'vue'
+import { flmCheckbox } from '@/components'
+import {
+  CheckboxConfig,
+  CheckboxGroupConfig,
+  checkboxGroupDefaultConfig
+} from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  components: { flmCheckbox },
+  emits: ['change'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<CheckboxGroupConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 多选框组设置
+    const checkboxGroupConfig = computed((): CheckboxGroupConfig => {
+      return filterConfig(checkboxGroupDefaultConfig, props.config)
+    })
+
+    const isCheckAll: Ref<boolean> = ref(false)       // 全选
+    const isIndeterminate: Ref<boolean> = ref(false)  // 半选
+    // 全选值变化
+    const checkAllChange = (value: boolean) => {
+      isCheckAll.value = value
+      isIndeterminate.value = false
+      ctx.emit('change', value
+        ? checkboxGroupConfig.value.items?.map(({ label }) => label)
+        : []
+      )
+    }
+    // 多选框组值变化
+    const checkboxGroupChange = (value: CheckboxGroupConfig['model-value']) => {
+      const checkedCount = value?.length ?? 0,
+        itemsCount = checkboxGroupConfig.value.items?.length ?? 0
+      isCheckAll.value = checkedCount === itemsCount
+      isIndeterminate.value = checkedCount > 0 && checkedCount < itemsCount
+      ctx.emit('change', value)
+    }
+    // 多选框组元素
+    const checkboxGroupDom = ({ hasCheckAll, checkAllConfig, ...defaultConfig }: CheckboxGroupConfig) => {
+      return (
+        <div>
+          {
+            hasCheckAll && <flmCheckbox
+              config={{
+                'label': '全选',
+                ...checkAllConfig,
+                'model-value': isCheckAll.value,
+                'indeterminate': isIndeterminate.value
+              }}
+              onChange={checkAllChange}
+            />
+          }
+          <el-checkbox-group {...defaultConfig} onChange={checkboxGroupChange}>
+            {defaultConfig.items?.map((item: CheckboxConfig) => <flmCheckbox config={item} />)}
+          </el-checkbox-group>
+        </div>
+      )
+    }
+
+    return () => (checkboxGroupDom(checkboxGroupConfig.value))
+  },
+})
+</script>

package/packages/components/base/flmColorPicker/flmColorPicker.vue

@@ -0,0 +1,34 @@
+<script lang="tsx">
+import { defineComponent, PropType, reactive, computed } from 'vue'
+import { ColorPickerConfig, ColorPickerDefaultEvent, colorPickerDefaultConfig } from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['change'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<ColorPickerConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 颜色选择器设置
+    const colorPickerConfig = computed((): ColorPickerConfig => {
+      return filterConfig(colorPickerDefaultConfig, props.config)
+    })
+
+    // 颜色选择器事件
+    const colorPickerDefaultEvent: ColorPickerDefaultEvent = reactive({
+      onChange: (value: ColorPickerConfig['model-value']) => ctx.emit('change', value)
+    })
+    
+    return () => (
+      <el-colorPicker
+        {...colorPickerConfig.value}
+        {...colorPickerDefaultEvent}
+      />
+    )
+  },
+})
+</script>

package/packages/components/base/flmDatePicker/flmDatePicker.vue

@@ -0,0 +1,47 @@
+<script lang="tsx">
+import { defineComponent, PropType, computed, reactive } from 'vue'
+import { DatePickerConfig, DatePickerDefaultEvent, datePickerDefaultConfig } from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: [
+    'change',
+    'blur',
+    'focus',
+    'calendar-change',
+    'panel-change',
+    'visible-change',
+  ],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<DatePickerConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 日期选择器设置
+    const datePickerConfig = computed((): DatePickerConfig => {
+      return filterConfig(datePickerDefaultConfig, props.config)
+    })
+
+    // 日期选择器事件
+    const datePickerDefaultEvent: DatePickerDefaultEvent = reactive({
+      'onUpdate:modelValue': (value: DatePickerConfig['model-value']) => ctx.emit('change', value),  // v-model 不用改不了值
+      // onChange: (value: DatePickerConfig['model-value']) => {},
+      onBlur: (event: any) => ctx.emit('blur', event),
+      onFocus: (event: any) => ctx.emit('focus', event),
+      onCalendarChange: (event: Array<Date>) => ctx.emit('calendar-change', event),
+      onPanelChange: (date: any, mode: any, view: any) => ctx.emit('panel-change', { date, mode, view }),
+      onVisibleChange: (event: boolean) => ctx.emit('visible-change', event),
+    })
+
+    return () => (
+      <el-date-picker
+        {...datePickerConfig.value}
+        {...datePickerDefaultEvent}
+      />
+    )
+  },
+})
+</script>

package/packages/components/base/flmDialog/flmDialog.vue

@@ -0,0 +1,39 @@
+<script lang="tsx">
+import { defineComponent, PropType, reactive, computed } from 'vue'
+import { DialogConfig, DialogDefaultEvent, dialogDefaultConfig } from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['open', 'opened', 'close', 'closed', 'open-auto-focus', 'close-auto-focus'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<DialogConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 弹窗设置
+    const dialogConfig = computed((): DialogConfig => {
+      return filterConfig(dialogDefaultConfig, props.config)
+    })
+
+    // 弹窗事件
+    const dialogDefaultEvent: DialogDefaultEvent = reactive({
+      onOpen: () => ctx.emit('open'),
+      onOpened: () => ctx.emit('opened'),
+      onClose: () => ctx.emit('close'),
+      onClosed: () => ctx.emit('closed'),
+      onOpenAutoFocus: () => ctx.emit('open-auto-focus'),
+      onCloseAutoFocus: () => ctx.emit('close-auto-focus'),
+    })
+    
+    return () => (
+      <el-dialog
+        {...dialogConfig.value}
+        {...dialogDefaultEvent}
+      >{{ default: () => ctx.slots['default']?.() }}</el-dialog>
+    )
+  },
+})
+</script>

package/packages/components/base/flmInput/flmInput.vue

@@ -0,0 +1,38 @@
+<script lang="tsx">
+import { defineComponent, PropType, reactive, computed } from 'vue'
+import { InputConfig, InputDefaultEvent, inputDefaultConfig } from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['blur', 'focus', 'change', 'input', 'clear'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<InputConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 输入框设置
+    const inputConfig = computed((): InputConfig => {
+      return filterConfig(inputDefaultConfig, props.config)
+    })
+
+    // 输入框事件
+    const inputDefaultEvent: InputDefaultEvent = reactive({
+      onBlur: () => ctx.emit('blur'),
+      onFocus: () => ctx.emit('focus'),
+      onChange: (value: InputConfig['modelValue']) => ctx.emit('change', value),
+      onInput: (value: InputConfig['modelValue']) => ctx.emit('input', value),
+      onClear: () => ctx.emit('clear'),
+    })
+
+    return () => (
+      <el-input
+        {...inputConfig.value}
+        {...inputDefaultEvent}
+      ></el-input>
+    )
+  },
+})
+</script>

package/packages/components/base/flmInputNumber/flmInputNumber.vue

@@ -0,0 +1,36 @@
+<script lang="tsx">
+import { defineComponent, PropType, computed, reactive } from 'vue'
+import { InputNumberConfig, InputNumberDefaultEvent, inputNumberDefaultConfig } from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['change', 'blur', 'focus'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<InputNumberConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 数字输入框设置
+    const inputNumberConfig = computed((): InputNumberConfig => {
+      return filterConfig(inputNumberDefaultConfig, props.config)
+    })
+
+    // 数字输入框默认事件
+    const inputNumberDefaultEvent: InputNumberDefaultEvent = reactive({
+      onChange: (value: InputNumberConfig['model-value']) => ctx.emit('change', value),
+      onBlur: () => ctx.emit('blur'),
+      onFocus: () => ctx.emit('focus'),
+    })
+
+    return () => (
+      <el-input-number
+        {...inputNumberConfig.value}
+        {...inputNumberDefaultEvent}
+      ></el-input-number>
+    )
+  },
+})
+</script>

package/packages/components/base/flmPagination/flmPagination.vue

@@ -0,0 +1,37 @@
+<script lang="tsx">
+import { defineComponent, PropType, reactive, computed } from 'vue'
+import { PaginationConfig, PaginationDefaultEvent, paginationDefaultConfig } from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['size-change', 'current-change', 'prev-click', 'next-click'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<PaginationConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 按钮设置
+    const paginationConfig = computed((): PaginationConfig => {
+      return filterConfig(paginationDefaultConfig, props.config)
+    })
+
+    // 数字输入框默认事件
+    const paginationDefaultEvent: PaginationDefaultEvent = reactive({
+      onSizeChange: (pageSize: number) => ctx.emit('size-change', pageSize),
+      onCurrentChange: (current: number) => ctx.emit('current-change', current),
+      onPrevClick: (current: number) => ctx.emit('prev-click', current),
+      onNextClick: (current: number) => ctx.emit('next-click', current)
+    })
+    
+    return () => (
+      <el-pagination
+        {...paginationConfig.value}
+        {...paginationDefaultEvent}
+      />
+    )
+  },
+})
+</script>

package/packages/components/base/flmRadio/flmRadio.vue

@@ -0,0 +1,64 @@
+<script lang="tsx">
+import { defineComponent, h, PropType, computed, reactive } from 'vue'
+import {
+  RadioConfig,
+  RadioGroupConfig,
+  RadioGroupDefaultEvent,
+  radioDefaultConfig,
+  radioGroupDefaultConfig
+} from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['change'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<RadioGroupConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 单选框组设置
+    const radioGroupConfig = computed((): RadioGroupConfig => {
+      return filterConfig(radioGroupDefaultConfig, props.config)
+    })
+
+    // 计算属性传入参需要优化
+    // 单选框设置
+    // const radioConfig = computed((): (config: RadioConfig) => RadioConfig => (config: RadioConfig) => {
+    //     return filterConfig(radioDefaultConfig, config)
+    //   }
+    // )
+
+    // 单选框默认事件
+    const radioDefaultEvent: RadioGroupDefaultEvent = reactive({
+      onChange: (value: RadioGroupConfig['model-value']) => ctx.emit('change', value)
+    })
+
+    const radioGroupDom = () => {
+      const { useButton = false, radios = [], ...radioGroup } = radioGroupConfig.value
+      const radioDom = (radios: RadioGroupConfig['radios']) => {
+        return radios?.map((radio: RadioConfig) => {
+          // 动态组件名方式需要优化
+          return (useButton
+            ? <el-radio-button {...filterConfig(radioDefaultConfig, radio)} />
+            : <el-radio {...filterConfig(radioDefaultConfig, radio)} />
+          )
+          
+        })
+      }
+      return (
+        <el-radio-group
+          {...radioGroup}
+          {...radioDefaultEvent}
+        >
+          {radioDom(radios)}
+        </el-radio-group>
+      )
+    }
+
+    return () => (radioGroupDom())
+  },
+})
+</script>

package/packages/components/base/flmRate/flmRate.vue

@@ -0,0 +1,34 @@
+<script lang="tsx">
+import { defineComponent, PropType, computed, reactive } from 'vue'
+import { RateConfig, RateDefaultEvent, rateDefaultConfig } from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['change'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<RateConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 评分设置
+    const rateConfig = computed((): RateConfig => {
+      return filterConfig(rateDefaultConfig, props.config)
+    })
+
+    // 评分默认事件
+    const rateDefaultEvent: RateDefaultEvent = reactive({
+      onChange: (value: RateConfig['model-value']) => ctx.emit('change', value),
+    })
+
+    return () => (
+      <el-rate
+        {...rateConfig.value}
+        {...rateDefaultEvent}
+      ></el-rate>
+    )
+  },
+})
+</script>

package/packages/components/base/flmRead/flmRead.vue

@@ -0,0 +1,18 @@
+<template>
+  <div :class="config.class" :style="config.style">
+    {{ config['model-value'] }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, PropType } from 'vue'
+import { ReadConfig } from '@/model/flmComponentConfig'
+
+const props = defineProps({
+  // 默认设置
+  config: {
+    type: Object as PropType<ReadConfig>,
+    default: {}
+  },
+})
+</script>

package/packages/components/base/flmSelect/flmSelect.vue

@@ -0,0 +1,74 @@
+<script lang="tsx">
+import { defineComponent, PropType, reactive, computed } from 'vue'
+import {
+  SelectConfig,
+  SelectDefaultEvent,
+  OptionGroupConfig,
+  OptionConfig,
+  selectDefaultConfig
+} from '@/model/flmComponentConfig'
+import { filterConfig } from '@/utils'
+
+export default defineComponent({
+  emits: ['change', 'visible-change', 'remove-tag', 'clear', 'blur', 'focus'],
+  props: {
+    // 默认设置
+    config: {
+      type: Object as PropType<SelectConfig>,
+      default: {}
+    },
+  },
+  setup(props, ctx) {
+    // 选择器设置
+    const selectConfig = computed((): SelectConfig => {
+      return filterConfig(selectDefaultConfig, props.config)
+    })
+
+    // 选择器默认事件
+    const selectDefaultEvent: SelectDefaultEvent = reactive({
+      onChange: (value: SelectConfig['model-value']) => ctx.emit('change', value),
+      onVisibleChange: (showOption: boolean) => ctx.emit('visible-change', showOption),
+      onRemoveTag: (tagValue: SelectConfig['model-value']) => ctx.emit('remove-tag', tagValue),
+      onClear: () => ctx.emit('clear'),
+      onBlur: () => ctx.emit('blur'),
+      onFocus: () => ctx.emit('focus'),
+    })
+
+    /**
+     * 选择器的子元素
+     * @date 2022-04-12
+     * @param {object} props
+     * @param {boolean} props.hasGroup 是否为分组选项
+     * @param {array} props.group 分组选项
+     * @param {array} props.options 普通选项
+     * @returns {tsx} 选择器子元素tsx
+     */
+    const childrenDom = ({ hasGroup, groups = [], options = [] }: SelectConfig) => {
+      const groupsDom = (groups: Array<OptionGroupConfig>) => {
+        return groups.map(({ options, ...group }: OptionGroupConfig) => {
+          return (
+            <el-option-group key={group.label} {...group}>
+              {options && optionsDom(options)}
+            </el-option-group>
+          )
+        })
+      }
+      const optionsDom = (options: Array<OptionConfig>) => {
+        return options.map((option: OptionConfig) => (
+          <el-option key={option.value} {...option} />
+        ))
+      }
+      return hasGroup ? groupsDom(groups) : optionsDom(options)
+    }
+
+    return () => (
+      <el-select
+        {...selectConfig.value}
+        {...selectDefaultEvent}
+      >
+        {childrenDom(selectConfig.value)}
+      </el-select>
+    )
+  },
+})
+</script>

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

@@ -0,0 +1,35 @@
+<script lang="tsx">
+import { defineComponent, PropType, computed, reactive } from 'vue'
+import { SliderConfig, SliderDefaultEvent, sliderDefaultConfig } from '@/model/flmComponentConfig'
+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>