@antsoo-lib/components 0.1.11 → 0.1.12

package/src/select/style/multiple.ts

@@ -1,239 +0,0 @@
-import type { SelectToken } from '.'
-import type { CSSInterpolation, CSSObject } from '../../_util/cssinjs'
-import { resetIcon } from '../../style'
-import { mergeToken } from '../../theme/internal'
-
-const FIXED_ITEM_MARGIN = 2
-
-function getSelectItemStyle({
-  controlHeightSM,
-  controlHeight,
-  lineWidth: borderWidth,
-}: SelectToken) {
-  const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth
-  const selectItemMargin = Math.ceil(selectItemDist / 2)
-  return [selectItemDist, selectItemMargin]
-}
-
-function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
-  const { componentCls, iconCls } = token
-
-  const selectOverflowPrefixCls = `${componentCls}-selection-overflow`
-
-  const selectItemHeight = token.controlHeightSM
-  const [selectItemDist] = getSelectItemStyle(token)
-
-  const suffixCls = suffix ? `${componentCls}-${suffix}` : ''
-
-  return {
-    [`${componentCls}-multiple${suffixCls}`]: {
-      fontSize: token.fontSize,
-
-      /**
-       * Do not merge `height` & `line-height` under style with `selection` & `search`, since chrome
-       * may update to redesign with its align logic.
-       */
-      // =========================== Overflow ===========================
-      [selectOverflowPrefixCls]: {
-        position: 'relative',
-        display: 'flex',
-        flex: 'auto',
-        flexWrap: 'wrap',
-        maxWidth: '100%',
-
-        '&-item': {
-          flex: 'none',
-          alignSelf: 'center',
-          maxWidth: '100%',
-          display: 'inline-flex',
-        },
-      },
-
-      // ========================= Selector =========================
-      [`${componentCls}-selector`]: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        // Multiple is little different that horizontal is follow the vertical
-        padding: `${selectItemDist - FIXED_ITEM_MARGIN}px ${FIXED_ITEM_MARGIN * 2}px`,
-        borderRadius: token.borderRadius,
-
-        [`${componentCls}-show-search&`]: {
-          cursor: 'text',
-        },
-
-        [`${componentCls}-disabled&`]: {
-          background: token.colorBgContainerDisabled,
-          cursor: 'not-allowed',
-        },
-
-        '&:after': {
-          display: 'inline-block',
-          width: 0,
-          margin: `${FIXED_ITEM_MARGIN}px 0`,
-          lineHeight: `${selectItemHeight}px`,
-          content: '"\\a0"',
-        },
-      },
-
-      [`
-        &${componentCls}-show-arrow ${componentCls}-selector,
-        &${componentCls}-allow-clear ${componentCls}-selector
-      `]: {
-        paddingInlineEnd: token.fontSizeIcon + token.controlPaddingHorizontal,
-      },
-
-      // ======================== Selections ========================
-      [`${componentCls}-selection-item`]: {
-        position: 'relative',
-        display: 'flex',
-        flex: 'none',
-        boxSizing: 'border-box',
-        maxWidth: '100%',
-        height: selectItemHeight,
-        marginTop: FIXED_ITEM_MARGIN,
-        marginBottom: FIXED_ITEM_MARGIN,
-        lineHeight: `${selectItemHeight - token.lineWidth * 2}px`,
-        background: token.colorFillSecondary,
-        border: `${token.lineWidth}px solid ${token.colorSplit}`,
-        borderRadius: token.borderRadiusSM,
-        cursor: 'default',
-        transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
-        userSelect: 'none',
-        marginInlineEnd: FIXED_ITEM_MARGIN * 2,
-        paddingInlineStart: token.paddingXS,
-        paddingInlineEnd: token.paddingXS / 2,
-
-        [`${componentCls}-disabled&`]: {
-          color: token.colorTextDisabled,
-          borderColor: token.colorBorder,
-          cursor: 'not-allowed',
-        },
-
-        // It's ok not to do this, but 24px makes bottom narrow in view should adjust
-        '&-content': {
-          display: 'inline-block',
-          marginInlineEnd: token.paddingXS / 2,
-          overflow: 'hidden',
-          whiteSpace: 'pre', // fix whitespace wrapping. custom tags display all whitespace within.
-          textOverflow: 'ellipsis',
-        },
-
-        '&-remove': {
-          ...resetIcon(),
-
-          display: 'inline-block',
-          color: token.colorIcon,
-          fontWeight: 'bold',
-          fontSize: 10,
-          lineHeight: 'inherit',
-          cursor: 'pointer',
-
-          [`> ${iconCls}`]: {
-            verticalAlign: '-0.2em',
-          },
-
-          '&:hover': {
-            color: token.colorIconHover,
-          },
-        },
-      },
-
-      // ========================== Input ==========================
-      [`${selectOverflowPrefixCls}-item + ${selectOverflowPrefixCls}-item`]: {
-        [`${componentCls}-selection-search`]: {
-          marginInlineStart: 0,
-        },
-      },
-
-      [`${componentCls}-selection-search`]: {
-        display: 'inline-flex',
-        position: 'relative',
-        maxWidth: '100%',
-        marginInlineStart: token.inputPaddingHorizontalBase - selectItemDist,
-
-        [`
-          &-input,
-          &-mirror
-        `]: {
-          height: selectItemHeight,
-          fontFamily: token.fontFamily,
-          lineHeight: `${selectItemHeight}px`,
-          transition: `all ${token.motionDurationSlow}`,
-        },
-
-        '&-input': {
-          width: '100%',
-          minWidth: 4.1, // fix search cursor missing
-        },
-
-        '&-mirror': {
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          insetInlineEnd: 'auto',
-          zIndex: 999,
-          whiteSpace: 'pre', // fix whitespace wrapping caused width calculation bug
-          visibility: 'hidden',
-        },
-      },
-
-      // ======================= Placeholder =======================
-      [`${componentCls}-selection-placeholder `]: {
-        position: 'absolute',
-        top: '50%',
-        insetInlineStart: token.inputPaddingHorizontalBase,
-        insetInlineEnd: token.inputPaddingHorizontalBase,
-        transform: 'translateY(-50%)',
-        transition: `all ${token.motionDurationSlow}`,
-      },
-    },
-  }
-}
-
-export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
-  const { componentCls } = token
-
-  const smallToken = mergeToken<SelectToken>(token, {
-    controlHeight: token.controlHeightSM,
-    controlHeightSM: token.controlHeightXS,
-    borderRadius: token.borderRadiusSM,
-    borderRadiusSM: token.borderRadiusXS,
-  })
-  const [, smSelectItemMargin] = getSelectItemStyle(token)
-
-  return [
-    genSizeStyle(token),
-    // ======================== Small ========================
-    // Shared
-    genSizeStyle(smallToken, 'sm'),
-
-    // Padding
-    {
-      [`${componentCls}-multiple${componentCls}-sm`]: {
-        [`${componentCls}-selection-placeholder`]: {
-          insetInlineStart: token.controlPaddingHorizontalSM - token.lineWidth,
-          insetInlineEnd: token.controlPaddingHorizontalSM - token.lineWidth,
-        },
-
-        // https://github.com/ant-design/ant-design/issues/29559
-        [`${componentCls}-selection-search`]: {
-          marginInlineStart: smSelectItemMargin,
-        },
-      },
-    },
-
-    // ======================== Large ========================
-    // Shared
-    genSizeStyle(
-      mergeToken<any>(token, {
-        fontSize: token.fontSizeLG,
-        controlHeight: token.controlHeightLG,
-        controlHeightSM: token.controlHeight,
-        borderRadius: token.borderRadiusLG,
-        borderRadiusSM: token.borderRadius,
-      }),
-      'lg',
-    ),
-  ]
-}

package/src/select/style/single.ts

@@ -1,192 +0,0 @@
-import type { SelectToken } from '.'
-import type { CSSInterpolation, CSSObject } from '../../_util/cssinjs'
-import { resetComponent } from '../../style'
-import { mergeToken } from '../../theme/internal'
-
-function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
-  const { componentCls, inputPaddingHorizontalBase, borderRadius } = token
-
-  const selectHeightWithoutBorder = token.controlHeight - token.lineWidth * 2
-
-  const selectionItemPadding = Math.ceil(token.fontSize * 1.25)
-
-  const suffixCls = suffix ? `${componentCls}-${suffix}` : ''
-
-  return {
-    [`${componentCls}-single${suffixCls}`]: {
-      fontSize: token.fontSize,
-
-      // ========================= Selector =========================
-      [`${componentCls}-selector`]: {
-        ...resetComponent(token),
-
-        display: 'flex',
-        borderRadius,
-
-        [`${componentCls}-selection-search`]: {
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: inputPaddingHorizontalBase,
-          insetInlineEnd: inputPaddingHorizontalBase,
-          bottom: 0,
-
-          '&-input': {
-            width: '100%',
-          },
-        },
-
-        [`
-          ${componentCls}-selection-item,
-          ${componentCls}-selection-placeholder
-        `]: {
-          padding: 0,
-          lineHeight: `${selectHeightWithoutBorder}px`,
-          transition: `all ${token.motionDurationSlow}`,
-
-          // Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
-          '@supports (-moz-appearance: meterbar)': {
-            lineHeight: `${selectHeightWithoutBorder}px`,
-          },
-        },
-
-        [`${componentCls}-selection-item`]: {
-          position: 'relative',
-          userSelect: 'none',
-        },
-
-        [`${componentCls}-selection-placeholder`]: {
-          transition: 'none',
-          pointerEvents: 'none',
-        },
-
-        // For common baseline align
-        [[
-          '&:after',
-          /* For '' value baseline align */
-          `${componentCls}-selection-item:after`,
-          /* For undefined value baseline align */
-          `${componentCls}-selection-placeholder:after`,
-        ].join(',')]: {
-          display: 'inline-block',
-          width: 0,
-          visibility: 'hidden',
-          content: '"\\a0"',
-        },
-      },
-
-      [`
-        &${componentCls}-show-arrow ${componentCls}-selection-item,
-        &${componentCls}-show-arrow ${componentCls}-selection-placeholder
-      `]: {
-        paddingInlineEnd: selectionItemPadding,
-      },
-
-      // Opacity selection if open
-      [`&${componentCls}-open ${componentCls}-selection-item`]: {
-        color: token.colorTextPlaceholder,
-      },
-
-      // ========================== Input ==========================
-      // We only change the style of non-customize input which is only support by `combobox` mode.
-      // Not customize
-      [`&:not(${componentCls}-customize-input)`]: {
-        [`${componentCls}-selector`]: {
-          width: '100%',
-          height: token.controlHeight,
-          padding: `0 ${inputPaddingHorizontalBase}px`,
-
-          [`${componentCls}-selection-search-input`]: {
-            height: selectHeightWithoutBorder,
-          },
-
-          '&:after': {
-            lineHeight: `${selectHeightWithoutBorder}px`,
-          },
-        },
-      },
-
-      [`&${componentCls}-customize-input`]: {
-        [`${componentCls}-selector`]: {
-          '&:after': {
-            display: 'none',
-          },
-
-          [`${componentCls}-selection-search`]: {
-            position: 'static',
-            width: '100%',
-          },
-
-          [`${componentCls}-selection-placeholder`]: {
-            position: 'absolute',
-            insetInlineStart: 0,
-            insetInlineEnd: 0,
-            padding: `0 ${inputPaddingHorizontalBase}px`,
-
-            '&:after': {
-              display: 'none',
-            },
-          },
-        },
-      },
-    },
-  }
-}
-
-export default function genSingleStyle(token: SelectToken): CSSInterpolation {
-  const { componentCls } = token
-
-  const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.lineWidth
-
-  return [
-    genSizeStyle(token),
-
-    // ======================== Small ========================
-    // Shared
-    genSizeStyle(
-      mergeToken<any>(token, {
-        controlHeight: token.controlHeightSM,
-        borderRadius: token.borderRadiusSM,
-      }),
-      'sm',
-    ),
-
-    // padding
-    {
-      [`${componentCls}-single${componentCls}-sm`]: {
-        [`&:not(${componentCls}-customize-input)`]: {
-          [`${componentCls}-selection-search`]: {
-            insetInlineStart: inputPaddingHorizontalSM,
-            insetInlineEnd: inputPaddingHorizontalSM,
-          },
-
-          [`${componentCls}-selector`]: {
-            padding: `0 ${inputPaddingHorizontalSM}px`,
-          },
-
-          // With arrow should provides `padding-right` to show the arrow
-          [`&${componentCls}-show-arrow ${componentCls}-selection-search`]: {
-            insetInlineEnd: inputPaddingHorizontalSM + token.fontSize * 1.5,
-          },
-
-          [`
-            &${componentCls}-show-arrow ${componentCls}-selection-item,
-            &${componentCls}-show-arrow ${componentCls}-selection-placeholder
-          `]: {
-            paddingInlineEnd: token.fontSize * 1.5,
-          },
-        },
-      },
-    },
-
-    // ======================== Large ========================
-    // Shared
-    genSizeStyle(
-      mergeToken<any>(token, {
-        controlHeight: token.controlHeightLG,
-        fontSize: token.fontSizeLG,
-        borderRadius: token.borderRadiusLG,
-      }),
-      'lg',
-    ),
-  ]
-}

package/src/select/utils/iconUtil.tsx

@@ -1,63 +0,0 @@
-import CheckOutlined from '@ant-design/icons-vue/CheckOutlined'
-import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'
-import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'
-import DownOutlined from '@ant-design/icons-vue/DownOutlined'
-import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
-import SearchOutlined from '@ant-design/icons-vue/SearchOutlined'
-
-export default function getIcons(props: any, slots: any = {}) {
-  const { loading, multiple, prefixCls, hasFeedback, feedbackIcon, showArrow } = props
-  const suffixIcon = props.suffixIcon || (slots.suffixIcon && slots.suffixIcon())
-  const clearIcon = props.clearIcon || (slots.clearIcon && slots.clearIcon())
-  const menuItemSelectedIcon =
-    props.menuItemSelectedIcon || (slots.menuItemSelectedIcon && slots.menuItemSelectedIcon())
-  const removeIcon = props.removeIcon || (slots.removeIcon && slots.removeIcon())
-  // Clear Icon
-  const mergedClearIcon = clearIcon ?? <CloseCircleFilled />
-  // Validation Feedback Icon
-  const getSuffixIconNode = (arrowIcon) => (
-    <>
-      {showArrow !== false && arrowIcon}
-      {hasFeedback && feedbackIcon}
-    </>
-  )
-  // Arrow item icon
-  let mergedSuffixIcon = null
-  if (suffixIcon !== undefined) {
-    mergedSuffixIcon = getSuffixIconNode(suffixIcon)
-  } else if (loading) {
-    mergedSuffixIcon = getSuffixIconNode(<LoadingOutlined spin />)
-  } else {
-    const iconCls = `${prefixCls}-suffix`
-    mergedSuffixIcon = ({ open, showSearch }: { open: boolean; showSearch: boolean }) => {
-      if (open && showSearch) {
-        return getSuffixIconNode(<SearchOutlined class={iconCls} />)
-      }
-      return getSuffixIconNode(<DownOutlined class={iconCls} />)
-    }
-  }
-
-  // Checked item icon
-  let mergedItemIcon = null
-  if (menuItemSelectedIcon !== undefined) {
-    mergedItemIcon = menuItemSelectedIcon
-  } else if (multiple) {
-    mergedItemIcon = <CheckOutlined />
-  } else {
-    mergedItemIcon = null
-  }
-
-  let mergedRemoveIcon = null
-  if (removeIcon !== undefined) {
-    mergedRemoveIcon = removeIcon
-  } else {
-    mergedRemoveIcon = <CloseOutlined />
-  }
-
-  return {
-    clearIcon: mergedClearIcon,
-    suffixIcon: mergedSuffixIcon,
-    itemIcon: mergedItemIcon,
-    removeIcon: mergedRemoveIcon,
-  }
-}

package/src/skeleton/Avatar.tsx

@@ -1,49 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import initDefaultProps from '../_util/props-util/initDefaultProps'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import Element, { skeletonElementProps } from './Element'
-import useStyle from './style'
-
-export const avatarProps = () => {
-  return {
-    ...skeletonElementProps(),
-    shape: String as PropType<'circle' | 'square'>,
-  }
-}
-
-export type SkeletonAvatarProps = Partial<ExtractPropTypes<ReturnType<typeof avatarProps>>>
-
-const SkeletonAvatar = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ASkeletonAvatar',
-  props: initDefaultProps(avatarProps(), {
-    size: 'default',
-    shape: 'circle',
-  }),
-  setup(props) {
-    const { prefixCls } = useConfigInject('skeleton', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const cls = computed(() =>
-      classNames(
-        prefixCls.value,
-        `${prefixCls.value}-element`,
-        {
-          [`${prefixCls.value}-active`]: props.active,
-        },
-        hashId.value,
-      ),
-    )
-    return () => {
-      return wrapSSR(
-        <div class={cls.value}>
-          <Element {...props} prefixCls={`${prefixCls.value}-avatar`} />
-        </div>,
-      )
-    }
-  },
-})
-
-export default SkeletonAvatar

package/src/skeleton/Button.tsx

@@ -1,50 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import { initDefaultProps } from '../_util/props-util'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import Element, { skeletonElementProps } from './Element'
-import useStyle from './style'
-
-export const skeletonButtonProps = () => {
-  return {
-    ...skeletonElementProps(),
-    size: String as PropType<'large' | 'small' | 'default'>,
-    block: Boolean,
-  }
-}
-
-export type SkeletonButtonProps = Partial<ExtractPropTypes<ReturnType<typeof skeletonButtonProps>>>
-
-const SkeletonButton = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ASkeletonButton',
-  props: initDefaultProps(skeletonButtonProps(), {
-    size: 'default',
-  }),
-  setup(props) {
-    const { prefixCls } = useConfigInject('skeleton', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const cls = computed(() =>
-      classNames(
-        prefixCls.value,
-        `${prefixCls.value}-element`,
-        {
-          [`${prefixCls.value}-active`]: props.active,
-          [`${prefixCls.value}-block`]: props.block,
-        },
-        hashId.value,
-      ),
-    )
-    return () => {
-      return wrapSSR(
-        <div class={cls.value}>
-          <Element {...props} prefixCls={`${prefixCls.value}-button`} />
-        </div>,
-      )
-    }
-  },
-})
-
-export default SkeletonButton

package/src/skeleton/Element.tsx

@@ -1,43 +0,0 @@
-import type { CSSProperties, ExtractPropTypes, FunctionalComponent, PropType } from 'vue'
-
-import classNames from '../_util/classNames'
-
-export const skeletonElementProps = () => ({
-  prefixCls: String,
-  size: [String, Number] as PropType<'large' | 'small' | 'default' | number>,
-  shape: String as PropType<'circle' | 'square' | 'round' | 'default'>,
-  active: { type: Boolean, default: undefined },
-})
-
-export type SkeletonElementProps = Partial<
-  ExtractPropTypes<ReturnType<typeof skeletonElementProps>>
->
-
-const Element: FunctionalComponent<SkeletonElementProps> = (props) => {
-  const { prefixCls, size, shape } = props
-
-  const sizeCls = classNames({
-    [`${prefixCls}-lg`]: size === 'large',
-    [`${prefixCls}-sm`]: size === 'small',
-  })
-
-  const shapeCls = classNames({
-    [`${prefixCls}-circle`]: shape === 'circle',
-    [`${prefixCls}-square`]: shape === 'square',
-    [`${prefixCls}-round`]: shape === 'round',
-  })
-
-  const sizeStyle: CSSProperties =
-    typeof size === 'number'
-      ? {
-          width: `${size}px`,
-          height: `${size}px`,
-          lineHeight: `${size}px`,
-        }
-      : {}
-
-  return <span class={classNames(prefixCls, sizeCls, shapeCls)} style={sizeStyle} />
-}
-Element.displayName = 'SkeletonElement'
-
-export default Element

package/src/skeleton/Image.tsx

@@ -1,43 +0,0 @@
-import { computed, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import omit from '../_util/omit'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import type { SkeletonElementProps } from './Element'
-import { skeletonElementProps } from './Element'
-import useStyle from './style'
-
-export type SkeletonImageProps = Omit<SkeletonElementProps, 'size' | 'shape' | 'active'>
-
-const path =
-  'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z'
-
-const SkeletonImage = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ASkeletonImage',
-  props: omit(skeletonElementProps(), ['size', 'shape', 'active']),
-  setup(props) {
-    const { prefixCls } = useConfigInject('skeleton', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const cls = computed(() =>
-      classNames(prefixCls.value, `${prefixCls.value}-element`, hashId.value),
-    )
-    return () => {
-      return wrapSSR(
-        <div class={cls.value}>
-          <div class={`${prefixCls.value}-image`}>
-            <svg
-              viewBox="0 0 1098 1024"
-              xmlns="http://www.w3.org/2000/svg"
-              class={`${prefixCls.value}-image-svg`}
-            >
-              <path d={path} class={`${prefixCls.value}-image-path`} />
-            </svg>
-          </div>
-        </div>,
-      )
-    }
-  },
-})
-
-export default SkeletonImage