@antsoo-lib/components 0.1.11 → 0.1.12

package/src/input/TextArea.tsx

@@ -1,317 +0,0 @@
-import type { CSSProperties } from 'vue'
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  nextTick,
-  shallowRef,
-  watch,
-  watchEffect,
-} from 'vue'
-
-import type { FocusEventHandler } from '../_util/EventInterface'
-import classNames from '../_util/classNames'
-import omit from '../_util/omit'
-import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'
-import type { VueNode } from '../_util/type'
-import { useInjectDisabled } from '../config-provider/DisabledContext'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'
-import type { InputFocusOptions } from '../vc-input/utils/commonUtils'
-import { fixControlledValue, resolveOnChange, triggerFocus } from '../vc-input/utils/commonUtils'
-import ClearableLabeledInput from './ClearableLabeledInput'
-import ResizableTextArea from './ResizableTextArea'
-import { textAreaProps } from './inputProps'
-// CSSINJS
-import useStyle from './style'
-
-function fixEmojiLength(value: string, maxLength: number) {
-  return [...(value || '')].slice(0, maxLength).join('')
-}
-
-function setTriggerValue(
-  isCursorInEnd: boolean,
-  preValue: string,
-  triggerValue: string,
-  maxLength: number,
-) {
-  let newTriggerValue = triggerValue
-  if (isCursorInEnd) {
-    // 光标在尾部，直接截断
-    newTriggerValue = fixEmojiLength(triggerValue, maxLength)
-  } else if (
-    [...(preValue || '')].length < triggerValue.length &&
-    [...(triggerValue || '')].length > maxLength
-  ) {
-    // 光标在中间，如果最后的值超过最大值，则采用原先的值
-    newTriggerValue = preValue
-  }
-  return newTriggerValue
-}
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ATextarea',
-  inheritAttrs: false,
-  props: textAreaProps(),
-  setup(props, { attrs, expose, emit }) {
-    const formItemContext = useInjectFormItemContext()
-    const formItemInputContext = FormItemInputContext.useInject()
-    const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status))
-    const stateValue = shallowRef(props.value ?? props.defaultValue)
-    const resizableTextArea = shallowRef()
-    const mergedValue = shallowRef('')
-    const { prefixCls, size, direction } = useConfigInject('input', props)
-
-    // Style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const disabled = useInjectDisabled()
-
-    const showCount = computed(() => {
-      return (props.showCount as any) === '' || props.showCount || false
-    })
-    // Max length value
-    const hasMaxLength = computed(() => Number(props.maxlength) > 0)
-    const compositing = shallowRef(false)
-
-    const oldCompositionValueRef = shallowRef<string>()
-    const oldSelectionStartRef = shallowRef<number>(0)
-    const onInternalCompositionStart = (e: CompositionEvent) => {
-      compositing.value = true
-      // 拼音输入前保存一份旧值
-      oldCompositionValueRef.value = mergedValue.value
-      // 保存旧的光标位置
-      oldSelectionStartRef.value = (e.currentTarget as any).selectionStart
-      emit('compositionstart', e)
-    }
-
-    const onInternalCompositionEnd = (e: CompositionEvent) => {
-      compositing.value = false
-      let triggerValue = (e.currentTarget as any).value
-      if (hasMaxLength.value) {
-        const isCursorInEnd =
-          oldSelectionStartRef.value >= props.maxlength + 1 ||
-          oldSelectionStartRef.value === oldCompositionValueRef.value?.length
-        triggerValue = setTriggerValue(
-          isCursorInEnd,
-          oldCompositionValueRef.value,
-          triggerValue,
-          props.maxlength,
-        )
-      }
-      // Patch composition onChange when value changed
-      if (triggerValue !== mergedValue.value) {
-        setValue(triggerValue)
-        resolveOnChange(e.currentTarget as any, e, triggerChange, triggerValue)
-      }
-
-      emit('compositionend', e)
-    }
-    const instance = getCurrentInstance()
-    watch(
-      () => props.value,
-      () => {
-        if ('value' in instance.vnode.props || {}) {
-          stateValue.value = props.value ?? ''
-        }
-      },
-    )
-
-    const focus = (option?: InputFocusOptions) => {
-      triggerFocus(resizableTextArea.value?.textArea, option)
-    }
-
-    const blur = () => {
-      resizableTextArea.value?.textArea?.blur()
-    }
-
-    const setValue = (value: string | number, callback?: Function) => {
-      if (stateValue.value === value) {
-        return
-      }
-      if (props.value === undefined) {
-        stateValue.value = value
-      } else {
-        nextTick(() => {
-          if (resizableTextArea.value.textArea.value !== mergedValue.value) {
-            resizableTextArea.value?.instance.update?.()
-          }
-        })
-      }
-      nextTick(() => {
-        callback && callback()
-      })
-    }
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.keyCode === 13) {
-        emit('pressEnter', e)
-      }
-      emit('keydown', e)
-    }
-
-    const onBlur: FocusEventHandler = (e) => {
-      const { onBlur } = props
-      onBlur?.(e)
-      formItemContext.onFieldBlur()
-    }
-    const triggerChange = (e: Event) => {
-      emit('update:value', (e.target as HTMLInputElement).value)
-      emit('change', e)
-      emit('input', e)
-      formItemContext.onFieldChange()
-    }
-
-    const handleReset = (e: MouseEvent) => {
-      resolveOnChange(resizableTextArea.value.textArea, e, triggerChange)
-      setValue('', () => {
-        focus()
-      })
-    }
-
-    const handleChange = (e: Event) => {
-      let triggerValue = (e.target as any).value
-      if (stateValue.value === triggerValue) return
-
-      if (hasMaxLength.value) {
-        // 1. 复制粘贴超过maxlength的情况 2.未超过maxlength的情况
-        const target = e.target as any
-        const isCursorInEnd =
-          target.selectionStart >= props.maxlength + 1 ||
-          target.selectionStart === triggerValue.length ||
-          !target.selectionStart
-        triggerValue = setTriggerValue(
-          isCursorInEnd,
-          mergedValue.value,
-          triggerValue,
-          props.maxlength,
-        )
-      }
-      resolveOnChange(e.currentTarget as any, e, triggerChange, triggerValue)
-      setValue(triggerValue)
-    }
-    const renderTextArea = () => {
-      const { class: customClass } = attrs
-      const { bordered = true } = props
-      const resizeProps = {
-        ...omit(props, ['allowClear']),
-        ...attrs,
-        class: [
-          {
-            [`${prefixCls.value}-borderless`]: !bordered,
-            [`${customClass}`]: customClass && !showCount.value,
-            [`${prefixCls.value}-sm`]: size.value === 'small',
-            [`${prefixCls.value}-lg`]: size.value === 'large',
-          },
-          getStatusClassNames(prefixCls.value, mergedStatus.value),
-          hashId.value,
-        ],
-        disabled: disabled.value,
-        showCount: null,
-        prefixCls: prefixCls.value,
-        onInput: handleChange,
-        onChange: handleChange,
-        onBlur,
-        onKeydown: handleKeyDown,
-        onCompositionstart: onInternalCompositionStart,
-        onCompositionend: onInternalCompositionEnd,
-      }
-      if (props.valueModifiers?.lazy) {
-        delete resizeProps.onInput
-      }
-      return (
-        <ResizableTextArea
-          {...resizeProps}
-          id={resizeProps?.id ?? formItemContext.id.value}
-          ref={resizableTextArea}
-          maxlength={props.maxlength}
-          lazy={props.lazy}
-        />
-      )
-    }
-
-    expose({
-      focus,
-      blur,
-      resizableTextArea,
-    })
-
-    watchEffect(() => {
-      let val = fixControlledValue(stateValue.value)
-      if (
-        !compositing.value &&
-        hasMaxLength.value &&
-        (props.value === null || props.value === undefined)
-      ) {
-        // fix #27612 将value转为数组进行截取，解决 '😂'.length === 2 等emoji表情导致的截取乱码的问题
-        val = fixEmojiLength(val, props.maxlength)
-      }
-      mergedValue.value = val
-    })
-    return () => {
-      const { maxlength, bordered = true, hidden } = props
-      const { style, class: customClass } = attrs
-      const inputProps: any = {
-        ...props,
-        ...attrs,
-        prefixCls: prefixCls.value,
-        inputType: 'text',
-        handleReset,
-        direction: direction.value,
-        bordered,
-        style: showCount.value ? undefined : style,
-        hashId: hashId.value,
-        disabled: props.disabled ?? disabled.value,
-      }
-
-      let textareaNode = (
-        <ClearableLabeledInput
-          {...inputProps}
-          value={mergedValue.value}
-          v-slots={{ element: renderTextArea }}
-          status={props.status}
-        />
-      )
-
-      if (showCount.value || formItemInputContext.hasFeedback) {
-        const valueLength = [...mergedValue.value].length
-        let dataCount: VueNode = ''
-        if (typeof showCount.value === 'object') {
-          dataCount = showCount.value.formatter({
-            value: mergedValue.value,
-            count: valueLength,
-            maxlength,
-          })
-        } else {
-          dataCount = `${valueLength}${hasMaxLength.value ? ` / ${maxlength}` : ''}`
-        }
-        textareaNode = (
-          <div
-            hidden={hidden}
-            class={classNames(
-              `${prefixCls.value}-textarea`,
-              {
-                [`${prefixCls.value}-textarea-rtl`]: direction.value === 'rtl',
-                [`${prefixCls.value}-textarea-show-count`]: showCount.value,
-                [`${prefixCls.value}-textarea-in-form-item`]: formItemInputContext.isFormItemInput,
-              },
-              `${prefixCls.value}-textarea-show-count`,
-              customClass,
-              hashId.value,
-            )}
-            style={style as CSSProperties}
-            data-count={typeof dataCount !== 'object' ? dataCount : undefined}
-          >
-            {textareaNode}
-            {formItemInputContext.hasFeedback && (
-              <span class={`${prefixCls.value}-textarea-suffix`}>
-                {formItemInputContext.feedbackIcon}
-              </span>
-            )}
-          </div>
-        )
-      }
-      return wrapSSR(textareaNode)
-    }
-  },
-})

package/src/input/calculateNodeHeight.tsx

@@ -1,175 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-/**
- * calculateNodeHeight(uiTextNode, useCache = false)
- */
-
-const HIDDEN_TEXTAREA_STYLE = `
-  min-height:0 !important;
-  max-height:none !important;
-  height:0 !important;
-  visibility:hidden !important;
-  overflow:hidden !important;
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important;
-  pointer-events: none !important;
-`
-
-const SIZING_STYLE = [
-  'letter-spacing',
-  'line-height',
-  'padding-top',
-  'padding-bottom',
-  'font-family',
-  'font-weight',
-  'font-size',
-  'font-variant',
-  'text-rendering',
-  'text-transform',
-  'width',
-  'text-indent',
-  'padding-left',
-  'padding-right',
-  'border-width',
-  'box-sizing',
-  'word-break',
-  'white-space',
-]
-
-export interface NodeType {
-  sizingStyle: string
-  paddingSize: number
-  borderSize: number
-  boxSizing: string
-}
-
-const computedStyleCache: Record<string, NodeType> = {}
-let hiddenTextarea: HTMLTextAreaElement
-
-export function calculateNodeStyling(node: HTMLElement, useCache = false) {
-  const nodeRef =
-    node.getAttribute('id') || node.getAttribute('data-reactid') || node.getAttribute('name')
-
-  if (useCache && computedStyleCache[nodeRef]) {
-    return computedStyleCache[nodeRef]
-  }
-
-  const style = window.getComputedStyle(node)
-
-  const boxSizing =
-    style.getPropertyValue('box-sizing') ||
-    style.getPropertyValue('-moz-box-sizing') ||
-    style.getPropertyValue('-webkit-box-sizing')
-
-  const paddingSize =
-    Number.parseFloat(style.getPropertyValue('padding-bottom')) +
-    Number.parseFloat(style.getPropertyValue('padding-top'))
-
-  const borderSize =
-    Number.parseFloat(style.getPropertyValue('border-bottom-width')) +
-    Number.parseFloat(style.getPropertyValue('border-top-width'))
-
-  const sizingStyle = SIZING_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(
-    ';',
-  )
-
-  const nodeInfo: NodeType = {
-    sizingStyle,
-    paddingSize,
-    borderSize,
-    boxSizing,
-  }
-
-  if (useCache && nodeRef) {
-    computedStyleCache[nodeRef] = nodeInfo
-  }
-
-  return nodeInfo
-}
-
-export default function calculateAutoSizeStyle(
-  uiTextNode: HTMLTextAreaElement,
-  useCache = false,
-  minRows: number | null = null,
-  maxRows: number | null = null,
-): CSSProperties {
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement('textarea')
-    hiddenTextarea.setAttribute('tab-index', '-1')
-    hiddenTextarea.setAttribute('aria-hidden', 'true')
-    document.body.appendChild(hiddenTextarea)
-  }
-
-  // Fix wrap="off" issue
-  // https://github.com/ant-design/ant-design/issues/6577
-  if (uiTextNode.getAttribute('wrap')) {
-    hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap'))
-  } else {
-    hiddenTextarea.removeAttribute('wrap')
-  }
-
-  // Copy all CSS properties that have an impact on the height of the content in
-  // the textbox
-  const { paddingSize, borderSize, boxSizing, sizingStyle } = calculateNodeStyling(
-    uiTextNode,
-    useCache,
-  )
-
-  // Need to have the overflow attribute to hide the scrollbar otherwise
-  // text-lines will not calculated properly as the shadow will technically be
-  // narrower for content
-  hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`)
-  hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || ''
-
-  let minHeight: number | undefined
-  let maxHeight: number | undefined
-  let overflowY: any
-
-  let height = hiddenTextarea.scrollHeight
-
-  if (boxSizing === 'border-box') {
-    // border-box: add border, since height = content + padding + border
-    height += borderSize
-  } else if (boxSizing === 'content-box') {
-    // remove padding, since height = content
-    height -= paddingSize
-  }
-
-  if (minRows !== null || maxRows !== null) {
-    // measure height of a textarea with a single row
-    hiddenTextarea.value = ' '
-    const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize
-    if (minRows !== null) {
-      minHeight = singleRowHeight * minRows
-      if (boxSizing === 'border-box') {
-        minHeight = minHeight + paddingSize + borderSize
-      }
-      height = Math.max(minHeight, height)
-    }
-    if (maxRows !== null) {
-      maxHeight = singleRowHeight * maxRows
-      if (boxSizing === 'border-box') {
-        maxHeight = maxHeight + paddingSize + borderSize
-      }
-      overflowY = height > maxHeight ? '' : 'hidden'
-      height = Math.min(maxHeight, height)
-    }
-  }
-
-  const style: CSSProperties = {
-    height: `${height}px`,
-    overflowY,
-    resize: 'none',
-  }
-
-  if (minHeight) {
-    style.minHeight = `${minHeight}px`
-  }
-  if (maxHeight) {
-    style.maxHeight = `${maxHeight}px`
-  }
-
-  return style
-}

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

@@ -1,101 +0,0 @@
----
-category: Components
-type: Data Entry
-title: Input
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAAAAAAAAAAAADrJ8AQ/original
----
-
-A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
-
-## When To Use
-
-- A user input in a form field is needed.
-- A search input is required.
-
-## API
-
-### Input
-
-| Property       | Description                                                                                                                                                        | Type                                                                                           | Default                 | Version |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | ----------------------- | ------- |
-| addonAfter     | The label text displayed after (on the right side of) the input field.                                                                                             | string\|slot                                                                                   |                         |         |
-| addonBefore    | The label text displayed before (on the left side of) the input field.                                                                                             | string\|slot                                                                                   |                         |         |
-| allowClear     | allow to remove input content with clear icon                                                                                                                      | boolean                                                                                        |                         |         |
-| bordered       | Whether has border style                                                                                                                                           | boolean                                                                                        | true                    | 4.5.0   |
-| clearIcon      | custom clear icon when allowClear                                                                                                                                  | slot                                                                                           | `<CloseCircleFilled />` | 3.3.0   |
-| defaultValue   | The initial input content                                                                                                                                          | string                                                                                         |                         |         |
-| disabled       | Whether the input is disabled.                                                                                                                                     | boolean                                                                                        | false                   |         |
-| id             | The ID for input                                                                                                                                                   | string                                                                                         |                         |         |
-| maxlength      | max length                                                                                                                                                         | number                                                                                         |                         | 1.5.0   |
-| prefix         | The prefix icon for the Input.                                                                                                                                     | string\|slot                                                                                   |                         |         |
-| showCount      | Whether show text count                                                                                                                                            | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string | false                   | 3.0     |
-| status         | Set validation status                                                                                                                                              | 'error' \| 'warning'                                                                           | -                       | 3.3.0   |
-| size           | The size of the input box. Note: in the context of a form, the `middle` size is used. Available: `large` `middle` `small`                                          | string                                                                                         | -                       |         |
-| suffix         | The suffix icon for the Input.                                                                                                                                     | string\|slot                                                                                   |                         |         |
-| type           | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)(use `<a-textarea />` instead of `type="textarea"`) | string                                                                                         | `text`                  |         |
-| value(v-model) | The input content value                                                                                                                                            | string                                                                                         |                         |         |
-
-### Input Events
-
-| Events Name | Description                                                        | Arguments   |     |
-| ----------- | ------------------------------------------------------------------ | ----------- | --- |
-| change      | callback when user input                                           | function(e) |     |
-| pressEnter  | The callback function that is triggered when Enter key is pressed. | function(e) |     |
-
-> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined then `value`, `defaultValue`, and `id` props of `Input` are automatically set.
-
-### TextArea
-
-| Property       | Description                                   | Type                                                                                           | Default         | Version |     |
-| -------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------- | --------------- | ------- | --- |
-| allowClear     | allow to remove input content with clear icon | boolean                                                                                        |                 | 1.5.0   |     |
-| autosize       | Height autosize feature, can be set to `true  | false`or an object`{ minRows: 2, maxRows: 6 }`                                                 | boolean\|object | false   |     |
-| defaultValue   | The initial input content                     | string                                                                                         |                 |         |     |
-| showCount      | Whether show text count                       | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string | false           |         |     |
-| value(v-model) | The input content value                       | string                                                                                         |                 |         |     |
-
-### TextArea Events
-
-| Events Name | Description                                                        | Arguments   |
-| ----------- | ------------------------------------------------------------------ | ----------- |
-| pressEnter  | The callback function that is triggered when Enter key is pressed. | function(e) |
-
-The rest of the props of `TextArea` are the same as the original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).
-
-#### Input.Search
-
-| Property    | Description                                                            | Type          | Default |
-| ----------- | ---------------------------------------------------------------------- | ------------- | ------- |
-| enterButton | to show an enter button after input. This prop is conflict with addon. | boolean\|slot | false   |
-
-### Input.Search Events
-
-| Events Name | Description                                                                                   | Arguments              | Version |     |
-| ----------- | --------------------------------------------------------------------------------------------- | ---------------------- | ------- | --- |
-| loading     | Search box with loading.                                                                      | boolean                |         |     |
-| search      | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value, event) |         |     |
-
-Supports all props of `Input`.
-
-#### Input.Group
-
-| Property | Description                                                                                                       | Type    | Default   |
-| -------- | ----------------------------------------------------------------------------------------------------------------- | ------- | --------- |
-| compact  | Whether use compact style                                                                                         | boolean | false     |
-| size     | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string  | `default` |
-
-```html
-<a-input-group>
-  <a-input />
-  <a-input />
-</a-input-group>
-```
-
-#### Input.Password (Added in 1.14.0)
-
-| Property         | Description                                            | Type    | Default |
-| ---------------- | ------------------------------------------------------ | ------- | ------- |
-| visible(v-model) | password visibility                                    | boolean | false   |
-| iconRender       | Custom toggle button                                   | slot    | -       |
-| visibilityToggle | Whether show toggle button or control password visible | boolean | true    |

package/src/input/index.ts

@@ -1,38 +0,0 @@
-import type { App, Plugin } from 'vue'
-
-import Group from './Group'
-import Input from './Input'
-import Password from './Password'
-import Search from './Search'
-import TextArea from './TextArea'
-
-export type { InputProps, TextAreaProps } from './inputProps'
-Input.Group = Group
-Input.Search = Search
-Input.TextArea = TextArea
-Input.Password = Password
-
-/* istanbul ignore next */
-Input.install = function (app: App) {
-  app.component(Input.name, Input)
-  app.component(Input.Group.name, Input.Group)
-  app.component(Input.Search.name, Input.Search)
-  app.component(Input.TextArea.name, Input.TextArea)
-  app.component(Input.Password.name, Input.Password)
-  return app
-}
-
-export {
-  Group as InputGroup,
-  Password as InputPassword,
-  Search as InputSearch,
-  TextArea as Textarea,
-}
-
-export default Input as typeof Input &
-  Plugin & {
-    readonly Group: typeof Group
-    readonly Search: typeof Search
-    readonly TextArea: typeof TextArea
-    readonly Password: typeof Password
-  }