@antsoo-lib/components 0.1.11 → 0.1.12

package/src/config-provider/index.zh-CN.md

@@ -1,116 +0,0 @@
----
-category: Components
-subtitle: 全局化配置
-cols: 1
-type: 其他
-title: ConfigProvider
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/original
----
-
-为组件提供统一的全局化配置。
-
-## 使用
-
-ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provide-inject) 特性，只需在应用外围包裹一次即可全局生效。
-
-```html
-<template>
-  <a-config-provider :getPopupContainer="getPopupContainer">
-    <app />
-  </a-config-provider>
-</template>
-<script>
-  export default {
-    methods: {
-      getPopupContainer(el, dialogContext) {
-        if (dialogContext) {
-          return dialogContext.getDialogWrap()
-        } else {
-          return document.body
-        }
-      },
-    },
-  }
-</script>
-```
-
-### Content Security Policy
-
-部分组件为了支持波纹效果，使用了动态样式。如果开启了 Content Security Policy (CSP)，你可以通过 `csp` 属性来进行配置：
-
-```html
-<a-config-provider :csp="{ nonce: 'YourNonceCode' }">
-  <a-button>My Button</a-button>
-</a-config-provider>
-```
-
-## API
-
-| 参数                     | 说明                                                                                                     | 类型                                                                                                                                | 默认值              | 版本  |
-| ------------------------ | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----- |
-| autoInsertSpaceInButton  | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格                                                         | boolean                                                                                                                             | true                |       |
-| componentSize            | 设置 antd 组件大小                                                                                       | `small` \| `middle` \| `large`                                                                                                      | -                   | 3.0   |
-| csp                      | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置               | { nonce: string }                                                                                                                   | -                   |       |
-| direction                | 设置文本展示方向。 [示例](#components-config-provider-demo-direction)                                    | `ltr` \| `rtl`                                                                                                                      | `ltr`               | 3.0   |
-| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动     | boolean \| number                                                                                                                   | -                   |       |
-| form                     | 设置 Form 组件的通用属性                                                                                 | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean} | -                   | 3.0   |
-| getPopupContainer        | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。                                     | Function(triggerNode, dialogContext)                                                                                                | () => document.body |       |
-| getTargetContainer       | 配置 Affix、Anchor 滚动监听容器。                                                                        | () => HTMLElement                                                                                                                   | () => window        | 3.0   |
-| input                    | 设置 Input 组件的通用属性                                                                                | { autocomplete?: string }                                                                                                           | -                   | 3.0   |
-| locale                   | 语言包配置，语言包可到 [ant-design-vue/es/locale](http://unpkg.com/ant-design-vue/es/locale/) 目录下寻找 | object                                                                                                                              | -                   | 1.5.0 |
-| pageHeader               | 统一设置 pageHeader 的 ghost，参考 [pageHeader](<(/components/page-header)>)                             | { ghost: boolean }                                                                                                                  | 'true'              | 1.5.0 |
-| prefixCls                | 设置统一样式前缀。注意：需要配合 `less` 变量 `@ant-prefix` 使用                                          | string                                                                                                                              | `ant`               |       |
-| renderEmpty              | 自定义组件空状态。参考 [空状态](/components/empty/)                                                      | slot \| Function(componentName: string): VNode                                                                                      | -                   |       |
-| space                    | 设置 Space 的 `size`，参考 [Space](/components/space)                                                    | { size: `small` \| `middle` \| `large` \| `number` }                                                                                | -                   | 3.0   |
-| transformCellText        | Table 数据渲染前可以再次改变，一般用户空数据的默认配置                                                   | Function({ text, column, record, index }) => any                                                                                    | -                   | 1.5.4 |
-| virtual                  | 设置 `false` 时关闭虚拟滚动                                                                              | boolean                                                                                                                             | -                   | 3.0   |
-| wave                     | 设置水波纹特效                                                                                           | { disabled?: boolean }                                                                                                              | -                   | 4.0.7 |
-
-### ConfigProvider.config() `3.0.0+`
-
-设置 `Modal`、`Message`、`Notification` rootPrefixCls。
-
-```jsx
-ConfigProvider.config({
-  prefixCls: 'ant',
-})
-```
-
-or
-
-```jsx
-// 如下配置支持响应式数据，你可以通过 prefixCls.value = 'other' 直接改变
-const prefixCls = ref('ant')
-ConfigProvider.config({
-  prefixCls,
-})
-```
-
-## FAQ
-
-#### 为什么我使用了 ConfigProvider `locale`，时间类组件的国际化还有问题？
-
-请检查是否设置了 `dayjs.locale('zh-cn')`，或者是否有两个版本的 dayjs 共存。
-
-#### 配置 `getPopupContainer` 导致 Modal 报错？
-
-当如下全局设置 `getPopupContainer` 为触发节点的 parentNode 时，由于 Modal 的用法不存在 `triggerNode`，这样会导致 `triggerNode is undefined` 的报错，需要增加一个判断条件。
-
-```diff
- <ConfigProvider
--  getPopupContainer={triggerNode => triggerNode.parentNode}
-+  getPopupContainer={node => {
-+    if (node) {
-+      return node.parentNode;
-+    }
-+    return document.body;
-+  }}
- >
-   <App />
- </ConfigProvider>
-```
-
-#### 为什么 message.info、notification.open 或 Modal.confirm 等方法内的 VueNode 无法继承 ConfigProvider 的属性？比如 `prefixCls` 和 `theme`。
-
-静态方法是使用 Vue.render 重新渲染一个 Vue 根节点上，和主应用的 Vue 节点是脱离的。

package/src/config-provider/renderEmpty.tsx

@@ -1,35 +0,0 @@
-import type { VueNode } from '../_util/type'
-import Empty from '../empty'
-import useConfigInject from './hooks/useConfigInject'
-
-export interface RenderEmptyProps {
-  componentName?: string
-}
-
-export const DefaultRenderEmpty = (props: RenderEmptyProps) => {
-  const { prefixCls } = useConfigInject('empty', props)
-  const renderHtml = (componentName?: string) => {
-    switch (componentName) {
-      case 'Table':
-      case 'List':
-        return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-      case 'Select':
-      case 'TreeSelect':
-      case 'Cascader':
-      case 'Transfer':
-      case 'Mentions':
-        return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} class={`${prefixCls.value}-small`} />
-      default:
-        return <Empty />
-    }
-  }
-  return renderHtml(props.componentName)
-}
-
-function renderEmpty(componentName?: string): VueNode {
-  return <DefaultRenderEmpty componentName={componentName} />
-}
-
-export type RenderEmptyHandler = typeof renderEmpty
-
-export default renderEmpty

package/src/config-provider/style/index.ts

@@ -1,31 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-
-import { useStyleRegister } from '../../_util/cssinjs'
-import { resetIcon } from '../../style'
-import { useToken } from '../../theme/internal'
-
-const useStyle = (iconPrefixCls: Ref<string>) => {
-  const [theme, token] = useToken()
-  // Generate style for icons
-  return useStyleRegister(
-    computed(() => ({
-      theme: theme.value,
-      token: token.value,
-      hashId: '',
-      path: ['ant-design-icons', iconPrefixCls.value],
-    })),
-    () => [
-      {
-        [`.${iconPrefixCls.value}`]: {
-          ...resetIcon(),
-          [`.${iconPrefixCls.value} .${iconPrefixCls.value}-icon`]: {
-            display: 'block',
-          },
-        },
-      },
-    ],
-  )
-}
-
-export default useStyle

package/src/date-picker/PickerButton.tsx

@@ -1,9 +0,0 @@
-import type { FunctionalComponent } from 'vue'
-
-import type { ButtonProps } from '../button'
-import Button from '../button'
-
-const PickerButton: FunctionalComponent<ButtonProps> = (props: ButtonProps, { attrs, slots }) => {
-  return <Button size="small" type="primary" {...props} {...attrs} v-slots={slots}></Button>
-}
-export default PickerButton

package/src/date-picker/PickerTag.tsx

@@ -1,6 +0,0 @@
-import type { TagProps } from '../tag'
-import Tag from '../tag'
-
-export default function PickerTag(props: TagProps, { slots, attrs }) {
-  return <Tag color="blue" {...props} {...attrs} v-slots={slots} />
-}

package/src/date-picker/date-fns.tsx

@@ -1,38 +0,0 @@
-import type { App } from 'vue'
-
-import dataFnsGenerateConfig from '../vc-picker/generate/dateFns'
-import type {
-  RangePickerProps as BaseRangePickerProps,
-  PickerDateProps,
-  PickerProps,
-} from './generatePicker'
-import generatePicker from './generatePicker'
-import type { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props'
-
-export type DatePickerProps = PickerProps<Date> & ExtraDatePickerProps<Date>
-export type MonthPickerProps = Omit<PickerDateProps<Date>, 'picker'> & ExtraDatePickerProps<Date>
-export type WeekPickerProps = Omit<PickerDateProps<Date>, 'picker'> & ExtraDatePickerProps<Date>
-export type RangePickerProps = BaseRangePickerProps<Date> & ExtraRangePickerProps<Date>
-
-const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker, RangePicker } =
-  generatePicker<Date>(dataFnsGenerateConfig)
-
-/* istanbul ignore next */
-export { MonthPicker, QuarterPicker, RangePicker, WeekPicker }
-
-export default Object.assign(DatePicker, {
-  WeekPicker,
-  MonthPicker,
-  YearPicker,
-  RangePicker,
-  TimePicker,
-  QuarterPicker,
-  install: (app: App) => {
-    app.component(DatePicker.name, DatePicker)
-    app.component(RangePicker.name, RangePicker)
-    app.component(MonthPicker.name, MonthPicker)
-    app.component(WeekPicker.name, WeekPicker)
-    app.component(QuarterPicker.name, QuarterPicker)
-    return app
-  },
-})

package/src/date-picker/dayjs.tsx

@@ -1,40 +0,0 @@
-import type { Dayjs } from 'dayjs'
-
-import type { App } from 'vue'
-
-import dayjsGenerateConfig from '../vc-picker/generate/dayjs'
-import type {
-  RangePickerProps as BaseRangePickerProps,
-  PickerDateProps,
-  PickerProps,
-} from './generatePicker'
-import generatePicker from './generatePicker'
-import type { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props'
-
-export type DatePickerProps = PickerProps<Dayjs> & ExtraDatePickerProps<Dayjs>
-export type MonthPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'> & ExtraDatePickerProps<Dayjs>
-export type WeekPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'> & ExtraDatePickerProps<Dayjs>
-export type RangePickerProps = BaseRangePickerProps<Dayjs> & ExtraRangePickerProps<Dayjs>
-
-const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker, RangePicker } =
-  generatePicker<Dayjs>(dayjsGenerateConfig)
-
-/* istanbul ignore next */
-export { MonthPicker, QuarterPicker, RangePicker, WeekPicker }
-
-export default Object.assign(DatePicker, {
-  WeekPicker,
-  MonthPicker,
-  YearPicker,
-  RangePicker,
-  TimePicker,
-  QuarterPicker,
-  install: (app: App) => {
-    app.component(DatePicker.name, DatePicker)
-    app.component(RangePicker.name, RangePicker)
-    app.component(MonthPicker.name, MonthPicker)
-    app.component(WeekPicker.name, WeekPicker)
-    app.component(QuarterPicker.name, QuarterPicker)
-    return app
-  },
-})

package/src/date-picker/generatePicker/generateRangePicker.tsx

@@ -1,256 +0,0 @@
-import CalendarOutlined from '@ant-design/icons-vue/CalendarOutlined'
-import ClockCircleOutlined from '@ant-design/icons-vue/ClockCircleOutlined'
-import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'
-import SwapRightOutlined from '@ant-design/icons-vue/SwapRightOutlined'
-
-import { computed, defineComponent, ref } from 'vue'
-
-import { Components, getTimeProps } from '.'
-import classNames from '../../_util/classNames'
-import omit from '../../_util/omit'
-import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils'
-import type { CustomSlotsType } from '../../_util/type'
-import useConfigInject from '../../config-provider/hooks/useConfigInject'
-import { FormItemInputContext, useInjectFormItemContext } from '../../form/FormItemContext'
-import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver'
-import { useCompactItemContext } from '../../space/Compact'
-import { RangePicker as VCRangePicker } from '../../vc-picker'
-import type { RangePickerSharedProps } from '../../vc-picker/RangePicker'
-import type { GenerateConfig } from '../../vc-picker/generate/index'
-import type { PanelMode, RangeValue } from '../../vc-picker/interface'
-import devWarning from '../../vc-util/devWarning'
-import enUS from '../locale/en_US'
-//CSSINJS
-import useStyle from '../style'
-import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util'
-import type { CommonProps, RangePickerProps } from './props'
-import { commonProps, rangePickerProps } from './props'
-
-export default function generateRangePicker<DateType, ExtraProps = {}>(
-  generateConfig: GenerateConfig<DateType>,
-  extraProps: ExtraProps,
-) {
-  const RangePicker = defineComponent({
-    compatConfig: { MODE: 3 },
-    name: 'ARangePicker',
-    inheritAttrs: false,
-    props: {
-      ...commonProps<DateType>(),
-      ...rangePickerProps<DateType>(),
-      ...extraProps,
-    },
-    slots: Object as CustomSlotsType<{
-      suffixIcon?: any
-      prevIcon?: any
-      nextIcon?: any
-      superPrevIcon?: any
-      superNextIcon?: any
-      dateRender?: any
-      renderExtraFooter?: any
-      default?: any
-      separator?: any
-      clearIcon?: any
-    }>,
-    setup(_props, { expose, slots, attrs, emit }) {
-      const props = _props as unknown as CommonProps<DateType> & RangePickerProps<DateType>
-      const formItemContext = useInjectFormItemContext()
-      const formItemInputContext = FormItemInputContext.useInject()
-
-      // =================== Warning =====================
-      if (process.env.NODE_ENV !== 'production') {
-        devWarning(
-          !props.dropdownClassName,
-          'RangePicker',
-          '`dropdownClassName` is deprecated. Please use `popupClassName` instead.',
-        )
-        devWarning(
-          !attrs.getCalendarContainer,
-          'DatePicker',
-          '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
-        )
-      }
-
-      const { prefixCls, direction, getPopupContainer, size, rootPrefixCls, disabled } =
-        useConfigInject('picker', props)
-      const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction)
-      const mergedSize = computed(() => compactSize.value || size.value)
-      // style
-      const [wrapSSR, hashId] = useStyle(prefixCls)
-      const pickerRef = ref()
-      expose({
-        focus: () => {
-          pickerRef.value?.focus()
-        },
-        blur: () => {
-          pickerRef.value?.blur()
-        },
-      })
-      const maybeToStrings = (dates: DateType[]) => {
-        return props.valueFormat ? generateConfig.toString(dates, props.valueFormat) : dates
-      }
-      const onChange = (dates: RangeValue<DateType>, dateStrings: [string, string]) => {
-        const values = maybeToStrings(dates)
-        emit('update:value', values)
-        emit('change', values, dateStrings)
-        formItemContext.onFieldChange()
-      }
-      const onOpenChange = (open: boolean) => {
-        emit('update:open', open)
-        emit('openChange', open)
-      }
-      const onFocus = (e: FocusEvent) => {
-        emit('focus', e)
-      }
-      const onBlur = (e: FocusEvent) => {
-        emit('blur', e)
-        formItemContext.onFieldBlur()
-      }
-      const onPanelChange = (dates: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => {
-        const values = maybeToStrings(dates)
-        emit('panelChange', values, modes)
-      }
-      const onOk = (dates: DateType[]) => {
-        const value = maybeToStrings(dates)
-        emit('ok', value)
-      }
-      const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (
-        dates: [DateType, DateType],
-        dateStrings: [string, string],
-        info,
-      ) => {
-        const values = maybeToStrings(dates)
-        emit('calendarChange', values, dateStrings, info)
-      }
-      const [contextLocale] = useLocaleReceiver('DatePicker', enUS)
-
-      const value = computed(() => {
-        if (props.value) {
-          return props.valueFormat
-            ? generateConfig.toDate(props.value, props.valueFormat)
-            : props.value
-        }
-        return props.value
-      })
-      const defaultValue = computed(() => {
-        if (props.defaultValue) {
-          return props.valueFormat
-            ? generateConfig.toDate(props.defaultValue, props.valueFormat)
-            : props.defaultValue
-        }
-        return props.defaultValue
-      })
-      const defaultPickerValue = computed(() => {
-        if (props.defaultPickerValue) {
-          return props.valueFormat
-            ? generateConfig.toDate(props.defaultPickerValue, props.valueFormat)
-            : props.defaultPickerValue
-        }
-        return props.defaultPickerValue
-      })
-      return () => {
-        const locale = { ...contextLocale.value, ...props.locale }
-        const p = { ...props, ...attrs }
-        const {
-          prefixCls: customizePrefixCls,
-          bordered = true,
-          placeholder,
-          suffixIcon = slots.suffixIcon?.(),
-          picker = 'date',
-          transitionName,
-          allowClear = true,
-          dateRender = slots.dateRender,
-          renderExtraFooter = slots.renderExtraFooter,
-          separator = slots.separator?.(),
-          clearIcon = slots.clearIcon?.(),
-          id = formItemContext.id.value,
-          ...restProps
-        } = p
-        delete restProps['onUpdate:value']
-        delete restProps['onUpdate:open']
-        const { format, showTime } = p as any
-
-        let additionalOverrideProps: any = {}
-        additionalOverrideProps = {
-          ...additionalOverrideProps,
-          ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
-          ...(picker === 'time'
-            ? getTimeProps({ format, ...omit(restProps, ['disabledTime']), picker })
-            : {}),
-        }
-        const pre = prefixCls.value
-        const suffixNode = (
-          <>
-            {suffixIcon || (picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)}
-            {formItemInputContext.hasFeedback && formItemInputContext.feedbackIcon}
-          </>
-        )
-        return wrapSSR(
-          <VCRangePicker
-            dateRender={dateRender}
-            renderExtraFooter={renderExtraFooter}
-            separator={
-              separator || (
-                <span aria-label="to" class={`${pre}-separator`}>
-                  <SwapRightOutlined />
-                </span>
-              )
-            }
-            ref={pickerRef}
-            dropdownAlign={transPlacement2DropdownAlign(direction.value, props.placement)}
-            placeholder={getRangePlaceholder(locale, picker, placeholder as [string, string])}
-            suffixIcon={suffixNode}
-            clearIcon={clearIcon || <CloseCircleFilled />}
-            allowClear={allowClear}
-            transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
-            {...restProps}
-            {...additionalOverrideProps}
-            disabled={disabled.value}
-            id={id}
-            value={value.value}
-            defaultValue={defaultValue.value}
-            defaultPickerValue={defaultPickerValue.value}
-            picker={picker}
-            class={classNames(
-              {
-                [`${pre}-${mergedSize.value}`]: mergedSize.value,
-                [`${pre}-borderless`]: !bordered,
-              },
-              getStatusClassNames(
-                pre,
-                getMergedStatus(formItemInputContext.status, props.status),
-                formItemInputContext.hasFeedback,
-              ),
-              attrs.class,
-              hashId.value,
-              compactItemClassnames.value,
-            )}
-            locale={locale!.lang}
-            prefixCls={pre}
-            getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
-            generateConfig={generateConfig}
-            prevIcon={slots.prevIcon?.() || <span class={`${pre}-prev-icon`} />}
-            nextIcon={slots.nextIcon?.() || <span class={`${pre}-next-icon`} />}
-            superPrevIcon={slots.superPrevIcon?.() || <span class={`${pre}-super-prev-icon`} />}
-            superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
-            components={Components}
-            direction={direction.value}
-            dropdownClassName={classNames(
-              hashId.value,
-              props.popupClassName,
-              props.dropdownClassName,
-            )}
-            onChange={onChange}
-            onOpenChange={onOpenChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onPanelChange={onPanelChange}
-            onOk={onOk}
-            onCalendarChange={onCalendarChange}
-          />,
-        )
-      }
-    },
-  })
-
-  return RangePicker
-}