@lx-frontend/wrap-element-ui 1.0.0-beta.7 → 1.0.1-7.beta-2

package/README.md

@@ -34,9 +34,9 @@ export default {
 
 ### 开发指南
 
-新增或修改组件时，使用 `pnpm sb:dev` 可以实时预览 stories。
+新增或修改组件时，使用 `pnpm dev` 可以实时预览 stories。
 
-开发完成后，可以使用 `pnpm sb:dist` 预览打包后的组件是否能正常工作。与 `pnpm sb:dev` 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。
+开发完成后，可以使用 `pnpm dist` 预览打包后的组件是否能正常工作。与 `pnpm dev` 的区别在于，该命令修改了组件的引用地址，指向了打包后的组件。该命令不能实时预览修改。
 
 `build:lib`命令用于打包组件库，生成组件代码及类型定义文件。
 

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.17.beta-2",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
-    "sb:dev": "cross-env MODE=development storybook dev -p 6006",
-    "sb:dist": "cross-env MODE=production pnpm build:lib && storybook dev -p 6006",
+    "dev": "cross-env MODE=development storybook dev -p 6006",
+    "dist": "cross-env MODE=production pnpm build:lib && storybook dev -p 6006",
     "build:lib": "pnpm clean && vite build",
     "build:sb": "cross-env MODE=production rimraf storybook-static && pnpm build:lib && storybook build",
     "preview": "serve ./storybook-static",
@@ -22,7 +22,8 @@
     "package.json",
     "src/components"
   ],
-  "dependencies": {
+  "peerDependencies": {
+    "dayjs": "^1.11.13",
     "element-ui": "^2.15.14",
     "lodash": "^4.17.21",
     "vue": "~2.7.16"
@@ -69,4 +70,4 @@
     "vite-tsconfig-paths": "^4.3.2",
     "vue-template-compiler": "^2.6.10"
   }
-}
+}

package/src/components/EditableTable/bizHooks/index.ts

@@ -0,0 +1,7 @@
+export * from './usePagination';
+export * from './useCellHover';
+export * from './useViewSetting';
+export * from './useRowBgColor';
+export * from './useDefaultOperation';
+export * from './useColumnHeaderOperation';
+export * from './useDragSort';

package/src/components/EditableTable/{useCellHover.ts → bizHooks/useCellHover.ts}

@@ -2,7 +2,7 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 
-export default function useCellHover(tableDomRef) {
+export function useCellHover(tableDomRef) {
 
   // 鼠标悬浮的行
   const hoveringCellInfo = ref<{

package/src/components/EditableTable/bizHooks/useColumnHeaderOperation.ts

@@ -0,0 +1,329 @@
+import { computed, nextTick, ref, Ref, watch } from 'vue'
+import {
+  FilterListType,
+  IColumnConfig,
+  IEmits,
+  IFilterInput,
+  IProps
+} from '../types';
+
+interface IUseColumnHeaderOperationParams {
+  props: IProps
+  tableDomRef: any
+  emit: IEmits;
+  showingColumns: Ref<string[]>
+}
+
+export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColumns }: IUseColumnHeaderOperationParams) {
+  // column如果有sortable属性，点击列头部，会直接触发排序，为了在弹窗点确定时再触发排序，需要阻止点击立即排序
+  // 所以，初始渲染时，将sortable设置为false，在触发排序逻辑时再设置成真实的值，再利用el-table自身的排序逻辑触发排序
+  const inSorting = ref(false);
+
+  // 生效中的排序配置
+  const sortType = ref<'ascending' | 'descending' | null>(null);
+  const sortProp = ref('')
+
+  // 临时的排序配置
+  const tempSortType = ref<'ascending' | 'descending' | ''>('');
+  const tempSortProp = ref('')
+
+  // 生效中的过滤配置 和 临时过滤配置
+  const filteredValue = ref<Record<string, string | number | number[] | string[]>>({});
+  const tempFilteredValue = ref<Record<string, string | number | number[] | string[]>>({});
+
+  // 生效中的统计配置 和 临时统计配置
+  const tempSummaryList = ref<string[]>([]);
+  const summaryList = ref<string[]>([]);
+
+  const isColumnFiltering = computed(() => {
+    return Object.keys(tempFilteredValue.value).some(
+      (key) => {
+        const value = tempFilteredValue.value[key]
+        if (Array.isArray(value)) return value.length
+        return value;
+      }
+    )
+  });
+
+  const showColumnHeadSortIcon = ({ isColumnSortable, filters }: IColumnConfig) => {
+    return isColumnSortable || (filters && Array.isArray(filters) && filters.length > 0)
+  }
+
+  watch(
+    () => props.columnConfig,
+    (val) => {
+      val?.forEach(v => handleResetFilterValue(v));
+      tempFilteredValue.value = { ...filteredValue.value };
+    },
+    { immediate: true }
+  )
+
+  const tableSummaryMethod = (param) => {
+    const { columns, data } = param;
+    const sums: (string | number)[] = []
+    columns.forEach((column, index) => {
+      if (index === 0) {
+        sums[index] = '合计';
+        return;
+      }
+      if (!summaryList.value.includes(column.property)) {
+        sums[index] = '';
+      } else {
+        const values = data.map(item => item[column.property]);
+        // 找到对应列的summaryMethod函数
+        const summaryMethod = props.columnConfig.find(c => c.prop === column.property)?.summaryMethod ?? (() => '');
+        sums[index] = summaryMethod(values);
+      }
+    })
+
+    return sums
+  }
+
+  const isColumnHeadActive = ({ prop, filters, _sortable }: IColumnConfig) => {
+    const hasFilters = filters && Array.isArray(filters) && filters.length > 0
+    const currentFilterActive = hasFilters && filters?.some(
+      (item) => {
+        if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
+          const [start, end] = item.prop
+          return !!(filteredValue.value[start] || filteredValue.value[end])
+        }
+
+        if (item.type === 'checkbox') {
+          return !!(filteredValue.value[item.prop] as any[]).length
+        }
+
+        return !!filteredValue.value[item.prop]
+      }
+    )
+
+    const isUseSort = Array.isArray(_sortable)
+      ? _sortable.some(v => v.prop === sortProp.value)
+      : sortProp.value === prop
+
+    return currentFilterActive || isUseSort|| summaryList.value.includes(prop);
+  }
+
+  const handleHeaderPopoverShow = (column: IColumnConfig) => {
+    // 关闭其他的排序和筛选弹窗（理论上不写也能关闭其他，但是就是有些列会出现两个弹窗同时出现的情况）
+    closeSortAndFilterPopover(column.prop);
+    tempFilteredValue.value = { ...filteredValue.value };
+    tempSortType.value = sortType.value || '';
+    tempSortProp.value = sortProp.value || '';
+    // 临时合计项设置成实际的合计项
+    tempSummaryList.value = [...summaryList.value];
+  }
+
+  const closeSortAndFilterPopover = (exceptProp?: string) => {
+    document.querySelectorAll('span[data-popper-name]').forEach((item: any) => {
+      if (!exceptProp || exceptProp !== item.dataset.prop) {
+        item?.__vue__?.doClose?.();
+      }
+    });
+  }
+
+  const handleSort = (type: 'ascending' | 'descending', prop: string) => {
+    tempSortType.value = type;
+    tempSortProp.value = prop;
+  }
+
+  const columnMap = computed(() => {
+    const obj: Record<string, IColumnConfig> = {}
+    props.columnConfig.forEach(column => {
+      obj[column.prop] = column
+    })
+
+    return obj
+  })
+
+  const emitSearch = () => {
+    const params: Record<string, any> = {};
+
+    const processFilter = (filters: FilterListType) => {
+      filters.forEach((item) => {
+        if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
+          const [start, end] = item.prop
+          params[start] = filteredValue.value[start];
+          params[end] = filteredValue.value[end];
+        } else {
+          params[item.prop] = filteredValue.value[item.prop];
+        }
+      });
+    }
+
+    // 仅提交显示的列的相关数据
+    showingColumns.value.forEach(prop => {
+      const { filters = [] } = columnMap.value[prop] as IColumnConfig;
+      processFilter(filters);
+    });
+
+    if (props.colorFilterConfig) {
+      const { filters = [] } = props.colorFilterConfig;
+      processFilter(filters);
+    }
+
+    Object.keys(params).forEach(key => {
+      if (params[key] === undefined) delete params[key];
+    });
+
+    emit('search', {
+      ...params,
+      page: 1
+    });
+  };
+
+
+  const handleHeaderOperationConfirm = async (column: IColumnConfig) => {
+    const inputFilters = (column.filters ?? []).filter(
+      (item): item is IFilterInput => item.type === 'input'
+    );
+    
+    const hasValidatorError = inputFilters.some(
+      (item) => item.validator
+        && !item.validator((tempFilteredValue.value[item.prop] as string).trim())
+    )
+
+    if (hasValidatorError) {
+      return
+    }
+
+    inputFilters.forEach(
+      (item) => {
+        if (!tempFilteredValue.value[item.prop]) tempFilteredValue.value[item.prop] = ''
+      }
+    )
+
+    summaryList.value = [...tempSummaryList.value];
+    sortProp.value = tempSortProp.value || '';
+    sortType.value = tempSortType.value || null;
+
+    if (sortProp.value) { // 确认时提交排序
+      if (props.localSort) {
+        // 恢复列配置的sortable属性，只有列配置的sortable为true，才能用下面的sort方法
+        inSorting.value = true;
+        await nextTick();
+        tableDomRef.value?.sort(sortProp.value, sortType.value);
+        inSorting.value = false
+      } else {
+        emit('sort-change', { order: sortType.value, prop: sortProp.value });
+      }
+    }
+
+    filteredValue.value = { ...tempFilteredValue.value };
+
+    emitSearch();
+    closeSortAndFilterPopover();
+    await nextTick()
+    tableDomRef.value?.doLayout();
+  }
+
+  const clearSort = () => {
+    sortProp.value = '';
+    sortType.value = null;
+    if (props.localSort) { // 前端过滤
+      tableDomRef.value?.clearSort();
+    } else { // 接口过滤
+      emit('sort-change', { order: null, prop: '' });
+    }
+  }
+
+  const setSort = (params: { order: 'ascending' | 'descending', prop: string }) => {
+    const column = props.columnConfig.find(c => Array.isArray(c.sortable)
+      ? c.sortable.some(v => v.prop === params.prop)
+      : c.prop === params.prop);
+
+    if (column) {
+      sortProp.value = params.prop
+      sortType.value = params.order;
+      if (props.localSort) {
+        tableDomRef.value?.sort(params.prop, params.order);
+      }
+    }
+  }
+
+  function handleResetFilterValue (column: IColumnConfig) {
+    (column.filters || [])
+      .forEach(
+        (item) => {
+          if (item.type === 'radio' || item.type === 'checkbox') {
+            if (item.defaultValue) {
+              filteredValue.value[item.prop] = item.defaultValue
+            } else {
+              filteredValue.value[item.prop] = item.type === 'radio' ? '' : []
+            }
+          } else if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
+            const [start, end] = item.prop
+            filteredValue.value[start] = '';
+            filteredValue.value[end] = '';
+          } else {
+            filteredValue.value[item.prop] = ''
+          }
+        }
+      )
+  }
+
+  const handleHeaderOperationReset = async (column: IColumnConfig) => {
+    if (
+      sortProp.value &&
+      (Array.isArray(column._sortable)
+        ? column._sortable.some(v => v.prop === sortProp.value)
+        : sortProp.value === column.prop)
+    ) {
+      clearSort();
+    }
+
+    // 合计
+    summaryList.value = summaryList.value.filter(item => item !== column.prop);
+
+    handleResetFilterValue(column)
+    emitSearch();
+    closeSortAndFilterPopover();
+    await nextTick();
+    tableDomRef.value?.doLayout();
+  }
+
+  const setSearchParams = (params: Record<string, any>) => {
+    const _filteredValue = {};
+
+    // 设置搜索和过滤参数时，如果使用 showingColumns 遍历，会导致通过外部设置未显示的列的搜索和过滤参数丢失
+    [props.colorFilterConfig, ...props.columnConfig].forEach(column => {
+      (column?.filters ?? [])
+        .forEach(
+          (item) => {
+            if (item.type === 'doubleDatePicker' || item.type === 'monthDayPicker') {
+              const [start, end] = item.prop
+              _filteredValue[start] = params[start]
+              _filteredValue[end] = params[end]
+            } else if (item.type === 'checkbox') {
+              _filteredValue[item.prop] = params[item.prop] ?? item.defaultValue ?? []
+            } else {
+              _filteredValue[item.prop] = params[item.prop] ?? ''
+            }
+          }
+        )
+    })
+
+    filteredValue.value = { ...filteredValue.value, ..._filteredValue }
+  }
+
+  return {
+    setSort,
+    clearSort,
+    setSearchParams,
+    isColumnHeadActive,
+    handleHeaderPopoverShow,
+    handleSort,
+    handleHeaderOperationConfirm,
+    handleHeaderOperationReset,
+    summaryList,
+    tableSummaryMethod,
+    filteredValue,
+    showColumnHeadSortIcon,
+    tempSortProp,
+    tempFilteredValue,
+    tempSummaryList,
+    tempSortType,
+    sortProp,
+    isColumnFiltering,
+    inSorting,
+  }
+}

package/src/components/EditableTable/{useDefaultOperation.ts → bizHooks/useDefaultOperation.ts}

@@ -1,5 +1,5 @@
 import { Ref, ref } from "vue"
-import { IEmits, IProps } from "./types"
+import { IEmits, IProps } from "../types"
 
 interface IParams {
   emit: IEmits;
@@ -9,7 +9,7 @@ interface IParams {
   hasExpandRow: boolean
 }
 
-export default function useDefaultOperation({ emit, pageSize, props, tableDomRef, hasExpandRow }: IParams) {
+export function useDefaultOperation({ emit, pageSize, props, tableDomRef, hasExpandRow }: IParams) {
   const operationPopoverRef = ref<any>(null);
   const editingRowData = ref<Record<string, any>>({});
   const editingRowIndex = ref<number>(-1);

package/src/components/EditableTable/{useDragSort.ts → bizHooks/useDragSort.ts}

@@ -1,5 +1,5 @@
 import { onBeforeUnmount, onMounted, ref, Ref } from 'vue';
-import { IColumnConfig, IDraggingData, IEmits, IProps } from "./types"
+import { IColumnConfig, IDraggingData, IEmits, IProps } from "../types"
 import throttle from "lodash/throttle"
 
 interface IUseDragSortParams {
@@ -11,7 +11,7 @@ interface IUseDragSortParams {
   pageSize: Ref<number>
   tableDomRef: Ref<any>
 }
-export default function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize, beforeDragStart, currScope, tableDomRef }: IUseDragSortParams) {
+export function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize, beforeDragStart, currScope, tableDomRef }: IUseDragSortParams) {
 
   const draggingData = ref<IDraggingData>({}); // 拖拽相关数据
   const isMouseDown = ref(false);
@@ -46,7 +46,7 @@ export default function useDragSort({ props, emit, viewSettingDragSortOptions, p
       handleDragMouseDown(e, +target.dataset.index);
     }
 
-    if ([...target.classList].includes('view-setting-drag-target')) {
+    if ([...target.classList].includes('editable-table-view-setting-drag-target')) {
       dragType.value = 'view-setting';
       // 处理显示设置拖拽
       handleViewSettingDragMouseDown(e, +target.dataset.index);
@@ -208,7 +208,7 @@ export default function useDragSort({ props, emit, viewSettingDragSortOptions, p
   }
 
   const handleViewSettingDragMouseDown = (event, index) => {
-    const rowDoms = [...document.getElementsByClassName('view-setting-draggable-item')]
+    const rowDoms = [...document.getElementsByClassName('editable-table-view-setting-draggable-item')]
       .reduce((pre, item, index) => ({ ...pre, [index]: [item] }), {});
     draggingData.value.isDragging = true;
     draggingData.value.rowDoms = rowDoms;

package/src/components/EditableTable/{usePagination.ts → bizHooks/usePagination.ts}

@@ -1,12 +1,12 @@
 import { ref } from "vue"
-import { IEmits } from "./types"
+import { IEmits } from "../types"
 
 interface IParams {
   emit: IEmits
   beforePageChange: () => void
 }
 
-export default function usePagination({ emit, beforePageChange }: IParams) {
+export function usePagination({ emit, beforePageChange }: IParams) {
 
   const pageSize = ref(10);
 
@@ -28,4 +28,4 @@ export default function usePagination({ emit, beforePageChange }: IParams) {
     handlePageSizeChange,
     handleCurrPageChange,
   }
-}
+}

package/src/components/EditableTable/{useRowBgColor.ts → bizHooks/useRowBgColor.ts}

@@ -1,32 +1,29 @@
-import { ref, nextTick } from "vue"
-import { IColorList, IEmits } from "./types"
+import { IColorList, IEmits } from '../types';
 
 interface IUseRowBgColorParams {
   colorList: IColorList;
   emit: IEmits;
 }
 
-export default function useRowBgColor({ colorList, emit }: IUseRowBgColorParams) {
-  const colorPopoverRef = ref<any>(null);
-
+export function useRowBgColor({ colorList, emit }: IUseRowBgColorParams) {
   const isDefaultColor = (id: number) => {
     if (!id) {
       // 没有颜色id，则认为是默认色
       return true;
     }
     return colorList.find(c => +c.id === +id)?.default;
-  }
+  };
 
   const getColorById = (id: number, type: 'bg' | 'sample' = 'bg') => {
     return colorList.find(c => +c.id === +id)?.[`${type}Color`] || '';
-  }
+  };
 
   const setRowStyle = (scope) => {
     const row = scope.row;
     return {
-      backgroundColor: row.colorId ? getColorById(row.colorId) : ''
-    }
-  }
+      backgroundColor: row.__static_bg_color__ ?? (row.colorId ? getColorById(row.colorId) : '')
+    };
+  };
 
   const handleColorChange = async (colorId: number, scope) => {
     const { row, $index: rowIndex, store } = scope;
@@ -36,16 +33,12 @@ export default function useRowBgColor({ colorList, emit }: IUseRowBgColorParams)
     newList.splice(rowIndex, 1, curRow);
     store.states.data = newList;
     emit('row-bg-change', { colorId, row, rowIndex });
-    await nextTick();
-    // TODO: 为什么不是数组？为什么关闭弹窗不生效了？
-    colorPopoverRef.value?.doClose();
-  }
+  };
 
   return {
     isDefaultColor,
     getColorById,
     setRowStyle,
     handleColorChange,
-    colorPopoverRef
-  }
+  };
 }

package/src/components/EditableTable/bizHooks/useViewSetting.ts

@@ -0,0 +1,125 @@
+import { ref, watch, Ref, computed, nextTick } from "vue"
+import { IColumnConfig, IProps } from "../types"
+
+interface IViewSettingParams {
+  showingColumns: Ref<string[]>
+  actualColumns: Ref<IColumnConfig[]>
+  viewSettingDragSortOptions: Ref<IColumnConfig[]>
+  props: IProps
+  emit: {
+    (e: 'update:leftFixedColumnCount', val: number): void
+    (e: 'update:showingColumns', val: string[]): void
+    (e: 'update:viewSettingDragSortOptions', val: IColumnConfig[]): void
+    (e: 'tableDoLayout'): void
+  }
+}
+
+export function useViewSetting({
+  showingColumns,
+  actualColumns,
+  props,
+  viewSettingDragSortOptions,
+  emit
+}: IViewSettingParams) {
+  const columnsToBeShown = ref<string[]>([]); // 显示设置弹窗中勾选的列
+  const viewSettingVisible = ref(false);
+  const leftFixedColumnCount = ref(0);
+  const tempLeftFixedColumnCount = ref(0);
+
+  const updateShowingColumns = (val: string[]) => emit('update:showingColumns', val);
+
+  const storageKey = computed(() => `@lx-frontend/wrap-element-ui/table_setting_cloumns/${props.settingStorgeKey || (location.pathname === '/' ? location.hash : location.pathname)}`);
+
+  const saveSettingToStorge = async() => {
+    await nextTick()
+    localStorage.setItem(storageKey.value, JSON.stringify({
+      showingColumns: showingColumns.value,
+      leftFixedColumnCount: leftFixedColumnCount.value
+    }))
+  };
+
+  const handleViewSettingShow = () => {
+    emit('update:viewSettingDragSortOptions', [...actualColumns.value.filter(v => v?.prop !== '$$operation')]);
+    tempLeftFixedColumnCount.value = leftFixedColumnCount.value;
+    viewSettingVisible.value = true;
+    columnsToBeShown.value = [...showingColumns.value];
+  }
+
+  const handleViewSettingClose = () => {
+    viewSettingVisible.value = false;
+  }
+
+  const handleViewSettingConfirm = async () => {
+    viewSettingVisible.value = false;
+    updateShowingColumns(viewSettingDragSortOptions.value.map(c => c.prop));
+    leftFixedColumnCount.value = tempLeftFixedColumnCount.value;
+    await saveSettingToStorge()
+    emit('tableDoLayout')
+  }
+
+  const handleInputTempLeftFixedColumnCount = (value: string) => {
+    const _value = Number(value)
+    if (isNaN(_value)) return
+    tempLeftFixedColumnCount.value = Math.max(0, Math.min(columnsToBeShown.value.length, Math.floor(_value)))
+  }
+
+  watch(
+    () => props.columnConfig,
+    async(val) => {
+      const _keys = new Set(val.map(c => (c.prop)));
+      const _cache = localStorage.getItem(storageKey.value);
+      const setColumns = () => updateShowingColumns(val.filter(v => !v.defaultHide).map(c => c.prop));
+      if (!_cache) {
+        setColumns();
+        leftFixedColumnCount.value = props.leftFixedCount as number;
+      } else {
+        try {
+          // 缓存数据字段可能随着更新导致对不上，清理无效数据，防止出问题
+          const cache = JSON.parse(_cache);
+          if (!cache.showingColumns || !Array.isArray(cache.showingColumns)) {
+            setColumns();
+          } else {
+            updateShowingColumns(cache.showingColumns.filter(key => _keys.has(key)))
+          }
+          const _leftFixedColumnCount = Number(cache?.leftFixedColumnCount)
+          leftFixedColumnCount.value = isNaN(_leftFixedColumnCount) ? (props.leftFixedCount as number) : _leftFixedColumnCount;
+          // 写入清理后的数据
+          saveSettingToStorge();
+        } catch (error) {
+          console.error(error);
+          localStorage.removeItem(storageKey.value);
+          setColumns();
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  watch(columnsToBeShown, (val, oldVal) => {
+    if (val.length === oldVal?.length) return // 排序调整时不做处理，避免出现死循环
+    const _map = new Map<string, IColumnConfig>()
+    props.columnConfig.forEach(c => _map.set(c.prop, c))
+    // 展示时保留顺序
+    emit('update:viewSettingDragSortOptions', val.map(prop => _map.get(prop)!))
+    if (tempLeftFixedColumnCount.value > val.length) tempLeftFixedColumnCount.value = val.length
+  }, { immediate: true })
+
+  // 拖拽调整排序时，同时更新勾选数组的顺序，避免出现拖拽排序操作过程后再勾选新列时被还原成拖拽前的顺序的问题
+  watch(viewSettingDragSortOptions, (val, oldVal) => {
+    if (!val.length || val.length !== oldVal?.length) return // 不是排序调整
+    columnsToBeShown.value = val.map(c => c.prop)
+  }, { deep: true })
+
+  watch(leftFixedColumnCount, (val) => emit('update:leftFixedColumnCount', val), { immediate: true });
+
+  return {
+    columnsToBeShown,
+    viewSettingVisible,
+    leftFixedColumnCount,
+    tempLeftFixedColumnCount,
+    handleInputTempLeftFixedColumnCount,
+    handleViewSettingShow,
+    handleViewSettingClose,
+    handleViewSettingConfirm,
+  }
+}