gi-component 0.0.3 → 0.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",

package/packages/components/edit-table/src/edit-table.vue

@@ -1,207 +1,193 @@
-<template>
-  <el-form ref="formRef" :model="form" :class="b('edit-table')">
-    <el-table :data="form.tableData" border v-bind="attrs">
-      <el-table-column
-        v-for="(column, index) in props.columns"
-        :key="column.dataIndex + index"
-        :width="column.width"
-        v-bind="column.columnProps"
-        :prop="column.dataIndex"
-        :label="column.title"
-        :label-class-name="getLabelClassName(column)"
-      >
-        <template #default="scope">
-          <el-form-item
-            v-bind="column.formItemProps"
-            :label="column.title"
-            :prop="`tableData[${scope.$index}].${column.dataIndex}`"
-            :rules="getFormItemRules(column)"
-          >
-            <template v-if="column.slotName">
-              <slot :name="column.slotName" v-bind="scope"></slot>
-            </template>
-            <component
-              :is="COMP_MAP[column.type] || column.type"
-              v-else
-              v-bind="getComponentBindProps(column)"
-              v-model="scope.row[column.dataIndex]"
-              class="w-full"
-              :disabled="isDisabled(scope)"
-            >
-            </component>
-          </el-form-item>
-        </template>
-      </el-table-column>
-    </el-table>
-  </el-form>
-</template>
-
-<script lang="ts" setup>
-import type { FormInstance } from 'element-plus';
-import type { EditTableColumnItem, EditTableColumnItemType } from './type';
-import type { EditTableProps } from './type.ts';
-import * as El from 'element-plus';
-import { computed, h, reactive, ref, toRaw, useAttrs, watch } from 'vue';
-import { useBemClass } from '../../../hooks';
-
-const props = withDefaults(defineProps<EditTableProps>(), {
-  rowKey: 'id',
-  data: () => [],
-  columns: () => []
-});
-
-const attrs = useAttrs();
-const { b } = useBemClass();
-
-const COMP_MAP: Record<Exclude<EditTableColumnItemType, 'slot'>, any> = {
-  input: El.ElInput,
-  textarea: El.ElInput,
-  'input-number': El.ElInputNumber,
-  'input-tag': El.ElInputTag,
-  select: El.ElSelect,
-  'select-v2': El.ElSelectV2,
-  'tree-select': El.ElTreeSelect,
-  cascader: El.ElCascader,
-  slider: El.ElSlider,
-  switch: El.ElSwitch,
-  rate: El.ElRate,
-  'checkbox-group': El.ElCheckboxGroup,
-  checkbox: El.ElCheckbox,
-  'radio-group': El.ElRadioGroup,
-  radio: El.ElRadio,
-  'date-picker': El.ElDatePicker,
-  'time-picker': El.ElTimePicker,
-  'time-select': El.ElTimeSelect,
-  'color-picker': El.ElColorPicker,
-  transfer: El.ElTransfer,
-  autocomplete: El.ElAutocomplete,
-  upload: El.ElUpload
-};
-
-const formRef = ref<FormInstance | null>();
-
-/** 表单数据 */
-const form = computed(() => ({ tableData: props.data }));
-
-const clearable = false;
-/** 组件静态配置 */
-const STATIC_PROPS = new Map([
-  ['input', { clearable, maxlength: 20 }],
-  [
-    'textarea',
-    {
-      clearable,
-      type: 'textarea',
-      rows: 1,
-      maxlength: 200,
-      showWordLimit: true
-    }
-  ],
-  ['input-number', {}],
-  ['input-tag', { clearable }],
-  ['select', { clearable }],
-  ['select-v2', { clearable }],
-  ['tree-select', { clearable }],
-  ['cascader', { clearable }],
-  ['slider', {}],
-  ['switch', {}],
-  ['rate', {}],
-  ['checkbox-group', {}],
-  ['checkbox', {}],
-  ['radio-group', {}],
-  ['radio', {}],
-  ['date-picker', { clearable }],
-  ['time-picker', { clearable }],
-  ['time-select', { clearable }],
-  ['color-picker', {}],
-  ['transfer', {}],
-  ['autocomplete', {}],
-  ['upload', {}],
-  ['title', {}]
-]);
-
-/** 获取占位文本 */
-const getPlaceholder = (item: EditTableColumnItem) => {
-  if (!item.type) return undefined;
-  if (['input', 'input-number', 'input-tag'].includes(item.type)) {
-    return `请输入${item.title}`;
-  }
-  if (['textarea'].includes(item.type)) {
-    return `请填写${item.title}`;
-  }
-  if (
-    ['select', 'select-v2', 'tree-select', 'cascader', 'time-select'].includes(
-      item.type
-    )
-  ) {
-    return `请选择${item.title}`;
-  }
-  if (['date-picker'].includes(item.type)) {
-    return `请选择日期`;
-  }
-  if (['time-picker'].includes(item.type)) {
-    return `请选择时间`;
-  }
-  return undefined;
-};
-
-// 组件的默认props配置
-function getComponentBindProps(item: EditTableColumnItem) {
-  // 获取默认配置
-  const defaultProps: any = STATIC_PROPS.get(item.type || '') || {};
-  defaultProps.placeholder = getPlaceholder(item);
-  if (item.type === 'date-picker') {
-    defaultProps.valueFormat =
-      item?.props?.type === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
-  }
-  // 合并默认配置和自定义配置
-  return { ...defaultProps, ...item.props };
-}
-
-/** 表单项校验规则 */
-function getFormItemRules(item: EditTableColumnItem) {
-  if (item.required) {
-    return [
-      { required: true, message: `${item.title}为必填项` },
-      ...(Array.isArray(item.rules) ? item.rules : [])
-    ];
-  }
-  return item.rules;
-}
-
-/** 表头标题样式 */
-function getLabelClassName(item: EditTableColumnItem) {
-  if (item.required) return 'column-required';
-  return '';
-}
-
-/** 判断是否禁用 */
-const isDisabled = (p: any) => {
-  if (typeof props?.cellDisabled === 'function') return props.cellDisabled(p);
-  return false;
-};
-
-defineExpose({ formRef });
-</script>
-
-<style lang="scss" scoped>
-:deep(.el-form-item) {
-  margin-bottom: 0;
-
-  .el-form-item__label {
-    display: none;
-  }
-}
-
-:deep(.column-required) {
-  .cell {
-    position: relative;
-
-    &::after {
-      content: '*';
-      color: red;
-      margin-left: 2px;
-    }
-  }
-}
-</style>
+<template>
+  <el-form ref="formRef" :model="form" :class="b('edit-table')">
+    <el-table :data="form.tableData" border v-bind="attrs">
+      <el-table-column v-for="(column, index) in props.columns" :key="column.prop + index" :width="column.width"
+        v-bind="column.columnProps" :prop="column.prop" :label="column.label"
+        :label-class-name="getLabelClassName(column)">
+        <template #default="scope">
+          <el-form-item v-bind="column.formItemProps" :label="column.label"
+            :prop="`tableData[${scope.$index}].${column.prop}`" :rules="getFormItemRules(column)">
+            <template v-if="column.slotName">
+              <slot :name="column.slotName" v-bind="scope"></slot>
+            </template>
+            <component :is="COMP_MAP[column.type] || column.type" v-else v-bind="getComponentBindProps(column)"
+              v-model="scope.row[column.prop]" class="w-full" :disabled="isDisabled(scope)">
+            </component>
+          </el-form-item>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import type { FormInstance } from 'element-plus';
+import type { EditTableColumnItem, EditTableColumnItemType } from './type';
+import type { EditTableProps } from './type.ts';
+import * as El from 'element-plus';
+import { computed, h, reactive, ref, toRaw, useAttrs, watch } from 'vue';
+import { useBemClass } from '../../../hooks';
+import InputSearch from '../../input-search'
+
+const props = withDefaults(defineProps<EditTableProps>(), {
+  rowKey: 'id',
+  data: () => [],
+  columns: () => []
+});
+
+const attrs = useAttrs();
+const { b } = useBemClass();
+
+const COMP_MAP: Record<Exclude<EditTableColumnItemType, 'slot'>, any> = {
+  input: El.ElInput,
+  textarea: El.ElInput,
+  'input-number': El.ElInputNumber,
+  'input-tag': El.ElInputTag,
+  select: El.ElSelect,
+  'select-v2': El.ElSelectV2,
+  'tree-select': El.ElTreeSelect,
+  cascader: El.ElCascader,
+  slider: El.ElSlider,
+  switch: El.ElSwitch,
+  rate: El.ElRate,
+  'checkbox-group': El.ElCheckboxGroup,
+  checkbox: El.ElCheckbox,
+  'radio-group': El.ElRadioGroup,
+  radio: El.ElRadio,
+  'date-picker': El.ElDatePicker,
+  'time-picker': El.ElTimePicker,
+  'time-select': El.ElTimeSelect,
+  'color-picker': El.ElColorPicker,
+  transfer: El.ElTransfer,
+  autocomplete: El.ElAutocomplete,
+  upload: El.ElUpload,
+  'input-search': InputSearch
+};
+
+const formRef = ref<FormInstance | null>();
+
+/** 表单数据 */
+const form = computed(() => ({ tableData: props.data }));
+
+const clearable = false;
+/** 组件静态配置 */
+const STATIC_PROPS = new Map([
+  ['input', { clearable, maxlength: 20 }],
+  [
+    'textarea',
+    {
+      clearable,
+      type: 'textarea',
+      rows: 1,
+      maxlength: 200,
+      showWordLimit: true
+    }
+  ],
+  ['input-number', {}],
+  ['input-tag', { clearable }],
+  ['select', { clearable }],
+  ['select-v2', { clearable }],
+  ['tree-select', { clearable }],
+  ['cascader', { clearable }],
+  ['slider', {}],
+  ['switch', {}],
+  ['rate', {}],
+  ['checkbox-group', {}],
+  ['checkbox', {}],
+  ['radio-group', {}],
+  ['radio', {}],
+  ['date-picker', { clearable }],
+  ['time-picker', { clearable }],
+  ['time-select', { clearable }],
+  ['color-picker', {}],
+  ['transfer', {}],
+  ['autocomplete', {}],
+  ['upload', {}],
+  ['title', {}]
+]);
+
+/** 获取占位文本 */
+const getPlaceholder = (item: EditTableColumnItem) => {
+  if (!item.type) return undefined;
+  if (['input', 'input-number', 'input-tag'].includes(item.type)) {
+    return `请输入${item.label}`;
+  }
+  if (['textarea'].includes(item.type)) {
+    return `请填写${item.label}`;
+  }
+  if (
+    ['select', 'select-v2', 'tree-select', 'cascader', 'time-select', 'input-search'].includes(
+      item.type
+    )
+  ) {
+    return `请选择${item.label}`;
+  }
+  if (['date-picker'].includes(item.type)) {
+    return `请选择日期`;
+  }
+  if (['time-picker'].includes(item.type)) {
+    return `请选择时间`;
+  }
+  return undefined;
+};
+
+// 组件的默认props配置
+function getComponentBindProps(item: EditTableColumnItem) {
+  // 获取默认配置
+  const defaultProps: any = STATIC_PROPS.get(item.type || '') || {};
+  defaultProps.placeholder = getPlaceholder(item);
+  if (item.type === 'date-picker') {
+    defaultProps.valueFormat =
+      item?.componentProps?.type === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+  }
+  // 合并默认配置和自定义配置
+  return { ...defaultProps, ...item.componentProps };
+}
+
+/** 表单项校验规则 */
+function getFormItemRules(item: EditTableColumnItem) {
+  if (item.required) {
+    return [
+      { required: true, message: `${item.label}为必填项` },
+      ...(Array.isArray(item.rules) ? item.rules : [])
+    ];
+  }
+  return item.rules;
+}
+
+/** 表头标题样式 */
+function getLabelClassName(item: EditTableColumnItem) {
+  if (item.required) return 'column-required';
+  return '';
+}
+
+/** 判断是否禁用 */
+const isDisabled = (p: any) => {
+  if (typeof props?.cellDisabled === 'function') return props.cellDisabled(p);
+  return false;
+};
+
+defineExpose({ formRef });
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  margin-bottom: 0;
+
+  .el-form-item__label {
+    display: none;
+  }
+}
+
+:deep(.column-required) {
+  .cell {
+    position: relative;
+
+    &::after {
+      content: '*';
+      color: red;
+      margin-left: 2px;
+    }
+  }
+}
+</style>

package/packages/components/edit-table/src/type.ts

@@ -1,69 +1,71 @@
-import type * as El from 'element-plus';
-
-export type EditTableColumnItemType =
-  | 'input'
-  | 'textarea'
-  | 'input-number'
-  | 'input-tag'
-  | 'select'
-  | 'select-v2'
-  | 'tree-select'
-  | 'cascader'
-  | 'slider'
-  | 'switch'
-  | 'rate'
-  | 'checkbox-group'
-  | 'checkbox'
-  | 'radio-group'
-  | 'radio'
-  | 'date-picker'
-  | 'time-picker'
-  | 'time-select'
-  | 'color-picker'
-  | 'transfer'
-  | 'autocomplete'
-  | 'upload'
-  | 'slot'
-  | 'cecw-input-search';
-
-export interface EditTableColumnItem {
-  type?: EditTableColumnItemType;
-  title: string;
-  dataIndex: string;
-  width?: number | string;
-  required?: boolean;
-  rules?: El.FormItemRule[]; // 表单校验规则
-  props?: ColumnItemProps;
-  columnProps?: El.TableColumnInstance['$props'];
-  formItemProps?: El.FormItemProps;
-  slotName?: string;
-}
-
-export type ColumnItemProps = El.InputProps &
-  El.InputNumberProps &
-  El.InputTagProps &
-  El.ISelectProps &
-  El.ISelectV2Props &
-  El.TreeInstance['$props'] &
-  El.CascaderProps &
-  El.SliderProps &
-  El.SwitchProps &
-  El.RateProps &
-  El.CheckboxGroupProps &
-  El.CheckboxProps &
-  El.RadioGroupProps &
-  El.RadioProps &
-  El.DatePickerProps &
-  El.TimePickerDefaultProps &
-  El.TimeSelectProps &
-  El.ColorPickerProps &
-  El.TransferProps &
-  El.AutocompleteProps &
-  El.UploadProps;
-
-export interface EditTableProps {
-  rowKey?: string;
-  data?: any[];
-  columns?: EditTableColumnItem[];
-  cellDisabled?: any;
-}
+import type * as El from 'element-plus';
+import type { InputSearchInstance } from '../../input-search'
+
+export type EditTableColumnItemType =
+  | 'input'
+  | 'textarea'
+  | 'input-number'
+  | 'input-tag'
+  | 'select'
+  | 'select-v2'
+  | 'tree-select'
+  | 'cascader'
+  | 'slider'
+  | 'switch'
+  | 'rate'
+  | 'checkbox-group'
+  | 'checkbox'
+  | 'radio-group'
+  | 'radio'
+  | 'date-picker'
+  | 'time-picker'
+  | 'time-select'
+  | 'color-picker'
+  | 'transfer'
+  | 'autocomplete'
+  | 'upload'
+  | 'slot'
+  | 'input-search';
+
+export interface EditTableColumnItem {
+  type?: EditTableColumnItemType;
+  label: string;
+  prop: string;
+  width?: number | string;
+  required?: boolean;
+  rules?: El.FormItemRule[]; // 表单校验规则
+  componentProps?: ColumnItemProps;
+  columnProps?: El.TableColumnInstance['$props'];
+  formItemProps?: El.FormItemProps;
+  slotName?: string;
+}
+
+export type ColumnItemProps = El.InputProps &
+  El.InputNumberProps &
+  El.InputTagProps &
+  El.SelectProps &
+  El.SelectV2Props &
+  El.TreeInstance['$props'] &
+  El.CascaderProps &
+  El.SliderProps &
+  El.SwitchProps &
+  El.RateProps &
+  El.CheckboxGroupProps &
+  El.CheckboxProps &
+  El.RadioGroupProps &
+  El.RadioProps &
+  El.DatePickerProps &
+  El.TimePickerDefaultProps &
+  El.TimeSelectProps &
+  El.ColorPickerProps &
+  El.TransferProps &
+  El.AutocompleteProps &
+  El.UploadProps &
+  InputSearchInstance['$props']
+
+export interface EditTableProps {
+  rowKey?: string;
+  data?: any[];
+  columns?: EditTableColumnItem[];
+  cellDisabled?: any;
+}

package/packages/components/table/src/TableColumn.vue

@@ -1,49 +1,42 @@
-<template>
-  <el-table-column v-bind="columnProps">
-    <!-- 处理render函数 -->
-    <template v-if="column.render" v-slot="scope">
-      <component :is="column.render(scope)" />
-    </template>
-
-    <!-- 处理插槽内容 -->
-    <template v-else-if="column.slotName" #default="scope">
-      <slot :name="column.slotName" v-bind="scope" />
-    </template>
-
-    <!-- 递归渲染子列 -->
-    <template v-if="column.children && column.children.length > 0">
-      <TableColumn
-        v-for="child in column.children"
-        :key="child.prop || child.label"
-        :column="child"
-      >
-        <!-- 将所有插槽传递给子组件 -->
-        <template
-          v-for="(_, slotName) in $slots"
-          :key="slotName"
-          #[slotName]="scope"
-        >
-          <slot :name="slotName" v-bind="scope" />
-        </template>
-      </TableColumn>
-    </template>
-  </el-table-column>
-</template>
-
-<script lang="ts" setup>
-import type { TableColumnItem } from './type';
-import { computed } from 'vue';
-import TableColumn from './TableColumn.vue';
-
-const props = defineProps<{
-  column: TableColumnItem;
-}>();
-
-// 计算el-table-column需要的属性
-const columnProps = computed(() => {
-  const { slotName, render, children, ...restProps } = props.column;
-  return restProps;
-});
-</script>
-
-<style scoped></style>
+<template>
+  <el-table-column v-bind="columnProps">
+    <!-- 处理render函数 -->
+    <template v-if="column.render" v-slot="scope">
+      <template v-if="typeof column.render(scope) === 'string'">{{ column.render(scope) }}</template>
+      <component v-else :is="column.render(scope)" />
+    </template>
+
+    <!-- 处理插槽内容 -->
+    <template v-else-if="column.slotName" #default="scope">
+      <slot :name="column.slotName" v-bind="scope" />
+    </template>
+
+    <!-- 递归渲染子列 -->
+    <template v-if="column.children && column.children.length > 0">
+      <TableColumn v-for="child in column.children" :key="child.prop || child.label" :column="child">
+        <!-- 将所有插槽传递给子组件 -->
+        <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="scope">
+          <slot :name="slotName" v-bind="scope" />
+        </template>
+      </TableColumn>
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts" setup>
+import type { TableColumnItem } from './type';
+import { computed } from 'vue';
+import TableColumn from './TableColumn.vue';
+
+const props = defineProps<{
+  column: TableColumnItem;
+}>();
+
+// 计算el-table-column需要的属性
+const columnProps = computed(() => {
+  const { slotName, render, children, ...restProps } = props.column;
+  return restProps;
+});
+</script>
+
+<style scoped></style>