@antsoo-lib/components 0.1.2 → 0.1.4

package/src/mentions/index.tsx

@@ -0,0 +1,301 @@
+import type { App, ExtractPropTypes, PropType } from 'vue'
+import { computed, defineComponent, shallowRef, watch } from 'vue'
+
+import type { KeyboardEventHandler } from '../_util/EventInterface'
+import classNames from '../_util/classNames'
+import omit from '../_util/omit'
+import { flattenChildren, getOptionProps } from '../_util/props-util'
+import type { InputStatus } from '../_util/statusUtils'
+import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'
+import type { CustomSlotsType } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+import warning from '../_util/warning'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext'
+import { useProvideOverride } from '../menu/src/OverrideContext'
+import Spin from '../spin'
+import VcMentions from '../vc-mentions'
+import { optionOptions, optionProps } from '../vc-mentions/src/Option'
+import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps'
+import devWarning from '../vc-util/devWarning'
+import useStyle from './style'
+
+interface MentionsConfig {
+  prefix?: string | string[]
+  split?: string
+}
+
+export interface MentionsOptionProps {
+  value: string
+  disabled?: boolean
+  label?: string | number | ((o: MentionsOptionProps) => any)
+  [key: string]: any
+}
+
+interface MentionsEntity {
+  prefix: string
+  value: string
+}
+
+export type MentionPlacement = 'top' | 'bottom'
+
+function loadingFilterOption() {
+  return true
+}
+const getMentions = (value = '', config: MentionsConfig = {}): MentionsEntity[] => {
+  const { prefix = '@', split = ' ' } = config
+  const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix]
+
+  return value
+    .split(split)
+    .map((str = ''): MentionsEntity | null => {
+      let hitPrefix: string | null = null
+
+      prefixList.some((prefixStr) => {
+        const startStr = str.slice(0, prefixStr.length)
+        if (startStr === prefixStr) {
+          hitPrefix = prefixStr
+          return true
+        }
+        return false
+      })
+
+      if (hitPrefix !== null) {
+        return {
+          prefix: hitPrefix,
+          value: str.slice((hitPrefix as string).length),
+        }
+      }
+      return null
+    })
+    .filter((entity): entity is MentionsEntity => !!entity && !!entity.value)
+}
+
+export const mentionsProps = () => ({
+  ...baseMentionsProps,
+  loading: { type: Boolean, default: undefined },
+  onFocus: {
+    type: Function as PropType<(e: FocusEvent) => void>,
+  },
+  onBlur: {
+    type: Function as PropType<(e: FocusEvent) => void>,
+  },
+  onSelect: {
+    type: Function as PropType<(option: MentionsOptionProps, prefix: string) => void>,
+  },
+  onChange: {
+    type: Function as PropType<(text: string) => void>,
+  },
+  onPressenter: {
+    type: Function as PropType<KeyboardEventHandler>,
+  },
+  'onUpdate:value': {
+    type: Function as PropType<(text: string) => void>,
+  },
+  notFoundContent: PropTypes.any,
+  defaultValue: String,
+  id: String,
+  status: String as PropType<InputStatus>,
+})
+
+export type MentionsProps = Partial<ExtractPropTypes<ReturnType<typeof mentionsProps>>>
+
+const Mentions = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'AMentions',
+  inheritAttrs: false,
+  props: mentionsProps(),
+  slots: Object as CustomSlotsType<{
+    notFoundContent?: any
+    option?: any
+    default?: any
+  }>,
+  setup(props, { slots, emit, attrs, expose }) {
+    // =================== Warning =====================
+    if (process.env.NODE_ENV !== 'production') {
+      devWarning(
+        !flattenChildren(slots.default?.() || []).length,
+        'Mentions',
+        '`Mentions.Option` is deprecated. Please use `options` instead.',
+      )
+    }
+    const { prefixCls, renderEmpty, direction } = useConfigInject('mentions', props)
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+    const focused = shallowRef(false)
+    const vcMentions = shallowRef(null)
+    const value = shallowRef(props.value ?? props.defaultValue ?? '')
+    const formItemContext = useInjectFormItemContext()
+    const formItemInputContext = FormItemInputContext.useInject()
+    const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status))
+    useProvideOverride({
+      prefixCls: computed(() => `${prefixCls.value}-menu`),
+      mode: computed(() => 'vertical'),
+      selectable: computed(() => false),
+      onClick: () => {},
+      validator: ({ mode }) => {
+        // Warning if use other mode
+        warning(
+          !mode || mode === 'vertical',
+          'Mentions',
+          `mode="${mode}" is not supported for Mentions's Menu.`,
+        )
+      },
+    })
+    watch(
+      () => props.value,
+      (val) => {
+        value.value = val
+      },
+    )
+    const handleFocus = (e: FocusEvent) => {
+      focused.value = true
+      emit('focus', e)
+    }
+
+    const handleBlur = (e: FocusEvent) => {
+      focused.value = false
+      emit('blur', e)
+      formItemContext.onFieldBlur()
+    }
+
+    const handleSelect = (...args: [MentionsOptionProps, string]) => {
+      emit('select', ...args)
+      focused.value = true
+    }
+
+    const handleChange = (val: string) => {
+      if (props.value === undefined) {
+        value.value = val
+      }
+      emit('update:value', val)
+      emit('change', val)
+      formItemContext.onFieldChange()
+    }
+
+    const getNotFoundContent = () => {
+      const notFoundContent = props.notFoundContent
+      if (notFoundContent !== undefined) {
+        return notFoundContent
+      }
+      if (slots.notFoundContent) {
+        return slots.notFoundContent()
+      }
+      return renderEmpty('Select')
+    }
+
+    const getOptions = () => {
+      return flattenChildren(slots.default?.() || []).map((item) => {
+        return { ...getOptionProps(item), label: (item.children as any)?.default?.() }
+      })
+    }
+
+    const focus = () => {
+      ;(vcMentions.value as HTMLTextAreaElement).focus()
+    }
+
+    const blur = () => {
+      ;(vcMentions.value as HTMLTextAreaElement).blur()
+    }
+
+    expose({ focus, blur })
+    const mentionsfilterOption = computed(() =>
+      props.loading ? loadingFilterOption : props.filterOption,
+    )
+    return () => {
+      const {
+        disabled,
+        getPopupContainer,
+        rows = 1,
+        id = formItemContext.id.value,
+        ...restProps
+      } = props
+      const { hasFeedback, feedbackIcon } = formItemInputContext
+      const { class: className, ...otherAttrs } = attrs
+      const otherProps = omit(restProps, ['defaultValue', 'onUpdate:value', 'prefixCls'])
+
+      const mergedClassName = classNames(
+        {
+          [`${prefixCls.value}-disabled`]: disabled,
+          [`${prefixCls.value}-focused`]: focused.value,
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+        },
+        getStatusClassNames(prefixCls.value, mergedStatus.value),
+        !hasFeedback && className,
+        hashId.value,
+      )
+
+      const mentionsProps = {
+        prefixCls: prefixCls.value,
+        ...otherProps,
+        disabled,
+        direction: direction.value,
+        filterOption: mentionsfilterOption.value,
+        getPopupContainer,
+        options: props.loading
+          ? [
+              {
+                value: 'ANTDV_SEARCHING',
+                disabled: true,
+                label: <Spin size="small" />,
+              },
+            ]
+          : props.options || getOptions(),
+        class: mergedClassName,
+        ...otherAttrs,
+        rows,
+        onChange: handleChange,
+        onSelect: handleSelect,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        ref: vcMentions,
+        value: value.value,
+        id,
+      }
+      const mentions = (
+        <VcMentions
+          {...mentionsProps}
+          dropdownClassName={hashId.value}
+          v-slots={{ notFoundContent: getNotFoundContent, option: slots.option }}
+        ></VcMentions>
+      )
+      if (hasFeedback) {
+        return wrapSSR(
+          <div
+            class={classNames(
+              `${prefixCls.value}-affix-wrapper`,
+              getStatusClassNames(
+                `${prefixCls.value}-affix-wrapper`,
+                mergedStatus.value,
+                hasFeedback,
+              ),
+              className,
+              hashId.value,
+            )}
+          >
+            {mentions}
+            <span class={`${prefixCls.value}-suffix`}>{feedbackIcon}</span>
+          </div>,
+        )
+      }
+      return wrapSSR(mentions)
+    }
+  },
+})
+
+/* istanbul ignore next */
+export const MentionsOption = defineComponent({
+  compatConfig: { MODE: 3 },
+  ...optionOptions,
+  name: 'AMentionsOption',
+  props: optionProps,
+})
+
+export default Object.assign(Mentions, {
+  Option: MentionsOption,
+  getMentions,
+  install: (app: App) => {
+    app.component(Mentions.name, Mentions)
+    app.component(MentionsOption.name, MentionsOption)
+    return app
+  },
+})

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

@@ -0,0 +1,71 @@
+---
+category: Components
+type: 数据录入
+title: Mentions
+subtitle: 提及
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e4bXT7Uhi9YAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*pxR2S53P_xoAAAAAAAAAAAAADrJ8AQ/original
+---
+
+提及组件。
+
+## 何时使用
+
+- 用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
+
+## API
+
+### Mentions
+
+| 参数              | 说明                         | 类型                                                     | 默认值      |
+| ----------------- | ---------------------------- | -------------------------------------------------------- | ----------- | ----- |
+| autofocus         | 自动获得焦点                 | boolean                                                  | `false`     |
+| defaultValue      | 默认值                       | string                                                   |             |
+| filterOption      | 自定义过滤逻辑               | false \| (input: string, option: OptionProps) => boolean |             |
+| getPopupContainer | 指定建议框挂载的 HTML 节点   | () => HTMLElement                                        |             |
+| notFoundContent   | 当下拉列表为空时显示的内容   | string \| slot                                           | 'Not Found' |
+| placement         | 弹出层展示位置               | `top` \| `bottom`                                        | `bottom`    |
+| prefix            | 设置触发关键字               | string \| string\[]                                      | '@'         |
+| split             | 设置选中项前后分隔符         | string                                                   | ' '         |
+| status            | 设置校验状态                 | 'error' \| 'warning'                                     | -           | 3.3.0 |
+| validateSearch    | 自定义触发验证逻辑           | (text: string, props: MentionsProps) => void             |             |
+| value(v-model)    | 设置值                       | string                                                   |             |
+| options           | 选项配置                     | [Options](#option)                                       | \[]         | 4.0   |
+| option            | 通过 option 插槽，自定义节点 | v-slot:option="option"                                   | -           | 4.0   |
+
+### 事件
+
+| 事件名称 | 说明               | 回调参数                                      |
+| -------- | ------------------ | --------------------------------------------- |
+| blur     | 失去焦点的时回调   | function                                      |
+| change   | 值改变时触发       | function(value: string)                       |
+| focus    | 获得焦点时回调     | function                                      |
+| search   | 文本框值变化时回调 | function(value: string, prefix: string)       |
+| select   | 选择选项时触发     | function(option: OptionProps, prefix: string) |
+
+### Mentions 方法
+
+| 名称    | 描述     |
+| ------- | -------- |
+| blur()  | 移除焦点 |
+| focus() | 获取焦点 |
+
+### Mention.Option (< 4.0)
+
+| 参数  | 说明           | 类型   | 默认值 |
+| ----- | -------------- | ------ | ------ |
+| value | 选择时填充的值 | string | ''     |
+
+### Option
+
+Support from v4.0
+
+<!-- prettier-ignore -->
+| 参数      | 说明           | 类型                | 默认值 |
+| --------- | -------------- | ------------------- | ------ |
+| value     | 选择时填充的值 | string | number             | -      |
+| label     | 选项的标题     | VueNode | (o: Option)=> VueNode     | -      |
+| disabled  | 是否可选       | boolean             | -      |
+| class | css 类名       | string              | -      |
+| style     | 选项样式       | CSSProperties | -      |
+|payload| 其它数据 | object | - |

package/src/mentions/style/index.ts

@@ -0,0 +1,232 @@
+import type { InputToken } from '../../input/style'
+import {
+  genActiveStyle,
+  genBasicInputStyle,
+  genDisabledStyle,
+  genPlaceholderStyle,
+  genStatusStyle,
+  initInputToken,
+} from '../../input/style'
+import { resetComponent, textEllipsis } from '../../style'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook } from '../../theme/internal'
+
+export interface ComponentToken {
+  zIndexPopup: number
+  dropdownHeight: number
+  controlItemWidth: number
+}
+
+type MentionsToken = InputToken<FullToken<'Mentions'>>
+
+const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
+  const {
+    componentCls,
+    colorTextDisabled,
+    controlItemBgHover,
+    controlPaddingHorizontal,
+    colorText,
+    motionDurationSlow,
+    lineHeight,
+    controlHeight,
+    inputPaddingHorizontal,
+    inputPaddingVertical,
+    fontSize,
+    colorBgElevated,
+    borderRadiusLG,
+    boxShadowSecondary,
+  } = token
+
+  const itemPaddingVertical = Math.round(
+    (token.controlHeight - token.fontSize * token.lineHeight) / 2,
+  )
+
+  return {
+    [componentCls]: {
+      ...resetComponent(token),
+      ...genBasicInputStyle(token),
+
+      position: 'relative',
+      display: 'inline-block',
+      height: 'auto',
+      padding: 0,
+      overflow: 'hidden',
+      lineHeight,
+      whiteSpace: 'pre-wrap',
+      verticalAlign: 'bottom',
+
+      ...genStatusStyle(token, componentCls),
+
+      '&-disabled': {
+        '> textarea': {
+          ...genDisabledStyle(token),
+        },
+      },
+
+      '&-focused': {
+        ...genActiveStyle(token),
+      },
+
+      [`&-affix-wrapper ${componentCls}-suffix`]: {
+        position: 'absolute',
+        top: 0,
+        insetInlineEnd: inputPaddingHorizontal,
+        bottom: 0,
+        zIndex: 1,
+        display: 'inline-flex',
+        alignItems: 'center',
+        margin: 'auto',
+      },
+
+      // ================= Input Area =================
+      [`> textarea, ${componentCls}-measure`]: {
+        color: colorText,
+        boxSizing: 'border-box',
+        minHeight: controlHeight - 2,
+        margin: 0,
+        padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`,
+        overflow: 'inherit',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        fontWeight: 'inherit',
+        fontSize: 'inherit',
+        fontFamily: 'inherit',
+        fontStyle: 'inherit',
+        fontVariant: 'inherit',
+        fontSizeAdjust: 'inherit',
+        fontStretch: 'inherit',
+        lineHeight: 'inherit',
+        direction: 'inherit',
+        letterSpacing: 'inherit',
+        whiteSpace: 'inherit',
+        textAlign: 'inherit',
+        verticalAlign: 'top',
+        wordWrap: 'break-word',
+        wordBreak: 'inherit',
+        tabSize: 'inherit',
+      },
+
+      '> textarea': {
+        width: '100%',
+        border: 'none',
+        outline: 'none',
+        resize: 'none',
+        backgroundColor: 'inherit',
+        ...genPlaceholderStyle(token.colorTextPlaceholder),
+      },
+
+      [`${componentCls}-measure`]: {
+        position: 'absolute',
+        top: 0,
+        insetInlineEnd: 0,
+        bottom: 0,
+        insetInlineStart: 0,
+        zIndex: -1,
+        color: 'transparent',
+        pointerEvents: 'none',
+
+        '> span': {
+          display: 'inline-block',
+          minHeight: '1em',
+        },
+      },
+
+      // ================== Dropdown ==================
+      '&-dropdown': {
+        // Ref select dropdown style
+        ...resetComponent(token),
+
+        position: 'absolute',
+        top: -9999,
+        insetInlineStart: -9999,
+        zIndex: token.zIndexPopup,
+        boxSizing: 'border-box',
+        fontSize,
+        fontVariant: 'initial',
+        backgroundColor: colorBgElevated,
+        borderRadius: borderRadiusLG,
+        outline: 'none',
+        boxShadow: boxShadowSecondary,
+
+        '&-hidden': {
+          display: 'none',
+        },
+
+        [`${componentCls}-dropdown-menu`]: {
+          maxHeight: token.dropdownHeight,
+          marginBottom: 0,
+          paddingInlineStart: 0, // Override default ul/ol
+          overflow: 'auto',
+          listStyle: 'none',
+          outline: 'none',
+
+          '&-item': {
+            ...textEllipsis,
+            position: 'relative',
+            display: 'block',
+            minWidth: token.controlItemWidth,
+            padding: `${itemPaddingVertical}px ${controlPaddingHorizontal}px`,
+            color: colorText,
+            fontWeight: 'normal',
+            lineHeight,
+            cursor: 'pointer',
+            transition: `background ${motionDurationSlow} ease`,
+
+            '&:hover': {
+              backgroundColor: controlItemBgHover,
+            },
+
+            '&:first-child': {
+              borderStartStartRadius: borderRadiusLG,
+              borderStartEndRadius: borderRadiusLG,
+              borderEndStartRadius: 0,
+              borderEndEndRadius: 0,
+            },
+
+            '&:last-child': {
+              borderStartStartRadius: 0,
+              borderStartEndRadius: 0,
+              borderEndStartRadius: borderRadiusLG,
+              borderEndEndRadius: borderRadiusLG,
+            },
+
+            '&-disabled': {
+              color: colorTextDisabled,
+              cursor: 'not-allowed',
+
+              '&:hover': {
+                color: colorTextDisabled,
+                backgroundColor: controlItemBgHover,
+                cursor: 'not-allowed',
+              },
+            },
+
+            '&-selected': {
+              color: colorText,
+              fontWeight: token.fontWeightStrong,
+              backgroundColor: controlItemBgHover,
+            },
+
+            '&-active': {
+              backgroundColor: controlItemBgHover,
+            },
+          },
+        },
+      },
+    },
+  }
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook(
+  'Mentions',
+  (token) => {
+    const mentionsToken = initInputToken<FullToken<'Mentions'>>(token)
+    return [genMentionsStyle(mentionsToken)]
+  },
+  (token) => ({
+    dropdownHeight: 250,
+    controlItemWidth: 100,
+    zIndexPopup: token.zIndexPopupBase + 50,
+  }),
+)