@antsoo-lib/components 0.1.11 → 0.1.13

package/src/transfer/index.tsx

@@ -1,455 +0,0 @@
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-import { computed, defineComponent, ref, toRaw, watch, watchEffect } from 'vue'
-
-import classNames from '../_util/classNames'
-import { getPropsSlot } from '../_util/props-util'
-import type { InputStatus } from '../_util/statusUtils'
-import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'
-import { groupDisabledKeysMap, groupKeysMap } from '../_util/transKeys'
-import type { CustomSlotsType, VueNode } from '../_util/type'
-import {
-  arrayType,
-  booleanType,
-  functionType,
-  objectType,
-  someType,
-  stringType,
-  withInstall,
-} from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import type { RenderEmptyHandler } from '../config-provider/renderEmpty'
-import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'
-import LocaleReceiver from '../locale-provider/LocaleReceiver'
-import defaultLocale from '../locale/en_US'
-import type { TransferListBodyProps } from './ListBody'
-import type { PaginationType } from './interface'
-import List from './list'
-import Operation from './operation'
-// CSSINJS
-import useStyle from './style'
-
-export type { TransferListProps } from './list'
-export type { TransferOperationProps } from './operation'
-export type { TransferSearchProps } from './search'
-
-export type TransferDirection = 'left' | 'right'
-
-export interface RenderResultObject {
-  label: VueNode
-  value: string
-}
-
-export type RenderResult = VueNode | RenderResultObject | string | null
-
-export interface TransferItem {
-  key?: string
-  title?: string
-  description?: string
-  disabled?: boolean
-  [name: string]: any
-}
-
-export type KeyWise<T> = T & { key: string }
-
-export type KeyWiseTransferItem = KeyWise<TransferItem>
-
-type TransferRender<RecordType> = (item: RecordType) => RenderResult
-
-export interface ListStyle {
-  direction: TransferDirection
-}
-
-export type SelectAllLabel =
-  | VueNode
-  | ((info: { selectedCount: number; totalCount: number }) => VueNode)
-
-export interface TransferLocale {
-  titles?: VueNode[]
-  notFoundContent?: VueNode
-  searchPlaceholder: string
-  itemUnit: string
-  itemsUnit: string
-  remove?: string
-  selectAll?: string
-  selectCurrent?: string
-  selectInvert?: string
-  removeAll?: string
-  removeCurrent?: string
-}
-
-export const transferProps = () => ({
-  id: String,
-  prefixCls: String,
-  dataSource: arrayType<TransferItem[]>([]),
-  disabled: booleanType(),
-  targetKeys: arrayType<string[]>(),
-  selectedKeys: arrayType<string[]>(),
-  render: functionType<TransferRender<TransferItem>>(),
-  listStyle: someType<((style: ListStyle) => CSSProperties) | CSSProperties>(
-    [Function, Object],
-    () => ({}),
-  ),
-  operationStyle: objectType<CSSProperties>(undefined as CSSProperties),
-  titles: arrayType<string[]>(),
-  operations: arrayType<string[]>(),
-  showSearch: booleanType(false),
-  filterOption: functionType<(inputValue: string, item: TransferItem) => boolean>(),
-  searchPlaceholder: String,
-  notFoundContent: PropTypes.any,
-  locale: objectType(),
-  rowKey: functionType<(record: TransferItem) => string>(),
-  showSelectAll: booleanType(),
-  selectAllLabels: arrayType<SelectAllLabel[]>(),
-  children: functionType<(props: TransferListBodyProps) => VueNode>(),
-  oneWay: booleanType(),
-  pagination: someType<PaginationType>([Object, Boolean]),
-  status: stringType<InputStatus>(),
-  onChange:
-    functionType<
-      (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void
-    >(),
-  onSelectChange:
-    functionType<(sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void>(),
-  onSearch: functionType<(direction: TransferDirection, value: string) => void>(),
-  onScroll: functionType<(direction: TransferDirection, e: UIEvent) => void>(),
-  'onUpdate:targetKeys': functionType<(keys: string[]) => void>(),
-  'onUpdate:selectedKeys': functionType<(keys: string[]) => void>(),
-})
-
-export type TransferProps = Partial<ExtractPropTypes<ReturnType<typeof transferProps>>>
-
-const Transfer = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ATransfer',
-  inheritAttrs: false,
-  props: transferProps(),
-  slots: Object as CustomSlotsType<{
-    leftTitle?: any
-    rightTitle?: any
-    children?: any
-    render?: TransferItem
-    notFoundContent?: any
-    leftSelectAllLabel?: any
-    rightSelectAllLabel?: any
-    footer?: any
-    default?: any
-  }>,
-  // emits: ['update:targetKeys', 'update:selectedKeys', 'change', 'search', 'scroll', 'selectChange'],
-  setup(props, { emit, attrs, slots, expose }) {
-    const { configProvider, prefixCls, direction } = useConfigInject('transfer', props)
-
-    // style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const sourceSelectedKeys = ref([])
-    const targetSelectedKeys = ref([])
-
-    const formItemContext = useInjectFormItemContext()
-    const formItemInputContext = FormItemInputContext.useInject()
-    const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status))
-    watch(
-      () => props.selectedKeys,
-      () => {
-        sourceSelectedKeys.value =
-          props.selectedKeys?.filter((key) => !props.targetKeys.includes(key)) || []
-        targetSelectedKeys.value =
-          props.selectedKeys?.filter((key) => props.targetKeys.includes(key)) || []
-      },
-      { immediate: true },
-    )
-
-    const getLocale = (transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) => {
-      // Keep old locale props still working.
-      const oldLocale: { notFoundContent?: any; searchPlaceholder?: string } = {
-        notFoundContent: renderEmpty('Transfer'),
-      }
-      const notFoundContent = getPropsSlot(slots, props, 'notFoundContent')
-      if (notFoundContent) {
-        oldLocale.notFoundContent = notFoundContent
-      }
-      if (props.searchPlaceholder !== undefined) {
-        oldLocale.searchPlaceholder = props.searchPlaceholder
-      }
-
-      return { ...transferLocale, ...oldLocale, ...props.locale }
-    }
-
-    const moveTo = (direction: TransferDirection) => {
-      const { targetKeys = [], dataSource = [] } = props
-      const moveKeys = direction === 'right' ? sourceSelectedKeys.value : targetSelectedKeys.value
-      const dataSourceDisabledKeysMap = groupDisabledKeysMap(dataSource)
-      // filter the disabled options
-      const newMoveKeys = moveKeys.filter((key) => !dataSourceDisabledKeysMap.has(key))
-      const newMoveKeysMap = groupKeysMap(newMoveKeys)
-
-      // move items to target box
-      const newTargetKeys =
-        direction === 'right'
-          ? newMoveKeys.concat(targetKeys)
-          : targetKeys.filter((targetKey) => !newMoveKeysMap.has(targetKey))
-
-      // empty checked keys
-      const oppositeDirection = direction === 'right' ? 'left' : 'right'
-      direction === 'right' ? (sourceSelectedKeys.value = []) : (targetSelectedKeys.value = [])
-      emit('update:targetKeys', newTargetKeys)
-      handleSelectChange(oppositeDirection, [])
-      emit('change', newTargetKeys, direction, newMoveKeys)
-      formItemContext.onFieldChange()
-    }
-
-    const moveToLeft = () => {
-      moveTo('left')
-    }
-    const moveToRight = () => {
-      moveTo('right')
-    }
-
-    const onItemSelectAll = (direction: TransferDirection, selectedKeys: string[]) => {
-      handleSelectChange(direction, selectedKeys)
-    }
-
-    const onLeftItemSelectAll = (selectedKeys: string[]) => {
-      return onItemSelectAll('left', selectedKeys)
-    }
-
-    const onRightItemSelectAll = (selectedKeys: string[]) => {
-      return onItemSelectAll('right', selectedKeys)
-    }
-
-    const handleSelectChange = (direction: TransferDirection, holder: string[]) => {
-      if (direction === 'left') {
-        if (!props.selectedKeys) {
-          sourceSelectedKeys.value = holder
-        }
-        emit('update:selectedKeys', [...holder, ...targetSelectedKeys.value])
-        emit('selectChange', holder, toRaw(targetSelectedKeys.value))
-      } else {
-        if (!props.selectedKeys) {
-          targetSelectedKeys.value = holder
-        }
-        emit('update:selectedKeys', [...holder, ...sourceSelectedKeys.value])
-        emit('selectChange', toRaw(sourceSelectedKeys.value), holder)
-      }
-    }
-
-    const handleFilter = (direction: TransferDirection, e) => {
-      const value = e.target.value
-      emit('search', direction, value)
-    }
-
-    const handleLeftFilter = (e: Event) => {
-      handleFilter('left', e)
-    }
-    const handleRightFilter = (e: Event) => {
-      handleFilter('right', e)
-    }
-
-    const handleClear = (direction: TransferDirection) => {
-      emit('search', direction, '')
-    }
-
-    const handleLeftClear = () => {
-      handleClear('left')
-    }
-
-    const handleRightClear = () => {
-      handleClear('right')
-    }
-
-    const onItemSelect = (direction: TransferDirection, selectedKey: string, checked: boolean) => {
-      const holder =
-        direction === 'left' ? [...sourceSelectedKeys.value] : [...targetSelectedKeys.value]
-      const index = holder.indexOf(selectedKey)
-      if (index > -1) {
-        holder.splice(index, 1)
-      }
-      if (checked) {
-        holder.push(selectedKey)
-      }
-      handleSelectChange(direction, holder)
-    }
-
-    const onLeftItemSelect = (selectedKey: string, checked: boolean) => {
-      return onItemSelect('left', selectedKey, checked)
-    }
-    const onRightItemSelect = (selectedKey: string, checked: boolean) => {
-      return onItemSelect('right', selectedKey, checked)
-    }
-    const onRightItemRemove = (targetedKeys: string[]) => {
-      const { targetKeys = [] } = props
-      const newTargetKeys = targetKeys.filter((key) => !targetedKeys.includes(key))
-      emit('update:targetKeys', newTargetKeys)
-      emit('change', newTargetKeys, 'left', [...targetedKeys])
-    }
-
-    const handleScroll = (direction: TransferDirection, e: UIEvent) => {
-      emit('scroll', direction, e)
-    }
-
-    const handleLeftScroll = (e: UIEvent) => {
-      handleScroll('left', e)
-    }
-    const handleRightScroll = (e: UIEvent) => {
-      handleScroll('right', e)
-    }
-    const handleListStyle = (
-      listStyle: ((style: ListStyle) => CSSProperties) | CSSProperties,
-      direction: TransferDirection,
-    ) => {
-      if (typeof listStyle === 'function') {
-        return listStyle({ direction })
-      }
-      return listStyle
-    }
-
-    const leftDataSource = ref([])
-    const rightDataSource = ref([])
-
-    watchEffect(() => {
-      const { dataSource, rowKey, targetKeys = [] } = props
-
-      const ld = []
-      const rd = Array.from({ length: targetKeys.length })
-      const targetKeysMap = groupKeysMap(targetKeys)
-      dataSource.forEach((record) => {
-        if (rowKey) {
-          record.key = rowKey(record)
-        }
-
-        // rightData should be ordered by targetKeys
-        // leftData should be ordered by dataSource
-        if (targetKeysMap.has(record.key)) {
-          rd[targetKeysMap.get(record.key)!] = record
-        } else {
-          ld.push(record)
-        }
-      })
-
-      leftDataSource.value = ld
-      rightDataSource.value = rd
-    })
-
-    expose({ handleSelectChange })
-
-    const renderTransfer = (transferLocale: TransferLocale) => {
-      const {
-        disabled,
-        operations = [],
-        showSearch,
-        listStyle,
-        operationStyle,
-        filterOption,
-        showSelectAll,
-        selectAllLabels = [],
-        oneWay,
-        pagination,
-        id = formItemContext.id.value,
-      } = props
-      const { class: className, style } = attrs
-
-      const children = slots.children
-      const mergedPagination = !children && pagination
-
-      const renderEmpty = configProvider.renderEmpty
-      const locale = getLocale(transferLocale, renderEmpty)
-      const { footer } = slots
-      const renderItem = props.render || slots.render
-      const leftActive = targetSelectedKeys.value.length > 0
-      const rightActive = sourceSelectedKeys.value.length > 0
-
-      const cls = classNames(
-        prefixCls.value,
-        className,
-        {
-          [`${prefixCls.value}-disabled`]: disabled,
-          [`${prefixCls.value}-customize-list`]: !!children,
-          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        },
-        getStatusClassNames(prefixCls.value, mergedStatus.value, formItemInputContext.hasFeedback),
-        hashId.value,
-      )
-      const titles = props.titles
-      const leftTitle =
-        (titles && titles[0]) ?? slots.leftTitle?.() ?? (locale.titles || ['', ''])[0]
-      const rightTitle =
-        (titles && titles[1]) ?? slots.rightTitle?.() ?? (locale.titles || ['', ''])[1]
-      return (
-        <div {...attrs} class={cls} style={style as CSSProperties} id={id}>
-          <List
-            key="leftList"
-            prefixCls={`${prefixCls.value}-list`}
-            dataSource={leftDataSource.value}
-            filterOption={filterOption}
-            style={handleListStyle(listStyle, 'left')}
-            checkedKeys={sourceSelectedKeys.value}
-            handleFilter={handleLeftFilter}
-            handleClear={handleLeftClear}
-            onItemSelect={onLeftItemSelect}
-            onItemSelectAll={onLeftItemSelectAll}
-            renderItem={renderItem}
-            showSearch={showSearch}
-            renderList={children}
-            onScroll={handleLeftScroll}
-            disabled={disabled}
-            direction={direction.value === 'rtl' ? 'right' : 'left'}
-            showSelectAll={showSelectAll}
-            selectAllLabel={selectAllLabels[0] || slots.leftSelectAllLabel}
-            pagination={mergedPagination}
-            {...locale}
-            v-slots={{ titleText: () => leftTitle, footer }}
-          />
-          <Operation
-            key="operation"
-            class={`${prefixCls.value}-operation`}
-            rightActive={rightActive}
-            rightArrowText={operations[0]}
-            moveToRight={moveToRight}
-            leftActive={leftActive}
-            leftArrowText={operations[1]}
-            moveToLeft={moveToLeft}
-            style={operationStyle}
-            disabled={disabled}
-            direction={direction.value}
-            oneWay={oneWay}
-          />
-          <List
-            key="rightList"
-            prefixCls={`${prefixCls.value}-list`}
-            dataSource={rightDataSource.value}
-            filterOption={filterOption}
-            style={handleListStyle(listStyle, 'right')}
-            checkedKeys={targetSelectedKeys.value}
-            handleFilter={handleRightFilter}
-            handleClear={handleRightClear}
-            onItemSelect={onRightItemSelect}
-            onItemSelectAll={onRightItemSelectAll}
-            onItemRemove={onRightItemRemove}
-            renderItem={renderItem}
-            showSearch={showSearch}
-            renderList={children}
-            onScroll={handleRightScroll}
-            disabled={disabled}
-            direction={direction.value === 'rtl' ? 'left' : 'right'}
-            showSelectAll={showSelectAll}
-            selectAllLabel={selectAllLabels[1] || slots.rightSelectAllLabel}
-            showRemove={oneWay}
-            pagination={mergedPagination}
-            {...locale}
-            v-slots={{ titleText: () => rightTitle, footer }}
-          />
-        </div>
-      )
-    }
-    return () =>
-      wrapSSR(
-        <LocaleReceiver
-          componentName="Transfer"
-          defaultLocale={defaultLocale.Transfer}
-          children={renderTransfer}
-        />,
-      )
-  },
-})
-
-export default withInstall(Transfer)

package/src/transfer/index.zh-CN.md

@@ -1,105 +0,0 @@
----
-category: Components
-type: 数据录入
-title: Transfer
-subtitle: 穿梭框
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EAApQ5ephigAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yv12S4sSRAEAAAAAAAAAAAAADrJ8AQ/original
----
-
-双栏穿梭选择框。
-
-## 何时使用
-
-- 需要在多个可选项中进行多选时。
-- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。
-
-穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。
-
-选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反映了这两个概念。
-
-## API
-
-| 参数                  | 说明                                                                                                                                            | 类型                                                                                                 | 默认值                                                                                                  | 版本  |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----- |
-| dataSource            | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。                                                                           | \[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}]\[]           | \[]                                                                                                     |       |
-| disabled              | 是否禁用                                                                                                                                        | boolean                                                                                              | false                                                                                                   |       |
-| filterOption          | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。                                            | (inputValue, option): boolean                                                                        |                                                                                                         |       |
-| footer                | 可以设置为一个 作用域插槽                                                                                                                       | slot="footer" slot-scope="props"                                                                     |                                                                                                         |       |
-| listStyle             | 两个穿梭框的自定义样式                                                                                                                          | CSSProperties                                                                                        |                                                                                                         |       |
-| locale                | 各种语言                                                                                                                                        | object                                                                                               | `{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }` |       |
-| oneWay                | 展示为单向样式                                                                                                                                  | boolean                                                                                              | false                                                                                                   | 3.0.0 |
-| operations            | 操作文案集合，顺序从上至下                                                                                                                      | string\[]                                                                                            | \['>', '<']                                                                                          |       |
-| operationStyle        | 操作栏的自定义样式                                                                                                                              | CSSProperties                                                                                        | -                                                                                                       | 3.0.0 |
-| pagination            | 使用分页样式，自定义渲染列表下无效                                                                                                              | boolean \| { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean } | flase                                                                                                   | 3.0.0 |
-| render                | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 element。或者返回一个普通对象，其中 `label` 字段为 element，`value` 字段为 title | Function(record)\| slot                                                                              |                                                                                                         |       |
-| selectAllLabels       | 自定义顶部多选框标题的集合                                                                                                                      | VueNode \| ((info: { selectedCount: number; totalCount: number }) => VueNode);                       | -                                                                                                       | 3.0.0 |
-| selectedKeys(v-model) | 设置哪些项应该被选中                                                                                                                            | string\[]                                                                                            | \[]                                                                                                     |       |
-| showSearch            | 是否显示搜索框                                                                                                                                  | boolean                                                                                              | false                                                                                                   |       |
-| showSelectAll         | 是否展示全选勾选框                                                                                                                              | boolean                                                                                              | true                                                                                                    |       |
-| status                | 设置校验状态                                                                                                                                    | 'error' \| 'warning'                                                                                 | -                                                                                                       | 3.3.0 |
-| targetKeys(v-model)   | 显示在右侧框数据的 key 集合                                                                                                                     | string\[]                                                                                            | \[]                                                                                                     |       |
-| titles                | 标题集合，顺序从左至右                                                                                                                          | string\[]                                                                                            | \['', '']                                                                                               |       |
-
-### 事件
-
-| 事件名称     | 说明                           | 回调参数                                          | 版本 |
-| ------------ | ------------------------------ | ------------------------------------------------- | ---- |
-| change       | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void           |      |
-| scroll       | 选项列表滚动时的回调函数       | (direction, event): void                          |      |
-| search       | 搜索框内容时改变时的回调函数   | (direction: 'left'\|'right', value: string): void | -    |
-| selectChange | 选中项发生改变时的回调函数     | (sourceSelectedKeys, targetSelectedKeys): void    |      |
-
-### Render Props
-
-Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数：
-
-```json
-{
-  "direction": String,
-  "disabled": Boolean,
-  "filteredItems": Array,
-  "selectedKeys": Array,
-  "onItemSelect": Function,
-  "onItemSelectAll": Function
-}
-```
-
-| 参数          | 说明           | 类型                                 | 版本 |
-| ------------- | -------------- | ------------------------------------ | ---- |
-| direction     | 渲染列表的方向 | 'left' \| 'right'                    |      |
-| disabled      | 是否禁用列表   | boolean                              |      |
-| filteredItems | 过滤后的数据   | TransferItem\[]                      |      |
-| itemSelect    | 勾选条目       | (key: string, selected: boolean)     |      |
-| itemSelectAll | 勾选一组条目   | (keys: string\[], selected: boolean) |      |
-| selectedKeys  | 选中的条目     | string\[]                            |      |
-
-#### 参考示例
-
-```html
-<a-transfer>
-  <template
-    #children="{
-      direction,
-      filteredItems,
-      selectedKeys,
-      disabled: listDisabled,
-      onItemSelectAll,
-      onItemSelect,
-    }"
-  >
-    <your-component />
-  <template>
-</a-transfer>
-```
-
-## 注意
-
-按照 Vue 最新的规范，所有的组件数组最好绑定 key。在 Transfer 中，`dataSource`里的数据值需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
-
-如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。
-
-```jsx
-// 比如你的数据主键是 uid
-return <Transfer :rowKey="record => record.uid" />;
-```

package/src/transfer/interface.ts

@@ -1,8 +0,0 @@
-export type PaginationType =
-  | boolean
-  | {
-      pageSize?: number
-      simple?: boolean
-      showSizeChanger?: boolean
-      showLessItems?: boolean
-    }