@antsoo-lib/components 0.1.11 → 0.1.12

package/src/dropdown/style/index.ts

@@ -1,458 +0,0 @@
-import { genFocusStyle, resetComponent, roundedArrow } from '../../style'
-import {
-  initMoveMotion,
-  initSlideMotion,
-  initZoomMotion,
-  slideDownIn,
-  slideDownOut,
-  slideUpIn,
-  slideUpOut,
-} from '../../style/motion'
-import { getArrowOffset } from '../../style/placementArrow'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-import genButtonStyle from './button'
-import genStatusStyle from './status'
-
-export interface ComponentToken {
-  zIndexPopup: number
-}
-
-export interface DropdownToken extends FullToken<'Dropdown'> {
-  rootPrefixCls: string
-  dropdownArrowDistance: number
-  dropdownArrowOffset: number
-  dropdownPaddingVertical: number
-  dropdownEdgeChildPadding: number
-  menuCls: string
-}
-
-// =============================== Base ===============================
-const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
-  const {
-    componentCls,
-    menuCls,
-    zIndexPopup,
-    dropdownArrowDistance,
-    dropdownArrowOffset,
-    sizePopupArrow,
-    antCls,
-    iconCls,
-    motionDurationMid,
-    dropdownPaddingVertical,
-    fontSize,
-    dropdownEdgeChildPadding,
-    colorTextDisabled,
-    fontSizeIcon,
-    controlPaddingHorizontal,
-    colorBgElevated,
-    boxShadowPopoverArrow,
-  } = token
-
-  return [
-    {
-      [componentCls]: {
-        ...resetComponent(token),
-
-        position: 'absolute',
-        top: -9999,
-        left: {
-          _skip_check_: true,
-          value: -9999,
-        },
-        zIndex: zIndexPopup,
-        display: 'block',
-
-        // A placeholder out of dropdown visible range to avoid close when user moving
-        '&::before': {
-          position: 'absolute',
-          insetBlock: -dropdownArrowDistance + sizePopupArrow / 2,
-          // insetInlineStart: -7, // FIXME: Seems not work for hidden element
-          zIndex: -9999,
-          opacity: 0.0001,
-          content: '""',
-        },
-
-        [`${componentCls}-wrap`]: {
-          position: 'relative',
-
-          [`${antCls}-btn > ${iconCls}-down`]: {
-            fontSize: fontSizeIcon,
-          },
-
-          [`${iconCls}-down::before`]: {
-            transition: `transform ${motionDurationMid}`,
-          },
-        },
-
-        [`${componentCls}-wrap-open`]: {
-          [`${iconCls}-down::before`]: {
-            transform: `rotate(180deg)`,
-          },
-        },
-
-        [`
-        &-hidden,
-        &-menu-hidden,
-        &-menu-submenu-hidden
-      `]: {
-          display: 'none',
-        },
-
-        // =============================================================
-        // ==                          Arrow                          ==
-        // =============================================================
-        // Offset the popover to account for the dropdown arrow
-        [`
-        &-show-arrow${componentCls}-placement-topLeft,
-        &-show-arrow${componentCls}-placement-top,
-        &-show-arrow${componentCls}-placement-topRight
-      `]: {
-          paddingBottom: dropdownArrowDistance,
-        },
-
-        [`
-        &-show-arrow${componentCls}-placement-bottomLeft,
-        &-show-arrow${componentCls}-placement-bottom,
-        &-show-arrow${componentCls}-placement-bottomRight
-      `]: {
-          paddingTop: dropdownArrowDistance,
-        },
-
-        // Note: .popover-arrow is outer, .popover-arrow:after is inner
-        [`${componentCls}-arrow`]: {
-          position: 'absolute',
-          zIndex: 1, // lift it up so the menu wouldn't cask shadow on it
-          display: 'block',
-
-          ...roundedArrow(
-            sizePopupArrow,
-            token.borderRadiusXS,
-            token.borderRadiusOuter,
-            colorBgElevated,
-            boxShadowPopoverArrow,
-          ),
-        },
-
-        [`
-        &-placement-top > ${componentCls}-arrow,
-        &-placement-topLeft > ${componentCls}-arrow,
-        &-placement-topRight > ${componentCls}-arrow
-      `]: {
-          bottom: dropdownArrowDistance,
-          transform: 'translateY(100%) rotate(180deg)',
-        },
-
-        [`&-placement-top > ${componentCls}-arrow`]: {
-          left: {
-            _skip_check_: true,
-            value: '50%',
-          },
-          transform: 'translateX(-50%) translateY(100%) rotate(180deg)',
-        },
-
-        [`&-placement-topLeft > ${componentCls}-arrow`]: {
-          left: {
-            _skip_check_: true,
-            value: dropdownArrowOffset,
-          },
-        },
-
-        [`&-placement-topRight > ${componentCls}-arrow`]: {
-          right: {
-            _skip_check_: true,
-            value: dropdownArrowOffset,
-          },
-        },
-
-        [`
-          &-placement-bottom > ${componentCls}-arrow,
-          &-placement-bottomLeft > ${componentCls}-arrow,
-          &-placement-bottomRight > ${componentCls}-arrow
-        `]: {
-          top: dropdownArrowDistance,
-          transform: `translateY(-100%)`,
-        },
-
-        [`&-placement-bottom > ${componentCls}-arrow`]: {
-          left: {
-            _skip_check_: true,
-            value: '50%',
-          },
-          transform: `translateY(-100%) translateX(-50%)`,
-        },
-
-        [`&-placement-bottomLeft > ${componentCls}-arrow`]: {
-          left: {
-            _skip_check_: true,
-            value: dropdownArrowOffset,
-          },
-        },
-
-        [`&-placement-bottomRight > ${componentCls}-arrow`]: {
-          right: {
-            _skip_check_: true,
-            value: dropdownArrowOffset,
-          },
-        },
-
-        // =============================================================
-        // ==                         Motion                          ==
-        // =============================================================
-        // When position is not enough for dropdown, the placement will revert.
-        // We will handle this with revert motion name.
-        [`&${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottomLeft,
-          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottomLeft,
-          &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottom,
-          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottom,
-          &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottomRight,
-          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottomRight`]:
-          {
-            animationName: slideUpIn,
-          },
-
-        [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-topLeft,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-topLeft,
-          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-top,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-top,
-          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-topRight,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-topRight`]:
-          {
-            animationName: slideDownIn,
-          },
-
-        [`&${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottomLeft,
-          &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottom,
-          &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottomRight`]:
-          {
-            animationName: slideUpOut,
-          },
-
-        [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topLeft,
-          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-top,
-          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topRight`]:
-          {
-            animationName: slideDownOut,
-          },
-      },
-    },
-
-    {
-      // =============================================================
-      // ==                          Menu                           ==
-      // =============================================================
-      [`${componentCls} ${menuCls}`]: {
-        position: 'relative',
-        margin: 0,
-      },
-
-      [`${menuCls}-submenu-popup`]: {
-        position: 'absolute',
-        zIndex: zIndexPopup,
-        background: 'transparent',
-        boxShadow: 'none',
-        transformOrigin: '0 0',
-
-        'ul,li': {
-          listStyle: 'none',
-        },
-
-        ul: {
-          marginInline: '0.3em',
-        },
-      },
-
-      [`${componentCls}, ${componentCls}-menu-submenu`]: {
-        [menuCls]: {
-          padding: dropdownEdgeChildPadding,
-          listStyleType: 'none',
-          backgroundColor: colorBgElevated,
-          backgroundClip: 'padding-box',
-          borderRadius: token.borderRadiusLG,
-          outline: 'none',
-          boxShadow: token.boxShadowSecondary,
-          ...genFocusStyle(token),
-
-          [`${menuCls}-item-group-title`]: {
-            padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
-            color: token.colorTextDescription,
-            transition: `all ${motionDurationMid}`,
-          },
-
-          // ======================= Item Content =======================
-          [`${menuCls}-item`]: {
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center',
-            borderRadius: token.borderRadiusSM,
-          },
-
-          [`${menuCls}-item-icon`]: {
-            minWidth: fontSize,
-            marginInlineEnd: token.marginXS,
-            fontSize: token.fontSizeSM,
-          },
-
-          [`${menuCls}-title-content`]: {
-            flex: 'auto',
-
-            '> a': {
-              color: 'inherit',
-              transition: `all ${motionDurationMid}`,
-
-              '&:hover': {
-                color: 'inherit',
-              },
-
-              '&::after': {
-                position: 'absolute',
-                inset: 0,
-                content: '""',
-              },
-            },
-          },
-
-          // =========================== Item ===========================
-          [`${menuCls}-item, ${menuCls}-submenu-title`]: {
-            clear: 'both',
-            margin: 0,
-            padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
-            color: token.colorText,
-            fontWeight: 'normal',
-            fontSize,
-            lineHeight: token.lineHeight,
-            cursor: 'pointer',
-            transition: `all ${motionDurationMid}`,
-
-            [`&:hover, &-active`]: {
-              backgroundColor: token.controlItemBgHover,
-            },
-
-            ...genFocusStyle(token),
-
-            '&-selected': {
-              color: token.colorPrimary,
-              backgroundColor: token.controlItemBgActive,
-              '&:hover, &-active': {
-                backgroundColor: token.controlItemBgActiveHover,
-              },
-            },
-
-            '&-disabled': {
-              color: colorTextDisabled,
-              cursor: 'not-allowed',
-
-              '&:hover': {
-                color: colorTextDisabled,
-                backgroundColor: colorBgElevated,
-                cursor: 'not-allowed',
-              },
-
-              a: {
-                pointerEvents: 'none',
-              },
-            },
-
-            '&-divider': {
-              height: 1, // By design
-              margin: `${token.marginXXS}px 0`,
-              overflow: 'hidden',
-              lineHeight: 0,
-              backgroundColor: token.colorSplit,
-            },
-
-            [`${componentCls}-menu-submenu-expand-icon`]: {
-              position: 'absolute',
-              insetInlineEnd: token.paddingXS,
-
-              [`${componentCls}-menu-submenu-arrow-icon`]: {
-                marginInlineEnd: '0 !important',
-                color: token.colorTextDescription,
-                fontSize: fontSizeIcon,
-                fontStyle: 'normal',
-              },
-            },
-          },
-
-          [`${menuCls}-item-group-list`]: {
-            margin: `0 ${token.marginXS}px`,
-            padding: 0,
-            listStyle: 'none',
-          },
-
-          [`${menuCls}-submenu-title`]: {
-            paddingInlineEnd: controlPaddingHorizontal + token.fontSizeSM,
-          },
-
-          [`${menuCls}-submenu-vertical`]: {
-            position: 'relative',
-          },
-
-          [`${menuCls}-submenu${menuCls}-submenu-disabled ${componentCls}-menu-submenu-title`]: {
-            [`&, ${componentCls}-menu-submenu-arrow-icon`]: {
-              color: colorTextDisabled,
-              backgroundColor: colorBgElevated,
-              cursor: 'not-allowed',
-            },
-          },
-
-          // https://github.com/ant-design/ant-design/issues/19264
-          [`${menuCls}-submenu-selected ${componentCls}-menu-submenu-title`]: {
-            color: token.colorPrimary,
-          },
-        },
-      },
-    },
-
-    // Follow code may reuse in other components
-    [
-      initSlideMotion(token, 'slide-up'),
-      initSlideMotion(token, 'slide-down'),
-      initMoveMotion(token, 'move-up'),
-      initMoveMotion(token, 'move-down'),
-      initZoomMotion(token, 'zoom-big'),
-    ],
-  ]
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook(
-  'Dropdown',
-  (token, { rootPrefixCls }) => {
-    const {
-      marginXXS,
-      sizePopupArrow,
-      controlHeight,
-      fontSize,
-      lineHeight,
-      paddingXXS,
-      componentCls,
-      borderRadiusOuter,
-      borderRadiusLG,
-    } = token
-
-    const dropdownPaddingVertical = (controlHeight - fontSize * lineHeight) / 2
-    const { dropdownArrowOffset } = getArrowOffset({
-      sizePopupArrow,
-      contentRadius: borderRadiusLG,
-      borderRadiusOuter,
-    })
-
-    const dropdownToken = mergeToken<DropdownToken>(token, {
-      menuCls: `${componentCls}-menu`,
-      rootPrefixCls,
-      dropdownArrowDistance: sizePopupArrow / 2 + marginXXS,
-      dropdownArrowOffset,
-      dropdownPaddingVertical,
-      dropdownEdgeChildPadding: paddingXXS,
-    })
-    return [
-      genBaseStyle(dropdownToken),
-      genButtonStyle(dropdownToken),
-      genStatusStyle(dropdownToken),
-    ]
-  },
-  (token) => ({
-    zIndexPopup: token.zIndexPopupBase + 50,
-  }),
-)

package/src/dropdown/style/status.ts

@@ -1,25 +0,0 @@
-import type { DropdownToken } from '.'
-import type { GenerateStyle } from '../../theme/internal'
-
-const genStatusStyle: GenerateStyle<DropdownToken> = (token) => {
-  const { componentCls, menuCls, colorError, colorTextLightSolid } = token
-
-  const itemCls = `${menuCls}-item`
-
-  return {
-    [`${componentCls}, ${componentCls}-menu-submenu`]: {
-      [`${menuCls} ${itemCls}`]: {
-        [`&${itemCls}-danger:not(${itemCls}-disabled)`]: {
-          color: colorError,
-
-          '&:hover': {
-            color: colorTextLightSolid,
-            backgroundColor: colorError,
-          },
-        },
-      },
-    },
-  }
-}
-
-export default genStatusStyle

package/src/empty/empty.tsx

@@ -1,77 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor'
-
-import type { CSSProperties } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import { useToken } from '../theme/internal'
-
-const Empty = defineComponent({
-  compatConfig: { MODE: 3 },
-  setup() {
-    const [, token] = useToken()
-
-    const themeStyle = computed<CSSProperties>(() => {
-      const bgColor = new TinyColor(token.value.colorBgBase)
-
-      // Dark Theme need more dark of this
-      if (bgColor.toHsl().l < 0.5) {
-        return {
-          opacity: 0.65,
-        }
-      }
-      return {}
-    })
-
-    return () => (
-      <svg
-        style={themeStyle.value}
-        width="184"
-        height="152"
-        viewBox="0 0 184 152"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g fill="none" fill-rule="evenodd">
-          <g transform="translate(24 31.67)">
-            <ellipse
-              fill-opacity=".8"
-              fill="#F5F5F7"
-              cx="67.797"
-              cy="106.89"
-              rx="67.797"
-              ry="12.668"
-            />
-            <path
-              d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
-              fill="#AEB8C2"
-            />
-            <path
-              d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
-              fill="url(#linearGradient-1)"
-              transform="translate(13.56)"
-            />
-            <path
-              d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
-              fill="#F5F5F7"
-            />
-            <path
-              d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
-              fill="#DCE0E6"
-            />
-          </g>
-          <path
-            d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
-            fill="#DCE0E6"
-          />
-          <g transform="translate(149.65 15.383)" fill="#FFF">
-            <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
-            <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
-          </g>
-        </g>
-      </svg>
-    )
-  },
-})
-
-Empty.PRESENTED_IMAGE_DEFAULT = true
-
-export default Empty

package/src/empty/index.en-US.md

@@ -1,38 +0,0 @@
----
-category: Components
-type: Data Display
-title: Empty
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original
----
-
-Empty state placeholder.
-
-## When To Use
-
-- When there is no data provided, display for friendly tips.
-- User tutorial to create something in fresh new situation.
-
-## API
-
-```jsx
-<Empty>
-  <Button>Create</Button>
-</Empty>
-```
-
-| Property    | Description                                                   | Type             | Default | Version |
-| ----------- | ------------------------------------------------------------- | ---------------- | ------- | ------- |
-| description | Customize description                                         | string \| v-slot | -       |         |
-| image       | Customize image. Will tread as image url when string provided | string \| v-slot | false   |         |
-| imageStyle  | style of image                                                | CSSProperties    | -       |         |
-
-## Built-in images
-
-- Empty.PRESENTED_IMAGE_SIMPLE
-
-  <img src="https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png" height="35px" />
-
-- Empty.PRESENTED_IMAGE_DEFAULT
-
-  <img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" height="100px" />

package/src/empty/index.tsx

@@ -1,91 +0,0 @@
-import { defineComponent, h } from 'vue'
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-
-import classNames from '../_util/classNames'
-import { filterEmpty } from '../_util/props-util'
-import type { VueNode } from '../_util/type'
-import { anyType, objectType, withInstall } from '../_util/type'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import LocaleReceiver from '../locale-provider/LocaleReceiver'
-import DefaultEmptyImg from './empty'
-import SimpleEmptyImg from './simple'
-import useStyle from './style'
-
-interface Locale {
-  description?: string
-}
-
-export const emptyProps = () => ({
-  prefixCls: String,
-  imageStyle: objectType<CSSProperties>(),
-  image: anyType<VueNode>(),
-  description: anyType<VueNode>(),
-})
-
-export type EmptyProps = Partial<ExtractPropTypes<ReturnType<typeof emptyProps>>>
-
-const Empty = defineComponent({
-  name: 'AEmpty',
-  compatConfig: { MODE: 3 },
-  inheritAttrs: false,
-  props: emptyProps(),
-  setup(props, { slots = {}, attrs }) {
-    const { direction, prefixCls: prefixClsRef } = useConfigInject('empty', props)
-
-    const [wrapSSR, hashId] = useStyle(prefixClsRef)
-
-    return () => {
-      const prefixCls = prefixClsRef.value
-      const {
-        image: mergedImage = slots.image?.() || h(DefaultEmptyImg),
-        description = slots.description?.() || undefined,
-        imageStyle,
-        class: className = '',
-        ...restProps
-      } = { ...props, ...attrs }
-      const image =
-        typeof mergedImage === 'function' ? (mergedImage as () => VueNode)() : mergedImage
-      const isNormal =
-        typeof image === 'object' && 'type' in image && (image.type as any).PRESENTED_IMAGE_SIMPLE
-      return wrapSSR(
-        <LocaleReceiver
-          componentName="Empty"
-          children={(locale: Locale) => {
-            const des = typeof description !== 'undefined' ? description : locale.description
-            const alt = typeof des === 'string' ? des : 'empty'
-            let imageNode: EmptyProps['image'] = null
-
-            if (typeof image === 'string') {
-              imageNode = <img alt={alt} src={image} />
-            } else {
-              imageNode = image
-            }
-
-            return (
-              <div
-                class={classNames(prefixCls, className, hashId.value, {
-                  [`${prefixCls}-normal`]: isNormal,
-                  [`${prefixCls}-rtl`]: direction.value === 'rtl',
-                })}
-                {...restProps}
-              >
-                <div class={`${prefixCls}-image`} style={imageStyle}>
-                  {imageNode}
-                </div>
-                {des && <p class={`${prefixCls}-description`}>{des}</p>}
-                {slots.default && (
-                  <div class={`${prefixCls}-footer`}>{filterEmpty(slots.default())}</div>
-                )}
-              </div>
-            )
-          }}
-        />,
-      )
-    }
-  },
-})
-
-Empty.PRESENTED_IMAGE_DEFAULT = () => h(DefaultEmptyImg)
-Empty.PRESENTED_IMAGE_SIMPLE = () => h(SimpleEmptyImg)
-
-export default withInstall(Empty)