flame-plus 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flame-plus",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "private": false,
   "description": "基于 element-plus 的组件库",
   "main": "packages/index.ts",

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

@@ -1,226 +1,308 @@
-<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 '../../../model/flmComponentConfig'
-import { filterConfig, isValidKey } from '../../../utils'
+<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 '../../../model/flmComponentConfig'
+  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>
 
-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: {}
-    },
-  },
-  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/packages/components/complex/flmSearch/flmSearch.vue

@@ -39,7 +39,7 @@
 <script lang="ts" setup>
 import { PropType, ref, Ref, computed, ComputedRef } from 'vue'
 import { flmForm } from '../../index'
-import { SearchConfig, FormItemConfig ,ButtonType} from '../../../model/flmComponentConfig'
+import { SearchConfig, FormItemConfig } from '../../../model/flmComponentConfig'
 import { isValidKey } from '../../../utils'
 
 const emit = defineEmits(['searchSubmit', 'searchReset', 'searchCustomEvent'])

package/packages/components/page/flmReportPage/flmReportPage.vue

@@ -10,7 +10,7 @@
           <slot :name="`search-${searchSlot}`" :prop="prop" :formModel="formModel"></slot>
         </template>
       </flmSearch>
-      <flmToolbar v-if="isDialog==false" class="page-toolbar" :config="reportPageConfig.toolbar" @toolbarClick="toolbarClick" />
+      <flmToolbar class="page-toolbar" :config="reportPageConfig.toolbar" @toolbarClick="toolbarClick" />
       <flmTable
         class="page-table"
         :config="reportPageConfig.table"
@@ -31,7 +31,9 @@
       />
     </template>
     <flmDialog :config="reportPageConfig.readDialog" @close="pageDefaultEvent.closeReadDialog">
-      <flmForm :config="reportPageConfig.readForm" @cancel="pageDefaultEvent.closeReadDialog">
+      <flmForm 
+      class="form-read" 
+      :config="reportPageConfig.readForm" @cancel="pageDefaultEvent.closeReadDialog">
         <template v-for="readFormSlot in readFormSlots" #[readFormSlot]="{ prop, formModel }">
           <slot :name="`read-${readFormSlot}`" :prop="prop" :formModel="formModel"></slot>
         </template>
@@ -39,6 +41,7 @@
     </flmDialog>
     <flmDialog :config="reportPageConfig.addDialog" @close="pageDefaultEvent.closeAddDialog">
       <flmForm
+       class="form-add"
         :config="reportPageConfig.addForm"
         @submit="pageDefaultEvent.pageAdd"
         @cancel="pageDefaultEvent.closeAddDialog"
@@ -50,6 +53,7 @@
     </flmDialog>
     <flmDialog :config="reportPageConfig.editDialog" @close="pageDefaultEvent.closeEditDialog">
       <flmForm
+       class="form-edit"
         :config="reportPageConfig.editForm"
         @submit="pageDefaultEvent.pageEdit"
         @cancel="pageDefaultEvent.closeEditDialog"
@@ -63,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, Ref, computed, onMounted,toRaw } from 'vue'
+import { ref, Ref, computed, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   flmForm,
@@ -72,26 +76,21 @@ import {
   flmTable,
   flmPagination,
   flmDialog
-} from '../../index'
+} from '@/components'
 import {
   FormItemConfig,
   FormConfig,
   TableColumnConfig,
   ReportPageSetting,
-} from '../../../model/flmComponentConfig'
-import { isValidKey } from '../../../utils'
+} from '@/model/flmComponentConfig'
+import { isValidKey } from '@/utils'
 import request from '@/plugins/request'
-import { is } from '@babel/types'
 
 const props = defineProps({
   // 表名
   tableName: {
     type: String,
     required: true
-  },
-  isDialog:{
-    type:Boolean,
-    default:false,
   }
 })
 
@@ -157,21 +156,14 @@ const queryPageSetting = () => {
       const reportPageSetting: ReportPageSetting = items
       reportPageSetting.table['height'] = tableHeight()
       reportPageSetting.table['max-height'] = tableHeight()
-      if(props.isDialog==false) {
-        reportPageSetting.tableAction.buttons.length && reportPageSetting.table.columns?.push({
+      reportPageSetting.tableAction.buttons.length && reportPageSetting.table.columns?.push({
         prop: 'tableAction',
         label: '操作',
         isSlot: true,
-        align: 'center',
-        'header-align':'center',
         fixed: 'right',
-        'min-width': '200px',
-        'width': '200px'
+        'min-width': '200px'
       })
-      }
-      
       reportPageConfig.value = reportPageSetting
-      isLoaded.value =true;
       queryPageData()
     })
 }
@@ -195,6 +187,7 @@ const queryPageData = () => {
     .then(({ items, total }: any) => {
       reportPageConfig.value.table.data = items
       reportPageConfig.value.pagination['total'] = total
+      isLoaded.value = true
     })
 }
 
@@ -214,15 +207,16 @@ const searchSubmit = (event: object) => {
 const toolbarClick = (event: string) => {
   isValidKey(event, pageDefaultEvent)
     ? pageDefaultEvent[event]()
-    : emit('customEvent', {event,data:{}})
+    : emit('customEvent', event)
 }
 
 // 表格操作栏点击
 const tableActionClick = (event: string, scope: any) => {
   isValidKey(event, pageDefaultEvent)
     ? pageDefaultEvent[event](scope)
-    : emit('customEvent', { event,data:  toRaw(scope.row) })
+    : emit('customEvent', { event, scope })
 }
+
 // 表格操作
 const tableEvent: Record<string, (event?: any) => void> = {
   // 表格勾选项变化
@@ -252,7 +246,7 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
   openReadDialog:(scope: any) => {
     request.flameApi.singleSearch({
       tableName: safeTableName.value,
-      data: { key: scope.row.flame_id ,ref_level:1}
+      data: { key: scope.row.flame_id }
     })
       .then(({ items }: any) => {
         reportPageConfig.value.readForm['model'] = items
@@ -294,63 +288,6 @@ const pageDefaultEvent: Record<string, (event?: any) => void> = {
         pageDefaultEvent.closeAddDialog()
       })
   },
-  // 页面导入
-  pageImport:() => {
-    const inputFile: any = document.createElement('input')
-    inputFile.type = 'file'
-    inputFile.style.display = 'none'
-    document.body.appendChild(inputFile)
-    inputFile.click()
-    inputFile.addEventListener('change', () => {
-      const file = inputFile.files[0]
-      var fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
-      if (!['xls', 'xlsx', 'et'].includes(fileType)) {
-        ElMessage.warning('请上传 xls、xlsx、et 格式的文件！')
-        document.body.removeChild(inputFile)
-        return false
-      }
-      const formData = new FormData()
-      formData.append("file", file)
-      request.flameAxios({
-        headers: { 'Content-Type': 'multipart/form-data' },
-        method: 'post',
-        url: `/resource-service/upload_file?source=mongo&token=${request.token}`,
-        data: formData
-      })
-        .then(({ key: code }: any) => {
-          request.flameRequest({
-            tableName: safeTableName.value,
-            flameMethod: 'importfile',
-            data: { code }
-          })
-            .then((res: any) => {
-              if(res.result){
-                ElMessage.success('导入成功！')
-              pageRefresh()
-              }
-              else{
-                ElMessage.error(res.message)
-              }
-            })
-        })
-        .finally(() => document.body.removeChild(inputFile))
-    })
-  },
-  // 页面导出
-  pageExport:() => {
-    request.flameApi.exportFile({
-      tableName: safeTableName.value,
-      data: {
-      conditions: searchParams.value,
-      ref_level: 1,
-      order_by: "flame_id DESC"
-    }
-    })
-      .then(({ items }: any) => {
-        window.open(items.download_url)
-        ElMessage.success('导出成功')
-      })
-  },
   // 页面删除
   pageDelete:(scope: any) => {
     ElMessageBox.confirm(

package/packages/model/flmComponentConfig/complex/flmForm.ts

@@ -79,6 +79,7 @@ export interface FormConfig {
   // 自定义属性
   'items'?: Array<FormItemConfig>      // 表单项
   'buttons'?: Array<FormButtonConfig>  // 表单按钮
+  'columnNumber'?: number              // 每行列数
 }
 
 // 表单项设置

package/packages/model/flmComponentConfig/complex/flmSearch.ts

@@ -1,12 +1,4 @@
-/*
- * @Author: 关羽 xiaobing525@163.com
- * @Date: 2023-01-04 22:32:16
- * @LastEditors: 关羽 xiaobing525@163.com
- * @LastEditTime: 2023-01-05 19:54:43
- * @FilePath: /flame-components/packages/model/flmComponentConfig/complex/flmSearch.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-import { FormConfig } from '../../../model/flmComponentConfig'
+import { FormConfig } from '@/model/flmComponentConfig'
 
 export interface SearchConfig extends FormConfig {
   maxFormItem?: number

package/packages/model/flmComponentConfig/page/flmReportPage.ts

@@ -1,14 +1,5 @@
-/*
- * @Author: 关羽 xiaobing525@163.com
- * @Date: 2023-01-04 22:32:16
- * @LastEditors: 关羽 xiaobing525@163.com
- * @LastEditTime: 2023-01-11 21:37:39
- * @FilePath: /flame-components/packages/model/flmComponentConfig/page/flmReportPage.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
 import {
   FormConfig,
-  SearchConfig,
   ToolbarConfig,
   TableConfig,
   PaginationConfig,
@@ -17,7 +8,7 @@ import {
 
 // 报表页面设置
 export interface ReportPageSetting {
-  'search': SearchConfig
+  'search': FormConfig
   'toolbar': ToolbarConfig
   'table': TableConfig
   'tableAction': ToolbarConfig