\n {/* 公告 */}\n {/*
\n );\n};\n\nexport default HomeBaseLayout;\n"
},
{
"path": ".dumi/theme/builtins/Icon.less",
"content": "@font-face {\n font-family: antdmini-icon;\n src: url(\"https://gw.alipayobjects.com/os/bmw-prod/578c472b-19a7-44ab-a92d-adc367ee2fe2.ttf?v=20210115\") format(\"truetype\");\n }\n \n \n .list-icons {\n display: flex;\n flex-wrap:wrap;\n }\n \n .list-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 16.66%;\n height: 100px;\n margin: 3px 0;\n padding: 10px;\n text-align: center;\n border-radius: 4px;\n cursor: pointer;\n \n &:hover {\n color: #fff;\n background-color: #1677ff;\n }\n \n transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out;\n }\n \n .icontype {\n margin-top: 8px;\n font-size: 12px;\n }\n \n @iconPrefix: ant-icon;\n \n .@{iconPrefix} {\n /* stylelint-disable font-family-no-missing-generic-family-keyword */\n font-family: antdmini-icon !important;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n line-height: 1;\n font-size: 40px;\n \n &-MinusOutline:before {\n content: \"\\e66f\";\n }\n \n &-AlipayCircleFill:before {\n content: \"\\e670\";\n }\n \n &-CheckCircleFill:before {\n content: \"\\e671\";\n }\n \n &-FireFill:before {\n content: \"\\e672\";\n }\n \n &-FaceRecognitionOutline:before {\n content: \"\\e673\";\n }\n \n &-StarFill:before {\n content: \"\\e674\";\n }\n \n &-EyeInvisibleFill:before {\n content: \"\\e675\";\n }\n \n &-SmileFill:before {\n content: \"\\e676\";\n }\n \n &-FrownFill:before {\n content: \"\\e677\";\n }\n \n &-BankcardOutline:before {\n content: \"\\e678\";\n }\n \n &-HeartOutline:before {\n content: \"\\e679\";\n }\n \n &-EyeFill:before {\n content: \"\\e67a\";\n }\n \n &-HeartFill:before {\n content: \"\\e67b\";\n }\n \n &-DownFill:before {\n content: \"\\e67c\";\n }\n \n &-CloseCircleFill:before {\n content: \"\\e67d\";\n }\n \n &-VideoOutline:before {\n content: \"\\e67e\";\n }\n \n &-CouponOutline:before {\n content: \"\\e67f\";\n }\n \n &-ReceiptOutline:before {\n content: \"\\e680\";\n }\n \n &-AntOutline:before {\n content: \"\\e681\";\n }\n \n &-UserCircleOutline:before {\n content: \"\\e682\";\n }\n \n &-PayCircleOutline:before {\n content: \"\\e683\";\n }\n \n &-BillOutline:before {\n content: \"\\e684\";\n }\n \n &-PlayOutline:before {\n content: \"\\e685\";\n }\n \n &-PayOutline:before {\n content: \"\\e686\";\n }\n \n &-MoreOutline:before {\n content: \"\\e687\";\n }\n \n &-ShrinkOutline:before {\n content: \"\\e688\";\n }\n \n &-ArrowsAltOutline:before {\n content: \"\\e689\";\n }\n \n &-StarOutline:before {\n content: \"\\e68a\";\n }\n \n &-CheckOutline:before {\n content: \"\\e68b\";\n }\n \n &-DeleteOutline:before {\n content: \"\\e68c\";\n }\n \n &-LinkOutline:before {\n content: \"\\e68d\";\n }\n \n &-InformationCircleOutline:before {\n content: \"\\e68e\";\n }\n \n &-GlobalOutline:before {\n content: \"\\e68f\";\n }\n \n &-InformationCircleFill:before {\n content: \"\\e690\";\n }\n \n &-ExclamationCircleFill:before {\n content: \"\\e691\";\n }\n \n &-CheckCircleOutline:before {\n content: \"\\e692\";\n }\n \n &-CloseCircleOutline:before {\n content: \"\\e693\";\n }\n \n &-SetOutline:before {\n content: \"\\e694\";\n }\n \n &-QuestionCircleFill:before {\n content: \"\\e695\";\n }\n \n &-QuestionCircleOutline:before {\n content: \"\\e696\";\n }\n \n &-UpCircleOutline:before {\n content: \"\\e697\";\n }\n \n &-FrownOutline:before {\n content: \"\\e698\";\n }\n \n &-DownCircleOutline:before {\n content: \"\\e699\";\n }\n \n &-ExclamationCircleOutline:before {\n content: \"\\e69a\";\n }\n \n &-MinusCircleOutline:before {\n content: \"\\e69b\";\n }\n \n &-RedoOutline:before {\n content: \"\\e69c\";\n }\n \n &-UndoOutline:before {\n content: \"\\e69d\";\n }\n \n &-EyeInvisibleOutline:before {\n content: \"\\e69e\";\n }\n \n &-ForbidFill:before {\n content: \"\\e69f\";\n }\n \n &-PicturesOutline:before {\n content: \"\\e6a0\";\n }\n \n &-PictureOutline:before {\n content: \"\\e6a1\";\n }\n \n &-PictureWrongOutline:before {\n content: \"\\e6a2\";\n }\n \n &-EyeOutline:before {\n content: \"\\e6a3\";\n }\n \n &-AddCircleOutline:before {\n content: \"\\e6a4\";\n }\n \n &-ClockCircleFill:before {\n content: \"\\e6a5\";\n }\n \n &-ClockCircleOutline:before {\n content: \"\\e6a6\";\n }\n \n &-BellMuteOutline:before {\n content: \"\\e6a7\";\n }\n \n &-KeyOutline:before {\n content: \"\\e6a8\";\n }\n \n &-BellOutline:before {\n content: \"\\e6a9\";\n }\n \n &-SearchOutline:before {\n content: \"\\e6aa\";\n }\n \n &-CollectMoneyOutline:before {\n content: \"\\e6ab\";\n }\n \n &-UnorderedListOutline:before {\n content: \"\\e6ac\";\n }\n \n &-AppstoreOutline:before {\n content: \"\\e6ad\";\n }\n \n &-ExclamationTriangleOutline:before {\n content: \"\\e6ae\";\n }\n \n &-AddOutline:before {\n content: \"\\e6af\";\n }\n \n &-ScanningOutline:before {\n content: \"\\e6b0\";\n }\n \n &-ScanCodeOutline:before {\n content: \"\\e6b1\";\n }\n \n &-ExclamationOutline:before {\n content: \"\\e6b2\";\n }\n \n &-CloseOutline:before {\n content: \"\\e6b3\";\n }\n \n &-ScanningFaceOutline:before {\n content: \"\\e6b4\";\n }\n \n &-LeftOutline:before {\n content: \"\\e6b5\";\n }\n \n &-DownOutline:before {\n content: \"\\e6b6\";\n }\n \n &-UpOutline:before {\n content: \"\\e6b7\";\n }\n \n &-RightOutline:before {\n content: \"\\e6b8\";\n }\n \n &-KoubeiOutline:before {\n content: \"\\e6b9\";\n }\n \n &-KoubeiFill:before {\n content: \"\\e6ba\";\n }\n \n &-AAOutline:before {\n content: \"\\e6bb\";\n }\n \n &-ArrowDownCircleOutline:before {\n content: \"\\e6bc\";\n }\n \n &-MovieOutline:before {\n content: \"\\e6bd\";\n }\n \n &-CompassOutline:before {\n content: \"\\e6be\";\n }\n \n &-LoopOutline:before {\n content: \"\\e6bf\";\n }\n \n &-TextOutline:before {\n content: \"\\e6c0\";\n }\n \n &-TagOutline:before {\n content: \"\\e6c1\";\n }\n \n &-FlagOutline:before {\n content: \"\\e6c2\";\n }\n \n &-EnvironmentOutline:before {\n content: \"\\e6c3\";\n }\n \n &-CalendarOutline:before {\n content: \"\\e6c4\";\n }\n \n &-LocationFill:before {\n content: \"\\e6c5\";\n }\n \n &-PhoneFill:before {\n content: \"\\e6c6\";\n }\n \n &-PhonebookOutline:before {\n content: \"\\e6c7\";\n }\n \n &-SmileOutline:before {\n content: \"\\e6c8\";\n }\n \n &-UserAddOutline:before {\n content: \"\\e6c9\";\n }\n \n &-FileWrongOutline:before {\n content: \"\\e6ca\";\n }\n \n &-SoundMuteFill:before {\n content: \"\\e6cb\";\n }\n \n &-SoundMuteOutline:before {\n content: \"\\e6cc\";\n }\n \n &-LockOutline:before {\n content: \"\\e6cd\";\n }\n \n &-UnlockOutline:before {\n content: \"\\e6ce\";\n }\n \n &-EditSOutline:before {\n content: \"\\e6cf\";\n }\n \n &-UploadOutline:before {\n content: \"\\e6d0\";\n }\n \n &-SoundOutline:before {\n content: \"\\e6d1\";\n }\n \n &-DownlandOutline:before {\n content: \"\\e6d2\";\n }\n \n &-SendOutline:before {\n content: \"\\e6d3\";\n }\n \n &-FillinOutline:before {\n content: \"\\e6d4\";\n }\n \n &-AudioMutedOutline:before {\n content: \"\\e6d5\";\n }\n \n &-AudioOutline:before {\n content: \"\\e6d6\";\n }\n \n &-UserOutline:before {\n content: \"\\e6d7\";\n }\n \n &-UserContactOutline:before {\n content: \"\\e6d8\";\n }\n \n &-TeamOutline:before {\n content: \"\\e6d9\";\n }\n \n &-UserSetOutline:before {\n content: \"\\e6da\";\n }\n \n &-FileOutline:before {\n content: \"\\e6db\";\n }\n \n &-MailOutline:before {\n content: \"\\e6dc\";\n }\n \n &-TruckOutline:before {\n content: \"\\e6dd\";\n }\n \n &-MailOpenOutline:before {\n content: \"\\e6de\";\n }\n \n &-ChatCheckOutline:before {\n content: \"\\e6df\";\n }\n \n &-ChatAddOutline:before {\n content: \"\\e6e0\";\n }\n \n &-ChatWrongOutline:before {\n content: \"\\e6e1\";\n }\n \n &-PhonebookFill:before {\n content: \"\\e6e2\";\n }\n \n &-AddressBookFill:before {\n content: \"\\e6e3\";\n }\n \n &-CalculatorOutline:before {\n content: \"\\e6e4\";\n }\n \n &-PieOutline:before {\n content: \"\\e6e5\";\n }\n \n &-HandPayCircleOutline:before {\n content: \"\\e6e6\";\n }\n \n &-GiftOutline:before {\n content: \"\\e6e7\";\n }\n \n &-TransportQRcodeOutline:before {\n content: \"\\e6e8\";\n }\n \n &-FolderOutline:before {\n content: \"\\e6e9\";\n }\n \n &-AlipaySquareFill:before {\n content: \"\\e6ea\";\n }\n \n &-TravelOutline:before {\n content: \"\\e6eb\";\n }\n \n &-AppOutline:before {\n content: \"\\e6ec\";\n }\n \n &-HistogramOutline:before {\n content: \"\\e6ed\";\n }\n \n &-MailFill:before {\n content: \"\\e6ee\";\n }\n \n &-CameraOutline:before {\n content: \"\\e6ef\";\n }\n \n &-EditFill:before {\n content: \"\\e6f0\";\n }\n \n &-SystemQRcodeOutline:before {\n content: \"\\e6f1\";\n }\n \n &-LockFill:before {\n content: \"\\e6f2\";\n }\n \n &-AudioFill:before {\n content: \"\\e6f3\";\n }\n \n &-TeamFill:before {\n content: \"\\e6f4\";\n }\n \n &-FilterOutline:before {\n content: \"\\e6f5\";\n }\n \n &-EditSFill:before {\n content: \"\\e6f6\";\n }\n \n &-LikeOutline:before {\n content: \"\\e6f7\";\n }\n \n &-TextDeletionOutline:before {\n content: \"\\e6f8\";\n }\n \n &-StopOutline:before {\n content: \"\\e6f9\";\n }\n \n &-FingerdownOutline:before {\n content: \"\\e6fa\";\n }\n \n &-MessageFill:before {\n content: \"\\e6fb\";\n }\n \n &-LocationOutline:before {\n content: \"\\e6fc\";\n }\n \n &-ContentOutline:before {\n content: \"\\e6fd\";\n }\n \n &-ExclamationShieldFill:before {\n content: \"\\e6fe\";\n }\n \n &-ReceivePaymentOutline:before {\n content: \"\\e6ff\";\n }\n \n &-ExclamationShieldOutline:before {\n content: \"\\e700\";\n }\n \n &-AddSquareOutline:before {\n content: \"\\e701\";\n }\n \n &-CloseShieldOutline:before {\n content: \"\\e702\";\n }\n \n &-CheckShieldOutline:before {\n content: \"\\e703\";\n }\n \n &-CheckShieldFill:before {\n content: \"\\e704\";\n }\n \n &-ShopbagOutline:before {\n content: \"\\e705\";\n }\n \n &-MessageOutline:before {\n content: \"\\e706\";\n }\n }"
},
{
"path": ".dumi/theme/builtins/Icon.tsx",
"content": "import React, { useState } from 'react';\nimport { Input } from 'antd';\nimport copy from 'copy-to-clipboard';\nimport { FormattedMessage } from 'dumi';\nimport './Icon.less';\n\nconst { Search } = Input;\n\nconst iconTypes = [\n 'MinusOutline',\n 'AlipayCircleFill',\n 'CheckCircleFill',\n 'FireFill',\n 'FaceRecognitionOutline',\n 'StarFill',\n 'EyeInvisibleFill',\n 'SmileFill',\n 'FrownFill',\n 'BankcardOutline',\n 'HeartOutline',\n 'EyeFill',\n 'HeartFill',\n 'DownFill',\n 'CloseCircleFill',\n 'VideoOutline',\n 'CouponOutline',\n 'ReceiptOutline',\n 'AntOutline',\n 'UserCircleOutline',\n 'PayCircleOutline',\n 'BillOutline',\n 'PlayOutline',\n 'PayOutline',\n 'MoreOutline',\n 'ShrinkOutline',\n 'ArrowsAltOutline',\n 'StarOutline',\n 'CheckOutline',\n 'DeleteOutline',\n 'LinkOutline',\n 'InformationCircleOutline',\n 'GlobalOutline',\n 'InformationCircleFill',\n 'ExclamationCircleFill',\n 'CheckCircleOutline',\n 'CloseCircleOutline',\n 'SetOutline',\n 'QuestionCircleFill',\n 'QuestionCircleOutline',\n 'UpCircleOutline',\n 'FrownOutline',\n 'DownCircleOutline',\n 'ExclamationCircleOutline',\n 'MinusCircleOutline',\n 'RedoOutline',\n 'UndoOutline',\n 'EyeInvisibleOutline',\n 'ForbidFill',\n 'PicturesOutline',\n 'PictureOutline',\n 'PictureWrongOutline',\n 'EyeOutline',\n 'AddCircleOutline',\n 'ClockCircleFill',\n 'ClockCircleOutline',\n 'BellMuteOutline',\n 'KeyOutline',\n 'BellOutline',\n 'SearchOutline',\n 'CollectMoneyOutline',\n 'UnorderedListOutline',\n 'AppstoreOutline',\n 'ExclamationTriangleOutline',\n 'AddOutline',\n 'ScanningOutline',\n 'ScanCodeOutline',\n 'ExclamationOutline',\n 'CloseOutline',\n 'ScanningFaceOutline',\n 'LeftOutline',\n 'DownOutline',\n 'UpOutline',\n 'RightOutline',\n 'KoubeiOutline',\n 'KoubeiFill',\n 'AAOutline',\n 'ArrowDownCircleOutline',\n 'MovieOutline',\n 'CompassOutline',\n 'LoopOutline',\n 'TextOutline',\n 'TagOutline',\n 'FlagOutline',\n 'EnvironmentOutline',\n 'CalendarOutline',\n 'LocationFill',\n 'PhoneFill',\n 'PhonebookOutline',\n 'SmileOutline',\n 'UserAddOutline',\n 'FileWrongOutline',\n 'SoundMuteFill',\n 'SoundMuteOutline',\n 'LockOutline',\n 'UnlockOutline',\n 'EditSOutline',\n 'UploadOutline',\n 'SoundOutline',\n 'DownlandOutline',\n 'SendOutline',\n 'FillinOutline',\n 'AudioMutedOutline',\n 'AudioOutline',\n 'UserOutline',\n 'UserContactOutline',\n 'TeamOutline',\n 'UserSetOutline',\n 'FileOutline',\n 'MailOutline',\n 'TruckOutline',\n 'MailOpenOutline',\n 'ChatCheckOutline',\n 'ChatAddOutline',\n 'ChatWrongOutline',\n 'PhonebookFill',\n 'AddressBookFill',\n 'CalculatorOutline',\n 'PieOutline',\n 'HandPayCircleOutline',\n 'GiftOutline',\n 'TransportQRcodeOutline',\n 'FolderOutline',\n 'AlipaySquareFill',\n 'TravelOutline',\n 'AppOutline',\n 'HistogramOutline',\n 'MailFill',\n 'CameraOutline',\n 'EditFill',\n 'SystemQRcodeOutline',\n 'LockFill',\n 'AudioFill',\n 'TeamFill',\n 'FilterOutline',\n 'EditSFill',\n 'LikeOutline',\n 'TextDeletionOutline',\n 'StopOutline',\n 'FingerdownOutline',\n 'MessageFill',\n 'LocationOutline',\n 'ContentOutline',\n 'ExclamationShieldFill',\n 'ReceivePaymentOutline',\n 'ExclamationShieldOutline',\n 'AddSquareOutline',\n 'CloseShieldOutline',\n 'CheckShieldOutline',\n 'CheckShieldFill',\n 'ShopbagOutline',\n 'MessageOutline',\n];\n\nconst iconLowerCaseTypes = iconTypes.map(item => item.toLowerCase());\n\nfunction Copy(props) {\n const type = props.type;\n const [copied, setCopied] = useState(false);\n return {\n copy(type);\n setCopied(true);\n }} onMouseLeave={() => {\n setCopied(false);\n }}>\n
\n}\n\n\nfunction Icon() {\n const [list, setList] = useState(iconTypes);\n const outlineList = list.filter(item => item.includes('Outline'));\n const fillList = list.filter(item => item.includes('Fill'));\n\n const onInput = (e: any) => {\n const value = e.target.value.toLowerCase();\n setList(iconTypes.filter((_, index) => iconLowerCaseTypes[index].includes(value)));\n }\n\n const onSearch = (v) => {\n setList(iconTypes.filter((_, index) => iconLowerCaseTypes[index].includes(v.toLowerCase())));\n }\n\n return <>\n \n {\n copied ?
\n copied
: <>\n \n {type}
\n \n }\n \n
\n \n {\n outlineList.map(item =>
\n \n};\n\n\n\nexport default Icon;"
},
{
"path": ".dumi/theme/builtins/OverviewCard.tsx",
"content": "import { css } from '@emotion/react';\nimport { Card, ConfigProvider, Tag, theme } from 'antd';\nimport { history, useLocale } from 'dumi';\nimport { useContext } from 'react';\nimport { ComponentSampleImages } from '../common/config/overview';\nimport useMenu from '../hooks/useMenu';\nimport useSiteToken from '../hooks/useSiteToken';\nimport SiteContext from '../slots/SiteContext';\n\nconst useStyle = ({ isDark, isMobile }) => {\n const { token } = useSiteToken();\n const { fontFamily } = token;\n\n return {\n mainContainer: css`\n font-family: ${fontFamily};\n `,\n groupContainer: css``,\n groupTitle: css`\n font-size: 24px;\n font-weight: 500;\n display: inline-flex;\n align-items: center;\n `,\n cardWrap: css`\n padding-top: 24px;\n padding-bottom: 24px;\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n `,\n card: css`\n display: block;\n width: 25%;\n min-width: 300px;\n padding-right: 24px;\n padding-bottom: 24px;\n box-sizing: border-box;\n cursor: pointer;\n text-align: center;\n\n @media only screen and (max-width: 1600px) {\n width: 33.333%;\n }\n\n @media only screen and (max-width: 1200px) {\n width: 50%;\n }\n\n @media only screen and (max-width: 880px) {\n width: 100%;\n padding-right: 0;\n }\n\n a {\n all: initial;\n cursor: pointer;\n color: ${isDark ? '#fff' : '#333'};\n }\n\n .ant-card-head-title a {\n font-weight: 500;\n }\n `,\n antCardWrap: css``,\n image: css`\n height: 100px;\n `,\n };\n};\n\nexport default ({ lang }) => {\n const [menuItems] = useMenu();\n const siteConfig = useContext(SiteContext);\n const isDark = siteConfig.theme.includes('dark');\n const isMobile = !!siteConfig.isMobile;\n const style = useStyle({ isDark, isMobile });\n const locale = useLocale();\n const isEn = locale.id === 'en';\n\n const imageConfig = isDark\n ? ComponentSampleImages.dark\n : ComponentSampleImages.light;\n\n return (\n \n {menuItems?.slice(1)?.map((parent) => {\n return (\n
\n \n );\n};\n"
},
{
"path": ".dumi/theme/builtins/Previewer/index.less",
"content": ".sourceCode {\n position: relative;\n height: calc(100vh - 200px);\n overflow: hidden;\n border-radius: 0 0 8px 8px;\n iframe {\n height: 100%;\n border: none;\n width: 100%;\n }\n &-loading {\n width: 100px;\n height: 100px;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n background-color: rgba(22, 119, 255, 0.8);\n border-radius: 100%;\n animation: sk-scaleout 1s infinite ease-in-out;\n }\n}\n\n.previewer-collapse {\n &.light {\n border: 1px solid rgba(5, 5, 5, 0.06) !important;\n .ant-collapse-content {\n border-top: 1px solid rgba(5, 5, 5, 0.06) !important;\n }\n }\n}\n\n@keyframes sk-scaleout {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}\n"
},
{
"path": ".dumi/theme/builtins/Previewer/index.tsx",
"content": "import { Collapse, ConfigProvider } from 'antd';\nimport { FormattedMessage } from 'dumi';\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { SiteContextProps } from '../../slots/SiteContext';\nimport SiteContext from '../../slots/SiteContext';\nimport './index.less';\n\ninterface IProps {\n herboxUrl: string;\n}\n\nfunction buildUrl(\n basic: string,\n options: {\n platform: string;\n theme: string;\n }\n) {\n const urlObj = new URL(basic);\n const searchParams = urlObj.searchParams;\n\n const page = searchParams.get('page');\n const { platform: supportPlatform, disablePlatformSwitch } =\n getSupportPlatform(options.platform);\n searchParams.set('platform', supportPlatform);\n searchParams.set('theme', options.theme);\n\n return {\n url: urlObj.toString(),\n page,\n supportPlatform,\n disablePlatformSwitch,\n };\n}\n\nconst DefaultPlatform = 'alipay';\n\nfunction getSupportPlatform(platform: string) {\n const supportWechat = true;\n if (!supportWechat && platform === 'wechat') {\n return {\n platform: DefaultPlatform,\n disablePlatformSwitch: true,\n };\n }\n return {\n platform,\n disablePlatformSwitch: false,\n };\n}\n\nconst Previewer: React.FC\n \n {parent.label}\n \n {(parent.children || []).length}\n \n \n\n
\n );\n })}\n \n {(parent.children || []).map((item) => {\n return (\n {\n history.push({\n pathname: isEn ? item.key + '-en' : item.key,\n });\n }}\n >\n \n
\n \n {!sourceCodeLoaded && }\n setSourceCodeLoaded(true)}\n allow=\"clipboard-read; clipboard-write\"\n />\n
\n ),\n },\n ]}\n onChange={(openList) => {\n const setMsgToSim = window.setMsgToSim;\n if (openList.length === 0) {\n // 关闭\n setMsgToSim &&\n setMsgToSim(`\n my.navigateBack();\n `);\n return;\n }\n // 打开\n setMsgToSim &&\n setMsgToSim(`\n const currentPage = getCurrentPages()[0].route\n if(currentPage !== '${page}') {\n my.navigateTo({\n url: '/${page}'\n });\n }\n `);\n }}\n />\n \n );\n};\n\nexport default Previewer;\n"
},
{
"path": ".dumi/theme/builtins/ResourceCard.less",
"content": ".card {\n border: solid 1px #d9d9d9;\n border-radius: 12px;\n display: inline-flex;\n width: 360px;\n min-height: 108px;\n padding: 8px 16px;\n justify-content: flex-start;\n align-items: center;\n text-decoration: none;\n margin: 12px 12px 12px 0;\n transition: background-color ease 0.5s;\n &:hover {\n background-color: #f5f5f5;\n\n [data-prefers-color='dark'] & {\n background-color: #333;\n }\n }\n img {\n flex: none;\n display: block;\n height: 72px;\n width: 72px;\n border-radius: 8px;\n }\n .content {\n flex: auto;\n margin-left: 16px;\n }\n .title {\n font-size: 20px;\n font-weight: 400;\n color: rgba(0, 0, 0, 0.85);\n margin-bottom: 4px;\n\n [data-prefers-color='dark'] & {\n color: rgba(255, 255, 255, 0.65);\n }\n }\n .description {\n font-size: 14px;\n color: rgba(0, 0, 0, 0.65);\n\n [data-prefers-color='dark'] & {\n color: rgba(255, 255, 255, 0.65);\n }\n }\n}"
},
{
"path": ".dumi/theme/builtins/ResourceCard.tsx",
"content": "import { FC } from 'react';\nimport './ResourceCard.less'\n\ntype Props = {\n image?: string;\n title: string;\n description: string;\n link: string;\n};\n\nconst ResourceCard: FC\n
\n \n );\n};\n\nexport default ResourceCard;\n"
},
{
"path": ".dumi/theme/builtins/SourceCode/index.less",
"content": "@import (reference) '../../styles/variables.less';\n\n// override prism theme for dark mode\n@{dark-selector} {\n .token.doctype,\n .token.punctuation,\n .token.entity,\n code[class*='language-'],\n pre[class*='language-'] {\n color: @c-text-secondary-dark;\n }\n\n .token.comment,\n .token.prolog,\n .token.cdata {\n color: @c-text-note-dark;\n }\n}\n\n.@{prefix}-source-code {\n @bg-color: tint(@c-site-bg, 50%);\n\n position: relative;\n background-color: @bg-color;\n border-radius: 8px;\n\n &-scroll-container {\n overflow: auto;\n width: 100%;\n height: 100%;\n }\n\n &-scroll-content {\n position: relative;\n width: max-content;\n height: max-content;\n min-width: 100%;\n min-height: 100%;\n\n > pre.prism-code {\n width: max-content;\n position: relative;\n overflow: visible;\n }\n }\n\n &.dark > pre.prism-code {\n border: 1px solid rgba(253, 253, 253, 0.12);\n background: #282c34;\n }\n\n &.light > pre.prism-code {\n border: 1px solid rgba(5, 5, 5, 0.06);\n background: #f7f7f7;\n }\n\n > pre.prism-code {\n overflow: auto;\n &:not(:first-child) {\n margin-top: 16px;\n }\n }\n\n > pre.prism-code,\n &-scroll-content > pre.prism-code {\n margin: 0;\n padding: 18px 24px;\n font-size: 14px;\n line-height: 1.58;\n direction: ltr;\n background: transparent;\n\n // remove shadow from coy theme\n &::before,\n &::after {\n content: none;\n }\n\n // highlight line\n & > .highlighted {\n position: relative;\n width: calc(100% + 24px);\n background-color: shade(@bg-color, 5%);\n\n .line-cell {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n right: -24px;\n bottom: 0;\n width: 24px;\n background-color: shade(@bg-color, 5%);\n }\n }\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: -24px;\n bottom: 0;\n width: 24px;\n background-color: shade(@bg-color, 5%);\n }\n }\n\n & > .wrap {\n display: table-row;\n\n & > .token-line-num {\n display: table-cell;\n text-align: right;\n padding-right: 1em;\n user-select: none;\n opacity: 0.5;\n }\n\n & > .line-cell {\n display: table-cell;\n width: 100%;\n }\n }\n }\n\n &-copy {\n position: absolute;\n z-index: 2;\n top: 9px;\n right: 12px;\n display: inline-block;\n padding: 8px 12px;\n background-color: fade(@bg-color, 80%);\n border: 0;\n border-radius: 2px;\n cursor: pointer;\n transition: all 0.2s;\n\n > svg {\n width: 16px;\n fill: darken(@c-border, 20%);\n transition: fill 0.2s;\n\n @{dark-selector} & {\n fill: lighten(@c-border-dark, 20%);\n }\n }\n\n &:hover > svg {\n fill: darken(@c-border, 30%);\n\n @{dark-selector} & {\n fill: lighten(@c-border-dark, 30%);\n }\n }\n\n &[data-copied] > svg {\n fill: @c-success;\n\n @{dark-selector} & {\n fill: @c-success-dark;\n }\n }\n }\n\n &:not(:hover) &-copy {\n opacity: 0;\n visibility: hidden;\n }\n\n @{dark-selector} & {\n @bg-color: shade(@c-site-bg-dark, 50%);\n\n background-color: @bg-color;\n\n &-copy {\n background-color: fadeout(@bg-color, 80%);\n }\n\n & > pre.prism-code > .highlighted {\n background-color: tint(@bg-color, 10%);\n\n &::after {\n background-color: tint(@bg-color, 10%);\n }\n\n .line-cell {\n &::after {\n background-color: tint(@bg-color, 10%);\n }\n }\n }\n }\n}\n"
},
{
"path": ".dumi/theme/builtins/SourceCode/index.tsx",
"content": "import { ReactComponent as IconCheck } from '@ant-design/icons-svg/inline-svg/outlined/check.svg';\nimport { ReactComponent as IconCopy } from '@ant-design/icons-svg/inline-svg/outlined/copy.svg';\nimport classNames from 'classnames';\nimport { useSiteData } from 'dumi';\nimport Highlight, { defaultProps, type Language } from 'prism-react-renderer';\nimport prismTheme from 'prism-react-renderer/themes/oceanicNext';\nimport 'prism-themes/themes/prism-one-light.css';\nimport {\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type FC,\n type ReactNode,\n} from 'react';\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\nimport type { SiteContextProps } from '../../slots/SiteContext';\nimport SiteContext from '../../slots/SiteContext';\nimport './index.less';\n\nconst MARKUP_REGEX = {\n all: /[\\n]*?#if ALIPAY[\\n]*?|[\\n]*?#if WECHAT[\\n]*?|[\\n]*?#endif[\\n]*?/g, // 支持的所有平台\n alipay: /[\\n]*?#if WECHAT[\\s\\S?]*?#endif[\\n]*?/g, // 支付宝平台时，需要去掉微信标记的内容\n wechat: /[\\n]*?#if ALIPAY[\\s\\S]*?#endif[\\n]*?/g, // 微信平台时，需要去掉支付宝标记的内容\n};\n\nconst COMMENTS_MARKUP_REGEX = {\n if: /#comments\\s+if/g,\n endif: /#comments\\s+endif/g,\n};\n\n/**\n * define DSL which can be highlighted as similar language\n */\nconst SIMILAR_DSL: Record{props.title}
\n {props.description}
\n \n {tokens.map((line, i) => (\n \n {themeConfig.showLineNum && (\n {i + 1}\n )}\n \n {line.map((token, key) => (\n // getTokenProps 返回值包含 key\n // eslint-disable-next-line react/jsx-key\n \n ))}\n \n \n ))}\n \n )}\n \n );\n\n return (\n \n
\n ) : (\n code\n )}\n {props.extra}\n \n );\n};\n\nexport default SourceCode;\n"
},
{
"path": ".dumi/theme/builtins/Table/index.less",
"content": "@import (reference) '../../styles/variables.less';\n\n.dumi-default-table {\n margin: 24px 0 32px;\n transform: translate(0, 0);\n\n &-content {\n overflow: auto;\n\n &::before,\n &::after {\n content: '';\n display: block;\n position: fixed;\n z-index: 1;\n top: 0;\n bottom: 0;\n width: 6px;\n pointer-events: none;\n }\n\n &[data-left-folded]::before {\n left: 0;\n background-image: linear-gradient(\n to right,\n rgba(0, 0, 0, 10%),\n rgba(0, 0, 0, 0%)\n );\n\n @{dark-selector} & {\n background-image: linear-gradient(\n to right,\n rgba(0, 0, 0, 50%),\n rgba(0, 0, 0, 0%)\n );\n }\n }\n\n &[data-right-folded]::after {\n right: 0;\n background-image: linear-gradient(\n to left,\n rgba(0, 0, 0, 10%),\n rgba(0, 0, 0, 0%)\n );\n\n @{dark-selector} & {\n background-image: linear-gradient(\n to left,\n rgba(0, 0, 0, 50%),\n rgba(0, 0, 0, 0%)\n );\n }\n }\n\n > table > thead > tr > th,\n > table > tr > th {\n white-space: nowrap;\n }\n }\n}\n"
},
{
"path": ".dumi/theme/builtins/Table/index.tsx",
"content": "import throttle from 'lodash.throttle';\nimport React, {\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport type { SiteContextProps } from '../../slots/SiteContext';\nimport SiteContext from '../../slots/SiteContext';\nimport './index.less';\n\ninterface IProps {\n children: ReactNode;\n}\n\nconst MARKUP_REGEX = {\n all: /#if ALIPAY|#if WECHAT/, // 支持的所有平台\n alipay: /#if WECHAT/, // 支付宝平台时，需要去掉微信标记表格项\n wechat: /#if ALIPAY/, // 微信平台时，需要去掉支付宝标记表格项\n};\n\nconst Table: React.FC\n {code}\n {props.textarea}\n
\n \n \n {processReactNode(children)}
\n
\n \n );\n};\n\nexport default Table;\n"
},
{
"path": ".dumi/theme/builtins/code.html",
"content": "\n\n\n\n \n \n \n \n \n\n\n\n\n \n\n \n
\n \n \n \n \n\n\n"
},
{
"path": ".dumi/theme/builtins/iframe.html",
"content": "\n\n\n\n \n \n \n \n \n\n\n\n\n\n\n \n\n \n \n \n \n \n\n\n\n"
},
{
"path": ".dumi/theme/common/CommonHelmet.tsx",
"content": "import { Helmet, useRouteMeta } from 'dumi';\nimport { useMemo } from 'react';\nimport useLocaleValue from '../hooks/useLocaleValue';\nimport { removeTitleCode } from '../utils';\n\nconst CommonHelmet = () => {\n const meta = useRouteMeta();\n const configTitle = useLocaleValue('title');\n\n const [title, description] = useMemo(() => {\n const helmetTitle = `${removeTitleCode(meta.frontmatter.subtitle) || ''} ${removeTitleCode(\n meta.frontmatter?.title\n )} - ${configTitle}`;\n const helmetDescription = meta.frontmatter.description;\n return [helmetTitle, helmetDescription];\n }, [meta, configTitle]);\n\n return (\n \n \n
\n ) : null;\n};\n\nexport default EditLink;\n"
},
{
"path": ".dumi/theme/common/GlobalStyles.tsx",
"content": "import React from 'react';\nimport {\n Common,\n DumiDefaultStyleOverride,\n HeadingAnchor,\n Highlight,\n Markdown,\n Reset,\n Responsive,\n SearchBar,\n PreviewImage\n} from './styles';\n\nconst GlobalStyles = () => (\n \n
\n ) : null;\n};\n\nexport default LastUpdated;\n"
},
{
"path": ".dumi/theme/common/Loading/index.tsx",
"content": "import React, { useCallback } from 'react';\nimport { Skeleton, Space, Spin } from 'antd';\nimport { useLocation } from 'dumi';\nimport type { IAllThemeConfig } from '../../types';\nimport useAdditionalThemeConfig from '../../hooks/useAdditionalThemeConfig';\n\nconst defaultLoadingConfig: IAllThemeConfig['loading'] = {\n skeleton: []\n};\n\nconst Loading: React.FC = () => {\n const { pathname } = useLocation();\n const { loading = defaultLoadingConfig } = useAdditionalThemeConfig();\n\n const skeletonLoadingRenderRule = useCallback(() => {\n const pathnameReg = loading.skeleton;\n if (pathnameReg) {\n return (\n pathnameReg.filter((rule) => {\n return pathname.startsWith(rule);\n }).length > 0\n );\n }\n return false;\n }, [loading, pathname]);\n\n if (skeletonLoadingRenderRule()) {\n return (\n \n
\n );\n }\n\n return (\n \n
\n ) : (\n \n \n {`${title || 'dumi-theme-antd'}${description ? `-${description}` : ''}`} \n \n
\n );\n};\n\nexport default DocLayout;\n"
},
{
"path": ".dumi/theme/layouts/GlobalLayout.tsx",
"content": "import {\n createCache,\n extractStyle,\n legacyNotSelectorLinter,\n logicalPropertiesLinter,\n parentSelectorLinter,\n StyleProvider,\n} from '@ant-design/cssinjs';\nimport { ConfigProvider, theme as antdTheme } from 'antd';\nimport { Outlet, usePrefersColor, useServerInsertedHTML } from 'dumi';\nimport type { FC } from 'react';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport Sim from '../common/Sim';\nimport type { ThemeName } from '../common/ThemeSwitch';\nimport useAdditionalThemeConfig from '../hooks/useAdditionalThemeConfig';\nimport type { SiteContextProps } from '../slots/SiteContext';\nimport SiteContext from '../slots/SiteContext';\n\ntype SiteState = Partial#ff3141
| #ff4a58
| Hazardous color |\n| --actionsheet-title-color | #999999
| #616161
| Title Color |\n| --actionsheet-item-color | #333333
| #c5cad1
| Item Color |\n| --actionsheet-item-active-bg | #eeeeee
| #2b2b2b
| Entries Activate Background Color |\n| --activesheet-item-cancel-bg | #f5f5f5
| #121212
| Entries cancel background color |\n"
},
{
"path": "src/ActionSheet/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n \"ant-popup\": \"../Popup/index\"\n }\n}\n"
},
{
"path": "src/ActionSheet/index.less",
"content": "@import (reference) './variable.less';\n@import (reference) '../style/mixins/hairline.less';\n\n@actionsheetPrefix: ant-actionsheet;\n.@{actionsheetPrefix} {\n padding-left: 24 * @rpx;\n padding-right: 24 * @rpx;\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n &-title-wrap {\n text-align: center;\n position: relative;\n margin: 0 -24 * @rpx;\n }\n &-title-content {\n display: inline-block;\n text-align: left;\n padding: 36 * @rpx 30 * @rpx;\n font-size: 30 * @rpx;\n color: @actionsheet-title-color;\n .hairline('bottom', @actionsheet-item-active-bg);\n }\n &-list {\n margin: 0 -24 * @rpx;\n }\n &-list-item {\n color: @actionsheet-item-color;\n padding: 32 * @rpx 30 * @rpx;\n text-align: center;\n position: relative;\n font-size: 36 * @rpx;\n .hairline('bottom', @actionsheet-item-active-bg);\n &-title-danger {\n color: @actionsheet-danger-color;\n font-weight: bold;\n }\n &-description {\n color: @actionsheet-title-color;\n font-size: 28 * @rpx;\n line-height: 40 * @rpx;\n margin-top: 8 * @rpx;\n }\n &-active {\n background-color: @actionsheet-item-active-bg;\n }\n &:last-child {\n &&:after {\n display: none;\n }\n }\n }\n &-list-item-disabled {\n .@{actionsheetPrefix}-list-item-icon,\n .@{actionsheetPrefix}-list-item-content {\n opacity: @opacity-disabled;\n }\n }\n\n &-cancel-gap {\n height: 16 * @rpx;\n background: @activesheet-item-cancel-bg;\n margin: 0 -24 * @rpx;\n }\n\n &-cancel {\n color: @actionsheet-item-color;\n padding: 32 * @rpx 30 * @rpx;\n font-size: 36 * @rpx;\n text-align: center;\n margin: 0 -24 * @rpx;\n &:active {\n background-color: @actionsheet-item-active-bg;\n }\n }\n}\n\n.@{actionsheetPrefix}-icon {\n .@{actionsheetPrefix}-title-wrap {\n text-align: left;\n }\n .@{actionsheetPrefix}-list-item {\n display: flex;\n align-items: center;\n &-icon {\n height: @actionsheet-icon-height;\n flex: 0 0 @actionsheet-icon-width;\n margin-right: 24 * @rpx;\n background-size: contain;\n background-position: center center;\n background-repeat: no-repeat;\n }\n &-content {\n text-align: left;\n }\n }\n}\n"
},
{
"path": "src/ActionSheet/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 反馈引导\n order: 12\ntoc: 'content'\n---\n\n# ActionSheet 动作面板\n\n从底部弹出的动作菜单面板。由用户操作触发，提供一组与操作相关的两个或多个选项，让用户在不离场的情况下完成操作。相比于对话框，动作面板的位置更适合于在大屏幕时代单手操作的场景。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-action-sheet\": \"antd-mini/es/ActionSheet/index\"\n#endif\n#if WECHAT\n \"ant-action-sheet\": \"antd-mini/ActionSheet/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n> `ant-action-sheet` 组件必须通过 `visible` 属性控制显示/隐藏状态。`actions` 属性传入数据驱动选项渲染。\n\n```xml\n#ff3141
| #ff4a58
| 危险颜色 |\n| --actionsheet-title-color | #999999
| #616161
| 标题颜色 |\n| --actionsheet-item-color | #333333
| #c5cad1
| 条目颜色 |\n| --actionsheet-item-active-bg | #eeeeee
| #2b2b2b
| 条目激活背景色 |\n| --activesheet-item-cancel-bg | #f5f5f5
| #121212
| 条目取消背景色 |\n"
},
{
"path": "src/ActionSheet/index.sjs.ts",
"content": "function isIconMode(actions) {\n return actions.some(action => !!action.icon)\n}\nexport default {\n isIconMode,\n}\n"
},
{
"path": "src/ActionSheet/index.ts",
"content": "import {\n Component,\n IPlatformEvent,\n triggerEventOnly,\n triggerEventValues,\n} from '../_util/simply';\nimport { ActionSheetDefaultProps, IActionItem } from './props';\n\nComponent({\n props: ActionSheetDefaultProps,\n methods: {\n onAction(e: IPlatformEvent) {\n const { item, index } = e.currentTarget.dataset as {\n item: IActionItem;\n index: number;\n };\n if (item?.disabled) return;\n\n triggerEventOnly(this, 'close', e);\n triggerEventValues(this, 'action', [item, index], e);\n },\n onClose(e: IPlatformEvent) {\n triggerEventOnly(this, 'close', e);\n },\n },\n});\n"
},
{
"path": "src/ActionSheet/props.ts",
"content": "import { IBaseProps } from '../_util/base';\n\nexport interface IActionItem {\n text: string;\n icon: string;\n description?: string;\n danger?: boolean;\n disabled?: boolean;\n}\n/**\n * @description 头像，可展示头像以及用户名等简要信息。\n */\nexport interface IActionSheetProps extends IBaseProps {\n /**\n * @description 标题\n * @default \"\"\n */\n title: string;\n\n /**\n * @description 面板选项列表\n * @default []\n */\n actions: IActionItem[];\n\n /**\n * @description 取消按钮文字\n * @default []\n */\n cancelText: string;\n\n /**\n * @description 是否显示\n * @default false\n */\n visible: boolean;\n\n zIndex: number;\n\n /**\n * @description 点击选项时触发，禁用或加载状态下不会触发\n */\n\n onAction: (aciton: IActionItem, index: number, e) => void;\n\n /**\n * @description 关闭时触发\n */\n\n onClose: (e) => void;\n}\n\nexport const ActionSheetDefaultProps: Partial#ffffff
| #ffffff
| Badge 文字颜色 |\n| --badge-background-color | #ff3141
| #ff4a58
| Badge 背景颜色 |\n"
},
{
"path": "src/Badge/index.json",
"content": "{ \n \"styleIsolation\": \"shared\",\n \"component\": true\n}\n"
},
{
"path": "src/Badge/index.less",
"content": "@import (reference) './variable.less';\n\n@badgePrefix: ant-badge;\n\n.@{badgePrefix} {\n display: inline-block;\n position: relative;\n\n &-content {\n position: absolute;\n display: flex;\n height: 28 * @rpx;\n align-self: center;\n align-items: center;\n font-size: 18 * @rpx;\n padding: 4 * @rpx 8 * @rpx;\n box-sizing: border-box;\n word-break: keep-all;\n justify-content: center;\n top: 0;\n left: 100%;\n transform: translate(-50%, -50%);\n\n &-stroke {\n border: 2 * @rpx solid @badge-text-color;\n border-color: @badge-text-color;\n }\n\n &-text {\n padding-left: 4 * @rpx;\n\n &:empty {\n display: none;\n }\n /// #if ALIPAY\n .ant-badge-icon-container:empty ~ & {\n padding-left: 0;\n }\n /// #endif\n }\n\n .ant-icon {\n font-size: 18 * @rpx;\n color: @badge-text-color;\n }\n\n &-not-dot {\n min-width: 28 * @rpx;\n height: 28 * @rpx;\n border-radius: 28 * @rpx;\n display: flex;\n background-color: @badge-background-color;\n }\n }\n\n &-dot {\n width: 20 * @rpx;\n height: 20 * @rpx;\n border-radius: 50%;\n background-color: @badge-background-color;\n\n &-stroke {\n border: 2 * @rpx solid @badge-text-color;\n }\n }\n\n &-number,\n &-text,\n &-bubble {\n color: @badge-text-color;\n }\n}\n"
},
{
"path": "src/Badge/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 反馈引导\n order: 12\ntoc: 'content'\n---\n\n# Badge 徽标\n\n徽标，显示红点、数字或文字。用于提醒用户，有待处理的事项或者新的更新数量。当需要在右上角展示数字、文字或小红点时使用。适合于提示产品化的新消息、功能或服务等内容，通过显眼的视觉形式吸引用户注意，并促使其进行相关操作。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-badge\": \"antd-mini/es/Badge/index\"\n#endif\n#if WECHAT\n \"ant-badge\": \"antd-mini/Badge/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n```xml\n#ffffff
| #ffffff
| Badge 文字颜色 |\n| --badge-background-color | #ff3141
| #ff4a58
| Badge 背景颜色 |\n"
},
{
"path": "src/Badge/index.sjs.ts",
"content": "function setPositionStyle(\n position,\n offsetX: string | number = '-50%',\n offsetY: string | number = '-50%'\n) {\n const transformStyle = `transform: translate(calc(${offsetX}), calc(${offsetY}));`;\n switch (position) {\n case 'top-left':\n return `top: 0; left: 0; ${transformStyle}`;\n case 'top-center':\n return `top: 0; left: 50%; ${transformStyle}`;\n case 'top-right':\n return `top: 0; left: 100%; ${transformStyle}`;\n case 'left':\n return `top: 50%; left: 0; ${transformStyle}`;\n case 'right':\n return `top: 50%; left: 100%; ${transformStyle}`;\n case 'bottom-left':\n return `top: 100%; left: 0; ${transformStyle}`;\n case 'bottom-center':\n return `top: 100%; left: 50%; ${transformStyle}`;\n case 'bottom-right':\n return `top: 100%; left: 100%; ${transformStyle}`;\n default:\n return `top: 0; left: 0; ${transformStyle}`;\n }\n}\n\nfunction setBubbleStyle(type, position) {\n if (type !== 'bubble') return '';\n switch (position) {\n case 'top-left':\n return 'border-bottom-right-radius: 0;';\n case 'top-right':\n return 'border-bottom-left-radius: 0;';\n case 'bottom-left':\n return 'border-top-right-radius: 0;';\n case 'bottom-right':\n return 'border-top-left-radius: 0;';\n default:\n return '';\n }\n}\n\nfunction getOverCount(text) {\n let overCount = false;\n if (typeof text === 'number') {\n if (text >= 100) {\n overCount = true;\n }\n }\n return overCount;\n}\n\nexport default { \n setPositionStyle, \n setBubbleStyle,\n getOverCount,\n};\n"
},
{
"path": "src/Badge/index.ts",
"content": "import { Component } from '../_util/simply';\nimport { BadgeFunctionalProps } from './props';\n\nComponent({ props: BadgeFunctionalProps });\n"
},
{
"path": "src/Badge/props.ts",
"content": "import { IBaseProps } from '../_util/base';\n/**\n * @description 徽标，红点、数字或文字。用于告诉用户待处理的事物或更新数。\n */\n\nexport interface IBadgeProps extends IBaseProps {\n /**\n * @description badge 类型\n * @default dot\n */\n type: 'dot' | 'number' | 'text' | 'bubble';\n /**\n * @description 红点内容，为空时表示只显示红点；可以是数字，也可以是文字；如果是数字，超过 99 会自动变成 ...\n */\n text: string | number;\n /**\n * @description 相对于 children 所在访问，left-top(左上角) top-right(右上角)\n * @default \"top-right\"\n */\n position:\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'left'\n | 'right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n /**\n * @description 水平方向偏移量（字符串类型，需要带上像素单位）\n * @default \"-50%\"\n */\n offsetX: string;\n /**\n * @description 垂直方向偏移量（字符串类型，需要带上像素单位）\n * @default \"-50%\"\n */\n offsetY: number | string;\n /**\n * @description 是否有描边\n * @default false\n */\n stroke: boolean;\n /**\n * @description 背景色\n */\n bgColor: string;\n}\n\nexport const BadgeDefaultProps: Partial#1677FF
| #3086FF
| Button Color |\n| --button-background-color | #FFFFFF
| #1a1a1a
| Button background color |\n| --button-border-color | #1677FF
| #3086ff
| Button border color |\n| --button-primary-border-color | #1677FF
| #3086FF
| Main button border color |\n| --button-primary-background-color | #1677FF
| #3086FF
| Main button background color |\n| --button-primary-color | #FFFFFF
| #FFFFFF
| Main button color |\n| --button-primary-aide-border-color | #E7F1FF
| #0D2543
| Primary Secondary Button Border Color |\n| --button-primary-aide-color | #1677FF
| #3086FF
| Primary Auxiliary Button Color |\n| --button-default-aide-border-color | #F5F5F5
| #121212
| Default Secondary Button Border Color |\n| --button-default-aide-background-color | #FFFFFF
| #1a1a1a
| Default Auxiliary Button Background Color |\n| --button-default-aide-color | #333333
| #C5CAD1
| Default Auxiliary Button Color |\n| --button-primary-danger-background-color | #FF3141
| #FF4A58
| Primary Danger Button Background Color |\n| --button-primary-danger-border-color | #FF3141
| #FF4A58
| Primary Hazard Button Border Color |\n| --button-primary-danger-color | #FFFFFF
| #FFFFFF
| Primary Hazard Button Color |\n| --button-default-danger-background-color | #FFFFFF
| #1a1a1a
| Default Hazard Button Background Color |\n| --button-default-danger-border-color | #FF3141
| #FF4A58
| Default Hazard Button Border Color |\n| --button-default-danger-color | #FF3141
| #FF4A58
| Default Hazard Button Color |\n| --button-text-danger-color | #FF3141
| #FF4A58
| Hazard button text color |\n| --button-danger-default-color | #FF3141
| #FF4A58
| Hazard Button Default Color |\n| --button-active-bg | rgba(255, 255, 255, 0.08)
| rgba(255, 255, 255, 0.08)
| Button to activate background color |\n\n### More Properties\n\nThe following are additional properties that the Button component supports:\n\n- `public-id`\n- `open-type`\n- `scope`\n- `form-type`\n- `onGetAuthorize`\n- `onFollowLifestyle`\n- `onError`\n- `onGetUserInfo`\n- `onGetPhoneNumber`\n\nFor specific attribute descriptions, please refer to the official documents of Alipay applet.\n\n[Button component property description](https://opendocs.alipay.com/mini/component/button#%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E)\n"
},
{
"path": "src/Button/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n \"loading\": \"../Loading/index\",\n \"ant-icon\": \"../Icon/index\"\n }\n}\n"
},
{
"path": "src/Button/index.less",
"content": "@import (reference) './variable.less';\n\n@buttonPrefix: ant-button;\n\n.@{buttonPrefix} {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: auto;\n line-height: normal;\n padding: @button-padding;\n border-radius: 50vh;\n border: 0 none;\n box-sizing: border-box;\n font-size: @button-font-size;\n z-index: 2;\n\n &-large {\n font-size: @button-large-font-size;\n padding: @button-padding;\n }\n\n &-medium {\n font-size: @button-medium-font-size;\n padding: @button-medium-padding;\n }\n\n &-small {\n font-size: @button-small-font-size;\n padding: @button-small-padding;\n }\n\n &-primary {\n color: @button-primary-color;\n background-color: @button-primary-background-color;\n box-shadow: inset 0 0 0 @button-border-size @button-primary-background-color;\n }\n\n &-default {\n color: @button-color;\n background-color: @button-background-color;\n box-shadow: inset 0 0 0 @button-border-size @button-border-color;\n }\n\n &-capsule {\n color: @button-primary-color;\n background-color: @button-default-aide-border-color;\n box-shadow: none;\n }\n &-primary-aide {\n background-color: @button-primary-aide-background-color;\n box-shadow: inset 0 0 0 @button-border-size\n @button-primary-aide-border-color;\n color: @button-color;\n }\n\n &-default-aide {\n color: @button-default-aide-color;\n background-color: @button-default-aide-background-color;\n box-shadow: inset 0 0 0 @button-border-size\n @button-default-aide-border-color;\n }\n\n &-text {\n color: @button-color;\n background-color: transparent;\n box-shadow: none;\n }\n\n &-primary-danger {\n color: @button-primary-danger-color;\n background-color: @button-primary-danger-background-color;\n box-shadow: inset 0 0 0 @button-border-size\n @button-primary-danger-border-color;\n }\n\n &-default-danger {\n color: @button-default-danger-color;\n background-color: @button-default-danger-background-color;\n box-shadow: inset 0 0 0 @button-border-size\n @button-default-danger-border-color;\n }\n\n &-text-danger {\n color: @button-text-danger-color;\n background-color: transparent;\n box-shadow: none;\n }\n\n &-text-active {\n background-color: @button-active-bg;\n }\n\n &-active {\n filter: brightness(0.92);\n }\n\n &-disabled {\n opacity: @button-disabled-opacity;\n }\n\n &-wrap {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n }\n\n &-content-text-margin {\n margin-left: @h-spacing-standard;\n }\n &-content-text {\n /// #if ALIPAY\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n /// #endif\n &:empty {\n margin-left: 0;\n width: 0;\n opacity: 0;\n &::after {\n content: '\\00a0';\n }\n }\n }\n\n &-content-subtext {\n font-size: @button-subtext-size;\n opacity: 0.6;\n }\n\n &-content-loading-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 33px;\n height: 16px;\n margin-left: 8px;\n }\n\n &-content-loading {\n position: relative;\n }\n\n &-inline {\n /// #if ALIPAY\n display: inline-block;\n /// #endif\n /// #if WECHAT\n display: inline-flex;\n /// #endif\n border-radius: @button-corner-radius;\n\n .@{buttonPrefix}-content-loading-container {\n width: @button-icon-size;\n height: @button-icon-size;\n }\n\n .@{buttonPrefix}-content-loading {\n transform: scale(0.5);\n }\n }\n\n /// #if WECHAT\n &::after {\n border-width: 0;\n }\n /// #endif\n}\n"
},
{
"path": "src/Button/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 通用\n order: 2\ntoc: 'content'\n---\n\n# Button 按钮\n\n用于开始一个即时操作。标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-button\": \"antd-mini/es/Button/index\"\n#endif\n#if WECHAT\n \"ant-button\": \"antd-mini/Button/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n```xml\n#if ALIPAY\n#1677FF
| #3086FF
| 按钮颜色 |\n| --button-background-color | #FFFFFF
| #1a1a1a
| 按钮背景颜色 |\n| --button-border-color | #1677FF
| #3086ff
| 按钮边框颜色 |\n| --button-primary-border-color | #1677FF
| #3086FF
| 主要按钮边框颜色 |\n| --button-primary-background-color | #1677FF
| #3086FF
| 主要按钮背景颜色 |\n| --button-primary-color | #FFFFFF
| #FFFFFF
| 主要按钮颜色 |\n| --button-primary-aide-border-color | #E7F1FF
| #0D2543
| 主要辅助按钮边框颜色 |\n| --button-primary-aide-color | #1677FF
| #3086FF
| 主要辅助按钮颜色 |\n| --button-default-aide-border-color | #F5F5F5
| #121212
| 默认辅助按钮边框颜色 |\n| --button-default-aide-background-color | #FFFFFF
| #1a1a1a
| 默认辅助按钮背景颜色 |\n| --button-default-aide-color | #333333
| #C5CAD1
| 默认辅助按钮颜色 |\n| --button-primary-danger-background-color | #FF3141
| #FF4A58
| 主要危险按钮背景颜色 |\n| --button-primary-danger-border-color | #FF3141
| #FF4A58
| 主要危险按钮边框颜色 |\n| --button-primary-danger-color | #FFFFFF
| #FFFFFF
| 主要危险按钮颜色 |\n| --button-default-danger-background-color | #FFFFFF
| #1a1a1a
| 默认危险按钮背景颜色 |\n| --button-default-danger-border-color | #FF3141
| #FF4A58
| 默认危险按钮边框颜色 |\n| --button-default-danger-color | #FF3141
| #FF4A58
| 默认危险按钮颜色 |\n| --button-text-danger-color | #FF3141
| #FF4A58
| 危险按钮文字颜色 |\n| --button-danger-default-color | #FF3141
| #FF4A58
| 危险按钮默认颜色 |\n| --button-active-bg | rgba(255, 255, 255, 0.08)
| rgba(255, 255, 255, 0.08)
| 按钮激活背景颜色 |\n\n### 更多属性\n\n以下是 Button 组件支持的其他属性：\n\n- `public-id`\n- `open-type`\n- `scope`\n- `form-type`\n- `onGetAuthorize`\n- `onFollowLifestyle`\n- `onError`\n- `onGetUserInfo`\n- `onGetPhoneNumber`\n\n具体的属性说明，请参考支付宝小程序的官方文档。\n\n[Button 组件属性说明](https://opendocs.alipay.com/mini/component/button#%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E)\n"
},
{
"path": "src/Button/index.sjs.ts",
"content": "function getClass(size) {\n const list = ['small', 'medium', 'large'];\n if (list.indexOf(size) >= 0) {\n return `ant-button-${size}`;\n }\n return 'ant-button-medium';\n}\n\nfunction getHoverClass(loading, type, activeClassName) {\n if (loading) {\n return '';\n }\n let className = 'ant-button-active';\n if (type === 'text') {\n className += ' ant-button-text-active';\n }\n if (activeClassName) {\n className += ' ' + activeClassName;\n }\n return className;\n}\n\nfunction isAide(aide, type) {\n return aide && ['default', 'primary'].indexOf(type) > -1;\n}\n\nexport default { getClass, getHoverClass, isAide };\n"
},
{
"path": "src/Button/index.ts",
"content": "/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport fmtEvent from '../_util/fmtEvent';\nimport { ButtonDefaultProps } from './props';\n\nComponent({\n /// #if WECHAT\n properties: {\n className: String,\n style: String,\n disabled: Boolean,\n activeClassName: String,\n subText: String,\n inline: Boolean,\n size: {\n type: String,\n value: 'medium',\n },\n icon: String,\n loading: Boolean,\n danger: Boolean,\n formType: {\n type: String,\n value: 'button',\n },\n publicId: String,\n openType: String,\n scope: String,\n type: {\n type: String,\n value: 'default',\n },\n aide: {\n type: Boolean,\n value: false,\n },\n },\n options: {\n styleIsolation: 'shared',\n } as unknown,\n /// #endif\n props: ButtonDefaultProps,\n methods: {\n /// #if ALIPAY\n onTap(e) {\n const { onTap, disabled, loading, onDisabledTap } = this.props;\n if (disabled && onDisabledTap) {\n const event = fmtEvent(this.props, e);\n onDisabledTap(event);\n }\n if (onTap && !disabled && !loading) {\n const event = fmtEvent(this.props, e);\n return onTap(event);\n }\n },\n catchTap(e) {\n const { catchTap, disabled, loading, onDisabledTap } = this.props;\n if (disabled && onDisabledTap) {\n const event = fmtEvent(this.props, e);\n onDisabledTap(event);\n }\n if (catchTap && !disabled && !loading) {\n const event = fmtEvent(this.props, e);\n return catchTap(event);\n }\n },\n onGetAuthorize(e) {\n if (this.props.onGetAuthorize) {\n this.props.onGetAuthorize(fmtEvent(this.props, e));\n }\n },\n onFollowLifestyle(e) {\n if (this.props.onFollowLifestyle) {\n this.props.onFollowLifestyle(fmtEvent(this.props, e));\n }\n },\n onError(e) {\n if (this.props.onError) {\n this.props.onError(fmtEvent(this.props, e));\n }\n },\n onGetUserInfo(e) {\n if (this.props.onGetUserInfo) {\n this.props.onGetUserInfo(fmtEvent(this.props, e));\n }\n },\n onGetPhoneNumber(e) {\n if (this.props.onGetPhoneNumber) {\n this.props.onGetPhoneNumber(fmtEvent(this.props, e));\n }\n },\n /// #endif\n /// #if WECHAT\n ...{\n onGetUserInfo: function (event) {\n this.triggerEvent('getuserinfo', event.detail);\n },\n onContact: function (event) {\n this.triggerEvent('contact', event.detail);\n },\n onGetPhoneNumber: function (event) {\n this.triggerEvent('getphonenumber', event.detail);\n },\n onGetRealTimePhoneNumber: function (event) {\n this.triggerEvent('getrealtimephonenumber', event.detail);\n },\n onError: function (event) {\n this.triggerEvent('error', event.detail);\n },\n onLaunchApp: function (event) {\n this.triggerEvent('launchapp', event.detail);\n },\n onOpenSetting: function (event) {\n this.triggerEvent('opensetting', event.detail);\n },\n onAgreePrivacyAuthorization: function (event) {\n this.triggerEvent('agreeprivacyauthorization', event.detail);\n },\n onChooseAvatar: function (event) {\n this.triggerEvent('chooseavatar', event.detail);\n },\n },\n /// #endif\n },\n});\n"
},
{
"path": "src/Button/props.ts",
"content": "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { IBaseProps } from '../_util/base';\n\n/**\n * @description 按钮，用户只需单击一下即可执行操作并做出选择。\n * 常用于表单提交、界面跳转、模块引导点击。具体用法和小程序框架中 button 保持一致，在 button 基础上做了样式的封装。\n * 封装后的按钮可改变按钮形态、增加 loading，以及内置了几种不同样式的按钮。\n */\n\nexport interface IButtonProps extends IBaseProps {\n /**\n * @description 按钮类型\n * @default default\n */\n type?: 'default' | 'primary' | 'text';\n /**\n * @description 按钮是否是辅助按钮 只有 default 和 primary 按钮才消费该参数\n * @default false\n */\n aide?: boolean;\n /**\n * @description 是否禁用\n * @default false\n */\n disabled?: boolean;\n /**\n * @description 按下时的类名\n */\n activeClassName?: string;\n /**\n * @description 辅助文字，显示在第二行\n */\n subText?: string;\n /**\n * @description 内联，不撑满父级宽度\n * @default false\n */\n inline?: boolean;\n /**\n * @description 内联尺寸\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n /**\n * @description 按钮左侧图标\n */\n icon?: string;\n /**\n * @description 是否加载中，加载中时不可点击\n * @default false\n */\n loading?: boolean;\n /**\n * @description 是否为危险按钮，危险按钮的颜色会变成红色\n * @default false\n */\n danger?: boolean;\n /**\n * @description 按钮原生类型，在表单提交时有效\n * @default button\n */\n formType?: 'button' | 'submit' | 'reset';\n /**\n * @description 点击回调\n */\n onTap?: (event: any) => void;\n /**\n * @description 点击回调\n */\n catchTap?: (event: any) => void;\n /**\n * @description 禁用时点击回调\n */\n onDisabledTap?: (event: any) => void;\n /**\n * @description 生活号 id，必须是当前小程序同主体且已关联的生活号，open-type=\"lifestyle\" 时有效。\n */\n publicId?: string;\n /**\n * @description 开放能力。\n */\n openType?: string;\n /**\n * @description 当 openType 为 getAuthorize 时有效。\n */\n scope?: string;\n\n onGetAuthorize?: (event: any) => void;\n onFollowLifestyle?: (event: any) => void;\n onError?: (event: any) => void;\n onGetUserInfo?: (event: any) => void;\n onGetPhoneNumber?: (event: any) => void;\n}\n\nexport const ButtonDefaultProps: Partial#f8f8f8
| #f8f8f8
| Calendar Week Name Background Color |\n| --calendar-default-color | #333333
| #c5cad1
| Calendar default color |\n| --calendar-selected-color | rgba(22, 119, 255, 0.1)
| rgba(22, 119, 255, 0.1)
| Calendar Selected Color |\n| --calendar-assist-color | #999999
| #616161
| Calendar Auxiliary Color |\n| --calendar-selected-end-color | #ffffff
| #ffffff
| Calendar selected end color |\n| --calendar-selected-color | #1677ff
| #3086ff
| Calendar Selected Color |\n\n## FAQ\n\n### How do I set the default start and end times?\n\nBy `defaultValue` You can set a default time.`defaultValue` The type of is `CalendarValue`。\n\n`CalendarValue` The type of is `number | [number, number]`, representing the date of a single choice or continuous interval. It is a timestamp in milliseconds.\n\nFor example, if we want to set the default start time to today and end time to seven days later, we can `defaultValue` Pass in the following code:\n\n```ts\n[dayjs().startOf('date'), dayjs().add(7, 'days').startOf('date')];\n```\n\n### By `onFormatter` Set custom data for cells\n\nWe can pass `onFormatter` method to set the custom data for the cell,`onFormatter` The format of is `(cell: CellState, currentValue: CalendarValue) => CellState`。\n\nThis function gets the state of each cell and the current value. By returning new cell data, we can customize the state of the cell.\n\nHere are some common usage scenarios:\n\n#### How to make the time before the day not optional?\n\nIn the Alipay applet, we can set it through the method on the page, and we need to pass in a method name string in the axml file.\n\nThe axml file:\n\n```xml\n#f8f8f8
| #f8f8f8
| 日历星期名称背景颜色 |\n| --calendar-default-color | #333333
| #c5cad1
| 日历默认颜色 |\n| --calendar-selected-color | rgba(22, 119, 255, 0.1)
| rgba(22, 119, 255, 0.1)
| 日历选中颜色 |\n| --calendar-assist-color | #999999
| #616161
| 日历辅助颜色 |\n| --calendar-selected-end-color | #ffffff
| #ffffff
| 日历选中结束颜色 |\n| --calendar-selected-color | #1677ff
| #3086ff
| 日历选中颜色 |\n\n## FAQ\n\n### 如何设置默认的开始与结束时间？\n\n通过 `defaultValue` 可以设置默认的时间。`defaultValue` 的类型是 `CalendarValue`。\n\n`CalendarValue` 的类型是 `number | [number, number]`，代表单选或者连续区间的日期。它是一个时间戳，单位是毫秒。\n\n例如，如果我们想设置默认的开始时间为今天，结束时间为七天后，我们可以在 `defaultValue` 中传入以下代码：\n\n```ts\n[dayjs().startOf('date'), dayjs().add(7, 'days').startOf('date')];\n```\n\n### 通过 `onFormatter` 设置单元格的自定义数据\n\n我们可以通过 `onFormatter` 方法设置单元格的自定义数据，`onFormatter` 的格式是 `(cell: CellState, currentValue: CalendarValue) => CellState`。\n\n这个函数会获取每个单元格的状态以及当前的值。通过返回新的单元格数据，我们可以自定义单元格的状态。\n\n以下是一些常见的使用场景：\n\n#### 如何让当天之前的时间不可选？\n\n在支付宝小程序中，我们可以通过页面上的方法设置，需要在 axml 文件中传入一个方法名字符串。\n\naxml 文件：\n\n```xml\n#ffffff
| #1a1a1a
| Card background color |\n| --ant-card-header-title-color | #333333
| #c5cad1
| Card head title color |\n| --ant-card-header-link-color | #999999
| #616161
| Card Head Link Color |\n| --ant-card-fold-btn-color | #1677ff
| #3086ff
| Card Fold Button Color |\n"
},
{
"path": "src/Card/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n \"ant-sticky\": \"../Sticky/index\",\n \"ant-icon\": \"../Icon/index\"\n }\n}\n"
},
{
"path": "src/Card/index.less",
"content": "@import (reference) './variable.less';\n@import '../style/mixins/hairline.less';\n\n@cardPrefix: ant-card;\n\n.@{cardPrefix} {\n border-radius: 24 * @rpx;\n background-color: @ant-card-bg;\n\n &-header {\n display: flex;\n padding: 24 * @rpx;\n justify-content: space-between;\n &-title {\n color: @ant-card-header-title-color;\n line-height: 45 * @rpx;\n font-size: 32 * @rpx;\n }\n &-right {\n &-link {\n display: flex;\n align-items: center;\n font-size: 28 * @rpx;\n color: @ant-card-link-color;\n }\n }\n\n &:empty {\n margin-bottom: 0;\n }\n\n &-fold {\n &-btn {\n font-size: 26 * @rpx;\n color: @ant-card-fold-btn-color;\n }\n &-icon {\n font-size: 26 * @rpx;\n margin-left: 8 * @rpx;\n color: @ant-card-fold-btn-color;\n }\n }\n }\n\n .ant-card-divider {\n margin: 0 24 * @rpx;\n &-with-line {\n position: relative;\n .hairline('top',@ant-card-divider-color);\n }\n }\n\n .ant-card-content {\n padding: 24 * @rpx;\n transition: all 0.2s ease-in-out;\n will-change: max-height;\n\n &-collapse {\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n overflow: hidden;\n }\n }\n}\n"
},
{
"path": "src/Card/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 数据展示\n order: 8\ntoc: 'content'\nsupportPlatform: ['alipay', 'wechat']\n---\n\n# Card 卡片\n\n基础的卡片容器。当需要承载文字、列表、图片、段落等内容时，使用 Card 卡片容器以方便用户浏览。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-card\": \"antd-mini/es/Card/index\"\n#endif\n#if WECHAT\n \"ant-card\": \"antd-mini/Card/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基础用法\n\n```xml\n#ffffff
| #1a1a1a
| 卡片背景颜色 |\n| --ant-card-header-title-color | #333333
| #c5cad1
| 卡片头部标题颜色 |\n| --ant-card-header-link-color | #999999
| #616161
| 卡片头部链接颜色 |\n| --ant-card-fold-btn-color | #1677ff
| #3086ff
| 卡片折叠按钮颜色 |\n"
},
{
"path": "src/Card/index.ts",
"content": "import {\n Component,\n getValueFromProps,\n triggerEvent,\n triggerEventOnly,\n} from '../_util/simply';\nimport { assertAilpayNativeNotSupport } from '../_util/support';\nimport { CardDefaultProps } from './props';\n\nassertAilpayNativeNotSupport('Card');\n\nComponent({\n props: CardDefaultProps,\n data: {\n finalFoldStatus: false,\n },\n methods: {\n // 点击展开收起按钮\n handleTapFoldBtn(e) {\n const { finalConfig = {}, finalFoldStatus } = this.data;\n if (finalConfig.foldTapArea === 'btn') {\n this.setData({\n finalFoldStatus: !finalFoldStatus,\n });\n triggerEvent(this, 'foldChange', !finalFoldStatus, e);\n }\n },\n // 点击标题整栏\n handleTapCardHeader(e) {\n const { finalConfig = {}, finalFoldStatus } = this.data;\n if (finalConfig.foldTapArea === 'header' && this.props.needFold) {\n this.setData({\n finalFoldStatus: !finalFoldStatus,\n });\n triggerEvent(this, 'foldChange', !finalFoldStatus, e);\n }\n },\n // 点击更多\n handleTapLink(e) {\n triggerEventOnly(this, 'operateClick', e);\n },\n // 处理title的sticky状态变化\n handleStickyChange(status) {\n triggerEvent(this, 'titleSticky', status);\n },\n },\n\n /// #if ALIPAY\n onInit() {\n const [foldStatus, config] = getValueFromProps(this, [\n 'foldStatus',\n 'config',\n ]);\n this.setData({\n finalFoldStatus: foldStatus,\n finalConfig: {\n ...CardDefaultProps.config,\n ...config,\n },\n });\n },\n didUpdate(prevProps) {\n const foldStatus = getValueFromProps(this, 'foldStatus');\n if (prevProps.foldStatus !== foldStatus) {\n this.setData({\n finalFoldStatus: foldStatus,\n });\n }\n },\n /// #endif\n /// #if WECHAT\n attached() {\n const [foldStatus, config] = getValueFromProps(this, [\n 'foldStatus',\n 'config',\n ]);\n this.setData({\n finalFoldStatus: foldStatus,\n finalConfig: {\n ...CardDefaultProps.config,\n ...config,\n },\n });\n },\n observers: {\n '**': function (data) {\n const prevData = this._prevData || this.data;\n this._prevData = { ...data };\n if (prevData.foldStatus !== data.foldStatus) {\n this.setData({\n finalFoldStatus: data.foldStatus,\n });\n }\n },\n },\n /// #endif\n});\n"
},
{
"path": "src/Card/props.ts",
"content": "export interface ICardProps {\n className?: string; // 容器的 class\n config?: ICardConfig; // 卡片的配置项\n title?: string; // 卡片标题\n operateText?: string; // 默认头部右侧操作按钮文本\n needFold?: boolean; // 卡片是否可以折叠，如果为 true，还需要不传 operateText 才可以出折叠按钮，或者通过配置让折叠操作区为整个 titlebar\n foldStatus?: boolean; // true展开 false收起态。不传就是非受控组件，传了就是受控组件\n headSticky?: boolean; // 标题是否需要吸顶\n stickyTransparentTitle?: boolean; // 吸顶是否在透明头页面，是的话会自动算透明头高度\n stickyTop?: string; // 透传给sticky组件用于决定title区域的吸顶位置\n divider?: boolean; // 是否显示分割线\n onOperateClick?: (e) => void; // 默认头部右侧操作按钮点击回调\n onFoldChange?: () => void; // 展开收起态发生变化时的回调\n onTitleSticky?: (status) => void; // title区域是否吸顶变化时的回调\n}\n\nexport interface ICardConfig {\n foldTapArea?: 'btn' | 'header'; // 折叠操作点击范围\n}\n\nexport const CardDefaultProps: ICardProps = {\n className: '',\n config: {\n foldTapArea: 'btn',\n },\n title: '',\n operateText:'',\n needFold: false,\n foldStatus: false,\n headSticky: false,\n stickyTransparentTitle: false,\n stickyTop: '',\n divider: false,\n onOperateClick: () => {},\n onFoldChange: () => {},\n onTitleSticky: (status: boolean) => status,\n};\n"
},
{
"path": "src/Card/variable.less",
"content": "@import (reference) '../style/variables.less';\n@import (reference) '../style/themes/index.less';\n\n@ant-card-bg: var(--ant-card-bg, @COLOR_WHITE);\n\n@ant-card-header-title-color: var(\n --ant-card-header-title-color,\n @COLOR_TEXT_PRIMARY\n);\n\n@ant-card-link-color: var(--ant-card-header-title-color, @COLOR_TEXT_ASSIST);\n\n@ant-card-fold-btn-color: var(--ant-card-fold-btn-color, @COLOR_BRAND1);\n\n@ant-card-divider-color: var(--ant-card-divider-color, #eeeeee);\n"
},
{
"path": "src/Checkbox/CheckboxGroup/index.axml",
"content": "#999999
| #616161
| Check Box Title Color |\n| --checkbox-border-color | #cccccc
| #474747
| Check Box Border Color |\n| --checkbox-background-color | #1677ff
| #3086ff
| Checkbox Background Color |\n| --checkbox-disabled-background | #f5f5f5
| #121212
| Check box Disable background color |\n| --checkbox-text-color | #333333
| #c5cad1
| Check Box Text Color |\n| --checkbox-fake-icon-background-color | #ffffff
| #1a1a1a
| Check Box Fake Icon Background Color |\n"
},
{
"path": "src/Checkbox/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n \"ant-icon\": \"../Icon/index\"\n }\n}\n"
},
{
"path": "src/Checkbox/index.less",
"content": "@import (reference) './variable.less';\n\n@checkboxItemPrefix: ant-checkbox-item;\n\n.@{checkboxItemPrefix} {\n color: @checkbox-text-color;\n margin-right: 16 * @rpx;\n\n /// #if WECHAT\n // 支付宝默认 label 的高度\n height: 59.6 * @rpx;\n line-height: 59.6 * @rpx;\n // 在 label 内嵌一个 view, 微信会变成 block 组件\n display: inline-block;\n /// #endif\n\n &-container {\n display: flex;\n align-items: center;\n }\n\n &-content {\n padding-left: 10 * @rpx;\n text-align: left;\n }\n &-wrap {\n position: relative;\n width: @checkbox-size;\n height: @checkbox-size;\n flex: 0 0 @checkbox-size;\n }\n &-base {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n &-fake {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n display: flex;\n justify-content: center;\n align-items: center;\n &-icon {\n background-color: @checkbox-fake-icon-background-color;\n border: @checkbox-border-width solid @checkbox-border-color;\n border-radius: @checkbox-corner-radius;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n &-checkedIcon {\n border-radius: @checkbox-corner-radius;\n background-color: @checkbox-background-color;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n &-icon {\n color: @COLOR_WHITE;\n font-size: 28 * @rpx;\n }\n }\n &-disbaledIcon {\n box-sizing: border-box;\n border: @checkbox-border-width solid @checkbox-border-color;\n border-radius: @checkbox-corner-radius;\n width: 100%;\n height: 100%;\n background-color: @checkbox-disabled-background;\n }\n &-disabledCheckedIcon {\n box-sizing: border-box;\n border: @checkbox-border-width solid @checkbox-border-color;\n background-color: @checkbox-disabled-background;\n border-radius: @checkbox-corner-radius;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n &-icon {\n color: @checkbox-border-color;\n font-size: 28 * @rpx;\n }\n }\n }\n &-disabled {\n opacity: @opacity-disabled;\n }\n}\n"
},
{
"path": "src/Checkbox/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 数据录入\n order: 10\ntoc: 'content'\nsupportPlatform: ['alipay', 'wechat']\n---\n\n# Checkbox 复选框\n\n在一组可选项中进行多选。单独使用时可以表示两种状态之间的切换，与 `switch` 类似。区别在于，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要与提交操作配合。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-checkbox\": \"antd-mini/es/Checkbox/index\",\n \"ant-checkbox-group\": \"antd-mini/es/Checkbox/CheckboxGroup/index\"\n#endif\n#if WECHAT\n \"ant-checkbox\": \"antd-mini/Checkbox/index\",\n \"ant-checkbox-group\": \"antd-mini/Checkbox/CheckboxGroup/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n> 通过 `checked` 绑定复选框的勾选状态。\n\n```xml\n#if ALIPAY\n#999999
| #616161
| 复选框标题颜色 |\n| --checkbox-border-color | #cccccc
| #474747
| 复选框边框颜色 |\n| --checkbox-background-color | #1677ff
| #3086ff
| 复选框背景颜色 |\n| --checkbox-disabled-background | #f5f5f5
| #121212
| 复选框禁用背景颜色 |\n| --checkbox-text-color | #333333
| #c5cad1
| 复选框文本颜色 |\n| --checkbox-fake-icon-background-color | #ffffff
| #1a1a1a
| 复选框假图标背景颜色 |\n"
},
{
"path": "src/Checkbox/index.sjs.ts",
"content": "function getClassName(checked, disabled) {\n if (!checked && !disabled) {\n return 'icon';\n }\n if (checked && !disabled) {\n return 'checkedIcon';\n }\n if (!checked && disabled) {\n return 'disbaledIcon';\n }\n if (checked && disabled) {\n return 'disabledCheckedIcon';\n }\n}\n\nfunction getCheckboxChecked(item, value) {\n return (value || []).indexOf(item.value) > -1;\n}\n\nexport default { getClassName, getCheckboxChecked };\n"
},
{
"path": "src/Checkbox/index.ts",
"content": "import mixinValue from '../mixins/value';\nimport { Component, triggerEvent } from '../_util/simply';\nimport { isAilpayNative } from '../_util/support';\nimport { CheckboxDefaultProps } from './props';\n\nComponent({\n data: {\n isLabelSupport: true,\n },\n props: CheckboxDefaultProps,\n onInit() {\n this.setData({\n isLabelSupport: !isAilpayNative(),\n });\n },\n methods: {\n onChange(e) {\n const value = !this.getValue();\n if (!this.isControlled()) {\n this.update(value);\n }\n triggerEvent(this, 'change', value, e);\n },\n },\n mixins: [\n mixinValue({\n valueKey: 'checked',\n defaultValueKey: 'defaultChecked',\n }),\n ],\n});\n"
},
{
"path": "src/Checkbox/props.ts",
"content": "import { IBaseProps } from '../_util/base';\n/**\n * @description 复选框，表单组件。\n */\n\nexport interface ICheckboxProps extends IBaseProps {\n value?: any;\n checked: boolean;\n defaultChecked?: boolean;\n disabled: boolean;\n color: string;\n onChange?: (checked: boolean, e: any) => void;\n}\n\nexport const CheckboxDefaultProps: Partial#1677ff
| #3086ff
| List background color |\n| --check-list-item-background-color | #ffffff
| #1a1a1a
| List Item Background Color |\n| --check-list-item-hover-background-color | #eeeeee
| #2b2b2b
| List item hover background color |\n| --check-list-item-content-color | #333333
| #c5cad1
| List Item Content Color |\n| --check-list-item-description-color | #999999
| #616161
| List Item Description Color |\n"
},
{
"path": "src/Checklist/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n \"ant-checklist-item\": \"./ChecklistItem/index\",\n \"ant-icon\": \"../Icon/index\"\n }\n}\n"
},
{
"path": "src/Checklist/index.less",
"content": "@import (reference) './variable.less';\n\n@checklistPrefix: ant-checklist;\n\n.@{checklistPrefix} {\n &-body {\n position: relative;\n overflow: hidden;\n }\n\n &-item-check-icon {\n font-size: @font-size-title;\n color: @checklist-background-color;\n }\n}\n"
},
{
"path": "src/Checklist/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 数据录入\n order: 10\ntoc: 'content'\n---\n\n# Checklist 可勾选列表\n\n列表的勾选操作。\n\n- 在一组列表项中选择一个或多个。\n- 可勾选列表的使用需要默认至少勾选一项，方便用户了解列表是可以勾选的。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-checklist\": \"antd-mini/es/Checklist/index\",\n#endif\n#if WECHAT\n \"ant-checklist\": \"antd-mini/Checklist/index\",\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n```xml\n#1677ff
| #3086ff
| 清单背景颜色 |\n| --check-list-item-background-color | #ffffff
| #1a1a1a
| 清单项背景颜色 |\n| --check-list-item-hover-background-color | #eeeeee
| #2b2b2b
| 清单项悬停背景颜色 |\n| --check-list-item-content-color | #333333
| #c5cad1
| 清单项内容颜色 |\n| --check-list-item-description-color | #999999
| #616161
| 清单项描述颜色 |\n"
},
{
"path": "src/Checklist/index.sjs.ts",
"content": "function getChecked(value, values, multiple) {\n if (!multiple) {\n return value === values;\n }\n return (values || []).indexOf(value) > -1;\n}\n\nexport default { getChecked };\n"
},
{
"path": "src/Checklist/index.ts",
"content": "import mixinValue from '../mixins/value';\nimport {\n Component,\n getValueFromProps,\n triggerEventValues,\n} from '../_util/simply';\nimport { ChecklistDefaultProps } from './props';\n\nComponent({\n props: ChecklistDefaultProps,\n methods: {\n onChange(item) {\n const [multiple, options] = getValueFromProps(this, [\n 'multiple',\n 'options',\n ]);\n let value;\n /// #if ALIPAY\n value = item.value;\n /// #endif\n /// #if WECHAT\n value = item.detail.value;\n /// #endif\n if (multiple) {\n let currentValue = this.getValue();\n if (currentValue.indexOf(value) > -1) {\n currentValue = currentValue.filter((v) => v !== value);\n } else {\n currentValue = [...currentValue, value];\n }\n if (!this.isControlled()) {\n this.update(currentValue);\n }\n triggerEventValues(this, 'change', [\n currentValue,\n options.filter((v) => currentValue.indexOf(v.value) > -1),\n ]);\n } else {\n if (!this.isControlled()) {\n this.update(value);\n }\n triggerEventValues(this, 'change', [\n value,\n options.find((v) => v.value === value),\n ]);\n }\n },\n },\n\n mixins: [\n mixinValue({\n transformValue(val) {\n const value = val || [];\n return {\n needUpdate: true,\n value,\n };\n },\n }),\n ],\n});\n"
},
{
"path": "src/Checklist/props.ts",
"content": "import { IBaseProps } from '../_util/base';\n\n/**\n * @description 可勾选列表\n */\n\nexport interface ChecklistItem {\n /**\n * @description 可勾选项的描述文案\n */\n description?: string;\n\n /**\n * @description 可勾选项的图片地址\n */\n image?: string;\n\n /**\n * @description 可勾选项的标题文案\n */\n title: string;\n\n /**\n * @description 可勾选项的值\n */\n value: string | number;\n\n disabled?: boolean;\n readonly?: boolean;\n}\n\nexport interface IChecklistProps extends IBaseProps {\n /**\n * @description 默认值\n */\n value: Array#ffffff
| #1a1a1a
| Collapse Panel Title Background Color |\n| --collapse-title-color | #333333
| #c5cad1
| Collapse Panel Title Color |\n| --collapse-title-icon-color | #cccccc
| #474747
| Collapse Panel Title Icon Color |\n| --collapse-content-background-color | #ffffff
| #1a1a1a
| Collapse Panel Content Background Color |\n| --collapse-border-color | #eeeeee
| #2b2b2b
| Collapse Panel Border Color |\n| --collapse-node-text-color | #999999
| #616161
| Collapse Panel Node Text Color |\n| --collapse-container-background-color | #ffffff
| #1a1a1a
| Folding panel container background color |\n"
},
{
"path": "src/Collapse/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n \"ant-icon\": \"../Icon/index\"\n }\n}\n"
},
{
"path": "src/Collapse/index.less",
"content": "@import (reference) './variable.less';\n@import '../style/mixins/hairline.less';\n\n@collapsePrefix: ant-collapse-item;\n\n.@{collapsePrefix} {\n &-disabled {\n .ant-collapse-item-title-node,\n .ant-collapse-item-brief-container {\n opacity: 0.4;\n }\n .@{collapsePrefix}-title:active {\n background: @collapse-title-background-color;\n transition: 0s;\n }\n }\n &-line {\n display: flex;\n flex: 1;\n border-bottom: 1px solid @collapse-border-color;\n padding: @collapse-title-padding;\n }\n &-title {\n position: relative;\n display: flex;\n text-align: justify;\n align-items: center;\n justify-content: space-between;\n line-height: 48 * @rpx;\n font-size: @collapse-title-size;\n color: @collapse-title-color;\n background-color: @collapse-title-background-color;\n transition: all 300ms linear;\n box-sizing: border-box;\n &-node {\n display: flex;\n flex: 1;\n max-width: 100%;\n font-size: 34 * @rpx;\n color: @collapse-title-color;\n }\n &-arrow {\n color: @collapse-title-icon-color;\n }\n\n &:active {\n background-color: @collapse-border-color;\n transition: 0s;\n }\n }\n\n &-brief {\n &-container {\n display: flex;\n .ant-icon {\n font-size: 40 * @rpx;\n }\n }\n\n &-node {\n display: flex;\n flex: 1;\n font-size: 30 * @rpx;\n color: @collapse-node-text-color;\n margin-right: 8 * @rpx;\n }\n }\n\n &-content {\n color: @collapse-title-color;\n border-bottom: 1px solid @collapse-border-color;\n box-sizing: border-box;\n padding: 24 * @rpx;\n &-container {\n background: @collapse-container-background-color;\n }\n &-wrap {\n will-change: height;\n overflow: hidden;\n\n &-active {\n animation: trigger1 0.2s;\n }\n\n &-non-active {\n animation: trigger2 0.2s;\n }\n\n &-transition {\n transition: height 0.2s ease-in-out;\n }\n\n &-first {\n height: 0;\n }\n }\n }\n}\n\n@keyframes trigger1 {\n 0% {\n content: '';\n }\n\n 100% {\n content: '';\n }\n}\n\n@keyframes trigger2 {\n 0% {\n content: '';\n }\n\n 100% {\n content: '';\n }\n}\n"
},
{
"path": "src/Collapse/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 数据展示\n order: 8\ntoc: 'content'\n---\n\n# Collapse 折叠面板\n\n可以折叠/展开的内容区域。\n\n- 对复杂区域进行分组和隐藏，保持页面的整洁。\n- 手风琴是一种特殊的折叠面板，只允许单个内容区域展开。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-collapse\": \"antd-mini/es/Collapse/index\"\n#endif\n#if WECHAT\n \"ant-collapse\": \"antd-mini/Collapse/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### Demo 代码\n\n```xml\n#ffffff
| #1a1a1a
| 折叠面板标题背景颜色 |\n| --collapse-title-color | #333333
| #c5cad1
| 折叠面板标题颜色 |\n| --collapse-title-icon-color | #cccccc
| #474747
| 折叠面板标题图标颜色 |\n| --collapse-content-background-color | #ffffff
| #1a1a1a
| 折叠面板内容背景颜色 |\n| --collapse-border-color | #eeeeee
| #2b2b2b
| 折叠面板边框颜色 |\n| --collapse-node-text-color | #999999
| #616161
| 折叠面板节点文本颜色 |\n| --collapse-container-background-color | #ffffff
| #1a1a1a
| 折叠面板容器背景颜色 |\n"
},
{
"path": "src/Collapse/index.sjs.ts",
"content": "function isActive(current, index, disabled) {\n if (disabled) {\n return false;\n }\n return (current || []).indexOf(index) >= 0;\n}\n\nfunction getStyleHeight(index, contentHeight, disabled) {\n if (disabled) {\n return 'height: 0px';\n }\n const height = contentHeight[index];\n if (height === '') {\n return '';\n }\n if (height) {\n return `height: ${height}`;\n }\n return 'height: 0px';\n}\n\n\nexport default { isActive, getStyleHeight };\n"
},
{
"path": "src/Collapse/index.ts",
"content": "import createValue from '../mixins/value';\nimport { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';\nimport { Component, getValueFromProps, triggerEvent } from '../_util/simply';\nimport { CollapseDefaultProps } from './props';\n\nComponent({\n props: CollapseDefaultProps,\n data: {\n contentHeight: [],\n hasChange: false,\n },\n methods: {\n getInstance() {\n if (this.$id) {\n return my;\n }\n return this;\n },\n async getBoundingClientRectWithBuilder(builder: (id: string) => string) {\n return await getInstanceBoundingClientRect(\n this.getInstance(),\n builder(this.$id ? `-${this.$id}` : '')\n );\n },\n formatCurrent(val: number[], props) {\n let current = [...(val || [])];\n const items = props.items;\n current = current.filter((item) => {\n if (!items[item] || items[item].disabled) {\n return false;\n }\n return true;\n });\n if (props.accordion) {\n current = current.length > 0 ? [current[0]] : [];\n }\n return [...current];\n },\n onChange(e) {\n const itemIndex = parseInt(e.currentTarget.dataset.index, 10);\n const [items, accordion] = getValueFromProps(this, [\n 'items',\n 'accordion',\n ]);\n if (items[itemIndex] && items[itemIndex].disabled) {\n return;\n }\n const arr = this.getValue();\n let current = [...arr];\n const index = current.indexOf(itemIndex);\n if (index >= 0) {\n current.splice(index, 1);\n } else {\n if (accordion) {\n current = [itemIndex];\n } else {\n current.push(itemIndex);\n current.sort();\n }\n }\n if (!this.isControlled()) {\n this.update(current);\n }\n triggerEvent(this, 'change', current, e);\n },\n async updateContentHeight(prevCurrent: number[], nextCurrent: number[]) {\n const prevCurrentArray = prevCurrent;\n const nextCurrentArray = nextCurrent;\n const expandArray = [];\n const closeArray = [];\n nextCurrentArray.forEach((item) => {\n if (prevCurrentArray.indexOf(item) < 0) {\n expandArray.push(item);\n }\n });\n prevCurrentArray.forEach((item) => {\n if (nextCurrentArray.indexOf(item) < 0) {\n closeArray.push(item);\n }\n });\n const items = getValueFromProps(this, 'items');\n let contentHeight = await Promise.all(\n items.map(async (item, index) => {\n if (\n expandArray.indexOf(index) >= 0 ||\n closeArray.indexOf(index) >= 0\n ) {\n const { height } = await this.getBoundingClientRectWithBuilder(\n (id) => `.ant-collapse-item-content${id}-${index}`\n );\n return `${height}px`;\n }\n return this.data.contentHeight[index];\n })\n );\n if (closeArray.length === 0) {\n this.setData({\n contentHeight,\n });\n } else {\n this.setData({\n contentHeight,\n });\n setTimeout(() => {\n contentHeight = contentHeight.map((item, index) => {\n if (closeArray.indexOf(index) >= 0) {\n return '0px';\n }\n return item;\n });\n this.setData({\n contentHeight,\n });\n }, 10);\n }\n },\n resetContentHeight(e) {\n const index = parseInt(e.currentTarget.dataset.index, 10);\n if (this.getValue().indexOf(index) < 0) {\n return;\n }\n const contentHeight = [...this.data.contentHeight];\n contentHeight[index] = '';\n this.setData({\n contentHeight,\n });\n },\n },\n\n mixins: [\n createValue({\n valueKey: 'current',\n defaultValueKey: 'defaultCurrent',\n transformValue(current, extra) {\n const value = this.formatCurrent(\n current,\n extra ? extra.nextProps : getValueFromProps(this)\n );\n return {\n needUpdate: true,\n value,\n };\n },\n }),\n ],\n\n /// #if ALIPAY\n didUpdate(prevProps, prevData) {\n console.log(\n prevProps.items !== this.props.items,\n !this.isEqualValue(prevData)\n );\n if (prevProps.items !== this.props.items || !this.isEqualValue(prevData)) {\n this.updateContentHeight(this.getValue(prevData), this.getValue());\n }\n },\n didMount() {\n const current = this.getValue();\n const contentHeight = this.props.items.map((item, index) => {\n if (current.indexOf(index) >= 0) {\n return '';\n }\n return '0px';\n });\n this.setData({\n hasChange: true,\n contentHeight,\n });\n },\n /// #endif\n\n /// #if WECHAT\n observers: {\n '**': function (data) {\n const prevData = this._prevData || this.data;\n this._prevData = { ...data };\n if (prevData.items !== data.items || !this.isEqualValue(prevData)) {\n this.updateContentHeight(this.getValue(prevData), this.getValue());\n }\n },\n },\n\n attached() {\n const current = this.getValue();\n const contentHeight = this.properties.items.map((item, index) => {\n if (current.indexOf(index) >= 0) {\n return '';\n }\n return '0px';\n });\n this.setData({\n hasChange: true,\n contentHeight,\n });\n\n this._prevData = this.data;\n },\n /// #endif\n});\n"
},
{
"path": "src/Collapse/props.ts",
"content": "import { IBaseProps } from '../_util/base';\n\n/**\n * @description 手风琴\n */\nexport interface ICollapseProps extends IBaseProps {\n /**\n * @description 是否是手风琴模式，仅一个内容被展开\n */\n\n /**\n * @description 选中\n */\n current?: number[];\n\n /**\n * @description 选中初始值\n */\n defaultCurrent?: number[];\n\n /**\n * @description accordion模式\n */\n accordion?: boolean;\n\n /**\n * @description 列表\n */\n items?: {\n title?: string;\n content?: string;\n disabled?: boolean;\n className?: string;\n }[];\n\n /**\n * @description collapse 切换时的回调\n */\n\n onChange?: (current: number[] | undefined, e: Record#333333
| #c5cad1
| Container head color |\n| --container-color-text-assist | #999999
| #616161
| Secondary Text Color |\n| --container-background-color | #ffffff
| #1a1a1a
| Container background color |\n"
},
{
"path": "src/Container/index.json",
"content": "{ \n \"styleIsolation\": \"shared\",\n \"component\": true\n}\n"
},
{
"path": "src/Container/index.less",
"content": "@import (reference) './variable.less';\n@import '../style/mixins/hairline.less';\n\n@containerPrefix: ant-container;\n\n.@{containerPrefix} {\n border-radius: @container-radius;\n margin-bottom: 24 * @rpx;\n &-headerInBox {\n background-color: @container-background-color;\n .@{containerPrefix}-header {\n padding: 0 @container-spacing;\n .@{containerPrefix}-header-title,\n .@{containerPrefix}-header-right {\n position: relative;\n .hairline('bottom');\n }\n }\n }\n &-content {\n padding: @container-spacing;\n background-color: @container-background-color;\n border-radius: @container-radius;\n color: @container-header-color;\n }\n &-header {\n display: flex;\n &-title {\n font-size: @container-header-size;\n font-weight: bold;\n color: @container-header-color;\n display: flex;\n align-items: center;\n height: 96 * @rpx;\n flex: 1;\n &:empty {\n display: none;\n }\n }\n\n &-right {\n color: @container-header-right-color;\n display: flex;\n align-items: center;\n height: 96 * @rpx;\n justify-content: flex-end;\n &:empty {\n display: none;\n }\n }\n .@{containerPrefix}-header-title:empty\n + .@{containerPrefix}-header-right:not(:empty) {\n flex: 1;\n }\n }\n}\n"
},
{
"path": "src/Container/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 待废弃\n order: 99\ntoc: 'content'\n---\n\n# Container 容器\n\n不建议使用，此组件即将废弃。推荐使用 [Card](/components/card) 组件，拥有最新设计规范和更丰富功能。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-container\": \"antd-mini/es/Container/index\"\n#endif\n#if WECHAT\n \"ant-container\": \"antd-mini/Container/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n```xml\n#333333
| #c5cad1
| 容器头部颜色 |\n| --container-color-text-assist | #999999
| #616161
| 辅助文本颜色 |\n| --container-background-color | #ffffff
| #1a1a1a
| 容器背景颜色 |\n"
},
{
"path": "src/Container/index.ts",
"content": "import { ContainerDefaultProps } from './props';\nimport '../_util/assert-component2';\n\nComponent({\n /// #if WECHAT\n properties: {\n title: {\n type: String,\n },\n className: {\n type: String,\n },\n style: {\n type: String,\n },\n headerInBox: {\n value: true,\n type: Boolean,\n },\n },\n options: {\n //@ts-ignore\n multipleSlots: true,\n styleIsolation: 'shared',\n },\n /// #endif\n\n props: ContainerDefaultProps,\n});\n"
},
{
"path": "src/Container/props.ts",
"content": "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { IBaseProps, IconType } from '../_util/base';\n/**\n * @description 容器，依据最佳实践统一了元素的间距、圆角，并可根据具体情况选择使用 title 内容。\n */\n\nexport interface IContainerProps extends IBaseProps {\n /**\n * @description 标题\n */\n title?: string;\n /**\n * @description 标题是否在容器内\n * @default true\n */\n headerInBox?: boolean;\n /**\n * @description 类名\n */\n className?: string;\n /**\n * @description 样式\n */\n style?: string;\n}\n\nexport const ContainerDefaultProps: IContainerProps = {\n headerInBox: true,\n};\n"
},
{
"path": "src/Container/variable.less",
"content": "@import (reference) '../style/variables.less';\n@import (reference) '../style/themes/index.less';\n\n// 字体颜色\n@container-header-color: var(--container-header-color, @COLOR_TEXT_PRIMARY);\n// 字体颜色\n@container-header-right-color: var(\n --container-color-text-assist,\n @COLOR_TEXT_ASSIST\n);\n// 字体大小\n@container-header-size: 32 * @rpx;\n// 边距\n@container-spacing: @h-spacing-large;\n// 圆角\n@container-radius: @corner-radius-lg;\n// 背景\n@container-background-color: var(--container-background-color, @COLOR_CARD);\n"
},
{
"path": "src/Countdown/index.axml",
"content": "#666666
| #808080
| Countdown Color |\n| --ant-countdown-number-color | #ffffff
| #000000
| Countdown Digital Color |\n| --ant-countdown-number-bg | #1677ff
| #3086ff
| Countdown digital background color |\n\n## Slot\n\n| Name | Description |\n| ------ | ---------- |\n| - | Default Slot |\n| prefix | Countdown Head |\n| suffix | Countdown Tail |\n"
},
{
"path": "src/Countdown/index.json",
"content": "{ \n \"styleIsolation\": \"shared\",\n \"component\": true\n}\n"
},
{
"path": "src/Countdown/index.less",
"content": "@import (reference) './variable.less';\n\n@countdownPrefix: ant-countdown;\n\n.@{countdownPrefix} {\n font-size: 26 * @rpx;\n line-height: 37 * @rpx;\n color: @ant-countdown-color;\n display: inline-flex;\n align-items: center;\n &-time {\n // 对视觉稿完美还原，需要加这个\n transform: translateY(1 * @rpx);\n &-prefix {\n padding-right: 2 * @rpx;\n }\n &-day {\n }\n &-colon {\n // 为了还原视觉稿这里使用的是中文冒号，还需要一些微调\n margin-right: -18 * @rpx;\n margin-left: -3 * @rpx;\n transform: translateY(1 * @rpx);\n }\n &-num {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 40 * @rpx;\n padding: 0 4 * @rpx;\n height: 40 * @rpx;\n margin: 0 6 * @rpx;\n border-radius: 6 * @rpx;\n font-size: 26 * @rpx;\n line-height: 37 * @rpx;\n color: @ant-countdown-number-color;\n letter-spacing: 0;\n background-color: @ant-countdown-number-bg;\n }\n }\n}\n\n@keyframes ds-countdown {\n 0% { content: \"9\"; }\n 10% { content: \"8\"; }\n 20% { content: \"7\"; }\n 30% { content: \"6\"; }\n 40% { content: \"5\"; }\n 50% { content: \"4\"; }\n 60% { content: \"3\"; }\n 70% { content: \"2\"; }\n 80% { content: \"1\"; }\n 90% { content: \"0\"; }\n 100% { content: \"9\"; }\n}\n\n.ds-countdown::after {\n display: inline-block;\n animation: ds-countdown 1s infinite;\n content: \"9\";\n}\n"
},
{
"path": "src/Countdown/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 业务组件\n order: 15\ntoc: content\n---\n\n# Countdown 倒计时\n\n需要展示倒计时的场景。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-countdown\": \"antd-mini/es/Countdown/index\"\n#endif\n#if WECHAT\n \"ant-countdown\": \"antd-mini/Countdown/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n```xml\n#666666
| #808080
| 倒计时颜色 |\n| --ant-countdown-number-color | #ffffff
| #000000
| 倒计时数字颜色 |\n| --ant-countdown-number-bg | #1677ff
| #3086ff
| 倒计时数字背景颜色 |\n\n## 插槽\n\n| 名称 | 说明 |\n| ------ | ---------- |\n| - | 默认插槽 |\n| prefix | 倒计时头部 |\n| suffix | 倒计时尾部 |\n"
},
{
"path": "src/Countdown/index.ts",
"content": "import dayjs from 'dayjs';\nimport duration from 'dayjs/plugin/duration';\nimport {\n Component,\n getValueFromProps,\n triggerEvent,\n triggerEventOnly,\n} from '../_util/simply';\nimport { CountdownDefaultProps } from './props';\n\ndayjs.extend(duration);\n\nComponent({\n props: CountdownDefaultProps,\n data: {\n countdownDay: null, // 注意这些倒计时相关的都应该是字符串\n countdownHour: null, // 倒计时小时 注意都用字符串，避免0被判false的问题\n countdownMin: null, // 倒计时分钟\n countdownSec: null, // 倒计时秒\n showDecisecond: true, // 倒计时结束时不展示秒后一位(厘秒)\n },\n methods: {\n init() {\n const [\n countdownStartTime,\n countdownEndTime,\n countdownType,\n time,\n autoShowDay,\n ] = getValueFromProps(this, [\n 'countdownStartTime',\n 'countdownEndTime',\n 'countdownType',\n 'time',\n 'autoShowDay',\n ]);\n const timeNum = isNaN(Number(time)) ? 0 : Number(time);\n\n const defaultEndTime = +new Date() + timeNum * 1000;\n const currentTimeStr = `${countdownStartTime || +new Date()}`;\n const endTimeStr = `${countdownEndTime || defaultEndTime}`;\n\n // 如果服务端给的是秒级别的时间戳，自动补3个0转成毫秒的\n const finalCurrentTimeStr = `${currentTimeStr}${\n currentTimeStr.length === 10 ? '000' : ''\n }`;\n const finalEndTimeStr = `${endTimeStr}${\n endTimeStr.length === 10 ? '000' : ''\n }`;\n const finalStartTime = parseInt(finalCurrentTimeStr, 10);\n const finalEndTime = parseInt(finalEndTimeStr, 10);\n\n this.setData({\n showDay: autoShowDay ? this.data.countdownDay !== '0' : true,\n });\n\n this.countdown(finalStartTime, finalEndTime, (remainTime) => {\n if (remainTime < 1) {\n // 小于1s了，说明倒计时该结束了\n triggerEventOnly(this, 'countdownFinish');\n this.setData({\n showDecisecond: false,\n });\n }\n\n const durationTime = dayjs.duration(remainTime);\n\n const day = Math.floor(durationTime.asDays()).toString();\n\n let hour = '';\n if (countdownType === 'day') {\n hour = durationTime.format('HH');\n } else {\n const hoursNum = Math.floor(durationTime.asHours());\n hour = `${hoursNum < 10 ? '0' : ''}${hoursNum > 0 ? hoursNum : '0'}`;\n }\n\n const min = durationTime.format('mm');\n const sec = durationTime.format('ss');\n\n this.setData({\n countdownDay: day,\n countdownHour: hour,\n countdownMin: min,\n countdownSec: sec,\n });\n\n triggerEvent(this, 'countdownChange', {\n remainTime,\n day,\n hour,\n min,\n sec,\n });\n });\n },\n countdown(\n startTimestamp: number,\n endTimestamp: number,\n callback: (remainingTime: number) => void\n ) {\n // if (isNaN(startTimestamp) || isNaN(endTimestamp)) {\n // return;\n // }\n const currentTime = Date.now(); // 当前时间戳\n if (\n currentTime - Math.round(startTimestamp) < 10000 &&\n Math.round(startTimestamp) - currentTime < 10000\n ) {\n // 如果服务端下发的startTime时间戳和本机的时间戳相差10s以内，以本地时间戳为准\n const getRemainingTime = (): number => {\n // 本地时间戳与服务端时间戳差距在10s以内都属于正常的，可以直接用本地时间。\n let remainingTime;\n const newCurrentTime = +new Date();\n\n // 判断是否到达结束时间\n if (newCurrentTime >= endTimestamp) {\n remainingTime = 0;\n } else {\n remainingTime = endTimestamp - newCurrentTime;\n }\n return remainingTime;\n };\n\n const updateCountdown = () => {\n const remainingTime = getRemainingTime();\n\n // 调用setData方法更新UI\n callback(remainingTime);\n if (remainingTime > 0) {\n // 若还有剩余时间，延迟1秒后递归调用自身\n this.timer = setTimeout(updateCountdown, 1000);\n }\n };\n\n // 预先调一次\n const remainingTime = getRemainingTime();\n callback(remainingTime);\n\n if (remainingTime === 0) {\n // 如果第一次就是0，可以直接停了\n return;\n }\n\n // 初始化倒计时\n updateCountdown();\n } else {\n // 否则以服务端时间为准，直接算出当前剩余时间，按秒循环即可\n const remainingTime = endTimestamp - startTimestamp;\n const totalCount = Math.round(remainingTime / 1000);\n let count = 0;\n\n // 立刻调一次\n callback(remainingTime - count * 1000);\n\n // 每秒调一次，循环count次\n this.intervalId = setInterval(() => {\n if (count >= totalCount) {\n clearInterval(this.intervalId);\n } else {\n count++;\n // console.log('111111', remainingTime, count, remainingTime - count * 1000)\n callback(remainingTime - count * 1000);\n }\n }, 1000);\n }\n },\n },\n\n /// #if ALIPAY\n onInit() {\n this.init();\n },\n didUnmount() {\n clearInterval(this.intervalId);\n clearTimeout(this.timer);\n },\n didUpdate(prevProps) {\n const autoShowDay = getValueFromProps(this, 'autoShowDay');\n if (prevProps.autoShowDay !== autoShowDay) {\n this.setData({\n showDay: autoShowDay ? this.data.countdownDay !== '0' : true,\n });\n }\n },\n /// #endif\n /// #if WECHAT\n attached() {\n this.init();\n },\n detached() {\n clearInterval(this.intervalId);\n clearTimeout(this.timer);\n },\n observers: {\n '**': function (data) {\n const prevData = this._prevData || this.data;\n this._prevData = { ...data };\n if (prevData.autoShowDay !== data.autoShowDay) {\n this.setData({\n showDay: data.autoShowDay ? this.data.countdownDay !== '0' : true,\n });\n }\n },\n },\n\n /// #endif\n});\n"
},
{
"path": "src/Countdown/props.ts",
"content": "export interface ICountdownProps {\n className?: string; // 容器的 class\n countdownEndTime?: string; // 倒计时结束时间戳\n countdownStartTime?: string; // 倒计时开始的时间戳\n time?: number; // 数字格式的倒计时时间长度，优先级比时间戳低\n countdownType?: '' | 'day'; // 倒计时类型，目前支持普通的和天维度的\n autoShowDay?: boolean; // 自动展示\"天\"\n onCountdownChange?: () => void; // 倒计时变化时的回调\n onCountdownFinish?: () => void; // 倒计时结束回调\n}\n\nexport const CountdownDefaultProps: ICountdownProps = {\n className: '',\n time: 0,\n countdownStartTime: '',\n countdownEndTime: '', // 倒计时结束时间戳\n countdownType: '',\n autoShowDay: true,\n onCountdownChange: () => {}, // 倒计时变化时的回调\n onCountdownFinish: () => {}, // 倒计时结束回调\n};\n"
},
{
"path": "src/Countdown/variable.less",
"content": "@import (reference) '../style/variables.less';\n@import (reference) '../style/themes/index.less';\n\n@ant-countdown-color: var(--ant-countdown-color, @COLOR_TEXT_SECONDARY);\n@ant-countdown-number-color: var(--ant-countdown-number-color, @COLOR_WHITE_CHANGE);\n@ant-countdown-number-bg: var(--ant-countdown-number-bg, @COLOR_BRAND1);\n"
},
{
"path": "src/DatePicker/RangePicker/index.axml",
"content": "#000000
| #000000
| Range Selector Shadow Color |\n| --range-picker-item-color | #333333
| #c5cad1
| Range Selector Item Color |\n| --range-picker-active-color | #1677ff
| #3086ff
| Range Selector Activity Color |\n| --range-picker-placeholder-color | #cccccc
| #474747
| Range selector placeholder color |\n| --range-picker-shadow-color-faded | rgba(0, 0, 0, 0.9)
| rgba(0, 0, 0, 0.9)
| Range Selector Shadow Color (Faded) |\n"
},
{
"path": "src/DatePicker/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n \"ant-picker\": \"../Picker/index\"\n }\n}\n"
},
{
"path": "src/DatePicker/index.less",
"content": "\n"
},
{
"path": "src/DatePicker/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 数据录入\n order: 10\ntoc: 'content'\nsupportPlatform: ['alipay', 'wechat']\n---\n\n# DatePicker 时间选择器\n\n相比于原生 `my.datePicker`，实现了 iOS 与 Android 端体验一致。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-date-picker\": \"antd-mini/es/DatePicker/index\",\n \"ant-range-picker\": \"antd-mini/es/DatePicker/RangePicker/index\"\n#endif\n#if WECHAT\n \"ant-date-picker\": \"antd-mini/DatePicker/index\",\n \"ant-range-picker\": \"antd-mini/DatePicker/RangePicker/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n> `defaultValue` 属性为`dayjs` 能够解析的时间戳或对象。\n\n```xml\n#000000
| #000000
| 范围选择器阴影颜色 |\n| --range-picker-item-color | #333333
| #c5cad1
| 范围选择器项颜色 |\n| --range-picker-active-color | #1677ff
| #3086ff
| 范围选择器活动项颜色 |\n| --range-picker-placeholder-color | #cccccc
| #474747
| 范围选择器占位符颜色 |\n| --range-picker-shadow-color-faded | rgba(0, 0, 0, 0.9)
| rgba(0, 0, 0, 0.9)
| 范围选择器阴影颜色（褪色） |\n"
},
{
"path": "src/DatePicker/index.ts",
"content": "import dayjs from 'dayjs';\nimport equal from 'fast-deep-equal';\nimport mixinValue from '../mixins/value';\nimport { resolveEventValue, resolveEventValues } from '../_util/platform';\nimport {\n Component,\n getValueFromProps,\n triggerEvent,\n triggerEventOnly,\n triggerEventValues,\n} from '../_util/simply';\nimport { assertAilpayNativeNotSupport } from '../_util/support';\nimport { DatePickerDefaultProps } from './props';\nimport {\n getDateByValue,\n getRangeData,\n getValidValue,\n getValueByDate,\n} from './util';\n\nassertAilpayNativeNotSupport('DatePicker');\n\nComponent({\n props: DatePickerDefaultProps,\n data: {\n currentValue: [], // 当前picker选中值，didmount、弹窗打开、picker变化时更新\n formattedValueText: '',\n columns: [], // 可选项，didmound、弹窗打开、picker变化时更新\n forceUpdate: 0, // 强制更新picker组件，已知需处理的情况：value超限，但是需要更新format，由于picker的参数均未变化，无法触发picker的渲染\n visible: null,\n },\n pickerVisible: false,\n methods: {\n // visible受控判断\n isVisibleControlled() {\n /// #if ALIPAY\n return 'visible' in getValueFromProps(this);\n /// #endif\n /// #if WECHAT\n return getValueFromProps(this, 'visible') !== null;\n /// #endif\n },\n // 当前选中的picker值，处理无cValue时的情况，优先取当前时间，不在时间范围内取开始时间\n getCurrentValueWithCValue(currentProps) {\n const realValue = this.getValue();\n const { min, max, precision, defaultPickerValue } = currentProps;\n if (realValue) {\n return getValueByDate(realValue, precision);\n }\n // 处理默认值\n let baseDate: Date | null = null;\n if (defaultPickerValue) {\n try {\n // 判断defaultPickerValue用户配置格式\n let defaultDate = dayjs(defaultPickerValue, [\n 'YYYY-MM-DD',\n 'YYYY/MM/DD',\n 'HH:mm:ss',\n 'HH:mm',\n 'HH',\n ]);\n if (\n !defaultDate.isValid() &&\n typeof defaultPickerValue === 'string' &&\n defaultPickerValue.includes(':')\n ) {\n const [hours, minutes, seconds] = defaultPickerValue\n .split(':')\n .map(Number);\n const now = dayjs();\n defaultDate = now\n .set('hour', hours || 0)\n .set('minute', minutes || 0)\n .set('second', seconds || 0);\n }\n baseDate = defaultDate.isValid() ? defaultDate.toDate() : new Date();\n } catch (e) {\n baseDate = new Date();\n }\n } else {\n // 没有 defaultPickerValue 时，回退原逻辑\n const now = new Date();\n const minDayjs = this.getMin(min);\n const maxDayjs = this.getMax(max);\n if (dayjs(now).isBefore(minDayjs) || dayjs(now).isAfter(maxDayjs)) {\n baseDate = minDayjs.toDate();\n } else {\n baseDate = now;\n }\n }\n\n // 获取最大最小日期\n const minDayjs = this.getMin(min);\n const maxDayjs = this.getMax(max);\n\n // 校验日期\n let adjustedDate = dayjs(baseDate);\n // 强制对齐\n if (adjustedDate.isBefore(minDayjs)) {\n adjustedDate = minDayjs;\n } else if (adjustedDate.isAfter(maxDayjs)) {\n adjustedDate = maxDayjs;\n }\n\n return getValueByDate(adjustedDate.toDate(), precision);\n },\n\n getMin(min) {\n return min ? dayjs(min as any) : dayjs().subtract(10, 'year');\n },\n\n getMax(max) {\n return max ? dayjs(max as any) : dayjs().add(10, 'year');\n },\n /**\n * didUpdate、弹窗打开触发\n */\n setCurrentValue(currentProps) {\n const currentValue = this.getCurrentValueWithCValue(currentProps);\n const newColumns = this.generateData(currentValue, currentProps);\n if (!equal(newColumns, this.data.columns)) {\n this.setData(\n {\n columns: newColumns,\n },\n () => {\n this.setData({\n currentValue,\n formattedValueText: this.onFormat(),\n });\n }\n );\n return;\n }\n this.setData({\n currentValue,\n formattedValueText: this.onFormat(),\n });\n },\n\n // 生成选项数据，didmound、picker change、打开弹窗触发\n generateData(currentValue, currentProps) {\n const { precision, min: propsMin, max: propsMax } = currentProps;\n const min = this.getMin(propsMin);\n const max = this.getMax(propsMax);\n if (max < min) {\n return [];\n }\n let currentPickerDay = dayjs();\n if (currentValue.length > 0) {\n currentPickerDay = dayjs(getDateByValue(currentValue));\n }\n if (currentPickerDay < min || currentPickerDay > max) {\n currentPickerDay = min;\n }\n const newColumns = getRangeData(\n precision,\n min,\n max,\n currentPickerDay,\n this.onFormatLabel.bind(this)\n );\n return newColumns;\n },\n onFormatLabel(type, value) {\n const onFormatLabel = getValueFromProps(this, 'onFormatLabel');\n const formatValueByProps = onFormatLabel && onFormatLabel(type, value);\n if (formatValueByProps !== undefined && formatValueByProps !== null) {\n return String(formatValueByProps);\n }\n return this.defaultFormatLabel(type, value);\n },\n defaultFormatLabel(type, value) {\n const suffixMap = {\n year: '年',\n month: '月',\n day: '日',\n hour: '时',\n minute: '分',\n second: '秒',\n };\n return `${value}${suffixMap[type]}`;\n },\n onChange(selectedIdx) {\n const [pmin, pmax, format, precision] = getValueFromProps(this, [\n 'min',\n 'max',\n 'format',\n 'precision',\n ]);\n let [selectedIndex] = resolveEventValues(getValidValue(selectedIdx));\n let date = getDateByValue(selectedIndex);\n const min = this.getMin(pmin);\n const max = this.getMax(pmax);\n if (dayjs(date).isBefore(min)) {\n date = min.toDate();\n selectedIndex = getValueByDate(date, precision);\n }\n if (dayjs(date).isAfter(max)) {\n date = max.toDate();\n selectedIndex = getValueByDate(date, precision);\n }\n const newColumns = this.generateData(\n selectedIndex,\n getValueFromProps(this)\n );\n\n if (!equal(newColumns, this.data.columns)) {\n this.setData(\n {\n columns: newColumns,\n },\n () => {\n this.setData({ currentValue: selectedIndex });\n const date = getDateByValue(selectedIndex);\n triggerEventValues(this, 'pickerChange', [\n date,\n dayjs(date).format(format),\n ]);\n }\n );\n } else {\n this.setData({ currentValue: selectedIndex });\n const date = getDateByValue(selectedIndex);\n\n triggerEventValues(this, 'pickerChange', [\n date,\n dayjs(date).format(format),\n ]);\n }\n },\n\n onCancel(e) {\n triggerEventOnly(this, 'cancel', e);\n },\n\n onOk() {\n const { currentValue } = this.data;\n const format = getValueFromProps(this, 'format');\n const date = getDateByValue(currentValue);\n if (!this.isControlled()) {\n this.update(date);\n }\n triggerEventValues(this, 'ok', [date, dayjs(date).format(format)]);\n },\n defaultFormat(value, valueStr) {\n const format = getValueFromProps(this, 'format');\n if (format && valueStr) {\n return valueStr;\n }\n return '';\n },\n onFormat() {\n const [format, onFormat] = getValueFromProps(this, [\n 'format',\n 'onFormat',\n ]);\n const realValue = this.getValue();\n const formatValueByProps =\n onFormat &&\n onFormat(realValue, realValue ? dayjs(realValue).format(format) : null);\n if (formatValueByProps !== undefined && formatValueByProps !== null) {\n return formatValueByProps;\n }\n return this.defaultFormat(\n realValue,\n realValue ? dayjs(realValue).format(format) : null\n );\n },\n\n onVisibleChange(visible) {\n this.pickerVisible = visible;\n if (!this.isVisibleControlled() && visible) {\n this.setCurrentValue(getValueFromProps(this));\n }\n triggerEvent(this, 'visibleChange', resolveEventValue(visible));\n },\n },\n\n mixins: [\n mixinValue({\n transformValue(value) {\n return {\n value: value ? dayjs(value).toDate() : undefined,\n needUpdate: true,\n };\n },\n }),\n ],\n\n /// #if ALIPAY\n onInit() {\n this.pickerVisible = false;\n const [visible, defaultVisible] = getValueFromProps(this, [\n 'visible',\n 'defaultVisible',\n ]);\n this.setData({\n visible: this.isVisibleControlled() ? visible : defaultVisible,\n formattedValueText: this.onFormat(),\n });\n },\n didUpdate(prevProps, prevData) {\n const currentProps = getValueFromProps(this);\n const visible = getValueFromProps(this, 'visible');\n if (this.isVisibleControlled() && !equal(prevProps.visible, visible)) {\n this.pickerVisible = visible;\n this.setData({ visible });\n if (this.pickerVisible) {\n this.setCurrentValue(currentProps);\n }\n }\n if (!this.isEqualValue(prevData)) {\n this.setData({\n forceUpdate: this.data.forceUpdate + 1,\n formattedValueText: this.onFormat(),\n });\n // 展开状态才更新picker的数据，否则下次triggerVisible触发\n if (this.pickerVisible) {\n this.setCurrentValue(currentProps);\n }\n }\n if (!equal(currentProps, prevProps)) {\n if (this.pickerVisible) {\n this.setCurrentValue(currentProps);\n }\n }\n },\n /// #endif\n /// #if WECHAT\n created() {\n this.pickerVisible = false;\n const [visible, defaultVisible] = getValueFromProps(this, [\n 'visible',\n 'defaultVisible',\n ]);\n this.setData({\n visible: this.isVisibleControlled() ? visible : defaultVisible,\n formattedValueText: this.onFormat(),\n });\n },\n observers: {\n '**': function (data) {\n const prevData = this._prevData || this.data;\n this._prevData = { ...data };\n if (!equal(prevData, data)) {\n if (this.pickerVisible) {\n this.setCurrentValue(getValueFromProps(this));\n }\n }\n },\n 'mixin.value': function () {\n this.setData({\n forceUpdate: this.data.forceUpdate + 1,\n formattedValueText: this.onFormat(),\n });\n // 展开状态才更新picker的数据，否则下次triggerVisible触发\n if (this.pickerVisible) {\n this.setCurrentValue(getValueFromProps(this));\n }\n },\n 'visible': function (data) {\n const prevVisible = this._prevVisible;\n this._prevVisible = data;\n const currentProps = getValueFromProps(this);\n const visible = getValueFromProps(this, 'visible');\n if (this.isVisibleControlled() && prevVisible !== visible) {\n this.pickerVisible = visible;\n this.setData({\n visible,\n });\n if (this.pickerVisible) {\n this.setCurrentValue(currentProps);\n }\n }\n },\n },\n /// #endif\n});\n"
},
{
"path": "src/DatePicker/props.ts",
"content": "import { IBaseProps } from '../_util/base';\n\nexport type PickerValue = Date | string | number;\n/**\n * @description 对话框\n */\nexport interface IDatePickerProps extends IBaseProps {\n visible?: boolean;\n defaultVisible?: boolean;\n /**\n * @desciption 动画类型\n * @default \"transform\"\n */\n animationType?: 'transform' | 'position';\n /**\n * @description 时间格式化显示，例如YYYY-MM-DD\n */\n format?: string;\n /**\n * @description 最小值\n * @default 十年前\n */\n min?: PickerValue;\n /**\n * @description 最大值\n * @default 十年后\n */\n max?: PickerValue;\n /**\n * @description 当前数据\n */\n value?: PickerValue;\n /**\n * @description 默认值\n */\n defaultValue?: PickerValue;\n /**\n * @description 标题\n */\n title?: string;\n /**\n * @description 确定按钮文案\n * @default \"确定\"\n */\n okText?: string;\n /**\n * @description 取消文案\n * @default \"取消\"\n */\n cancelText?: string;\n /**\n * @description 提示文案\n * @default '请选择'\n */\n placeholder?: string;\n /**\n * @description 精度\n * @default 'day'\n */\n precision: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';\n // | 'week'\n // | 'week-day';\n\n /**\n * @description 点击蒙层是否可以关闭\n * @default false\n */\n maskClosable?: boolean;\n /**\n * @description 弹出框类名\n */\n popClassName?: string;\n\n /**\n * @description 弹出框样式\n */\n popStyle?: string;\n /**\n * @description 是否禁用\n */\n disabled?: boolean;\n /**\n * @description 是否只读\n */\n readonly?: boolean;\n /**\n *@description 选中框样式\n * 版本要求： 支付宝小程序基础库 1.10.0 及以上\n */\n indicatorStyle?: string;\n\n /**\n *@description 选中框类名\n * 版本要求： 支付宝小程序基础库 1.10.0 及以上\n */\n indicatorClassName?: string;\n\n /**\n * @description 蒙层的样式。\n * 版本要求： 支付宝小程序基础库 1.10.0 及以上\n */\n maskStyle?: string;\n\n /**\n * @description 蒙层的类名。\n * 版本要求： 支付宝小程序基础库 1.10.0 及以上\n */\n maskClassName?: string;\n /**\n * @description 点击确认回调\n */\n onOk?: (date: PickerValue, dateStr: string, e: Record#ffffff
| #1a1a1a
| Modal Box Background Color |\n| --dialog-title-color | #333333
| #c5cad1
| Modal Box Title Color |\n| --dialog-content-color | #333333
| #c5cad1
| Modal Box Content Color |\n| --dialog-close-text-color | #999999
| #616161
| Modal Box Close Button Text Color |\n"
},
{
"path": "src/Dialog/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n \"ant-button\": \"../Button/index\",\n \"ant-icon\": \"../Icon/index\",\n \"ant-popup\": \"../Popup/index\"\n }\n}\n"
},
{
"path": "src/Dialog/index.less",
"content": "@import (reference) './variable.less';\n@import (reference) '../style/mixins/hairline.less';\n\n@modalPrefix: ant-dialog;\n\n.@{modalPrefix} {\n &-body {\n width: 560 * @rpx;\n background-color: @dialog-background-color;\n padding: 48 * @rpx 44 * @rpx;\n display: flex;\n flex-direction: column;\n border-radius: 48 * @rpx;\n &-header {\n display: block;\n width: calc(100% + @dialog-header-padding);\n border-top-left-radius: 48 * @rpx;\n border-top-right-radius: 48 * @rpx;\n margin: -48 * @rpx -44 * @rpx 36 * @rpx -44 * @rpx;\n /// #if ALIPAY\n margin: -64 * @rpx -44 * @rpx 24 * @rpx -44 * @rpx;\n /// #endif\n }\n &-title {\n line-height: 56 * @rpx;\n text-align: center;\n color: @dialog-title-color;\n padding-bottom: 32 * @rpx;\n\n font-weight: 500;\n font-size: 40 * @rpx;\n }\n\n &-content {\n line-height: 42 * @rpx;\n padding-bottom: 24 * @rpx;\n font-size: 32 * @rpx;\n color: @dialog-content-color;\n text-align: center;\n }\n &-footer {\n padding: 48 * @rpx 4 * @rpx 0 4 * @rpx;\n &-vertical {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: column;\n .ant-dialog-body-footer-button {\n width: 100%;\n margin-bottom: 24 * @rpx;\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n &-horizontal {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n .ant-dialog-body-footer-button {\n flex: 1;\n margin-right: 24 * @rpx;\n &:last-child {\n margin-right: 0;\n }\n }\n }\n }\n }\n &-close {\n top: 72rpx;\n position: relative;\n left: 50%;\n margin-left: -30 * @rpx;\n z-index: 3;\n width: 60 * @rpx;\n height: 60 * @rpx;\n font-size: 72 * @rpx;\n color: @dialog-close-text-color;\n }\n .ant-popup-content.ant-popup-center {\n min-height: 0;\n padding: 0;\n }\n}\n"
},
{
"path": "src/Dialog/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 反馈引导\n order: 12\ntoc: 'content'\n---\n\n# Dialog 对话框\n\n当应用中需要比较明显的对用户当前的操作行为进行警示或提醒时，可以使用对话框。用户需要针对对话框进行操作后方可结束。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-dialog\": \"antd-mini/es/Dialog/index\"\n#endif\n#if WECHAT\n \"ant-dialog\": \"antd-mini/Dialog/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n```xml\n#ffffff
| #1a1a1a
| 模态框背景颜色 |\n| --dialog-title-color | #333333
| #c5cad1
| 模态框标题颜色 |\n| --dialog-content-color | #333333
| #c5cad1
| 模态框内容颜色 |\n| --dialog-close-text-color | #999999
| #616161
| 模态框关闭按钮文字颜色 |\n"
},
{
"path": "src/Dialog/index.sjs.ts",
"content": "function getDirection(\n primaryButtonText,\n secondaryButtonText,\n cancelButtonText,\n type\n) {\n // 不显示按钮区域\n if (!primaryButtonText && !secondaryButtonText && !cancelButtonText) {\n return '';\n }\n // 1个按钮，当纵向处理\n if (\n [primaryButtonText, secondaryButtonText, cancelButtonText].filter(\n (v) => !!v\n ).length === 1\n ) {\n return 'vertical';\n }\n // 三个按钮，必是纵向\n if (primaryButtonText && secondaryButtonText && cancelButtonText) {\n return 'vertical';\n }\n // 两个按钮，在 “标准模式” 是横向；在“强调模式”是纵向\n return type === 'focus' ? 'vertical' : 'horizontal';\n}\n\nexport default { getDirection };\n"
},
{
"path": "src/Dialog/index.ts",
"content": "import {\n Component,\n getValueFromProps,\n triggerEvent,\n triggerEventOnly,\n} from '../_util/simply';\nimport { ModalFunctionalProps } from './props';\n\nComponent({\n props: ModalFunctionalProps,\n methods: {\n onClose() {\n triggerEventOnly(this, 'close');\n },\n onMaskClose() {\n const maskClosable = getValueFromProps(this, 'maskClosable');\n if (maskClosable) {\n triggerEventOnly(this, 'close');\n }\n },\n onButtonTap(e) {\n const onButtonTap = getValueFromProps(this, 'onButtonTap');\n /// #if ALIPAY\n // 按钮点击没有回调的场景直接关闭弹框\n if (!onButtonTap) {\n return this.onClose();\n }\n /// #endif\n const { item } = e.currentTarget.dataset;\n triggerEvent(this, 'buttonTap', item, e);\n },\n onPrimaryButtonTap() {\n triggerEventOnly(this, 'primaryButtonTap');\n },\n onSecondaryButtonTap() {\n triggerEventOnly(this, 'secondaryButtonTap');\n },\n onCancelButtonTap() {\n triggerEventOnly(this, 'cancelButtonTap');\n },\n },\n});\n"
},
{
"path": "src/Dialog/props.ts",
"content": "import { IBaseProps } from '../_util/base';\n\n/**\n * @description 对话框，当应用中需要比较明显的对用户当前的操作行为进行警示或提醒时，可以使用对话框。用户需要针对对话框进行操作后方可结束。\n */\n\nexport interface Button {\n /**\n * @description 按钮名称\n */\n text: string;\n /**\n * @description 按钮样式\n * @default primary\n */\n type: string;\n /**\n * @description 按钮置灰\n * @default false\n */\n disabled: boolean;\n /**\n * @description 按钮唯一标识\n */\n id: string;\n}\nexport interface Footer {\n /**\n * @description 按钮列表\n */\n buttons: Button[];\n /**\n * @description 按钮布局方式\n */\n layout: 'vertical' | 'horizontal';\n}\nexport interface IDialogProps extends IBaseProps {\n /**\n * @description Modal body类名\n */\n bodyClassName: string;\n /**\n * @description Modal body样式\n */\n bodyStyle: string;\n /**\n * @description 遮罩层类名\n */\n maskClassName: string;\n /**\n * @description 遮罩层样式\n */\n maskStyle: string;\n /**\n * @description 是否可点击蒙层关闭\n * @default true\n */\n maskClosable: boolean;\n /**\n * @description 是否显示右上角的关闭按钮。只有在 type 为 focus 生效\n */\n closable: boolean;\n /**\n * @description 过渡动画时长，单位毫秒\n */\n duration: number;\n /**\n * @description 是否开启过渡动画\n */\n animation: boolean;\n /**\n * @description 弹窗层级\n */\n zIndex: number;\n /**\n * @description 标题\n */\n title: string;\n /**\n * @description 内容\n */\n content: string;\n /**\n * @description 是否可见，受控模式\n * @default false\n */\n visible: boolean;\n /**\n * @description 是否关闭后销毁内部元素\n * @default false\n */\n destroyOnClose?: boolean;\n /**\n * @description 底部按钮列表\n */\n footer: Footer;\n /**\n * @description 正常模式下 弹框头图, 氛围弹框场景下此图片不展示\n */\n headerImage: string;\n /**\n * @description 触发关闭时回调\n */\n onClose: () => void;\n /**\n * @description 按钮点击事件\n */\n onButtonTap?: (buttonItem) => void;\n}\n\nexport const ModalDefaultProps: Partial#333333
| #c5cad1
| Split line text color |\n| --divider-border-color | #e5e5e5
| #2b2b2b2
| Split Line Border Color |\n"
},
{
"path": "src/Divider/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n }\n}\n"
},
{
"path": "src/Divider/index.less",
"content": "@import (reference) './variable.less';\n@import '../style/mixins/hairline.less';\n\n@dividerPrefix: ant-divider;\n\n.@{dividerPrefix}-horizontal {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n padding: @v-spacing-standard 0;\n\n &-text {\n font-size: @font-size-subtitle;\n color: @divider-text-color;\n margin: 0 32 * @rpx;\n }\n\n &-left,\n &-right {\n border-bottom: @border-width-standard solid @divider-border-color;\n }\n}\n\n.@{dividerPrefix}-vertical {\n margin: 0 16 * @rpx;\n height: 32 * @rpx;\n border-right: @border-width-standard solid @divider-border-color;\n}\n"
},
{
"path": "src/Divider/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 布局\n order: 1\ntoc: 'content'\n---\n\n# Divider 分割线\n\n区隔内容的分割线。对不同章节的文本段落进行分割。对行内文字/链接进行分割，例如表格的操作列。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-divider\": \"antd-mini/es/Divider/index\"\n#endif\n#if WECHAT\n \"ant-divider\": \"antd-mini/Divider/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n```xml\n#333333
| #c5cad1
| 分割线文本颜色 |\n| --divider-border-color | #e5e5e5
| #2b2b2b2
| 分割线边框颜色 |\n"
},
{
"path": "src/Divider/index.sjs.ts",
"content": "const getLineWidthFlex = (textPosition, text) => {\n if (!text) {\n return [1, 0];\n }\n if (textPosition === 'left') {\n return [1, 5];\n }\n\n if (textPosition === 'right') {\n return [5, 1];\n }\n return [1, 1];\n}\n\nexport default {\n getLineWidthFlex\n}"
},
{
"path": "src/Divider/index.ts",
"content": "import { Component } from '../_util/simply';\nimport { DividerFunctionalProps } from './props';\n\nComponent({ props: DividerFunctionalProps });\n"
},
{
"path": "src/Divider/props.ts",
"content": "import { IBaseProps } from '../_util/base';\n\nexport interface IDividerProps extends IBaseProps {\n lineColor: string;\n lineHeight: number;\n lineType: 'solid' | 'dashed' | 'dotted';\n lineWidth: number;\n text: string;\n textStyle: string;\n textClassName: string;\n textPosition: 'left' | 'center' | 'right';\n direction: 'horizontal' | 'vertical';\n}\n\nexport const DividerDefaultProps: Partial#333333
| #c5cad1
| Empty status text color |\n| --empty-asisst-text-color | #999999
| #616161
| Empty state secondary text color |\n"
},
{
"path": "src/Empty/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n \"ant-button\": \"../Button/index\",\n \"ant-auto-resize\": \"../AutoResize/index\"\n }\n}\n"
},
{
"path": "src/Empty/index.less",
"content": "@import (reference) './variable.less';\n\n@emptyPrefix: ant-empty;\n\n.@{emptyPrefix} {\n text-align: center;\n &-normal {\n .ant-empty-image-element {\n width: @empty-normal-width;\n height: @empty-normal-height;\n }\n .ant-empty-text {\n &-main {\n color: @empty-text-color;\n font-size: @sizeFont8;\n margin-top: @empty-margin-large;\n }\n &-sub {\n margin-top: 12 * @rpx;\n color: @empty-asisst-text-color;\n }\n }\n .ant-empty-button {\n padding-top: 80 * @rpx;\n }\n }\n\n &-small {\n .ant-empty-image-element {\n width: @empty-small-width;\n height: @empty-small-height;\n }\n .ant-empty-text {\n &-main {\n color: @empty-asisst-text-color;\n font-size: @sizeFont6;\n margin-top: @empty-margin-large;\n }\n &-sub {\n color: @COLOR_TEXT_WEAK;\n margin-top: 8 * @rpx;\n }\n }\n .ant-empty-button {\n padding-top: @empty-margin-middle;\n }\n }\n\n &-image {\n display: flex;\n justify-content: center;\n }\n\n &-text {\n margin-top: @v-spacing-large;\n line-height: @empty-text-line-height;\n\n &-main {\n color: @COLOR_TEXT_PRIMARY;\n font-size: @empty-font-size-large;\n }\n\n &-sub {\n font-size: @empty-font-size-common;\n margin-top: @empty-margin-middle;\n line-height: @empty-sub-line-height;\n }\n }\n\n &-button {\n &-layout-horizontal {\n display: flex;\n justify-content: center;\n align-items: center;\n .ant-button {\n margin-right: @empty-horizontal-button-gap;\n &:last-child {\n margin-right: 0;\n }\n }\n }\n &-layout-vertical {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n .ant-button {\n min-width: @empty-vertical-button-width;\n margin-bottom: @empty-vertical-button-gap;\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n }\n\n &-extra {\n padding-top: @empty-margin-middle;\n }\n}\n"
},
{
"path": "src/Empty/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 数据展示\n order: 9\ntoc: 'content'\n---\n\n# Empty 空状态\n\n使用场景插画来作为空状态场景的反馈提示，在需要展示空状态页面或者局部空状态区块时使用。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-empty\": \"antd-mini/es/Empty/index\"\n#endif\n#if WECHAT\n \"ant-empty\": \"antd-mini/Empty/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n```xml\n#333333
| #c5cad1
| 空状态文本颜色 |\n| --empty-asisst-text-color | #999999
| #616161
| 空状态辅助文本颜色 |\n"
},
{
"path": "src/Empty/index.ts",
"content": "import { Component, IPlatformEvent, triggerEvent } from '../_util/simply';\nimport { EmptyFunctionalProps } from './props';\n\nComponent({\n props: EmptyFunctionalProps,\n methods: {\n onClickButton(e: IPlatformEvent) {\n const { item } = e.currentTarget.dataset;\n triggerEvent(this, 'clickButton', item);\n },\n },\n});\n"
},
{
"path": "src/Empty/props.ts",
"content": "import { IBaseProps } from '../_util/base';\n\n/**\n * @description 空状态\n */\n\ninterface Button {\n /**\n * @description 按钮文案\n */\n text: string;\n /**\n * @description 按钮类型\n */\n type: string;\n}\n\nexport interface IEmptyProps extends IBaseProps {\n /**\n * @description 主文案\n */\n title: string;\n\n /**\n * @description 副文案\n */\n message: string;\n\n /**\n * @description 图片路径\n */\n image: string;\n /**\n * @description 图片模式\n */\n imageMode: string;\n /**\n * @description 按钮信息\n */\n buttonInfo: {\n /**\n * @description 按钮信息\n * @default horizontal\n */\n layout: 'vertical' | 'horizontal';\n list: Button[];\n };\n /**\n * @description 空状态尺寸\n * @default normal\n */\n size: 'small' | 'normal';\n /**\n * @description 按钮点击事件\n */\n onClickButton: (button: Button) => void;\n}\n\nexport const EmptyDefaultProps: Partial#333333
| #c5cad1
| Feedback Text Color |\n| --feedback-background-color | rgba(216, 216, 216, 0.42)
| rgba(216, 216, 216, 0.42)
| Feedback Background Color |\n| --feedback-mask-color | rgba(0, 0, 0, 0.25)
| rgba(0, 0, 0, 0.25)
| Feedback Mask Color |\n| --feedback-content-background-color | #ffffff
| #1a1a1a
| Feedback Content Background Color |\n| --feedback-list-background-color | #f5f5f5
| #121212
| Feedback List Background Color |\n| --feedback-list-text-color | #333333
| #c5cad1
| Feedback List Text Color |\n"
},
{
"path": "src/Feedback/index.json",
"content": "{\n \"component\": true,\n \"styleIsolation\": \"shared\",\n \"usingComponents\": {\n \"ant-mask\": \"../Mask/index\",\n \"ant-icon\": \"../Icon/index\",\n \"popover\": \"../Popover/index\"\n }\n}\n"
},
{
"path": "src/Feedback/index.less",
"content": "@import (reference) './variable.less';\n\n@avatarPrefix: ant-feedback;\n\n.@{avatarPrefix} {\n .ant-popover-inner {\n max-width: 100%;\n color: @feedback-text-color;\n background: @feedback-content-background-color;\n }\n .ant-popover-arrow {\n border-bottom-color: @feedback-content-background-color;\n }\n &-popoverType-default {\n .ant-popover-content {\n width: 568 * @rpx;\n }\n }\n &-popoverType-circle {\n .ant-popover-content {\n width: max-content;\n transform: translate(-50%, 60 * @rpx);\n left: 50% !important;\n top: 50% !important;\n bottom: 50% !important;\n right: 50% !important;\n }\n }\n &-show {\n z-index: 9;\n position: relative;\n }\n &-mask {\n z-index: 2;\n background: @feedback-mask-color;\n }\n &-trigger {\n position: relative;\n }\n &-guide {\n position: absolute;\n background: @feedback-background-color;\n border-radius: 50vh;\n width: 48 * @rpx;\n height: 48 * @rpx;\n z-index: 999;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n display: flex;\n justify-content: center;\n align-items: center;\n &-content {\n background: @feedback-content-background-color;\n border-radius: 50vh;\n width: 24 * @rpx;\n height: 24 * @rpx;\n }\n }\n &-content {\n background: @feedback-content-background-color;\n border-radius: 24 * @rpx;\n &-card {\n display: flex;\n flex-direction: column;\n padding: 24 * @rpx;\n background: @feedback-content-background-color;\n .ant-feedback-content-list {\n flex-direction: column;\n gap: 16 * @rpx;\n }\n .ant-feedback-content-list-item {\n background: @feedback-list-background-color;\n border-radius: 50vh;\n padding: 18 * @rpx 24 * @rpx;\n }\n }\n &-popover {\n padding: 24 * @rpx;\n .ant-feedback-content-list {\n flex-direction: column;\n gap: 16 * @rpx;\n }\n .ant-feedback-content-list-item {\n background: @feedback-list-background-color;\n border-radius: 50vh;\n padding: 18 * @rpx 24 * @rpx;\n }\n }\n &-title {\n font-weight: 500;\n font-size: 28 * @rpx;\n color: @feedback-list-text-color;\n letter-spacing: 0;\n padding-bottom: 20 * @rpx;\n padding-top: 4 * @rpx;\n }\n &-list {\n display: flex;\n flex-direction: column;\n &-item {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n .ant-icon,\n &-image {\n font-size: 36 * @rpx;\n width: 36 * @rpx;\n height: 36 * @rpx;\n margin-right: 16 * @rpx;\n }\n &-text {\n font-weight: 400;\n font-size: 26 * @rpx;\n color: @feedback-list-text-color;\n line-height: 37 * @rpx;\n }\n }\n }\n }\n}\n"
},
{
"path": "src/Feedback/index.md",
"content": "---\nnav:\n path: /components\ngroup:\n title: 反馈引导\n order: 15\ntoc: content\nsupportPlatform: ['alipay', 'wechat']\n---\n\n# Feedback 信息反馈\n\n反馈多作用于分发场景。\n\n## 引入\n\n在 `index.json` 中引入组件\n\n```json\n\"usingComponents\": {\n#if ALIPAY\n \"ant-feedback\": \"antd-mini/es/Feedback/index\"\n#endif\n#if WECHAT\n \"ant-feedback\": \"antd-mini/Feedback/index\"\n#endif\n}\n```\n\n## 代码示例\n\n### 基本使用\n\n```xml\n#333333
| #c5cad1
| 反馈文本颜色 |\n| --feedback-background-color | rgba(216, 216, 216, 0.42)
| rgba(216, 216, 216, 0.42)
| 反馈背景颜色 |\n| --feedback-mask-color | rgba(0, 0, 0, 0.25)
| rgba(0, 0, 0, 0.25)
| 反馈遮罩颜色 |\n| --feedback-content-background-color | #ffffff
| #1a1a1a
| 反馈内容背景颜色 |\n| --feedback-list-background-color | #f5f5f5
| #121212
| 反馈列表背景颜色 |\n| --feedback-list-text-color | #333333
| #c5cad1
| 反馈列表文本颜色 |\n"
},
{
"path": "src/Feedback/index.ts",
"content": "import { resolveEventValue } from '../_util/platform';\nimport { Component, triggerEvent } from '../_util/simply';\nimport { assertAilpayNativeNotSupport } from '../_util/support';\nimport { FeedbackDefaultProps } from './props';\n\nassertAilpayNativeNotSupport('Feedback');\n\nComponent({\n props: FeedbackDefaultProps,\n methods: {\n handleVisibleChange(visible, e) {\n triggerEvent(this, 'visibleChange', resolveEventValue(visible), e);\n },\n onTapFeedItem(e) {\n const { item } = e.currentTarget.dataset;\n triggerEvent(this, 'tapFeedItem', item, e);\n },\n maskClick(e) {\n triggerEvent(this, 'visibleChange', true, e);\n },\n },\n});\n"
},
{
"path": "src/Feedback/props.ts",
"content": "import { IBaseProps } from '../_util/base';\n\n/**\n * @description 反馈，通过气泡和卡片的形式展示反馈的内容\n */\n\nexport interface FeedItem {\n /**\n * @description 反馈项的图标\n */\n icon?: string;\n /**\n * @description 反馈项的文案\n */\n text: string;\n /**\n * @description 反馈项的图片 和icon互斥 优先展示icon\n */\n image?: string;\n /**\n * @description 反馈项的唯一标识\n */\n id?: string;\n}\nexport interface IFeedbackProps extends IBaseProps {\n /**\n * @description 是否可见\n * @default false\n */\n visible: boolean;\n /**\n * @description 反馈类型\n * @default card\n */\n type: 'popover' | 'card' | 'float';\n /**\n * @description 反馈的标题\n */\n title?: string;\n /**\n * @description 反馈气泡的位置\n * @default bottom-right\n */\n placement: string;\n /**\n * @description 反馈的列表\n */\n list?: FeedItem[];\n /**\n * @description 最外层的样式名\n */\n className: string;\n /**\n * @description 最外层的样式字符串\n */\n style: string;\n /**\n * @description 气泡反馈的引导样式\n */\n popoverType: 'circle' | 'default';\n /**\n * @description 气泡位置是否自适应\n * @default true\n */\n autoAdjustOverflow;\n /**\n * 展示状态改变的勾子\n * @param visible 反馈内容展示状态\n */\n onVisibleChange: (visible) => void;\n /**\n * 反馈项点击回调\n * @param item 点击的反馈项内容\n */\n onTapFeedItem: (item) => void;\n}\n\nexport const FeedbackDefaultProps: Partial