gi-component 0.0.49 → 0.0.50

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

@@ -1,30 +0,0 @@
-import type { InjectionKey } from 'vue'
-import type { GridItemData } from './interface'
-
-export type RowContextContext = Readonly<{
-  gutter?: [number, number]
-  div?: boolean
-}>
-
-export const RowContextInjectionKey: InjectionKey<RowContextContext> = Symbol(
-  'RowContextInjectionKey'
-)
-
-export type GridContext = Readonly<{
-  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
-}>
-
-export const GridDataCollectorInjectionKey: InjectionKey<GridDataCollector>
-  = Symbol('GridDataCollectorInjectionKey')

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

@@ -1,143 +0,0 @@
-<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

@@ -1,151 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

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

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

@@ -1,73 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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
-}