gi-component 0.0.7 → 0.0.8

package/packages/components/form/src/type.ts

@@ -1,105 +1,84 @@
-import type * as El from 'element-plus';
-import type { FormProps as ElFormProps } from 'element-plus';
-import type { VNode } from 'vue';
-import type { GridItemProps, GridProps } from '../../grid/src/interface';
-import type { InputSearchInstance } from '../../input-search';
+import type * as El from 'element-plus'
+import type { FormProps as ElFormProps } from 'element-plus'
+import type { VNode } from 'vue'
 import type { MergeMultiple } from '../../../types/tool'
+import type { GridItemProps, GridProps } from '../../grid/src/interface'
+import type { InputSearchInstance } from '../../input-search'
 
-export type FormColumnType =
-  | 'input'
-  | 'textarea'
-  | 'input-number'
-  | 'input-tag'
-  | 'input-search'
-  | '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'
-  | 'title'
-  | 'slot';
+export type FormColumnType
+  = | 'input'
+    | 'textarea'
+    | 'input-number'
+    | 'input-tag'
+    | 'input-search'
+    | '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'
+    | 'title'
+    | 'slot'
 
 /**
  * 表单列属性类型，根据组件类型使用对应的属性类型
  */
-export type FormColumnProps = MergeMultiple<[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 type FormColumnProps = MergeMultiple<[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 type FormColumnItemHide<F> = boolean | ((form: F) => boolean);
+export type FormColumnItemHide<F> = boolean | ((form: F) => boolean)
 
 /**
  * 表单列插槽类型，根据组件类型使用对应的插槽类型
  */
 export type FormColumnSlots = Partial<
-  El.InputInstance['$slots'] |
-  El.InputNumberInstance['$slots'] |
-  El.InputTagInstance['$slots'] |
-  El.AutocompleteInstance['$slots'] |
-  El.CascaderInstance['$slots'] |
-  El.DatePickerInstance['$slots']
->;
+  El.InputInstance['$slots']
+  | El.InputNumberInstance['$slots']
+  | El.InputTagInstance['$slots']
+  | El.AutocompleteInstance['$slots']
+  | El.CascaderInstance['$slots']
+  | El.DatePickerInstance['$slots']
+>
 
 export interface FormColumnItem<F = any> {
-  type: FormColumnType;
-  label?: string;
-  labelRender?: () => VNode;
-  field: string;
-  fieldName?: string;
-  span?: number;
-  props?: FormColumnProps;
-  formItemProps?: El.FormItemProps;
-  gridItemProps?: any;
-  required?: boolean;
-  rules?: El.FormItemRule[];
-  hide?: FormColumnItemHide<F>; // 是否隐藏
-  tip?: string;
-  dictCode?: string; // 字典编码
-  slotName?: string;
-  slots?: FormColumnSlots;
-  extra?: string | (() => VNode); // 右侧额外内容
+  type: FormColumnType
+  label?: string
+  labelRender?: () => VNode
+  field: string
+  fieldName?: string
+  span?: number
+  props?: FormColumnProps
+  formItemProps?: El.FormItemProps
+  gridItemProps?: any
+  required?: boolean
+  rules?: El.FormItemRule[]
+  hide?: FormColumnItemHide<F> // 是否隐藏
+  tip?: string
+  dictCode?: string // 字典编码
+  slotName?: string
+  slots?: FormColumnSlots
+  extra?: string | (() => VNode) // 右侧额外内容
 }
 
 export interface FormProps extends Partial<ElFormProps> {
-  modelValue: any;
-  columns?: FormColumnItem[];
-  fc?: Record<string, { disabled?: boolean; hidden?: boolean; required?: boolean }>; // 表单控制
-  gridProps?: GridProps; // grid默认配置
-  gridItemProps?: GridItemProps; // grid-item默认配置
-  search?: boolean;
-  searchText?: string;
-  hideFoldBtn?: boolean;
-  defaultCollapsed?: boolean | undefined;
-}
+  modelValue: any
+  columns?: FormColumnItem[]
+  fc?: Record<string, { disabled?: boolean, hidden?: boolean, required?: boolean }> // 表单控制
+  gridProps?: GridProps // grid默认配置
+  gridItemProps?: GridItemProps // grid-item默认配置
+  search?: boolean
+  searchText?: string
+  hideFoldBtn?: boolean
+  defaultCollapsed?: boolean | undefined
+}

package/packages/components/grid/index.ts

@@ -1,8 +1,8 @@
-import GridItem from './src/grid-item.vue';
-import Grid from './src/grid.vue';
+import GridItem from './src/grid-item.vue'
+import Grid from './src/grid.vue'
 
-export type GridInstance = InstanceType<typeof Grid>;
-export type GridItemInstance = InstanceType<typeof GridItem>;
-export * from './src/interface';
+export type GridInstance = InstanceType<typeof Grid>
+export type GridItemInstance = InstanceType<typeof GridItem>
+export * from './src/interface'
 
-export { Grid, GridItem };
+export { Grid, GridItem }

package/packages/components/grid/src/context.ts

@@ -1,30 +1,30 @@
-import type { InjectionKey } from 'vue';
-import type { GridItemData } from './interface';
+import type { InjectionKey } from 'vue'
+import type { GridItemData } from './interface'
 
 export type RowContextContext = Readonly<{
-  gutter?: [number, number];
-  div?: boolean;
-}>;
+  gutter?: [number, number]
+  div?: boolean
+}>
 
 export const RowContextInjectionKey: InjectionKey<RowContextContext> = Symbol(
   'RowContextInjectionKey'
-);
+)
 
 export type GridContext = Readonly<{
-  overflow: boolean;
-  displayIndexList: number[];
-  cols: number;
-  colGap: number;
-}>;
+  overflow: boolean
+  displayIndexList: number[]
+  cols: number
+  colGap: number
+}>
 
 export const GridContextInjectionKey: InjectionKey<GridContext> = Symbol(
   'GridContextInjectionKey'
-);
+)
 
 export type GridDataCollector = Readonly<{
-  collectItemData: (index: number, itemData: GridItemData) => void;
-  removeItemData: (index: number) => void;
-}>;
+  collectItemData: (index: number, itemData: GridItemData) => void
+  removeItemData: (index: number) => void
+}>
 
-export const GridDataCollectorInjectionKey: InjectionKey<GridDataCollector> =
-  Symbol('GridDataCollectorInjectionKey');
+export const GridDataCollectorInjectionKey: InjectionKey<GridDataCollector>
+  = Symbol('GridDataCollectorInjectionKey')

package/packages/components/grid/src/grid-item.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from 'vue';
-import type { ResponsiveValue } from './interface';
+import type { PropType } from 'vue'
+import type { ResponsiveValue } from './interface'
 import {
   computed,
   defineComponent,
@@ -15,15 +15,15 @@ import {
   ref,
   toRefs,
   watchEffect
-} from 'vue';
+} from 'vue'
 import {
   GridContextInjectionKey,
   GridDataCollectorInjectionKey
-} from './context';
-import { useIndex } from './hook/use-index';
-import { useResponsiveState } from './hook/use-responsive-state';
-import { resolveItemData } from './utils';
-import { getPrefixCls } from './utils/global-config';
+} from './context'
+import { useIndex } from './hook/use-index'
+import { useResponsiveState } from './hook/use-responsive-state'
+import { resolveItemData } from './utils'
+import { getPrefixCls } from './utils/global-config'
 
 /**
  * @version 2.15.0
@@ -59,55 +59,55 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const prefixCls = getPrefixCls('grid-item');
-    const domRef = ref<HTMLDivElement>();
+    const prefixCls = getPrefixCls('grid-item')
+    const domRef = ref<HTMLDivElement>()
     const { computedIndex } = useIndex({
       itemRef: domRef,
       selector: `.${prefixCls}`
-    });
+    })
     const gridContext = inject(GridContextInjectionKey, {
       overflow: false,
       displayIndexList: [],
       cols: 24,
       colGap: 0
-    });
-    const gridDataCollector = inject(GridDataCollectorInjectionKey);
+    })
+    const gridDataCollector = inject(GridDataCollectorInjectionKey)
     const visible = computed(() =>
       gridContext?.displayIndexList?.includes(computedIndex.value)
-    );
-    const { span: propSpan, offset: propOffset } = toRefs(props);
-    const rSpan = useResponsiveState(propSpan, 1);
-    const rOffset = useResponsiveState(propOffset, 0);
+    )
+    const { span: propSpan, offset: propOffset } = toRefs(props)
+    const rSpan = useResponsiveState(propSpan, 1)
+    const rOffset = useResponsiveState(propOffset, 0)
     const itemData = computed(() =>
       resolveItemData(gridContext.cols, {
         ...props,
         span: rSpan.value,
         offset: rOffset.value
       })
-    );
+    )
 
-    const classNames = computed(() => [prefixCls]);
+    const classNames = computed(() => [prefixCls])
     const offsetStyle = computed(() => {
-      const { offset, span } = itemData.value;
-      const { colGap } = gridContext;
+      const { offset, span } = itemData.value
+      const { colGap } = gridContext
       if (offset > 0) {
-        const oneSpan = `(100% - ${colGap * (span - 1)}px) / ${span}`;
+        const oneSpan = `(100% - ${colGap * (span - 1)}px) / ${span}`
         return {
           'margin-left': `calc((${oneSpan} * ${offset}) + ${colGap * offset}px)`
-        };
+        }
       }
-      return {};
-    });
+      return {}
+    })
     const columnStart = computed(() => {
-      const { suffix, span } = itemData.value;
-      const { cols } = gridContext;
+      const { suffix, span } = itemData.value
+      const { cols } = gridContext
       if (suffix) {
-        return `${cols - span + 1}`;
+        return `${cols - span + 1}`
       }
-      return `span ${span}`;
-    });
+      return `span ${span}`
+    })
     const style = computed(() => {
-      const { span } = itemData.value;
+      const { span } = itemData.value
       if (domRef.value) {
         return [
           {
@@ -115,29 +115,29 @@ export default defineComponent({
           },
           offsetStyle.value,
           !visible.value || span === 0 ? { display: 'none' } : {}
-        ];
+        ]
       }
-      return [];
-    });
+      return []
+    })
 
     watchEffect(() => {
       if (computedIndex.value !== -1) {
-        gridDataCollector?.collectItemData(computedIndex.value, itemData.value);
+        gridDataCollector?.collectItemData(computedIndex.value, itemData.value)
       }
-    });
+    })
 
     onUnmounted(() => {
       if (computedIndex.value !== -1) {
-        gridDataCollector?.removeItemData(computedIndex.value);
+        gridDataCollector?.removeItemData(computedIndex.value)
       }
-    });
+    })
 
     return {
       classNames,
       style,
       domRef,
       overflow: computed(() => gridContext.overflow)
-    };
+    }
   }
-});
+})
 </script>

package/packages/components/grid/src/grid.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from 'vue';
-import type { GridItemData, ResponsiveValue } from './interface';
+import type { PropType } from 'vue'
+import type { GridItemData, ResponsiveValue } from './interface'
 import {
   computed,
   defineComponent,
@@ -14,14 +14,14 @@ import {
   reactive,
   toRefs,
   watchEffect
-} from 'vue';
+} from 'vue'
 import {
   GridContextInjectionKey,
   GridDataCollectorInjectionKey
-} from './context';
-import { useResponsiveState } from './hook/use-responsive-state';
-import { setItemVisible } from './utils';
-import { getPrefixCls } from './utils/global-config';
+} from './context'
+import { useResponsiveState } from './hook/use-responsive-state'
+import { setItemVisible } from './utils'
+import { getPrefixCls } from './utils/global-config'
 
 /**
  * @version 2.15.0
@@ -79,69 +79,69 @@ export default defineComponent({
       colGap: propColGap,
       collapsedRows,
       collapsed
-    } = toRefs(props);
-    const cols = useResponsiveState(propCols, 24);
-    const colGap = useResponsiveState(propColGap, 0);
-    const rowGap = useResponsiveState(propRowGap, 0);
-    const prefixCls = getPrefixCls('grid');
-    const classNames = computed(() => [prefixCls]);
+    } = toRefs(props)
+    const cols = useResponsiveState(propCols, 24)
+    const colGap = useResponsiveState(propColGap, 0)
+    const rowGap = useResponsiveState(propRowGap, 0)
+    const prefixCls = getPrefixCls('grid')
+    const classNames = computed(() => [prefixCls])
     const style = computed(() => [
       {
-        gap: `${rowGap.value}px ${colGap.value}px`,
+        'gap': `${rowGap.value}px ${colGap.value}px`,
         'grid-template-columns': `repeat(${cols.value}, minmax(0px, 1fr))`
       }
-    ]);
-    const itemDataMap = reactive<Map<number, GridItemData>>(new Map());
+    ])
+    const itemDataMap = reactive<Map<number, GridItemData>>(new Map())
     const itemDataList = computed(() => {
-      const list: GridItemData[] = [];
+      const list: GridItemData[] = []
       for (const [index, itemData] of itemDataMap.entries()) {
-        list[index] = itemData;
+        list[index] = itemData
       }
-      return list;
-    });
+      return list
+    })
     const gridContext = reactive<{
-      overflow: boolean;
-      displayIndexList: number[];
-      cols: number;
-      colGap: number;
+      overflow: boolean
+      displayIndexList: number[]
+      cols: number
+      colGap: number
     }>({
       overflow: false,
       displayIndexList: [],
       cols: cols.value,
       colGap: colGap.value
-    });
+    })
 
     watchEffect(() => {
-      gridContext.cols = cols.value;
-      gridContext.colGap = colGap.value;
-    });
+      gridContext.cols = cols.value
+      gridContext.colGap = colGap.value
+    })
     watchEffect(() => {
       const displayInfo = setItemVisible({
         cols: cols.value,
         collapsed: collapsed.value,
         collapsedRows: collapsedRows.value,
         itemDataList: itemDataList.value
-      });
-      gridContext.overflow = displayInfo.overflow;
-      gridContext.displayIndexList = displayInfo.displayIndexList;
-    });
+      })
+      gridContext.overflow = displayInfo.overflow
+      gridContext.displayIndexList = displayInfo.displayIndexList
+    })
 
-    provide(GridContextInjectionKey, gridContext);
+    provide(GridContextInjectionKey, gridContext)
     provide(GridDataCollectorInjectionKey, {
       collectItemData(index, itemData) {
-        itemDataMap.set(index, itemData);
+        itemDataMap.set(index, itemData)
       },
       removeItemData(index) {
-        itemDataMap.delete(index);
+        itemDataMap.delete(index)
       }
-    });
+    })
 
     return {
       classNames,
       style
-    };
+    }
   }
-});
+})
 </script>
 
 <style lang="scss" scoped>

package/packages/components/grid/src/hook/use-index.ts

@@ -1,8 +1,8 @@
-import type { Ref } from 'vue';
-import { computed, onMounted, onUpdated, ref, watch } from 'vue';
+import type { Ref } from 'vue'
+import { computed, onMounted, onUpdated, ref, watch } from 'vue'
 
 function isUndefined(obj: any): obj is undefined {
-  return obj === undefined;
+  return obj === undefined
 }
 
 export function useIndex({
@@ -11,53 +11,53 @@ export function useIndex({
   index,
   parentClassName
 }: {
-  itemRef: Ref<HTMLElement | undefined>;
-  selector: string;
-  index?: Ref<number | undefined>;
-  parentClassName?: string;
+  itemRef: Ref<HTMLElement | undefined>
+  selector: string
+  index?: Ref<number | undefined>
+  parentClassName?: string
 }) {
-  const _index = ref(-1);
-  const computedIndex = computed(() => index?.value ?? _index.value);
+  const _index = ref(-1)
+  const computedIndex = computed(() => index?.value ?? _index.value)
 
-  const parent = ref<HTMLElement>();
+  const parent = ref<HTMLElement>()
 
   const getParent = () => {
-    let parent = itemRef.value?.parentElement ?? undefined;
+    let parent = itemRef.value?.parentElement ?? undefined
     if (parentClassName) {
       while (parent && !parent.className.includes(parentClassName)) {
-        parent = parent.parentElement ?? undefined;
+        parent = parent.parentElement ?? undefined
       }
     }
-    return parent;
-  };
+    return parent
+  }
 
   const getIndex = () => {
     if (isUndefined(index?.value) && parent.value && itemRef.value) {
       const index = Array.from(parent.value.querySelectorAll(selector)).indexOf(
         itemRef.value
-      );
+      )
       if (index !== _index.value) {
-        _index.value = index;
+        _index.value = index
       }
     }
-  };
+  }
 
   watch(itemRef, () => {
     if (itemRef.value && !parent.value) {
-      parent.value = getParent();
+      parent.value = getParent()
     }
-  });
+  })
 
   onMounted(() => {
     if (itemRef.value) {
-      parent.value = getParent();
+      parent.value = getParent()
     }
-    getIndex();
-  });
+    getIndex()
+  })
 
-  onUpdated(() => getIndex());
+  onUpdated(() => getIndex())
 
   return {
     computedIndex
-  };
+  }
 }