gi-component 0.0.1

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

@@ -0,0 +1,143 @@
+<template>
+  <div ref="domRef" :class="classNames" :style="style">
+    <slot :overflow="overflow" />
+  </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import type { ResponsiveValue } from './interface';
+import {
+  computed,
+  defineComponent,
+  inject,
+  onUnmounted,
+  ref,
+  toRefs,
+  watchEffect
+} 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';
+
+/**
+ * @version 2.15.0
+ * @zh 响应式配置从 `2.18.0` 开始支持，具体配置 [ResponsiveValue](#responsivevalue)
+ * @en Responsive configuration has been supported since `2.18.0`, the specific configuration [ResponsiveValue](#responsivevalue)
+ */
+export default defineComponent({
+  name: 'GridItem',
+  props: {
+    /**
+     * @zh 跨越的格数
+     * @en Number of grids spanned
+     */
+    span: {
+      type: [Number, Object] as PropType<number | ResponsiveValue>,
+      default: 1
+    },
+    /**
+     * @zh 左侧的间隔格数
+     * @en Number of grids on the left
+     */
+    offset: {
+      type: [Number, Object] as PropType<number | ResponsiveValue>,
+      default: 0
+    },
+    /**
+     * @zh 是否是后缀元素
+     * @en Is it a suffix element
+     */
+    suffix: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    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 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 itemData = computed(() =>
+      resolveItemData(gridContext.cols, {
+        ...props,
+        span: rSpan.value,
+        offset: rOffset.value
+      })
+    );
+
+    const classNames = computed(() => [prefixCls]);
+    const offsetStyle = computed(() => {
+      const { offset, span } = itemData.value;
+      const { colGap } = gridContext;
+      if (offset > 0) {
+        const oneSpan = `(100% - ${colGap * (span - 1)}px) / ${span}`;
+        return {
+          'margin-left': `calc((${oneSpan} * ${offset}) + ${colGap * offset}px)`
+        };
+      }
+      return {};
+    });
+    const columnStart = computed(() => {
+      const { suffix, span } = itemData.value;
+      const { cols } = gridContext;
+      if (suffix) {
+        return `${cols - span + 1}`;
+      }
+      return `span ${span}`;
+    });
+    const style = computed(() => {
+      const { span } = itemData.value;
+      if (domRef.value) {
+        return [
+          {
+            'grid-column': `${columnStart.value} / span ${span}`
+          },
+          offsetStyle.value,
+          !visible.value || span === 0 ? { display: 'none' } : {}
+        ];
+      }
+      return [];
+    });
+
+    watchEffect(() => {
+      if (computedIndex.value !== -1) {
+        gridDataCollector?.collectItemData(computedIndex.value, itemData.value);
+      }
+    });
+
+    onUnmounted(() => {
+      if (computedIndex.value !== -1) {
+        gridDataCollector?.removeItemData(computedIndex.value);
+      }
+    });
+
+    return {
+      classNames,
+      style,
+      domRef,
+      overflow: computed(() => gridContext.overflow)
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,151 @@
+<template>
+  <div :class="classNames" :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import type { GridItemData, ResponsiveValue } from './interface';
+import {
+  computed,
+  defineComponent,
+  provide,
+  reactive,
+  toRefs,
+  watchEffect
+} from 'vue';
+import {
+  GridContextInjectionKey,
+  GridDataCollectorInjectionKey
+} from './context';
+import { useResponsiveState } from './hook/use-responsive-state';
+import { setItemVisible } from './utils';
+import { getPrefixCls } from './utils/global-config';
+
+/**
+ * @version 2.15.0
+ * @zh 响应式配置从 `2.18.0` 开始支持，具体配置 [ResponsiveValue](#responsivevalue)
+ * @en Responsive configuration has been supported since `2.18.0`, the specific configuration [ResponsiveValue](#responsivevalue)
+ */
+export default defineComponent({
+  name: 'Grid',
+  props: {
+    /**
+     * @zh 每一行展示的列数
+     * @en Number of columns displayed in each row
+     */
+    cols: {
+      type: [Number, Object] as PropType<number | ResponsiveValue>,
+      default: 24
+    },
+    /**
+     * @zh 行与行之间的间距
+     * @en The space in row-to-row
+     */
+    rowGap: {
+      type: [Number, Object] as PropType<number | ResponsiveValue>,
+      default: 0
+    },
+    /**
+     * @zh 列与列之间的间距
+     * @en The space in column-to-column
+     */
+    colGap: {
+      type: [Number, Object] as PropType<number | ResponsiveValue>,
+      default: 0
+    },
+    /**
+     * @zh 是否折叠
+     * @en Whether to collapsed
+     */
+    collapsed: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @zh 折叠时显示的行数
+     * @en Number of rows displayed when collapsed
+     */
+    collapsedRows: {
+      type: Number,
+      default: 1
+    }
+  },
+  setup(props) {
+    const {
+      cols: propCols,
+      rowGap: propRowGap,
+      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]);
+    const style = computed(() => [
+      {
+        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 itemDataList = computed(() => {
+      const list: GridItemData[] = [];
+      for (const [index, itemData] of itemDataMap.entries()) {
+        list[index] = itemData;
+      }
+      return list;
+    });
+    const gridContext = reactive<{
+      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;
+    });
+    watchEffect(() => {
+      const displayInfo = setItemVisible({
+        cols: cols.value,
+        collapsed: collapsed.value,
+        collapsedRows: collapsedRows.value,
+        itemDataList: itemDataList.value
+      });
+      gridContext.overflow = displayInfo.overflow;
+      gridContext.displayIndexList = displayInfo.displayIndexList;
+    });
+
+    provide(GridContextInjectionKey, gridContext);
+    provide(GridDataCollectorInjectionKey, {
+      collectItemData(index, itemData) {
+        itemDataMap.set(index, itemData);
+      },
+      removeItemData(index) {
+        itemDataMap.delete(index);
+      }
+    });
+
+    return {
+      classNames,
+      style
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.gi-grid {
+  display: grid;
+}
+</style>

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

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

package/packages/components/grid/src/hook/use-responsive-state.ts

@@ -0,0 +1,66 @@
+import type { Ref } from 'vue';
+import type { ResponsiveValue } from '../interface';
+import type { ScreenMap } from '../utils/responsive-observe';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { isObject } from '../utils/is';
+import ResponsiveObserve, {
+  responsiveArray
+} from '../utils/responsive-observe';
+
+function isResponsiveValue(
+  val: number | ResponsiveValue
+): val is ResponsiveValue {
+  return isObject(val);
+}
+
+export function useResponsiveState(
+  val: Ref<number | ResponsiveValue>,
+  defaultVal: number,
+  fallbackToXs = false
+) {
+  const screens = ref<ScreenMap>({
+    xs: true,
+    sm: true,
+    md: true,
+    lg: true,
+    xl: true,
+    xxl: true
+  });
+  const result = computed(() => {
+    let res = defaultVal;
+    if (isResponsiveValue(val.value)) {
+      for (let i = 0; i < responsiveArray.length; i++) {
+        const breakpoint = responsiveArray[i];
+        if (
+          (screens.value[breakpoint] ||
+            (breakpoint === 'xs' && fallbackToXs)) &&
+          val.value[breakpoint] !== undefined
+        ) {
+          res = val.value[breakpoint] as number;
+          break;
+        }
+      }
+    } else {
+      res = val.value;
+    }
+    return res;
+  });
+
+  let subscribeToken = '';
+
+  onMounted(() => {
+    subscribeToken = ResponsiveObserve.subscribe(screensVal => {
+      if (isResponsiveValue(val.value)) {
+        screens.value = screensVal;
+      }
+    });
+  });
+
+  onUnmounted(() => {
+    if (subscribeToken) {
+      ResponsiveObserve.unsubscribe(subscribeToken);
+    }
+  });
+
+  return result;
+}

package/packages/components/grid/src/hook/use-responsive-value.ts

@@ -0,0 +1,36 @@
+import type { Ref } from 'vue';
+import type { ResponsiveValue } from '../interface';
+import { computed } from 'vue';
+import { isNumber, isObject } from '../utils/is';
+import { responsiveArray } from '../utils/responsive-observe';
+
+export function useResponsiveValue(
+  props: Ref<{
+    val: number;
+    key: string;
+    xs?: number | { [key: string]: any };
+    sm?: number | { [key: string]: any };
+    md?: number | { [key: string]: any };
+    lg?: number | { [key: string]: any };
+    xl?: number | { [key: string]: any };
+    xxl?: number | { [key: string]: any };
+  }>
+) {
+  const value = computed(() => {
+    const { val, key, xs, sm, md, lg, xl, xxl } = props.value;
+    if (!xs && !sm && !md && !lg && !xl && !xxl) {
+      return val;
+    }
+    const result: ResponsiveValue = {};
+    responsiveArray.forEach(breakpoint => {
+      const config = props.value[breakpoint];
+      if (isNumber(config)) {
+        result[breakpoint] = config;
+      } else if (isObject(config) && isNumber(config[key])) {
+        result[breakpoint] = config[key];
+      }
+    });
+    return result;
+  });
+  return value;
+}

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

@@ -0,0 +1,74 @@
+export interface ResponsiveValue {
+  /**
+   * @zh >= 1600px 响应式配置
+   * @en >= 1600px responsive configuration
+   */
+  xxl?: number;
+  /**
+   * @zh >= 1200px 响应式配置
+   * @en >= 1200px responsive configuration
+   */
+  xl?: number;
+  /**
+   * @zh >= 992px 响应式配置
+   * @en >= 992px responsive configuration
+   */
+  lg?: number;
+  /**
+   * @zh >= 768px 响应式配置
+   * @en >= 768px responsive configuration
+   */
+  md?: number;
+  /**
+   * @zh >= 576px 响应式配置
+   * @en >= 576px responsive configuration
+   */
+  sm?: number;
+  /**
+   * @zh < 576px 响应式配置
+   * @en <576px responsive configuration
+   */
+  xs?: number;
+}
+
+export type FlexType = number | string | 'initial' | 'auto' | 'none';
+
+export interface RowProps {
+  gutter?: number | ResponsiveValue | ResponsiveValue[];
+  justify?: 'start' | 'center' | 'end' | 'space-around' | 'space-between';
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  div?: boolean;
+  wrap?: boolean;
+}
+
+export interface ColProps {
+  span?: number;
+  offset?: number | undefined;
+  order?: number | undefined;
+  xs?: number | { [key: string]: any } | undefined;
+  sm?: number | { [key: string]: any } | undefined;
+  md?: number | { [key: string]: any } | undefined;
+  lg?: number | { [key: string]: any } | undefined;
+  xl?: number | { [key: string]: any } | undefined;
+  xxl?: number | { [key: string]: any } | undefined;
+  flex?: number | string | 'initial' | 'auto' | 'none' | undefined;
+}
+
+export interface GridProps {
+  cols?: number | ResponsiveValue;
+  rowGap?: number | ResponsiveValue;
+  colGap?: number | ResponsiveValue;
+  collapsed?: boolean;
+  collapsedRows?: number;
+}
+
+export interface GridItemProps {
+  span?: number | ResponsiveValue;
+  offset?: number | ResponsiveValue;
+  suffix?: boolean;
+}
+
+export interface GridItemData extends GridItemProps {
+  span: number;
+  offset: number;
+}

package/packages/components/grid/src/utils/global-config.ts

@@ -0,0 +1,6 @@
+import { useBemClass } from '../../../../hooks';
+
+export function getPrefixCls(name: string) {
+  const { b } = useBemClass();
+  return b(name);
+}

package/packages/components/grid/src/utils/index.ts

@@ -0,0 +1,73 @@
+import type { GridItemData } from '../interface';
+
+export function resolveItemData(
+  cols: number,
+  props: GridItemData
+): GridItemData {
+  const originSpan = props.span ?? 1;
+  const originOffset = props.offset ?? 0;
+  const offset = Math.min(originOffset, cols);
+  const span = Math.min(
+    offset > 0 ? originSpan + originOffset : originSpan,
+    cols
+  );
+  return {
+    span,
+    offset,
+    suffix: 'suffix' in props ? props.suffix !== false : false
+  };
+}
+
+export function setItemVisible({
+  cols,
+  collapsed,
+  collapsedRows,
+  itemDataList
+}: {
+  cols: number;
+  collapsed: boolean;
+  collapsedRows: number;
+  itemDataList: GridItemData[];
+}) {
+  let overflow = false;
+  let displayIndexList: number[] = [];
+
+  function isOverflow(span: number) {
+    return Math.ceil(span / cols) > collapsedRows;
+  }
+
+  if (collapsed) {
+    let spanSum = 0;
+    for (let i = 0; i < itemDataList.length; i++) {
+      if (itemDataList[i].suffix) {
+        spanSum += itemDataList[i].span;
+        displayIndexList.push(i);
+      }
+    }
+    if (!isOverflow(spanSum)) {
+      let current = 0;
+      while (current < itemDataList.length) {
+        const item = itemDataList[current];
+        if (!item.suffix) {
+          spanSum += item.span;
+
+          if (isOverflow(spanSum)) {
+            break;
+          }
+          displayIndexList.push(current);
+        }
+        current++;
+      }
+    }
+    overflow = itemDataList.some(
+      (item, index) => !item.suffix && !displayIndexList.includes(index)
+    );
+  } else {
+    displayIndexList = itemDataList.map((_, index) => index);
+  }
+
+  return {
+    overflow,
+    displayIndexList
+  };
+}

package/packages/components/grid/src/utils/is.ts

@@ -0,0 +1,9 @@
+const opt = Object.prototype.toString;
+
+export function isObject(obj: unknown): obj is Record<string, any> {
+  return opt.call(obj) === '[object Object]';
+}
+
+export function isNumber(obj: any): obj is number {
+  return opt.call(obj) === '[object Number]' && obj === obj; // eslint-disable-line
+}