@antsoo-lib/components 0.1.2 → 0.1.4

package/src/select/style/multiple.ts

@@ -0,0 +1,239 @@
+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

@@ -0,0 +1,192 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,43 @@
+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