@antsoo-lib/components 0.1.11 → 0.1.13

package/src/vc-steps/Steps.tsx

@@ -1,146 +0,0 @@
-import { defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import { filterEmpty } from '../_util/props-util'
-import type { VueNode } from '../_util/type'
-import { functionType, stringType } from '../_util/type'
-import { cloneElement } from '../_util/vnode'
-import PropTypes from '../_util/vue-types'
-import type { VCStepProps } from './Step'
-import Step from './Step'
-import type { Status, StepIconRender } from './interface'
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'Steps',
-  props: {
-    type: PropTypes.string.def('default'),
-    prefixCls: PropTypes.string.def('vc-steps'),
-    iconPrefix: PropTypes.string.def('vc'),
-    direction: PropTypes.string.def('horizontal'),
-    labelPlacement: PropTypes.string.def('horizontal'),
-    status: stringType<Status>('process'),
-    size: PropTypes.string.def(''),
-    progressDot: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(undefined),
-    initial: PropTypes.number.def(0),
-    current: PropTypes.number.def(0),
-    items: PropTypes.array.def(() => []),
-    icons: PropTypes.shape({
-      finish: PropTypes.any,
-      error: PropTypes.any,
-    }).loose,
-    stepIcon: functionType<StepIconRender>(),
-    isInline: PropTypes.looseBool,
-    itemRender: functionType<(item: Record<string, any>, stepItem: VueNode) => VueNode>(),
-  },
-  emits: ['change'],
-  setup(props, { slots, emit }) {
-    const onStepClick = (next: number) => {
-      const { current } = props
-      if (current !== next) {
-        emit('change', next)
-      }
-    }
-    const renderStep = (item: VCStepProps, index: number, legacyRender?: any) => {
-      const {
-        prefixCls,
-        iconPrefix,
-        status,
-        current,
-        initial,
-        icons,
-        stepIcon = slots.stepIcon,
-        isInline,
-        itemRender,
-        progressDot = slots.progressDot,
-      } = props
-      const mergedProgressDot = isInline || progressDot
-      const mergedItem = { ...item, class: '' }
-      const stepNumber = initial + index
-      const commonProps = {
-        active: stepNumber === current,
-        stepNumber: stepNumber + 1,
-        stepIndex: stepNumber,
-        key: stepNumber,
-        prefixCls,
-        iconPrefix,
-        progressDot: mergedProgressDot,
-        stepIcon,
-        icons,
-        onStepClick,
-      }
-      // fix tail color
-      if (status === 'error' && index === current - 1) {
-        mergedItem.class = `${prefixCls}-next-error`
-      }
-
-      if (!mergedItem.status) {
-        if (stepNumber === current) {
-          mergedItem.status = status
-        } else if (stepNumber < current) {
-          mergedItem.status = 'finish'
-        } else {
-          mergedItem.status = 'wait'
-        }
-      }
-
-      if (isInline) {
-        mergedItem.icon = undefined
-        mergedItem.subTitle = undefined
-      }
-      if (legacyRender) {
-        return legacyRender({ ...mergedItem, ...commonProps })
-      }
-      if (itemRender) {
-        mergedItem.itemRender = (stepItem) => itemRender(mergedItem, stepItem)
-      }
-
-      return <Step {...mergedItem} {...commonProps} __legacy={false} />
-    }
-    const renderStepWithNode = (node: any, index: number) => {
-      return renderStep({ ...node.props }, index, (stepProps) => {
-        const stepNode = cloneElement(node, stepProps)
-        return stepNode
-      })
-    }
-    return () => {
-      const {
-        prefixCls,
-        direction,
-        type,
-        labelPlacement,
-        iconPrefix,
-        status,
-        size,
-        current,
-        progressDot = slots.progressDot,
-        initial,
-        icons,
-        items,
-        isInline,
-        itemRender,
-        ...restProps
-      } = props
-      const isNav = type === 'navigation'
-      const mergedProgressDot = isInline || progressDot
-      const mergedDirection = isInline ? 'horizontal' : direction
-      const mergedSize = isInline ? undefined : size
-
-      const adjustedLabelPlacement = mergedProgressDot ? 'vertical' : labelPlacement
-      const classString = classNames(prefixCls, `${prefixCls}-${direction}`, {
-        [`${prefixCls}-${mergedSize}`]: mergedSize,
-        [`${prefixCls}-label-${adjustedLabelPlacement}`]: mergedDirection === 'horizontal',
-        [`${prefixCls}-dot`]: !!mergedProgressDot,
-        [`${prefixCls}-navigation`]: isNav,
-        [`${prefixCls}-inline`]: isInline,
-      })
-
-      return (
-        <div class={classString} {...restProps}>
-          {items.filter((item) => item).map((item, index) => renderStep(item, index))}
-          {filterEmpty(slots.default?.()).map(renderStepWithNode)}
-        </div>
-      )
-    }
-  },
-})

package/src/vc-steps/index.ts

@@ -1,6 +0,0 @@
-// base rc-steps 4.1.3
-import Step from './Step'
-import Steps from './Steps'
-
-export { Step }
-export default Steps

package/src/vc-steps/interface.ts

@@ -1,16 +0,0 @@
-export type Status = 'error' | 'process' | 'finish' | 'wait'
-export type StepIconRender = (info: {
-  index: number
-  status: Status
-  title: any
-  description: any
-  node: any
-}) => any
-
-export type ProgressDotRender = (info: {
-  iconDot: any
-  index: number
-  status: Status
-  title: any
-  description: any
-}) => any

package/src/vc-table/Body/BodyRow.tsx

@@ -1,217 +0,0 @@
-import { computed, defineComponent, shallowRef, watchEffect } from 'vue'
-
-import type { MouseEventHandler } from '../../_util/EventInterface'
-import classNames from '../../_util/classNames'
-import Cell from '../Cell'
-import { useInjectBody } from '../context/BodyContext'
-import { useInjectTable } from '../context/TableContext'
-import type { CustomizeComponent, GetComponentProps, GetRowKey, Key } from '../interface'
-import { getColumnsKey } from '../utils/valueUtil'
-import ExpandedRow from './ExpandedRow'
-
-export interface BodyRowProps<RecordType> {
-  record: RecordType
-  index: number
-  renderIndex: number
-  recordKey: Key
-  expandedKeys: Set<Key>
-  rowComponent: CustomizeComponent
-  cellComponent: CustomizeComponent
-  customRow: GetComponentProps<RecordType>
-  rowExpandable: (record: RecordType) => boolean
-  indent?: number
-  rowKey: Key
-  getRowKey: GetRowKey<RecordType>
-  childrenColumnName: string
-}
-
-export default defineComponent<BodyRowProps<unknown>>({
-  name: 'BodyRow',
-  inheritAttrs: false,
-  props: [
-    'record',
-    'index',
-    'renderIndex',
-    'recordKey',
-    'expandedKeys',
-    'rowComponent',
-    'cellComponent',
-    'customRow',
-    'rowExpandable',
-    'indent',
-    'rowKey',
-    'getRowKey',
-    'childrenColumnName',
-  ] as any,
-  setup(props, { attrs }) {
-    const tableContext = useInjectTable()
-    const bodyContext = useInjectBody()
-    const expandRended = shallowRef(false)
-
-    const expanded = computed(() => props.expandedKeys && props.expandedKeys.has(props.recordKey))
-
-    watchEffect(() => {
-      if (expanded.value) {
-        expandRended.value = true
-      }
-    })
-
-    const rowSupportExpand = computed(
-      () =>
-        bodyContext.expandableType === 'row' &&
-        (!props.rowExpandable || props.rowExpandable(props.record)),
-    )
-    // Only when row is not expandable and `children` exist in record
-    const nestExpandable = computed(() => bodyContext.expandableType === 'nest')
-    const hasNestChildren = computed(
-      () => props.childrenColumnName && props.record && props.record[props.childrenColumnName],
-    )
-    const mergedExpandable = computed(() => rowSupportExpand.value || nestExpandable.value)
-
-    const onInternalTriggerExpand = (record, event) => {
-      bodyContext.onTriggerExpand(record, event)
-    }
-
-    // =========================== onRow ===========================
-    const additionalProps = computed<Record<string, any>>(
-      () => props.customRow?.(props.record, props.index) || {},
-    )
-
-    const onClick: MouseEventHandler = (event, ...args) => {
-      if (bodyContext.expandRowByClick && mergedExpandable.value) {
-        onInternalTriggerExpand(props.record, event)
-      }
-
-      additionalProps.value?.onClick?.(event, ...args)
-    }
-
-    const computeRowClassName = computed(() => {
-      const { record, index, indent } = props
-      const { rowClassName } = bodyContext
-      if (typeof rowClassName === 'string') {
-        return rowClassName
-      } else if (typeof rowClassName === 'function') {
-        return rowClassName(record, index, indent)
-      }
-      return ''
-    })
-
-    const columnsKey = computed(() => getColumnsKey(bodyContext.flattenColumns))
-
-    return () => {
-      const { class: className, style } = attrs as any
-      const { record, index, rowKey, indent = 0, rowComponent: RowComponent, cellComponent } = props
-      const { prefixCls, fixedInfoList, transformCellText } = tableContext
-      const {
-        flattenColumns,
-        expandedRowClassName,
-        indentSize,
-        expandIcon,
-        expandedRowRender,
-        expandIconColumnIndex,
-      } = bodyContext
-      const baseRowNode = (
-        <RowComponent
-          {...additionalProps.value}
-          data-row-key={rowKey}
-          class={classNames(
-            className,
-            `${prefixCls}-row`,
-            `${prefixCls}-row-level-${indent}`,
-            computeRowClassName.value,
-            additionalProps.value.class,
-          )}
-          style={[style, additionalProps.value.style]}
-          onClick={onClick}
-        >
-          {flattenColumns.map((column, colIndex) => {
-            const { customRender, dataIndex, className: columnClassName } = column
-
-            const key = columnsKey[colIndex]
-            const fixedInfo = fixedInfoList[colIndex]
-
-            let additionalCellProps
-            if (column.customCell) {
-              additionalCellProps = column.customCell(record, index, column)
-            }
-            // not use slot to fix https://github.com/vueComponent/ant-design-vue/issues/5295
-            const appendNode =
-              colIndex === (expandIconColumnIndex || 0) && nestExpandable.value ? (
-                <>
-                  <span
-                    style={{ paddingLeft: `${indentSize * indent}px` }}
-                    class={`${prefixCls}-row-indent indent-level-${indent}`}
-                  />
-                  {expandIcon({
-                    prefixCls,
-                    expanded: expanded.value,
-                    expandable: hasNestChildren.value,
-                    record,
-                    onExpand: onInternalTriggerExpand,
-                  })}
-                </>
-              ) : null
-            return (
-              <Cell
-                cellType="body"
-                class={columnClassName}
-                ellipsis={column.ellipsis}
-                align={column.align}
-                component={cellComponent}
-                prefixCls={prefixCls}
-                key={key}
-                record={record}
-                index={index}
-                renderIndex={props.renderIndex}
-                dataIndex={dataIndex}
-                customRender={customRender}
-                {...fixedInfo}
-                additionalProps={additionalCellProps}
-                column={column}
-                transformCellText={transformCellText}
-                appendNode={appendNode}
-              />
-            )
-          })}
-        </RowComponent>
-      )
-
-      // ======================== Expand Row =========================
-      let expandRowNode
-      if (rowSupportExpand.value && (expandRended.value || expanded.value)) {
-        const expandContent = expandedRowRender({
-          record,
-          index,
-          indent: indent + 1,
-          expanded: expanded.value,
-        })
-        const computedExpandedRowClassName =
-          expandedRowClassName && expandedRowClassName(record, index, indent)
-        expandRowNode = (
-          <ExpandedRow
-            expanded={expanded.value}
-            class={classNames(
-              `${prefixCls}-expanded-row`,
-              `${prefixCls}-expanded-row-level-${indent + 1}`,
-              computedExpandedRowClassName,
-            )}
-            prefixCls={prefixCls}
-            component={RowComponent}
-            cellComponent={cellComponent}
-            colSpan={flattenColumns.length}
-            isEmpty={false}
-          >
-            {expandContent}
-          </ExpandedRow>
-        )
-      }
-
-      return (
-        <>
-          {baseRowNode}
-          {expandRowNode}
-        </>
-      )
-    }
-  },
-})

package/src/vc-table/Body/ExpandedRow.tsx

@@ -1,68 +0,0 @@
-import { defineComponent } from 'vue'
-
-import Cell from '../Cell'
-import { useInjectExpandedRow } from '../context/ExpandedRowContext'
-import { useInjectTable } from '../context/TableContext'
-import type { CustomizeComponent } from '../interface'
-
-export interface ExpandedRowProps {
-  prefixCls: string
-  component: CustomizeComponent
-  cellComponent: CustomizeComponent
-  expanded: boolean
-  colSpan: number
-  isEmpty: boolean
-}
-
-export default defineComponent<ExpandedRowProps>({
-  name: 'ExpandedRow',
-  inheritAttrs: false,
-  props: ['prefixCls', 'component', 'cellComponent', 'expanded', 'colSpan', 'isEmpty'] as any,
-  setup(props, { slots, attrs }) {
-    const tableContext = useInjectTable()
-    const expandedRowContext = useInjectExpandedRow()
-    const { fixHeader, fixColumn, componentWidth, horizonScroll } = expandedRowContext
-    return () => {
-      const { prefixCls, component: Component, cellComponent, expanded, colSpan, isEmpty } = props
-
-      return (
-        <Component
-          class={attrs.class}
-          style={{
-            display: expanded ? null : 'none',
-          }}
-        >
-          <Cell
-            component={cellComponent}
-            prefixCls={prefixCls}
-            colSpan={colSpan}
-            v-slots={{
-              default: () => {
-                let contentNode: any = slots.default?.()
-
-                if (isEmpty ? horizonScroll.value : fixColumn.value) {
-                  contentNode = (
-                    <div
-                      style={{
-                        width: `${
-                          componentWidth.value - (fixHeader.value ? tableContext.scrollbarSize : 0)
-                        }px`,
-                        position: 'sticky',
-                        left: 0,
-                        overflow: 'hidden',
-                      }}
-                      class={`${prefixCls}-expanded-row-fixed`}
-                    >
-                      {contentNode}
-                    </div>
-                  )
-                }
-                return contentNode
-              },
-            }}
-          ></Cell>
-        </Component>
-      )
-    }
-  },
-})

package/src/vc-table/Body/MeasureCell.tsx

@@ -1,35 +0,0 @@
-import { defineComponent, onMounted, ref } from 'vue'
-
-import VCResizeObserver from '../../vc-resize-observer'
-import type { Key } from '../interface'
-
-export interface MeasureCellProps {
-  columnKey: Key
-  onColumnResize: (key: Key, width: number) => void
-}
-
-export default defineComponent<MeasureCellProps>({
-  name: 'MeasureCell',
-  props: ['columnKey'] as any,
-  setup(props, { emit }) {
-    const tdRef = ref<HTMLTableCellElement>()
-    onMounted(() => {
-      if (tdRef.value) {
-        emit('columnResize', props.columnKey, tdRef.value.offsetWidth)
-      }
-    })
-    return () => {
-      return (
-        <VCResizeObserver
-          onResize={({ offsetWidth }) => {
-            emit('columnResize', props.columnKey, offsetWidth)
-          }}
-        >
-          <td ref={tdRef} style={{ padding: 0, border: 0, height: 0 }}>
-            <div style={{ height: 0, overflow: 'hidden' }}>&nbsp;</div>
-          </td>
-        </VCResizeObserver>
-      )
-    }
-  },
-})

package/src/vc-table/Body/index.tsx

@@ -1,146 +0,0 @@
-// base rc-table@7.17.2
-import { defineComponent, shallowRef, toRef } from 'vue'
-
-import { useInjectBody } from '../context/BodyContext'
-import { useProvideHover } from '../context/HoverContext'
-import { useInjectResize } from '../context/ResizeContext'
-import { useInjectTable } from '../context/TableContext'
-import useFlattenRecords from '../hooks/useFlattenRecords'
-import type { GetComponentProps, GetRowKey, Key } from '../interface'
-import { getColumnsKey } from '../utils/valueUtil'
-import BodyRow from './BodyRow'
-import ExpandedRow from './ExpandedRow'
-import MeasureCell from './MeasureCell'
-
-export interface BodyProps<RecordType> {
-  data: RecordType[]
-  getRowKey: GetRowKey<RecordType>
-  measureColumnWidth: boolean
-  expandedKeys: Set<Key>
-  customRow: GetComponentProps<RecordType>
-  rowExpandable: (record: RecordType) => boolean
-  childrenColumnName: string
-}
-
-export default defineComponent<BodyProps<any>>({
-  name: 'TableBody',
-  props: [
-    'data',
-    'getRowKey',
-    'measureColumnWidth',
-    'expandedKeys',
-    'customRow',
-    'rowExpandable',
-    'childrenColumnName',
-  ] as any,
-  setup(props, { slots }) {
-    const resizeContext = useInjectResize()
-    const tableContext = useInjectTable()
-    const bodyContext = useInjectBody()
-
-    const flattenData = useFlattenRecords(
-      toRef(props, 'data'),
-      toRef(props, 'childrenColumnName'),
-      toRef(props, 'expandedKeys'),
-      toRef(props, 'getRowKey'),
-    )
-    const startRow = shallowRef(-1)
-    const endRow = shallowRef(-1)
-    let timeoutId: any
-    useProvideHover({
-      startRow,
-      endRow,
-      onHover: (start, end) => {
-        clearTimeout(timeoutId)
-        timeoutId = setTimeout(() => {
-          startRow.value = start
-          endRow.value = end
-        }, 100)
-      },
-    })
-    return () => {
-      const {
-        data,
-        getRowKey,
-        measureColumnWidth,
-        expandedKeys,
-        customRow,
-        rowExpandable,
-        childrenColumnName,
-      } = props
-      const { onColumnResize } = resizeContext
-      const { prefixCls, getComponent } = tableContext
-      const { flattenColumns } = bodyContext
-      const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody')
-      const trComponent = getComponent(['body', 'row'], 'tr')
-      const tdComponent = getComponent(['body', 'cell'], 'td')
-
-      let rows
-      if (data.length) {
-        rows = flattenData.value.map((item, idx) => {
-          const { record, indent, index: renderIndex } = item
-
-          const key = getRowKey(record, idx)
-
-          return (
-            <BodyRow
-              key={key}
-              rowKey={key}
-              record={record}
-              recordKey={key}
-              index={idx}
-              renderIndex={renderIndex}
-              rowComponent={trComponent}
-              cellComponent={tdComponent}
-              expandedKeys={expandedKeys}
-              customRow={customRow}
-              getRowKey={getRowKey}
-              rowExpandable={rowExpandable}
-              childrenColumnName={childrenColumnName}
-              indent={indent}
-            />
-          )
-        })
-      } else {
-        rows = (
-          <ExpandedRow
-            expanded
-            class={`${prefixCls}-placeholder`}
-            prefixCls={prefixCls}
-            component={trComponent}
-            cellComponent={tdComponent}
-            colSpan={flattenColumns.length}
-            isEmpty
-          >
-            {slots.emptyNode?.()}
-          </ExpandedRow>
-        )
-      }
-
-      const columnsKey = getColumnsKey(flattenColumns)
-
-      return (
-        <WrapperComponent class={`${prefixCls}-tbody`}>
-          {/* Measure body column width with additional hidden col */}
-          {measureColumnWidth && (
-            <tr
-              aria-hidden="true"
-              class={`${prefixCls}-measure-row`}
-              style={{ height: 0, fontSize: 0 }}
-            >
-              {columnsKey.map((columnKey) => (
-                <MeasureCell
-                  key={columnKey}
-                  columnKey={columnKey}
-                  onColumnResize={onColumnResize}
-                />
-              ))}
-            </tr>
-          )}
-
-          {rows}
-        </WrapperComponent>
-      )
-    }
-  },
-})