@antsoo-lib/components 0.1.11 → 0.1.12

package/src/tour/style/index.ts

@@ -1,251 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor'
-
-import { resetComponent } from '../../style'
-import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-export interface ComponentToken {}
-
-interface TourToken extends FullToken<'Tour'> {
-  tourZIndexPopup: number
-  indicatorWidth: number
-  indicatorHeight: number
-  tourBorderRadius: number
-  tourCloseSize: number
-}
-
-// =============================== Base ===============================
-const genBaseStyle: GenerateStyle<TourToken> = (token) => {
-  const {
-    componentCls,
-    lineHeight,
-    padding,
-    paddingXS,
-    borderRadius,
-    borderRadiusXS,
-    colorPrimary,
-    colorText,
-    colorFill,
-    indicatorHeight,
-    indicatorWidth,
-    boxShadowTertiary,
-    tourZIndexPopup,
-    fontSize,
-    colorBgContainer,
-    fontWeightStrong,
-    marginXS,
-    colorTextLightSolid,
-    tourBorderRadius,
-    colorWhite,
-    colorBgTextHover,
-    tourCloseSize,
-    motionDurationSlow,
-    antCls,
-  } = token
-
-  return [
-    {
-      [componentCls]: {
-        ...resetComponent(token),
-
-        color: colorText,
-        position: 'absolute',
-        zIndex: tourZIndexPopup,
-        display: 'block',
-        visibility: 'visible',
-        fontSize,
-        lineHeight,
-        width: 520,
-        '--antd-arrow-background-color': colorBgContainer,
-
-        '&-pure': {
-          maxWidth: '100%',
-          position: 'relative',
-        },
-
-        [`&${componentCls}-hidden`]: {
-          display: 'none',
-        },
-
-        // ============================= panel content ============================
-        [`${componentCls}-content`]: {
-          position: 'relative',
-        },
-        [`${componentCls}-inner`]: {
-          textAlign: 'start',
-          textDecoration: 'none',
-          borderRadius: tourBorderRadius,
-          boxShadow: boxShadowTertiary,
-          position: 'relative',
-          backgroundColor: colorBgContainer,
-          border: 'none',
-          backgroundClip: 'padding-box',
-
-          [`${componentCls}-close`]: {
-            position: 'absolute',
-            top: padding,
-            insetInlineEnd: padding,
-            color: token.colorIcon,
-            outline: 'none',
-            width: tourCloseSize,
-            height: tourCloseSize,
-            borderRadius: token.borderRadiusSM,
-            transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-
-            '&:hover': {
-              color: token.colorIconHover,
-              backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent,
-            },
-          },
-
-          [`${componentCls}-cover`]: {
-            textAlign: 'center',
-            padding: `${padding + tourCloseSize + paddingXS}px ${padding}px 0`,
-            img: {
-              width: '100%',
-            },
-          },
-          [`${componentCls}-header`]: {
-            padding: `${padding}px ${padding}px ${paddingXS}px`,
-
-            [`${componentCls}-title`]: {
-              lineHeight,
-              fontSize,
-              fontWeight: fontWeightStrong,
-            },
-          },
-
-          [`${componentCls}-description`]: {
-            padding: `0 ${padding}px`,
-            lineHeight,
-            wordWrap: 'break-word',
-          },
-
-          [`${componentCls}-footer`]: {
-            padding: `${paddingXS}px ${padding}px ${padding}px`,
-            textAlign: 'end',
-            borderRadius: `0 0 ${borderRadiusXS}px ${borderRadiusXS}px`,
-            display: 'flex',
-            [`${componentCls}-indicators`]: {
-              display: 'inline-block',
-
-              [`${componentCls}-indicator`]: {
-                width: indicatorWidth,
-                height: indicatorHeight,
-                display: 'inline-block',
-                borderRadius: '50%',
-                background: colorFill,
-                '&:not(:last-child)': {
-                  marginInlineEnd: indicatorHeight,
-                },
-                '&-active': {
-                  background: colorPrimary,
-                },
-              },
-            },
-            [`${componentCls}-buttons`]: {
-              marginInlineStart: 'auto',
-              [`${antCls}-btn`]: {
-                marginInlineStart: marginXS,
-              },
-            },
-          },
-        },
-
-        // =============================  primary type  ===========================
-        // `$` for panel, `&$` for pure panel
-        [`${componentCls}-primary, &${componentCls}-primary`]: {
-          '--antd-arrow-background-color': colorPrimary,
-
-          [`${componentCls}-inner`]: {
-            color: colorTextLightSolid,
-            textAlign: 'start',
-            textDecoration: 'none',
-            backgroundColor: colorPrimary,
-            borderRadius,
-            boxShadow: boxShadowTertiary,
-
-            [`${componentCls}-close`]: {
-              color: colorTextLightSolid,
-            },
-
-            [`${componentCls}-indicators`]: {
-              [`${componentCls}-indicator`]: {
-                background: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
-                '&-active': {
-                  background: colorTextLightSolid,
-                },
-              },
-            },
-
-            [`${componentCls}-prev-btn`]: {
-              color: colorTextLightSolid,
-              borderColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
-              backgroundColor: colorPrimary,
-
-              '&:hover': {
-                backgroundColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
-                borderColor: 'transparent',
-              },
-            },
-
-            [`${componentCls}-next-btn`]: {
-              color: colorPrimary,
-              borderColor: 'transparent',
-              background: colorWhite,
-
-              '&:hover': {
-                background: new TinyColor(colorBgTextHover).onBackground(colorWhite).toRgbString(),
-              },
-            },
-          },
-        },
-      },
-
-      // ============================= mask ===========================
-      [`${componentCls}-mask`]: {
-        [`${componentCls}-placeholder-animated`]: {
-          transition: `all ${motionDurationSlow}`,
-        },
-      },
-
-      // =========== Limit left and right placement radius ==============
-      [[
-        '&-placement-left',
-        '&-placement-leftTop',
-        '&-placement-leftBottom',
-        '&-placement-right',
-        '&-placement-rightTop',
-        '&-placement-rightBottom',
-      ].join(',')]: {
-        [`${componentCls}-inner`]: {
-          borderRadius: Math.min(tourBorderRadius, MAX_VERTICAL_CONTENT_RADIUS),
-        },
-      },
-    },
-
-    // ============================= Arrow ===========================
-    getArrowStyle<TourToken>(token, {
-      colorBg: 'var(--antd-arrow-background-color)',
-      contentRadius: tourBorderRadius,
-      limitVerticalRadius: true,
-    }),
-  ]
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook('Tour', (token) => {
-  const { borderRadiusLG, fontSize, lineHeight } = token
-  const TourToken = mergeToken<TourToken>(token, {
-    tourZIndexPopup: token.zIndexPopupBase + 70,
-    indicatorWidth: 6,
-    indicatorHeight: 6,
-    tourBorderRadius: borderRadiusLG,
-    tourCloseSize: fontSize * lineHeight,
-  })
-  return [genBaseStyle(TourToken)]
-})

package/src/tour/useMergedType.ts

@@ -1,39 +0,0 @@
-import type { Ref } from 'vue'
-import { computed, ref, watch } from 'vue'
-
-import type { TourProps } from './interface'
-
-interface Props {
-  defaultType?: Ref<string>
-  steps?: Ref<TourProps['steps']>
-  current?: Ref<number>
-  defaultCurrent?: Ref<number>
-}
-/**
- * returns the merged type of a step or the default type.
- */
-const useMergedType = ({ defaultType, steps, current, defaultCurrent }: Props) => {
-  const innerCurrent = ref(defaultCurrent?.value)
-  const mergedCurrent = computed(() => current?.value)
-  watch(
-    mergedCurrent,
-    (val) => {
-      innerCurrent.value = val ?? defaultCurrent?.value
-    },
-    { immediate: true },
-  )
-  const updateInnerCurrent = (val: number) => {
-    innerCurrent.value = val
-  }
-  const innerType = computed(() => {
-    return typeof innerCurrent.value === 'number'
-      ? steps && steps.value?.[innerCurrent.value]?.type
-      : defaultType?.value
-  })
-
-  const currentMergedType = computed(() => innerType.value ?? defaultType?.value)
-
-  return { currentMergedType, updateInnerCurrent }
-}
-
-export default useMergedType

package/src/transfer/ListBody.tsx

@@ -1,170 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { computed, defineComponent, ref, watch } from 'vue'
-
-import type { TransferItem } from '.'
-import classNames from '../_util/classNames'
-import { booleanType } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import Pagination from '../pagination'
-import ListItem from './ListItem'
-
-export const transferListBodyProps = {
-  prefixCls: String,
-  filteredRenderItems: PropTypes.array.def([]),
-  selectedKeys: PropTypes.array,
-  disabled: booleanType(),
-  showRemove: booleanType(),
-  pagination: PropTypes.any,
-  onItemSelect: Function,
-  onScroll: Function,
-  onItemRemove: Function,
-}
-
-export type TransferListBodyProps = Partial<ExtractPropTypes<typeof transferListBodyProps>>
-
-function parsePagination(pagination) {
-  if (!pagination) {
-    return null
-  }
-
-  const defaultPagination = {
-    pageSize: 10,
-    simple: true,
-    showSizeChanger: false,
-    showLessItems: false,
-  }
-
-  if (typeof pagination === 'object') {
-    return {
-      ...defaultPagination,
-      ...pagination,
-    }
-  }
-
-  return defaultPagination
-}
-
-const ListBody = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ListBody',
-  inheritAttrs: false,
-  props: transferListBodyProps,
-  emits: ['itemSelect', 'itemRemove', 'scroll'],
-  setup(props, { emit, expose }) {
-    const current = ref(1)
-
-    const handleItemSelect = (item: TransferItem) => {
-      const { selectedKeys } = props
-      const checked = selectedKeys.includes(item.key)
-      emit('itemSelect', item.key, !checked)
-    }
-
-    const handleItemRemove = (item: TransferItem) => {
-      emit('itemRemove', [item.key])
-    }
-
-    const handleScroll = (e: Event) => {
-      emit('scroll', e)
-    }
-
-    const mergedPagination = computed(() => parsePagination(props.pagination))
-
-    watch(
-      [mergedPagination, () => props.filteredRenderItems],
-      () => {
-        if (mergedPagination.value) {
-          // Calculate the page number
-          const maxPageCount = Math.ceil(
-            props.filteredRenderItems.length / mergedPagination.value.pageSize,
-          )
-          current.value = Math.min(current.value, maxPageCount)
-        }
-      },
-      { immediate: true },
-    )
-    const items = computed(() => {
-      const { filteredRenderItems } = props
-
-      let displayItems = filteredRenderItems
-
-      if (mergedPagination.value) {
-        displayItems = filteredRenderItems.slice(
-          (current.value - 1) * mergedPagination.value.pageSize,
-          current.value * mergedPagination.value.pageSize,
-        )
-      }
-
-      return displayItems
-    })
-
-    const onPageChange = (cur: number) => {
-      current.value = cur
-    }
-
-    expose({ items })
-
-    return () => {
-      const {
-        prefixCls,
-        filteredRenderItems,
-        selectedKeys,
-        disabled: globalDisabled,
-        showRemove,
-      } = props
-
-      let paginationNode = null
-
-      if (mergedPagination.value) {
-        paginationNode = (
-          <Pagination
-            simple={mergedPagination.value.simple}
-            showSizeChanger={mergedPagination.value.showSizeChanger}
-            showLessItems={mergedPagination.value.showLessItems}
-            size="small"
-            disabled={globalDisabled}
-            class={`${prefixCls}-pagination`}
-            total={filteredRenderItems.length}
-            pageSize={mergedPagination.value.pageSize}
-            current={current.value}
-            onChange={onPageChange}
-          />
-        )
-      }
-
-      const itemsList = items.value.map(({ renderedEl, renderedText, item }: any) => {
-        const { disabled } = item
-        const checked = selectedKeys.includes(item.key)
-
-        return (
-          <ListItem
-            disabled={globalDisabled || disabled}
-            key={item.key}
-            item={item}
-            renderedText={renderedText}
-            renderedEl={renderedEl}
-            checked={checked}
-            prefixCls={prefixCls}
-            onClick={handleItemSelect}
-            onRemove={handleItemRemove}
-            showRemove={showRemove}
-          />
-        )
-      })
-      return (
-        <>
-          <ul
-            class={classNames(`${prefixCls}-content`, {
-              [`${prefixCls}-content-show-remove`]: showRemove,
-            })}
-            onScroll={handleScroll}
-          >
-            {itemsList}
-          </ul>
-          {paginationNode}
-        </>
-      )
-    }
-  },
-})
-
-export default ListBody

package/src/transfer/ListItem.tsx

@@ -1,97 +0,0 @@
-import DeleteOutlined from '@ant-design/icons-vue/DeleteOutlined'
-
-import type { ExtractPropTypes } from 'vue'
-import { defineComponent } from 'vue'
-
-import type { TransferLocale } from '.'
-import classNames from '../_util/classNames'
-import TransButton from '../_util/transButton'
-import { booleanType } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import Checkbox from '../checkbox'
-import LocaleReceiver from '../locale-provider/LocaleReceiver'
-import defaultLocale from '../locale/en_US'
-
-function noop() {}
-
-export const transferListItemProps = {
-  renderedText: PropTypes.any,
-  renderedEl: PropTypes.any,
-  item: PropTypes.any,
-  checked: booleanType(),
-  prefixCls: String,
-  disabled: booleanType(),
-  showRemove: booleanType(),
-  onClick: Function,
-  onRemove: Function,
-}
-
-export type TransferListItemProps = Partial<ExtractPropTypes<typeof transferListItemProps>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ListItem',
-  inheritAttrs: false,
-  props: transferListItemProps,
-  emits: ['click', 'remove'],
-  setup(props, { emit }) {
-    return () => {
-      const { renderedText, renderedEl, item, checked, disabled, prefixCls, showRemove } = props
-      const className = classNames({
-        [`${prefixCls}-content-item`]: true,
-        [`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
-      })
-
-      let title: string
-      if (typeof renderedText === 'string' || typeof renderedText === 'number') {
-        title = String(renderedText)
-      }
-
-      return (
-        <LocaleReceiver componentName="Transfer" defaultLocale={defaultLocale.Transfer}>
-          {(transferLocale: TransferLocale) => {
-            const labelNode = <span class={`${prefixCls}-content-item-text`}>{renderedEl}</span>
-            if (showRemove) {
-              return (
-                <li class={className} title={title}>
-                  {labelNode}
-                  <TransButton
-                    disabled={disabled || item.disabled}
-                    class={`${prefixCls}-content-item-remove`}
-                    aria-label={transferLocale.remove}
-                    onClick={() => {
-                      emit('remove', item)
-                    }}
-                  >
-                    <DeleteOutlined />
-                  </TransButton>
-                </li>
-              )
-            }
-
-            return (
-              <li
-                class={className}
-                title={title}
-                onClick={
-                  disabled || item.disabled
-                    ? noop
-                    : () => {
-                        emit('click', item)
-                      }
-                }
-              >
-                <Checkbox
-                  class={`${prefixCls}-checkbox`}
-                  checked={checked}
-                  disabled={disabled || item.disabled}
-                />
-                {labelNode}
-              </li>
-            )
-          }}
-        </LocaleReceiver>
-      )
-    }
-  },
-})

package/src/transfer/index.en-US.md

@@ -1,104 +0,0 @@
----
-category: Components
-type: Data Entry
-title: Transfer
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EAApQ5ephigAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yv12S4sSRAEAAAAAAAAAAAAADrJ8AQ/original
----
-
-Alert component for feedback.
-
-## When To Use
-
-- When you need to show alert messages to users.
-- When you need a persistent static container which is closable by user actions.
-
-Transfer the elements between two columns in an intuitive and efficient way.
-
-One or more elements can be selected from either column, one click on the proper `direction` button, and the transfer is done. The left column is considered the `source` and the right column is considered the `target`. As you can see in the API description, these names are reflected in.
-
-## API
-
-| Property              | Description                                                                                                                                                                                                                                                                                      | Type                                                                                                 | Default                                                                                                            | Version |
-| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------- |
-| dataSource            | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop.                                                                                                                    | \[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}]              | \[]                                                                                                                |         |
-| disabled              | Whether disabled transfer                                                                                                                                                                                                                                                                        | boolean                                                                                              | false                                                                                                              |         |
-| filterOption          | A function to determine whether an item should show in search result list                                                                                                                                                                                                                        | (inputValue, option): boolean                                                                        |                                                                                                                    |         |
-| footer                | customize the progress dot by setting a scoped slot                                                                                                                                                                                                                                              | slot="footer" slot-scope="props"                                                                     |                                                                                                                    |         |
-| listStyle             | A custom CSS style used for rendering the transfer columns.                                                                                                                                                                                                                                      | CSSProperties                                                                                        |                                                                                                                    |         |
-| locale                | i18n text including filter, empty text, item unit, etc                                                                                                                                                                                                                                           | object                                                                                               | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` |         |
-| oneWay                | Display as single direction style                                                                                                                                                                                                                                                                | boolean                                                                                              | false                                                                                                              | 3.0.0   |
-| operations            | A set of operations that are sorted from top to bottom.                                                                                                                                                                                                                                          | string\[]                                                                                            | \['>', '<']                                                                                                     |         |
-| operationStyle        | A custom CSS style used for rendering the operations column                                                                                                                                                                                                                                      | CSSProperties                                                                                        | -                                                                                                                  | 3.0.0   |
-| pagination            | Use pagination. Not work in render props                                                                                                                                                                                                                                                         | boolean \| { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean } | false                                                                                                              | 3.0.0   |
-| render                | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title | Function(record) \| slot                                                                             |                                                                                                                    |         |
-| selectAllLabels       | A set of customized labels for select all checkboxes on the header                                                                                                                                                                                                                               | VueNode \| ((info: { selectedCount: number; totalCount: number }) => VueNode);                       | -                                                                                                                  | 3.0.0   |
-| selectedKeys(v-model) | A set of keys of selected items.                                                                                                                                                                                                                                                                 | string\[]                                                                                            | \[]                                                                                                                |         |
-| showSearch            | If included, a search box is shown on each column.                                                                                                                                                                                                                                               | boolean                                                                                              | false                                                                                                              |         |
-| showSelectAll         | Show select all checkbox on the header                                                                                                                                                                                                                                                           | boolean                                                                                              | true                                                                                                               |         |
-| status                | Set validation status                                                                                                                                                                                                                                                                            | 'error' \| 'warning'                                                                                 | -                                                                                                                  | 3.3.0   |
-| targetKeys(v-model)   | A set of keys of elements that are listed on the right column.                                                                                                                                                                                                                                   | string\[]                                                                                            | \[]                                                                                                                |         |
-| titles                | A set of titles that are sorted from left to right.                                                                                                                                                                                                                                              | string\[]                                                                                            | -                                                                                                                  |         |
-
-### events
-
-| Events Name  | Description                                                                         | Arguments                                         | Version |
-| ------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------- | ------- |
-| change       | A callback function that is executed when the transfer between columns is complete. | (targetKeys, direction, moveKeys): void           |         |
-| scroll       | A callback function which is executed when scroll options list                      | (direction, event): void                          |         |
-| search       | A callback function which is executed when search field are changed                 | (direction: 'left'\|'right', value: string): void | -       |
-| selectChange | A callback function which is executed when selected items are changed.              | (sourceSelectedKeys, targetSelectedKeys): void    |         |
-
-### Render Props
-
-Transfer accept `children` to customize render list, using follow props:
-
-```json
-{
-  "direction": String,
-  "disabled": Boolean,
-  "filteredItems": Array,
-  "selectedKeys": Array,
-  "onItemSelect": Function,
-  "onItemSelectAll": Function
-}
-```
-
-| Property        | Description             | Type                                 | Version |
-| --------------- | ----------------------- | ------------------------------------ | ------- |
-| direction       | List render direction   | 'left' \| 'right'                    |         |
-| disabled        | Disable list or not     | boolean                              |         |
-| filteredItems   | Filtered items          | TransferItem\[]                      |         |
-| selectedKeys    | Selected items          | string\[]                            |         |
-| onItemSelect    | Select item             | (key: string, selected: boolean)     |         |
-| onItemSelectAll | Select a group of items | (keys: string\[], selected: boolean) |         |
-
-#### example
-
-```html
-<a-transfer>
-  <template
-    #children="{
-      direction,
-      filteredItems,
-      selectedKeys,
-      disabled: listDisabled,
-      onItemSelectAll,
-      onItemSelect,
-    }"
-  >
-    <your-component />
-  <template>
-</a-transfer>
-```
-
-## Warning
-
-According the standard of Vue, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier.
-
-If there's no `key` in your data, you should use `rowKey` to specify the key that will be used for uniquely identify each element.
-
-```jsx
-// eg. your primary key is `uid`
-return <Transfer :rowKey="record => record.uid" />;
-```