@antsoo-lib/components 0.1.11 → 0.1.12

package/src/checkbox/style/index.ts

@@ -1,303 +0,0 @@
-import { Keyframes } from '../../_util/cssinjs'
-import { genFocusOutline, resetComponent } from '../../style'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-export interface ComponentToken {}
-
-interface CheckboxToken extends FullToken<'Checkbox'> {
-  checkboxCls: string
-  checkboxSize: number
-}
-
-// ============================== Motion ==============================
-const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
-  '0%': {
-    transform: 'scale(1)',
-    opacity: 0.5,
-  },
-
-  '100%': {
-    transform: 'scale(1.6)',
-    opacity: 0,
-  },
-})
-
-// ============================== Styles ==============================
-export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
-  const { checkboxCls } = token
-  const wrapperCls = `${checkboxCls}-wrapper`
-
-  return [
-    // ===================== Basic =====================
-    {
-      // Group
-      [`${checkboxCls}-group`]: {
-        ...resetComponent(token),
-
-        display: 'inline-flex',
-        flexWrap: 'wrap',
-        columnGap: token.marginXS,
-
-        // Group > Grid
-        [`> ${token.antCls}-row`]: {
-          flex: 1,
-        },
-      },
-
-      // Wrapper
-      [wrapperCls]: {
-        ...resetComponent(token),
-
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        cursor: 'pointer',
-
-        // Fix checkbox & radio in flex align #30260
-        '&:after': {
-          display: 'inline-block',
-          width: 0,
-          overflow: 'hidden',
-          content: "'\\a0'",
-        },
-
-        // Checkbox near checkbox
-        [`& + ${wrapperCls}`]: {
-          marginInlineStart: 0,
-        },
-
-        [`&${wrapperCls}-in-form-item`]: {
-          'input[type="checkbox"]': {
-            width: 14, // FIXME: magic
-            height: 14, // FIXME: magic
-          },
-        },
-      },
-
-      // Wrapper > Checkbox
-      [checkboxCls]: {
-        ...resetComponent(token),
-
-        position: 'relative',
-        whiteSpace: 'nowrap',
-        lineHeight: 1,
-        cursor: 'pointer',
-
-        // To make alignment right when `controlHeight` is changed
-        // Ref: https://github.com/ant-design/ant-design/issues/41564
-        alignSelf: 'center',
-
-        // Wrapper > Checkbox > input
-        [`${checkboxCls}-input`]: {
-          position: 'absolute',
-          // Since baseline align will get additional space offset,
-          // we need to move input to top to make it align with text.
-          // Ref: https://github.com/ant-design/ant-design/issues/38926#issuecomment-1486137799
-          inset: 0,
-          zIndex: 1,
-          cursor: 'pointer',
-          opacity: 0,
-          margin: 0,
-
-          [`&:focus-visible + ${checkboxCls}-inner`]: {
-            ...genFocusOutline(token),
-          },
-        },
-
-        // Wrapper > Checkbox > inner
-        [`${checkboxCls}-inner`]: {
-          boxSizing: 'border-box',
-          position: 'relative',
-          top: 0,
-          insetInlineStart: 0,
-          display: 'block',
-          width: token.checkboxSize,
-          height: token.checkboxSize,
-          direction: 'ltr',
-          backgroundColor: token.colorBgContainer,
-          border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
-          borderRadius: token.borderRadiusSM,
-          borderCollapse: 'separate',
-          transition: `all ${token.motionDurationSlow}`,
-
-          '&:after': {
-            boxSizing: 'border-box',
-            position: 'absolute',
-            top: '50%',
-            insetInlineStart: '21.5%',
-            display: 'table',
-            width: (token.checkboxSize / 14) * 5,
-            height: (token.checkboxSize / 14) * 8,
-            border: `${token.lineWidthBold}px solid ${token.colorWhite}`,
-            borderTop: 0,
-            borderInlineStart: 0,
-            transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
-            opacity: 0,
-            content: '""',
-            transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`,
-          },
-        },
-
-        // Wrapper > Checkbox + Text
-        '& + span': {
-          paddingInlineStart: token.paddingXS,
-          paddingInlineEnd: token.paddingXS,
-        },
-      },
-    },
-
-    // ================= Indeterminate =================
-    {
-      [checkboxCls]: {
-        '&-indeterminate': {
-          // Wrapper > Checkbox > inner
-          [`${checkboxCls}-inner`]: {
-            '&:after': {
-              top: '50%',
-              insetInlineStart: '50%',
-              width: token.fontSizeLG / 2,
-              height: token.fontSizeLG / 2,
-              backgroundColor: token.colorPrimary,
-              border: 0,
-              transform: 'translate(-50%, -50%) scale(1)',
-              opacity: 1,
-              content: '""',
-            },
-          },
-        },
-      },
-    },
-
-    // ===================== Hover =====================
-    {
-      // Wrapper
-      [`${wrapperCls}:hover ${checkboxCls}:after`]: {
-        visibility: 'visible',
-      },
-
-      // Wrapper & Wrapper > Checkbox
-
-      [`
-        ${wrapperCls}:not(${wrapperCls}-disabled),
-        ${checkboxCls}:not(${checkboxCls}-disabled)
-      `]: {
-        [`&:hover ${checkboxCls}-inner`]: {
-          borderColor: token.colorPrimary,
-        },
-      },
-
-      [`${wrapperCls}:not(${wrapperCls}-disabled)`]: {
-        [`&:hover ${checkboxCls}-checked:not(${checkboxCls}-disabled) ${checkboxCls}-inner`]: {
-          backgroundColor: token.colorPrimaryHover,
-          borderColor: 'transparent',
-        },
-        [`&:hover ${checkboxCls}-checked:not(${checkboxCls}-disabled):after`]: {
-          borderColor: token.colorPrimaryHover,
-        },
-      },
-    },
-
-    // ==================== Checked ====================
-    {
-      // Wrapper > Checkbox
-      [`${checkboxCls}-checked`]: {
-        [`${checkboxCls}-inner`]: {
-          backgroundColor: token.colorPrimary,
-          borderColor: token.colorPrimary,
-
-          '&:after': {
-            opacity: 1,
-            transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
-            transition: `all ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
-          },
-        },
-
-        // Checked Effect
-        '&:after': {
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          width: '100%',
-          height: '100%',
-          borderRadius: token.borderRadiusSM,
-          visibility: 'hidden',
-          border: `${token.lineWidthBold}px solid ${token.colorPrimary}`,
-          animationName: antCheckboxEffect,
-          animationDuration: token.motionDurationSlow,
-          animationTimingFunction: 'ease-in-out',
-          animationFillMode: 'backwards',
-          content: '""',
-          transition: `all ${token.motionDurationSlow}`,
-        },
-      },
-
-      [`
-        ${wrapperCls}-checked:not(${wrapperCls}-disabled),
-        ${checkboxCls}-checked:not(${checkboxCls}-disabled)
-      `]: {
-        [`&:hover ${checkboxCls}-inner`]: {
-          backgroundColor: token.colorPrimaryHover,
-          borderColor: 'transparent',
-        },
-        [`&:hover ${checkboxCls}:after`]: {
-          borderColor: token.colorPrimaryHover,
-        },
-      },
-    },
-
-    // ==================== Disable ====================
-    {
-      // Wrapper
-      [`${wrapperCls}-disabled`]: {
-        cursor: 'not-allowed',
-      },
-
-      // Wrapper > Checkbox
-      [`${checkboxCls}-disabled`]: {
-        // Wrapper > Checkbox > input
-        [`&, ${checkboxCls}-input`]: {
-          cursor: 'not-allowed',
-          // Disabled for native input to enable Tooltip event handler
-          // ref: https://github.com/ant-design/ant-design/issues/39822#issuecomment-1365075901
-          pointerEvents: 'none',
-        },
-
-        // Wrapper > Checkbox > inner
-        [`${checkboxCls}-inner`]: {
-          background: token.colorBgContainerDisabled,
-          borderColor: token.colorBorder,
-
-          '&:after': {
-            borderColor: token.colorTextDisabled,
-          },
-        },
-
-        '&:after': {
-          display: 'none',
-        },
-
-        '& + span': {
-          color: token.colorTextDisabled,
-        },
-
-        [`&${checkboxCls}-indeterminate ${checkboxCls}-inner::after`]: {
-          background: token.colorTextDisabled,
-        },
-      },
-    },
-  ]
-}
-
-// ============================== Export ==============================
-export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>) {
-  const checkboxToken: CheckboxToken = mergeToken<CheckboxToken>(token, {
-    checkboxCls: `.${prefixCls}`,
-    checkboxSize: token.controlInteractiveSize,
-  })
-
-  return [genCheckboxStyle(checkboxToken)]
-}
-
-export default genComponentStyleHook('Checkbox', (token, { prefixCls }) => [
-  getStyle(prefixCls, token),
-])

package/src/col/index.ts

@@ -1,5 +0,0 @@
-import { withInstall } from '../_util/type'
-import { Col } from '../grid'
-
-export type { ColProps, ColSize } from '../grid'
-export default withInstall(Col)

package/src/col/style/index.ts

@@ -1,4 +0,0 @@
-// Compatible for babel-plugin-import
-
-/* istanbul ignore next */
-export default {}

package/src/collapse/Collapse.tsx

@@ -1,204 +0,0 @@
-import RightOutlined from '@ant-design/icons-vue/RightOutlined'
-
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-import { computed, defineComponent, ref, watch } from 'vue'
-
-import classNames from '../_util/classNames'
-import collapseMotion from '../_util/collapseMotion'
-import firstNotUndefined from '../_util/firstNotUndefined'
-import {
-  flattenChildren,
-  initDefaultProps,
-  isEmptyElement,
-  isValidElement,
-} from '../_util/props-util'
-import type { CustomSlotsType } from '../_util/type'
-import { getDataAndAriaProps } from '../_util/util'
-import { cloneElement } from '../_util/vnode'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import type { CollapsePanelProps } from './CollapsePanel'
-import type { CollapsibleType } from './commonProps'
-import { collapseProps } from './commonProps'
-// CSSINJS
-import useStyle from './style'
-
-type Key = number | string
-
-function getActiveKeysArray(activeKey: Key | Key[]) {
-  let currentActiveKey = activeKey
-  if (!Array.isArray(currentActiveKey)) {
-    const activeKeyType = typeof currentActiveKey
-    currentActiveKey =
-      activeKeyType === 'number' || activeKeyType === 'string' ? [currentActiveKey] : []
-  }
-  return currentActiveKey.map((key) => String(key))
-}
-export { collapseProps }
-export type CollapseProps = Partial<ExtractPropTypes<ReturnType<typeof collapseProps>>>
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ACollapse',
-  inheritAttrs: false,
-  props: initDefaultProps(collapseProps(), {
-    accordion: false,
-    destroyInactivePanel: false,
-    bordered: true,
-    expandIconPosition: 'start',
-  }),
-  slots: Object as CustomSlotsType<{
-    default?: any
-    expandIcon?: CollapsePanelProps
-  }>,
-  setup(props, { attrs, slots, emit }) {
-    const stateActiveKey = ref<Key[]>(
-      getActiveKeysArray(firstNotUndefined([props.activeKey, props.defaultActiveKey])),
-    )
-
-    watch(
-      () => props.activeKey,
-      () => {
-        stateActiveKey.value = getActiveKeysArray(props.activeKey)
-      },
-      { deep: true },
-    )
-    const { prefixCls, direction, rootPrefixCls } = useConfigInject('collapse', props)
-
-    // style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const iconPosition = computed(() => {
-      const { expandIconPosition } = props
-      if (expandIconPosition !== undefined) {
-        return expandIconPosition
-      }
-      return direction.value === 'rtl' ? 'end' : 'start'
-    })
-
-    const renderExpandIcon = (panelProps: CollapsePanelProps) => {
-      const { expandIcon = slots.expandIcon } = props
-      const icon = expandIcon ? (
-        expandIcon(panelProps)
-      ) : (
-        <RightOutlined rotate={panelProps.isActive ? 90 : undefined} />
-      )
-
-      return (
-        <div
-          class={[`${prefixCls.value}-expand-icon`, hashId.value]}
-          onClick={() =>
-            ['header', 'icon'].includes(props.collapsible) && onClickItem(panelProps.panelKey)
-          }
-        >
-          {isValidElement(Array.isArray(expandIcon) ? icon[0] : icon)
-            ? cloneElement(
-                icon,
-                {
-                  class: `${prefixCls.value}-arrow`,
-                },
-                false,
-              )
-            : icon}
-        </div>
-      )
-    }
-    const setActiveKey = (activeKey: Key[]) => {
-      if (props.activeKey === undefined) {
-        stateActiveKey.value = activeKey
-      }
-      const newKey = props.accordion ? activeKey[0] : activeKey
-      emit('update:activeKey', newKey)
-      emit('change', newKey)
-    }
-    const onClickItem = (key: Key) => {
-      let activeKey = stateActiveKey.value
-      if (props.accordion) {
-        activeKey = activeKey[0] === key ? [] : [key]
-      } else {
-        activeKey = [...activeKey]
-        const index = activeKey.indexOf(key)
-        const isActive = index > -1
-        if (isActive) {
-          // remove active state
-          activeKey.splice(index, 1)
-        } else {
-          activeKey.push(key)
-        }
-      }
-      setActiveKey(activeKey)
-    }
-
-    const getNewChild = (child, index) => {
-      if (isEmptyElement(child)) return
-      const activeKey = stateActiveKey.value
-      const { accordion, destroyInactivePanel, collapsible, openAnimation } = props
-      const animation = openAnimation || collapseMotion(`${rootPrefixCls.value}-motion-collapse`)
-
-      // If there is no key provide, use the panel order as default key
-      const key = String(child.key ?? index)
-      const {
-        header = child.children?.header?.(),
-        headerClass,
-        collapsible: childCollapsible,
-        disabled,
-      } = child.props || {}
-      let isActive = false
-
-      if (accordion) {
-        isActive = activeKey[0] === key
-      } else {
-        isActive = activeKey.includes(key)
-      }
-
-      let mergeCollapsible: CollapsibleType = childCollapsible ?? collapsible
-      // legacy 2.x
-      if (disabled || disabled === '') {
-        mergeCollapsible = 'disabled'
-      }
-      const newProps = {
-        key,
-        panelKey: key,
-        header,
-        headerClass,
-        isActive,
-        prefixCls: prefixCls.value,
-        destroyInactivePanel,
-        openAnimation: animation,
-        accordion,
-        onItemClick: mergeCollapsible === 'disabled' ? null : onClickItem,
-        expandIcon: renderExpandIcon,
-        collapsible: mergeCollapsible,
-      }
-
-      return cloneElement(child, newProps)
-    }
-
-    const getItems = () => {
-      return flattenChildren(slots.default?.()).map(getNewChild)
-    }
-
-    return () => {
-      const { accordion, bordered, ghost } = props
-      const collapseClassName = classNames(
-        prefixCls.value,
-        {
-          [`${prefixCls.value}-borderless`]: !bordered,
-          [`${prefixCls.value}-icon-position-${iconPosition.value}`]: true,
-          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-          [`${prefixCls.value}-ghost`]: !!ghost,
-          [attrs.class as string]: !!attrs.class,
-        },
-        hashId.value,
-      )
-      return wrapSSR(
-        <div
-          class={collapseClassName}
-          {...getDataAndAriaProps(attrs)}
-          style={attrs.style as CSSProperties}
-          role={accordion ? 'tablist' : null}
-        >
-          {getItems()}
-        </div>,
-      )
-    }
-  },
-})

package/src/collapse/CollapsePanel.tsx

@@ -1,124 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { Transition, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import { initDefaultProps } from '../_util/props-util'
-import type { CustomSlotsType } from '../_util/type'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import devWarning from '../vc-util/devWarning'
-import PanelContent from './PanelContent'
-import { collapsePanelProps } from './commonProps'
-
-export { collapsePanelProps }
-export type CollapsePanelProps = Partial<ExtractPropTypes<ReturnType<typeof collapsePanelProps>>>
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ACollapsePanel',
-  inheritAttrs: false,
-  props: initDefaultProps(collapsePanelProps(), {
-    showArrow: true,
-    isActive: false,
-    onItemClick() {},
-    headerClass: '',
-    forceRender: false,
-  }),
-  slots: Object as CustomSlotsType<{
-    expandIcon?: any
-    extra?: any
-    header?: any
-    default?: any
-  }>,
-
-  // emits: ['itemClick'],
-  setup(props, { slots, emit, attrs }) {
-    devWarning(
-      props.disabled === undefined,
-      'Collapse.Panel',
-      '`disabled` is deprecated. Please use `collapsible="disabled"` instead.',
-    )
-    const { prefixCls } = useConfigInject('collapse', props)
-    const handleItemClick = () => {
-      emit('itemClick', props.panelKey)
-    }
-    const handleKeyPress = (e: KeyboardEvent) => {
-      if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
-        handleItemClick()
-      }
-    }
-    return () => {
-      const {
-        header = slots.header?.(),
-        headerClass,
-        isActive,
-        showArrow,
-        destroyInactivePanel,
-        accordion,
-        forceRender,
-        openAnimation,
-        expandIcon = slots.expandIcon,
-        extra = slots.extra?.(),
-        collapsible,
-      } = props
-      const disabled = collapsible === 'disabled'
-      const prefixClsValue = prefixCls.value
-      const headerCls = classNames(`${prefixClsValue}-header`, {
-        [headerClass]: headerClass,
-        [`${prefixClsValue}-header-collapsible-only`]: collapsible === 'header',
-        [`${prefixClsValue}-icon-collapsible-only`]: collapsible === 'icon',
-      })
-      const itemCls = classNames({
-        [`${prefixClsValue}-item`]: true,
-        [`${prefixClsValue}-item-active`]: isActive,
-        [`${prefixClsValue}-item-disabled`]: disabled,
-        [`${prefixClsValue}-no-arrow`]: !showArrow,
-        [`${attrs.class}`]: !!attrs.class,
-      })
-
-      let icon = <i class="arrow" />
-      if (showArrow && typeof expandIcon === 'function') {
-        icon = expandIcon(props)
-      }
-
-      const panelContent = (
-        <PanelContent
-          v-show={isActive}
-          prefixCls={prefixClsValue}
-          isActive={isActive}
-          forceRender={forceRender}
-          role={accordion ? 'tabpanel' : null}
-          v-slots={{ default: slots.default }}
-        ></PanelContent>
-      )
-      const transitionProps = {
-        appear: false,
-        css: false,
-        ...openAnimation,
-      }
-
-      return (
-        <div {...attrs} class={itemCls}>
-          <div
-            class={headerCls}
-            onClick={() => !['header', 'icon'].includes(collapsible) && handleItemClick()}
-            role={accordion ? 'tab' : 'button'}
-            tabindex={disabled ? -1 : 0}
-            aria-expanded={isActive}
-            onKeypress={handleKeyPress}
-          >
-            {showArrow && icon}
-            <span
-              onClick={() => collapsible === 'header' && handleItemClick()}
-              class={`${prefixClsValue}-header-text`}
-            >
-              {header}
-            </span>
-            {extra && <div class={`${prefixClsValue}-extra`}>{extra}</div>}
-          </div>
-          <Transition {...transitionProps}>
-            {!destroyInactivePanel || isActive ? panelContent : null}
-          </Transition>
-        </div>
-      )
-    }
-  },
-})

package/src/collapse/PanelContent.tsx

@@ -1,35 +0,0 @@
-import { defineComponent, shallowRef, watchEffect } from 'vue'
-
-import classNames from '../_util/classNames'
-import { collapsePanelProps } from './commonProps'
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'PanelContent',
-  props: collapsePanelProps(),
-  setup(props, { slots }) {
-    const rendered = shallowRef(false)
-
-    watchEffect(() => {
-      if (props.isActive || props.forceRender) {
-        rendered.value = true
-      }
-    })
-
-    return () => {
-      if (!rendered.value) return null
-      const { prefixCls, isActive, role } = props
-      return (
-        <div
-          class={classNames(`${prefixCls}-content`, {
-            [`${prefixCls}-content-active`]: isActive,
-            [`${prefixCls}-content-inactive`]: !isActive,
-          })}
-          role={role}
-        >
-          <div class={`${prefixCls}-content-box`}>{slots.default?.()}</div>
-        </div>
-      )
-    }
-  },
-})