@antsoo-lib/components 0.1.2 → 0.1.4

package/src/transfer/index.tsx

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

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

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