@antsoo-lib/components 0.1.2 → 0.1.4

package/src/image/style/index.ts

@@ -0,0 +1,322 @@
+import { TinyColor } from '@ctrl/tinycolor'
+
+import type { CSSObject } from '../../_util/cssinjs'
+import { genModalMaskStyle } from '../../modal/style'
+import { resetComponent, textEllipsis } from '../../style'
+import { initFadeMotion, initZoomMotion } from '../../style/motion'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+
+export interface ComponentToken {
+  zIndexPopup: number
+  previewOperationSize: number
+  previewOperationColor: string
+  previewOperationColorDisabled: string
+}
+
+export interface ImageToken extends FullToken<'Image'> {
+  previewCls: string
+  modalMaskBg: string
+  imagePreviewSwitchSize: number
+}
+
+export type PositionType = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky' | undefined
+
+export const genBoxStyle = (position?: PositionType): CSSObject => ({
+  position: position || 'absolute',
+  inset: 0,
+})
+
+export const genImageMaskStyle = (token: ImageToken): CSSObject => {
+  const { iconCls, motionDurationSlow, paddingXXS, marginXXS, prefixCls } = token
+  return {
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#fff',
+    background: new TinyColor('#000').setAlpha(0.5).toRgbString(),
+    cursor: 'pointer',
+    opacity: 0,
+    transition: `opacity ${motionDurationSlow}`,
+
+    [`.${prefixCls}-mask-info`]: {
+      ...textEllipsis,
+      padding: `0 ${paddingXXS}px`,
+      [iconCls]: {
+        marginInlineEnd: marginXXS,
+        svg: {
+          verticalAlign: 'baseline',
+        },
+      },
+    },
+  }
+}
+
+export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
+  const { previewCls, modalMaskBg, paddingSM, previewOperationColorDisabled, motionDurationSlow } =
+    token
+
+  const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1)
+  const operationBgHover = operationBg.clone().setAlpha(0.2)
+
+  return {
+    [`${previewCls}-operations`]: {
+      ...resetComponent(token),
+      display: 'flex',
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      color: token.previewOperationColor,
+      listStyle: 'none',
+      background: operationBg.toRgbString(),
+      pointerEvents: 'auto',
+
+      '&-operation': {
+        marginInlineStart: paddingSM,
+        padding: paddingSM,
+        cursor: 'pointer',
+        transition: `all ${motionDurationSlow}`,
+        userSelect: 'none',
+
+        '&:hover': {
+          background: operationBgHover.toRgbString(),
+        },
+
+        '&-disabled': {
+          color: previewOperationColorDisabled,
+          pointerEvents: 'none',
+        },
+
+        '&:last-of-type': {
+          marginInlineStart: 0,
+        },
+      },
+
+      '&-progress': {
+        position: 'absolute',
+        left: { _skip_check_: true, value: '50%' },
+        transform: 'translateX(-50%)',
+      },
+
+      '&-icon': {
+        fontSize: token.previewOperationSize,
+      },
+    },
+  }
+}
+
+export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
+  const {
+    modalMaskBg,
+    iconCls,
+    previewOperationColorDisabled,
+    previewCls,
+    zIndexPopup,
+    motionDurationSlow,
+  } = token
+
+  const operationBg = new TinyColor(modalMaskBg).setAlpha(0.1)
+  const operationBgHover = operationBg.clone().setAlpha(0.2)
+
+  return {
+    [`${previewCls}-switch-left, ${previewCls}-switch-right`]: {
+      position: 'fixed',
+      insetBlockStart: '50%',
+      zIndex: zIndexPopup + 1,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: token.imagePreviewSwitchSize,
+      height: token.imagePreviewSwitchSize,
+      marginTop: -token.imagePreviewSwitchSize / 2,
+      color: token.previewOperationColor,
+      background: operationBg.toRgbString(),
+      borderRadius: '50%',
+      transform: `translateY(-50%)`,
+      cursor: 'pointer',
+      transition: `all ${motionDurationSlow}`,
+      pointerEvents: 'auto',
+      userSelect: 'none',
+
+      '&:hover': {
+        background: operationBgHover.toRgbString(),
+      },
+
+      [`&-disabled`]: {
+        '&, &:hover': {
+          color: previewOperationColorDisabled,
+          background: 'transparent',
+          cursor: 'not-allowed',
+          [`> ${iconCls}`]: {
+            cursor: 'not-allowed',
+          },
+        },
+      },
+      [`> ${iconCls}`]: {
+        fontSize: token.previewOperationSize,
+      },
+    },
+
+    [`${previewCls}-switch-left`]: {
+      insetInlineStart: token.marginSM,
+    },
+
+    [`${previewCls}-switch-right`]: {
+      insetInlineEnd: token.marginSM,
+    },
+  }
+}
+
+export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
+  const { motionEaseOut, previewCls, motionDurationSlow, componentCls } = token
+
+  return [
+    {
+      [`${componentCls}-preview-root`]: {
+        [previewCls]: {
+          height: '100%',
+          textAlign: 'center',
+          pointerEvents: 'none',
+        },
+
+        [`${previewCls}-body`]: {
+          ...genBoxStyle(),
+          overflow: 'hidden',
+        },
+
+        [`${previewCls}-img`]: {
+          maxWidth: '100%',
+          maxHeight: '100%',
+          verticalAlign: 'middle',
+          transform: 'scale3d(1, 1, 1)',
+          cursor: 'grab',
+          transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
+          userSelect: 'none',
+          pointerEvents: 'auto',
+
+          '&-wrapper': {
+            ...genBoxStyle(),
+            transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
+
+            // https://github.com/ant-design/ant-design/issues/39913
+            // TailwindCSS will reset img default style.
+            // Let's set back.
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+
+            '&::before': {
+              display: 'inline-block',
+              width: 1,
+              height: '50%',
+              marginInlineEnd: -1,
+              content: '""',
+            },
+          },
+        },
+
+        [`${previewCls}-moving`]: {
+          [`${previewCls}-preview-img`]: {
+            cursor: 'grabbing',
+
+            '&-wrapper': {
+              transitionDuration: '0s',
+            },
+          },
+        },
+      },
+    },
+    // Override
+    {
+      [`${componentCls}-preview-root`]: {
+        [`${previewCls}-wrap`]: {
+          zIndex: token.zIndexPopup,
+        },
+      },
+    },
+
+    // Preview operations & switch
+    {
+      [`${componentCls}-preview-operations-wrapper`]: {
+        position: 'fixed',
+        insetBlockStart: 0,
+        insetInlineEnd: 0,
+        zIndex: token.zIndexPopup + 1,
+        width: '100%',
+      },
+      '&': [genPreviewOperationsStyle(token), genPreviewSwitchStyle(token)],
+    },
+  ]
+}
+
+const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
+  const { componentCls } = token
+  return {
+    // ============================== image ==============================
+    [componentCls]: {
+      position: 'relative',
+      display: 'inline-block',
+      [`${componentCls}-img`]: {
+        width: '100%',
+        height: 'auto',
+        verticalAlign: 'middle',
+      },
+      [`${componentCls}-img-placeholder`]: {
+        backgroundColor: token.colorBgContainerDisabled,
+        backgroundImage:
+          "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center center',
+        backgroundSize: '30%',
+      },
+      [`${componentCls}-mask`]: {
+        ...genImageMaskStyle(token),
+      },
+      [`${componentCls}-mask:hover`]: {
+        opacity: 1,
+      },
+      [`${componentCls}-placeholder`]: {
+        ...genBoxStyle(),
+      },
+    },
+  }
+}
+
+const genPreviewMotion: GenerateStyle<ImageToken> = (token) => {
+  const { previewCls } = token
+
+  return {
+    [`${previewCls}-root`]: initZoomMotion(token, 'zoom'),
+    [`&`]: initFadeMotion(token, true),
+  }
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook(
+  'Image',
+  (token) => {
+    const previewCls = `${token.componentCls}-preview`
+
+    const imageToken = mergeToken<ImageToken>(token, {
+      previewCls,
+      modalMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(), // FIXME: Shared Token
+      imagePreviewSwitchSize: token.controlHeightLG,
+    })
+
+    return [
+      genImageStyle(imageToken),
+      genImagePreviewStyle(imageToken),
+      genModalMaskStyle(mergeToken<ImageToken>(imageToken, { componentCls: previewCls })),
+      genPreviewMotion(imageToken),
+    ]
+  },
+  (token) => ({
+    zIndexPopup: token.zIndexPopupBase + 80,
+    previewOperationColor: new TinyColor(token.colorTextLightSolid).toRgbString(),
+    previewOperationColorDisabled: new TinyColor(token.colorTextLightSolid)
+      .setAlpha(0.25)
+      .toRgbString(),
+    previewOperationSize: token.fontSizeIcon * 1.5, // FIXME: fontSizeIconLG
+  }),
+)

package/src/input/ClearableLabeledInput.tsx

@@ -0,0 +1,126 @@
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'
+
+import type { CSSProperties, PropType, VNode } from 'vue'
+import { defineComponent } from 'vue'
+
+import type { MouseEventHandler } from '../_util/EventInterface'
+import classNames from '../_util/classNames'
+import type { InputStatus } from '../_util/statusUtils'
+import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'
+import type { VueNode } from '../_util/type'
+import { anyType, tuple } from '../_util/type'
+import { cloneElement } from '../_util/vnode'
+import PropTypes from '../_util/vue-types'
+import type { Direction, SizeType } from '../config-provider'
+import { FormItemInputContext } from '../form/FormItemContext'
+import { hasAddon } from './util'
+
+const ClearableInputType = ['text', 'input'] as const
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ClearableLabeledInput',
+  inheritAttrs: false,
+  props: {
+    prefixCls: String,
+    inputType: PropTypes.oneOf(tuple('text', 'input')),
+    value: anyType<VueNode>(),
+    defaultValue: anyType<VueNode>(),
+    allowClear: { type: Boolean, default: undefined },
+    element: anyType<VueNode>(),
+    handleReset: Function as PropType<MouseEventHandler>,
+    disabled: { type: Boolean, default: undefined },
+    direction: { type: String as PropType<Direction> },
+    size: { type: String as PropType<SizeType> },
+    suffix: anyType<VueNode>(),
+    prefix: anyType<VueNode>(),
+    addonBefore: anyType<VueNode>(),
+    addonAfter: anyType<VueNode>(),
+    readonly: { type: Boolean, default: undefined },
+    focused: { type: Boolean, default: undefined },
+    bordered: { type: Boolean, default: true },
+    triggerFocus: { type: Function as PropType<() => void> },
+    hidden: Boolean,
+    status: String as PropType<InputStatus>,
+    hashId: String,
+  },
+  setup(props, { slots, attrs }) {
+    const statusContext = FormItemInputContext.useInject()
+    const renderClearIcon = (prefixCls: string) => {
+      const { value, disabled, readonly, handleReset, suffix = slots.suffix } = props
+      const needClear = !disabled && !readonly && value
+      const className = `${prefixCls}-clear-icon`
+      return (
+        <CloseCircleFilled
+          onClick={handleReset}
+          // Do not trigger onBlur when clear input
+          onMousedown={(e) => e.preventDefault()}
+          class={classNames(
+            {
+              [`${className}-hidden`]: !needClear,
+              [`${className}-has-suffix`]: !!suffix,
+            },
+            className,
+          )}
+          role="button"
+        />
+      )
+    }
+    const renderTextAreaWithClearIcon = (prefixCls: string, element: VNode) => {
+      const {
+        value,
+        allowClear,
+        direction,
+        bordered,
+        hidden,
+        status: customStatus,
+        addonAfter = slots.addonAfter,
+        addonBefore = slots.addonBefore,
+        hashId,
+      } = props
+
+      const { status: contextStatus, hasFeedback } = statusContext
+
+      if (!allowClear) {
+        return cloneElement(element, {
+          value,
+          disabled: props.disabled,
+        })
+      }
+      const affixWrapperCls = classNames(
+        `${prefixCls}-affix-wrapper`,
+        `${prefixCls}-affix-wrapper-textarea-with-clear-btn`,
+        getStatusClassNames(
+          `${prefixCls}-affix-wrapper`,
+          getMergedStatus(contextStatus, customStatus),
+          hasFeedback,
+        ),
+        {
+          [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
+          [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
+          // className will go to addon wrapper
+          [`${attrs.class}`]: !hasAddon({ addonAfter, addonBefore }) && attrs.class,
+        },
+        hashId,
+      )
+      return (
+        <span class={affixWrapperCls} style={attrs.style as CSSProperties} hidden={hidden}>
+          {cloneElement(element, {
+            style: null,
+            value,
+            disabled: props.disabled,
+          })}
+          {renderClearIcon(prefixCls)}
+        </span>
+      )
+    }
+
+    return () => {
+      const { prefixCls, inputType, element = slots.element?.() } = props
+      if (inputType === ClearableInputType[0]) {
+        return renderTextAreaWithClearIcon(prefixCls, element as VNode)
+      }
+      return null
+    }
+  },
+})

package/src/input/Group.tsx

@@ -0,0 +1,50 @@
+import type { PropType } from 'vue'
+import { computed, defineComponent } from 'vue'
+
+import classNames from '../_util/classNames'
+import type { SizeType } from '../config-provider'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import { FormItemInputContext } from '../form/FormItemContext'
+// CSSINJS
+import useStyle from './style'
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'AInputGroup',
+  inheritAttrs: false,
+  props: {
+    prefixCls: String,
+    size: { type: String as PropType<SizeType> },
+    compact: { type: Boolean, default: undefined },
+  },
+  setup(props, { slots, attrs }) {
+    const { prefixCls, direction, getPrefixCls } = useConfigInject('input-group', props)
+    const formItemInputContext = FormItemInputContext.useInject()
+    FormItemInputContext.useProvide(formItemInputContext, {
+      isFormItemInput: false,
+    })
+
+    // style
+    const inputPrefixCls = computed(() => getPrefixCls('input'))
+    const [wrapSSR, hashId] = useStyle(inputPrefixCls)
+
+    const cls = computed(() => {
+      const pre = prefixCls.value
+      return {
+        [`${pre}`]: true,
+        [hashId.value]: true,
+        [`${pre}-lg`]: props.size === 'large',
+        [`${pre}-sm`]: props.size === 'small',
+        [`${pre}-compact`]: props.compact,
+        [`${pre}-rtl`]: direction.value === 'rtl',
+      }
+    })
+    return () => {
+      return wrapSSR(
+        <span {...attrs} class={classNames(cls.value, attrs.class)}>
+          {slots.default?.()}
+        </span>,
+      )
+    }
+  },
+})

package/src/input/Input.tsx

@@ -0,0 +1,206 @@
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'
+
+import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, ref } from 'vue'
+
+import classNames from '../_util/classNames'
+import omit from '../_util/omit'
+import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'
+import { useInjectDisabled } from '../config-provider/DisabledContext'
+import useConfigInject from '../config-provider/hooks/useConfigInject'
+import {
+  FormItemInputContext,
+  NoFormStatus,
+  useInjectFormItemContext,
+} from '../form/FormItemContext'
+import { NoCompactStyle, useCompactItemContext } from '../space/Compact'
+import VcInput from '../vc-input/Input'
+import type { InputFocusOptions } from '../vc-input/utils/commonUtils'
+import { hasPrefixSuffix } from '../vc-input/utils/commonUtils'
+import inputProps from './inputProps'
+// CSSINJS
+import useStyle from './style'
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'AInput',
+  inheritAttrs: false,
+  props: inputProps(),
+  setup(props, { slots, attrs, expose, emit }) {
+    const inputRef = ref()
+    const formItemContext = useInjectFormItemContext()
+    const formItemInputContext = FormItemInputContext.useInject()
+    const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status))
+    const { direction, prefixCls, size, autocomplete } = useConfigInject('input', props)
+
+    // ===================== Compact Item =====================
+    const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction)
+    const mergedSize = computed(() => {
+      return compactSize.value || size.value
+    })
+    // Style
+    const [wrapSSR, hashId] = useStyle(prefixCls)
+
+    const disabled = useInjectDisabled()
+
+    const focus = (option?: InputFocusOptions) => {
+      inputRef.value?.focus(option)
+    }
+
+    const blur = () => {
+      inputRef.value?.blur()
+    }
+
+    const setSelectionRange = (
+      start: number,
+      end: number,
+      direction?: 'forward' | 'backward' | 'none',
+    ) => {
+      inputRef.value?.setSelectionRange(start, end, direction)
+    }
+
+    const select = () => {
+      inputRef.value?.select()
+    }
+
+    expose({
+      focus,
+      blur,
+      input: inputRef,
+      setSelectionRange,
+      select,
+    })
+    // ===================== Remove Password value =====================
+    const removePasswordTimeoutRef = ref<any[]>([])
+    const removePasswordTimeout = () => {
+      removePasswordTimeoutRef.value.push(
+        setTimeout(() => {
+          if (
+            inputRef.value?.input &&
+            inputRef.value?.input.getAttribute('type') === 'password' &&
+            inputRef.value?.input.hasAttribute('value')
+          ) {
+            inputRef.value?.input.removeAttribute('value')
+          }
+        }),
+      )
+    }
+    onMounted(() => {
+      removePasswordTimeout()
+    })
+    onBeforeUpdate(() => {
+      removePasswordTimeoutRef.value.forEach((item) => clearTimeout(item))
+    })
+    onBeforeUnmount(() => {
+      removePasswordTimeoutRef.value.forEach((item) => clearTimeout(item))
+    })
+
+    const handleBlur = (e: FocusEvent) => {
+      removePasswordTimeout()
+      emit('blur', e)
+      formItemContext.onFieldBlur()
+    }
+
+    const handleFocus = (e: FocusEvent) => {
+      removePasswordTimeout()
+      emit('focus', e)
+    }
+
+    const triggerChange = (e: Event) => {
+      emit('update:value', (e.target as HTMLInputElement).value)
+      emit('change', e)
+      emit('input', e)
+      formItemContext.onFieldChange()
+    }
+
+    return () => {
+      const { hasFeedback, feedbackIcon } = formItemInputContext
+      const {
+        allowClear,
+        bordered = true,
+        prefix = slots.prefix?.(),
+        suffix = slots.suffix?.(),
+        addonAfter = slots.addonAfter?.(),
+        addonBefore = slots.addonBefore?.(),
+        id = formItemContext.id?.value,
+        ...rest
+      } = props
+      const suffixNode = (hasFeedback || suffix) && (
+        <>
+          {suffix}
+          {hasFeedback && feedbackIcon}
+        </>
+      )
+      const prefixClsValue = prefixCls.value
+      const inputHasPrefixSuffix = hasPrefixSuffix({ prefix, suffix }) || !!hasFeedback
+      const clearIcon = slots.clearIcon || (() => <CloseCircleFilled />)
+      return wrapSSR(
+        <VcInput
+          {...attrs}
+          {...omit(rest, ['onUpdate:value', 'onChange', 'onInput'])}
+          onChange={triggerChange}
+          id={id}
+          disabled={props.disabled ?? disabled.value}
+          ref={inputRef}
+          prefixCls={prefixClsValue}
+          autocomplete={autocomplete.value}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          prefix={prefix}
+          suffix={suffixNode}
+          allowClear={allowClear}
+          addonAfter={
+            addonAfter && (
+              <NoCompactStyle>
+                <NoFormStatus>{addonAfter}</NoFormStatus>
+              </NoCompactStyle>
+            )
+          }
+          addonBefore={
+            addonBefore && (
+              <NoCompactStyle>
+                <NoFormStatus>{addonBefore}</NoFormStatus>
+              </NoCompactStyle>
+            )
+          }
+          class={[attrs.class, compactItemClassnames.value]}
+          inputClassName={classNames(
+            {
+              [`${prefixClsValue}-sm`]: mergedSize.value === 'small',
+              [`${prefixClsValue}-lg`]: mergedSize.value === 'large',
+              [`${prefixClsValue}-rtl`]: direction.value === 'rtl',
+              [`${prefixClsValue}-borderless`]: !bordered,
+            },
+            !inputHasPrefixSuffix && getStatusClassNames(prefixClsValue, mergedStatus.value),
+            hashId.value,
+          )}
+          affixWrapperClassName={classNames(
+            {
+              [`${prefixClsValue}-affix-wrapper-sm`]: mergedSize.value === 'small',
+              [`${prefixClsValue}-affix-wrapper-lg`]: mergedSize.value === 'large',
+              [`${prefixClsValue}-affix-wrapper-rtl`]: direction.value === 'rtl',
+              [`${prefixClsValue}-affix-wrapper-borderless`]: !bordered,
+            },
+            getStatusClassNames(`${prefixClsValue}-affix-wrapper`, mergedStatus.value, hasFeedback),
+            hashId.value,
+          )}
+          wrapperClassName={classNames(
+            {
+              [`${prefixClsValue}-group-rtl`]: direction.value === 'rtl',
+            },
+            hashId.value,
+          )}
+          groupClassName={classNames(
+            {
+              [`${prefixClsValue}-group-wrapper-sm`]: mergedSize.value === 'small',
+              [`${prefixClsValue}-group-wrapper-lg`]: mergedSize.value === 'large',
+              [`${prefixClsValue}-group-wrapper-rtl`]: direction.value === 'rtl',
+            },
+            getStatusClassNames(`${prefixClsValue}-group-wrapper`, mergedStatus.value, hasFeedback),
+            hashId.value,
+          )}
+          v-slots={{ ...slots, clearIcon }}
+        ></VcInput>,
+      )
+    }
+  },
+})