@lx-frontend/wrap-element-ui 1.0.1-beta.6 → 1.0.1-beta.8

package/src/components/EditableTable/{types.ts → types/index.ts}

@@ -1,116 +1,116 @@
-export enum IEditType {
-  INPUT = 'input',
-  SELECT = 'select',
-  DATE_ONLY = 'date'
-}
-
-export interface IColumnConfigRequired {
-  prop: string;
-  label: string;
-  editType?: IEditType; // 编辑格式
-  sortable?: boolean; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
-  slotName?: string; // 如果要自定义，传入 slotName
-  isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏
-  /** 默认隐藏，显示设置中，该列默认隐藏 */
-  defaultHide?: boolean;
-  /** 列是否允许搜索，true则表头弹窗会多一个搜索框，一列中有多个搜索字段时传数组进行配置 */
-  search?: boolean | ISearchOptions
-  summary?: boolean; // 是否可以显示该列的统计
-  summaryMethod?: (values: any[]) => string | number; // 这一列的统计方法，values为该列的所有值
-  /** 过滤，传数组时默认复选框 */
-  filters?: {
-    type?: 'checkbox' | 'radio',
-    options: FiltersOption[]
-    default?: string | number | string[] | number[]
-  } | FiltersOption[]
-  // 透传el-table column有的属性， https://element.eleme.cn/#/en-US/component/table#table-column-attributes
-  [key: string]: any;
-}
-
-type FiltersOption = { value: string | number; text: string; [key: string]: any }
-
-type ISearchOptions = {
-  prop: string,
-  label: string,
-  validator?: (value: string) => boolean
-}[]
-
-type IInputColumn = IColumnConfigRequired & {
-  inputType: string | number;
-}
-
-type ISelectColumn = IColumnConfigRequired & {
-  options: { key: string; value: string | number; [key: string]: any }[];
-}
-
-type IDateOnlyColumn = IColumnConfigRequired
-type IDateTimeColumn = IColumnConfigRequired
-
-export type IColumnConfig = IInputColumn | ISelectColumn | IDateOnlyColumn | IDateTimeColumn
-
-export type IColorList = {
-  name: string; // 颜色名称
-  textColor: string; // 颜色弹窗中文本颜色
-  sampleColor: string; // 颜色弹窗中样例的颜色
-  bgColor: string; // 选中颜色后，行背景色
-  id: number; // 颜色id
-  default?: boolean // 是否是默认色，默认色需要显示颜色图标
-}[]
-
-type IPointLoc = {
-  x: number;
-  y: number;
-}
-export type IDraggingData = {
-  isDragging?: boolean
-  startPosition?: IPointLoc
-  draggingRow?: HTMLElement | HTMLElement[]
-  draggingIndex?: number
-  dropIndex?: number
-  rowDoms?: Record<number, HTMLElement[]>
-  rowHeight?: number
-  rowsRange?: ([number, number] | undefined)[]
-  hiddenTds?: HTMLElement[]
-  fullScreenDiv?: HTMLElement
-}
-
-export type IDefaultOperationType = 'edit' | 'delete' | 'top'
-
-export type ITableDataItem = {
-  colorId?: number;
-  isPinned?: boolean;
-  [k: string]: any;
-}
-
-export interface IProps {
-  dataList: ITableDataItem[];
-  columnConfig: IColumnConfig[];
-  hasExpandRow?: boolean;
-  hasIndexColumn?: boolean;
-  hasSelectionColumn?: boolean;
-  rowDragAble?: boolean;
-  total: number;
-  defaultOperations?: IDefaultOperationType[];
-  colorList?: IColorList;
-  leftFixedCount?: number;
-  dragSemiRange?: number;
-  loading?: boolean;
-  settingStorgeKey?: string
-  localSort?: boolean
-  localFilter?: boolean
-  currentPage: number
-}
-
-export interface IEmits {
-  (e: 'selection-change', selection: any): void
-  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
-  (e: 'row-drag-drop', param: { row: any; fromIndex: number; toIndex: number; page: number; size: number; }): void
-  (e: 'row-delete', param: { row: any; index: number; page: number; size: number; }): void
-  (e: 'row-edit', param: { row: any, index: number; page: number; size: number; }): void
-  (e: 'row-pin-to-top', param: { row: any, rawIndex: number; page: number; size: number; }): void
-  (e: 'row-edit-save', param: { page: number; size: number; row: any; changedData: Record<string, any>; }): void
-  (e: 'row-edit-cancel', param: { row: any; page: number; size: number; }): void
-  (e: 'page-change', param: { page: number, size: number }): void
-  (e: 'search', param: Record<string, any>): void
-  (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
-}
+export enum IEditType {
+  INPUT = 'input',
+  SELECT = 'select',
+  DATE_ONLY = 'date'
+}
+
+export interface IColumnConfigRequired {
+  prop: string;
+  label: string;
+  editType?: IEditType; // 编辑格式
+  sortable?: boolean; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
+  slotName?: string; // 如果要自定义，传入 slotName
+  isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏
+  /** 默认隐藏，显示设置中，该列默认隐藏 */
+  defaultHide?: boolean;
+  /** 列是否允许搜索，true则表头弹窗会多一个搜索框，一列中有多个搜索字段时传数组进行配置 */
+  search?: boolean | ISearchOptions
+  summary?: boolean; // 是否可以显示该列的统计
+  summaryMethod?: (values: any[]) => string | number; // 这一列的统计方法，values为该列的所有值
+  /** 过滤，传数组时默认复选框 */
+  filters?: {
+    type?: 'checkbox' | 'radio',
+    options: FiltersOption[]
+    default?: string | number | string[] | number[]
+  } | FiltersOption[]
+  // 透传el-table column有的属性， https://element.eleme.cn/#/en-US/component/table#table-column-attributes
+  [key: string]: any;
+}
+
+type FiltersOption = { value: string | number; text: string; [key: string]: any }
+
+type ISearchOptions = {
+  prop: string,
+  label: string,
+  validator?: (value: string) => boolean
+}[]
+
+type IInputColumn = IColumnConfigRequired & {
+  inputType: string | number;
+}
+
+type ISelectColumn = IColumnConfigRequired & {
+  options: { key: string; value: string | number; [key: string]: any }[];
+}
+
+type IDateOnlyColumn = IColumnConfigRequired
+type IDateTimeColumn = IColumnConfigRequired
+
+export type IColumnConfig = IInputColumn | ISelectColumn | IDateOnlyColumn | IDateTimeColumn
+
+export type IColorList = {
+  name: string; // 颜色名称
+  textColor: string; // 颜色弹窗中文本颜色
+  sampleColor: string; // 颜色弹窗中样例的颜色
+  bgColor: string; // 选中颜色后，行背景色
+  id: number; // 颜色id
+  default?: boolean // 是否是默认色，默认色需要显示颜色图标
+}[]
+
+type IPointLoc = {
+  x: number;
+  y: number;
+}
+export type IDraggingData = {
+  isDragging?: boolean
+  startPosition?: IPointLoc
+  draggingRow?: HTMLElement | HTMLElement[]
+  draggingIndex?: number
+  dropIndex?: number
+  rowDoms?: Record<number, HTMLElement[]>
+  rowHeight?: number
+  rowsRange?: ([number, number] | undefined)[]
+  hiddenTds?: HTMLElement[]
+  fullScreenDiv?: HTMLElement
+}
+
+export type IDefaultOperationType = 'edit' | 'delete' | 'top'
+
+export type ITableDataItem = {
+  colorId?: number;
+  isPinned?: boolean;
+  [k: string]: any;
+}
+
+export interface IProps {
+  dataList: ITableDataItem[];
+  columnConfig: IColumnConfig[];
+  hasExpandRow?: boolean;
+  hasIndexColumn?: boolean;
+  hasSelectionColumn?: boolean;
+  rowDragAble?: boolean;
+  total: number;
+  defaultOperations?: IDefaultOperationType[];
+  colorList?: IColorList;
+  leftFixedCount?: number;
+  dragSemiRange?: number;
+  loading?: boolean;
+  settingStorgeKey?: string
+  localSort?: boolean
+  localFilter?: boolean
+  currentPage: number
+}
+
+export interface IEmits {
+  (e: 'selection-change', selection: any): void
+  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
+  (e: 'row-drag-drop', param: { row: any; fromIndex: number; toIndex: number; page: number; size: number; }): void
+  (e: 'row-delete', param: { row: any; index: number; page: number; size: number; }): void
+  (e: 'row-edit', param: { row: any, index: number; page: number; size: number; }): void
+  (e: 'row-pin-to-top', param: { row: any, rawIndex: number; page: number; size: number; }): void
+  (e: 'row-edit-save', param: { page: number; size: number; row: any; changedData: Record<string, any>; }): void
+  (e: 'row-edit-cancel', param: { row: any; page: number; size: number; }): void
+  (e: 'page-change', param: { page: number, size: number }): void
+  (e: 'search', param: Record<string, any>): void
+  (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
+}

package/src/components/EditableTable/viewColorSelect.vue

@@ -1,65 +0,0 @@
-<template>
-  <div>
-    <el-popover
-      v-model="visible"
-      placement="right"
-      trigger="click"
-      popper-class="color-popover"
-    >
-      <div class="color-list">
-        <div
-          v-for="color in colorList"
-          :key="color.id"
-          class="color-list__item"
-          :style="{ backgroundColor: color.sampleColor }"
-          @click="() => {
-
-            visible = false
-            handleColorChange(color.id, scope)
-          }"
-        >
-          <span :style="{color: color.textColor}">{{ color.name }}</span>
-        </div>
-      </div>
-
-      <div slot="reference">
-        <div
-          v-if="isDefaultColor(scope.row.colorId)"
-          class="editable-table__color-icon"
-        />
-        <div
-          v-else
-          class="editable-table__selected-color"
-          :style="{ backgroundColor: getColorById(scope.row.colorId, 'sample') }"
-        />
-      </div>
-    </el-popover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { IColorList, IEmits, ITableDataItem } from './types';
-import useRowBgColor from './useRowBgColor';
-
-const props = defineProps<{
-  colorList: IColorList,
-  scope: any
-}>();
-
-const emit = defineEmits<{
-  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
-}>();
-
-const {
-  getColorById,
-  isDefaultColor,
-  handleColorChange,
-} = useRowBgColor({
-  colorList: props.colorList,
-  emit: emit as IEmits,
-});
-
-const visible = ref(false);
-
-</script>